AI Image Generator Hero

Heroes 1.4K

About

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

Code

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

Usage.tsx

"use client"

import { ImageCarouselHero } from "@/components/ui/ai-image-generator-hero"

export default function ImageCarouselHeroDemo() {
  const demoImages = [
    {
      id: "1",
      src: "https://cdn.21st.dev/assets/mirror/64/6491b0320bf25d7513a9ed7eacbbef2d577ba4508beff9e6b1e60f29179fecdc.jpg",
      alt: "Mountain landscape",
      rotation: -15,
    },
    {
      id: "2",
      src: "https://cdn.21st.dev/assets/mirror/43/43c1a4b90f721a23773b278e3e51e1bddf77d925a41123970cf4255107bd6ae5.jpg",
      alt: "Abstract art",
      rotation: -8,
    },
    {
      id: "3",
      src: "https://cdn.21st.dev/assets/mirror/77/77470bfd2ee838f631321bd74cb0dd83b4e79aa6daba63a7e4bf9aa865e378a4.jpg",
      alt: "City skyline",
      rotation: 5,
    },
    {
      id: "4",
      src: "https://cdn.21st.dev/assets/mirror/2c/2cf48ca461d4a88709c6ab6943bf229c355d7ac2f9dc6b8afad5d68603330b5d.jpg",
      alt: "Nature photography",
      rotation: 12,
    },
    {
      id: "5",
      src: "https://cdn.21st.dev/assets/mirror/c8/c8852febca688078b34e505d74564ada6631d01c194aecd1f0adb80a28c35eec.jpg",
      alt: "Digital art",
      rotation: -12,
    },
    {
      id: "6",
      src: "https://cdn.21st.dev/assets/mirror/dd/dd138b0f272c3feaadb10cff14f8b24e719837fc4472bcd980c98596e3bb583c.jpg",
      alt: "Tropical leaves",
      rotation: 8,
    },
    {
      id: "7",
      src: "https://cdn.21st.dev/assets/mirror/6e/6e074600bd73061c367e6a6870847e0fecd57aaa52e4f0c26571aee4f85c58db.jpg",
      alt: "Tropical leaves",
      rotation: 8,
    },
    {
      id: "8",
      src: "https://cdn.21st.dev/assets/mirror/fc/fcec218d9683dbd85864be613ff5f5bd1a38e4852a32f47470f204dfc19c718a.jpg",
      alt: "Tropical leaves",
      rotation: 8,
    },
  ]

  const demoFeatures = [
    {
      title: "Realistic Results",
      description: "Realistic Results Photos that look professionally crafted",
    },
    {
      title: "Fast Generation",
      description: "Turn ideas into images in seconds.",
    },
    {
      title: "Diverse Styles",
      description: "Choose from a wide range of artistic options.",
    },
  ]

  return (
    <ImageCarouselHero
      title="Create Stunning AI Generated Photos Instantly"
      subtitle="AI Photo Generation"
      description="Transform your ideas into breathtaking visuals with cutting-edge AI technology"
      ctaText="Start Generating Now"
      onCtaClick={() => console.log("CTA clicked!")}
      images={demoImages}
      features={demoFeatures}
    />
  )
}