Home | Carevaplus

Patient name

Phone number

Service needed

Patient age

Gender

Preferred date

Address

Type

{["Normal", "Urgent", "Emergency"].map((t) => ( {t} ))}

Notes for care team

</div>
      </div>

<div className="mt-7 flex flex-col sm:flex-row items-center justify-between gap-3">
        <p className="text-xs text-muted-foreground">
          By booking you agree to be contacted by our care team at the number provided.
        </p>
        <button
          type="submit"
          className="btn-shine inline-flex items-center gap-2 rounded-full bg-brand-red text-white px-7 py-3.5 text-sm font-semibold shadow-ring-red hover:translate-y-[-1px] transition"
        >
          Book Now <Send className="h-4 w-4" />
        </button>
      </div>
    </form>
  );
}
import { motion } from "framer-motion";
import { Star, BadgeCheck, ArrowRight } from "lucide-react";
import { Link } from "@tanstack/react-router";

const profiles = [
  { name: "Prema R.", role: "Elderly Care Specialist", years: "5+ years", lang: "Tamil / English", initial: "P", color: "bg-brand-red/10 text-brand-red" },
  { name: "Anitha S.", role: "Registered Nurse", years: "7+ years", lang: "Tamil / English", initial: "A", color: "bg-brand-sky/20 text-sky-700" },
  { name: "Karthik M.", role: "Physiotherapist", years: "6+ years", lang: "Tamil / English", initial: "K", color: "bg-brand-green/15 text-emerald-700" },
  { name: "Divya L.", role: "Mother & Baby Care", years: "4+ years", lang: "Tamil / English", initial: "D", color: "bg-brand-red/10 text-brand-red" },
];

export function Caregivers() {
  return (
    <section className="py-24 bg-brand-soft">
      <div className="container mx-auto px-6">
        <div className="max-w-2xl">
          <p className="text-xs font-bold uppercase tracking-[0.18em] text-brand-red">Our team</p>
          <h2 className="mt-3 text-4xl md:text-5xl font-bold text-brand-navy">
            Meet our <span className="text-gradient-brand">professional caregivers</span>
          </h2>
          <p className="mt-4 text-muted-foreground text-lg">
            Verified, trained and deeply compassionate — handpicked to look after your family.
          </p>
        </div>

<div className="mt-14 grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {profiles.map((p, i) => (
            <motion.div
              key={p.name}
              initial={{ opacity: 0, y: 24 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.08, duration: 0.5 }}
              whileHover={{ y: -6 }}
              className="group rounded-3xl bg-white p-6 ring-1 ring-border shadow-soft hover:shadow-elegant transition-all"
            >
              <div className="flex items-center gap-4">
                <div className={`h-16 w-16 rounded-2xl grid place-items-center text-2xl font-bold ${p.color}`}>
                  {p.initial}
                </div>
                <div>
                  <p className="text-base font-bold text-brand-navy flex items-center gap-1.5">
                    {p.name}
                    <BadgeCheck className="h-4 w-4 text-emerald-600" />
                  </p>
                  <p className="text-xs text-muted-foreground">{p.role}</p>
                </div>
              </div>
              <div className="mt-5 space-y-1.5 text-xs text-muted-foreground">
                <p><span className="font-semibold text-brand-navy">Experience:</span> {p.years}</p>
                <p><span className="font-semibold text-brand-navy">Languages:</span> {p.lang}</p>
                <p><span className="font-semibold text-brand-navy">Available:</span> Mon – Sun</p>
              </div>
              <div className="mt-4 flex items-center gap-1 text-amber-500">
                {Array.from({ length: 5 }).map((_, idx) => (
                  <Star key={idx} className="h-3.5 w-3.5 fill-current" />
                ))}
                <span className="ml-1 text-xs text-muted-foreground">5.0</span>
              </div>
              <Link
                to="/book"
                className="mt-5 inline-flex items-center gap-1.5 text-sm font-semibold text-brand-red"
              >
                Book this caregiver <ArrowRight className="h-4 w-4" />
              </Link>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}
import { motion } from "framer-motion";
import { Siren, Phone } from "lucide-react";
import { Link } from "@tanstack/react-router";

export function EmergencyCTA() {
  return (
    <section className="py-20">
      <div className="container mx-auto px-6">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="relative overflow-hidden rounded-[2.5rem] bg-gradient-to-br from-brand-red via-rose-600 to-brand-navy text-white p-10 md:p-14 shadow-elegant"
        >
          <div className="absolute -top-16 -right-16 h-72 w-72 rounded-full bg-white/10 blur-3xl" />
          <div className="absolute -bottom-20 -left-10 h-72 w-72 rounded-full bg-brand-navy/40 blur-3xl" />
          <div className="relative flex flex-col md:flex-row items-center justify-between gap-8">
            <div className="max-w-xl">
              <div className="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-xs font-semibold ring-1 ring-white/30 backdrop-blur">
                <span className="relative flex h-2 w-2">
                  <span className="absolute inline-flex h-full w-full rounded-full bg-white opacity-75 animate-ping" />
                  <span className="relative inline-flex h-2 w-2 rounded-full bg-white" />
                </span>
                Emergency Response
              </div>
              <h2 className="mt-4 text-3xl md:text-4xl font-bold leading-tight">
                Need urgent medical support at home?
              </h2>
              <p className="mt-3 text-white/85">
                Our emergency support team is ready to assist you quickly across Salem and nearby areas — any time, day or night.
              </p>
            </div>
            <div className="flex flex-col sm:flex-row items-stretch gap-3">
              <a
                href="tel:+919655508881"
                className="btn-shine inline-flex items-center justify-center gap-2 rounded-full bg-white text-brand-red px-6 py-3.5 text-sm font-bold animate-pulse-ring"
              >
                <Phone className="h-4 w-4" /> Call +91 96555 08881
              </a>
              <Link
                to="/book"
                className="inline-flex items-center justify-center gap-2 rounded-full bg-brand-navy/40 ring-1 ring-white/40 text-white px-6 py-3.5 text-sm font-semibold hover:bg-brand-navy/60 transition"
              >
                <Siren className="h-4 w-4" /> Book Emergency Nurse
              </Link>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}
import { motion } from "framer-motion";
import { Siren, Phone } from "lucide-react";
import { Link } from "@tanstack/react-router";

Booking received