Hero Section

Landing page hero template with headline, CTA buttons, stats bar, and feature highlights. Built with Typography, Button, Badge, and Separator atoms.

Import

import { Button, Typography, Badge, Separator } from "poyraz-ui/atoms";

Hero with Features

Full hero section with subtle grid background, stats, and a 3-column feature row.

v2.0 — Now Available

Build faster with minimal components

A clean, accessible React component library built with Tailwind CSS v4 and Radix UI. No shadows, no noise — just sharp interfaces.

43+ Components

MIT License

v4 Tailwind

⚡

Fast

Zero runtime overhead

♿

Accessible

WCAG-compliant by default

🎨

Themeable

CSS variables for full control

import { Button, Typography, Badge, Separator } from "poyraz-ui/atoms";

export function HeroSection() {
  return (
    <section className="relative px-6 py-16 text-center">
      <div className="relative max-w-lg mx-auto space-y-5">
        <Badge variant="outline" className="text-[10px]">
          v2.0 — Now Available
        </Badge>

        <Typography variant="h1">
          Build faster with{" "}
          <span className="text-red-600 font-secondary">minimal</span>{" "}
          components
        </Typography>

        <Typography variant="lead" className="text-muted-foreground">
          A clean, accessible React component library built with
          Tailwind CSS v4 and Radix UI.
        </Typography>

        <div className="flex items-center justify-center gap-3 pt-2">
          <Button>Get Started</Button>
          <Button variant="outline">View on GitHub</Button>
        </div>

        <div className="flex items-center justify-center gap-6 pt-4 text-xs text-placeholder">
          <div>
            <span className="font-bold text-foreground text-sm">43+</span> Components
          </div>
          <Separator orientation="vertical" className="h-4" />
          <div>
            <span className="font-bold text-foreground text-sm">MIT</span> License
          </div>
          <Separator orientation="vertical" className="h-4" />
          <div>
            <span className="font-bold text-foreground text-sm">v4</span> Tailwind
          </div>
        </div>
      </div>
    </section>
  );
}