feat: new templates fonts & icons color changing
This commit is contained in:
shiva raj badu
parent
b1c7c3fd27
commit
acfb6dcf27
28 changed files with 1143 additions and 1124 deletions
|
|
@ -82,37 +82,6 @@ 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/HelveticaNeue-Bold.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/HelveticaNeue-Medium.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/HelveticaNeue-Roman.otf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { RemoteSvgIcon } from "@/app/hooks/useRemoteSvgIcon";
|
||||
import * as z from "zod";
|
||||
|
||||
const FeatureCardSchema = z.object({
|
||||
|
|
@ -129,10 +130,17 @@ const CodeSlide04FeatureGrid = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
backgroundColor: "var(--primary-color,#2B7FFF33)",
|
||||
}}
|
||||
>
|
||||
<img src={feature.icon.__icon_url__} alt={feature.icon.__icon_query__} className="h-[24px] w-[24px] object-contain"
|
||||
{/* <img src={feature.icon.__icon_url__} alt={feature.icon.__icon_query__} className="h-[24px] w-[24px] object-contain"
|
||||
style={{
|
||||
filter: "invert(1)",
|
||||
}}
|
||||
/> */}
|
||||
<RemoteSvgIcon
|
||||
url={feature.icon?.__icon_url__}
|
||||
strokeColor={"currentColor"}
|
||||
className="h-[24px] w-[24px] object-contain"
|
||||
color="var(--primary-text, #000000)"
|
||||
title={feature.icon.__icon_query__}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ export const Schema = z.object({
|
|||
}),
|
||||
items: z
|
||||
.array(z.object({
|
||||
number: z.string().min(2).max(2).meta({"description": "Bullet Serial Number"}),
|
||||
label: z.string().min(3).max(30).meta({"description": "Page/Content Name"}),
|
||||
description: z.string().min(3).max(100).optional().meta({"description": "Short description for the content section."}),
|
||||
number: z.string().min(2).max(2).meta({ "description": "Bullet Serial Number" }),
|
||||
label: z.string().min(3).max(30).meta({ "description": "Page/Content Name" }),
|
||||
description: z.string().min(3).max(100).optional().meta({ "description": "Short description for the content section." }),
|
||||
}))
|
||||
.min(12)
|
||||
.max(12)
|
||||
|
|
@ -50,7 +50,7 @@ function TocColumn({ items }: { items: { number: string; label: string, descript
|
|||
<div className=""><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||||
<path d="M17.7778 17.7776C18.2493 17.7776 18.7015 17.5903 19.0349 17.2569C19.3683 16.9235 19.5556 16.4713 19.5556 15.9998V7.11095C19.5556 6.63945 19.3683 6.18727 19.0349 5.85387C18.7015 5.52047 18.2493 5.33317 17.7778 5.33317H10.7556C10.4583 5.33609 10.165 5.26438 9.90254 5.12462C9.6401 4.98486 9.41691 4.7815 9.25339 4.53317L8.53339 3.4665C8.37151 3.2207 8.15114 3.01893 7.89205 2.8793C7.63296 2.73967 7.34326 2.66655 7.04894 2.6665H3.55561C3.08411 2.6665 2.63193 2.8538 2.29853 3.1872C1.96513 3.5206 1.77783 3.97279 1.77783 4.44428V15.9998C1.77783 16.4713 1.96513 16.9235 2.29853 17.2569C2.63193 17.5903 3.08411 17.7776 3.55561 17.7776H17.7778Z" stroke="var(--primary-color,#51A2FF)" strokeWidth="1.77778" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg></div>
|
||||
<p className="w-[36px] text-[18px] leading-none" style={{ color: "var(--primary-color,#8EC5FF)" }}>{item.number}</p>
|
||||
<p className="w-[36px] text-[18px] leading-none" style={{ color: "var(--primary-text,#8EC5FF)" }}>{item.number}</p>
|
||||
</div>
|
||||
<div className="flex gap-[26px]">
|
||||
<p className="text-[18px]" style={{ color: "var(--background-text,#ffffff)" }}>{item.label}</p>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ const CodeSlide07UseCaseList = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
style={{
|
||||
borderColor: "var(--primary-color,#2B7FFF4D)",
|
||||
backgroundColor: "var(--primary-color,#2B7FFF33)",
|
||||
color: "var(--primary-color,#51A2FF)",
|
||||
color: "var(--primary-text,#51A2FF)",
|
||||
}}
|
||||
>
|
||||
{index + 1}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { RemoteSvgIcon } from "@/app/hooks/useRemoteSvgIcon";
|
||||
import { Fragment } from "react";
|
||||
import * as z from "zod";
|
||||
|
||||
|
|
@ -108,11 +109,18 @@ const CodeSlide06Workflow = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
backgroundColor: "var(--primary-color,#2B7FFF33)",
|
||||
}}
|
||||
>
|
||||
<img src={step.icon.__icon_url__} alt={step.icon.__icon_query__} className="h-[37px] w-[37px] object-contain"
|
||||
<RemoteSvgIcon
|
||||
url={step.icon?.__icon_url__}
|
||||
strokeColor={"currentColor"}
|
||||
className="h-[37px] w-[37px] object-contain"
|
||||
color="var(--primary-text, #ffffff)"
|
||||
title={step.icon.__icon_query__}
|
||||
/>
|
||||
{/* <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>
|
||||
|
|
|
|||
|
|
@ -54,13 +54,13 @@ const EducationAboutSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
|
||||
|
||||
return (<>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Corben:wght@400;700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet" />
|
||||
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#efeff1)",
|
||||
fontFamily: "var(--body-font-family,'Times New Roman')",
|
||||
fontFamily: "var(--body-font-family,'Source Serif 4')",
|
||||
}}
|
||||
>
|
||||
<div className="grid items-end grid-cols-[1fr_1fr]">
|
||||
|
|
|
|||
|
|
@ -69,19 +69,8 @@ type TooltipPayloadItem = {
|
|||
value?: string | number;
|
||||
};
|
||||
|
||||
type TooltipProps = {
|
||||
active?: boolean;
|
||||
label?: string | number;
|
||||
payload?: TooltipPayloadItem[];
|
||||
};
|
||||
|
||||
type PieLabelProps = {
|
||||
name?: string;
|
||||
percent?: number;
|
||||
textAnchor?: "start" | "middle" | "end";
|
||||
x?: number;
|
||||
y?: number;
|
||||
};
|
||||
|
||||
|
||||
const DEFAULT_COLORS = [
|
||||
"var(--graph-0,#4A15A8)",
|
||||
|
|
@ -113,21 +102,7 @@ function isSimpleDatum(item: EducationChartDatum): item is SimpleDatum {
|
|||
return typeof (item as SimpleDatum).name === "string" && typeof (item as SimpleDatum).value === "number";
|
||||
}
|
||||
|
||||
function isMultiSeriesDatum(item: EducationChartDatum): item is MultiSeriesDatum {
|
||||
return (
|
||||
typeof (item as MultiSeriesDatum).name === "string" &&
|
||||
typeof (item as MultiSeriesDatum).values === "object" &&
|
||||
(item as MultiSeriesDatum).values !== null
|
||||
);
|
||||
}
|
||||
|
||||
function isDivergingDatum(item: EducationChartDatum): item is DivergingDatum {
|
||||
return (
|
||||
typeof (item as DivergingDatum).name === "string" &&
|
||||
typeof (item as DivergingDatum).positive === "number" &&
|
||||
typeof (item as DivergingDatum).negative === "number"
|
||||
);
|
||||
}
|
||||
|
||||
function isScatterDatum(item: EducationChartDatum): item is ScatterDatum {
|
||||
return typeof (item as ScatterDatum).x === "number" && typeof (item as ScatterDatum).y === "number";
|
||||
|
|
@ -215,70 +190,14 @@ const renderPieInsideLabel = (props: any) => {
|
|||
);
|
||||
};
|
||||
|
||||
function transformMultiSeriesData(data: EducationChartDatum[], series: string[]) {
|
||||
return data
|
||||
.filter(isMultiSeriesDatum)
|
||||
.map((item) => {
|
||||
const transformed: Record<string, string | number> = {
|
||||
name: item.name,
|
||||
};
|
||||
|
||||
series.forEach((serie) => {
|
||||
transformed[serie] = item.values?.[serie] ?? 0;
|
||||
});
|
||||
|
||||
return transformed;
|
||||
});
|
||||
}
|
||||
|
||||
function transformDivergingData(data: EducationChartDatum[]) {
|
||||
return data
|
||||
.filter(isDivergingDatum)
|
||||
.map((item) => ({
|
||||
name: item.name,
|
||||
positive: item.positive,
|
||||
negative: -Math.abs(item.negative),
|
||||
}));
|
||||
}
|
||||
|
||||
function CustomTooltip({ active, payload, label }: TooltipProps) {
|
||||
if (!active || !payload || payload.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="rounded-[8px] border px-[10px] py-[8px]"
|
||||
style={{
|
||||
borderColor: "var(--stroke,#ddd9e8)",
|
||||
backgroundColor: "var(--card-color,#f7f6fa)",
|
||||
}}
|
||||
>
|
||||
<p className="text-[11px] font-semibold" style={{ color: "var(--background-text,#3f3d47)" }}>{label}</p>
|
||||
{payload.map((entry, index) => (
|
||||
<p key={`${entry.name ?? "value"}-${index}`} className="text-[10px]" style={{ color: "var(--background-text,#5d5b67)" }}>
|
||||
{entry.name ?? entry.dataKey}: {String(entry.value)}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getChartColor(index: number) {
|
||||
return DEFAULT_COLORS[index % DEFAULT_COLORS.length];
|
||||
}
|
||||
|
||||
function renderPieLabel({ name, percent = 0, x = 0, y = 0, textAnchor = "middle" }: PieLabelProps) {
|
||||
if (percent < 0.08) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<text x={x} y={y} textAnchor={textAnchor} fill={AXIS} fontSize={10} fontFamily="var(--body-font-family,'Times New Roman')">
|
||||
{`${name ?? ""} ${(percent * 100).toFixed(0)}%`}
|
||||
</text>
|
||||
);
|
||||
}
|
||||
|
||||
function ChartLegend({ showLegend }: { showLegend: boolean }) {
|
||||
if (!showLegend) {
|
||||
|
|
|
|||
|
|
@ -47,45 +47,49 @@ const EducationContentSplitSlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
const { heading, tagline, body, images } = data;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#E6E7E8)",
|
||||
fontFamily: "var(--body-font-family,'Times New Roman')",
|
||||
}}
|
||||
>
|
||||
<div className="w-full flex items-center h-full">
|
||||
<div className="w-[660px] h-full">
|
||||
<div className="h-[394px] w-full mb-[6px]">
|
||||
<img
|
||||
src={images?.[0]?.__image_url__}
|
||||
alt={images?.[0]?.__image_prompt__}
|
||||
className=" h-full w-full object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full gap-[6px] h-[320px] ">
|
||||
<div className="w-[330px]"> <img
|
||||
src={images?.[1]?.__image_url__}
|
||||
alt={images?.[1]?.__image_prompt__}
|
||||
className="h-full w-full object-cover "
|
||||
/></div>
|
||||
<div className="w-[330px]"> <img
|
||||
src={images?.[2]?.__image_url__}
|
||||
alt={images?.[2]?.__image_prompt__}
|
||||
className="h-full w-full object-cover "
|
||||
/></div>
|
||||
</div>
|
||||
</div>
|
||||
<>
|
||||
|
||||
<div className="w-1/2 px-[56px]">
|
||||
<h2 className="text-[24px] font-medium leading-none" style={{ color: "var(--background-text,#34394C)" }}>{heading}</h2>
|
||||
<p className=" text-[14px] font-medium mt-1 leading-none tracking-[0.04em]" style={{ color: "var(--background-text,#454962)" }}>
|
||||
{tagline}
|
||||
</p>
|
||||
<p className="mt-[18px] text-[22px] leading-[1.28]" style={{ color: "var(--background-text,#34394C)" }}>{body}</p>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#E6E7E8)",
|
||||
fontFamily: "var(--body-font-family,'Source Serif 4')",
|
||||
}}
|
||||
>
|
||||
<div className="w-full flex items-center h-full">
|
||||
<div className="w-[660px] h-full">
|
||||
<div className="h-[394px] w-full mb-[6px]">
|
||||
<img
|
||||
src={images?.[0]?.__image_url__}
|
||||
alt={images?.[0]?.__image_prompt__}
|
||||
className=" h-full w-full object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full gap-[6px] h-[320px] ">
|
||||
<div className="w-[330px]"> <img
|
||||
src={images?.[1]?.__image_url__}
|
||||
alt={images?.[1]?.__image_prompt__}
|
||||
className="h-full w-full object-cover "
|
||||
/></div>
|
||||
<div className="w-[330px]"> <img
|
||||
src={images?.[2]?.__image_url__}
|
||||
alt={images?.[2]?.__image_prompt__}
|
||||
className="h-full w-full object-cover "
|
||||
/></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-1/2 px-[56px]">
|
||||
<h2 className="text-[24px] font-medium leading-none" style={{ color: "var(--background-text,#34394C)" }}>{heading}</h2>
|
||||
<p className=" text-[14px] font-medium mt-1 leading-none tracking-[0.04em]" style={{ color: "var(--background-text,#454962)" }}>
|
||||
{tagline}
|
||||
</p>
|
||||
<p className="mt-[18px] text-[22px] leading-[1.28]" style={{ color: "var(--background-text,#34394C)" }}>{body}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -31,38 +31,42 @@ const EducationCoverSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
const { name, title, backgroundImage } = data;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#2e0a8a)",
|
||||
fontFamily: "var(--body-font-family,'Times New Roman')",
|
||||
}}
|
||||
>
|
||||
<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=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet" />
|
||||
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: "var(--primary-color,#3b0bb6)",
|
||||
opacity: 0.85,
|
||||
backgroundColor: "var(--background-color,#2e0a8a)",
|
||||
fontFamily: "var(--body-font-family,'Source Serif 4')",
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
<div
|
||||
className="relative z-10 flex h-full flex-col items-center justify-center text-center"
|
||||
style={{ color: "var(--primary-text,#ffffff)" }}
|
||||
>
|
||||
{name && <p className="text-[22px] font-normal tracking-[0.64px]">{name}</p>
|
||||
} <h1 className="mt-[12px] px-[53px] text-[64px] font-medium leading-[98%]">
|
||||
{title}
|
||||
</h1>
|
||||
<img
|
||||
src={backgroundImage?.__image_url__}
|
||||
alt={backgroundImage?.__image_prompt__}
|
||||
className="absolute inset-0 h-full w-full object-cover"
|
||||
/>
|
||||
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
backgroundColor: "var(--primary-color,#3b0bb6)",
|
||||
opacity: 0.85,
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
<div
|
||||
className="relative z-10 flex h-full flex-col items-center justify-center text-center"
|
||||
style={{ color: "var(--primary-text,#ffffff)" }}
|
||||
>
|
||||
{name && <p className="text-[22px] font-normal tracking-[0.64px]">{name}</p>
|
||||
} <h1 className="mt-[12px] px-[53px] text-[64px] font-medium leading-[98%]">
|
||||
{title}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -33,52 +33,56 @@ const EducationImageGallerySlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
const { title, body, galleryImages } = data;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#E6E7E8)",
|
||||
fontFamily: "var(--body-font-family,'Times New Roman')",
|
||||
}}
|
||||
>
|
||||
<div className="grid h-full items-end grid-cols-[590px_1fr]">
|
||||
<div className="grid h-full grid-cols-2 grid-rows-[245px_245px_230px] gap-[2px]">
|
||||
<img
|
||||
src={galleryImages?.[0].__image_url__}
|
||||
alt={galleryImages?.[0].__image_prompt__}
|
||||
className="h-full w-full object-cover object-left"
|
||||
/>
|
||||
<img
|
||||
src={galleryImages?.[1].__image_url__}
|
||||
alt={galleryImages?.[1].__image_prompt__}
|
||||
className="h-full w-full object-cover object-right"
|
||||
/>
|
||||
<img
|
||||
src={galleryImages?.[2].__image_url__}
|
||||
alt={galleryImages?.[2].__image_prompt__}
|
||||
className="h-full w-full object-cover object-top"
|
||||
/>
|
||||
<img
|
||||
src={galleryImages?.[3].__image_url__}
|
||||
alt={galleryImages?.[3].__image_prompt__}
|
||||
className="h-full w-full object-cover object-center"
|
||||
/>
|
||||
<img
|
||||
src={galleryImages?.[4].__image_url__}
|
||||
alt={galleryImages?.[4].__image_prompt__}
|
||||
className="col-span-2 h-full w-full object-cover object-bottom"
|
||||
/>
|
||||
</div>
|
||||
<>
|
||||
|
||||
<div className="px-[64px] pb-[56px] ">
|
||||
<h2 className="font-serif text-[64px] font-medium leading-[98%]" style={{ color: "var(--primary-color,#101C3D)" }}>
|
||||
{title}
|
||||
</h2>
|
||||
<p className="mt-[37px] text-[22px]" style={{ color: "var(--background-text,#34394C)" }}>
|
||||
{body}
|
||||
</p>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#E6E7E8)",
|
||||
fontFamily: "var(--body-font-family,'Source Serif 4')",
|
||||
}}
|
||||
>
|
||||
<div className="grid h-full items-end grid-cols-[590px_1fr]">
|
||||
<div className="grid h-full grid-cols-2 grid-rows-[245px_245px_230px] gap-[2px]">
|
||||
<img
|
||||
src={galleryImages?.[0].__image_url__}
|
||||
alt={galleryImages?.[0].__image_prompt__}
|
||||
className="h-full w-full object-cover object-left"
|
||||
/>
|
||||
<img
|
||||
src={galleryImages?.[1].__image_url__}
|
||||
alt={galleryImages?.[1].__image_prompt__}
|
||||
className="h-full w-full object-cover object-right"
|
||||
/>
|
||||
<img
|
||||
src={galleryImages?.[2].__image_url__}
|
||||
alt={galleryImages?.[2].__image_prompt__}
|
||||
className="h-full w-full object-cover object-top"
|
||||
/>
|
||||
<img
|
||||
src={galleryImages?.[3].__image_url__}
|
||||
alt={galleryImages?.[3].__image_prompt__}
|
||||
className="h-full w-full object-cover object-center"
|
||||
/>
|
||||
<img
|
||||
src={galleryImages?.[4].__image_url__}
|
||||
alt={galleryImages?.[4].__image_prompt__}
|
||||
className="col-span-2 h-full w-full object-cover object-bottom"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="px-[64px] pb-[56px] ">
|
||||
<h2 className="font-serif text-[64px] font-medium leading-[98%]" style={{ color: "var(--primary-color,#101C3D)" }}>
|
||||
{title}
|
||||
</h2>
|
||||
<p className="mt-[37px] text-[22px]" style={{ color: "var(--background-text,#34394C)" }}>
|
||||
{body}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -136,50 +136,54 @@ const EducationReportChartSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
const chartHeightClass = slideData.showStatusMessage ? "h-[372px]" : "h-[486px]";
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#efeff1)",
|
||||
fontFamily: "var(--body-font-family,'Times New Roman')",
|
||||
}}
|
||||
>
|
||||
<div className="grid h-full grid-cols-[1fr_560px] items-center ">
|
||||
<div className="px-[52px] pb-[46px] mt-[111px] ">
|
||||
<div className="text-start">
|
||||
<h2 className=" text-[64px] font-medium leading-[98%]" style={{ color: "var(--primary-color,#101C3D)" }}>
|
||||
{slideData.title}
|
||||
</h2>
|
||||
<p className=" mt-[38px] max-w-[610px] text-[22px] leading-[1.22]" style={{ color: "var(--background-text,#3E3F4A)" }}>
|
||||
{slideData.body}
|
||||
<>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#efeff1)",
|
||||
fontFamily: "var(--body-font-family,'Times New Roman')",
|
||||
}}
|
||||
>
|
||||
<div className="grid h-full grid-cols-[1fr_560px] items-center ">
|
||||
<div className="px-[52px] pb-[46px] mt-[111px] ">
|
||||
<div className="text-start">
|
||||
<h2 className=" text-[64px] font-medium leading-[98%]" style={{ color: "var(--primary-color,#101C3D)" }}>
|
||||
{slideData.title}
|
||||
</h2>
|
||||
<p className=" mt-[38px] max-w-[610px] text-[22px] leading-[1.22]" style={{ color: "var(--background-text,#3E3F4A)" }}>
|
||||
{slideData.body}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="max-w-[610px] mt-[96px] text-[18px] leading-[1.22]" style={{ color: "var(--background-text,#4E4F57)" }}>
|
||||
{slideData.footnote}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="max-w-[610px] mt-[96px] text-[18px] leading-[1.22]" style={{ color: "var(--background-text,#4E4F57)" }}>
|
||||
{slideData.footnote}
|
||||
</p>
|
||||
</div>
|
||||
<div className="px-[42px] h-full flex flex-col justify-center" style={{ backgroundColor: "var(--card-color,#eceaf0)" }}>
|
||||
<h3 className="text-center text-[24px] font-semibold leading-none" style={{ color: "var(--background-text,#33313A)" }}>
|
||||
{slideData.chartTitle}
|
||||
</h3>
|
||||
<p className="mt-1 text-center pb-6 text-[18px] leading-none" style={{ color: "var(--background-text,#4D4B55)" }}>
|
||||
{slideData.dateRange}
|
||||
</p>
|
||||
|
||||
<div className="px-[42px] h-full flex flex-col justify-center" style={{ backgroundColor: "var(--card-color,#eceaf0)" }}>
|
||||
<h3 className="text-center text-[24px] font-semibold leading-none" style={{ color: "var(--background-text,#33313A)" }}>
|
||||
{slideData.chartTitle}
|
||||
</h3>
|
||||
<p className="mt-1 text-center pb-6 text-[18px] leading-none" style={{ color: "var(--background-text,#4D4B55)" }}>
|
||||
{slideData.dateRange}
|
||||
</p>
|
||||
|
||||
<div className={` ${chartHeightClass} h-[372px]`}>
|
||||
<EducationChartPrimitives
|
||||
chartType={slideData.chartType as EducationChartType}
|
||||
chartData={slideData.chartData as EducationChartDatum[]}
|
||||
series={slideData.series || []}
|
||||
showLegend={slideData.showLegend || false}
|
||||
divergingLabels={slideData.divergingLabels || ['', '']}
|
||||
showTooltip={true}
|
||||
/>
|
||||
<div className={` ${chartHeightClass} h-[372px]`}>
|
||||
<EducationChartPrimitives
|
||||
chartType={slideData.chartType as EducationChartType}
|
||||
chartData={slideData.chartData as EducationChartDatum[]}
|
||||
series={slideData.series || []}
|
||||
showLegend={slideData.showLegend || false}
|
||||
divergingLabels={slideData.divergingLabels || ['', '']}
|
||||
showTooltip={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -91,64 +91,68 @@ const EducationServicesSplitSlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#E6E7E8)",
|
||||
fontFamily: "var(--body-font-family,'Times New Roman')",
|
||||
}}
|
||||
>
|
||||
<div className="grid h-full grid-cols-[365px_1fr]">
|
||||
<div className="px-[53px] pt-[53px]">
|
||||
<h2 className="font-serif text-[64px] leading-[98%] tracking-[-0.02em]" style={{ color: "var(--primary-color,#1a1752)" }}>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
<>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#E6E7E8)",
|
||||
fontFamily: "var(--body-font-family,'Source Serif 4')",
|
||||
}}
|
||||
>
|
||||
<div className="grid h-full grid-cols-[365px_1fr]">
|
||||
<div className="px-[53px] pt-[53px]">
|
||||
<h2 className="font-serif text-[64px] leading-[98%] tracking-[-0.02em]" style={{ color: "var(--primary-color,#1a1752)" }}>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className=" grid "
|
||||
style={{
|
||||
gridTemplateRows: `repeat(${sections?.length}, 1fr)`,
|
||||
}}
|
||||
>
|
||||
{sections?.map((section, index) => (
|
||||
<div key={`${section.heading}-${index}`} className=" flex items-center"
|
||||
style={{
|
||||
borderBottom:
|
||||
index !== (sections?.length ?? 1) - 1
|
||||
? "5px solid var(--stroke,rgba(255, 255, 255, 0.10))"
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
<div className=" min-w-[316px] max-w-[316px] "
|
||||
<div className=" grid "
|
||||
style={{
|
||||
gridTemplateRows: `repeat(${sections?.length}, 1fr)`,
|
||||
}}
|
||||
>
|
||||
{sections?.map((section, index) => (
|
||||
<div key={`${section.heading}-${index}`} className=" flex items-center"
|
||||
style={{
|
||||
height: sections?.length === 4 ? '175px' : sections?.length === 3 ? '240px' : '357px'
|
||||
borderBottom:
|
||||
index !== (sections?.length ?? 1) - 1
|
||||
? "5px solid var(--stroke,rgba(255, 255, 255, 0.10))"
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
<div className=" min-w-[316px] max-w-[316px] "
|
||||
style={{
|
||||
height: sections?.length === 4 ? '175px' : sections?.length === 3 ? '240px' : '357px'
|
||||
}}
|
||||
>
|
||||
|
||||
<img
|
||||
src={section.image?.__image_url__}
|
||||
alt={section.image?.__image_prompt__}
|
||||
className="h-full w-full object-cover "
|
||||
/>
|
||||
<img
|
||||
src={section.image?.__image_url__}
|
||||
alt={section.image?.__image_prompt__}
|
||||
className="h-full w-full object-cover "
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`px-[56px] `}
|
||||
>
|
||||
<h3 className="text-[24px] font-medium leading-none" style={{ color: "var(--background-text,#34394C)" }}>{section.heading}</h3>
|
||||
<p className="mt-[10px] text-[14px] font-medium uppercase leading-none" style={{ color: "var(--background-text,#454962)" }}>
|
||||
{section.tagline}
|
||||
</p>
|
||||
<p className="mt-[18px] text-[22px] leading-[1.26] tracking-[0.04em]" style={{ color: "var(--background-text,#34394C)" }}>
|
||||
{section.body}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`px-[56px] `}
|
||||
>
|
||||
<h3 className="text-[24px] font-medium leading-none" style={{ color: "var(--background-text,#34394C)" }}>{section.heading}</h3>
|
||||
<p className="mt-[10px] text-[14px] font-medium uppercase leading-none" style={{ color: "var(--background-text,#454962)" }}>
|
||||
{section.tagline}
|
||||
</p>
|
||||
<p className="mt-[18px] text-[22px] leading-[1.26] tracking-[0.04em]" style={{ color: "var(--background-text,#34394C)" }}>
|
||||
{section.body}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -51,89 +51,93 @@ const EducationStatisticsGridSlide = ({ data }: { data: Partial<SchemaType> }) =
|
|||
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#efeff1)",
|
||||
fontFamily: "var(--body-font-family,'Times New Roman')",
|
||||
}}
|
||||
>
|
||||
<div className="relative z-10 grid h-full grid-cols-[490px_1fr]">
|
||||
<div className="px-[44px] pb-[78px] pt-[96px]">
|
||||
<div className="flex h-full flex-col justify-end">
|
||||
<h2 className="font-serif text-[64px] leading-[98%] tracking-[-0.02em]" style={{ color: "var(--primary-color,#1a1752)" }}>
|
||||
{data.title}
|
||||
</h2>
|
||||
<p className="mt-[40px] max-w-[330px] text-[22px] leading-[1.24]" style={{ color: "var(--background-text,#34394C)" }}>
|
||||
{data.description}
|
||||
</p>
|
||||
<>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#efeff1)",
|
||||
fontFamily: "var(--body-font-family,'Source Serif 4')",
|
||||
}}
|
||||
>
|
||||
<div className="relative z-10 grid h-full grid-cols-[490px_1fr]">
|
||||
<div className="px-[44px] pb-[78px] pt-[96px]">
|
||||
<div className="flex h-full flex-col justify-end">
|
||||
<h2 className="font-serif text-[64px] leading-[98%] tracking-[-0.02em]" style={{ color: "var(--primary-color,#1a1752)" }}>
|
||||
{data.title}
|
||||
</h2>
|
||||
<p className="mt-[40px] max-w-[330px] text-[22px] leading-[1.24]" style={{ color: "var(--background-text,#34394C)" }}>
|
||||
{data.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{data.stats && data.stats?.length <= 4 && <div className="grid h-full grid-cols-1">
|
||||
{data.stats?.map((stat, index) => (
|
||||
<div
|
||||
key={`${stat.value}-${index}`}
|
||||
className="px-[52px] pt-[22px]"
|
||||
style={{ backgroundColor: index % 2 === 1 ? 'var(--card-color,#5C0FD908)' : 'var(--card-color,white)' }}
|
||||
>
|
||||
<p className="font-serif text-[58px] leading-[56px]" style={{ color: "var(--background-text,#434A63)" }}>
|
||||
{stat?.value}
|
||||
</p>
|
||||
<p className="mt-[12px] text-[24px]" style={{ color: "var(--background-text,#434A63)" }}>
|
||||
{stat?.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>}
|
||||
|
||||
|
||||
|
||||
{data.stats && data.stats?.length > 4 && data.stats?.length <= 8 && (() => {
|
||||
const rightArray = data.stats?.slice(0, Math.floor(data.stats?.length / 2));
|
||||
const leftArray = data.stats?.slice(Math.floor(data.stats?.length / 2));
|
||||
|
||||
return (
|
||||
<div className="h-full flex w-full">
|
||||
<div className="flex flex-col h-full flex-1">
|
||||
|
||||
{leftArray?.map((stat: any, index: number) => (
|
||||
<div
|
||||
key={`${stat?.value}-${index}`}
|
||||
className="px-[52px] pt-[22px] h-full"
|
||||
style={{ backgroundColor: index % 2 === 0 ? 'var(--card-color,#5C0FD908)' : 'var(--card-color,white)' }}
|
||||
>
|
||||
<p className=" text-[58px] leading-[56px]" style={{ color: "var(--background-text,#283E51)" }}>
|
||||
{stat?.value}
|
||||
</p>
|
||||
<p className="mt-[12px] text-[24px]" style={{ color: "var(--background-text,#434A63)" }}>
|
||||
{stat?.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col flex-1">
|
||||
|
||||
{rightArray?.map((stat: any, index: number) => (
|
||||
<div
|
||||
key={`${stat.value}-${index}`}
|
||||
className="px-[52px] pt-[22px] h-full"
|
||||
style={{ backgroundColor: index % 2 === 1 ? 'var(--card-color,#5C0FD908)' : 'var(--card-color,white)' }}
|
||||
>
|
||||
<p className=" text-[58px] leading-[56px]" style={{ color: "var(--background-text,#283E51)" }}>
|
||||
{stat.value}
|
||||
</p>
|
||||
<p className="mt-[12px] text-[24px]" style={{ color: "var(--background-text,#434A63)" }}>
|
||||
{stat.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{data.stats && data.stats?.length <= 4 && <div className="grid h-full grid-cols-1">
|
||||
{data.stats?.map((stat, index) => (
|
||||
<div
|
||||
key={`${stat.value}-${index}`}
|
||||
className="px-[52px] pt-[22px]"
|
||||
style={{ backgroundColor: index % 2 === 1 ? 'var(--card-color,#5C0FD908)' : 'var(--card-color,white)' }}
|
||||
>
|
||||
<p className="font-serif text-[58px] leading-[56px]" style={{ color: "var(--background-text,#434A63)" }}>
|
||||
{stat?.value}
|
||||
</p>
|
||||
<p className="mt-[12px] text-[24px]" style={{ color: "var(--background-text,#434A63)" }}>
|
||||
{stat?.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>}
|
||||
|
||||
|
||||
|
||||
{data.stats && data.stats?.length > 4 && data.stats?.length <= 8 && (() => {
|
||||
const rightArray = data.stats?.slice(0, Math.floor(data.stats?.length / 2));
|
||||
const leftArray = data.stats?.slice(Math.floor(data.stats?.length / 2));
|
||||
|
||||
return (
|
||||
<div className="h-full flex w-full">
|
||||
<div className="flex flex-col h-full flex-1">
|
||||
|
||||
{leftArray?.map((stat: any, index: number) => (
|
||||
<div
|
||||
key={`${stat?.value}-${index}`}
|
||||
className="px-[52px] pt-[22px] h-full"
|
||||
style={{ backgroundColor: index % 2 === 0 ? 'var(--card-color,#5C0FD908)' : 'var(--card-color,white)' }}
|
||||
>
|
||||
<p className=" text-[58px] leading-[56px]" style={{ color: "var(--background-text,#283E51)" }}>
|
||||
{stat?.value}
|
||||
</p>
|
||||
<p className="mt-[12px] text-[24px]" style={{ color: "var(--background-text,#434A63)" }}>
|
||||
{stat?.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col flex-1">
|
||||
|
||||
{rightArray?.map((stat: any, index: number) => (
|
||||
<div
|
||||
key={`${stat.value}-${index}`}
|
||||
className="px-[52px] pt-[22px] h-full"
|
||||
style={{ backgroundColor: index % 2 === 1 ? 'var(--card-color,#5C0FD908)' : 'var(--card-color,white)' }}
|
||||
>
|
||||
<p className=" text-[58px] leading-[56px]" style={{ color: "var(--background-text,#283E51)" }}>
|
||||
{stat.value}
|
||||
</p>
|
||||
<p className="mt-[12px] text-[24px]" style={{ color: "var(--background-text,#434A63)" }}>
|
||||
{stat.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -46,38 +46,42 @@ export type SchemaType = z.infer<typeof Schema>;
|
|||
const EducationTableOfContentsSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#efeff1)",
|
||||
fontFamily: "var(--body-font-family,'Times New Roman')",
|
||||
}}
|
||||
>
|
||||
<>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#efeff1)",
|
||||
fontFamily: "var(--body-font-family,'Source Serif 4')",
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
<div className="relative z-10 grid h-full grid-cols-[430px_1fr]">
|
||||
<div className="px-[56px] pt-[74px]" style={{ backgroundColor: "var(--card-color,#f1efef)" }}>
|
||||
<h2 className="font-serif text-[64px] leading-[98%] tracking-[-0.02em]" style={{ color: "var(--primary-color,#1a1752)" }}>
|
||||
{data.title}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="relative z-10 grid h-full grid-cols-[430px_1fr]">
|
||||
<div className="px-[56px] pt-[74px]" style={{ backgroundColor: "var(--card-color,#f1efef)" }}>
|
||||
<h2 className="font-serif text-[64px] leading-[98%] tracking-[-0.02em]" style={{ color: "var(--primary-color,#1a1752)" }}>
|
||||
{data.title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="px-[88px] pt-[84px]" style={{ backgroundColor: "var(--card-color,#FFFFFF80)" }}>
|
||||
<div className="space-y-[32px]">
|
||||
{data.items?.map((item, index) => (
|
||||
<div key={`${item.number}-${item.label}-${index}`} className="flex items-center gap-[16px]">
|
||||
<span className="w-[42px] text-[20px] font-semibold leading-none" style={{ color: "var(--background-text,#3f414a)" }}>
|
||||
{item.number}
|
||||
</span>
|
||||
<span className="text-[24px] font-medium leading-none" style={{ color: "var(--background-text,#3f414a)" }}>
|
||||
{item.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
<div className="px-[88px] pt-[84px]" style={{ backgroundColor: "var(--card-color,#FFFFFF80)" }}>
|
||||
<div className="space-y-[32px]">
|
||||
{data.items?.map((item, index) => (
|
||||
<div key={`${item.number}-${item.label}-${index}`} className="flex items-center gap-[16px]">
|
||||
<span className="w-[42px] text-[20px] font-semibold leading-none" style={{ color: "var(--background-text,#3f414a)" }}>
|
||||
{item.number}
|
||||
</span>
|
||||
<span className="text-[24px] font-medium leading-none" style={{ color: "var(--background-text,#3f414a)" }}>
|
||||
{item.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -46,25 +46,29 @@ const EducationTimelineSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
const isSixOrLess = milestones?.length && milestones?.length <= 6;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden flex flex-col"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#efeff1)",
|
||||
fontFamily: "var(--body-font-family,'Times New Roman')",
|
||||
}}
|
||||
>
|
||||
<div className="relative z-10 px-[56px] pt-[86px]">
|
||||
<h2 className="font-serif text-[84px] leading-none tracking-[-0.02em]" style={{ color: "var(--primary-color,#1a1752)" }}>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
<>
|
||||
|
||||
{isSixOrLess ? (
|
||||
<TimelineUpToSix milestones={milestones || []} />
|
||||
) : (
|
||||
<TimelineMoreThanSix milestones={milestones || []} />
|
||||
)}
|
||||
</div>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden flex flex-col"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#efeff1)",
|
||||
fontFamily: "var(--body-font-family,'Source Serif 4')",
|
||||
}}
|
||||
>
|
||||
<div className="relative z-10 px-[56px] pt-[86px]">
|
||||
<h2 className="font-serif text-[84px] leading-none tracking-[-0.02em]" style={{ color: "var(--primary-color,#1a1752)" }}>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{isSixOrLess ? (
|
||||
<TimelineUpToSix milestones={milestones || []} />
|
||||
) : (
|
||||
<TimelineMoreThanSix milestones={milestones || []} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -76,6 +80,7 @@ function TimelineUpToSix({
|
|||
|
||||
|
||||
return (
|
||||
|
||||
<div className="relative z-10 mt-[160px] px-[56px]">
|
||||
<div
|
||||
className="grid "
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import * as z from "zod";
|
|||
import { ResponsiveContainer } from "recharts";
|
||||
|
||||
import { FlexibleReportChart, flexibleChartDataSchema } from "./flexibleReportChart";
|
||||
import { RemoteSvgIcon } from "@/app/hooks/useRemoteSvgIcon";
|
||||
|
||||
const InsightItemSchema = z.object({
|
||||
title: z.string().min(3).max(80).meta({
|
||||
|
|
@ -77,82 +78,93 @@ const DataAnalysisBarSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
const series = chartData?.series ?? [];
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,Helvetica Neue)",
|
||||
}}
|
||||
>
|
||||
<>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" />
|
||||
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#4d4ef3]"
|
||||
style={{ height: 185, backgroundColor: "var(--graph-0,#4d4ef3)" }}
|
||||
/>
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,'Source Sans 3')",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#4d4ef3]"
|
||||
style={{ height: 185, backgroundColor: "var(--graph-0,#4d4ef3)" }}
|
||||
/>
|
||||
|
||||
<div className="px-[64px] pt-[48px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="px-[64px] pt-[48px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between px-[85px] pt-[44px]">
|
||||
<div className="space-y-[38px] pt-[8px]">
|
||||
{items?.map((item, index) => (
|
||||
<div key={`${item.title}-${index}`}>
|
||||
<div className="flex items-center gap-[14px]">
|
||||
<div
|
||||
className="flex h-[55px] w-[55px] items-center justify-center rounded-full bg-[#4d4ef3] text-white"
|
||||
style={{
|
||||
backgroundColor: "var(--graph-0,#4d4ef3)",
|
||||
color: "var(--primary-text,#ffffff)",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={itemIcon?.__icon_url__}
|
||||
alt={itemIcon?.__icon_query__}
|
||||
className="h-[25px] w-[25px] object-contain"
|
||||
style={{ filter: "brightness(0) invert(1)" }}
|
||||
/>
|
||||
<div className="flex justify-between px-[85px] pt-[44px]">
|
||||
<div className="space-y-[38px] pt-[8px]">
|
||||
{items?.map((item, index) => (
|
||||
<div key={`${item.title}-${index}`}>
|
||||
<div className="flex items-center gap-[14px]">
|
||||
<div
|
||||
className="flex h-[55px] w-[55px] items-center justify-center rounded-full bg-[#4d4ef3] text-white"
|
||||
style={{
|
||||
backgroundColor: "var(--graph-0,#4d4ef3)",
|
||||
color: "var(--primary-text,#ffffff)",
|
||||
}}
|
||||
>
|
||||
<RemoteSvgIcon
|
||||
url={itemIcon?.__icon_url__}
|
||||
strokeColor={"currentColor"}
|
||||
className="h-[25px] w-[25px] object-contain"
|
||||
color="var(--primary-text, #ffffff)"
|
||||
title={itemIcon?.__icon_query__}
|
||||
/>
|
||||
{/* <img
|
||||
src={itemIcon?.__icon_url__}
|
||||
alt={itemIcon?.__icon_query__}
|
||||
className="h-[25px] w-[25px] object-contain"
|
||||
style={{ filter: "brightness(0) invert(1)" }}
|
||||
/> */}
|
||||
</div>
|
||||
<h3
|
||||
className="text-[20px] font-medium tracking-[2.074px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
</div>
|
||||
<h3
|
||||
className="text-[20px] font-medium tracking-[2.074px] text-[#232223]"
|
||||
<p
|
||||
className="mt-[20px] text-[24px] leading-[26.667px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
<p
|
||||
className="mt-[20px] text-[24px] leading-[26.667px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="ml-[44px] flex flex-col items-center">
|
||||
<div className="h-[346px] w-[560px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<FlexibleReportChart chartType={chartType} data={rows} series={series} colorFallback="#4d4ef3" />
|
||||
</ResponsiveContainer>
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
className="mt-[12px] flex items-center gap-[10px] text-[24px] tracking-[-0.03em] text-[#4d4ef3]"
|
||||
style={{ color: "var(--graph-0,#4d4ef3)" }}
|
||||
>
|
||||
<span
|
||||
className="h-[12px] w-[12px] rounded-full bg-[#4d4ef3]"
|
||||
style={{ backgroundColor: "var(--graph-0,#4d4ef3)" }}
|
||||
/>
|
||||
<p>{legendLabel}</p>
|
||||
|
||||
<div className="ml-[44px] flex flex-col items-center">
|
||||
<div className="h-[346px] w-[560px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<FlexibleReportChart chartType={chartType} data={rows} series={series} colorFallback="#4d4ef3" />
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<div
|
||||
className="mt-[12px] flex items-center gap-[10px] text-[24px] tracking-[-0.03em] text-[#4d4ef3]"
|
||||
style={{ color: "var(--graph-0,#4d4ef3)" }}
|
||||
>
|
||||
<span
|
||||
className="h-[12px] w-[12px] rounded-full bg-[#4d4ef3]"
|
||||
style={{ backgroundColor: "var(--graph-0,#4d4ef3)" }}
|
||||
/>
|
||||
<p>{legendLabel}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { RemoteSvgIcon } from "@/app/hooks/useRemoteSvgIcon";
|
||||
import * as z from "zod";
|
||||
|
||||
|
||||
|
|
@ -52,62 +53,72 @@ const DataAnalysisListSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
const { title, itemIcon, items } = data;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,Helvetica Neue)",
|
||||
}}
|
||||
>
|
||||
<>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,'Source Sans 3')",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
|
||||
<div className="px-[58px] pt-[52px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="px-[58px] pt-[52px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-x-[112px] gap-y-[52px] px-[82px] pt-[58px]">
|
||||
{items?.map((item, index) => (
|
||||
<div key={`${item.title}-${index}`}>
|
||||
<div className="flex items-center gap-[14px]">
|
||||
<div
|
||||
className="flex h-[55px] w-[55px] items-center justify-center rounded-full bg-[#157CFF] text-white"
|
||||
style={{
|
||||
backgroundColor: "var(--primary-color,#157CFF)",
|
||||
color: "var(--primary-text,#ffffff)",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={itemIcon?.__icon_url__}
|
||||
alt={itemIcon?.__icon_query__}
|
||||
className="h-[26px] w-[26px] object-contain"
|
||||
style={{ filter: "brightness(0) invert(1)" }}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-x-[112px] gap-y-[52px] px-[82px] pt-[58px]">
|
||||
{items?.map((item, index) => (
|
||||
<div key={`${item.title}-${index}`}>
|
||||
<div className="flex items-center gap-[14px]">
|
||||
<div
|
||||
className="flex h-[55px] w-[55px] items-center justify-center rounded-full bg-[#157CFF] text-white"
|
||||
style={{
|
||||
backgroundColor: "var(--primary-color,#157CFF)",
|
||||
color: "var(--primary-text,#ffffff)",
|
||||
}}
|
||||
>
|
||||
<RemoteSvgIcon
|
||||
url={itemIcon?.__icon_url__}
|
||||
strokeColor={"currentColor"}
|
||||
className="h-[26px] w-[26px] object-contain"
|
||||
color="var(--primary-text, #ffffff)"
|
||||
title={itemIcon?.__icon_query__}
|
||||
/>
|
||||
{/* <img
|
||||
src={itemIcon?.__icon_url__}
|
||||
alt={itemIcon?.__icon_query__}
|
||||
className="h-[26px] w-[26px] object-contain"
|
||||
style={{ filter: "brightness(0) invert(1)" }}
|
||||
/> */}
|
||||
</div>
|
||||
<h3
|
||||
className="text-[20px] font-medium tracking-[2.074px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
</div>
|
||||
<h3
|
||||
className="text-[20px] font-medium tracking-[2.074px] text-[#232223]"
|
||||
<p
|
||||
className="mt-5 max-w-[420px] text-[24px] leading-[26.667px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
<p
|
||||
className="mt-5 max-w-[420px] text-[24px] leading-[26.667px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import {
|
|||
flexibleChartTypeSchema,
|
||||
type FlexibleChartData,
|
||||
} from "./flexibleReportChart";
|
||||
import { RemoteSvgIcon } from "@/app/hooks/useRemoteSvgIcon";
|
||||
|
||||
const SummaryCardSchema = z.object({
|
||||
value: z.string().min(1).max(8).meta({
|
||||
|
|
@ -141,12 +142,19 @@ function SummaryCard({
|
|||
borderColor: "var(--stroke,#ECF5FE)",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
<RemoteSvgIcon
|
||||
url={iconUrl ?? ""}
|
||||
strokeColor={"currentColor"}
|
||||
className="h-[18px] w-[18px] object-contain"
|
||||
color="var(--primary-text, #000000)"
|
||||
title={iconAlt ?? ""}
|
||||
/>
|
||||
{/* <img
|
||||
src={iconUrl ?? ""}
|
||||
alt={iconAlt ?? ""}
|
||||
className="h-[18px] w-[18px] object-contain"
|
||||
|
||||
/>
|
||||
/> */}
|
||||
</div>
|
||||
<div className="">
|
||||
<p
|
||||
|
|
@ -176,91 +184,94 @@ const DataAnalysisDashboardSlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
const otherHalfChart = charts?.slice(Math.ceil(charts.length / 2));
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative flex flex-col h-[720px] w-[1280px] overflow-hidden bg-[#F9F8F8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#F9F8F8)",
|
||||
fontFamily: "var(--body-font-family,Helvetica Neue)",
|
||||
}}
|
||||
>
|
||||
<>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
|
||||
<div className="px-[64px] pt-[48px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{summaryCards && summaryCards.length > 0 && <div className=" mx-[64px] grid bg-white gap-[16px] p-[13px] mt-[22px] rounded-[14px] "
|
||||
className="relative flex flex-col h-[720px] w-[1280px] overflow-hidden bg-[#F9F8F8]"
|
||||
style={{
|
||||
gridTemplateColumns: `repeat(${summaryCards.length}, minmax(220px, 1fr))`,
|
||||
backgroundColor: "var(--card-color,#ffffff)",
|
||||
}}>
|
||||
{summaryCards?.map((card, index) => (
|
||||
<SummaryCard
|
||||
key={`${card.label}-${index}`}
|
||||
value={card.value}
|
||||
label={card.label}
|
||||
iconUrl={card.icon?.__icon_url__}
|
||||
iconAlt={card.icon?.__icon_query__}
|
||||
/>
|
||||
))}
|
||||
</div>}
|
||||
<div className="flex-1 flex flex-col pb-[30px]">
|
||||
backgroundColor: "var(--background-color,#F9F8F8)",
|
||||
fontFamily: "var(--body-font-family,'Source Sans 3')",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
|
||||
{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] `}
|
||||
style={{
|
||||
gridTemplateColumns: `repeat(${halfChart.length}, minmax(150px, 1fr))`,
|
||||
backgroundColor: "var(--card-color,#ffffff)",
|
||||
}}
|
||||
<div className="px-[64px] pt-[48px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{halfChart?.map((chart, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="rounded-[6px] flex flex-col overflow-hidden"
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
>
|
||||
|
||||
<div className="flex-1 " >
|
||||
<FlexibleReportChart density="compact" chartType={chart.type} data={chart.data} series={chart.series} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{summaryCards && summaryCards.length > 0 && <div className=" mx-[64px] grid bg-white gap-[16px] p-[13px] mt-[22px] rounded-[14px] "
|
||||
style={{
|
||||
gridTemplateColumns: `repeat(${summaryCards.length}, minmax(220px, 1fr))`,
|
||||
backgroundColor: "var(--card-color,#ffffff)",
|
||||
}}>
|
||||
{summaryCards?.map((card, index) => (
|
||||
<SummaryCard
|
||||
key={`${card.label}-${index}`}
|
||||
value={card.value}
|
||||
label={card.label}
|
||||
iconUrl={card.icon?.__icon_url__}
|
||||
iconAlt={card.icon?.__icon_query__}
|
||||
/>
|
||||
))}
|
||||
</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] `}
|
||||
style={{
|
||||
gridTemplateColumns: `repeat(${otherHalfChart.length}, minmax(150px, 1fr))`,
|
||||
backgroundColor: "var(--card-color,#ffffff)",
|
||||
}}
|
||||
>
|
||||
{otherHalfChart?.map((chart, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="rounded-[6px] flex flex-col overflow-hidden"
|
||||
>
|
||||
<div className="flex-1 " >
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<div className="flex-1 flex flex-col pb-[30px]">
|
||||
|
||||
{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] `}
|
||||
style={{
|
||||
gridTemplateColumns: `repeat(${halfChart.length}, minmax(150px, 1fr))`,
|
||||
backgroundColor: "var(--card-color,#ffffff)",
|
||||
}}
|
||||
>
|
||||
{halfChart?.map((chart, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="rounded-[6px] flex flex-col overflow-hidden"
|
||||
|
||||
>
|
||||
|
||||
<div className="flex-1 " >
|
||||
<FlexibleReportChart density="compact" chartType={chart.type} data={chart.data} series={chart.series} />
|
||||
</ResponsiveContainer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>}
|
||||
))}
|
||||
</div>
|
||||
</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] `}
|
||||
style={{
|
||||
gridTemplateColumns: `repeat(${otherHalfChart.length}, minmax(150px, 1fr))`,
|
||||
backgroundColor: "var(--card-color,#ffffff)",
|
||||
}}
|
||||
>
|
||||
{otherHalfChart?.map((chart, index) => (
|
||||
<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} />
|
||||
</ResponsiveContainer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -79,47 +79,50 @@ export type SchemaType = z.infer<typeof Schema>;
|
|||
const TeamSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-white"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#ffffff)",
|
||||
fontFamily: "var(--body-font-family,Helvetica Neue)",
|
||||
}}
|
||||
>
|
||||
<div className="grid h-full "
|
||||
style={{ gridTemplateColumns: `repeat(${data?.members?.length}, minmax(0, 1fr))` }}
|
||||
<>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-white"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#ffffff)",
|
||||
fontFamily: "var(--body-font-family,'Source Sans 3')",
|
||||
}}
|
||||
>
|
||||
{data?.members?.map((member, index) => (
|
||||
<div
|
||||
key={`${member.name}-${index}`}
|
||||
className="relative h-full overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src={member.image.__image_url__}
|
||||
alt={member.image.__image_prompt__}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
<div className="grid h-full "
|
||||
style={{ gridTemplateColumns: `repeat(${data?.members?.length}, minmax(0, 1fr))` }}
|
||||
>
|
||||
{data?.members?.map((member, index) => (
|
||||
<div
|
||||
className="absolute inset-x-0 bottom-0 h-[240px] bg-gradient-to-t from-[#4d4ef3] via-[#4d4ef3]/55 to-transparent"
|
||||
style={{
|
||||
backgroundImage: "linear-gradient(to top, var(--graph-1,#4d4ef3), rgba(77, 78, 243, 0.55), transparent)",
|
||||
}}
|
||||
/>
|
||||
<div className="absolute left-0 bottom-0 p-[33px] text-white" style={{ color: "var(--primary-text,#ffffff)" }}>
|
||||
<p
|
||||
className="text-[21px] tracking-[2.074px] font-medium text-white/90"
|
||||
style={{ color: "var(--primary-text,#ffffff)", opacity: 0.9 }}
|
||||
>
|
||||
{member.title}
|
||||
</p>
|
||||
<p className="mt-[14px] text-[28px] ">
|
||||
{member.subtext}
|
||||
</p>
|
||||
key={`${member.title}-${index}`}
|
||||
className="relative h-full overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src={member.image.__image_url__}
|
||||
alt={member.image.__image_prompt__}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-x-0 bottom-0 h-[240px] bg-gradient-to-t from-[#4d4ef3] via-[#4d4ef3]/55 to-transparent"
|
||||
style={{
|
||||
backgroundImage: "linear-gradient(to top, var(--graph-1,#4d4ef3), rgba(77, 78, 243, 0.55), transparent)",
|
||||
}}
|
||||
/>
|
||||
<div className="absolute left-0 bottom-0 p-[33px] text-white" style={{ color: "var(--primary-text,#ffffff)" }}>
|
||||
<p
|
||||
className="text-[21px] tracking-[2.074px] font-medium text-white/90"
|
||||
style={{ color: "var(--primary-text,#ffffff)", opacity: 0.9 }}
|
||||
>
|
||||
{member.title}
|
||||
</p>
|
||||
<p className="mt-[14px] text-[28px] ">
|
||||
{member.subtext}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -23,46 +23,49 @@ const IntroSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
const { titleFirstLine, titleSecondLine, name, position } = data;
|
||||
|
||||
return (
|
||||
<div
|
||||
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,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">
|
||||
<path d="M0 0H44.6667V228.333C44.6667 240.668 34.6677 250.667 22.3333 250.667C9.99898 250.667 0 240.668 0 228.333V0Z" fill="var(--primary-color,#147CFE)" />
|
||||
<path d="M71.3334 0H116V163C116 175.334 106.001 185.333 93.6667 185.333C81.3324 185.333 71.3334 175.334 71.3334 163V0Z" fill="var(--primary-color,#147CFE)" />
|
||||
</svg>
|
||||
<svg className="absolute bottom-0 right-10 rotate-180" xmlns="http://www.w3.org/2000/svg" width="116" height="251" viewBox="0 0 116 251" fill="none">
|
||||
<path d="M0 0H44.6667V228.333C44.6667 240.668 34.6677 250.667 22.3333 250.667C9.99898 250.667 0 240.668 0 228.333V0Z" fill="var(--primary-color,#147CFE)" />
|
||||
<path d="M71.3334 0H116V163C116 175.334 106.001 185.333 93.6667 185.333C81.3324 185.333 71.3334 175.334 71.3334 163V0Z" fill="var(--primary-color,#147CFE)" />
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<h1
|
||||
className="text-[#232223] text-[133px] italic text-center font-bold capitalize tracking-[-2.8px]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{titleFirstLine}
|
||||
</h1>
|
||||
<p
|
||||
className="text-[#232223] text-[93px] text-center font-medium capitalize tracking-[-2.8px]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{titleSecondLine}
|
||||
</p>
|
||||
</div>
|
||||
<>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="bg-[#CD7721] w-[67px] h-0.5 my-[78px]"
|
||||
style={{ backgroundColor: "var(--graph-2,#CD7721)" }}
|
||||
/>
|
||||
<div className="text-center">
|
||||
<h4 className="text-[#232223] text-[40px] pb-4" style={{ color: "var(--background-text,#232223)" }}>{name}</h4>
|
||||
<p className="text-[19px] text-[#232223]" style={{ color: "var(--background-text,#232223)" }}>{position}</p>
|
||||
</div>
|
||||
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,'Source Sans 3')",
|
||||
}}
|
||||
>
|
||||
<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">
|
||||
<path d="M0 0H44.6667V228.333C44.6667 240.668 34.6677 250.667 22.3333 250.667C9.99898 250.667 0 240.668 0 228.333V0Z" fill="var(--primary-color,#147CFE)" />
|
||||
<path d="M71.3334 0H116V163C116 175.334 106.001 185.333 93.6667 185.333C81.3324 185.333 71.3334 175.334 71.3334 163V0Z" fill="var(--primary-color,#147CFE)" />
|
||||
</svg>
|
||||
<svg className="absolute bottom-0 right-10 rotate-180" xmlns="http://www.w3.org/2000/svg" width="116" height="251" viewBox="0 0 116 251" fill="none">
|
||||
<path d="M0 0H44.6667V228.333C44.6667 240.668 34.6677 250.667 22.3333 250.667C9.99898 250.667 0 240.668 0 228.333V0Z" fill="var(--primary-color,#147CFE)" />
|
||||
<path d="M71.3334 0H116V163C116 175.334 106.001 185.333 93.6667 185.333C81.3324 185.333 71.3334 175.334 71.3334 163V0Z" fill="var(--primary-color,#147CFE)" />
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<h1
|
||||
className="text-[#232223] text-[133px] italic text-center font-bold capitalize tracking-[-2.8px]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{titleFirstLine}
|
||||
</h1>
|
||||
<p
|
||||
className="text-[#232223] text-[93px] text-center font-medium capitalize tracking-[-2.8px]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{titleSecondLine}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="bg-[#CD7721] w-[67px] h-0.5 my-[78px]"
|
||||
style={{ backgroundColor: "var(--graph-2,#CD7721)" }}
|
||||
/>
|
||||
<div className="text-center">
|
||||
<h4 className="text-[#232223] text-[40px] pb-4" style={{ color: "var(--background-text,#232223)" }}>{name}</h4>
|
||||
<p className="text-[19px] text-[#232223]" style={{ color: "var(--background-text,#232223)" }}>{position}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -135,54 +135,57 @@ const IntroductionStatsSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
const { title, body, bullets, statColumns } = data;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,Helvetica Neue)",
|
||||
}}
|
||||
>
|
||||
<>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,'Source Sans 3')",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
|
||||
<div className="px-[64px] pt-[48px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between px-[96px] pt-[38px]">
|
||||
<div className="">
|
||||
<p className="max-w-[400px] text-[24px] leading-[26.667px] text-[#232223]" style={{ color: "var(--background-text,#232223)" }}>
|
||||
{body}
|
||||
</p>
|
||||
|
||||
<div
|
||||
className="mt-[34px] list-disc pl-[28px] text-[24px] leading-[26.667px] text-[#232223]"
|
||||
<div className="px-[64px] pt-[48px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{bullets?.map((bullet, index) => (
|
||||
<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>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between px-[96px] pt-[38px]">
|
||||
<div className="">
|
||||
<p className="max-w-[400px] text-[24px] leading-[26.667px] text-[#232223]" style={{ color: "var(--background-text,#232223)" }}>
|
||||
{body}
|
||||
</p>
|
||||
|
||||
<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) => (
|
||||
<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>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ml-[48px] flex gap-[34px]">
|
||||
{statColumns?.map((column, index) => (
|
||||
<StatPill key={`intro-stat-column-${index}`} metrics={column.metrics} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ml-[48px] flex gap-[34px]">
|
||||
{statColumns?.map((column, index) => (
|
||||
<StatPill key={`intro-stat-column-${index}`} metrics={column.metrics} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -66,72 +66,75 @@ const MilestoneSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
const { title, activeIndex, items } = data;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#F9F8F8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#F9F8F8)",
|
||||
fontFamily: "var(--body-font-family,Helvetica Neue)",
|
||||
}}
|
||||
>
|
||||
<>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#F9F8F8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#F9F8F8)",
|
||||
fontFamily: "var(--body-font-family,'Source Sans 3')",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
|
||||
<div className="px-[70px] pt-[56px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="px-[70px] pt-[56px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="mt-[52px] pl-[74px] pr-[63px]">
|
||||
<div className="flex items-center justify-center">
|
||||
{items?.map((item, index) => {
|
||||
const isActive = index === activeIndex;
|
||||
<div className="mt-[52px] pl-[74px] pr-[63px]">
|
||||
<div className="flex items-center justify-center">
|
||||
{items?.map((item, index) => {
|
||||
const isActive = index === activeIndex;
|
||||
|
||||
return (
|
||||
<div className=" " key={`${item.stepNumber}-${index}`}>
|
||||
return (
|
||||
<div className=" " key={`${item.bulletNumber}-${index}`}>
|
||||
|
||||
<div
|
||||
className={`relative flex h-[270px] w-[270px] items-center justify-center rounded-full ${isActive
|
||||
? "z-10 bg-[#157CFF] text-white"
|
||||
: "border border-[#157CFF] bg-white text-[#157CFE]"
|
||||
} ${index > 0 ? "ml-[-45px]" : ""} `}
|
||||
style={{
|
||||
backgroundColor: isActive ? "var(--primary-color,#157CFF)" : "var(--card-color,#ffffff)",
|
||||
borderColor: "var(--primary-color,#157CFF)",
|
||||
color: isActive ? "var(--primary-text,#ffffff)" : "var(--primary-color,#157CFE)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={`${isActive ? "text-white" : "text-[#157CFF]"} text-[42px] font-medium tracking-[0.18em]`}
|
||||
style={{ color: isActive ? "var(--primary-text,#ffffff)" : "var(--primary-color,#157CFF)" }}
|
||||
<div
|
||||
className={`relative flex h-[270px] w-[270px] items-center justify-center rounded-full ${isActive
|
||||
? "z-10 bg-[#157CFF] text-white"
|
||||
: "border border-[#157CFF] bg-white text-[#157CFE]"
|
||||
} ${index > 0 ? "ml-[-45px]" : ""} `}
|
||||
style={{
|
||||
backgroundColor: isActive ? "var(--primary-color,#157CFF)" : "var(--card-color,#ffffff)",
|
||||
borderColor: "var(--primary-color,#157CFF)",
|
||||
color: isActive ? "var(--primary-text,#ffffff)" : "var(--primary-color,#157CFE)",
|
||||
}}
|
||||
>
|
||||
{item.bulletNumber}
|
||||
</span>
|
||||
<span
|
||||
className={`${isActive ? "text-white" : "text-[#157CFF]"} text-[42px] font-medium tracking-[0.18em]`}
|
||||
style={{ color: isActive ? "var(--primary-text,#ffffff)" : "var(--primary-color,#157CFF)" }}
|
||||
>
|
||||
{item.bulletNumber}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div
|
||||
key={`${item.heading}-${index}`}
|
||||
className={`text-center mt-[20px] text-[#232223] ${index > 0 ? 'pr-[33px]' : ''} ${index === 0 ? 'px-[33px]' : ''}`}
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
<h3 className="text-[20px] text-[#232223] font-medium tracking-[2.074px]" style={{ color: "var(--background-text,#232223)" }}>
|
||||
{item.heading}
|
||||
</h3>
|
||||
<p className="mt-[6px] text-[24px] leading-[26.667px] text-[#232223]" style={{ color: "var(--background-text,#232223)" }}>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
key={`${item.heading}-${index}`}
|
||||
className={`text-center mt-[20px] text-[#232223] ${index > 0 ? 'pr-[33px]' : ''} ${index === 0 ? 'px-[33px]' : ''}`}
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
<h3 className="text-[20px] text-[#232223] font-medium tracking-[2.074px]" style={{ color: "var(--background-text,#232223)" }}>
|
||||
{item.heading}
|
||||
</h3>
|
||||
<p className="mt-[6px] text-[24px] leading-[26.667px] text-[#232223]" style={{ color: "var(--background-text,#232223)" }}>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -129,75 +129,78 @@ const DataAnalysisLineStatsSlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
const series = chartData?.series ?? [];
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,Helvetica Neue)",
|
||||
}}
|
||||
>
|
||||
<>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,'Source Sans 3')",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
|
||||
<div className="px-[64px] pt-[48px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between px-[74px] pt-[40px]">
|
||||
<div className="w-[474px]">
|
||||
{chartType === "line-dual" && <div
|
||||
className="flex justify-center gap-[26px] text-[14px] text-[#353538]"
|
||||
style={{ color: "var(--background-text,#353538)" }}
|
||||
<div className="px-[64px] pt-[48px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
<span className="flex items-center gap-[8px]">
|
||||
<span className="h-[2px] w-[20px] bg-[#9fb6ff]" style={{ backgroundColor: "var(--graph-0,#9fb6ff)" }} />
|
||||
{seriesALabel}
|
||||
</span>
|
||||
<span className="flex items-center gap-[8px]">
|
||||
<span className="h-[2px] w-[20px] bg-[#4d4ef3]" style={{ backgroundColor: "var(--graph-1,#4d4ef3)" }} />
|
||||
{seriesBLabel}
|
||||
</span>
|
||||
</div>}
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="mt-[12px] h-[356px] w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<FlexibleReportChart
|
||||
chartType={chartType}
|
||||
data={rows}
|
||||
series={series}
|
||||
colorFallback="#157CFF"
|
||||
density="default"
|
||||
dualLineColors={["var(--graph-0,#9fb6ff)", "var(--graph-1,#4d4ef3)"]}
|
||||
<div className="flex justify-between px-[74px] pt-[40px]">
|
||||
<div className="w-[474px]">
|
||||
{chartType === "line-dual" && <div
|
||||
className="flex justify-center gap-[26px] text-[14px] text-[#353538]"
|
||||
style={{ color: "var(--background-text,#353538)" }}
|
||||
>
|
||||
<span className="flex items-center gap-[8px]">
|
||||
<span className="h-[2px] w-[20px] bg-[#9fb6ff]" style={{ backgroundColor: "var(--graph-0,#9fb6ff)" }} />
|
||||
{seriesALabel}
|
||||
</span>
|
||||
<span className="flex items-center gap-[8px]">
|
||||
<span className="h-[2px] w-[20px] bg-[#4d4ef3]" style={{ backgroundColor: "var(--graph-1,#4d4ef3)" }} />
|
||||
{seriesBLabel}
|
||||
</span>
|
||||
</div>}
|
||||
|
||||
<div className="mt-[12px] h-[356px] w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<FlexibleReportChart
|
||||
chartType={chartType}
|
||||
data={rows}
|
||||
series={series}
|
||||
colorFallback="#157CFF"
|
||||
density="default"
|
||||
dualLineColors={["var(--graph-0,#9fb6ff)", "var(--graph-1,#4d4ef3)"]}
|
||||
/>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="mt-[12px] flex items-center gap-[10px] text-center justify-center text-[24px] tracking-[-0.03em] text-[#157CFF]"
|
||||
style={{ color: "var(--primary-color,#157CFF)" }}
|
||||
>
|
||||
<span
|
||||
className="h-[12px] w-[12px] rounded-full bg-[#157CFF]"
|
||||
style={{ backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
</ResponsiveContainer>
|
||||
<p>{data.legendLabel}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="mt-[12px] flex items-center gap-[10px] text-center justify-center text-[24px] tracking-[-0.03em] text-[#157CFF]"
|
||||
style={{ color: "var(--primary-color,#157CFF)" }}
|
||||
>
|
||||
<span
|
||||
className="h-[12px] w-[12px] rounded-full bg-[#157CFF]"
|
||||
style={{ backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
<p>{data.legendLabel}</p>
|
||||
<div className="ml-[42px] flex gap-[30px]">
|
||||
{statColumns?.map((column, index) => (
|
||||
<StatPill key={`line-stat-column-${index}`} metrics={column.metrics} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ml-[42px] flex gap-[30px]">
|
||||
{statColumns?.map((column, index) => (
|
||||
<StatPill key={`line-stat-column-${index}`} metrics={column.metrics} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import * as z from "zod";
|
|||
import { ResponsiveContainer } from "recharts";
|
||||
|
||||
import { FlexibleReportChart, flexibleChartDataSchema } from "./flexibleReportChart";
|
||||
import { RemoteSvgIcon } from "@/app/hooks/useRemoteSvgIcon";
|
||||
|
||||
export const slideLayoutId = "title-description-chart-slide";
|
||||
export const slideLayoutName = "Title Description Chart Slide";
|
||||
|
|
@ -67,70 +68,81 @@ const DataAnalysisInsightBarSlide = ({
|
|||
const series = data?.chartData?.series ?? [];
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,Helvetica Neue)",
|
||||
}}
|
||||
>
|
||||
<>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,'Source Sans 3')",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
|
||||
<div className="px-[64px] pt-[48px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{data.title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between px-[74px] gap-10 pt-[96px]">
|
||||
<div className=" pt-[24px] w-1/2">
|
||||
<div className="flex items-center gap-[14px]">
|
||||
<div
|
||||
className="flex h-[55px] w-[55px] items-center justify-center rounded-full bg-[#157CFF] text-white"
|
||||
style={{
|
||||
backgroundColor: "var(--primary-color,#157CFF)",
|
||||
color: "var(--primary-text,#ffffff)",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={data.insightIcon?.__icon_url__}
|
||||
alt={data.insightIcon?.__icon_query__}
|
||||
className="h-[25px] w-[25px] object-contain"
|
||||
style={{ filter: "invert(1)" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="mt-[20px] text-[24px] leading-[26.667px] text-[#232223]"
|
||||
<div className="px-[64px] pt-[48px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{data.insightBody}
|
||||
</p>
|
||||
{data.title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="ml-[28px] flex w-1/2 flex-col items-center">
|
||||
<ResponsiveContainer height={400} width="100%">
|
||||
<FlexibleReportChart chartType={chartType} data={chartData} series={series} colorFallback="#157CFF" />
|
||||
</ResponsiveContainer>
|
||||
<div
|
||||
className="mt-[12px] flex items-center gap-[10px] text-[24px] tracking-[-0.03em] text-[#157CFF]"
|
||||
style={{ color: "var(--primary-color,#157CFF)" }}
|
||||
>
|
||||
<span
|
||||
className="h-[12px] w-[12px] rounded-full bg-[#157CFF]"
|
||||
style={{ backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
<p>{data.legendLabel}</p>
|
||||
<div className="flex justify-between px-[74px] gap-10 pt-[96px]">
|
||||
<div className=" pt-[24px] w-1/2">
|
||||
<div className="flex items-center gap-[14px]">
|
||||
<div
|
||||
className="flex h-[55px] w-[55px] items-center justify-center rounded-full bg-[#157CFF] text-white"
|
||||
style={{
|
||||
backgroundColor: "var(--primary-color,#157CFF)",
|
||||
color: "var(--primary-text,#ffffff)",
|
||||
}}
|
||||
>
|
||||
|
||||
<RemoteSvgIcon
|
||||
url={data.insightIcon?.__icon_url__}
|
||||
strokeColor={"currentColor"}
|
||||
className="h-[25px] w-[25px] object-contain"
|
||||
color="var(--primary-text, #ffffff)"
|
||||
title={data.insightIcon?.__icon_query__}
|
||||
/>
|
||||
{/* <img
|
||||
src={data.insightIcon?.__icon_url__}
|
||||
alt={data.insightIcon?.__icon_query__}
|
||||
className="h-[25px] w-[25px] object-contain"
|
||||
style={{ filter: "invert(1)" }}
|
||||
/> */}
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="mt-[20px] text-[24px] leading-[26.667px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{data.insightBody}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="ml-[28px] flex w-1/2 flex-col items-center">
|
||||
<ResponsiveContainer height={400} width="100%">
|
||||
<FlexibleReportChart chartType={chartType} data={chartData} series={series} colorFallback="#157CFF" />
|
||||
</ResponsiveContainer>
|
||||
<div
|
||||
className="mt-[12px] flex items-center gap-[10px] text-[24px] tracking-[-0.03em] text-[#157CFF]"
|
||||
style={{ color: "var(--primary-color,#157CFF)" }}
|
||||
>
|
||||
<span
|
||||
className="h-[12px] w-[12px] rounded-full bg-[#157CFF]"
|
||||
style={{ backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
<p>{data.legendLabel}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -46,61 +46,64 @@ const IntroductionImageSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
const { title, body, bullets, featureImage } = data;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,Helvetica Neue)",
|
||||
}}
|
||||
>
|
||||
<>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,'Source Sans 3')",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
|
||||
<div className="px-[74px] pt-[76px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-28 pl-[96px] pt-[30px]">
|
||||
<div className="flex flex-col">
|
||||
<p className=" text-[24px] leading-[26.667px] text-[#232223]" style={{ color: "var(--background-text,#232223)" }}>
|
||||
{body}
|
||||
</p>
|
||||
|
||||
<div
|
||||
className="mt-8 list-disc pl-[28px] text-[24px] leading-[26.667px] text-[#232223]"
|
||||
<div className="px-[74px] pt-[76px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{bullets?.map((bullet, index) => (
|
||||
<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>
|
||||
))}
|
||||
</div>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 items-end justify-end">
|
||||
<div
|
||||
className="h-[397px] w-[582px] overflow-hidden rounded-l-[106px] bg-[#157CFF]"
|
||||
style={{ backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
>
|
||||
<img
|
||||
src={featureImage?.__image_url__}
|
||||
alt={featureImage?.__image_prompt__}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
<div className="flex gap-28 pl-[96px] pt-[30px]">
|
||||
<div className="flex flex-col">
|
||||
<p className=" text-[24px] leading-[26.667px] text-[#232223]" style={{ color: "var(--background-text,#232223)" }}>
|
||||
{body}
|
||||
</p>
|
||||
|
||||
<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) => (
|
||||
<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>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 items-end justify-end">
|
||||
<div
|
||||
className="h-[397px] w-[582px] overflow-hidden rounded-l-[106px] bg-[#157CFF]"
|
||||
style={{ backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
>
|
||||
<img
|
||||
src={featureImage?.__image_url__}
|
||||
alt={featureImage?.__image_prompt__}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -89,45 +89,58 @@ const SolutionSlide = ({ data }: SolutionSlideProps) => {
|
|||
const { title, showImage, featureImage, cards } = data;
|
||||
const visibleCards = showImage ? cards?.slice(0, 2) : cards;
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#F9F8F8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#F9F8F8)",
|
||||
fontFamily: "var(--body-font-family,Helvetica Neue)",
|
||||
}}
|
||||
>
|
||||
<div className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
<> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#F9F8F8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#F9F8F8)",
|
||||
fontFamily: "var(--body-font-family,'Source Sans 3')",
|
||||
}}
|
||||
>
|
||||
<div className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 h-full py-[58px]">
|
||||
{title && (
|
||||
<h2
|
||||
className="text-[80px] px-[64px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
)}
|
||||
<div className="relative z-10 h-full py-[58px]">
|
||||
{title && (
|
||||
<h2
|
||||
className="text-[80px] px-[64px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
)}
|
||||
|
||||
<div className="mt-[70px]">
|
||||
{showImage ? (
|
||||
<div className="flex items-start gap-[40px]">
|
||||
{featureImage?.__image_url__ && (
|
||||
<div
|
||||
className="h-[396px] w-[534px] shrink-0 overflow-hidden rounded-r-[90px] bg-[#ece8dd]"
|
||||
style={{ backgroundColor: "var(--card-color,#ece8dd)" }}
|
||||
>
|
||||
<img
|
||||
src={featureImage?.__image_url__}
|
||||
alt={featureImage?.__image_prompt__}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
<div className="mt-[70px]">
|
||||
{showImage ? (
|
||||
<div className="flex items-start gap-[40px]">
|
||||
{featureImage?.__image_url__ && (
|
||||
<div
|
||||
className="h-[396px] w-[534px] shrink-0 overflow-hidden rounded-r-[90px] bg-[#ece8dd]"
|
||||
style={{ backgroundColor: "var(--card-color,#ece8dd)" }}
|
||||
>
|
||||
<img
|
||||
src={featureImage?.__image_url__}
|
||||
alt={featureImage?.__image_prompt__}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-[40px]">
|
||||
{visibleCards?.map((card, index) => (
|
||||
<SolutionCard
|
||||
key={`${card.bulletNumber}-${index}`}
|
||||
stepNumber={card.bulletNumber}
|
||||
description={card.description}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-[40px]">
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex justify-center gap-[44px] pt-[6px]">
|
||||
{visibleCards?.map((card, index) => (
|
||||
<SolutionCard
|
||||
key={`${card.bulletNumber}-${index}`}
|
||||
|
|
@ -136,21 +149,11 @@ const SolutionSlide = ({ data }: SolutionSlideProps) => {
|
|||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex justify-center gap-[44px] pt-[6px]">
|
||||
{visibleCards?.map((card, index) => (
|
||||
<SolutionCard
|
||||
key={`${card.bulletNumber}-${index}`}
|
||||
stepNumber={card.bulletNumber}
|
||||
description={card.description}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ function StatPill({
|
|||
|
||||
}) {
|
||||
return (
|
||||
|
||||
<div
|
||||
className=" h-[438px] w-[248px] overflow-hidden rounded-[127px] bg-[#157CFF] px-[28px] py-[74px] text-center text-white"
|
||||
style={{
|
||||
|
|
@ -120,37 +121,40 @@ const PerformanceSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
const { title, columns } = data;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,Helvetica Neue)",
|
||||
}}
|
||||
>
|
||||
<>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,'Source Sans 3')",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
|
||||
<div className="px-[64px] pt-[48px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
<div className="px-[64px] pt-[48px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="mt-[44px] flex justify-center gap-[33px]">
|
||||
{columns?.map((column, index) => (
|
||||
<StatPill
|
||||
key={`snapshot-column-${index}`}
|
||||
metrics={column.metrics}
|
||||
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-[44px] flex justify-center gap-[33px]">
|
||||
{columns?.map((column, index) => (
|
||||
<StatPill
|
||||
key={`snapshot-column-${index}`}
|
||||
metrics={column.metrics}
|
||||
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import * as z from "zod";
|
||||
|
||||
import { Fragment } from "react/jsx-runtime";
|
||||
import { RemoteSvgIcon } from "@/app/hooks/useRemoteSvgIcon";
|
||||
|
||||
const ServiceItemSchema = z.object({
|
||||
icon: z.object({
|
||||
|
|
@ -108,85 +109,94 @@ const ServicesSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
const { title, activeIndex, items } = data;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,Helvetica Neue)",
|
||||
}}
|
||||
>
|
||||
<>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" />
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,'Source Sans 3')",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185, backgroundColor: "var(--primary-color,#157CFF)" }}
|
||||
/>
|
||||
|
||||
<div className="px-[70px] pt-[56px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="px-[70px] pt-[56px]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="mt-[56px] flex items-start justify-center px-[82px]">
|
||||
{items?.map((item, index) => {
|
||||
const isActive = index === activeIndex;
|
||||
<div className="mt-[56px] flex items-start justify-center px-[82px]">
|
||||
{items?.map((item, index) => {
|
||||
const isActive = index === activeIndex;
|
||||
|
||||
return (
|
||||
<Fragment key={`${item.heading}-${index}`}>
|
||||
<div key={`${item.heading}-${index}`} className="flex w-[302px] flex-col items-center text-center">
|
||||
<div
|
||||
className={`flex items-center justify-center rounded-full ${isActive
|
||||
? "bg-[#157CFF] text-white"
|
||||
: "border border-[#157CFF] bg-transparent text-[#157CFE]"
|
||||
}`}
|
||||
style={{
|
||||
width: items?.length === 3 ? '266px' : items?.length === 4 ? '192px' : items?.length === 5 ? '157px' : '266px',
|
||||
height: items?.length === 3 ? '266px' : items?.length === 4 ? '192px' : items?.length === 5 ? '157px' : '270px',
|
||||
backgroundColor: isActive ? "var(--primary-color,#157CFF)" : "transparent",
|
||||
borderColor: "var(--primary-color,#157CFF)",
|
||||
color: isActive ? "var(--primary-text,#ffffff)" : "var(--primary-color,#157CFE)",
|
||||
}}
|
||||
>
|
||||
<ServiceGlyph
|
||||
iconUrl={
|
||||
item.icon?.__icon_url__
|
||||
}
|
||||
iconAlt={
|
||||
item.icon?.__icon_query__
|
||||
}
|
||||
isActive={isActive}
|
||||
/>
|
||||
return (
|
||||
<Fragment key={`${item.heading}-${index}`}>
|
||||
<div key={`${item.heading}-${index}`} className="flex w-[302px] flex-col items-center text-center">
|
||||
<div
|
||||
className={`flex items-center justify-center rounded-full ${isActive
|
||||
? "bg-[#157CFF] text-white"
|
||||
: "border border-[#157CFF] bg-transparent text-[#157CFE]"
|
||||
}`}
|
||||
style={{
|
||||
width: items?.length === 3 ? '266px' : items?.length === 4 ? '192px' : items?.length === 5 ? '157px' : '266px',
|
||||
height: items?.length === 3 ? '266px' : items?.length === 4 ? '192px' : items?.length === 5 ? '157px' : '270px',
|
||||
backgroundColor: isActive ? "var(--primary-color,#157CFF)" : "transparent",
|
||||
borderColor: "var(--primary-color,#157CFF)",
|
||||
color: isActive ? "var(--primary-text,#ffffff)" : "var(--primary-color,#157CFE)",
|
||||
}}
|
||||
>
|
||||
{/* <ServiceGlyph
|
||||
iconUrl={
|
||||
item.icon?.__icon_url__
|
||||
}
|
||||
iconAlt={
|
||||
item.icon?.__icon_query__
|
||||
}
|
||||
isActive={isActive}
|
||||
/> */}
|
||||
<RemoteSvgIcon
|
||||
url={item.icon?.__icon_url__}
|
||||
strokeColor={"currentColor"}
|
||||
className="h-[62px] w-[62px] object-contain"
|
||||
color={isActive ? "var(--primary-text, #ffffff)" : "var(--primary-color,#157CFE)"}
|
||||
title={item.icon?.__icon_query__}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h3
|
||||
className="mt-[18px] text-[26px] font-medium tracking-[0.08em] text-[#232223]"
|
||||
style={{
|
||||
fontSize: items?.length === 3 ? '20px' : items?.length === 4 ? '16px' : items?.length === 5 ? '12px' : '20px',
|
||||
color: "var(--background-text,#232223)",
|
||||
}}
|
||||
>
|
||||
{item.heading}
|
||||
</h3>
|
||||
<p
|
||||
className="mt-[12px] max-w-[290px] text-[18px] leading-[1.08] tracking-[-0.04em] text-[#353538]"
|
||||
style={{
|
||||
fontSize: items?.length === 3 ? '24px' : items?.length === 4 ? '17px' : items?.length === 5 ? '14px' : '24px',
|
||||
color: "var(--background-text,#353538)",
|
||||
}}
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3
|
||||
className="mt-[18px] text-[26px] font-medium tracking-[0.08em] text-[#232223]"
|
||||
style={{
|
||||
fontSize: items?.length === 3 ? '20px' : items?.length === 4 ? '16px' : items?.length === 5 ? '12px' : '20px',
|
||||
color: "var(--background-text,#232223)",
|
||||
}}
|
||||
>
|
||||
{item.heading}
|
||||
</h3>
|
||||
<p
|
||||
className="mt-[12px] max-w-[290px] text-[18px] leading-[1.08] tracking-[-0.04em] text-[#353538]"
|
||||
style={{
|
||||
fontSize: items?.length === 3 ? '24px' : items?.length === 4 ? '17px' : items?.length === 5 ? '14px' : '24px',
|
||||
color: "var(--background-text,#353538)",
|
||||
}}
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{index < items?.length - 1 && (
|
||||
<div className=" flex items-center px-1 "
|
||||
style={{
|
||||
marginTop: items?.length === 3 ? '135px' : items?.length === 4 ? '93px' : items?.length === 5 ? '70px' : '135px',
|
||||
}}
|
||||
>
|
||||
{/* <div className="h-px mr-[-10px] w-full bg-[#4d4ef3]"
|
||||
{index < items?.length - 1 && (
|
||||
<div className=" flex items-center px-1 "
|
||||
style={{
|
||||
marginTop: items?.length === 3 ? '135px' : items?.length === 4 ? '93px' : items?.length === 5 ? '70px' : '135px',
|
||||
}}
|
||||
>
|
||||
{/* <div className="h-px mr-[-10px] w-full bg-[#4d4ef3]"
|
||||
style={{
|
||||
width: items?.length === 3 ? '117px' : items?.length === 4 ? '84px' : items?.length === 5 ? '60px' : '112px',
|
||||
}}
|
||||
|
|
@ -205,23 +215,24 @@ const ServicesSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg> */}
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
style={{
|
||||
width: items?.length === 3 ? '117px' : items?.length === 4 ? '84px' : items?.length === 5 ? '60px' : '112px',
|
||||
}}
|
||||
height="15" viewBox="0 0 119 15" fill="none">
|
||||
<path
|
||||
d="M1 6.36401H0V8.36401H1V7.36401V6.36401ZM118.707 8.07112C119.098 7.6806 119.098 7.04743 118.707 6.65691L112.343 0.292946C111.953 -0.0975785 111.319 -0.0975785 110.929 0.292946C110.538 0.68347 110.538 1.31664 110.929 1.70716L116.586 7.36401L110.929 13.0209C110.538 13.4114 110.538 14.0446 110.929 14.4351C111.319 14.8256 111.953 14.8256 112.343 14.4351L118.707 8.07112ZM1 7.36401V8.36401H118V7.36401V6.36401H1V7.36401Z"
|
||||
fill="var(--primary-color,#157CFE)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
style={{
|
||||
width: items?.length === 3 ? '117px' : items?.length === 4 ? '84px' : items?.length === 5 ? '60px' : '112px',
|
||||
}}
|
||||
height="15" viewBox="0 0 119 15" fill="none">
|
||||
<path
|
||||
d="M1 6.36401H0V8.36401H1V7.36401V6.36401ZM118.707 8.07112C119.098 7.6806 119.098 7.04743 118.707 6.65691L112.343 0.292946C111.953 -0.0975785 111.319 -0.0975785 110.929 0.292946C110.538 0.68347 110.538 1.31664 110.929 1.70716L116.586 7.36401L110.929 13.0209C110.538 13.4114 110.538 14.0446 110.929 14.4351C111.319 14.8256 111.953 14.8256 112.343 14.4351L118.707 8.07112ZM1 7.36401V8.36401H118V7.36401V6.36401H1V7.36401Z"
|
||||
fill="var(--primary-color,#157CFE)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue