From a0b686f56bf98b9380da565ad24ed11c7a4a4bad Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 15 Apr 2026 12:25:26 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 131 +++++++++++++++++++++++++++--------------------
 1 file changed, 75 insertions(+), 56 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index a97b505..013a4fe 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,14 +5,12 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
 import HeroOverlay from "@/components/sections/hero/HeroOverlay";
 import FeatureBento from "@/components/sections/feature/FeatureBento";
-import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
-import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
-import TeamCardFive from "@/components/sections/team/TeamCardFive";
-import FaqBase from "@/components/sections/faq/FaqBase";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
-import { Sparkles, Search, ArrowUpRight, Monitor, Shield, Zap, Puzzle, TrendingUp, Award, Users, Target, Palette, Code } from "lucide-react";
+import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
+import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
+import { Sparkles, ArrowUpRight, Target, Palette, Code, Users, Award, Shield } from "lucide-react";
 
 export default function VisionStudioPage() {
   return (
@@ -24,22 +22,24 @@ export default function VisionStudioPage() {
       sizing="medium"
       background="none"
       cardStyle="glass-elevated"
-      primaryButtonStyle="metallic"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="medium"
     >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Vision Studio"
-          navItems={[
-            { name: "Work", id: "work" },
-            { name: "Services", id: "services" },
-            { name: "About", id: "about" },
-            { name: "Contact", id: "contact" },
-          ]}
-          button={{ text: "Get Started", href: "#contact" }}
-        />
-        <div id="hero">
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Vision Studio"
+            navItems={[
+              { name: "Work", id: "work" },
+              { name: "Services", id: "services" },
+              { name: "About", id: "about" },
+              { name: "Contact", id: "contact" },
+            ]}
+            button={{ text: "Get Started", href: "#contact" }}
+          />
+        </div>
+        <div id="hero" data-section="hero">
           <HeroOverlay
             title="Designing the Future of Your Brand"
             description="Vision Studio crafts immersive digital experiences that blend creativity with strategic precision. We don't just build websites; we build identities."
@@ -49,67 +49,86 @@ export default function VisionStudioPage() {
             buttons={[{ text: "Start Project", href: "#contact" }]}
           />
         </div>
-        <div id="services">
+        <div id="services" data-section="services">
           <FeatureBento
             title="Our Core Services"
             description="Strategic solutions designed to elevate your brand presence in the modern market."
             features={[
               {
-                title: "Meta Ads",                description: "Data-driven ad campaigns designed to reach your target audience and scale revenue.",                bentoComponent: "reveal-icon",                centerIcon: Target,
+                title: "Meta Ads",                description: "Data-driven ad campaigns designed to reach your target audience and scale revenue.",                bentoComponent: "reveal-icon",                icon: Target,
               },
               {
-                title: "Graphic Design",                description: "Striking visual narratives that communicate your vision with clarity and style.",                bentoComponent: "reveal-icon",                centerIcon: Palette,
+                title: "Graphic Design",                description: "Striking visual narratives that communicate your vision with clarity and style.",                bentoComponent: "reveal-icon",                icon: Palette,
               },
               {
-                title: "Web Design",                description: "Exceptional, high-performance web experiences tailored for conversion and engagement.",                bentoComponent: "reveal-icon",                centerIcon: Code,
+                title: "Web Design",                description: "Exceptional, high-performance web experiences tailored for conversion and engagement.",                bentoComponent: "reveal-icon",                icon: Code,
               },
             ]}
           />
         </div>
-        <div id="work">
-          <FeatureCardTwentySix
+        <div id="work" data-section="work">
+          <FeatureCardMedia
             title="Selected Work"
             description="A portfolio of modern designs that push boundaries."
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
             features={[
-              { title: "Brand Campaign", description: "High-conversion ad design", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp", buttonIcon: ArrowUpRight },
-              { title: "E-commerce Platform", description: "Custom shopify development", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp", buttonIcon: ArrowUpRight },
+              { id: "1", title: "Brand Campaign", description: "High-conversion ad design", tag: "Design", buttons: [{ text: "View", href: "#" }] },
+              { id: "2", title: "E-commerce Platform", description: "Custom shopify development", tag: "Web", buttons: [{ text: "View", href: "#" }] },
             ]}
           />
         </div>
-        <div id="about">
+        <div id="about" data-section="about">
            <FeatureBento
             title="Our Promise"
             description="We promise to leverage our expertise in Meta ads, Graphic Design, and Web Design to deliver a measurable growth trajectory for your studio."
             features={[]}
            />
         </div>
-        <TestimonialCardFifteen
-          testimonial="Vision Studio revolutionized how we approach our visual identity. Highly recommended."
-          rating={5}
-          author="— Elena V., Marketing Lead"
-          useInvertedBackground={false}
-        />
-        <MetricCardOne
-          title="Trusted Growth"
-          metrics={[
-            { id: "1", value: "50+", title: "Successful Launches", description: "Across all sectors" },
-            { id: "2", value: "98%", title: "Retention", description: "Client satisfaction rate" },
-            { id: "3", value: "10X", title: "Growth", description: "Average ROI on ad spend" },
-          ]}
-        />
-        <ContactCTA
-          tag="Contact Us"
-          title="Let's Bring Your Vision to Life"
-          description="Connect with Vision Studio today for a consultation on your next project."
-          buttons={[{ text: "Get in touch", href: "#contact" }]}
-        />
-        <FooterBase
-          logoText="Vision Studio"
-          columns={[
-            { title: "Agency", items: [{ label: "About", href: "#" }] },
-            { title: "Services", items: [{ label: "Meta Ads", href: "#" }, { label: "Graphic Design", href: "#" }, { label: "Web Design", href: "#" }] },
-          ]}
-        />
+        <div id="testimonial" data-section="testimonial">
+          <TestimonialCardOne
+            title="Client Stories"
+            description="What our partners say about us."
+            animationType="slide-up"
+            gridVariant="uniform-all-items-equal"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "1", name: "Elena V.", role: "Marketing Lead", company: "TechCorp", rating: 5 }
+            ]}
+          />
+        </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardFourteen
+            title="Trusted Growth"
+            tag="Impact"
+            metricsAnimation="slide-up"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "1", value: "50+", description: "Successful Launches" },
+              { id: "2", value: "98%", description: "Client satisfaction rate" },
+              { id: "3", value: "10X", description: "Average ROI on ad spend" },
+            ]}
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            title="Let's Bring Your Vision to Life"
+            description="Connect with Vision Studio today for a consultation on your next project."
+            inputs={[{ name: "name", type: "text", placeholder: "Name" }, { name: "email", type: "email", placeholder: "Email" }]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoText="Vision Studio"
+            columns={[
+              { items: [{ label: "About", href: "#" }] },
+              { items: [{ label: "Meta Ads", href: "#" }, { label: "Graphic Design", href: "#" }, { label: "Web Design", href: "#" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1