Agency Split Hero

// Agency hero: a photo top right, the big headline bottom left and social
// links bottom right. Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Props = {
  heading?: string;
  image?: string;
  imageAlt?: string;
  socials?: { label: string; href: string }[];
};

const DEFAULT_SOCIALS = [
  { label: "Instagram", href: "#" },
  { label: "Behance", href: "#" },
  { label: "LinkedIn", href: "#" },
  { label: "Dribbble", href: "#" },
];

export default function AgencySplitHero({
  heading = "We design brands\nthat people remember",
  image = "https://images.unsplash.com/photo-1556761175-b413da4baf72?w=1400&q=80&auto=format&fit=crop",
  imageAlt = "Team working together in a bright studio",
  socials = DEFAULT_SOCIALS,
}: Props) {
  return (
    <section className="mx-auto max-w-7xl bg-white px-5 pb-20 pt-10 font-['Inter',ui-sans-serif,system-ui,sans-serif] text-black antialiased md:px-10 md:pb-28 md:pt-14">
      <div className="lg:ml-auto lg:w-2/5">
        <div className="relative aspect-[4/3] overflow-hidden bg-[#f7f7f7]">
          <img src={image} alt={imageAlt} className="absolute inset-0 h-full w-full object-cover" />
        </div>
      </div>

      <div className="mt-10 flex flex-col gap-8 md:flex-row md:items-end md:justify-between">
        <h1 className="max-w-3xl whitespace-pre-line text-[clamp(44px,6.5vw,88px)] font-bold leading-[1.02] tracking-[-0.035em]">{heading}</h1>
        <ul aria-label="Social links" className="shrink-0 text-sm font-medium md:text-right">
          {socials.map((link) => (
            <li key={link.label}>
              <a href={link.href} className="hover:underline">
                {link.label}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}