bender/1c9ebd4d-7d69-41a0-a1ed-42e89804a4ea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #4

Merged
bender merged 4 commits from version_2 into main 2026-03-13 15:52:41 +00:00
Conversation 0 Commits 4 Files Changed 4 +534 -182
4 changed files with 534 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/app/about/page.tsx
View File

@@ -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"

328
src/app/contact/page.tsx
View File

@@ -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"

10
src/app/page.tsx
View File

@@ -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={[

211
src/app/services/page.tsx
View File

@@ -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>