Components
Loading preview...
Hero Section A full-screen, responsive hero section with staggered text and button animations, designed to capture user attention.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/hero-section-4// demo.tsx
import { HeroSection } from "@/components/ui/hero-section-4"; // Adjust the import path
const HeroDemo = () => {
return (
<HeroSection
title="Let's connect and collaborate"
subtitle="Reach out today to discuss how we can elevate your online presence and drive results."
primaryButtonText="Learn More"
primaryButtonHref="#learn-more"
secondaryButtonText="Sign Up"
secondaryButtonHref="#signup"
imageUrl="https://plus.unsplash.com/premium_photo-1707761862412-defd8b0b6d12?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHx2aXN1YWwtc2VhcmNofDgzfHx8ZW58MHx8fHx8?q=80&w=2574&auto=format&fit=crop"
/>
);
};
export default HeroDemo;