"use client"; import { useState } from "react"; import { Activity, Calendar, Dumbbell, Flame, Heart, Target, Timer, Trophy } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Separator } from "@/components/ui/separator"; import { Textarea } from "@/components/ui/textarea"; const FITNESS_GOALS = [ { value: "weight-loss", label: "Lose Weight", icon: Flame, metric: "Burn fat" }, { value: "muscle", label: "Build Muscle", icon: Dumbbell, metric: "Get stronger" }, { value: "endurance", label: "Endurance", icon: Activity, metric: "Last longer" }, { value: "tone", label: "Tone & Define", icon: Target, metric: "Look lean" }, { value: "performance", label: "Performance", icon: Trophy, metric: "Compete" }, { value: "wellness", label: "General Wellness", icon: Heart, metric: "Feel great" }, ]; const EXPERIENCE_LEVELS = [ { value: "beginner", label: "Beginner", description: "New to exercise or returning after long break", sessions: "2-3x/week recommended" }, { value: "intermediate", label: "Intermediate", description: "Exercise regularly, know basic movements", sessions: "3-4x/week recommended" }, { value: "advanced", label: "Advanced", description: "Consistent training, ready for intensity", sessions: "4-5x/week recommended" }, ]; const TRAINING_FORMATS = [ { value: "1on1", label: "1-on-1 Training", price: "$$$", description: "100% personalized attention" }, { value: "semi", label: "Semi-Private (2-4)", price: "$$", description: "Small group, shared cost" }, { value: "group", label: "Group Classes", price: "$", description: "Community & motivation" }, { value: "online", label: "Online Coaching", price: "$$", description: "Train anywhere, anytime" }, ]; const AVAILABILITY = [ { id: "early", label: "Early Morning (5-7am)", icon: "🌅" }, { id: "morning", label: "Morning (7-11am)", icon: "☀️" }, { id: "midday", label: "Midday (11am-2pm)", icon: "🌤️" }, { id: "afternoon", label: "Afternoon (2-5pm)", icon: "⛅" }, { id: "evening", label: "Evening (5-8pm)", icon: "🌆" }, { id: "weekend", label: "Weekends", icon: "📅" }, ]; const HEALTH_CONSIDERATIONS = [ { id: "injury", label: "Current injury or pain" }, { id: "surgery", label: "Recent surgery" }, { id: "heart", label: "Heart condition" }, { id: "pregnant", label: "Pregnant or postpartum" }, { id: "diabetes", label: "Diabetes" }, { id: "none", label: "None of the above" }, ]; export const title = "React Contact Block Fitness"; export default function ContactFitness() { const [goal, setGoal] = useState(""); const [experience, setExperience] = useState(""); const [format, setFormat] = useState("1on1"); return (

Start Your Transformation

Find Your Perfect Training Program

Whether you're just starting out or ready to level up, we'll build a plan that fits your life.

{/* Goal Selection - Visual Top Section */}

What's Your Primary Goal?

{FITNESS_GOALS.map((fg) => { const Icon = fg.icon; return ( {fg.label} {fg.metric} ); })}

{/* Left: Experience & Format */}

Your Fitness Profile

Current Fitness Level {EXPERIENCE_LEVELS.map((level) => (

{level.label}

{level.description}

{level.sessions} ))}

Preferred Training Format {TRAINING_FORMATS.map((tf) => (

{tf.label} {tf.price}

{tf.description} ))}

Health Considerations

{HEALTH_CONSIDERATIONS.map((health) => (

{health.label}

))}

We'll discuss any considerations during your consultation

{/* Right: Schedule & Contact */}

Availability & Contact

When Can You Train?

{AVAILABILITY.map((time) => (

{time.icon} {time.label}

))}

Desired Training Frequency

What's Motivating You Right Now?

</div>

<div className="grid gap-4 sm:grid-cols-2">
                    <div className="space-y-2">
                      <Label htmlFor="name">Your Name</Label>
                      <Input id="name" placeholder="Alex Rivera" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="phone">Phone</Label>
                      <Input id="phone" type="tel" placeholder="+1 (555) 000-0000" />
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="email">Email</Label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="alex@example.com"
                    />
                  </div>

<div className="grid gap-4 sm:grid-cols-2">
                    <div className="space-y-2">
                      <Label htmlFor="age">Age</Label>
                      <Select>
                        <SelectTrigger id="age">
                          <SelectValue placeholder="Select" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="18-24">18-24</SelectItem>
                          <SelectItem value="25-34">25-34</SelectItem>
                          <SelectItem value="35-44">35-44</SelectItem>
                          <SelectItem value="45-54">45-54</SelectItem>
                          <SelectItem value="55+">55+</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="location">Preferred Location</Label>
                      <Select>
                        <SelectTrigger id="location">
                          <SelectValue placeholder="Select" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="downtown">Downtown Studio</SelectItem>
                          <SelectItem value="westside">Westside Gym</SelectItem>
                          <SelectItem value="online">Online Only</SelectItem>
                          <SelectItem value="home">At My Home</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

<div className="rounded-lg border p-4 space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="font-medium">Free Fitness Assessment</span>
                      <Badge>$75 Value</Badge>
                    </div>
                    <ul className="text-xs text-muted-foreground space-y-1">
                      <li>• Body composition analysis</li>
                      <li>• Movement screening</li>
                      <li>• Goal-setting session</li>
                      <li>• Personalized program recommendation</li>
                    </ul>
                  </div>

<Button className="w-full" size="lg">
                    <Flame className="mr-2 h-4 w-4" />
                    Claim Your Free Assessment
                  </Button>

<p className="text-center text-xs text-muted-foreground">
                    No commitment required. Let's see if we're the right fit.
                  </p>
                </form>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </section>
  );
}
</article></body></html>

React Contact Block Fitness

Find Your Perfect Training Program

What's Your Primary Goal?

Your Fitness Profile

Availability & Contact

Installation

Related blocks you will also like

Contact Booking Form

Contact Membership Form

Contact Consultation Form

Contact Schedule Meeting

Contact Course Enrollment

Contact Retreat Registration

Questions you might have

What fitness goals should I capture?

How should I assess client fitness level?

What health information do I need to collect?

What training formats should I offer?

How often should clients train?

How should I present fitness pricing?