Hero Section

Heroes 1.2K

About

Clean, split-screen hero layout with bold headline, adventure call-to-action, and animated floral imagery for an engaging first impression.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hero Section to your project and fits it to your theme.

Code

How Hero Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}