Components
Loading preview...
Clean, split-screen hero layout with bold headline, adventure call-to-action, and animated floral imagery for an engaging first impression.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/hero-section-2import React from 'react';
import { HeroSection } from '@/components/ui/hero-section-2'; // Adjust the import path as needed
export default function HeroSectionDemo() {
return (
<div className="w-full">
<HeroSection
logo={{
url: "https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/users/user_2zMtrqo9RMaaIn4f8F2z3oeY497/avatar.png",
alt: "Company Logo",
text: "Your Logo"
}}
slogan="ELEVATE YOUR PERSPECTIVE"
title={
<>
Each Peak <br />
<span className="text-primary">Teaches Something</span>
</>
}
subtitle="Discover breathtaking landscapes and challenge yourself with our guided mountain expeditions. Join a community of adventurers."
callToAction={{
text: "JOIN US TO EXPLORE",
href: "#explore",
}}
backgroundImage="https://plus.unsplash.com/premium_photo-1754738812660-11ca16e5b8bd?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxN3x8fGVufDB8fHx8fA%3D%3D"
contactInfo={{
website: "yourwebsite.com",
phone: "+1 (555) 123-4567",
address: "20 Fieldstone Dr, Roswell, GA",
}}
/>
</div>
);
}