Components
Loading preview...
A stunning full-screen hero section featuring a cinematic background image, glassmorphic navigation bar with backdrop blur, animated badge, elegant serif typography, dual call-to-action buttons, and a partner logos grid. Fully responsive with smooth fadeSlideIn animations.
@saifyxpro
npx shadcn@latest add https://21st.dev/r/sensewood8/responsive-hero-bannerimport React from 'react';
import ResponsiveHeroBanner from '../components/ui/responsive-hero-banner';
const HeroDemo = () => {
return (
<ResponsiveHeroBanner
badgeLabel="New"
badgeText="First Commercial Flight to Mars 2026"
title="Journey Beyond Earth"
titleLine2="Into the Cosmos"
description="Experience the cosmos like never before. Our advanced spacecraft and cutting-edge technology make interplanetary travel accessible, safe, and unforgettable."
primaryButtonText="Book Your Journey"
secondaryButtonText="Watch Launch"
ctaButtonText="Reserve Seat"
partnersTitle="Partnering with leading space agencies worldwide"
/>
);
};
export default HeroDemo;