|
|
|
@@ -11,11 +11,12 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
|
|
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
|
|
import { Award, Dumbbell, Phone, Trophy, Zap } from "lucide-react";
|
|
|
|
import { Award, Dumbbell, Phone, Trophy, Zap, Clock } from "lucide-react";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
|
|
|
|
|
|
|
|
export default function LandingPage() {
|
|
|
|
export default function LandingPage() {
|
|
|
|
const brandListRef = useRef<HTMLDivElement>(null);
|
|
|
|
const brandListRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
|
|
|
const [timeLeft, setTimeLeft] = useState<string>("5:00");
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
if (!brandListRef.current) return;
|
|
|
|
if (!brandListRef.current) return;
|
|
|
|
@@ -33,7 +34,7 @@ export default function LandingPage() {
|
|
|
|
const totalWidth = itemWidth * itemCount;
|
|
|
|
const totalWidth = itemWidth * itemCount;
|
|
|
|
|
|
|
|
|
|
|
|
const animateScroll = () => {
|
|
|
|
const animateScroll = () => {
|
|
|
|
scrollPosition += 1;
|
|
|
|
scrollPosition += 0.5;
|
|
|
|
if (scrollPosition >= totalWidth / 2) {
|
|
|
|
if (scrollPosition >= totalWidth / 2) {
|
|
|
|
scrollPosition = 0;
|
|
|
|
scrollPosition = 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@@ -44,6 +45,25 @@ export default function LandingPage() {
|
|
|
|
animateScroll();
|
|
|
|
animateScroll();
|
|
|
|
}, []);
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
const startTime = Date.now();
|
|
|
|
|
|
|
|
const durationMs = 5 * 60 * 1000; // 5 minutes
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const updateTimer = () => {
|
|
|
|
|
|
|
|
const elapsed = Date.now() - startTime;
|
|
|
|
|
|
|
|
const remaining = Math.max(0, durationMs - elapsed);
|
|
|
|
|
|
|
|
const minutes = Math.floor(remaining / 60000);
|
|
|
|
|
|
|
|
const seconds = Math.floor((remaining % 60000) / 1000);
|
|
|
|
|
|
|
|
setTimeLeft(`${minutes}:${seconds.toString().padStart(2, '0')}`);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (remaining > 0) {
|
|
|
|
|
|
|
|
requestAnimationFrame(updateTimer);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
updateTimer();
|
|
|
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
|
|
const brands = [
|
|
|
|
const brands = [
|
|
|
|
"Gold's Gym Partners", "Fitness Canada Certified", "NASM Certified", "ACE Certified", "ISSA Certified", "IIFYM Certified", "PN Level 1 Certified", "TRX Certified", "CrossFit Level 1", "NCCPT Certified"
|
|
|
|
"Gold's Gym Partners", "Fitness Canada Certified", "NASM Certified", "ACE Certified", "ISSA Certified", "IIFYM Certified", "PN Level 1 Certified", "TRX Certified", "CrossFit Level 1", "NCCPT Certified"
|
|
|
|
];
|
|
|
|
];
|
|
|
|
@@ -113,12 +133,12 @@ export default function LandingPage() {
|
|
|
|
<div className="brand-scroll-container w-full overflow-x-hidden">
|
|
|
|
<div className="brand-scroll-container w-full overflow-x-hidden">
|
|
|
|
<div className="flex gap-8 md:gap-12 whitespace-nowrap">
|
|
|
|
<div className="flex gap-8 md:gap-12 whitespace-nowrap">
|
|
|
|
{brands.map((brand, index) => (
|
|
|
|
{brands.map((brand, index) => (
|
|
|
|
<div key={`${index}-1`} className="brand-item flex items-center justify-center h-12 min-w-max px-4 text-foreground/60 font-medium text-sm flex-shrink-0">
|
|
|
|
<div key={`${index}-1`} className="brand-item flex items-center justify-center h-12 min-w-max px-4 py-2 text-foreground/60 font-medium text-sm flex-shrink-0 rounded-theme border border-card bg-card/40 backdrop-blur-sm">
|
|
|
|
{brand}
|
|
|
|
{brand}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
))}
|
|
|
|
{brands.map((brand, index) => (
|
|
|
|
{brands.map((brand, index) => (
|
|
|
|
<div key={`${index}-2`} className="brand-item flex items-center justify-center h-12 min-w-max px-4 text-foreground/60 font-medium text-sm flex-shrink-0">
|
|
|
|
<div key={`${index}-2`} className="brand-item flex items-center justify-center h-12 min-w-max px-4 py-2 text-foreground/60 font-medium text-sm flex-shrink-0 rounded-theme border border-card bg-card/40 backdrop-blur-sm">
|
|
|
|
{brand}
|
|
|
|
{brand}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
))}
|
|
|
|
@@ -162,10 +182,6 @@ export default function LandingPage() {
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: 3,
|
|
|
|
id: 3,
|
|
|
|
tag: "Nutrition", title: "Nutrition Planning", subtitle: "Fuel your body for optimal results", description: "Science-backed nutrition guidance and meal planning tailored to your fitness goals. Learn sustainable eating habits that complement your training program.", imageSrc: "https://img.b2bpic.net/free-photo/healthy-menu-recipe-food-diet_53876-122837.jpg", imageAlt: "Healthy nutrition meal planning consultation"
|
|
|
|
tag: "Nutrition", title: "Nutrition Planning", subtitle: "Fuel your body for optimal results", description: "Science-backed nutrition guidance and meal planning tailored to your fitness goals. Learn sustainable eating habits that complement your training program.", imageSrc: "https://img.b2bpic.net/free-photo/healthy-menu-recipe-food-diet_53876-122837.jpg", imageAlt: "Healthy nutrition meal planning consultation"
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
id: 4,
|
|
|
|
|
|
|
|
tag: "Digital Coaching", title: "Online Training Programs", subtitle: "Train anywhere, anytime with expert guidance", description: "Flexible online coaching programs with customized workouts, progress tracking, and ongoing support. Perfect for busy Toronto professionals.", imageSrc: "https://img.b2bpic.net/free-photo/happy-athletic-woman-using-laptop-while-having-online-exercise-class-home_637285-5355.jpg", imageAlt: "Virtual fitness coaching session"
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
@@ -230,6 +246,34 @@ export default function LandingPage() {
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style jsx>{`
|
|
|
|
|
|
|
|
@keyframes countdown-pulse {
|
|
|
|
|
|
|
|
0%, 100% { opacity: 1; }
|
|
|
|
|
|
|
|
50% { opacity: 0.7; }
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.limited-offer-tag {
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
top: 12px;
|
|
|
|
|
|
|
|
right: 12px;
|
|
|
|
|
|
|
|
background: linear-gradient(135deg, #ff3d4a 0%, #e63946 100%);
|
|
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
|
|
padding: 6px 12px;
|
|
|
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
gap: 6px;
|
|
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
|
|
z-index: 10;
|
|
|
|
|
|
|
|
animation: countdown-pulse 1s ease-in-out infinite;
|
|
|
|
|
|
|
|
box-shadow: 0 4px 12px rgba(230, 57, 70, 0.4);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.timer-text {
|
|
|
|
|
|
|
|
font-family: 'Courier New', monospace;
|
|
|
|
|
|
|
|
letter-spacing: 0.5px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
`}</style>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
|
|
<TestimonialCardFifteen
|
|
|
|
<TestimonialCardFifteen
|
|
|
|
testimonial="Working with this trainer completely changed my life. I went from zero fitness experience to running a 5K and feeling stronger than ever. The personalized approach and constant encouragement made all the difference."
|
|
|
|
testimonial="Working with this trainer completely changed my life. I went from zero fitness experience to running a 5K and feeling stronger than ever. The personalized approach and constant encouragement made all the difference."
|
|
|
|
@@ -346,4 +390,4 @@ export default function LandingPage() {
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ThemeProvider>
|
|
|
|
</ThemeProvider>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|