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

refactor(nextjs): Modern layout refactored

Browse source
This commit is contained in:
shiva raj badu 2025-07-24 00:38:16 +05:45
parent d062730c6e
commit e951404cdf
No known key found for this signature in database
12 changed files with 94 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
servers/nextjs/app/(presentation-generator)/components/TiptapTextReplacer.tsx
View file

@ -73,6 +73,25 @@ const TiptapTextReplacer: React.FC<TiptapTextReplacerProps> = ({
paddingBottom: computedStyles.paddingBottom,
paddingLeft: computedStyles.paddingLeft,
paddingRight: computedStyles.paddingRight,
borderRadius: computedStyles.borderRadius,
border: computedStyles.border,
backgroundColor: computedStyles.backgroundColor,
opacity: computedStyles.opacity,
zIndex: computedStyles.zIndex,
cursor: computedStyles.cursor,
boxShadow: computedStyles.boxShadow,
textShadow: computedStyles.textShadow,
textDecoration: computedStyles.textDecoration,
textTransform: computedStyles.textTransform,
letterSpacing: computedStyles.letterSpacing,
wordSpacing: computedStyles.wordSpacing,
textOverflow: computedStyles.textOverflow,
whiteSpace: computedStyles.whiteSpace,
wordBreak: computedStyles.wordBreak,
overflow: computedStyles.overflow,
textAlignLast: computedStyles.textAlignLast,
};
// Try to find matching data path

37
servers/nextjs/presentation-layouts/modern/1IntroSlideLayout.tsx
View file

@ -6,7 +6,7 @@ export const layoutName = "Intro Pitch Deck Slide";
export const layoutDescription =
"A visually appealing introduction slide for a pitch deck, featuring a large title, company name, date, and contact information with a modern design.";
const introPitchDeckSchema = z.object({
title: z.string().min(2).max(15).default("Pitch Deck").meta({
title: z.string().min(2).max(15).default("Pitch Deck and badu").meta({
description: "Main title of the slide",
}),
description: z.string().default("").meta({
@ -36,12 +36,13 @@ export const Schema = introPitchDeckSchema;
export type IntroPitchDeckData = z.infer<typeof introPitchDeckSchema>;
interface IntroSlideLayoutProps {
data?: Partial<IntroPitchDeckData>;
data: Partial<IntroPitchDeckData>;
}
const IntroPitchDeckSlide: React.FC<IntroSlideLayoutProps> = ({
data: slideData,
}) => {
const { title, description, contactNumber, contactAddress, contactWebsite, companyName, date } = slideData;
return (
<>
{/* Montserrat Font */}
@ -50,7 +51,7 @@ const IntroPitchDeckSlide: React.FC<IntroSlideLayoutProps> = ({
rel="stylesheet"
/>
<div
className="w-full max-w-[1280px] aspect-video mx-auto relative overflow-hidden rounded-md"
className="w-full max-w-[1280px] bg-white aspect-video mx-auto relative overflow-hidden rounded-md"
style={{
fontFamily: "Montserrat, sans-serif",
backgroundSize: "cover",
@ -71,12 +72,12 @@ const IntroPitchDeckSlide: React.FC<IntroSlideLayoutProps> = ({
transform: "translateY(-50%)",
}}
>
<h1
className="text-[9.5rem] font-bold text-[#1E4CD9] leading-none inline-block relative"
{title && <h1
className="text-7xl font-bold text-[#1E4CD9] leading-none inline-block relative"
id="pitchdeck-title"
style={{ display: "inline-block" }}
>
{slideData?.title}
{title}
{/* Blue underline */}
<span
className="block bg-[#1E4CD9] h-[4px] absolute left-0"
@ -86,23 +87,27 @@ const IntroPitchDeckSlide: React.FC<IntroSlideLayoutProps> = ({
transition: "width 0.3s",
}}
/>
</h1>
</h1>}
</div>
{/* Bottom Contact Row */}
<div className="absolute bottom-8 left-10 right-10 flex flex-wrap items-center gap-10 text-[#1E4CD9] text-sm font-medium">
<div className="flex items-center gap-2">
{contactNumber && <div className="flex items-center gap-2">
<span className="text-lg">📞</span>
<span>{slideData?.contactNumber}</span>
</div>
<div className="flex items-center gap-2">
<span>{contactNumber}</span>
</div>}
{contactAddress && <div className="flex items-center gap-2">
<span className="text-lg">📍</span>
<span>{slideData?.contactAddress}</span>
</div>
<div className="flex items-center gap-2">
<span>{contactAddress}</span>
</div>}
{contactWebsite && <div className="flex items-center gap-2">
<span className="text-lg">🌐</span>
<span>{slideData?.contactWebsite}</span>
</div>
<span>{contactWebsite}</span>
</div>}
{description && <div className="flex items-center gap-2">
<span className="text-lg">💬</span>
<span>{description}</span>
</div>}
</div>
</div>
</>

2
servers/nextjs/presentation-layouts/modern/2AboutCompanySlideLayout.tsx
View file

@ -8,7 +8,7 @@ export const layoutDescription =
"A slide layout providing an overview of the company, its background, and key information.";
const aboutCompanySlideSchema = z.object({
title: z.string().min(3).max(60).default("About Our Company").meta({
title: z.string().min(3).max(30).default("About Our Company").meta({
description: "Main title of the slide",
}),
content: z

28
servers/nextjs/presentation-layouts/modern/3ProblemSlideLayout.tsx
View file

@ -8,13 +8,13 @@ export const layoutDescription =
"A slide layout designed to present a clear problem statement, including categories of problems, company information, and an optional image.";
const problemStatementSlideSchema = z.object({
title: z.string().min(3).max(40).default("Problem").meta({
title: z.string().min(3).max(20).default("Problem").meta({
description: "Main title of the problem statement slide",
}),
description: z
.string()
.min(50)
.max(500)
.max(200)
.default(
"A problem needs to be discussed further and in detail because this problem is the main foundation in the initial development of a product, service, and decision making. Without a well-defined problem, it will have an impact on a job that is unfocused, unmanaged, and less relevant.",
)
@ -27,7 +27,7 @@ const problemStatementSlideSchema = z.object({
title: z.string().min(3).max(30).meta({
description: "Title of the problem category",
}),
description: z.string().min(20).max(200).meta({
description: z.string().min(20).max(100).meta({
description: "Description of the problem category",
}),
icon: IconSchema.optional().meta({
@ -58,6 +58,26 @@ const problemStatementSlideSchema = z.object({
__icon_query__: "trending up costs chart",
},
},
{
title: "Inefficiency",
description:
"Businesses struggle to find digital tools that meet their needs, causing operational slowdowns.",
icon: {
__icon_url__:
"https://cdn.jsdelivr.net/npm/lucide@latest/dist/esm/icons/alert-triangle.js",
__icon_query__: "warning alert inefficiency",
},
},
{
title: "Inefficiency",
description:
"Businesses struggle to find digital tools that meet their needs, causing operational slowdowns.",
icon: {
__icon_url__:
"https://cdn.jsdelivr.net/npm/lucide@latest/dist/esm/icons/alert-triangle.js",
__icon_query__: "warning alert inefficiency",
},
},
])
.meta({
description:
@ -111,7 +131,7 @@ const ProblemStatementSlideLayout: React.FC<
{/* Left side - Main Problem */}
<div className="flex-1 pr-16 flex flex-col justify-center">
<div className="flex flex-col items-start justify-center h-full">
<h2 className="text-7xl font-bold text-white mb-8 leading-tight text-left">
<h2 className="text-5xl font-bold text-white mb-8 leading-tight text-left">
{slideData?.title}
</h2>

6
servers/nextjs/presentation-layouts/modern/4SolutionSlideLayout.tsx
View file

@ -14,7 +14,7 @@ const solutionSlideSchema = z.object({
date: z.string().min(5).max(50).default("June 13, 2038").meta({
description: "Date displayed in header",
}),
title: z.string().min(3).max(40).default("Solution").meta({
title: z.string().min(3).max(25).default("Businesses struggle").meta({
description: "Main title of the slide",
}),
mainDescription: z
@ -22,7 +22,7 @@ const solutionSlideSchema = z.object({
.min(20)
.max(300)
.default(
"Show that we offer a solution that solves the problems previously described and identified. Make sure that the solutions we offer uphold the values of effectiveness, efficiency, and are highly relevant to the market situation and society.",
"Show that we offer a solution that solves the problems previously described and identified. Make sure that the solutions we offer uphold the values of effectiveness, efficiency, and are highly relevant to the market situation and societyshiva raj badu is here and what is hsd sdksdf klfdslkf lkflkfsldkf.",
)
.meta({
description: "Main content text describing the solution",
@ -124,7 +124,7 @@ const SolutionSlideLayout: React.FC<SolutionSlideLayoutProps> = ({
<div className="flex justify-center items-center h-full px-16 pb-16 gap-4">
{/* Title and Description */}
<div className="w-full flex flex-col items-start mb-4">
<h1 className="text-7xl font-bold text-blue-600 mb-8 leading-tight text-left">
<h1 className="text-6xl font-bold text-blue-600 mb-8 leading-tight text-left">
{slideData?.title}
</h1>
<p className="text-blue-600 text-lg leading-relaxed font-normal mb-12 max-w-lg text-left">

6
servers/nextjs/presentation-layouts/modern/5ProductOverviewSlideLayout.tsx
View file

@ -33,7 +33,7 @@ const productOverviewSlideSchema = z.object({
title: z.string().min(3).max(50).meta({
description: "Product title",
}),
description: z.string().min(30).max(200).meta({
description: z.string().min(30).max(140).meta({
description: "Product description",
}),
image: ImageSchema.meta({
@ -45,7 +45,7 @@ const productOverviewSlideSchema = z.object({
}),
)
.min(2)
.max(4)
.max(2)
.default([
{
title: "Internet of Things",
@ -121,7 +121,7 @@ const ProductOverviewSlideLayout: React.FC<ProductOverviewSlideLayoutProps> = ({
<div className="flex h-full px-16 pb-16">
{/* Title and Description on the left */}
<div className="flex flex-col items-start justify-center w-[48%] pr-8">
<h1 className="text-7xl font-bold text-blue-600 mb-8 leading-tight text-left">
<h1 className="text-6xl font-bold text-blue-600 mb-8 leading-tight text-left">
{slideData?.title}
</h1>
<p className="text-blue-600 text-lg leading-relaxed font-normal mb-12 max-w-lg text-left">

12
servers/nextjs/presentation-layouts/modern/6MarketSizeSlideLayout.tsx
View file

@ -8,10 +8,10 @@ export const layoutDescription =
"A professional slide layout designed to present market size statistics, including TAM, SAM, and SOM, with a world map and key metrics.";
const marketSizeSlideSchema = z.object({
title: z.string().default("Market Size").meta({
title: z.string().min(3).max(15).default("Market Size").meta({
description: "Main slide title",
}),
companyName: z.string().default("Rimberio").meta({
companyName: z.string().min(3).max(30).default("Rimberio").meta({
description: "Presenter's name",
}),
date: z.string().default("June 13, 2038").meta({
@ -25,9 +25,9 @@ const marketSizeSlideSchema = z.object({
marketStats: z
.array(
z.object({
label: z.string(),
value: z.string(),
description: z.string(),
label: z.string().min(3).max(30),
value: z.string().min(3).max(30),
description: z.string().min(3).max(130),
}),
)
.min(1)
@ -101,7 +101,7 @@ const MarketSizeSlideLayout: React.FC<MarketSizeSlideProps> = ({
<div className="flex flex-col items-left justify-center h-full w-full">
{/* Move the title down to align with the top of the market stats */}
<h1
className="text-7xl font-bold text-blue-600 mb-8 leading-tight text-left"
className="text-6xl font-bold text-blue-600 mb-8 leading-tight text-left"
style={{ marginTop: "112px" }} // 112px matches top-36 (9rem) of stats
>
{slideData?.title || "Market Size"}

4
servers/nextjs/presentation-layouts/modern/7MarketValidationSlideLayout.tsx
View file

@ -19,7 +19,7 @@ const marketValidationSchema = z.object({
date: z.string().min(5).max(50).default("June 13, 2038").meta({
description: "Date in header",
}),
title: z.string().min(3).max(40).default("Market Validation").meta({
title: z.string().min(3).max(20).default("Market Validation").meta({
description: "Title of the slide",
}),
description: z
@ -108,7 +108,7 @@ const MarketValidationSlideLayout: React.FC<
<div className="px-16 py-16 flex h-full gap-8">
{/* Left Column */}
<div className="flex-1 pr-12 flex flex-col justify-center">
<h1 className="text-7xl font-bold text-blue-600 mb-8 leading-tight text-left">
<h1 className="text-6xl font-bold text-blue-600 mb-8 leading-tight text-left">
{slideData?.title}
</h1>
<p className="text-blue-600 text-sm leading-relaxed font-normal mb-12 max-w-lg text-left">

4
servers/nextjs/presentation-layouts/modern/8CompanyTractionSlideLayout.tsx
View file

@ -23,6 +23,8 @@ const tractionSchema = z.object({
title: z.string().default("Company Traction"),
description: z
.string()
.min(3)
.max(200)
.default(
"Traction is a period where the company is feeling momentum during its development period. If traction momentum is not harnessed, sales figures can decline and the customer base can shrink. In general, companies will judge success by the amount of revenue and new customers they receive.",
),
@ -176,7 +178,7 @@ const CompanyTractionSlideLayout: React.FC<Props> = ({ data }) => {
<div className="px-16 py-16 flex h-full gap-8">
{/* Left Column - Chart with Title Below */}
<div className="flex-1 pr-12 flex flex-col justify-center">
<h1 className="text-7xl font-bold text-blue-600 mb-4 leading-tight text-left">
<h1 className="text-6xl font-bold text-blue-600 mb-4 leading-tight text-left">
{data?.title}
</h1>
<div className="bg-white rounded-lg shadow p-4 mb-8">

14
servers/nextjs/presentation-layouts/modern/9BusinessModelSlideLayout.tsx
View file

@ -19,7 +19,7 @@ export const layoutDescription =
const businessModelSchema = z.object({
companyName: z.string().default("presenton"),
date: z.string().default("June 13, 2038"),
title: z.string().default("Business Model"),
title: z.string().min(3).max(20).default("Business Model"),
description: z
.string()
.default(
@ -28,8 +28,8 @@ const businessModelSchema = z.object({
cacChart: z
.array(
z.object({
label: z.string(),
percentage: z.number(),
label: z.string().min(3).max(20),
percentage: z.number().min(0).max(100),
}),
)
.default([
@ -50,9 +50,9 @@ const BusinessModelSlide: React.FC<Props> = ({ data }) => {
data?.cacChart && Array.isArray(data.cacChart) && data.cacChart.length > 0
? data.cacChart
: [
{ label: "Internet of Things", percentage: 70 },
{ label: "Artificial Intelligence", percentage: 60 },
];
{ label: "Internet of Things", percentage: 70 },
{ label: "Artificial Intelligence", percentage: 60 },
];
return (
<>
@ -76,7 +76,7 @@ const BusinessModelSlide: React.FC<Props> = ({ data }) => {
<div className="px-16 py-16 flex h-full gap-8">
{/* Left Column - Chart with Title Below */}
<div className="flex-1 pr-12 flex flex-col justify-center">
<h1 className="text-7xl font-bold text-blue-600 mb-4 leading-tight text-left">
<h1 className="text-6xl font-bold text-blue-600 mb-4 leading-tight text-left">
{data?.title}
</h1>
<div className="bg-white rounded-lg shadow p-4 mb-8">

2
servers/nextjs/presentation-layouts/modern/z10TeamSlideLayout.tsx
View file

@ -24,7 +24,7 @@ const teamMemberSchema = z.object({
});
const modernTeamSlideSchema = z.object({
title: z.string().min(3).max(40).default("Our Team").meta({
title: z.string().min(3).max(20).default("Our Team").meta({
description: "Main title of the slide",
}),
subtitle: z.string().min(10).max(120).optional().meta({

15
servers/nextjs/presentation-layouts/modern/z11ThankYouSlideLayout.tsx
View file

@ -13,7 +13,7 @@ const thankYouSlideSchema = z.object({
subtitle: z.string().min(0).max(100).default("").meta({
description: "Optional subtitle or closing remark",
}),
companyName: z.string().min(2).max(50).default("Rimberio").meta({
companyName: z.string().min(2).max(30).default("Rimberio").meta({
description: "Company name displayed in header",
}),
date: z.string().min(5).max(30).default("June 13, 2038").meta({
@ -73,11 +73,8 @@ const ThankYouSlideLayout: React.FC<ThankYouSlideLayoutProps> = ({ data }) => {
{/* Thank You and description */}
<div className="flex flex-col items-start w-full pt-16">
<h1
className="font-bold text-white mb-6 mt-8 text-left w-full"
style={{
fontSize: "8.5rem", // Increase size beyond text-7xl
lineHeight: 1.05,
}}
className="font-bold text-8xl text-white mb-6 mt-8 text-left w-full"
>
{data?.title || "Thank You!"}
</h1>
@ -86,11 +83,7 @@ const ThankYouSlideLayout: React.FC<ThankYouSlideLayoutProps> = ({ data }) => {
{data.subtitle}
</div>
)}
<div className="text-xl text-white text-left w-full max-w-3xl mb-0">
Write down your hopes for the future of your company. Don't forget
to thank the company for the opportunity and convince related
parties to support your company.
</div>
</div>
{/* Footer area */}