From 6f8d7ee93d5008cb810bcc29ad3b92011ddb772b Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 2 Apr 2026 08:58:22 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 390 +++++++++++++++++++----------------------------
 1 file changed, 155 insertions(+), 235 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index dd8518e..299ebf5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -26,247 +26,167 @@ export default function LandingPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Projects",
-          id: "projects",
-        },
-        {
-          name: "Stack",
-          id: "stack",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="CREATIVE"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarStyleFullscreen
+            navItems={[
+              {
+                name: "Home",                id: "hero"},
+              {
+                name: "Projects",                id: "projects"},
+              {
+                name: "Stack",                id: "stack"},
+              {
+                name: "Contact",                id: "contact"},
+            ]}
+            brandName="CREATIVE"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogoBillboardSplit
-      background={{
-        variant: "canvas-reveal",
-      }}
-      logoText="CREATIVE DEVELOPER"
-      description="Crafting high-end digital experiences using Three.js, GSAP, and Next.js."
-      buttons={[
-        {
-          text: "Explore Work",
-          href: "#projects",
-        },
-      ]}
-      buttonAnimation="slide-up"
-      layoutOrder="default"
-      imageSrc="http://img.b2bpic.net/free-photo/minimalist-smartphone-mockup-with-dramatic-lighting_9975-134422.jpg?_wi=1"
-      mediaAnimation="blur-reveal"
-      frameStyle="card"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+            <HeroLogoBillboardSplit
+            background={{
+              variant: "canvas-reveal"}}
+            logoText="CREATIVE DEVELOPER"
+            description="Crafting high-end digital experiences using Three.js, GSAP, and Next.js."
+            buttons={[
+              {
+                text: "Explore Work",                href: "#projects"},
+            ]}
+            buttonAnimation="slide-up"
+            layoutOrder="default"
+            imageSrc="http://img.b2bpic.net/free-photo/minimalist-smartphone-mockup-with-dramatic-lighting_9975-134422.jpg"
+            mediaAnimation="blur-reveal"
+            frameStyle="card"
+          />
+        </div>
 
-  <div id="projects" data-section="projects">
-      <ProductCardFour
-      animationType="scale-rotate"
-      textboxLayout="split-description"
-      gridVariant="bento-grid"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "1",
-          name: "3D Experience",
-          price: "Interactive",
-          variant: "WebGL",
-          imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=1",
-        },
-        {
-          id: "2",
-          name: "SaaS Platform",
-          price: "High-perf",
-          variant: "Next.js",
-          imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=2",
-        },
-        {
-          id: "3",
-          name: "Mobile App",
-          price: "Responsive",
-          variant: "React",
-          imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=3",
-        },
-      ]}
-      title="Interactive Projects"
-      description="A showcase of high-end digital solutions."
-    />
-  </div>
+        <div id="projects" data-section="projects">
+            <ProductCardFour
+            animationType="scale-rotate"
+            textboxLayout="split-description"
+            gridVariant="bento-grid"
+            useInvertedBackground={true}
+            products={[
+              {
+                id: "1",                name: "3D Experience",                price: "Interactive",                variant: "WebGL",                imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
+              {
+                id: "2",                name: "SaaS Platform",                price: "High-perf",                variant: "Next.js",                imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
+              {
+                id: "3",                name: "Mobile App",                price: "Responsive",                variant: "React",                imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
+            ]}
+            title="Interactive Projects"
+            description="A showcase of high-end digital solutions."
+          />
+        </div>
 
-  <div id="stack" data-section="stack">
-      <FeatureCardTwentyFive
-      animationType="depth-3d"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "React Three Fiber",
-          description: "3D core implementation.",
-          icon: Zap,
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=4",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=5",
-            },
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-smartphone-mockup-with-dramatic-lighting_9975-134422.jpg?_wi=2",
-          imageAlt: "futuristic crystalline 3d abstract",
-        },
-        {
-          title: "GSAP ScrollTrigger",
-          description: "Premium animations.",
-          icon: Award,
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=6",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=7",
-            },
-          ],
-          imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=8",
-          imageAlt: "bento grid design template",
-        },
-        {
-          title: "Tailwind CSS",
-          description: "Rapid styling.",
-          icon: Star,
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=9",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=10",
-            },
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-smartphone-mockup-with-dramatic-lighting_9975-134422.jpg?_wi=3",
-          imageAlt: "futuristic crystalline 3d abstract",
-        },
-      ]}
-      title="Technical Mastery"
-      description="Floating ecosystem of modern web technologies."
-    />
-  </div>
+        <div id="stack" data-section="stack">
+            <FeatureCardTwentyFive
+            animationType="depth-3d"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              {
+                title: "React Three Fiber",                description: "3D core implementation.",                icon: Zap,
+                mediaItems: [
+                  {
+                    imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
+                  {
+                    imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
+                ],
+              },
+              {
+                title: "GSAP ScrollTrigger",                description: "Premium animations.",                icon: Award,
+                mediaItems: [
+                  {
+                    imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
+                  {
+                    imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
+                ],
+              },
+              {
+                title: "Tailwind CSS",                description: "Rapid styling.",                icon: Star,
+                mediaItems: [
+                  {
+                    imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
+                  {
+                    imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
+                ],
+              },
+            ]}
+            title="Technical Mastery"
+            description="Floating ecosystem of modern web technologies."
+          />
+        </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardNine
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Transparent Pricing"
-      description="Flexible plans for high-end project development."
-      plans={[
-        {
-          id: "p1",
-          title: "Consultation",
-          price: "$150",
-          period: "/hr",
-          features: [
-            "Architecture Review",
-            "Tech Stack Advice",
-            "Performance Audit",
-          ],
-          button: {
-            text: "Book Now",
-            href: "#contact",
-          },
-          imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=11",
-        },
-        {
-          id: "p2",
-          title: "Web Experience",
-          price: "$2,500",
-          period: "/project",
-          features: [
-            "3D Scene Dev",
-            "GSAP Motion",
-            "React Integration",
-          ],
-          button: {
-            text: "Start Project",
-            href: "#contact",
-          },
-          imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg?_wi=12",
-        },
-      ]}
-    />
-  </div>
+        <div id="pricing" data-section="pricing">
+            <PricingCardNine
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Transparent Pricing"
+            description="Flexible plans for high-end project development."
+            plans={[
+              {
+                id: "p1",                title: "Consultation",                price: "$150",                period: "/hr",                features: [
+                  "Architecture Review",                  "Tech Stack Advice",                  "Performance Audit"],
+                button: {
+                  text: "Book Now",                  href: "#contact"},
+                imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
+              {
+                id: "p2",                title: "Web Experience",                price: "$2,500",                period: "/project",                features: [
+                  "3D Scene Dev",                  "GSAP Motion",                  "React Integration"],
+                button: {
+                  text: "Start Project",                  href: "#contact"},
+                imageSrc: "http://img.b2bpic.net/free-psd/hand-drawn-asian-food-template_23-2150098516.jpg"},
+            ]}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplitForm
-      useInvertedBackground={true}
-      title="Let's Connect"
-      description="Ready to build something amazing?"
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Your Email",
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "Project details...",
-        rows: 4,
-        required: true,
-      }}
-      mediaAnimation="slide-up"
-      mediaPosition="left"
-      imageSrc="http://img.b2bpic.net/free-photo/minimalist-smartphone-mockup-with-dramatic-lighting_9975-134422.jpg?_wi=4"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+            <ContactSplitForm
+            useInvertedBackground={true}
+            title="Let's Connect"
+            description="Ready to build something amazing?"
+            inputs={[
+              {
+                name: "name",                type: "text",                placeholder: "Your Name"},
+              {
+                name: "email",                type: "email",                placeholder: "Your Email"},
+            ]}
+            textarea={{
+              name: "message",              placeholder: "Project details...",              rows: 4,
+              required: true,
+            }}
+            mediaAnimation="slide-up"
+            mediaPosition="left"
+            imageSrc="http://img.b2bpic.net/free-photo/minimalist-smartphone-mockup-with-dramatic-lighting_9975-134422.jpg"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Portfolio",
-              href: "#",
-            },
-            {
-              label: "Stack",
-              href: "#",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "GitHub",
-              href: "#",
-            },
-            {
-              label: "LinkedIn",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="CREATIVE"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+            <FooterLogoEmphasis
+            columns={[
+              {
+                items: [
+                  {
+                    label: "Portfolio",                    href: "#"},
+                  {
+                    label: "Stack",                    href: "#"},
+                ],
+              },
+              {
+                items: [
+                  {
+                    label: "GitHub",                    href: "#"},
+                  {
+                    label: "LinkedIn",                    href: "#"},
+                ],
+              },
+            ]}
+            logoText="CREATIVE"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1