Hero271: Arched Window Sky Hero

A hero built around one tall arched window. Inside it, the horizon-gradient component paints a dusk sky with a low sun, a hazy horizon and drifting cloud streaks, while the headline and the intro sit on either side of the arch.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero271?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero271?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero271.tsx plus the horizon-gradient background and the button23 and button2 buttons it uses.

Quick start

The installed file exports hero271Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero271, hero271Demo } from "@/components/beste/block/hero271";

export default function Page() {
  return <Hero271 {...hero271Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hero271 } from "@/components/beste/block/hero271";

export default function Page() {
  return (
    <Hero271
      eyebrow="Casa Lume, a cliff hotel in the Algarve"
      heading="Every room faces the evening."
      description="Twelve rooms cut into the cliff, each with one arched window shaped to hold the sunset."
      buttons={[
        { label: "Book a room", href: "/book" },
        { label: "See the rooms", href: "/rooms" },
      ]}
      sky={{
        colors: ["#2a3470", "#b686b8", "#ffc68f", "#ffe2b5"],
        sunColor: "#fff0d2",
        sunSize: 0.55,
        horizon: 0.3,
      }}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
};

Behavior notes

• The arch is a plain div with rounded-t-full and overflow-hidden, so its top is a true half circle at any width. From lg up it stretches to the full height of the hero (at least 34rem); below that it keeps a 3:4 shape between the headline and the intro.
• The page and copy follow the site theme (bg-background, text-foreground, a ring-border edge on the arch), while the sky inside the window keeps its own fixed palette.
• On load the sky opens out of its zenith color and the sun rises over 2.4 seconds while the copy rises in; with interactive on, the sun leans a little toward the cursor.
• The sky pauses through an IntersectionObserver and on hidden tabs and respects prefers-reduced-motion; the copy then renders without its rise.