feat: Theme implementation in new templates
This commit is contained in:
shiva raj badu
parent
a485342f3c
commit
950ca497b1
53 changed files with 1710 additions and 499 deletions
|
|
@ -0,0 +1,133 @@
|
|||
import * as z from "zod";
|
||||
|
||||
export const slideLayoutId = "product-overview-market-opportunity-slide";
|
||||
export const slideLayoutName = "Product Overview Market Opportunity Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A market opportunity slide with title and intro text on the left, four bullet lines extending toward the right, and concentric value circles as the visual focal point.";
|
||||
|
||||
const BulletSchema = z.object({
|
||||
text: z.string().min(12).max(46).meta({
|
||||
description: "Bullet text shown on the left side of a line.",
|
||||
}),
|
||||
});
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(8).max(22).default("Market Opportunity").meta({
|
||||
description: "Main heading shown at the top-left.",
|
||||
}),
|
||||
subtitle: z.string().min(40).max(110).default(
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt."
|
||||
).meta({
|
||||
description: "Supporting text under the main heading.",
|
||||
}),
|
||||
bullets: z
|
||||
.array(BulletSchema)
|
||||
.min(4)
|
||||
.max(4)
|
||||
.default([
|
||||
{ text: "Ut enim ad minim veniam, quis" },
|
||||
{ text: "Ut enim ad minim veniam, quis" },
|
||||
{ text: "Ut enim ad minim veniam, quis" },
|
||||
{ text: "Ut enim ad minim veniam, quis" },
|
||||
])
|
||||
.meta({
|
||||
description: "Four bullet-line entries shown on the left.",
|
||||
}),
|
||||
values: z
|
||||
.array(z.string().min(2).max(6))
|
||||
.min(4)
|
||||
.max(4)
|
||||
.default(["$33", "$20", "$120", "$200"])
|
||||
.meta({
|
||||
description: "Four values shown from outer to inner circles.",
|
||||
}),
|
||||
});
|
||||
|
||||
export type SchemaType = z.infer<typeof Schema>;
|
||||
|
||||
|
||||
const COLORS = [
|
||||
"var(--graph-0,#5f7f79)",
|
||||
"var(--graph-1,#1f5a4f)",
|
||||
"var(--graph-2,#0d4f43)",
|
||||
"var(--graph-3,#06463d)",
|
||||
];
|
||||
|
||||
const MarketOpportunitySlide = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
const { title, subtitle, bullets, values } = data;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#DAE1DE)",
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
}}
|
||||
>
|
||||
<div className="px-[56px] pt-[72px]">
|
||||
<h2
|
||||
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
<p
|
||||
className="mt-[20px] w-[730px] text-[24px] font-normal text-[#15342DCC]"
|
||||
style={{ color: "var(--background-text,#15342DCC)" }}
|
||||
>
|
||||
{subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="absolute left-[56px] top-[368px] space-y-[42px]">
|
||||
{bullets?.map((bullet, index) => (
|
||||
<div key={index} className="relative flex items-center">
|
||||
<span
|
||||
className="mr-[14px] h-[14px] w-[14px] rounded-full bg-[#0a4a3f]"
|
||||
style={{ backgroundColor: "var(--graph-0,#0a4a3f)" }}
|
||||
/>
|
||||
<p
|
||||
className="w-[640px] text-[24px] font-normal text-[#15342DCC]"
|
||||
style={{ color: "var(--background-text,#15342DCC)" }}
|
||||
>
|
||||
{bullet.text}
|
||||
</p>
|
||||
<span
|
||||
className="ml-[8px] h-[2px] w-[80px] bg-[#8ea8a5]"
|
||||
style={{ backgroundColor: "var(--stroke,#8ea8a5)" }}
|
||||
/>
|
||||
<span
|
||||
className="h-[6px] w-[6px] rounded-full bg-[#edf2f1]"
|
||||
style={{ backgroundColor: "var(--primary-text,#edf2f1)" }}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[58px] right-[48px] h-[474px] w-[474px]">
|
||||
{values?.map((value, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="absolute rounded-full"
|
||||
style={{
|
||||
width: 237 + (index * 50),
|
||||
height: 237 + (index * 50),
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
backgroundColor: COLORS[index],
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="pt-[24px] text-center text-[24px] font-normal text-white"
|
||||
style={{ color: "var(--primary-text,#ffffff)" }}
|
||||
>
|
||||
{value}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarketOpportunitySlide;
|
||||
|
|
@ -32,16 +32,29 @@ export type SchemaType = z.infer<typeof Schema>;
|
|||
const CodeSlide01RoadmapCover = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#101B37)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
<div className="relative z-10 flex h-full flex-col items-center justify-center px-[200px] text-center">
|
||||
<p className="text-[22px] text-[#d7dcff]">{data.companyName}</p>
|
||||
<h2 className="mt-[10px] text-[64px] font-medium text-white">
|
||||
<p className="text-[22px]" style={{ color: "var(--background-text,#d7dcff)" }}>{data.companyName}</p>
|
||||
<h2 className="mt-[10px] text-[64px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>
|
||||
{data.title}
|
||||
</h2>
|
||||
<p className="mt-[35px] text-[26px] leading-[132%] text-[#d8ddff]">{data.subtitle}</p>
|
||||
<p className="mt-[35px] text-[26px] leading-[132%]" style={{ color: "var(--background-text,#d8ddff)" }}>{data.subtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
<div
|
||||
className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
|
||||
style={{
|
||||
borderColor: "var(--stroke,#31415880)",
|
||||
backgroundColor: "var(--card-color,#1D293DCC)",
|
||||
color: "var(--background-text,#CAD5E2)",
|
||||
}}
|
||||
>
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -64,15 +64,36 @@ const CodeSlide02CodeExplanationSplit = ({
|
|||
}) => {
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#101B37)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
|
||||
<div className="relative z-10 flex h-full flex-col">
|
||||
<h2 className="text-[64px] font-medium text-[#ffffff]">{data.title}</h2>
|
||||
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{data.title}</h2>
|
||||
|
||||
<div className="mt-[22px] grid min-h-0 flex-1 grid-cols-2 gap-[34px]">
|
||||
<div className=" flex-1 bg-[#0F172B80] border border-[#1D293D80] rounded-[18px] ">
|
||||
<p className="text-[18px] text-[#CAD5E2] capitalize bg-[#0F172BCC] rounded-t-[18px] border border-[#1D293D80] px-[26px] py-3">{data.codeSnippet?.fileName}</p>
|
||||
<pre className=" w-full px-[32px] py-[20px] text-[#ffffff] whitespace-pre-wrap break-words overflow-hidden">
|
||||
<div
|
||||
className=" flex-1 border rounded-[18px]"
|
||||
style={{
|
||||
backgroundColor: "var(--card-color,#0F172B80)",
|
||||
borderColor: "var(--stroke,#1D293D80)",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text-[18px] capitalize rounded-t-[18px] border px-[26px] py-3"
|
||||
style={{
|
||||
color: "var(--background-text,#CAD5E2)",
|
||||
backgroundColor: "var(--card-color,#0F172BCC)",
|
||||
borderColor: "var(--stroke,#1D293D80)",
|
||||
}}
|
||||
>
|
||||
{data.codeSnippet?.fileName}
|
||||
</p>
|
||||
<pre className=" w-full px-[32px] py-[20px] whitespace-pre-wrap break-words overflow-hidden" style={{ color: "var(--background-text,#ffffff)" }}>
|
||||
|
||||
<code className="w-full ">
|
||||
{data.codeSnippet?.content}
|
||||
|
|
@ -81,15 +102,22 @@ const CodeSlide02CodeExplanationSplit = ({
|
|||
</div>
|
||||
|
||||
<div className=" ">
|
||||
<h3 className="text-[24px] font-medium text-[#f1f4ff]">{data.explanationTitle}</h3>
|
||||
<p className="mt-[18px] text-[22px] leading-[145%] text-[#d2d9ff]">
|
||||
<h3 className="text-[24px] font-medium" style={{ color: "var(--background-text,#f1f4ff)" }}>{data.explanationTitle}</h3>
|
||||
<p className="mt-[18px] text-[22px] leading-[145%]" style={{ color: "var(--background-text,#d2d9ff)" }}>
|
||||
{data.explanation}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
<div
|
||||
className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
|
||||
style={{
|
||||
borderColor: "var(--stroke,#31415880)",
|
||||
backgroundColor: "var(--card-color,#1D293DCC)",
|
||||
color: "var(--background-text,#CAD5E2)",
|
||||
}}
|
||||
>
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -73,31 +73,64 @@ const CodeSlide03ApiRequestResponse = ({
|
|||
}) => {
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#101B37)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
|
||||
<div className="relative z-10 flex h-full flex-col">
|
||||
<h2 className="text-[64px] font-medium text-[#ffffff]">{data.title}</h2>
|
||||
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{data.title}</h2>
|
||||
|
||||
<div className="mt-[22px] grid flex-1 grid-cols-2 gap-[22px]">
|
||||
<div className="flex flex-col gap-[12px] ">
|
||||
<div className="rounded-[14px] border border-[#1D293D80] bg-[#0F172B80] p-[14px]">
|
||||
<div className="flex items-center gap-5 pb-[14px] border-b border-[#1D293D80]">
|
||||
<p className="rounded-[12px] bg-[#2B7FFF33] px-[23px] py-[10px] text-[14px] uppercase tracking-[0.06em] text-[#51A2FF]">
|
||||
<div
|
||||
className="rounded-[14px] border p-[14px]"
|
||||
style={{
|
||||
borderColor: "var(--stroke,#1D293D80)",
|
||||
backgroundColor: "var(--card-color,#0F172B80)",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-5 pb-[14px] border-b" style={{ borderColor: "var(--stroke,#1D293D80)" }}>
|
||||
<p
|
||||
className="rounded-[12px] px-[23px] py-[10px] text-[14px] uppercase tracking-[0.06em]"
|
||||
style={{
|
||||
backgroundColor: "var(--primary-color,#2B7FFF33)",
|
||||
color: "var(--primary-text,#51A2FF)",
|
||||
}}
|
||||
>
|
||||
{data.method}
|
||||
</p>
|
||||
<p className="text-[23px] text-[#dde5ff]">{data.endpoint}</p>
|
||||
<p className="text-[23px]" style={{ color: "var(--background-text,#dde5ff)" }}>{data.endpoint}</p>
|
||||
</div>
|
||||
<p className="mt-[21px] text-[18px] uppercase tracking-[0.08em] text-[#90a1d8]">Headers</p>
|
||||
<div className="mt-[15px] space-y-[4px] text-[24px] text-[#cbd4f8]">
|
||||
<p className="mt-[21px] text-[18px] uppercase tracking-[0.08em]" style={{ color: "var(--background-text,#90a1d8)" }}>Headers</p>
|
||||
<div className="mt-[15px] space-y-[4px] text-[24px]" style={{ color: "var(--background-text,#cbd4f8)" }}>
|
||||
{data.headers?.map((item) => (
|
||||
<p key={item} className="text-[18px] text-[#CAD5E2]">{item}</p>
|
||||
<p key={item} className="text-[18px]" style={{ color: "var(--background-text,#CAD5E2)" }}>{item}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className=" flex-1 bg-[#0F172B80] border border-[#1D293D80] rounded-[18px] ">
|
||||
<p className="text-[18px] text-[#CAD5E2] capitalize bg-[#1D293D80] rounded-t-[18px] border border-[#1D293D80] p-[14px]">{data.requestSnippet?.fileName}</p>
|
||||
<pre className=" w-full px-[14px] py-[20px] text-[#ffffff] whitespace-pre-wrap break-words overflow-hidden">
|
||||
<div
|
||||
className=" flex-1 border rounded-[18px]"
|
||||
style={{
|
||||
backgroundColor: "var(--card-color,#0F172B80)",
|
||||
borderColor: "var(--stroke,#1D293D80)",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text-[18px] capitalize rounded-t-[18px] border p-[14px]"
|
||||
style={{
|
||||
color: "var(--background-text,#CAD5E2)",
|
||||
backgroundColor: "var(--card-color,#1D293D80)",
|
||||
borderColor: "var(--stroke,#1D293D80)",
|
||||
}}
|
||||
>
|
||||
{data.requestSnippet?.fileName}
|
||||
</p>
|
||||
<pre className=" w-full px-[14px] py-[20px] whitespace-pre-wrap break-words overflow-hidden" style={{ color: "var(--background-text,#ffffff)" }}>
|
||||
|
||||
<code className="w-full ">
|
||||
{data.requestSnippet?.content}
|
||||
|
|
@ -106,9 +139,24 @@ const CodeSlide03ApiRequestResponse = ({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className=" flex-1 bg-[#0F172B80] border border-[#1D293D80] rounded-[18px] ">
|
||||
<p className="text-[18px] text-[#CAD5E2] capitalize bg-[#1D293D80] rounded-t-[18px] border border-[#1D293D80] p-[14px]">{data.responseSnippet?.fileName}</p>
|
||||
<pre className=" w-full px-[14px] py-[20px] text-[#ffffff] whitespace-pre-wrap break-words overflow-hidden">
|
||||
<div
|
||||
className=" flex-1 border rounded-[18px]"
|
||||
style={{
|
||||
backgroundColor: "var(--card-color,#0F172B80)",
|
||||
borderColor: "var(--stroke,#1D293D80)",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text-[18px] capitalize rounded-t-[18px] border p-[14px]"
|
||||
style={{
|
||||
color: "var(--background-text,#CAD5E2)",
|
||||
backgroundColor: "var(--card-color,#1D293D80)",
|
||||
borderColor: "var(--stroke,#1D293D80)",
|
||||
}}
|
||||
>
|
||||
{data.responseSnippet?.fileName}
|
||||
</p>
|
||||
<pre className=" w-full px-[14px] py-[20px] whitespace-pre-wrap break-words overflow-hidden" style={{ color: "var(--background-text,#ffffff)" }}>
|
||||
|
||||
<code className="w-full ">
|
||||
{data.responseSnippet?.content}
|
||||
|
|
@ -118,7 +166,14 @@ const CodeSlide03ApiRequestResponse = ({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
<div
|
||||
className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
|
||||
style={{
|
||||
borderColor: "var(--stroke,#31415880)",
|
||||
backgroundColor: "var(--card-color,#1D293DCC)",
|
||||
color: "var(--background-text,#CAD5E2)",
|
||||
}}
|
||||
>
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -99,24 +99,37 @@ const CodeSlide04FeatureGrid = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#101B37)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
<h2 className="text-[64px] font-medium tracking-[-0.03em] text-[#f2f4ff]">{data.title}</h2>
|
||||
<h2 className="text-[64px] font-medium tracking-[-0.03em]" style={{ color: "var(--background-text,#f2f4ff)" }}>{data.title}</h2>
|
||||
|
||||
<div className="mt-[26px] grid flex-1 grid-cols-3 items-center h-fit gap-[26px]">
|
||||
{data?.features?.map((feature) => (
|
||||
<div
|
||||
key={feature.title}
|
||||
className="rounded-[18px] border p-[26px]"
|
||||
style={{
|
||||
boxShadow: "0 33.333px 66.667px -16px rgba(0, 0, 0, 0.25)",
|
||||
|
||||
borderColor: "var(--stroke,#1D293D80)",
|
||||
backgroundColor: "var(--card-color,#0F172B80)",
|
||||
}}
|
||||
className="rounded-[18px] border border-[#1D293D80] bg-[#0F172B80] p-[26px]"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-[8px]">
|
||||
<h3 className="text-[26px] font-medium text-[#ffffff]">{feature.title}</h3>
|
||||
<span className="flex h-[52px] w-[52px] items-center justify-center rounded-full border border-[#2B7FFF4D] bg-[#2B7FFF33] text-[18px] ">
|
||||
<h3 className="text-[26px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{feature.title}</h3>
|
||||
<span
|
||||
className="flex h-[52px] w-[52px] items-center justify-center rounded-full border text-[18px]"
|
||||
style={{
|
||||
borderColor: "var(--primary-color,#2B7FFF4D)",
|
||||
backgroundColor: "var(--primary-color,#2B7FFF33)",
|
||||
}}
|
||||
>
|
||||
<img src={feature.icon.__icon_url__} alt={feature.icon.__icon_query__} className="h-[24px] w-[24px] object-contain"
|
||||
style={{
|
||||
filter: "invert(1)",
|
||||
|
|
@ -124,13 +137,20 @@ const CodeSlide04FeatureGrid = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
/>
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-[12px] text-[18px] leading-[136%] text-[#90A1B9]">{feature.description}</p>
|
||||
<p className="mt-[12px] text-[18px] leading-[136%]" style={{ color: "var(--background-text,#90A1B9)" }}>{feature.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
<div
|
||||
className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
|
||||
style={{
|
||||
borderColor: "var(--stroke,#31415880)",
|
||||
backgroundColor: "var(--card-color,#1D293DCC)",
|
||||
color: "var(--background-text,#CAD5E2)",
|
||||
}}
|
||||
>
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -51,28 +51,51 @@ export type SchemaType = z.infer<typeof Schema>;
|
|||
|
||||
function renderCell(value: string) {
|
||||
if (value.toLowerCase() === "check") {
|
||||
return <span className="text-[26px] px-[32px] text-[#37f08e]">✓</span>;
|
||||
return <span className="text-[26px] px-[32px]" style={{ color: "var(--graph-2,#37f08e)" }}>✓</span>;
|
||||
}
|
||||
|
||||
return <span className="text-[18px] px-[32px] text-[#CAD5E2]">{value}</span>;
|
||||
return <span className="text-[18px] px-[32px]" style={{ color: "var(--background-text,#CAD5E2)" }}>{value}</span>;
|
||||
}
|
||||
|
||||
const CodeSlide05ComparisonTable = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#101B37)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
|
||||
<h2 className="text-[64px] font-medium text-[#ffffff]">{data.title}</h2>
|
||||
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{data.title}</h2>
|
||||
|
||||
<div className="mt-[22px] min-h-0 flex-1 rounded-[16px] bg-[#0F172BCC] border border-[#1D293D80]">
|
||||
<div className="grid grid-cols-[0.4fr_0.20fr_0.20fr_0.20fr] items-center text-[#8ea1da]"
|
||||
<div
|
||||
className="mt-[22px] min-h-0 flex-1 rounded-[16px] border"
|
||||
style={{
|
||||
backgroundColor: "var(--card-color,#0F172BCC)",
|
||||
borderColor: "var(--stroke,#1D293D80)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="grid grid-cols-[0.4fr_0.20fr_0.20fr_0.20fr] items-center"
|
||||
style={{
|
||||
color: "var(--background-text,#8ea1da)",
|
||||
gridTemplateColumns: `repeat(${data?.tableColumns?.length || 1}, 1fr)`,
|
||||
}}
|
||||
>
|
||||
|
||||
{data?.tableColumns?.map((column) => (
|
||||
<p className="px-[32px] py-[16px] text-[18px] text-center text-[#ffffff] border-b border-r border-[#1D293D80]">{column}</p>
|
||||
<p
|
||||
key={column}
|
||||
className="px-[32px] py-[16px] text-[18px] text-center border-b border-r"
|
||||
style={{
|
||||
color: "var(--background-text,#ffffff)",
|
||||
borderColor: "var(--stroke,#1D293D80)",
|
||||
}}
|
||||
>
|
||||
{column}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
|
@ -85,17 +108,32 @@ const CodeSlide05ComparisonTable = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
gridTemplateColumns: `repeat(${data?.tableColumns?.length || 1}, 1fr)`,
|
||||
}}
|
||||
>
|
||||
<p className="px-[32px] py-[20px] text-center text-[18px] text-[#d5dcff] border-b border-r border-[#1D293D80]">{row.feature}</p>
|
||||
<div className="flex justify-center items-center text-[18px] border-b border-r border-[#1D293D80] ">{renderCell(row.column1)}</div>
|
||||
<div className="flex justify-center items-center text-[18px] border-b border-r border-[#1D293D80] ">{renderCell(row.column2)}</div>
|
||||
<div className="flex justify-center items-center text-[18px] border-b border-r border-[#1D293D80] ">{renderCell(row.column3)}</div>
|
||||
<p
|
||||
className="px-[32px] py-[20px] text-center text-[18px] border-b border-r"
|
||||
style={{
|
||||
color: "var(--background-text,#d5dcff)",
|
||||
borderColor: "var(--stroke,#1D293D80)",
|
||||
}}
|
||||
>
|
||||
{row.feature}
|
||||
</p>
|
||||
<div className="flex justify-center items-center text-[18px] border-b border-r" style={{ borderColor: "var(--stroke,#1D293D80)" }}>{renderCell(row.column1)}</div>
|
||||
<div className="flex justify-center items-center text-[18px] border-b border-r" style={{ borderColor: "var(--stroke,#1D293D80)" }}>{renderCell(row.column2)}</div>
|
||||
<div className="flex justify-center items-center text-[18px] border-b border-r" style={{ borderColor: "var(--stroke,#1D293D80)" }}>{renderCell(row.column3)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
<div
|
||||
className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
|
||||
style={{
|
||||
borderColor: "var(--stroke,#31415880)",
|
||||
backgroundColor: "var(--card-color,#1D293DCC)",
|
||||
color: "var(--background-text,#CAD5E2)",
|
||||
}}
|
||||
>
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -81,33 +81,47 @@ export type SchemaType = z.infer<typeof Schema>;
|
|||
const CodeSlide06Workflow = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#101B37)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
|
||||
<h2 className="text-[64px] font-medium text-[#ffffff]">{data.title}</h2>
|
||||
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{data.title}</h2>
|
||||
|
||||
<div className="mt-[52px] grid flex-1 grid-cols-[1fr_auto_1fr_auto_1fr_auto_1fr] items-center gap-[12px]">
|
||||
{data?.steps?.map((step, index) => (
|
||||
<Fragment key={`${step.title}-${index}`}>
|
||||
<div
|
||||
className="rounded-[18px] border border-[#1D293D80] bg-[#0F172B80] p-[21px] text-center"
|
||||
className="rounded-[18px] border p-[21px] text-center"
|
||||
style={{
|
||||
boxShadow: "0 33.333px 66.667px -16px rgba(0, 0, 0, 0.25)",
|
||||
borderColor: "var(--stroke,#1D293D80)",
|
||||
backgroundColor: "var(--card-color,#0F172B80)",
|
||||
}}
|
||||
>
|
||||
<div className="mx-auto flex h-[75px] w-[75px] items-center justify-center rounded-full border border-[#2B7FFF80] bg-[#2B7FFF33]">
|
||||
<div
|
||||
className="mx-auto flex h-[75px] w-[75px] items-center justify-center rounded-full border"
|
||||
style={{
|
||||
borderColor: "var(--primary-color,#2B7FFF80)",
|
||||
backgroundColor: "var(--primary-color,#2B7FFF33)",
|
||||
}}
|
||||
>
|
||||
<img src={step.icon.__icon_url__} alt={step.icon.__icon_query__} className="h-[37px] w-[37px] object-contain"
|
||||
style={{
|
||||
filter: "invert(1)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<h3 className="mt-[12px] text-[24px] font-medium text-[#ffffff]">{step.title}</h3>
|
||||
<p className="mt-[12px] text-[18px] text-[#90A1B9]">{step.description}</p>
|
||||
<h3 className="mt-[12px] text-[24px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{step.title}</h3>
|
||||
<p className="mt-[12px] text-[18px]" style={{ color: "var(--background-text,#90A1B9)" }}>{step.description}</p>
|
||||
</div>
|
||||
{index < (data?.steps?.length || 0) - 1 && (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" viewBox="0 0 43 43" fill="none">
|
||||
<path d="M8.88892 21.3333H33.7778" stroke="#51A2FF" strokeWidth="3.55556" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M21.3334 8.88892L33.7778 21.3334L21.3334 33.7778" stroke="#51A2FF" strokeWidth="3.55556" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M8.88892 21.3333H33.7778" stroke="var(--primary-color,#51A2FF)" strokeWidth="3.55556" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M21.3334 8.88892L33.7778 21.3334L21.3334 33.7778" stroke="var(--primary-color,#51A2FF)" strokeWidth="3.55556" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)}
|
||||
</Fragment>
|
||||
|
|
@ -115,7 +129,14 @@ const CodeSlide06Workflow = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
<div
|
||||
className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
|
||||
style={{
|
||||
borderColor: "var(--stroke,#31415880)",
|
||||
backgroundColor: "var(--card-color,#1D293DCC)",
|
||||
color: "var(--background-text,#CAD5E2)",
|
||||
}}
|
||||
>
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,31 +36,52 @@ export type SchemaType = z.infer<typeof Schema>;
|
|||
const CodeSlide07UseCaseList = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#101B37)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
<h2 className="text-[64px] font-medium text-[#f2f4ff]">{data.title}</h2>
|
||||
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#f2f4ff)" }}>{data.title}</h2>
|
||||
|
||||
<div className="mt-[53px] grid flex-1 grid-cols-2 gap-[21px]">
|
||||
{data?.items?.map((item, index) => (
|
||||
<div
|
||||
key={`use-case-${index}`}
|
||||
className="flex items-center gap-[21px] rounded-[18px] border border-[#1D293D80] bg-[#0F172B80] p-[28px] "
|
||||
className="flex items-center gap-[21px] rounded-[18px] border p-[28px]"
|
||||
style={{
|
||||
boxShadow: "0 33.333px 66.667px -16px rgba(0, 0, 0, 0.25)",
|
||||
|
||||
borderColor: "var(--stroke,#1D293D80)",
|
||||
backgroundColor: "var(--card-color,#0F172B80)",
|
||||
}}
|
||||
>
|
||||
<span className="flex h-[42px] w-[42px] shrink-0 items-center justify-center rounded-full border border-[#2B7FFF4D] bg-[#2B7FFF33] text-[18px] text-[#51A2FF]">
|
||||
<span
|
||||
className="flex h-[42px] w-[42px] shrink-0 items-center justify-center rounded-full border text-[18px]"
|
||||
style={{
|
||||
borderColor: "var(--primary-color,#2B7FFF4D)",
|
||||
backgroundColor: "var(--primary-color,#2B7FFF33)",
|
||||
color: "var(--primary-color,#51A2FF)",
|
||||
}}
|
||||
>
|
||||
{index + 1}
|
||||
</span>
|
||||
<p className="text-[18px] text-[#d5dcff]">{item}</p>
|
||||
<p className="text-[18px]" style={{ color: "var(--background-text,#d5dcff)" }}>{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
<div
|
||||
className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
|
||||
style={{
|
||||
borderColor: "var(--stroke,#31415880)",
|
||||
backgroundColor: "var(--card-color,#1D293DCC)",
|
||||
color: "var(--background-text,#CAD5E2)",
|
||||
}}
|
||||
>
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,16 +32,29 @@ export type SchemaType = z.infer<typeof Schema>;
|
|||
const CodeSlide08CodeExplanationText = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#101B37)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
<h2 className="text-[64px] font-medium text-[#f2f4ff]">{data.title}</h2>
|
||||
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#f2f4ff)" }}>{data.title}</h2>
|
||||
<div className="relative z-10 h-full max-w-[560px]">
|
||||
<h3 className="mt-[34px] text-[24px] font-medium text-[#f1f4ff]">{data.explanationTitle}</h3>
|
||||
<p className="mt-[16px] text-[22px] leading-[145%] text-[#d2d9ff]">{data.explanation}</p>
|
||||
<h3 className="mt-[34px] text-[24px] font-medium" style={{ color: "var(--background-text,#f1f4ff)" }}>{data.explanationTitle}</h3>
|
||||
<p className="mt-[16px] text-[22px] leading-[145%]" style={{ color: "var(--background-text,#d2d9ff)" }}>{data.explanation}</p>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
<div
|
||||
className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
|
||||
style={{
|
||||
borderColor: "var(--stroke,#31415880)",
|
||||
backgroundColor: "var(--card-color,#1D293DCC)",
|
||||
color: "var(--background-text,#CAD5E2)",
|
||||
}}
|
||||
>
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -49,15 +49,15 @@ function TocColumn({ items }: { items: { number: string; label: string, descript
|
|||
|
||||
|
||||
return (
|
||||
<div key={`${item.number}-${item.label}`} className="flex items-center gap-[10px] text-[#d5dcff]">
|
||||
<div key={`${item.number}-${item.label}`} className="flex items-center gap-[10px]" style={{ color: "var(--background-text,#d5dcff)" }}>
|
||||
<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="#51A2FF" strokeWidth="1.77778" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<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>
|
||||
<div className="flex gap-[26px]">
|
||||
|
||||
<p className="w-[36px] text-[18px] text-[#8EC5FF]">{item.number}</p>
|
||||
<p className="text-[18px] text-[#ffffff]">{item.label}</p>
|
||||
{item.description && <p className="text-[18px] text-[#ffffff]">{item.description}</p>}
|
||||
<p className="w-[36px] text-[18px]" style={{ color: "var(--primary-color,#8EC5FF)" }}>{item.number}</p>
|
||||
<p className="text-[18px]" style={{ color: "var(--background-text,#ffffff)" }}>{item.label}</p>
|
||||
{item.description && <p className="text-[18px]" style={{ color: "var(--background-text,#ffffff)" }}>{item.description}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -72,11 +72,17 @@ const CodeSlide09TableOfContent = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#101B37)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
<div className="relative z-10 flex h-full flex-col">
|
||||
<h2 className="text-[64px] font-medium text-[#f2f4ff]">{data.title}</h2>
|
||||
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#f2f4ff)" }}>{data.title}</h2>
|
||||
|
||||
<div className="mt-[53px] grid flex-1 grid-cols-2 gap-[24px]">
|
||||
<TocColumn items={leftItems || []} />
|
||||
|
|
@ -84,7 +90,14 @@ const CodeSlide09TableOfContent = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
<div
|
||||
className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
|
||||
style={{
|
||||
borderColor: "var(--stroke,#31415880)",
|
||||
backgroundColor: "var(--card-color,#1D293DCC)",
|
||||
color: "var(--background-text,#CAD5E2)",
|
||||
}}
|
||||
>
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -52,35 +52,53 @@ export const Schema = z.object({
|
|||
export type SchemaType = z.infer<typeof Schema>;
|
||||
|
||||
const CodeSlide10MetricsSplit = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
const slideData = Schema.parse(data);
|
||||
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] text-[#ffffff]">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#101B37)",
|
||||
color: "var(--background-text,#ffffff)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
<h2 className="text-[64px] font-medium tracking-[-0.03em] text-[#f2f4ff]">{slideData.title}</h2>
|
||||
<h2 className="text-[64px] font-medium tracking-[-0.03em]" style={{ color: "var(--background-text,#f2f4ff)" }}>{data.title}</h2>
|
||||
<div className="relative z-10 flex gap-10 ">
|
||||
<div className="w-1/2">
|
||||
<h3 className="mt-[28px] text-[24px] font-medium text-[#f1f4ff]">{slideData.explanationTitle}</h3>
|
||||
<p className="mt-[16px] text-[22px] leading-[145%] text-[#d2d9ff]">{slideData.explanation}</p>
|
||||
<h3 className="mt-[28px] text-[24px] font-medium" style={{ color: "var(--background-text,#f1f4ff)" }}>{data.explanationTitle}</h3>
|
||||
<p className="mt-[16px] text-[22px] leading-[145%]" style={{ color: "var(--background-text,#d2d9ff)" }}>{data.explanation}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-center items-end gap-[25px] w-1/2">
|
||||
{slideData.metrics.map((metric, index) => (
|
||||
{data?.metrics?.map((metric, index) => (
|
||||
<div
|
||||
key={`metric-grid-${index}`}
|
||||
className="rounded-[16px] w-[310px] border border-[#1D293D80] bg-[#0F172B80] pt-[26px] px-[26px] pb-[16px] text-center"
|
||||
className="rounded-[16px] w-[310px] border pt-[26px] px-[26px] pb-[16px] text-center"
|
||||
style={{
|
||||
borderColor: "var(--stroke,#1D293D80)",
|
||||
backgroundColor: "var(--card-color,#0F172B80)",
|
||||
}}
|
||||
>
|
||||
<p className="text-[64px] font-semibold leading-none text-[#8bb4ff]">{metric.value}</p>
|
||||
<p className="mt-[13px] text-[26px] text-[#edf1ff]">{metric.label}</p>
|
||||
<p className="mt-[13px] text-[18px] text-[#8fa2d8]">{metric.period}</p>
|
||||
<p className="text-[64px] font-semibold leading-none" style={{ color: "var(--graph-0,#8bb4ff)" }}>{metric.value}</p>
|
||||
<p className="mt-[13px] text-[26px]" style={{ color: "var(--background-text,#edf1ff)" }}>{metric.label}</p>
|
||||
<p className="mt-[13px] text-[18px]" style={{ color: "var(--background-text,#8fa2d8)" }}>{metric.period}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
{slideData.pageLabel}
|
||||
<div
|
||||
className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
|
||||
style={{
|
||||
borderColor: "var(--stroke,#31415880)",
|
||||
backgroundColor: "var(--card-color,#1D293DCC)",
|
||||
color: "var(--background-text,#CAD5E2)",
|
||||
}}
|
||||
>
|
||||
{data?.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -46,27 +46,46 @@ export type SchemaType = z.infer<typeof Schema>;
|
|||
const CodeSlide11MetricsGrid = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] border border-[#243272] bg-[#101B37] p-[40px] text-[#edf1ff]">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] border p-[40px]"
|
||||
style={{
|
||||
borderColor: "var(--stroke,#243272)",
|
||||
backgroundColor: "var(--background-color,#101B37)",
|
||||
color: "var(--background-text,#edf1ff)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
|
||||
<h2 className="text-[64px] font-medium text-[#ffffff]">{data.title}</h2>
|
||||
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{data.title}</h2>
|
||||
|
||||
<div className="mt-[53px] grid flex-1 grid-cols-3 gap-[14px]">
|
||||
{data?.metrics?.map((metric, index) => (
|
||||
<div
|
||||
key={`metric-grid-${index}`}
|
||||
className="rounded-[16px] border border-[#1D293D80] bg-[#0F172B80] pt-[26px] px-[26px] pb-[16px] text-center"
|
||||
className="rounded-[16px] border pt-[26px] px-[26px] pb-[16px] text-center"
|
||||
style={{
|
||||
borderColor: "var(--stroke,#1D293D80)",
|
||||
backgroundColor: "var(--card-color,#0F172B80)",
|
||||
}}
|
||||
>
|
||||
<p className="text-[64px] font-semibold leading-none text-[#8bb4ff]">{metric.value}</p>
|
||||
<p className="mt-[13px] text-[26px] text-[#edf1ff]">{metric.label}</p>
|
||||
<p className="mt-[13px] text-[18px] text-[#8fa2d8]">{metric.period}</p>
|
||||
<p className="text-[64px] font-semibold leading-none" style={{ color: "var(--graph-0,#8bb4ff)" }}>{metric.value}</p>
|
||||
<p className="mt-[13px] text-[26px]" style={{ color: "var(--background-text,#edf1ff)" }}>{metric.label}</p>
|
||||
<p className="mt-[13px] text-[18px]" style={{ color: "var(--background-text,#8fa2d8)" }}>{metric.period}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
<div
|
||||
className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
|
||||
style={{
|
||||
borderColor: "var(--stroke,#31415880)",
|
||||
backgroundColor: "var(--card-color,#1D293DCC)",
|
||||
color: "var(--background-text,#CAD5E2)",
|
||||
}}
|
||||
>
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -56,16 +56,22 @@ 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" />
|
||||
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#efeff1]">
|
||||
<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 items-end grid-cols-[1fr_1fr]">
|
||||
<div className="px-[53px] pb-[56px] ">
|
||||
<h2 className="font-serif text-[64px] leading-[98%] tracking-[-0.02em] text-[#101C3D]">
|
||||
<h2 className="font-serif text-[64px] leading-[98%] tracking-[-0.02em]" style={{ color: "var(--primary-color,#101C3D)" }}>
|
||||
{data.companyName}
|
||||
</h2>
|
||||
<p className="mt-[30px] max-w-[610px] text-[22px] font-semibold leading-[1.24] text-[#34394C]">
|
||||
<p className="mt-[30px] max-w-[610px] text-[22px] font-semibold leading-[1.24]" style={{ color: "var(--background-text,#34394C)" }}>
|
||||
{data.intro}
|
||||
</p>
|
||||
<p className="mt-[18px] max-w-[620px] text-[22px] leading-[1.28] text-[#46474C]">
|
||||
<p className="mt-[18px] max-w-[620px] text-[22px] leading-[1.28]" style={{ color: "var(--background-text,#46474C)" }}>
|
||||
{data.body}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -77,8 +83,15 @@ const EducationAboutSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
alt={data.topFeatureImage?.__image_prompt__}
|
||||
className="absolute inset-0 h-full w-full object-cover z-1 "
|
||||
/>
|
||||
<div className=" w-1/2 bg-[#28256f]/60 z-10 flex justify-center items-center">
|
||||
<p className=" text-[24px] leading-[1.22] text-[#f5f7ff] px-[42px]">
|
||||
<div className="w-1/2 z-10 flex justify-center items-center relative">
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
backgroundColor: "var(--primary-color,#28256f)",
|
||||
opacity: 0.6,
|
||||
}}
|
||||
/>
|
||||
<p className="relative z-10 text-[24px] leading-[1.22] px-[42px]" style={{ color: "var(--primary-text,#f5f7ff)" }}>
|
||||
{data.topPanelText}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -96,8 +109,15 @@ const EducationAboutSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
<div className=" w-1/2 ">
|
||||
|
||||
</div>
|
||||
<div className=" w-1/2 bg-[#28256f]/60 z-10 flex justify-center items-center">
|
||||
<p className=" text-[24px] leading-[1.22] text-[#f5f7ff] px-[42px]">
|
||||
<div className="w-1/2 z-10 flex justify-center items-center relative">
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
backgroundColor: "var(--primary-color,#28256f)",
|
||||
opacity: 0.6,
|
||||
}}
|
||||
/>
|
||||
<p className="relative z-10 text-[24px] leading-[1.22] px-[42px]" style={{ color: "var(--primary-text,#f5f7ff)" }}>
|
||||
{data.bottomPanelText}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -84,17 +84,17 @@ type PieLabelProps = {
|
|||
};
|
||||
|
||||
const DEFAULT_COLORS = [
|
||||
"#4A15A8",
|
||||
"#5B45AD",
|
||||
"#7E6CC0",
|
||||
"#9F94CD",
|
||||
"#6A31B8",
|
||||
"#4D2A97",
|
||||
"var(--graph-0,#4A15A8)",
|
||||
"var(--graph-1,#5B45AD)",
|
||||
"var(--graph-2,#7E6CC0)",
|
||||
"var(--graph-3,#9F94CD)",
|
||||
"var(--graph-4,#6A31B8)",
|
||||
"var(--graph-5,#4D2A97)",
|
||||
];
|
||||
|
||||
const AXIS = "#7C7A83";
|
||||
const GRID = "#CFCBD8";
|
||||
const PRIMARY_TEXT = "#3E3C45";
|
||||
const AXIS = "var(--background-text,#7C7A83)";
|
||||
const GRID = "var(--stroke,#CFCBD8)";
|
||||
const PRIMARY_TEXT = "var(--background-text,#3E3C45)";
|
||||
|
||||
function formatComma(value: number | string) {
|
||||
if (typeof value === "number") {
|
||||
|
|
@ -201,7 +201,7 @@ const renderPieInsideLabel = (props: any) => {
|
|||
y={y}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="central"
|
||||
fill="#ffffff"
|
||||
fill="var(--primary-text,#ffffff)"
|
||||
fontSize={fontSize}
|
||||
fontWeight={600}
|
||||
style={{
|
||||
|
|
@ -247,10 +247,16 @@ function CustomTooltip({ active, payload, label }: TooltipProps) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-[8px] border border-[#ddd9e8] bg-[#f7f6fa] px-[10px] py-[8px]">
|
||||
<p className="text-[11px] font-semibold text-[#3f3d47]">{label}</p>
|
||||
<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] text-[#5d5b67]">
|
||||
<p key={`${entry.name ?? "value"}-${index}`} className="text-[10px]" style={{ color: "var(--background-text,#5d5b67)" }}>
|
||||
{entry.name ?? entry.dataKey}: {String(entry.value)}
|
||||
</p>
|
||||
))}
|
||||
|
|
@ -268,7 +274,7 @@ function renderPieLabel({ name, percent = 0, x = 0, y = 0, textAnchor = "middle"
|
|||
}
|
||||
|
||||
return (
|
||||
<text x={x} y={y} textAnchor={textAnchor} fill={AXIS} fontSize={10} fontFamily="serif">
|
||||
<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>
|
||||
);
|
||||
|
|
@ -298,7 +304,7 @@ export default function EducationChartPrimitives({
|
|||
divergingLabels: [string, string];
|
||||
}) {
|
||||
const axisProps = {
|
||||
tick: { fill: AXIS, fontSize: 12, fontFamily: "serif" },
|
||||
tick: { fill: AXIS, fontSize: 12, fontFamily: "var(--body-font-family,'Times New Roman')" },
|
||||
axisLine: { stroke: GRID },
|
||||
tickLine: { stroke: GRID },
|
||||
} as const;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,13 @@ const EducationContentSplitSlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
const { heading, tagline, body, collageImage } = data;
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#E6E7E8]">
|
||||
<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]">
|
||||
|
|
@ -61,11 +67,11 @@ const EducationContentSplitSlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
</div>
|
||||
|
||||
<div className="w-1/2 px-[56px]">
|
||||
<h2 className="text-[24px] font-medium leading-none text-[#34394C]">{data.heading}</h2>
|
||||
<p className=" text-[14px] font-medium mt-1 leading-none tracking-[0.04em] text-[#454962]">
|
||||
{data.tagline}
|
||||
<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] text-[#34394C]">{body}</p>
|
||||
<p className="mt-[18px] text-[22px] leading-[1.28]" style={{ color: "var(--background-text,#34394C)" }}>{body}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,18 +31,33 @@ const EducationCoverSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
const { companyName, title, backgroundImage } = data;
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#2e0a8a]">
|
||||
<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"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-0 bg-[#3b0bb6]/85" />
|
||||
<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 text-white">
|
||||
<p className="text-[22px] font-normal uppercase tracking-[0.64px]">{data.companyName}</p>
|
||||
<div
|
||||
className="relative z-10 flex h-full flex-col items-center justify-center text-center"
|
||||
style={{ color: "var(--primary-text,#ffffff)" }}
|
||||
>
|
||||
<p className="text-[22px] font-normal uppercase tracking-[0.64px]">{companyName}</p>
|
||||
<h1 className="mt-[12px] px-[53px] text-[64px] font-medium leading-[98%]">
|
||||
{title}
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,13 @@ const EducationImageGallerySlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
const { title, body, galleryImages } = data;
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#E6E7E8]">
|
||||
<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
|
||||
|
|
@ -64,10 +70,10 @@ const EducationImageGallerySlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
</div>
|
||||
|
||||
<div className="px-[64px] pb-[56px] ">
|
||||
<h2 className="font-serif text-[64px] font-medium leading-[98%] text-[#101C3D]">
|
||||
<h2 className="font-serif text-[64px] font-medium leading-[98%]" style={{ color: "var(--primary-color,#101C3D)" }}>
|
||||
{title}
|
||||
</h2>
|
||||
<p className="mt-[37px] text-[22px] text-[#34394C]">
|
||||
<p className="mt-[37px] text-[22px]" style={{ color: "var(--background-text,#34394C)" }}>
|
||||
{body}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ export const Schema = z.object({
|
|||
dateRange: z.string().min(8).max(22).default("Apr 10 - Apr 17").meta({
|
||||
description: "Right-panel date range label.",
|
||||
}),
|
||||
chartType: ChartTypeSchema.default("area").meta({
|
||||
chartType: ChartTypeSchema.default("bar").meta({
|
||||
description:
|
||||
"Chart type selector. Supports bar, grouped, stacked, clustered, diverging, line, area, pie/donut, and scatter.",
|
||||
}),
|
||||
|
|
@ -131,33 +131,39 @@ export type SchemaType = z.infer<typeof Schema>;
|
|||
|
||||
|
||||
const EducationReportChartSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
const slideData = Schema.parse(data);
|
||||
const slideData = data;
|
||||
|
||||
const chartHeightClass = slideData.showStatusMessage ? "h-[372px]" : "h-[486px]";
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#efeff1]">
|
||||
<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%] text-[#101C3D] ">
|
||||
<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] text-[#3E3F4A] ">
|
||||
<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] text-[#4E4F57] ">
|
||||
<p className="max-w-[610px] mt-[96px] text-[18px] leading-[1.22]" style={{ color: "var(--background-text,#4E4F57)" }}>
|
||||
{slideData.footnote}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#eceaf0] px-[42px] h-full flex flex-col justify-center ">
|
||||
<h3 className="text-center text-[24px] font-semibold leading-none text-[#33313A] ">
|
||||
<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 text-[#4D4B55] ">
|
||||
<p className="mt-1 text-center pb-6 text-[18px] leading-none" style={{ color: "var(--background-text,#4D4B55)" }}>
|
||||
{slideData.dateRange}
|
||||
</p>
|
||||
|
||||
|
|
@ -165,9 +171,9 @@ const EducationReportChartSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
<EducationChartPrimitives
|
||||
chartType={slideData.chartType as EducationChartType}
|
||||
chartData={slideData.chartData as EducationChartDatum[]}
|
||||
series={slideData.series}
|
||||
showLegend={slideData.showLegend}
|
||||
divergingLabels={slideData.divergingLabels}
|
||||
series={slideData.series || []}
|
||||
showLegend={slideData.showLegend || false}
|
||||
divergingLabels={slideData.divergingLabels || ['', '']}
|
||||
showTooltip={true}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const ServiceSchema = z.object({
|
|||
tagline: z.string().min(3).max(12).meta({
|
||||
description: "Short label under each service heading.",
|
||||
}),
|
||||
body: z.string().min(40).max(90).meta({
|
||||
body: z.string().max(40).meta({
|
||||
description: "Service description paragraph.",
|
||||
}),
|
||||
});
|
||||
|
|
@ -91,10 +91,16 @@ const EducationServicesSplitSlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#E6E7E8]">
|
||||
<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] text-[#1a1752]">
|
||||
<h2 className="font-serif text-[64px] leading-[98%] tracking-[-0.02em]" style={{ color: "var(--primary-color,#1a1752)" }}>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
|
@ -109,7 +115,10 @@ const EducationServicesSplitSlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
{sections?.map((section, index) => (
|
||||
<div key={`${section.heading}-${index}`} className=" flex items-center"
|
||||
style={{
|
||||
borderBottom: index !== (sections?.length ?? 1) - 1 ? "5px solid rgba(255, 255, 255, 0.10)" : "none",
|
||||
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] "
|
||||
|
|
@ -127,11 +136,11 @@ const EducationServicesSplitSlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
<div
|
||||
className={`px-[56px] `}
|
||||
>
|
||||
<h3 className="text-[24px] font-medium leading-none text-[#34394C]">{section.heading}</h3>
|
||||
<p className="mt-[10px] text-[14px] font-medium uppercase leading-none text-[#454962]">
|
||||
<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] text-[#34394C] tracking-[0.04em]">
|
||||
<p className="mt-[18px] text-[22px] leading-[1.26] tracking-[0.04em]" style={{ color: "var(--background-text,#34394C)" }}>
|
||||
{section.body}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -51,16 +51,22 @@ const EducationStatisticsGridSlide = ({ data }: { data: Partial<SchemaType> }) =
|
|||
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#efeff1]">
|
||||
<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="bg-[#f1efef] px-[44px] pb-[78px] pt-[96px]">
|
||||
<div className="px-[44px] pb-[78px] pt-[96px]" style={{ backgroundColor: "var(--card-color,#f1efef)" }}>
|
||||
<div className="flex h-full flex-col justify-end">
|
||||
<h2 className="font-serif text-[64px] leading-[98%] tracking-[-0.02em] text-[#1a1752]">
|
||||
<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] text-[#34394C]">
|
||||
<p className="mt-[40px] max-w-[330px] text-[22px] leading-[1.24]" style={{ color: "var(--background-text,#34394C)" }}>
|
||||
{data.description}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -71,12 +77,12 @@ const EducationStatisticsGridSlide = ({ data }: { data: Partial<SchemaType> }) =
|
|||
<div
|
||||
key={`${stat.value}-${index}`}
|
||||
className="px-[52px] pt-[22px]"
|
||||
style={{ backgroundColor: index % 2 === 1 ? '#5C0FD908' : 'white' }}
|
||||
style={{ backgroundColor: index % 2 === 1 ? 'var(--card-color,#5C0FD908)' : 'var(--card-color,white)' }}
|
||||
>
|
||||
<p className="font-serif text-[58px] leading-[56px] text-[#434A63]">
|
||||
<p className="font-serif text-[58px] leading-[56px]" style={{ color: "var(--background-text,#434A63)" }}>
|
||||
{stat?.value}
|
||||
</p>
|
||||
<p className="mt-[12px] text-[24px] text-[#434A63]">
|
||||
<p className="mt-[12px] text-[24px]" style={{ color: "var(--background-text,#434A63)" }}>
|
||||
{stat?.label}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -88,12 +94,12 @@ const EducationStatisticsGridSlide = ({ data }: { data: Partial<SchemaType> }) =
|
|||
<div
|
||||
key={`${stat.value}-${index}`}
|
||||
className="px-[52px] pt-[22px]"
|
||||
style={{ backgroundColor: index % 2 === 1 ? '#5C0FD908' : 'white' }}
|
||||
style={{ backgroundColor: index % 2 === 1 ? 'var(--card-color,#5C0FD908)' : 'var(--card-color,white)' }}
|
||||
>
|
||||
<p className="font-serif text-[58px] leading-[56px] text-[#283E51]">
|
||||
<p className="font-serif text-[58px] leading-[56px]" style={{ color: "var(--background-text,#283E51)" }}>
|
||||
{stat.value}
|
||||
</p>
|
||||
<p className="mt-[12px] text-[24px] text-[#434A63]">
|
||||
<p className="mt-[12px] text-[24px]" style={{ color: "var(--background-text,#434A63)" }}>
|
||||
{stat.label}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -112,12 +118,12 @@ const EducationStatisticsGridSlide = ({ data }: { data: Partial<SchemaType> }) =
|
|||
<div
|
||||
key={`${stat?.value}-${index}`}
|
||||
className="px-[52px] pt-[22px] h-full"
|
||||
style={{ backgroundColor: index % 2 === 0 ? '#5C0FD908' : 'white' }}
|
||||
style={{ backgroundColor: index % 2 === 0 ? 'var(--card-color,#5C0FD908)' : 'var(--card-color,white)' }}
|
||||
>
|
||||
<p className="font-serif text-[58px] leading-[56px] text-[#283E51]">
|
||||
<p className="font-serif text-[58px] leading-[56px]" style={{ color: "var(--background-text,#283E51)" }}>
|
||||
{stat?.value}
|
||||
</p>
|
||||
<p className="mt-[12px] text-[24px] text-[#434A63]">
|
||||
<p className="mt-[12px] text-[24px]" style={{ color: "var(--background-text,#434A63)" }}>
|
||||
{stat?.label}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -131,12 +137,12 @@ const EducationStatisticsGridSlide = ({ data }: { data: Partial<SchemaType> }) =
|
|||
<div
|
||||
key={`${stat.value}-${index}`}
|
||||
className="px-[52px] pt-[22px] h-full"
|
||||
style={{ backgroundColor: index % 2 === 1 ? '#5C0FD908' : 'white' }}
|
||||
style={{ backgroundColor: index % 2 === 1 ? 'var(--card-color,#5C0FD908)' : 'var(--card-color,white)' }}
|
||||
>
|
||||
<p className="font-serif text-[58px] leading-[56px] text-[#283E51]">
|
||||
<p className="font-serif text-[58px] leading-[56px]" style={{ color: "var(--background-text,#283E51)" }}>
|
||||
{stat.value}
|
||||
</p>
|
||||
<p className="mt-[12px] text-[24px] text-[#434A63]">
|
||||
<p className="mt-[12px] text-[24px]" style={{ color: "var(--background-text,#434A63)" }}>
|
||||
{stat.label}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -47,26 +47,32 @@ export type SchemaType = z.infer<typeof Schema>;
|
|||
const EducationTableOfContentsSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#efeff1]">
|
||||
<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-[430px_1fr]">
|
||||
<div className="bg-[#f1efef] px-[56px] pt-[74px]">
|
||||
<h2 className="font-serif text-[64px] leading-[98%] tracking-[-0.02em] text-[#1a1752]">
|
||||
<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.titleLine1}
|
||||
<br />
|
||||
{data.titleLine2}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="px-[88px] pt-[84px] bg-[#FFFFFF80]">
|
||||
<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 text-[#3f414a]">
|
||||
<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 text-[#3f414a]">
|
||||
<span className="text-[24px] font-medium leading-none" style={{ color: "var(--background-text,#3f414a)" }}>
|
||||
{item.label}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -49,9 +49,15 @@ const EducationTimelineSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
const isSixOrLess = milestones?.length && milestones?.length <= 6;
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#efeff1]">
|
||||
<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 px-[56px] pt-[86px]">
|
||||
<h2 className="font-serif text-[84px] leading-none tracking-[-0.02em] text-[#1a1752]">
|
||||
<h2 className="font-serif text-[84px] leading-none tracking-[-0.02em]" style={{ color: "var(--primary-color,#1a1752)" }}>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
|
@ -82,13 +88,13 @@ function TimelineUpToSix({
|
|||
<div key={`${milestone.year}-${index}`} className="">
|
||||
<div className="flex items-center ">
|
||||
|
||||
<div className="h-[22px] z-10 relative w-[22px] rounded-full bg-[#272272]" />
|
||||
{index !== milestones.length - 1 && <div className="h-[3px] bg-[#d8d8dd] flex-1" />}
|
||||
<div className="h-[22px] z-10 relative w-[22px] rounded-full" style={{ backgroundColor: "var(--primary-color,#272272)" }} />
|
||||
{index !== milestones.length - 1 && <div className="h-[3px] flex-1" style={{ backgroundColor: "var(--stroke,#d8d8dd)" }} />}
|
||||
</div>
|
||||
<p className="mt-[18px] text-[20px] font-medium leading-none text-[#3c3f4b]">
|
||||
<p className="mt-[18px] text-[20px] font-medium leading-none" style={{ color: "var(--background-text,#3c3f4b)" }}>
|
||||
{milestone.year}
|
||||
</p>
|
||||
<p className=" text-[18px] leading-[1.2] text-[#3a3d4c]">
|
||||
<p className=" text-[18px] leading-[1.2]" style={{ color: "var(--background-text,#3a3d4c)" }}>
|
||||
{milestone.description}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -114,10 +120,10 @@ function TimelineMoreThanSix({
|
|||
<mask id="path-1-inside-1_220_636" fill="white">
|
||||
<path d="M0 0H128C133.891 0 138.667 4.77563 138.667 10.6667V220C138.667 225.891 133.891 230.667 128 230.667H0V0Z" />
|
||||
</mask>
|
||||
<path d="M0 -2.66667H128C135.364 -2.66667 141.333 3.30287 141.333 10.6667H136C136 6.24839 132.418 2.66667 128 2.66667H0V-2.66667ZM141.333 220C141.333 227.364 135.364 233.333 128 233.333H0V228H128C132.418 228 136 224.418 136 220H141.333ZM136 220M0 230.667V0V230.667M128 -2.66667C135.364 -2.66667 141.333 3.30287 141.333 10.6667V220C141.333 227.364 135.364 233.333 128 233.333V228C132.418 228 136 224.418 136 220V10.6667C136 6.24839 132.418 2.66667 128 2.66667V-2.66667Z" fill="#101C3D" fillOpacity="0.1" mask="url(#path-1-inside-1_220_636)" />
|
||||
<path d="M0 -2.66667H128C135.364 -2.66667 141.333 3.30287 141.333 10.6667H136C136 6.24839 132.418 2.66667 128 2.66667H0V-2.66667ZM141.333 220C141.333 227.364 135.364 233.333 128 233.333H0V228H128C132.418 228 136 224.418 136 220H141.333ZM136 220M0 230.667V0V230.667M128 -2.66667C135.364 -2.66667 141.333 3.30287 141.333 10.6667V220C141.333 227.364 135.364 233.333 128 233.333V228C132.418 228 136 224.418 136 220V10.6667C136 6.24839 132.418 2.66667 128 2.66667V-2.66667Z" fill="var(--primary-color,#101C3D)" fillOpacity="0.1" mask="url(#path-1-inside-1_220_636)" />
|
||||
</svg>
|
||||
{/* bottom horizontal line */}
|
||||
{/* <div className="absolute z-[-1] right-[110px] top-[220px] w-[150px] h-[3px] bg-[#d8d8dd]" /> */}
|
||||
{/* <div className="absolute z-[-1] right-[110px] top-[220px] w-[150px] h-[3px]" style={{ backgroundColor: "var(--stroke,#d8d8dd)" }} /> */}
|
||||
<div className="relative z-10 px-[56px]">
|
||||
<div
|
||||
className="grid "
|
||||
|
|
@ -127,15 +133,15 @@ function TimelineMoreThanSix({
|
|||
<div key={`${milestone.year}-${index}`} className="">
|
||||
<div className="flex items-center ">
|
||||
|
||||
<div className="h-[22px] z-10 relative w-[22px] rounded-full bg-[#272272]" />
|
||||
{index !== milestones.length - 1 && <div className="h-[3px] bg-[#d8d8dd] flex-1" />}
|
||||
<div className="h-[22px] z-10 relative w-[22px] rounded-full" style={{ backgroundColor: "var(--primary-color,#272272)" }} />
|
||||
{index !== milestones.length - 1 && <div className="h-[3px] flex-1" style={{ backgroundColor: "var(--stroke,#d8d8dd)" }} />}
|
||||
</div>
|
||||
<div className="pr-2 mt-[18px]">
|
||||
|
||||
<p className=" text-[20px] font-medium leading-none text-[#3c3f4b]">
|
||||
<p className=" text-[20px] font-medium leading-none" style={{ color: "var(--background-text,#3c3f4b)" }}>
|
||||
{milestone.year}
|
||||
</p>
|
||||
<p className="mt-2 text-[18px] leading-[1.2] text-[#3a3d4c]">
|
||||
<p className="mt-2 text-[18px] leading-[1.2]" style={{ color: "var(--background-text,#3a3d4c)" }}>
|
||||
{milestone.description}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -147,7 +153,7 @@ function TimelineMoreThanSix({
|
|||
|
||||
{/* bottom row */}
|
||||
<div
|
||||
className="mt-[75px] grid items-end px-[56px] pr-[180px] "
|
||||
className="mt-[95px] grid items-end px-[56px] pr-[180px] "
|
||||
|
||||
style={{ gridTemplateColumns: `repeat(${bottomItems.length}, minmax(0, 1fr))` }}
|
||||
>
|
||||
|
|
@ -158,16 +164,16 @@ function TimelineMoreThanSix({
|
|||
return (
|
||||
<div key={`${item.year}-${colIndex + 8}`} className="flex flex-col items-end">
|
||||
<div className="flex w-full items-center ">
|
||||
{/* {colIndex === 0 && <div className="absolute h-[3px] flex-1 bg-[#d8d8dd]" />} */}
|
||||
{true && <div className={` h-[3px] flex-1 ${colIndex === 0 ? '' : 'bg-[#d8d8dd]'}`} />}
|
||||
<div className="h-[22px] z-10 relative w-[22px] rounded-full bg-[#272272]" />
|
||||
{/* {colIndex === 0 && <div className="absolute h-[3px] flex-1" style={{ backgroundColor: "var(--stroke,#d8d8dd)" }} />} */}
|
||||
<div className="h-[3px] flex-1" style={{ backgroundColor: colIndex === 0 ? "transparent" : "var(--stroke,#d8d8dd)" }} />
|
||||
<div className="h-[22px] z-10 relative w-[22px] rounded-full" style={{ backgroundColor: "var(--primary-color,#272272)" }} />
|
||||
</div>
|
||||
<div className="pl-2 mt-[18px]">
|
||||
|
||||
<p className=" text-right text-[20px] font-medium leading-none text-[#3c3f4b]">
|
||||
<p className=" text-right text-[20px] font-medium leading-none" style={{ color: "var(--background-text,#3c3f4b)" }}>
|
||||
{item.year}
|
||||
</p>
|
||||
<p className="mt-2 text-[18px] text-right leading-[1.2] text-[#3a3d4c]">
|
||||
<p className="mt-2 text-[18px] text-right leading-[1.2]" style={{ color: "var(--background-text,#3a3d4c)" }}>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const CardSchema = z.object({
|
|||
heading: z.string().min(4).max(12).meta({
|
||||
description: "Card heading for one challenge column.",
|
||||
}),
|
||||
body: z.string().min(30).max(60).meta({
|
||||
body: z.string().max(40).meta({
|
||||
description: "Card body copy for one challenge column.",
|
||||
}),
|
||||
dark: z.boolean().default(false).meta({
|
||||
|
|
@ -26,7 +26,7 @@ export const Schema = z.object({
|
|||
taglineLabel: z.string().min(3).max(10).default("TAGLINE").meta({
|
||||
description: "Short label above the left-side paragraph.",
|
||||
}),
|
||||
taglineBody: z.string().min(40).max(100).default(
|
||||
taglineBody: z.string().max(80).default(
|
||||
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea."
|
||||
).meta({
|
||||
description: "Supporting paragraph on the left side.",
|
||||
|
|
@ -43,7 +43,7 @@ export const Schema = z.object({
|
|||
}),
|
||||
cards: z
|
||||
.array(CardSchema)
|
||||
.min(3)
|
||||
|
||||
.max(3)
|
||||
.default([
|
||||
{
|
||||
|
|
@ -75,12 +75,15 @@ const BusinessChallengesCardsSlide = ({ data }: { data: Partial<SchemaType> }) =
|
|||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
|
||||
style={{ backgroundColor: "#DAE1DE" }}
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#DAE1DE)",
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
}}
|
||||
>
|
||||
<div className=" pl-[66px] pt-[60px] pb-[28px]">
|
||||
<h2
|
||||
className="text-[80px] max-w-[406px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
|
||||
style={{ color: "#15342D" }}
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
|
|
@ -88,11 +91,16 @@ const BusinessChallengesCardsSlide = ({ data }: { data: Partial<SchemaType> }) =
|
|||
<div className="mt-[72px] w-[360px]">
|
||||
<p
|
||||
className="text-[20px] font-semibold tracking-[2.074px] text-white"
|
||||
style={{ color: "#15342D" }}
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{taglineLabel}
|
||||
</p>
|
||||
<p className="mt-[16px] text-[24px] font-normal text-[#15342DCC]">{taglineBody}</p>
|
||||
<p
|
||||
className="mt-[16px] text-[24px] font-normal text-[#15342DCC]"
|
||||
style={{ color: "var(--background-text,#15342DCC)" }}
|
||||
>
|
||||
{taglineBody}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -109,17 +117,29 @@ const BusinessChallengesCardsSlide = ({ data }: { data: Partial<SchemaType> }) =
|
|||
<div
|
||||
key={index}
|
||||
className=" w-[248px] px-[34px] py-[34px]"
|
||||
style={{ backgroundColor: card.dark ? "#15342D" : "#ebebee" }}
|
||||
style={{
|
||||
backgroundColor: card.dark
|
||||
? "var(--primary-color,#15342D)"
|
||||
: "var(--card-color,#ebebee)",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text-[20px] font-semibold tracking-[2.074px] text-white"
|
||||
style={{ color: card.dark ? "#edf2f1" : "#15342D" }}
|
||||
style={{
|
||||
color: card.dark
|
||||
? "var(--primary-text,#edf2f1)"
|
||||
: "var(--primary-color,#15342D)",
|
||||
}}
|
||||
>
|
||||
{card.heading}
|
||||
</p>
|
||||
<p
|
||||
className="mt-[18px] text-[28px] font-normal text-white"
|
||||
style={{ color: card.dark ? "#edf2f1" : "#15342D" }}
|
||||
style={{
|
||||
color: card.dark
|
||||
? "var(--primary-text,#edf2f1)"
|
||||
: "var(--primary-color,#15342D)",
|
||||
}}
|
||||
>
|
||||
{card.body}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const ChallengeSchema = z.object({
|
|||
heading: z.string().min(4).max(12).meta({
|
||||
description: "Short heading for a single challenge block.",
|
||||
}),
|
||||
body: z.string().min(40).max(96).meta({
|
||||
body: z.string().max(40).meta({
|
||||
description: "Description text for a single challenge block.",
|
||||
}),
|
||||
});
|
||||
|
|
@ -53,27 +53,38 @@ const BusinessChallengesGridSlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
|
||||
style={{ backgroundColor: "#DAE1DE" }}
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#DAE1DE)",
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
}}
|
||||
>
|
||||
<div className=" px-[60px] pt-[60px] pb-[28px]">
|
||||
<h2
|
||||
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
|
||||
style={{ color: "#15342D" }}
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="grid h-[540px] grid-cols-2 justify-between items-center gap-y-[63px] px-[84px] py-[70px] gap-x-[63px]"
|
||||
style={{ backgroundColor: "#15342D" }}
|
||||
className="grid grid-cols-2 justify-between items-center gap-y-[63px] px-[84px] py-[70px] gap-x-[63px]"
|
||||
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{challenges?.map((challenge, index) => (
|
||||
<div key={index} className="">
|
||||
<p className="text-[20px] font-semibold tracking-[2.074px] text-white">
|
||||
<p
|
||||
className="text-[20px] font-semibold tracking-[2.074px] text-white"
|
||||
style={{ color: "var(--primary-text,#edf2f1)" }}
|
||||
>
|
||||
{challenge.heading}
|
||||
</p>
|
||||
<p className="mt-[24px] text-[28px] font-normal text-white">{challenge.body}</p>
|
||||
<p
|
||||
className="mt-[24px] text-[28px] font-normal text-white"
|
||||
style={{ color: "var(--primary-text,#edf2f1)" }}
|
||||
>
|
||||
{challenge.body}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@ const RowSchema = z.object({
|
|||
});
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(8).max(32).default("Comparison Chart").meta({
|
||||
title: z.string().min(8).max(20).default("Comparison Chart").meta({
|
||||
description: "Main heading shown above the table.",
|
||||
}),
|
||||
subtitle: z.string().min(30).max(140).default(
|
||||
subtitle: z.string().max(80).default(
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt."
|
||||
).meta({
|
||||
description: "Short subtitle shown under the main heading.",
|
||||
|
|
@ -37,7 +37,7 @@ export const Schema = z.object({
|
|||
}),
|
||||
rows: z
|
||||
.array(RowSchema)
|
||||
.min(3)
|
||||
|
||||
.max(3)
|
||||
.default([
|
||||
{
|
||||
|
|
@ -119,26 +119,47 @@ const ComparisonChartSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
|
||||
style={{ backgroundColor: "#DAE1DE" }}
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#DAE1DE)",
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
}}
|
||||
>
|
||||
<div className="px-[56px] pt-[74px]">
|
||||
<h2
|
||||
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
|
||||
style={{ color: "#15342D" }}
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
<p className="mt-[20px] w-[740px] text-[24px] font-normal text-[#15342DCC]">{subtitle}</p>
|
||||
<p
|
||||
className="mt-[20px] w-[740px] text-[24px] font-normal text-[#15342DCC]"
|
||||
style={{ color: "var(--background-text,#15342DCC)" }}
|
||||
>
|
||||
{subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="absolute left-[54px] top-[268px] w-[1058px] ">
|
||||
<div className="grid grid-cols-[220px_repeat(4,1fr)] border-b border-[#c5cccb]">
|
||||
<div
|
||||
className="grid grid-cols-[220px_repeat(4,1fr)] border-b"
|
||||
style={{ borderColor: "var(--stroke,#c5cccb)" }}
|
||||
>
|
||||
<div className="h-[94px] " />
|
||||
{columns?.map((column, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex h-[94px] items-center justify-center border-r border-[#c5cccb] text-[20px] font-semibold uppercase tracking-[0.2em]"
|
||||
style={{ backgroundColor: index === 3 ? "#15342D" : "#ffffff", color: index === 3 ? "#edf2f1" : "#15342D" }}
|
||||
className="flex h-[94px] items-center justify-center border-r text-[20px] font-semibold uppercase tracking-[0.2em]"
|
||||
style={{
|
||||
backgroundColor:
|
||||
index === 3
|
||||
? "var(--primary-color,#15342D)"
|
||||
: "var(--card-color,#ffffff)",
|
||||
color:
|
||||
index === 3
|
||||
? "var(--primary-text,#edf2f1)"
|
||||
: "var(--primary-color,#15342D)",
|
||||
borderColor: "var(--stroke,#c5cccb)",
|
||||
}}
|
||||
>
|
||||
{column}
|
||||
</div>
|
||||
|
|
@ -156,16 +177,28 @@ const ComparisonChartSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`grid grid-cols-[220px_repeat(4,1fr)] ${index < rows.length - 1 ? "border-b border-[#c5cccb]" : ""}`}
|
||||
className={`grid grid-cols-[220px_repeat(4,1fr)] ${index < rows.length - 1 ? "border-b" : ""}`}
|
||||
style={{ borderColor: "var(--stroke,#c5cccb)" }}
|
||||
>
|
||||
<div className="flex h-[94px] bg-[#ffffff] items-center border-r border-[#c5cccb] pl-[34px] text-[20px] font-semibold uppercase tracking-[0.2em]" style={{ color: "#15342D" }}>
|
||||
<div
|
||||
className="flex h-[94px] items-center border-r pl-[34px] text-[20px] font-semibold uppercase tracking-[0.2em]"
|
||||
style={{
|
||||
backgroundColor: "var(--card-color,#ffffff)",
|
||||
borderColor: "var(--stroke,#c5cccb)",
|
||||
color: "var(--primary-color,#15342D)",
|
||||
}}
|
||||
>
|
||||
{row.label}
|
||||
</div>
|
||||
|
||||
{cells?.map((status, cellIndex) => (
|
||||
<div
|
||||
key={cellIndex}
|
||||
className={`flex h-[94px] items-center justify-center border-r bg-[#ffffff] border-[#c5cccb]`}
|
||||
className="flex h-[94px] items-center justify-center border-r"
|
||||
style={{
|
||||
backgroundColor: "var(--card-color,#ffffff)",
|
||||
borderColor: "var(--stroke,#c5cccb)",
|
||||
}}
|
||||
>
|
||||
<StatusIcon
|
||||
status={status}
|
||||
|
|
|
|||
|
|
@ -6,28 +6,27 @@ export const slideLayoutDescription =
|
|||
"A comparison table slide with a title, a subtitle, four headers, and three text rows.";
|
||||
|
||||
const RowSchema = z.object({
|
||||
cell1: z.string().min(8).max(24).meta({
|
||||
cell1: z.string().max(12).meta({
|
||||
description: "First column cell text.",
|
||||
}),
|
||||
cell2: z.string().min(8).max(24).meta({
|
||||
cell2: z.string().max(12).meta({
|
||||
description: "Second column cell text.",
|
||||
}),
|
||||
cell3: z.string().min(8).max(24).meta({
|
||||
cell3: z.string().max(12).meta({
|
||||
description: "Third column cell text.",
|
||||
}),
|
||||
cell4: z.string().min(8).max(24).meta({
|
||||
cell4: z.string().max(12).meta({
|
||||
description: "Fourth column cell text.",
|
||||
}),
|
||||
});
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(8).max(32).default("Comparison Chart").meta({
|
||||
title: z.string().min(8).max(20).default("Comparison Chart").meta({
|
||||
description: "Main heading shown above the table.",
|
||||
}),
|
||||
subtitle: z
|
||||
.string()
|
||||
.min(30)
|
||||
.max(100)
|
||||
.max(80)
|
||||
.default(
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt."
|
||||
)
|
||||
|
|
@ -35,8 +34,7 @@ export const Schema = z.object({
|
|||
description: "Short subtitle shown under the main heading.",
|
||||
}),
|
||||
columns: z
|
||||
.array(z.string().min(4).max(18))
|
||||
.min(4)
|
||||
.array(z.string().max(10))
|
||||
.max(4)
|
||||
.default(["HEADING 1", "HEADING 1", "HEADING 2", "HEADING 3"])
|
||||
.meta({
|
||||
|
|
@ -80,29 +78,52 @@ const ComparisonTableWithTextSlide = ({ data }: { data: Partial<SchemaType> }) =
|
|||
const { title, subtitle, columns, highlightedHeaderIndex, rows } = data;
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#c3cccc]">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#c3cccc)",
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
}}
|
||||
>
|
||||
<div className="px-[44px] pt-[46px]">
|
||||
<h2 className="text-[80px] font-semibold leading-[1.02] tracking-[-0.03em] text-[#0a443b]">
|
||||
<h2
|
||||
className="text-[80px] font-semibold leading-[1.02] tracking-[-0.03em] text-[#0a443b]"
|
||||
style={{ color: "var(--primary-color,#0a443b)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
<p className="mt-[22px] max-w-[700px] text-[24px] leading-[1.22] text-[#2d5d56]">
|
||||
<p
|
||||
className="mt-[22px] max-w-[700px] text-[24px] leading-[1.22] text-[#2d5d56]"
|
||||
style={{ color: "var(--background-text,#2d5d56)" }}
|
||||
>
|
||||
{subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mx-[44px] mt-[30px] overflow-hidden border border-[#bcc3c3]">
|
||||
<table className="w-full table-fixed border-collapse bg-[#ffffff]">
|
||||
<thead>
|
||||
<tr>
|
||||
<div
|
||||
className="mx-[44px] mt-[30px] overflow-hidden border"
|
||||
style={{ borderColor: "var(--stroke,#bcc3c3)" }}
|
||||
>
|
||||
<table
|
||||
className="w-full table-fixed border-collapse"
|
||||
style={{ backgroundColor: "var(--card-color,#ffffff)" }}
|
||||
>
|
||||
<thead className="w-full">
|
||||
<tr className="w-full">
|
||||
{columns?.map((column, index) => {
|
||||
const isHighlighted = index + 1 === highlightedHeaderIndex;
|
||||
return (
|
||||
<th
|
||||
key={`${column}-${index}`}
|
||||
className=" border-r border-[#bcc3c3] p-[33px] text-left text-[20px] font-semibold uppercase tracking-[0.16em] last:border-r-0"
|
||||
className=" border-r p-[33px] text-left text-[20px] font-semibold uppercase tracking-[0.16em] last:border-r-0"
|
||||
style={{
|
||||
backgroundColor: isHighlighted ? "#05443a" : "#ffffff",
|
||||
color: isHighlighted ? "#eef2f0" : "#123f38",
|
||||
borderColor: "var(--stroke,#bcc3c3)",
|
||||
backgroundColor: isHighlighted
|
||||
? "var(--primary-color,#05443a)"
|
||||
: "var(--card-color,#ffffff)",
|
||||
color: isHighlighted
|
||||
? "var(--primary-text,#eef2f0)"
|
||||
: "var(--primary-color,#123f38)",
|
||||
}}
|
||||
>
|
||||
{column}
|
||||
|
|
@ -115,12 +136,23 @@ const ComparisonTableWithTextSlide = ({ data }: { data: Partial<SchemaType> }) =
|
|||
<tbody>
|
||||
{rows?.map((row, rowIndex) => {
|
||||
const cells = [row.cell1, row.cell2, row.cell3, row.cell4];
|
||||
const isHighlighted = rowIndex + 1 === highlightedHeaderIndex;
|
||||
|
||||
return (
|
||||
<tr key={`row-${rowIndex}`}>
|
||||
{cells?.map((cell, cellIndex) => (
|
||||
<td
|
||||
key={`cell-${rowIndex}-${cellIndex}`}
|
||||
className=" border-r border-t bg-white border-[#bcc3c3] p-[33px] text-left text-[18px] leading-[1.2] text-[#183f38] last:border-r-0"
|
||||
className=" border-r border-t bg-white p-[33px] text-left text-[18px] leading-[1.2] last:border-r-0"
|
||||
style={{
|
||||
borderColor: "var(--stroke,#bcc3c3)",
|
||||
backgroundColor: isHighlighted
|
||||
? "var(--primary-color,#05443a)"
|
||||
: "var(--card-color,#ffffff)",
|
||||
color: isHighlighted
|
||||
? "var(--primary-text,#eef2f0)"
|
||||
: "var(--primary-color,#123f38)",
|
||||
}}
|
||||
>
|
||||
{cell}
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -44,9 +44,15 @@ const CoverSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
|
||||
style={{ backgroundColor: "#DAE1DE" }}
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#DAE1DE)",
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
}}
|
||||
>
|
||||
<div className="relative z-20 flex h-full flex-col px-[36px] pt-[62px] text-[#15342D]">
|
||||
<div
|
||||
className="relative z-20 flex h-full flex-col px-[36px] pt-[62px] text-[#15342D]"
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
|
||||
<img
|
||||
|
|
@ -55,7 +61,10 @@ const CoverSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
className="h-[42px] w-[171px] object-cover"
|
||||
/>
|
||||
|
||||
<p className="text-[18px] font-normal leading-[18.991px] text-[#15342D]">
|
||||
<p
|
||||
className="text-[18px] font-normal leading-[18.991px] text-[#15342D]"
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{label}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -84,7 +93,7 @@ const CoverSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
style={{
|
||||
height: "365px",
|
||||
background:
|
||||
"linear-gradient(0deg, rgba(218, 225, 222, 0.00) 0%, #DAE1DE 80.33%)",
|
||||
"linear-gradient(0deg, rgba(218, 225, 222, 0.00) 0%, var(--background-color,#DAE1DE) 80.33%)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ export const slideLayoutDescription =
|
|||
"A gallery slide with a title and paragraph on the left and a five-image collage on the right and bottom.";
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(5).max(16).default("Image Gallery").meta({
|
||||
title: z.string().max(12).default("Image Gallery").meta({
|
||||
description: "Main gallery heading.",
|
||||
}),
|
||||
description: z.string().min(50).max(130).default(
|
||||
description: z.string().max(80).default(
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore."
|
||||
).meta({
|
||||
description: "Supporting paragraph shown under the title.",
|
||||
|
|
@ -18,7 +18,7 @@ export const Schema = z.object({
|
|||
topCenterImage: z.object({
|
||||
__image_url__:
|
||||
z.string().default("https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=800&q=80"),
|
||||
__image_prompt__: z.string().min(10).max(100).default("Design team discussing project board"),
|
||||
__image_prompt__: z.string().max(80).default("Design team discussing project board"),
|
||||
}).default({
|
||||
__image_url__: "https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=800&q=80",
|
||||
__image_prompt__: "Design team discussing project board",
|
||||
|
|
@ -28,7 +28,7 @@ export const Schema = z.object({
|
|||
topRightImage: z.object({
|
||||
__image_url__:
|
||||
z.string().default("https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=800&q=80"),
|
||||
__image_prompt__: z.string().min(10).max(100).default("Creative desk with notebook and photos"),
|
||||
__image_prompt__: z.string().max(80).default("Creative desk with notebook and photos"),
|
||||
}).default({
|
||||
__image_url__:
|
||||
"https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=800&q=80",
|
||||
|
|
@ -39,7 +39,7 @@ export const Schema = z.object({
|
|||
bottomWideImage: z.object({
|
||||
__image_url__:
|
||||
z.string().default("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?auto=format&fit=crop&w=1300&q=80"),
|
||||
__image_prompt__: z.string().min(10).max(100).default("City skyline seen from office window"),
|
||||
__image_prompt__: z.string().max(80).default("City skyline seen from office window"),
|
||||
}).default({
|
||||
__image_url__:
|
||||
"https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?auto=format&fit=crop&w=1300&q=80",
|
||||
|
|
@ -50,7 +50,7 @@ export const Schema = z.object({
|
|||
bottomCenterImage: z.object({
|
||||
__image_url__:
|
||||
z.string().default("https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=900&q=80"),
|
||||
__image_prompt__: z.string().min(10).max(100).default("Art gallery wall with framed photos"),
|
||||
__image_prompt__: z.string().max(80).default("Art gallery wall with framed photos"),
|
||||
}).default({
|
||||
__image_url__:
|
||||
"https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=900&q=80",
|
||||
|
|
@ -61,7 +61,7 @@ export const Schema = z.object({
|
|||
bottomRightImage: z.object({
|
||||
__image_url__:
|
||||
z.string().default("https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=900&q=80"),
|
||||
__image_prompt__: z.string().min(10).max(100).default("Office workshop with presentation board"),
|
||||
__image_prompt__: z.string().max(80).default("Office workshop with presentation board"),
|
||||
}).default({
|
||||
__image_url__:
|
||||
"https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=900&q=80",
|
||||
|
|
@ -87,18 +87,26 @@ const ImageGallerySlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] p-[56px]"
|
||||
style={{ backgroundColor: "#DAE1DE" }}
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#DAE1DE)",
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-1 ">
|
||||
|
||||
<div className=" ">
|
||||
<h2
|
||||
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
|
||||
style={{ color: "#15342D" }}
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
<p className="mt-[24px] w-[620px] text-[24px] font-normal text-[#15342DCC]">{description}</p>
|
||||
<p
|
||||
className="mt-[24px] w-[620px] text-[24px] font-normal text-[#15342DCC]"
|
||||
style={{ color: "var(--background-text,#15342DCC)" }}
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-[22px]">
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -57,10 +57,16 @@ const IntroductionSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
|
||||
style={{ backgroundColor: "#DAE1DE" }}
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#DAE1DE)",
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
}}
|
||||
>
|
||||
<div className="grid h-full gap-[54px] items-center grid-cols-2">
|
||||
<div className="h-full w-full overflow-hidden bg-[#15342D]">
|
||||
<div
|
||||
className="h-full w-full overflow-hidden bg-[#15342D]"
|
||||
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
|
||||
{portraitImage?.__image_url__ && (
|
||||
<img
|
||||
|
|
@ -74,6 +80,7 @@ const IntroductionSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
<div className="">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
|
|
@ -83,10 +90,14 @@ const IntroductionSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
<div key={`${block.label}-${index}`}>
|
||||
<p
|
||||
className="text-[20px] font-semibold tracking-[2.074px] text-[#15342D]"
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{block.label}
|
||||
</p>
|
||||
<p className="mt-[14px] text-[24px] leading-[26.667px] text-[#15342DCC]">
|
||||
<p
|
||||
className="mt-[14px] text-[24px] leading-[26.667px] text-[#15342DCC]"
|
||||
style={{ color: "var(--background-text,#15342DCC)" }}
|
||||
>
|
||||
{block.body}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ export const slideLayoutDescription =
|
|||
"A KPI overview slide with a dark-tinted background image, large title, and a two-row grid of six white KPI cards.";
|
||||
|
||||
const KpiSchema = z.object({
|
||||
value: z.string().min(1).max(8).meta({
|
||||
value: z.string().max(5).meta({
|
||||
description: "Primary KPI value shown in a card.",
|
||||
}),
|
||||
body: z.string().min(10).max(28).meta({
|
||||
body: z.string().max(20).meta({
|
||||
description: "Short KPI supporting text.",
|
||||
}),
|
||||
});
|
||||
|
|
@ -64,7 +64,10 @@ const KpiCardsSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
|
||||
style={{ backgroundColor: "#DAE1DE" }}
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#DAE1DE)",
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
}}
|
||||
>
|
||||
{backgroundImage?.__image_url__ && (
|
||||
<img
|
||||
|
|
@ -74,11 +77,18 @@ const KpiCardsSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
/>
|
||||
)}
|
||||
|
||||
<div className="absolute inset-0 bg-[#15342D]/80" />
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
backgroundColor: "var(--primary-color,#15342D)",
|
||||
opacity: 0.8,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 px-[66px] pt-[72px] mb-[33px]">
|
||||
<h2 className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#FEFEFF]"
|
||||
|
||||
<h2
|
||||
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#FEFEFF]"
|
||||
style={{ color: "var(--primary-text,#FEFEFF)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
|
|
@ -86,8 +96,15 @@ const KpiCardsSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
|
||||
<div className="relative z-10 grid grid-cols-3 gap-x-[30px] gap-y-[19px] px-[66px]">
|
||||
{items?.map((item, index) => (
|
||||
<div key={index} className=" bg-[#FEFEFF] p-[33px]">
|
||||
<div className="flex h-[55px] w-[55px] items-center justify-center rounded-full bg-[#15342D]">
|
||||
<div
|
||||
key={index}
|
||||
className=" bg-[#FEFEFF] p-[33px]"
|
||||
style={{ backgroundColor: "var(--card-color,#FEFEFF)" }}
|
||||
>
|
||||
<div
|
||||
className="flex h-[55px] w-[55px] items-center justify-center rounded-full bg-[#15342D]"
|
||||
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
<img
|
||||
src={kpiIcon?.__icon_url__}
|
||||
alt={kpiIcon?.__icon_query__}
|
||||
|
|
@ -97,11 +114,14 @@ const KpiCardsSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
</div>
|
||||
<p
|
||||
className="mt-[18px] text-[42px] font-semibold leading-none"
|
||||
style={{ color: "#15342D" }}
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{item.value}
|
||||
</p>
|
||||
<p className="mt-[18px] text-[28px] font-normal text-[#15342DCC]" style={{ color: "#15342D" }}>
|
||||
<p
|
||||
className="mt-[18px] text-[28px] font-normal text-[#15342DCC]"
|
||||
style={{ color: "var(--background-text,#15342D)" }}
|
||||
>
|
||||
{item.body}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -45,12 +45,11 @@ export const Schema = z.object({
|
|||
|
||||
export type SchemaType = z.infer<typeof Schema>;
|
||||
|
||||
|
||||
const COLORS = [
|
||||
"#5f7f79",
|
||||
"#1f5a4f",
|
||||
"#0d4f43",
|
||||
"#06463d",
|
||||
"var(--graph-0,#5f7f79)",
|
||||
"var(--graph-1,#1f5a4f)",
|
||||
"var(--graph-2,#0d4f43)",
|
||||
"var(--graph-3,#06463d)",
|
||||
];
|
||||
|
||||
const MarketOpportunitySlide = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
|
|
@ -59,25 +58,47 @@ const MarketOpportunitySlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
|
||||
style={{ backgroundColor: "#DAE1DE" }}
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#DAE1DE)",
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
}}
|
||||
>
|
||||
<div className="px-[56px] pt-[72px]">
|
||||
<h2
|
||||
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
|
||||
style={{ color: "#15342D" }}
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
<p className="mt-[20px] w-[730px] text-[24px] font-normal text-[#15342DCC]">{subtitle}</p>
|
||||
<p
|
||||
className="mt-[20px] w-[730px] text-[24px] font-normal text-[#15342DCC]"
|
||||
style={{ color: "var(--background-text,#15342DCC)" }}
|
||||
>
|
||||
{subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="absolute left-[56px] top-[368px] space-y-[42px]">
|
||||
{bullets?.map((bullet, index) => (
|
||||
<div key={index} className="relative flex items-center">
|
||||
<span className="mr-[14px] h-[14px] w-[14px] rounded-full bg-[#0a4a3f]" />
|
||||
<p className="w-[640px] text-[24px] font-normal text-[#15342DCC]">{bullet.text}</p>
|
||||
<span className="ml-[8px] h-[2px] w-[80px] bg-[#8ea8a5]" />
|
||||
<span className="h-[6px] w-[6px] rounded-full bg-[#edf2f1]" />
|
||||
<span
|
||||
className="mr-[14px] h-[14px] w-[14px] rounded-full bg-[#0a4a3f]"
|
||||
style={{ backgroundColor: "var(--graph-0,#0a4a3f)" }}
|
||||
/>
|
||||
<p
|
||||
className="w-[640px] text-[24px] font-normal text-[#15342DCC]"
|
||||
style={{ color: "var(--background-text,#15342DCC)" }}
|
||||
>
|
||||
{bullet.text}
|
||||
</p>
|
||||
<span
|
||||
className="ml-[8px] h-[2px] w-[80px] bg-[#8ea8a5]"
|
||||
style={{ backgroundColor: "var(--stroke,#8ea8a5)" }}
|
||||
/>
|
||||
<span
|
||||
className="h-[6px] w-[6px] rounded-full bg-[#edf2f1]"
|
||||
style={{ backgroundColor: "var(--primary-text,#edf2f1)" }}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -88,14 +109,17 @@ const MarketOpportunitySlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
key={index}
|
||||
className="absolute rounded-full"
|
||||
style={{
|
||||
width: 237 + (index * 50),
|
||||
height: 237 + (index * 50),
|
||||
width: 237 + index * 50,
|
||||
height: 237 + index * 50,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
backgroundColor: COLORS[index],
|
||||
}}
|
||||
>
|
||||
<p className="pt-[24px] text-center text-[24px] font-normal text-white" >
|
||||
<p
|
||||
className="pt-[24px] text-center text-[24px] font-normal text-white"
|
||||
style={{ color: "var(--primary-text,#ffffff)" }}
|
||||
>
|
||||
{value}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -34,14 +34,14 @@ export const Schema = z.object({
|
|||
taglineLabel: z.string().min(3).max(10).default("TAGLINE").meta({
|
||||
description: "Small heading above team description.",
|
||||
}),
|
||||
taglineBody: z.string().min(50).max(100).default(
|
||||
taglineBody: z.string().max(70).default(
|
||||
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea."
|
||||
).meta({
|
||||
description: "Short descriptive paragraph at top-right.",
|
||||
}),
|
||||
members: z
|
||||
.array(MemberSchema)
|
||||
.min(4)
|
||||
|
||||
.max(4)
|
||||
.default([
|
||||
{
|
||||
|
|
@ -94,12 +94,15 @@ const MeetTeamSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
|
||||
style={{ backgroundColor: "#DAE1DE" }}
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#DAE1DE)",
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between px-[64px] pt-[76px]">
|
||||
<h2
|
||||
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
|
||||
style={{ color: "#15342D" }}
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
|
|
@ -107,11 +110,16 @@ const MeetTeamSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
<div className="w-[520px]">
|
||||
<p
|
||||
className="text-[20px] font-semibold tracking-[2.074px] text-white"
|
||||
style={{ color: "#15342D" }}
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{taglineLabel}
|
||||
</p>
|
||||
<p className="mt-[14px] text-[24px] font-normal text-[#15342DCC]">{taglineBody}</p>
|
||||
<p
|
||||
className="mt-[14px] text-[24px] font-normal text-[#15342DCC]"
|
||||
style={{ color: "var(--background-text,#15342DCC)" }}
|
||||
>
|
||||
{taglineBody}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -125,17 +133,29 @@ const MeetTeamSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
/>
|
||||
<div
|
||||
className="h-[154px] p-[33px]"
|
||||
style={{ backgroundColor: member.highlighted ? "#15342D" : "#FEFEFF" }}
|
||||
style={{
|
||||
backgroundColor: member.highlighted
|
||||
? "var(--primary-color,#15342D)"
|
||||
: "var(--card-color,#FEFEFF)",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text-[20px] font-semibold tracking-[2.074px] text-white"
|
||||
style={{ color: member.highlighted ? "#edf2f1" : "#15342D" }}
|
||||
style={{
|
||||
color: member.highlighted
|
||||
? "var(--primary-text,#edf2f1)"
|
||||
: "var(--primary-color,#15342D)",
|
||||
}}
|
||||
>
|
||||
{member.title}
|
||||
</p>
|
||||
<p
|
||||
className="mt-[20px] text-[28px] font-normal text-white"
|
||||
style={{ color: member.highlighted ? "#edf2f1" : "#15342D" }}
|
||||
style={{
|
||||
color: member.highlighted
|
||||
? "var(--primary-text,#edf2f1)"
|
||||
: "var(--primary-color,#15342D)",
|
||||
}}
|
||||
>
|
||||
{member.name}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -46,31 +46,60 @@ const MissionVisionSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
|
||||
style={{ backgroundColor: "#DAE1DE" }}
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#DAE1DE)",
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
}}
|
||||
>
|
||||
<div className="grid h-full grid-cols-2 grid-rows-2">
|
||||
<div className="px-[74px] pt-[76px]">
|
||||
<h2
|
||||
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="pl-[60px] pt-[76px]" style={{ backgroundColor: "#15342D" }}>
|
||||
<p className="text-[20px] font-semibold tracking-[2.074px] text-white">
|
||||
<div
|
||||
className="pl-[60px] pt-[76px]"
|
||||
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
<p
|
||||
className="text-[20px] font-semibold tracking-[2.074px] text-white"
|
||||
style={{ color: "var(--primary-text,#edf2f1)" }}
|
||||
>
|
||||
{missionLabel}
|
||||
</p>
|
||||
<p className="mt-[26px] text-[28px] font-normal text-white">{missionBody}</p>
|
||||
<p
|
||||
className="mt-[26px] text-[28px] font-normal text-white"
|
||||
style={{ color: "var(--primary-text,#edf2f1)" }}
|
||||
>
|
||||
{missionBody}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="pl-[53px] py-[53px]" style={{ backgroundColor: "#15342D" }}>
|
||||
<p className="text-[20px] font-semibold tracking-[2.074px] text-white">
|
||||
<div
|
||||
className="pl-[53px] py-[53px]"
|
||||
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
<p
|
||||
className="text-[20px] font-semibold tracking-[2.074px] text-white"
|
||||
style={{ color: "var(--primary-text,#edf2f1)" }}
|
||||
>
|
||||
{visionLabel}
|
||||
</p>
|
||||
<p className="mt-[24px] text-[28px] font-normal text-white">{visionBody}</p>
|
||||
<p
|
||||
className="mt-[24px] text-[28px] font-normal text-white"
|
||||
style={{ color: "var(--primary-text,#edf2f1)" }}
|
||||
>
|
||||
{visionBody}
|
||||
</p>
|
||||
</div>
|
||||
<div className="h-full w-full overflow-hidden bg-white">
|
||||
<div
|
||||
className="h-full w-full overflow-hidden bg-white"
|
||||
style={{ backgroundColor: "var(--card-color,#ffffff)" }}
|
||||
>
|
||||
|
||||
{image?.__image_url__ && (
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const ServiceSchema = z.object({
|
|||
heading: z.string().min(4).max(12).meta({
|
||||
description: "Service card heading.",
|
||||
}),
|
||||
body: z.string().min(20).max(44).meta({
|
||||
body: z.string().max(30).meta({
|
||||
description: "Service card short description.",
|
||||
}),
|
||||
dark: z.boolean().default(false).meta({
|
||||
|
|
@ -19,13 +19,13 @@ const ServiceSchema = z.object({
|
|||
});
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(6).max(18).default("Our Services").meta({
|
||||
title: z.string().min(6).max(12).default("Our Services").meta({
|
||||
description: "Main heading shown at the top-left.",
|
||||
}),
|
||||
taglineLabel: z.string().min(3).max(10).default("TAGLINE").meta({
|
||||
description: "Small label above left paragraph.",
|
||||
}),
|
||||
taglineBody: z.string().min(40).max(100).default(
|
||||
taglineBody: z.string().max(30).default(
|
||||
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea."
|
||||
).meta({
|
||||
description: "Supporting text shown beneath the tagline label.",
|
||||
|
|
@ -42,7 +42,7 @@ export const Schema = z.object({
|
|||
}),
|
||||
services: z
|
||||
.array(ServiceSchema)
|
||||
.min(4)
|
||||
|
||||
.max(4)
|
||||
.default([
|
||||
{ heading: "HEADING 1", body: "Lorem ipsum dolor sit amet, consectetur", dark: false },
|
||||
|
|
@ -63,14 +63,17 @@ const OurServicesSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] flex items-end pb-[56px] justify-between overflow-hidden rounded-[24px]"
|
||||
style={{ backgroundColor: "#DAE1DE" }}
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#DAE1DE)",
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
}}
|
||||
>
|
||||
<div className=" pt-[74px]">
|
||||
<div className="px-[68px]">
|
||||
|
||||
<h2
|
||||
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
|
||||
style={{ color: "#15342D" }}
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
|
|
@ -78,14 +81,22 @@ const OurServicesSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
<div className="mt-[26px] w-[560px]">
|
||||
<p
|
||||
className="text-[20px] font-semibold tracking-[2.074px] text-white"
|
||||
style={{ color: "#15342D" }}
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{taglineLabel}
|
||||
</p>
|
||||
<p className="mt-[14px] text-[24px] font-normal text-[#15342DCC]">{taglineBody}</p>
|
||||
<p
|
||||
className="mt-[14px] text-[24px] font-normal text-[#15342DCC]"
|
||||
style={{ color: "var(--background-text,#15342DCC)" }}
|
||||
>
|
||||
{taglineBody}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-[35px] h-[326px] w-[650px] bg-[#15342D]">
|
||||
<div
|
||||
className="mt-[35px] h-[326px] w-[650px] bg-[#15342D]"
|
||||
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
|
||||
{featureImage?.__image_url__ && (
|
||||
<img
|
||||
|
|
@ -104,16 +115,29 @@ const OurServicesSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
<div
|
||||
key={index}
|
||||
className=" p-[33px]"
|
||||
style={{ backgroundColor: service.dark ? "#15342D" : "#ececee" }}
|
||||
style={{
|
||||
backgroundColor: service.dark
|
||||
? "var(--primary-color,#15342D)"
|
||||
: "var(--card-color,#ececee)",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text-[20px] font-semibold tracking-[2.074px] text-white"
|
||||
style={{ color: service.dark ? "#edf2f1" : "#15342D" }}
|
||||
style={{
|
||||
color: service.dark
|
||||
? "var(--primary-text,#edf2f1)"
|
||||
: "var(--primary-color,#15342D)",
|
||||
}}
|
||||
>
|
||||
{service.heading}
|
||||
</p>
|
||||
<p
|
||||
className={`${service.dark ? "text-white" : "text-[#15342DCC]"} mt-[20px] text-[28px] font-normal`}
|
||||
style={{
|
||||
color: service.dark
|
||||
? "var(--primary-text,#edf2f1)"
|
||||
: "var(--background-text,#15342DCC)",
|
||||
}}
|
||||
>
|
||||
{service.body}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -10,12 +10,12 @@ const PlanSchema = z.object({
|
|||
price: z.string().min(4).max(12).meta({
|
||||
description: "Plan price label shown at the top of each card.",
|
||||
}),
|
||||
description: z.string().min(18).max(26).meta({
|
||||
description: z.string().max(20).meta({
|
||||
description: "Short statement describing the plan.",
|
||||
}),
|
||||
features: z
|
||||
.array(z.string().min(10).max(24))
|
||||
.min(4)
|
||||
.array(z.string().max(18))
|
||||
|
||||
.max(4)
|
||||
.meta({
|
||||
description: "Four bullet features shown in the pricing card.",
|
||||
|
|
@ -41,7 +41,6 @@ export const Schema = z.object({
|
|||
}),
|
||||
plans: z
|
||||
.array(PlanSchema)
|
||||
.min(3)
|
||||
.max(3)
|
||||
.default([
|
||||
{
|
||||
|
|
@ -91,12 +90,15 @@ const PricingPlanSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
|
||||
style={{ backgroundColor: "#DAE1DE" }}
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#DAE1DE)",
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
}}
|
||||
>
|
||||
<div className="px-[68px] pt-[76px]">
|
||||
<h2
|
||||
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
|
||||
style={{ color: "#15342D" }}
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
|
|
@ -109,17 +111,29 @@ const PricingPlanSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
<div
|
||||
key={index}
|
||||
className={` px-[20px] ${active ? "-mt-[30px] py-[60px]" : "py-[33px]"}`}
|
||||
style={{ backgroundColor: active ? "#15342D" : "#ececee" }}
|
||||
style={{
|
||||
backgroundColor: active
|
||||
? "var(--primary-color,#15342D)"
|
||||
: "var(--card-color,#ececee)",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text-[20px] font-semibold tracking-[2.074px] text-white"
|
||||
style={{ color: active ? "#edf2f1" : "#15342D" }}
|
||||
style={{
|
||||
color: active
|
||||
? "var(--primary-text,#edf2f1)"
|
||||
: "var(--primary-color,#15342D)",
|
||||
}}
|
||||
>
|
||||
{plan.price}
|
||||
</p>
|
||||
<p
|
||||
className="mt-[18px] text-[28px] font-normal text-[#15342DCC]"
|
||||
style={{ color: active ? "#edf2f1" : "#15342D" }}
|
||||
style={{
|
||||
color: active
|
||||
? "var(--primary-text,#edf2f1)"
|
||||
: "var(--background-text,#15342DCC)",
|
||||
}}
|
||||
>
|
||||
{plan.description}
|
||||
</p>
|
||||
|
|
@ -135,7 +149,11 @@ const PricingPlanSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
/>
|
||||
<p
|
||||
className="text-[28px] font-normal text-[#15342DCC]"
|
||||
style={{ color: active ? "#edf2f1" : "#15342D" }}
|
||||
style={{
|
||||
color: active
|
||||
? "var(--primary-text,#edf2f1)"
|
||||
: "var(--background-text,#15342DCC)",
|
||||
}}
|
||||
>
|
||||
{feature}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -80,12 +80,15 @@ const ProcessSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
|
||||
style={{ backgroundColor: "#DAE1DE" }}
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#DAE1DE)",
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
}}
|
||||
>
|
||||
<div className="px-[66px] pt-[73px]">
|
||||
<h2
|
||||
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
|
||||
style={{ color: "#15342D" }}
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
|
|
@ -110,23 +113,28 @@ const ProcessSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
}}
|
||||
/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="162" height="187" viewBox="0 0 162 187" fill="none">
|
||||
<path d="M80.8291 0L161.658 46.6667V140L80.8291 186.667L2.28882e-05 140V46.6667L80.8291 0Z" fill={step.highlighted ? "#15342D" : "#FEFEFF"} />
|
||||
<path d="M80.8291 0L161.658 46.6667V140L80.8291 186.667L2.28882e-05 140V46.6667L80.8291 0Z" fill={step.highlighted ? "var(--primary-color,#15342D)" : "var(--card-color,#FEFEFF)"} />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="absolute bottom-1 right-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="231" height="134" viewBox="0 0 231 134" fill="none">
|
||||
<path d="M230.94 66.667L115.47 133.334L0 66.667V0H11.5469V60L115.47 120L219.393 60V0H230.94V66.667Z" fill="#FEFEFF" />
|
||||
<path d="M230.94 66.667L115.47 133.334L0 66.667V0H11.5469V60L115.47 120L219.393 60V0H230.94V66.667Z" fill="var(--card-color,#FEFEFF)" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className=" absolute bottom-[-110px] left-0 text-center mt-[60px]">
|
||||
<p
|
||||
className="text-[20px] font-semibold tracking-[2.074px] text-[#15342D]"
|
||||
style={{ color: "#15342D" }}
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{step.label}
|
||||
</p>
|
||||
<p className="mt-[6px] text-[24px] leading-[1.2] text-[#315f58]">{step.body}</p>
|
||||
<p
|
||||
className="mt-[6px] text-[24px] leading-[1.2] text-[#315f58]"
|
||||
style={{ color: "var(--background-text,#315f58)" }}
|
||||
>
|
||||
{step.body}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -141,23 +149,28 @@ const ProcessSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
<div className=" absolute top-[-100px] left-0 w-[224px] text-center">
|
||||
<p
|
||||
className="text-[20px] font-semibold tracking-[2.074px] text-[#15342D]"
|
||||
style={{ color: "#15342D" }}
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{step.label}
|
||||
</p>
|
||||
<p className="mt-[6px] text-[24px] leading-[1.2] text-[#315f58]">{step.body}</p>
|
||||
<p
|
||||
className="mt-[6px] text-[24px] leading-[1.2] text-[#315f58]"
|
||||
style={{ color: "var(--background-text,#315f58)" }}
|
||||
>
|
||||
{step.body}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative w-[230px] flex justify-center items-center h-[276px]">
|
||||
<div className="relative">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="162" height="187" viewBox="0 0 162 187" fill="none">
|
||||
<path d="M80.8291 0L161.658 46.6667V140L80.8291 186.667L2.28882e-05 140V46.6667L80.8291 0Z" fill={step.highlighted ? "#15342D" : "#FEFEFF"} />
|
||||
<path d="M80.8291 0L161.658 46.6667V140L80.8291 186.667L2.28882e-05 140V46.6667L80.8291 0Z" fill={step.highlighted ? "var(--primary-color,#15342D)" : "var(--card-color,#FEFEFF)"} />
|
||||
</svg>
|
||||
<img src={step.icon.__icon_url__} alt={step.icon.__icon_query__} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[42px] w-[42px] object-contain" />
|
||||
</div>
|
||||
<div className="absolute top-1 right-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="231" height="134" viewBox="0 0 231 134" fill="none">
|
||||
<path d="M230.94 66.667L115.47 0L0 66.667V133.333H11.5469V73.333L115.47 13.333L219.394 73.333V133.333H230.94V66.667Z" fill="#FEFEFF" />
|
||||
<path d="M230.94 66.667L115.47 0L0 66.667V133.333H11.5469V73.333L115.47 13.333L219.394 73.333V133.333H230.94V66.667Z" fill="var(--card-color,#FEFEFF)" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -229,17 +229,21 @@ export const Schema = z.object({
|
|||
|
||||
export type SchemaType = z.infer<typeof Schema>;
|
||||
|
||||
const MINI_BAR_DARK = "#0B4B40";
|
||||
const MINI_BAR_LIGHT = "#CED3D1";
|
||||
const DONUT_COLORS = ["#0B4B40", "#4B6B61", "#7B938C"];
|
||||
const KPI_ICON_BG = "#063C73";
|
||||
const MINI_BAR_DARK = "var(--graph-0,#0B4B40)";
|
||||
const MINI_BAR_LIGHT = "var(--graph-1,#CED3D1)";
|
||||
const DONUT_COLORS = [
|
||||
"var(--graph-0,#0B4B40)",
|
||||
"var(--graph-1,#4B6B61)",
|
||||
"var(--graph-2,#7B938C)",
|
||||
];
|
||||
const KPI_ICON_BG = "var(--graph-3,#063C73)";
|
||||
|
||||
const PulseIcon = () => (
|
||||
<svg viewBox="0 0 24 24" className="h-[22px] w-[22px]" aria-hidden="true">
|
||||
<path
|
||||
d="M2.5 12h4.6l1.7-4.4 3.1 9 2.7-6.2h6.9"
|
||||
fill="none"
|
||||
stroke="#ffffff"
|
||||
stroke="var(--primary-text,#ffffff)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
|
|
@ -254,8 +258,16 @@ const renderDonutPercentLabel = ({ cx, cy, midAngle, outerRadius, percent }: any
|
|||
|
||||
return (
|
||||
<g>
|
||||
<circle cx={x} cy={y} r={16} fill="#ECEAF8" />
|
||||
<text x={x} y={y} style={{ padding: '4px' }} textAnchor="middle" fill="#2C2B39" fontSize={10} fontWeight={600}>
|
||||
<circle cx={x} cy={y} r={16} fill="var(--card-color,#ECEAF8)" />
|
||||
<text
|
||||
x={x}
|
||||
y={y}
|
||||
style={{ padding: "4px" }}
|
||||
textAnchor="middle"
|
||||
fill="var(--background-text,#2C2B39)"
|
||||
fontSize={10}
|
||||
fontWeight={600}
|
||||
>
|
||||
{`${Math.round((percent ?? 0) * 100)}%`}
|
||||
</text>
|
||||
</g>
|
||||
|
|
@ -322,7 +334,10 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
|
||||
style={{ backgroundColor: "#D7DEDB" }}
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#D7DEDB)",
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
}}
|
||||
>
|
||||
{sideImage?.__image_url__ && (
|
||||
<img
|
||||
|
|
@ -332,16 +347,25 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
/>
|
||||
)}
|
||||
|
||||
<div className="absolute left-[268px] top-[74px] text-[#083F37]">
|
||||
<div
|
||||
className="absolute left-[268px] top-[74px] text-[#083F37]"
|
||||
style={{ color: "var(--primary-color,#083F37)" }}
|
||||
>
|
||||
<h2 className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px]">
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<div className="mt-[14px] w-[560px]">
|
||||
<p className="text-[20px] font-semibold tracking-[2.074px] text-[#083F37]">
|
||||
<p
|
||||
className="text-[20px] font-semibold tracking-[2.074px] text-[#083F37]"
|
||||
style={{ color: "var(--primary-color,#083F37)" }}
|
||||
>
|
||||
{taglineLabel}
|
||||
</p>
|
||||
<p className="mt-[12px] text-[24px] leading-[1.11] text-[#083F37]/75">
|
||||
<p
|
||||
className="mt-[12px] text-[24px] leading-[1.11] text-[#083F37]/75"
|
||||
style={{ color: "var(--background-text,#083F37BF)" }}
|
||||
>
|
||||
{taglineBody}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -350,8 +374,14 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
<div
|
||||
className={`absolute bottom-[50px] left-[266px] w-[580px] bg-[#F3F3F3] px-[28px] pb-[18px] pt-[20px] ${activeChartStyle === "mini-bars" ? "h-[308px]" : "h-[350px]"
|
||||
}`}
|
||||
style={{ backgroundColor: "var(--card-color,#F3F3F3)" }}
|
||||
>
|
||||
<p className="mt-[14px] text-[32px] font-normal leading-[1.1] text-[#15342D]">{chartTitle}</p>
|
||||
<p
|
||||
className="mt-[14px] text-[32px] font-normal leading-[1.1] text-[#15342D]"
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{chartTitle}
|
||||
</p>
|
||||
|
||||
{activeChartStyle === "mini-bars" && (
|
||||
<>
|
||||
|
|
@ -362,7 +392,7 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
margin={{ top: 0, right: 8, left: -6, bottom: 0 }}
|
||||
barCategoryGap={16}
|
||||
>
|
||||
<CartesianGrid vertical={false} stroke="#D7DCDA" strokeDasharray="3 3" />
|
||||
<CartesianGrid vertical={false} stroke="var(--stroke,#D7DCDA)" strokeDasharray="3 3" />
|
||||
<XAxis dataKey="label" tick={false} axisLine={false} tickLine={false} />
|
||||
<YAxis
|
||||
width={42}
|
||||
|
|
@ -371,7 +401,7 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
tickFormatter={(value) => `$${value}`}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: "#6C7271", fontSize: 10 }}
|
||||
tick={{ fill: "var(--background-text,#6C7271)", fontSize: 10 }}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="secondary"
|
||||
|
|
@ -392,8 +422,18 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
</div>
|
||||
|
||||
<div className="mt-[14px] flex items-center justify-between ">
|
||||
<p className="text-[#6D7371] text-[18px]">{footerLabel}</p>
|
||||
<p className="font-medium text-[#15342D] text-[18px]">{footerValue}</p>
|
||||
<p
|
||||
className="text-[#6D7371] text-[18px]"
|
||||
style={{ color: "var(--background-text,#6D7371)" }}
|
||||
>
|
||||
{footerLabel}
|
||||
</p>
|
||||
<p
|
||||
className="font-medium text-[#15342D] text-[18px]"
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{footerValue}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -431,11 +471,19 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
className="h-[14px] w-[14px] rounded-full"
|
||||
style={{ backgroundColor: DONUT_COLORS[index % DONUT_COLORS.length] }}
|
||||
/>
|
||||
<p className="text-[18px] font-bold text-[#767676]">
|
||||
<p
|
||||
className="text-[18px] font-bold text-[#767676]"
|
||||
style={{ color: "var(--background-text,#767676)" }}
|
||||
>
|
||||
{legendLabels?.[index] ?? entry.name}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-[18px] font-bold text-[#404040]">{percent}%</p>
|
||||
<p
|
||||
className="text-[18px] font-bold text-[#404040]"
|
||||
style={{ color: "var(--background-text,#404040)" }}
|
||||
>
|
||||
{percent}%
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
@ -452,18 +500,18 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
margin={{ top: 12, right: 6, left: -12, bottom: 0 }}
|
||||
barCategoryGap={20}
|
||||
>
|
||||
<CartesianGrid vertical={false} stroke="#D7DCDA" />
|
||||
<CartesianGrid vertical={false} stroke="var(--stroke,#D7DCDA)" />
|
||||
<XAxis
|
||||
dataKey="label"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: "#42484A", fontSize: 10 }}
|
||||
tick={{ fill: "var(--background-text,#42484A)", fontSize: 10 }}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
|
||||
tick={{ fill: "#566061", fontSize: 10 }}
|
||||
tick={{ fill: "var(--background-text,#566061)", fontSize: 10 }}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="optionA"
|
||||
|
|
@ -472,16 +520,26 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
maxBarSize={20}
|
||||
isAnimationActive={false}
|
||||
>
|
||||
<LabelList dataKey="optionA" position="top" fill="#5B6463" fontSize={9} />
|
||||
<LabelList
|
||||
dataKey="optionA"
|
||||
position="top"
|
||||
fill="var(--background-text,#5B6463)"
|
||||
fontSize={9}
|
||||
/>
|
||||
</Bar>
|
||||
<Bar
|
||||
dataKey="optionB"
|
||||
fill="#8A9A96"
|
||||
fill="var(--graph-2,#8A9A96)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
maxBarSize={20}
|
||||
isAnimationActive={false}
|
||||
>
|
||||
<LabelList dataKey="optionB" position="top" fill="#5B6463" fontSize={9} />
|
||||
<LabelList
|
||||
dataKey="optionB"
|
||||
position="top"
|
||||
fill="var(--background-text,#5B6463)"
|
||||
fontSize={9}
|
||||
/>
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
|
|
@ -489,12 +547,28 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
|
||||
<div className="ml-[24px] space-y-[24px]">
|
||||
<div className="flex items-center gap-[10px]">
|
||||
<span className="h-[14px] w-[14px] rounded-full bg-[#0B4B40]" />
|
||||
<p className="text-[18px] font-medium leading-[1] text-[#6A6B6E]">{legendLabels?.[0] ?? "Option A"}</p>
|
||||
<span
|
||||
className="h-[14px] w-[14px] rounded-full bg-[#0B4B40]"
|
||||
style={{ backgroundColor: "var(--graph-0,#0B4B40)" }}
|
||||
/>
|
||||
<p
|
||||
className="text-[18px] font-medium leading-[1] text-[#6A6B6E]"
|
||||
style={{ color: "var(--background-text,#6A6B6E)" }}
|
||||
>
|
||||
{legendLabels?.[0] ?? "Option A"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-[10px]">
|
||||
<span className="h-[14px] w-[14px] rounded-full bg-[#8A9A96]" />
|
||||
<p className="text-[18px] font-medium leading-[1] text-[#6A6B6E]">{legendLabels?.[1] ?? "Option B"}</p>
|
||||
<span
|
||||
className="h-[14px] w-[14px] rounded-full bg-[#8A9A96]"
|
||||
style={{ backgroundColor: "var(--graph-2,#8A9A96)" }}
|
||||
/>
|
||||
<p
|
||||
className="text-[18px] font-medium leading-[1] text-[#6A6B6E]"
|
||||
style={{ color: "var(--background-text,#6A6B6E)" }}
|
||||
>
|
||||
{legendLabels?.[1] ?? "Option B"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -505,20 +579,33 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
<div className="h-[210px] w-[362px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={trendLines ?? []} margin={{ top: 12, right: 6, left: -6, bottom: 16 }}>
|
||||
<CartesianGrid vertical={false} stroke="#D7DCDA" />
|
||||
<CartesianGrid vertical={false} stroke="var(--stroke,#D7DCDA)" />
|
||||
<XAxis
|
||||
dataKey="label"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: "#42484A", fontSize: 10 }}
|
||||
label={{ value: xAxisName, position: "insideBottom", offset: -6, fill: "#535B5C", fontSize: 10 }}
|
||||
tick={{ fill: "var(--background-text,#42484A)", fontSize: 10 }}
|
||||
label={{
|
||||
value: xAxisName,
|
||||
position: "insideBottom",
|
||||
offset: -6,
|
||||
fill: "var(--background-text,#535B5C)",
|
||||
fontSize: 10,
|
||||
}}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
|
||||
tick={{ fill: "#566061", fontSize: 10 }}
|
||||
label={{ value: yAxisName, angle: -90, position: "insideLeft", fill: "#535B5C", fontSize: 10, dx: -8 }}
|
||||
tick={{ fill: "var(--background-text,#566061)", fontSize: 10 }}
|
||||
label={{
|
||||
value: yAxisName,
|
||||
angle: -90,
|
||||
position: "insideLeft",
|
||||
fill: "var(--background-text,#535B5C)",
|
||||
fontSize: 10,
|
||||
dx: -8,
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
|
|
@ -531,7 +618,7 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
<Line
|
||||
type="monotone"
|
||||
dataKey="optionB"
|
||||
stroke="#8A9A96"
|
||||
stroke="var(--graph-2,#8A9A96)"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
isAnimationActive={false}
|
||||
|
|
@ -542,12 +629,28 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
|
||||
<div className="ml-[18px] space-y-[24px]">
|
||||
<div className="flex items-center gap-[10px]">
|
||||
<span className="h-[14px] w-[14px] rounded-full bg-[#0B4B40]" />
|
||||
<p className="text-[18px] font-medium leading-[1] text-[#6A6B6E]">{legendLabels?.[0] ?? "Option A"}</p>
|
||||
<span
|
||||
className="h-[14px] w-[14px] rounded-full bg-[#0B4B40]"
|
||||
style={{ backgroundColor: "var(--graph-0,#0B4B40)" }}
|
||||
/>
|
||||
<p
|
||||
className="text-[18px] font-medium leading-[1] text-[#6A6B6E]"
|
||||
style={{ color: "var(--background-text,#6A6B6E)" }}
|
||||
>
|
||||
{legendLabels?.[0] ?? "Option A"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-[10px]">
|
||||
<span className="h-[14px] w-[14px] rounded-full bg-[#8A9A96]" />
|
||||
<p className="text-[18px] font-medium leading-[1] text-[#6A6B6E]">{legendLabels?.[1] ?? "Option B"}</p>
|
||||
<span
|
||||
className="h-[14px] w-[14px] rounded-full bg-[#8A9A96]"
|
||||
style={{ backgroundColor: "var(--graph-2,#8A9A96)" }}
|
||||
/>
|
||||
<p
|
||||
className="text-[18px] font-medium leading-[1] text-[#6A6B6E]"
|
||||
style={{ color: "var(--background-text,#6A6B6E)" }}
|
||||
>
|
||||
{legendLabels?.[1] ?? "Option B"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -560,9 +663,16 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
>
|
||||
<div className="flex flex-col gap-[24px]">
|
||||
{visibleMetricCards.map((metric, index) => (
|
||||
<div key={`${metric.value}-${index}`} className="bg-[#F3F3F3] px-[33px] py-[24px]">
|
||||
<div
|
||||
key={`${metric.value}-${index}`}
|
||||
className="bg-[#F3F3F3] px-[33px] py-[24px]"
|
||||
style={{ backgroundColor: "var(--card-color,#F3F3F3)" }}
|
||||
>
|
||||
<div className="flex items-center gap-[14px]">
|
||||
<div className="flex h-[56px] w-[56px] items-center justify-center rounded-full" style={{ backgroundColor: "#15342D" }}>
|
||||
<div
|
||||
className="flex h-[56px] w-[56px] items-center justify-center rounded-full"
|
||||
style={{ backgroundColor: KPI_ICON_BG }}
|
||||
>
|
||||
{usePulseFallback ? (
|
||||
<PulseIcon />
|
||||
) : (
|
||||
|
|
@ -574,9 +684,19 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
/>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[48px] font-semibold leading-[1] text-[#113F37]">{metric.value}</p>
|
||||
<p
|
||||
className="text-[48px] font-semibold leading-[1] text-[#113F37]"
|
||||
style={{ color: "var(--primary-color,#113F37)" }}
|
||||
>
|
||||
{metric.value}
|
||||
</p>
|
||||
</div>
|
||||
<p className="mt-[18px] text-[28px] leading-[1.08] text-[#113F37]">{metric.body}</p>
|
||||
<p
|
||||
className="mt-[18px] text-[28px] leading-[1.08] text-[#113F37]"
|
||||
style={{ color: "var(--primary-color,#113F37)" }}
|
||||
>
|
||||
{metric.body}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import * as z from "zod";
|
||||
|
||||
const PRODUCT_BG = "#d7dddd";
|
||||
const PRODUCT_DARK = "#05463d";
|
||||
const PRODUCT_BG = "var(--background-color,#d7dddd)";
|
||||
const PRODUCT_DARK = "var(--primary-color,#05463d)";
|
||||
|
||||
|
||||
export const slideLayoutId = "product-overview-table-of-content-slide";
|
||||
|
|
@ -55,7 +55,10 @@ const TableOfContentSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
return (
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
|
||||
style={{ backgroundColor: PRODUCT_BG }}
|
||||
style={{
|
||||
backgroundColor: PRODUCT_BG,
|
||||
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
|
||||
}}
|
||||
>
|
||||
<div className="grid h-full grid-cols-[1fr_1fr]">
|
||||
<div className="px-[128px] pt-[69px]" style={{ backgroundColor: PRODUCT_DARK }}>
|
||||
|
|
@ -64,12 +67,25 @@ const TableOfContentSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
<div key={index} className="flex items-center justify-between">
|
||||
<div>
|
||||
|
||||
<p className="text-[20px] font-semibold tracking-[0.2em] text-[#ecf2f1]">
|
||||
<p
|
||||
className="text-[20px] font-semibold tracking-[0.2em] text-[#ecf2f1]"
|
||||
style={{ color: "var(--primary-text,#ecf2f1)" }}
|
||||
>
|
||||
{section.title}
|
||||
</p>
|
||||
<p className="mt-[6px] text-[18px] leading-[1.2] text-[#ecf2f1]">{section.description}</p>
|
||||
<p
|
||||
className="mt-[6px] text-[18px] leading-[1.2] text-[#ecf2f1]"
|
||||
style={{ color: "var(--primary-text,#ecf2f1)" }}
|
||||
>
|
||||
{section.description}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-[22px] font-medium text-[#ecf2f1]">{section.number}</p>
|
||||
<p
|
||||
className="text-[22px] font-medium text-[#ecf2f1]"
|
||||
style={{ color: "var(--primary-text,#ecf2f1)" }}
|
||||
>
|
||||
{section.number}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -78,11 +94,14 @@ const TableOfContentSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
<div className="px-[42px] pt-[118px]">
|
||||
<h2
|
||||
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
|
||||
style={{ color: "#15342D" }}
|
||||
style={{ color: "var(--primary-color,#15342D)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
<p className="mt-[28px] w-[560px] text-[24px] font-normal text-[#15342DCC]">
|
||||
<p
|
||||
className="mt-[28px] w-[560px] text-[24px] font-normal text-[#15342DCC]"
|
||||
style={{ color: "var(--background-text,#15342DCC)" }}
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -77,11 +77,25 @@ const DataAnalysisBarSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
const series = chartData?.series ?? [];
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]">
|
||||
<div className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#4d4ef3]" style={{ height: 185 }} />
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
<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]">{title}</h2>
|
||||
<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]">
|
||||
|
|
@ -89,7 +103,13 @@ const DataAnalysisBarSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
{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">
|
||||
<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__}
|
||||
|
|
@ -97,9 +117,19 @@ const DataAnalysisBarSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
style={{ filter: "brightness(0) invert(1)" }}
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-[20px] font-medium tracking-[2.074px] text-[#232223]">{item.title}</h3>
|
||||
<h3
|
||||
className="text-[20px] font-medium tracking-[2.074px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="mt-[20px] text-[24px] leading-[26.667px] text-[#232223]">{item.description}</p>
|
||||
<p
|
||||
className="mt-[20px] text-[24px] leading-[26.667px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -110,8 +140,14 @@ const DataAnalysisBarSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
<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]">
|
||||
<span className="h-[12px] w-[12px] rounded-full bg-[#4d4ef3]" />
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -141,7 +141,13 @@ function SummaryCard({
|
|||
}) {
|
||||
return (
|
||||
<div className="flex gap-[10px] items-center rounded-[14px] py-[9px]">
|
||||
<div className="flex h-[36px] w-[36px] border border-[#ECF5FE] shrink-0 items-center justify-center rounded-full bg-[#ECF5FE] ">
|
||||
<div
|
||||
className="flex h-[36px] w-[36px] border border-[#ECF5FE] shrink-0 items-center justify-center rounded-full bg-[#ECF5FE] "
|
||||
style={{
|
||||
backgroundColor: "var(--card-color,#ECF5FE)",
|
||||
borderColor: "var(--stroke,#ECF5FE)",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={iconUrl ?? ""}
|
||||
alt={iconAlt ?? ""}
|
||||
|
|
@ -150,8 +156,18 @@ function SummaryCard({
|
|||
/>
|
||||
</div>
|
||||
<div className="">
|
||||
<p className="text-[18px] leading-none tracking-[-0.04em] text-[#4A4D53]">{value}</p>
|
||||
<p className="mt-[4px] text-[14px] leading-none text-[#6C6C6C]">{label}</p>
|
||||
<p
|
||||
className="text-[18px] leading-none tracking-[-0.04em] text-[#4A4D53]"
|
||||
style={{ color: "var(--background-text,#4A4D53)" }}
|
||||
>
|
||||
{value}
|
||||
</p>
|
||||
<p
|
||||
className="mt-[4px] text-[14px] leading-none text-[#6C6C6C]"
|
||||
style={{ color: "var(--background-text,#6C6C6C)" }}
|
||||
>
|
||||
{label}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -167,16 +183,32 @@ 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]">
|
||||
<div className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]" style={{ height: 185 }} />
|
||||
<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,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
<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]">{title}</h2>
|
||||
<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] "
|
||||
|
||||
style={{ gridTemplateColumns: `repeat(${summaryCards.length}, minmax(220px, 1fr))` }}>
|
||||
style={{
|
||||
gridTemplateColumns: `repeat(${summaryCards.length}, minmax(220px, 1fr))`,
|
||||
backgroundColor: "var(--card-color,#ffffff)",
|
||||
}}>
|
||||
{summaryCards?.map((card, index) => (
|
||||
<SummaryCard
|
||||
key={`${card.label}-${index}`}
|
||||
|
|
@ -192,7 +224,10 @@ const DataAnalysisDashboardSlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
{halfChart && halfChart.length > 0 && <div className="mt-[14px] px-[64px] flex-1">
|
||||
<div
|
||||
className={`grid h-full bg-white p-[13px] rounded-[14px] min-h-0 gap-[10px] grid-cols-3`}
|
||||
style={{ gridAutoRows: `minmax(150px, 1fr)` }}
|
||||
style={{
|
||||
gridAutoRows: `minmax(150px, 1fr)`,
|
||||
backgroundColor: "var(--card-color,#ffffff)",
|
||||
}}
|
||||
>
|
||||
{halfChart?.map((chart, index) => (
|
||||
<div
|
||||
|
|
@ -211,7 +246,10 @@ const DataAnalysisDashboardSlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
{otherHalfChart && otherHalfChart.length > 0 && <div className="mt-[14px] px-[64px] flex-1">
|
||||
<div
|
||||
className={`grid h-full bg-white p-[13px] rounded-[14px] min-h-0 gap-[10px] grid-cols-3`}
|
||||
style={{ gridAutoRows: `minmax(150px, 1fr)` }}
|
||||
style={{
|
||||
gridAutoRows: `minmax(150px, 1fr)`,
|
||||
backgroundColor: "var(--card-color,#ffffff)",
|
||||
}}
|
||||
>
|
||||
{otherHalfChart?.map((chart, index) => (
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -66,17 +66,37 @@ const DataAnalysisInsightBarSlide = ({
|
|||
const series = data?.chartData?.series ?? [];
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]">
|
||||
<div className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]" style={{ height: 185 }} />
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
<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]">{data.title}</h2>
|
||||
<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">
|
||||
<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__}
|
||||
|
|
@ -85,15 +105,26 @@ const DataAnalysisInsightBarSlide = ({
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-[20px] text-[24px] leading-[26.667px] text-[#232223]">{data.insightBody}</p>
|
||||
<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]">
|
||||
<span className="h-[12px] w-[12px] rounded-full bg-[#157CFF]" />
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -88,18 +88,32 @@ type StatMetric = {
|
|||
|
||||
function StatPill({ metrics }: { metrics: StatMetric[] }) {
|
||||
return (
|
||||
<div className="h-[438px] w-[248px] overflow-hidden rounded-[127px] bg-[#157CFF] px-[28px] py-[74px] text-center text-white">
|
||||
<div
|
||||
className="h-[438px] w-[248px] overflow-hidden rounded-[127px] bg-[#157CFF] px-[28px] py-[74px] text-center text-white"
|
||||
style={{
|
||||
backgroundColor: "var(--primary-color,#157CFF)",
|
||||
color: "var(--primary-text,#ffffff)",
|
||||
}}
|
||||
>
|
||||
{metrics.map((metric, index) => (
|
||||
<Fragment key={`${metric.value}-${metric.label}-${index}`}>
|
||||
<div key={`${metric.value}-${metric.label}-${index}`} className={``}>
|
||||
<p className="text-[55px] font-medium leading-[ 44.353px] tracking-[-1.09px]">{metric.value}</p>
|
||||
<p className="mt-[6px] text-[20px] font-medium leading-none">{metric.label}</p>
|
||||
<p className="text-[20px] leading-[1.15] text-white/90">{metric.description}</p>
|
||||
<p className="text-[20px] leading-[1.15] text-white/90" style={{ color: "var(--primary-text,#ffffff)", opacity: 0.9 }}>
|
||||
{metric.description}
|
||||
</p>
|
||||
</div>
|
||||
{index === 0 && (
|
||||
<div className="py-[22px]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="181" height="1" viewBox="0 0 181 1" fill="none">
|
||||
<path opacity="0.2" d="M0 0.487305H180.122" stroke="white" strokeWidth="0.974913" strokeDasharray="3.9 1.95" />
|
||||
<path
|
||||
opacity="0.2"
|
||||
d="M0 0.487305H180.122"
|
||||
stroke="var(--primary-text,#ffffff)"
|
||||
strokeWidth="0.974913"
|
||||
strokeDasharray="3.9 1.95"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -116,22 +130,39 @@ const DataAnalysisLineStatsSlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
const series = chartData?.series ?? [];
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]">
|
||||
<div className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]" style={{ height: 185 }} />
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
<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]">{title}</h2>
|
||||
<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]">
|
||||
<div className="flex justify-center gap-[26px] text-[14px] text-[#353538]">
|
||||
<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]" />
|
||||
<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]" />
|
||||
<span className="h-[2px] w-[20px] bg-[#4d4ef3]" style={{ backgroundColor: "var(--graph-1,#4d4ef3)" }} />
|
||||
{seriesBLabel}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -143,13 +174,20 @@ const DataAnalysisLineStatsSlide = ({ data }: { data: Partial<SchemaType> }) =>
|
|||
data={rows}
|
||||
series={series}
|
||||
colorFallback="#157CFF"
|
||||
dualLineColors={["#9fb6ff", "#4d4ef3"]}
|
||||
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]">
|
||||
<span className="h-[12px] w-[12px] rounded-full bg-[#157CFF]" />
|
||||
<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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -52,14 +52,23 @@ 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]">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185 }}
|
||||
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]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
|
@ -68,7 +77,13 @@ const DataAnalysisListSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
{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">
|
||||
<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__}
|
||||
|
|
@ -76,11 +91,17 @@ const DataAnalysisListSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
style={{ filter: "brightness(0) invert(1)" }}
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-[20px] font-medium tracking-[2.074px] text-[#232223]">
|
||||
<h3
|
||||
className="text-[20px] font-medium tracking-[2.074px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="mt-5 max-w-[420px] text-[24px] leading-[26.667px] text-[#232223]">
|
||||
<p
|
||||
className="mt-5 max-w-[420px] text-[24px] leading-[26.667px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,24 +15,43 @@ const IntroSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
const { title, subtitle, name, position } = data;
|
||||
|
||||
return (
|
||||
<div className='relative w-[1280px] h-[720px] aspect-video flex flex-col justify-center items-center'>
|
||||
<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,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
<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="#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="#147CFE" />
|
||||
<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="#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="#147CFE" />
|
||||
<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]">{title}</h1>
|
||||
<p className="text-[#232223] text-[93px] text-center font-medium capitalize tracking-[-2.8px]">{subtitle}</p>
|
||||
<h1
|
||||
className="text-[#232223] text-[133px] italic text-center font-bold capitalize tracking-[-2.8px]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
<p
|
||||
className="text-[#232223] text-[93px] text-center font-medium capitalize tracking-[-2.8px]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{subtitle}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-[#CD7721] w-[67px] h-0.5 my-[78px]" />
|
||||
<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">{name}</h4>
|
||||
<p className="text-[19px] text-[#232223]">{position}</p>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -45,25 +45,37 @@ 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]">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185 }}
|
||||
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]">
|
||||
<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]">
|
||||
<p className=" text-[24px] leading-[26.667px] text-[#232223]" style={{ color: "var(--background-text,#232223)" }}>
|
||||
{body}
|
||||
</p>
|
||||
|
||||
<ul className="mt-8 list-disc pl-[28px] text-[24px] leading-[26.667px] text-[#232223]">
|
||||
<ul
|
||||
className="mt-8 list-disc pl-[28px] text-[24px] leading-[26.667px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{bullets?.map((bullet, index) => (
|
||||
<li key={`${bullet}-${index}`} className="mt-[8px]">
|
||||
{bullet}
|
||||
|
|
@ -73,7 +85,10 @@ const IntroductionImageSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
</div>
|
||||
|
||||
<div className="flex flex-1 items-end justify-end">
|
||||
<div className="h-[397px] w-[582px] overflow-hidden rounded-l-[106px] bg-[#157CFF]">
|
||||
<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__}
|
||||
|
|
|
|||
|
|
@ -87,7 +87,13 @@ function StatPill({
|
|||
|
||||
|
||||
return (
|
||||
<div className=" h-[438px] w-[248px] overflow-hidden rounded-[127px] bg-[#157CFF] px-[28px] py-[74px] text-center text-white">
|
||||
<div
|
||||
className=" h-[438px] w-[248px] overflow-hidden rounded-[127px] bg-[#157CFF] px-[28px] py-[74px] text-center text-white"
|
||||
style={{
|
||||
backgroundColor: "var(--primary-color,#157CFF)",
|
||||
color: "var(--primary-text,#ffffff)",
|
||||
}}
|
||||
>
|
||||
|
||||
{metrics.map((metric, index) => (
|
||||
<Fragment key={`${metric.value}-${metric.label}-${index}`}>
|
||||
|
|
@ -99,14 +105,20 @@ function StatPill({
|
|||
{metric.value}
|
||||
</p>
|
||||
<p className="mt-[6px] text-[20px] font-medium leading-none">{metric.label}</p>
|
||||
<p className=" text-[20px] leading-[1.15] text-white/90">
|
||||
<p className=" text-[20px] leading-[1.15] text-white/90" style={{ color: "var(--primary-text,#ffffff)", opacity: 0.9 }}>
|
||||
{metric.description}
|
||||
</p>
|
||||
</div>
|
||||
{index === 0 && <div className="py-[22px]">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="181" height="1" viewBox="0 0 181 1" fill="none">
|
||||
<path opacity="0.2" d="M0 0.487305H180.122" stroke="white" strokeWidth="0.974913" strokeDasharray="3.9 1.95" />
|
||||
<path
|
||||
opacity="0.2"
|
||||
d="M0 0.487305H180.122"
|
||||
stroke="var(--primary-text,#ffffff)"
|
||||
strokeWidth="0.974913"
|
||||
strokeDasharray="3.9 1.95"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -123,25 +135,37 @@ 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]">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185 }}
|
||||
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]">
|
||||
<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]">
|
||||
<p className="max-w-[400px] text-[24px] leading-[26.667px] text-[#232223]" style={{ color: "var(--background-text,#232223)" }}>
|
||||
{body}
|
||||
</p>
|
||||
|
||||
<ul className="mt-[34px] list-disc pl-[28px] text-[24px] leading-[26.667px] text-[#232223]">
|
||||
<ul
|
||||
className="mt-[34px] list-disc pl-[28px] text-[24px] leading-[26.667px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{bullets?.map((bullet, index) => (
|
||||
<li key={`${bullet}-${index}`} className="mt-[8px]">
|
||||
{bullet}
|
||||
|
|
|
|||
|
|
@ -66,14 +66,23 @@ 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]">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#F9F8F8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#F9F8F8)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185 }}
|
||||
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]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
|
@ -91,17 +100,29 @@ const MilestoneSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
? "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]`}>
|
||||
<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.stepNumber}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div key={`${item.heading}-${index}`} className={`text-center mt-[20px] text-[#232223] ${index > 0 ? 'pr-[33px]' : ''} ${index === 0 ? 'px-[33px]' : ''}`}>
|
||||
<h3 className="text-[20px] text-[#232223] font-medium tracking-[2.074px]">
|
||||
<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]">
|
||||
<p className="mt-[6px] text-[24px] leading-[26.667px] text-[#232223]" style={{ color: "var(--background-text,#232223)" }}>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -80,7 +80,13 @@ function StatPill({
|
|||
|
||||
|
||||
return (
|
||||
<div className=" h-[438px] w-[248px] overflow-hidden rounded-[127px] bg-[#157CFF] px-[28px] py-[74px] text-center text-white">
|
||||
<div
|
||||
className=" h-[438px] w-[248px] overflow-hidden rounded-[127px] bg-[#157CFF] px-[28px] py-[74px] text-center text-white"
|
||||
style={{
|
||||
backgroundColor: "var(--primary-color,#157CFF)",
|
||||
color: "var(--primary-text,#ffffff)",
|
||||
}}
|
||||
>
|
||||
|
||||
{metrics.map((metric, index) => (
|
||||
<Fragment key={`${metric.value}-${metric.label}-${index}`}>
|
||||
|
|
@ -92,14 +98,20 @@ function StatPill({
|
|||
{metric.value}
|
||||
</p>
|
||||
<p className="mt-[6px] text-[20px] font-medium leading-none">{metric.label}</p>
|
||||
<p className=" text-[20px] leading-[1.15] text-white/90">
|
||||
<p className=" text-[20px] leading-[1.15] text-white/90" style={{ color: "var(--primary-text,#ffffff)", opacity: 0.9 }}>
|
||||
{metric.description}
|
||||
</p>
|
||||
</div>
|
||||
{index === 0 && <div className="py-[22px]">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="181" height="1" viewBox="0 0 181 1" fill="none">
|
||||
<path opacity="0.2" d="M0 0.487305H180.122" stroke="white" strokeWidth="0.974913" strokeDasharray="3.9 1.95" />
|
||||
<path
|
||||
opacity="0.2"
|
||||
d="M0 0.487305H180.122"
|
||||
stroke="var(--primary-text,#ffffff)"
|
||||
strokeWidth="0.974913"
|
||||
strokeDasharray="3.9 1.95"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -115,14 +127,23 @@ const PerformanceSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
const { title, columns } = data;
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185 }}
|
||||
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]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -108,14 +108,23 @@ 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]">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#f9f8f8)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185 }}
|
||||
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]">
|
||||
<h2
|
||||
className="text-[80px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
|
@ -135,6 +144,9 @@ const ServicesSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
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
|
||||
|
|
@ -148,16 +160,20 @@ const ServicesSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<h3 className="mt-[18px] text-[26px] font-medium tracking-[0.08em] text-[#232223]"
|
||||
<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]"
|
||||
<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}
|
||||
|
|
@ -194,7 +210,10 @@ const ServicesSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
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="#157CFE" />
|
||||
<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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,13 @@ function SolutionCard({
|
|||
description: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex py-[60px] px-10 w-[312px] flex-col items-center justify-center rounded-[160px] bg-[#4d4ef3] text-center text-white">
|
||||
<div
|
||||
className="flex py-[60px] px-10 w-[312px] flex-col items-center justify-center rounded-[160px] bg-[#4d4ef3] text-center text-white"
|
||||
style={{
|
||||
backgroundColor: "var(--graph-1,#4d4ef3)",
|
||||
color: "var(--primary-text,#ffffff)",
|
||||
}}
|
||||
>
|
||||
<p className="text-[42px] font-medium tracking-[8.709px]">{stepNumber}</p>
|
||||
<p className="mt-[27px] text-[27px] min-h-[200px] ">
|
||||
{description}
|
||||
|
|
@ -84,14 +90,23 @@ const SolutionSlide = ({ data }: SolutionSlideProps) => {
|
|||
const visibleCards = showImage ? cards?.slice(0, 2) : cards;
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#F9F8F8]">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#F9F8F8]"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#F9F8F8)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
<div className="absolute left-0 top-0 w-[42px] rounded-b-[22px] bg-[#157CFF]"
|
||||
style={{ height: 185 }}
|
||||
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]">
|
||||
<h2
|
||||
className="text-[80px] px-[64px] font-bold leading-[108.4%] tracking-[-2.419px] text-[#232223]"
|
||||
style={{ color: "var(--background-text,#232223)" }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
)}
|
||||
|
|
@ -100,7 +115,10 @@ const SolutionSlide = ({ data }: SolutionSlideProps) => {
|
|||
{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]">
|
||||
<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__}
|
||||
|
|
|
|||
|
|
@ -79,7 +79,13 @@ 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">
|
||||
<div
|
||||
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-white"
|
||||
style={{
|
||||
backgroundColor: "var(--background-color,#ffffff)",
|
||||
fontFamily: "var(--body-font-family,Nunito Sans)",
|
||||
}}
|
||||
>
|
||||
<div className="grid h-full "
|
||||
style={{ gridTemplateColumns: `repeat(${data?.members?.length}, minmax(0, 1fr))` }}
|
||||
>
|
||||
|
|
@ -93,9 +99,19 @@ const TeamSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
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" />
|
||||
<div className="absolute left-0 bottom-0 p-[33px] text-white">
|
||||
<p className="text-[21px] tracking-[2.074px] font-medium text-white/90">{member.title}</p>
|
||||
<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.name}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -249,7 +249,7 @@ export function normalizeFlexibleChartData(
|
|||
return { data: mapped, series };
|
||||
}
|
||||
|
||||
const graphVar = (index: number, fallback: string) => `var(--graph-${index % 8}, ${fallback})`;
|
||||
const graphVar = (index: number, fallback: string) => `var(--graph-${index % 10}, ${fallback})`;
|
||||
|
||||
export type ChartDensity = "default" | "compact";
|
||||
|
||||
|
|
@ -269,7 +269,7 @@ export function FlexibleReportChart({
|
|||
data: chartData,
|
||||
series = [],
|
||||
colorFallback = "#157CFF",
|
||||
dualLineColors = ["#9fb6ff", "#4d4ef3"],
|
||||
dualLineColors = ["var(--graph-0,#9fb6ff)", "var(--graph-1,#4d4ef3)"],
|
||||
density = "default",
|
||||
}: FlexibleReportChartProps) {
|
||||
const areaGradientId = `flex-area-${useId().replace(/:/g, "")}`;
|
||||
|
|
@ -352,25 +352,24 @@ export function FlexibleReportChart({
|
|||
const nm = String(name ?? "");
|
||||
const short = nm.length <= ui.pieMaxNameLen;
|
||||
const pct = `${(percent * 100).toFixed(0)}%`;
|
||||
const fontSize = compact ? (short ? 6 : 5) : short ? 10 : 9;
|
||||
const fontSize = compact ? (short ? 6 : 5) : short ? 12 : 12;
|
||||
const labelText = compact ? pct : short ? `${name} ${pct}` : pct;
|
||||
return (
|
||||
<text
|
||||
x={x}
|
||||
y={y}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="central"
|
||||
fill="#ffffff"
|
||||
fontSize={fontSize}
|
||||
fontWeight={600}
|
||||
style={{
|
||||
paintOrder: "stroke fill",
|
||||
stroke: "rgba(0,0,0,0.28)",
|
||||
strokeWidth: compact ? 1 : 2,
|
||||
}}
|
||||
>
|
||||
{labelText}
|
||||
</text>
|
||||
|
||||
<g>
|
||||
{/* <circle cx={x} cy={y} fill="var(--card-color,#ECEAF8)" /> */}
|
||||
<text
|
||||
x={x}
|
||||
y={y}
|
||||
style={{ padding: "4px" }}
|
||||
textAnchor="middle"
|
||||
fill="var(--background-text,#2C2B39)"
|
||||
fontSize={fontSize}
|
||||
fontWeight={600}
|
||||
>
|
||||
{labelText}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -399,7 +398,7 @@ export function FlexibleReportChart({
|
|||
<LabelList
|
||||
dataKey="value"
|
||||
position="top"
|
||||
fill={colorFallback}
|
||||
fill={graphVar(0, colorFallback)}
|
||||
fontSize={ui.labelFs}
|
||||
offset={ui.labelOffTop}
|
||||
/>
|
||||
|
|
@ -425,7 +424,13 @@ export function FlexibleReportChart({
|
|||
axisLine={false}
|
||||
/>
|
||||
<Bar dataKey="value" barSize={ui.barSize} fill={graphVar(0, colorFallback)} radius={[...ui.barRadiusH]}>
|
||||
<LabelList dataKey="value" position="right" fill={colorFallback} fontSize={ui.labelFs} offset={ui.labelOffSide} />
|
||||
<LabelList
|
||||
dataKey="value"
|
||||
position="right"
|
||||
fill={graphVar(0, colorFallback)}
|
||||
fontSize={ui.labelFs}
|
||||
offset={ui.labelOffSide}
|
||||
/>
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
|
|
@ -629,7 +634,7 @@ export function FlexibleReportChart({
|
|||
tickLine={false}
|
||||
axisLine={false}
|
||||
/>
|
||||
<ReferenceLine x={0} stroke="#9CA3AF" strokeWidth={1} />
|
||||
<ReferenceLine x={0} stroke="var(--stroke,#9CA3AF)" strokeWidth={1} />
|
||||
<Bar dataKey="positive" barSize={ui.barSize} fill={graphVar(0, colorFallback)} stackId="stack" radius={[...ui.barRadiusH]}>
|
||||
<LabelList dataKey="positive" position="right" fill={graphVar(0, colorFallback)} fontSize={ui.labelFs} offset={ui.labelOffSide} />
|
||||
</Bar>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ import CoverSlide, { Schema as PoCoverSchema, slideLayoutId as PoCoverId, slideL
|
|||
import ImageGallerySlide, { Schema as PoImageGallerySchema, slideLayoutId as PoImageGalleryId, slideLayoutName as PoImageGalleryName, slideLayoutDescription as PoImageGalleryDesc } from "./ProductOverview/ImageGallerySlide";
|
||||
import IntroductionSlide, { Schema as PoIntroductionSchema, slideLayoutId as PoIntroductionId, slideLayoutName as PoIntroductionName, slideLayoutDescription as PoIntroductionDesc } from "./ProductOverview/IntroductionSlide";
|
||||
import KpiCardsSlide, { Schema as PoKpiCardsSchema, slideLayoutId as PoKpiCardsId, slideLayoutName as PoKpiCardsName, slideLayoutDescription as PoKpiCardsDesc } from "./ProductOverview/KpiCardsSlide";
|
||||
import MarketOpportunitySlide, { Schema as PoMarketOpportunitySchema, slideLayoutId as PoMarketOpportunityId, slideLayoutName as PoMarketOpportunityName, slideLayoutDescription as PoMarketOpportunityDesc } from "./ProductOverview/MarketOpportunitySlide";
|
||||
// import MarketOpportunitySlide, { Schema as PoMarketOpportunitySchema, slideLayoutId as PoMarketOpportunityId, slideLayoutName as PoMarketOpportunityName, slideLayoutDescription as PoMarketOpportunityDesc } from "./ProductOverview/MarketOpportunitySlide";
|
||||
import MeetTeamSlide, { Schema as PoMeetTeamSchema, slideLayoutId as PoMeetTeamId, slideLayoutName as PoMeetTeamName, slideLayoutDescription as PoMeetTeamDesc } from "./ProductOverview/MeetTeamSlide";
|
||||
import MissionVisionSlide, { Schema as PoMissionVisionSchema, slideLayoutId as PoMissionVisionId, slideLayoutName as PoMissionVisionName, slideLayoutDescription as PoMissionVisionDesc } from "./ProductOverview/MissionVisionSlide";
|
||||
import OurServicesSlide, { Schema as PoOurServicesSchema, slideLayoutId as PoOurServicesId, slideLayoutName as PoOurServicesName, slideLayoutDescription as PoOurServicesDesc } from "./ProductOverview/OurServicesSlide";
|
||||
|
|
@ -274,7 +274,7 @@ export const productOverviewTemplates: TemplateWithData[] = [
|
|||
createTemplateEntry(TableOfContentSlide, PoTableOfContentSchema, PoTableOfContentId, PoTableOfContentName, PoTableOfContentDesc, "product-overview", "TableOfContentSlide"),
|
||||
createTemplateEntry(IntroductionSlide, PoIntroductionSchema, PoIntroductionId, PoIntroductionName, PoIntroductionDesc, "product-overview", "IntroductionSlide"),
|
||||
createTemplateEntry(MissionVisionSlide, PoMissionVisionSchema, PoMissionVisionId, PoMissionVisionName, PoMissionVisionDesc, "product-overview", "MissionVisionSlide"),
|
||||
createTemplateEntry(MarketOpportunitySlide, PoMarketOpportunitySchema, PoMarketOpportunityId, PoMarketOpportunityName, PoMarketOpportunityDesc, "product-overview", "MarketOpportunitySlide"),
|
||||
// createTemplateEntry(MarketOpportunitySlide, PoMarketOpportunitySchema, PoMarketOpportunityId, PoMarketOpportunityName, PoMarketOpportunityDesc, "product-overview", "MarketOpportunitySlide"),
|
||||
createTemplateEntry(BusinessChallengesGridSlide, PoBizChallengesGridSchema, PoBizChallengesGridId, PoBizChallengesGridName, PoBizChallengesGridDesc, "product-overview", "BusinessChallengesGridSlide"),
|
||||
createTemplateEntry(BusinessChallengesCardsSlide, PoBizChallengesCardsSchema, PoBizChallengesCardsId, PoBizChallengesCardsName, PoBizChallengesCardsDesc, "product-overview", "BusinessChallengesCardsSlide"),
|
||||
createTemplateEntry(OurServicesSlide, PoOurServicesSchema, PoOurServicesId, PoOurServicesName, PoOurServicesDesc, "product-overview", "OurServicesSlide"),
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue