Components
Hero Section Glass Web
The HeroSection component is a visually immersive, full-width introduction area built with shadcn/ui components and Tailwind styling. It combines a cinematic background image, bold typography, and layered gradients to create a modern, editorial feel. Designed for landing pages, it highlights a core message with a striking headline, short description, and clear call-to-action buttons, while subtle metadata and coordinates add sophistication. This component sets the tone for the rest of the site—balancing design aesthetics with clarity, responsiveness, and accessibility.
// app/hero-demo/page.tsx
import { HeroSection } from "@/components/ui/hero-section-glass-web";
export default function Page() {
return (
<HeroSection
imageSrc="https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/screen-website-template.png"
imageAlt="Design in motion"
kicker="Category: Creative Systems"
title="Create experiences at the speed "
description="An AI design workspace that helps you sketch ideas, evolve layouts, and ship complete interfaces—without breaking flow."
primaryAction={{ href: "#start", label: "Start free" }}
secondaryAction={{ href: "#plans", label: "See pricing" }}
coordinates={"34°N 118°W\nLos Angeles, US"}
metaLeft="Vol. 05 / 2025"
metaCenter="AI study: Motion & form"
metaRight="scroll to explore"
/>
);
}
Dependencies
Published
Similar components
Explore more
Part of Ruixen UI — browse the full library on 21st.dev.