From 36c6d8d3d6a91588b217529d5e4176ba4eb381b5 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 22 Apr 2026 18:23:13 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 467 +++++++++++++++--------------------------------
 1 file changed, 144 insertions(+), 323 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 29b7ebd..f50837d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -28,338 +28,159 @@ export default function LandingPage() {
         headingFontWeight="light"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Work",
-          id: "#work",
-        },
-        {
-          name: "About",
-          id: "#about",
-        },
-        {
-          name: "Services",
-          id: "#services",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
-      ]}
-      brandName="Portfolio"
-    />
-  </div>
+        <div className="[&>div]:sticky [&>div]:top-0 [&>div]:h-screen [&>div]:overflow-hidden">
+          <div id="nav" data-section="nav">
+            <NavbarStyleApple
+              navItems={[
+                { name: "Work", id: "#work" },
+                { name: "About", id: "#about" },
+                { name: "Services", id: "#services" },
+                { name: "Contact", id: "#contact" },
+              ]}
+              brandName="Portfolio"
+            />
+          </div>
 
-  <div id="hero" data-section="hero">
-      <HeroCarouselLogo
-      logoText="PORTFOLIO"
-      description="Scroll through layered projects that unfold in real time. Experience design that transcends static display."
-      buttons={[
-        {
-          text: "Explore My Work",
-          href: "#work",
-        },
-      ]}
-      slides={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212578.jpg?_wi=1",
-          imageAlt: "Abstract red shapes 1",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/marble-background-digital-art-marbling-texture-ruby-colors-ai-generated-image_511042-576.jpg?_wi=1",
-          imageAlt: "Architecture patterns",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-motion-blur-messy-light-trail-black-background_23-2148055596.jpg",
-          imageAlt: "Liquid red lines",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/gypsum-bust-coral-background-with-geometric-shapes_23-2149588229.jpg",
-          imageAlt: "Red sculpture",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/colour-accent-corporate-presentation-background_1048-10245.jpg",
-          imageAlt: "Abstract red grid",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/medical-syringe-symbol-vaccination-stop-coronavirus-concept-red-background_559531-10291.jpg",
-          imageAlt: "Typography art",
-        },
-      ]}
-      autoplayDelay={4000}
-    />
-  </div>
+          <div id="hero" data-section="hero">
+            <HeroCarouselLogo
+              logoText="PORTFOLIO"
+              description="Scroll through layered projects that unfold in real time. Experience design that transcends static display."
+              buttons={[{ text: "Explore My Work", href: "#work" }]}
+              slides={[
+                { imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212578.jpg?_wi=1", imageAlt: "Abstract red shapes 1" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/marble-background-digital-art-marbling-texture-ruby-colors-ai-generated-image_511042-576.jpg?_wi=1", imageAlt: "Architecture patterns" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/abstract-motion-blur-messy-light-trail-black-background_23-2148055596.jpg", imageAlt: "Liquid red lines" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/gypsum-bust-coral-background-with-geometric-shapes_23-2149588229.jpg", imageAlt: "Red sculpture" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/colour-accent-corporate-presentation-background_1048-10245.jpg", imageAlt: "Abstract red grid" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/medical-syringe-symbol-vaccination-stop-coronavirus-concept-red-background_559531-10291.jpg", imageAlt: "Typography art" },
+              ]}
+              autoplayDelay={4000}
+            />
+          </div>
 
-  <div id="about" data-section="about">
-      <SplitAbout
-      textboxLayout="split-description"
-      useInvertedBackground={false}
-      title="Crafting Digital Experiences That Leave a Mark"
-      description="I believe in the power of interaction. By combining precise code with bold visual storytelling, I create work that doesn't just sit on the screen—it reacts, breathes, and engages users on a deeper, more emotional level."
-      tag="About Me"
-      bulletPoints={[
-        {
-          title: "Interaction Design",
-          description: "Creating fluid, responsive animations that guide users.",
-        },
-        {
-          title: "Creative Development",
-          description: "Building performant, high-end web experiences from scratch.",
-        },
-        {
-          title: "Visual Storytelling",
-          description: "Communicating complex ideas through clean, bold layouts.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453354.jpg"
-      imageAlt="Creative designer"
-      mediaAnimation="slide-up"
-    />
-  </div>
+          <div id="about" data-section="about">
+            <SplitAbout
+              textboxLayout="split-description"
+              useInvertedBackground={false}
+              title="Crafting Digital Experiences That Leave a Mark"
+              description="I believe in the power of interaction. By combining precise code with bold visual storytelling, I create work that doesn't just sit on the screen—it reacts, breathes, and engages users on a deeper, more emotional level."
+              tag="About Me"
+              bulletPoints={[
+                { title: "Interaction Design", description: "Creating fluid, responsive animations that guide users." },
+                { title: "Creative Development", description: "Building performant, high-end web experiences from scratch." },
+                { title: "Visual Storytelling", description: "Communicating complex ideas through clean, bold layouts." },
+              ]}
+              imageSrc="http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453354.jpg"
+              imageAlt="Creative designer"
+              mediaAnimation="slide-up"
+            />
+          </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwentyThree
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "f1",
-          title: "Motion Systems",
-          tags: [
-            "GSAP",
-            "Three.js",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/light-streak-lines-background_23-2148133123.jpg",
-          imageAlt: "Light streak lines background",
-        },
-        {
-          id: "f2",
-          title: "Responsive Design",
-          tags: [
-            "Tailwind",
-            "Next.js",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212578.jpg?_wi=2",
-          imageAlt: "Light streak lines background",
-        },
-        {
-          id: "f3",
-          title: "UI Architecture",
-          tags: [
-            "Design System",
-            "Accessibility",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/marble-background-digital-art-marbling-texture-ruby-colors-ai-generated-image_511042-576.jpg?_wi=2",
-          imageAlt: "Light streak lines background",
-        },
-      ]}
-      title="Core Competencies"
-      description="The technical foundation behind every project I build."
-    />
-  </div>
+          <div id="features" data-section="features">
+            <FeatureCardTwentyThree
+              animationType="slide-up"
+              textboxLayout="default"
+              useInvertedBackground={false}
+              features={[
+                { id: "f1", title: "Motion Systems", tags: ["GSAP", "Three.js"], imageSrc: "http://img.b2bpic.net/free-photo/light-streak-lines-background_23-2148133123.jpg", imageAlt: "Light streak lines background" },
+                { id: "f2", title: "Responsive Design", tags: ["Tailwind", "Next.js"], imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212578.jpg?_wi=2", imageAlt: "Light streak lines background" },
+                { id: "f3", title: "UI Architecture", tags: ["Design System", "Accessibility"], imageSrc: "http://img.b2bpic.net/free-photo/marble-background-digital-art-marbling-texture-ruby-colors-ai-generated-image_511042-576.jpg?_wi=2", imageAlt: "Light streak lines background" },
+              ]}
+              title="Core Competencies"
+              description="The technical foundation behind every project I build."
+            />
+          </div>
 
-  <div id="work" data-section="work">
-      <ProductCardFour
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          name: "UI Dashboard",
-          price: "UX Case Study",
-          variant: "Web",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-business-desk-with-virtual-reality-headset_23-2148513458.jpg",
-        },
-        {
-          id: "p2",
-          name: "Branding Suite",
-          price: "Graphic Design",
-          variant: "Print",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-body-butter-recipient_23-2148543017.jpg",
-        },
-        {
-          id: "p3",
-          name: "App Concept",
-          price: "Product Design",
-          variant: "Mobile",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671595.jpg",
-        },
-        {
-          id: "p4",
-          name: "Gallery Poster",
-          price: "Design System",
-          variant: "Art",
-          imageSrc: "http://img.b2bpic.net/free-photo/burning-paper-background-still-life_23-2150093376.jpg",
-        },
-        {
-          id: "p5",
-          name: "Digital Tool",
-          price: "Tech Innovation",
-          variant: "Web",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-modern-spiral-staircase-lights_181624-26451.jpg",
-        },
-        {
-          id: "p6",
-          name: "Multimedia Installation",
-          price: "Art Direction",
-          variant: "Mixed",
-          imageSrc: "http://img.b2bpic.net/free-photo/rectangular-scroll-ribbon-logo-label_53876-13825.jpg",
-        },
-      ]}
-      title="Featured Projects"
-      description="A selection of creative work focused on high visual impact."
-    />
-  </div>
+          <div id="work" data-section="work">
+            <ProductCardFour
+              animationType="slide-up"
+              textboxLayout="default"
+              gridVariant="three-columns-all-equal-width"
+              useInvertedBackground={false}
+              products={[
+                { id: "p1", name: "UI Dashboard", price: "UX Case Study", variant: "Web", imageSrc: "http://img.b2bpic.net/free-photo/modern-business-desk-with-virtual-reality-headset_23-2148513458.jpg" },
+                { id: "p2", name: "Branding Suite", price: "Graphic Design", variant: "Print", imageSrc: "http://img.b2bpic.net/free-photo/close-up-body-butter-recipient_23-2148543017.jpg" },
+                { id: "p3", name: "App Concept", price: "Product Design", variant: "Mobile", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671595.jpg" },
+                { id: "p4", name: "Gallery Poster", price: "Design System", variant: "Art", imageSrc: "http://img.b2bpic.net/free-photo/burning-paper-background-still-life_23-2150093376.jpg" },
+                { id: "p5", name: "Digital Tool", price: "Tech Innovation", variant: "Web", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-modern-spiral-staircase-lights_181624-26451.jpg" },
+                { id: "p6", name: "Multimedia Installation", price: "Art Direction", variant: "Mixed", imageSrc: "http://img.b2bpic.net/free-photo/rectangular-scroll-ribbon-logo-label_53876-13825.jpg" },
+              ]}
+              title="Featured Projects"
+              description="A selection of creative work focused on high visual impact."
+            />
+          </div>
 
-  <div id="stats" data-section="stats">
-      <MetricCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          value: "150+",
-          description: "Projects completed worldwide",
-        },
-        {
-          id: "m2",
-          value: "99.9%",
-          description: "Client satisfaction rate",
-        },
-        {
-          id: "m3",
-          value: "100+",
-          description: "Unique interactions created",
-        },
-      ]}
-      title="By The Numbers"
-      description="My commitment to quality and innovation in every build."
-    />
-  </div>
+          <div id="stats" data-section="stats">
+            <MetricCardTwo
+              animationType="slide-up"
+              textboxLayout="default"
+              gridVariant="uniform-all-items-equal"
+              useInvertedBackground={false}
+              metrics={[
+                { id: "m1", value: "150+", description: "Projects completed worldwide" },
+                { id: "m2", value: "99.9%", description: "Client satisfaction rate" },
+                { id: "m3", value: "100+", description: "Unique interactions created" },
+              ]}
+              title="By The Numbers"
+              description="My commitment to quality and innovation in every build."
+            />
+          </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
-      useInvertedBackground={false}
-      testimonial="Working with this designer was a game changer for our agency. The attention to detail and interaction design truly elevate the brand experience."
-      rating={5}
-      author="Sarah Miller, Creative Lead"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/closeup-beautiful-strict-woman-glasses_1262-1732.jpg",
-          alt: "Client 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",
-          alt: "Client 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-serious-young-businessman-glasses_1262-3810.jpg",
-          alt: "Client 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-studio_23-2149411430.jpg",
-          alt: "Client 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/unknown-man-posing-with-blue-background-medium-shot_23-2149417616.jpg",
-          alt: "Client 5",
-        },
-      ]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="blur-reveal"
-    />
-  </div>
+          <div id="testimonials" data-section="testimonials">
+            <TestimonialCardFifteen
+              useInvertedBackground={false}
+              testimonial="Working with this designer was a game changer for our agency. The attention to detail and interaction design truly elevate the brand experience."
+              rating={5}
+              author="Sarah Miller, Creative Lead"
+              avatars={[
+                { src: "http://img.b2bpic.net/free-photo/closeup-beautiful-strict-woman-glasses_1262-1732.jpg", alt: "Client 1" },
+                { src: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg", alt: "Client 2" },
+                { src: "http://img.b2bpic.net/free-photo/portrait-serious-young-businessman-glasses_1262-3810.jpg", alt: "Client 3" },
+                { src: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-studio_23-2149411430.jpg", alt: "Client 4" },
+                { src: "http://img.b2bpic.net/free-photo/unknown-man-posing-with-blue-background-medium-shot_23-2149417616.jpg", alt: "Client 5" },
+              ]}
+              ratingAnimation="slide-up"
+              avatarsAnimation="blur-reveal"
+            />
+          </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "q1",
-          title: "Available for freelance?",
-          content: "Yes, I am currently accepting new projects.",
-        },
-        {
-          id: "q2",
-          title: "How do you work?",
-          content: "I start with deep discovery before prototyping.",
-        },
-        {
-          id: "q3",
-          title: "Do you offer maintenance?",
-          content: "I provide ongoing support for all my projects.",
-        },
-      ]}
-      sideTitle="Common Questions"
-      faqsAnimation="slide-up"
-    />
-  </div>
+          <div id="faq" data-section="faq">
+            <FaqSplitText
+              useInvertedBackground={false}
+              faqs={[
+                { id: "q1", title: "Available for freelance?", content: "Yes, I am currently accepting new projects." },
+                { id: "q2", title: "How do you work?", content: "I start with deep discovery before prototyping." },
+                { id: "q3", title: "Do you offer maintenance?", content: "I provide ongoing support for all my projects." },
+              ]}
+              sideTitle="Common Questions"
+              faqsAnimation="slide-up"
+            />
+          </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{
-        variant: "animated-grid",
-      }}
-      tag="Let's Talk"
-      title="Ready to build something together?"
-      description="Let's push the boundaries of digital experience. Send me a message and we'll start the conversation."
-      imageSrc="http://img.b2bpic.net/free-photo/side-view-man-developing-photos_23-2149893816.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
+          <div id="contact" data-section="contact">
+            <ContactSplit
+              useInvertedBackground={false}
+              background={{ variant: "animated-grid" }}
+              tag="Let's Talk"
+              title="Ready to build something together?"
+              description="Let's push the boundaries of digital experience. Send me a message and we'll start the conversation."
+              imageSrc="http://img.b2bpic.net/free-photo/side-view-man-developing-photos_23-2149893816.jpg"
+              mediaAnimation="slide-up"
+            />
+          </div>
 
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Work",
-              href: "#work",
-            },
-            {
-              label: "About",
-              href: "#about",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Services",
-              href: "#services",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Twitter",
-              href: "#",
-            },
-            {
-              label: "Instagram",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="PORTFOLIO"
-    />
-  </div>
+          <div id="footer" data-section="footer">
+            <FooterLogoEmphasis
+              columns={[
+                { items: [{ label: "Work", href: "#work" }, { label: "About", href: "#about" }] },
+                { items: [{ label: "Services", href: "#services" }, { label: "Contact", href: "#contact" }] },
+                { items: [{ label: "Twitter", href: "#" }, { label: "Instagram", href: "#" }] },
+              ]}
+              logoText="PORTFOLIO"
+            />
+          </div>
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1