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

feat: new template improvement

Browse source
This commit is contained in:
shiva raj badu 2026-04-09 22:54:41 +05:45
parent 0fd8011e3e
commit 4ecab24add
No known key found for this signature in database
15 changed files with 53 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
electron/servers/nextjs/app/presentation-templates/Education/EducationCoverSlide.tsx
View file

@ -4,11 +4,11 @@ import * as z from "zod";
export const slideLayoutId = "cover-slide";
export const slideLayoutName = "Cover Slide";
export const slideLayoutDescription =
"A full-bleed cover slide with a single background image, a strong violet overlay, and centered company/instructor/presenter/institute name and title text.";
"Opening/cover/intro slide with organization/institution/presenter, presentation title/heading , and supporting subtitle.";
export const Schema = z.object({
name: z.string().min(3).max(16).optional().default("COMPANY NAME").meta({
description: "Company/instructor/presenter/institute name label shown above the main title.",
name: z.string().min(3).max(16).optional().default("Name").meta({
description: "Optional organization/institution/presenter name shown above the slide title.",
}),
title: z.string().min(6).max(32).default("PowerPoint Template").meta({
description: "Main centered title of the cover slide.",
@ -57,7 +57,7 @@ const EducationCoverSlide = ({ data }: { data: Partial<SchemaType> }) => {
className="relative z-10 flex h-full flex-col items-center justify-center text-center"
style={{ color: "var(--primary-text,#ffffff)" }}
>
{name && <p className="text-[22px] font-normal uppercase tracking-[0.64px]">{name}</p>
{name && <p className="text-[22px] font-normal tracking-[0.64px]">{name}</p>
} <h1 className="mt-[12px] px-[53px] text-[64px] font-medium leading-[98%]">
{title}
</h1>

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

@ -82,7 +82,7 @@ const BusinessChallengesCardsSlide = ({ data }: { data: Partial<SchemaType> }) =
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className=" pl-[66px] pt-[60px] pb-[28px] pr-[40px]">
<div className=" pl-[66px] pt-[50px] pb-[28px] pr-[40px]">
<h2
className="text-[80px] max-w-[406px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}

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

@ -15,7 +15,7 @@ const BlockSchema = z.object({
});
export const Schema = z.object({
title: z.string().min(8).max(26).default("Business Challenges Business").meta({
title: z.string().min(8).max(24).default("Business Challenges Business").meta({
description: "Main title shown in the top.",
}),
blocks: z
@ -60,7 +60,7 @@ const BusinessChallengesGridSlide = ({ data }: { data: Partial<SchemaType> }) =>
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className=" px-[60px] pt-[60px] pb-[28px]">
<div className=" px-[60px] pt-[50px] pb-[28px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
@ -70,7 +70,7 @@ const BusinessChallengesGridSlide = ({ data }: { data: Partial<SchemaType> }) =>
</div>
<div
className="grid grid-cols-2 justify-between items-center flex-1 gap-y-[63px] px-[84px] py-[70px] gap-x-[63px]"
className="grid grid-cols-2 justify-between items-center flex-1 gap-y-[43px] px-[84px] py-[70px] gap-x-[63px]"
style={{ backgroundColor: "var(--primary-color,#15342D)" }}
>
{blocks?.map((block, index) => (

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

@ -4,7 +4,7 @@ import * as z from "zod";
export const slideLayoutId = "title-description-with-table-slide";
export const slideLayoutName = "Title Description with Table Slide";
export const slideLayoutDescription =
"A slide with a title on top and a description below, and a content section containing a table with column headers and rows of text content.";
"A slide with a title on top and a description below, and a content section containing a table with column headers and rows of check, cross and empty state of content.";
const CellStatusSchema = z.enum(["check", "cross", "empty"]);
@ -29,21 +29,7 @@ const LegacyRowSchema = z.object({
const RowSchema = z.union([GeneralRowSchema, LegacyRowSchema]);
const DEFAULT_COLUMNS = ["HEADING 1", "HEADING 2", "HEADING 3", "HEADING 4"];
const DEFAULT_ROWS: z.infer<typeof GeneralRowSchema>[] = [
{
label: "HEADING 1",
cells: ["check", "cross", "check", "cross"],
},
{
label: "HEADING 1",
cells: ["check", "empty", "check", "empty"],
},
{
label: "HEADING 2",
cells: ["check", "check", "check", "check"],
},
];
export const Schema = z.object({
title: z.string().max(14).default("Comparison Chart").meta({
@ -58,7 +44,7 @@ export const Schema = z.object({
.array(z.string().max(18))
.min(1)
.max(4)
.default(DEFAULT_COLUMNS)
.default(["HEADING 1", "HEADING 2", "HEADING 3", "HEADING 4"])
.meta({
description: "Table column headings.",
}),
@ -69,7 +55,20 @@ export const Schema = z.object({
.array(RowSchema)
.min(1)
.max(3)
.default(DEFAULT_ROWS)
.default([
{
label: "HEADING 1",
cells: ["check", "cross", "check", "cross"],
},
{
label: "HEADING 1",
cells: ["check", "empty", "check", "empty"],
},
{
label: "HEADING 2",
cells: ["check", "check", "check", "check"],
},
])
.meta({
description: "Table rows with status indicators. Prefer the `cells` array format.",
}),
@ -105,7 +104,7 @@ function StatusIcon({
crossIconUrl,
crossIconAlt,
}: {
status: "check" | "cross" | "empty";
status: any;
checkIconUrl: string | undefined;
checkIconAlt: string | undefined;
crossIconUrl: string | undefined;
@ -118,8 +117,12 @@ function StatusIcon({
if (status === "cross") {
return <img src={crossIconUrl} alt={crossIconAlt} className="h-[26px] w-[26px] object-contain" />;
}
if (status === 'check') {
return <img src={checkIconUrl} alt={checkIconAlt} className="h-[26px] w-[26px] object-contain" />;
return <img src={checkIconUrl} alt={checkIconAlt} className="h-[26px] w-[26px] object-contain" />;
}
return <p>{status}</p>
}
const ComparisonChartSlide = ({ data }: { data: Partial<SchemaType> }) => {
@ -168,7 +171,7 @@ const ComparisonChartSlide = ({ data }: { data: Partial<SchemaType> }) => {
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="px-[56px] pt-[74px]">
<div className="px-[56px] pt-[50px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
@ -237,7 +240,7 @@ const ComparisonChartSlide = ({ data }: { data: Partial<SchemaType> }) => {
{row.cells.map((status, cellIndex) => (
<div
key={cellIndex}
className="flex p-[33px] items-center justify-center border-r"
className="flex p-[23px] items-center justify-center border-r"
style={{
backgroundColor: "var(--card-color,#ffffff)",
borderColor: "var(--stroke,#c5cccb)",

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

@ -122,7 +122,7 @@ const ComparisonTableWithTextSlide = ({ data }: { data: Partial<SchemaType> }) =
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="px-[44px] pt-[46px]">
<div className="px-[44px] pt-[50px]">
<h2
className="text-[80px] font-semibold leading-[1.02] tracking-[-0.03em] text-[#0a443b]"
style={{ color: "var(--primary-color,#0a443b)" }}

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

@ -74,9 +74,8 @@ const CoverSlide = ({ data }: { data: Partial<SchemaType> }) => {
<h1
className="text-center text-[100px] font-semibold leading-[108.4%] tracking-[-3.024px]"
>
{data.titleLine1}
<br />
{data.titleLine2}
<p> {data.titleLine1}</p>
<p>{data.titleLine2} </p>
</h1>
</div>
</div>

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

@ -88,7 +88,7 @@ const ImageGallerySlide = ({ data }: { data: Partial<SchemaType> }) => {
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="relative h-[720px] w-[1280px] overflow-hidden p-[56px]"
className="relative h-[720px] w-[1280px] overflow-hidden p-[50px]"
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",

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

@ -88,7 +88,7 @@ const KpiCardsSlide = ({ data }: { data: Partial<SchemaType> }) => {
}}
/>
<div className="relative z-10 px-[66px] pt-[72px] mb-[33px]">
<div className="relative z-10 px-[66px] pt-[52px] mb-[33px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#FEFEFF]"
style={{ color: "var(--primary-text,#FEFEFF)" }}

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

@ -65,7 +65,7 @@ const MarketOpportunitySlide = ({ data }: { data: Partial<SchemaType> }) => {
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="px-[56px] pt-[72px]">
<div className="px-[56px] pt-[50px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}

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

@ -101,7 +101,7 @@ const MeetTeamSlide = ({ data }: { data: Partial<SchemaType> }) => {
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="flex items-start justify-between px-[64px] pt-[76px]">
<div className="flex items-start justify-between px-[64px] pt-[50px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
@ -125,7 +125,7 @@ const MeetTeamSlide = ({ data }: { data: Partial<SchemaType> }) => {
</div>
</div>
<div className="absolute bottom-[58px] left-[64px] grid grid-cols-4 gap-[22px]">
<div className="absolute bottom-[40px] left-[64px] grid grid-cols-4 gap-[22px]">
{members?.map((member, index) => (
<div key={index} className="w-[252px] overflow-hidden">
<img
@ -134,7 +134,7 @@ const MeetTeamSlide = ({ data }: { data: Partial<SchemaType> }) => {
className="h-[244px] w-full object-cover"
/>
<div
className="h-[154px] p-[23px]"
className="h-full p-[23px]"
style={{
backgroundColor: member.highlighted
? "var(--primary-color,#15342D)"

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

@ -53,7 +53,7 @@ const MissionVisionSlide = ({ data }: { data: Partial<SchemaType> }) => {
}}
>
<div className="grid h-full grid-cols-2 grid-rows-2">
<div className="px-[74px] pt-[76px]">
<div className="px-[74px] pt-[50px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}

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

@ -70,7 +70,7 @@ const OurServicesSlide = ({ data }: { data: Partial<SchemaType> }) => {
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className=" pt-[74px]">
<div className=" pt-[50px]">
<div className="px-[68px]">
<h2

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

@ -92,13 +92,13 @@ const PricingPlanSlide = ({ data }: { data: Partial<SchemaType> }) => {
<>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
<div
className="relative h-[720px] w-[1280px] overflow-hidden "
className="relative h-[720px] w-[1280px] overflow-hidden flex flex-col "
style={{
backgroundColor: "var(--background-color,#DAE1DE)",
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="px-[68px] pt-[76px]">
<div className="px-[68px] pt-[50px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
@ -107,7 +107,7 @@ const PricingPlanSlide = ({ data }: { data: Partial<SchemaType> }) => {
</h2>
</div>
<div className="absolute left-[86px] right-[86px] top-[252px] grid grid-cols-3 items-start">
<div className=" px-[68px] mt-16 grid grid-cols-3 items-start">
{plans?.map((plan, index) => {
const active = plan.highlighted;
return (

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

@ -88,7 +88,7 @@ const ProcessSlide = ({ data }: { data: Partial<SchemaType> }) => {
fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
}}
>
<div className="px-[66px] pt-[53px]">
<div className="px-[66px] pt-[50px]">
<h2
className="text-[80px] font-semibold leading-[108.4%] tracking-[-2.419px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
@ -128,7 +128,7 @@ const ProcessSlide = ({ data }: { data: Partial<SchemaType> }) => {
</svg>
</div>
</div>
<div className=" absolute bottom-[-110px] left-0 text-center mt-[60px]">
<div className=" absolute bottom-[-120px] left-0 text-center mt-[60px]">
<p
className="text-[20px] font-semibold tracking-[2.074px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}
@ -149,10 +149,11 @@ const ProcessSlide = ({ data }: { data: Partial<SchemaType> }) => {
return (
<div key={index} className="relative w-[230px]"
style={{
marginLeft: index === 0 ? '0' : '-10px',
marginLeft: index === 0 ? '0' : '-11px',
marginTop: '2px',
}}
>
<div className=" absolute top-[-100px] left-0 w-[224px] text-center">
<div className=" absolute top-[-140px] left-0 text-center">
<p
className="text-[20px] font-semibold tracking-[2.074px] text-[#15342D]"
style={{ color: "var(--primary-color,#15342D)" }}

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

@ -63,7 +63,7 @@ const TableOfContentSlide = ({ data }: { data: Partial<SchemaType> }) => {
}}
>
<div className="grid h-full grid-cols-[1fr_1fr]">
<div className="px-[56px] pt-[69px]" style={{ backgroundColor: PRODUCT_DARK }}>
<div className="px-[56px] pt-[50px]" style={{ backgroundColor: PRODUCT_DARK }}>
<div className={`${sections && sections?.length > 3 ? 'space-y-[28px]' : 'space-y-[40px]'}`}>
{sections?.map((section, index) => (
<div key={index} className="flex items-center gap-4 justify-between">