Hero Section with Starry Sky

Heroes

About

A landing page opening: a serif title whose accent line catches the light, over a night sky with shooting stars and an engraved rosette. Phones get an editorial layout set from the left. From the Midnight Lite template (MIT).

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

Code

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

Usage.tsx

import type { CSSProperties } from "react"

import { NightHero } from "@/components/ui/night-hero"

const fraunces =
  "@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..600,0..100;1,9..144,300..600,0..100&display=swap');"

const settings = {
  lead: "Your work,",
  accent: "done by morning.",
  paper: "#f7f5f0",
  ink: "#141a2e",
  muted: "#4a5166",
  primary: "#a8803a",
  rosette: true,
}

// Midnight by day as theme tokens: warm paper, night-blue ink, deep gold with white text on it.
// The hero reads its stars, rosette and sparks from the --mn-* variables; by day they are gold.
function day(s: typeof settings) {
  const t: Record<string, string> = {
    background: s.paper,
    foreground: s.ink,
    primary: s.primary,
    "primary-foreground": "#ffffff",
    "muted-foreground": s.muted,
    ring: s.primary,
  }
  return {
    ...Object.fromEntries(Object.entries(t).flatMap(([k, v]) => [[`--${k}`, v], [`--color-${k}`, v]])),
    "--mn-star": "#a5813f",
    "--mn-star-k": "1.6",
    "--mn-ornament": "#8a6a2e",
    "--mn-ornament-k": "3.2",
    "--mn-spark": "#8a6a2e",
    "--mn-meteor": "#8a6a2e",
  } as CSSProperties
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <div className="min-h-svh w-full" style={{ ...day(s), "--font-display": "Fraunces, ui-serif, Georgia, serif", background: s.paper } as CSSProperties}>
      <style>{fraunces}</style>
      <NightHero
        eyebrow="AI agents for the night shift"
        title={{ lead: s.lead, accent: s.accent }}
        lead="Describe a task before you log off. Midnight's agents research, draft and double-check it overnight, then leave a brief with sources by 7:00."
        leadShort="Hand off a task before you log off. Wake up to a brief, with a source for every line."
        primary={{ label: "Start free", href: "#" }}
        secondary={{ label: "See how it works", href: "#" }}
        rosette={s.rosette}
      />
    </div>
  )
}