Typographic Hero

"use client";
import * as React from "react";
import { cn } from "../ui/utils";
import { HeroLink, type HeroProps } from "./hero-parts";
export function TypographicHero({
  title,
  actionLabel,
  description,
  className,
  href = "/blocks",
}: HeroProps) {
  return (
    <section
      className={cn(
        "relative isolate overflow-hidden rounded-xl bg-[#ef582f] text-[#231d18]",
        className,
      )}
    >
      <div className="flex items-center justify-between border-b border-black/20 p-7 text-xs font-medium">
        <span>OTHER® — DESIGN &amp; DIRECTION</span>
        <span>OPEN TO GOOD PROBLEMS</span>
      </div>
      <div className="p-7 md:p-12">
        <h1 className="font-display text-[clamp(4rem,12vw,9rem)] font-bold leading-[.82] tracking-[-.075em]">
          {title ?? (
            <>
              GOOD
              <br />
              <span className="block text-right">WEIRD.</span>
              <span className="block">WORK.</span>
            </>
          )}
        </h1>
        <div className="mt-10 flex flex-wrap items-end justify-between gap-7">
          <p className="max-w-xs text-sm leading-relaxed">
            {description ?? (
              <>
                For people with something to say. We turn a point of view into a
                world you can step inside.
              </>
            )}
          </p>
          <HeroLink href={href}>
            {actionLabel ?? <>Take a look around</>}
          </HeroLink>
        </div>
      </div>
    </section>
  );
}

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
  return twMerge(clsx(values));
}

"use client";
import * as React from "react";
import { ArrowUpRight } from "lucide-react";
import { cn } from "../ui/utils";
export type HeroProps = {
  className?: string;
  href?: string;
  title?: React.ReactNode;
  description?: React.ReactNode;
  actionLabel?: React.ReactNode;
  imageSrc?: string;
  imageAlt?: string;
  artwork?: { color?: string; speed?: number };
};
export function HeroLink({
  href = "/blocks",
  children = "Explore the collection",
  className,
}: {
  href?: string;
  children?: React.ReactNode;
  className?: string;
}) {
  return (
    <a
      href={href}
      className={cn(
        "inline-flex items-center gap-3 rounded-full border border-current/30 px-5 py-3 text-sm transition-colors hover:bg-current/10",
        className,
      )}
    >
      {children}
      <ArrowUpRight size={16} />
    </a>
  );
}