Update src/app/page.tsx
This commit is contained in:
101
src/app/page.tsx
101
src/app/page.tsx
@@ -10,13 +10,12 @@ import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCar
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import Link from "next/link";
|
||||
import { Sparkles, Shield, Zap, Users, Star, Clock, Heart, Award } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Membership", id: "/membership" },
|
||||
{ name: "Assessment", id: "#fitness-assessment" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
@@ -56,24 +55,6 @@ const footerColumns = [
|
||||
];
|
||||
|
||||
export default function HomePage() {
|
||||
const [weight, setWeight] = useState("");
|
||||
const [fitnessGoal, setFitnessGoal] = useState("");
|
||||
const [hoursPerWeek, setHoursPerWeek] = useState("");
|
||||
const [assessmentComplete, setAssessmentComplete] = useState(false);
|
||||
|
||||
const handleSubmitAssessment = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (weight && fitnessGoal && hoursPerWeek) {
|
||||
setAssessmentComplete(true);
|
||||
setTimeout(() => {
|
||||
setAssessmentComplete(false);
|
||||
setWeight("");
|
||||
setFitnessGoal("");
|
||||
setHoursPerWeek("");
|
||||
}, 2000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
@@ -131,7 +112,7 @@ export default function HomePage() {
|
||||
|
||||
<div id="metrics" data-section="metrics" className="w-full py-16">
|
||||
<MetricCardOne
|
||||
title="Why Choose Ignite Fitness Club"
|
||||
title="Ignite Fitness Club by the Numbers"
|
||||
description="Trust indicators backed by real numbers and quality service"
|
||||
tag="Trust Indicators"
|
||||
tagIcon={Shield}
|
||||
@@ -210,84 +191,6 @@ export default function HomePage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="fitness-assessment" data-section="fitness-assessment" className="w-full py-20">
|
||||
<div className="mx-auto max-w-4xl px-6">
|
||||
<div className="mb-12 text-center">
|
||||
<h2 className="mb-4 text-4xl font-bold md:text-5xl">Personalized Fitness Assessment</h2>
|
||||
<p className="text-lg text-foreground/80">Let us understand your fitness goals and create a personalized plan for you</p>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto max-w-2xl rounded-lg bg-card p-8 shadow-lg">
|
||||
{assessmentComplete ? (
|
||||
<div className="text-center">
|
||||
<div className="mb-4 text-5xl">✅</div>
|
||||
<h3 className="mb-2 text-2xl font-bold text-primary-cta">Assessment Submitted!</h3>
|
||||
<p className="text-foreground/80">Thank you for completing your fitness assessment. Our trainers will review your information and reach out soon with a personalized plan.</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmitAssessment} className="space-y-6">
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold text-foreground">
|
||||
Current Weight (kg)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.1"
|
||||
placeholder="Enter your weight"
|
||||
value={weight}
|
||||
onChange={(e) => setWeight(e.target.value)}
|
||||
className="w-full rounded-lg border border-accent bg-background px-4 py-3 text-foreground placeholder-foreground/50 focus:border-primary-cta focus:outline-none"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold text-foreground">
|
||||
Fitness Goal
|
||||
</label>
|
||||
<select
|
||||
value={fitnessGoal}
|
||||
onChange={(e) => setFitnessGoal(e.target.value)}
|
||||
className="w-full rounded-lg border border-accent bg-background px-4 py-3 text-foreground focus:border-primary-cta focus:outline-none"
|
||||
required
|
||||
>
|
||||
<option value="">Select your primary goal</option>
|
||||
<option value="weight-loss">Weight Loss</option>
|
||||
<option value="muscle-gain">Muscle Gain</option>
|
||||
<option value="strength">Build Strength</option>
|
||||
<option value="endurance">Improve Endurance</option>
|
||||
<option value="general-fitness">General Fitness</option>
|
||||
<option value="flexibility">Increase Flexibility</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold text-foreground">
|
||||
Hours Devoted to Fitness Per Week
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.5"
|
||||
placeholder="e.g., 3.5"
|
||||
value={hoursPerWeek}
|
||||
onChange={(e) => setHoursPerWeek(e.target.value)}
|
||||
className="w-full rounded-lg border border-accent bg-background px-4 py-3 text-foreground placeholder-foreground/50 focus:border-primary-cta focus:outline-none"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full rounded-lg bg-primary-cta px-6 py-3 font-semibold text-primary-cta-text transition-all hover:opacity-90"
|
||||
>
|
||||
Submit Assessment
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials" className="w-full py-20">
|
||||
<TestimonialCardTen
|
||||
title="Testimonials from Our Community"
|
||||
|
||||
Reference in New Issue
Block a user