Oliver/presenton
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: font support in new templates

Browse source
This commit is contained in:
shiva raj badu 2026-04-09 13:09:49 +05:45
parent 950ca497b1
commit de290281eb
No known key found for this signature in database
44 changed files with 1925 additions and 1816 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
electron/servers/nextjs/app/globals.css
View file

@ -82,6 +82,40 @@ strong {
}
@font-face {
font-family: 'Times New Roman';
src: url('https: //presenton-public.s3.ap-southeast-1.amazonaws.com/static/fonts/times.ttf') format('truetype');
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('https: //presenton-public.s3.ap-southeast-1.amazonaws.com/static/fonts/HelveticaNeueBold.otf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('https: //presenton-public.s3.ap-southeast-1.amazonaws.com/static/fonts/HelveticaNeueMedium.otf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('https: //presenton-public.s3.ap-southeast-1.amazonaws.com/static/fonts/HelveticaNeueRoman.otf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
::selection {
background-color: hsl(var(--chart-1));

4
electron/servers/nextjs/app/presentation-templates/Code/CodeSlide01RoadmapCover.tsx
View file

@ -31,7 +31,8 @@ export type SchemaType = z.infer<typeof Schema>;
const CodeSlide01RoadmapCover = ({ data }: { data: Partial<SchemaType> }) => {
return (
return (<>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet" />
<div
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
@ -58,6 +59,7 @@ const CodeSlide01RoadmapCover = ({ data }: { data: Partial<SchemaType> }) => {
{data.pageLabel}
</div>
</div>
</>
);
};

93
electron/servers/nextjs/app/presentation-templates/Code/CodeSlide02CodeExplanationSplit.tsx
View file

@ -64,63 +64,66 @@ const CodeSlide02CodeExplanationSplit = ({
}) => {
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
backgroundColor: "var(--background-color,#101B37)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
<>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet" />
<div
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
backgroundColor: "var(--background-color,#101B37)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
<div className="relative z-10 flex h-full flex-col">
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{data.title}</h2>
<div className="relative z-10 flex h-full flex-col">
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{data.title}</h2>
<div className="mt-[22px] grid min-h-0 flex-1 grid-cols-2 gap-[34px]">
<div
className=" flex-1 border rounded-[18px]"
style={{
backgroundColor: "var(--card-color,#0F172B80)",
borderColor: "var(--stroke,#1D293D80)",
}}
>
<p
className="text-[18px] capitalize rounded-t-[18px] border px-[26px] py-3"
<div className="mt-[22px] grid min-h-0 flex-1 grid-cols-2 gap-[34px]">
<div
className=" flex-1 border rounded-[18px]"
style={{
color: "var(--background-text,#CAD5E2)",
backgroundColor: "var(--card-color,#0F172BCC)",
backgroundColor: "var(--card-color,#0F172B80)",
borderColor: "var(--stroke,#1D293D80)",
}}
>
{data.codeSnippet?.fileName}
</p>
<pre className=" w-full px-[32px] py-[20px] whitespace-pre-wrap break-words overflow-hidden" style={{ color: "var(--background-text,#ffffff)" }}>
<p
className="text-[18px] capitalize rounded-t-[18px] border px-[26px] py-3"
style={{
color: "var(--background-text,#CAD5E2)",
backgroundColor: "var(--card-color,#0F172BCC)",
borderColor: "var(--stroke,#1D293D80)",
}}
>
{data.codeSnippet?.fileName}
</p>
<pre className=" w-full px-[32px] py-[20px] whitespace-pre-wrap break-words overflow-hidden" style={{ color: "var(--background-text,#ffffff)" }}>
<code className="w-full ">
{data.codeSnippet?.content}
</code>
</pre>
</div>
<code className="w-full ">
{data.codeSnippet?.content}
</code>
</pre>
</div>
<div className=" ">
<h3 className="text-[24px] font-medium" style={{ color: "var(--background-text,#f1f4ff)" }}>{data.explanationTitle}</h3>
<p className="mt-[18px] text-[22px] leading-[145%]" style={{ color: "var(--background-text,#d2d9ff)" }}>
{data.explanation}
</p>
<div className=" ">
<h3 className="text-[24px] font-medium" style={{ color: "var(--background-text,#f1f4ff)" }}>{data.explanationTitle}</h3>
<p className="mt-[18px] text-[22px] leading-[145%]" style={{ color: "var(--background-text,#d2d9ff)" }}>
{data.explanation}
</p>
</div>
</div>
</div>
</div>
<div
className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
}}
>
{data.pageLabel}
<div
className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
}}
>
{data.pageLabel}
</div>
</div>
</div>
</>
);
};

139
electron/servers/nextjs/app/presentation-templates/Code/CodeSlide03ApiRequestResponse.tsx
View file

@ -73,43 +73,71 @@ const CodeSlide03ApiRequestResponse = ({
}) => {
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
backgroundColor: "var(--background-color,#101B37)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
<>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet" />
<div
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
backgroundColor: "var(--background-color,#101B37)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
<div className="relative z-10 flex h-full flex-col">
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{data.title}</h2>
<div className="relative z-10 flex h-full flex-col">
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{data.title}</h2>
<div className="mt-[22px] grid flex-1 grid-cols-2 gap-[22px]">
<div className="flex flex-col gap-[12px] ">
<div
className="rounded-[14px] border p-[14px]"
style={{
borderColor: "var(--stroke,#1D293D80)",
backgroundColor: "var(--card-color,#0F172B80)",
}}
>
<div className="flex items-center gap-5 pb-[14px] border-b" style={{ borderColor: "var(--stroke,#1D293D80)" }}>
<div className="mt-[22px] grid flex-1 grid-cols-2 gap-[22px]">
<div className="flex flex-col gap-[12px] ">
<div
className="rounded-[14px] border p-[14px]"
style={{
borderColor: "var(--stroke,#1D293D80)",
backgroundColor: "var(--card-color,#0F172B80)",
}}
>
<div className="flex items-center gap-5 pb-[14px] border-b" style={{ borderColor: "var(--stroke,#1D293D80)" }}>
<p
className="rounded-[12px] px-[23px] py-[10px] text-[14px] uppercase tracking-[0.06em]"
style={{
backgroundColor: "var(--primary-color,#2B7FFF33)",
color: "var(--primary-text,#51A2FF)",
}}
>
{data.method}
</p>
<p className="text-[23px]" style={{ color: "var(--background-text,#dde5ff)" }}>{data.endpoint}</p>
</div>
<p className="mt-[21px] text-[18px] uppercase tracking-[0.08em]" style={{ color: "var(--background-text,#90a1d8)" }}>Headers</p>
<div className="mt-[15px] space-y-[4px] text-[24px]" style={{ color: "var(--background-text,#cbd4f8)" }}>
{data.headers?.map((item) => (
<p key={item} className="text-[18px]" style={{ color: "var(--background-text,#CAD5E2)" }}>{item}</p>
))}
</div>
</div>
<div
className=" flex-1 border rounded-[18px]"
style={{
backgroundColor: "var(--card-color,#0F172B80)",
borderColor: "var(--stroke,#1D293D80)",
}}
>
<p
className="rounded-[12px] px-[23px] py-[10px] text-[14px] uppercase tracking-[0.06em]"
className="text-[18px] capitalize rounded-t-[18px] border p-[14px]"
style={{
backgroundColor: "var(--primary-color,#2B7FFF33)",
color: "var(--primary-text,#51A2FF)",
color: "var(--background-text,#CAD5E2)",
backgroundColor: "var(--card-color,#1D293D80)",
borderColor: "var(--stroke,#1D293D80)",
}}
>
{data.method}
{data.requestSnippet?.fileName}
</p>
<p className="text-[23px]" style={{ color: "var(--background-text,#dde5ff)" }}>{data.endpoint}</p>
</div>
<p className="mt-[21px] text-[18px] uppercase tracking-[0.08em]" style={{ color: "var(--background-text,#90a1d8)" }}>Headers</p>
<div className="mt-[15px] space-y-[4px] text-[24px]" style={{ color: "var(--background-text,#cbd4f8)" }}>
{data.headers?.map((item) => (
<p key={item} className="text-[18px]" style={{ color: "var(--background-text,#CAD5E2)" }}>{item}</p>
))}
<pre className=" w-full px-[14px] py-[20px] whitespace-pre-wrap break-words overflow-hidden" style={{ color: "var(--background-text,#ffffff)" }}>
<code className="w-full ">
{data.requestSnippet?.content}
</code>
</pre>
</div>
</div>
@ -128,55 +156,30 @@ const CodeSlide03ApiRequestResponse = ({
borderColor: "var(--stroke,#1D293D80)",
}}
>
{data.requestSnippet?.fileName}
{data.responseSnippet?.fileName}
</p>
<pre className=" w-full px-[14px] py-[20px] whitespace-pre-wrap break-words overflow-hidden" style={{ color: "var(--background-text,#ffffff)" }}>
<code className="w-full ">
{data.requestSnippet?.content}
{data.responseSnippet?.content}
</code>
</pre>
</div>
</div>
</div>
<div
className=" flex-1 border rounded-[18px]"
style={{
backgroundColor: "var(--card-color,#0F172B80)",
borderColor: "var(--stroke,#1D293D80)",
}}
>
<p
className="text-[18px] capitalize rounded-t-[18px] border p-[14px]"
style={{
color: "var(--background-text,#CAD5E2)",
backgroundColor: "var(--card-color,#1D293D80)",
borderColor: "var(--stroke,#1D293D80)",
}}
>
{data.responseSnippet?.fileName}
</p>
<pre className=" w-full px-[14px] py-[20px] whitespace-pre-wrap break-words overflow-hidden" style={{ color: "var(--background-text,#ffffff)" }}>
<code className="w-full ">
{data.responseSnippet?.content}
</code>
</pre>
</div>
<div
className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
}}
>
{data.pageLabel}
</div>
</div>
<div
className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
}}
>
{data.pageLabel}
</div>
</div>
</>
);
};

103
electron/servers/nextjs/app/presentation-templates/Code/CodeSlide04FeatureGrid.tsx
View file

@ -99,61 +99,64 @@ const CodeSlide04FeatureGrid = ({ data }: { data: Partial<SchemaType> }) => {
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
backgroundColor: "var(--background-color,#101B37)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
<h2 className="text-[64px] font-medium tracking-[-0.03em]" style={{ color: "var(--background-text,#f2f4ff)" }}>{data.title}</h2>
<div className="mt-[26px] grid flex-1 grid-cols-3 items-center h-fit gap-[26px]">
{data?.features?.map((feature) => (
<div
key={feature.title}
className="rounded-[18px] border p-[26px]"
style={{
boxShadow: "0 33.333px 66.667px -16px rgba(0, 0, 0, 0.25)",
borderColor: "var(--stroke,#1D293D80)",
backgroundColor: "var(--card-color,#0F172B80)",
}}
>
<div className="flex items-start justify-between gap-[8px]">
<h3 className="text-[26px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{feature.title}</h3>
<span
className="flex h-[52px] w-[52px] items-center justify-center rounded-full border text-[18px]"
style={{
borderColor: "var(--primary-color,#2B7FFF4D)",
backgroundColor: "var(--primary-color,#2B7FFF33)",
}}
>
<img src={feature.icon.__icon_url__} alt={feature.icon.__icon_query__} className="h-[24px] w-[24px] object-contain"
style={{
filter: "invert(1)",
}}
/>
</span>
</div>
<p className="mt-[12px] text-[18px] leading-[136%]" style={{ color: "var(--background-text,#90A1B9)" }}>{feature.description}</p>
</div>
))}
</div>
<>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet" />
<div
className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
backgroundColor: "var(--background-color,#101B37)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
{data.pageLabel}
<h2 className="text-[64px] font-medium tracking-[-0.03em]" style={{ color: "var(--background-text,#f2f4ff)" }}>{data.title}</h2>
<div className="mt-[26px] grid flex-1 grid-cols-3 items-center h-fit gap-[26px]">
{data?.features?.map((feature) => (
<div
key={feature.title}
className="rounded-[18px] border p-[26px]"
style={{
boxShadow: "0 33.333px 66.667px -16px rgba(0, 0, 0, 0.25)",
borderColor: "var(--stroke,#1D293D80)",
backgroundColor: "var(--card-color,#0F172B80)",
}}
>
<div className="flex items-start justify-between gap-[8px]">
<h3 className="text-[26px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{feature.title}</h3>
<span
className="flex h-[52px] w-[52px] items-center justify-center rounded-full border text-[18px]"
style={{
borderColor: "var(--primary-color,#2B7FFF4D)",
backgroundColor: "var(--primary-color,#2B7FFF33)",
}}
>
<img src={feature.icon.__icon_url__} alt={feature.icon.__icon_query__} className="h-[24px] w-[24px] object-contain"
style={{
filter: "invert(1)",
}}
/>
</span>
</div>
<p className="mt-[12px] text-[18px] leading-[136%]" style={{ color: "var(--background-text,#90A1B9)" }}>{feature.description}</p>
</div>
))}
</div>
<div
className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
}}
>
{data.pageLabel}
</div>
</div>
</div>
</>
);
};

123
electron/servers/nextjs/app/presentation-templates/Code/CodeSlide05ComparisonTable.tsx
View file

@ -50,7 +50,7 @@ export const Schema = z.object({
export type SchemaType = z.infer<typeof Schema>;
function renderCell(value: string) {
if (value.toLowerCase() === "check") {
if (value && value.toLowerCase() === "check") {
return <span className="text-[26px] px-[32px]" style={{ color: "var(--graph-2,#37f08e)" }}>✓</span>;
}
@ -60,83 +60,86 @@ function renderCell(value: string) {
const CodeSlide05ComparisonTable = ({ data }: { data: Partial<SchemaType> }) => {
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
backgroundColor: "var(--background-color,#101B37)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{data.title}</h2>
<>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet" />
<div
className="mt-[22px] min-h-0 flex-1 rounded-[16px] border"
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
backgroundColor: "var(--card-color,#0F172BCC)",
borderColor: "var(--stroke,#1D293D80)",
backgroundColor: "var(--background-color,#101B37)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{data.title}</h2>
<div
className="grid grid-cols-[0.4fr_0.20fr_0.20fr_0.20fr] items-center"
className="mt-[22px] min-h-0 flex-1 rounded-[16px] border"
style={{
color: "var(--background-text,#8ea1da)",
gridTemplateColumns: `repeat(${data?.tableColumns?.length || 1}, 1fr)`,
backgroundColor: "var(--card-color,#0F172BCC)",
borderColor: "var(--stroke,#1D293D80)",
}}
>
<div
className="grid grid-cols-[0.4fr_0.20fr_0.20fr_0.20fr] items-center"
style={{
color: "var(--background-text,#8ea1da)",
gridTemplateColumns: `repeat(${data?.tableColumns?.length || 1}, 1fr)`,
}}
>
{data?.tableColumns?.map((column) => (
<p
key={column}
className="px-[32px] py-[16px] text-[18px] text-center border-b border-r"
style={{
color: "var(--background-text,#ffffff)",
borderColor: "var(--stroke,#1D293D80)",
}}
>
{column}
</p>
))}
</div>
<div className="">
{data?.rows?.map((row) => (
<div
key={row.feature}
className="grid grid-cols-[0.4fr_0.20fr_0.20fr_0.20fr]"
style={{
gridTemplateColumns: `repeat(${data?.tableColumns?.length || 1}, 1fr)`,
}}
>
{data?.tableColumns?.map((column) => (
<p
className="px-[32px] py-[20px] text-center text-[18px] border-b border-r"
key={column}
className="px-[32px] py-[16px] text-[18px] text-center border-b border-r"
style={{
color: "var(--background-text,#d5dcff)",
color: "var(--background-text,#ffffff)",
borderColor: "var(--stroke,#1D293D80)",
}}
>
{row.feature}
{column}
</p>
<div className="flex justify-center items-center text-[18px] border-b border-r" style={{ borderColor: "var(--stroke,#1D293D80)" }}>{renderCell(row.column1)}</div>
<div className="flex justify-center items-center text-[18px] border-b border-r" style={{ borderColor: "var(--stroke,#1D293D80)" }}>{renderCell(row.column2)}</div>
<div className="flex justify-center items-center text-[18px] border-b border-r" style={{ borderColor: "var(--stroke,#1D293D80)" }}>{renderCell(row.column3)}</div>
</div>
))}
))}
</div>
<div className="">
{data?.rows?.map((row) => (
<div
key={row.feature}
className="grid grid-cols-[0.4fr_0.20fr_0.20fr_0.20fr]"
style={{
gridTemplateColumns: `repeat(${data?.tableColumns?.length || 1}, 1fr)`,
}}
>
<p
className="px-[32px] py-[20px] text-center text-[18px] border-b border-r"
style={{
color: "var(--background-text,#d5dcff)",
borderColor: "var(--stroke,#1D293D80)",
}}
>
{row.feature}
</p>
<div className="flex justify-center items-center text-[18px] border-b border-r" style={{ borderColor: "var(--stroke,#1D293D80)" }}>{renderCell(row.column1)}</div>
<div className="flex justify-center items-center text-[18px] border-b border-r" style={{ borderColor: "var(--stroke,#1D293D80)" }}>{renderCell(row.column2)}</div>
<div className="flex justify-center items-center text-[18px] border-b border-r" style={{ borderColor: "var(--stroke,#1D293D80)" }}>{renderCell(row.column3)}</div>
</div>
))}
</div>
</div>
<div
className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
}}
>
{data.pageLabel}
</div>
</div>
<div
className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
}}
>
{data.pageLabel}
</div>
</div>
</>
);
};

111
electron/servers/nextjs/app/presentation-templates/Code/CodeSlide06Workflow.tsx
View file

@ -81,65 +81,68 @@ export type SchemaType = z.infer<typeof Schema>;
const CodeSlide06Workflow = ({ data }: { data: Partial<SchemaType> }) => {
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
backgroundColor: "var(--background-color,#101B37)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{data.title}</h2>
<div className="mt-[52px] grid flex-1 grid-cols-[1fr_auto_1fr_auto_1fr_auto_1fr] items-center gap-[12px]">
{data?.steps?.map((step, index) => (
<Fragment key={`${step.title}-${index}`}>
<div
className="rounded-[18px] border p-[21px] text-center"
style={{
boxShadow: "0 33.333px 66.667px -16px rgba(0, 0, 0, 0.25)",
borderColor: "var(--stroke,#1D293D80)",
backgroundColor: "var(--card-color,#0F172B80)",
}}
>
<div
className="mx-auto flex h-[75px] w-[75px] items-center justify-center rounded-full border"
style={{
borderColor: "var(--primary-color,#2B7FFF80)",
backgroundColor: "var(--primary-color,#2B7FFF33)",
}}
>
<img src={step.icon.__icon_url__} alt={step.icon.__icon_query__} className="h-[37px] w-[37px] object-contain"
style={{
filter: "invert(1)",
}}
/>
</div>
<h3 className="mt-[12px] text-[24px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{step.title}</h3>
<p className="mt-[12px] text-[18px]" style={{ color: "var(--background-text,#90A1B9)" }}>{step.description}</p>
</div>
{index < (data?.steps?.length || 0) - 1 && (
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" viewBox="0 0 43 43" fill="none">
<path d="M8.88892 21.3333H33.7778" stroke="var(--primary-color,#51A2FF)" strokeWidth="3.55556" strokeLinecap="round" strokeLinejoin="round" />
<path d="M21.3334 8.88892L33.7778 21.3334L21.3334 33.7778" stroke="var(--primary-color,#51A2FF)" strokeWidth="3.55556" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)}
</Fragment>
))}
</div>
<>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet" />
<div
className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
backgroundColor: "var(--background-color,#101B37)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
{data.pageLabel}
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{data.title}</h2>
<div className="mt-[52px] grid flex-1 grid-cols-[1fr_auto_1fr_auto_1fr_auto_1fr] items-center gap-[12px]">
{data?.steps?.map((step, index) => (
<Fragment key={`${step.title}-${index}`}>
<div
className="rounded-[18px] border p-[21px] text-center"
style={{
boxShadow: "0 33.333px 66.667px -16px rgba(0, 0, 0, 0.25)",
borderColor: "var(--stroke,#1D293D80)",
backgroundColor: "var(--card-color,#0F172B80)",
}}
>
<div
className="mx-auto flex h-[75px] w-[75px] items-center justify-center rounded-full border"
style={{
borderColor: "var(--primary-color,#2B7FFF80)",
backgroundColor: "var(--primary-color,#2B7FFF33)",
}}
>
<img src={step.icon.__icon_url__} alt={step.icon.__icon_query__} className="h-[37px] w-[37px] object-contain"
style={{
filter: "invert(1)",
}}
/>
</div>
<h3 className="mt-[12px] text-[24px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{step.title}</h3>
<p className="mt-[12px] text-[18px]" style={{ color: "var(--background-text,#90A1B9)" }}>{step.description}</p>
</div>
{index < (data?.steps?.length || 0) - 1 && (
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" viewBox="0 0 43 43" fill="none">
<path d="M8.88892 21.3333H33.7778" stroke="var(--primary-color,#51A2FF)" strokeWidth="3.55556" strokeLinecap="round" strokeLinejoin="round" />
<path d="M21.3334 8.88892L33.7778 21.3334L21.3334 33.7778" stroke="var(--primary-color,#51A2FF)" strokeWidth="3.55556" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)}
</Fragment>
))}
</div>
<div
className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
}}
>
{data.pageLabel}
</div>
</div>
</div>
</>
);
};

91
electron/servers/nextjs/app/presentation-templates/Code/CodeSlide07UseCaseList.tsx
View file

@ -36,55 +36,58 @@ export type SchemaType = z.infer<typeof Schema>;
const CodeSlide07UseCaseList = ({ data }: { data: Partial<SchemaType> }) => {
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
backgroundColor: "var(--background-color,#101B37)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#f2f4ff)" }}>{data.title}</h2>
<div className="mt-[53px] grid flex-1 grid-cols-2 gap-[21px]">
{data?.items?.map((item, index) => (
<div
key={`use-case-${index}`}
className="flex items-center gap-[21px] rounded-[18px] border p-[28px]"
style={{
boxShadow: "0 33.333px 66.667px -16px rgba(0, 0, 0, 0.25)",
borderColor: "var(--stroke,#1D293D80)",
backgroundColor: "var(--card-color,#0F172B80)",
}}
>
<span
className="flex h-[42px] w-[42px] shrink-0 items-center justify-center rounded-full border text-[18px]"
style={{
borderColor: "var(--primary-color,#2B7FFF4D)",
backgroundColor: "var(--primary-color,#2B7FFF33)",
color: "var(--primary-color,#51A2FF)",
}}
>
{index + 1}
</span>
<p className="text-[18px]" style={{ color: "var(--background-text,#d5dcff)" }}>{item}</p>
</div>
))}
</div>
<>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet" />
<div
className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
backgroundColor: "var(--background-color,#101B37)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
{data.pageLabel}
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#f2f4ff)" }}>{data.title}</h2>
<div className="mt-[53px] grid flex-1 grid-cols-2 gap-[21px]">
{data?.items?.map((item, index) => (
<div
key={`use-case-${index}`}
className="flex items-center gap-[21px] rounded-[18px] border p-[28px]"
style={{
boxShadow: "0 33.333px 66.667px -16px rgba(0, 0, 0, 0.25)",
borderColor: "var(--stroke,#1D293D80)",
backgroundColor: "var(--card-color,#0F172B80)",
}}
>
<span
className="flex h-[42px] w-[42px] shrink-0 items-center justify-center rounded-full border text-[18px]"
style={{
borderColor: "var(--primary-color,#2B7FFF4D)",
backgroundColor: "var(--primary-color,#2B7FFF33)",
color: "var(--primary-color,#51A2FF)",
}}
>
{index + 1}
</span>
<p className="text-[18px]" style={{ color: "var(--background-text,#d5dcff)" }}>{item}</p>
</div>
))}
</div>
<div
className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
}}
>
{data.pageLabel}
</div>
</div>
</div>
</>
);
};

45
electron/servers/nextjs/app/presentation-templates/Code/CodeSlide08CodeExplanationText.tsx
View file

@ -32,32 +32,35 @@ export type SchemaType = z.infer<typeof Schema>;
const CodeSlide08CodeExplanationText = ({ data }: { data: Partial<SchemaType> }) => {
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
backgroundColor: "var(--background-color,#101B37)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#f2f4ff)" }}>{data.title}</h2>
<div className="relative z-10 h-full max-w-[560px]">
<h3 className="mt-[34px] text-[24px] font-medium" style={{ color: "var(--background-text,#f1f4ff)" }}>{data.explanationTitle}</h3>
<p className="mt-[16px] text-[22px] leading-[145%]" style={{ color: "var(--background-text,#d2d9ff)" }}>{data.explanation}</p>
</div>
<>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet" />
<div
className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
backgroundColor: "var(--background-color,#101B37)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
{data.pageLabel}
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#f2f4ff)" }}>{data.title}</h2>
<div className="relative z-10 h-full max-w-[560px]">
<h3 className="mt-[34px] text-[24px] font-medium" style={{ color: "var(--background-text,#f1f4ff)" }}>{data.explanationTitle}</h3>
<p className="mt-[16px] text-[22px] leading-[145%]" style={{ color: "var(--background-text,#d2d9ff)" }}>{data.explanation}</p>
</div>
<div
className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
}}
>
{data.pageLabel}
</div>
</div>
</div>
</>
);
};

51
electron/servers/nextjs/app/presentation-templates/Code/CodeSlide09TableOfContent.tsx
View file

@ -72,35 +72,38 @@ const CodeSlide09TableOfContent = ({ data }: { data: Partial<SchemaType> }) => {
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
backgroundColor: "var(--background-color,#101B37)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
<div className="relative z-10 flex h-full flex-col">
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#f2f4ff)" }}>{data.title}</h2>
<div className="mt-[53px] grid flex-1 grid-cols-2 gap-[24px]">
<TocColumn items={leftItems || []} />
<TocColumn items={rightItems || []} />
</div>
</div>
<>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet" />
<div
className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
backgroundColor: "var(--background-color,#101B37)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
{data.pageLabel}
<div className="relative z-10 flex h-full flex-col">
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#f2f4ff)" }}>{data.title}</h2>
<div className="mt-[53px] grid flex-1 grid-cols-2 gap-[24px]">
<TocColumn items={leftItems || []} />
<TocColumn items={rightItems || []} />
</div>
</div>
<div
className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
}}
>
{data.pageLabel}
</div>
</div>
</div>
</>
);
};

85
electron/servers/nextjs/app/presentation-templates/Code/CodeSlide10MetricsSplit.tsx
View file

@ -55,52 +55,55 @@ const CodeSlide10MetricsSplit = ({ data }: { data: Partial<SchemaType> }) => {
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
backgroundColor: "var(--background-color,#101B37)",
color: "var(--background-text,#ffffff)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
<h2 className="text-[64px] font-medium tracking-[-0.03em]" style={{ color: "var(--background-text,#f2f4ff)" }}>{data.title}</h2>
<div className="relative z-10 flex gap-10 ">
<div className="w-1/2">
<h3 className="mt-[28px] text-[24px] font-medium" style={{ color: "var(--background-text,#f1f4ff)" }}>{data.explanationTitle}</h3>
<p className="mt-[16px] text-[22px] leading-[145%]" style={{ color: "var(--background-text,#d2d9ff)" }}>{data.explanation}</p>
</div>
<div className="flex flex-col justify-center items-end gap-[25px] w-1/2">
{data?.metrics?.map((metric, index) => (
<div
key={`metric-grid-${index}`}
className="rounded-[16px] w-[310px] border pt-[26px] px-[26px] pb-[16px] text-center"
style={{
borderColor: "var(--stroke,#1D293D80)",
backgroundColor: "var(--card-color,#0F172B80)",
}}
>
<p className="text-[64px] font-semibold leading-none" style={{ color: "var(--graph-0,#8bb4ff)" }}>{metric.value}</p>
<p className="mt-[13px] text-[26px]" style={{ color: "var(--background-text,#edf1ff)" }}>{metric.label}</p>
<p className="mt-[13px] text-[18px]" style={{ color: "var(--background-text,#8fa2d8)" }}>{metric.period}</p>
</div>
))}
</div>
</div>
<>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet" />
<div
className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
backgroundColor: "var(--background-color,#101B37)",
color: "var(--background-text,#ffffff)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
{data?.pageLabel}
<h2 className="text-[64px] font-medium tracking-[-0.03em]" style={{ color: "var(--background-text,#f2f4ff)" }}>{data.title}</h2>
<div className="relative z-10 flex gap-10 ">
<div className="w-1/2">
<h3 className="mt-[28px] text-[24px] font-medium" style={{ color: "var(--background-text,#f1f4ff)" }}>{data.explanationTitle}</h3>
<p className="mt-[16px] text-[22px] leading-[145%]" style={{ color: "var(--background-text,#d2d9ff)" }}>{data.explanation}</p>
</div>
<div className="flex flex-col justify-center items-end gap-[25px] w-1/2">
{data?.metrics?.map((metric, index) => (
<div
key={`metric-grid-${index}`}
className="rounded-[16px] w-[310px] border pt-[26px] px-[26px] pb-[16px] text-center"
style={{
borderColor: "var(--stroke,#1D293D80)",
backgroundColor: "var(--card-color,#0F172B80)",
}}
>
<p className="text-[64px] font-semibold leading-none" style={{ color: "var(--graph-0,#8bb4ff)" }}>{metric.value}</p>
<p className="mt-[13px] text-[26px]" style={{ color: "var(--background-text,#edf1ff)" }}>{metric.label}</p>
<p className="mt-[13px] text-[18px]" style={{ color: "var(--background-text,#8fa2d8)" }}>{metric.period}</p>
</div>
))}
</div>
</div>
<div
className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
}}
>
{data?.pageLabel}
</div>
</div>
</div>
</>
);
};

79
electron/servers/nextjs/app/presentation-templates/Code/CodeSlide11MetricsGrid.tsx
View file

@ -46,49 +46,52 @@ export type SchemaType = z.infer<typeof Schema>;
const CodeSlide11MetricsGrid = ({ data }: { data: Partial<SchemaType> }) => {
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] border p-[40px]"
style={{
borderColor: "var(--stroke,#243272)",
backgroundColor: "var(--background-color,#101B37)",
color: "var(--background-text,#edf1ff)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{data.title}</h2>
<div className="mt-[53px] grid flex-1 grid-cols-3 gap-[14px]">
{data?.metrics?.map((metric, index) => (
<div
key={`metric-grid-${index}`}
className="rounded-[16px] border pt-[26px] px-[26px] pb-[16px] text-center"
style={{
borderColor: "var(--stroke,#1D293D80)",
backgroundColor: "var(--card-color,#0F172B80)",
}}
>
<p className="text-[64px] font-semibold leading-none" style={{ color: "var(--graph-0,#8bb4ff)" }}>{metric.value}</p>
<p className="mt-[13px] text-[26px]" style={{ color: "var(--background-text,#edf1ff)" }}>{metric.label}</p>
<p className="mt-[13px] text-[18px]" style={{ color: "var(--background-text,#8fa2d8)" }}>{metric.period}</p>
</div>
))}
</div>
<>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet" />
<div
className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] border p-[40px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
borderColor: "var(--stroke,#243272)",
backgroundColor: "var(--background-color,#101B37)",
color: "var(--background-text,#edf1ff)",
fontFamily: "var(--body-font-family,Nunito Sans)",
}}
>
{data.pageLabel}
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{data.title}</h2>
<div className="mt-[53px] grid flex-1 grid-cols-3 gap-[14px]">
{data?.metrics?.map((metric, index) => (
<div
key={`metric-grid-${index}`}
className="rounded-[16px] border pt-[26px] px-[26px] pb-[16px] text-center"
style={{
borderColor: "var(--stroke,#1D293D80)",
backgroundColor: "var(--card-color,#0F172B80)",
}}
>
<p className="text-[64px] font-semibold leading-none" style={{ color: "var(--graph-0,#8bb4ff)" }}>{metric.value}</p>
<p className="mt-[13px] text-[26px]" style={{ color: "var(--background-text,#edf1ff)" }}>{metric.label}</p>
<p className="mt-[13px] text-[18px]" style={{ color: "var(--background-text,#8fa2d8)" }}>{metric.period}</p>
</div>
))}
</div>
<div
className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
style={{
borderColor: "var(--stroke,#31415880)",
backgroundColor: "var(--card-color,#1D293DCC)",
color: "var(--background-text,#CAD5E2)",
}}
>
{data.pageLabel}
</div>
</div>
</div>
</>
);
};

10
electron/servers/nextjs/app/presentation-templates/Education/EducationContentSplitSlide.tsx
View file

@ -52,16 +52,16 @@ const EducationContentSplitSlide = ({ data }: { data: Partial<SchemaType> }) =>
className=" h-full w-full object-cover object-center"
/>
</div>
<div className="flex w-full gap-1.5 h-[320px] ">
<div className="w-[327px]"> <img
<div className="flex w-full gap-[6px] h-[320px] ">
<div className="w-[330px]"> <img
src={collageImage?.__image_url__}
alt={collageImage?.__image_prompt__}
className="h-full object-cover "
className="h-full w-full object-cover "
/></div>
<div className="w-[327px]"> <img
<div className="w-[330px]"> <img
src={collageImage?.__image_url__}
alt={collageImage?.__image_prompt__}
className="h-full object-cover "
className="h-full w-full object-cover "
/></div>
</div>
</div>

14
electron/servers/nextjs/app/presentation-templates/Education/EducationStatisticsGridSlide.tsx
View file

@ -7,21 +7,21 @@ export const slideLayoutDescription =
const StatisticSchema = z.object({
value: z.string().min(1).max(8).meta({
description: "Main metric value shown at the top of one card.",
description: "Main metric value shown at the top of one card. with max 8 characters",
}),
label: z.string().min(3).max(22).meta({
description: "Label shown under the value.",
label: z.string().min(3).max(20).meta({
description: "Label shown under the value. with max 20 characters",
}),
});
export const Schema = z.object({
title: z.string().min(4).max(14).default("Statistics").meta({
description: "Main title shown in the left column.",
description: "Main title shown in the left column. with max 14 characters",
}),
description: z.string().min(40).max(120).default(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. with max 120 characters"
).meta({
description: "Supporting line shown under the left title.",
description: "Supporting line shown under the left title. with max 120 characters",
}),
stats: z
.array(StatisticSchema)
@ -38,7 +38,7 @@ export const Schema = z.object({
{ value: "20", label: "Merchandising Team" },
])
.meta({
description: "Eight statistic cards shown in a 2-column, 4-row grid.",
description: "Eight statistic cards. with max 8 cards",
}),
});

127
electron/servers/nextjs/app/presentation-templates/ProductOverview/BusinessChallengesCardsSlide.tsx
View file

@ -73,80 +73,83 @@ const BusinessChallengesCardsSlide = ({ data }: { data: Partial<SchemaType> }) =
const { title, taglineLabel, taglineBody, heroImage, cards } = data;
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className=" pl-[66px] pt-[60px] pb-[28px]">
<h2
className="text-[80px] max-w-[406px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
<div className="mt-[72px] w-[360px]">
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className=" pl-[66px] pt-[60px] pb-[28px]">
<h2
className="text-[80px] max-w-[406px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{taglineLabel}
</p>
<p
className="mt-[16px] text-[24px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{taglineBody}
</p>
</div>
</div>
{title}
</h2>
{heroImage?.__image_url__ && (
<img
src={heroImage.__image_url__}
alt={heroImage.__image_prompt__}
className="absolute right-0 top-[72px] h-[350px] w-[770px] object-cover bg-white"
/>
)}
<div className="absolute bottom-[72px] right-[40px] flex items-start gap-[16px]">
{cards?.map((card, index) => (
<div
key={index}
className=" w-[248px] px-[34px] py-[34px]"
style={{
backgroundColor: card.dark
? "var(--primary-color,#15342D)"
: "var(--card-color,#ebebee)",
}}
>
<div className="mt-[72px] w-[360px]">
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
style={{
color: card.dark
? "var(--primary-text,#edf2f1)"
: "var(--primary-color,#15342D)",
}}
style={{ color: "var(--primary-color,#15342D)" }}
>
{card.heading}
{taglineLabel}
</p>
<p
className="mt-[18px] text-[28px] font-normal text-white"
style={{
color: card.dark
? "var(--primary-text,#edf2f1)"
: "var(--primary-color,#15342D)",
}}
className="mt-[16px] text-[24px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{card.body}
{taglineBody}
</p>
</div>
))}
</div>
{heroImage?.__image_url__ && (
<img
src={heroImage.__image_url__}
alt={heroImage.__image_prompt__}
className="absolute right-0 top-[72px] h-[350px] w-[770px] object-cover bg-white"
/>
)}
<div className="absolute bottom-[72px] right-[40px] flex items-start gap-[16px]">
{cards?.map((card, index) => (
<div
key={index}
className=" w-[248px] px-[34px] py-[34px]"
style={{
backgroundColor: card.dark
? "var(--primary-color,#15342D)"
: "var(--card-color,#ebebee)",
}}
>
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
style={{
color: card.dark
? "var(--primary-text,#edf2f1)"
: "var(--primary-color,#15342D)",
}}
>
{card.heading}
</p>
<p
className="mt-[18px] text-[28px] font-normal text-white"
style={{
color: card.dark
? "var(--primary-text,#edf2f1)"
: "var(--primary-color,#15342D)",
}}
>
{card.body}
</p>
</div>
))}
</div>
</div>
</div>
</>
);
};

73
electron/servers/nextjs/app/presentation-templates/ProductOverview/BusinessChallengesGridSlide.tsx
View file

@ -51,44 +51,47 @@ const BusinessChallengesGridSlide = ({ data }: { data: Partial<SchemaType> }) =>
const { title, challenges } = data;
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className=" px-[60px] pt-[60px] pb-[28px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
</div>
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="grid grid-cols-2 justify-between items-center gap-y-[63px] px-[84px] py-[70px] gap-x-[63px]"
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
{challenges?.map((challenge, index) => (
<div key={index} className="">
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
style={{ color: "var(--primary-text,#edf2f1)" }}
>
{challenge.heading}
</p>
<p
className="mt-[24px] text-[28px] font-normal text-white"
style={{ color: "var(--primary-text,#edf2f1)" }}
>
{challenge.body}
</p>
</div>
))}
<div className=" px-[60px] pt-[60px] pb-[28px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
</div>
<div
className="grid grid-cols-2 justify-between items-center gap-y-[63px] px-[84px] py-[70px] gap-x-[63px]"
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
>
{challenges?.map((challenge, index) => (
<div key={index} className="">
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
style={{ color: "var(--primary-text,#edf2f1)" }}
>
{challenge.heading}
</p>
<p
className="mt-[24px] text-[28px] font-normal text-white"
style={{ color: "var(--primary-text,#edf2f1)" }}
>
{challenge.body}
</p>
</div>
))}
</div>
</div>
</div>
</>
);
};

163
electron/servers/nextjs/app/presentation-templates/ProductOverview/ComparisonChartSlide.tsx
View file

@ -117,103 +117,106 @@ const ComparisonChartSlide = ({ data }: { data: Partial<SchemaType> }) => {
const { title, subtitle, columns, rows, checkIcon, crossIcon } = data;
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="px-[56px] pt-[74px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
<p
className="mt-[20px] w-[740px] text-[24px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{subtitle}
</p>
</div>
<div className="absolute left-[54px] top-[268px] w-[1058px] ">
<div
className="grid grid-cols-[220px_repeat(4,1fr)] border-b"
style={{ borderColor: "var(--stroke,#c5cccb)" }}
>
<div className="h-[94px] " />
{columns?.map((column, index) => (
<div
key={index}
className="flex h-[94px] items-center justify-center border-r text-[20px] font-semibold uppercase tracking-[0.2em]"
style={{
backgroundColor:
index === 3
? "var(--primary-color,#15342D)"
: "var(--card-color,#ffffff)",
color:
index === 3
? "var(--primary-text,#edf2f1)"
: "var(--primary-color,#15342D)",
borderColor: "var(--stroke,#c5cccb)",
}}
>
{column}
</div>
))}
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="px-[56px] pt-[74px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
<p
className="mt-[20px] w-[740px] text-[24px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{subtitle}
</p>
</div>
{rows?.map((row, index) => {
const cells: ("check" | "cross" | "empty")[] = [
row.cell1,
row.cell2,
row.cell3,
row.cell4,
];
return (
<div
key={index}
className={`grid grid-cols-[220px_repeat(4,1fr)] ${index < rows.length - 1 ? "border-b" : ""}`}
style={{ borderColor: "var(--stroke,#c5cccb)" }}
>
<div className="absolute left-[54px] top-[268px] w-[1058px] ">
<div
className="grid grid-cols-[220px_repeat(4,1fr)] border-b"
style={{ borderColor: "var(--stroke,#c5cccb)" }}
>
<div className="h-[94px] " />
{columns?.map((column, index) => (
<div
className="flex h-[94px] items-center border-r pl-[34px] text-[20px] font-semibold uppercase tracking-[0.2em]"
key={index}
className="flex h-[94px] items-center justify-center border-r text-[20px] font-semibold uppercase tracking-[0.2em]"
style={{
backgroundColor: "var(--card-color,#ffffff)",
backgroundColor:
index === 3
? "var(--primary-color,#15342D)"
: "var(--card-color,#ffffff)",
color:
index === 3
? "var(--primary-text,#edf2f1)"
: "var(--primary-color,#15342D)",
borderColor: "var(--stroke,#c5cccb)",
color: "var(--primary-color,#15342D)",
}}
>
{row.label}
{column}
</div>
))}
</div>
{cells?.map((status, cellIndex) => (
{rows?.map((row, index) => {
const cells: ("check" | "cross" | "empty")[] = [
row.cell1,
row.cell2,
row.cell3,
row.cell4,
];
return (
<div
key={index}
className={`grid grid-cols-[220px_repeat(4,1fr)] ${index < rows.length - 1 ? "border-b" : ""}`}
style={{ borderColor: "var(--stroke,#c5cccb)" }}
>
<div
key={cellIndex}
className="flex h-[94px] items-center justify-center border-r"
className="flex h-[94px] items-center border-r pl-[34px] text-[20px] font-semibold uppercase tracking-[0.2em]"
style={{
backgroundColor: "var(--card-color,#ffffff)",
borderColor: "var(--stroke,#c5cccb)",
color: "var(--primary-color,#15342D)",
}}
>
<StatusIcon
status={status}
checkIconUrl={checkIcon?.__icon_url__}
checkIconAlt={checkIcon?.__icon_query__}
crossIconUrl={crossIcon?.__icon_url__}
crossIconAlt={crossIcon?.__icon_query__}
/>
{row.label}
</div>
))}
</div>
);
})}
{cells?.map((status, cellIndex) => (
<div
key={cellIndex}
className="flex h-[94px] items-center justify-center border-r"
style={{
backgroundColor: "var(--card-color,#ffffff)",
borderColor: "var(--stroke,#c5cccb)",
}}
>
<StatusIcon
status={status}
checkIconUrl={checkIcon?.__icon_url__}
checkIconAlt={checkIcon?.__icon_query__}
crossIconUrl={crossIcon?.__icon_url__}
crossIconAlt={crossIcon?.__icon_query__}
/>
</div>
))}
</div>
);
})}
</div>
</div>
</div>
</>
);
};

147
electron/servers/nextjs/app/presentation-templates/ProductOverview/ComparisonTableWithTextSlide.tsx
View file

@ -78,72 +78,46 @@ const ComparisonTableWithTextSlide = ({ data }: { data: Partial<SchemaType> }) =
const { title, subtitle, columns, highlightedHeaderIndex, rows } = data;
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#c3cccc)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="px-[44px] pt-[46px]">
<h2
className="text-[80px] font-semibold leading-[1.02] tracking-[-0.03em] text-[#0a443b]"
style={{ color: "var(--primary-color,#0a443b)" }}
>
{title}
</h2>
<p
className="mt-[22px] max-w-[700px] text-[24px] leading-[1.22] text-[#2d5d56]"
style={{ color: "var(--background-text,#2d5d56)" }}
>
{subtitle}
</p>
</div>
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="mx-[44px] mt-[30px] overflow-hidden border"
style={{ borderColor: "var(--stroke,#bcc3c3)" }}
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#c3cccc)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<table
className="w-full table-fixed border-collapse"
style={{ backgroundColor: "var(--card-color,#ffffff)" }}
<div className="px-[44px] pt-[46px]">
<h2
className="text-[80px] font-semibold leading-[1.02] tracking-[-0.03em] text-[#0a443b]"
style={{ color: "var(--primary-color,#0a443b)" }}
>
{title}
</h2>
<p
className="mt-[22px] max-w-[700px] text-[24px] leading-[1.22] text-[#2d5d56]"
style={{ color: "var(--background-text,#2d5d56)" }}
>
{subtitle}
</p>
</div>
<div
className="mx-[44px] mt-[30px] overflow-hidden border"
style={{ borderColor: "var(--stroke,#bcc3c3)" }}
>
<thead className="w-full">
<tr className="w-full">
{columns?.map((column, index) => {
const isHighlighted = index + 1 === highlightedHeaderIndex;
return (
<th
key={`${column}-${index}`}
className=" border-r p-[33px] text-left text-[20px] font-semibold uppercase tracking-[0.16em] last:border-r-0"
style={{
borderColor: "var(--stroke,#bcc3c3)",
backgroundColor: isHighlighted
? "var(--primary-color,#05443a)"
: "var(--card-color,#ffffff)",
color: isHighlighted
? "var(--primary-text,#eef2f0)"
: "var(--primary-color,#123f38)",
}}
>
{column}
</th>
);
})}
</tr>
</thead>
<tbody>
{rows?.map((row, rowIndex) => {
const cells = [row.cell1, row.cell2, row.cell3, row.cell4];
const isHighlighted = rowIndex + 1 === highlightedHeaderIndex;
return (
<tr key={`row-${rowIndex}`}>
{cells?.map((cell, cellIndex) => (
<td
key={`cell-${rowIndex}-${cellIndex}`}
className=" border-r border-t bg-white p-[33px] text-left text-[18px] leading-[1.2] last:border-r-0"
<table
className="w-full table-fixed border-collapse"
style={{ backgroundColor: "var(--card-color,#ffffff)" }}
>
<thead className="w-full">
<tr className="w-full">
{columns?.map((column, index) => {
const isHighlighted = index + 1 === highlightedHeaderIndex;
return (
<th
key={`${column}-${index}`}
className=" border-r p-[33px] text-left text-[20px] font-semibold uppercase tracking-[0.16em] last:border-r-0"
style={{
borderColor: "var(--stroke,#bcc3c3)",
backgroundColor: isHighlighted
@ -154,16 +128,45 @@ const ComparisonTableWithTextSlide = ({ data }: { data: Partial<SchemaType> }) =
: "var(--primary-color,#123f38)",
}}
>
{cell}
</td>
))}
</tr>
);
})}
</tbody>
</table>
{column}
</th>
);
})}
</tr>
</thead>
<tbody>
{rows?.map((row, rowIndex) => {
const cells = [row.cell1, row.cell2, row.cell3, row.cell4];
const isHighlighted = rowIndex + 1 === highlightedHeaderIndex;
return (
<tr key={`row-${rowIndex}`}>
{cells?.map((cell, cellIndex) => (
<td
key={`cell-${rowIndex}-${cellIndex}`}
className=" border-r border-t bg-white p-[33px] text-left text-[18px] leading-[1.2] last:border-r-0"
style={{
borderColor: "var(--stroke,#bcc3c3)",
backgroundColor: isHighlighted
? "var(--primary-color,#05443a)"
: "var(--card-color,#ffffff)",
color: isHighlighted
? "var(--primary-text,#eef2f0)"
: "var(--primary-color,#123f38)",
}}
>
{cell}
</td>
))}
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</div>
</>
);
};

107
electron/servers/nextjs/app/presentation-templates/ProductOverview/CoverSlide.tsx
View file

@ -42,61 +42,64 @@ const CoverSlide = ({ data }: { data: Partial<SchemaType> }) => {
const { logoImage, label, titleLine1, titleLine2, backgroundImage } = data;
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="relative z-20 flex h-full flex-col px-[36px] pt-[62px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
<div className="flex items-center justify-between">
<img
src={logoImage?.__image_url__ ?? ''}
alt={logoImage?.__image_prompt__ || ''}
className="h-[42px] w-[171px] object-cover"
/>
<p
className="text-[18px] font-normal leading-[18.991px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{label}
</p>
</div>
<div className="flex flex-1 items-center justify-center pb-[80px]">
<h1
className="text-center text-[100px] font-semibold leading-[108.4%] tracking-[-3.024px]"
>
{titleLine1}
<br />
{titleLine2}
</h1>
</div>
</div>
{backgroundImage?.__image_url__ && (
<img
src={backgroundImage.__image_url__ || ''}
alt={backgroundImage.__image_prompt__ || ''}
className="absolute bottom-0 left-0 z-0 h-[360px] w-full object-cover"
/>
)}
<div
className="pointer-events-none absolute bottom-0 left-0 w-full z-10"
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
height: "365px",
background:
"linear-gradient(0deg, rgba(218, 225, 222, 0.00) 0%, var(--background-color,#DAE1DE) 80.33%)",
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
/>
</div>
>
<div
className="relative z-20 flex h-full flex-col px-[36px] pt-[62px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
<div className="flex items-center justify-between">
<img
src={logoImage?.__image_url__ ?? ''}
alt={logoImage?.__image_prompt__ || ''}
className="h-[42px] w-[171px] object-cover"
/>
<p
className="text-[18px] font-normal leading-[18.991px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{label}
</p>
</div>
<div className="flex flex-1 items-center justify-center pb-[80px]">
<h1
className="text-center text-[100px] font-semibold leading-[108.4%] tracking-[-3.024px]"
>
{titleLine1}
<br />
{titleLine2}
</h1>
</div>
</div>
{backgroundImage?.__image_url__ && (
<img
src={backgroundImage.__image_url__ || ''}
alt={backgroundImage.__image_prompt__ || ''}
className="absolute bottom-0 left-0 z-0 h-[360px] w-full object-cover"
/>
)}
<div
className="pointer-events-none absolute bottom-0 left-0 w-full z-10"
style={{
height: "365px",
background:
"linear-gradient(0deg, rgba(218, 225, 222, 0.00) 0%, var(--background-color,#DAE1DE) 80.33%)",
}}
/>
</div>
</>
);
};

99
electron/servers/nextjs/app/presentation-templates/ProductOverview/ImageGallerySlide.tsx
View file

@ -85,62 +85,65 @@ const ImageGallerySlide = ({ data }: { data: Partial<SchemaType> }) => {
} = data;
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] p-[56px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="flex items-center justify-between gap-1 ">
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] p-[56px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="flex items-center justify-between gap-1 ">
<div className=" ">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
<p
className="mt-[24px] w-[620px] text-[24px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{description}
</p>
<div className=" ">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
<p
className="mt-[24px] w-[620px] text-[24px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{description}
</p>
</div>
<div className="flex items-center gap-[22px]">
<img
src={topCenterImage?.__image_url__ ?? ''}
alt={topCenterImage?.__image_prompt__ ?? ''}
className="h-[294px] w-[270px] object-cover"
/>
<img
src={topRightImage?.__image_url__}
alt={topRightImage?.__image_prompt__ ?? ''}
className="h-[294px] w-[270px] object-cover"
/>
</div>
</div>
<div className="flex items-center gap-[22px]">
<div className="absolute bottom-[56px] w-full left-[58px] flex gap-[22px]">
<img
src={topCenterImage?.__image_url__ ?? ''}
alt={topCenterImage?.__image_prompt__ ?? ''}
className="h-[294px] w-[270px] object-cover"
src={bottomWideImage?.__image_url__}
alt={bottomWideImage?.__image_prompt__}
className="h-[290px] w-[584px] object-cover"
/>
<img
src={topRightImage?.__image_url__}
alt={topRightImage?.__image_prompt__ ?? ''}
className="h-[294px] w-[270px] object-cover"
src={bottomCenterImage?.__image_url__}
alt={bottomCenterImage?.__image_prompt__}
className="h-[290px] w-[270px] object-cover"
/>
<img
src={bottomRightImage?.__image_url__}
alt={bottomRightImage?.__image_prompt__}
className="h-[290px] w-[270px] object-cover"
/>
</div>
</div>
<div className="absolute bottom-[56px] w-full left-[58px] flex gap-[22px]">
<img
src={bottomWideImage?.__image_url__}
alt={bottomWideImage?.__image_prompt__}
className="h-[290px] w-[584px] object-cover"
/>
<img
src={bottomCenterImage?.__image_url__}
alt={bottomCenterImage?.__image_prompt__}
className="h-[290px] w-[270px] object-cover"
/>
<img
src={bottomRightImage?.__image_url__}
alt={bottomRightImage?.__image_prompt__}
className="h-[290px] w-[270px] object-cover"
/>
</div>
</div>
</>
);
};

95
electron/servers/nextjs/app/presentation-templates/ProductOverview/IntroductionSlide.tsx
View file

@ -55,57 +55,60 @@ const IntroductionSlide = ({ data }: { data: Partial<SchemaType> }) => {
const { title, portraitImage, blocks } = data;
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="grid h-full gap-[54px] items-center grid-cols-2">
<div
className="h-full w-full overflow-hidden bg-[#15342D]"
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
>
{portraitImage?.__image_url__ && (
<img
src={portraitImage.__image_url__}
alt={portraitImage.__image_prompt__}
className="h-full w-full object-cover"
/>
)}
</div>
<div className="">
<h2
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="grid h-full gap-[54px] items-center grid-cols-2">
<div
className="h-full w-full overflow-hidden bg-[#15342D]"
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
<div className="mt-[53px] space-y-[53px] pr-[33px]">
{blocks?.map((block, index) => (
<div key={`${block.label}-${index}`}>
<p
className="text-[20px] font-semibold tracking-[2.074px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{block.label}
</p>
<p
className="mt-[14px] text-[24px] leading-[26.667px] text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{block.body}
</p>
</div>
))}
{portraitImage?.__image_url__ && (
<img
src={portraitImage.__image_url__}
alt={portraitImage.__image_prompt__}
className="h-full w-full object-cover"
/>
)}
</div>
<div className="">
<h2
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
<div className="mt-[53px] space-y-[53px] pr-[33px]">
{blocks?.map((block, index) => (
<div key={`${block.label}-${index}`}>
<p
className="text-[20px] font-semibold tracking-[2.074px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{block.label}
</p>
<p
className="mt-[14px] text-[24px] leading-[26.667px] text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{block.body}
</p>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</>
);
};

115
electron/servers/nextjs/app/presentation-templates/ProductOverview/KpiCardsSlide.tsx
View file

@ -62,72 +62,75 @@ const KpiCardsSlide = ({ data }: { data: Partial<SchemaType> }) => {
const { title, kpiIcon, backgroundImage, items } = data;
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
{backgroundImage?.__image_url__ && (
<img
src={backgroundImage?.__image_url__}
alt={backgroundImage?.__image_prompt__}
className="absolute inset-0 h-full w-full object-cover"
/>
)}
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="absolute inset-0"
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--primary-color,#15342D)",
opacity: 0.8,
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
/>
>
{backgroundImage?.__image_url__ && (
<img
src={backgroundImage?.__image_url__}
alt={backgroundImage?.__image_prompt__}
className="absolute inset-0 h-full w-full object-cover"
/>
)}
<div className="relative z-10 px-[66px] pt-[72px] mb-[33px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#FEFEFF]"
style={{ color: "var(--primary-text,#FEFEFF)" }}
>
{title}
</h2>
</div>
<div
className="absolute inset-0"
style={{
backgroundColor: "var(--primary-color,#15342D)",
opacity: 0.8,
}}
/>
<div className="relative z-10 grid grid-cols-3 gap-x-[30px] gap-y-[19px] px-[66px]">
{items?.map((item, index) => (
<div
key={index}
className=" bg-[#FEFEFF] p-[33px]"
style={{ backgroundColor: "var(--card-color,#FEFEFF)" }}
<div className="relative z-10 px-[66px] pt-[72px] mb-[33px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#FEFEFF]"
style={{ color: "var(--primary-text,#FEFEFF)" }}
>
{title}
</h2>
</div>
<div className="relative z-10 grid grid-cols-3 gap-x-[30px] gap-y-[19px] px-[66px]">
{items?.map((item, index) => (
<div
className="flex h-[55px] w-[55px] items-center justify-center rounded-full bg-[#15342D]"
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
key={index}
className=" bg-[#FEFEFF] p-[33px]"
style={{ backgroundColor: "var(--card-color,#FEFEFF)" }}
>
<img
src={kpiIcon?.__icon_url__}
alt={kpiIcon?.__icon_query__}
className="h-[25px] w-[25px] object-contain"
style={{ filter: "brightness(0) invert(1)" }}
/>
<div
className="flex h-[55px] w-[55px] items-center justify-center rounded-full bg-[#15342D]"
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
>
<img
src={kpiIcon?.__icon_url__}
alt={kpiIcon?.__icon_query__}
className="h-[25px] w-[25px] object-contain"
style={{ filter: "brightness(0) invert(1)" }}
/>
</div>
<p
className="mt-[18px] text-[42px] font-semibold leading-none"
style={{ color: "var(--primary-color,#15342D)" }}
>
{item.value}
</p>
<p
className="mt-[18px] text-[28px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342D)" }}
>
{item.body}
</p>
</div>
<p
className="mt-[18px] text-[42px] font-semibold leading-none"
style={{ color: "var(--primary-color,#15342D)" }}
>
{item.value}
</p>
<p
className="mt-[18px] text-[28px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342D)" }}
>
{item.body}
</p>
</div>
))}
))}
</div>
</div>
</div>
</>
);
};

137
electron/servers/nextjs/app/presentation-templates/ProductOverview/MarketOpportunitySlide.tsx
View file

@ -56,76 +56,79 @@ const MarketOpportunitySlide = ({ data }: { data: Partial<SchemaType> }) => {
const { title, subtitle, bullets, values } = data;
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="px-[56px] pt-[72px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
<p
className="mt-[20px] w-[730px] text-[24px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{subtitle}
</p>
</div>
<div className="absolute left-[56px] top-[368px] space-y-[42px]">
{bullets?.map((bullet, index) => (
<div key={index} className="relative flex items-center">
<span
className="mr-[14px] h-[14px] w-[14px] rounded-full bg-[#0a4a3f]"
style={{ backgroundColor: "var(--graph-0,#0a4a3f)" }}
/>
<p
className="w-[640px] text-[24px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{bullet.text}
</p>
<span
className="ml-[8px] h-[2px] w-[80px] bg-[#8ea8a5]"
style={{ backgroundColor: "var(--stroke,#8ea8a5)" }}
/>
<span
className="h-[6px] w-[6px] rounded-full bg-[#edf2f1]"
style={{ backgroundColor: "var(--primary-text,#edf2f1)" }}
/>
</div>
))}
</div>
<div className="absolute bottom-[58px] right-[48px] h-[474px] w-[474px]">
{values?.map((value, index) => (
<div
key={index}
className="absolute rounded-full"
style={{
width: 237 + index * 50,
height: 237 + index * 50,
bottom: 0,
right: 0,
backgroundColor: COLORS[index],
}}
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="px-[56px] pt-[72px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
<p
className="pt-[24px] text-center text-[24px] font-normal text-white"
style={{ color: "var(--primary-text,#ffffff)" }}
{title}
</h2>
<p
className="mt-[20px] w-[730px] text-[24px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{subtitle}
</p>
</div>
<div className="absolute left-[56px] top-[368px] space-y-[42px]">
{bullets?.map((bullet, index) => (
<div key={index} className="relative flex items-center">
<span
className="mr-[14px] h-[14px] w-[14px] rounded-full bg-[#0a4a3f]"
style={{ backgroundColor: "var(--graph-0,#0a4a3f)" }}
/>
<p
className="w-[640px] text-[24px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{bullet.text}
</p>
<span
className="ml-[8px] h-[2px] w-[80px] bg-[#8ea8a5]"
style={{ backgroundColor: "var(--stroke,#8ea8a5)" }}
/>
<span
className="h-[6px] w-[6px] rounded-full bg-[#edf2f1]"
style={{ backgroundColor: "var(--primary-text,#edf2f1)" }}
/>
</div>
))}
</div>
<div className="absolute bottom-[58px] right-[48px] h-[474px] w-[474px]">
{values?.map((value, index) => (
<div
key={index}
className="absolute rounded-full"
style={{
width: 237 + index * 50,
height: 237 + index * 50,
bottom: 0,
right: 0,
backgroundColor: COLORS[index],
}}
>
{value}
</p>
</div>
))}
<p
className="pt-[24px] text-center text-[24px] font-normal text-white"
style={{ color: "var(--primary-text,#ffffff)" }}
>
{value}
</p>
</div>
))}
</div>
</div>
</div>
</>
);
};

139
electron/servers/nextjs/app/presentation-templates/ProductOverview/MeetTeamSlide.tsx
View file

@ -92,78 +92,81 @@ const MeetTeamSlide = ({ data }: { data: Partial<SchemaType> }) => {
const { title, taglineLabel, taglineBody, members } = data;
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="flex items-start justify-between px-[64px] pt-[76px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
<div className="w-[520px]">
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="flex items-start justify-between px-[64px] pt-[76px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{taglineLabel}
</p>
<p
className="mt-[14px] text-[24px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{taglineBody}
</p>
{title}
</h2>
<div className="w-[520px]">
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
style={{ color: "var(--primary-color,#15342D)" }}
>
{taglineLabel}
</p>
<p
className="mt-[14px] text-[24px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{taglineBody}
</p>
</div>
</div>
<div className="absolute bottom-[58px] left-[64px] grid grid-cols-4 gap-[22px]">
{members?.map((member, index) => (
<div key={index} className="w-[252px] overflow-hidden">
<img
src={member.image.__image_url__}
alt={member.image.__image_prompt__}
className="h-[244px] w-full object-cover"
/>
<div
className="h-[154px] p-[33px]"
style={{
backgroundColor: member.highlighted
? "var(--primary-color,#15342D)"
: "var(--card-color,#FEFEFF)",
}}
>
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
style={{
color: member.highlighted
? "var(--primary-text,#edf2f1)"
: "var(--primary-color,#15342D)",
}}
>
{member.title}
</p>
<p
className="mt-[20px] text-[28px] font-normal text-white"
style={{
color: member.highlighted
? "var(--primary-text,#edf2f1)"
: "var(--primary-color,#15342D)",
}}
>
{member.name}
</p>
</div>
</div>
))}
</div>
</div>
<div className="absolute bottom-[58px] left-[64px] grid grid-cols-4 gap-[22px]">
{members?.map((member, index) => (
<div key={index} className="w-[252px] overflow-hidden">
<img
src={member.image.__image_url__}
alt={member.image.__image_prompt__}
className="h-[244px] w-full object-cover"
/>
<div
className="h-[154px] p-[33px]"
style={{
backgroundColor: member.highlighted
? "var(--primary-color,#15342D)"
: "var(--card-color,#FEFEFF)",
}}
>
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
style={{
color: member.highlighted
? "var(--primary-text,#edf2f1)"
: "var(--primary-color,#15342D)",
}}
>
{member.title}
</p>
<p
className="mt-[20px] text-[28px] font-normal text-white"
style={{
color: member.highlighted
? "var(--primary-text,#edf2f1)"
: "var(--primary-color,#15342D)",
}}
>
{member.name}
</p>
</div>
</div>
))}
</div>
</div>
</>
);
};

121
electron/servers/nextjs/app/presentation-templates/ProductOverview/MissionVisionSlide.tsx
View file

@ -44,73 +44,76 @@ const MissionVisionSlide = ({ data }: { data: Partial<SchemaType> }) => {
const { title, missionLabel, missionBody, visionLabel, visionBody, image } = data;
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="grid h-full grid-cols-2 grid-rows-2">
<div className="px-[74px] pt-[76px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
</div>
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="grid h-full grid-cols-2 grid-rows-2">
<div className="px-[74px] pt-[76px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
</div>
<div
className="pl-[60px] pt-[76px]"
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
>
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
style={{ color: "var(--primary-text,#edf2f1)" }}
<div
className="pl-[60px] pt-[76px]"
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
>
{missionLabel}
</p>
<p
className="mt-[26px] text-[28px] font-normal text-white"
style={{ color: "var(--primary-text,#edf2f1)" }}
>
{missionBody}
</p>
</div>
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
style={{ color: "var(--primary-text,#edf2f1)" }}
>
{missionLabel}
</p>
<p
className="mt-[26px] text-[28px] font-normal text-white"
style={{ color: "var(--primary-text,#edf2f1)" }}
>
{missionBody}
</p>
</div>
<div
className="pl-[53px] py-[53px]"
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
>
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
style={{ color: "var(--primary-text,#edf2f1)" }}
<div
className="pl-[53px] py-[53px]"
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
>
{visionLabel}
</p>
<p
className="mt-[24px] text-[28px] font-normal text-white"
style={{ color: "var(--primary-text,#edf2f1)" }}
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
style={{ color: "var(--primary-text,#edf2f1)" }}
>
{visionLabel}
</p>
<p
className="mt-[24px] text-[28px] font-normal text-white"
style={{ color: "var(--primary-text,#edf2f1)" }}
>
{visionBody}
</p>
</div>
<div
className="h-full w-full overflow-hidden bg-white"
style={{ backgroundColor: "var(--card-color,#ffffff)" }}
>
{visionBody}
</p>
</div>
<div
className="h-full w-full overflow-hidden bg-white"
style={{ backgroundColor: "var(--card-color,#ffffff)" }}
>
{image?.__image_url__ && (
<img
src={image.__image_url__}
alt={image.__image_prompt__}
className="h-full w-full object-cover"
/>
)}
{image?.__image_url__ && (
<img
src={image.__image_url__}
alt={image.__image_prompt__}
className="h-full w-full object-cover"
/>
)}
</div>
</div>
</div>
</div>
</>
);
};

155
electron/servers/nextjs/app/presentation-templates/ProductOverview/OurServicesSlide.tsx
View file

@ -61,90 +61,93 @@ const OurServicesSlide = ({ data }: { data: Partial<SchemaType> }) => {
const { title, taglineLabel, taglineBody, featureImage, services } = data;
return (
<div
className="relative h-[720px] w-[1280px] flex items-end pb-[56px] justify-between overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className=" pt-[74px]">
<div className="px-[68px]">
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="relative h-[720px] w-[1280px] flex items-end pb-[56px] justify-between overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className=" pt-[74px]">
<div className="px-[68px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
<div className="mt-[26px] w-[560px]">
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{taglineLabel}
</p>
<p
className="mt-[14px] text-[24px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{taglineBody}
</p>
{title}
</h2>
<div className="mt-[26px] w-[560px]">
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
style={{ color: "var(--primary-color,#15342D)" }}
>
{taglineLabel}
</p>
<p
className="mt-[14px] text-[24px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{taglineBody}
</p>
</div>
</div>
</div>
<div
className="mt-[35px] h-[326px] w-[650px] bg-[#15342D]"
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
>
{featureImage?.__image_url__ && (
<img
src={featureImage?.__image_url__}
alt={featureImage?.__image_prompt__}
className="h-[326px] w-[650px] object-cover"
/>
)}
</div>
</div>
<div className="grid grid-cols-2 gap-[22px] pr-[76px]">
{services?.map((service, index) => (
<div
key={index}
className=" p-[33px]"
style={{
backgroundColor: service.dark
? "var(--primary-color,#15342D)"
: "var(--card-color,#ececee)",
}}
className="mt-[35px] h-[326px] w-[650px] bg-[#15342D]"
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
>
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
style={{
color: service.dark
? "var(--primary-text,#edf2f1)"
: "var(--primary-color,#15342D)",
}}
>
{service.heading}
</p>
<p
className={`${service.dark ? "text-white" : "text-[#15342DCC]"} mt-[20px] text-[28px] font-normal`}
style={{
color: service.dark
? "var(--primary-text,#edf2f1)"
: "var(--background-text,#15342DCC)",
}}
>
{service.body}
</p>
{featureImage?.__image_url__ && (
<img
src={featureImage?.__image_url__}
alt={featureImage?.__image_prompt__}
className="h-[326px] w-[650px] object-cover"
/>
)}
</div>
))}
</div>
<div className="grid grid-cols-2 gap-[22px] pr-[76px]">
{services?.map((service, index) => (
<div
key={index}
className=" p-[33px]"
style={{
backgroundColor: service.dark
? "var(--primary-color,#15342D)"
: "var(--card-color,#ececee)",
}}
>
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
style={{
color: service.dark
? "var(--primary-text,#edf2f1)"
: "var(--primary-color,#15342D)",
}}
>
{service.heading}
</p>
<p
className={`${service.dark ? "text-white" : "text-[#15342DCC]"} mt-[20px] text-[28px] font-normal`}
style={{
color: service.dark
? "var(--primary-text,#edf2f1)"
: "var(--background-text,#15342DCC)",
}}
>
{service.body}
</p>
</div>
))}
</div>
</div>
</div>
</>
);
};

143
electron/servers/nextjs/app/presentation-templates/ProductOverview/PricingPlanSlide.tsx
View file

@ -88,83 +88,86 @@ const PricingPlanSlide = ({ data }: { data: Partial<SchemaType> }) => {
const { title, featureIcon, plans } = data;
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="px-[68px] pt-[76px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
</div>
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="px-[68px] pt-[76px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
</div>
<div className="absolute left-[86px] right-[86px] top-[252px] grid grid-cols-3 items-start">
{plans?.map((plan, index) => {
const active = plan.highlighted;
return (
<div
key={index}
className={` px-[20px] ${active ? "-mt-[30px] py-[60px]" : "py-[33px]"}`}
style={{
backgroundColor: active
? "var(--primary-color,#15342D)"
: "var(--card-color,#ececee)",
}}
>
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
<div className="absolute left-[86px] right-[86px] top-[252px] grid grid-cols-3 items-start">
{plans?.map((plan, index) => {
const active = plan.highlighted;
return (
<div
key={index}
className={` px-[20px] ${active ? "-mt-[30px] py-[60px]" : "py-[33px]"}`}
style={{
color: active
? "var(--primary-text,#edf2f1)"
: "var(--primary-color,#15342D)",
backgroundColor: active
? "var(--primary-color,#15342D)"
: "var(--card-color,#ececee)",
}}
>
{plan.price}
</p>
<p
className="mt-[18px] text-[28px] font-normal text-[#15342DCC]"
style={{
color: active
? "var(--primary-text,#edf2f1)"
: "var(--background-text,#15342DCC)",
}}
>
{plan.description}
</p>
<p
className="text-[20px] font-semibold tracking-[2.074px] text-white"
style={{
color: active
? "var(--primary-text,#edf2f1)"
: "var(--primary-color,#15342D)",
}}
>
{plan.price}
</p>
<p
className="mt-[18px] text-[28px] font-normal text-[#15342DCC]"
style={{
color: active
? "var(--primary-text,#edf2f1)"
: "var(--background-text,#15342DCC)",
}}
>
{plan.description}
</p>
<div className="mt-[18px] space-y-[6px]">
{plan.features.map((feature, featureIndex) => (
<div key={featureIndex} className="flex items-center gap-[10px]">
<img
src={featureIcon?.__icon_url__}
alt={featureIcon?.__icon_query__}
className="h-[28px] w-[28px] object-contain"
style={{ filter: active ? "brightness(0) invert(1)" : "none" }}
/>
<p
className="text-[28px] font-normal text-[#15342DCC]"
style={{
color: active
? "var(--primary-text,#edf2f1)"
: "var(--background-text,#15342DCC)",
}}
>
{feature}
</p>
</div>
))}
<div className="mt-[18px] space-y-[6px]">
{plan.features.map((feature, featureIndex) => (
<div key={featureIndex} className="flex items-center gap-[10px]">
<img
src={featureIcon?.__icon_url__}
alt={featureIcon?.__icon_query__}
className="h-[28px] w-[28px] object-contain"
style={{ filter: active ? "brightness(0) invert(1)" : "none" }}
/>
<p
className="text-[28px] font-normal text-[#15342DCC]"
style={{
color: active
? "var(--primary-text,#edf2f1)"
: "var(--background-text,#15342DCC)",
}}
>
{feature}
</p>
</div>
))}
</div>
</div>
</div>
);
})}
);
})}
</div>
</div>
</div>
</>
);
};

205
electron/servers/nextjs/app/presentation-templates/ProductOverview/ProcessSlide.tsx
View file

@ -78,108 +78,111 @@ const ProcessSlide = ({ data }: { data: Partial<SchemaType> }) => {
const { title, steps } = data;
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="px-[66px] pt-[73px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="px-[66px] pt-[73px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
</div>
<div className="flex justify-center w-full px-[66px] mt-[110px] ">
{steps?.map((step, index) => {
if (index % 2 === 0) {
return (
<div key={index} className="relative w-[230px] "
style={{
marginLeft: index === 0 ? '0' : '-10px',
}}
>
<div className="relative flex justify-center items-center h-[276px]">
<div className="relative">
<img src={step.icon.__icon_url__} alt={step.icon.__icon_query__} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[42px] w-[42px] object-contain"
style={{
filter: step.highlighted ? "invert(1)" : "invert(0)",
}}
/>
<svg xmlns="http://www.w3.org/2000/svg" width="162" height="187" viewBox="0 0 162 187" fill="none">
<path d="M80.8291 0L161.658 46.6667V140L80.8291 186.667L2.28882e-05 140V46.6667L80.8291 0Z" fill={step.highlighted ? "var(--primary-color,#15342D)" : "var(--card-color,#FEFEFF)"} />
</svg>
</div>
<div className="absolute bottom-1 right-0">
<svg xmlns="http://www.w3.org/2000/svg" width="231" height="134" viewBox="0 0 231 134" fill="none">
<path d="M230.94 66.667L115.47 133.334L0 66.667V0H11.5469V60L115.47 120L219.393 60V0H230.94V66.667Z" fill="var(--card-color,#FEFEFF)" />
</svg>
</div>
</div>
<div className=" absolute bottom-[-110px] left-0 text-center mt-[60px]">
<p
className="text-[20px] font-semibold tracking-[2.074px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{step.label}
</p>
<p
className="mt-[6px] text-[24px] leading-[1.2] text-[#315f58]"
style={{ color: "var(--background-text,#315f58)" }}
>
{step.body}
</p>
</div>
</div>
)
}
else {
return (
<div key={index} className="relative w-[230px]"
style={{
marginLeft: index === 0 ? '0' : '-10px',
}}
>
<div className=" absolute top-[-100px] left-0 w-[224px] text-center">
<p
className="text-[20px] font-semibold tracking-[2.074px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{step.label}
</p>
<p
className="mt-[6px] text-[24px] leading-[1.2] text-[#315f58]"
style={{ color: "var(--background-text,#315f58)" }}
>
{step.body}
</p>
</div>
<div className="relative w-[230px] flex justify-center items-center h-[276px]">
<div className="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="162" height="187" viewBox="0 0 162 187" fill="none">
<path d="M80.8291 0L161.658 46.6667V140L80.8291 186.667L2.28882e-05 140V46.6667L80.8291 0Z" fill={step.highlighted ? "var(--primary-color,#15342D)" : "var(--card-color,#FEFEFF)"} />
</svg>
<img src={step.icon.__icon_url__} alt={step.icon.__icon_query__} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[42px] w-[42px] object-contain" />
</div>
<div className="absolute top-1 right-0">
<svg xmlns="http://www.w3.org/2000/svg" width="231" height="134" viewBox="0 0 231 134" fill="none">
<path d="M230.94 66.667L115.47 0L0 66.667V133.333H11.5469V73.333L115.47 13.333L219.394 73.333V133.333H230.94V66.667Z" fill="var(--card-color,#FEFEFF)" />
</svg>
</div>
</div>
</div>
)
}
})}
</div>
</div>
<div className="flex justify-center w-full px-[66px] mt-[110px] ">
{steps?.map((step, index) => {
if (index % 2 === 0) {
return (
<div key={index} className="relative w-[230px] "
style={{
marginLeft: index === 0 ? '0' : '-10px',
}}
>
<div className="relative flex justify-center items-center h-[276px]">
<div className="relative">
<img src={step.icon.__icon_url__} alt={step.icon.__icon_query__} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[42px] w-[42px] object-contain"
style={{
filter: step.highlighted ? "invert(1)" : "invert(0)",
}}
/>
<svg xmlns="http://www.w3.org/2000/svg" width="162" height="187" viewBox="0 0 162 187" fill="none">
<path d="M80.8291 0L161.658 46.6667V140L80.8291 186.667L2.28882e-05 140V46.6667L80.8291 0Z" fill={step.highlighted ? "var(--primary-color,#15342D)" : "var(--card-color,#FEFEFF)"} />
</svg>
</div>
<div className="absolute bottom-1 right-0">
<svg xmlns="http://www.w3.org/2000/svg" width="231" height="134" viewBox="0 0 231 134" fill="none">
<path d="M230.94 66.667L115.47 133.334L0 66.667V0H11.5469V60L115.47 120L219.393 60V0H230.94V66.667Z" fill="var(--card-color,#FEFEFF)" />
</svg>
</div>
</div>
<div className=" absolute bottom-[-110px] left-0 text-center mt-[60px]">
<p
className="text-[20px] font-semibold tracking-[2.074px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{step.label}
</p>
<p
className="mt-[6px] text-[24px] leading-[1.2] text-[#315f58]"
style={{ color: "var(--background-text,#315f58)" }}
>
{step.body}
</p>
</div>
</div>
)
}
else {
return (
<div key={index} className="relative w-[230px]"
style={{
marginLeft: index === 0 ? '0' : '-10px',
}}
>
<div className=" absolute top-[-100px] left-0 w-[224px] text-center">
<p
className="text-[20px] font-semibold tracking-[2.074px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{step.label}
</p>
<p
className="mt-[6px] text-[24px] leading-[1.2] text-[#315f58]"
style={{ color: "var(--background-text,#315f58)" }}
>
{step.body}
</p>
</div>
<div className="relative w-[230px] flex justify-center items-center h-[276px]">
<div className="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="162" height="187" viewBox="0 0 162 187" fill="none">
<path d="M80.8291 0L161.658 46.6667V140L80.8291 186.667L2.28882e-05 140V46.6667L80.8291 0Z" fill={step.highlighted ? "var(--primary-color,#15342D)" : "var(--card-color,#FEFEFF)"} />
</svg>
<img src={step.icon.__icon_url__} alt={step.icon.__icon_query__} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[42px] w-[42px] object-contain" />
</div>
<div className="absolute top-1 right-0">
<svg xmlns="http://www.w3.org/2000/svg" width="231" height="134" viewBox="0 0 231 134" fill="none">
<path d="M230.94 66.667L115.47 0L0 66.667V133.333H11.5469V73.333L115.47 13.333L219.394 73.333V133.333H230.94V66.667Z" fill="var(--card-color,#FEFEFF)" />
</svg>
</div>
</div>
</div>
)
}
})}
</div>
</div>
</>
);
};

693
electron/servers/nextjs/app/presentation-templates/ProductOverview/ReportSnapshotSlide.tsx
View file

@ -332,376 +332,379 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
const donutTotal = (donutData ?? []).reduce((sum, item) => sum + item.value, 0) || 1;
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#D7DEDB)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
{sideImage?.__image_url__ && (
<img
src={sideImage.__image_url__}
alt={sideImage.__image_prompt__}
className="absolute left-0 top-0 h-full w-[232px] object-cover"
/>
)}
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="absolute left-[268px] top-[74px] text-[#083F37]"
style={{ color: "var(--primary-color,#083F37)" }}
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: "var(--background-color,#D7DEDB)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<h2 className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px]">
{title}
</h2>
<div className="mt-[14px] w-[560px]">
<p
className="text-[20px] font-semibold tracking-[2.074px] text-[#083F37]"
style={{ color: "var(--primary-color,#083F37)" }}
>
{taglineLabel}
</p>
<p
className="mt-[12px] text-[24px] leading-[1.11] text-[#083F37]/75"
style={{ color: "var(--background-text,#083F37BF)" }}
>
{taglineBody}
</p>
</div>
</div>
<div
className={`absolute bottom-[50px] left-[266px] w-[580px] bg-[#F3F3F3] px-[28px] pb-[18px] pt-[20px] ${activeChartStyle === "mini-bars" ? "h-[308px]" : "h-[350px]"
}`}
style={{ backgroundColor: "var(--card-color,#F3F3F3)" }}
>
<p
className="mt-[14px] text-[32px] font-normal leading-[1.1] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{chartTitle}
</p>
{activeChartStyle === "mini-bars" && (
<>
<div className="mt-[18px] h-[166px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={resolvedMiniBars}
margin={{ top: 0, right: 8, left: -6, bottom: 0 }}
barCategoryGap={16}
>
<CartesianGrid vertical={false} stroke="var(--stroke,#D7DCDA)" strokeDasharray="3 3" />
<XAxis dataKey="label" tick={false} axisLine={false} tickLine={false} />
<YAxis
width={42}
tickFormatter={(value) => `$${value}`}
axisLine={false}
tickLine={false}
tick={{ fill: "var(--background-text,#6C7271)", fontSize: 10 }}
/>
<Bar
dataKey="secondary"
fill={MINI_BAR_LIGHT}
radius={[5, 5, 0, 0]}
isAnimationActive={false}
maxBarSize={26}
/>
<Bar
dataKey="primary"
fill={MINI_BAR_DARK}
radius={[5, 5, 0, 0]}
isAnimationActive={false}
maxBarSize={26}
/>
</BarChart>
</ResponsiveContainer>
</div>
<div className="mt-[14px] flex items-center justify-between ">
<p
className="text-[#6D7371] text-[18px]"
style={{ color: "var(--background-text,#6D7371)" }}
>
{footerLabel}
</p>
<p
className="font-medium text-[#15342D] text-[18px]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{footerValue}
</p>
</div>
</>
{sideImage?.__image_url__ && (
<img
src={sideImage.__image_url__}
alt={sideImage.__image_prompt__}
className="absolute left-0 top-0 h-full w-[232px] object-cover"
/>
)}
{activeChartStyle === "donut" && (
<div className="mt-[6px] flex h-[250px] items-center">
<div className="h-[220px] w-[250px]">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={donutData ?? []}
dataKey="value"
innerRadius={48}
outerRadius={82}
stroke="none"
labelLine={false}
label={renderDonutPercentLabel}
isAnimationActive={false}
>
{(donutData ?? []).map((entry, index) => (
<Cell key={`${entry.name}-${index}`} fill={DONUT_COLORS[index % DONUT_COLORS.length]} />
))}
</Pie>
</PieChart>
</ResponsiveContainer>
</div>
<div
className="absolute left-[268px] top-[74px] text-[#083F37]"
style={{ color: "var(--primary-color,#083F37)" }}
>
<h2 className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px]">
{title}
</h2>
<div className="ml-[8px] flex-1 space-y-[16px] pr-[8px]">
{(donutData ?? []).map((entry, index) => {
const percent = Math.round((entry.value / donutTotal) * 100);
return (
<div key={`${entry.name}-legend-${index}`} className="flex items-center justify-between">
<div className="flex items-center gap-[10px]">
<span
className="h-[14px] w-[14px] rounded-full"
style={{ backgroundColor: DONUT_COLORS[index % DONUT_COLORS.length] }}
/>
<div className="mt-[14px] w-[560px]">
<p
className="text-[20px] font-semibold tracking-[2.074px] text-[#083F37]"
style={{ color: "var(--primary-color,#083F37)" }}
>
{taglineLabel}
</p>
<p
className="mt-[12px] text-[24px] leading-[1.11] text-[#083F37]/75"
style={{ color: "var(--background-text,#083F37BF)" }}
>
{taglineBody}
</p>
</div>
</div>
<div
className={`absolute bottom-[50px] left-[266px] w-[580px] bg-[#F3F3F3] px-[28px] pb-[18px] pt-[20px] ${activeChartStyle === "mini-bars" ? "h-[308px]" : "h-[350px]"
}`}
style={{ backgroundColor: "var(--card-color,#F3F3F3)" }}
>
<p
className="mt-[14px] text-[32px] font-normal leading-[1.1] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{chartTitle}
</p>
{activeChartStyle === "mini-bars" && (
<>
<div className="mt-[18px] h-[166px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={resolvedMiniBars}
margin={{ top: 0, right: 8, left: -6, bottom: 0 }}
barCategoryGap={16}
>
<CartesianGrid vertical={false} stroke="var(--stroke,#D7DCDA)" strokeDasharray="3 3" />
<XAxis dataKey="label" tick={false} axisLine={false} tickLine={false} />
<YAxis
width={42}
tickFormatter={(value) => `$${value}`}
axisLine={false}
tickLine={false}
tick={{ fill: "var(--background-text,#6C7271)", fontSize: 10 }}
/>
<Bar
dataKey="secondary"
fill={MINI_BAR_LIGHT}
radius={[5, 5, 0, 0]}
isAnimationActive={false}
maxBarSize={26}
/>
<Bar
dataKey="primary"
fill={MINI_BAR_DARK}
radius={[5, 5, 0, 0]}
isAnimationActive={false}
maxBarSize={26}
/>
</BarChart>
</ResponsiveContainer>
</div>
<div className="mt-[14px] flex items-center justify-between ">
<p
className="text-[#6D7371] text-[18px]"
style={{ color: "var(--background-text,#6D7371)" }}
>
{footerLabel}
</p>
<p
className="font-medium text-[#15342D] text-[18px]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{footerValue}
</p>
</div>
</>
)}
{activeChartStyle === "donut" && (
<div className="mt-[6px] flex h-[250px] items-center">
<div className="h-[220px] w-[250px]">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={donutData ?? []}
dataKey="value"
innerRadius={48}
outerRadius={82}
stroke="none"
labelLine={false}
label={renderDonutPercentLabel}
isAnimationActive={false}
>
{(donutData ?? []).map((entry, index) => (
<Cell key={`${entry.name}-${index}`} fill={DONUT_COLORS[index % DONUT_COLORS.length]} />
))}
</Pie>
</PieChart>
</ResponsiveContainer>
</div>
<div className="ml-[8px] flex-1 space-y-[16px] pr-[8px]">
{(donutData ?? []).map((entry, index) => {
const percent = Math.round((entry.value / donutTotal) * 100);
return (
<div key={`${entry.name}-legend-${index}`} className="flex items-center justify-between">
<div className="flex items-center gap-[10px]">
<span
className="h-[14px] w-[14px] rounded-full"
style={{ backgroundColor: DONUT_COLORS[index % DONUT_COLORS.length] }}
/>
<p
className="text-[18px] font-bold text-[#767676]"
style={{ color: "var(--background-text,#767676)" }}
>
{legendLabels?.[index] ?? entry.name}
</p>
</div>
<p
className="text-[18px] font-bold text-[#767676]"
style={{ color: "var(--background-text,#767676)" }}
className="text-[18px] font-bold text-[#404040]"
style={{ color: "var(--background-text,#404040)" }}
>
{legendLabels?.[index] ?? entry.name}
{percent}%
</p>
</div>
<p
className="text-[18px] font-bold text-[#404040]"
style={{ color: "var(--background-text,#404040)" }}
>
{percent}%
</p>
</div>
);
})}
);
})}
</div>
</div>
</div>
)}
)}
{activeChartStyle === "grouped-bars" && (
<div className="mt-[12px] flex h-[236px] items-center justify-between">
<div className="h-[210px] w-[362px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={groupedBars ?? []}
margin={{ top: 12, right: 6, left: -12, bottom: 0 }}
barCategoryGap={20}
>
<CartesianGrid vertical={false} stroke="var(--stroke,#D7DCDA)" />
<XAxis
dataKey="label"
axisLine={false}
tickLine={false}
tick={{ fill: "var(--background-text,#42484A)", fontSize: 10 }}
/>
<YAxis
axisLine={false}
tickLine={false}
tick={{ fill: "var(--background-text,#566061)", fontSize: 10 }}
/>
<Bar
dataKey="optionA"
fill={MINI_BAR_DARK}
radius={[4, 4, 0, 0]}
maxBarSize={20}
isAnimationActive={false}
{activeChartStyle === "grouped-bars" && (
<div className="mt-[12px] flex h-[236px] items-center justify-between">
<div className="h-[210px] w-[362px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={groupedBars ?? []}
margin={{ top: 12, right: 6, left: -12, bottom: 0 }}
barCategoryGap={20}
>
<LabelList
<CartesianGrid vertical={false} stroke="var(--stroke,#D7DCDA)" />
<XAxis
dataKey="label"
axisLine={false}
tickLine={false}
tick={{ fill: "var(--background-text,#42484A)", fontSize: 10 }}
/>
<YAxis
axisLine={false}
tickLine={false}
tick={{ fill: "var(--background-text,#566061)", fontSize: 10 }}
/>
<Bar
dataKey="optionA"
position="top"
fill="var(--background-text,#5B6463)"
fontSize={9}
/>
</Bar>
<Bar
dataKey="optionB"
fill="var(--graph-2,#8A9A96)"
radius={[4, 4, 0, 0]}
maxBarSize={20}
isAnimationActive={false}
>
<LabelList
fill={MINI_BAR_DARK}
radius={[4, 4, 0, 0]}
maxBarSize={20}
isAnimationActive={false}
>
<LabelList
dataKey="optionA"
position="top"
fill="var(--background-text,#5B6463)"
fontSize={9}
/>
</Bar>
<Bar
dataKey="optionB"
position="top"
fill="var(--background-text,#5B6463)"
fontSize={9}
fill="var(--graph-2,#8A9A96)"
radius={[4, 4, 0, 0]}
maxBarSize={20}
isAnimationActive={false}
>
<LabelList
dataKey="optionB"
position="top"
fill="var(--background-text,#5B6463)"
fontSize={9}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
<div className="ml-[24px] space-y-[24px]">
<div className="flex items-center gap-[10px]">
<span
className="h-[14px] w-[14px] rounded-full bg-[#0B4B40]"
style={{ backgroundColor: "var(--graph-0,#0B4B40)" }}
/>
<p
className="text-[18px] font-medium leading-[1] text-[#6A6B6E]"
style={{ color: "var(--background-text,#6A6B6E)" }}
>
{legendLabels?.[0] ?? "Option A"}
</p>
</div>
<div className="flex items-center gap-[10px]">
<span
className="h-[14px] w-[14px] rounded-full bg-[#8A9A96]"
style={{ backgroundColor: "var(--graph-2,#8A9A96)" }}
/>
<p
className="text-[18px] font-medium leading-[1] text-[#6A6B6E]"
style={{ color: "var(--background-text,#6A6B6E)" }}
>
{legendLabels?.[1] ?? "Option B"}
</p>
</div>
</div>
</div>
)}
{activeChartStyle === "dual-line" && (
<div className="mt-[12px] flex h-[236px] items-center justify-between">
<div className="h-[210px] w-[362px]">
<ResponsiveContainer width="100%" height="100%">
<LineChart data={trendLines ?? []} margin={{ top: 12, right: 6, left: -6, bottom: 16 }}>
<CartesianGrid vertical={false} stroke="var(--stroke,#D7DCDA)" />
<XAxis
dataKey="label"
axisLine={false}
tickLine={false}
tick={{ fill: "var(--background-text,#42484A)", fontSize: 10 }}
label={{
value: xAxisName,
position: "insideBottom",
offset: -6,
fill: "var(--background-text,#535B5C)",
fontSize: 10,
}}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
<YAxis
axisLine={false}
tickLine={false}
<div className="ml-[24px] space-y-[24px]">
<div className="flex items-center gap-[10px]">
<span
className="h-[14px] w-[14px] rounded-full bg-[#0B4B40]"
style={{ backgroundColor: "var(--graph-0,#0B4B40)" }}
/>
<p
className="text-[18px] font-medium leading-[1] text-[#6A6B6E]"
style={{ color: "var(--background-text,#6A6B6E)" }}
>
{legendLabels?.[0] ?? "Option A"}
</p>
</div>
<div className="flex items-center gap-[10px]">
<span
className="h-[14px] w-[14px] rounded-full bg-[#8A9A96]"
style={{ backgroundColor: "var(--graph-2,#8A9A96)" }}
/>
<p
className="text-[18px] font-medium leading-[1] text-[#6A6B6E]"
style={{ color: "var(--background-text,#6A6B6E)" }}
>
{legendLabels?.[1] ?? "Option B"}
</p>
</div>
</div>
</div>
)}
{activeChartStyle === "dual-line" && (
<div className="mt-[12px] flex h-[236px] items-center justify-between">
<div className="h-[210px] w-[362px]">
<ResponsiveContainer width="100%" height="100%">
<LineChart data={trendLines ?? []} margin={{ top: 12, right: 6, left: -6, bottom: 16 }}>
<CartesianGrid vertical={false} stroke="var(--stroke,#D7DCDA)" />
<XAxis
dataKey="label"
axisLine={false}
tickLine={false}
tick={{ fill: "var(--background-text,#42484A)", fontSize: 10 }}
label={{
value: xAxisName,
position: "insideBottom",
offset: -6,
fill: "var(--background-text,#535B5C)",
fontSize: 10,
}}
/>
<YAxis
axisLine={false}
tickLine={false}
tick={{ fill: "var(--background-text,#566061)", fontSize: 10 }}
label={{
value: yAxisName,
angle: -90,
position: "insideLeft",
fill: "var(--background-text,#535B5C)",
fontSize: 10,
dx: -8,
}}
/>
<Line
type="monotone"
dataKey="optionA"
stroke={MINI_BAR_DARK}
strokeWidth={2}
dot={false}
isAnimationActive={false}
/>
<Line
type="monotone"
dataKey="optionB"
stroke="var(--graph-2,#8A9A96)"
strokeWidth={2}
dot={false}
isAnimationActive={false}
/>
</LineChart>
</ResponsiveContainer>
</div>
<div className="ml-[18px] space-y-[24px]">
<div className="flex items-center gap-[10px]">
<span
className="h-[14px] w-[14px] rounded-full bg-[#0B4B40]"
style={{ backgroundColor: "var(--graph-0,#0B4B40)" }}
/>
<p
className="text-[18px] font-medium leading-[1] text-[#6A6B6E]"
style={{ color: "var(--background-text,#6A6B6E)" }}
>
{legendLabels?.[0] ?? "Option A"}
</p>
</div>
<div className="flex items-center gap-[10px]">
<span
className="h-[14px] w-[14px] rounded-full bg-[#8A9A96]"
style={{ backgroundColor: "var(--graph-2,#8A9A96)" }}
/>
<p
className="text-[18px] font-medium leading-[1] text-[#6A6B6E]"
style={{ color: "var(--background-text,#6A6B6E)" }}
>
{legendLabels?.[1] ?? "Option B"}
</p>
</div>
</div>
</div>
)}
</div>
<div
className={`absolute right-[38px] w-[362px] ${activeChartStyle === "mini-bars" ? "top-[382px]" : "top-[320px]"
}`}
>
<div className="flex flex-col gap-[24px]">
{visibleMetricCards.map((metric, index) => (
<div
key={`${metric.value}-${index}`}
className="bg-[#F3F3F3] px-[33px] py-[24px]"
style={{ backgroundColor: "var(--card-color,#F3F3F3)" }}
>
<div className="flex items-center gap-[14px]">
<div
className="flex h-[56px] w-[56px] items-center justify-center rounded-full"
style={{ backgroundColor: KPI_ICON_BG }}
>
{usePulseFallback ? (
<PulseIcon />
) : (
<img
src={metricIcon?.__icon_url__}
alt={metricIcon?.__icon_query__}
className="h-[24px] w-[24px] object-contain"
style={{ filter: "invert(1)" }}
tick={{ fill: "var(--background-text,#566061)", fontSize: 10 }}
label={{
value: yAxisName,
angle: -90,
position: "insideLeft",
fill: "var(--background-text,#535B5C)",
fontSize: 10,
dx: -8,
}}
/>
)}
<Line
type="monotone"
dataKey="optionA"
stroke={MINI_BAR_DARK}
strokeWidth={2}
dot={false}
isAnimationActive={false}
/>
<Line
type="monotone"
dataKey="optionB"
stroke="var(--graph-2,#8A9A96)"
strokeWidth={2}
dot={false}
isAnimationActive={false}
/>
</LineChart>
</ResponsiveContainer>
</div>
<div className="ml-[18px] space-y-[24px]">
<div className="flex items-center gap-[10px]">
<span
className="h-[14px] w-[14px] rounded-full bg-[#0B4B40]"
style={{ backgroundColor: "var(--graph-0,#0B4B40)" }}
/>
<p
className="text-[18px] font-medium leading-[1] text-[#6A6B6E]"
style={{ color: "var(--background-text,#6A6B6E)" }}
>
{legendLabels?.[0] ?? "Option A"}
</p>
</div>
<div className="flex items-center gap-[10px]">
<span
className="h-[14px] w-[14px] rounded-full bg-[#8A9A96]"
style={{ backgroundColor: "var(--graph-2,#8A9A96)" }}
/>
<p
className="text-[18px] font-medium leading-[1] text-[#6A6B6E]"
style={{ color: "var(--background-text,#6A6B6E)" }}
>
{legendLabels?.[1] ?? "Option B"}
</p>
</div>
</div>
</div>
)}
</div>
<div
className={`absolute right-[38px] w-[362px] ${activeChartStyle === "mini-bars" ? "top-[382px]" : "top-[320px]"
}`}
>
<div className="flex flex-col gap-[24px]">
{visibleMetricCards.map((metric, index) => (
<div
key={`${metric.value}-${index}`}
className="bg-[#F3F3F3] px-[33px] py-[24px]"
style={{ backgroundColor: "var(--card-color,#F3F3F3)" }}
>
<div className="flex items-center gap-[14px]">
<div
className="flex h-[56px] w-[56px] items-center justify-center rounded-full"
style={{ backgroundColor: KPI_ICON_BG }}
>
{usePulseFallback ? (
<PulseIcon />
) : (
<img
src={metricIcon?.__icon_url__}
alt={metricIcon?.__icon_query__}
className="h-[24px] w-[24px] object-contain"
style={{ filter: "invert(1)" }}
/>
)}
</div>
<p
className="text-[48px] font-semibold leading-[1] text-[#113F37]"
style={{ color: "var(--primary-color,#113F37)" }}
>
{metric.value}
</p>
</div>
<p
className="text-[48px] font-semibold leading-[1] text-[#113F37]"
className="mt-[18px] text-[28px] leading-[1.08] text-[#113F37]"
style={{ color: "var(--primary-color,#113F37)" }}
>
{metric.value}
{metric.body}
</p>
</div>
<p
className="mt-[18px] text-[28px] leading-[1.08] text-[#113F37]"
style={{ color: "var(--primary-color,#113F37)" }}
>
{metric.body}
</p>
</div>
))}
))}
</div>
</div>
</div>
</div>
</>
);
};

93
electron/servers/nextjs/app/presentation-templates/ProductOverview/TableOfContentSlide.tsx
View file

@ -53,60 +53,63 @@ const TableOfContentSlide = ({ data }: { data: Partial<SchemaType> }) => {
const { title, description, sections } = data;
return (
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: PRODUCT_BG,
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="grid h-full grid-cols-[1fr_1fr]">
<div className="px-[128px] pt-[69px]" style={{ backgroundColor: PRODUCT_DARK }}>
<div className="space-y-[52px]">
{sections?.map((section, index) => (
<div key={index} className="flex items-center justify-between">
<div>
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
style={{
backgroundColor: PRODUCT_BG,
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="grid h-full grid-cols-[1fr_1fr]">
<div className="px-[128px] pt-[69px]" style={{ backgroundColor: PRODUCT_DARK }}>
<div className="space-y-[52px]">
{sections?.map((section, index) => (
<div key={index} className="flex items-center justify-between">
<div>
<p
className="text-[20px] font-semibold tracking-[0.2em] text-[#ecf2f1]"
style={{ color: "var(--primary-text,#ecf2f1)" }}
>
{section.title}
</p>
<p
className="mt-[6px] text-[18px] leading-[1.2] text-[#ecf2f1]"
style={{ color: "var(--primary-text,#ecf2f1)" }}
>
{section.description}
</p>
</div>
<p
className="text-[20px] font-semibold tracking-[0.2em] text-[#ecf2f1]"
className="text-[22px] font-medium text-[#ecf2f1]"
style={{ color: "var(--primary-text,#ecf2f1)" }}
>
{section.title}
</p>
<p
className="mt-[6px] text-[18px] leading-[1.2] text-[#ecf2f1]"
style={{ color: "var(--primary-text,#ecf2f1)" }}
>
{section.description}
{section.number}
</p>
</div>
<p
className="text-[22px] font-medium text-[#ecf2f1]"
style={{ color: "var(--primary-text,#ecf2f1)" }}
>
{section.number}
</p>
</div>
))}
))}
</div>
</div>
<div className="px-[42px] pt-[118px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
<p
className="mt-[28px] w-[560px] text-[24px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{description}
</p>
</div>
</div>
<div className="px-[42px] pt-[118px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
>
{title}
</h2>
<p
className="mt-[28px] w-[560px] text-[24px] font-normal text-[#15342DCC]"
style={{ color: "var(--background-text,#15342DCC)" }}
>
{description}
</p>
</div>
</div>
</div>
</>
);
};

10
electron/servers/nextjs/app/presentation-templates/Report/DataAnalysisBarSlide.tsx
View file

@ -10,7 +10,7 @@ const InsightItemSchema = z.object({
title: z.string().min(3).max(12).meta({
description: "Short insight title shown next to the icon.",
}),
description: z.string().min(20).max(84).meta({
description: z.string().min(20).max(40).meta({
description: "Supporting text shown below the insight title.",
}),
});
@ -40,7 +40,7 @@ export const Schema = z.object({
}),
items: z
.array(InsightItemSchema)
.min(3)
.max(3)
.default([
{ title: "Title 1", description: "Ut enim ad minima veniam, quis." },
@ -48,10 +48,10 @@ export const Schema = z.object({
{ title: "Title 2", description: "Ut enim ad minima veniam, quis." },
])
.meta({
description: "Three analysis points shown in the left column.",
description: "Three analysis points shown in the left column,maximum 3 items",
}),
chartData: flexibleChartDataSchema.default({
type: "pie",
type: "bar",
data: [
{ name: "Mon", value: 120 },
{ name: "Tue", value: 200 },
@ -81,7 +81,7 @@ const DataAnalysisBarSlide = ({ data }: { data: Partial<SchemaType> }) => {
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
style={{
backgroundColor: "var(--background-color,#f9f8f8)",
fontFamily: "var(--body-font-family,Nunito Sans)",
fontFamily: "var(--body-font-family,Helvetica Neue)",
}}
>
<div

19
electron/servers/nextjs/app/presentation-templates/Report/DataAnalysisDashboardSlide.tsx
View file

@ -121,13 +121,6 @@ export type SchemaType = z.infer<typeof Schema>;
const getChartHeight = (count: number, hasMetrics: boolean) => {
if (count <= 2) return hasMetrics ? 230 : 280;
if (count <= 3) return hasMetrics ? 210 : 260;
return hasMetrics ? 160 : 180;
};
function SummaryCard({
value,
label,
@ -187,7 +180,7 @@ const DataAnalysisDashboardSlide = ({ data }: { data: Partial<SchemaType> }) =>
className="relative flex flex-col h-[720px] w-[1280px] overflow-hidden bg-[#F9F8F8]"
style={{
backgroundColor: "var(--background-color,#F9F8F8)",
fontFamily: "var(--body-font-family,Nunito Sans)",
fontFamily: "var(--body-font-family,Helvetica Neue)",
}}
>
<div
@ -223,9 +216,9 @@ const DataAnalysisDashboardSlide = ({ data }: { data: Partial<SchemaType> }) =>
{halfChart && halfChart.length > 0 && <div className="mt-[14px] px-[64px] flex-1">
<div
className={`grid h-full bg-white p-[13px] rounded-[14px] min-h-0 gap-[10px] grid-cols-3`}
className={`grid h-full bg-white p-[13px] rounded-[14px] min-h-0 gap-[10px] `}
style={{
gridAutoRows: `minmax(150px, 1fr)`,
gridTemplateColumns: `repeat(${halfChart.length}, minmax(150px, 1fr))`,
backgroundColor: "var(--card-color,#ffffff)",
}}
>
@ -245,9 +238,9 @@ const DataAnalysisDashboardSlide = ({ data }: { data: Partial<SchemaType> }) =>
</div>}
{otherHalfChart && otherHalfChart.length > 0 && <div className="mt-[14px] px-[64px] flex-1">
<div
className={`grid h-full bg-white p-[13px] rounded-[14px] min-h-0 gap-[10px] grid-cols-3`}
className={`grid h-full bg-white p-[13px] rounded-[14px] min-h-0 gap-[10px] `}
style={{
gridAutoRows: `minmax(150px, 1fr)`,
gridTemplateColumns: `repeat(${otherHalfChart.length}, minmax(150px, 1fr))`,
backgroundColor: "var(--card-color,#ffffff)",
}}
>
@ -255,9 +248,7 @@ const DataAnalysisDashboardSlide = ({ data }: { data: Partial<SchemaType> }) =>
<div
key={index}
className="rounded-[6px] flex flex-col overflow-hidden"
>
<div className="flex-1 " >
<ResponsiveContainer width="100%" height="100%">
<FlexibleReportChart density="compact" chartType={chart.type} data={chart.data} series={chart.series} />

5
electron/servers/nextjs/app/presentation-templates/Report/DataAnalysisInsightBarSlide.tsx
View file

@ -41,13 +41,14 @@ export const Schema = z.object({
description: "Featured insight paragraph shown in the left content area.",
}),
chartData: flexibleChartDataSchema.default({
type: "pie",
type: "line-dual",
data: [
{ name: "Q1", value: 45 },
{ name: "Q2", value: 72 },
{ name: "Q3", value: 58 },
{ name: "Q4", value: 89 },
],
}),
legendLabel: z.string().min(3).max(32).default("Traditional Workflow").meta({
description: "Legend label shown below the chart.",
@ -70,7 +71,7 @@ const DataAnalysisInsightBarSlide = ({
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
style={{
backgroundColor: "var(--background-color,#f9f8f8)",
fontFamily: "var(--body-font-family,Nunito Sans)",
fontFamily: "var(--body-font-family,Helvetica Neue)",
}}
>
<div

29
electron/servers/nextjs/app/presentation-templates/Report/DataAnalysisLineStatsSlide.tsx
View file

@ -1,6 +1,5 @@
"use client";
import { Fragment } from "react/jsx-runtime";
import * as z from "zod";
import { ResponsiveContainer } from "recharts";
@ -11,10 +10,10 @@ const MetricSchema = z.object({
value: z.string().min(1).max(12).meta({
description: "Primary metric value shown in the stat card.",
}),
label: z.string().min(3).max(24).meta({
label: z.string().min(3).max(24).optional().meta({
description: "Metric label shown below the value.",
}),
description: z.string().min(6).max(36).meta({
description: z.string().min(6).max(36).optional().meta({
description: "Supporting description shown below the label.",
}),
});
@ -41,7 +40,7 @@ export const Schema = z.object({
description: "Legend label for the second line series.",
}),
chartData: flexibleChartDataSchema.default({
type: "pie",
type: "line-dual",
data: [
{ label: "label", valueA: 24, valueB: 40 },
{ label: "label", valueA: 55, valueB: 72 },
@ -82,8 +81,8 @@ export type SchemaType = z.infer<typeof Schema>;
type StatMetric = {
value: string;
label: string;
description: string;
label?: string;
description?: string;
};
function StatPill({ metrics }: { metrics: StatMetric[] }) {
@ -96,13 +95,13 @@ function StatPill({ metrics }: { metrics: StatMetric[] }) {
}}
>
{metrics.map((metric, index) => (
<Fragment key={`${metric.value}-${metric.label}-${index}`}>
<div key={`${metric.value}-${metric.label}-${index}`} className="flex flex-col items-center justify-between gap-2">
<div key={`${metric.value}-${metric.label}-${index}`} className={``}>
<p className="text-[55px] font-medium leading-[ 44.353px] tracking-[-1.09px]">{metric.value}</p>
<p className="mt-[6px] text-[20px] font-medium leading-none">{metric.label}</p>
<p className="text-[20px] leading-[1.15] text-white/90" style={{ color: "var(--primary-text,#ffffff)", opacity: 0.9 }}>
<p className="text-[55px] leading-[44.353px] tracking-[-1.09px]">{metric.value}</p>
{metric.label && <p className="mt-[6px] text-[20px] leading-none">{metric.label}</p>}
{metric.description && <p className="text-[20px] mt-1 leading-[1.15] text-white/90" style={{ color: "var(--primary-text,#ffffff)", opacity: 0.9 }}>
{metric.description}
</p>
</p>}
</div>
{index === 0 && (
<div className="py-[22px]">
@ -117,7 +116,7 @@ function StatPill({ metrics }: { metrics: StatMetric[] }) {
</svg>
</div>
)}
</Fragment>
</div>
))}
</div>
);
@ -134,7 +133,7 @@ const DataAnalysisLineStatsSlide = ({ data }: { data: Partial<SchemaType> }) =>
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
style={{
backgroundColor: "var(--background-color,#f9f8f8)",
fontFamily: "var(--body-font-family,Nunito Sans)",
fontFamily: "var(--body-font-family,Helvetica Neue)",
}}
>
<div
@ -153,7 +152,7 @@ const DataAnalysisLineStatsSlide = ({ data }: { data: Partial<SchemaType> }) =>
<div className="flex justify-between px-[74px] pt-[40px]">
<div className="w-[474px]">
<div
{chartType === "line-dual" && <div
className="flex justify-center gap-[26px] text-[14px] text-[#353538]"
style={{ color: "var(--background-text,#353538)" }}
>
@ -165,7 +164,7 @@ const DataAnalysisLineStatsSlide = ({ data }: { data: Partial<SchemaType> }) =>
<span className="h-[2px] w-[20px] bg-[#4d4ef3]" style={{ backgroundColor: "var(--graph-1,#4d4ef3)" }} />
{seriesBLabel}
</span>
</div>
</div>}
<div className="mt-[12px] h-[356px] w-full">
<ResponsiveContainer width="100%" height="100%">

2
electron/servers/nextjs/app/presentation-templates/Report/DataAnalysisListSlide.tsx
View file

@ -56,7 +56,7 @@ const DataAnalysisListSlide = ({ data }: { data: Partial<SchemaType> }) => {
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
style={{
backgroundColor: "var(--background-color,#f9f8f8)",
fontFamily: "var(--body-font-family,Nunito Sans)",
fontFamily: "var(--body-font-family,Helvetica Neue)",
}}
>
<div

2
electron/servers/nextjs/app/presentation-templates/Report/IntroSlide.tsx
View file

@ -19,7 +19,7 @@ const IntroSlide = ({ data }: { data: Partial<SchemaType> }) => {
className='relative w-[1280px] h-[720px] aspect-video flex flex-col justify-center items-center bg-white'
style={{
backgroundColor: "var(--background-color,#ffffff)",
fontFamily: "var(--body-font-family,Nunito Sans)",
fontFamily: "var(--body-font-family,Helvetica Neue)",
}}
>
<svg className="absolute top-0 left-10" xmlns="http://www.w3.org/2000/svg" width="116" height="251" viewBox="0 0 116 251" fill="none">

14
electron/servers/nextjs/app/presentation-templates/Report/IntroductionImageSlide.tsx
View file

@ -49,7 +49,7 @@ const IntroductionImageSlide = ({ data }: { data: Partial<SchemaType> }) => {
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
style={{
backgroundColor: "var(--background-color,#f9f8f8)",
fontFamily: "var(--body-font-family,Nunito Sans)",
fontFamily: "var(--body-font-family,Helvetica Neue)",
}}
>
<div
@ -72,16 +72,18 @@ const IntroductionImageSlide = ({ data }: { data: Partial<SchemaType> }) => {
{body}
</p>
<ul
<div
className="mt-8 list-disc pl-[28px] text-[24px] leading-[26.667px] text-[#232223]"
style={{ color: "var(--background-text,#232223)" }}
>
{bullets?.map((bullet, index) => (
<li key={`${bullet}-${index}`} className="mt-[8px]">
{bullet}
</li>
<div key={`${bullet}-${index}`} className="mt-[8px] flex items-center gap-2">
<div className="w-[8px] h-[8px] rounded-full bg-[#232223]" style={{ backgroundColor: "var(--background-text,#232223)" }} /> <p className="text-[24px] leading-[26.667px] text-[#232223]" style={{ color: "var(--background-text,#232223)" }}>
{bullet}
</p>
</div>
))}
</ul>
</div>
</div>
<div className="flex flex-1 items-end justify-end">

30
electron/servers/nextjs/app/presentation-templates/Report/IntroductionStatsSlide.tsx
View file

@ -5,10 +5,10 @@ const MetricSchema = z.object({
value: z.string().min(1).max(6).meta({
description: "Primary metric value shown in the card.",
}),
label: z.string().min(3).max(10).meta({
label: z.string().min(3).max(10).optional().meta({
description: "Short metric label shown below the value.",
}),
description: z.string().min(6).max(20).meta({
description: z.string().min(6).max(20).optional().meta({
description: "Supporting text shown below the label.",
}),
});
@ -73,8 +73,8 @@ export type SchemaType = z.infer<typeof Schema>;
type StatMetric = {
value: string;
label: string;
description: string;
label?: string;
description?: string;
};
function StatPill({
@ -101,13 +101,13 @@ function StatPill({
key={`${metric.value}-${metric.label}-${index}`}
className={``}
>
<p className="text-[55px] font-medium leading-[ 44.353px] tracking-[-1.09px]">
<p className="text-[55px] leading-[44.353px] tracking-[-1.09px]">
{metric.value}
</p>
<p className="mt-[6px] text-[20px] font-medium leading-none">{metric.label}</p>
<p className=" text-[20px] leading-[1.15] text-white/90" style={{ color: "var(--primary-text,#ffffff)", opacity: 0.9 }}>
{metric.label && <p className="mt-[6px] text-[20px] leading-none">{metric.label}</p>}
{metric.description && <p className=" text-[20px] mt-1 leading-[1.15] text-white/90" style={{ color: "var(--primary-text,#ffffff)", opacity: 0.9 }}>
{metric.description}
</p>
</p>}
</div>
{index === 0 && <div className="py-[22px]">
@ -139,7 +139,7 @@ const IntroductionStatsSlide = ({ data }: { data: Partial<SchemaType> }) => {
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
style={{
backgroundColor: "var(--background-color,#f9f8f8)",
fontFamily: "var(--body-font-family,Nunito Sans)",
fontFamily: "var(--body-font-family,Helvetica Neue)",
}}
>
<div
@ -162,16 +162,18 @@ const IntroductionStatsSlide = ({ data }: { data: Partial<SchemaType> }) => {
{body}
</p>
<ul
<div
className="mt-[34px] list-disc pl-[28px] text-[24px] leading-[26.667px] text-[#232223]"
style={{ color: "var(--background-text,#232223)" }}
>
{bullets?.map((bullet, index) => (
<li key={`${bullet}-${index}`} className="mt-[8px]">
{bullet}
</li>
<div key={`${bullet}-${index}`} className="mt-[8px] flex items-center gap-2">
<div className="w-[8px] h-[8px] rounded-full bg-[#232223]" style={{ backgroundColor: "var(--background-text,#232223)" }} /> <p className="text-[24px] leading-[26.667px] text-[#232223]" style={{ color: "var(--background-text,#232223)" }}>
{bullet}
</p>
</div>
))}
</ul>
</div>
</div>
<div className="ml-[48px] flex gap-[34px]">

2
electron/servers/nextjs/app/presentation-templates/Report/MilestoneSlide.tsx
View file

@ -70,7 +70,7 @@ const MilestoneSlide = ({ data }: { data: Partial<SchemaType> }) => {
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#F9F8F8]"
style={{
backgroundColor: "var(--background-color,#F9F8F8)",
fontFamily: "var(--body-font-family,Nunito Sans)",
fontFamily: "var(--body-font-family,Helvetica Neue)",
}}
>
<div

24
electron/servers/nextjs/app/presentation-templates/Report/PerformanceSnapshotSlide.tsx
View file

@ -5,17 +5,17 @@ const MetricSchema = z.object({
value: z.string().min(1).max(6).meta({
description: "Primary metric value shown in the pill.",
}),
label: z.string().min(3).max(10).meta({
label: z.string().max(10).optional().meta({
description: "Short label shown below the metric value.",
}),
description: z.string().min(6).max(20).meta({
description: z.string().min(6).max(20).optional().meta({
description: "Supporting metric description shown below the label.",
}),
});
const MetricColumnSchema = z.object({
metrics: z.array(MetricSchema).min(1).max(2).meta({
description: "One or two metrics shown in a single snapshot pill.",
metrics: z.array(MetricSchema).max(2).meta({
description: "One or two metrics shown in a single snapshot pill. Maximum two metrics.",
}),
});
@ -30,7 +30,7 @@ export const Schema = z.object({
}),
columns: z
.array(MetricColumnSchema)
.min(3)
.min(2)
.max(4)
.default([
{
@ -66,8 +66,8 @@ export type SchemaType = z.infer<typeof Schema>;
type StatMetric = {
value: string;
label: string;
description: string;
label?: string;
description?: string;
};
function StatPill({
@ -94,13 +94,13 @@ function StatPill({
key={`${metric.value}-${metric.label}-${index}`}
className={``}
>
<p className="text-[55px] font-medium leading-[ 44.353px] tracking-[-1.09px]">
<p className="text-[55px] leading-[44.353px] tracking-[-1.09px]">
{metric.value}
</p>
<p className="mt-[6px] text-[20px] font-medium leading-none">{metric.label}</p>
<p className=" text-[20px] leading-[1.15] text-white/90" style={{ color: "var(--primary-text,#ffffff)", opacity: 0.9 }}>
{metric.label && <p className="mt-[10px] text-[20px] font-medium leading-none">{metric.label}</p>}
{metric.description && <p className=" text-[20px] mt-1 leading-[1.15] text-white/90" style={{ color: "var(--primary-text,#ffffff)", opacity: 0.9 }}>
{metric.description}
</p>
</p>}
</div>
{index === 0 && <div className="py-[22px]">
@ -131,7 +131,7 @@ const PerformanceSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
style={{
backgroundColor: "var(--background-color,#f9f8f8)",
fontFamily: "var(--body-font-family,Nunito Sans)",
fontFamily: "var(--body-font-family,Helvetica Neue)",
}}
>
<div

2
electron/servers/nextjs/app/presentation-templates/Report/ServicesSlide.tsx
View file

@ -112,7 +112,7 @@ const ServicesSlide = ({ data }: { data: Partial<SchemaType> }) => {
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
style={{
backgroundColor: "var(--background-color,#f9f8f8)",
fontFamily: "var(--body-font-family,Nunito Sans)",
fontFamily: "var(--body-font-family,Helvetica Neue)",
}}
>
<div

2
electron/servers/nextjs/app/presentation-templates/Report/SolutionSlide.tsx
View file

@ -94,7 +94,7 @@ const SolutionSlide = ({ data }: SolutionSlideProps) => {
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#F9F8F8]"
style={{
backgroundColor: "var(--background-color,#F9F8F8)",
fontFamily: "var(--body-font-family,Nunito Sans)",
fontFamily: "var(--body-font-family,Helvetica Neue)",
}}
>
<div className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"

2
electron/servers/nextjs/app/presentation-templates/Report/TeamSlide.tsx
View file

@ -83,7 +83,7 @@ const TeamSlide = ({ data }: { data: Partial<SchemaType> }) => {
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-white"
style={{
backgroundColor: "var(--background-color,#ffffff)",
fontFamily: "var(--body-font-family,Nunito Sans)",
fontFamily: "var(--body-font-family,Helvetica Neue)",
}}
>
<div className="grid h-full "

4
electron/servers/nextjs/app/presentation-templates/Report/flexibleReportChart.tsx
View file

@ -286,13 +286,13 @@ export function FlexibleReportChart({
const ui = {
tickFs: compact ? 6 : 10,
catAxisW: compact ? 36 : 60,
barSize: compact ? 12 : 35,
barSize: compact ? 20 : 35,
labelFs: compact ? 8 : 14,
labelOffTop: compact ? 2 : 10,
labelOffSide: compact ? 2 : 8,
margin: compact
? { top: 10, right: 15, left: -2, bottom: 0 }
: { top: 15, right: 20, left: 0, bottom: 5 },
: { top: 20, right: 20, left: 0, bottom: 5 },
lineStroke: compact ? 2 : 3,
dotR: compact ? 2.5 : 4,
dotStroke: compact ? 1 : 2,