From f2557c0bf20673260c2e19f7cbfb20f6d9fd3d60 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 28 Apr 2026 12:19:10 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 399 +++++++++++++++--------------------------------
 1 file changed, 124 insertions(+), 275 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 516dbaf..fb8b9b2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,290 +29,139 @@ export default function LandingPage() {
         headingFontWeight="medium"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Motion and Frame"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "About", id: "about" },
+              { name: "Features", id: "features" },
+              { name: "Testimonials", id: "testimonials" },
+              { name: "Contact", id: "contact" }
+            ]}
+            brandName="Motion and Frame"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogoBillboard
-      background={{
-        variant: "gradient-bars",
-      }}
-      logoText="Motion and Frame"
-      description="Where story meets precision. We craft cinematic motion for brands that demand perfection."
-      buttons={[
-        {
-          text: "Start Project",
-          href: "#contact",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/modern-luxury-authentic-dining-room-interior-design-with-picture-frame_53876-128701.jpg"
-      imageAlt="cinematic creative studio space warm light"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroLogoBillboard
+            background={{ variant: "gradient-bars" }}
+            logoText="Motion and Frame"
+            description="Where story meets precision. We craft cinematic motion for brands that demand perfection."
+            buttons={[{ text: "Start Project", href: "#contact" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/modern-luxury-authentic-dining-room-interior-design-with-picture-frame_53876-128701.jpg"
+            imageAlt="cinematic creative studio space warm light"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <InlineImageSplitTextAbout
-      useInvertedBackground={false}
-      heading={[
-        {
-          type: "text",
-          content: "Visual Storytellers",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/table-with-content-creator-stuff-camera-microphone-tripod-headphones-working-from-home_1268-17410.jpg",
-          alt: "film production studio professional gear",
-        },
-        {
-          type: "text",
-          content: " at the Edge of Craft.",
-        },
-      ]}
-    />
-  </div>
+        <div id="about" data-section="about">
+          <InlineImageSplitTextAbout
+            useInvertedBackground={false}
+            heading={[
+              { type: "text", content: "Visual Storytellers" },
+              { type: "image", src: "http://img.b2bpic.net/free-photo/table-with-content-creator-stuff-camera-microphone-tripod-headphones-working-from-home_1268-17410.jpg", alt: "film production studio professional gear" },
+              { type: "text", content: " at the Edge of Craft." }
+            ]}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardEight
-      textboxLayout="inline-image"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Fluid Motion",
-          description: "Seamless camera movement and dynamic editing transitions.",
-          imageSrc: "http://img.b2bpic.net/free-photo/lights-prisms-effect-close-up_23-2148917876.jpg",
-          imageAlt: "smooth motion blur abstract photography",
-        },
-        {
-          title: "Precision Framing",
-          description: "Every shot composed with mathematical precision and cinematic intent.",
-          imageSrc: "http://img.b2bpic.net/free-photo/video-camera-film-reels_23-2147807400.jpg",
-          imageAlt: "precision film camera gear overhead",
-        },
-        {
-          title: "Color Grading",
-          description: "Sophisticated post-production color science that defines your brand's look.",
-          imageSrc: "http://img.b2bpic.net/free-photo/line-shaped-neon-lights-background_23-2147815446.jpg",
-          imageAlt: "digital motion editing software concept",
-        },
-      ]}
-      title="Professional Cinematography Services"
-      description="Our expertise spans across high-end visual storytelling, technical precision, and aesthetic curation."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardEight
+            textboxLayout="inline-image"
+            useInvertedBackground={false}
+            features={[
+              { title: "Fluid Motion", description: "Seamless camera movement and dynamic editing transitions.", imageSrc: "http://img.b2bpic.net/free-photo/lights-prisms-effect-close-up_23-2148917876.jpg", imageAlt: "smooth motion blur abstract photography" },
+              { title: "Precision Framing", description: "Every shot composed with mathematical precision and cinematic intent.", imageSrc: "http://img.b2bpic.net/free-photo/video-camera-film-reels_23-2147807400.jpg", imageAlt: "precision film camera gear overhead" },
+              { title: "Color Grading", description: "Sophisticated post-production color science that defines your brand's look.", imageSrc: "http://img.b2bpic.net/free-photo/line-shaped-neon-lights-background_23-2147815446.jpg", imageAlt: "digital motion editing software concept" }
+            ]}
+            title="Professional Cinematography Services"
+            description="Our expertise spans across high-end visual storytelling, technical precision, and aesthetic curation."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardThree
-      animationType="depth-3d"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          icon: Award,
-          title: "Awards Won",
-          value: "24+",
-        },
-        {
-          id: "m2",
-          icon: Film,
-          title: "Films Completed",
-          value: "150+",
-        },
-        {
-          id: "m3",
-          icon: Clock,
-          title: "Hours of Footage",
-          value: "5000+",
-        },
-      ]}
-      title="Our Impact"
-      description="Numbers behind the frames we create for our clients."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardThree
+            animationType="depth-3d"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "m1", icon: Award, title: "Awards Won", value: "24+" },
+              { id: "m2", icon: Film, title: "Films Completed", value: "150+" },
+              { id: "m3", icon: Clock, title: "Hours of Footage", value: "5000+" }
+            ]}
+            title="Our Impact"
+            description="Numbers behind the frames we create for our clients."
+          />
+        </div>
 
-  <div id="social-proof" data-section="social-proof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Lumina Media",
-        "Apex Creative",
-        "Visionary Films",
-        "Echo Productions",
-        "Nova Studio",
-        "Zenith Arts",
-        "Atlas Media",
-      ]}
-      title="Trusted by Visionaries"
-      description="Industry-leading brands trust our studio for their visual storytelling needs."
-    />
-  </div>
+        <div id="social-proof" data-section="social-proof">
+          <SocialProofOne
+            textboxLayout="default"
+            useInvertedBackground={false}
+            names={["Lumina Media", "Apex Creative", "Visionary Films", "Echo Productions", "Nova Studio", "Zenith Arts", "Atlas Media"]}
+            title="Trusted by Visionaries"
+            description="Industry-leading brands trust our studio for their visual storytelling needs."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
-      animationType="depth-3d"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Elena Rossi",
-          role: "Creative Director",
-          testimonial: "Motion and Frame transformed our campaign into a cinematic experience.",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",
-          imageAlt: "creative industry professional portrait",
-        },
-        {
-          id: "t2",
-          name: "Marcus Chen",
-          role: "Brand Manager",
-          testimonial: "The precision and attention to detail in every frame is unparalleled.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-model-smiling-urban-building-shiny-background_23-2147869624.jpg",
-          imageAlt: "advertising director professional portrait",
-        },
-        {
-          id: "t3",
-          name: "Sophie Dubois",
-          role: "Head of Production",
-          testimonial: "Truly professional in their approach and creative output.",
-          imageSrc: "http://img.b2bpic.net/free-photo/male-white-shirt-holds-photo-camera-isolated-grey_613910-463.jpg",
-          imageAlt: "film editor professional portrait",
-        },
-        {
-          id: "t4",
-          name: "Jordan Smith",
-          role: "Founder",
-          testimonial: "They captured the exact emotion we needed for our launch video.",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-darkroom_23-2149893830.jpg",
-          imageAlt: "art director professional portrait",
-        },
-        {
-          id: "t5",
-          name: "Alex Rivier",
-          role: "Executive Producer",
-          testimonial: "A reliable partner for high-stakes visual projects.",
-          imageSrc: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg",
-          imageAlt: "marketing executive portrait modern style",
-        },
-      ]}
-      title="Client Perspectives"
-      description="Voices from those who have partnered with our creative studio."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardTwo
+            animationType="depth-3d"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "t1", name: "Elena Rossi", role: "Creative Director", testimonial: "Motion and Frame transformed our campaign into a cinematic experience.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg", imageAlt: "creative industry professional portrait" },
+              { id: "t2", name: "Marcus Chen", role: "Brand Manager", testimonial: "The precision and attention to detail in every frame is unparalleled.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-model-smiling-urban-building-shiny-background_23-2147869624.jpg", imageAlt: "advertising director professional portrait" },
+              { id: "t3", name: "Sophie Dubois", role: "Head of Production", testimonial: "Truly professional in their approach and creative output.", imageSrc: "http://img.b2bpic.net/free-photo/male-white-shirt-holds-photo-camera-isolated-grey_613910-463.jpg", imageAlt: "film editor professional portrait" },
+              { id: "t4", name: "Jordan Smith", role: "Founder", testimonial: "They captured the exact emotion we needed for our launch video.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-darkroom_23-2149893830.jpg", imageAlt: "art director professional portrait" },
+              { id: "t5", name: "Alex Rivier", role: "Executive Producer", testimonial: "A reliable partner for high-stakes visual projects.", imageSrc: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg", imageAlt: "marketing executive portrait modern style" }
+            ]}
+            title="Client Perspectives"
+            description="Voices from those who have partnered with our creative studio."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "How does the project process work?",
-          content: "We follow a discovery, concept, shoot, and polish cycle tailored to your vision.",
-        },
-        {
-          id: "f2",
-          title: "Do you work with remote clients?",
-          content: "Yes, we handle end-to-end production with seamless collaboration tools.",
-        },
-        {
-          id: "f3",
-          title: "What is the typical turnaround time?",
-          content: "Varies by project scale, typically 4-8 weeks for high-end cinematic work.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/3d-render-modern-home-office_1048-17374.jpg"
-      mediaAnimation="slide-up"
-      title="Production Insights"
-      description="Answers to commonly asked questions about our creative workflow."
-      faqsAnimation="slide-up"
-      imageAlt="clean creative desk interior design"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            textboxLayout="default"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "f1", title: "How does the project process work?", content: "We follow a discovery, concept, shoot, and polish cycle tailored to your vision." },
+              { id: "f2", title: "Do you work with remote clients?", content: "Yes, we handle end-to-end production with seamless collaboration tools." },
+              { id: "f3", title: "What is the typical turnaround time?", content: "Varies by project scale, typically 4-8 weeks for high-end cinematic work." }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/3d-render-modern-home-office_1048-17374.jpg"
+            mediaAnimation="slide-up"
+            faqsAnimation="slide-up"
+            title="Production Insights"
+            description="Answers to commonly asked questions about our creative workflow."
+            imageAlt="clean creative desk interior design"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      title="Begin Your Project"
-      description="Let's bring your vision to life. Share the details and we'll be in touch."
-      imageSrc="http://img.b2bpic.net/free-photo/low-angle-perspective-waiting-room_122409-38.jpg"
-      mediaAnimation="slide-up"
-      imageAlt="minimalist creative agency wall interior"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            tag="Contact Us"
+            useInvertedBackground={false}
+            background={{ variant: "plain" }}
+            title="Begin Your Project"
+            description="Let's bring your vision to life. Share the details and we'll be in touch."
+            imageSrc="http://img.b2bpic.net/free-photo/low-angle-perspective-waiting-room_122409-38.jpg"
+            mediaAnimation="slide-up"
+            imageAlt="minimalist creative agency wall interior"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Portfolio",
-              href: "#portfolio",
-            },
-          ],
-        },
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Cinematography",
-              href: "#services",
-            },
-            {
-              label: "Post Production",
-              href: "#services",
-            },
-          ],
-        },
-        {
-          title: "Connect",
-          items: [
-            {
-              label: "Twitter",
-              href: "#",
-            },
-            {
-              label: "Instagram",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="Motion and Frame"
-      copyrightText="© 2025 Motion and Frame. All rights reserved."
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Portfolio", href: "#portfolio" }] },
+              { title: "Services", items: [{ label: "Cinematography", href: "#services" }, { label: "Post Production", href: "#services" }] },
+              { title: "Connect", items: [{ label: "Twitter", href: "#" }, { label: "Instagram", href: "#" }] }
+            ]}
+            logoText="Motion and Frame"
+            copyrightText="© 2025 Motion and Frame. All rights reserved."
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );