From 679ae31a4e407b0b7b63dcef159179512cf67231 Mon Sep 17 00:00:00 2001
From: shiva raj badu <shivabadu5@gmail.com>
Date: Thu, 9 Apr 2026 15:08:01 +0545
Subject: [PATCH] feat: New template improvements

---
 .../ProductOverview/BusinessChallengesGridSlide.tsx       | 4 ++--
 .../ProductOverview/ComparisonChartSlide.tsx              | 6 +++---
 .../ProductOverview/ImageGallerySlide.tsx                 | 6 +++---
 .../ProductOverview/KpiCardsSlide.tsx                     | 6 +++---
 .../ProductOverview/PricingPlanSlide.tsx                  | 4 ++--
 .../ProductOverview/ReportSnapshotSlide.tsx               | 8 ++++----
 .../ProductOverview/TableOfContentSlide.tsx               | 8 ++++----
 7 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/electron/servers/nextjs/app/presentation-templates/ProductOverview/BusinessChallengesGridSlide.tsx b/electron/servers/nextjs/app/presentation-templates/ProductOverview/BusinessChallengesGridSlide.tsx
index df91222f..1c337423 100644
--- a/electron/servers/nextjs/app/presentation-templates/ProductOverview/BusinessChallengesGridSlide.tsx
+++ b/electron/servers/nextjs/app/presentation-templates/ProductOverview/BusinessChallengesGridSlide.tsx
@@ -54,7 +54,7 @@ const BusinessChallengesGridSlide = ({ data }: { data: Partial<SchemaType> }) =>
     <>
       <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap" rel="stylesheet" />
       <div
-        className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px]"
+        className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] flex flex-col"
         style={{
           backgroundColor: "var(--background-color,#DAE1DE)",
           fontFamily: "var(--body-font-family,'Bricolage Grotesque')",
@@ -70,7 +70,7 @@ const BusinessChallengesGridSlide = ({ data }: { data: Partial<SchemaType> }) =>
         </div>
 
         <div
-          className="grid  grid-cols-2 justify-between items-center gap-y-[63px] px-[84px] py-[70px] gap-x-[63px]"
+          className="grid  grid-cols-2 justify-between items-center flex-1 gap-y-[63px] px-[84px] py-[70px] gap-x-[63px]"
           style={{ backgroundColor: "var(--primary-color,#15342D)" }}
         >
           {challenges?.map((challenge, index) => (
diff --git a/electron/servers/nextjs/app/presentation-templates/ProductOverview/ComparisonChartSlide.tsx b/electron/servers/nextjs/app/presentation-templates/ProductOverview/ComparisonChartSlide.tsx
index a221de3e..a2ac164a 100644
--- a/electron/servers/nextjs/app/presentation-templates/ProductOverview/ComparisonChartSlide.tsx
+++ b/electron/servers/nextjs/app/presentation-templates/ProductOverview/ComparisonChartSlide.tsx
@@ -150,7 +150,7 @@ const ComparisonChartSlide = ({ data }: { data: Partial<SchemaType> }) => {
             {columns?.map((column, index) => (
               <div
                 key={index}
-                className="flex h-[94px] items-center justify-center border-r text-[20px] font-semibold uppercase tracking-[0.2em]"
+                className="flex h-[94px] items-center px-[33px] justify-center border-r text-[20px] font-semibold uppercase tracking-[0.2em]"
                 style={{
                   backgroundColor:
                     index === 3
@@ -183,7 +183,7 @@ const ComparisonChartSlide = ({ data }: { data: Partial<SchemaType> }) => {
                 style={{ borderColor: "var(--stroke,#c5cccb)" }}
               >
                 <div
-                  className="flex h-[94px] items-center border-r pl-[34px] text-[20px] font-semibold uppercase tracking-[0.2em]"
+                  className="flex  items-center border-r pl-[34px] text-[20px] font-semibold uppercase tracking-[0.2em]"
                   style={{
                     backgroundColor: "var(--card-color,#ffffff)",
                     borderColor: "var(--stroke,#c5cccb)",
@@ -196,7 +196,7 @@ const ComparisonChartSlide = ({ data }: { data: Partial<SchemaType> }) => {
                 {cells?.map((status, cellIndex) => (
                   <div
                     key={cellIndex}
-                    className="flex h-[94px] items-center justify-center border-r"
+                    className="flex  p-[33px] items-center justify-center border-r"
                     style={{
                       backgroundColor: "var(--card-color,#ffffff)",
                       borderColor: "var(--stroke,#c5cccb)",
diff --git a/electron/servers/nextjs/app/presentation-templates/ProductOverview/ImageGallerySlide.tsx b/electron/servers/nextjs/app/presentation-templates/ProductOverview/ImageGallerySlide.tsx
index 41c854b6..b8e49b0f 100644
--- a/electron/servers/nextjs/app/presentation-templates/ProductOverview/ImageGallerySlide.tsx
+++ b/electron/servers/nextjs/app/presentation-templates/ProductOverview/ImageGallerySlide.tsx
@@ -104,7 +104,7 @@ const ImageGallerySlide = ({ data }: { data: Partial<SchemaType> }) => {
               {title}
             </h2>
             <p
-              className="mt-[24px] w-[620px] text-[24px] font-normal  text-[#15342DCC]"
+              className="mt-[24px] w-[584px] text-[24px] font-normal  text-[#15342DCC]"
               style={{ color: "var(--background-text,#15342DCC)" }}
             >
               {description}
@@ -134,12 +134,12 @@ const ImageGallerySlide = ({ data }: { data: Partial<SchemaType> }) => {
           <img
             src={bottomCenterImage?.__image_url__}
             alt={bottomCenterImage?.__image_prompt__}
-            className="h-[290px] w-[270px] object-cover"
+            className="h-[294px] w-[270px] object-cover"
           />
           <img
             src={bottomRightImage?.__image_url__}
             alt={bottomRightImage?.__image_prompt__}
-            className="h-[290px] w-[270px] object-cover"
+            className="h-[294px] w-[270px] object-cover"
           />
         </div>
       </div>
diff --git a/electron/servers/nextjs/app/presentation-templates/ProductOverview/KpiCardsSlide.tsx b/electron/servers/nextjs/app/presentation-templates/ProductOverview/KpiCardsSlide.tsx
index d81f16bb..19a9235b 100644
--- a/electron/servers/nextjs/app/presentation-templates/ProductOverview/KpiCardsSlide.tsx
+++ b/electron/servers/nextjs/app/presentation-templates/ProductOverview/KpiCardsSlide.tsx
@@ -8,10 +8,10 @@ export const slideLayoutDescription =
 
 const KpiSchema = z.object({
   value: z.string().max(5).meta({
-    description: "Primary KPI value shown in a card.",
+    description: "Primary KPI value shown in a card. Should be less than 5 characters.",
   }),
-  body: z.string().max(20).meta({
-    description: "Short KPI supporting text.",
+  body: z.string().max(16).meta({
+    description: "Short KPI supporting text. Should be less than 16 characters.",
   }),
 });
 
diff --git a/electron/servers/nextjs/app/presentation-templates/ProductOverview/PricingPlanSlide.tsx b/electron/servers/nextjs/app/presentation-templates/ProductOverview/PricingPlanSlide.tsx
index 9bcc9f87..95b10c34 100644
--- a/electron/servers/nextjs/app/presentation-templates/ProductOverview/PricingPlanSlide.tsx
+++ b/electron/servers/nextjs/app/presentation-templates/ProductOverview/PricingPlanSlide.tsx
@@ -10,11 +10,11 @@ const PlanSchema = z.object({
   price: z.string().min(4).max(12).meta({
     description: "Plan price label shown at the top of each card.",
   }),
-  description: z.string().max(20).meta({
+  description: z.string().max(18).meta({
     description: "Short statement describing the plan.",
   }),
   features: z
-    .array(z.string().max(18))
+    .array(z.string().max(14))
 
     .max(4)
     .meta({
diff --git a/electron/servers/nextjs/app/presentation-templates/ProductOverview/ReportSnapshotSlide.tsx b/electron/servers/nextjs/app/presentation-templates/ProductOverview/ReportSnapshotSlide.tsx
index cc33eaf3..d158a8e6 100644
--- a/electron/servers/nextjs/app/presentation-templates/ProductOverview/ReportSnapshotSlide.tsx
+++ b/electron/servers/nextjs/app/presentation-templates/ProductOverview/ReportSnapshotSlide.tsx
@@ -365,7 +365,7 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
               {taglineLabel}
             </p>
             <p
-              className="mt-[12px] text-[24px] leading-[1.11] text-[#083F37]/75"
+              className="mt-[12px] text-[24px] mb-5 leading-[1.11] text-[#083F37]/75"
               style={{ color: "var(--background-text,#083F37BF)" }}
             >
               {taglineBody}
@@ -374,7 +374,7 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
         </div>
 
         <div
-          className={`absolute bottom-[50px] left-[266px] w-[580px] bg-[#F3F3F3] px-[28px] pb-[18px] pt-[20px] ${activeChartStyle === "mini-bars" ? "h-[308px]" : "h-[350px]"
+          className={`absolute bottom-[40px]  left-[266px] w-[580px] bg-[#F3F3F3] px-[28px] pb-[18px] pt-[20px] ${activeChartStyle === "mini-bars" ? "h-[308px]" : "h-[350px]"
             }`}
           style={{ backgroundColor: "var(--card-color,#F3F3F3)" }}
         >
@@ -660,10 +660,10 @@ const ReportSnapshotSlide = ({ data }: { data: Partial<SchemaType> }) => {
         </div>
 
         <div
-          className={`absolute right-[38px] w-[362px] ${activeChartStyle === "mini-bars" ? "top-[382px]" : "top-[320px]"
+          className={`absolute right-[38px] bottom-[40px] w-[362px] ${activeChartStyle === "mini-bars" ? "top-[382px]" : "top-[320px]"
             }`}
         >
-          <div className="flex flex-col gap-[24px]">
+          <div className="flex flex-col justify-end items-end gap-[24px]">
             {visibleMetricCards.map((metric, index) => (
               <div
                 key={`${metric.value}-${index}`}
diff --git a/electron/servers/nextjs/app/presentation-templates/ProductOverview/TableOfContentSlide.tsx b/electron/servers/nextjs/app/presentation-templates/ProductOverview/TableOfContentSlide.tsx
index c028d3ab..e1bbeb54 100644
--- a/electron/servers/nextjs/app/presentation-templates/ProductOverview/TableOfContentSlide.tsx
+++ b/electron/servers/nextjs/app/presentation-templates/ProductOverview/TableOfContentSlide.tsx
@@ -32,7 +32,7 @@ export const Schema = z.object({
   }),
   sections: z
     .array(SectionSchema)
-    .min(6)
+
     .max(6)
     .default([
       { title: "SECTION TITLE", number: "01", description: "Lorem ipsum dolor sit." },
@@ -64,7 +64,7 @@ const TableOfContentSlide = ({ data }: { data: Partial<SchemaType> }) => {
       >
         <div className="grid h-full grid-cols-[1fr_1fr]">
           <div className="px-[128px] pt-[69px]" style={{ backgroundColor: PRODUCT_DARK }}>
-            <div className="space-y-[52px]">
+            <div className="space-y-[40px]">
               {sections?.map((section, index) => (
                 <div key={index} className="flex items-center justify-between">
                   <div>
@@ -75,12 +75,12 @@ const TableOfContentSlide = ({ data }: { data: Partial<SchemaType> }) => {
                     >
                       {section.title}
                     </p>
-                    <p
+                    {section.description && <p
                       className="mt-[6px] text-[18px] leading-[1.2] text-[#ecf2f1]"
                       style={{ color: "var(--primary-text,#ecf2f1)" }}
                     >
                       {section.description}
-                    </p>
+                    </p>}
                   </div>
                   <p
                     className="text-[22px] font-medium text-[#ecf2f1]"