From 5eec194152047831221ef2bab69352fa5f5533f9 Mon Sep 17 00:00:00 2001
From: Suraj Jha <getsurajjha@gmail.com>
Date: Tue, 9 Sep 2025 03:55:55 +0545
Subject: [PATCH] update: general template

---
 .../general/BasicInfoSlideLayout.tsx          | 28 ++++--
 .../general/BulletIconsOnlySlideLayout.tsx    | 56 +++++++-----
 .../general/BulletWithIconsSlideLayout.tsx    | 56 +++++++-----
 .../general/ChartWithBulletsSlideLayout.tsx   | 91 +++++++++++--------
 .../general/IntroSlideLayout.tsx              | 41 +++++----
 .../general/MetricsSlideLayout.tsx            | 35 ++++---
 .../general/MetricsWithImageSlideLayout.tsx   | 29 +++---
 .../general/NumberedBulletsSlideLayout.tsx    | 39 ++++----
 .../general/QuoteSlideLayout.tsx              | 43 +++++----
 .../general/TableInfoSlideLayout.tsx          | 45 ++++++---
 .../general/TableOfContentsSlideLayout.tsx    | 41 +++++----
 .../general/TeamSlideLayout.tsx               | 39 ++++----
 12 files changed, 333 insertions(+), 210 deletions(-)

diff --git a/servers/nextjs/presentation-templates/general/BasicInfoSlideLayout.tsx b/servers/nextjs/presentation-templates/general/BasicInfoSlideLayout.tsx
index 3f5c4e33..e97ba984 100644
--- a/servers/nextjs/presentation-templates/general/BasicInfoSlideLayout.tsx
+++ b/servers/nextjs/presentation-templates/general/BasicInfoSlideLayout.tsx
@@ -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>
         </>
     )
diff --git a/servers/nextjs/presentation-templates/general/BulletIconsOnlySlideLayout.tsx b/servers/nextjs/presentation-templates/general/BulletIconsOnlySlideLayout.tsx
index e3a1e9c2..32746732 100644
--- a/servers/nextjs/presentation-templates/general/BulletIconsOnlySlideLayout.tsx
+++ b/servers/nextjs/presentation-templates/general/BulletIconsOnlySlideLayout.tsx
@@ -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"
diff --git a/servers/nextjs/presentation-templates/general/BulletWithIconsSlideLayout.tsx b/servers/nextjs/presentation-templates/general/BulletWithIconsSlideLayout.tsx
index e5d80700..b2a55d55 100644
--- a/servers/nextjs/presentation-templates/general/BulletWithIconsSlideLayout.tsx
+++ b/servers/nextjs/presentation-templates/general/BulletWithIconsSlideLayout.tsx
@@ -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>
diff --git a/servers/nextjs/presentation-templates/general/ChartWithBulletsSlideLayout.tsx b/servers/nextjs/presentation-templates/general/ChartWithBulletsSlideLayout.tsx
index f77e554c..564af2c3 100644
--- a/servers/nextjs/presentation-templates/general/ChartWithBulletsSlideLayout.tsx
+++ b/servers/nextjs/presentation-templates/general/ChartWithBulletsSlideLayout.tsx
@@ -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>
diff --git a/servers/nextjs/presentation-templates/general/IntroSlideLayout.tsx b/servers/nextjs/presentation-templates/general/IntroSlideLayout.tsx
index 53f1a9ee..816ac529 100644
--- a/servers/nextjs/presentation-templates/general/IntroSlideLayout.tsx
+++ b/servers/nextjs/presentation-templates/general/IntroSlideLayout.tsx
@@ -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>
diff --git a/servers/nextjs/presentation-templates/general/MetricsSlideLayout.tsx b/servers/nextjs/presentation-templates/general/MetricsSlideLayout.tsx
index 266d0fc2..3585a430 100644
--- a/servers/nextjs/presentation-templates/general/MetricsSlideLayout.tsx
+++ b/servers/nextjs/presentation-templates/general/MetricsSlideLayout.tsx
@@ -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>
diff --git a/servers/nextjs/presentation-templates/general/MetricsWithImageSlideLayout.tsx b/servers/nextjs/presentation-templates/general/MetricsWithImageSlideLayout.tsx
index f30b3f34..af7d1c70 100644
--- a/servers/nextjs/presentation-templates/general/MetricsWithImageSlideLayout.tsx
+++ b/servers/nextjs/presentation-templates/general/MetricsWithImageSlideLayout.tsx
@@ -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>
diff --git a/servers/nextjs/presentation-templates/general/NumberedBulletsSlideLayout.tsx b/servers/nextjs/presentation-templates/general/NumberedBulletsSlideLayout.tsx
index 3b299513..e260769c 100644
--- a/servers/nextjs/presentation-templates/general/NumberedBulletsSlideLayout.tsx
+++ b/servers/nextjs/presentation-templates/general/NumberedBulletsSlideLayout.tsx
@@ -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>
diff --git a/servers/nextjs/presentation-templates/general/QuoteSlideLayout.tsx b/servers/nextjs/presentation-templates/general/QuoteSlideLayout.tsx
index d6b6e234..84ee087b 100644
--- a/servers/nextjs/presentation-templates/general/QuoteSlideLayout.tsx
+++ b/servers/nextjs/presentation-templates/general/QuoteSlideLayout.tsx
@@ -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>
         </>
     )
diff --git a/servers/nextjs/presentation-templates/general/TableInfoSlideLayout.tsx b/servers/nextjs/presentation-templates/general/TableInfoSlideLayout.tsx
index 693ae100..46da6655 100644
--- a/servers/nextjs/presentation-templates/general/TableInfoSlideLayout.tsx
+++ b/servers/nextjs/presentation-templates/general/TableInfoSlideLayout.tsx
@@ -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>
diff --git a/servers/nextjs/presentation-templates/general/TableOfContentsSlideLayout.tsx b/servers/nextjs/presentation-templates/general/TableOfContentsSlideLayout.tsx
index 408bb6d0..244153ed 100644
--- a/servers/nextjs/presentation-templates/general/TableOfContentsSlideLayout.tsx
+++ b/servers/nextjs/presentation-templates/general/TableOfContentsSlideLayout.tsx
@@ -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>
diff --git a/servers/nextjs/presentation-templates/general/TeamSlideLayout.tsx b/servers/nextjs/presentation-templates/general/TeamSlideLayout.tsx
index 0e87ff1c..5ae1c08d 100644
--- a/servers/nextjs/presentation-templates/general/TeamSlideLayout.tsx
+++ b/servers/nextjs/presentation-templates/general/TeamSlideLayout.tsx
@@ -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>