KitlenoKitlenov2.0.0

Landing page / Hero

Hero

A minimal, modern hero section with a badge, clean headline, subtitle, and primary and secondary call-to-action buttons.

Hero

A minimal, centered hero section with a badge, clean headline, subtitle, and primary/secondary call-to-action buttons.

New · v2.0 is live

Build faster with a design system that just works

A minimal, modern starting point for your product. Copy this hero, drop it into your page, and make it yours.

Get startedLearn more
Hero.jsx
import { ArrowRight } from 'lucide-react'

// Edit the content below to customize your hero
const HERO_CONTENT = {
  badge: 'New · v2.0 is live',
  heading: 'Build faster with a design system that just works',
  subtitle: 'A minimal, modern starting point for your product. Copy this hero, drop it into your page, and make it yours.',
  primaryCta: { label: 'Get started', href: '#' },
  secondaryCta: { label: 'Learn more', href: '#' }
}

export default function Hero() {
  return (
    <section className="flex flex-col items-center px-6 py-16 text-center">
      {/* Badge */}
      <div className="inline-flex items-center gap-[6px] rounded-full border border-[#E5E5E5] dark:border-[#3A3A3A] bg-white/70 dark:bg-[#161616]/70 backdrop-blur-xl px-3 py-[5px] text-[12px] font-medium text-[#6e6e73] dark:text-[#a1a1a6]">
        <span className="inline-block h-[6px] w-[6px] rounded-full bg-green-500 animate-pulse" />
        {HERO_CONTENT.badge}
      </div>

      {/* Heading */}
      <h1
        className="mt-5 max-w-[18ch] font-semibold leading-[1.15] tracking-tight text-[#1d1d1f] dark:text-[#f5f5f7]"
        style={{ fontSize: 'clamp(28px, 4vw, 40px)' }}
      >
        {HERO_CONTENT.heading}
      </h1>

      {/* Subtitle */}
      <p className="mt-4 max-w-[46ch] text-[14px] leading-relaxed text-[#6e6e73] dark:text-[#a1a1a6]">
        {HERO_CONTENT.subtitle}
      </p>

      {/* CTA buttons */}
      <div className="mt-8 flex flex-wrap justify-center gap-3">
        <a
          href={HERO_CONTENT.primaryCta.href}
          className="inline-flex items-center justify-center gap-2 rounded-full bg-[#1d1d1f] dark:bg-white px-6 py-3 text-[13px] font-medium text-white dark:text-[#1d1d1f] transition-opacity duration-200 hover:opacity-85 cursor-pointer"
        >
          {HERO_CONTENT.primaryCta.label}
          <ArrowRight size={15} strokeWidth={2.2} />
        </a>
        <a
          href={HERO_CONTENT.secondaryCta.href}
          className="inline-flex items-center justify-center rounded-full border border-black/15 dark:border-white/20 px-6 py-3 text-[13px] font-medium text-[#1d1d1f] dark:text-[#f5f5f7] transition-colors duration-200 hover:bg-black/[0.03] dark:hover:bg-white/[0.06] cursor-pointer"
        >
          {HERO_CONTENT.secondaryCta.label}
        </a>
      </div>
    </section>
  )
}

Split Hero

A two-column hero with left-aligned text and a decorative gradient shape on the right.

New · v2.0 is live

Design a product people actually enjoy using

A clean, modern starting point for your product. Copy this hero, drop it into your page, and make it yours.

Get startedLearn more
HeroSplit.jsx
import { ArrowRight } from 'lucide-react'

// Edit the content below to customize your hero
const HERO_CONTENT = {
  badge: 'New · v2.0 is live',
  heading: 'Design a product people actually enjoy using',
  subtitle: 'A clean, modern starting point for your product. Copy this hero, drop it into your page, and make it yours.',
  primaryCta: { label: 'Get started', href: '#' },
  secondaryCta: { label: 'Learn more', href: '#' }
}

export default function HeroSplit() {
  return (
    <section className="flex flex-col md:flex-row items-center gap-10 px-6 py-16 mx-auto max-w-6xl">
      {/* Text column */}
      <div className="w-full flex-1 flex flex-col items-start text-left">
        {/* Badge */}
        <div className="inline-flex items-center gap-[6px] rounded-full border border-[#E5E5E5] dark:border-[#3A3A3A] bg-white/70 dark:bg-[#161616]/70 backdrop-blur-xl px-3 py-[5px] text-[12px] font-medium text-[#6e6e73] dark:text-[#a1a1a6]">
          <span className="inline-block h-[6px] w-[6px] rounded-full bg-green-500 animate-pulse" />
          {HERO_CONTENT.badge}
        </div>

        {/* Heading */}
        <h1
          className="mt-5 max-w-[16ch] font-semibold leading-[1.15] tracking-tight text-[#1d1d1f] dark:text-[#f5f5f7]"
          style={{ fontSize: 'clamp(28px, 4vw, 40px)' }}
        >
          {HERO_CONTENT.heading}
        </h1>

        {/* Subtitle */}
        <p className="mt-4 max-w-[42ch] text-[14px] leading-relaxed text-[#6e6e73] dark:text-[#a1a1a6]">
          {HERO_CONTENT.subtitle}
        </p>

        {/* CTA buttons */}
        <div className="mt-8 flex flex-wrap gap-3">
          <a
            href={HERO_CONTENT.primaryCta.href}
            className="inline-flex items-center justify-center gap-2 rounded-full bg-[#1d1d1f] dark:bg-white px-6 py-3 text-[13px] font-medium text-white dark:text-[#1d1d1f] transition-opacity duration-200 hover:opacity-85 cursor-pointer"
          >
            {HERO_CONTENT.primaryCta.label}
            <ArrowRight size={15} strokeWidth={2.2} />
          </a>
          <a
            href={HERO_CONTENT.secondaryCta.href}
            className="inline-flex items-center justify-center rounded-full border border-black/15 dark:border-white/20 px-6 py-3 text-[13px] font-medium text-[#1d1d1f] dark:text-[#f5f5f7] transition-colors duration-200 hover:bg-black/[0.03] dark:hover:bg-white/[0.06] cursor-pointer"
          >
            {HERO_CONTENT.secondaryCta.label}
          </a>
        </div>
      </div>

      {/* Visual column: decorative gradient shape */}
      <div className="relative w-full max-w-[220px] aspect-square shrink-0">
        <div className="absolute inset-0 rounded-[2rem] bg-gradient-to-br from-[#eef2ff] via-[#c7d2fe] to-[#818cf8] dark:from-[#1e1b4b] dark:via-[#312e81] dark:to-[#4338ca]" />
        <div className="absolute inset-0 rounded-[2rem] border border-black/5 dark:border-white/10" />
        <div className="absolute top-6 left-6 h-16 w-16 rounded-full bg-white/40 dark:bg-white/10 blur-2xl" />
        <div className="absolute bottom-4 right-4 h-20 w-20 rounded-full bg-[#4338ca]/25 dark:bg-[#818cf8]/25 blur-2xl" />
      </div>
    </section>
  )
}

Hero with App Preview

A two-column hero with left-aligned text and a mock dashboard card on the right.

New · v2.0 is live

A dashboard your whole team will love

A clean, modern starting point for your product. Copy this hero, drop it into your page, and make it yours.

Get startedLearn more
HeroAppCard.jsx
import { ArrowRight } from 'lucide-react'

// Edit the content below to customize your hero
const HERO_CONTENT = {
  badge: 'New · v2.0 is live',
  heading: 'A dashboard your whole team will love',
  subtitle: 'A clean, modern starting point for your product. Copy this hero, drop it into your page, and make it yours.',
  primaryCta: { label: 'Get started', href: '#' },
  secondaryCta: { label: 'Learn more', href: '#' }
}

export default function HeroAppCard() {
  return (
    <section className="flex flex-col md:flex-row items-center gap-10 px-6 py-16 mx-auto max-w-6xl">
      {/* Text column */}
      <div className="w-full flex-1 flex flex-col items-start text-left">
        {/* Badge */}
        <div className="inline-flex items-center gap-[6px] rounded-full border border-[#E5E5E5] dark:border-[#3A3A3A] bg-white/70 dark:bg-[#161616]/70 backdrop-blur-xl px-3 py-[5px] text-[12px] font-medium text-[#6e6e73] dark:text-[#a1a1a6]">
          <span className="inline-block h-[6px] w-[6px] rounded-full bg-green-500 animate-pulse" />
          {HERO_CONTENT.badge}
        </div>

        {/* Heading */}
        <h1
          className="mt-5 max-w-[16ch] font-semibold leading-[1.15] tracking-tight text-[#1d1d1f] dark:text-[#f5f5f7]"
          style={{ fontSize: 'clamp(28px, 4vw, 40px)' }}
        >
          {HERO_CONTENT.heading}
        </h1>

        {/* Subtitle */}
        <p className="mt-4 max-w-[42ch] text-[14px] leading-relaxed text-[#6e6e73] dark:text-[#a1a1a6]">
          {HERO_CONTENT.subtitle}
        </p>

        {/* CTA buttons */}
        <div className="mt-8 flex flex-wrap gap-3">
          <a
            href={HERO_CONTENT.primaryCta.href}
            className="inline-flex items-center justify-center gap-2 rounded-full bg-[#1d1d1f] dark:bg-white px-6 py-3 text-[13px] font-medium text-white dark:text-[#1d1d1f] transition-opacity duration-200 hover:opacity-85 cursor-pointer"
          >
            {HERO_CONTENT.primaryCta.label}
            <ArrowRight size={15} strokeWidth={2.2} />
          </a>
          <a
            href={HERO_CONTENT.secondaryCta.href}
            className="inline-flex items-center justify-center rounded-full border border-black/15 dark:border-white/20 px-6 py-3 text-[13px] font-medium text-[#1d1d1f] dark:text-[#f5f5f7] transition-colors duration-200 hover:bg-black/[0.03] dark:hover:bg-white/[0.06] cursor-pointer"
          >
            {HERO_CONTENT.secondaryCta.label}
          </a>
        </div>
      </div>

      {/* Visual column: mock app card */}
      <div className="w-full max-w-xs rounded-2xl border border-[#E5E5E5] dark:border-[#3A3A3A] bg-white dark:bg-[#161616] shadow-[0_20px_60px_-15px_rgba(0,0,0,0.25)] overflow-hidden shrink-0">
        {/* Header bar */}
        <div className="flex items-center gap-2 px-4 py-3 border-b border-[#E5E5E5] dark:border-[#3A3A3A]">
          <span className="h-[10px] w-[10px] rounded-full bg-[#ff5f57]" />
          <span className="h-[10px] w-[10px] rounded-full bg-[#febc2e]" />
          <span className="h-[10px] w-[10px] rounded-full bg-[#28c840]" />
        </div>

        {/* Body */}
        <div className="p-4 flex flex-col gap-3">
          <div className="h-3 w-2/3 rounded-full bg-[#1d1d1f]/10 dark:bg-white/15" />
          <div className="h-3 w-1/2 rounded-full bg-[#1d1d1f]/10 dark:bg-white/15" />
          <div className="mt-2 grid grid-cols-3 gap-3">
            <div className="h-12 rounded-lg bg-[#1d1d1f]/5 dark:bg-white/[0.06]" />
            <div className="h-12 rounded-lg bg-[#1d1d1f]/5 dark:bg-white/[0.06]" />
            <div className="h-12 rounded-lg bg-[#1d1d1f]/5 dark:bg-white/[0.06]" />
          </div>
          <div className="mt-2 h-20 rounded-lg bg-[#1d1d1f]/5 dark:bg-white/[0.06]" />
        </div>
      </div>
    </section>
  )
}