Title Slide

import { TitleSlide } from "@/components/ui/title-slide";

export default function TitleSlideDemo() {
  return (
    <div className="flex min-h-[520px] w-full items-center justify-center p-6">
      <div
        className="relative flex aspect-[16/9] w-full max-w-[1120px] items-center justify-center overflow-hidden rounded-2xl"
        style={{
          background:
            "linear-gradient(135deg, #1b2657 0%, #29386f 45%, #1a2450 100%)",
        }}
      >
        {/* dotted aurora-corner pattern (top-left) */}
        <div
          className="pointer-events-none absolute inset-0"
          style={{
            backgroundImage:
              "radial-gradient(rgba(255,255,255,0.22) 1px, transparent 1px)",
            backgroundSize: "7px 7px",
            WebkitMaskImage:
              "linear-gradient(135deg, black 0%, rgba(0,0,0,0.4) 22%, transparent 40%)",
            maskImage:
              "linear-gradient(135deg, black 0%, rgba(0,0,0,0.4) 22%, transparent 40%)",
          }}
        />
        <TitleSlide className="relative z-10 gap-5 px-8">
          <TitleSlide.Heading className="text-white text-7xl">
            Welcome to Slide-CN
          </TitleSlide.Heading>
          <TitleSlide.SubHeading className="text-white/70">
            Create beautiful presentations using code
          </TitleSlide.SubHeading>
          <TitleSlide.Meta className="text-white/50">
            Internal architecture review - Jan 2026
          </TitleSlide.Meta>
        </TitleSlide>
      </div>
    </div>
  );
}