From 415dbd397f0b012a4248125db3b87a97fe64714f Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 13 Mar 2026 15:52:36 +0000
Subject: [PATCH 1/4] Update src/app/about/page.tsx

---
 src/app/about/page.tsx | 167 +++++++++++++++++++++++++++--------------
 1 file changed, 110 insertions(+), 57 deletions(-)

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index c513743..6df6f9b 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,24 +1,24 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
-import HeroBillboard from "@/components/sections/hero/HeroBillboard";
-import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
-import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
-import ContactFaq from "@/components/sections/contact/ContactFaq";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import Link from "next/link";
-import { BookOpen, Target, Eye, CheckCircle, ArrowRight, Zap } from "lucide-react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Smartphone, Zap, MapPin, Target, AlertCircle, TrendingUp, CheckCircle, Eye, Mail, Sparkles, Lightbulb, Users, Rocket } from 'lucide-react';
+
+const navItems = [
+  { name: "Services", id: "services" },
+  { name: "Work", id: "work" },
+  { name: "About", id: "about" },
+  { name: "Pricing", id: "pricing" },
+  { name: "Contact", id: "contact" },
+];
 
 export default function AboutPage() {
-  const navItems = [
-    { name: "Services", id: "services" },
-    { name: "Work", id: "work" },
-    { name: "About", id: "about" },
-    { name: "Pricing", id: "pricing" },
-    { name: "Contact", id: "contact" },
-  ];
-
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -32,86 +32,139 @@ export default function AboutPage() {
       secondaryButtonStyle="layered"
       headingFontWeight="light"
     >
+      {/* Navbar */}
       <div id="nav" data-section="nav">
-        <NavbarStyleApple
+        <NavbarStyleApple 
           brandName="Elevate Web"
           navItems={navItems}
         />
       </div>
 
+      {/* Hero Section */}
       <div id="hero-about" data-section="hero-about">
         <HeroBillboard
-          title="Built by an Athlete. Designed for Results."
-          description="Elevate Web is a small studio with a performance mindset—clarity, discipline, and measurable outcomes."
+          title="We Build Websites That Generate More Leads"
+          description="Elevate Web is focused on one goal: creating conversion-optimized websites for gyms, sports clubs, and coaches that look premium, load fast, and drive inquiries."
           background={{ variant: "gradient-bars" }}
           buttons={[
             {
-              text: "Book a Free Website Review",              href: "/contact"},
+              text: "Book a Free Review",              href: "/contact"
+            }
           ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=10wr5n"
-          imageAlt="Elevate Web founder"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qkozd5&_wi=1"
+          imageAlt="Elevate Web team designing premium websites"
           mediaAnimation="slide-up"
         />
       </div>
 
-      <div id="about-content" data-section="about-content">
-        <TestimonialAboutCard
-          tag="Our Story"
-          tagIcon={BookOpen}
-          tagAnimation="slide-up"
+      {/* Our Mission Section */}
+      <div id="mission-about" data-section="mission-about">
+        <MetricSplitMediaAbout
           title="Why Elevate Web Exists"
-          description="Most gyms and sports businesses have outdated sites that don't reflect the quality of their service."
-          subdescription="We build modern websites that make it easy for visitors to understand your offer and take action. No fluff, no jargon—just results."
-          icon={Target}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qgmuof&_wi=2"
-          imageAlt="Modern gym facility representing quality service"
+          description="Most fitness businesses are stuck with slow, unclear websites that leak leads. We fix that by building fast, focused sites designed to convert."
+          tag="Our Mission"
+          tagIcon={Lightbulb}
+          tagAnimation="slide-up"
+          metrics={[
+            {
+              value: "1–3 weeks",              title: "Fast builds"
+            },
+            {
+              value: "100% conversion-focused",              title: "Every page designed to drive action"
+            },
+            {
+              value: "Premium results",              title: "No templates, no bloat"
+            }
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c4z8f9"
+          imageAlt="Our approach to building conversion-focused websites"
           mediaAnimation="slide-up"
+          metricsAnimation="slide-up"
           useInvertedBackground={false}
         />
       </div>
 
-      <div id="about-values" data-section="about-values">
-        <MetricCardOne
-          title="Our Approach"
-          description="Three principles that guide every project."
-          gridVariant="uniform-all-items-equal"
+      {/* Our Process Section */}
+      <div id="process-about" data-section="process-about">
+        <FeatureCardSeven
+          title="How We Build Your Website"
+          description="A clear, focused process designed to ship fast without compromise."
+          tag="The Process"
+          tagIcon={Rocket}
+          tagAnimation="slide-up"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          metrics={[
+          buttons={[
             {
-              id: "value-clarity",              value: "Clarity",              title: "Over Hype",              description: "Clear positioning and honest messaging",              icon: Eye,
+              text: "Start Your Project",              href: "/contact"
+            }
+          ]}
+          features={[
+            {
+              id: 1,
+              title: "Discovery & Strategy",              description: "We analyze your current site, understand your goals, and identify the fastest path to more inquiries. This guides every design decision.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c4z8f9&_wi=1",              imageAlt: "Discovery and strategy phase"
             },
             {
-              id: "value-conversion",              value: "Conversion",              title: "By Design",              description: "Every detail drives action",              icon: CheckCircle,
+              id: 2,
+              title: "Design & Copy Structure",              description: "Clean, uncluttered layouts with clear messaging. We build conversion funnels that guide visitors to one action: contact you.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c4z8f9&_wi=2",              imageAlt: "Design and copy structure phase"
             },
             {
-              id: "value-speed",              value: "Speed &",              title: "Simplicity",              description: "Fast builds, clean code",              icon: Zap,
+              id: 3,
+              title: "Build & Optimize",              description: "Modern tech stack. Every page tested for speed, clarity, and conversion. No bloated plugins, no slow code.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c4z8f9&_wi=3",              imageAlt: "Build and optimization phase"
             },
+            {
+              id: 4,
+              title: "Launch & Support",              description: "Your site goes live with analytics ready. We provide launch support, troubleshooting, and actionable optimization guidance.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c4z8f9&_wi=4",              imageAlt: "Launch and support phase"
+            }
           ]}
         />
       </div>
 
-      <div id="about-cta" data-section="about-cta">
-        <ContactFaq
-          ctaTitle="If Your Website Isn't Bringing Leads, Let's Fix That."
-          ctaDescription="Start with a free review and get a clear improvement plan in 24–48 hours."
-          ctaButton={{
-            text: "Book a Free Website Review",            href: "/contact"}}
-          ctaIcon={ArrowRight}
-          faqs={[
-            {
-              id: "info-a1",              title: "Direct Communication",              content: "You work directly with the founder. No agencies, no middlemen."},
-            {
-              id: "info-a2",              title: "Fast Iterations",              content: "We move quickly and respond to feedback within 24 hours."},
-            {
-              id: "info-a3",              title: "Clear Deliverables",              content: "You know exactly what you're getting and when it ships."},
-          ]}
-          animationType="blur-reveal"
+      {/* Why Gyms Trust Us Section */}
+      <div id="trust-about" data-section="trust-about">
+        <TestimonialCardOne
+          title="Why Gym Owners & Coaches Choose Elevate Web"
+          description="Owners want results, not excuses. Here's what they say after working with us."
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
           useInvertedBackground={false}
+          testimonials={[
+            {
+              id: "testimonial-1",              name: "Sarah Mitchell",              role: "Gym Owner",              company: "Iron Horizon Gym",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=quxh22&_wi=1",              imageAlt: "Sarah Mitchell, gym owner"
+            },
+            {
+              id: "testimonial-2",              name: "James Rodriguez",              role: "Sports Club Manager",              company: "Summit Tennis Club",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=o1a57z",              imageAlt: "James Rodriguez, sports club manager"
+            },
+            {
+              id: "testimonial-3",              name: "Marcus Thompson",              role: "Performance Coach",              company: "Velocity Coaching",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6fnriv",              imageAlt: "Marcus Thompson, performance coach"
+            }
+          ]}
         />
       </div>
 
+      {/* CTA Section */}
+      <div id="cta-about" data-section="cta-about">
+        <ContactSplit
+          tag="Ready?"
+          title="Let's Build Your Website"
+          description="Get a free website review with 3 specific improvements. No obligation, no pitch—just honest feedback."
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          mediaAnimation="slide-up"
+          inputPlaceholder="Enter your email"
+          buttonText="Get Your Free Review"
+          termsText="By clicking Get Your Free Review you're confirming that you agree with our Terms and Conditions."
+        />
+      </div>
+
+      {/* Footer */}
       <div id="footer-all" data-section="footer-all">
         <FooterCard
           logoText="Elevate Web"
-- 
2.49.1


From b31f516f8a1b45b1c976f8ad454717159cbda651 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 13 Mar 2026 15:52:36 +0000
Subject: [PATCH 2/4] Update src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 328 ++++++++++++++++++++++++++++-----------
 1 file changed, 238 insertions(+), 90 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index e1a58be..1a5788c 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,13 +1,18 @@
 "use client";
 
-import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
-import HeroBillboard from "@/components/sections/hero/HeroBillboard";
-import ContactFaq from "@/components/sections/contact/ContactFaq";
-import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import { Mail, Sparkles } from "lucide-react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Mail, Phone, MapPin, Clock, CheckCircle } from 'lucide-react';
+
+const navItems = [
+  { name: "Services", id: "services" },
+  { name: "Work", id: "work" },
+  { name: "About", id: "about" },
+  { name: "Pricing", id: "pricing" },
+  { name: "Contact", id: "contact" },
+];
 
 export default function ContactPage() {
   return (
@@ -23,104 +28,247 @@ export default function ContactPage() {
       secondaryButtonStyle="layered"
       headingFontWeight="light"
     >
+      {/* Navbar */}
       <div id="nav" data-section="nav">
-        <NavbarStyleApple
+        <NavbarStyleApple 
           brandName="Elevate Web"
-          navItems={[
-            { name: "Services", id: "services" },
-            { name: "Work", id: "work" },
-            { name: "About", id: "about" },
-            { name: "Pricing", id: "pricing" },
-            { name: "Contact", id: "contact" },
-          ]}
+          navItems={navItems}
         />
       </div>
 
-      <div id="hero-contact" data-section="hero-contact">
-        <HeroBillboard
-          title="Book a Free Website Review"
-          description="Send your site and we'll reply with 3 specific improvements to increase inquiries and conversions."
+      {/* Hero Section */}
+      <div id="contact-hero" data-section="contact-hero">
+        <ContactText
+          text="Let's Build Your Next Winning Website"
           background={{ variant: "gradient-bars" }}
-          buttons={[]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qkozd5&_wi=12"
-          imageAlt="Contact and website review service"
-          mediaAnimation="slide-up"
-        />
-      </div>
-
-      <div id="contact-form" data-section="contact-form">
-        <ContactFaq
-          ctaTitle="Request Your Free Review"
-          ctaDescription="We respond within 24–48 hours with a clear analysis and actionable improvements."
-          ctaButton={{
-            text: "Send My Site",            href: "#"}}
-          ctaIcon={Mail}
-          faqs={[
-            {
-              id: "form-q1",              title: "Full Name",              content: "Your name so we know who to reply to."},
-            {
-              id: "form-q2",              title: "Business Email",              content: "We'll send your review and any follow-up here."},
-            {
-              id: "form-q3",              title: "Business Name & URL",              content:
-                "Your current website (or description if you don't have one yet)."},
-            {
-              id: "form-q4",              title: "Service Type & Goals",              content:
-                "What you offer (gym, coaching, club, etc.) and what you want more of (calls, trials, members)."},
-          ]}
-          animationType="blur-reveal"
+          animationType="entrance-slide"
           useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="contact-alternatives" data-section="contact-alternatives">
-        <FeatureCardTwentyOne
-          title="Other Ways to Reach Us"
-          description="Prefer a different approach? We're flexible."
           buttons={[
             {
-              text: "Request a Quote",              href: "mailto:hello@elevateweb.co"},
+              text: "Start With a Free Review",              href: "#contact-form"
+            }
           ]}
-          accordionItems={[
-            {
-              id: "contact-1",              title: "Email",              content:
-                "hello@elevateweb.co — Direct contact with the founder."},
-            {
-              id: "contact-2",              title: "Response Time",              content:
-                "We aim to reply within 24 hours. Urgent? Note it in your message."},
-            {
-              id: "contact-3",              title: "What to Include",              content:
-                "Your site URL (if you have one), your business type, and what you want to improve."},
-          ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qkozd5&_wi=13"
-          imageAlt="Contact options"
-          mediaAnimation="opacity"
-          useInvertedBackground={false}
         />
       </div>
 
-      <div id="contact-cta-final" data-section="contact-cta-final">
-        <ContactFaq
-          ctaTitle="Ready to Elevate?"
-          ctaDescription="Your free review is the first step toward a website that actually brings leads."
-          ctaButton={{
-            text: "Book a Free Website Review",            href: "#"}}
-          ctaIcon={Sparkles}
-          faqs={[
-            {
-              id: "info-c1",              title: "No Pressure",              content:
-                "Free review, no obligation. We'll share honest feedback and next steps."},
-            {
-              id: "info-c2",              title: "Fast Turnaround",              content:
-                "Get your review within 24–48 hours. Results you can start acting on immediately."},
-            {
-              id: "info-c3",              title: "Let's Build Something Great",              content:
-                "Your business deserves a website that sells. Let's talk."},
-          ]}
-          animationType="blur-reveal"
-          useInvertedBackground={false}
-        />
+      {/* Contact Info Section */}
+      <div id="contact-info" data-section="contact-info" className="py-24 px-4 md:px-8 lg:px-16">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {/* Email */}
+            <div className="flex flex-col items-center text-center p-8 rounded-lg border border-white/10 bg-white/5 backdrop-blur">
+              <div className="mb-4 p-3 bg-white/10 rounded-lg">
+                <Mail className="w-6 h-6" />
+              </div>
+              <h3 className="font-semibold text-lg mb-2">Email</h3>
+              <p className="text-sm text-white/70">hello@elevateweb.com</p>
+              <p className="text-xs text-white/50 mt-2">We respond within 24 hours</p>
+            </div>
+
+            {/* Phone */}
+            <div className="flex flex-col items-center text-center p-8 rounded-lg border border-white/10 bg-white/5 backdrop-blur">
+              <div className="mb-4 p-3 bg-white/10 rounded-lg">
+                <Phone className="w-6 h-6" />
+              </div>
+              <h3 className="font-semibold text-lg mb-2">Phone</h3>
+              <p className="text-sm text-white/70">+1 (555) 123-4567</p>
+              <p className="text-xs text-white/50 mt-2">Best for quick questions</p>
+            </div>
+
+            {/* Response Time */}
+            <div className="flex flex-col items-center text-center p-8 rounded-lg border border-white/10 bg-white/5 backdrop-blur">
+              <div className="mb-4 p-3 bg-white/10 rounded-lg">
+                <Clock className="w-6 h-6" />
+              </div>
+              <h3 className="font-semibold text-lg mb-2">Response Time</h3>
+              <p className="text-sm text-white/70">24–48 hours</p>
+              <p className="text-xs text-white/50 mt-2">On all inquiries</p>
+            </div>
+          </div>
+        </div>
       </div>
 
+      {/* Contact Form Section */}
+      <div id="contact-form" data-section="contact-form" className="py-24 px-4 md:px-8 lg:px-16">
+        <div className="max-w-2xl mx-auto">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-light mb-4">Send Us Your Details</h2>
+            <p className="text-white/70">Tell us about your business and goals. We'll review and get back to you with a plan.</p>
+          </div>
+
+          <div className="p-8 rounded-lg border border-white/10 bg-white/5 backdrop-blur">
+            <form className="space-y-6">
+              {/* Name & Email Row */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <label className="block text-sm font-medium mb-2">Full Name *</label>
+                  <input
+                    type="text"
+                    placeholder="Sarah Mitchell"
+                    className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:border-white/40 transition"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-2">Email Address *</label>
+                  <input
+                    type="email"
+                    placeholder="sarah@example.com"
+                    className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:border-white/40 transition"
+                    required
+                  />
+                </div>
+              </div>
+
+              {/* Phone & Business Type Row */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <label className="block text-sm font-medium mb-2">Phone Number</label>
+                  <input
+                    type="tel"
+                    placeholder="+1 (555) 123-4567"
+                    className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:border-white/40 transition"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-2">Business Type *</label>
+                  <select className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:border-white/40 transition" required>
+                    <option value="">Select your business</option>
+                    <option value="gym">Gym</option>
+                    <option value="studio">Studio</option>
+                    <option value="sports-club">Sports Club</option>
+                    <option value="coaching">Coaching</option>
+                    <option value="other">Other</option>
+                  </select>
+                </div>
+              </div>
+
+              {/* Business Name */}
+              <div>
+                <label className="block text-sm font-medium mb-2">Business Name *</label>
+                <input
+                  type="text"
+                  placeholder="Iron Horizon Gym"
+                  className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:border-white/40 transition"
+                  required
+                />
+              </div>
+
+              {/* Current Website */}
+              <div>
+                <label className="block text-sm font-medium mb-2">Current Website (if applicable)</label>
+                <input
+                  type="url"
+                  placeholder="https://example.com"
+                  className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:border-white/40 transition"
+                />
+              </div>
+
+              {/* Project Details */}
+              <div>
+                <label className="block text-sm font-medium mb-2">Tell Us About Your Project *</label>
+                <textarea
+                  placeholder="What are your goals? Any specific challenges? What's your timeline?"
+                  rows={5}
+                  className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:border-white/40 transition resize-none"
+                  required
+                />
+              </div>
+
+              {/* Budget */}
+              <div>
+                <label className="block text-sm font-medium mb-2">Budget Range</label>
+                <select className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:border-white/40 transition">
+                  <option value="">Select a range</option>
+                  <option value="1-2k">$1,000–$2,000</option>
+                  <option value="2-3k">$2,000–$3,000</option>
+                  <option value="3-5k">$3,000–$5,000</option>
+                  <option value="5k+">$5,000+</option>
+                </select>
+              </div>
+
+              {/* Checkbox */}
+              <div className="flex items-start">
+                <input
+                  type="checkbox"
+                  id="agree"
+                  className="mt-1 w-4 h-4 bg-white/10 border border-white/20 rounded focus:outline-none cursor-pointer"
+                  required
+                />
+                <label htmlFor="agree" className="ml-3 text-sm text-white/70">
+                  I agree to be contacted about my project and understand Elevate Web will use this information to follow up.
+                </label>
+              </div>
+
+              {/* Submit Button */}
+              <button
+                type="submit"
+                className="w-full py-3 px-6 bg-white text-black font-medium rounded-lg hover:bg-white/90 transition"
+              >
+                Send Inquiry
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+
+      {/* What Happens Next Section */}
+      <div id="contact-process" data-section="contact-process" className="py-24 px-4 md:px-8 lg:px-16">
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-light mb-4">What Happens Next</h2>
+            <p className="text-white/70">Our simple process to get you started</p>
+          </div>
+
+          <div className="space-y-6">
+            {/* Step 1 */}
+            <div className="flex gap-6 p-6 rounded-lg border border-white/10 bg-white/5">
+              <div className="flex-shrink-0 flex items-center justify-center w-12 h-12 bg-white/10 rounded-lg">
+                <span className="font-semibold">1</span>
+              </div>
+              <div className="flex-grow">
+                <h3 className="font-semibold text-lg mb-2">You Submit Your Details</h3>
+                <p className="text-white/70">Tell us about your business, goals, and current situation. The more detail, the better we can help.</p>
+              </div>
+            </div>
+
+            {/* Step 2 */}
+            <div className="flex gap-6 p-6 rounded-lg border border-white/10 bg-white/5">
+              <div className="flex-shrink-0 flex items-center justify-center w-12 h-12 bg-white/10 rounded-lg">
+                <span className="font-semibold">2</span>
+              </div>
+              <div className="flex-grow">
+                <h3 className="font-semibold text-lg mb-2">We Review & Respond (24–48 hrs)</h3>
+                <p className="text-white/70">We'll analyze your needs and send a personalized email with initial thoughts, questions, and next steps.</p>
+              </div>
+            </div>
+
+            {/* Step 3 */}
+            <div className="flex gap-6 p-6 rounded-lg border border-white/10 bg-white/5">
+              <div className="flex-shrink-0 flex items-center justify-center w-12 h-12 bg-white/10 rounded-lg">
+                <span className="font-semibold">3</span>
+              </div>
+              <div className="flex-grow">
+                <h3 className="font-semibold text-lg mb-2">Schedule a Quick Call (Optional)</h3>
+                <p className="text-white/70">If it's a good fit, we'll suggest a 15–20 minute call to align on scope, timeline, and pricing.</p>
+              </div>
+            </div>
+
+            {/* Step 4 */}
+            <div className="flex gap-6 p-6 rounded-lg border border-white/10 bg-white/5">
+              <div className="flex-shrink-0 flex items-center justify-center w-12 h-12 bg-white/10 rounded-lg">
+                <CheckCircle className="w-6 h-6" />
+              </div>
+              <div className="flex-grow">
+                <h3 className="font-semibold text-lg mb-2">Get Started or Explore Further</h3>
+                <p className="text-white/70">If you're ready, we'll kick off your project. If not, no pressure—we're here if you have questions later.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Footer */}
       <div id="footer-all" data-section="footer-all">
         <FooterCard
           logoText="Elevate Web"
-- 
2.49.1


From 41fcb5d97ee6c5ac9f0810a8ec63ead0f71f5020 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 13 Mar 2026 15:52:37 +0000
Subject: [PATCH 3/4] Update src/app/page.tsx

---
 src/app/page.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 52f4d71..73040c7 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -21,7 +21,7 @@ const navItems = [
   { name: "Work", id: "work" },
   { name: "About", id: "about" },
   { name: "Pricing", id: "pricing" },
-  { name: "Contact", id: "contact" },
+  { name: "Contact", id: "/contact" },
 ];
 
 export default function HomePage() {
@@ -57,7 +57,7 @@ export default function HomePage() {
               text: "Book a Free Website Review",              href: "/contact"
             },
             {
-              text: "See Recent Work",              href: "/work"
+              text: "See Recent Work",              href: "#portfolio-preview-home"
             }
           ]}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qkozd5&_wi=1"
@@ -120,7 +120,7 @@ export default function HomePage() {
           useInvertedBackground={false}
           buttons={[
             {
-              text: "View All Services",              href: "/services"
+              text: "View All Services",              href: "#services-preview-home"
             }
           ]}
           products={[
@@ -178,7 +178,7 @@ export default function HomePage() {
           useInvertedBackground={false}
           buttons={[
             {
-              text: "See All Work",              href: "/work"
+              text: "See All Work",              href: "#portfolio-preview-home"
             }
           ]}
           blogs={[
@@ -235,7 +235,7 @@ export default function HomePage() {
           useInvertedBackground={false}
           buttons={[
             {
-              text: "View Pricing",              href: "/pricing"
+              text: "View Pricing",              href: "#pricing-preview-home"
             }
           ]}
           plans={[
-- 
2.49.1


From a1705142d4bf076178bc1f8438984377e42cddb8 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 13 Mar 2026 15:52:37 +0000
Subject: [PATCH 4/4] Update src/app/services/page.tsx

---
 src/app/services/page.tsx | 211 ++++++++++++++++++++++++++++++++------
 1 file changed, 181 insertions(+), 30 deletions(-)

diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 308846e..ccc4fc5 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -3,10 +3,15 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import Link from 'next/link';
+import { Zap, Code, Search, Users, Gauge, Target, CheckCircle, Sparkles, Smartphone, TrendingUp, Award } from 'lucide-react';
 
 const navItems = [
   { name: "Services", id: "services" },
@@ -41,73 +46,219 @@ export default function ServicesPage() {
       {/* Hero Section */}
       <div id="hero-services" data-section="hero-services">
         <HeroBillboard
-          title="Services Built to Grow Membership"
-          description="Everything we build is designed for one thing: more inquiries, trial sign-ups, and calls."
+          title="Web Services Built for Fitness Businesses"
+          description="We design, build, and optimize websites that turn gym members, sports club inquiries, and coaching leads into real revenue. Every service is conversion-focused."
           background={{ variant: "gradient-bars" }}
           buttons={[
             {
-              text: "Book a Free Website Review",              href: "/contact"
+              text: "Get Started Today",              href: "#pricing-services"
             },
             {
-              text: "View Work",              href: "/work"
+              text: "Book Free Review",              href: "/contact"
             }
           ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qkozd5&_wi=5"
-          imageAlt="Web design services overview"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qkozd5&_wi=1"
+          imageAlt="Professional web design services"
           mediaAnimation="slide-up"
         />
       </div>
 
-      {/* Services Details Section */}
-      <div id="services-details" data-section="services-details">
+      {/* Core Services Section */}
+      <div id="services-core" data-section="services-core">
         <ProductCardFour
-          title="Our Core Services"
-          description="Three focused offerings that deliver measurable results."
+          title="Three Core Services"
+          description="Complete solutions that work together to maximize your online presence and convert visitors into leads."
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
           products={[
             {
-              id: "service-1",              name: "Website Design & Build",              price: "Complete Build",              variant: "A complete modern website for gyms, clubs, and coaches. Built mobile-first, structured for clarity, and optimized to convert visitors into leads.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qkozd5&_wi=6",              imageAlt: "Website design and build service"
+              id: "service-full-design",              name: "Full Website Design & Build",              price: "$1,500–$3,500",              variant: "Complete, conversion-optimized websites with clean design, fast performance, and mobile-first layouts. Includes strategy, design, development, and launch support.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qkozd5&_wi=2",              imageAlt: "Full website design and build service"
             },
             {
-              id: "service-2",              name: "Conversion Landing Pages",              price: "Focused Pages",              variant: "Focused pages for ads, promotions, and trial offers. Ideal for 'Free trial week,' 'New member promo,' or 'Book an assessment.'",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qkozd5&_wi=7",              imageAlt: "Landing page conversion optimization"
+              id: "service-landing",              name: "High-Converting Landing Pages",              price: "$500–$1,200",              variant: "Focused single-page campaigns for trials, memberships, promotions, or seasonal offers. Built to drive one specific action with minimal friction.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qkozd5&_wi=3",              imageAlt: "Landing page conversion optimization"
             },
             {
-              id: "service-3",              name: "Performance & Local SEO",              price: "Optimization",              variant: "We structure your pages so Google and customers understand what you do, where you are, and how to contact you.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qkozd5&_wi=8",              imageAlt: "Performance and SEO optimization"
+              id: "service-optimization",              name: "Performance & SEO Optimization",              price: "$400–$800/month",              variant: "Ongoing speed improvements, local SEO tuning, mobile optimization, and conversion audits. Keep your site fast and findable.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qkozd5&_wi=4",              imageAlt: "Performance and SEO optimization service"
             }
           ]}
         />
       </div>
 
-      {/* Add-Ons Section */}
-      <div id="add-ons-services" data-section="add-ons-services">
-        <FeatureCardTwentyOne
-          title="Optional Add-Ons"
-          description="Scale your website as your business grows."
-          buttons={[
+      {/* Service Features Section */}
+      <div id="services-features" data-section="services-features">
+        <FeatureHoverPattern
+          title="What's Included in Every Service"
+          description="No matter which package you choose, you get our full commitment to speed, clarity, and conversions."
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          features={[
             {
-              text: "Ask About Add-Ons",              href: "/contact"
+              icon: Smartphone,
+              title: "Mobile-First Design",              description: "Every page is built to look premium and perform flawlessly on phones, tablets, and desktops. Your gym members are on mobile—so your site must be too."
+            },
+            {
+              icon: Zap,
+              title: "Lightning-Fast Load Times",              description: "Optimized images, clean code, and modern hosting mean your pages load in under 2 seconds. Fast sites convert better and rank higher."
+            },
+            {
+              icon: Search,
+              title: "Local SEO Foundation",              description: "Built-in structure so fitness businesses show up in 'near me' searches. Schema markup, clean URLs, and optimization for local search intent."
+            },
+            {
+              icon: Target,
+              title: "Conversion-Focused Copy",              description: "Every word and button is tested and positioned to guide visitors to one clear action: booking a trial, joining, or scheduling a consultation."
+            },
+            {
+              icon: Gauge,
+              title: "Analytics Ready",              description: "Integrated tracking (Google Analytics, conversion pixels) so you can measure leads, signups, and ROI from day one."
+            },
+            {
+              icon: Users,
+              title: "Trust-Building Sections",              description: "Testimonials, case studies, social proof, and clear pricing all work together to build credibility and lower friction to conversion."
             }
           ]}
-          accordionItems={[
+        />
+      </div>
+
+      {/* Service Comparison / Benefits */}
+      <div id="services-benefits" data-section="services-benefits">
+        <MetricCardOne
+          title="Why Choose Elevate Web"
+          description=""
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          metrics={[
             {
-              id: "addon-1",              title: "Copy Polish & Messaging Refinement",              content: "Professional copywriting and conversion optimization to make every word count."
+              id: "benefit-speed",              value: "1–3 Weeks",              title: "Fast Turnaround",              description: "No long delays. From strategy to launch in weeks, not months.",              icon: TrendingUp
             },
             {
-              id: "addon-2",              title: "Professional Photography & Asset Upgrade",              content: "Premium images, video integration, and custom graphics to elevate your site."
+              id: "benefit-conversion",              value: "Proven",              title: "Conversion Track Record",              description: "Every design decision is tested. We measure what matters: inquiries and sales.",              icon: Target
             },
             {
-              id: "addon-3",              title: "Monthly Updates & Maintenance",              content: "Ongoing improvements, new landing pages, and performance monitoring."
+              id: "benefit-support",              value: "Included",              title: "Launch Support",              description: "We don't just hand you a site. Launch help, optimization guidance, and ongoing support included.",              icon: Users
             },
             {
-              id: "addon-4",              title: "New Landing Pages (Post-Launch)",              content: "Additional focused pages for new offers, seasonal promotions, or expansion."
+              id: "benefit-owned",              value: "100%",              title: "Full Ownership",              description: "Your domain, your code, your data. No vendor lock-in. You own everything.",              icon: Award
             }
           ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qkozd5&_wi=9"
-          imageAlt="Add-on services options"
-          mediaAnimation="opacity"
+        />
+      </div>
+
+      {/* Real-World Results Section */}
+      <div id="services-results" data-section="services-results">
+        <TestimonialAboutCard
+          tag="Real Results"
+          tagIcon={CheckCircle}
+          tagAnimation="slide-up"
+          title="Websites That Actually Work"
+          description="These aren't just beautiful sites—they're built to generate inquiries, boost membership signups, and drive revenue. Here's what our clients achieved:"
+          subdescription="From gyms adding 20+ trial bookings per month to coaches closing high-ticket leads, the sites we build deliver measurable business impact."
+          icon={Sparkles}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qgmuof&_wi=1"
+          imageAlt="Real web design results for fitness businesses"
+          mediaAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      {/* Pricing Section */}
+      <div id="pricing-services" data-section="pricing-services">
+        <PricingCardFive
+          title="Service Packages"
+          description="Choose the service level that fits your stage and goals. All packages include strategy, design, development, and launch support."
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          plans={[
+            {
+              id: "pkg-launch",              tag: "Best for Getting Started",              price: "$1,500",              period: "One-time",              description: "Perfect for new fitness businesses or quick landing pages.",              featuresTitle: "Includes",              features: [
+                "1–3 pages",                "Mobile-first design",                "Contact form & CTA buttons",                "Basic SEO structure",                "Speed optimization",                "Launch support",                "Analytics setup"
+              ],
+              button: {
+                text: "Get Started",                href: "/contact"
+              }
+            },
+            {
+              id: "pkg-growth",              tag: "Most Popular",              price: "$2,500",              period: "One-time",              description: "Comprehensive site with proof and trust-building sections.",              featuresTitle: "Includes",              features: [
+                "Up to 6 pages",                "Strong conversion flow",                "Testimonials section",                "Case study examples",                "Local SEO foundations",                "Performance audit",                "Two revision rounds",                "Priority build"
+              ],
+              button: {
+                text: "Choose Growth",                href: "/contact"
+              }
+            },
+            {
+              id: "pkg-elite",              tag: "For Maximum Impact",              price: "$3,500",              period: "One-time",              description: "Full-featured site with advanced conversion optimization.",              featuresTitle: "Includes",              features: [
+                "Up to 10 pages",                "Two landing pages",                "Advanced CTA structure",                "Portfolio gallery",                "Member testimonials",                "Advanced performance pass",                "Conversion funnel audit",                "Unlimited revisions"
+              ],
+              button: {
+                text: "Choose Elite",                href: "/contact"
+              }
+            }
+          ]}
+        />
+      </div>
+
+      {/* FAQ Section */}
+      <div id="faq-services" data-section="faq-services">
+        <FaqSplitMedia
+          title="Common Questions About Our Services"
+          description="Everything you need to know about working with Elevate Web."
+          faqs={[
+            {
+              id: "faq-timeline",              title: "How long does a website take?",              content: "Most projects take 1–3 weeks depending on page count and feedback speed. We move fast without cutting corners on quality or strategy."
+            },
+            {
+              id: "faq-copy",              title: "Do you write the copy?",              content: "Yes. We structure all messaging and refine your wording to be clear, conversion-focused, and aligned with your brand voice."
+            },
+            {
+              id: "faq-domain",              title: "Can I use my existing domain?",              content: "Absolutely. We connect existing domains or help you purchase a new one. You maintain 100% ownership—no lock-in ever."
+            },
+            {
+              id: "faq-updates",              title: "What if I need updates after launch?",              content: "You can request edits anytime. We also offer maintenance packages (starting at $400/month) for ongoing optimization and improvements."
+            },
+            {
+              id: "faq-seo",              title: "Is SEO included?",              content: "Yes—all sites get a clean SEO foundation with proper structure, schema markup, and optimization for local search. We also offer advanced SEO packages for ongoing ranking improvements."
+            },
+            {
+              id: "faq-mobile",              title: "Will my site work on mobile?",              content: "Mobile-first is our default. Every site is designed and tested on phones, tablets, and desktops. Mobile conversion is critical for fitness businesses."
+            }
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c4z8f9"
+          imageAlt="FAQ and service information"
+          mediaAnimation="slide-up"
+          mediaPosition="left"
+          faqsAnimation="blur-reveal"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      {/* Final CTA Section */}
+      <div id="final-cta-services" data-section="final-cta-services">
+        <ContactFaq
+          ctaTitle="Ready to Build Your High-Converting Website?"
+          ctaDescription="Start with a free website review. We'll analyze your current site (or competition) and send you 3 specific improvements you can apply immediately."
+          ctaButton={{
+            text: "Book Your Free Review",            href: "/contact"
+          }}
+          ctaIcon={Sparkles}
+          faqs={[
+            {
+              id: "cta-1",              title: "Fast & Free Analysis",              content: "Send us your site URL. We'll review it and send a detailed report within 24–48 hours."
+            },
+            {
+              id: "cta-2",              title: "No Pressure",              content: "The review is completely free. If you want to work together, we'll discuss next steps and pricing."
+            },
+            {
+              id: "cta-3",              title: "Gyms, Studios, Clubs & Coaches",              content: "Whether you're a gym, sports club, studio, or coach, we know how to build sites that convert your specific audience."
+            }
+          ]}
+          animationType="blur-reveal"
           useInvertedBackground={false}
         />
       </div>
-- 
2.49.1