|
|
|
|
@@ -11,11 +11,12 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
|
|
|
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
|
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
|
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
|
|
|
import { Award, Dumbbell, Phone, Trophy, Zap } from "lucide-react";
|
|
|
|
|
import { useEffect, useRef } from "react";
|
|
|
|
|
import { Award, Dumbbell, Phone, Trophy, Zap, Clock } from "lucide-react";
|
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
|
|
|
|
|
|
export default function LandingPage() {
|
|
|
|
|
const brandListRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
const [timeLeft, setTimeLeft] = useState<string>("5:00");
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (!brandListRef.current) return;
|
|
|
|
|
@@ -44,6 +45,25 @@ export default function LandingPage() {
|
|
|
|
|
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 = [
|
|
|
|
|
"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"
|
|
|
|
|
];
|
|
|
|
|
@@ -226,6 +246,34 @@ export default function LandingPage() {
|
|
|
|
|
/>
|
|
|
|
|
</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">
|
|
|
|
|
<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."
|
|
|
|
|
|