Update theme colors

Merge version_1 into main

src/app/about/page.tsx

@@ -1,13 +1,14 @@
 "use client";
 
-import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import TeamCardTen from "@/components/sections/team/TeamCardTen";
+import MediaAbout from "@/components/sections/about/MediaAbout";
 import TextAbout from "@/components/sections/about/TextAbout";
+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 { Shield, Zap } from "lucide-react";
+import { Shield, Target, Award, Star, Zap, MapPin } from "lucide-react";
 
 export default function AboutPage() {
   const navItems = [
@@ -66,51 +67,129 @@ export default function AboutPage() {
         />
       </div>
 
-      <div id="about" data-section="about">
+      <div id="hero" data-section="hero">
-        <TeamCardTen
+        <MediaAbout
-          title="Elite coaching grounded in science, delivered with passion. Your dedicated strength coach combines proven methodologies with personalized attention to build your best self."
+          title="Elite Strength Training Philosophy"
-          tag="Meet Your Coach"
+          description="At Vinsmoke Athletics, we believe strength training is more than lifting weights—it's about building discipline, confidence, and a lifestyle that works. Founded on proven principles and delivered with personalized expertise."
-          tagAnimation="slide-up"
+          tag="About Vinsmoke"
-          membersAnimation="blur-reveal"
+          tagIcon={Shield}
-          members={[
+          imageSrc="http://img.b2bpic.net/free-photo/handsome-man-showing-mucles_23-2147775529.jpg?_wi=2"
+          imageAlt="Elite strength training at Vinsmoke Athletics"
+          buttons={[
             {
-              id: "1",              name: "Your Elite Coach",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-office-3_1262-1489.jpg"},
+              text: "Explore Our Services",              href: "/services"},
           ]}
-          memberVariant="default"
           useInvertedBackground={false}
         />
       </div>
 
+      <div id="mission" data-section="mission">
+        <FeatureCardTwelve
+          features={[
+            {
+              id: "mission",              label: "Our Mission",              title: "Transform Bodies Through Disciplined Strength Training",              items: [
+                "Provide world-class coaching and personalized programs",                "Build a community of committed athletes and lifters",                "Deliver measurable results with proven methodologies"],
+              buttons: [
+                {
+                  text: "Learn More",                  href: "/contact"},
+              ],
+            },
+            {
+              id: "values",              label: "Core Values",              title: "Excellence, Accountability, and Transformation",              items: [
+                "Excellence in every training session and interaction",                "Accountability to our clients and their goals",                "Sustainable transformation through proper technique"],
+              buttons: [
+                {
+                  text: "Start Your Journey",                  href: "/contact"},
+              ],
+            },
+            {
+              id: "approach",              label: "Our Approach",              title: "Science-Backed Training Tailored to You",              items: [
+                "Evidence-based strength training principles",                "Customized programs for every fitness level",                "Consistent coaching and progressive programming"],
+              buttons: [
+                {
+                  text: "Book a Consultation",                  href: "/contact"},
+              ],
+            },
+          ]}
+          animationType="slide-up"
+          title="Why Choose Vinsmoke Athletics?"
+          description="We combine expert knowledge with personalized coaching to deliver real, lasting results."
+          textboxLayout="default"
+          useInvertedBackground={true}
+        />
+      </div>
+
       <div id="philosophy" data-section="philosophy">
         <TextAbout
-          tag="Our Philosophy"
+          tag="Training Philosophy"
-          tagIcon={Shield}
+          tagIcon={Target}
-          title="Structured Coaching That Delivers Real Results. Personalized training programs built on proven strength training principles, tailored to YOUR body, YOUR goals, and YOUR lifestyle."
+          title="Progressive, Personalized, and Proven. We believe in progressive overload, proper form, and adapting training to each individual's body, lifestyle, and goals. Your strength journey is unique—your training should be too."
-          useInvertedBackground={true}
+          useInvertedBackground={false}
           buttons={[
             {
-              text: "Explore Our Services",              href: "/services"},
+              text: "See Our Services",              href: "/services"},
           ]}
         />
       </div>
 
-      <div id="cta-about" data-section="cta-about">
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardSix
+          title="Client Success Stories"
+          description="Discover how our training has transformed the lives and fitness levels of our clients."
+          tag="Real Results"
+          tagIcon={Star}
+          testimonials={[
+            {
+              id: "1",              name: "Marcus Chen",              handle: "@marcuschen",              testimonial: "Transformed my entire approach to strength training. The personalized coaching made all the difference in my progress.",              imageSrc: "http://img.b2bpic.net/free-photo/man-doing-some-business-deal-with-client_329181-10302.jpg?_wi=3",              imageAlt: "Marcus Chen"},
+            {
+              id: "2",              name: "Sarah Mitchell",              handle: "@sarahmitch_fitness",              testimonial: "Finally understand proper form and progressive overload. Best investment in my health I could have made.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-athlete-ready-run_23-2148876522.jpg?_wi=3",              imageAlt: "Sarah Mitchell"},
+            {
+              id: "3",              name: "David Thompson",              handle: "@davidthompson88",              testimonial: "Consistency and structure finally clicked. The customized program kept me accountable and delivered results.",              imageSrc: "http://img.b2bpic.net/free-photo/view-woman-helping-man-exercise-gym_52683-98091.jpg?_wi=2",              imageAlt: "David Thompson"},
+            {
+              id: "4",              name: "Jessica Liu",              handle: "@jessicaliu_trains",              testimonial: "Expert guidance cut through the confusion. Now I train smarter, not just harder. Highly recommend.",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-face-african-american-girl-looking-away_1262-3098.jpg?_wi=2",              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 Start?"
           tagIcon={Zap}
-          title="Begin Your Transformation Today"
+          title="Begin Your Strength Journey"
-          description="Schedule a free consultation with our coaching team. We'll discuss your goals, assess your current fitness level, and create a personalized plan to get you results."
+          description="Book a free consultation with our coaching team and let's build a personalized program tailored to your goals and lifestyle."
-          background={{ variant: "glowing-orb" }}
+          background={{ variant: "animated-grid" }}
           buttons={[
             {
-              text: "Book Your Free Consultation",              href: "/contact"},
+              text: "Schedule a Consultation",              href: "/contact"},
             {
-              text: "View Services",              href: "/services"},
+              text: "Learn More",              href: "/services"},
           ]}
           useInvertedBackground={false}
         />
       </div>
 
+      <div id="location" data-section="location">
+        <ContactCTA
+          tag="Visit Us"
+          tagIcon={MapPin}
+          title="488 Helmcken St, Vancouver, BC"
+          description="Located in the heart of Vancouver. Drop by to meet the team, tour our facility, and discuss your fitness goals 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>
+
       <div id="footer" data-section="footer">
         <FooterSimple
           columns={footerColumns}
@@ -120,4 +199,4 @@ export default function AboutPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/contact/page.tsx

@@ -1,13 +1,70 @@
 "use client";
 
+import { useState } from "react";
 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 ContactSplit from "@/components/sections/contact/ContactSplit";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Zap, MapPin } from "lucide-react";
+import { Zap, MapPin, Phone, Clock } from "lucide-react";
 
 export default function ContactPage() {
+  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: "#" },
+      ],
+    },
+  ];
+
+  const [formData, setFormData] = useState({
+    name: "",    email: "",    phone: "",    message: ""});
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log("Form submitted:", formData);
+    setFormData({ name: "", email: "", phone: "", message: "" });
+  };
+
+  const handleEmailSubmit = (email: string) => {
+    console.log("Email signup:", email);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-bubble"
@@ -21,94 +78,226 @@ export default function ContactPage() {
       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>
 
-      {/* Main CTA Section */}
+      <div id="hero" data-section="hero">
-      <div id="cta" data-section="cta">
+        <HeroBillboardTestimonial
-        <ContactCTA
+          title="Get In Touch"
-          tag="Ready to Transform?"
+          description="Ready to start your strength training journey? Reach out to our team. We'll help you book a session, answer questions, or discuss your fitness goals."
+          tag="Contact Us"
           tagIcon={Zap}
-          tagAnimation="slide-up"
+          background={{ variant: "animated-grid" }}
-          title="Start Training Today"
+          imageSrc="http://img.b2bpic.net/free-photo/handsome-man-showing-mucles_23-2147775529.jpg?_wi=4"
-          description="Your first step toward elite strength and unshakeable confidence. Book a consultation with our coaching team and let's build your custom strength program."
+          imageAlt="Contact Vinsmoke Athletics"
-          background={{
+          mediaAnimation="slide-up"
-            variant: "plain"}}
+          testimonials={[
+            {
+              name: "Fast Response",              handle: "We reply within 24 hours",              testimonial: "Your inquiry matters. Our team gets back to you quickly to help you move forward.",              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/man-doing-some-business-deal-with-client_329181-10302.jpg?_wi=6"},
+            {
+              name: "Expert Guidance",              handle: "Personalized recommendations",              testimonial: "We assess your needs and recommend the best service or program for your goals.",              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-athlete-ready-run_23-2148876522.jpg?_wi=6"},
+          ]}
           buttons={[
             {
-              text: "Book Your Free Consultation",              href: "/contact"},
+              text: "Send a Message",              href: "#contact-form"},
-            {
-              text: "Learn More",              href: "/services"},
           ]}
           buttonAnimation="blur-reveal"
           useInvertedBackground={false}
         />
       </div>
 
-      {/* Location Section */}
+      <div id="contact-form" data-section="contact-form" className="py-20">
+        <div className="max-w-7xl mx-auto px-4 md:px-6 lg:px-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-16">
+            {/* Contact Form */}
+            <div>
+              <h2 className="text-3xl md:text-4xl font-extrabold mb-8">Send Us a Message</h2>
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div>
+                  <label htmlFor="name" className="block text-sm font-semibold mb-2">
+                    Full Name
+                  </label>
+                  <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleChange}
+                    required
+                    className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="Your name"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="email" className="block text-sm font-semibold mb-2">
+                    Email Address
+                  </label>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleChange}
+                    required
+                    className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="your@email.com"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="phone" className="block text-sm font-semibold mb-2">
+                    Phone Number
+                  </label>
+                  <input
+                    type="tel"
+                    id="phone"
+                    name="phone"
+                    value={formData.phone}
+                    onChange={handleChange}
+                    className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="(604) 555-0000"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="message" className="block text-sm font-semibold mb-2">
+                    Message
+                  </label>
+                  <textarea
+                    id="message"
+                    name="message"
+                    value={formData.message}
+                    onChange={handleChange}
+                    required
+                    rows={4}
+                    className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="Tell us about your fitness goals or ask any questions..."
+                  />
+                </div>
+                <button
+                  type="submit"
+                  className="w-full bg-blue-600 text-white font-semibold py-3 rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  Send Message
+                </button>
+              </form>
+            </div>
+
+            {/* Contact Info */}
+            <div>
+              <h2 className="text-3xl md:text-4xl font-extrabold mb-8">Contact Information</h2>
+              <div className="space-y-8">
+                <div className="flex gap-4">
+                  <MapPin className="w-6 h-6 flex-shrink-0 text-blue-600 mt-1" />
+                  <div>
+                    <h3 className="font-semibold text-lg mb-2">Location</h3>
+                    <p className="text-gray-600">488 Helmcken St</p>
+                    <p className="text-gray-600">Vancouver, BC, Canada</p>
+                  </div>
+                </div>
+
+                <div className="flex gap-4">
+                  <Phone className="w-6 h-6 flex-shrink-0 text-blue-600 mt-1" />
+                  <div>
+                    <h3 className="font-semibold text-lg mb-2">Phone</h3>
+                    <p className="text-gray-600">(604) 555-0123</p>
+                    <p className="text-gray-500 text-sm">Mon-Fri: 9AM-6PM</p>
+                  </div>
+                </div>
+
+                <div className="flex gap-4">
+                  <Clock className="w-6 h-6 flex-shrink-0 text-blue-600 mt-1" />
+                  <div>
+                    <h3 className="font-semibold text-lg mb-2">Hours</h3>
+                    <p className="text-gray-600">Monday - Friday: 9AM - 6PM</p>
+                    <p className="text-gray-600">Saturday: 10AM - 4PM</p>
+                    <p className="text-gray-600">Sunday: Closed</p>
+                  </div>
+                </div>
+
+                <div className="mt-12 p-6 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg">
+                  <h3 className="font-semibold text-lg mb-3">Visit Our Studio</h3>
+                  <p className="text-gray-700 mb-6">
+                    Stop by in person to tour our facility, meet the team, and discuss your fitness goals over a coffee.
+                  </p>
+                  <a
+                    href="https://maps.google.com/?q=488+Helmcken+St+Vancouver+BC"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-block bg-blue-600 text-white font-semibold py-2 px-6 rounded-lg hover:bg-blue-700 transition-colors"
+                  >
+                    Get Directions
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="newsletter" data-section="newsletter">
+        <ContactSplit
+          tag="Stay Connected"
+          title="Subscribe to Our Newsletter"
+          description="Get fitness tips, training advice, and updates on our latest offerings delivered directly to your inbox."
+          background={{ variant: "animated-grid" }}
+          useInvertedBackground={true}
+          imageSrc="http://img.b2bpic.net/free-photo/handsome-man-showing-mucles_23-2147775529.jpg?_wi=5"
+          imageAlt="Subscribe to fitness tips"
+          mediaAnimation="slide-up"
+          inputPlaceholder="your@email.com"
+          buttonText="Subscribe"
+          onSubmit={handleEmailSubmit}
+        />
+      </div>
+
+      <div id="cta" data-section="cta">
+        <ContactCTA
+          tag="Next Steps"
+          tagIcon={Zap}
+          title="Book Your Free Consultation"
+          description="Whether you're a complete beginner or an experienced lifter, our coaching team is ready to help. Schedule your free consultation to discuss your goals and find the perfect training program."
+          background={{ variant: "animated-grid" }}
+          buttons={[
+            {
+              text: "Schedule Consultation",              href: "#contact-form"},
+            {
+              text: "Explore Services",              href: "/services"},
+          ]}
+          useInvertedBackground={false}
+        />
+      </div>
+
       <div id="location" data-section="location">
         <ContactCTA
-          tag="Visit Our Studio"
+          tag="Find Us"
           tagIcon={MapPin}
           title="488 Helmcken St, Vancouver, BC"
-          description="Located in the heart of Vancouver. Walk in for a tour, meet the team, and discuss your fitness goals in person. We're here to help you succeed."
+          description="Located in the heart of Vancouver. Drop by our studio to see our training facilities and meet the team in person."
-          background={{
+          background={{ variant: "plain" }}
-            variant: "plain"}}
           buttons={[
             {
               text: "Get Directions",              href: "https://maps.google.com/?q=488+Helmcken+St+Vancouver+BC"},
             {
-              text: "Contact Us",              href: "/contact"},
+              text: "Back to Top",              href: "#nav"},
           ]}
           useInvertedBackground={true}
         />
       </div>
 
-      {/* Footer */}
       <div id="footer" data-section="footer">
         <FooterSimple
-          columns={[
+          columns={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: "/services" },
-                { label: "Contact", href: "/contact" },
-                { label: "Privacy Policy", href: "#" },
-              ],
-            },
-          ]}
           bottomLeftText="© 2025 Vinsmoke Athletics. All rights reserved."
           bottomRightText="488 Helmcken St, Vancouver, BC"
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -75,17 +75,17 @@ export default function HomePage() {
           description="Personalized strength training designed to build real strength, confidence, and long-term health. Elite coaching for those who demand results."
           tag="Premium Training"
           tagIcon={Zap}
-          background={{ variant: "glowing-orb" }}
+          background={{ variant: "animated-grid" }}
-          imageSrc="http://img.b2bpic.net/free-photo/handsome-man-showing-mucles_23-2147775529.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/handsome-man-showing-mucles_23-2147775529.jpg?_wi=1"
           imageAlt="Elite athlete performing strength training"
           mediaAnimation="slide-up"
           testimonials={[
             {
               name: "Marcus Chen",              handle: "Completed 12-Week Program",              testimonial: "Transformed my entire approach to strength training. The personalized coaching made all the difference.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/man-doing-some-business-deal-with-client_329181-10302.jpg"},
+              imageSrc: "http://img.b2bpic.net/free-photo/man-doing-some-business-deal-with-client_329181-10302.jpg?_wi=1"},
             {
               name: "Sarah Mitchell",              handle: "Consistency Built Results",              testimonial: "Finally understand proper form and progressive overload. Best investment in my health.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-athlete-ready-run_23-2148876522.jpg"},
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-athlete-ready-run_23-2148876522.jpg?_wi=1"},
           ]}
           buttons={[
             {
@@ -104,23 +104,23 @@ export default function HomePage() {
             {
               id: 1,
               title: "Inconsistent Training",              description: "Without structure and accountability, progress stalls. You need a system that keeps you committed.",              phoneOne: {
-                imageSrc: "http://img.b2bpic.net/free-photo/european-young-woman-sport-black-uniform-sitting-concrete-staircase_291650-398.jpg"},
+                imageSrc: "http://img.b2bpic.net/free-photo/european-young-woman-sport-black-uniform-sitting-concrete-staircase_291650-398.jpg?_wi=1"},
               phoneTwo: {
-                imageSrc: "http://img.b2bpic.net/free-photo/young-friends-working-together-fitness-class_23-2148284916.jpg"},
+                imageSrc: "http://img.b2bpic.net/free-photo/young-friends-working-together-fitness-class_23-2148284916.jpg?_wi=1"},
             },
             {
               id: 2,
               title: "Lack of Progress",              description: "Generic workouts don't work. Your training must be tailored to YOUR goals and body.",              phoneOne: {
-                imageSrc: "http://img.b2bpic.net/free-photo/european-young-woman-sport-black-uniform-sitting-concrete-staircase_291650-398.jpg"},
+                imageSrc: "http://img.b2bpic.net/free-photo/european-young-woman-sport-black-uniform-sitting-concrete-staircase_291650-398.jpg?_wi=2"},
               phoneTwo: {
-                imageSrc: "http://img.b2bpic.net/free-photo/young-friends-working-together-fitness-class_23-2148284916.jpg"},
+                imageSrc: "http://img.b2bpic.net/free-photo/young-friends-working-together-fitness-class_23-2148284916.jpg?_wi=2"},
             },
             {
               id: 3,
               title: "Confusion About Workouts",              description: "Too much conflicting information online. You need expert guidance you can trust.",              phoneOne: {
-                imageSrc: "http://img.b2bpic.net/free-photo/european-young-woman-sport-black-uniform-sitting-concrete-staircase_291650-398.jpg"},
+                imageSrc: "http://img.b2bpic.net/free-photo/european-young-woman-sport-black-uniform-sitting-concrete-staircase_291650-398.jpg?_wi=3"},
               phoneTwo: {
-                imageSrc: "http://img.b2bpic.net/free-photo/young-friends-working-together-fitness-class_23-2148284916.jpg"},
+                imageSrc: "http://img.b2bpic.net/free-photo/young-friends-working-together-fitness-class_23-2148284916.jpg?_wi=3"},
             },
           ]}
           showStepNumbers={true}
@@ -151,13 +151,17 @@ export default function HomePage() {
           tagIcon={Zap}
           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",              imageAlt: "Personal training session"},
+              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=1",              imageAlt: "Personal training session"},
             {
-              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",              imageAlt: "Strength and conditioning training"},
+              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=1",              imageAlt: "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",              imageAlt: "Beginner strength training program"},
+              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=1",              imageAlt: "Beginner 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",              imageAlt: "Custom workout plan design"},
+              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=1",              imageAlt: "Custom workout plan design"},
           ]}
           gridVariant="two-columns-alternating-heights"
           animationType="slide-up"
@@ -178,13 +182,13 @@ export default function HomePage() {
           tagIcon={Star}
           testimonials={[
             {
-              id: "1",              name: "Marcus Chen",              handle: "@marcuschen",              testimonial: "Transformed my entire approach to strength training. The personalized coaching made all the difference in my progress.",              imageSrc: "http://img.b2bpic.net/free-photo/man-doing-some-business-deal-with-client_329181-10302.jpg",              imageAlt: "Marcus Chen"},
+              id: "1",              name: "Marcus Chen",              handle: "@marcuschen",              testimonial: "Transformed my entire approach to strength training. The personalized coaching made all the difference in my progress.",              imageSrc: "http://img.b2bpic.net/free-photo/man-doing-some-business-deal-with-client_329181-10302.jpg?_wi=2",              imageAlt: "Marcus Chen"},
             {
-              id: "2",              name: "Sarah Mitchell",              handle: "@sarahmitch_fitness",              testimonial: "Finally understand proper form and progressive overload. Best investment in my health I could have made.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-athlete-ready-run_23-2148876522.jpg",              imageAlt: "Sarah Mitchell"},
+              id: "2",              name: "Sarah Mitchell",              handle: "@sarahmitch_fitness",              testimonial: "Finally understand proper form and progressive overload. Best investment in my health I could have made.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-athlete-ready-run_23-2148876522.jpg?_wi=2",              imageAlt: "Sarah Mitchell"},
             {
-              id: "3",              name: "David Thompson",              handle: "@davidthompson88",              testimonial: "Consistency and structure finally clicked. The customized program kept me accountable and delivered results.",              imageSrc: "http://img.b2bpic.net/free-photo/view-woman-helping-man-exercise-gym_52683-98091.jpg",              imageAlt: "David Thompson"},
+              id: "3",              name: "David Thompson",              handle: "@davidthompson88",              testimonial: "Consistency and structure finally clicked. The customized program kept me accountable and delivered results.",              imageSrc: "http://img.b2bpic.net/free-photo/view-woman-helping-man-exercise-gym_52683-98091.jpg?_wi=1",              imageAlt: "David Thompson"},
             {
-              id: "4",              name: "Jessica Liu",              handle: "@jessicaliu_trains",              testimonial: "Expert guidance cut through the confusion. Now I train smarter, not just harder. Highly recommend.",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-face-african-american-girl-looking-away_1262-3098.jpg",              imageAlt: "Jessica Liu"},
+              id: "4",              name: "Jessica Liu",              handle: "@jessicaliu_trains",              testimonial: "Expert guidance cut through the confusion. Now I train smarter, not just harder. Highly recommend.",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-face-african-american-girl-looking-away_1262-3098.jpg?_wi=1",              imageAlt: "Jessica Liu"},
             {
               id: "5",              name: "Alex Rodriguez",              handle: "@alexfitness",              testimonial: "One-on-one coaching accountability transformed my consistency. Best decision for my fitness journey.",              imageSrc: "http://img.b2bpic.net/free-photo/two-men-dressing-room-gym_329181-13273.jpg",              imageAlt: "Alex Rodriguez"},
             {
@@ -205,7 +209,7 @@ export default function HomePage() {
           tagAnimation="slide-up"
           title="Start Training Today"
           description="Your first step toward elite strength and unshakeable confidence. Book a consultation with our coaching team and let's build your custom strength program."
-          background={{ variant: "glowing-orb" }}
+          background={{ variant: "animated-grid" }}
           buttons={[
             {
               text: "Book Your Free Consultation",              href: "/contact"},
@@ -243,4 +247,4 @@ export default function HomePage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/services/page.tsx

@@ -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 FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
-import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
+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: "animated-grid" }}
+          imageSrc="http://img.b2bpic.net/free-photo/handsome-man-showing-mucles_23-2147775529.jpg?_wi=3"
+          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?_wi=4"},
+            {
+              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?_wi=4"},
+          ]}
+          buttons={[
+            {
+              text: "Book Your First Session",              href: "/contact"},
+          ]}
+          buttonAnimation="blur-reveal"
+          useInvertedBackground={false}
+        />
+      </div>
+
       <div id="services" data-section="services">
         <ProductCardTwo
-          title="Training Services"
+          title="Our Training Programs"
-          description="Choose the training approach that matches your goals and experience level."
+          description="Choose the service that aligns with your fitness goals and experience level."
-          tag="Our Offerings"
+          tag="Three Core Offerings"
-          tagIcon={Zap}
+          tagIcon={Shield}
           products={[
             {
-              id: "1",
+              id: "1",              brand: "One-on-One Coaching",              name: "Personal Training Sessions",              price: "$75 per session",              rating: 5,
-              brand: "1-on-1 Coaching",
+              reviewCount: "50+",              imageSrc: "http://img.b2bpic.net/free-photo/crop-closeup-portrait-woman-exercising-gym_651396-1078.jpg?_wi=2",              imageAlt: "Personal training session with expert coach"},
-              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: "2",
+              id: "2",              brand: "Athletic Development",              name: "Strength & Conditioning",              price: "$85 per session",              rating: 5,
-              brand: "Athletic Development",
+              reviewCount: "45+",              imageSrc: "http://img.b2bpic.net/free-photo/woman-exercising-weight-bench_329181-14151.jpg?_wi=2",              imageAlt: "Advanced strength and conditioning training"},
-              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: "3",
+              id: "3",              brand: "Foundation Building",              name: "Beginner Strength Programs",              price: "$199 per month",              rating: 5,
-              brand: "Foundation Building",
+              reviewCount: "38+",              imageSrc: "http://img.b2bpic.net/free-photo/gym-instructor-guiding-woman-while-exercising-with-dumbbell_23-2147827468.jpg?_wi=2",              imageAlt: "Beginner-friendly strength training program"},
-              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: "4",
+              id: "4",              brand: "Customized Solutions",              name: "Custom Workout Plans",              price: "$149 per month",              rating: 5,
-              brand: "Tailored Solutions",
+              reviewCount: "42+",              imageSrc: "http://img.b2bpic.net/free-photo/young-sports-people-training-morning-gym_1157-32133.jpg?_wi=2",              imageAlt: "Personalized custom workout plan design"},
-              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",
-            },
           ]}
           gridVariant="two-columns-alternating-heights"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={true}
+          buttons={[
+            {
+              text: "Learn More",              href: "#details"},
+          ]}
         />
       </div>
 
-      {/* Detailed Service Breakdown */}
+      <div id="details" data-section="details">
-      <div id="service-details" data-section="service-details">
+        <FeatureCardTwelve
-        <FeatureCardNine
-          title="How Our Training Programs Work"
-          description="Each program is structured for maximum results and sustainable progress."
           features={[
             {
-              id: 1,
+              id: "personal-training",              label: "Personal Training",              title: "One-on-One Personalized Coaching",              items: [
-              title: "Assessment & Planning",
+                "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"],
-              description: "We start with a comprehensive assessment of your fitness level, goals, and lifestyle. This informs your personalized training program designed specifically for YOU.",
+              buttons: [
-              phoneOne: {
+                {
-                imageSrc: "http://img.b2bpic.net/free-photo/crop-closeup-portrait-woman-exercising-gym_651396-1078.jpg?_wi=3",
+                  text: "Book a Session",                  href: "/contact"},
-              },
+              ],
-              phoneTwo: {
-                imageSrc: "http://img.b2bpic.net/free-photo/young-friends-working-together-fitness-class_23-2148284916.jpg?_wi=4",
-              },
             },
             {
-              id: 2,
+              id: "strength-conditioning",              label: "Strength & Conditioning",              title: "Athletic Development and Performance",              items: [
-              title: "Structured Programming",
+                "Sport-specific training and conditioning protocols",                "Injury prevention and mobility work integrated",                "Periodized programs for peak performance",                "Perfect for athletes and serious lifters"],
-              description: "Your workouts follow proven periodization principles. Progressive overload, proper form, and strategic recovery built into every session for optimal gains.",
+              buttons: [
-              phoneOne: {
+                {
-                imageSrc: "http://img.b2bpic.net/free-photo/woman-exercising-weight-bench_329181-14151.jpg?_wi=3",
+                  text: "Schedule Training",                  href: "/contact"},
-              },
+              ],
-              phoneTwo: {
-                imageSrc: "http://img.b2bpic.net/free-photo/gym-instructor-guiding-woman-while-exercising-with-dumbbell_23-2147827468.jpg?_wi=3",
-              },
             },
             {
-              id: 3,
+              id: "custom-programs",              label: "Custom Programs",              title: "Tailored Workout Plans for Your Lifestyle",              items: [
-              title: "Accountability & Coaching",
+                "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"],
-              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.",
+              buttons: [
-              phoneOne: {
+                {
-                imageSrc: "http://img.b2bpic.net/free-photo/young-sports-people-training-morning-gym_1157-32133.jpg?_wi=3",
+                  text: "Start Your Program",                  href: "/contact"},
-              },
+              ],
-              phoneTwo: {
-                imageSrc: "http://img.b2bpic.net/free-photo/crop-closeup-portrait-woman-exercising-gym_651396-1078.jpg?_wi=4",
-              },
             },
           ]}
-          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="testimonials" data-section="testimonials">
-      <div id="philosophy" data-section="philosophy">
+        <TestimonialCardSix
-        <TextAbout
+          title="What Clients Say About Our Services"
-          tag="Our Approach"
+          description="Real results from real people who have experienced our training firsthand."
-          tagIcon={Shield}
+          tag="Client Testimonials"
-          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."
+          tagIcon={Star}
-          useInvertedBackground={true}
+          testimonials={[
-          buttons={[
             {
-              text: "Book Your Consultation",
+              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?_wi=5",              imageAlt: "Marcus Chen"},
-              href: "/contact",
+            {
-            },
+              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?_wi=5",              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?_wi=3",              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?_wi=3",              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: "animated-grid" }}
+          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={[
+          columns={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: "/services" },
-                { label: "Contact", href: "/contact" },
-                { label: "Privacy Policy", href: "#" },
-              ],
-            },
-          ]}
           bottomLeftText="© 2025 Vinsmoke Athletics. All rights reserved."
           bottomRightText="488 Helmcken St, Vancouver, BC"
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #000000;
+  --background: #ffffff;
-  --card: #0c0c0c;
+  --card: #f9f9f9;
-  --foreground: #ffffff;
+  --foreground: #000612e6;
-  --primary-cta: #106EFB;
+  --primary-cta: #15479c;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #000000;
+  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #ffffff;
+  --secondary-cta-text: #000612e6;
-  --accent: #535353;
+  --accent: #e2e2e2;
-  --background-accent: #106EFB;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);