Hero

Heroes 195

About

Hero inspired by Nua - https://v0.dev/chat/nua-vBWQ6sXmEIT

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

Code

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

Usage.tsx

import { Hero } from "@/components/blocks/hero"

export function LandingPage() {
  return (
    <main className="min-h-screen flex flex-col bg-[#f3f1ea] px-10">
      <Hero
        eyebrow="INTRODUCING NOTION CALENDAR"
        title={
          <>
            <div className="whitespace-nowrap">
              <span className="font-instrument-serif font-normal">Your schedule, </span>
              <span className="font-instrument-serif font-normal italic">seamlessly </span>
              <span className="font-instrument-serif font-normal">connected</span>
            </div>
            <div className="font-instrument-serif font-normal">
              to your workspace
            </div>
          </>
        }
        subtitle="Notion Calendar brings your tasks, notes, and schedule together"
        ctaText="Download now"
        ctaLink="/"
        mockupImage={{
          src: "https://www.notion.com/_next/image?url=/front-static/pages/calendar/notion-calendar-desktop-v2.png&w=2048&q=75",
          alt: "Notion Calendar Interface",
          width: 1274,
          height: 1043
        }}
      />
    </main>
  )
}