From e23053774278d84573b8f33d14ff72bca51c9e89 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 22 May 2026 20:42:43 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 471 +++++++++++++----------------------------------
 1 file changed, 130 insertions(+), 341 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b9cec04..36b5a37 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -28,356 +28,145 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Work",
-          id: "about",
-        },
-        {
-          name: "Approach",
-          id: "features",
-        },
-        {
-          name: "Studio",
-          id: "team",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="STUDIO"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Work", id: "about" },
+              { name: "Approach", id: "features" },
+              { name: "Studio", id: "team" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="STUDIO"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroOverlayTestimonial
-      title="Where vision becomes motion"
-      description="Explore bold design through immersive scroll experiences."
-      testimonials={[
-        {
-          name: "Alex Rivet",
-          handle: "@studio",
-          testimonial: "Truly immersive design experience.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/black-liquid-with-blue-foam_23-2147934189.jpg?_wi=1",
-          imageAlt: "abstract minimalist black background",
-        },
-        {
-          name: "Jamie Lee",
-          handle: "@design",
-          testimonial: "Motion design redefined in this portfolio.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-psd/lifestyle-inspiration-landing-page-template-with-photo_23-2149064868.jpg",
-          imageAlt: "abstract minimalist black background",
-        },
-        {
-          name: "Sam Thorne",
-          handle: "@creative",
-          testimonial: "Sophisticated, minimalist, and powerful.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-purple-blue-sphere_23-2148235866.jpg?_wi=1",
-          imageAlt: "abstract minimalist black background",
-        },
-        {
-          name: "Blake Ross",
-          handle: "@media",
-          testimonial: "The best scroll reveal work I've seen.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/black-tagliatelle-pasta-close-up_23-2148469884.jpg?_wi=1",
-          imageAlt: "abstract minimalist black background",
-        },
-        {
-          name: "Casey Kent",
-          handle: "@art",
-          testimonial: "Visual storytelling at its peak.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-particle-design_1048-12790.jpg?_wi=1",
-          imageAlt: "abstract minimalist black background",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Scroll to discover",
-          href: "#about",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/black-liquid-with-blue-foam_23-2147934189.jpg?_wi=2"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/spooky-skull-plastic-material-illuminated-by-purple-light_23-2147905885.jpg",
-          alt: "Portrait 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-fantasy-sea-creature_23-2151626061.jpg",
-          alt: "Portrait 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/concept-portrait-overstimulated-person_23-2151235302.jpg",
-          alt: "Portrait 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-person-with-visual-metaphor-memory_23-2151240886.jpg",
-          alt: "Portrait 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-sceptical-creative-man-green-blazer-dark-background_613910-3829.jpg",
-          alt: "Portrait 5",
-        },
-      ]}
-      avatarText="Trusted by visionary creators"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroOverlayTestimonial
+            title="Where vision becomes motion"
+            description="Explore bold design through immersive scroll experiences."
+            testimonials={[
+              { name: "Alex Rivet", handle: "@studio", testimonial: "Truly immersive design experience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/black-liquid-with-blue-foam_23-2147934189.jpg", imageAlt: "abstract minimalist black background" },
+              { name: "Jamie Lee", handle: "@design", testimonial: "Motion design redefined in this portfolio.", rating: 5, imageSrc: "http://img.b2bpic.net/free-psd/lifestyle-inspiration-landing-page-template-with-photo_23-2149064868.jpg", imageAlt: "abstract minimalist black background" },
+              { name: "Sam Thorne", handle: "@creative", testimonial: "Sophisticated, minimalist, and powerful.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-purple-blue-sphere_23-2148235866.jpg", imageAlt: "abstract minimalist black background" },
+              { name: "Blake Ross", handle: "@media", testimonial: "The best scroll reveal work I've seen.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/black-tagliatelle-pasta-close-up_23-2148469884.jpg", imageAlt: "abstract minimalist black background" },
+              { name: "Casey Kent", handle: "@art", testimonial: "Visual storytelling at its peak.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-particle-design_1048-12790.jpg", imageAlt: "abstract minimalist black background" }
+            ]}
+            buttons={[{ text: "Scroll to discover", href: "#about" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/black-liquid-with-blue-foam_23-2147934189.jpg"
+            avatars={[
+              { src: "http://img.b2bpic.net/free-photo/spooky-skull-plastic-material-illuminated-by-purple-light_23-2147905885.jpg", alt: "Portrait 1" },
+              { src: "http://img.b2bpic.net/free-photo/portrait-fantasy-sea-creature_23-2151626061.jpg", alt: "Portrait 2" },
+              { src: "http://img.b2bpic.net/free-photo/concept-portrait-overstimulated-person_23-2151235302.jpg", alt: "Portrait 3" },
+              { src: "http://img.b2bpic.net/free-photo/portrait-person-with-visual-metaphor-memory_23-2151240886.jpg", alt: "Portrait 4" },
+              { src: "http://img.b2bpic.net/free-photo/portrait-sceptical-creative-man-green-blazer-dark-background_613910-3829.jpg", alt: "Portrait 5" }
+            ]}
+            avatarText="Trusted by visionary creators"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TextAbout
-      useInvertedBackground={false}
-      title="Crafting digital experiences where form meets function in every frame."
-    />
-  </div>
+        <div id="about" data-section="about">
+          <TextAbout useInvertedBackground={false} title="Crafting digital experiences where form meets function in every frame." />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwentyNine
-      textboxLayout="default"
-      gridVariant="bento-grid"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Motion Design",
-          description: "Dynamic movement that brings static ideas to life.",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-purple-blue-sphere_23-2148235866.jpg?_wi=2",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/ribbed-glass-background-with-abstract-waves-glossy-gradient-textures-black-white_474888-8026.jpg",
-          buttonText: "View",
-        },
-        {
-          title: "Interactive Art",
-          description: "Engaging experiences that respond to user intent.",
-          imageSrc: "http://img.b2bpic.net/free-photo/black-tagliatelle-pasta-close-up_23-2148469884.jpg?_wi=2",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-abstract-background_1048-16927.jpg",
-          buttonText: "View",
-        },
-        {
-          title: "Visual Storytelling",
-          description: "Narratives told through high-impact imagery.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-particle-design_1048-12790.jpg?_wi=2",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/abstract-life-unreal-dunes_23-2148231669.jpg",
-          buttonText: "View",
-        },
-      ]}
-      title="Our Core Disciplines"
-      description="We specialize in motion, interaction, and visual storytelling."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardTwentyNine
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="bento-grid"
+            useInvertedBackground={false}
+            title="Our Core Disciplines"
+            description="We specialize in motion, interaction, and visual storytelling."
+            features={[
+              { title: "Motion Design", description: "Dynamic movement that brings static ideas to life.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-purple-blue-sphere_23-2148235866.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/ribbed-glass-background-with-abstract-waves-glossy-gradient-textures-black-white_474888-8026.jpg", buttonText: "View" },
+              { title: "Interactive Art", description: "Engaging experiences that respond to user intent.", imageSrc: "http://img.b2bpic.net/free-photo/black-tagliatelle-pasta-close-up_23-2148469884.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-abstract-background_1048-16927.jpg", buttonText: "View" },
+              { title: "Visual Storytelling", description: "Narratives told through high-impact imagery.", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-particle-design_1048-12790.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/abstract-life-unreal-dunes_23-2148231669.jpg", buttonText: "View" }
+            ]}
+          />
+        </div>
 
-  <div id="product" data-section="product">
-      <ProductCardFour
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="bento-grid"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "1",
-          name: "Ethereal Flow",
-          price: "Concept",
-          variant: "Interactive",
-          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg",
-        },
-        {
-          id: "2",
-          name: "Dark Symmetry",
-          price: "Design",
-          variant: "Identity",
-          imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-text-with-gift-it_23-2148285098.jpg",
-        },
-        {
-          id: "3",
-          name: "Motion Waves",
-          price: "Animation",
-          variant: "Motion",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-looks-through-botany-images_8353-11360.jpg",
-        },
-        {
-          id: "4",
-          name: "Geometric Shift",
-          price: "Concept",
-          variant: "UI Design",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-dynamic-textured-wave-background_1048-10490.jpg",
-        },
-        {
-          id: "5",
-          name: "Depth Reveal",
-          price: "Design",
-          variant: "Branding",
-          imageSrc: "http://img.b2bpic.net/free-photo/group-rimmel-dark-blackboard_23-2148210801.jpg",
-        },
-        {
-          id: "6",
-          name: "Minimal Form",
-          price: "Concept",
-          variant: "Art",
-          imageSrc: "http://img.b2bpic.net/free-photo/illustration-several-golden-brown-lights-motion-flowing-into-one-direction_181624-24937.jpg",
-        },
-      ]}
-      title="Selected Works"
-      description="A curated collection of our recent design explorations."
-    />
-  </div>
+        <div id="product" data-section="product">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="bento-grid"
+            useInvertedBackground={false}
+            title="Selected Works"
+            description="A curated collection of our recent design explorations."
+            products={[
+              { id: "1", name: "Ethereal Flow", price: "Concept", variant: "Interactive", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg" },
+              { id: "2", name: "Dark Symmetry", price: "Design", variant: "Identity", imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-text-with-gift-it_23-2148285098.jpg" },
+              { id: "3", name: "Motion Waves", price: "Animation", variant: "Motion", imageSrc: "http://img.b2bpic.net/free-photo/woman-looks-through-botany-images_8353-11360.jpg" },
+              { id: "4", name: "Geometric Shift", price: "Concept", variant: "UI Design", imageSrc: "http://img.b2bpic.net/free-photo/abstract-dynamic-textured-wave-background_1048-10490.jpg" },
+              { id: "5", name: "Depth Reveal", price: "Design", variant: "Branding", imageSrc: "http://img.b2bpic.net/free-photo/group-rimmel-dark-blackboard_23-2148210801.jpg" },
+              { id: "6", name: "Minimal Form", price: "Concept", variant: "Art", imageSrc: "http://img.b2bpic.net/free-photo/illustration-several-golden-brown-lights-motion-flowing-into-one-direction_181624-24937.jpg" }
+            ]}
+          />
+        </div>
 
-  <div id="team" data-section="team">
-      <TeamCardOne
-      animationType="depth-3d"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      members={[
-        {
-          id: "t1",
-          name: "Sarah Chen",
-          role: "Creative Director",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705921.jpg",
-        },
-        {
-          id: "t2",
-          name: "Mark Evans",
-          role: "Lead Animator",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-studio_23-2149411430.jpg",
-        },
-        {
-          id: "t3",
-          name: "Luna Park",
-          role: "Visual Designer",
-          imageSrc: "http://img.b2bpic.net/free-photo/bearded-black-man-wearing-suit-felt-hat_613910-16012.jpg",
-        },
-      ]}
-      title="The Creative Minds"
-      description="Meet the team driving our motion design vision."
-    />
-  </div>
+        <div id="team" data-section="team">
+          <TeamCardOne
+            animationType="depth-3d"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            title="The Creative Minds"
+            description="Meet the team driving our motion design vision."
+            members={[
+              { id: "t1", name: "Sarah Chen", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705921.jpg" },
+              { id: "t2", name: "Mark Evans", role: "Lead Animator", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-studio_23-2149411430.jpg" },
+              { id: "t3", name: "Luna Park", role: "Visual Designer", imageSrc: "http://img.b2bpic.net/free-photo/bearded-black-man-wearing-suit-felt-hat_613910-16012.jpg" }
+            ]}
+          />
+        </div>
 
-  <div id="testimonial" data-section="testimonial">
-      <TestimonialCardTwo
-      animationType="scale-rotate"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Sophia G",
-          role: "CEO",
-          testimonial: "Exceptional motion graphics and design.",
-          imageSrc: "http://img.b2bpic.net/free-photo/decor-dirty-cracked-distressed-grain_1194-9488.jpg",
-        },
-        {
-          id: "2",
-          name: "Liam H",
-          role: "CTO",
-          testimonial: "The animations feel like magic.",
-          imageSrc: "http://img.b2bpic.net/free-photo/vertical-grey-scale-shot-patterns-black-painted-wall_181624-7227.jpg",
-        },
-        {
-          id: "3",
-          name: "Elena R",
-          role: "Founder",
-          testimonial: "Precise, sophisticated, and professional.",
-          imageSrc: "http://img.b2bpic.net/free-photo/photo-ground-texture-pattern_58702-15820.jpg",
-        },
-        {
-          id: "4",
-          name: "Noah J",
-          role: "Director",
-          testimonial: "They truly understand motion storytelling.",
-          imageSrc: "http://img.b2bpic.net/free-photo/edge-retro-grunge-chalk-dirty_1194-9593.jpg",
-        },
-        {
-          id: "5",
-          name: "Ava M",
-          role: "Manager",
-          testimonial: "Delivered high-impact work on time.",
-          imageSrc: "http://img.b2bpic.net/free-photo/dark-abstract-background-with-geometric-curves-texture_84443-83760.jpg",
-        },
-      ]}
-      title="Voices of Visionaries"
-      description="What partners and clients say about our creative approach."
-    />
-  </div>
+        <div id="testimonial" data-section="testimonial">
+          <TestimonialCardTwo
+            animationType="scale-rotate"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Voices of Visionaries"
+            description="What partners and clients say about our creative approach."
+            testimonials={[
+              { id: "1", name: "Sophia G", role: "CEO", testimonial: "Exceptional motion graphics and design.", imageSrc: "http://img.b2bpic.net/free-photo/decor-dirty-cracked-distressed-grain_1194-9488.jpg" },
+              { id: "2", name: "Liam H", role: "CTO", testimonial: "The animations feel like magic.", imageSrc: "http://img.b2bpic.net/free-photo/vertical-grey-scale-shot-patterns-black-painted-wall_181624-7227.jpg" },
+              { id: "3", name: "Elena R", role: "Founder", testimonial: "Precise, sophisticated, and professional.", imageSrc: "http://img.b2bpic.net/free-photo/photo-ground-texture-pattern_58702-15820.jpg" },
+              { id: "4", name: "Noah J", role: "Director", testimonial: "They truly understand motion storytelling.", imageSrc: "http://img.b2bpic.net/free-photo/edge-retro-grunge-chalk-dirty_1194-9593.jpg" },
+              { id: "5", name: "Ava M", role: "Manager", testimonial: "Delivered high-impact work on time.", imageSrc: "http://img.b2bpic.net/free-photo/dark-abstract-background-with-geometric-curves-texture_84443-83760.jpg" }
+            ]}
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "How long is the design process?",
-          content: "Processes vary but usually span 4-8 weeks.",
-        },
-        {
-          id: "f2",
-          title: "Do you offer branding?",
-          content: "Yes, we specialize in cohesive brand identity.",
-        },
-        {
-          id: "f3",
-          title: "Can we work remotely?",
-          content: "Absolutely, we collaborate globally.",
-        },
-      ]}
-      sideTitle="Questions & Insight"
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitText
+            faqsAnimation="slide-up"
+            useInvertedBackground={false}
+            sideTitle="Questions & Insight"
+            faqs={[
+              { id: "f1", title: "How long is the design process?", content: "Processes vary but usually span 4-8 weeks." },
+              { id: "f2", title: "Do you offer branding?", content: "Yes, we specialize in cohesive brand identity." },
+              { id: "f3", title: "Can we work remotely?", content: "Absolutely, we collaborate globally." }
+            ]}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "canvas-reveal",
-      }}
-      text="Ready to move your vision forward?"
-      buttons={[
-        {
-          text: "Start Project",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactText
+            useInvertedBackground={false}
+            background={{ variant: "canvas-reveal" }}
+            text="Ready to move your vision forward?"
+            buttons={[{ text: "Start Project", href: "#" }]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseReveal
-      logoText="STUDIO"
-      columns={[
-        {
-          title: "Explore",
-          items: [
-            {
-              label: "Work",
-              href: "#product",
-            },
-            {
-              label: "Approach",
-              href: "#features",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy",
-              href: "#",
-            },
-            {
-              label: "Terms",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="STUDIO"
+            columns={[
+              { title: "Explore", items: [{ label: "Work", href: "#product" }, { label: "Approach", href: "#features" }] },
+              { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1