Title Slide

Heroes 6

About

A centered slide layout with heading, subheading, and meta text for building presentation title screens.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Title Slide to your project and fits it to your theme.

Code

How Title Slide is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}