From 0c35f2107cd2c99e9d8f5342f348a7b517e39b81 Mon Sep 17 00:00:00 2001 From: shiva raj badu Date: Wed, 23 Jul 2025 21:18:08 +0545 Subject: [PATCH] style(nextjs): New layouts styles & description tuned --- .../components/TiptapText.tsx | 2 +- .../components/TiptapTextReplacer.tsx | 3 +- .../presentation/components/Header.tsx | 6 +- .../components/PresentationPage.tsx | 63 +++- .../presentation/components/SidePanel.tsx | 6 +- .../presentation/components/SortableSlide.tsx | 19 +- .../pitch-deck/AboutUsSlide.tsx | 99 +++--- .../pitch-deck/BusinessModelSlide.tsx | 227 ++++++------- .../pitch-deck/HelloFriendsSlide.tsx | 120 +++---- .../pitch-deck/MarketSizeSlide.tsx | 173 +++++----- .../pitch-deck/OurServiceSlide.tsx | 185 +++++------ .../pitch-deck/ProblemsSlide.tsx | 104 +++--- .../pitch-deck/SolutionsSlide.tsx | 209 ++++++------ .../pitch-deck/StatisticCircularSlide.tsx | 59 ++-- .../pitch-deck/StatisticDualChartSlide.tsx | 238 +++++++------- .../pitch-deck/StatisticSlide.tsx | 307 +++++++++--------- .../pitch-deck/TableOfContentsSlide.tsx | 188 ++++++----- .../pitch-deck/TestimonialSlide.tsx | 250 +++++++------- .../pitch-deck/ThankYouSlide.tsx | 161 ++++----- .../pitch-deck/TitleSlide.tsx | 107 +++--- .../pitch-deck/WhatWeBelieveSlide.tsx | 199 ++++++------ .../pitch-deck/setting.json | 2 +- 22 files changed, 1367 insertions(+), 1360 deletions(-) diff --git a/servers/nextjs/app/(presentation-generator)/components/TiptapText.tsx b/servers/nextjs/app/(presentation-generator)/components/TiptapText.tsx index d7958481..86645210 100644 --- a/servers/nextjs/app/(presentation-generator)/components/TiptapText.tsx +++ b/servers/nextjs/app/(presentation-generator)/components/TiptapText.tsx @@ -61,7 +61,7 @@ const TiptapText: React.FC = ({ return (
-
+
)} @@ -139,12 +121,12 @@ const HelloFriendsSlide = ({ data }: { data: Partial }) => {
{/* Overlapping Circular Office Image */} - {officeImage?.__image_url__ && ( + {speakerImage?.__image_url__ && (
{officeImage.__image_prompt__}
diff --git a/servers/nextjs/presentation-layouts/pitch-deck/MarketSizeSlide.tsx b/servers/nextjs/presentation-layouts/pitch-deck/MarketSizeSlide.tsx index be6daa20..4f3f8862 100644 --- a/servers/nextjs/presentation-layouts/pitch-deck/MarketSizeSlide.tsx +++ b/servers/nextjs/presentation-layouts/pitch-deck/MarketSizeSlide.tsx @@ -5,65 +5,63 @@ import { ImageSchema, IconSchema } from "../defaultSchemes"; // Schema definition export const Schema = z.object({ - mainTitle: z.string() - .min(5) - .max(15) - .default("MARKET SIZE") + sectionTitle: z.string() + .min(3) + .max(30) + .default("MARKET ANALYSIS") .meta({ - description: "Main title for the market size section", + description: "Main section heading - can be 'Market Size', 'Market Opportunity', 'Industry Overview', or similar", }), - subtitle: z.string() + sectionSubtitle: z.string() .min(10) - .max(25) - .default("OUR CLIENTS COME FROM EVERYWHERE") + .max(60) + .default("UNDERSTANDING THE OPPORTUNITY LANDSCAPE") .meta({ - description: "Subtitle describing global reach", + description: "Supporting subtitle that frames the market discussion and opportunity scope", }), - globalDescription: z.string() - .min(50) - .max(200) - .default("With a global perspective, our marketing agency has proudly served multinational clients, delivering tailored strategies that transcend borders and cultures, ensuring consistent brand success on a worldwide scale.") - .meta({ - description: "Description of global market presence", - }), - - worldMapImage: ImageSchema.default({ - __image_url__: "https://images.unsplash.com/photo-1516245834210-c4c142787335?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80", - __image_prompt__: "World map with location pins showing global business presence" - }).meta({ - description: "World map image showing global reach", - }), - marketDefinitions: z.array(z.object({ - acronym: z.string().min(2).max(10), - fullName: z.string().min(10).max(50), - description: z.string().min(50).max(300) - })).min(3).max(3).default([ + marketType: z.string().min(3).max(30), + marketDescription: z.string().min(20).max(150), + marketValue: z.string().min(3).max(25).optional() + })).min(2).max(4).default([ { - acronym: "TAM", - fullName: "Total Available Market (TAM)", - description: "The Total Available Market (TAM) represents the entire potential demand for our product or service, reflecting the vast landscape of opportunities awaiting exploration and market capture." + marketType: "Total Addressable Market (TAM)", + marketDescription: "The overall revenue opportunity available if we achieved 100% market share across all segments and geographies.", + marketValue: "$50B" }, { - acronym: "SAM", - fullName: "Serviceable Available Market (SAM)", - description: "The Serviceable Available Market (SAM) represents the specific segment of the Total Available Market where our product or service can be realistically and effectively offered, defining the target audience for our strategic market approach." + marketType: "Serviceable Addressable Market (SAM)", + marketDescription: "The portion of TAM targeted by our products and services within our geographic reach.", + marketValue: "$15B" }, { - acronym: "SOM", - fullName: "Serviceable Obtainable Market (SOM)", - description: "The Serviceable Obtainable Market (SOM) signifies the realistic and achievable portion of the Serviceable Available Market where our business aims to capture market share, emphasizing our practical and strategic approach to market penetration." + marketType: "Serviceable Obtainable Market (SOM)", + marketDescription: "The portion of SAM that we can realistically capture based on our resources and market conditions.", + marketValue: "$3B" } ]).meta({ - description: "Market size definitions for TAM, SAM, and SOM", + description: "List of market definitions and opportunities with descriptions and potential values", + }), + + visualRepresentation: ImageSchema.default({ + __image_url__: "https://images.unsplash.com/photo-1597149962419-0d900ac2b46c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", + __image_prompt__: "World map showing global market reach and geographic distribution" + }).meta({ + description: "Visual that represents market scope - could be a world map, chart, or geographic visualization", }), showYellowUnderline: z.boolean() .default(true) .meta({ - description: "Show yellow decorative underline", + description: "Whether to display the decorative yellow underline accent", + }), + + showVisualAccents: z.boolean() + .default(true) + .meta({ + description: "Whether to display decorative visual accent elements", }), }) @@ -73,81 +71,84 @@ type SchemaType = z.infer; // Component definition const MarketSizeSlide = ({ data }: { data: Partial }) => { - const { mainTitle, subtitle, globalDescription, worldMapImage, marketDefinitions, showYellowUnderline } = data; + const { sectionTitle, sectionSubtitle, marketDefinitions, visualRepresentation, showYellowUnderline, showVisualAccents } = data; return (
{/* Main Content Area */}
- {/* Left Side - Teal Background with Map */} -
+ {/* Left Side - Content */} +
{/* Title Section */}
- {mainTitle && ( -

- {mainTitle} + {sectionTitle && ( +

+ {sectionTitle}

)} - {subtitle && ( + {sectionSubtitle && (

- {subtitle} + {sectionSubtitle}

)} {/* Yellow Decorative Underline */} {showYellowUnderline && ( -
+
)}
- {/* World Map Image */} - {worldMapImage?.__image_url__ && ( -
-
- {worldMapImage.__image_prompt__} -
-
- )} - - {/* Global Description */} - {globalDescription && ( -
-

- {globalDescription} -

-
- )} -
- - {/* Right Side - White Background with Market Definitions */} -
- {/* Market Definitions */} - {marketDefinitions && marketDefinitions.length >= 3 && ( -
- {marketDefinitions.slice(0, 3).map((definition, index) => ( -
- {/* Header with rounded background */} -
-

- {definition.fullName} + {/* Market Definitions List */} + {marketDefinitions && marketDefinitions.length > 0 && ( +
+ {marketDefinitions.map((market, index) => ( +
+
+

+ {market.marketType}

+ {market.marketValue && ( + + {market.marketValue} + + )}
- - {/* Description */} -

- {definition.description} +

+ {market.marketDescription}

))}
)}

+ + {/* Right Side - Visual Representation */} +
+ {/* Visual Accents */} + {showVisualAccents && ( + <> + {/* Decorative circles */} +
+
+ + )} + + {/* Visual Representation */} + {visualRepresentation?.__image_url__ && ( +
+ {visualRepresentation.__image_prompt__} +
+ )} +
+ + {/* Bottom accent strip */} +
); }; diff --git a/servers/nextjs/presentation-layouts/pitch-deck/OurServiceSlide.tsx b/servers/nextjs/presentation-layouts/pitch-deck/OurServiceSlide.tsx index 4a7f7e45..15c9dedf 100644 --- a/servers/nextjs/presentation-layouts/pitch-deck/OurServiceSlide.tsx +++ b/servers/nextjs/presentation-layouts/pitch-deck/OurServiceSlide.tsx @@ -5,62 +5,39 @@ import { ImageSchema, IconSchema } from "../defaultSchemes"; // Schema definition export const Schema = z.object({ - mainTitle: z.string() - .min(5) - .max(10) - .default("OUR SERVICE") + sectionTitle: z.string() + .min(3) + .max(30) + .default("OUR SERVICES") .meta({ - description: "Main title for the service section", + description: "Main section heading - can be 'Our Services', 'What We Offer', 'Service Portfolio', or similar", }), - - - services: z.array(z.object({ - title: z.string().min(5).max(40), - description: z.string().min(30).max(100), - image: ImageSchema - })).min(3).max(3).default([ - { - title: "Strategic Brand Development", - description: "Our agency specializes in strategic brand development, ensuring that your brand not only resonates with your target audience but also stands out in a crowded market.", - image: { - __image_url__: "https://images.unsplash.com/photo-1553877522-43269d4ea984?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", - __image_prompt__: "Business team working on brand strategy with documents and tablet" - } - }, - { - title: "Data-Driven Marketing", - description: "Our data-driven approach ensures that every campaign is backed by insights, maximizing ROI and driving tangible results.", - image: { - __image_url__: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", - __image_prompt__: "Business analytics with charts, graphs and keyboard on desk" - } - }, - { - title: "Creative Content Production", - description: "Content is king, and our agency excels in producing creative, engaging, and impactful content that resonates with your audience.", - image: { - __image_url__: "https://images.unsplash.com/photo-1542744094-3a31f272c490?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", - __image_prompt__: "Creative professional working on laptop with design and content" - } - } - ]).meta({ - description: "Three main services with titles, descriptions and images", - }), - - companyLogo: ImageSchema.default({ - __image_url__: "https://via.placeholder.com/40x40/FFFFFF/1D9A8A?text=C", - __image_prompt__: "Clean modern company logo icon in white" - }).meta({ - description: "Company logo icon", - }), - - companyName: z.string() - .min(2) - .max(25) - .default("Company Name") + sectionSubtitle: z.string() + .min(10) + .max(60) + .default("COMPREHENSIVE SOLUTIONS TAILORED FOR SUCCESS") .meta({ - description: "Company name for branding", + description: "Supporting subtitle that describes the service approach or value proposition", + }), + + serviceHighlight: ImageSchema.default({ + __image_url__: "https://images.unsplash.com/photo-1556761175-b413da4baf72?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", + __image_prompt__: "Professional service delivery or team working on client solutions" + }).meta({ + description: "Visual that represents service delivery, expertise, or client collaboration", + }), + + showVisualAccents: z.boolean() + .default(true) + .meta({ + description: "Whether to display decorative visual accent elements", + }), + + showColorBlocks: z.boolean() + .default(true) + .meta({ + description: "Whether to show colored background sections for visual hierarchy", }), }) @@ -70,74 +47,60 @@ type SchemaType = z.infer; // Component definition const OurServiceSlide = ({ data }: { data: Partial }) => { - const { mainTitle, services, companyLogo, companyName } = data; + const { sectionTitle, sectionSubtitle, serviceHighlight, showVisualAccents, showColorBlocks } = data; return ( -
- {/* Header with Title and Company Branding */} -
- {/* Top Section */} -
- {/* Left - Title */} -
- {mainTitle && ( -

- {mainTitle} -

- )} -
+
+ {/* Main Content Area */} +
+ {/* Left - Title */} +
+ {sectionTitle && ( +

+ {sectionTitle} +

+ )} - {/* Right - Teal Background with Company Branding */} -
-
- {companyLogo?.__image_url__ && ( -
- {companyLogo.__image_prompt__} -
- )} - {companyName && ( - - {companyName} - - )} -
-
+ {sectionSubtitle && ( +

+ {sectionSubtitle} +

+ )} + + {/* Visual Accents */} + {showVisualAccents && ( + <> + {/* Decorative elements */} +
+
+ + )}
- {/* Bottom Section - Services Grid */} -
- {services && services.length >= 3 && ( -
- {services.slice(0, 3).map((service, index) => ( -
- {/* Service Image */} -
- {service.image.__image_prompt__} -
- - {/* Service Content */} -
-

- {service.title} -

-

- {service.description} -

-
-
- ))} + {/* Right - Service Highlight */} +
+ {/* Service Highlight Image */} + {serviceHighlight?.__image_url__ && ( +
+ {serviceHighlight.__image_prompt__}
)} + + {/* Color overlay if enabled */} + {showColorBlocks && ( +
+ )}
+ + {/* Bottom accent strip */} + {showColorBlocks && ( +
+ )}
); }; diff --git a/servers/nextjs/presentation-layouts/pitch-deck/ProblemsSlide.tsx b/servers/nextjs/presentation-layouts/pitch-deck/ProblemsSlide.tsx index 1060cae6..ad981a77 100644 --- a/servers/nextjs/presentation-layouts/pitch-deck/ProblemsSlide.tsx +++ b/servers/nextjs/presentation-layouts/pitch-deck/ProblemsSlide.tsx @@ -5,63 +5,63 @@ import { ImageSchema, IconSchema } from "../defaultSchemes"; // Schema definition export const Schema = z.object({ - mainTitle: z.string() - .min(5) - .max(20) - .default("PROBLEMS") - .meta({ - description: "Main title for the problems section", - }), - - subtitle: z.string() - .min(10) + sectionTitle: z.string() + .min(3) .max(25) - .default("WE WILL SOLVE THE PROBLEMS") + .default("CHALLENGES") .meta({ - description: "Subtitle describing the section", + description: "Main section heading - can be 'Problems', 'Challenges', 'Issues', or similar", }), - problems: z.array(z.object({ - number: z.string().min(1).max(3), - title: z.string().min(5).max(40), - description: z.string().min(20).max(200) - })).min(2).max(3).default([ + sectionSubtitle: z.string() + .min(10) + .max(50) + .default("KEY CHALLENGES TO ADDRESS") + .meta({ + description: "Supporting subtitle that frames the problem discussion", + }), + + challengeItems: z.array(z.object({ + itemNumber: z.string().min(1).max(3), + challengeTitle: z.string().min(5).max(40), + challengeDescription: z.string().min(20).max(200) + })).min(2).max(4).default([ { - number: "01", - title: "Lack of Brand Visibility", - description: "Many businesses struggle with gaining visibility in a saturated market. Our solution involves a comprehensive analysis of your brand, audience, and competitors, leading to the development of a strategic branding." + itemNumber: "01", + challengeTitle: "Inefficient Processes", + challengeDescription: "Current workflows and systems lack optimization, leading to wasted resources and reduced productivity across all operational areas." }, { - number: "02", - title: "Ineffective Digital Presence", - description: "Weak online presence can hinder business growth. Our agency offers an integrated approach to digital marketing, covering SEO optimization, social media management, content marketing, and more." + itemNumber: "02", + challengeTitle: "Limited Scalability", + challengeDescription: "Existing infrastructure and methodologies cannot accommodate growth, creating bottlenecks that hinder expansion and progress." }, { - number: "03", - title: "Lack of Targeted Lead Generation", - description: "Many businesses struggle with generating quality leads that convert into customers. Our solution involves a meticulous understanding of your target audience, allowing us to develop highly targeted lead generation campaigns." + itemNumber: "03", + challengeTitle: "Resource Constraints", + challengeDescription: "Limited availability of key resources including time, budget, and skilled personnel creates barriers to achieving desired outcomes." } ]).meta({ - description: "List of problems with numbers, titles and descriptions", + description: "List of key challenges or problems with numbered identification and detailed descriptions", }), - workspaceImage: ImageSchema.default({ + supportingVisual: ImageSchema.default({ __image_url__: "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", - __image_prompt__: "Clean modern workspace with laptop, plant, and documents on desk" + __image_prompt__: "Professional workspace showing analysis and problem-solving activities" }).meta({ - description: "Workspace image showing business environment", + description: "Visual that supports the problem discussion - could show analysis, challenges, or work environment", }), - showDecoCircle: z.boolean() + showVisualAccents: z.boolean() .default(true) .meta({ - description: "Show decorative circle element", + description: "Whether to display decorative visual accent elements", }), - showTealAccent: z.boolean() + showColorBlocks: z.boolean() .default(true) .meta({ - description: "Show teal accent block", + description: "Whether to show colored accent blocks for visual hierarchy", }), }) @@ -71,7 +71,7 @@ type SchemaType = z.infer; // Component definition const ProblemsSlide = ({ data }: { data: Partial }) => { - const { mainTitle, subtitle, problems, workspaceImage, showDecoCircle, showTealAccent } = data; + const { sectionTitle, sectionSubtitle, challengeItems, supportingVisual, showVisualAccents, showColorBlocks } = data; return (
@@ -81,38 +81,38 @@ const ProblemsSlide = ({ data }: { data: Partial }) => {
{/* Title Section */}
- {mainTitle && ( -

- {mainTitle} + {sectionTitle && ( +

+ {sectionTitle}

)} - {subtitle && ( + {sectionSubtitle && (

- {subtitle} + {sectionSubtitle}

)}
- {/* Problems List */} - {problems && problems.length > 0 && ( + {/* Challenge Items List */} + {challengeItems && challengeItems.length > 0 && (
- {problems.map((problem, index) => ( + {challengeItems.map((item, index) => (
{/* Number Circle */}
- {problem.number} + {item.itemNumber}
{/* Content */}

- {problem.title} + {item.challengeTitle}

- {problem.description} + {item.challengeDescription}

@@ -124,23 +124,23 @@ const ProblemsSlide = ({ data }: { data: Partial }) => { {/* Right Side - Image and Decorative Elements */}
{/* Decorative Circle */} - {showDecoCircle && ( + {showVisualAccents && (
)} - {/* Workspace Image */} - {workspaceImage?.__image_url__ && ( + {/* Supporting Visual */} + {supportingVisual?.__image_url__ && (
{workspaceImage.__image_prompt__}
)} {/* Teal Accent Block - Right Edge */} - {showTealAccent && ( + {showColorBlocks && (
)}
diff --git a/servers/nextjs/presentation-layouts/pitch-deck/SolutionsSlide.tsx b/servers/nextjs/presentation-layouts/pitch-deck/SolutionsSlide.tsx index 6e140485..4b83c8ea 100644 --- a/servers/nextjs/presentation-layouts/pitch-deck/SolutionsSlide.tsx +++ b/servers/nextjs/presentation-layouts/pitch-deck/SolutionsSlide.tsx @@ -5,72 +5,76 @@ import { ImageSchema, IconSchema } from "../defaultSchemes"; // Schema definition export const Schema = z.object({ - mainTitle: z.string() - .min(5) - .max(15) - .default("SOLUTIONS") - .meta({ - description: "Main title for the solutions section", - }), - - subtitle: z.string() - .min(10) + sectionTitle: z.string() + .min(3) .max(25) - .default("SOLUTIONS OF THE PROBLEMS") + .default("OUR SOLUTIONS") .meta({ - description: "Subtitle describing the section", + description: "Main section heading - can be 'Solutions', 'Our Approach', 'How We Help', or similar", }), - solutions: z.array(z.object({ - number: z.string().min(1).max(3), - title: z.string().min(5).max(40), - description: z.string().min(20).max(300) - })).min(2).max(3).default([ + sectionSubtitle: z.string() + .min(10) + .max(50) + .default("COMPREHENSIVE SOLUTIONS FOR YOUR NEEDS") + .meta({ + description: "Supporting subtitle that frames the solution discussion", + }), + + solutionItems: z.array(z.object({ + itemNumber: z.string().min(1).max(3), + solutionTitle: z.string().min(5).max(40), + solutionDescription: z.string().min(20).max(200) + })).min(2).max(4).default([ { - number: "01", - title: "Lack of Brand Visibility", - description: "By defining your unique value proposition and creating a consistent brand identity, we ensure your business stands out and remains memorable in the minds of your target audience." + itemNumber: "01", + solutionTitle: "Process Optimization", + solutionDescription: "Streamline workflows and implement efficient systems that reduce waste, improve productivity, and maximize resource utilization across all operational areas." }, { - number: "02", - title: "Ineffective Digital Presence", - description: "Through data-driven insights, we tailor strategies to maximize online visibility, engage your audience, and drive meaningful interactions, converting online engagements into tangible business outcomes." + itemNumber: "02", + solutionTitle: "Scalable Infrastructure", + solutionDescription: "Build robust, flexible systems and methodologies that can grow with your organization, eliminating bottlenecks and supporting expansion efforts." }, { - number: "03", - title: "Lack of Targeted Lead Generation", - description: "By leveraging strategic content, paid advertising, and personalized engagement tactics, we ensure that your marketing efforts are focused on reaching and converting the right audience." + itemNumber: "03", + solutionTitle: "Resource Management", + solutionDescription: "Strategic allocation and optimization of available resources including time, budget, and personnel to achieve maximum impact and desired outcomes." } ]).meta({ - description: "List of solutions with numbers, titles and descriptions", + description: "List of key solutions or approaches with numbered identification and detailed descriptions", }), - workspaceImages: ImageSchema.default({ - __image_url__: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", - __image_prompt__: "Business person working on laptop with charts and analytics" + primaryVisual: ImageSchema.default({ + __image_url__: "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", + __image_prompt__: "Modern workspace with team collaboration and strategic planning" }).meta({ - description: "Two workspace images for left side", + description: "Primary visual representing teamwork, strategy, or solution implementation", }), - companyLogo: ImageSchema.default({ - __image_url__: "https://via.placeholder.com/40x40/1D9A8A/FFFFFF?text=C", - __image_prompt__: "Clean modern company logo icon" + brandingVisual: ImageSchema.default({ + __image_url__: "https://via.placeholder.com/150x80/22C55E/FFFFFF?text=LOGO", + __image_prompt__: "Organization logo or brand mark" }).meta({ - description: "Company logo icon", + description: "Logo or branding element to maintain visual identity", }), - companyName: z.string() - .min(2) - .max(25) - .default("Company Name") - .meta({ - description: "Company name for branding", - }), - showYellowUnderline: z.boolean() .default(true) .meta({ - description: "Show yellow decorative underline", + description: "Whether to display the decorative yellow underline accent", + }), + + showVisualAccents: z.boolean() + .default(true) + .meta({ + description: "Whether to display decorative visual accent elements", + }), + + showColorBlocks: z.boolean() + .default(true) + .meta({ + description: "Whether to show colored background blocks for visual hierarchy", }), }) @@ -80,25 +84,50 @@ type SchemaType = z.infer; // Component definition const SolutionsSlide = ({ data }: { data: Partial }) => { - const { mainTitle, subtitle, solutions, workspaceImages, companyLogo, companyName, showYellowUnderline } = data; + const { sectionTitle, sectionSubtitle, solutionItems, primaryVisual, brandingVisual, showYellowUnderline, showVisualAccents, showColorBlocks } = data; return (
{/* Main Content Area */}
{/* Left Side - Images and Branding */} -
+
+ {/* Top Image Area */} + {primaryVisual?.__image_url__ && ( +
+ {primaryVisual.__image_prompt__} +
+ )} + + {/* Bottom Branding Area */} +
+ {brandingVisual?.__image_url__ && ( + {brandingVisual.__image_prompt__} + )} +
+
+ + {/* Right Side - Content */} +
{/* Title Section */}
- {mainTitle && ( -

- {mainTitle} + {sectionTitle && ( +

+ {sectionTitle}

)} - {subtitle && ( -

- {subtitle} + {sectionSubtitle && ( +

+ {sectionSubtitle}

)} @@ -108,70 +137,52 @@ const SolutionsSlide = ({ data }: { data: Partial }) => { )}
- {/* Images */} - {workspaceImages && ( -
- - - -
- {workspaceImages.__image_prompt__} -
-
- )} - - {/* Company Branding */} -
- {companyLogo?.__image_url__ && ( -
- {companyLogo.__image_prompt__} -
- )} - {companyName && ( - - {companyName} - - )} -
-
- - {/* Right Side - Teal Background with Solutions */} -
- {/* Solutions List */} - {solutions && solutions.length > 0 && ( + {/* Solution Items List */} + {solutionItems && solutionItems.length > 0 && (
- {solutions.map((solution, index) => ( -
+ {solutionItems.map((item, index) => ( +
{/* Number Circle */} -
- - {solution.number} +
+ + {item.itemNumber}
{/* Content */}

- {solution.title} + {item.solutionTitle}

-

- {solution.description} +

+ {item.solutionDescription}

))}
)} + + {/* Visual Accents */} + {showVisualAccents && ( + <> + {/* Decorative circles */} +
+
+ + )}
+ + {/* Color blocks for visual hierarchy */} + {showColorBlocks && ( + <> + {/* Bottom accent strip */} +
+ {/* Side accent */} +
+ + )}
); }; diff --git a/servers/nextjs/presentation-layouts/pitch-deck/StatisticCircularSlide.tsx b/servers/nextjs/presentation-layouts/pitch-deck/StatisticCircularSlide.tsx index 4ed6688b..3b939f8f 100644 --- a/servers/nextjs/presentation-layouts/pitch-deck/StatisticCircularSlide.tsx +++ b/servers/nextjs/presentation-layouts/pitch-deck/StatisticCircularSlide.tsx @@ -4,31 +4,38 @@ import { ImageSchema, IconSchema } from "../defaultSchemes"; // Schema definition export const Schema = z.object({ - mainTitle: z.string() - .min(5) - .max(15) - .default("STATISTIC") + sectionTitle: z.string() + .min(3) + .max(20) + .default("CLIENT SATISFACTION") .meta({ - description: "Main title for the statistic section", + description: "Main section heading - adapt to presentation topic (e.g., 'Climate Progress', 'Treatment Success', 'Learning Achievement', 'Project Completion')", }), - subtitle: z.string() + sectionSubtitle: z.string() .min(10) - .max(25) - .default("CLIENT'S SATISFACTION") + .max(35) + .default("MEASURING OUR IMPACT AND SUCCESS") .meta({ - description: "Subtitle describing the statistic focus", + description: "Supporting subtitle that provides context - adapt to topic (e.g., 'Tracking Climate Action Progress', 'Monitoring Patient Recovery Rates', 'Assessing Educational Outcomes')", }), description: z.string() - .min(100) - .max(400) + .min(2) + .max(230) .default("At the heart of our success lies the unwavering satisfaction of our clients. We take pride in fostering lasting partnerships, consistently exceeding expectations, and delivering results that not only meet but surpass the unique objectives of each client we serve.") .meta({ - description: "Description of client satisfaction approach", + description: "Name of the organization or entity being measured", }), - circularMetric: z.object({ + brandLogo: ImageSchema.default({ + __image_url__: "https://via.placeholder.com/40x40/22C55E/FFFFFF?text=L", + __image_prompt__: "Professional organization logo - clean and modern design" + }).meta({ + description: "Logo or brand mark representing the organization", + }), + + satisfactionRate: z.object({ value: z.number().min(0).max(100), label: z.string().min(5).max(30), percentage: z.string().min(2).max(5) @@ -37,7 +44,7 @@ export const Schema = z.object({ label: "CLIENT'S REPEAT ORDER", percentage: "90%" }).meta({ - description: "Main circular chart metric", + description: "CRITICAL: Provide topic-specific circular progress metric. For global warming: {value: 33, label: 'CO2 REDUCTION ACHIEVED', percentage: '33%'} or {value: 78, label: 'RENEWABLE ENERGY ADOPTION', percentage: '78%'}. For healthcare: {value: 95, label: 'PATIENT RECOVERY RATE', percentage: '95%'} or {value: 87, label: 'TREATMENT SUCCESS RATE', percentage: '87%'}. For education: {value: 92, label: 'GRADUATION SUCCESS RATE', percentage: '92%'}. Use realistic percentages and meaningful labels.", }), statisticBlocks: z.array(z.object({ @@ -56,7 +63,7 @@ export const Schema = z.object({ backgroundColor: "beige" } ]).meta({ - description: "Two statistic blocks with percentages and descriptions", + description: "ESSENTIAL: Provide two topic-relevant supporting statistics. For global warming: [{percentage: '1.1°C', description: 'Global temperature increase since pre-industrial times represents urgent need for climate action', backgroundColor: 'teal'}, {percentage: '410ppm', description: 'Current atmospheric CO2 levels are the highest in human history requiring immediate intervention', backgroundColor: 'beige'}]. For healthcare: [{percentage: '85%', description: 'Early detection rates have improved significantly with advanced screening technologies', backgroundColor: 'teal'}, {percentage: '72h', description: 'Average patient response time demonstrates our commitment to rapid care delivery', backgroundColor: 'beige'}]. Always provide factual, impactful statistics.", }), companyLogo: ImageSchema.default({ @@ -69,7 +76,7 @@ export const Schema = z.object({ companyName: z.string() .min(2) .max(25) - .default("Company Name") + .default("Deskpro") .meta({ description: "Company name for branding", }), @@ -81,7 +88,7 @@ type SchemaType = z.infer; // Component definition const StatisticCircularSlide = ({ data }: { data: Partial }) => { - const { mainTitle, subtitle, description, circularMetric, statisticBlocks, companyLogo, companyName } = data; + const { sectionTitle, sectionSubtitle, description, brandLogo, satisfactionRate, statisticBlocks, companyLogo, companyName } = data; const getBackgroundClass = (bg: string) => { switch (bg) { @@ -95,7 +102,7 @@ const StatisticCircularSlide = ({ data }: { data: Partial }) => { const radius = 150; const circumference = 2 * Math.PI * radius; const strokeDasharray = circumference; - const strokeDashoffset = circumference - (circumference * (circularMetric?.value || 90) / 100); + const strokeDashoffset = circumference - (circumference * (satisfactionRate?.value || 90) / 100); return (
@@ -105,15 +112,15 @@ const StatisticCircularSlide = ({ data }: { data: Partial }) => {
{/* Left - Title */}
- {mainTitle && ( + {sectionTitle && (

- {mainTitle} + {sectionTitle}

)} - {subtitle && ( + {sectionSubtitle && (

- {subtitle} + {sectionSubtitle}

)}
@@ -172,14 +179,14 @@ const StatisticCircularSlide = ({ data }: { data: Partial }) => { {/* Center Content */}
- {circularMetric?.label && ( + {satisfactionRate?.label && (

- {circularMetric.label} + {satisfactionRate.label}

)} - {circularMetric?.percentage && ( + {satisfactionRate?.percentage && ( - {circularMetric.percentage} + {satisfactionRate.percentage} )}
diff --git a/servers/nextjs/presentation-layouts/pitch-deck/StatisticDualChartSlide.tsx b/servers/nextjs/presentation-layouts/pitch-deck/StatisticDualChartSlide.tsx index 6578a6df..b0fe63f7 100644 --- a/servers/nextjs/presentation-layouts/pitch-deck/StatisticDualChartSlide.tsx +++ b/servers/nextjs/presentation-layouts/pitch-deck/StatisticDualChartSlide.tsx @@ -1,34 +1,34 @@ import * as z from "zod"; import { ImageSchema, IconSchema } from "../defaultSchemes"; import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'; -import { BarChart, Bar, AreaChart, Area, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from "recharts"; +import { BarChart, Bar, AreaChart, Area, XAxis, YAxis, CartesianGrid } from "recharts"; // Schema definition export const Schema = z.object({ - mainTitle: z.string() - .min(5) - .max(15) - .default("STATISTIC") + sectionTitle: z.string() + .min(3) + .max(30) + .default("PERFORMANCE METRICS") .meta({ - description: "Main title for the statistic section", + description: "Main section heading - adapt to presentation topic (e.g., 'Climate Analysis', 'Health Outcomes', 'Research Data', 'Impact Assessment')", }), - companyLogo: ImageSchema.default({ - __image_url__: "https://via.placeholder.com/40x40/FFFFFF/1D9A8A?text=C", - __image_prompt__: "Clean modern company logo icon in white" - }).meta({ - description: "Company logo icon", - }), - - companyName: z.string() + organizationName: z.string() .min(2) - .max(25) - .default("Company Name") + .max(30) + .default("Your Organization") .meta({ - description: "Company name for branding", + description: "Name of the organization or entity presenting the data", }), + brandLogo: ImageSchema.default({ + __image_url__: "https://via.placeholder.com/40x40/22C55E/FFFFFF?text=L", + __image_prompt__: "Professional organization logo - clean and modern design" + }).meta({ + description: "Logo or brand mark representing the organization", + }), + barChartData: z.array(z.object({ name: z.string(), series1: z.number(), @@ -41,7 +41,7 @@ export const Schema = z.object({ { name: "Item 4", series1: 18, series2: 14, series3: 22 }, { name: "Item 5", series1: 22, series2: 20, series3: 8 } ]).meta({ - description: "Bar chart data for customer satisfaction", + description: "CRITICAL: Provide topic-specific data for the left bar chart. For global warming: 5 years of data (2020-2024) with CO2 emissions by sector (Transport, Industry, Energy) with actual values. For healthcare: Patient outcomes across 5 categories (Prevention, Treatment, Recovery) with real percentages. For education: Student performance across 5 metrics (Reading, Math, Science) with grade levels. Use realistic data patterns and values.", }), areaChartData: z.array(z.object({ @@ -56,7 +56,7 @@ export const Schema = z.object({ { name: "Item 4", series1: 50, series2: 45, series3: 85 }, { name: "Item 5", series1: 80, series2: 75, series3: 120 } ]).meta({ - description: "Area chart data for repeat order rate", + description: "CRITICAL: Provide topic-specific data for the right area chart. For global warming: Cumulative data over 5 time periods showing renewable energy adoption, carbon reduction efforts, and policy implementations with realistic growth trends. For healthcare: Cumulative patient care metrics showing improvement over time. For education: Progressive learning outcomes showing student advancement. Ensure data shows meaningful trends relevant to the topic.", }), leftChartTitle: z.string() @@ -64,7 +64,7 @@ export const Schema = z.object({ .max(40) .default("Our Customer's Satisfaction") .meta({ - description: "Title for the left chart", + description: "IMPORTANT: Provide topic-specific title for left chart. For global warming: 'Global CO2 Emissions by Sector', 'Temperature Rise by Region', 'Renewable Energy Adoption'. For healthcare: 'Patient Treatment Outcomes', 'Healthcare Quality Metrics', 'Recovery Success Rates'. For education: 'Student Performance by Subject', 'Learning Progress Assessment', 'Academic Achievement Trends'.", }), leftChartDescription: z.string() @@ -72,7 +72,7 @@ export const Schema = z.object({ .max(200) .default("An impressive client satisfaction rate underscores our unwavering commitment to delivering exceptional service and exceeding expectations.") .meta({ - description: "Description for the left chart", + description: "ESSENTIAL: Provide topic-relevant description explaining the left chart data. For global warming: Explain emission sources, trends, and implications. For healthcare: Describe treatment effectiveness and patient outcomes. For education: Explain performance metrics and learning indicators. Make it informative and specific to the data shown.", }), rightChartTitle: z.string() @@ -80,7 +80,7 @@ export const Schema = z.object({ .max(40) .default("Repeat Order Rate") .meta({ - description: "Title for the right chart", + description: "IMPORTANT: Provide topic-specific title for right chart. For global warming: 'Climate Action Progress', 'Carbon Reduction Timeline', 'Sustainability Milestones'. For healthcare: 'Patient Recovery Timeline', 'Treatment Progress Tracking', 'Health Improvement Trajectory'. For education: 'Learning Progress Over Time', 'Student Development Path', 'Academic Growth Timeline'.", }), rightChartDescription: z.string() @@ -88,7 +88,7 @@ export const Schema = z.object({ .max(200) .default("Our remarkable client repeat order rate of 123 times are testament to the quality of our products/services and the trust our clients place in our ability.") .meta({ - description: "Description for the right chart", + description: "ESSENTIAL: Provide topic-relevant description explaining the right chart's cumulative/timeline data. For global warming: Describe progress in climate action, policy impact, or environmental improvements. For healthcare: Explain patient journey and recovery progression. For education: Describe learning advancement and skill development over time. Make it specific and data-driven.", }), }) @@ -114,43 +114,33 @@ type SchemaType = z.infer; // Component definition const StatisticDualChartSlide = ({ data }: { data: Partial }) => { - const { - mainTitle, - companyLogo, - companyName, - barChartData, - areaChartData, - leftChartTitle, - leftChartDescription, - rightChartTitle, - rightChartDescription - } = data; + const { sectionTitle, organizationName, brandLogo, barChartData, areaChartData, leftChartTitle, leftChartDescription, rightChartTitle, rightChartDescription } = data; return (
{/* Header Section */}
{/* Title */} - {mainTitle && ( + {sectionTitle && (

- {mainTitle} + {sectionTitle}

)} {/* Company Branding */}
- {companyLogo?.__image_url__ && ( + {brandLogo?.__image_url__ && (
{companyLogo.__image_prompt__}
)} - {companyName && ( + {organizationName && ( - {companyName} + {organizationName} )}
@@ -180,45 +170,45 @@ const StatisticDualChartSlide = ({ data }: { data: Partial }) => { {barChartData && barChartData.length > 0 && (
- - - - - - } /> - - - - - + + + + + + } /> + + + + +
)} @@ -260,50 +250,50 @@ const StatisticDualChartSlide = ({ data }: { data: Partial }) => { {areaChartData && areaChartData.length > 0 && (
- - - - - - } /> - - - - - + + + + + + } /> + + + + +
)} diff --git a/servers/nextjs/presentation-layouts/pitch-deck/StatisticSlide.tsx b/servers/nextjs/presentation-layouts/pitch-deck/StatisticSlide.tsx index 535ee86c..17748b55 100644 --- a/servers/nextjs/presentation-layouts/pitch-deck/StatisticSlide.tsx +++ b/servers/nextjs/presentation-layouts/pitch-deck/StatisticSlide.tsx @@ -1,40 +1,57 @@ import * as z from "zod"; import { ImageSchema, IconSchema } from "../defaultSchemes"; import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'; -import { LineChart, Line, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from "recharts"; +import { LineChart, Line, XAxis, YAxis, CartesianGrid } from "recharts"; // Schema definition export const Schema = z.object({ - mainTitle: z.string() - .min(5) - .max(12) - .default("STATISTIC") + sectionTitle: z.string() + .min(3) + .max(30) + .default("KEY STATISTICS") .meta({ - description: "Main title for the statistic section", + description: "Main section heading - adapt to presentation topic (e.g., 'Climate Data', 'Health Metrics', 'Performance Stats', 'Research Findings')", }), - subtitle: z.string() + sectionSubtitle: z.string() .min(10) - .max(18) - .default("CLIENT'S SATISFACTION") + .max(60) + .default("DATA-DRIVEN INSIGHTS AND PERFORMANCE") .meta({ - description: "Subtitle describing the statistic focus", + description: "Supporting subtitle that frames the data - adapt to topic (e.g., 'Global Temperature Trends and Impact', 'Patient Outcomes and Recovery Rates', 'Student Achievement and Progress')", }), - description: z.string() - .min(80) - .max(200) - .default("At the heart of our success lies the unwavering satisfaction of our clients. We take pride in fostering lasting partnerships, consistently exceeding expectations, and delivering results that not only meet but surpass the unique objectives of each client we serve.") + statisticValue: z.string() + .min(1) + .max(15) + .default("85%") .meta({ - description: "Description of client satisfaction approach", + description: "CRITICAL: Provide the most important statistic for the topic. For global warming: '1.1°C', '+2.1°C', '410ppm', '33%'. For healthcare: '95%', '72 hours', '89%'. For education: '78%', '3.2 GPA', '92%'. Use real, impactful numbers relevant to the presentation topic.", }), - businessImage: ImageSchema.default({ - __image_url__: "https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", - __image_prompt__: "Business team meeting discussing charts and documents at table" + statisticLabel: z.string() + .min(5) + .max(40) + .default("Client Satisfaction Rate") + .meta({ + description: "IMPORTANT: Provide topic-specific label for the main statistic. For global warming: 'Global Temperature Rise Since 1880', 'CO2 Concentration Increase', 'Arctic Ice Loss Rate'. For healthcare: 'Patient Recovery Rate', 'Treatment Success Rate', 'Early Detection Rate'. For education: 'Graduation Success Rate', 'Student Engagement Level', 'Learning Improvement Rate'.", + }), + + supportingVisual: ImageSchema.default({ + __image_url__: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", + __image_prompt__: "Business analytics dashboard with charts and data visualization" }).meta({ - description: "Business meeting image showing team collaboration", + description: "ADAPT the image prompt to match the presentation topic: For global warming: 'Climate monitoring station with temperature sensors and weather equipment', 'Scientists analyzing ice core data in Arctic research facility'. For healthcare: 'Medical monitoring equipment displaying patient vital signs', 'Healthcare analytics dashboard showing treatment outcomes'. For education: 'Educational assessment data on computer screens', 'Students using digital learning platforms'.", + }), + + bulletPoints: z.array(z.string().min(10).max(100)).min(2).max(5).default([ + "Consistent performance improvement over 12 months", + "High customer retention and satisfaction scores", + "Measurable ROI across all key performance indicators", + "Data-driven decision making and strategic optimization" + ]).meta({ + description: "ESSENTIAL: Provide topic-relevant supporting facts and insights. For global warming: 'Global average temperature has risen 1.1°C since pre-industrial times', 'Arctic sea ice is declining at 13% per decade', 'CO2 levels are highest in 3 million years', 'Renewable energy adoption increased 85% in last decade'. For healthcare: 'Early detection improves survival rates by 85%', 'Telemedicine reduced patient wait times by 60%', 'Preventive care decreased hospital readmissions by 40%'. Always provide factual, verifiable statements related to the presentation topic.", }), chartData: z.array(z.object({ @@ -43,42 +60,26 @@ export const Schema = z.object({ series2: z.number(), series3: z.number() })).min(5).max(5).default([ - { name: "Item 1", series1: 18, series2: 0, series3: 0 }, - { name: "Item 2", series1: 30, series2: 12, series3: 8 }, - { name: "Item 3", series1: 26, series2: 38, series3: 20 }, - { name: "Item 4", series1: 40, series2: 30, series3: 35 }, - { name: "Item 5", series1: 42, series2: 45, series3: 32 } + { name: "Jan", series1: 18, series2: 0, series3: 0 }, + { name: "Feb", series1: 30, series2: 12, series3: 8 }, + { name: "Mar", series1: 26, series2: 38, series3: 20 }, + { name: "Apr", series1: 40, series2: 30, series3: 35 }, + { name: "May", series1: 42, series2: 45, series3: 32 } ]).meta({ - description: "Line chart data for satisfaction metrics", - }), - - bulletPoints: z.array(z.object({ - text: z.string().min(20).max(100), - color: z.enum(["teal", "beige", "light"]) - })).min(3).max(3).default([ - { - text: "From brand positioning and messaging to visual identity, we guide you through every step.", - color: "teal" - }, - { - text: "Navigate the path to increased sales with our insightful report and offering a strategic roadmap.", - color: "beige" - }, - { - text: "Amplify your revenue streams, engage customers, and unlock the full potential of your business.", - color: "light" - } - ]).meta({ - description: "Three bullet points with different colored indicators", + description: "CRITICAL: Provide topic-specific time-series data for line chart. For global warming: Monthly temperature anomalies, CO2 levels, ice coverage data with realistic values. For healthcare: Patient recovery rates, treatment success metrics, diagnostic accuracy over time. For education: Student performance trends, learning progress, engagement metrics. Use realistic data patterns showing meaningful trends.", }), showYellowUnderline: z.boolean() .default(true) .meta({ - description: "Show yellow decorative underline", + description: "Whether to display the decorative yellow underline accent", }), - + showVisualAccents: z.boolean() + .default(true) + .meta({ + description: "Whether to display decorative visual accent elements", + }), }) // Chart configuration @@ -103,73 +104,72 @@ type SchemaType = z.infer; // Component definition const StatisticSlide = ({ data }: { data: Partial }) => { - const { mainTitle, subtitle, description, businessImage, chartData, bulletPoints, showYellowUnderline } = data; - - const getColorClass = (color: string) => { - switch (color) { - case "teal": return "bg-teal-600"; - case "beige": return "bg-yellow-300"; - case "light": return "bg-gray-300"; - default: return "bg-gray-300"; - } - }; + const { sectionTitle, sectionSubtitle, statisticValue, statisticLabel, supportingVisual, bulletPoints, chartData, showYellowUnderline, showVisualAccents } = data; return (
{/* Main Content Area */}
- {/* Left Side - Teal Background with Content and Image */} -
- {/* Top Content Section */} -
- {/* Title Section */} -
- {mainTitle && ( -

- {mainTitle} -

- )} + {/* Left Side - Teal Background */} +
+ {/* Title Section */} +
+ {sectionTitle && ( +

+ {sectionTitle} +

+ )} - {subtitle && ( -

- {subtitle} -

- )} + {sectionSubtitle && ( +

+ {sectionSubtitle} +

+ )} - {/* Yellow Decorative Underline */} - {showYellowUnderline && ( -
- )} -
+ {/* Yellow Decorative Underline */} + {showYellowUnderline && ( +
+ )} +
- {/* Description */} - {description && ( -
-

- {description} -

+ {/* Large Statistic Display */} +
+ {statisticValue && ( +
+ {statisticValue}
)} -
- - {/* Bottom Business Image */} -
- {businessImage?.__image_url__ && ( - - {businessImage.__image_prompt__} - + {statisticLabel && ( +

+ {statisticLabel} +

)} - -
+ + {/* Business Image */} + {supportingVisual?.__image_url__ && ( +
+
+ {supportingVisual.__image_prompt__} +
+
+ )} + + {/* Visual Accents */} + {showVisualAccents && ( + <> +
+
+ + )}
- {/* Right Side - Chart and Bullet Points */} -
+ {/* Right Side - White Background with Chart and Bullet Points */} +
{/* Chart Section */}
{/* Chart Legend */} @@ -192,47 +192,47 @@ const StatisticSlide = ({ data }: { data: Partial }) => { {chartData && chartData.length > 0 && (
- - - - - - } /> - - - - - + + + + + + } /> + + + + +
)} @@ -242,19 +242,28 @@ const StatisticSlide = ({ data }: { data: Partial }) => {
{bulletPoints && bulletPoints.length > 0 && ( <> - {bulletPoints.map((point, index) => ( -
-
-

- {point.text} -

-
- ))} + {bulletPoints.map((point, index) => { + // Rotate colors for visual variety + const colors = ['bg-teal-600', 'bg-yellow-300', 'bg-gray-400']; + const dotColor = colors[index % colors.length]; + + return ( +
+
+

+ {point} +

+
+ ); + })} )}
+ + {/* Bottom accent strip */} +
); }; diff --git a/servers/nextjs/presentation-layouts/pitch-deck/TableOfContentsSlide.tsx b/servers/nextjs/presentation-layouts/pitch-deck/TableOfContentsSlide.tsx index 0abf8ebd..261fe221 100644 --- a/servers/nextjs/presentation-layouts/pitch-deck/TableOfContentsSlide.tsx +++ b/servers/nextjs/presentation-layouts/pitch-deck/TableOfContentsSlide.tsx @@ -5,63 +5,78 @@ import { ImageSchema, IconSchema } from "../defaultSchemes"; // Schema definition export const Schema = z.object({ - - mainTitle: z.string() - .min(5) - .max(20) - .default("TABLE OF CONTENT") + sectionTitle: z.string() + .min(3) + .max(30) + .default("TABLE OF CONTENTS") .meta({ - description: "Main title for the table of contents", + description: "Main heading for the content overview - can be 'Agenda', 'Overview', 'Contents', or similar", }), - subtitle: z.string() + sectionSubtitle: z.string() .min(10) - .max(25) - .default("PITCH DECK PRESENTATION") + .max(60) + .default("PRESENTATION OVERVIEW AND AGENDA") .meta({ - description: "Subtitle describing the presentation type", + description: "Supporting subtitle that explains what the audience will learn or see", }), contentItems: z.array(z.object({ - number: z.string().min(1).max(3), - title: z.string().min(3).max(30) - })).min(4).max(8).default([ - { number: "01", title: "Hello Friends!" }, - { number: "02", title: "About Us" }, - { number: "03", title: "What We Believe" }, - { number: "04", title: "Problems & Solutions" }, - { number: "05", title: "Market Size" }, - { number: "06", title: "Statistic" } + itemNumber: z.string().min(1).max(3), + contentTitle: z.string().min(3).max(40), + contentDescription: z.string().min(10).max(100).optional() + })).min(3).max(8).default([ + { + itemNumber: "01", + contentTitle: "Introduction & Welcome", + contentDescription: "Brief overview and objectives" + }, + { + itemNumber: "02", + contentTitle: "About Our Organization", + contentDescription: "Background and mission" + }, + { + itemNumber: "03", + contentTitle: "Key Challenges", + contentDescription: "Current issues and opportunities" + }, + { + itemNumber: "04", + contentTitle: "Our Solutions", + contentDescription: "Proposed approaches and methods" + }, + { + itemNumber: "05", + contentTitle: "Implementation Plan", + contentDescription: "Timeline and next steps" + }, + { + itemNumber: "06", + contentTitle: "Questions & Discussion", + contentDescription: "Interactive engagement" + } ]).meta({ - description: "List of content items with numbers and titles", + description: "List of presentation sections with numbered sequence and brief descriptions", }), - heroImage: ImageSchema.default({ - __image_url__: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", - __image_prompt__: "Modern laptop and office workspace on wooden desk" + brandingVisual: ImageSchema.default({ + __image_url__: "https://via.placeholder.com/200x100/22C55E/FFFFFF?text=BRAND", + __image_prompt__: "Organization logo or brand visual element" }).meta({ - description: "Hero image showing professional workspace", + description: "Logo or branding element displayed prominently for visual identity", }), - companyLogo: ImageSchema.default({ - __image_url__: "https://via.placeholder.com/40x40/1D9A8A/FFFFFF?text=C", - __image_prompt__: "Clean modern company logo icon" - }).meta({ - description: "Company logo icon", - }), - - companyName: z.string() - .min(2) - .max(25) - .default("Company Name") - .meta({ - description: "Company name for branding", - }), - - decorativeCircle: z.boolean() + showDecorations: z.boolean() .default(true) .meta({ - description: "Show decorative circle element", + description: "Whether to display decorative visual elements like underlines and accents", + }), + + useColumnLayout: z.boolean() + .default(true) + .meta({ + description: "Whether to arrange content items in two columns for better space utilization", }), }) @@ -71,45 +86,56 @@ type SchemaType = z.infer; // Component definition const TableOfContentsSlide = ({ data }: { data: Partial }) => { - - const { mainTitle, subtitle, contentItems, heroImage, companyLogo, companyName, decorativeCircle } = data; + const { sectionTitle, sectionSubtitle, contentItems, brandingVisual, showDecorations, useColumnLayout } = data; return (
{/* Main Content Area */}
{/* Left Side - Content */} -
+
{/* Title Section */}
- {mainTitle && ( -

- {mainTitle} + {sectionTitle && ( +

+ {sectionTitle}

)} {/* Decorative underline */} -
+ {showDecorations && ( +
+ )} - {subtitle && ( + {sectionSubtitle && (

- {subtitle} + {sectionSubtitle}

)}
{/* Content Items */} {contentItems && contentItems.length > 0 && ( -
+
{contentItems.map((item, index) => ( -
-
- - {item.number} +
+ {/* Number Circle */} +
+ + {item.itemNumber}
-
- {item.title} + + {/* Content */} +
+

+ {item.contentTitle} +

+ {item.contentDescription && ( +

+ {item.contentDescription} +

+ )}
))} @@ -117,43 +143,33 @@ const TableOfContentsSlide = ({ data }: { data: Partial }) => { )}
- {/* Right Side - Image and Branding */} -
- {/* Hero Image */} - {heroImage?.__image_url__ && ( -
+ {/* Right Side - Branding and Visual Elements */} +
+ {/* Branding Visual */} + {brandingVisual?.__image_url__ && ( +
{heroImage.__image_prompt__}
)} - {/* Decorative Circle */} - {decorativeCircle && ( -
+ {/* Decorative Elements */} + {showDecorations && ( + <> + {/* Decorative circles */} +
+
+
+ )} - - {/* Company Branding */} -
- {companyLogo?.__image_url__ && ( -
- {companyLogo.__image_prompt__} -
- )} - {companyName && ( - - {companyName} - - )} -
+ + {/* Bottom accent strip */} +
); }; diff --git a/servers/nextjs/presentation-layouts/pitch-deck/TestimonialSlide.tsx b/servers/nextjs/presentation-layouts/pitch-deck/TestimonialSlide.tsx index 71b672ff..2be34797 100644 --- a/servers/nextjs/presentation-layouts/pitch-deck/TestimonialSlide.tsx +++ b/servers/nextjs/presentation-layouts/pitch-deck/TestimonialSlide.tsx @@ -1,72 +1,89 @@ import * as z from "zod"; + import { ImageSchema, IconSchema } from "../defaultSchemes"; // Schema definition export const Schema = z.object({ - mainTitle: z.string() - .min(5) - .max(15) - .default("TESTIMONIAL") + sectionTitle: z.string() + .min(3) + .max(30) + .default("CLIENT TESTIMONIALS") .meta({ - description: "Main title for the testimonial section", + description: "Main section heading - can be 'Testimonials', 'Client Feedback', 'Reviews', or similar", }), - companyLogo: ImageSchema.default({ - __image_url__: "https://via.placeholder.com/40x40/FFFFFF/1D9A8A?text=C", - __image_prompt__: "Clean modern company logo icon in white" + organizationName: z.string() + .min(2) + .max(30) + .default("Your Organization") + .meta({ + description: "Name of the organization or entity being featured", + }), + + brandLogo: ImageSchema.default({ + __image_url__: "https://via.placeholder.com/40x40/22C55E/FFFFFF?text=L", + __image_prompt__: "Professional organization logo - clean and modern design" }).meta({ - description: "Company logo icon", + description: "Logo or brand mark representing the organization", }), - companyName: z.string() - .min(2) - .max(25) - .default("Company Name") - .meta({ - description: "Company name for branding", - }), - - testimonials: z.array(z.object({ - text: z.string().min(30).max(200), - clientName: z.string().min(2).max(30), - clientPhoto: ImageSchema, + testimonialItems: z.array(z.object({ + clientName: z.string().min(2).max(40), + clientTitle: z.string().min(5).max(60), + clientCompany: z.string().min(2).max(40), + testimonialText: z.string().min(50).max(300), rating: z.number().min(1).max(5), - backgroundColor: z.enum(["beige", "teal", "light"]) - })).min(3).max(3).default([ + clientPhoto: ImageSchema + })).min(2).max(4).default([ { - text: "In a world flooded with marketing noise, this company stands out as a beacon of creativity and effectiveness.", - clientName: "Benjamin Shah", + clientName: "Sarah Johnson", + clientTitle: "Chief Executive Officer", + clientCompany: "TechCorp Solutions", + testimonialText: "Working with this team has been transformative for our business. Their expertise, dedication, and innovative approach exceeded our expectations and delivered remarkable results.", + rating: 5, + clientPhoto: { + __image_url__: "https://images.unsplash.com/photo-1494790108755-2616b612b830?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80", + __image_prompt__: "Professional businesswoman headshot" + } + }, + { + clientName: "Michael Chen", + clientTitle: "Director of Operations", + clientCompany: "Global Innovations Inc", + testimonialText: "The level of professionalism and quality of service provided was outstanding. They understood our needs perfectly and delivered solutions that truly made a difference.", + rating: 5, clientPhoto: { __image_url__: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80", - __image_prompt__: "Professional headshot of smiling businessman" - }, - rating: 5, - backgroundColor: "beige" + __image_prompt__: "Professional businessman headshot" + } }, { - text: "The level of expertise and personalized attention to our unique needs has made them an invaluable partner.", - clientName: "Murad Naser", - clientPhoto: { - __image_url__: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80", - __image_prompt__: "Professional headshot of confident businessman with beard" - }, + clientName: "Emily Rodriguez", + clientTitle: "Marketing Manager", + clientCompany: "Creative Dynamics", + testimonialText: "Exceptional service and results that spoke for themselves. The team's attention to detail and commitment to excellence made our collaboration highly successful.", rating: 5, - backgroundColor: "teal" - }, - { - text: "I've been thoroughly impressed with the exceptional level of service and creativity they bring to the table.", - clientName: "Drew Feig", clientPhoto: { - __image_url__: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80", - __image_prompt__: "Professional headshot of smiling young businessman" - }, - rating: 5, - backgroundColor: "light" + __image_url__: "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80", + __image_prompt__: "Professional woman headshot" + } } ]).meta({ - description: "Three client testimonials with photos and ratings", + description: "List of client testimonials with ratings, photos, and detailed feedback", }), + + showRatings: z.boolean() + .default(true) + .meta({ + description: "Whether to display star ratings for each testimonial", + }), + + showClientPhotos: z.boolean() + .default(true) + .meta({ + description: "Whether to show client photos alongside testimonials", + }), }) // Type inference @@ -75,101 +92,104 @@ type SchemaType = z.infer; // Component definition const TestimonialSlide = ({ data }: { data: Partial }) => { - const { mainTitle, companyLogo, companyName, testimonials } = data; + const { sectionTitle, organizationName, brandLogo, testimonialItems, showRatings, showClientPhotos } = data; - const getBackgroundClass = (bg: string) => { - switch (bg) { - case "teal": return "bg-teal-600 text-white"; - case "beige": return "bg-yellow-100 text-gray-900"; - case "light": return "bg-gray-100 text-gray-900"; - default: return "bg-gray-100 text-gray-900"; - } - }; - - const getStarColor = (bg: string) => { - return bg === "teal" ? "text-yellow-400" : "text-yellow-500"; - }; - - const renderStars = (rating: number, backgroundColor: string) => { - return ( -
- {[...Array(5)].map((_, index) => ( - - - - ))} -
- ); + // Helper function to render stars + const renderStars = (rating: number) => { + return Array.from({ length: 5 }, (_, i) => ( + + + + )); }; return ( -
+
{/* Header Section */}
{/* Title */} - {mainTitle && ( -

- {mainTitle} + {sectionTitle && ( +

+ {sectionTitle}

)} {/* Company Branding */}
- {companyLogo?.__image_url__ && ( + {brandLogo?.__image_url__ && (
{companyLogo.__image_prompt__}
)} - {companyName && ( - - {companyName} + {organizationName && ( + + {organizationName} )}
- {/* Testimonials Section */} -
- {testimonials && testimonials.length > 0 && ( -
- {testimonials.map((testimonial, index) => ( -
- {/* Stars */} - {renderStars(testimonial.rating, testimonial.backgroundColor)} + {/* Testimonials Content */} +
+ {testimonialItems && testimonialItems.length > 0 && ( +
+ {testimonialItems.slice(0, 3).map((item, index) => { + // Rotate background colors for visual variety + const bgColors = ['bg-yellow-100', 'bg-teal-100', 'bg-gray-100']; + const bgColor = bgColors[index % bgColors.length]; - {/* Testimonial Text */} -

- {testimonial.text} -

+ return ( +
+ {/* Stars Rating */} + {showRatings && ( +
+ {renderStars(item.rating)} +
+ )} - {/* Client Photo */} - {testimonial.clientPhoto?.__image_url__ && ( -
- {testimonial.clientPhoto.__image_prompt__} + {/* Testimonial Text */} +

+ "{item.testimonialText}" +

+ + {/* Client Info */} +
+ {/* Client Photo */} + {showClientPhotos && item.clientPhoto?.__image_url__ && ( +
+ {item.clientPhoto.__image_prompt__} +
+ )} + + {/* Client Details */} +
+

+ {item.clientName} +

+

+ {item.clientTitle} +

+

+ {item.clientCompany} +

+
- )} - - {/* Client Name */} -

- {testimonial.clientName} -

-
- ))} +
+ ); + })}
)}
diff --git a/servers/nextjs/presentation-layouts/pitch-deck/ThankYouSlide.tsx b/servers/nextjs/presentation-layouts/pitch-deck/ThankYouSlide.tsx index 695c51ad..237e3e0d 100644 --- a/servers/nextjs/presentation-layouts/pitch-deck/ThankYouSlide.tsx +++ b/servers/nextjs/presentation-layouts/pitch-deck/ThankYouSlide.tsx @@ -5,68 +5,73 @@ import { ImageSchema, IconSchema } from "../defaultSchemes"; // Schema definition export const Schema = z.object({ - - companyName: z.string() + organizationName: z.string() .min(2) - .max(15) - .default("Company Name") + .max(30) + .default("Your Organization") .meta({ - description: "Company name displayed prominently", + description: "Name of the organization, company, or entity presenting", }), - mainTitle: z.string() - .min(5) - .max(20) + primaryMessage: z.string() + .min(3) + .max(25) .default("THANK YOU") .meta({ - description: "Main thank you title in large bold letters", + description: "Main closing message - can be 'Thank You', 'Questions?', 'Let's Connect', or similar", }), - subtitle: z.string() - .min(10) - .max(40) - .default("FOR YOUR NICE ATTENTION") + secondaryMessage: z.string() + .min(5) + .max(60) + .default("FOR YOUR TIME AND ATTENTION") .meta({ - description: "Subtitle thanking the audience", + description: "Supporting message that completes the primary message or adds context", }), - companyLogo: ImageSchema.default({ - __image_url__: "https://via.placeholder.com/40x40/22C55E/FFFFFF?text=C", - __image_prompt__: "Company logo - geometric green icon" + brandLogo: ImageSchema.default({ + __image_url__: "https://via.placeholder.com/40x40/22C55E/FFFFFF?text=L", + __image_prompt__: "Professional organization logo - clean and modern design" }).meta({ - description: "Company logo icon", + description: "Logo or brand mark representing the presenting organization", }), - contactInfo: z.object({ - telephone: z.string().min(10).max(20).default("+123-456-7890"), - address: z.string().min(10).max(50).default("123 Anywhere St., Any City, ST 12345"), - website: z.string().min(10).max(30).default("www.reallygreatsite.com") + contactDetails: z.object({ + phoneNumber: z.string().min(10).max(20).default("+1-234-567-8900"), + physicalAddress: z.string().min(10).max(60).default("123 Business Ave, City, State 12345"), + websiteUrl: z.string().min(10).max(40).default("www.yourorganization.com") }).default({ - telephone: "+123-456-7890", - address: "123 Anywhere St., Any City, ST 12345", - website: "www.reallygreatsite.com" + phoneNumber: "+1-234-567-8900", + physicalAddress: "123 Business Ave, City, State 12345", + websiteUrl: "www.yourorganization.com" }).meta({ - description: "Company contact information", + description: "Contact information for follow-up communication and connection", }), presentationDate: z.string() - .min(5) + .min(3) .max(20) - .default("December 2023") + .default("Current Month Year") .meta({ - description: "Date of the presentation", + description: "Date when the presentation was given or document was created", }), - decorativeCircle: z.boolean() + showDecorations: z.boolean() .default(true) .meta({ - description: "Show decorative circle element", + description: "Whether to display decorative visual elements like background shapes", }), - arrowButton: z.boolean() + showNavigationArrow: z.boolean() .default(true) .meta({ - description: "Show navigation arrow button", + description: "Whether to show a navigation arrow for interactive presentations", + }), + + showContactInfo: z.boolean() + .default(true) + .meta({ + description: "Whether to display contact information in the footer", }), }) @@ -76,7 +81,7 @@ type SchemaType = z.infer; // Component definition const ThankYouSlide = ({ data }: { data: Partial }) => { - const { companyName, mainTitle, subtitle, companyLogo, contactInfo, presentationDate, decorativeCircle, arrowButton } = data; + const { organizationName, primaryMessage, secondaryMessage, brandLogo, contactDetails, presentationDate, showDecorations, showNavigationArrow, showContactInfo } = data; return (
@@ -84,24 +89,24 @@ const ThankYouSlide = ({ data }: { data: Partial }) => {
{/* Company Logo and Name */}
- {companyLogo?.__image_url__ && ( + {brandLogo?.__image_url__ && (
{companyLogo.__image_prompt__}
)} - {companyName && ( + {organizationName && ( - {companyName} + {organizationName} )}
{/* Arrow Button */} - {arrowButton && ( + {showNavigationArrow && (
@@ -111,7 +116,7 @@ const ThankYouSlide = ({ data }: { data: Partial }) => {
{/* Decorative Circle */} - {decorativeCircle && ( + {showDecorations && (
)} @@ -119,18 +124,18 @@ const ThankYouSlide = ({ data }: { data: Partial }) => {
{/* Main Title */} - {mainTitle && ( + {primaryMessage && (

- {mainTitle} + {primaryMessage}

)} {/* Subtitle with Circle Bullet */} - {subtitle && ( + {secondaryMessage && (

- {subtitle} + {secondaryMessage}

)} @@ -138,44 +143,46 @@ const ThankYouSlide = ({ data }: { data: Partial }) => {
{/* Footer with Contact Info */} -
-
-
- {/* Telephone */} - {contactInfo?.telephone && ( -
-
Telephone
-
{contactInfo.telephone}
-
- )} + {showContactInfo && ( +
+
+
+ {/* Telephone */} + {contactDetails?.phoneNumber && ( +
+
Telephone
+
{contactDetails.phoneNumber}
+
+ )} - {/* Address */} - {contactInfo?.address && ( -
-
Address
-
{contactInfo.address}
-
- )} + {/* Address */} + {contactDetails?.physicalAddress && ( +
+
Address
+
{contactDetails.physicalAddress}
+
+ )} - {/* Website */} - {contactInfo?.website && ( -
-
Website
-
{contactInfo.website}
+ {/* Website */} + {contactDetails?.websiteUrl && ( +
+
Website
+
{contactDetails.websiteUrl}
+
+ )} +
+ + {/* Presentation Date */} + {presentationDate && ( +
+
+ {presentationDate} +
)}
- - {/* Presentation Date */} - {presentationDate && ( -
-
- {presentationDate} -
-
- )}
-
+ )}
); }; diff --git a/servers/nextjs/presentation-layouts/pitch-deck/TitleSlide.tsx b/servers/nextjs/presentation-layouts/pitch-deck/TitleSlide.tsx index 6b1d41e9..9e6bbdee 100644 --- a/servers/nextjs/presentation-layouts/pitch-deck/TitleSlide.tsx +++ b/servers/nextjs/presentation-layouts/pitch-deck/TitleSlide.tsx @@ -5,68 +5,67 @@ import { ImageSchema, IconSchema } from "../defaultSchemes"; // Schema definition export const Schema = z.object({ - - companyName: z.string() + organizationName: z.string() .min(2) - .max(15) - .default("Thynk Unlimited") + .max(25) + .default("Your Organization") .meta({ - description: "Company name displayed prominently", + description: "Name of the organization, company, or entity presenting", }), - mainTitle: z.string() + primaryTitle: z.string() + .min(3) + .max(30) + .default("PRESENTATION TITLE") + .meta({ + description: "Main headline or title for the presentation - should be impactful and attention-grabbing", + }), + + secondaryTitle: z.string() .min(5) - .max(15) - .default("PITCH DECK") + .max(50) + .default("PROFESSIONAL PRESENTATION") .meta({ - description: "Main title in large bold letters", + description: "Subtitle that provides context about the presentation type or purpose", }), - subtitle: z.string() - .min(10) - .max(40) - .default("BUSINESS PRESENTATION") - .meta({ - description: "Subtitle describing the presentation type", - }), - - companyLogo: ImageSchema.default({ - __image_url__: "https://via.placeholder.com/40x40/22C55E/FFFFFF?text=T", - __image_prompt__: "Thynk Unlimited logo - geometric green icon" + brandLogo: ImageSchema.default({ + __image_url__: "https://via.placeholder.com/40x40/22C55E/FFFFFF?text=L", + __image_prompt__: "Professional organization logo - clean and modern design" }).meta({ - description: "Company logo icon", + description: "Logo or brand mark representing the presenting organization", }), - contactInfo: z.object({ - telephone: z.string().min(10).max(20).default("+123-456-7890"), - address: z.string().min(10).max(50).default("123 Anywhere St., Any City, ST 12345"), - website: z.string().min(10).max(30).default("www.reallygreatsite.com") + contactDetails: z.object({ + phoneNumber: z.string().min(10).max(20).default("+1-234-567-8900"), + physicalAddress: z.string().min(10).max(60).default("123 Business Ave, City, State 12345"), + websiteUrl: z.string().min(10).max(40).default("www.yourorganization.com") }).default({ - telephone: "+123-456-7890", - address: "123 Anywhere St., Any City, ST 12345", - website: "www.reallygreatsite.com" + phoneNumber: "+1-234-567-8900", + physicalAddress: "123 Business Ave, City, State 12345", + websiteUrl: "www.yourorganization.com" }).meta({ - description: "Company contact information", + description: "Contact information including phone, address, and website for follow-up communication", }), presentationDate: z.string() - .min(5) + .min(3) .max(20) - .default("December 2023") + .default("Current Month Year") .meta({ - description: "Date of the presentation", + description: "Date when the presentation is being given or was created", }), - decorativeCircle: z.boolean() + showDecorations: z.boolean() .default(true) .meta({ - description: "Show decorative circle element", + description: "Whether to display decorative visual elements like background shapes", }), - arrowButton: z.boolean() + showNavigationArrow: z.boolean() .default(true) .meta({ - description: "Show navigation arrow button", + description: "Whether to show a navigation arrow button for presentation flow", }), }) @@ -77,7 +76,7 @@ type SchemaType = z.infer; const ThynkTitleSlide = ({ data }: { data: Partial }) => { - const { companyName, mainTitle, subtitle, companyLogo, contactInfo, presentationDate, decorativeCircle, arrowButton } = data; + const { organizationName, primaryTitle, secondaryTitle, brandLogo, contactDetails, presentationDate, showDecorations, showNavigationArrow } = data; return (
@@ -85,24 +84,24 @@ const ThynkTitleSlide = ({ data }: { data: Partial }) => {
{/* Company Logo and Name */}
- {companyLogo?.__image_url__ && ( + {brandLogo?.__image_url__ && (
{companyLogo.__image_prompt__}
)} - {companyName && ( + {organizationName && ( - {companyName} + {organizationName} )}
{/* Arrow Button */} - {arrowButton && ( + {showNavigationArrow && (
@@ -112,7 +111,7 @@ const ThynkTitleSlide = ({ data }: { data: Partial }) => {
{/* Decorative Circle */} - {decorativeCircle && ( + {showDecorations && (
)} @@ -120,18 +119,18 @@ const ThynkTitleSlide = ({ data }: { data: Partial }) => {
{/* Main Title */} - {mainTitle && ( + {primaryTitle && (

- {mainTitle} + {primaryTitle}

)} {/* Subtitle with Circle Bullet */} - {subtitle && ( + {secondaryTitle && (

- {subtitle} + {secondaryTitle}

)} @@ -143,26 +142,26 @@ const ThynkTitleSlide = ({ data }: { data: Partial }) => {
{/* Telephone */} - {contactInfo?.telephone && ( + {contactDetails?.phoneNumber && (
Telephone
-
{contactInfo.telephone}
+
{contactDetails.phoneNumber}
)} {/* Address */} - {contactInfo?.address && ( + {contactDetails?.physicalAddress && (
Address
-
{contactInfo.address}
+
{contactDetails.physicalAddress}
)} {/* Website */} - {contactInfo?.website && ( + {contactDetails?.websiteUrl && (
Website
-
{contactInfo.website}
+
{contactDetails.websiteUrl}
)}
diff --git a/servers/nextjs/presentation-layouts/pitch-deck/WhatWeBelieveSlide.tsx b/servers/nextjs/presentation-layouts/pitch-deck/WhatWeBelieveSlide.tsx index 0ab76e6f..bd507218 100644 --- a/servers/nextjs/presentation-layouts/pitch-deck/WhatWeBelieveSlide.tsx +++ b/servers/nextjs/presentation-layouts/pitch-deck/WhatWeBelieveSlide.tsx @@ -5,66 +5,57 @@ import { ImageSchema, IconSchema } from "../defaultSchemes"; // Schema definition export const Schema = z.object({ - - mainTitle: z.string() - .min(5) - .max(15) - .default("WHAT WE BELIEVE") - .meta({ - description: "Main title for the beliefs section", - }), - - subtitle: z.string() - .min(10) + sectionTitle: z.string() + .min(3) .max(30) - .default("ABOUT OUR VISION AND MISSION") + .default("OUR VISION & MISSION") .meta({ - description: "Subtitle describing the section", + description: "Main section heading - can be 'Our Values', 'What We Believe', 'Our Philosophy', or similar", }), - visionTitle: z.string() - .min(3) - .max(15) - .default("VISION") + sectionSubtitle: z.string() + .min(10) + .max(60) + .default("GUIDING PRINCIPLES AND CORE BELIEFS") .meta({ - description: "Vision section title", + description: "Supporting subtitle that introduces the organization's foundational concepts", }), - visionText: z.string() - .min(50) - .max(300) - .default("Our vision is to be the catalyst for transformative marketing solutions that redefine industry standards. We envision a future where brands not only captivate their audience but also inspire meaningful connections.") + visionStatement: z.string() + .min(30) + .max(200) + .default("We envision a future where innovative solutions transform challenges into opportunities, creating sustainable value for all stakeholders.") .meta({ - description: "Vision statement text", + description: "Vision statement describing the organization's aspirational future goals and impact", }), - missionTitle: z.string() - .min(3) - .max(15) - .default("MISSION") - .meta({ - description: "Mission section title", - }), - - missionText: z.string() - .min(50) - .max(400) - .default("Our mission is to deliver strategic and impactful marketing solutions that propel businesses to new heights of success. We are committed to leveraging our expertise in data-driven insights, creative storytelling, and cutting-edge technology to craft bespoke campaigns.") - .meta({ - description: "Mission statement text", - }), - - teamImage: ImageSchema.default({ - __image_url__: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", - __image_prompt__: "Business team collaboration meeting with documents and discussion" + missionContent: z.object({ + missionTitle: z.string().min(3).max(30).default("Our Mission"), + missionDescription: z.string().min(50).max(300).default("To deliver exceptional value through strategic innovation, collaborative partnerships, and unwavering commitment to excellence. We believe in empowering organizations with the tools, insights, and support needed to achieve sustainable growth and meaningful impact in their communities.") + }).default({ + missionTitle: "Our Mission", + missionDescription: "To deliver exceptional value through strategic innovation, collaborative partnerships, and unwavering commitment to excellence. We believe in empowering organizations with the tools, insights, and support needed to achieve sustainable growth and meaningful impact in their communities." }).meta({ - description: "Team collaboration image", + description: "Mission section with title and detailed description of organizational purpose and approach", }), - showYellowAccent: z.boolean() + supportingVisual: ImageSchema.default({ + __image_url__: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", + __image_prompt__: "Diverse team collaborating and planning together in modern workspace" + }).meta({ + description: "Visual that represents collaboration, vision, or organizational culture", + }), + + showVisualAccents: z.boolean() .default(true) .meta({ - description: "Show yellow accent block", + description: "Whether to display decorative visual accent elements", + }), + + showColorBlocks: z.boolean() + .default(true) + .meta({ + description: "Whether to show colored background sections for visual hierarchy", }), }) @@ -74,84 +65,88 @@ type SchemaType = z.infer; // Component definition const WhatWeBelieveSlide = ({ data }: { data: Partial }) => { - - const { mainTitle, subtitle, visionTitle, visionText, missionTitle, missionText, teamImage, showYellowAccent } = data; + const { sectionTitle, sectionSubtitle, visionStatement, missionContent, supportingVisual, showVisualAccents, showColorBlocks } = data; return (
{/* Main Content Area */}
{/* Left Side - Image */} -
- {/* Team Image */} - {teamImage?.__image_url__ && ( -
+
+ {supportingVisual?.__image_url__ && ( +
{teamImage.__image_prompt__}
)} - {/* Yellow Accent Block - Bottom Left */} - {showYellowAccent && ( -
+ {/* Visual Accents */} + {showVisualAccents && ( + <> + {/* Decorative circles */} +
+
+ )} - - {/* Teal Accent Block - Bottom */} -
{/* Right Side - Content */} -
-
- - {/* Title Section */} -
- {mainTitle && ( -

- {mainTitle} -

- )} - - {subtitle && ( -

- {subtitle} -

- )} -
- - {/* Vision Section */} -
- {visionTitle && ( -

- {visionTitle} -

- )} - {visionText && ( -

- {visionText} -

- )} -
- -
- {/* Mission Section with Teal Background */} -
- {missionTitle && ( -

- {missionTitle} -

+
+ {/* Title Section */} +
+ {sectionTitle && ( +

+ {sectionTitle} +

)} - {missionText && ( -

- {missionText} + + {sectionSubtitle && ( +

+ {sectionSubtitle}

)}
+ + {/* Vision Section */} + {visionStatement && ( +
+

Vision

+

+ {visionStatement} +

+
+ )} + + {/* Mission Section with Teal Background */} + {missionContent && ( +
+ {missionContent.missionTitle && ( +

+ {missionContent.missionTitle} +

+ )} + {missionContent.missionDescription && ( +

+ {missionContent.missionDescription} +

+ )} +
+ )}
+ + {/* Color blocks for visual hierarchy */} + {showColorBlocks && ( + <> + {/* Bottom accent strip */} +
+ {/* Left accent */} +
+ + )}
); }; diff --git a/servers/nextjs/presentation-layouts/pitch-deck/setting.json b/servers/nextjs/presentation-layouts/pitch-deck/setting.json index 4b565369..00660bc1 100644 --- a/servers/nextjs/presentation-layouts/pitch-deck/setting.json +++ b/servers/nextjs/presentation-layouts/pitch-deck/setting.json @@ -1,5 +1,5 @@ { - "description": "This is a new pitch deck layout with a focus on simplicity and clarity.", + "description": "Professional presentation layouts with clean design and flexible content fields. Suitable for business pitches, organizational overviews, product presentations, and various corporate communications.", "ordered": false, "isDefault": false } \ No newline at end of file