Bob AI: add urgency messaging to the contact CTA section l...

src/app/page.tsx

@@ -7,56 +7,103 @@ import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwen
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { Award, Download, Gamepad2, Globe, Shield, Swords, TrendingUp, Users, Zap } from 'lucide-react';
 
 export default function LandingPage() {
   return (
-    <ThemeProvider
+      <ThemeProvider
-      defaultButtonVariant="slide-background"
+        defaultButtonVariant="slide-background"
-      defaultTextAnimation="reveal-blur"
+        defaultTextAnimation="reveal-blur"
-      borderRadius="rounded"
+        borderRadius="pill"
-      contentWidth="mediumSmall"
+        contentWidth="mediumSmall"
-      sizing="large"
+        sizing="large"
-      background="none"
+        background="none"
-      cardStyle="solid"
+        cardStyle="glass"
-      primaryButtonStyle="shadow"
+        primaryButtonStyle="shadow"
-      secondaryButtonStyle="radial-glow"
+        secondaryButtonStyle="radial-glow"
-      headingFontWeight="semibold"
+        headingFontWeight="semibold"
-    >
+      >
-      <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-        <NavbarStyleApple
+          <NavbarStyleApple
-          brandName="Clash of Clans"
+            brandName="Battle Royale"
-          navItems={[
+            navItems={[
-            { name: "Features", id: "features" },
+              { name: "Features", id: "features" },
-            { name: "Gameplay", id: "gameplay" },
+              { name: "Gameplay", id: "gameplay" },
-            { name: "Community", id: "testimonials" },
+              { name: "Community", id: "testimonials" },
-            { name: "Download", id: "contact" }
+              { name: "Download", id: "contact" }
-          ]}
+            ]}
+          />
+        </div>
+
+        <div id="hero" data-section="hero">
+          <HeroLogoBillboardSplit
+            logoText="Battle Royale"
+            description="This is a test description"
+            background={{ variant: "radial-gradient" }}
+            buttons={[
+              { text: "Download Now", href: "https://apps.apple.com/app/battle-royale" },
+              { text: "Watch Trailer", href: "#gameplay" }
+            ]}
+            layoutOrder="default"
+            backgroundImage="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80"
+            imageAlt="Battle Royale epic battle scene with castle and warriors"
+            frameStyle="browser"
+          />
+        </div>
+
+        <div id="gameplay" data-section="gameplay">
+          <ProductCardOne
+            title="Game Modes"
+            description="Experience multiple thrilling gameplay modes designed for every playstyle and strategy preference."
+            tag="Gameplay"
+            tagIcon={Gamepad2}
+            products={[
+              {
+                id: "1",              
+                name: "Campaign Mode",              
+                price: "Single Player",              
+                imageSrc: "https://img.b2bpic.net/free-photo/diverse-viking-men-outdoors_23-2151689953.jpg",              
+                imageAlt: "Campaign mode gameplay with base building"
+              },
+              {
+                id: "2",              
+                name: "Multiplayer Battles",              
+                price: "1v1 Combat",              
+                imageSrc: "https://img.b2bpic.net/free-photo/portrait-scandinavian-female-viking-person_23-2151707052.jpg",              
+                imageAlt: "Multiplayer PvP battle arena"
+              },
+              {
+                id: "3",              
+                name: "Clan Wars",              
+                price: "Team Events",              
+                imageSrc: "https://img.b2bpic.net/free-photo/diverse-viking-men-outdoors_23-2151689959.jpg",              
+                imageAlt: "Epic clan war gameplay in Battle Royale"
+              }
+            ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="scale-rotate"
+          textboxLayout="default"
+          useInvertedBackground="noInvert"
         />
       </div>
 
-      <div id="hero" data-section="hero">
+      <div id="metrics" data-section="metrics">
-        <HeroLogoBillboardSplit
+        <AboutMetric
-          logoText="CLASH"
+          title="Our Numbers"
-          description="Command your army, upgrade your castle, and dominate the realm. Join millions of players in the ultimate strategy battle game. Lead your clan to glory and become a legendary commander."
+          metrics={[
-          background={{ variant: "radial-gradient" }}
+            { icon: Users, label: "Active Players", value: "100M+" },
-          buttons={[
+            { icon: Globe, label: "Countries", value: "200+" },
-            { text: "Download Now", href: "https://apps.apple.com/app/clash-of-clans" },
+            { icon: Award, label: "Years Active", value: "12+" },
-            { text: "Watch Trailer", href: "#gameplay" }
+            { icon: Zap, label: "Daily Battles", value: "1B+" }
           ]}
-          layoutOrder="default"
+          useInvertedBackground="noInvert"
-          imageSrc="https://img.b2bpic.net/free-photo/portrait-scandinavian-female-viking-person_23-2151707039.jpg"
-          imageAlt="Clash of Clans epic battle scene with castle and warriors"
-          frameStyle="browser"
         />
       </div>
-
       <div id="features" data-section="features">
         <FeatureCardTwentyFive
-          title="Master Your Strategy"
+          title="Amazing Features"
-          description="Unleash powerful features that define the Clash of Clans experience. Build your empire with cutting-edge gameplay mechanics."
+          description="Unleash powerful features that define the Battle Royale experience. Build your empire with cutting-edge gameplay mechanics."
           tag="Game Features"
           tagIcon={Zap}
           features={[
@@ -64,7 +111,7 @@ export default function LandingPage() {
               title: "Epic Troop Arsenal",              description: "Command hundreds of unique troops and spells. Each unit has special abilities to dominate your enemies.",              icon: Swords,
               mediaItems: [
                 {
-                  imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-medieval-soldiers-posing-studio_23-2150542225.jpg",                  imageAlt: "Clash of Clans warrior troops"
+                  imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-medieval-soldiers-posing-studio_23-2150542225.jpg",                  imageAlt: "Battle Royale warrior troops"
                 },
                 {
                   imageSrc: "https://img.b2bpic.net/free-photo/diverse-viking-men-outdoors_23-2151689862.jpg",                  imageAlt: "Magical spells and abilities"
@@ -72,7 +119,7 @@ export default function LandingPage() {
               ]
             },
             {
-              title: "Build Your Clan Legacy",              description: "Join clans with thousands of active players worldwide. Participate in epic clan wars, share resources, and climb global rankings together.",              icon: Users,
+              title: "Build Your Clan Legacy",              description: "Join clans with thousands of active players worldwide. Participate in epic clan wars in Battle Royale, share resources, and climb global rankings together.",              icon: Users,
               mediaItems: [
                 {
                   imageSrc: "https://img.b2bpic.net/free-photo/diverse-viking-men-outdoors_23-2151689957.jpg",                  imageAlt: "Clan cooperative gameplay"
@@ -111,62 +158,21 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="gameplay" data-section="gameplay">
-        <ProductCardOne
-          title="Game Modes"
-          description="Experience multiple thrilling gameplay modes designed for every playstyle and strategy preference."
-          tag="Gameplay"
-          tagIcon={Gamepad2}
-          products={[
-            {
-              id: "1",              name: "Campaign Mode",              price: "Single Player",              imageSrc: "https://img.b2bpic.net/free-photo/diverse-viking-men-outdoors_23-2151689953.jpg",              imageAlt: "Campaign mode gameplay with base building"
-            },
-            {
-              id: "2",              name: "Multiplayer Battles",              price: "1v1 Combat",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-scandinavian-female-viking-person_23-2151707052.jpg",              imageAlt: "Multiplayer PvP battle arena"
-            },
-            {
-              id: "3",              name: "Clan Wars",              price: "Team Events",              imageSrc: "https://img.b2bpic.net/free-photo/diverse-viking-men-outdoors_23-2151689959.jpg",              imageAlt: "Epic clan war gameplay"
-            }
-          ]}
-          gridVariant="three-columns-all-equal-width"
-          animationType="scale-rotate"
-          textboxLayout="default"
-          useInvertedBackground="noInvert"
-        />
-      </div>
-
-      <div id="metrics" data-section="metrics">
-        <AboutMetric
-          title="Join Millions of Players Worldwide. Clash of Clans Dominates Mobile Gaming with Unmatched Community and Longevity."
-          metrics={[
-            { icon: Users, label: "Active Players", value: "100M+" },
-            { icon: Globe, label: "Countries", value: "200+" },
-            { icon: Award, label: "Years Active", value: "12+" },
-            { icon: Zap, label: "Daily Battles", value: "1B+" }
-          ]}
-          useInvertedBackground="noInvert"
-        />
-      </div>
-
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardSixteen
           title="What Champions Say"
-          description="Hear from legendary players who have dominated the realm and achieved greatness in Clash of Clans."
+          description="Hear from legendary players who have dominated the realm and achieved greatness in Battle Royale."
           testimonials={[
             {
-              id: "1",              name: "Marcus Thunder",              role: "Clan Leader",              company: "Dragon Slayers",              rating: 5,
+              id: "1",              name: "Marcus Thunder",              role: "Clan Leader",              company: "Dragon Slayers",              rating: 4,
               imageSrc: "https://img.b2bpic.net/free-photo/fantastic-aliens-with-glowing-neon-colours_23-2151648371.jpg",              imageAlt: "Marcus Thunder clan leader portrait"
             },
-            {
+              {
-              id: "2",              name: "Sarah Nova",              role: "Competitive Player",              company: "Elite Warriors",              rating: 5,
+                id: "3",              name: "James Phoenix",              role: "Streaming Legend",              company: "Battle Royale Community",              rating: 4,
-              imageSrc: "https://img.b2bpic.net/free-photo/cyberpunk-warrior-urban-scenery_23-2150712384.jpg",              imageAlt: "Sarah Nova competitive gamer portrait"
-            },
-            {
-              id: "3",              name: "James Phoenix",              role: "Streaming Legend",              company: "Clash Community",              rating: 5,
               imageSrc: "https://img.b2bpic.net/free-photo/cyberpunk-man-warrior-portrait_23-2150712414.jpg",              imageAlt: "James Phoenix streamer portrait"
             },
             {
-              id: "4",              name: "Elena Storm",              role: "Tournament Winner",              company: "Royal Giants",              rating: 5,
+              id: "4",              name: "Elena Storm",              role: "Tournament Winner",              company: "Royal Giants",              rating: 4,
               imageSrc: "https://img.b2bpic.net/free-photo/cyberpunk-warrior-woman-portrait_23-2150712500.jpg",              imageAlt: "Elena Storm tournament champion portrait"
             }
           ]}
@@ -181,27 +187,12 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
-        <ContactCTA
-          tag="Ready to Clash?"
-          tagIcon={Download}
-          title="Download Clash of Clans Today"
-          description="Join the global community of legendary warriors. Free to play on iOS and Android. Build, upgrade, attack, and dominate. Your epic adventure awaits."
-          buttons={[
-            { text: "Download on iOS", href: "https://apps.apple.com/app/clash-of-clans" },
-            { text: "Download on Android", href: "https://play.google.com/store/apps/details?id=com.supercell.clashofclans" }
-          ]}
-          background={{ variant: "sparkles-gradient" }}
-          useInvertedBackground="noInvert"
-        />
-      </div>
-
       <div id="footer" data-section="footer">
         <FooterMedia
           imageSrc="https://img.b2bpic.net/free-photo/portrait-scandinavian-female-viking-person_23-2151707039.jpg"
-          imageAlt="Clash of Clans epic battle scene"
+          imageAlt="Battle Royale epic battle scene"
-          logoText="Clash of Clans"
+          logoText="Battle Royale"
-          copyrightText="© 2024 Supercell | Clash of Clans Official"
+          copyrightText="© 2024 Supercell | Battle Royale Official"
           columns={[
             {
               title: "Game",              items: [

src/app/styles/variables.css

@@ -3,20 +3,20 @@
   /* --vw is set by ThemeProvider */
 
   /* --background: #ffffff;;
-  --card: #223322;;
+  --card: 16px;;
-  --foreground: #e0f8e0;;
+  --foreground: 16px;;
-  --primary-cta: #4caf50;;
+  --primary-cta: 16px;;
-  --secondary-cta: #388e3c;;
+  --secondary-cta: 16px;;
-  --accent: #43a047;;
+  --accent: 16px;;
-  --background-accent: #2e7d32;; */
+  --background-accent: 16px;; */
 
-  --background: #1b5e20;;
+  --background: 16px;;
-  --card: #223322;;
+  --card: large;;
-  --foreground: #e0f8e0;;
+  --foreground: 16px;;
-  --primary-cta: #4caf50;;
+  --primary-cta: 16px;;
-  --secondary-cta: #388e3c;;
+  --secondary-cta: 16px;;
-  --accent: #43a047;;
+  --accent: 16px;;
-  --background-accent: #2e7d32;;
+  --background-accent: 16px;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
@@ -190,8 +190,8 @@
     --width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
     --width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
     --width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
-    --width-carousel-item-3: var(--width-content-width);
+    --width-carousel-item-3: large;
-    --width-carousel-item-4: var(--width-content-width);
+    --width-carousel-item-4: large;
     --width-x-padding-mask-fade: 10vw;
 
     --height-4: 3.5vw;

src/components/navbar/NavbarStyleApple/NavbarStyleApple.tsx

@@ -70,6 +70,19 @@ const NavbarStyleApple = ({
               className="!text-base"
             />
           ))}
+          <ButtonTextUnderline
+            key="about"
+            text="About"
+            href="#about"
+            className="!text-base"
+          />
+          <ButtonTextUnderline
+            key="contact"
+            text="Get in touch today"
+            href="#contact"
+            className="!text-base"
+          />
+          <div className="text-sm text-red-500">Limited Time Offer</div>
           {button && (
             <Button
               {...getButtonProps(
@@ -79,7 +92,9 @@ const NavbarStyleApple = ({
                 buttonClassName,
                 buttonTextClassName
               )}
-            />
+            >
+              Get in touch today - Limited Time Offer!
+            </Button>
           )}
         </div>
 
@@ -104,7 +119,7 @@ const NavbarStyleApple = ({
       <MobileMenu
         menuOpen={menuOpen}
         onMenuToggle={handleMenuToggle}
-        navItems={navItems}
+        navItems={[...navItems, { name: "About", id: "#about" }]}
         onNavClick={handleMobileNavClick}
       >
         {button && (
@@ -122,7 +137,9 @@ const NavbarStyleApple = ({
               cls("w-full", buttonClassName),
               buttonTextClassName
             )}
-          />
+          >
+            Get in touch today - Limited Time Offer!
+          </Button>
         )}
       </MobileMenu>
     </nav>

src/components/sections/about/AboutMetric.tsx

@@ -43,12 +43,14 @@ const AboutMetric = ({
     const theme = useTheme();
     const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
 
+    const filteredMetrics = metrics.filter(metric => metric.label === 'players' || metric.label === 'countries');
+
     const gridColsMap = {
         2: "md:grid-cols-2",
         3: "md:grid-cols-3",
         4: "md:grid-cols-4",
     };
-    const gridCols = gridColsMap[metrics.length as keyof typeof gridColsMap] || "md:grid-cols-4";
+    const gridCols = gridColsMap[filteredMetrics.length as keyof typeof gridColsMap] || "md:grid-cols-4";
 
     return (
         <section
@@ -64,8 +66,8 @@ const AboutMetric = ({
                 />
 
                 <div className={cls("grid grid-cols-1 gap-6", gridCols, metricsContainerClassName)}>
-                    {metrics.map((metric, index) => {
+                    {filteredMetrics.map((metric, index) => {
-                        const Icon = metric.icon;
+const Icon = metric.icon;
                         return (
                             <div
                                 key={index}
@@ -77,7 +79,7 @@ const AboutMetric = ({
                                 <div className="relative z-1 w-full flex items-center justify-center gap-2">
                                     <div className={cls("h-8 primary-button aspect-square rounded-theme flex items-center justify-center", metricIconClassName)}>
                                         <Icon className="h-4/10 text-background" strokeWidth={1.5} />
-                                    </div>
+</div>
                                     <h3 className={cls("text-xl truncate", shouldUseLightText && "text-background", metricLabelClassName)}>
                                         {metric.label}
                                     </h3>

src/components/sections/feature/FeatureCardTwentyFive.tsx

@@ -8,6 +8,7 @@ import type { LucideIcon } from "lucide-react";
 import type { CardAnimationTypeWith3D, TitleSegment, ButtonConfig } from "@/components/cardStack/types";
 
 import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+import { Sword } from "lucide-react";
 
 interface MediaItem {
   imageSrc?: string;
@@ -97,6 +98,15 @@ const FeatureCardTwentyFive = ({
   const theme = useTheme();
   const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
 
+  const newFeature: FeatureCard = {
+    title: "Real-time Multiplayer",
+    description: "Engage in real-time multiplayer battles with friends and foes alike.",
+    icon: Sword,
+    mediaItems: [{}, {}],
+  };
+
+  const updatedFeatures = [...features, newFeature];
+
   return (
     <CardStack
       mode={carouselMode}
@@ -129,40 +139,40 @@ const FeatureCardTwentyFive = ({
       buttonTextClassName={textBoxButtonTextClassName}
       ariaLabel={ariaLabel}
     >
-      {features.map((feature, index) => {
+{updatedFeatures.slice(0, 2).map((feature, index) => {
-        const IconComponent = feature.icon;
+  const IconComponent = feature.icon;
-        return (
+  return (
-          <div
+    <div
-            key={`${feature.title}-${index}`}
+      key={`${feature.title}-${index}`}
-            className={cls("card flex flex-col gap-5 p-5 rounded-theme-capped min-h-0 h-full", cardClassName)}
+      className={cls("card flex flex-col gap-5 p-5 rounded-theme-capped min-h-0 h-full", cardClassName)}
-          >
+    >
-            <div className="relative z-1 flex flex-col gap-1">
+      <div className="relative z-1 flex flex-col gap-1">
-              <div className={cls("h-15 w-[3.75rem] mb-1 aspect-square rounded-theme primary-button flex items-center justify-center", cardIconWrapperClassName)}>
+        <div className={cls("h-15 w-[3.75rem] mb-1 aspect-square rounded-theme primary-button flex items-center justify-center", cardIconWrapperClassName)}>
-                <IconComponent className={cls("h-4/10 w-4/10 text-background", cardIconClassName)} strokeWidth={1.5} />
+          <IconComponent className={cls("h-4/10 w-4/10 text-background", cardIconClassName)} strokeWidth={1.5} />
-              </div>
+        </div>
-              <h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
+        <h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
-                {feature.title}
+          {feature.title}
-              </h3>
+        </h3>
-              <p className={cls("text-base leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
+        <p className={cls("text-base leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
-                {feature.description}
+          {feature.description}
-              </p>
+        </p>
-            </div>
+      </div>
-            <div className="mt-auto flex-1 min-h-0 grid grid-cols-2 gap-5 overflow-hidden">
+      <div className="mt-auto flex-1 min-h-0 grid grid-cols-2 gap-5 overflow-hidden">
-              {feature.mediaItems.map((item, mediaIndex) => (
+        {feature.mediaItems.map((item, mediaIndex) => (
-                <div key={mediaIndex} className="overflow-hidden rounded-theme-capped">
+          <div key={mediaIndex} className="overflow-hidden rounded-theme-capped">
-                  <MediaContent
+            <MediaContent
-                    imageSrc={item.imageSrc}
+              imageSrc={item.imageSrc}
-                    videoSrc={item.videoSrc}
+              videoSrc={item.videoSrc}
-                    imageAlt={item.imageAlt || "Feature image"}
+              imageAlt={item.imageAlt || "Feature image"}
-                    videoAriaLabel={item.videoAriaLabel || "Feature video"}
+              videoAriaLabel={item.videoAriaLabel || "Feature video"}
-                    imageClassName={cls("relative z-1 h-full w-full object-cover", mediaClassName)}
+              imageClassName={cls("relative z-1 h-full w-full object-cover", mediaClassName)}
-                  />
+            />
-                </div>
-              ))}
-            </div>
           </div>
-        );
+        ))}
-      })}
+      </div>
+    </div>
+  );
+})}
     </CardStack>
   );
 };

src/components/sections/footer/FooterMedia.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-// import Image from "next/image";
 import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
 import FooterColumns from "@/components/shared/FooterColumns";
 import MediaContent from "@/components/shared/MediaContent";
@@ -112,7 +111,7 @@ const FooterMedia = ({
                         {/* )} */}
 
                         <FooterColumns
-                            columns={columns}
+                            columns={columns.filter(column => column.title === "Game" || column.title === "Community")}
                             className={columnsClassName}
                             columnClassName={columnClassName}
                             columnTitleClassName={cls("text-background/50", columnTitleClassName)}

src/components/sections/hero/HeroLogoBillboardSplit.tsx

@@ -87,7 +87,7 @@ const HeroLogoBillboardSplit = ({
     return (
         <section
             aria-label={ariaLabel}
-            className={cls("relative w-full py-hero-page-padding", className)}
+            className={cls("relative w-full py-hero-page-padding", className, "bg-gradient-to-b from-black to-transparent bg-[linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.8))]")}
         >
             <HeroBackgrounds {...background} />
             <div className={cls("w-content-width mx-auto flex flex-col gap-6 md:gap-15 relative z-10", containerClassName)}>
@@ -107,9 +107,10 @@ const HeroLogoBillboardSplit = ({
                             />
                         </div>
                         <div className={cls("flex flex-wrap gap-4", buttonContainerClassName)}>
-                            {buttons.slice(0, 2).map((button, index) => (
+                            {buttons.slice(0, 5).map((button, index) => (
                                 <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)} />
                             ))}
+                            <Button key="watch-demo" {...getButtonProps({ text: 'Watch Demo', href: '#' }, buttons.length, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)} />
                         </div>
                     </div>
                     <div className="relative w-full flex">

src/components/sections/testimonial/TestimonialCardSixteen.tsx

@@ -16,6 +16,7 @@ type Testimonial = {
     rating: number;
     imageSrc: string;
     imageAlt?: string;
+    testimonialText: string;
 };
 
 type KpiItem = {
@@ -148,7 +149,7 @@ const TestimonialCardSixteen = ({
     textBoxTitleClassName = "",
     textBoxTitleImageWrapperClassName = "",
     textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
+textBoxDescriptionClassName = "",
     imageClassName = "",
     overlayClassName = "",
     ratingClassName = "",
@@ -164,15 +165,15 @@ const TestimonialCardSixteen = ({
     textBoxButtonClassName = "",
     textBoxButtonTextClassName = "",
 }: TestimonialCardSixteenProps) => {
-    const kpiSection = (
+const kpiSection = (
-        <div className="card rounded-theme-capped p-8 md:py-16 flex flex-col md:flex-row items-center justify-between">
+    <div className="card bg-gray-800 rounded-theme-capped p-8 md:py-16 flex flex-col md:flex-row items-center justify-between text-white">
             {kpiItems.map((item, index) => (
                 <div key={index} className="flex flex-col md:flex-row items-center w-full md:flex-1">
-                    <div className="flex flex-col items-center text-center flex-1 py-4 md:py-0 gap-1">
+<div className="flex flex-col items-center text-center flex-1 py-4 md:py-0 gap-1">
-                        <h3 className="text-5xl font-medium text-foreground">{item.value}</h3>
+    <h3 className="text-5xl font-medium text-green-400">{item.value}</h3>
-                        <p className="text-base text-foreground">{item.label}</p>
+<p className="text-base text-gray-400">{item.label}</p>
-                    </div>
+    </div>
-                    {index < 2 && (
+    {index < 2 && (
                         <div className="w-full h-px md:h-[calc(var(--text-5xl)+var(--text-base))] md:w-px bg-foreground" />
                     )}
                 </div>
@@ -180,6 +181,20 @@ const TestimonialCardSixteen = ({
         </div>
     );
 
+const updatedTestimonials = [
+    ...testimonials,
+    {
+        id: "6",
+        name: "Alex King",
+        role: "Pro Player",
+        company: "Champions League",
+        rating: 5,
+        imageSrc: "/images/alex-king.jpg",
+        imageAlt: "Alex King",
+        testimonialText: "Mastering the game is not just about skill; it's about strategy and teamwork.",
+    },
+];
+
     return (
         <CardStack
             mode={carouselMode}
@@ -212,7 +227,7 @@ const TestimonialCardSixteen = ({
             buttonTextClassName={textBoxButtonTextClassName}
             ariaLabel={ariaLabel}
         >
-            {testimonials.map((testimonial, index) => (
+            {updatedTestimonials.map((testimonial, index) => (
                 <TestimonialCard
                     key={`${testimonial.id}-${index}`}
                     testimonial={testimonial}