66 lines
2.4 KiB
TypeScript
66 lines
2.4 KiB
TypeScript
import * as z from "zod";
|
|
|
|
export const slideLayoutId = "cover-slide";
|
|
export const slideLayoutName = "Cover Slide";
|
|
export const slideLayoutDescription =
|
|
"Opening/cover/intro slide with organization/institution/presenter, presentation title/heading , and supporting subtitle.";
|
|
|
|
export const Schema = z.object({
|
|
companyName: z.string().min(2).max(18).optional().default("COMPANY NAME").meta({
|
|
description: "Optional organization/institution/presenter name shown above the slide title.",
|
|
}),
|
|
title: z.string().min(8).max(28).default("Development Roadmap").meta({
|
|
description: "Title/heading of the slide.",
|
|
}),
|
|
subtitle: z
|
|
.string()
|
|
.min(24)
|
|
.max(40)
|
|
.default(
|
|
"We transform ideas into market-ready solutions through systematic development processes."
|
|
)
|
|
.meta({
|
|
description: "Supporting subtitle shown under the heading.",
|
|
}),
|
|
pageLabel: z.string().min(3).max(8).optional().default("1 / 11").meta({
|
|
description: "",
|
|
}),
|
|
});
|
|
|
|
export type SchemaType = z.infer<typeof Schema>;
|
|
|
|
const CodeSlide01RoadmapCover = ({ data }: { data: Partial<SchemaType> }) => {
|
|
|
|
return (<>
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet" />
|
|
<div
|
|
className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
|
|
style={{
|
|
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]" 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%]" 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 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>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CodeSlide01RoadmapCover;
|