From e4408ef7516864a50da8d0fb60482b57c16e415b Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 18 Apr 2026 05:56:47 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 505 ++++++++++++++---------------------------------
 1 file changed, 147 insertions(+), 358 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7e7b884..80c4479 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,375 +16,164 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="icon-arrow"
-        defaultTextAnimation="reveal-blur"
-        borderRadius="pill"
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="reveal-blur"
+      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">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Home",
-          id: "home",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Projects",
-          id: "projects",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="SONIC"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "home" },
+              { name: "About", id: "about" },
+              { name: "Projects", id: "projects" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="SONIC"
+          />
+        </div>
 
-  <div id="home" data-section="home">
-      <HeroBillboard
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      title="SONIC: Professional Video Editor"
-      description="Turning raw footage into cinematic experiences. Specialist in Premiere Pro, DaVinci Resolve, After Effects, and CapCut."
-      buttons={[
-        {
-          text: "View My Work",
-          href: "#projects",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/remotely-working-company-financial-advisor-analyzing-statistical-graphs_482257-92945.jpg"
-      imageAlt="video editing suite dark theme"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/female-videographer-making-movie-montage-green-screen-display_482257-125140.jpg",
-          alt: "Female videographer making a movie montage next to green screen display",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/creative-team-improving-footage-visuals_482257-121439.jpg",
-          alt: "Creative team improving footage visuals",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-woman-video-editor-working-with-dual-monitors-creative-agency_482257-126903.jpg",
-          alt: "Young woman video editor working with dual monitors in creative agency",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/electronic-gadgets-used-podcasting_482257-91517.jpg",
-          alt: "Electronic gadgets used for podcasting",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/side-view-woman-working-as-photographer_23-2150506075.jpg",
-          alt: "Side view woman working as a photographer",
-        },
-      ]}
-      avatarText="Trusted by 500+ creators"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "4K Editing",
-        },
-        {
-          type: "text",
-          text: "Color Grade",
-        },
-        {
-          type: "text",
-          text: "Motion Graphics",
-        },
-        {
-          type: "text",
-          text: "VFX Design",
-        },
-        {
-          type: "text",
-          text: "Post Production",
-        },
-      ]}
-    />
-  </div>
+        <div id="home" data-section="home">
+          <HeroBillboard
+            background={{ variant: "sparkles-gradient" }}
+            title="SONIC: Professional Video Editor"
+            description="Turning raw footage into cinematic experiences. Specialist in Premiere Pro, DaVinci Resolve, After Effects, and CapCut."
+            buttons={[{ text: "View My Work", href: "#projects" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/remotely-working-company-financial-advisor-analyzing-statistical-graphs_482257-92945.jpg"
+            imageAlt="video editing suite dark theme"
+            mediaAnimation="slide-up"
+            avatars={[
+              { src: "http://img.b2bpic.net/free-photo/female-videographer-making-movie-montage-green-screen-display_482257-125140.jpg", alt: "Female videographer making a movie montage next to green screen display" },
+              { src: "http://img.b2bpic.net/free-photo/creative-team-improving-footage-visuals_482257-121439.jpg", alt: "Creative team improving footage visuals" },
+              { src: "http://img.b2bpic.net/free-photo/young-woman-video-editor-working-with-dual-monitors-creative-agency_482257-126903.jpg", alt: "Young woman video editor working with dual monitors in creative agency" },
+              { src: "http://img.b2bpic.net/free-photo/electronic-gadgets-used-podcasting_482257-91517.jpg", alt: "Electronic gadgets used for podcasting" },
+              { src: "http://img.b2bpic.net/free-photo/side-view-woman-working-as-photographer_23-2150506075.jpg", alt: "Side view woman working as a photographer" }
+            ]}
+            avatarText="Trusted by 500+ creators"
+            marqueeItems={[{ type: "text", text: "4K Editing" }, { type: "text", text: "Color Grade" }, { type: "text", text: "Motion Graphics" }, { type: "text", text: "VFX Design" }, { type: "text", text: "Post Production" }]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <MetricSplitMediaAbout
-      useInvertedBackground={false}
-      title="Crafting Visual Stories"
-      description="With a keen eye for rhythm, color, and pacing, I help creators and brands tell compelling stories. Whether it's rapid-fire social media shorts or cinematic long-form narrative, I deliver high-quality, polished results."
-      metrics={[
-        {
-          value: "500+",
-          title: "Projects Edited",
-        },
-        {
-          value: "4",
-          title: "Editing Suites",
-        },
-        {
-          value: "24/7",
-          title: "Dedication",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/portrait-smart-blonde-female-photographer-white-blouse-black-leather-jacket-posing-with-camera-studio-isolated-gray-background_613910-18599.jpg"
-      imageAlt="video editor creative professional"
-      mediaAnimation="blur-reveal"
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <MetricSplitMediaAbout
+            useInvertedBackground={false}
+            title="Crafting Visual Stories"
+            description="With a keen eye for rhythm, color, and pacing, I help creators and brands tell compelling stories. Whether it's rapid-fire social media shorts or cinematic long-form narrative, I deliver high-quality, polished results."
+            metrics={[{ value: "500+", title: "Projects Edited" }, { value: "4", title: "Editing Suites" }, { value: "24/7", title: "Dedication" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/portrait-smart-blonde-female-photographer-white-blouse-black-leather-jacket-posing-with-camera-studio-isolated-gray-background_613910-18599.jpg"
+            imageAlt="video editor creative professional"
+            mediaAnimation="blur-reveal"
+            metricsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="projects" data-section="projects">
-      <ProductCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="bento-grid"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          brand: "Cinematic",
-          name: "Showreel 2024",
-          price: "High End",
-          rating: 5,
-          reviewCount: "New",
-          imageSrc: "http://img.b2bpic.net/free-photo/videographer-using-computer-with-chroma-key-mock-up-isolated-display-editing-video-audio-footage_482257-3410.jpg",
-        },
-        {
-          id: "p2",
-          brand: "Social",
-          name: "Fast Cuts",
-          price: "Trending",
-          rating: 5,
-          reviewCount: "New",
-          imageSrc: "http://img.b2bpic.net/free-photo/photographer-capturing-photos-world-photography-day-war-zone-conflict-area_23-2151671634.jpg",
-        },
-        {
-          id: "p3",
-          brand: "Motion",
-          name: "FX Intro",
-          price: "Vibrant",
-          rating: 5,
-          reviewCount: "New",
-          imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-blogger-records-video-her-room-has-camera-coffee-table-shows-eyeshadow-palette_1258-254172.jpg",
-        },
-        {
-          id: "p4",
-          brand: "VFX",
-          name: "Composition",
-          price: "Complex",
-          rating: 5,
-          reviewCount: "New",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-adult-losing-shooting-video-games-strategy-feeling-frustrated-angry-about-lost-competition-game-sad-person-being-irritated-after-shooter-gaming-lose-gathering-with-friends_482257-47378.jpg",
-        },
-        {
-          id: "p5",
-          brand: "Grade",
-          name: "Color Grade",
-          price: "Cinematic",
-          rating: 5,
-          reviewCount: "New",
-          imageSrc: "http://img.b2bpic.net/free-photo/isolated-green-screen-running-laptop-fintech-annual-trends_482257-126576.jpg",
-        },
-        {
-          id: "p6",
-          brand: "Shorts",
-          name: "Edit Pack",
-          price: "Fast",
-          rating: 5,
-          reviewCount: "New",
-          imageSrc: "http://img.b2bpic.net/free-photo/photography-negative-background_23-2148133196.jpg",
-        },
-      ]}
-      title="Selected Works"
-      description="Explore the range of projects I have crafted."
-    />
-  </div>
+        <div id="projects" data-section="projects">
+          <ProductCardTwo
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="bento-grid"
+            useInvertedBackground={false}
+            title="Selected Works"
+            description="Explore the range of projects I have crafted."
+            products={[
+              { id: "p1", brand: "Cinematic", name: "Showreel 2024", price: "High End", rating: 5, reviewCount: "New", imageSrc: "http://img.b2bpic.net/free-photo/videographer-using-computer-with-chroma-key-mock-up-isolated-display-editing-video-audio-footage_482257-3410.jpg" },
+              { id: "p2", brand: "Social", name: "Fast Cuts", price: "Trending", rating: 5, reviewCount: "New", imageSrc: "http://img.b2bpic.net/free-photo/photographer-capturing-photos-world-photography-day-war-zone-conflict-area_23-2151671634.jpg" },
+              { id: "p3", brand: "Motion", name: "FX Intro", price: "Vibrant", rating: 5, reviewCount: "New", imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-blogger-records-video-her-room-has-camera-coffee-table-shows-eyeshadow-palette_1258-254172.jpg" },
+              { id: "p4", brand: "VFX", name: "Composition", price: "Complex", rating: 5, reviewCount: "New", imageSrc: "http://img.b2bpic.net/free-photo/young-adult-losing-shooting-video-games-strategy-feeling-frustrated-angry-about-lost-competition-game-sad-person-being-irritated-after-shooter-gaming-lose-gathering-with-friends_482257-47378.jpg" },
+              { id: "p5", brand: "Grade", name: "Color Grade", price: "Cinematic", rating: 5, reviewCount: "New", imageSrc: "http://img.b2bpic.net/free-photo/isolated-green-screen-running-laptop-fintech-annual-trends_482257-126576.jpg" },
+              { id: "p6", brand: "Shorts", name: "Edit Pack", price: "Fast", rating: 5, reviewCount: "New", imageSrc: "http://img.b2bpic.net/free-photo/photography-negative-background_23-2148133196.jpg" }
+            ]}
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardFourteen
-      useInvertedBackground={false}
-      title="Technical Expertise"
-      tag="Capabilities"
-      metrics={[
-        {
-          id: "m1",
-          value: "Premiere",
-          description: "Expert Narrative Editing",
-        },
-        {
-          id: "m2",
-          value: "DaVinci",
-          description: "Advanced Color Grading",
-        },
-        {
-          id: "m3",
-          value: "AfterEff",
-          description: "Dynamic Motion Graphics",
-        },
-        {
-          id: "m4",
-          value: "CapCut",
-          description: "Mobile Optimized Edits",
-        },
-      ]}
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardFourteen
+            useInvertedBackground={false}
+            title="Technical Expertise"
+            tag="Capabilities"
+            metrics={[
+              { id: "m1", value: "Premiere", description: "Expert Narrative Editing" },
+              { id: "m2", value: "DaVinci", description: "Advanced Color Grading" },
+              { id: "m3", value: "AfterEff", description: "Dynamic Motion Graphics" },
+              { id: "m4", value: "CapCut", description: "Mobile Optimized Edits" }
+            ]}
+            metricsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardThirteen
-      animationType="depth-3d"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Alex R.",
-          handle: "@creator",
-          testimonial: "SONIC transformed my raw footage into something magical.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-mature-businessman-looking-away_23-2147955371.jpg",
-        },
-        {
-          id: "2",
-          name: "Sarah K.",
-          handle: "@influencer",
-          testimonial: "Fast, professional, and exactly the style I wanted.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrit-trendy-handsome-man-sunglasses-photo-studio_613910-5880.jpg",
-        },
-        {
-          id: "3",
-          name: "Mark D.",
-          handle: "@director",
-          testimonial: "The attention to detail in the color grading is unparalleled.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/male-director-looking-script-his-new-movie_23-2149066359.jpg",
-        },
-        {
-          id: "4",
-          name: "Emily V.",
-          handle: "@brand",
-          testimonial: "SONIC is my go-to editor for all high-stakes projects.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-airport-terminal_107420-85119.jpg",
-        },
-        {
-          id: "5",
-          name: "James L.",
-          handle: "@gamer",
-          testimonial: "The pacing on my gaming shorts is absolutely spot on.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-content-creator_23-2151912394.jpg",
-        },
-      ]}
-      showRating={true}
-      title="Client Feedback"
-      description="What creators have to say about the final edits."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardThirteen
+            animationType="depth-3d"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            showRating={true}
+            title="Client Feedback"
+            description="What creators have to say about the final edits."
+            testimonials={[
+              { id: "1", name: "Alex R.", handle: "@creator", testimonial: "SONIC transformed my raw footage into something magical.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-mature-businessman-looking-away_23-2147955371.jpg" },
+              { id: "2", name: "Sarah K.", handle: "@influencer", testimonial: "Fast, professional, and exactly the style I wanted.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrit-trendy-handsome-man-sunglasses-photo-studio_613910-5880.jpg" },
+              { id: "3", name: "Mark D.", handle: "@director", testimonial: "The attention to detail in the color grading is unparalleled.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/male-director-looking-script-his-new-movie_23-2149066359.jpg" },
+              { id: "4", name: "Emily V.", handle: "@brand", testimonial: "SONIC is my go-to editor for all high-stakes projects.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-airport-terminal_107420-85119.jpg" },
+              { id: "5", name: "James L.", handle: "@gamer", testimonial: "The pacing on my gaming shorts is absolutely spot on.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-content-creator_23-2151912394.jpg" }
+            ]}
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "How do you handle footage delivery?",
-          content: "I use secure cloud storage links (Drive, Dropbox) for all footage exchanges.",
-        },
-        {
-          id: "f2",
-          title: "Which software do you use?",
-          content: "I specialize in the full Adobe Creative Suite, DaVinci Resolve, and CapCut.",
-        },
-        {
-          id: "f3",
-          title: "Can you handle complex motion graphics?",
-          content: "Yes, I use After Effects to create high-end visual effects and dynamic text.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-specialized-photographer-working-studio_23-2150247207.jpg"
-      imageAlt="video editor creative professional"
-      title="Questions & Answers"
-      description="Information regarding the workflow and collaboration process."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            textboxLayout="split"
+            useInvertedBackground={false}
+            title="Questions & Answers"
+            description="Information regarding the workflow and collaboration process."
+            faqsAnimation="slide-up"
+            faqs={[
+              { id: "f1", title: "How do you handle footage delivery?", content: "I use secure cloud storage links (Drive, Dropbox) for all footage exchanges." },
+              { id: "f2", title: "Which software do you use?", content: "I specialize in the full Adobe Creative Suite, DaVinci Resolve, and CapCut." },
+              { id: "f3", title: "Can you handle complex motion graphics?", content: "Yes, I use After Effects to create high-end visual effects and dynamic text." }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/medium-shot-specialized-photographer-working-studio_23-2150247207.jpg"
+            imageAlt="video editor creative professional"
+          />
+        </div>
 
-  <div id="proof" data-section="proof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Adobe Premiere",
-        "DaVinci Resolve",
-        "After Effects",
-        "CapCut Pro",
-        "4K HDR",
-        "Motion Graphics",
-        "Color Grading",
-      ]}
-      title="Software Tools"
-      description="Tools of the trade."
-    />
-  </div>
+        <div id="proof" data-section="proof">
+          <SocialProofOne
+            textboxLayout="default"
+            useInvertedBackground={false}
+            names={["Adobe Premiere", "DaVinci Resolve", "After Effects", "CapCut Pro", "4K HDR", "Motion Graphics", "Color Grading"]}
+            title="Software Tools"
+            description="Tools of the trade."
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      tag="Let's Collaborate"
-      title="Ready to bring your vision to life?"
-      description="Send a message to discuss your next project timeline and requirements."
-      buttons={[
-        {
-          text: "Email Me",
-          href: "mailto:sonic@editor.com",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            useInvertedBackground={false}
+            background={{ variant: "sparkles-gradient" }}
+            tag="Let's Collaborate"
+            title="Ready to bring your vision to life?"
+            description="Send a message to discuss your next project timeline and requirements."
+            buttons={[{ text: "Email Me", href: "mailto:sonic@editor.com" }]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Portfolio",
-          items: [
-            {
-              label: "Recent Work",
-              href: "#projects",
-            },
-            {
-              label: "Testimonials",
-              href: "#testimonials",
-            },
-          ],
-        },
-        {
-          title: "Connect",
-          items: [
-            {
-              label: "Email",
-              href: "mailto:sonic@editor.com",
-            },
-            {
-              label: "Twitter",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="SONIC"
-      copyrightText="© 2025 SONIC Edits"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              { title: "Portfolio", items: [{ label: "Recent Work", href: "#projects" }, { label: "Testimonials", href: "#testimonials" }] },
+              { title: "Connect", items: [{ label: "Email", href: "mailto:sonic@editor.com" }, { label: "Twitter", href: "#" }] }
+            ]}
+            logoText="SONIC"
+            copyrightText="© 2025 SONIC Edits"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1