From e951404cdfe4d22eb1b1f98929a7baf5979e9e06 Mon Sep 17 00:00:00 2001 From: shiva raj badu Date: Thu, 24 Jul 2025 00:38:16 +0545 Subject: [PATCH] refactor(nextjs): Modern layout refactored --- .../components/TiptapTextReplacer.tsx | 19 ++++++++++ .../modern/1IntroSlideLayout.tsx | 37 +++++++++++-------- .../modern/2AboutCompanySlideLayout.tsx | 2 +- .../modern/3ProblemSlideLayout.tsx | 28 ++++++++++++-- .../modern/4SolutionSlideLayout.tsx | 6 +-- .../modern/5ProductOverviewSlideLayout.tsx | 6 +-- .../modern/6MarketSizeSlideLayout.tsx | 12 +++--- .../modern/7MarketValidationSlideLayout.tsx | 4 +- .../modern/8CompanyTractionSlideLayout.tsx | 4 +- .../modern/9BusinessModelSlideLayout.tsx | 14 +++---- .../modern/z10TeamSlideLayout.tsx | 2 +- .../modern/z11ThankYouSlideLayout.tsx | 15 ++------ 12 files changed, 94 insertions(+), 55 deletions(-) diff --git a/servers/nextjs/app/(presentation-generator)/components/TiptapTextReplacer.tsx b/servers/nextjs/app/(presentation-generator)/components/TiptapTextReplacer.tsx index 1e573de8..266671f7 100644 --- a/servers/nextjs/app/(presentation-generator)/components/TiptapTextReplacer.tsx +++ b/servers/nextjs/app/(presentation-generator)/components/TiptapTextReplacer.tsx @@ -73,6 +73,25 @@ const TiptapTextReplacer: React.FC = ({ 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 diff --git a/servers/nextjs/presentation-layouts/modern/1IntroSlideLayout.tsx b/servers/nextjs/presentation-layouts/modern/1IntroSlideLayout.tsx index ff02a905..72df461d 100644 --- a/servers/nextjs/presentation-layouts/modern/1IntroSlideLayout.tsx +++ b/servers/nextjs/presentation-layouts/modern/1IntroSlideLayout.tsx @@ -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; interface IntroSlideLayoutProps { - data?: Partial; + data: Partial; } const IntroPitchDeckSlide: React.FC = ({ data: slideData, }) => { + const { title, description, contactNumber, contactAddress, contactWebsite, companyName, date } = slideData; return ( <> {/* Montserrat Font */} @@ -50,7 +51,7 @@ const IntroPitchDeckSlide: React.FC = ({ rel="stylesheet" />
= ({ transform: "translateY(-50%)", }} > -

- {slideData?.title} + {title} {/* Blue underline */} = ({ transition: "width 0.3s", }} /> -

+ }
{/* Bottom Contact Row */}
-
+ {contactNumber &&
📞 - {slideData?.contactNumber} -
-
+ {contactNumber} +
} + {contactAddress &&
📍 - {slideData?.contactAddress} -
-
+ {contactAddress} +
} + {contactWebsite &&
🌐 - {slideData?.contactWebsite} -
+ {contactWebsite} +
} + {description &&
+ 💬 + {description} +
}
diff --git a/servers/nextjs/presentation-layouts/modern/2AboutCompanySlideLayout.tsx b/servers/nextjs/presentation-layouts/modern/2AboutCompanySlideLayout.tsx index d08f439d..43029265 100644 --- a/servers/nextjs/presentation-layouts/modern/2AboutCompanySlideLayout.tsx +++ b/servers/nextjs/presentation-layouts/modern/2AboutCompanySlideLayout.tsx @@ -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 diff --git a/servers/nextjs/presentation-layouts/modern/3ProblemSlideLayout.tsx b/servers/nextjs/presentation-layouts/modern/3ProblemSlideLayout.tsx index 6b244f53..280d2fb3 100644 --- a/servers/nextjs/presentation-layouts/modern/3ProblemSlideLayout.tsx +++ b/servers/nextjs/presentation-layouts/modern/3ProblemSlideLayout.tsx @@ -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 */}
-

+

{slideData?.title}

diff --git a/servers/nextjs/presentation-layouts/modern/4SolutionSlideLayout.tsx b/servers/nextjs/presentation-layouts/modern/4SolutionSlideLayout.tsx index c8f02e06..6879f1c6 100644 --- a/servers/nextjs/presentation-layouts/modern/4SolutionSlideLayout.tsx +++ b/servers/nextjs/presentation-layouts/modern/4SolutionSlideLayout.tsx @@ -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 = ({
{/* Title and Description */}
-

+

{slideData?.title}

diff --git a/servers/nextjs/presentation-layouts/modern/5ProductOverviewSlideLayout.tsx b/servers/nextjs/presentation-layouts/modern/5ProductOverviewSlideLayout.tsx index 037a8907..fdca64fe 100644 --- a/servers/nextjs/presentation-layouts/modern/5ProductOverviewSlideLayout.tsx +++ b/servers/nextjs/presentation-layouts/modern/5ProductOverviewSlideLayout.tsx @@ -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 = ({

{/* Title and Description on the left */}
-

+

{slideData?.title}

diff --git a/servers/nextjs/presentation-layouts/modern/6MarketSizeSlideLayout.tsx b/servers/nextjs/presentation-layouts/modern/6MarketSizeSlideLayout.tsx index fcc375e1..41c78820 100644 --- a/servers/nextjs/presentation-layouts/modern/6MarketSizeSlideLayout.tsx +++ b/servers/nextjs/presentation-layouts/modern/6MarketSizeSlideLayout.tsx @@ -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 = ({

{/* Move the title down to align with the top of the market stats */}

{slideData?.title || "Market Size"} diff --git a/servers/nextjs/presentation-layouts/modern/7MarketValidationSlideLayout.tsx b/servers/nextjs/presentation-layouts/modern/7MarketValidationSlideLayout.tsx index 540c5386..6c2eb84f 100644 --- a/servers/nextjs/presentation-layouts/modern/7MarketValidationSlideLayout.tsx +++ b/servers/nextjs/presentation-layouts/modern/7MarketValidationSlideLayout.tsx @@ -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<
{/* Left Column */}
-

+

{slideData?.title}

diff --git a/servers/nextjs/presentation-layouts/modern/8CompanyTractionSlideLayout.tsx b/servers/nextjs/presentation-layouts/modern/8CompanyTractionSlideLayout.tsx index 56905cde..e2f93dd8 100644 --- a/servers/nextjs/presentation-layouts/modern/8CompanyTractionSlideLayout.tsx +++ b/servers/nextjs/presentation-layouts/modern/8CompanyTractionSlideLayout.tsx @@ -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 = ({ data }) => {

{/* Left Column - Chart with Title Below */}
-

+

{data?.title}

diff --git a/servers/nextjs/presentation-layouts/modern/9BusinessModelSlideLayout.tsx b/servers/nextjs/presentation-layouts/modern/9BusinessModelSlideLayout.tsx index 199948b9..f92d80cc 100644 --- a/servers/nextjs/presentation-layouts/modern/9BusinessModelSlideLayout.tsx +++ b/servers/nextjs/presentation-layouts/modern/9BusinessModelSlideLayout.tsx @@ -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 = ({ 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 = ({ data }) => {
{/* Left Column - Chart with Title Below */}
-

+

{data?.title}

diff --git a/servers/nextjs/presentation-layouts/modern/z10TeamSlideLayout.tsx b/servers/nextjs/presentation-layouts/modern/z10TeamSlideLayout.tsx index 394e8c14..b3e37c34 100644 --- a/servers/nextjs/presentation-layouts/modern/z10TeamSlideLayout.tsx +++ b/servers/nextjs/presentation-layouts/modern/z10TeamSlideLayout.tsx @@ -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({ diff --git a/servers/nextjs/presentation-layouts/modern/z11ThankYouSlideLayout.tsx b/servers/nextjs/presentation-layouts/modern/z11ThankYouSlideLayout.tsx index 805aeae8..aa85af2d 100644 --- a/servers/nextjs/presentation-layouts/modern/z11ThankYouSlideLayout.tsx +++ b/servers/nextjs/presentation-layouts/modern/z11ThankYouSlideLayout.tsx @@ -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 = ({ data }) => { {/* Thank You and description */}

{data?.title || "Thank You!"}

@@ -86,11 +83,7 @@ const ThankYouSlideLayout: React.FC = ({ data }) => { {data.subtitle}
)} -
- 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. -
+
{/* Footer area */}