Poster Hero

"use client";
import * as React from "react";
import { cn } from "../ui/utils";
import { HeroLink, type HeroProps } from "./hero-parts";
export function PosterHero({
  title,
  actionLabel,
  description,
  className,
  href = "/blocks",
}: HeroProps) {
  return (
    <section
      className={cn(
        "relative isolate overflow-hidden rounded-xl bg-[#dfeb5a] text-[#243022]",
        className,
      )}
    >
      <div className="p-7 md:p-12">
        <div className="flex justify-between text-xs font-medium">
          <span>ASSEMBLY / A GATHERING OF IDEAS</span>
          <span>ONLINE &amp; EVERYWHERE</span>
        </div>
        <div className="my-12 border-y-2 border-[#243022] py-6">
          <h1 className="font-display text-[clamp(3.5rem,10vw,8rem)] font-bold leading-[.86] tracking-[-.065em]">
            {title ?? (
              <>
                COME WITH
                <br />
                QUESTIONS.
                <br />
                <span className="font-serif font-normal italic tracking-tight">
                  Leave inspired.
                </span>
              </>
            )}
          </h1>
        </div>
        <div className="grid gap-7 md:grid-cols-[1fr_1fr_auto]">
          <p className="text-sm font-medium">
            Design. Culture.
            <br />
            Whatever comes next.
          </p>
          <p className="max-w-xs text-sm leading-relaxed">
            {description ?? (
              <>
                Conversations for curious people. A programme built around
                sharing what we know and asking what we don’t.
              </>
            )}
          </p>
          <div>
            <HeroLink href={href}>
              {actionLabel ?? <>View programme</>}
            </HeroLink>
          </div>
        </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>
  );
}