Clean, split-screen hero layout with bold headline, adventure call-to-action, and animated floral imagery for an engaging first impression.
import 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://cdn.21st.dev/assets/mirror/c9/c9babfd70e9056d8223e9d2eda28c4c7cc6c3555d666e10ef656b70a49f67a48.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://cdn.21st.dev/assets/mirror/e7/e70e9f982b9757e527be7f1ee9efcb979ac07ab9d253444cec23cbe55352357c.jpg"
contactInfo={{
website: "yourwebsite.com",
phone: "+1 (555) 123-4567",
address: "20 Fieldstone Dr, Roswell, GA",
}}
/>
</div>
);
}