Copyimport BlogpostTypography from "@/registry/creative-tim/examples/typography/blogpost"
 
export default function Page() {
  return (
    <main className="space-y-10">
      <BlogpostTypography />
    </main>
  )
}

Copy"use client"
 
export default function BlogpostTypography() {
  return (
    <article className="space-y-4">
      <header className="space-y-2">
        <p className="text-muted-foreground text-xs font-semibold tracking-[0.2em] uppercase">
          Editorial
        </p>
        <h1 className="scroll-m-20 text-3xl font-bold tracking-tight sm:text-4xl">
          How Creative Tim UI Helps You Ship Production UIs Faster
        </h1>
        <p className="text-muted-foreground text-sm">
          By <span className="text-foreground font-medium">Alex Johnson</span> ·{" "}
          <time dateTime="2025-11-28">Nov 28, 2025</time> · 8 min read
        </p>
      </header>
 
      <p className="text-muted-foreground text-sm leading-relaxed sm:text-base">
        Creative Tim UI combines shadcn/ui primitives with carefully crafted
        blocks so you can move from idea to production interface without
        designing every pattern from scratch. In this article, we&apos;ll
        explore how a consistent typography system keeps complex dashboards and
        marketing pages readable.
      </p>
 
      <h2 className="scroll-m-20 text-xl font-semibold tracking-tight">
        Start with a clear type scale
      </h2>
 
      <p className="text-muted-foreground text-sm leading-relaxed sm:text-base">
        Establishing a predictable set of heading sizes and body text styles
        means every new section you add feels cohesive. Use larger sizes for
        page titles, medium sizes for section headings, and smaller weights for
        inline labels and meta information.
      </p>
    </article>
  )
}

Copy"use client"
 
export default function MagazineDescriptionTypography() {
  return (
    <section className="space-y-3">
      <p className="text-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
        Cover Story
      </p>
      <h1 className="scroll-m-20 text-4xl font-bold tracking-tight sm:text-5xl">
        Designing Interfaces for the AI-First Decade
      </h1>
      <p className="text-primary text-sm font-medium tracking-[0.25em] uppercase">
        Creative Tim Magazine · Design Futures
      </p>
      <p className="text-muted-foreground text-sm leading-relaxed sm:text-base">
        As AI agents move from sidekicks to collaborators, the typography in
        your dashboards, chat interfaces, and control panels must do more than
        look good—it has to explain complex states at a glance. This feature
        explores how a disciplined type system keeps human users in control.
      </p>
    </section>
  )
}

Copy"use client"
 
export default function QuoteTypography() {
  return (
    <figure className="border-primary space-y-3 border-l-4 pl-4">
      <p className="text-muted-foreground text-lg italic sm:text-xl">
        “Good typography is invisible. It quietly guides your user&apos;s
        attention so they can focus on what matters, not on finding where things
        are.”
      </p>
      <figcaption className="space-y-1 text-sm">
        <p className="text-foreground font-semibold">Mara Chen</p>
        <p className="text-muted-foreground text-xs tracking-[0.2em] uppercase">
          Lead Product Designer · Creative Tim
        </p>
      </figcaption>
    </figure>
  )
}

Copy"use client"
 
export default function ProductDescriptionTypography() {
  return (
    <section className="space-y-3">
      <p className="text-xs font-semibold tracking-[0.25em] text-emerald-500 uppercase">
        New · Limited Release
      </p>
      <h1 className="scroll-m-20 text-2xl font-bold tracking-tight sm:text-3xl">
        Creative Tim UI — All Access License
      </h1>
      <p className="text-muted-foreground text-sm line-through">$1,345</p>
      <p className="text-foreground text-2xl font-semibold">
        $229
        <span className="text-muted-foreground ml-2 text-sm font-normal">
          one-time purchase
        </span>
      </p>
      <p className="text-muted-foreground text-sm leading-relaxed sm:text-base">
        Ship production-ready dashboards, marketing pages, and SaaS products
        with 400+ blocks built on shadcn/ui. Perfect for teams who want
        consistent typography, spacing, and color tokens across multiple
        projects.
      </p>
    </section>
  )
}

Copy"use client"
 
export default function FaqEntryTypography() {
  return (
    <section className="space-y-2">
      <h2 className="scroll-m-20 text-lg font-semibold tracking-tight">
        Do I need shadcn/ui installed to use Creative Tim UI?
      </h2>
      <p className="text-muted-foreground text-sm leading-relaxed sm:text-base">
        Yes. Creative Tim UI builds on top of shadcn/ui primitives and Tailwind
        CSS. Once your base components are installed, you can drop in our blocks
        without rewriting your typography tokens or design tokens.
      </p>
      <p className="text-muted-foreground text-xs">
        Tip: keep FAQ questions in sentence case and answers in short, scannable
        paragraphs.
      </p>
    </section>
  )
}

Copy"use client"
 
export default function FeatureCalloutTypography() {
  return (
    <section className="border-primary/40 bg-primary/5 space-y-2 rounded-lg border border-dashed p-4">
      <p className="text-primary text-xs font-semibold tracking-[0.25em] uppercase">
        New in v3.0
      </p>
      <h2 className="scroll-m-20 text-xl font-semibold tracking-tight">
        AI-ready typography tokens out of the box
      </h2>
      <p className="text-muted-foreground text-sm leading-relaxed sm:text-base">
        Generate layouts with v0, Lovable, or Replit Agent and keep the output
        visually consistent. Our examples rely on semantic HTML elements and
        Tailwind classes only, so agents can remix them safely.
      </p>
    </section>
  )
}

Copy"use client"
 
export default function CardMetaTypography() {
  return (
    <div className="space-y-1 text-sm">
      <p className="text-muted-foreground text-xs font-semibold tracking-[0.25em] uppercase">
        Case Study
      </p>
      <h3 className="scroll-m-20 text-base font-semibold tracking-tight">
        Scaling design systems with AI assistants
      </h3>
      <p className="text-muted-foreground text-xs">
        12 min read · Updated <time dateTime="2025-10-02">Oct 2, 2025</time>
      </p>
    </div>
  )
}

Copy"use client"
 
export default function StatBlockTypography() {
  return (
    <div className="space-y-1">
      <p className="text-muted-foreground text-xs font-medium tracking-[0.25em] uppercase">
        Developers shipped with Creative Tim UI
      </p>
      <p className="text-3xl font-semibold tracking-tight sm:text-4xl">120k+</p>
      <p className="text-muted-foreground text-xs">
        Based on download metrics and customer-reported production apps.
      </p>
    </div>
  )
}

Copy"use client"
 
export default function LegalTextTypography() {
  return (
    <section className="text-muted-foreground space-y-2 text-xs leading-relaxed">
      <p className="text-foreground font-semibold">License notice</p>
      <p>
        By purchasing Creative Tim UI, you agree to the terms of the license
        agreement. You may use the components and blocks in unlimited personal
        and commercial projects, but you may not redistribute them as a UI kit,
        template library, or competitor product.
      </p>
      <p>
        For full details, refer to the{" "}
        <span className="underline underline-offset-2">
          End User License Agreement
        </span>
        .
      </p>
    </section>
  )
}