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 FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { Sparkles, Shield, Zap, Users, Star, Clock, Heart, Award } from "lucide-react";
|
import { Sparkles, Shield, Zap, Users, Star, Clock, Heart, Award } from "lucide-react";
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ name: "Home", id: "/" },
|
{ name: "Home", id: "/" },
|
||||||
{ name: "Services", id: "/services" },
|
{ name: "Services", id: "/services" },
|
||||||
{ name: "Membership", id: "/membership" },
|
{ name: "Membership", id: "/membership" },
|
||||||
{ name: "Assessment", id: "#fitness-assessment" },
|
{ name: "About", id: "/about" },
|
||||||
{ name: "Contact", id: "/contact" },
|
{ name: "Contact", id: "/contact" },
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -56,24 +55,6 @@ const footerColumns = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default function HomePage() {
|
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 (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="text-stagger"
|
defaultButtonVariant="text-stagger"
|
||||||
@@ -131,7 +112,7 @@ export default function HomePage() {
|
|||||||
|
|
||||||
<div id="metrics" data-section="metrics" className="w-full py-16">
|
<div id="metrics" data-section="metrics" className="w-full py-16">
|
||||||
<MetricCardOne
|
<MetricCardOne
|
||||||
title="Why Choose Ignite Fitness Club"
|
title="Ignite Fitness Club by the Numbers"
|
||||||
description="Trust indicators backed by real numbers and quality service"
|
description="Trust indicators backed by real numbers and quality service"
|
||||||
tag="Trust Indicators"
|
tag="Trust Indicators"
|
||||||
tagIcon={Shield}
|
tagIcon={Shield}
|
||||||
@@ -210,84 +191,6 @@ export default function HomePage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</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">
|
<div id="testimonials" data-section="testimonials" className="w-full py-20">
|
||||||
<TestimonialCardTen
|
<TestimonialCardTen
|
||||||
title="Testimonials from Our Community"
|
title="Testimonials from Our Community"
|
||||||
|
|||||||
Reference in New Issue
Block a user