"use client"; import { useState } from "react"; import { Baby, Calendar, Clock, Heart, Home, Shield, Star, Users } 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 AGE_GROUPS = [ { value: "infant", label: "Infant", ages: "6 weeks - 12 months", icon: "👶", ratio: "1:3 ratio" }, { value: "toddler", label: "Toddler", ages: "1 - 2 years", icon: "🧒", ratio: "1:4 ratio" }, { value: "preschool", label: "Preschool", ages: "3 - 4 years", icon: "🎨", ratio: "1:8 ratio" }, { value: "prek", label: "Pre-K", ages: "4 - 5 years", icon: "📚", ratio: "1:10 ratio" }, { value: "schoolage", label: "School Age", ages: "5 - 12 years", icon: "🎒", ratio: "1:12 ratio" }, ]; const PROGRAMS = [ { value: "fulltime", label: "Full-Time", description: "5 days/week, full day", badge: "Most Popular" }, { value: "parttime", label: "Part-Time", description: "2-3 days/week or half days", badge: null }, { value: "beforeafter", label: "Before/After School", description: "Wraparound care for school-age", badge: null }, { value: "dropin", label: "Drop-In Care", description: "As-needed, flexible booking", badge: null }, ]; const SCHEDULE_DAYS = [ { id: "monday", label: "Mon" }, { id: "tuesday", label: "Tue" }, { id: "wednesday", label: "Wed" }, { id: "thursday", label: "Thu" }, { id: "friday", label: "Fri" }, ]; const SPECIAL_NEEDS = [ { id: "allergies", label: "Food allergies" }, { id: "medical", label: "Medical condition" }, { id: "developmental", label: "Developmental support" }, { id: "dietary", label: "Dietary restrictions" }, ]; const ENRICHMENTS = [ { id: "music", label: "Music & Movement" }, { id: "language", label: "Spanish Immersion" }, { id: "stem", label: "STEM / Coding" }, { id: "art", label: "Art & Creativity" }, ]; export const title = "React Contact Block Childcare"; export default function ContactChildcare() { const [ageGroup, setAgeGroup] = useState(""); const [program, setProgram] = useState("fulltime"); const [selectedDays, setSelectedDays] = useState(["monday", "tuesday", "wednesday", "thursday", "friday"]); const toggleDay = (day: string) => { setSelectedDays((prev) => prev.includes(day) ? prev.filter((d) => d !== day) : [...prev, day] ); }; const selectedAge = AGE_GROUPS.find((a) => a.value === ageGroup); return (

5-Star Rated Program

Enroll Your Child Today

A nurturing environment where little ones learn, play, and grow. Schedule a tour to see why families love us.

{/* Age Group Selection - Visual Top Section */}

Child's Age Group

{AGE_GROUPS.map((age) => ( {age.icon} {age.label} {age.ages} {age.ratio} ))} {selectedAge && (

Our {selectedAge.label.toLowerCase()} program maintains a {selectedAge.ratio} for personalized attention

)}

{/* Left: Program & Schedule */}

Program & Schedule

Program Type {PROGRAMS.map((prog) => (

{prog.label} {prog.badge && ( {prog.badge} )}

{prog.description} ))}

Days Needed

{SCHEDULE_DAYS.map((day) => ( ))}

{selectedDays.length} day{selectedDays.length !== 1 ? "s" : ""} per week selected

Desired Start Date

Care Hours Needed

Special Considerations

{SPECIAL_NEEDS.map((need) => (

{need.label}

))}

Enrichment Programs (Optional)

{ENRICHMENTS.map((enrich) => (

{enrich.label}

))}

{/* Right: Family Information */}

Family Information

Child's Name

Date of Birth

Siblings Enrolling?

Parent/Guardian Name

Relationship

Phone

Anything Else We Should Know?

</div>

<div className="flex items-start gap-2">
                    <Checkbox id="tour" defaultChecked />
                    <Label
                      htmlFor="tour"
                      className="text-sm font-normal leading-tight"
                    >
                      I'd like to schedule a facility tour
                    </Label>
                  </div>

<div className="rounded-lg border p-4 space-y-3">
                    <div className="flex items-center gap-2">
                      <Shield className="h-5 w-5 text-primary" />
                      <span className="font-medium text-sm">Our Promise to You</span>
                    </div>
                    <ul className="text-xs text-muted-foreground space-y-1">
                      <li className="flex items-center gap-2">
                        <Home className="h-3 w-3" />
                        State-licensed facility with certified teachers
                      </li>
                      <li className="flex items-center gap-2">
                        <Shield className="h-3 w-3" />
                        All staff background-checked and CPR certified
                      </li>
                      <li className="flex items-center gap-2">
                        <Heart className="h-3 w-3" />
                        Low child-to-teacher ratios for personal attention
                      </li>
                    </ul>
                  </div>

<Button className="w-full" size="lg">
                    <Baby className="mr-2 h-4 w-4" />
                    Start Enrollment Process
                  </Button>

<p className="text-center text-xs text-muted-foreground">
                    We'll contact you within 24 hours to schedule your tour.
                  </p>
                </form>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </section>
  );
}
</article></body></html>

React Contact Block Childcare

Enroll Your Child Today

Child's Age Group

Program & Schedule

Family Information

Installation

Related blocks you will also like

Contact Course Enrollment

Contact Membership Form

Contact Booking Form

Contact Schedule Meeting

Contact Consultation Form

Contact Waitlist Signup

Questions you might have

What age groups should I accommodate?

What program types should I offer?

How do I handle scheduling flexibility?

What special needs information should I collect?

What safety information reassures parents?

How should I handle facility tours?