From fafeb0ec7a9c9abee39b870e68d763b94466c2ef Mon Sep 17 00:00:00 2001
From: development <mulikavj@gmail.com>
Date: Sun, 28 Dec 2025 03:26:11 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 364 ++++++++++++++++++++---------------------------
 1 file changed, 156 insertions(+), 208 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1c8961c..cb5099e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,13 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import MediaSplitTabsAbout from "@/components/sections/about/MediaSplitTabsAbout";
+import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import FooterSocial from "@/components/sections/footer/FooterSocial";
 
 export default function LandingPage() {
   return (
@@ -17,232 +24,173 @@ export default function LandingPage() {
       headingFontWeight="normal"
     >
       <div id="nav" data-section="nav">
-        <nav className="w-full bg-background/80 backdrop-blur-sm border-b border-border">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div className="flex justify-between h-16">
-              <div className="flex items-center">
-                <span className="text-xl font-bold text-foreground">Ben</span>
-              </div>
-              <div className="flex items-center">
-                <a href="#contact" className="bg-primary-cta text-primary-cta-foreground px-4 py-2 rounded-md hover:opacity-90 transition-opacity">
-                  Get in Touch
-                </a>
-              </div>
-            </div>
-          </div>
-        </nav>
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Gallery", id: "gallery" },
+            { name: "About", id: "about" },
+            { name: "Skills", id: "skills" },
+            { name: "Contact", id: "contact" },
+          ]}
+          button={{ text: "Get in Touch", href: "contact" }}
+          brandName="Ben"
+        />
       </div>
       
       <div id="hero" data-section="hero">
-        <section className="py-20 px-4">
-          <div className="max-w-7xl mx-auto text-center">
-            <div className="inline-flex items-center px-3 py-1 rounded-full bg-accent/20 text-accent-foreground text-sm mb-6">
-              <span>3D Creative</span>
-            </div>
-            <h1 className="text-4xl md:text-6xl font-bold text-foreground mb-6">
-              3D Artist & Blender Specialist
-            </h1>
-            <p className="text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
-              Crafting immersive digital experiences through advanced 3D modeling, rendering, and animation. Transforming concepts into stunning visual reality.
-            </p>
-            <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
-              <a href="#gallery" className="bg-primary-cta text-primary-cta-foreground px-6 py-3 rounded-md hover:opacity-90 transition-opacity">
-                View Portfolio
-              </a>
-              <a href="#contact" className="border border-border text-foreground px-6 py-3 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
-                Get Started
-              </a>
-            </div>
-            <div className="grid grid-cols-3 gap-8 max-w-2xl mx-auto">
-              <div className="text-center">
-                <div className="text-2xl font-bold text-foreground">8+</div>
-                <div className="text-sm text-muted-foreground">Years in 3D</div>
-              </div>
-              <div className="text-center">
-                <div className="text-2xl font-bold text-foreground">150+</div>
-                <div className="text-sm text-muted-foreground">Projects Completed</div>
-              </div>
-              <div className="text-center">
-                <div className="text-2xl font-bold text-foreground">50+</div>
-                <div className="text-sm text-muted-foreground">Happy Clients</div>
-              </div>
-            </div>
-          </div>
-        </section>
+        <HeroBillboard
+          title="3D Artist & Blender Specialist"
+          description="Crafting immersive digital experiences through advanced 3D modeling, rendering, and animation. Transforming concepts into stunning visual reality."
+          tag="3D Creative"
+          buttons={[
+            { text: "View Portfolio", href: "gallery" },
+            { text: "Get Started", href: "contact" },
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888719283-nfmcx166.jpg"
+          imageAlt="3D Artist Portfolio"
+          frameStyle="card"
+        />
       </div>
       
       <div id="gallery" data-section="gallery">
-        <section className="py-20 px-4">
-          <div className="max-w-7xl mx-auto">
-            <div className="text-center mb-12">
-              <h2 className="text-3xl font-bold text-foreground mb-4">Featured Work</h2>
-              <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
-                Explore my latest 3D renders and creative projects. Each piece showcases technical expertise and artistic vision.
-              </p>
-            </div>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-              <div className="bg-card rounded-lg overflow-hidden border border-border">
-                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg" alt="3D character model" className="w-full h-48 object-cover" />
-                <div className="p-6">
-                  <h3 className="text-xl font-semibold text-card-foreground mb-2">Character Modeling</h3>
-                  <p className="text-sm text-muted-foreground">
-                    Advanced character sculpting and topology optimization using Blender. Includes rigging setup, UV unwrapping, and texture preparation for animation pipelines.
-                  </p>
-                </div>
-              </div>
-              <div className="bg-card rounded-lg overflow-hidden border border-border">
-                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg" alt="3D animation and effects" className="w-full h-48 object-cover" />
-                <div className="p-6">
-                  <h3 className="text-xl font-semibold text-card-foreground mb-2">Visual Effects</h3>
-                  <p className="text-sm text-muted-foreground">
-                    Particle systems, simulations, and motion graphics. Built with Blender's Geometry Nodes and shader effects to create dynamic visual experiences.
-                  </p>
-                </div>
-              </div>
-              <div className="bg-card rounded-lg overflow-hidden border border-border">
-                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg" alt="3D product render" className="w-full h-48 object-cover" />
-                <div className="p-6">
-                  <h3 className="text-xl font-semibold text-card-foreground mb-2">Product Rendering</h3>
-                  <p className="text-sm text-muted-foreground">
-                    High-fidelity product visualization with photorealistic lighting and materials. Optimized for e-commerce and marketing presentations.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
+        <ProductCardOne
+          title="Featured Work"
+          description="Explore my latest 3D renders and creative projects. Each piece showcases technical expertise and artistic vision."
+          products={[
+            {
+              id: "1",
+              name: "Character Modeling",
+              price: "Advanced",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg",
+              imageAlt: "3D character model",
+            },
+            {
+              id: "2",
+              name: "Visual Effects",
+              price: "Dynamic",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg",
+              imageAlt: "3D animation and effects",
+            },
+            {
+              id: "3",
+              name: "Product Rendering",
+              price: "Photorealistic",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg",
+              imageAlt: "3D product render",
+            },
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          gridVariant="three-columns-all-equal-width"
+          useInvertedBackground="noInvert"
+        />
       </div>
       
       <div id="about" data-section="about">
-        <section className="py-20 px-4">
-          <div className="max-w-4xl mx-auto text-center">
-            <h2 className="text-3xl md:text-5xl font-bold text-foreground mb-8">
-              I bring imagination to life through cutting-edge 3D technology and creative storytelling
-            </h2>
-            <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <a href="#gallery" className="bg-primary-cta text-primary-cta-foreground px-6 py-3 rounded-md hover:opacity-90 transition-opacity">
-                View All Work
-              </a>
-              <a href="#contact" className="border border-border text-foreground px-6 py-3 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
-                Get Started
-              </a>
-            </div>
-          </div>
-        </section>
+        <MediaSplitTabsAbout
+          title="I bring imagination to life through cutting-edge 3D technology and creative storytelling"
+          tabs={[
+            {
+              id: "vision",
+              label: "Vision",
+              description: "Bringing concepts to life through innovative 3D visualization and artistic storytelling.",
+            },
+            {
+              id: "expertise",
+              label: "Expertise",
+              description: "Specialized in Blender, character modeling, photorealistic rendering, and animation pipelines.",
+            },
+            {
+              id: "approach",
+              label: "Approach",
+              description: "Combining technical excellence with creative vision to deliver stunning visual results.",
+            },
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888725581-tp75ftz7.jpg"
+          imageAlt="About section"
+          imagePosition="right"
+          useInvertedBackground="noInvert"
+        />
       </div>
       
       <div id="skills" data-section="skills">
-        <section className="py-20 px-4">
-          <div className="max-w-7xl mx-auto">
-            <div className="text-center mb-12">
-              <h2 className="text-3xl font-bold text-foreground mb-4">Core Competencies</h2>
-              <p className="text-xl text-muted-foreground">
-                Specialized expertise in 3D creation and digital art production
-              </p>
-            </div>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-              <div className="bg-card rounded-lg overflow-hidden border border-border">
-                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg" alt="3D Modeling" className="w-full h-48 object-cover" />
-                <div className="p-6">
-                  <h3 className="text-xl font-semibold text-card-foreground mb-2">3D Modeling</h3>
-                  <p className="text-sm text-muted-foreground">
-                    Advanced character and environment modeling using Blender and industry-standard techniques
-                  </p>
-                </div>
-              </div>
-              <div className="bg-card rounded-lg overflow-hidden border border-border">
-                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg" alt="Rendering & Shading" className="w-full h-48 object-cover" />
-                <div className="p-6">
-                  <h3 className="text-xl font-semibold text-card-foreground mb-2">Rendering & Shading</h3>
-                  <p className="text-sm text-muted-foreground">
-                    Photorealistic rendering with Cycles and specialized material development
-                  </p>
-                </div>
-              </div>
-              <div className="bg-card rounded-lg overflow-hidden border border-border">
-                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg" alt="Animation" className="w-full h-48 object-cover" />
-                <div className="p-6">
-                  <h3 className="text-xl font-semibold text-card-foreground mb-2">Animation</h3>
-                  <p className="text-sm text-muted-foreground">
-                    Smooth character rigging, motion capture, and keyframe animation
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
+        <MetricCardEleven
+          title="Core Competencies"
+          description="Specialized expertise in 3D creation and digital art production"
+          metrics={[
+            {
+              id: "1",
+              value: "8+",
+              title: "Years in 3D",
+              description: "Professional experience in 3D creation",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg",
+              imageAlt: "3D Modeling",
+            },
+            {
+              id: "2",
+              value: "150+",
+              title: "Projects Completed",
+              description: "High-quality deliverables across industries",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg",
+              imageAlt: "Rendering & Shading",
+            },
+            {
+              id: "3",
+              value: "50+",
+              title: "Happy Clients",
+              description: "Satisfied clients worldwide",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg",
+              imageAlt: "Animation",
+            },
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground="noInvert"
+        />
       </div>
       
       <div id="contact" data-section="contact">
-        <section className="py-20 px-4">
-          <div className="max-w-7xl mx-auto">
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-              <div>
-                <div className="inline-flex items-center px-3 py-1 rounded-full bg-accent/20 text-accent-foreground text-sm mb-4">
-                  Get Started
-                </div>
-                <h2 className="text-3xl font-bold text-foreground mb-4">
-                  Ready to bring your vision to life?
-                </h2>
-                <p className="text-lg text-muted-foreground mb-8">
-                  Interested in collaborating on your next 3D project? Reach out directly or subscribe for updates on my latest work.
-                </p>
-                <div className="flex gap-4">
-                  <input
-                    type="email"
-                    placeholder="your@email.com"
-                    className="flex-1 px-4 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
-                  />
-                  <button className="bg-primary-cta text-primary-cta-foreground px-6 py-2 rounded-md hover:opacity-90 transition-opacity">
-                    Subscribe
-                  </button>
-                </div>
-                <p className="text-sm text-muted-foreground mt-4">
-                  We respect your privacy. Unsubscribe anytime.
-                </p>
-              </div>
-              <div>
-                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888725581-tp75ftz7.jpg" alt="Contact section" className="w-full rounded-lg" />
-              </div>
-            </div>
-          </div>
-        </section>
+        <ContactSplit
+          tag="Get Started"
+          title="Ready to bring your vision to life?"
+          description="Interested in collaborating on your next 3D project? Reach out directly or subscribe for updates on my latest work."
+          useInvertedBackground="noInvert"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888725581-tp75ftz7.jpg"
+          imageAlt="Contact section"
+          mediaPosition="right"
+          inputPlaceholder="your@email.com"
+          buttonText="Subscribe"
+          termsText="We respect your privacy. Unsubscribe anytime."
+        />
       </div>
       
       <div id="footer" data-section="footer">
-        <footer className="py-12 px-4 border-t border-border">
-          <div className="max-w-7xl mx-auto">
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
-              <div>
-                <div className="text-xl font-bold text-foreground mb-4">Ben</div>
-              </div>
-              <div>
-                <h3 className="font-semibold text-foreground mb-3">Work</h3>
-                <ul className="space-y-2">
-                  <li><a href="#gallery" className="text-muted-foreground hover:text-foreground transition-colors">Portfolio</a></li>
-                  <li><a href="#skills" className="text-muted-foreground hover:text-foreground transition-colors">Services</a></li>
-                </ul>
-              </div>
-              <div>
-                <h3 className="font-semibold text-foreground mb-3">About</h3>
-                <ul className="space-y-2">
-                  <li><a href="#about" className="text-muted-foreground hover:text-foreground transition-colors">Bio</a></li>
-                  <li><a href="#contact" className="text-muted-foreground hover:text-foreground transition-colors">Contact</a></li>
-                </ul>
-              </div>
-              <div>
-                <h3 className="font-semibold text-foreground mb-3">Connect</h3>
-                <ul className="space-y-2">
-                  <li><a href="mailto:ben@example.com" className="text-muted-foreground hover:text-foreground transition-colors">Email</a></li>
-                  <li><a href="#" className="text-muted-foreground hover:text-foreground transition-colors">ArtStation</a></li>
-                </ul>
-              </div>
-            </div>
-            <div className="mt-8 pt-8 border-t border-border text-center text-muted-foreground">
-              © 2025 Ben - 3D Artist & Blender Specialist
-            </div>
-          </div>
-        </footer>
+        <FooterSocial
+          logoText="Ben"
+          columns={[
+            {
+              title: "Work",
+              items: [
+                { label: "Portfolio", href: "gallery" },
+                { label: "Services", href: "skills" },
+              ],
+            },
+            {
+              title: "About",
+              items: [
+                { label: "Bio", href: "about" },
+                { label: "Contact", href: "contact" },
+              ],
+            },
+            {
+              title: "Connect",
+              items: [
+                { label: "Email", href: "mailto:ben@example.com" },
+                { label: "ArtStation", href: "https://artstation.com" },
+              ],
+            },
+          ]}
+          copyrightText="© 2025 Ben - 3D Artist & Blender Specialist"
+        />
       </div>
     </ThemeProvider>
   );