-
)
}
diff --git a/servers/nextjs/app/layout-preview/types/index.ts b/servers/nextjs/app/layout-preview/types/index.ts
new file mode 100644
index 00000000..7c3efd2f
--- /dev/null
+++ b/servers/nextjs/app/layout-preview/types/index.ts
@@ -0,0 +1,28 @@
+/**
+ * Shared types for the Layout Preview system
+ */
+
+export interface LayoutInfo {
+ name: string
+ component: React.ComponentType
-
+ {/* Layout Header */}
+
+ )
+ })}
+
+ {/* Footer */}
+
+
- Current Layout: {layouts[currentLayout]?.name} -
-- {currentLayout + 1} of {layouts.length} layouts ({layouts[currentLayout]?.fileName}) -
- {layouts[currentLayout]?.sampleData && ( -
-
- )}
+ return (
+ - Sample Data Structure -
-
- {JSON.stringify(layouts[currentLayout].sampleData, null, 2)}
-
-
+
+
+ {/* Layout Content */}
+
+
+
+
+
+ {name}
+{fileName}
+
+ #{index + 1}
+
+
- {slideData.backgroundImage && (
-
- )}
+ {/* Enhanced geometric background decoration */}
+
+
+
+
-
- {/* Header */}
-
interface ConclusionSlideLayoutProps {
data?: Partial
+ accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
}
-const ConclusionSlideLayout: React.FC = ({ data }) => {
+const ConclusionSlideLayout: React.FC = ({ data, accentColor = 'blue' }) => {
const slideData = conclusionSlideSchema.parse(data || {})
+ const accentColors = {
+ blue: 'from-blue-600 to-blue-800',
+ green: 'from-emerald-600 to-emerald-800',
+ purple: 'from-violet-600 to-violet-800',
+ orange: 'from-orange-600 to-orange-800',
+ red: 'from-red-600 to-red-800'
+ }
+
+ const bulletColors = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
+ }
+
+ const accentSolids = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
+ }
+
return (
-
- {slideData.title}
+
)
}
diff --git a/servers/nextjs/components/layouts/ConclusionSlideLayout.tsx b/servers/nextjs/components/layouts/ConclusionSlideLayout.tsx
index 11af8fc4..179c1a6b 100644
--- a/servers/nextjs/components/layouts/ConclusionSlideLayout.tsx
+++ b/servers/nextjs/components/layouts/ConclusionSlideLayout.tsx
@@ -1,132 +1,226 @@
import React from 'react'
-import { z } from "zod";
+import * as z from "zod";
const conclusionSlideSchema = z.object({
- title: z.string().min(3).max(100).default('Conclusion'),
- subtitle: z.string().min(3).max(150).optional().describe("Optional subtitle or closing message"),
- keyTakeaways: z.array(z.string().min(5).max(200)).min(1).max(5).default([
- 'First key takeaway',
- 'Second important point',
- 'Third crucial insight'
- ]).describe("List of key takeaways (1-5 items)"),
- callToAction: z.string().min(5).max(200).optional().describe("Call to action or next steps"),
+ title: z.string().min(3).max(100).default('Conclusion').describe('Title of the slide'),
+ subtitle: z.string().min(3).max(150).optional().describe('Optional subtitle or description'),
+ keyTakeaways: z.array(z.string().min(5).max(200)).min(2).max(6).default([
+ 'Successfully achieved our primary objectives',
+ 'Demonstrated significant value and impact',
+ 'Established clear next steps for continued success',
+ 'Built strong foundation for future growth'
+ ]).describe('Key takeaways or summary points (2-6 items)'),
+ callToAction: z.string().min(5).max(150).optional().describe('Optional call to action or next steps'),
contactInfo: z.object({
- email: z.string().email().optional(),
- phone: z.string().optional(),
- website: z.string().url().optional(),
- linkedin: z.string().url().optional()
- }).optional(),
- backgroundImage: z.string().url().optional().default("https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4").describe("URL to background image for the slide")
+ email: z.string().email().optional().describe('Contact email'),
+ phone: z.string().min(5).max(50).optional().describe('Contact phone number'),
+ website: z.string().url().optional().describe('Website URL')
+ }).optional().describe('Optional contact information'),
+ backgroundImage: z.string().optional().describe('URL to background image for the slide')
})
-// Standardized schema export
export const Schema = conclusionSlideSchema
export type ConclusionSlideData = z.infer
- {slideData.title}
+
+ {/* Professional Header */}
+
+
+
+ {slideData.title}
+
+
{slideData.subtitle && (
-
+
{slideData.subtitle}
)}
-
-
- {/* Bullet Points */}
-
-
-
+
+
+
+
+
+
+ {/* Enhanced Bullet Points */}
+
+
+ {/* Content background accent */}
+
+
+
{slideData.bulletPoints.map((point, index) => (
- -
-
-
+
-
+ {/* Enhanced bullet point icon */}
+
+
+
+
+
+ {/* Enhanced bullet text */}
+
{point}
))}
-
+
- {/* Decorative accent */}
-
+ {/* Enhanced decorative accent */}
+
+
+
+
+
+ {/* Professional corner accents */}
+
+ + {slideData.title} +
+ {slideData.subtitle && ( -+
{slideData.subtitle}
)} - -
-
+
-
+
-
-
-
+
- + {/* Enhanced bullet point icon */} +
))}+ + ++ + {/* Enhanced bullet text */} + {point} - + {/* Enhanced bullet point icon */} +
+
+
+
+
+
+ {/* Enhanced Bullet Points */}
+
+ {/* Content background accent */}
+
+
+
- -
{slideData.bulletPoints.map((point, index) => (
-
- {slideData.backgroundImage && (
-
- )}
-
-
interface ContentSlideLayoutProps {
data?: Partial
+ accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
}
-const ContentSlideLayout: React.FC = ({ data }) => {
+const ContentSlideLayout: React.FC = ({ data, accentColor = 'blue' }) => {
const slideData = contentSlideSchema.parse(data || {})
- console.log(slideData)
+
+ const accentColors = {
+ blue: 'from-blue-600 to-blue-800',
+ green: 'from-emerald-600 to-emerald-800',
+ purple: 'from-violet-600 to-violet-800',
+ orange: 'from-orange-600 to-orange-800',
+ red: 'from-red-600 to-red-800'
+ }
+
+ const accentSolids = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
+ }
return (
- {/* Main Title */}
-
)
}
diff --git a/servers/nextjs/components/layouts/ContentSlideLayout.tsx b/servers/nextjs/components/layouts/ContentSlideLayout.tsx
index 3570887d..d8b21d1a 100644
--- a/servers/nextjs/components/layouts/ContentSlideLayout.tsx
+++ b/servers/nextjs/components/layouts/ContentSlideLayout.tsx
@@ -1,65 +1,120 @@
import React from 'react'
-import { z } from "zod";
+import * as z from "zod";
const contentSlideSchema = z.object({
- title: z.string().min(3).max(100).default('Content Title'),
- content: z.string().min(10).max(2000).default('Your main content goes here...').describe("Main content text for the slide"),
- subtitle: z.string().min(3).max(150).optional().default('Subtitle of the slide').describe("Optional subtitle or section header"),
- backgroundImage: z.string().url().default("https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4").optional().describe("URL to background image for the slide")
+ title: z.string().min(3).max(100).default('Slide Title').describe('Title of the slide'),
+ subtitle: z.string().min(3).max(150).optional().describe('Optional subtitle or description'),
+ content: z.string().min(10).max(1000).default('Your slide content goes here. This is where you can add detailed information, explanations, or any other text content that supports your presentation.').describe('Main content text'),
+ backgroundImage: z.string().optional().describe('URL to background image for the slide')
})
-// Standardized schema export
export const Schema = contentSlideSchema
export type ContentSlideData = z.infer- {slideData.title} -
- - {/* Subtitle */} - {slideData.subtitle && ( -- {slideData.subtitle} -
- )} - - {/* Key Takeaways */} -
-
-
- {/* Call to Action */}
- {slideData.callToAction && (
- - Key Takeaways -
-
- {slideData.keyTakeaways.map((takeaway, index) => (
-
-
-
- ))}
-
-
-
- {index + 1}
-
- - {takeaway} -
-
-
- )}
-
- {/* Contact Information */}
- {slideData.contactInfo && (
-
-
- - {slideData.callToAction} -
-
-
- )}
+ {/* Enhanced geometric background decoration */}
+ - Get in Touch -
-
- {slideData.contactInfo.email && (
-
-
- Email:
- {slideData.contactInfo.email}
-
- )}
- {slideData.contactInfo.phone && (
-
- Phone:
- {slideData.contactInfo.phone}
-
- )}
- {slideData.contactInfo.website && (
-
- Website:
- {slideData.contactInfo.website}
-
- )}
- {slideData.contactInfo.linkedin && (
-
- LinkedIn:
- {slideData.contactInfo.linkedin}
-
- )}
-
+
+
- {/* Decorative accent */}
-
+
+ {/* Professional Header */}
+
+
+
+ {/* Enhanced Content Layout */}
+
+ {/* Key Takeaways - Takes up 2/3 of space */}
+
+
+
+ {/* Enhanced decorative accent */}
+ + + {slideData.title} + +
+ + {slideData.subtitle && ( ++ {slideData.subtitle} +
+ )} + +
+
+
+
+
+
+
+ {/* Call to Action & Contact Info - Takes up 1/3 of space */}
+
+ {/* Content accent */}
+
+
+
+ Key Takeaways
+ +-
+ {slideData.keyTakeaways.map((takeaway, index) => (
+
-
+ {/* Enhanced bullet point */}
+ + + ++ + + {takeaway} + +
+ ))}
+
+ {/* Call to Action */}
+ {slideData.callToAction && (
+
+
+ {/* CTA accent */}
+
+
+
+ )}
+
+ {/* Contact Information */}
+ {slideData.contactInfo && Object.values(slideData.contactInfo).some(Boolean) && (
+
+
+
+
+
+ Next Steps
++ {slideData.callToAction} +
+
+ {/* Contact accent */}
+
+
+
+ )}
+ Get in Touch
+ +
+ {slideData.contactInfo.email && (
+
+
+
+ {/* Background decoration */}
+
+
+
+
+ {slideData.contactInfo.email}
+
+ )}
+
+ {slideData.contactInfo.phone && (
+
+
+
+
+ {slideData.contactInfo.phone}
+
+ )}
+
+ {slideData.contactInfo.website && (
+
+
+
+
+ {slideData.contactInfo.website.replace(/^https?:\/\//, '')}
+
+ )}
+
+
+
+
+
+ {/* Professional corner accents */}
+
- {slideData.backgroundImage && (
-
- )}
+ {/* Enhanced geometric background decoration */}
+
+
+
+
-
- {/* Header */}
-
-
- {slideData.title}
+ {/* Grid overlay for professional look */}
+
+
+
- {slideData.title}
+ {/* Grid overlay for professional look */}
+
+
+
+ {/* Professional Header */}
+
+
+
+ {slideData.title}
+
+
{slideData.subtitle && (
-
+
{slideData.subtitle}
)}
-
-
- {/* Content Area */}
-
-
-
- {slideData.content}
+
+
+
+
+
+
+ {/* Main Content with Enhanced Styling */}
+
+
+ {/* Content background accent */}
+
+
+
+ {slideData.content.split('\n').map((paragraph, index) => (
+ paragraph.trim() && (
+
+ {paragraph}
+
+ )
+ ))}
-
+
- {/* Decorative accent */}
-
+ {/* Enhanced decorative accent */}
+
+
+
+
+
+ {/* Professional corner accents */}
+
)
}
diff --git a/servers/nextjs/components/layouts/FirstSlideLayout.tsx b/servers/nextjs/components/layouts/FirstSlideLayout.tsx
index 7b1b029d..d30e48e0 100644
--- a/servers/nextjs/components/layouts/FirstSlideLayout.tsx
+++ b/servers/nextjs/components/layouts/FirstSlideLayout.tsx
@@ -1,86 +1,129 @@
-
-
-
import React from 'react'
-import { z } from "zod";
+import * as z from "zod";
const firstSlideSchema = z.object({
- title: z.string().min(3).max(100).default('Welcome to Your Presentation'),
- subtitle: z.string().min(3).max(150).optional().describe("Optional subtitle or tagline"),
- author: z.string().min(2).max(50).default('Your Name').describe("Author or presenter name"),
- organization: z.string().min(2).max(100).optional().describe("Organization or company name"),
- date: z.string().default(new Date().toLocaleDateString()).describe("Presentation date"),
- logoUrl: z.string().url().optional().describe("URL to company/organization logo"),
- backgroundImage: z.string().url().default("https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4").optional().describe("URL to background image for the slide")
+ title: z.string().min(3).max(100).default('Welcome to Our Presentation').describe('Main title of the presentation'),
+ subtitle: z.string().min(10).max(200).default('Subtitle for the slide').optional().describe('Optional subtitle or tagline'),
+ author: z.string().min(2).max(100).default('John Doe').optional().describe('Author or presenter name'),
+ date: z.string().optional().describe('Presentation date'),
+ company: z.string().min(2).max(100).default('Company Name').optional().describe('Company or organization name'),
+ backgroundImage: z.string().optional().describe('URL to background image for the slide')
})
-// Standardized schema export
export const Schema = firstSlideSchema
export type FirstSlideData = z.infer
interface FirstSlideLayoutProps {
data?: Partial
+ accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
}
-const FirstSlideLayout: React.FC = ({ data }) => {
+const FirstSlideLayout: React.FC = ({ data, accentColor = 'blue' }) => {
const slideData = firstSlideSchema.parse(data || {})
+ const accentColors = {
+ blue: 'from-blue-600 to-blue-800',
+ green: 'from-emerald-600 to-emerald-800',
+ purple: 'from-violet-600 to-violet-800',
+ orange: 'from-orange-600 to-orange-800',
+ red: 'from-red-600 to-red-800'
+ }
+
+ const accentSolids = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
+ }
+
return (
- {slideData.backgroundImage && (
-
- )}
-
-
- {/* Logo */}
- {slideData.logoUrl && (
-
- 
-
- )}
-
- {/* Main Title */}
-
- {slideData.title}
-
-
- {/* Subtitle */}
- {slideData.subtitle && (
-
- {slideData.subtitle}
-
- )}
-
- {/* Author and Organization */}
-
- {slideData.author}
- {slideData.organization && (
-
- {slideData.organization}
-
- )}
-
-
- {/* Date */}
-
- {slideData.date}
-
+ {/* Enhanced geometric background decoration */}
+
+
+
+
- {/* Decorative accent */}
-
+ {/* Grid overlay for professional look */}
+
+
+
+ {/* Main Content */}
+
+ {/* Title */}
+
+
+ {slideData.title}
+
+
+
+ {/* Subtitle */}
+ {slideData.subtitle && (
+
+ {slideData.subtitle}
+
+ )}
+
+ {/* Enhanced Accent Line */}
+
+
+
+
+
+ {/* Professional Metadata Container */}
+
+
+ {slideData.author && (
+
+ {slideData.author}
+
+ )}
+
+ {slideData.company && (
+
+ {slideData.company}
+
+ )}
+
+ {slideData.date && (
+
+ {slideData.date}
+
+ )}
+
+
+
+
+
+ {/* Enhanced decorative accent with glow effect */}
+
+
+
+
+
+ {/* Professional corner accents */}
+
+
)
}
diff --git a/servers/nextjs/components/layouts/ImageSlideLayout.tsx b/servers/nextjs/components/layouts/ImageSlideLayout.tsx
index 9df23fed..17eb2245 100644
--- a/servers/nextjs/components/layouts/ImageSlideLayout.tsx
+++ b/servers/nextjs/components/layouts/ImageSlideLayout.tsx
@@ -1,126 +1,137 @@
import React from 'react'
-import { z } from "zod";
+import * as z from "zod";
const imageSlideSchema = z.object({
- title: z.string().min(3).max(100).default('Image Slide'),
- subtitle: z.string().min(3).max(150).optional().describe("Optional subtitle or caption"),
- imageUrl: z.string().url().default('https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4').describe("URL to the main image"),
- caption: z.string().min(5).max(300).optional().describe("Image caption or description"),
- layout: z.enum(['full', 'centered', 'left', 'right']).default('centered').describe("Image layout style"),
- backgroundImage: z.string().url().default("https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4").optional().describe("URL to background image for the slide")
+ title: z.string().min(3).max(100).default('Image Showcase').describe('Title of the slide'),
+ subtitle: z.string().min(3).max(150).default('Subtitle for the slide').optional().describe('Optional subtitle or description'),
+ image: z.string().default('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop').describe('Main image URL'),
+ imageCaption: z.string().min(5).max(200).default('Image caption').optional().describe('Optional image caption or description'),
+ content: z.string().min(10).max(600).optional().describe('Optional supporting content text'),
+ backgroundImage: z.string().optional().describe('URL to background image for the slide')
})
-// Standardized schema export
export const Schema = imageSlideSchema
export type ImageSlideData = z.infer
interface ImageSlideLayoutProps {
data?: Partial
+ accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
}
-const ImageSlideLayout: React.FC = ({ data }) => {
+const ImageSlideLayout: React.FC = ({ data, accentColor = 'blue' }) => {
const slideData = imageSlideSchema.parse(data || {})
- const getImageClasses = () => {
- switch (slideData.layout) {
- case 'full':
- return 'w-full h-full object-cover'
- case 'left':
- return 'w-1/2 h-auto max-h-96 object-contain rounded-lg shadow-lg'
- case 'right':
- return 'w-1/2 h-auto max-h-96 object-contain rounded-lg shadow-lg'
- default: // centered
- return 'max-w-4xl max-h-96 w-auto h-auto object-contain rounded-lg shadow-lg'
- }
+ const accentColors = {
+ blue: 'from-blue-600 to-blue-800',
+ green: 'from-emerald-600 to-emerald-800',
+ purple: 'from-violet-600 to-violet-800',
+ orange: 'from-orange-600 to-orange-800',
+ red: 'from-red-600 to-red-800'
}
- const getContainerClasses = () => {
- switch (slideData.layout) {
- case 'full':
- return 'relative w-full h-full'
- case 'left':
- return 'flex items-center space-x-16'
- case 'right':
- return 'flex items-center space-x-16 flex-row-reverse'
- default: // centered
- return 'flex flex-col items-center space-y-8'
- }
+ const accentSolids = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
}
+
+
return (
- {slideData.backgroundImage && (
-
- )}
-
-
- {/* Header - only show if not full layout */}
- {slideData.layout !== 'full' && (
-
-
- {slideData.title}
-
- {slideData.subtitle && (
-
- {slideData.subtitle}
-
- )}
-
-
- )}
-
- {/* Content Area */}
-
- {slideData.layout === 'full' && (
-
-
- {slideData.title}
-
- {slideData.subtitle && (
-
- {slideData.subtitle}
-
- )}
-
- )}
-
- 
-
- {(slideData.layout === 'left' || slideData.layout === 'right') && (
-
- {slideData.caption && (
-
- {slideData.caption}
-
- )}
-
- )}
-
-
- {/* Caption for centered and full layouts */}
- {slideData.caption && (slideData.layout === 'centered' || slideData.layout === 'full') && (
-
-
- {slideData.caption}
-
-
- )}
+ {/* Enhanced geometric background decoration */}
+
+
+
- {/* Decorative accent */}
-
+
+ {/* Professional Header */}
+
+
+
+ {slideData.title}
+
+
+
+ {slideData.subtitle && (
+
+ {slideData.subtitle}
+
+ )}
+
+
+
+
+
+
+
+ {/* Enhanced Content Layout */}
+
+
+
+
+
+ {slideData.content?.split('\n').map((paragraph, index) => (
+ paragraph.trim() && (
+
+ {paragraph}
+
+ )
+ ))}
+
+
+ {/* Background decoration */}
+
+
+
+
+ 
+
+
+ {slideData.imageCaption && (
+
+ {slideData.imageCaption}
+
+ )}
+
+
+
+
+ {/* Enhanced decorative accent */}
+
+
+
+
+
+ {/* Professional corner accents */}
+
)
}
diff --git a/servers/nextjs/components/layouts/ProcessSlideLayout.tsx b/servers/nextjs/components/layouts/ProcessSlideLayout.tsx
new file mode 100644
index 00000000..0844af55
--- /dev/null
+++ b/servers/nextjs/components/layouts/ProcessSlideLayout.tsx
@@ -0,0 +1,181 @@
+import React from 'react'
+import * as z from "zod";
+
+const processSlideSchema = z.object({
+ title: z.string().min(3).max(100).default('Our Process').describe('Title of the slide'),
+ subtitle: z.string().min(3).max(150).optional().describe('Optional subtitle or description'),
+ processSteps: z.array(z.object({
+ step: z.number().min(1).max(10).describe('Step number'),
+ title: z.string().min(3).max(100).describe('Step title'),
+ description: z.string().min(10).max(200).describe('Step description')
+ })).min(2).max(6).default([
+ {
+ step: 1,
+ title: 'Discovery',
+ description: 'Understanding requirements and gathering initial insights'
+ },
+ {
+ step: 2,
+ title: 'Planning',
+ description: 'Strategic planning and roadmap development'
+ },
+ {
+ step: 3,
+ title: 'Implementation',
+ description: 'Executing the plan with precision and quality'
+ },
+ {
+ step: 4,
+ title: 'Delivery',
+ description: 'Final delivery and ongoing support'
+ }
+ ]).describe('Process steps (2-6 items)'),
+ backgroundImage: z.string().optional().describe('URL to background image for the slide')
+})
+
+export const Schema = processSlideSchema
+
+export type ProcessSlideData = z.infer
+
+interface ProcessSlideLayoutProps {
+ data?: Partial
+ accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
+}
+
+const ProcessSlideLayout: React.FC = ({ data, accentColor = 'blue' }) => {
+ const slideData = processSlideSchema.parse(data || {})
+
+ const accentColors = {
+ blue: 'from-blue-600 to-blue-800',
+ green: 'from-emerald-600 to-emerald-800',
+ purple: 'from-violet-600 to-violet-800',
+ orange: 'from-orange-600 to-orange-800',
+ red: 'from-red-600 to-red-800'
+ }
+
+ const stepColors = {
+ blue: 'bg-blue-600 text-white border-blue-600',
+ green: 'bg-emerald-600 text-white border-emerald-600',
+ purple: 'bg-violet-600 text-white border-violet-600',
+ orange: 'bg-orange-600 text-white border-orange-600',
+ red: 'bg-red-600 text-white border-red-600'
+ }
+
+ const accentSolids = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
+ }
+
+ return (
+
+ {/* Enhanced geometric background decoration */}
+
+
+
+
+
+
+ {/* Professional Header */}
+
+
+
+ {slideData.title}
+
+
+
+ {slideData.subtitle && (
+
+ {slideData.subtitle}
+
+ )}
+
+
+
+
+
+
+
+ {/* Enhanced Process Steps */}
+
+
+
+ {slideData.processSteps.map((step, index) => (
+
+ {/* Process Step */}
+
+ {/* Step Number Circle */}
+
+ {step.step}
+
+
+
+ {/* Step Content Card */}
+
+ {/* Card accent */}
+
+
+ {/* Step Title */}
+
+ {step.title}
+
+
+ {/* Step Description */}
+
+ {step.description}
+
+
+ {/* Background decoration */}
+
+
+
+
+ {/* Arrow Between Steps */}
+ {index < slideData.processSteps.length - 1 && (
+
+
+
+
+
+ )}
+
+ ))}
+
+
+
+
+
+ {/* Enhanced decorative accent */}
+
+
+
+
+
+ {/* Professional corner accents */}
+
+
+ )
+}
+
+export default ProcessSlideLayout
\ No newline at end of file
diff --git a/servers/nextjs/components/layouts/QuoteSlideLayout.tsx b/servers/nextjs/components/layouts/QuoteSlideLayout.tsx
new file mode 100644
index 00000000..fe73cd84
--- /dev/null
+++ b/servers/nextjs/components/layouts/QuoteSlideLayout.tsx
@@ -0,0 +1,167 @@
+import React from 'react'
+import * as z from "zod";
+
+const quoteSlideSchema = z.object({
+ title: z.string().min(3).max(100).default('Testimonials').describe('Title of the slide'),
+ subtitle: z.string().min(3).max(150).optional().describe('Optional subtitle or description'),
+ quote: z.string().min(10).max(500).default('This solution has transformed our business operations and exceeded all expectations.').describe('The main quote or testimonial'),
+ author: z.string().min(2).max(100).default('John Smith').describe('Quote author name'),
+ authorTitle: z.string().min(2).max(100).optional().describe('Author job title or position'),
+ company: z.string().min(2).max(100).optional().describe('Author company or organization'),
+ authorImage: z.string().optional().describe('URL to author photo'),
+ backgroundImage: z.string().optional().describe('URL to background image for the slide')
+})
+
+export const Schema = quoteSlideSchema
+
+export type QuoteSlideData = z.infer
+
+interface QuoteSlideLayoutProps {
+ data?: Partial
+ accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
+}
+
+const QuoteSlideLayout: React.FC = ({ data, accentColor = 'blue' }) => {
+ const slideData = quoteSlideSchema.parse(data || {})
+
+ const accentColors = {
+ blue: 'from-blue-600 to-blue-800',
+ green: 'from-emerald-600 to-emerald-800',
+ purple: 'from-violet-600 to-violet-800',
+ orange: 'from-orange-600 to-orange-800',
+ red: 'from-red-600 to-red-800'
+ }
+
+ const accentSolids = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
+ }
+
+ return (
+
+ {/* Enhanced geometric background decoration */}
+
+
+
+
+
+
+ {/* Professional Header */}
+
+
+
+ {slideData.title}
+
+
+
+ {slideData.subtitle && (
+
+ {slideData.subtitle}
+
+ )}
+
+
+
+
+
+
+
+ {/* Enhanced Quote Content */}
+
+
+ {/* Enhanced Background Quote Decoration */}
+
+ "
+
+
+ "
+
+
+ {/* Quote Text */}
+
+ "{slideData.quote}"
+
+
+ {/* Professional Author Attribution */}
+
+ {/* Author Avatar */}
+
+ {slideData.authorImage ? (
+ 
+ ) : (
+
+ {slideData.author.split(' ').map(n => n[0]).join('')}
+
+ )}
+
+
+ {/* Author Details */}
+
+
+ {slideData.author}
+
+
+ {slideData.authorTitle && (
+
+ {slideData.authorTitle}
+
+ )}
+
+ {slideData.company && (
+
+ {slideData.company}
+
+ )}
+
+
+
+ {/* Enhanced Quote Accent Line */}
+
+
+
+
+
+
+
+ {/* Background decoration */}
+
+
+
+
+
+ {/* Enhanced decorative accent */}
+
+
+
+
+
+ {/* Professional corner accents */}
+
+
+ )
+}
+
+export default QuoteSlideLayout
\ No newline at end of file
diff --git a/servers/nextjs/components/layouts/StatisticsSlideLayout.tsx b/servers/nextjs/components/layouts/StatisticsSlideLayout.tsx
new file mode 100644
index 00000000..362b0bf0
--- /dev/null
+++ b/servers/nextjs/components/layouts/StatisticsSlideLayout.tsx
@@ -0,0 +1,200 @@
+import React from 'react'
+import * as z from "zod";
+
+const statisticsSlideSchema = z.object({
+ title: z.string().min(3).max(100).default('Key Statistics').describe('Title of the slide'),
+ subtitle: z.string().min(3).max(150).optional().describe('Optional subtitle or description'),
+ statistics: z.array(z.object({
+ value: z.string().min(1).max(20).describe('Statistical value (e.g., "250%", "$1.2M", "99.9%")'),
+ label: z.string().min(3).max(100).describe('Description of the statistic'),
+ trend: z.enum(['up', 'down', 'neutral']).optional().describe('Trend direction indicator'),
+ context: z.string().min(5).max(200).optional().describe('Additional context or time period')
+ })).min(2).max(6).default([
+ {
+ value: '250%',
+ label: 'Revenue Growth',
+ trend: 'up',
+ context: 'Year over year increase'
+ },
+ {
+ value: '50M+',
+ label: 'Active Users',
+ trend: 'up',
+ context: 'Global user base'
+ },
+ {
+ value: '99.9%',
+ label: 'Uptime',
+ trend: 'neutral',
+ context: 'Service reliability'
+ },
+ {
+ value: '24/7',
+ label: 'Support',
+ trend: 'neutral',
+ context: 'Customer service'
+ }
+ ]).describe('List of statistics (2-6 items)'),
+ backgroundImage: z.string().optional().describe('URL to background image for the slide')
+})
+
+export const Schema = statisticsSlideSchema
+
+export type StatisticsSlideData = z.infer
+
+interface StatisticsSlideLayoutProps {
+ data?: Partial
+ accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
+}
+
+const StatisticsSlideLayout: React.FC = ({ data, accentColor = 'blue' }) => {
+ const slideData = statisticsSlideSchema.parse(data || {})
+ const statsCount = slideData.statistics.length
+
+ const accentColors = {
+ blue: 'from-blue-600 to-blue-800',
+ green: 'from-emerald-600 to-emerald-800',
+ purple: 'from-violet-600 to-violet-800',
+ orange: 'from-orange-600 to-orange-800',
+ red: 'from-red-600 to-red-800'
+ }
+
+ const accentSolids = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
+ }
+
+ const trendColors = {
+ up: {
+ blue: 'text-emerald-600 bg-emerald-50 border-emerald-200',
+ green: 'text-emerald-600 bg-emerald-50 border-emerald-200',
+ purple: 'text-emerald-600 bg-emerald-50 border-emerald-200',
+ orange: 'text-emerald-600 bg-emerald-50 border-emerald-200',
+ red: 'text-emerald-600 bg-emerald-50 border-emerald-200'
+ },
+ down: 'text-red-600 bg-red-50 border-red-200',
+ neutral: 'text-slate-600 bg-slate-50 border-slate-200'
+ }
+
+ const getTrendIcon = (trend?: string) => {
+ switch (trend) {
+ case 'up':
+ return '↗'
+ case 'down':
+ return '↘'
+ case 'neutral':
+ return '→'
+ default:
+ return ''
+ }
+ }
+
+ const getGridCols = () => {
+ if (statsCount <= 2) return 'grid-cols-2'
+ if (statsCount <= 3) return 'grid-cols-3'
+ if (statsCount <= 4) return 'grid-cols-2 lg:grid-cols-4'
+ return 'grid-cols-2 lg:grid-cols-3'
+ }
+
+ return (
+
+ {/* Enhanced geometric background decoration */}
+
+
+
+
+
+
+ {/* Professional Header */}
+
+
+
+ {slideData.title}
+
+
+
+ {slideData.subtitle && (
+
+ {slideData.subtitle}
+
+ )}
+
+
+
+
+
+
+
+ {/* Enhanced Statistics Grid */}
+
+
+ {slideData.statistics.map((stat, index) => (
+
+ {/* Card accent */}
+
+
+ {/* Statistic Value */}
+
+ {stat.value}
+
+
+ {/* Statistic Label */}
+
+ {stat.label}
+
+
+ {/* Trend Indicator */}
+ {stat.trend && (
+
+ {getTrendIcon(stat.trend)}
+ {stat.trend.toUpperCase()}
+
+ )}
+
+ {/* Context */}
+ {stat.context && (
+
+ {stat.context}
+
+ )}
+
+ {/* Background decoration */}
+
+
+ ))}
+
+
+
+
+ {/* Enhanced decorative accent */}
+
+
+
+
+
+ {/* Professional corner accents */}
+
+
+ )
+}
+
+export default StatisticsSlideLayout
\ No newline at end of file
diff --git a/servers/nextjs/components/layouts/TeamSlideLayout.tsx b/servers/nextjs/components/layouts/TeamSlideLayout.tsx
new file mode 100644
index 00000000..e3b1518b
--- /dev/null
+++ b/servers/nextjs/components/layouts/TeamSlideLayout.tsx
@@ -0,0 +1,217 @@
+import React from 'react'
+import * as z from "zod";
+
+const teamSlideSchema = z.object({
+ title: z.string().min(3).max(100).default('Meet Our Team').describe('Title of the slide'),
+ subtitle: z.string().min(3).max(150).optional().describe('Optional subtitle or team description'),
+ teamMembers: z.array(z.object({
+ name: z.string().min(2).max(100).describe('Team member name'),
+ title: z.string().min(2).max(100).describe('Job title or role'),
+ image: z.string().optional().describe('URL to team member photo'),
+ bio: z.string().min(10).max(300).optional().describe('Brief biography or description'),
+ email: z.string().email().optional().describe('Contact email'),
+ linkedin: z.string().url().optional().describe('LinkedIn profile URL')
+ })).min(1).max(6).default([
+ {
+ name: 'Sarah Johnson',
+ title: 'Chief Executive Officer',
+ image: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=300&h=300&fit=crop&crop=face',
+ bio: 'Strategic leader with 15+ years experience driving innovation and growth in technology companies.',
+ email: 'sarah@company.com',
+ linkedin: 'https://linkedin.com/in/sarahjohnson'
+ },
+ {
+ name: 'Michael Chen',
+ title: 'Chief Technology Officer',
+ image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=300&h=300&fit=crop&crop=face',
+ bio: 'Technology visionary specializing in scalable architecture and emerging technologies.',
+ email: 'michael@company.com',
+ linkedin: 'https://linkedin.com/in/michaelchen'
+ },
+ {
+ name: 'Emma Rodriguez',
+ title: 'Head of Design',
+ image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&h=300&fit=crop&crop=face',
+ bio: 'Creative director passionate about user-centered design and innovative digital experiences.',
+ email: 'emma@company.com',
+ linkedin: 'https://linkedin.com/in/emmarodriguez'
+ }
+ ]).describe('Team members (1-6 people)'),
+ backgroundImage: z.string().optional().describe('URL to background image for the slide')
+})
+
+export const Schema = teamSlideSchema
+
+export type TeamSlideData = z.infer
+
+interface TeamSlideLayoutProps {
+ data?: Partial
+ accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
+}
+
+const TeamSlideLayout: React.FC = ({ data, accentColor = 'blue' }) => {
+ const slideData = teamSlideSchema.parse(data || {})
+
+ const accentColors = {
+ blue: 'from-blue-600 to-blue-800',
+ green: 'from-emerald-600 to-emerald-800',
+ purple: 'from-violet-600 to-violet-800',
+ orange: 'from-orange-600 to-orange-800',
+ red: 'from-red-600 to-red-800'
+ }
+
+ const accentSolids = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
+ }
+
+ const iconColors = {
+ blue: 'text-blue-600 hover:text-blue-700',
+ green: 'text-emerald-600 hover:text-emerald-700',
+ purple: 'text-violet-600 hover:text-violet-700',
+ orange: 'text-orange-600 hover:text-orange-700',
+ red: 'text-red-600 hover:text-red-700'
+ }
+
+ return (
+
+ {/* Enhanced geometric background decoration */}
+
+
+
+
+
+
+ {/* Professional Header */}
+
+
+
+ {slideData.title}
+
+
+
+ {slideData.subtitle && (
+
+ {slideData.subtitle}
+
+ )}
+
+
+
+
+
+
+
+ {/* Enhanced Team Grid */}
+
+
+ {slideData.teamMembers.map((member, index) => (
+
+ {/* Card accent */}
+
+
+ {/* Professional Avatar */}
+
+
+ {member.image ? (
+ 
+ ) : (
+
+ {member.name.split(' ').map(n => n[0]).join('')}
+
+ )}
+
+
+
+
+ {/* Member Info */}
+
+
+ {member.name}
+
+
+ {member.title}
+
+
+ {member.bio && (
+
+ {member.bio}
+
+ )}
+
+
+ {/* Professional Contact Links */}
+
+
+ {/* Background decoration */}
+
+
+ ))}
+
+
+
+
+ {/* Enhanced decorative accent */}
+
+
+
+
+
+ {/* Professional corner accents */}
+
+
+ )
+}
+
+export default TeamSlideLayout
\ No newline at end of file
diff --git a/servers/nextjs/components/layouts/TimelineSlideLayout.tsx b/servers/nextjs/components/layouts/TimelineSlideLayout.tsx
new file mode 100644
index 00000000..e76ab41c
--- /dev/null
+++ b/servers/nextjs/components/layouts/TimelineSlideLayout.tsx
@@ -0,0 +1,225 @@
+import React from 'react'
+import * as z from "zod";
+
+const timelineSlideSchema = z.object({
+ title: z.string().min(3).max(100).default('Project Timeline').describe('Title of the slide'),
+ subtitle: z.string().min(3).max(150).optional().describe('Optional subtitle or description'),
+ timelineItems: z.array(z.object({
+ date: z.string().min(2).max(50).describe('Date or time period'),
+ title: z.string().min(3).max(100).describe('Event or milestone title'),
+ description: z.string().min(10).max(300).describe('Event description'),
+ status: z.enum(['completed', 'current', 'upcoming']).default('upcoming').describe('Timeline item status')
+ })).min(2).max(6).default([
+ {
+ date: 'Q1 2024',
+ title: 'Project Initiation',
+ description: 'Project planning, team assembly, and initial requirements gathering',
+ status: 'completed'
+ },
+ {
+ date: 'Q2 2024',
+ title: 'Development Phase',
+ description: 'Core development work, prototype creation, and testing implementation',
+ status: 'current'
+ },
+ {
+ date: 'Q3 2024',
+ title: 'Testing & QA',
+ description: 'Comprehensive testing, quality assurance, and user acceptance testing',
+ status: 'upcoming'
+ },
+ {
+ date: 'Q4 2024',
+ title: 'Launch & Deployment',
+ description: 'Final deployment, go-live activities, and post-launch monitoring',
+ status: 'upcoming'
+ }
+ ]).describe('Timeline events (2-6 items)'),
+ backgroundImage: z.string().optional().describe('URL to background image for the slide')
+})
+
+export const Schema = timelineSlideSchema
+
+export type TimelineSlideData = z.infer
+
+interface TimelineSlideLayoutProps {
+ data?: Partial
+ accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
+}
+
+const TimelineSlideLayout: React.FC = ({ data, accentColor = 'blue' }) => {
+ const slideData = timelineSlideSchema.parse(data || {})
+
+ const accentColors = {
+ blue: 'from-blue-600 to-blue-800',
+ green: 'from-emerald-600 to-emerald-800',
+ purple: 'from-violet-600 to-violet-800',
+ orange: 'from-orange-600 to-orange-800',
+ red: 'from-red-600 to-red-800'
+ }
+
+ const accentSolids = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
+ }
+
+ const statusColors = {
+ completed: {
+ blue: 'bg-emerald-600 border-emerald-600 shadow-emerald-200',
+ green: 'bg-emerald-600 border-emerald-600 shadow-emerald-200',
+ purple: 'bg-emerald-600 border-emerald-600 shadow-emerald-200',
+ orange: 'bg-emerald-600 border-emerald-600 shadow-emerald-200',
+ red: 'bg-emerald-600 border-emerald-600 shadow-emerald-200'
+ },
+ current: {
+ blue: 'bg-blue-600 border-blue-600 ring-4 ring-blue-200 shadow-blue-300',
+ green: 'bg-emerald-600 border-emerald-600 ring-4 ring-emerald-200 shadow-emerald-300',
+ purple: 'bg-violet-600 border-violet-600 ring-4 ring-violet-200 shadow-violet-300',
+ orange: 'bg-orange-600 border-orange-600 ring-4 ring-orange-200 shadow-orange-300',
+ red: 'bg-red-600 border-red-600 ring-4 ring-red-200 shadow-red-300'
+ },
+ upcoming: {
+ blue: 'bg-slate-300 border-slate-400 shadow-slate-200',
+ green: 'bg-slate-300 border-slate-400 shadow-slate-200',
+ purple: 'bg-slate-300 border-slate-400 shadow-slate-200',
+ orange: 'bg-slate-300 border-slate-400 shadow-slate-200',
+ red: 'bg-slate-300 border-slate-400 shadow-slate-200'
+ }
+ }
+
+ const lineColors = {
+ blue: 'bg-blue-200',
+ green: 'bg-emerald-200',
+ purple: 'bg-violet-200',
+ orange: 'bg-orange-200',
+ red: 'bg-red-200'
+ }
+
+ return (
+
+ {/* Enhanced geometric background decoration */}
+
+
+
+
+
+
+ {/* Professional Header */}
+
+
+
+ {slideData.title}
+
+
+
+ {slideData.subtitle && (
+
+ {slideData.subtitle}
+
+ )}
+
+
+
+
+
+
+
+ {/* Enhanced Timeline */}
+
+
+
+ {/* Timeline line */}
+
+
+
+ {slideData.timelineItems.map((item, index) => (
+
+ {/* Timeline node */}
+
+ {item.status === 'completed' && (
+
+
+
+ )}
+ {item.status === 'current' && (
+
+
+
+ )}
+
+
+ {/* Timeline content card */}
+
+ {/* Card accent */}
+
+
+
+ {/* Date */}
+
+ {item.date}
+
+
+ {/* Title */}
+
+ {item.title}
+
+
+ {/* Description */}
+
+ {item.description}
+
+
+
+ {/* Status indicator */}
+
+
+ {item.status === 'completed' && '✓ Completed'}
+ {item.status === 'current' && '● In Progress'}
+ {item.status === 'upcoming' && '○ Upcoming'}
+
+
+
+ {/* Background decoration */}
+
+
+
+ ))}
+
+
+
+
+
+ {/* Enhanced decorative accent */}
+
+
+
+
+
+ {/* Professional corner accents */}
+
+
+ )
+}
+
+export default TimelineSlideLayout
\ No newline at end of file
diff --git a/servers/nextjs/components/layouts/TwoColumnSlideLayout.tsx b/servers/nextjs/components/layouts/TwoColumnSlideLayout.tsx
index ab8b0ae4..96068947 100644
--- a/servers/nextjs/components/layouts/TwoColumnSlideLayout.tsx
+++ b/servers/nextjs/components/layouts/TwoColumnSlideLayout.tsx
@@ -1,94 +1,160 @@
import React from 'react'
-import { z } from "zod";
+import * as z from "zod";
const twoColumnSlideSchema = z.object({
- title: z.string().min(3).max(100).default('Two Column Layout'),
- subtitle: z.string().min(3).max(150).optional().describe("Optional subtitle or section header"),
+ title: z.string().min(3).max(100).default('Two Column Layout').describe('Title of the slide'),
+ subtitle: z.string().min(3).max(150).optional().describe('Optional subtitle or description'),
leftColumn: z.object({
- title: z.string().min(2).max(50).default('Left Column'),
- content: z.string().min(10).max(1000).default('Content for the left column...').describe("Content for the left column")
+ title: z.string().min(3).max(100).default('Left Column').describe('Left column title'),
+ content: z.string().min(10).max(800).default('Content for the left column goes here. This can include detailed information, explanations, or supporting details.').describe('Left column content')
}).default({
title: 'Left Column',
- content: 'Content for the left column...'
+ content: 'Content for the left column goes here. This can include detailed information, explanations, or supporting details.'
}),
rightColumn: z.object({
- title: z.string().min(2).max(50).default('Right Column'),
- content: z.string().min(10).max(1000).default('Content for the right column...').describe("Content for the right column")
+ title: z.string().min(3).max(100).default('Right Column').describe('Right column title'),
+ content: z.string().min(10).max(800).default('Content for the right column goes here. This can include additional information, comparisons, or contrasting details.').describe('Right column content')
}).default({
title: 'Right Column',
- content: 'Content for the right column...'
+ content: 'Content for the right column goes here. This can include additional information, comparisons, or contrasting details.'
}),
- backgroundImage: z.string().url().default("https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4").optional().describe("URL to background image for the slide")
+ backgroundImage: z.string().optional().describe('URL to background image for the slide')
})
-// Standardized schema export
export const Schema = twoColumnSlideSchema
+
export type TwoColumnSlideData = z.infer
interface TwoColumnSlideLayoutProps {
data?: Partial
+ accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
}
-const TwoColumnSlideLayout: React.FC = ({ data }) => {
+const TwoColumnSlideLayout: React.FC = ({ data, accentColor = 'blue' }) => {
+
const slideData = twoColumnSlideSchema.parse(data || {})
+ const accentColors = {
+ blue: 'from-blue-600 to-blue-800',
+ green: 'from-emerald-600 to-emerald-800',
+ purple: 'from-violet-600 to-violet-800',
+ orange: 'from-orange-600 to-orange-800',
+ red: 'from-red-600 to-red-800'
+ }
+
+ const accentSolids = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
+ }
+
return (
- {slideData.backgroundImage && (
-
- )}
+ {/* Enhanced geometric background decoration */}
+
+
+
+
-
- {/* Header */}
-
-
- {slideData.title}
+
+ {/* Professional Header */}
+
+
+
+ {slideData.title}
+
+
{slideData.subtitle && (
-
+
{slideData.subtitle}
)}
-
-
- {/* Two Columns */}
-
+
+
+
+
+
+
+ {/* Two Column Content with Enhanced Styling */}
+
{/* Left Column */}
-
-
+
+ {/* Column accent */}
+
+
+
{slideData.leftColumn.title}
-
- {slideData.leftColumn.content}
+
+ {slideData.leftColumn.content.split('\n').map((paragraph, index) => (
+ paragraph.trim() && (
+
+ {paragraph}
+
+ )
+ ))}
- {/* Divider */}
-
-
{/* Right Column */}
-
-
+
+ {/* Column accent */}
+
+
+
{slideData.rightColumn.title}
-
- {slideData.rightColumn.content}
+
+ {slideData.rightColumn.content.split('\n').map((paragraph, index) => (
+ paragraph.trim() && (
+
+ {paragraph}
+
+ )
+ ))}
-
+
- {/* Decorative accent */}
-
+ {/* Enhanced decorative accent */}
+
+
+
+
+
+ {/* Professional corner accents */}
+
)
}
diff --git a/servers/nextjs/components/ui/sonner.tsx b/servers/nextjs/components/ui/sonner.tsx
new file mode 100644
index 00000000..452f4d9f
--- /dev/null
+++ b/servers/nextjs/components/ui/sonner.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = "system" } = useTheme()
+
+ return (
+
+ + {slideData.title} +
+ {slideData.subtitle && ( -+
{slideData.subtitle}
)} - -
-
- {/* Decorative accent */}
-
+ {/* Enhanced decorative accent */}
+
- {slideData.content}
+
+
+
+
+
+
+
+
+ {/* Main Content with Enhanced Styling */}
+
+ {/* Content background accent */}
+
+
+
-
+ {slideData.content.split('\n').map((paragraph, index) => (
+ paragraph.trim() && (
+
+ {paragraph} +
+ ) + ))}
+
+
+
+
+ {/* Professional corner accents */}
+
- {slideData.backgroundImage && (
-
- )}
-
-
interface ImageSlideLayoutProps {
data?: Partial
+ accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
}
-const ImageSlideLayout: React.FC = ({ data }) => {
+const ImageSlideLayout: React.FC = ({ data, accentColor = 'blue' }) => {
const slideData = imageSlideSchema.parse(data || {})
- const getImageClasses = () => {
- switch (slideData.layout) {
- case 'full':
- return 'w-full h-full object-cover'
- case 'left':
- return 'w-1/2 h-auto max-h-96 object-contain rounded-lg shadow-lg'
- case 'right':
- return 'w-1/2 h-auto max-h-96 object-contain rounded-lg shadow-lg'
- default: // centered
- return 'max-w-4xl max-h-96 w-auto h-auto object-contain rounded-lg shadow-lg'
- }
+ const accentColors = {
+ blue: 'from-blue-600 to-blue-800',
+ green: 'from-emerald-600 to-emerald-800',
+ purple: 'from-violet-600 to-violet-800',
+ orange: 'from-orange-600 to-orange-800',
+ red: 'from-red-600 to-red-800'
}
- const getContainerClasses = () => {
- switch (slideData.layout) {
- case 'full':
- return 'relative w-full h-full'
- case 'left':
- return 'flex items-center space-x-16'
- case 'right':
- return 'flex items-center space-x-16 flex-row-reverse'
- default: // centered
- return 'flex flex-col items-center space-y-8'
- }
+ const accentSolids = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
}
+
+
return (
- {/* Logo */}
- {slideData.logoUrl && (
-
)
}
diff --git a/servers/nextjs/components/layouts/ImageSlideLayout.tsx b/servers/nextjs/components/layouts/ImageSlideLayout.tsx
index 9df23fed..17eb2245 100644
--- a/servers/nextjs/components/layouts/ImageSlideLayout.tsx
+++ b/servers/nextjs/components/layouts/ImageSlideLayout.tsx
@@ -1,126 +1,137 @@
import React from 'react'
-import { z } from "zod";
+import * as z from "zod";
const imageSlideSchema = z.object({
- title: z.string().min(3).max(100).default('Image Slide'),
- subtitle: z.string().min(3).max(150).optional().describe("Optional subtitle or caption"),
- imageUrl: z.string().url().default('https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4').describe("URL to the main image"),
- caption: z.string().min(5).max(300).optional().describe("Image caption or description"),
- layout: z.enum(['full', 'centered', 'left', 'right']).default('centered').describe("Image layout style"),
- backgroundImage: z.string().url().default("https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4").optional().describe("URL to background image for the slide")
+ title: z.string().min(3).max(100).default('Image Showcase').describe('Title of the slide'),
+ subtitle: z.string().min(3).max(150).default('Subtitle for the slide').optional().describe('Optional subtitle or description'),
+ image: z.string().default('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop').describe('Main image URL'),
+ imageCaption: z.string().min(5).max(200).default('Image caption').optional().describe('Optional image caption or description'),
+ content: z.string().min(10).max(600).optional().describe('Optional supporting content text'),
+ backgroundImage: z.string().optional().describe('URL to background image for the slide')
})
-// Standardized schema export
export const Schema = imageSlideSchema
export type ImageSlideData = z.infer
-
-
- )}
-
- {/* Main Title */}
- - {slideData.title} -
- - {/* Subtitle */} - {slideData.subtitle && ( -- {slideData.subtitle} -
- )} - - {/* Author and Organization */} -
-
-
- {/* Date */}
- {slideData.author}
- {slideData.organization && (
-
- {slideData.organization}
-
- )}
-
- {slideData.date}
-
+ {/* Enhanced geometric background decoration */}
+
+
+
+
- {/* Decorative accent */}
-
+ {/* Grid overlay for professional look */}
+
+
+
+ {/* Main Content */}
+
+ {/* Title */}
+
+
+
+ {/* Enhanced decorative accent with glow effect */}
+ + + {slideData.title} + +
+ + {/* Subtitle */} + {slideData.subtitle && ( ++ {slideData.subtitle} +
+ )} + + {/* Enhanced Accent Line */} +
+
+
+
+
+ {/* Professional Metadata Container */}
+
+
+
+ {slideData.author && (
+
+ + {slideData.author} +
+ )} + + {slideData.company && ( ++ {slideData.company} +
+ )} + + {slideData.date && ( ++ {slideData.date} +
+ )} +
+
+
+
+
+ {/* Professional corner accents */}
+
+
- {slideData.backgroundImage && (
-
- )}
-
-
+
+interface ProcessSlideLayoutProps {
+ data?: Partial
+ accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
+}
+
+const ProcessSlideLayout: React.FC = ({ data, accentColor = 'blue' }) => {
+ const slideData = processSlideSchema.parse(data || {})
+
+ const accentColors = {
+ blue: 'from-blue-600 to-blue-800',
+ green: 'from-emerald-600 to-emerald-800',
+ purple: 'from-violet-600 to-violet-800',
+ orange: 'from-orange-600 to-orange-800',
+ red: 'from-red-600 to-red-800'
+ }
+
+ const stepColors = {
+ blue: 'bg-blue-600 text-white border-blue-600',
+ green: 'bg-emerald-600 text-white border-emerald-600',
+ purple: 'bg-violet-600 text-white border-violet-600',
+ orange: 'bg-orange-600 text-white border-orange-600',
+ red: 'bg-red-600 text-white border-red-600'
+ }
+
+ const accentSolids = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
+ }
+
+ return (
+
+
+interface QuoteSlideLayoutProps {
+ data?: Partial
+ accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
+}
+
+const QuoteSlideLayout: React.FC = ({ data, accentColor = 'blue' }) => {
+ const slideData = quoteSlideSchema.parse(data || {})
+
+ const accentColors = {
+ blue: 'from-blue-600 to-blue-800',
+ green: 'from-emerald-600 to-emerald-800',
+ purple: 'from-violet-600 to-violet-800',
+ orange: 'from-orange-600 to-orange-800',
+ red: 'from-red-600 to-red-800'
+ }
+
+ const accentSolids = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
+ }
+
+ return (
+
+
+interface StatisticsSlideLayoutProps {
+ data?: Partial
+ accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
+}
+
+const StatisticsSlideLayout: React.FC = ({ data, accentColor = 'blue' }) => {
+ const slideData = statisticsSlideSchema.parse(data || {})
+ const statsCount = slideData.statistics.length
+
+ const accentColors = {
+ blue: 'from-blue-600 to-blue-800',
+ green: 'from-emerald-600 to-emerald-800',
+ purple: 'from-violet-600 to-violet-800',
+ orange: 'from-orange-600 to-orange-800',
+ red: 'from-red-600 to-red-800'
+ }
+
+ const accentSolids = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
+ }
+
+ const trendColors = {
+ up: {
+ blue: 'text-emerald-600 bg-emerald-50 border-emerald-200',
+ green: 'text-emerald-600 bg-emerald-50 border-emerald-200',
+ purple: 'text-emerald-600 bg-emerald-50 border-emerald-200',
+ orange: 'text-emerald-600 bg-emerald-50 border-emerald-200',
+ red: 'text-emerald-600 bg-emerald-50 border-emerald-200'
+ },
+ down: 'text-red-600 bg-red-50 border-red-200',
+ neutral: 'text-slate-600 bg-slate-50 border-slate-200'
+ }
+
+ const getTrendIcon = (trend?: string) => {
+ switch (trend) {
+ case 'up':
+ return '↗'
+ case 'down':
+ return '↘'
+ case 'neutral':
+ return '→'
+ default:
+ return ''
+ }
+ }
+
+ const getGridCols = () => {
+ if (statsCount <= 2) return 'grid-cols-2'
+ if (statsCount <= 3) return 'grid-cols-3'
+ if (statsCount <= 4) return 'grid-cols-2 lg:grid-cols-4'
+ return 'grid-cols-2 lg:grid-cols-3'
+ }
+
+ return (
+
+
+interface TeamSlideLayoutProps {
+ data?: Partial
+ accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
+}
+
+const TeamSlideLayout: React.FC = ({ data, accentColor = 'blue' }) => {
+ const slideData = teamSlideSchema.parse(data || {})
+
+ const accentColors = {
+ blue: 'from-blue-600 to-blue-800',
+ green: 'from-emerald-600 to-emerald-800',
+ purple: 'from-violet-600 to-violet-800',
+ orange: 'from-orange-600 to-orange-800',
+ red: 'from-red-600 to-red-800'
+ }
+
+ const accentSolids = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
+ }
+
+ const iconColors = {
+ blue: 'text-blue-600 hover:text-blue-700',
+ green: 'text-emerald-600 hover:text-emerald-700',
+ purple: 'text-violet-600 hover:text-violet-700',
+ orange: 'text-orange-600 hover:text-orange-700',
+ red: 'text-red-600 hover:text-red-700'
+ }
+
+ return (
+
+
+interface TimelineSlideLayoutProps {
+ data?: Partial
+ accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
+}
+
+const TimelineSlideLayout: React.FC = ({ data, accentColor = 'blue' }) => {
+ const slideData = timelineSlideSchema.parse(data || {})
+
+ const accentColors = {
+ blue: 'from-blue-600 to-blue-800',
+ green: 'from-emerald-600 to-emerald-800',
+ purple: 'from-violet-600 to-violet-800',
+ orange: 'from-orange-600 to-orange-800',
+ red: 'from-red-600 to-red-800'
+ }
+
+ const accentSolids = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
+ }
+
+ const statusColors = {
+ completed: {
+ blue: 'bg-emerald-600 border-emerald-600 shadow-emerald-200',
+ green: 'bg-emerald-600 border-emerald-600 shadow-emerald-200',
+ purple: 'bg-emerald-600 border-emerald-600 shadow-emerald-200',
+ orange: 'bg-emerald-600 border-emerald-600 shadow-emerald-200',
+ red: 'bg-emerald-600 border-emerald-600 shadow-emerald-200'
+ },
+ current: {
+ blue: 'bg-blue-600 border-blue-600 ring-4 ring-blue-200 shadow-blue-300',
+ green: 'bg-emerald-600 border-emerald-600 ring-4 ring-emerald-200 shadow-emerald-300',
+ purple: 'bg-violet-600 border-violet-600 ring-4 ring-violet-200 shadow-violet-300',
+ orange: 'bg-orange-600 border-orange-600 ring-4 ring-orange-200 shadow-orange-300',
+ red: 'bg-red-600 border-red-600 ring-4 ring-red-200 shadow-red-300'
+ },
+ upcoming: {
+ blue: 'bg-slate-300 border-slate-400 shadow-slate-200',
+ green: 'bg-slate-300 border-slate-400 shadow-slate-200',
+ purple: 'bg-slate-300 border-slate-400 shadow-slate-200',
+ orange: 'bg-slate-300 border-slate-400 shadow-slate-200',
+ red: 'bg-slate-300 border-slate-400 shadow-slate-200'
+ }
+ }
+
+ const lineColors = {
+ blue: 'bg-blue-200',
+ green: 'bg-emerald-200',
+ purple: 'bg-violet-200',
+ orange: 'bg-orange-200',
+ red: 'bg-red-200'
+ }
+
+ return (
+
interface TwoColumnSlideLayoutProps {
data?: Partial
+ accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
}
-const TwoColumnSlideLayout: React.FC = ({ data }) => {
+const TwoColumnSlideLayout: React.FC = ({ data, accentColor = 'blue' }) => {
+
const slideData = twoColumnSlideSchema.parse(data || {})
+ const accentColors = {
+ blue: 'from-blue-600 to-blue-800',
+ green: 'from-emerald-600 to-emerald-800',
+ purple: 'from-violet-600 to-violet-800',
+ orange: 'from-orange-600 to-orange-800',
+ red: 'from-red-600 to-red-800'
+ }
+
+ const accentSolids = {
+ blue: 'bg-blue-600',
+ green: 'bg-emerald-600',
+ purple: 'bg-violet-600',
+ orange: 'bg-orange-600',
+ red: 'bg-red-600'
+ }
+
return (
- {/* Header - only show if not full layout */}
- {slideData.layout !== 'full' && (
-
)
}
diff --git a/servers/nextjs/components/layouts/ProcessSlideLayout.tsx b/servers/nextjs/components/layouts/ProcessSlideLayout.tsx
new file mode 100644
index 00000000..0844af55
--- /dev/null
+++ b/servers/nextjs/components/layouts/ProcessSlideLayout.tsx
@@ -0,0 +1,181 @@
+import React from 'react'
+import * as z from "zod";
+
+const processSlideSchema = z.object({
+ title: z.string().min(3).max(100).default('Our Process').describe('Title of the slide'),
+ subtitle: z.string().min(3).max(150).optional().describe('Optional subtitle or description'),
+ processSteps: z.array(z.object({
+ step: z.number().min(1).max(10).describe('Step number'),
+ title: z.string().min(3).max(100).describe('Step title'),
+ description: z.string().min(10).max(200).describe('Step description')
+ })).min(2).max(6).default([
+ {
+ step: 1,
+ title: 'Discovery',
+ description: 'Understanding requirements and gathering initial insights'
+ },
+ {
+ step: 2,
+ title: 'Planning',
+ description: 'Strategic planning and roadmap development'
+ },
+ {
+ step: 3,
+ title: 'Implementation',
+ description: 'Executing the plan with precision and quality'
+ },
+ {
+ step: 4,
+ title: 'Delivery',
+ description: 'Final delivery and ongoing support'
+ }
+ ]).describe('Process steps (2-6 items)'),
+ backgroundImage: z.string().optional().describe('URL to background image for the slide')
+})
+
+export const Schema = processSlideSchema
+
+export type ProcessSlideData = z.infer
-
- )}
-
- {/* Content Area */}
- - {slideData.title} -
- {slideData.subtitle && ( -- {slideData.subtitle} -
- )} - -
- {slideData.layout === 'full' && (
-
-
- {(slideData.layout === 'left' || slideData.layout === 'right') && (
-
-
- {/* Caption for centered and full layouts */}
- {slideData.caption && (slideData.layout === 'centered' || slideData.layout === 'full') && (
-
-
- )}
-
- - {slideData.title} -
- {slideData.subtitle && ( -- {slideData.subtitle} -
- )} -
- {slideData.caption && (
-
- )}
- - {slideData.caption} -
- )} -
-
- )}
+ {/* Enhanced geometric background decoration */}
+ - {slideData.caption} -
-
+
+
- {/* Decorative accent */}
-
+
+ {/* Professional Header */}
+
+
+
+ {/* Enhanced Content Layout */}
+
+
+
+
+ {/* Enhanced decorative accent */}
+ + + {slideData.title} + +
+ + {slideData.subtitle && ( ++ {slideData.subtitle} +
+ )} + +
+
+
+
+
+
+
+
+
+ {slideData.content?.split('\n').map((paragraph, index) => (
+ paragraph.trim() && (
+
+
+ {/* Background decoration */}
+
+ + {paragraph} +
+ ) + ))} +
+
+
+
+
+
+ {slideData.imageCaption && (
+ + {slideData.imageCaption} +
+ )} +
+
+
+
+
+ {/* Professional corner accents */}
+
+ {/* Enhanced geometric background decoration */}
+
+ )
+}
+
+export default ProcessSlideLayout
\ No newline at end of file
diff --git a/servers/nextjs/components/layouts/QuoteSlideLayout.tsx b/servers/nextjs/components/layouts/QuoteSlideLayout.tsx
new file mode 100644
index 00000000..fe73cd84
--- /dev/null
+++ b/servers/nextjs/components/layouts/QuoteSlideLayout.tsx
@@ -0,0 +1,167 @@
+import React from 'react'
+import * as z from "zod";
+
+const quoteSlideSchema = z.object({
+ title: z.string().min(3).max(100).default('Testimonials').describe('Title of the slide'),
+ subtitle: z.string().min(3).max(150).optional().describe('Optional subtitle or description'),
+ quote: z.string().min(10).max(500).default('This solution has transformed our business operations and exceeded all expectations.').describe('The main quote or testimonial'),
+ author: z.string().min(2).max(100).default('John Smith').describe('Quote author name'),
+ authorTitle: z.string().min(2).max(100).optional().describe('Author job title or position'),
+ company: z.string().min(2).max(100).optional().describe('Author company or organization'),
+ authorImage: z.string().optional().describe('URL to author photo'),
+ backgroundImage: z.string().optional().describe('URL to background image for the slide')
+})
+
+export const Schema = quoteSlideSchema
+
+export type QuoteSlideData = z.infer
+
+
+
+
+
+ {/* Professional Header */}
+
+
+
+ {/* Enhanced Process Steps */}
+
+
+
+
+ {/* Enhanced decorative accent */}
+ + + {slideData.title} + +
+ + {slideData.subtitle && ( ++ {slideData.subtitle} +
+ )} + +
+
+
+
+
+
+
+ {slideData.processSteps.map((step, index) => (
+
+ {/* Process Step */}
+
+ ))}
+
+
+ {/* Step Number Circle */}
+
+
+ {/* Arrow Between Steps */}
+ {index < slideData.processSteps.length - 1 && (
+
+ {step.step}
+
+
+
+ {/* Step Content Card */}
+
+ {/* Card accent */}
+
+
+ {/* Step Title */}
+
+ + {step.title} +
+ + {/* Step Description */} ++ {step.description} +
+ + {/* Background decoration */} + +
+
+ )}
+
+
+
+
+
+
+
+
+ {/* Professional corner accents */}
+
+
+ {/* Enhanced geometric background decoration */}
+
+ )
+}
+
+export default QuoteSlideLayout
\ No newline at end of file
diff --git a/servers/nextjs/components/layouts/StatisticsSlideLayout.tsx b/servers/nextjs/components/layouts/StatisticsSlideLayout.tsx
new file mode 100644
index 00000000..362b0bf0
--- /dev/null
+++ b/servers/nextjs/components/layouts/StatisticsSlideLayout.tsx
@@ -0,0 +1,200 @@
+import React from 'react'
+import * as z from "zod";
+
+const statisticsSlideSchema = z.object({
+ title: z.string().min(3).max(100).default('Key Statistics').describe('Title of the slide'),
+ subtitle: z.string().min(3).max(150).optional().describe('Optional subtitle or description'),
+ statistics: z.array(z.object({
+ value: z.string().min(1).max(20).describe('Statistical value (e.g., "250%", "$1.2M", "99.9%")'),
+ label: z.string().min(3).max(100).describe('Description of the statistic'),
+ trend: z.enum(['up', 'down', 'neutral']).optional().describe('Trend direction indicator'),
+ context: z.string().min(5).max(200).optional().describe('Additional context or time period')
+ })).min(2).max(6).default([
+ {
+ value: '250%',
+ label: 'Revenue Growth',
+ trend: 'up',
+ context: 'Year over year increase'
+ },
+ {
+ value: '50M+',
+ label: 'Active Users',
+ trend: 'up',
+ context: 'Global user base'
+ },
+ {
+ value: '99.9%',
+ label: 'Uptime',
+ trend: 'neutral',
+ context: 'Service reliability'
+ },
+ {
+ value: '24/7',
+ label: 'Support',
+ trend: 'neutral',
+ context: 'Customer service'
+ }
+ ]).describe('List of statistics (2-6 items)'),
+ backgroundImage: z.string().optional().describe('URL to background image for the slide')
+})
+
+export const Schema = statisticsSlideSchema
+
+export type StatisticsSlideData = z.infer
+
+
+
+
+
+ {/* Professional Header */}
+
+
+
+ {/* Enhanced Quote Content */}
+
+
+
+
+ {/* Enhanced decorative accent */}
+ + + {slideData.title} + +
+ + {slideData.subtitle && ( ++ {slideData.subtitle} +
+ )} + +
+
+
+
+
+ {/* Enhanced Background Quote Decoration */}
+
+
+ "
+
+
+ "
+
+
+ {/* Quote Text */}
+ + "{slideData.quote}" ++ + {/* Professional Author Attribution */} +
+ {/* Author Avatar */}
+
+
+ {/* Enhanced Quote Accent Line */}
+
+ {slideData.authorImage ? (
+
+ ) : (
+
+
+ {/* Author Details */}
+
+ {slideData.author.split(' ').map(n => n[0]).join('')}
+
+ )}
+
+
+ + {slideData.author} +
+ + {slideData.authorTitle && ( ++ {slideData.authorTitle} +
+ )} + + {slideData.company && ( ++ {slideData.company} +
+ )} +
+
+
+ {/* Background decoration */}
+
+
+
+
+
+
+
+
+
+
+ {/* Professional corner accents */}
+
+
+ {/* Enhanced geometric background decoration */}
+
+ )
+}
+
+export default StatisticsSlideLayout
\ No newline at end of file
diff --git a/servers/nextjs/components/layouts/TeamSlideLayout.tsx b/servers/nextjs/components/layouts/TeamSlideLayout.tsx
new file mode 100644
index 00000000..e3b1518b
--- /dev/null
+++ b/servers/nextjs/components/layouts/TeamSlideLayout.tsx
@@ -0,0 +1,217 @@
+import React from 'react'
+import * as z from "zod";
+
+const teamSlideSchema = z.object({
+ title: z.string().min(3).max(100).default('Meet Our Team').describe('Title of the slide'),
+ subtitle: z.string().min(3).max(150).optional().describe('Optional subtitle or team description'),
+ teamMembers: z.array(z.object({
+ name: z.string().min(2).max(100).describe('Team member name'),
+ title: z.string().min(2).max(100).describe('Job title or role'),
+ image: z.string().optional().describe('URL to team member photo'),
+ bio: z.string().min(10).max(300).optional().describe('Brief biography or description'),
+ email: z.string().email().optional().describe('Contact email'),
+ linkedin: z.string().url().optional().describe('LinkedIn profile URL')
+ })).min(1).max(6).default([
+ {
+ name: 'Sarah Johnson',
+ title: 'Chief Executive Officer',
+ image: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=300&h=300&fit=crop&crop=face',
+ bio: 'Strategic leader with 15+ years experience driving innovation and growth in technology companies.',
+ email: 'sarah@company.com',
+ linkedin: 'https://linkedin.com/in/sarahjohnson'
+ },
+ {
+ name: 'Michael Chen',
+ title: 'Chief Technology Officer',
+ image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=300&h=300&fit=crop&crop=face',
+ bio: 'Technology visionary specializing in scalable architecture and emerging technologies.',
+ email: 'michael@company.com',
+ linkedin: 'https://linkedin.com/in/michaelchen'
+ },
+ {
+ name: 'Emma Rodriguez',
+ title: 'Head of Design',
+ image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&h=300&fit=crop&crop=face',
+ bio: 'Creative director passionate about user-centered design and innovative digital experiences.',
+ email: 'emma@company.com',
+ linkedin: 'https://linkedin.com/in/emmarodriguez'
+ }
+ ]).describe('Team members (1-6 people)'),
+ backgroundImage: z.string().optional().describe('URL to background image for the slide')
+})
+
+export const Schema = teamSlideSchema
+
+export type TeamSlideData = z.infer
+
+
+
+
+
+ {/* Professional Header */}
+
+
+
+ {/* Enhanced Statistics Grid */}
+
+
+
+
+ {/* Enhanced decorative accent */}
+ + + {slideData.title} + +
+ + {slideData.subtitle && ( ++ {slideData.subtitle} +
+ )} + +
+
+
+
+
+ {slideData.statistics.map((stat, index) => (
+
+
+ {/* Card accent */}
+
+
+ {/* Statistic Value */}
+
+ ))}
+
+ {stat.value}
+
+
+ {/* Statistic Label */}
+ + {stat.label} +
+ + {/* Trend Indicator */} + {stat.trend && ( +
+ {getTrendIcon(stat.trend)}
+ {stat.trend.toUpperCase()}
+
+ )}
+
+ {/* Context */}
+ {stat.context && (
+ + {stat.context} +
+ )} + + {/* Background decoration */} + +
+
+
+
+
+ {/* Professional corner accents */}
+
+
+ {/* Enhanced geometric background decoration */}
+
+ )
+}
+
+export default TeamSlideLayout
\ No newline at end of file
diff --git a/servers/nextjs/components/layouts/TimelineSlideLayout.tsx b/servers/nextjs/components/layouts/TimelineSlideLayout.tsx
new file mode 100644
index 00000000..e76ab41c
--- /dev/null
+++ b/servers/nextjs/components/layouts/TimelineSlideLayout.tsx
@@ -0,0 +1,225 @@
+import React from 'react'
+import * as z from "zod";
+
+const timelineSlideSchema = z.object({
+ title: z.string().min(3).max(100).default('Project Timeline').describe('Title of the slide'),
+ subtitle: z.string().min(3).max(150).optional().describe('Optional subtitle or description'),
+ timelineItems: z.array(z.object({
+ date: z.string().min(2).max(50).describe('Date or time period'),
+ title: z.string().min(3).max(100).describe('Event or milestone title'),
+ description: z.string().min(10).max(300).describe('Event description'),
+ status: z.enum(['completed', 'current', 'upcoming']).default('upcoming').describe('Timeline item status')
+ })).min(2).max(6).default([
+ {
+ date: 'Q1 2024',
+ title: 'Project Initiation',
+ description: 'Project planning, team assembly, and initial requirements gathering',
+ status: 'completed'
+ },
+ {
+ date: 'Q2 2024',
+ title: 'Development Phase',
+ description: 'Core development work, prototype creation, and testing implementation',
+ status: 'current'
+ },
+ {
+ date: 'Q3 2024',
+ title: 'Testing & QA',
+ description: 'Comprehensive testing, quality assurance, and user acceptance testing',
+ status: 'upcoming'
+ },
+ {
+ date: 'Q4 2024',
+ title: 'Launch & Deployment',
+ description: 'Final deployment, go-live activities, and post-launch monitoring',
+ status: 'upcoming'
+ }
+ ]).describe('Timeline events (2-6 items)'),
+ backgroundImage: z.string().optional().describe('URL to background image for the slide')
+})
+
+export const Schema = timelineSlideSchema
+
+export type TimelineSlideData = z.infer
+
+
+
+
+
+ {/* Professional Header */}
+
+
+
+ {/* Enhanced Team Grid */}
+
+
+
+
+ {/* Enhanced decorative accent */}
+ + + {slideData.title} + +
+ + {slideData.subtitle && ( ++ {slideData.subtitle} +
+ )} + +
+
+
+
+
+ {slideData.teamMembers.map((member, index) => (
+
+
+ {/* Card accent */}
+
+
+ {/* Professional Avatar */}
+
+ ))}
+
+
+
+ {/* Member Info */}
+
+ {member.image ? (
+
+ ) : (
+
+
+ {member.name.split(' ').map(n => n[0]).join('')}
+
+ )}
+
+
+
+
+ {/* Professional Contact Links */}
+
+
+ {/* Background decoration */}
+
+ + {member.name} +
++ {member.title} +
+ + {member.bio && ( ++ {member.bio} +
+ )} +
+
+
+
+
+ {/* Professional corner accents */}
+
+
+ {/* Enhanced geometric background decoration */}
+
+ )
+}
+
+export default TimelineSlideLayout
\ No newline at end of file
diff --git a/servers/nextjs/components/layouts/TwoColumnSlideLayout.tsx b/servers/nextjs/components/layouts/TwoColumnSlideLayout.tsx
index ab8b0ae4..96068947 100644
--- a/servers/nextjs/components/layouts/TwoColumnSlideLayout.tsx
+++ b/servers/nextjs/components/layouts/TwoColumnSlideLayout.tsx
@@ -1,94 +1,160 @@
import React from 'react'
-import { z } from "zod";
+import * as z from "zod";
const twoColumnSlideSchema = z.object({
- title: z.string().min(3).max(100).default('Two Column Layout'),
- subtitle: z.string().min(3).max(150).optional().describe("Optional subtitle or section header"),
+ title: z.string().min(3).max(100).default('Two Column Layout').describe('Title of the slide'),
+ subtitle: z.string().min(3).max(150).optional().describe('Optional subtitle or description'),
leftColumn: z.object({
- title: z.string().min(2).max(50).default('Left Column'),
- content: z.string().min(10).max(1000).default('Content for the left column...').describe("Content for the left column")
+ title: z.string().min(3).max(100).default('Left Column').describe('Left column title'),
+ content: z.string().min(10).max(800).default('Content for the left column goes here. This can include detailed information, explanations, or supporting details.').describe('Left column content')
}).default({
title: 'Left Column',
- content: 'Content for the left column...'
+ content: 'Content for the left column goes here. This can include detailed information, explanations, or supporting details.'
}),
rightColumn: z.object({
- title: z.string().min(2).max(50).default('Right Column'),
- content: z.string().min(10).max(1000).default('Content for the right column...').describe("Content for the right column")
+ title: z.string().min(3).max(100).default('Right Column').describe('Right column title'),
+ content: z.string().min(10).max(800).default('Content for the right column goes here. This can include additional information, comparisons, or contrasting details.').describe('Right column content')
}).default({
title: 'Right Column',
- content: 'Content for the right column...'
+ content: 'Content for the right column goes here. This can include additional information, comparisons, or contrasting details.'
}),
- backgroundImage: z.string().url().default("https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4").optional().describe("URL to background image for the slide")
+ backgroundImage: z.string().optional().describe('URL to background image for the slide')
})
-// Standardized schema export
export const Schema = twoColumnSlideSchema
+
export type TwoColumnSlideData = z.infer
+
+
+
+
+
+ {/* Professional Header */}
+
+
+
+ {/* Enhanced Timeline */}
+
+
+
+
+ {/* Enhanced decorative accent */}
+ + + {slideData.title} + +
+ + {slideData.subtitle && ( ++ {slideData.subtitle} +
+ )} + +
+
+
+
+
+
+
+ {/* Timeline line */}
+
+
+
+ {slideData.timelineItems.map((item, index) => (
+
+
+ {/* Timeline node */}
+
+ ))}
+
+ {item.status === 'completed' && (
+
+
+ {/* Timeline content card */}
+
+
+
+ )}
+ {item.status === 'current' && (
+
+
+
+ )}
+
+ {/* Card accent */}
+
+
+
+
+ {/* Date */}
+
+
+ {/* Status indicator */}
+
+ {item.date}
+
+
+ {/* Title */}
+ + {item.title} +
+ + {/* Description */} ++ {item.description} +
+
+
+ {item.status === 'completed' && '✓ Completed'}
+ {item.status === 'current' && '● In Progress'}
+ {item.status === 'upcoming' && '○ Upcoming'}
+
+
+
+ {/* Background decoration */}
+
+
+
+
+
+
+ {/* Professional corner accents */}
+
+
- {slideData.backgroundImage && (
-
- )}
+ {/* Enhanced geometric background decoration */}
+
+
+
+
-
- {/* Header */}
-
-
- {slideData.title}
+
- {slideData.title}
+
+ {/* Professional Header */}
+
+
+
+ {slideData.title}
+
+
{slideData.subtitle && (
-
+
{slideData.subtitle}
)}
-
-
- {/* Two Columns */}
-
+
+
+
+
+
+
+ {/* Two Column Content with Enhanced Styling */}
+
{/* Left Column */}
-
-
+
+ {/* Column accent */}
+
+
+
{slideData.leftColumn.title}
-
- {slideData.leftColumn.content}
+
+ {slideData.leftColumn.content.split('\n').map((paragraph, index) => (
+ paragraph.trim() && (
+
+ {paragraph}
+
+ )
+ ))}
- {/* Divider */}
-
-
{/* Right Column */}
-
-
+
+ {/* Column accent */}
+
+
+
{slideData.rightColumn.title}
-
- {slideData.rightColumn.content}
+
+ {slideData.rightColumn.content.split('\n').map((paragraph, index) => (
+ paragraph.trim() && (
+
+ {paragraph}
+
+ )
+ ))}
-
+
- {/* Decorative accent */}
-
+ {/* Enhanced decorative accent */}
+
+
+
+
+
+ {/* Professional corner accents */}
+
)
}
diff --git a/servers/nextjs/components/ui/sonner.tsx b/servers/nextjs/components/ui/sonner.tsx
new file mode 100644
index 00000000..452f4d9f
--- /dev/null
+++ b/servers/nextjs/components/ui/sonner.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = "system" } = useTheme()
+
+ return (
+
+ + {slideData.title} +
+ {slideData.subtitle && ( -+
{slideData.subtitle}
)} - -
+
+
+
+
+
+ {/* Two Column Content with Enhanced Styling */}
+
-
+
+
+ {/* Column accent */}
+
+
+
{slideData.leftColumn.title}
-
- {slideData.leftColumn.content}
+
+ {slideData.leftColumn.content.split('\n').map((paragraph, index) => (
+ paragraph.trim() && (
+
+ {paragraph}
+
+ )
+ ))}
- {/* Divider */}
-
-
{/* Right Column */}
-
-
+
+ {/* Column accent */}
+
+
+
{slideData.rightColumn.title}
-
- {slideData.rightColumn.content}
+
+ {slideData.rightColumn.content.split('\n').map((paragraph, index) => (
+ paragraph.trim() && (
+
+ {paragraph}
+
+ )
+ ))}
-
+
- {/* Decorative accent */}
-
+ {/* Enhanced decorative accent */}
+
+
+
+
+
+ {/* Professional corner accents */}
+
)
}
diff --git a/servers/nextjs/components/ui/sonner.tsx b/servers/nextjs/components/ui/sonner.tsx
new file mode 100644
index 00000000..452f4d9f
--- /dev/null
+++ b/servers/nextjs/components/ui/sonner.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = "system" } = useTheme()
+
+ return (
+
{slideData.leftColumn.title}
-
- {slideData.leftColumn.content}
+
- {/* Divider */}
-
-
{/* Right Column */}
-
+ {slideData.leftColumn.content.split('\n').map((paragraph, index) => (
+ paragraph.trim() && (
+
+ {paragraph} +
+ ) + ))}
-
+
- {/* Decorative accent */}
-
+ {/* Enhanced decorative accent */}
+
+
+ {/* Column accent */}
+
+
+
{slideData.rightColumn.title}
-
- {slideData.rightColumn.content}
+
+ {slideData.rightColumn.content.split('\n').map((paragraph, index) => (
+ paragraph.trim() && (
+
+ {paragraph}
+
+ )
+ ))}
-
+
{slideData.rightColumn.title}
-
- {slideData.rightColumn.content}
+
-
+ {slideData.rightColumn.content.split('\n').map((paragraph, index) => (
+ paragraph.trim() && (
+
+ {paragraph} +
+ ) + ))}
+
+
+
+
+ {/* Professional corner accents */}
+