From eeb1efb81b6c5476b1b90d8187970d16314377de Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 20 Apr 2026 13:37:44 +0000
Subject: [PATCH] Update src/app/page.tsx

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

diff --git a/src/app/page.tsx b/src/app/page.tsx
index ef81226..1217f9f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,407 +29,159 @@ export default function LandingPage() {
         headingFontWeight="light"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "About",
-          id: "#about",
-        },
-        {
-          name: "Projects",
-          id: "#projects",
-        },
-        {
-          name: "Experience",
-          id: "#experience",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
-      ]}
-      brandName="ZD"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "About", id: "#about" },
+              { name: "Projects", id: "#projects" },
+              { name: "Experience", id: "#experience" },
+              { name: "Contact", id: "#contact" },
+            ]}
+            brandName="ZD"
+            button={{ text: "Get Started", href: "#contact" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroSplitTestimonial
-      background={{
-        variant: "plain",
-      }}
-      title="Full-stack Developer & Digital Builder"
-      description="I'm Zineeddine, a master's student in Algeria. I craft scalable, technical, and practical solutions for healthcare, e-commerce, and enterprise management."
-      testimonials={[
-        {
-          name: "Sarah Ahmed",
-          handle: "@sarah-a",
-          testimonial: "Zineeddine's technical depth is impressive. He delivered our inventory system on time and with incredible precision.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-outdoors-successful-business-person_23-2148763862.jpg",
-        },
-        {
-          name: "Omar K.",
-          handle: "@omark",
-          testimonial: "A master of systems. Our grade management platform is stable, intuitive, and extremely fast.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/experienced-senior-female-executive-eyeglasses_1262-5027.jpg",
-        },
-        {
-          name: "Layla B.",
-          handle: "@laylab",
-          testimonial: "His work on our booking app revolutionized how we handle clients. Professional, efficient, and skilled.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-busy-cheerful-man_329181-14520.jpg",
-        },
-        {
-          name: "Yassine M.",
-          handle: "@yassinem",
-          testimonial: "Practical and curious. He solved technical hurdles that other developers ignored for months.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-man-black-shirt-poses-against-dark-background-standing-studio_613910-15100.jpg",
-        },
-        {
-          name: "Kenza F.",
-          handle: "@kenzaf",
-          testimonial: "Serious about quality. The diabetes management tool we built is now our clinic's backbone.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-business-leader-window_1262-5674.jpg",
-        },
-      ]}
-      buttons={[
-        {
-          text: "View Projects",
-          href: "#projects",
-        },
-        {
-          text: "Contact Me",
-          href: "#contact",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/3d-network-connections-background-with-low-poly-plexus-design_1048-12346.jpg"
-      mediaAnimation="blur-reveal"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-bearded-man-art-studio_23-2149705893.jpg",
-          alt: "Portrait of bearded man in an art studio",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/stylish-handsome-caucasian-man-posing-looking-camera-isolated-dark-background_613910-15062.jpg",
-          alt: "A stylish handsome caucasian man posing and looking at camera isolated on a dark background.",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-young-man-studio-shot_641386-461.jpg",
-          alt: "portrait of young man. studio shot",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/businessman-close-up_1139-650.jpg",
-          alt: " businessman close up",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-attractive-young-businesswoman_329181-15813.jpg",
-          alt: "Portrait of attractive young businesswoman",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/connecting-lines-dots-with-floating-particles_1048-12013.jpg",
-          alt: "connecting lines and dots with floating particles",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/connecting-lines-dots-with-floating-particles_1048-12010.jpg",
-          alt: "connecting lines and dots with floating particles",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/3d-abstract-dots-lines-connected_1048-11946.jpg",
-          alt: "3D abstract dots and lines connected",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/3d-network-communications-data-technology-background-with-low-poly-plexus-design_1048-16344.jpg",
-          alt: "3D network communications data technology background with low poly plexus design",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/abstract-pixelated-background_23-2149547619.jpg",
-          alt: "Abstract pixelated background",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroSplitTestimonial
+            background={{ variant: "plain" }}
+            title="Full-stack Developer & Digital Builder"
+            description="I'm Zineeddine, a master's student in Algeria. I craft scalable, technical, and practical solutions for healthcare, e-commerce, and enterprise management."
+            testimonials={[
+              { name: "Sarah Ahmed", handle: "@sarah-a", testimonial: "Zineeddine's technical depth is impressive. He delivered our inventory system on time and with incredible precision.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-outdoors-successful-business-person_23-2148763862.jpg" },
+              { name: "Omar K.", handle: "@omark", testimonial: "A master of systems. Our grade management platform is stable, intuitive, and extremely fast.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/experienced-senior-female-executive-eyeglasses_1262-5027.jpg" },
+              { name: "Layla B.", handle: "@laylab", testimonial: "His work on our booking app revolutionized how we handle clients. Professional, efficient, and skilled.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-busy-cheerful-man_329181-14520.jpg" },
+              { name: "Yassine M.", handle: "@yassinem", testimonial: "Practical and curious. He solved technical hurdles that other developers ignored for months.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-man-black-shirt-poses-against-dark-background-standing-studio_613910-15100.jpg" },
+              { name: "Kenza F.", handle: "@kenzaf", testimonial: "Serious about quality. The diabetes management tool we built is now our clinic's backbone.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-business-leader-window_1262-5674.jpg" }
+            ]}
+            buttons={[
+              { text: "View Projects", href: "#projects" },
+              { text: "Contact Me", href: "#contact" }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/3d-network-connections-background-with-low-poly-plexus-design_1048-12346.jpg"
+            mediaAnimation="blur-reveal"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <AboutMetric
-      useInvertedBackground={false}
-      title="Technical Focus"
-      metrics={[
-        {
-          icon: Code,
-          label: "Dev Experience",
-          value: "4+ Years",
-        },
-        {
-          icon: Server,
-          label: "Systems Built",
-          value: "12+",
-        },
-        {
-          icon: GraduationCap,
-          label: "Academic Focus",
-          value: "Master's",
-        },
-      ]}
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <AboutMetric
+            useInvertedBackground={false}
+            title="Technical Focus"
+            metrics={[
+              { icon: Code, label: "Dev Experience", value: "4+ Years" },
+              { icon: Server, label: "Systems Built", value: "12+" },
+              { icon: GraduationCap, label: "Academic Focus", value: "Master's" }
+            ]}
+            metricsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="skills" data-section="skills">
-      <FeatureCardNineteen
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          tag: "Backend",
-          title: "Node.js & Python",
-          subtitle: "High performance",
-          description: "Building robust server-side apps, complex APIs, and database structures.",
-          imageSrc: "http://img.b2bpic.net/free-photo/computer-scientist-server-farm-ensuring-compliance-with-industry-standards_482257-123806.jpg",
-        },
-        {
-          tag: "Frontend",
-          title: "React & Native",
-          subtitle: "Modern UI/UX",
-          description: "Crafting fluid, accessible, and high-performance interfaces across platforms.",
-          imageSrc: "http://img.b2bpic.net/free-photo/male-graphic-designer-using-digital-tablet_1170-1092.jpg",
-        },
-        {
-          tag: "Tools",
-          title: "SQL & Supabase",
-          subtitle: "Data Centric",
-          description: "Optimizing queries, managing relational databases, and scaling cloud storage.",
-          imageSrc: "http://img.b2bpic.net/free-photo/businessman-solving-startup-problems-with-laptop-archived-documents-looking-annual-statistics-report-find-issue-young-analyst-reviewing-papers-executive-strategy-plan_482257-65811.jpg",
-        },
-      ]}
-      title="Core Technical Stack"
-      description="Versatile and practical: I combine backend stability with frontend elegance."
-    />
-  </div>
+        <div id="skills" data-section="skills">
+          <FeatureCardNineteen
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              { tag: "Backend", title: "Node.js & Python", subtitle: "High performance", description: "Building robust server-side apps, complex APIs, and database structures.", imageSrc: "http://img.b2bpic.net/free-photo/computer-scientist-server-farm-ensuring-compliance-with-industry-standards_482257-123806.jpg" },
+              { tag: "Frontend", title: "React & Native", subtitle: "Modern UI/UX", description: "Crafting fluid, accessible, and high-performance interfaces across platforms.", imageSrc: "http://img.b2bpic.net/free-photo/male-graphic-designer-using-digital-tablet_1170-1092.jpg" },
+              { tag: "Tools", title: "SQL & Supabase", subtitle: "Data Centric", description: "Optimizing queries, managing relational databases, and scaling cloud storage.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-solving-startup-problems-with-laptop-archived-documents-looking-annual-statistics-report-find-issue-young-analyst-reviewing-papers-executive-strategy-plan_482257-65811.jpg" }
+            ]}
+            title="Core Technical Stack"
+            description="Versatile and practical: I combine backend stability with frontend elegance."
+          />
+        </div>
 
-  <div id="projects" data-section="projects">
-      <ProductCardThree
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="bento-grid"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          name: "Clothing E-commerce",
-          price: "High Scale",
-          imageSrc: "http://img.b2bpic.net/free-photo/shopping-online-shopaholics-e-commerce-e-shopping-concept_53876-120673.jpg",
-        },
-        {
-          id: "p2",
-          name: "Healthcare Clinic Dashboard",
-          price: "Secure",
-          imageSrc: "http://img.b2bpic.net/free-photo/worker-holding-device-with-greenscreen_482257-76711.jpg",
-        },
-        {
-          id: "p3",
-          name: "Inventory Desktop App",
-          price: "Robust",
-          imageSrc: "http://img.b2bpic.net/free-photo/company-analyst-studying-business-activity-progress-achieving-strategic-goals_482257-91239.jpg",
-        },
-        {
-          id: "p4",
-          name: "Student Management System",
-          price: "Automated",
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345417.jpg",
-        },
-        {
-          id: "p5",
-          name: "Barber Booking Website",
-          price: "UX Optimized",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-laptop-with-shopping-carts-mock-up_23-2148283844.jpg",
-        },
-        {
-          id: "p6",
-          name: "Clinic Health Tool",
-          price: "Patient Focused",
-          imageSrc: "http://img.b2bpic.net/free-photo/scientists-conduct-visual-data-tests-using-chroma-key-smartphone_482257-126579.jpg",
-        },
-      ]}
-      title="Selected Case Studies"
-      description="A glimpse into systems I've built and deployed."
-    />
-  </div>
+        <div id="projects" data-section="projects">
+          <ProductCardThree
+            animationType="slide-up"
+            textboxLayout="split"
+            gridVariant="bento-grid"
+            useInvertedBackground={false}
+            products={[
+              { id: "p1", name: "Clothing E-commerce", price: "High Scale", imageSrc: "http://img.b2bpic.net/free-photo/shopping-online-shopaholics-e-commerce-e-shopping-concept_53876-120673.jpg" },
+              { id: "p2", name: "Healthcare Clinic Dashboard", price: "Secure", imageSrc: "http://img.b2bpic.net/free-photo/worker-holding-device-with-greenscreen_482257-76711.jpg" },
+              { id: "p3", name: "Inventory Desktop App", price: "Robust", imageSrc: "http://img.b2bpic.net/free-photo/company-analyst-studying-business-activity-progress-achieving-strategic-goals_482257-91239.jpg" },
+              { id: "p4", name: "Student Management System", price: "Automated", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345417.jpg" },
+              { id: "p5", name: "Barber Booking Website", price: "UX Optimized", imageSrc: "http://img.b2bpic.net/free-photo/front-view-laptop-with-shopping-carts-mock-up_23-2148283844.jpg" },
+              { id: "p6", name: "Clinic Health Tool", price: "Patient Focused", imageSrc: "http://img.b2bpic.net/free-photo/scientists-conduct-visual-data-tests-using-chroma-key-smartphone_482257-126579.jpg" }
+            ]}
+            title="Selected Case Studies"
+            description="A glimpse into systems I've built and deployed."
+          />
+        </div>
 
-  <div id="experience" data-section="experience">
-      <MetricCardOne
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="bento-grid"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          value: "2020",
-          title: "Started Dev",
-          description: "Learned HTML/CSS and JS.",
-          icon: Rocket,
-        },
-        {
-          id: "m2",
-          value: "2022",
-          title: "Full-stack Focus",
-          description: "React & Node.js mastery.",
-          icon: Zap,
-        },
-        {
-          id: "m3",
-          value: "2024",
-          title: "Master's Degree",
-          description: "Research in system design.",
-          icon: GraduationCap,
-        },
-      ]}
-      title="Timeline & Growth"
-      description="My journey from fundamental curiosity to building enterprise systems."
-    />
-  </div>
+        <div id="experience" data-section="experience">
+          <MetricCardOne
+            animationType="slide-up"
+            textboxLayout="split"
+            gridVariant="bento-grid"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "m1", value: "2020", title: "Started Dev", description: "Learned HTML/CSS and JS.", icon: Rocket },
+              { id: "m2", value: "2022", title: "Full-stack Focus", description: "React & Node.js mastery.", icon: Zap },
+              { id: "m3", value: "2024", title: "Master's Degree", description: "Research in system design.", icon: GraduationCap }
+            ]}
+            title="Timeline & Growth"
+            description="My journey from fundamental curiosity to building enterprise systems."
+          />
+        </div>
 
-  <div id="services" data-section="services">
-      <FaqDouble
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "Web Development",
-          content: "Custom responsive web apps with React and Node.js.",
-        },
-        {
-          id: "f2",
-          title: "Desktop Software",
-          content: "Powerful desktop apps using C# and .NET.",
-        },
-        {
-          id: "f3",
-          title: "Healthcare Systems",
-          content: "Secure, reliable, and compliant healthcare management software.",
-        },
-        {
-          id: "f4",
-          title: "E-commerce Platforms",
-          content: "Full-stack stores optimized for performance and conversion.",
-        },
-      ]}
-      title="Services Offered"
-      description="What can I build for you?"
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="services" data-section="services">
+          <FaqDouble
+            textboxLayout="split"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "f1", title: "Web Development", content: "Custom responsive web apps with React and Node.js." },
+              { id: "f2", title: "Desktop Software", content: "Powerful desktop apps using C# and .NET." },
+              { id: "f3", title: "Healthcare Systems", content: "Secure, reliable, and compliant healthcare management software." },
+              { id: "f4", title: "E-commerce Platforms", content: "Full-stack stores optimized for performance and conversion." }
+            ]}
+            title="Services Offered"
+            description="What can I build for you?"
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Sarah Ahmed",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-wearing-apron_23-2149007471.jpg",
-        },
-        {
-          id: "t2",
-          name: "Omar K.",
-          imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg",
-        },
-        {
-          id: "t3",
-          name: "Layla B.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-desk_329181-14546.jpg",
-        },
-        {
-          id: "t4",
-          name: "Yassine M.",
-          imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg",
-        },
-        {
-          id: "t5",
-          name: "Kenza F.",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453360.jpg",
-        },
-      ]}
-      cardTitle="What They Say"
-      cardTag="Feedback"
-      cardAnimation="slide-up"
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardTwelve
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "t1", name: "Sarah Ahmed", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-wearing-apron_23-2149007471.jpg" },
+              { id: "t2", name: "Omar K.", imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg" },
+              { id: "t3", name: "Layla B.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-desk_329181-14546.jpg" },
+              { id: "t4", name: "Yassine M.", imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg" },
+              { id: "t5", name: "Kenza F.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453360.jpg" }
+            ]}
+            cardTitle="What They Say"
+            cardTag="Feedback"
+            cardAnimation="slide-up"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={false}
-      background={{
-        variant: "radial-gradient",
-      }}
-      tag="Let's Talk"
-      title="Build Something Remarkable"
-      description="I'm always open to discussing new projects, technical challenges, or potential collaborations."
-      buttons={[
-        {
-          text: "Email Me",
-          href: "mailto:zineeddine@example.com",
-        },
-        {
-          text: "GitHub Profile",
-          href: "https://github.com",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            useInvertedBackground={false}
+            background={{ variant: "radial-gradient" }}
+            tag="Let's Talk"
+            title="Build Something Remarkable"
+            description="I'm always open to discussing new projects, technical challenges, or potential collaborations."
+            buttons={[
+              { text: "Email Me", href: "mailto:zineeddine@example.com" },
+              { text: "GitHub Profile", href: "https://github.com" }
+            ]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-301826.jpg"
-      logoText="ZD"
-      columns={[
-        {
-          title: "Navigate",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Projects",
-              href: "#projects",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          title: "Social",
-          items: [
-            {
-              label: "GitHub",
-              href: "https://github.com",
-            },
-            {
-              label: "LinkedIn",
-              href: "https://linkedin.com",
-            },
-          ],
-        },
-      ]}
-      copyrightText="© 2025 Zineeddine Abdelbaki Daoudi."
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-301826.jpg"
+            logoText="ZD"
+            columns={[
+              { title: "Navigate", items: [{ label: "About", href: "#about" }, { label: "Projects", href: "#projects" }, { label: "Contact", href: "#contact" }] },
+              { title: "Social", items: [{ label: "GitHub", href: "https://github.com" }, { label: "LinkedIn", href: "https://linkedin.com" }] }
+            ]}
+            copyrightText="© 2025 Zineeddine Abdelbaki Daoudi."
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1