Features Classic

// Image beside a heading, paragraph and two large stats.
// Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.
// Headings use Bricolage Grotesque if your site loads it (Google Fonts), otherwise the system sans.

type Stat = { value: string; text: string };

type Props = {
  heading?: string;
  text?: string;
  stats?: Stat[];
  image?: string;
  imageAlt?: string;
};

export default function FeaturesClassic({
  heading = "Building dreams, one home at a time",
  text = "We help families and investors find homes that fit the way they live, from the first viewing to the day they get the keys. Local knowledge, honest advice and a team that answers the phone.",
  stats = [
    { value: "150+", text: "Homes sold this year across the city and its suburbs." },
    { value: "300+", text: "Families helped into a home that fits their life and budget." },
  ],
  image = "https://images.unsplash.com/photo-1717137389747-d1d4ced6abc8?w=1400&q=80&auto=format&fit=crop",
  imageAlt = "Architectural model of a modern house",
}: Props) {
  return (
    <section className="bg-white px-5 py-20 font-['Manrope',ui-sans-serif,system-ui,sans-serif] antialiased md:px-10 xl:py-28">
      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-14 md:grid-cols-2">
        <div className="relative min-h-[420px] overflow-hidden">
          <img src={image} alt={imageAlt} className="absolute inset-0 h-full w-full object-cover" />
        </div>

        <div className="flex flex-col justify-center">
          <h2 className="mb-4 font-['Bricolage_Grotesque',ui-sans-serif,system-ui,sans-serif] text-[clamp(35px,5vw,60px)] font-semibold leading-[1.2] text-black">{heading}</h2>
          <p className="text-base leading-normal text-[#575757]">{text}</p>

          <div className="grid grid-cols-1 gap-10 pt-10 md:grid-cols-2">
            {stats.map((s) => (
              <div key={s.value}>
                <p className="mb-2 font-['Bricolage_Grotesque',ui-sans-serif,system-ui,sans-serif] text-[40px] font-semibold leading-[1.2] text-black">{s.value}</p>
                <p className="text-base leading-normal text-[#575757]">{s.text}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}