Components
Loading preview...
Modern hero section featuring bold headline typography, AI-focused subtext, and a collage of rounded-corner images arranged in an overlapping, floating layout to create depth and visual engagement.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/modern-hero-sectionimport { HeroCollage } from '@/components/ui/modern-hero-section'; // Adjust path as needed
// Demo component to showcase the HeroCollage
export default function HeroCollageDemo() {
const stats = [
{ value: '3,888,846+', label: 'Users Trusted' },
{ value: '16,015,507+', label: 'Images Processed' },
];
const unsplashImages = [
// Central Image: Portrait
'https://plus.unsplash.com/premium_photo-1670282392820-e3590c1c5c54?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fGdpcmx8ZW58MHx8MHx8fDA%3D',
// Top-Left (Before/After concept)
'https://images.unsplash.com/photo-1652161468447-d8abb529b464?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8YmVmb3JlJTIwYW5kJTIwYWZ0ZXJ8ZW58MHx8MHx8fDA%3D',
// Top-Right (Daisies)
'https://images.unsplash.com/photo-1526047932273-341f2a7631f9?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3',
// Bottom-Right (Sliders/Beach)
'https://images.unsplash.com/photo-1500964757637-c85e8a162699?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3',
// Far-Right (Sunflowers)
'https://images.unsplash.com/photo-1596639410348-8470f7fa9f84?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3',
// Bottom-Left (Product)
'https://images.unsplash.com/photo-1556228720-195a672e8a03?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3',
// Far-Left (Rainbow)
'https://images.unsplash.com/photo-1532135468830-e51699205b70?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHJhaW5ib3d8ZW58MHx8MHx8fDA%3D',
];
return (
<div className="w-full">
<HeroCollage
title={
<>
Free <span className="text-blue-600">AI Photo Editor</span>
</>
}
subtitle="Supercharge your editing 10x faster and easier than ever with AIEASE’s a diverse of AI-powered toolsets. Use our all-in-one online free AI photo editor to deliver perfect and professional images."
stats={stats}
images={unsplashImages}
/>
</div>
);
}