Update src/app/page.tsx

Merge version_16 into main

src/app/page.tsx

@@ -5,13 +5,12 @@ import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import { CheckCircle, Gauge, Monitor, Sparkles, Star, TrendingUp, Zap } from "lucide-react";
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import { Gauge, Monitor, Sparkles, TrendingUp, Zap, CheckCircle } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -21,7 +20,7 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="mediumSmall"
         sizing="mediumLarge"
-        background="noiseDiagonalGradient"
+        background="none"
         cardStyle="soft-shadow"
         primaryButtonStyle="flat"
         secondaryButtonStyle="radial-glow"
@@ -32,19 +31,19 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "Home",          id: "#home"},
+          name: "Home",          id: "home"},
         {
-          name: "About",          id: "#about"},
+          name: "About",          id: "about"},
         {
-          name: "Work",          id: "#work"},
+          name: "Work",          id: "work"},
         {
-          name: "Clients",          id: "#clients"},
+          name: "How It Works",          id: "how-it-works"},
         {
-          name: "Testimonials",          id: "#testimonials"},
+          name: "Clients",          id: "clients"},
         {
-          name: "Contact",          id: "#contact"},
+          name: "Contact",          id: "contact"},
       ]}
-      brandName="My Portfolio"
+      brandName=""
     />
   </div>
 
@@ -53,54 +52,32 @@ export default function LandingPage() {
       background={{
         variant: "radial-gradient"}}
       imagePosition="right"
-      title="Crafting Digital Experiences That Convert"
-      description="I design and build high-converting websites and digital products that drive results. Let's create something impactful together."
-      kpis={[
-        {
-          value: "100+",          label: "Projects Completed"},
-        {
-          value: "95%",          label: "Client Satisfaction"},
-        {
-          value: "3X",          label: "Conversion Lift"},
-      ]}
+      title="When people Google your shop, what do they find?"
+      description="I design and build high-converting websites and digital products that drive results. Let's create something impactful together. You can reach me directly at ibkhen99@gmail.com."
       enableKpiAnimation={true}
-      buttons={[
-        {
-          text: "View My Work",          href: "#work"},
-        {
-          text: "Get in Touch",          href: "#contact"},
+      kpis={[
+        { value: "95%", label: "Improved Search Rankings" },
+        { value: "3X", label: "Conversion Rate Increase" },
+        { value: "50+", label: "Happy Clients" }
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EvEZbugZJMMJKmRQ7QXba2nKnk/tmp/can-you-generate-a-picture-of-a-pc-setup-1781137469840-24fc73da.jpg"
-      imageAlt="Professional portrait of a web designer in a suit"
+      imageAlt="Professional headshot of a web designer"
       mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg",          alt: "Smiling blonde businesswoman"},
-        {
-          src: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-13618.jpg",          alt: "Blonde business woman with eyeglasses"},
-        {
-          src: "http://img.b2bpic.net/free-photo/content-caucasian-businesswoman-standing-with-folded-hands-portrait-confident-adult-beautiful-female-office-employer-black-blouse-posing-work-business-company-management-concept_74855-6952.jpg",          alt: "Caucasian businesswoman standing with folded hands"},
-        {
-          src: "http://img.b2bpic.net/free-photo/confident-young-businesswoman-with-folded-arms_1262-1775.jpg",          alt: "Young businesswoman with folded arms"},
-        {
-          src: "http://img.b2bpic.net/free-photo/businesswoman-with-black-glasses_1098-523.jpg",          alt: "Businesswoman with black glasses"},
-      ]}
-      avatarText="Trusted by 100+ clients "
       marqueeItems={[
         {
-          type: "text-icon",          text: "Innovation",          icon: Sparkles,
+          type: "text-icon",          text: "Innovation",          icon: Sparkles
         },
         {
-          type: "text-icon",          text: "Efficiency",          icon: Gauge,
+          type: "text-icon",          text: "Efficiency",          icon: Gauge
         },
         {
-          type: "text-icon",          text: "User Experience",          icon: Monitor,
+          type: "text-icon",          text: "User Experience",          icon: Monitor
         },
         {
-          type: "text-icon",          text: "Scalability",          icon: TrendingUp,
+          type: "text-icon",          text: "Scalability",          icon: TrendingUp
         },
         {
-          type: "text-icon",          text: "Performance",          icon: Zap,
+          type: "text-icon",          text: "Performance",          icon: Zap
         },
       ]}
       marqueeSpeed={40}
@@ -109,36 +86,25 @@ export default function LandingPage() {
   </div>
 
   <div id="about" data-section="about">
-      <TextSplitAbout
+      <SplitAbout
       useInvertedBackground={true}
-      title="A Passion for Pixel-Perfect Performance"
-      description={[
-        "As a dedicated web designer and developer, I specialize in transforming complex ideas into intuitive, aesthetically pleasing, and highly functional digital solutions. My approach combines strategic thinking with meticulous execution to ensure every project not only looks exceptional but also achieves its business objectives.",        "With years of experience across various industries, I've honed my skills in creating responsive, high-performance websites and user-centric applications. I thrive on problem-solving and am committed to staying at the forefront of design and development trends to deliver cutting-edge results for my clients." ]}
+      imagePosition="right"
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EvEZbugZJMMJKmRQ7QXba2nKnk/uploaded-1781143312703-guy0l1k6.png"
+      imageAlt="Headshot of Ibrahim, a local web designer"
+      mediaAnimation="slide-up"
+      title="Why a local guy and not some company?"
+      description="Choosing a local guy like me over a big company means you get dedicated, personalized attention from someone deeply invested in your business's success. I bring years of experience to transform complex ideas into intuitive, high-converting digital solutions, offering strategic thinking and meticulous execution without the overheads or impersonal service of a large agency."
+      buttons={[]}
+      buttonAnimation="slide-up"
+      textboxLayout="default"
+      bulletPoints={[
+        { title: "Personalized Service", description: "Dedicated, one-on-one attention ensures your vision is perfectly realized.", icon: CheckCircle },
+        { title: "Proven Expertise", description: "Years of experience delivering high-converting, intuitive digital solutions.", icon: CheckCircle },
+        { title: "Cost-Effective", description: "Achieve premium results without the hefty overhead of large agencies.", icon: CheckCircle }
+      ]}
     />
   </div>
 
-  <div id="achievements" data-section="achievements">
-      <MetricCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      carouselMode="buttons"
-      metrics={[
-        {
-          id: "m1",          value: "100+",          title: "Successful Projects",          description: "Delivering exceptional web experiences for diverse clients.",          icon: CheckCircle,
-        },
-        {
-          id: "m2",          value: "98%",          title: "Client Satisfaction",          description: "Building strong relationships through reliable and impactful work.",          icon: Star,
-        },
-        {
-          id: "m3",          value: "+30%",          title: "Average Conversion Lift",          description: "Optimizing designs and user flows for measurable growth.",          icon: TrendingUp,
-        },
-      ]}
-      title="My Impact, Quantified"
-      description="Real results from real projects. See the difference my expertise makes in driving success for clients."
-    />
-  </div>
 
   <div id="work" data-section="work">
       <ProductCardTwo
@@ -166,32 +132,33 @@ export default function LandingPage() {
           id: "p6",          brand: "",          name: "Roofing Project ",          price: "",          rating: 5,
           reviewCount: "15",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EvEZbugZJMMJKmRQ7QXba2nKnk/uploaded-1781134689001-yl8r30sw.png",          imageAlt: "Restaurant Online Ordering"},
       ]}
-      title="Showcasing My Award-Winning Web Projects"
+      title="showcasing my web projects"
       description="Explore a selection of high-performing websites I've designed and developed for clients across various industries."
     />
   </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFive
+  <div id="how-it-works" data-section="how-it-works">
+    <FeatureCardTwelve
+      animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
-      testimonials={[
+      title="How It Works"
+      description="My simple, transparent process to get your shop found online, from initial look to ongoing success."
+      features={[
         {
-          id: "1",          name: "Sarah Johnson",          date: "April 2026",          title: "Exceptional Vision & Execution",          quote: "Working with Ibrahim was a game-changer for our online presence. Their ability to translate our vision into a high-performing website exceeded all expectations. We saw immediate improvements in user engagement and conversions.",          tag: "SaaS Startup",          avatarSrc: "http://img.b2bpic.net/free-photo/serious-beautiful-businesswoman-standing-window_1262-1913.jpg",          avatarAlt: "Sarah Johnson avatar",          imageSrc: "http://img.b2bpic.net/free-photo/wooden-workspace-design_1048-1772.jpg",          imageAlt: "Team collaboration"},
+          id: "step1",          label: "Step 1",          title: "Look First",          items: ["I conduct a thorough analysis of your current online presence and business goals to identify opportunities."]
+        },
         {
-          id: "2",          name: "Michael Chen",          date: "February 2026",          title: "Strategic Design Partner",          quote: "Ibrahim is not just a designer; they're a strategic partner. Their insights into user experience and conversion optimization were invaluable. Our new platform is not only beautiful but incredibly effective.",          tag: "Fintech Company",          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg",          avatarAlt: "Michael Chen avatar",          imageSrc: "http://img.b2bpic.net/free-photo/empty-startup-office-displays-statistics_482257-119484.jpg",          imageAlt: "Data analytics dashboard"},
+          id: "step2",          label: "Step 2",          title: "$50 and It's Live",          items: ["A streamlined setup process gets a foundational, high-quality online presence up and running quickly for a minimal initial investment."]
+        },
         {
-          id: "3",          name: "Emily Rodriguez",          date: "January 2026",          title: "Flawless Execution",          quote: "The attention to detail and commitment to quality from Ibrahim are truly remarkable. Our project was delivered on time, within budget, and with flawless execution. Highly recommended!",          tag: "Marketing Agency",          avatarSrc: "http://img.b2bpic.net/free-photo/upbeat-saleswoman-hired-explain-vehicle-pricing-options-clients_482257-118422.jpg",          avatarAlt: "Emily Rodriguez avatar",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-chatting-desk_23-2149345216.jpg",          imageAlt: "Creative brainstorming"},
-        {
-          id: "4",          name: "David Kim",          date: "April 2026",          title: "Beyond Expectations",          quote: "I've worked with many developers, but Ibrahim's dedication stands out. They went above and beyond to ensure every feature functioned perfectly and that the design was pixel-perfect. A true professional.",          tag: "E-commerce Brand",          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-employee-happy-be-back-work_23-2148727616.jpg",          avatarAlt: "David Kim avatar",          imageSrc: "http://img.b2bpic.net/free-photo/people-innovations-technology-businesspeople-studying-financial-data-touch-pad-pc-with-concentrated-look_273609-5536.jpg",          imageAlt: "Developers coding"},
-        {
-          id: "5",          name: "Jessica Lee",          date: "May 2026 ",          title: "Transformative Results",          quote: "Our old website was underperforming. Ibrahim transformed it into a modern, high-converting machine. The results speak for themselves: increased traffic, engagement, and sales!",          tag: "Consulting Firm",          avatarSrc: "http://img.b2bpic.net/free-photo/smiley-professional-businesswoman-with-glasses-presentation_23-2148824824.jpg",          avatarAlt: "Jessica Lee avatar",          imageSrc: "http://img.b2bpic.net/free-photo/executives-greeting-each-other_1098-2853.jpg",          imageAlt: "Business meeting"},
+          id: "step3",          label: "Step 3",          title: "$75/Month, Never Think About It",          items: ["Enjoy ongoing maintenance, updates, and optimization without any hassle, ensuring your site always performs at its best."]
+        }
       ]}
-      title="What My Clients Say"
-      description="Hear directly from clients who have experienced the impact of my design and development work."
     />
   </div>
 
+
   <div id="clients" data-section="clients">
       <SocialProofOne
       textboxLayout="default"
@@ -233,10 +200,14 @@ export default function LandingPage() {
             {
               label: "Development",              href: "#work"},
             {
-              label: "UI/UX Strategy",              href: "#about"},
+            label: "UI/UX Strategy",              href: "#about"},
             {
               label: "Consulting",              href: "#contact"},
-          ],
+            {
+              label: "How It Works",              href: "#how-it-works"},
+            {
+              label: "Email: ibkhen99@gmail.com",              href: "mailto:ibkhen99@gmail.com"}
+          ]
         },
         {
           title: "Company",          items: [
@@ -245,21 +216,9 @@ export default function LandingPage() {
             {
               label: "Portfolio",              href: "#work"},
             {
-              label: "Testimonials",              href: "#testimonials"},
-            {
-              label: "Contact",              href: "#contact"},
-          ],
-        },
-        {
-          title: "Social",          items: [
-            {
-              label: "LinkedIn",              href: "#"},
-            {
-              label: "Twitter",              href: "#"},
-            {
-              label: "Behance",              href: "#"},
-          ],
-        },
+              label: "Contact",              href: "#contact"}
+          ]
+        }
       ]}
       bottomLeftText="© 2024 Ibrahim. All rights reserved."
       bottomRightText="Built with Webild."