From 2c87cf3334d4ef06ad33985896a205e057c6b092 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 17 Apr 2026 07:59:10 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 508 ++++++++++++++---------------------------------
 1 file changed, 154 insertions(+), 354 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e57dd02..9fb70b6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,371 +16,171 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="text-stagger"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="pill"
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Portfolio",
-          id: "portfolio",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Jozi Creative"
-      button={{
-        text: "Get a Quote",
-        href: "#contact",
-      }}
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "About", id: "about" },
+              { name: "Services", id: "services" },
+              { name: "Portfolio", id: "portfolio" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="Jozi Creative"
+            button={{ text: "Get a Quote", href: "#contact" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroSplitKpi
-      background={{
-        variant: "plain",
-      }}
-      title="Creative Solutions from Johannesburg"
-      description="Professional graphic design, web design, and HTML email development services to elevate your digital presence."
-      kpis={[
-        {
-          value: "100+",
-          label: "Projects Completed",
-        },
-        {
-          value: "50+",
-          label: "Happy Clients",
-        },
-        {
-          value: "5+",
-          label: "Years Experience",
-        },
-      ]}
-      enableKpiAnimation={true}
-      imageSrc="http://img.b2bpic.net/free-photo/neat-tidy-workspace-with-laptop_23-2148592306.jpg"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164865.jpg",
-          alt: "Still life of office desk mess",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/keyboard-near-tablet-cup-smartphone-plant-monitor-cooling-fan_23-2148036906.jpg",
-          alt: "Keyboard near tablet",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/office-desk-with-computer-digital-tablet-mobile-phone_1252-898.jpg",
-          alt: "Office desk setup",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/empty-interior-with-chess-board-game-chips-table-space-prepared-fun-get-together-with-friends-no-people-living-room-decorated-with-leisure-activity-games-enjoy-gathering_482257-43520.jpg",
-          alt: "Leisure activity",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/hand-holding-mobile-smartphone-touchscreen-technology-business-concept-3d-cartoon-illustration_56104-1709.jpg",
-          alt: "Technology illustration",
-        },
-      ]}
-      avatarText="Trusted by teams"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Graphic Design",
-        },
-        {
-          type: "text",
-          text: "Web Development",
-        },
-        {
-          type: "text",
-          text: "Email Marketing",
-        },
-        {
-          type: "text",
-          text: "Brand Identity",
-        },
-        {
-          type: "text",
-          text: "Digital Strategy",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroSplitKpi
+            background={{ variant: "plain" }}
+            title="Creative Solutions from Johannesburg"
+            description="Professional graphic design, web design, and HTML email development services to elevate your digital presence."
+            kpis={[
+              { value: "100+", label: "Projects Completed" },
+              { value: "50+", label: "Happy Clients" },
+              { value: "5+", label: "Years Experience" },
+            ]}
+            enableKpiAnimation={true}
+            imageSrc="http://img.b2bpic.net/free-photo/neat-tidy-workspace-with-laptop_23-2148592306.jpg"
+            mediaAnimation="slide-up"
+            avatars={[
+              { src: "http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164865.jpg", alt: "Still life of office desk mess" },
+              { src: "http://img.b2bpic.net/free-photo/keyboard-near-tablet-cup-smartphone-plant-monitor-cooling-fan_23-2148036906.jpg", alt: "Keyboard near tablet" },
+              { src: "http://img.b2bpic.net/free-photo/office-desk-with-computer-digital-tablet-mobile-phone_1252-898.jpg", alt: "Office desk setup" },
+              { src: "http://img.b2bpic.net/free-photo/empty-interior-with-chess-board-game-chips-table-space-prepared-fun-get-together-with-friends-no-people-living-room-decorated-with-leisure-activity-games-enjoy-gathering_482257-43520.jpg", alt: "Leisure activity" },
+              { src: "http://img.b2bpic.net/free-photo/hand-holding-mobile-smartphone-touchscreen-technology-business-concept-3d-cartoon-illustration_56104-1709.jpg", alt: "Technology illustration" }
+            ]}
+            avatarText="Trusted by teams"
+            marqueeItems={[
+              { type: "text", text: "Graphic Design" },
+              { type: "text", text: "Web Development" },
+              { type: "text", text: "Email Marketing" },
+              { type: "text", text: "Brand Identity" },
+              { type: "text", text: "Digital Strategy" }
+            ]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <InlineImageSplitTextAbout
-      useInvertedBackground={true}
-      heading={[
-        {
-          type: "text",
-          content: "Elevating brands through ",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/pencil-right-side_187299-45687.jpg",
-          alt: "Design icon",
-        },
-        {
-          type: "text",
-          content: " innovative digital craft.",
-        },
-      ]}
-    />
-  </div>
+        <div id="about" data-section="about">
+          <InlineImageSplitTextAbout
+            useInvertedBackground={true}
+            heading={[
+              { type: "text", content: "Elevating brands through " },
+              { type: "image", src: "http://img.b2bpic.net/free-photo/pencil-right-side_187299-45687.jpg", alt: "Design icon" },
+              { type: "text", content: " innovative digital craft." },
+            ]}
+          />
+        </div>
 
-  <div id="services" data-section="services">
-      <FeatureCardSeven
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Graphic Design",
-          description: "Compelling brand identities, print media, and visual assets.",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-assortment-supplies-one-color_23-2149669129.jpg",
-        },
-        {
-          title: "Web Design",
-          description: "User-centric, responsive websites that convert visitors into clients.",
-          imageSrc: "http://img.b2bpic.net/free-photo/keyboard-button-closeup-laptop-keyboard_169016-61245.jpg",
-        },
-        {
-          title: "HTML Email Development",
-          description: "Professional, cross-platform email templates that look great everywhere.",
-          imageSrc: "http://img.b2bpic.net/free-photo/email-messages-network-circuit-board-link-connection-technology_1379-885.jpg",
-        },
-      ]}
-      title="Our Expert Services"
-      description="We specialize in high-end design services tailored for local and international businesses."
-    />
-  </div>
+        <div id="services" data-section="services">
+          <FeatureCardSeven
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              { title: "Graphic Design", description: "Compelling brand identities, print media, and visual assets.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-assortment-supplies-one-color_23-2149669129.jpg" },
+              { title: "Web Design", description: "User-centric, responsive websites that convert visitors into clients.", imageSrc: "http://img.b2bpic.net/free-photo/keyboard-button-closeup-laptop-keyboard_169016-61245.jpg" },
+              { title: "HTML Email Development", description: "Professional, cross-platform email templates that look great everywhere.", imageSrc: "http://img.b2bpic.net/free-photo/email-messages-network-circuit-board-link-connection-technology_1379-885.jpg" }
+            ]}
+            title="Our Expert Services"
+            description="We specialize in high-end design services tailored for local and international businesses."
+          />
+        </div>
 
-  <div id="portfolio" data-section="portfolio">
-      <ProductCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "p1",
-          brand: "Brand",
-          name: "Corporate Identity",
-          price: "Featured",
-          rating: 5,
-          reviewCount: "12",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-view-office-items-business-cards_23-2148500499.jpg",
-        },
-        {
-          id: "p2",
-          brand: "Tech",
-          name: "Mobile Web App",
-          price: "Featured",
-          rating: 5,
-          reviewCount: "8",
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-person-engaging-with-ai-chatbot-computer-screen_482257-126263.jpg",
-        },
-        {
-          id: "p3",
-          brand: "Marketing",
-          name: "Email Campaign",
-          price: "Featured",
-          rating: 5,
-          reviewCount: "15",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=69zvyt",
-        },
-        {
-          id: "p4",
-          brand: "Brand",
-          name: "Modern Packaging",
-          price: "Featured",
-          rating: 5,
-          reviewCount: "5",
-          imageSrc: "http://img.b2bpic.net/free-photo/brain-booster-pills-container-still-life_23-2150760043.jpg",
-        },
-        {
-          id: "p5",
-          brand: "Web",
-          name: "E-commerce Portal",
-          price: "Featured",
-          rating: 5,
-          reviewCount: "20",
-          imageSrc: "http://img.b2bpic.net/free-photo/people-look-clothing-kiosk-service_482257-89749.jpg",
-        },
-        {
-          id: "p6",
-          brand: "Marketing",
-          name: "Promo Assets",
-          price: "Featured",
-          rating: 5,
-          reviewCount: "9",
-          imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-exclusive-sale_23-2152027055.jpg",
-        },
-      ]}
-      title="Featured Projects"
-      description="Explore our recent work and creative success stories."
-    />
-  </div>
+        <div id="portfolio" data-section="portfolio">
+          <ProductCardTwo
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="uniform-all-items-equal"
+            useInvertedBackground={true}
+            products={[
+              { id: "p1", brand: "Brand", name: "Corporate Identity", price: "Featured", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/high-view-office-items-business-cards_23-2148500499.jpg" },
+              { id: "p2", brand: "Tech", name: "Mobile Web App", price: "Featured", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/professional-person-engaging-with-ai-chatbot-computer-screen_482257-126263.jpg" },
+              { id: "p3", brand: "Marketing", name: "Email Campaign", price: "Featured", rating: 5, reviewCount: "15", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=69zvyt" },
+              { id: "p4", brand: "Brand", name: "Modern Packaging", price: "Featured", rating: 5, reviewCount: "5", imageSrc: "http://img.b2bpic.net/free-photo/brain-booster-pills-container-still-life_23-2150760043.jpg" },
+              { id: "p5", brand: "Web", name: "E-commerce Portal", price: "Featured", rating: 5, reviewCount: "20", imageSrc: "http://img.b2bpic.net/free-photo/people-look-clothing-kiosk-service_482257-89749.jpg" },
+              { id: "p6", brand: "Marketing", name: "Promo Assets", price: "Featured", rating: 5, reviewCount: "9", imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-exclusive-sale_23-2152027055.jpg" }
+            ]}
+            title="Featured Projects"
+            description="Explore our recent work and creative success stories."
+          />
+        </div>
 
-  <div id="social-proof" data-section="social-proof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Alpha Tech",
-        "Jozi Retail",
-        "Cape Digital",
-        "Summit Finance",
-        "Vista Agency",
-        "Green Solutions",
-        "Blue Horizon",
-      ]}
-      title="Trusted by Growing Businesses"
-      description="Collaborating with brands across South Africa to bring visions to life."
-    />
-  </div>
+        <div id="social-proof" data-section="social-proof">
+          <SocialProofOne
+            textboxLayout="default"
+            useInvertedBackground={false}
+            names={["Alpha Tech", "Jozi Retail", "Cape Digital", "Summit Finance", "Vista Agency", "Green Solutions", "Blue Horizon"]}
+            title="Trusted by Growing Businesses"
+            description="Collaborating with brands across South Africa to bring visions to life."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardThirteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "1",
-          name: "Sarah J.",
-          handle: "@sarah",
-          testimonial: "Exceptional design quality, highly recommend!",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",
-        },
-        {
-          id: "2",
-          name: "Mark D.",
-          handle: "@mark",
-          testimonial: "Transformed our brand identity completely.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-business-woman-looking-up-copy-space_1262-3088.jpg",
-        },
-        {
-          id: "3",
-          name: "Emma R.",
-          handle: "@emma",
-          testimonial: "Professional and creative communication throughout.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586558.jpg",
-        },
-        {
-          id: "4",
-          name: "David K.",
-          handle: "@david",
-          testimonial: "Top tier email development services.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586556.jpg",
-        },
-        {
-          id: "5",
-          name: "Chloe L.",
-          handle: "@chloe",
-          testimonial: "Fast turnaround and high precision design work.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/joyful-man-white-tshirt-jacket-smiling-brown-background_197531-26657.jpg",
-        },
-      ]}
-      showRating={true}
-      title="Client Feedback"
-      description="See what our clients say about our design work."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardThirteen
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            testimonials={[
+              { id: "1", name: "Sarah J.", handle: "@sarah", testimonial: "Exceptional design quality, highly recommend!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg" },
+              { id: "2", name: "Mark D.", handle: "@mark", testimonial: "Transformed our brand identity completely.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-business-woman-looking-up-copy-space_1262-3088.jpg" },
+              { id: "3", name: "Emma R.", handle: "@emma", testimonial: "Professional and creative communication throughout.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586558.jpg" },
+              { id: "4", name: "David K.", handle: "@david", testimonial: "Top tier email development services.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586556.jpg" },
+              { id: "5", name: "Chloe L.", handle: "@chloe", testimonial: "Fast turnaround and high precision design work.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/joyful-man-white-tshirt-jacket-smiling-brown-background_197531-26657.jpg" }
+            ]}
+            showRating={true}
+            title="Client Feedback"
+            description="See what our clients say about our design work."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "How do we start?",
-          content: "Fill out our contact form and we will reach out.",
-        },
-        {
-          id: "f2",
-          title: "Do you offer maintenance?",
-          content: "Yes, we provide ongoing web maintenance packages.",
-        },
-        {
-          id: "f3",
-          title: "What is the turnaround?",
-          content: "Usually 2-4 weeks depending on the project complexity.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/diverse-customer-center-workers-assisting-clients-with-installing-software_482257-126181.jpg"
-      title="Common Questions"
-      description="Answers to everything you need to know about our services."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            textboxLayout="split"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "f1", title: "How do we start?", content: "Fill out our contact form and we will reach out." },
+              { id: "f2", title: "Do you offer maintenance?", content: "Yes, we provide ongoing web maintenance packages." },
+              { id: "f3", title: "What is the turnaround?", content: "Usually 2-4 weeks depending on the project complexity." }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/diverse-customer-center-workers-assisting-clients-with-installing-software_482257-126181.jpg"
+            title="Common Questions"
+            description="Answers to everything you need to know about our services."
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
-      tag="Contact Us"
-      title="Start Your Next Project"
-      description="Ready to work together? Send us a message today."
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            useInvertedBackground={true}
+            background={{ variant: "plain" }}
+            tag="Contact Us"
+            title="Start Your Next Project"
+            description="Ready to work together? Send us a message today."
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseReveal
-      logoText="Jozi Creative"
-      columns={[
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Graphic Design",
-              href: "#services",
-            },
-            {
-              label: "Web Development",
-              href: "#services",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Jozi Creative"
+            columns={[
+              { title: "Services", items: [{ label: "Graphic Design", href: "#services" }, { label: "Web Development", href: "#services" }] },
+              { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1