Growth Hero Section

Heroes 105

About

Growth Hero Section A responsive hero section component that features a title, descriptive paragraphs, a call-to-action link, and a visually engaging, animated image gallery.

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

Code

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

Usage.tsx

import { GrowthHeroSection } from "@/components/ui/growth-hero-section"; // Adjust the import path

export default function GrowthHeroSectionDemo() {
  // Props are defined here and passed into the component for reusability
  const heroData = {
    brandName: "Bliss",
    title: (
      <>
        Accelerating The Builders
        <br />
        Of The Next Decade
      </>
    ),
    description1:
      "We're A Venture Capital Firm Focused On Early-Stage Startups With Disruptive Potential. With Deep Operational Experience And A Founder-First Approach, We Partner With Visionary Teams To Build Tomorrow's Category Leaders.",
    description2:
      "We Invest In Startups Solving Real-World Problems Through Technology, Design, And Grit. Our Global Network, Operational Support, And Long-Term Mindset Help Founders Move Fast And Build Things That Matter.",
    images: [
      "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-v9C8luPQsZdmebTqL8qWFnHq9MxOjA.png&w=320&q=75",
      "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-stQRgfBCiMg8IA6Bab2Ps4i8JGwdSY.png&w=320&q=75",
      "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-GpHZV8hHsDz012a8YoUSZPF2LKqIfV.png&w=320&q=75",
      "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-vhtQnzOAq2TG349yFiuZGtvFxPGfzU.png&w=320&q=75",
    ] as [string, string, string, string],
    cta: {
      text: "Apply To Join A Community",
      href: "#",
    },
  };

  return (
    <div className="w-full bg-background">
      <GrowthHeroSection {...heroData} />
    </div>
  );
}