From e570b13ba9e4ed43f9063c665de0d4344e521dbe Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 23 May 2026 00:54:16 +0000
Subject: [PATCH] Update src/app/page.tsx

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

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 34d9713..a85d591 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,366 +16,163 @@ import { Cloud, Code, RefreshCw, Server, ShieldCheck } from "lucide-react";
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="shift-hover"
-        defaultTextAnimation="background-highlight"
-        borderRadius="pill"
-        contentWidth="compact"
-        sizing="mediumLargeSizeLargeTitles"
-        background="floatingGradient"
-        cardStyle="inset"
-        primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="glass"
-        headingFontWeight="light"
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="compact"
+      sizing="mediumLargeSizeLargeTitles"
+      background="floatingGradient"
+      cardStyle="inset"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="light"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "About",
-          id: "#about",
-        },
-        {
-          name: "Experience",
-          id: "#experience",
-        },
-        {
-          name: "Skills",
-          id: "#skills",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
-      ]}
-      brandName="Rami Zeaiter"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "About", id: "#about" },
+              { name: "Experience", id: "#experience" },
+              { name: "Skills", id: "#skills" },
+              { name: "Contact", id: "#contact" },
+            ]}
+            brandName="Rami Zeaiter"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroSplitKpi
-      background={{
-        variant: "plain",
-      }}
-      title="Senior Full-Stack Engineer"
-      description="13+ years of building scalable web systems. Specializing in Java, Node.js, and React architecture. Open to high-impact hybrid and on-site roles in Germany."
-      kpis={[
-        {
-          value: "13+",
-          label: "Years Experience",
-        },
-        {
-          value: "50+",
-          label: "Projects Delivered",
-        },
-        {
-          value: "5",
-          label: "Languages Spoken",
-        },
-      ]}
-      enableKpiAnimation={true}
-      buttons={[
-        {
-          text: "View Experience",
-          href: "#about",
-        },
-        {
-          text: "Contact Me",
-          href: "#contact",
-        },
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E6SXp9kUTzHHdscuhBMEZGTEdU/uploaded-1779497600307-296y5fei.jpg?_wi=1"
-      mediaAnimation="blur-reveal"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/confident-pretty-young-woman-looking-camera_1262-16156.jpg",
-          alt: "Team member 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-posing_23-2149271087.jpg",
-          alt: "Team member 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/confident-handsome-businessman-suit-glasses-looking-serious_176420-31755.jpg",
-          alt: "Team member 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/fashionable-successful-female-entrepreneur-grey-coat-glasses-standing-half-turned-with-hands-pockets-smiling-friendly_176420-24691.jpg",
-          alt: "Team member 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5391.jpg",
-          alt: "Team member 5",
-        },
-      ]}
-      avatarText="Trusted by engineering leads across global teams"
-      marqueeItems={[
-        {
-          type: "text-icon",
-          text: "Full-Stack Web",
-          icon: Code,
-        },
-        {
-          type: "text-icon",
-          text: "Cloud Infra",
-          icon: Cloud,
-        },
-        {
-          type: "text-icon",
-          text: "Enterprise Apps",
-          icon: Server,
-        },
-        {
-          type: "text-icon",
-          text: "CI/CD Pipeline",
-          icon: RefreshCw,
-        },
-        {
-          type: "text-icon",
-          text: "Secure Systems",
-          icon: ShieldCheck,
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroSplitKpi
+            background={{ variant: "plain" }}
+            title="Senior Full-Stack Engineer"
+            description="13+ years of building scalable web systems. Specializing in Java, Node.js, and React architecture. Open to high-impact hybrid and on-site roles in Germany."
+            kpis={[
+              { value: "13+", label: "Years Experience" },
+              { value: "50+", label: "Projects Delivered" },
+              { value: "5", label: "Languages Spoken" },
+            ]}
+            enableKpiAnimation={true}
+            buttons={[
+              { text: "View Experience", href: "#about" },
+              { text: "Contact Me", href: "#contact" },
+            ]}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E6SXp9kUTzHHdscuhBMEZGTEdU/uploaded-1779497600307-296y5fei.jpg"
+            mediaAnimation="blur-reveal"
+            avatars={[
+              { src: "http://img.b2bpic.net/free-photo/confident-pretty-young-woman-looking-camera_1262-16156.jpg", alt: "Team member 1" },
+              { src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-posing_23-2149271087.jpg", alt: "Team member 2" },
+              { src: "http://img.b2bpic.net/free-photo/confident-handsome-businessman-suit-glasses-looking-serious_176420-31755.jpg", alt: "Team member 3" },
+              { src: "http://img.b2bpic.net/free-photo/fashionable-successful-female-entrepreneur-grey-coat-glasses-standing-half-turned-with-hands-pockets-smiling-friendly_176420-24691.jpg", alt: "Team member 4" },
+              { src: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5391.jpg", alt: "Team member 5" },
+            ]}
+            avatarText="Trusted by engineering leads across global teams"
+            marqueeItems={[
+              { type: "text-icon", text: "Full-Stack Web", icon: Code },
+              { type: "text-icon", text: "Cloud Infra", icon: Cloud },
+              { type: "text-icon", text: "Enterprise Apps", icon: Server },
+              { type: "text-icon", text: "CI/CD Pipeline", icon: RefreshCw },
+              { type: "text-icon", text: "Secure Systems", icon: ShieldCheck },
+            ]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <MetricSplitMediaAbout
-      useInvertedBackground={true}
-      title="Building Reliable Systems"
-      description="From Web3 gaming platforms to car rental marketplaces, I design software that scales. My focus is on maintainable architecture and end-to-end product delivery using modern full-stack methodologies."
-      metrics={[
-        {
-          value: "Cloud",
-          title: "Scalable Infra",
-        },
-        {
-          value: "Web3",
-          title: "Blockchain Integration",
-        },
-        {
-          value: "SAP",
-          title: "Enterprise Solutions",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/mature-businesswoman-working-with-documents-while-sitting-her-workplace_171337-5895.jpg?_wi=1"
-      mediaAnimation="slide-up"
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <MetricSplitMediaAbout
+            useInvertedBackground={true}
+            title="Building Reliable Systems"
+            description="From Web3 gaming platforms to car rental marketplaces, I design software that scales. My focus is on maintainable architecture and end-to-end product delivery using modern full-stack methodologies."
+            metrics={[
+              { value: "Cloud", title: "Scalable Infra" },
+              { value: "Web3", title: "Blockchain Integration" },
+              { value: "SAP", title: "Enterprise Solutions" },
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/mature-businesswoman-working-with-documents-while-sitting-her-workplace_171337-5895.jpg"
+            mediaAnimation="slide-up"
+            metricsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="skills" data-section="skills">
-      <FeatureCardTwentyThree
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "s1",
-          title: "Full-Stack Web",
-          tags: [
-            "React",
-            "Next.js",
-            "Node.js",
-            "Java",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/gear-front-side-white-background_187299-40157.jpg?_wi=1",
-        },
-        {
-          id: "s2",
-          title: "Mobile & Enterprise",
-          tags: [
-            "Flutter",
-            "React Native",
-            "SAP S/4HANA",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-vector/infographic-element-collection_23-2147526468.jpg?_wi=1",
-        },
-        {
-          id: "s3",
-          title: "DevOps & Data",
-          tags: [
-            "Docker",
-            "CI/CD",
-            "SQL/NoSQL",
-            "Git",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-vector/20-data-management-data-organization-solid-glyph-icon-presentation_1142-25739.jpg?_wi=1",
-        },
-      ]}
-      title="Technical Expertise"
-      description="Comprehensive engineering stack spanning frontend, mobile, backend, and infrastructure."
-    />
-  </div>
+        <div id="skills" data-section="skills">
+          <FeatureCardTwentyThree
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              { id: "s1", title: "Full-Stack Web", tags: ["React", "Next.js", "Node.js", "Java"], imageSrc: "http://img.b2bpic.net/free-photo/gear-front-side-white-background_187299-40157.jpg" },
+              { id: "s2", title: "Mobile & Enterprise", tags: ["Flutter", "React Native", "SAP S/4HANA"], imageSrc: "http://img.b2bpic.net/free-vector/infographic-element-collection_23-2147526468.jpg" },
+              { id: "s3", title: "DevOps & Data", tags: ["Docker", "CI/CD", "SQL/NoSQL", "Git"], imageSrc: "http://img.b2bpic.net/free-vector/20-data-management-data-organization-solid-glyph-icon-presentation_1142-25739.jpg" },
+            ]}
+            title="Technical Expertise"
+            description="Comprehensive engineering stack spanning frontend, mobile, backend, and infrastructure."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardTwo
-      textboxLayout="default"
-      gridVariant="bento-grid"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",
-          value: "100%",
-          description: "System Availability",
-        },
-        {
-          id: "m2",
-          value: "30%",
-          description: "Query Optimization",
-        },
-        {
-          id: "m3",
-          value: "24/7",
-          description: "Production Support",
-        },
-      ]}
-      title="Professional Impact"
-      description="Performance-driven results across international projects."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardTwo
+            textboxLayout="default"
+            gridVariant="bento-grid"
+            animationType="blur-reveal"
+            useInvertedBackground={true}
+            metrics={[
+              { id: "m1", value: "100%", description: "System Availability" },
+              { id: "m2", value: "30%", description: "Query Optimization" },
+              { id: "m3", value: "24/7", description: "Production Support" },
+            ]}
+            title="Professional Impact"
+            description="Performance-driven results across international projects."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFive
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Alex B.",
-          date: "2024",
-          title: "Project Lead",
-          quote: "Rami's architectural input was instrumental in our platform's scalability.",
-          tag: "Web3",
-          avatarSrc: "http://img.b2bpic.net/free-photo/side-view-business-woman-posing_23-2149457762.jpg",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E6SXp9kUTzHHdscuhBMEZGTEdU/uploaded-1779497600307-296y5fei.jpg?_wi=2",
-          imageAlt: "professional headshot executive studio",
-        },
-        {
-          id: "t2",
-          name: "Sarah L.",
-          date: "2023",
-          title: "Product Owner",
-          quote: "Reliable, detail-oriented, and a true team player. Highly recommended.",
-          tag: "Enterprise",
-          avatarSrc: "http://img.b2bpic.net/free-photo/successful-senior-businesswoman-eyeglasses_1262-5856.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/mature-businesswoman-working-with-documents-while-sitting-her-workplace_171337-5895.jpg?_wi=2",
-          imageAlt: "professional headshot executive studio",
-        },
-        {
-          id: "t3",
-          name: "Marcus S.",
-          date: "2024",
-          title: "CTO",
-          quote: "Exceptional full-stack capabilities, especially in complex backend systems.",
-          tag: "SaaS",
-          avatarSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/gear-front-side-white-background_187299-40157.jpg?_wi=2",
-          imageAlt: "professional headshot executive studio",
-        },
-        {
-          id: "t4",
-          name: "Elena P.",
-          date: "2023",
-          title: "Head of Engineering",
-          quote: "His work on our mobile infrastructure significantly reduced technical debt.",
-          tag: "Mobile",
-          avatarSrc: "http://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",
-          imageSrc: "http://img.b2bpic.net/free-vector/infographic-element-collection_23-2147526468.jpg?_wi=2",
-          imageAlt: "professional headshot executive studio",
-        },
-        {
-          id: "t5",
-          name: "John D.",
-          date: "2024",
-          title: "Founder",
-          quote: "A versatile developer who understands both business and technical needs.",
-          tag: "Consulting",
-          avatarSrc: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg",
-          imageSrc: "http://img.b2bpic.net/free-vector/20-data-management-data-organization-solid-glyph-icon-presentation_1142-25739.jpg?_wi=2",
-          imageAlt: "professional headshot executive studio",
-        },
-      ]}
-      title="Professional Validation"
-      description="Proven track record in leadership and technical delivery."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardFive
+            textboxLayout="default"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "t1", name: "Alex B.", date: "2024", title: "Project Lead", quote: "Rami's architectural input was instrumental in our platform's scalability.", tag: "Web3", avatarSrc: "http://img.b2bpic.net/free-photo/side-view-business-woman-posing_23-2149457762.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E6SXp9kUTzHHdscuhBMEZGTEdU/uploaded-1779497600307-296y5fei.jpg", imageAlt: "professional headshot executive studio" },
+              { id: "t2", name: "Sarah L.", date: "2023", title: "Product Owner", quote: "Reliable, detail-oriented, and a true team player. Highly recommended.", tag: "Enterprise", avatarSrc: "http://img.b2bpic.net/free-photo/successful-senior-businesswoman-eyeglasses_1262-5856.jpg", imageSrc: "http://img.b2bpic.net/free-photo/mature-businesswoman-working-with-documents-while-sitting-her-workplace_171337-5895.jpg", imageAlt: "professional headshot executive studio" },
+              { id: "t3", name: "Marcus S.", date: "2024", title: "CTO", quote: "Exceptional full-stack capabilities, especially in complex backend systems.", tag: "SaaS", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", imageSrc: "http://img.b2bpic.net/free-photo/gear-front-side-white-background_187299-40157.jpg", imageAlt: "professional headshot executive studio" },
+              { id: "t4", name: "Elena P.", date: "2023", title: "Head of Engineering", quote: "His work on our mobile infrastructure significantly reduced technical debt.", tag: "Mobile", avatarSrc: "http://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg", imageSrc: "http://img.b2bpic.net/free-vector/infographic-element-collection_23-2147526468.jpg", imageAlt: "professional headshot executive studio" },
+              { id: "t5", name: "John D.", date: "2024", title: "Founder", quote: "A versatile developer who understands both business and technical needs.", tag: "Consulting", avatarSrc: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg", imageSrc: "http://img.b2bpic.net/free-vector/20-data-management-data-organization-solid-glyph-icon-presentation_1142-25739.jpg", imageAlt: "professional headshot executive studio" },
+            ]}
+            title="Professional Validation"
+            description="Proven track record in leadership and technical delivery."
+          />
+        </div>
 
-  <div id="social" data-section="social">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={true}
-      names={[
-        "SAP",
-        "AWS",
-        "Google Cloud",
-        "IBM",
-        "Solana",
-        "Spring Boot",
-        "Docker",
-      ]}
-      title="Ecosystem Exposure"
-      description="Collaborations and environments experienced throughout my career."
-    />
-  </div>
+        <div id="social" data-section="social">
+          <SocialProofOne
+            textboxLayout="default"
+            useInvertedBackground={true}
+            names={["SAP", "AWS", "Google Cloud", "IBM", "Solana", "Spring Boot", "Docker"]}
+            title="Ecosystem Exposure"
+            description="Collaborations and environments experienced throughout my career."
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={false}
-      background={{
-        variant: "radial-gradient",
-      }}
-      tag="Hire Me"
-      title="Open to New Opportunities"
-      description="Currently based in Bochum, Germany. Ready to contribute to your hybrid or on-site engineering team."
-      buttons={[
-        {
-          text: "Email Rami",
-          href: "mailto:ramizaiter1989@gmail.com",
-        },
-        {
-          text: "LinkedIn Profile",
-          href: "https://linkedin.com/in/rami-zeaiter-freelancer-software-developer",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            useInvertedBackground={false}
+            background={{ variant: "radial-gradient" }}
+            tag="Hire Me"
+            title="Open to New Opportunities"
+            description="Currently based in Bochum, Germany. Ready to contribute to your hybrid or on-site engineering team."
+            buttons={[
+              { text: "Email Rami", href: "mailto:ramizaiter1989@gmail.com" },
+              { text: "LinkedIn Profile", href: "https://linkedin.com/in/rami-zeaiter-freelancer-software-developer" },
+            ]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E6SXp9kUTzHHdscuhBMEZGTEdU/uploaded-1779497600307-296y5fei.jpg?_wi=3"
-      logoText="Rami Zeaiter"
-      columns={[
-        {
-          title: "Navigation",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Skills",
-              href: "#skills",
-            },
-          ],
-        },
-        {
-          title: "Connect",
-          items: [
-            {
-              label: "LinkedIn",
-              href: "https://linkedin.com/in/rami-zeaiter-freelancer-software-developer",
-            },
-            {
-              label: "GitHub",
-              href: "https://github.com/ramizaiter1989",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E6SXp9kUTzHHdscuhBMEZGTEdU/uploaded-1779497600307-296y5fei.jpg"
+            logoText="Rami Zeaiter"
+            columns={[
+              { title: "Navigation", items: [{ label: "About", href: "#about" }, { label: "Skills", href: "#skills" }] },
+              { title: "Connect", items: [{ label: "LinkedIn", href: "https://linkedin.com/in/rami-zeaiter-freelancer-software-developer" }, { label: "GitHub", href: "https://github.com/ramizaiter1989" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file