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

update: general template

Browse source
This commit is contained in:
Suraj Jha 2025-09-09 03:55:55 +05:45
parent 2e015451e1
commit 5eec194152
No known key found for this signature in database
GPG key ID: 5AC6C16355CE2C14
12 changed files with 333 additions and 210 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
servers/nextjs/presentation-templates/general/BasicInfoSlideLayout.tsx
View file

@ -35,17 +35,25 @@ const BasicInfoSlideLayout: React.FC<BasicInfoSlideLayoutProps> = ({ data: slide
return (
<>
{/* Import Google Fonts */}
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<div
className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden"
style={{
fontFamily: 'Poppins, sans-serif'
fontFamily: 'var(--heading-font-family,Inter)',
background:"var(--card-background-color,#ffffff)"
}}
>
{(slideData as any)?.__companyName__ && (
<div className="absolute top-0 left-0 right-0 px-8 sm:px-12 lg:px-20 pt-4">
<div className="flex items-center gap-4">
<span className="text-sm sm:text-base font-semibold" style={{ color: 'var(--text-heading-color, #111827)' }}>
{(slideData as any)?.__companyName__ || 'Company Name'}
</span>
<div className="h-[2px] flex-1 opacity-70" style={{ backgroundColor: 'var(--text-heading-color, #111827)' }}></div>
</div>
</div>
)}
{/* Main Content */}
@ -64,21 +72,25 @@ const BasicInfoSlideLayout: React.FC<BasicInfoSlideLayoutProps> = ({ data: slide
{/* Right Section - Content */}
<div className="flex-1 flex flex-col justify-center pl-8 space-y-6">
{/* Title */}
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
<h1 style={{ color: "var(--text-heading-color,#111827)" }} className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
{slideData?.title || 'Product Overview'}
</h1>
{/* Purple accent line */}
<div className="w-20 h-1 bg-purple-600"></div>
<div style={{background:"var(--text-heading-color,#9333ea)"}} className="w-20 h-1 bg-purple-600"></div>
{/* Description */}
<p className="text-base sm:text-lg text-gray-700 leading-relaxed">
<p style={{color:"var(--text-body-color,#4b5563)"}} className="text-base sm:text-lg text-gray-700 leading-relaxed">
{slideData?.description || 'Our product offers customizable dashboards for real-time reporting and data-driven decisions. It integrates with third-party tools to enhance operations and scales with business growth for improved efficiency.'}
</p>
</div>
</div>
</div>
</>
)

56
servers/nextjs/presentation-templates/general/BulletIconsOnlySlideLayout.tsx
View file

@ -1,10 +1,11 @@
import React from 'react'
import * as z from "zod";
import { ImageSchema, IconSchema } from '@/presentation-templates/defaultSchemes';
import { RemoteSvgIcon } from '@/app/hooks/useRemoteSvgIcon';
export const layoutId = 'bullet-icons-only-slide'
export const layoutName = 'Bullet Icons Only'
export const layoutDescription = 'A slide layout with title, grid of bullet points with icons (no descriptions), and a supporting image.'
export const layoutDescription = 'A slide layout with title, grid of bullet points (title and description) with icons, and a supporting image.'
const bulletIconsOnlySlideSchema = z.object({
title: z.string().min(3).max(40).default('Solutions').meta({
@ -29,7 +30,7 @@ const bulletIconsOnlySlideSchema = z.object({
title: 'Custom Software',
subtitle: 'We create tailored software to optimize processes and boost efficiency.',
icon: {
__icon_url__: '/static/icons/placeholder.png',
__icon_url__: 'https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/bold/code-bold.svg',
__icon_query__: 'code software development'
}
},
@ -37,7 +38,7 @@ const bulletIconsOnlySlideSchema = z.object({
title: 'Digital Consulting',
subtitle: 'Our consultants guide organizations in leveraging the latest technologies.',
icon: {
__icon_url__: '/static/icons/placeholder.png',
__icon_url__: 'https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/bold/users-four-bold.svg',
__icon_query__: 'users consulting team'
}
},
@ -45,7 +46,7 @@ const bulletIconsOnlySlideSchema = z.object({
title: 'Support Services',
subtitle: 'We provide ongoing support to help businesses adapt and maintain performance.',
icon: {
__icon_url__: '/static/icons/placeholder.png',
__icon_url__: 'https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/bold/headphones-bold.svg',
__icon_query__: 'headphones support service'
}
},
@ -53,7 +54,7 @@ const bulletIconsOnlySlideSchema = z.object({
title: 'Scalable Marketing',
subtitle: 'Our data-driven strategies help businesses expand their reach and engagement.',
icon: {
__icon_url__: '/static/icons/placeholder.png',
__icon_url__: 'https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/bold/code-bold.svg',
__icon_query__: 'trending up marketing growth'
}
}
@ -87,17 +88,26 @@ const BulletIconsOnlySlideLayout: React.FC<BulletIconsOnlySlideLayoutProps> = ({
return (
<>
{/* Import Google Fonts */}
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<div
className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden"
style={{
fontFamily: 'Poppins, sans-serif'
fontFamily: 'var(--heading-font-family,Inter)',
background:"var(--card-background-color,#ffffff)"
}}
>
{/* {(slideData as any)?.__companyName__ && ( */}
<div className="absolute top-0 left-0 right-0 px-8 sm:px-12 lg:px-20 pt-4">
<div className="flex items-center gap-4">
<span className="text-sm sm:text-base font-semibold" style={{ color: 'var(--text-heading-color, #111827)' }}>
{(slideData as any)?.__companyName__ || 'Company Name'}
</span>
<div className="h-[2px] flex-1 opacity-70" style={{ backgroundColor: 'var(--text-heading-color, #111827)' }}></div>
</div>
</div>
{/* )} */}
{/* Decorative Wave Patterns */}
<div className="absolute top-0 left-0 w-32 h-full opacity-10 overflow-hidden">
<svg className="w-full h-full" viewBox="0 0 100 400" fill="none">
@ -113,11 +123,11 @@ const BulletIconsOnlySlideLayout: React.FC<BulletIconsOnlySlideLayoutProps> = ({
</div>
{/* Main Content */}
<div className="relative z-10 flex h-full px-8 sm:px-12 lg:px-20 pt-8 pb-8">
<div className="relative z-10 flex h-full px-8 sm:px-12 lg:px-20 pt-12 pb-8">
{/* Left Section - Title and Bullet Points */}
<div className="flex-1 flex flex-col pr-8">
{/* Title */}
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-gray-900 mb-8">
<h1 style={{ color: "var(--text-heading-color,#111827)" }} className="text-5xl sm:text-6xl lg:text-7xl font-bold text-gray-900 mb-8">
{slideData?.title || 'Solutions'}
</h1>
@ -126,24 +136,26 @@ const BulletIconsOnlySlideLayout: React.FC<BulletIconsOnlySlideLayoutProps> = ({
{bulletPoints.map((bullet, index) => (
<div
key={index}
className={`flex items-start space-x-4 p-4 rounded-lg transition-all duration-200 hover:bg-gray-50`}
className={`flex items-start space-x-4 p-4 rounded-lg`}
>
{/* Icon */}
<div className="flex-shrink-0 w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center">
<img
src={bullet.icon.__icon_url__}
alt={bullet.icon.__icon_query__}
className="w-6 h-6 object-contain brightness-0 invert"
<div style={{background:"var(--primary-accent-color,#9333ea)"}} className="flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center">
<RemoteSvgIcon
url={bullet.icon.__icon_url__}
strokeColor={"currentColor"}
className="w-6 h-6"
color="var(--text-heading-color,#ffffff)"
title={bullet.icon.__icon_query__}
/>
</div>
{/* Content */}
<div className="flex-1">
<h3 className="text-lg sm:text-xl font-semibold text-gray-900 mb-1">
<h3 style={{color:"var(--text-heading-color,#111827)"}} className="text-lg sm:text-xl font-semibold text-gray-900 mb-1">
{bullet.title}
</h3>
{bullet.subtitle && (
<p className="text-sm text-gray-700 leading-relaxed">
<p style={{color:"var(--text-body-color,#4b5563)"}} className="text-sm text-gray-700 leading-relaxed">
{bullet.subtitle}
</p>
)}
@ -156,14 +168,14 @@ const BulletIconsOnlySlideLayout: React.FC<BulletIconsOnlySlideLayoutProps> = ({
{/* Right Section - Image */}
<div className="flex-shrink-0 w-96 flex items-center justify-center relative">
{/* Decorative Elements */}
<div className="absolute top-8 right-8 text-purple-600 opacity-60">
<div style={{color:"var(--primary-accent-color,#9333ea)"}} className="absolute top-8 right-8 text-purple-600 opacity-60">
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor">
<path d="M16 0l4.12 8.38L28 12l-7.88 3.62L16 24l-4.12-8.38L4 12l7.88-3.62L16 0z" />
</svg>
</div>
<div className="absolute top-16 left-8 opacity-20">
<svg width="80" height="20" viewBox="0 0 80 20" className="text-purple-600">
<svg width="80" height="20" viewBox="0 0 80 20" className="text-purple-600" style={{color:"var(--primary-accent-color,#9333ea)"}}>
<path
d="M0 10 Q20 0 40 10 T80 10"
stroke="currentColor"

56
servers/nextjs/presentation-templates/general/BulletWithIconsSlideLayout.tsx
View file

@ -1,6 +1,7 @@
import React from 'react'
import * as z from "zod";
import { ImageSchema, IconSchema } from '@/presentation-templates/defaultSchemes';
import { RemoteSvgIcon } from '@/app/hooks/useRemoteSvgIcon';
export const layoutId = 'bullet-with-icons-slide'
export const layoutName = 'Bullet with Icons'
@ -20,10 +21,10 @@ const bulletWithIconsSlideSchema = z.object({
description: "Supporting image for the slide",
}),
bulletPoints: z.array(z.object({
title: z.string().min(2).max(80).meta({
title: z.string().min(2).max(60).meta({
description: "Bullet point title",
}),
description: z.string().min(10).max(150).meta({
description: z.string().min(10).max(100).meta({
description: "Bullet point description",
}),
icon: IconSchema,
@ -32,7 +33,7 @@ const bulletWithIconsSlideSchema = z.object({
title: 'Inefficiency',
description: 'Businesses struggle to find digital tools that meet their needs, causing operational slowdowns.',
icon: {
__icon_url__: '/static/icons/placeholder.png',
__icon_url__: 'https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/bold/checks-bold.svg',
__icon_query__: 'warning alert inefficiency'
}
},
@ -40,7 +41,7 @@ const bulletWithIconsSlideSchema = z.object({
title: 'High Costs',
description: 'Outdated systems increase expenses, while small businesses struggle to expand their market reach.',
icon: {
__icon_url__: '/static/icons/placeholder.png',
__icon_url__: 'https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/bold/fediverse-logo-bold.svg',
__icon_query__: 'trending up costs chart'
}
}
@ -62,25 +63,32 @@ const BulletWithIconsSlideLayout: React.FC<BulletWithIconsSlideLayoutProps> = ({
return (
<>
{/* Import Google Fonts */}
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<div
className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-gradient-to-br from-gray-50 to-white relative z-20 mx-auto overflow-hidden"
style={{
fontFamily: 'Poppins, sans-serif'
fontFamily: 'var(--heading-font-family,Inter)',
background:"var(--card-background-color,#ffffff)"
}}
>
{(slideData as any)?.__companyName__ && (
<div className="absolute top-0 left-0 right-0 px-8 sm:px-12 lg:px-20 pt-4">
<div className="flex items-center gap-4">
<span className="text-sm sm:text-base font-semibold" style={{ color: 'var(--text-heading-color, #111827)' }}>
{(slideData as any)?.__companyName__ || 'Company Name'}
</span>
<div className="h-[2px] flex-1 opacity-70" style={{ backgroundColor: 'var(--text-heading-color, #111827)' }}></div>
</div>
</div>
)}
{/* Main Content */}
<div className="flex flex-col h-full px-8 sm:px-12 lg:px-20 pt-8 pb-8">
<div className="flex flex-col h-full px-8 sm:px-12 lg:px-20 pt-12 pb-8">
{/* Title Section - Full Width */}
<div className="mb-8">
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900">
<h1 style={{ color: "var(--text-heading-color,#111827)" }} className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900">
{slideData?.title || 'Problem'}
</h1>
</div>
@ -94,7 +102,7 @@ const BulletWithIconsSlideLayout: React.FC<BulletWithIconsSlideLayoutProps> = ({
<svg className="w-full h-full opacity-30" viewBox="0 0 200 200">
<defs>
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="#8b5cf6" strokeWidth="0.5"/>
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="var(--primary-accent-color,#9333ea)" strokeWidth="0.5"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
@ -113,7 +121,7 @@ const BulletWithIconsSlideLayout: React.FC<BulletWithIconsSlideLayoutProps> = ({
</div>
{/* Decorative Sparkle */}
<div className="absolute top-20 right-8 text-purple-600">
<div style={{color:"var(--primary-accent-color,#9333ea)"}} className="absolute top-20 right-8 text-purple-600">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0l3.09 6.26L22 9l-6.91 2.74L12 18l-3.09-6.26L2 9l6.91-2.74L12 0z"/>
</svg>
@ -123,7 +131,7 @@ const BulletWithIconsSlideLayout: React.FC<BulletWithIconsSlideLayoutProps> = ({
{/* Right Section - Content */}
<div className="flex-1 flex flex-col justify-center pl-8 lg:pl-16">
{/* Description */}
<p className="text-lg text-gray-700 leading-relaxed mb-8">
<p style={{color:"var(--text-body-color,#4b5563)"}} className="text-lg text-gray-700 leading-relaxed mb-8">
{slideData?.description || 'Businesses face challenges with outdated technology and rising costs, limiting efficiency and growth in competitive markets.'}
</p>
@ -132,21 +140,23 @@ const BulletWithIconsSlideLayout: React.FC<BulletWithIconsSlideLayoutProps> = ({
{bulletPoints.map((bullet, index) => (
<div key={index} className="flex items-start space-x-4">
{/* Icon */}
<div className="flex-shrink-0 w-12 h-12 bg-white rounded-lg shadow-md flex items-center justify-center">
<img
src={bullet.icon.__icon_url__}
alt={bullet.icon.__icon_query__}
className="w-6 h-6 object-contain text-gray-700"
<div style={{background:"var(--primary-accent-color,#9333ea)"}} className="flex-shrink-0 w-12 h-12 rounded-lg shadow-md flex items-center justify-center">
<RemoteSvgIcon
url={bullet.icon.__icon_url__}
strokeColor={"currentColor"}
className="w-6 h-6"
color="var(--text-heading-color,#ffffff)"
title={bullet.icon.__icon_query__}
/>
</div>
{/* Content */}
<div className="flex-1">
<h3 className="text-xl font-semibold text-gray-900 mb-2">
<h3 style={{color:"var(--text-heading-color,#111827)"}} className="text-xl font-semibold text-gray-900 mb-2">
{bullet.title}
</h3>
<div className="w-12 h-0.5 bg-purple-600 mb-3"></div>
<p className="text-base text-gray-700 leading-relaxed">
<div style={{background:"var(--primary-accent-color,#9333ea)"}} className="w-12 h-0.5 bg-purple-600 mb-3"></div>
<p style={{color:"var(--text-body-color,#4b5563)"}} className="text-base text-gray-700 leading-relaxed">
{bullet.description}
</p>
</div>

91
servers/nextjs/presentation-templates/general/ChartWithBulletsSlideLayout.tsx
View file

@ -1,6 +1,7 @@
import React from 'react'
import * as z from "zod";
import { IconSchema } from '@/presentation-templates/defaultSchemes';
import { RemoteSvgIcon } from '@/app/hooks/useRemoteSvgIcon';
import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from "@/components/ui/chart";
import { BarChart, Bar, LineChart, Line, PieChart, Pie, AreaChart, Area, ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Cell, ResponsiveContainer } from "recharts";
@ -64,7 +65,7 @@ const chartWithBulletsSlideSchema = z.object({
title: 'Total Addressable Market',
description: 'Companies can use TAM to plan future expansion and investment.',
icon: {
__icon_url__: '/static/icons/placeholder.png',
__icon_url__: 'https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/bold/chart-line-up-bold.svg',
__icon_query__: 'target market scope'
}
},
@ -72,7 +73,7 @@ const chartWithBulletsSlideSchema = z.object({
title: 'Serviceable Available Market',
description: 'Indicates more measurable market segments for sales efforts.',
icon: {
__icon_url__: '/static/icons/placeholder.png',
__icon_url__: 'https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/bold/chart-line-up-bold.svg',
__icon_query__: 'pie chart analysis'
}
},
@ -80,7 +81,7 @@ const chartWithBulletsSlideSchema = z.object({
title: 'Serviceable Obtainable Market',
description: 'Help companies plan development strategies according to the market.',
icon: {
__icon_url__: '/static/icons/placeholder.png',
__icon_url__: 'https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/bold/chart-line-up-bold.svg',
__icon_query__: 'trending up growth'
}
}
@ -120,7 +121,7 @@ const BULLET_COLORS = [
const ChartWithBulletsSlideLayout: React.FC<ChartWithBulletsSlideLayoutProps> = ({ data: slideData }) => {
const chartData = slideData?.chartData?.data || [];
const chartType = slideData?.chartData?.type;
const color = slideData?.color || '#3b82f6';
const color = slideData?.color || 'var(--primary-accent-color,#9333ea)';
const xAxis = chartType === 'scatter' ? 'x' : 'name';
const yAxis = chartType === 'scatter' ? 'y' : 'value';
const showLegend = slideData?.showLegend || false;
@ -128,6 +129,14 @@ const ChartWithBulletsSlideLayout: React.FC<ChartWithBulletsSlideLayoutProps> =
const bulletPoints = slideData?.bulletPoints || []
const renderChart = () => {
const renderPieLabel = (props: any) => {
const { name, percent, x, y, textAnchor } = props;
return (
<text x={x} y={y} textAnchor={textAnchor} fill="var(--text-body-color,#4b5563)" fontSize={12}>
{`${name} ${(percent * 100).toFixed(0)}%`}
</text>
);
};
const commonProps = {
data: chartData,
margin: { top: 20, right: 30, left: 40, bottom: 60 },
@ -137,9 +146,9 @@ const ChartWithBulletsSlideLayout: React.FC<ChartWithBulletsSlideLayoutProps> =
case 'bar':
return (
<BarChart {...commonProps}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey={xAxis} />
<YAxis />
<CartesianGrid strokeDasharray="3 3" stroke={color} />
<XAxis dataKey={xAxis} tick={{ fill: 'var(--text-body-color,#4b5563)', fontWeight: 600 }} />
<YAxis tick={{ fill: 'var(--text-body-color,#4b5563)', fontWeight: 600 }} />
{showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
{showLegend && <ChartLegend content={<ChartLegendContent />} />}
<Bar dataKey={yAxis} fill={color} radius={[4, 4, 0, 0]} />
@ -149,9 +158,9 @@ const ChartWithBulletsSlideLayout: React.FC<ChartWithBulletsSlideLayoutProps> =
case 'line':
return (
<LineChart {...commonProps}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey={xAxis} />
<YAxis />
<CartesianGrid strokeDasharray="3 3" stroke={color} />
<XAxis dataKey={xAxis} tick={{ fill: 'var(--text-body-color,#4b5563)', fontWeight: 600 }} />
<YAxis tick={{ fill: 'var(--text-body-color,#4b5563)', fontWeight: 600 }} />
{showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
{showLegend && <ChartLegend content={<ChartLegendContent />} />}
<Line
@ -167,9 +176,9 @@ const ChartWithBulletsSlideLayout: React.FC<ChartWithBulletsSlideLayoutProps> =
case 'area':
return (
<AreaChart {...commonProps}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey={xAxis} />
<YAxis />
<CartesianGrid strokeDasharray="3 3" stroke={color} />
<XAxis dataKey={xAxis} tick={{ fill: 'var(--text-body-color,#4b5563)', fontWeight: 600 }} />
<YAxis tick={{ fill: 'var(--text-body-color,#4b5563)', fontWeight: 600 }} />
{showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
{showLegend && <ChartLegend content={<ChartLegendContent />} />}
<Area
@ -194,10 +203,10 @@ const ChartWithBulletsSlideLayout: React.FC<ChartWithBulletsSlideLayoutProps> =
outerRadius={70}
fill={color}
dataKey={yAxis}
label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
label={renderPieLabel}
>
{chartData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={CHART_COLORS[index % CHART_COLORS.length]} />
{chartData.map((_, index) => (
<Cell key={`cell-${index}`} fill={color} />
))}
</Pie>
</PieChart>
@ -206,9 +215,9 @@ const ChartWithBulletsSlideLayout: React.FC<ChartWithBulletsSlideLayoutProps> =
case 'scatter':
return (
<ScatterChart {...commonProps}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey={xAxis} type="number" />
<YAxis dataKey={yAxis} type="number" />
<CartesianGrid strokeDasharray="3 3" stroke={color} />
<XAxis dataKey={xAxis} type="number" tick={{ fill: 'var(--text-body-color,#4b5563)', fontWeight: 600 }} />
<YAxis dataKey={yAxis} type="number" tick={{ fill: 'var(--text-body-color,#4b5563)', fontWeight: 600 }} />
{showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
{showLegend && <ChartLegend content={<ChartLegendContent />} />}
<Scatter dataKey="value" fill={color} />
@ -222,34 +231,42 @@ const ChartWithBulletsSlideLayout: React.FC<ChartWithBulletsSlideLayoutProps> =
return (
<>
{/* Import Google Fonts */}
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<div
className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden"
style={{
fontFamily: 'Poppins, sans-serif'
fontFamily: 'var(--heading-font-family,Inter)',
background:"var(--card-background-color,#ffffff)"
}}
>
{(slideData as any)?.__companyName__ && (
<div className="absolute top-0 left-0 right-0 px-8 sm:px-12 lg:px-20 pt-4">
<div className="flex items-center gap-4">
<span className="text-sm sm:text-base font-semibold" style={{ color: 'var(--text-heading-color, #111827)' }}>
{(slideData as any)?.__companyName__ || 'Company Name'}
</span>
<div className="h-[2px] flex-1 opacity-70" style={{ backgroundColor: 'var(--text-heading-color, #111827)' }}></div>
</div>
</div>
)}
{/* Main Content */}
<div className="flex h-full px-8 sm:px-12 lg:px-20 pt-8 pb-8">
{/* Left Section - Title, Description, Chart */}
<div className="flex-1 flex flex-col pr-8">
{/* Title */}
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 mb-4">
<h1 style={{ color: "var(--text-heading-color,#111827)" }} className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 mb-4">
{slideData?.title || 'Market Size'}
</h1>
{/* Description */}
<p className="text-base text-gray-700 leading-relaxed mb-8">
<p style={{color:"var(--text-body-color,#4b5563)"}} className="text-base text-gray-700 leading-relaxed mb-8">
{slideData?.description || 'Businesses face challenges with outdated technology and rising costs, limiting efficiency and growth in competitive markets.'}
</p>
{/* Chart Container */}
<div className="flex-1 bg-white rounded-lg shadow-sm border border-gray-100 p-4">
<div className="flex-1 rounded-lg shadow-sm border border-gray-100 p-4" style={{ background: 'var(--primary-accent-color,#F5F8FE)' }}>
<ChartContainer config={chartConfig} className="h-full w-full">
{renderChart()}
</ChartContainer>
@ -263,25 +280,27 @@ const ChartWithBulletsSlideLayout: React.FC<ChartWithBulletsSlideLayoutProps> =
key={index}
className="rounded-2xl p-6 text-white"
style={{
backgroundColor: BULLET_COLORS[index % BULLET_COLORS.length]
backgroundColor: 'var(--primary-accent-color,#9333ea)'
}}
>
{/* Icon and Title */}
<div className="flex items-center space-x-3 mb-3">
<div className="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center">
<img
src={bullet.icon.__icon_url__}
alt={bullet.icon.__icon_query__}
className="w-5 h-5 object-contain brightness-0 invert"
<div style={{background:"var(--primary-accent-color,#9333ea)"}} className="w-8 h-8 rounded-lg flex items-center justify-center">
<RemoteSvgIcon
url={bullet.icon.__icon_url__}
strokeColor={"currentColor"}
className="w-5 h-5"
color="var(--text-heading-color,#ffffff)"
title={bullet.icon.__icon_query__}
/>
</div>
<h3 className="text-lg font-semibold">
<h3 style={{color:"var(--text-heading-color,#ffffff)"}} className="text-lg font-semibold">
{bullet.title}
</h3>
</div>
{/* Description */}
<p className="text-sm leading-relaxed opacity-90">
<p style={{color:"var(--text-body-color,#ffffff)"}} className="text-sm leading-relaxed opacity-90">
{bullet.description}
</p>
</div>

41
servers/nextjs/presentation-templates/general/IntroSlideLayout.tsx
View file

@ -16,8 +16,8 @@ const introSlideSchema = z.object({
presenterName: z.string().min(2).max(50).default('John Doe').meta({
description: "Name of the presenter",
}),
presentationDate: z.string().min(2).max(50).default('December 2024').meta({
description: "Date of the presentation",
presentationDate: z.string().min(2).max(50).default('December 2025').meta({
description: "Date of the presentation must be the latest date like today's date",
}),
image: ImageSchema.default({
__image_url__: 'https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
@ -44,22 +44,29 @@ const IntroSlideLayout: React.FC<IntroSlideLayoutProps> = ({ data: slideData })
const presenterInitials = getInitials(slideData?.presenterName || 'John Doe');
return (
<>
{/* Import Google Fonts */}
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<div
className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden"
style={{
fontFamily: 'Poppins, sans-serif'
background:"var(--card-background-color,#ffffff)"
,fontFamily:"var(--heading-font-family,Inter)"
}}
>
{(slideData as any)?.__companyName__ && (
<div className="absolute top-0 left-0 right-0 px-8 sm:px-12 lg:px-20 pt-4">
<div className="flex items-center gap-4">
<span className="text-sm sm:text-base font-semibold" style={{ color: 'var(--text-heading-color, #111827)' }}>
{(slideData as any)?.__companyName__ || 'Company Name'}
</span>
<div className="h-[2px] flex-1 opacity-70" style={{ backgroundColor: 'var(--text-heading-color, #111827)' }}></div>
</div>
</div>
)}
{/* Main Content */}
<div className="relative z-10 flex h-full px-8 sm:px-12 lg:px-20 pb-8">
<div className="relative z-10 flex h-full px-8 sm:px-12 lg:px-20 pt-12 pb-8">
{/* Left Section - Image */}
<div className="flex-1 flex items-center justify-center pr-8">
<div className="w-full max-w-lg h-80 rounded-2xl overflow-hidden shadow-lg">
@ -74,34 +81,34 @@ const IntroSlideLayout: React.FC<IntroSlideLayoutProps> = ({ data: slideData })
{/* Right Section - Content */}
<div className="flex-1 flex flex-col justify-center pl-8 space-y-6">
{/* Title */}
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
<h1 style={{ color: "var(--text-heading-color,#111827)" }} className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
{slideData?.title || 'Product Overview'}
</h1>
{/* Purple accent line */}
<div className="w-20 h-1 bg-purple-600"></div>
<div style={{background:"var(--text-heading-color,#9333ea)"}} className="w-20 h-1 bg-purple-600"></div>
{/* Description */}
<p className="text-base sm:text-lg text-gray-700 leading-relaxed">
<p style={{color:"var(--text-body-color,#4b5563)"}} className="text-base sm:text-lg text-gray-700 leading-relaxed">
{slideData?.description || 'Our product offers customizable dashboards for real-time reporting and data-driven decisions. It integrates with third-party tools to enhance operations and scales with business growth for improved efficiency.'}
</p>
{/* Presenter Section */}
<div className="bg-white/50 backdrop-blur-sm rounded-lg p-4 lg:p-6 border border-gray-200 shadow-sm">
<div style={{background:"var(--card-background-color,rgb(255 255 255 / 0.5))"}} className="bg-white/50 backdrop-blur-sm rounded-lg p-4 lg:p-6 border border-gray-200 shadow-sm">
<div className="flex items-center gap-4">
{/* Custom Initials Icon */}
<div className="w-10 h-10 lg:w-12 lg:h-12 bg-purple-600 rounded-full flex items-center justify-center">
<span className="text-white font-bold text-sm lg:text-base">
<div style={{background:"var(--primary-accent-color,#9333ea)"}} className="w-10 h-10 lg:w-12 lg:h-12 bg-purple-600 rounded-full flex items-center justify-center">
<span className="font-bold text-sm lg:text-base" style={{color:"var(--text-heading-color,#FFFFFF)"}}>
{presenterInitials}
</span>
</div>
{/* Presenter Info */}
<div className="flex flex-col">
<span className="text-lg lg:text-xl font-bold text-gray-900">
<span style={{color:"var(--text-heading-color,#111827)"}} className="text-lg lg:text-xl font-bold text-gray-900">
{slideData?.presenterName || 'John Doe'}
</span>
<span className="text-sm lg:text-base text-gray-600 font-medium">
<span style={{color:"var(--text-body-color,#4b5563)"}} className="text-sm lg:text-base text-gray-600 font-medium">
{slideData?.presentationDate || 'December 2024'}
</span>
</div>

35
servers/nextjs/presentation-templates/general/MetricsSlideLayout.tsx
View file

@ -10,7 +10,7 @@ const metricsSlideSchema = z.object({
description: "Main title of the slide",
}),
metrics: z.array(z.object({
label: z.string().min(2).max(100).meta({
label: z.string().min(2).max(50).meta({
description: "Metric label/title"
}),
value: z.string().min(1).max(10).meta({
@ -77,17 +77,25 @@ const MetricsSlideLayout: React.FC<MetricsSlideLayoutProps> = ({ data: slideData
return (
<>
{/* Import Google Fonts */}
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<div
className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden flex flex-col"
style={{
fontFamily: 'Poppins, sans-serif'
fontFamily: 'var(--heading-font-family,Inter)',
background:"var(--card-background-color,#ffffff)"
}}
>
{(slideData as any)?.__companyName__ && (
<div className="absolute top-0 left-0 right-0 px-8 sm:px-12 lg:px-20 pt-4">
<div className="flex items-center gap-4">
<span className="text-sm sm:text-base font-semibold" style={{ color: 'var(--text-heading-color, #111827)' }}>
{(slideData as any)?.__companyName__ || 'Company Name'}
</span>
<div className="h-[2px] flex-1 opacity-70" style={{ backgroundColor: 'var(--text-heading-color, #111827)' }}></div>
</div>
</div>
)}
{/* Decorative Wave Patterns */}
<div className="absolute top-0 left-0 w-64 h-full opacity-10 overflow-hidden">
<svg className="w-full h-full" viewBox="0 0 200 400" fill="none">
@ -108,11 +116,11 @@ const MetricsSlideLayout: React.FC<MetricsSlideLayoutProps> = ({ data: slideData
{/* Main Content */}
<div className="relative z-10 px-8 sm:px-12 lg:px-20 pb-12 flex-1 flex flex-col justify-center">
<div className="relative z-10 px-8 sm:px-12 lg:px-20 pt-10 pb-12 flex-1 flex flex-col justify-center">
<div className="space-y-12">
{/* Title */}
<div className="text-center">
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900">
<h1 style={{ color: "var(--text-heading-color,#111827)" }} className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900">
{slideData?.title || 'Company Traction'}
</h1>
</div>
@ -124,23 +132,22 @@ const MetricsSlideLayout: React.FC<MetricsSlideLayoutProps> = ({ data: slideData
{metrics.map((metric, index) => (
<div key={index} className={`text-center space-y-4 ${getItemClasses(metrics.length)}`}>
{/* Label */}
<div className="text-sm text-gray-600 font-medium">
<div className="text-sm text-gray-600 font-medium" style={{color:"var(--text-body-color,#ffffff)"}}>
{metric.label}
</div>
{/* Large Metric Value */}
<div className="text-4xl sm:text-5xl lg:text-6xl font-bold text-purple-600">
<div style={{color:"var(--text-heading-color,#9333ea)"}} className="text-4xl sm:text-5xl lg:text-6xl font-bold text-purple-600">
{metric.value}
</div>
{/* Description Box */}
<div
className="bg-purple-50 rounded-lg p-4 lg:p-5 text-center mt-4"
style={{
backgroundColor: 'rgba(139, 92, 246, 0.08)'
}}
style={{background:"var(--primary-accent-color,#9333ea)"}}
>
<p className="text-xs sm:text-sm text-gray-700 leading-relaxed">
<p style={{color:"var(--text-body-color,#ffffff)"}} className="text-xs sm:text-sm text-gray-700 leading-relaxed">
{metric.description}
</p>
</div>

29
servers/nextjs/presentation-templates/general/MetricsWithImageSlideLayout.tsx
View file

@ -54,18 +54,25 @@ const MetricsWithImageSlideLayout: React.FC<MetricsWithImageSlideLayoutProps> =
return (
<>
{/* Import Google Fonts */}
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<div
className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden"
style={{
fontFamily: 'Poppins, sans-serif'
fontFamily: 'var(--heading-font-family,Inter)',
background:"var(--card-background-color,#ffffff)"
}}
>
{(slideData as any)?.__companyName__ && (
<div className="absolute top-0 left-0 right-0 px-8 sm:px-12 lg:px-20 pt-4">
<div className="flex items-center gap-4">
<span className="text-sm sm:text-base font-semibold" style={{ color: 'var(--text-heading-color, #111827)' }}>
{(slideData as any)?.__companyName__ || 'Company Name'}
</span>
<div className="h-[2px] flex-1 opacity-70" style={{ backgroundColor: 'var(--text-heading-color, #111827)' }}></div>
</div>
</div>
)}
{/* Decorative Wave Patterns */}
<div className="absolute bottom-0 left-0 w-48 h-48 opacity-10 overflow-hidden">
<svg className="w-full h-full" viewBox="0 0 200 200" fill="none">
@ -81,7 +88,7 @@ const MetricsWithImageSlideLayout: React.FC<MetricsWithImageSlideLayoutProps> =
</div>
{/* Main Content */}
<div className="relative z-10 flex h-full px-8 sm:px-12 lg:px-20 pb-8">
<div className="relative z-10 flex h-full px-8 sm:px-12 lg:px-20 pt-12 pb-8">
{/* Left Section - Image */}
<div className="flex-1 flex items-center justify-center pr-8">
<div className="w-full max-w-lg h-96 rounded-2xl overflow-hidden shadow-lg">
@ -96,12 +103,12 @@ const MetricsWithImageSlideLayout: React.FC<MetricsWithImageSlideLayoutProps> =
{/* Right Section - Content and Metrics */}
<div className="flex-1 flex flex-col justify-center pl-8 space-y-6">
{/* Title */}
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
<h1 style={{ color: "var(--text-heading-color,#111827)" }} className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
{slideData?.title || 'Competitive Advantage'}
</h1>
{/* Description */}
<p className="text-base sm:text-lg text-gray-700 leading-relaxed">
<p style={{color:"var(--text-body-color,#4b5563)"}} className="text-base sm:text-lg text-gray-700 leading-relaxed">
{slideData?.description || 'Ginyard International Co. stands out by offering custom digital solutions tailored to client needs, alongside long-term support to ensure lasting relationships and continuous adaptation.'}
</p>
@ -109,10 +116,10 @@ const MetricsWithImageSlideLayout: React.FC<MetricsWithImageSlideLayoutProps> =
<div className="grid grid-cols-2 gap-6">
{metrics.map((metric, index) => (
<div key={index} className="text-center space-y-2">
<div className="text-sm text-gray-600 font-medium">
<div style={{color:"var(--text-body-color,#4b5563)"}} className="text-sm text-gray-600 font-medium">
{metric.label}
</div>
<div className="text-3xl sm:text-4xl lg:text-5xl font-bold text-purple-600">
<div style={{color:"var(--text-heading-color,#9333ea)"}} className="text-3xl sm:text-4xl lg:text-5xl font-bold text-purple-600">
{metric.value}
</div>
</div>

39
servers/nextjs/presentation-templates/general/NumberedBulletsSlideLayout.tsx
View file

@ -58,30 +58,37 @@ const NumberedBulletsSlideLayout: React.FC<NumberedBulletsSlideLayoutProps> = ({
return (
<>
{/* Import Google Fonts */}
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<div
className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden"
style={{
fontFamily: 'Poppins, sans-serif'
fontFamily: 'var(--heading-font-family,Inter)',
background:"var(--card-background-color,#ffffff)"
}}
>
{(slideData as any)?.__companyName__ && (
<div className="absolute top-0 left-0 right-0 px-8 sm:px-12 lg:px-20 pt-4">
<div className="flex items-center gap-4">
<span className="text-sm sm:text-base font-semibold" style={{ color: 'var(--text-heading-color, #111827)' }}>
{(slideData as any)?.__companyName__ || 'Company Name'}
</span>
<div className="h-[2px] flex-1 opacity-70" style={{ backgroundColor: 'var(--text-heading-color, #111827)' }}></div>
</div>
</div>
)}
{/* Main Content Container */}
<div className="px-8 sm:px-12 lg:px-20 pt-8 pb-8 h-full">
<div className="px-8 sm:px-12 lg:px-20 pt-12 pb-8 h-full">
{/* Top Section - Title and Image */}
<div className="flex items-start justify-between mb-8">
{/* Title Section */}
<div className="flex-1 pr-8">
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight mb-4">
<h1 style={{ color: "var(--text-heading-color,#111827)" }} className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight mb-4">
{slideData?.title || 'Market Validation'}
</h1>
{/* Purple accent line */}
<div className="w-24 h-1 bg-purple-600 mb-6"></div>
<div style={{background:"var(--text-heading-color,#9333ea)"}} className="w-24 h-1 bg-purple-600 mb-6"></div>
</div>
{/* Image Section */}
@ -89,7 +96,7 @@ const NumberedBulletsSlideLayout: React.FC<NumberedBulletsSlideLayoutProps> = ({
<img
src={slideData?.image?.__image_url__ || ''}
alt={slideData?.image?.__image_prompt__ || slideData?.title || ''}
className="w-full h-full object-cover rounded-lg shadow-md"
className="w-full h-full object-cover rounded-lg shadow-md" style={{background:"var(--tertiary-accent-color,#e5e7eb)"}}
/>
</div>
</div>
@ -100,17 +107,17 @@ const NumberedBulletsSlideLayout: React.FC<NumberedBulletsSlideLayoutProps> = ({
<div key={index} className="flex items-start space-x-4">
{/* Number */}
<div className="flex-shrink-0">
<div className="text-4xl sm:text-5xl font-bold text-gray-900">
<div style={{color:"var(--text-heading-color,#111827)"}} className="text-4xl sm:text-5xl font-bold text-gray-900">
{String(index + 1).padStart(2, '0')}
</div>
</div>
{/* Content */}
<div className="flex-1 pt-2">
<h3 className="text-xl sm:text-2xl font-bold text-gray-900 mb-3">
<h3 style={{color:"var(--text-heading-color,#111827)"}} className="text-xl sm:text-2xl font-bold text-gray-900 mb-3">
{bullet.title}
</h3>
<p className="text-base text-gray-700 leading-relaxed">
<p style={{color:"var(--text-body-color,#4b5563)"}} className="text-base text-gray-700 leading-relaxed">
{bullet.description}
</p>
</div>
@ -132,9 +139,9 @@ const NumberedBulletsSlideLayout: React.FC<NumberedBulletsSlideLayoutProps> = ({
/>
<defs>
<linearGradient id="wave-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor="#8b5cf6" />
<stop offset="50%" stopColor="#a855f7" />
<stop offset="100%" stopColor="#c084fc" />
<stop offset="0%" stopColor="var(--primary-accent-color,#9333ea)" />
<stop offset="50%" stopColor="var(--primary-accent-color,#9333ea)" />
<stop offset="100%" stopColor="var(--primary-accent-color,#9333ea)" />
</linearGradient>
</defs>
</svg>

43
servers/nextjs/presentation-templates/general/QuoteSlideLayout.tsx
View file

@ -36,17 +36,25 @@ const QuoteSlideLayout: React.FC<QuoteSlideLayoutProps> = ({ data: slideData })
return (
<>
{/* Import Google Fonts */}
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<div
className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden"
style={{
fontFamily: 'Poppins, sans-serif'
fontFamily: 'var(--heading-font-family,Inter)',
background:"var(--card-background-color,#ffffff)"
}}
>
{(slideData as any)?.__companyName__ && (
<div className="absolute top-0 left-0 right-0 px-8 sm:px-12 lg:px-20 pt-4">
<div className="flex items-center gap-4">
<span className="text-sm sm:text-base font-semibold" style={{ color: 'var(--text-heading-color, #ffffff)' }}>
{(slideData as any)?.__companyName__ || 'Company Name'}
</span>
<div className="h-[2px] flex-1 opacity-70" style={{ backgroundColor: 'var(--text-heading-color, #ffffff)' }}></div>
</div>
</div>
)}
{/* Background Image */}
<div
className="absolute inset-0 w-full h-full bg-cover bg-center bg-no-repeat"
@ -55,8 +63,11 @@ const QuoteSlideLayout: React.FC<QuoteSlideLayoutProps> = ({ data: slideData })
}}
/>
{/* Background Overlay */}
<div className="absolute inset-0 bg-gradient-to-br from-black/60 via-black/40 to-black/60"></div>
{/* Background Overlay - low opacity primary accent */}
<div
className="absolute inset-0"
style={{ backgroundColor: 'var(--primary-accent-color, #9333ea)', opacity: 0.3 }}
></div>
{/* Decorative Elements */}
<div className="absolute top-0 left-0 w-32 h-32 bg-purple-600/20 rounded-full blur-3xl"></div>
@ -64,16 +75,16 @@ const QuoteSlideLayout: React.FC<QuoteSlideLayoutProps> = ({ data: slideData })
<div className="absolute top-1/2 left-1/4 w-24 h-24 bg-white/10 rounded-full blur-2xl"></div>
{/* Main Content */}
<div className="relative z-10 px-8 sm:px-12 lg:px-20 py-12 flex-1 flex flex-col justify-center h-full">
<div className="relative z-10 px-8 sm:px-12 lg:px-20 pt-14 py-12 flex-1 flex flex-col justify-center h-full">
<div className="text-center space-y-8 max-w-4xl mx-auto">
{/* Heading */}
<div className="space-y-4">
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white leading-tight">
<h1 style={{ color: "var(--text-heading-color,#111827)" }} className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white leading-tight">
{slideData?.heading || 'Words of Wisdom'}
</h1>
{/* Purple accent line */}
<div className="w-20 h-1 bg-purple-400 mx-auto"></div>
<div style={{background:"var(--primary-accent-color,#9333ea)"}} className="w-20 h-1 bg-purple-400 mx-auto"></div>
</div>
{/* Quote Section */}
@ -81,7 +92,7 @@ const QuoteSlideLayout: React.FC<QuoteSlideLayoutProps> = ({ data: slideData })
{/* Quote Icon */}
<div className="flex justify-center">
<svg
className="w-12 h-12 text-purple-300 opacity-80"
className="w-12 h-12 text-purple-300 opacity-80" style={{color:"var(--primary-accent-color,#9333ea)"}}
fill="currentColor"
viewBox="0 0 24 24"
>
@ -90,24 +101,24 @@ const QuoteSlideLayout: React.FC<QuoteSlideLayoutProps> = ({ data: slideData })
</div>
{/* Quote Text */}
<blockquote className="text-xl sm:text-2xl lg:text-3xl font-medium text-white leading-relaxed italic">
<blockquote style={{color:"var(--text-body-color,#ffffff)"}} className="text-xl sm:text-2xl lg:text-3xl font-medium text-white leading-relaxed italic">
"{slideData?.quote || 'Success is not final, failure is not fatal: it is the courage to continue that counts. The future belongs to those who believe in the beauty of their dreams.'}"
</blockquote>
{/* Author */}
<div className="flex justify-center items-center space-x-4">
<div className="w-16 h-px bg-purple-300"></div>
<div style={{background:"var(--primary-accent-color,#9333ea)"}} className="w-16 h-px bg-purple-300"></div>
<cite className="text-base sm:text-lg text-purple-200 font-semibold not-italic">
{slideData?.author || 'Winston Churchill'}
</cite>
<div className="w-16 h-px bg-purple-300"></div>
<div style={{background:"var(--primary-accent-color,#9333ea)"}} className="w-16 h-px bg-purple-300"></div>
</div>
</div>
</div>
</div>
{/* Bottom Decorative Border */}
<div className="absolute bottom-0 left-0 right-0 h-2 bg-gradient-to-r from-purple-600 via-purple-400 to-purple-600"></div>
{/* Bottom Decorative Border uses heading color */}
<div className="absolute bottom-0 left-0 right-0 h-2" style={{ backgroundColor: 'var(--text-heading-color,#111827)' }}></div>
</div>
</>
)

45
servers/nextjs/presentation-templates/general/TableInfoSlideLayout.tsx
View file

@ -52,17 +52,25 @@ const TableInfoSlideLayout: React.FC<TableInfoSlideLayoutProps> = ({ data: slide
return (
<>
{/* Import Google Fonts */}
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<div
className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden flex flex-col"
style={{
fontFamily: 'Poppins, sans-serif'
fontFamily: 'var(--heading-font-family,Inter)',
background:"var(--card-background-color,#ffffff)"
}}
>
{(slideData as any)?.__companyName__ && (
<div className="absolute top-0 left-0 right-0 px-8 sm:px-12 lg:px-20 pt-4">
<div className="flex items-center gap-4">
<span className="text-sm sm:text-base font-semibold" style={{ color: 'var(--text-heading-color, #111827)' }}>
{(slideData as any)?.__companyName__ || 'Company Name'}
</span>
<div className="h-[2px] flex-1 opacity-70" style={{ backgroundColor: 'var(--text-heading-color, #111827)' }}></div>
</div>
</div>
)}
{/* Decorative Wave Patterns */}
<div className="absolute top-0 left-0 w-64 h-full opacity-10 overflow-hidden">
<svg className="w-full h-full" viewBox="0 0 200 400" fill="none">
@ -81,26 +89,26 @@ const TableInfoSlideLayout: React.FC<TableInfoSlideLayoutProps> = ({ data: slide
</div>
{/* Main Content */}
<div className="relative z-10 px-8 sm:px-12 lg:px-20 py-8 flex-1 flex flex-col justify-between">
<div className="relative z-10 px-8 sm:px-12 lg:px-20 pt-12 py-8 flex-1 flex flex-col justify-between">
{/* Title Section */}
<div className="text-center space-y-4">
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900">
<h1 style={{ color: "var(--text-heading-color,#111827)" }} className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900">
{slideData?.title || 'Market Comparison'}
</h1>
{/* Purple accent line */}
<div className="w-20 h-1 bg-purple-600 mx-auto"></div>
<div style={{background:"var(--primary-accent-color,#9333ea)"}} className="w-20 h-1 bg-purple-600 mx-auto"></div>
</div>
{/* Table Section */}
<div className="flex-1 flex items-center justify-center py-8">
<div className="w-full max-w-4xl">
<div className="bg-white rounded-lg shadow-lg border border-gray-200 overflow-hidden">
<div style={{ background: "var(--tertiary-accent-color,#e5e7eb)", borderColor: "var(--secondary-accent-color,#e5e7eb)" }} className="bg-white rounded-lg shadow-lg border overflow-hidden">
{/* Table Header */}
<div className="bg-purple-600 text-white">
<div style={{ backgroundColor: "var(--primary-accent-color,#9333ea)" }}>
<div className="grid gap-px" style={{ gridTemplateColumns: `repeat(${tableHeaders.length}, 1fr)` }}>
{tableHeaders.map((header, index) => (
<div key={index} className="px-6 py-4 font-semibold text-center text-sm sm:text-base">
<div key={index} className="px-6 py-4 font-semibold text-center text-sm sm:text-base" style={{color:"var(--text-heading-color,#111827)"}}>
{header}
</div>
))}
@ -112,11 +120,20 @@ const TableInfoSlideLayout: React.FC<TableInfoSlideLayoutProps> = ({ data: slide
{tableRows.map((row, rowIndex) => (
<div
key={rowIndex}
className={`grid gap-px ${rowIndex % 2 === 0 ? 'bg-gray-50' : 'bg-white'} hover:bg-purple-50 transition-colors duration-200`}
className={`grid gap-px ${rowIndex % 2 === 0 ? 'bg-gray-50' : 'bg-white'} transition-colors duration-200`}
style={{ gridTemplateColumns: `repeat(${tableHeaders.length}, 1fr)` }}
>
{row.slice(0, tableHeaders.length).map((cell, cellIndex) => (
<div key={cellIndex} className="px-6 py-4 text-center text-sm sm:text-base text-gray-800">
<div
key={cellIndex}
className="px-6 py-4 text-center text-sm sm:text-base"
style={{
color: "var(--text-body-color,#4b5563)",
background: cellIndex % 2 === 0
? "var(--secondary-accent-color,#e5e7eb)"
: "var(--tertiary-accent-color,#f3f4f6)",
}}
>
{cell}
</div>
))}
@ -131,7 +148,7 @@ const TableInfoSlideLayout: React.FC<TableInfoSlideLayoutProps> = ({ data: slide
{/* Description Section */}
<div className="text-center space-y-4">
<div className="max-w-4xl mx-auto">
<p className="text-sm sm:text-base text-gray-700 leading-relaxed">
<p style={{color:"var(--text-body-color,#4b5563)"}} className="text-sm sm:text-base text-gray-700 leading-relaxed">
{slideData?.description || 'This comparison shows our competitive position in the market. While we currently have a smaller market share, our growth rate significantly exceeds competitors, indicating strong potential for future expansion.'}
</p>
</div>

41
servers/nextjs/presentation-templates/general/TableOfContentsSlideLayout.tsx
View file

@ -48,27 +48,34 @@ const TableOfContentsSlideLayout: React.FC<TableOfContentsSlideLayoutProps> = ({
return (
<>
{/* Import Google Fonts */}
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<div
className="w-full rounded-sm max-w-[1280px] shadow-lg px-8 sm:px-12 lg:px-20 py-8 sm:py-12 lg:py-16 max-h-[720px] aspect-video bg-white relative z-20 mx-auto"
style={{
fontFamily: 'Poppins, sans-serif'
fontFamily: 'var(--heading-font-family,Inter)',
background:"var(--card-background-color,#ffffff)"
}}
>
{(slideData as any)?.__companyName__ && (
<div className="absolute top-0 left-0 right-0 px-8 sm:px-12 lg:px-20 pt-4">
<div className="flex items-center gap-4">
<span className="text-sm sm:text-base font-semibold" style={{ color: 'var(--text-heading-color, #111827)' }}>
{(slideData as any)?.__companyName__ || 'Company Name'}
</span>
<div className="h-[2px] flex-1 opacity-70" style={{ backgroundColor: 'var(--text-heading-color, #111827)' }}></div>
</div>
</div>
)}
{/* Title Section */}
<div className="text-center mb-8 sm:mb-12">
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 mb-4">
<div className="text-center mb-8 sm:mb-12 mt-6">
<h1 style={{ color: "var(--text-heading-color,#111827)" }} className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 mb-4">
Table of Contents
</h1>
{/* Decorative Wave */}
<div className="flex justify-center">
<svg width="80" height="20" viewBox="0 0 80 20" className="text-purple-600">
<svg width="80" height="20" viewBox="0 0 80 20" className="text-purple-600" style={{color:"var(--primary-accent-color,#9333ea)"}}>
<path
d="M0 10 Q20 0 40 10 T80 10"
stroke="currentColor"
@ -87,21 +94,21 @@ const TableOfContentsSlideLayout: React.FC<TableOfContentsSlideLayoutProps> = ({
<div key={section.number} className="flex items-center justify-between group">
<div className="flex items-center space-x-4">
{/* Number Box */}
<div className="w-12 h-12 sm:w-14 sm:h-14 bg-purple-600 rounded-xl flex items-center justify-center text-white font-bold text-lg sm:text-xl group-hover:bg-purple-700 transition-colors">
<div style={{background:"var(--primary-accent-color,#9333ea)", color:"var(--text-heading-color,#ffffff)"}} className="w-12 h-12 sm:w-14 sm:h-14 bg-purple-600 rounded-xl flex items-center justify-center text-white font-bold text-lg sm:text-xl group-hover:bg-purple-700 transition-colors">
{section.number}
</div>
{/* Title */}
<span className="text-lg sm:text-xl font-medium text-gray-800 group-hover:text-purple-600 transition-colors">
<span style={{color:"var(--text-heading-color,#111827)"}} className="text-lg sm:text-xl font-medium text-gray-800 group-hover:text-purple-600 transition-colors">
{section.title}
</span>
</div>
{/* Page Number */}
<div className="text-right">
<span className="text-lg sm:text-xl text-gray-600">
<span style={{color:"var(--text-body-color,#4b5563)"}} className="text-lg sm:text-xl text-gray-600">
{section.pageNumber}
</span>
{/* Dotted line effect */}
<div className="text-gray-300 text-sm mt-1">
<div style={{color:"var(--text-body-color,#4b5563)"}} className="text-gray-300 text-sm mt-1">
.....
</div>
</div>
@ -115,21 +122,21 @@ const TableOfContentsSlideLayout: React.FC<TableOfContentsSlideLayoutProps> = ({
<div key={section.number} className="flex items-center justify-between group">
<div className="flex items-center space-x-4">
{/* Number Box */}
<div className="w-12 h-12 sm:w-14 sm:h-14 bg-purple-600 rounded-xl flex items-center justify-center text-white font-bold text-lg sm:text-xl group-hover:bg-purple-700 transition-colors">
<div style={{background:"var(--primary-accent-color,#9333ea)", color:"var(--text-heading-color,#ffffff)"}} className="w-12 h-12 sm:w-14 sm:h-14 bg-purple-600 rounded-xl flex items-center justify-center text-white font-bold text-lg sm:text-xl group-hover:bg-purple-700 transition-colors">
{section.number}
</div>
{/* Title */}
<span className="text-lg sm:text-xl font-medium text-gray-800 group-hover:text-purple-600 transition-colors">
<span style={{color:"var(--text-heading-color,#111827)"}} className="text-lg sm:text-xl font-medium text-gray-800 group-hover:text-purple-600 transition-colors">
{section.title}
</span>
</div>
{/* Page Number */}
<div className="text-right">
<span className="text-lg sm:text-xl text-gray-600">
<span style={{color:"var(--text-body-color,#4b5563)"}} className="text-lg sm:text-xl text-gray-600">
{section.pageNumber}
</span>
{/* Dotted line effect */}
<div className="text-gray-300 text-sm mt-1">
<div style={{color:"var(--text-body-color,#4b5563)"}} className="text-gray-300 text-sm mt-1">
.....
</div>
</div>

39
servers/nextjs/presentation-templates/general/TeamSlideLayout.tsx
View file

@ -32,7 +32,7 @@ const teamSlideSchema = z.object({
position: 'CEO',
description: 'Strategic leader with 15+ years experience in digital transformation and business growth.',
image: {
__image_url__: 'https://images.unsplash.com/photo-1494790108755-2616b612994a?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
__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 businesswoman CEO headshot'
}
},
@ -92,18 +92,25 @@ const TeamSlideLayout: React.FC<TeamSlideLayoutProps> = ({ data: slideData }) =>
return (
<>
{/* Import Google Fonts */}
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<div
className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden"
style={{
fontFamily: 'Poppins, sans-serif'
fontFamily: 'var(--heading-font-family,Inter)',
background:"var(--card-background-color,#ffffff)"
}}
>
{(slideData as any)?.__companyName__ && (
<div className="absolute top-0 left-0 right-0 px-8 sm:px-12 lg:px-20 pt-4">
<div className="flex items-center gap-4">
<span className="text-sm sm:text-base font-semibold" style={{ color: 'var(--text-heading-color, #111827)' }}>
{(slideData as any)?.__companyName__ || 'Company Name'}
</span>
<div className="h-[2px] flex-1 opacity-70" style={{ backgroundColor: 'var(--text-heading-color, #111827)' }}></div>
</div>
</div>
)}
{/* Decorative Wave Pattern */}
<div className="absolute bottom-0 left-0 w-80 h-40 opacity-10 overflow-hidden">
<svg className="w-full h-full" viewBox="0 0 300 150" fill="none">
@ -113,19 +120,19 @@ const TeamSlideLayout: React.FC<TeamSlideLayoutProps> = ({ data: slideData }) =>
</div>
{/* Main Content */}
<div className="relative z-10 flex h-full px-8 sm:px-12 lg:px-20 pb-8">
<div className="relative z-10 flex h-full px-8 sm:px-12 lg:px-20 pt-12 pb-8">
{/* Left Section - Title and Company Description */}
<div className="flex-1 flex flex-col justify-center pr-8 space-y-6">
{/* Title */}
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
<h1 style={{ color: "var(--text-heading-color,#111827)" }} className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
{slideData?.title || 'Our Team Members'}
</h1>
{/* Purple accent line */}
<div className="w-20 h-1 bg-purple-600"></div>
<div style={{background:"var(--primary-accent-color,#9333ea)"}} className="w-20 h-1 bg-purple-600"></div>
{/* Company Description */}
<p className="text-base sm:text-lg text-gray-700 leading-relaxed">
<p style={{color:"var(--text-body-color,#4b5563)"}} className="text-base sm:text-lg text-gray-700 leading-relaxed">
{slideData?.companyDescription || 'Ginyard International Co. is a leading provider of innovative digital solutions tailored for businesses. Our mission is to empower organizations to achieve their goals through cutting-edge technology and strategic partnerships.'}
</p>
</div>
@ -136,7 +143,7 @@ const TeamSlideLayout: React.FC<TeamSlideLayoutProps> = ({ data: slideData }) =>
{teamMembers.map((member, index) => (
<div key={index} className="text-center space-y-3">
{/* Member Photo */}
<div className="w-32 h-32 mx-auto rounded-lg overflow-hidden shadow-md">
<div className="w-32 h-32 mx-auto rounded-lg overflow-hidden shadow-md" style={{background:"var(--tertiary-accent-color,#e5e7eb)"}}>
<img
src={member.image.__image_url__ || ''}
alt={member.image.__image_prompt__ || member.name}
@ -146,13 +153,13 @@ const TeamSlideLayout: React.FC<TeamSlideLayoutProps> = ({ data: slideData }) =>
{/* Member Info */}
<div>
<h3 className="text-lg font-semibold text-gray-900">
<h3 style={{color:"var(--text-heading-color,#111827)"}} className="text-lg font-semibold text-gray-900">
{member.name}
</h3>
<p className="text-sm font-medium text-gray-600 italic mb-2">
<p style={{color:"var(--text-body-color,#4b5563)"}} className="text-sm font-medium text-gray-600 italic mb-2">
{member.position}
</p>
<p className="text-xs text-gray-600 leading-relaxed px-2">
<p style={{color:"var(--text-body-color,#4b5563)"}} className="text-xs text-gray-600 leading-relaxed px-2">
{member.description}
</p>
</div>