Update src/app/services/page.tsx
This commit is contained in:
@@ -1,15 +1,50 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import Link from "next/link";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
|
||||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||
import TextAbout from "@/components/sections/about/TextAbout";
|
||||
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
|
||||
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
|
||||
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Zap, Shield } from "lucide-react";
|
||||
import { Zap, Shield, Target, Star, MapPin } from "lucide-react";
|
||||
|
||||
export default function ServicesPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Navigate", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Personal Training", href: "/services" },
|
||||
{ label: "Strength & Conditioning", href: "/services" },
|
||||
{ label: "Custom Programs", href: "/services" },
|
||||
{ label: "Book a Session", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Our Philosophy", href: "/about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
@@ -23,176 +58,174 @@ export default function ServicesPage() {
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="VINSMOKE"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
bottomLeftText="Vancouver, BC"
|
||||
bottomRightText="488 Helmcken St"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Services Overview Section */}
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
title="Transform Your Strength"
|
||||
description="Choose from our comprehensive training services designed to meet you where you are and take you where you want to be. From beginner fundamentals to elite-level conditioning."
|
||||
tag="Our Services"
|
||||
tagIcon={Zap}
|
||||
background={{ variant: "glowing-orb" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/handsome-man-showing-mucles_23-2147775529.jpg"
|
||||
imageAlt="Comprehensive strength training services"
|
||||
mediaAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Marcus Chen", handle: "12-Week Program", testimonial: "The variety and expertise across all services is unmatched. Found exactly what I needed.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-doing-some-business-deal-with-client_329181-10302.jpg"},
|
||||
{
|
||||
name: "Sarah Mitchell", handle: "Custom Programs", testimonial: "Every service is tailored and professional. Worth every penny for results.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-athlete-ready-run_23-2148876522.jpg"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Your First Session", href: "/contact"},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<ProductCardTwo
|
||||
title="Training Services"
|
||||
description="Choose the training approach that matches your goals and experience level."
|
||||
tag="Our Offerings"
|
||||
tagIcon={Zap}
|
||||
title="Our Training Programs"
|
||||
description="Choose the service that aligns with your fitness goals and experience level."
|
||||
tag="Three Core Offerings"
|
||||
tagIcon={Shield}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "1-on-1 Coaching",
|
||||
name: "Personal Training",
|
||||
price: "Starting at $75/session",
|
||||
rating: 5,
|
||||
reviewCount: "50+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-closeup-portrait-woman-exercising-gym_651396-1078.jpg?_wi=2",
|
||||
imageAlt: "Personal training session one-on-one coaching",
|
||||
},
|
||||
id: "1", brand: "One-on-One Coaching", name: "Personal Training Sessions", price: "$75 per session", rating: 5,
|
||||
reviewCount: "50+", imageSrc: "http://img.b2bpic.net/free-photo/crop-closeup-portrait-woman-exercising-gym_651396-1078.jpg", imageAlt: "Personal training session with expert coach"},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Athletic Development",
|
||||
name: "Strength & Conditioning",
|
||||
price: "Starting at $85/session",
|
||||
rating: 5,
|
||||
reviewCount: "45+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-exercising-weight-bench_329181-14151.jpg?_wi=2",
|
||||
imageAlt: "strength and conditioning athletic training",
|
||||
},
|
||||
id: "2", brand: "Athletic Development", name: "Strength & Conditioning", price: "$85 per session", rating: 5,
|
||||
reviewCount: "45+", imageSrc: "http://img.b2bpic.net/free-photo/woman-exercising-weight-bench_329181-14151.jpg", imageAlt: "Advanced strength and conditioning training"},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Foundation Building",
|
||||
name: "Beginner Strength Programs",
|
||||
price: "Starting at $199/month",
|
||||
rating: 5,
|
||||
reviewCount: "38+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gym-instructor-guiding-woman-while-exercising-with-dumbbell_23-2147827468.jpg?_wi=2",
|
||||
imageAlt: "beginner fitness training foundation exercises",
|
||||
},
|
||||
id: "3", brand: "Foundation Building", name: "Beginner Strength Programs", price: "$199 per month", rating: 5,
|
||||
reviewCount: "38+", imageSrc: "http://img.b2bpic.net/free-photo/gym-instructor-guiding-woman-while-exercising-with-dumbbell_23-2147827468.jpg", imageAlt: "Beginner-friendly strength training program"},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Tailored Solutions",
|
||||
name: "Customized Workout Plans",
|
||||
price: "Starting at $149/month",
|
||||
rating: 5,
|
||||
reviewCount: "42+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-sports-people-training-morning-gym_1157-32133.jpg?_wi=2",
|
||||
imageAlt: "customized workout plan personalized fitness",
|
||||
},
|
||||
id: "4", brand: "Customized Solutions", name: "Custom Workout Plans", price: "$149 per month", rating: 5,
|
||||
reviewCount: "42+", imageSrc: "http://img.b2bpic.net/free-photo/young-sports-people-training-morning-gym_1157-32133.jpg", imageAlt: "Personalized custom workout plan design"},
|
||||
]}
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More", href: "#details"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Detailed Service Breakdown */}
|
||||
<div id="service-details" data-section="service-details">
|
||||
<FeatureCardNine
|
||||
title="How Our Training Programs Work"
|
||||
description="Each program is structured for maximum results and sustainable progress."
|
||||
<div id="details" data-section="details">
|
||||
<FeatureCardTwelve
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Assessment & Planning",
|
||||
description: "We start with a comprehensive assessment of your fitness level, goals, and lifestyle. This informs your personalized training program designed specifically for YOU.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-closeup-portrait-woman-exercising-gym_651396-1078.jpg?_wi=3",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-friends-working-together-fitness-class_23-2148284916.jpg?_wi=4",
|
||||
},
|
||||
id: "personal-training", label: "Personal Training", title: "One-on-One Personalized Coaching", items: [
|
||||
"Expert form correction and real-time feedback", "Customized workout programs for your goals", "Progressive programming with built-in accountability", "Flexible scheduling and online or in-studio options"],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book a Session", href: "/contact"},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Structured Programming",
|
||||
description: "Your workouts follow proven periodization principles. Progressive overload, proper form, and strategic recovery built into every session for optimal gains.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-exercising-weight-bench_329181-14151.jpg?_wi=3",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gym-instructor-guiding-woman-while-exercising-with-dumbbell_23-2147827468.jpg?_wi=3",
|
||||
},
|
||||
id: "strength-conditioning", label: "Strength & Conditioning", title: "Athletic Development and Performance", items: [
|
||||
"Sport-specific training and conditioning protocols", "Injury prevention and mobility work integrated", "Periodized programs for peak performance", "Perfect for athletes and serious lifters"],
|
||||
buttons: [
|
||||
{
|
||||
text: "Schedule Training", href: "/contact"},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Accountability & Coaching",
|
||||
description: "Regular check-ins, form corrections, and program adjustments keep you on track. Your coach monitors progress and adapts your program as you get stronger.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-sports-people-training-morning-gym_1157-32133.jpg?_wi=3",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-closeup-portrait-woman-exercising-gym_651396-1078.jpg?_wi=4",
|
||||
},
|
||||
id: "custom-programs", label: "Custom Programs", title: "Tailored Workout Plans for Your Lifestyle", items: [
|
||||
"Personalized programs based on your unique situation", "Adaptable to your schedule and equipment access", "Ongoing support and program adjustments", "Best value for long-term consistency"],
|
||||
buttons: [
|
||||
{
|
||||
text: "Start Your Program", href: "/contact"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
title="Service Details"
|
||||
description="Explore the specifics of each service and find the perfect fit for your fitness journey."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Philosophy Section */}
|
||||
<div id="philosophy" data-section="philosophy">
|
||||
<TextAbout
|
||||
tag="Our Approach"
|
||||
tagIcon={Shield}
|
||||
title="We believe in strength training built on science, delivered with expertise, and maintained through discipline. Every program is personalized, every session is purposeful, and every result is earned."
|
||||
useInvertedBackground={true}
|
||||
buttons={[
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
title="What Clients Say About Our Services"
|
||||
description="Real results from real people who have experienced our training firsthand."
|
||||
tag="Client Testimonials"
|
||||
tagIcon={Star}
|
||||
testimonials={[
|
||||
{
|
||||
text: "Book Your Consultation",
|
||||
href: "/contact",
|
||||
},
|
||||
id: "1", name: "Marcus Chen", handle: "@marcuschen", testimonial: "The personal training sessions transformed my approach. Expert guidance every step of the way.", imageSrc: "http://img.b2bpic.net/free-photo/man-doing-some-business-deal-with-client_329181-10302.jpg", imageAlt: "Marcus Chen"},
|
||||
{
|
||||
id: "2", name: "Sarah Mitchell", handle: "@sarahmitch_fitness", testimonial: "The custom program adjusted perfectly to my schedule. Consistency finally stuck!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-athlete-ready-run_23-2148876522.jpg", imageAlt: "Sarah Mitchell"},
|
||||
{
|
||||
id: "3", name: "David Thompson", handle: "@davidthompson88", testimonial: "Strength & Conditioning elevated my athletic performance. Sport-specific training is game-changing.", imageSrc: "http://img.b2bpic.net/free-photo/view-woman-helping-man-exercise-gym_52683-98091.jpg", imageAlt: "David Thompson"},
|
||||
{
|
||||
id: "4", name: "Jessica Liu", handle: "@jessicaliu_trains", testimonial: "All three services exceeded expectations. Quality coaching across the board.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-face-african-american-girl-looking-away_1262-3098.jpg", imageAlt: "Jessica Liu"},
|
||||
]}
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
speed={40}
|
||||
topMarqueeDirection="left"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactCTA
|
||||
tag="Ready to Get Started?"
|
||||
tagIcon={Zap}
|
||||
title="Choose Your Service and Begin Today"
|
||||
description="Book a consultation to discuss which service is best for your goals. Our coaching team will help you select the perfect program and get you started on your transformation."
|
||||
background={{ variant: "glowing-orb" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book a Consultation", href: "/contact"},
|
||||
{
|
||||
text: "View Pricing", href: "#services"},
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="location" data-section="location">
|
||||
<ContactCTA
|
||||
tag="Visit Our Studio"
|
||||
tagIcon={MapPin}
|
||||
title="488 Helmcken St, Vancouver, BC"
|
||||
description="Stop by our Vancouver location to meet the team, see our facility, and learn more about our services in person."
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Directions", href: "https://maps.google.com/?q=488+Helmcken+St+Vancouver+BC"},
|
||||
{
|
||||
text: "Contact Us", href: "/contact"},
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Navigate",
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{ label: "Personal Training", href: "/services" },
|
||||
{ label: "Strength & Conditioning", href: "/services" },
|
||||
{ label: "Custom Programs", href: "/services" },
|
||||
{ label: "Book a Session", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Our Philosophy", href: "/services" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2025 Vinsmoke Athletics. All rights reserved."
|
||||
bottomRightText="488 Helmcken St, Vancouver, BC"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user