All Hero Blocks
There you will find all type of hero section with navbar
AI Image Editor
Simple AI image editor apps hero section with header.
"use client";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { CodeXml, Menu } from "lucide-react";
import Link from "next/link";
const config = {
theme: {
headerStyle: "fixed",
logo: <CodeXml className="text-purple-400" />,
button: {
variants: {
primary:
"bg-gradient-to-r from-blue-500 to-purple-600 text-white border-transparent hover:shadow-2xl hover:shadow-blue-500/25 hover:transform hover:scale-105 cursor-pointer font-medium",
glass:
"backdrop-blur-lg bg-white/10 text-white border-white/20 hover:bg-white/20 hover:transform hover:scale-105 cursor-pointer font-medium",
},
size: {
xl: "h-11 px-8 rounded-full",
},
},
shapes: [
{
id: 1,
size: "w-72 h-72",
position: "top-20 left-10",
gradient: "from-blue-500 to-purple-600",
},
{
id: 2,
size: "w-96 h-96",
position: "top-1/3 right-10",
gradient: "from-cyan-500/40 to-purple-500",
},
],
},
navigatorLink: [
{
id: 1,
title: "Home",
link: "/",
},
{
id: 2,
title: "About",
link: "/",
},
{
id: 3,
title: "Contact",
link: "/",
},
{
id: 4,
title: "Blogs",
link: "/",
},
],
content: {
title1: "Create",
title2: "Without Limit",
description:
"Professional image editor with powerful AI, Crop, resize, adjust color,remove background and enhance your images with cutting-edge technology",
},
};
const Overlay = () => {
return (
<div className="fixed inset-0 overflow-hidden pointer-events-none">
{config.theme.shapes.map((shape) => {
return (
<div
key={shape.id}
className={cn(
"absolute bg-gradient-to-r rounded-full blur-3xl opacity-10 animate-pulse",
shape.size,
shape.position,
shape.gradient
)}
/>
);
})}
</div>
);
};
const Header = () => {
return (
<header
className={cn(
config.theme.headerStyle,
"top-4 md:top-6 left-1/2 transform -translate-x-1/2 z-50 text-nowrap min-w-[90%] md:min-w-3xl"
)}
>
<div className="backdrop-blur-md bg-white/10 border-white/20 rounded-full px-8 py-3 flex justify-between items-center gap-10">
<div className="mr-10">{config.theme.logo}</div>
<div className="hidden md:block space-x-6">
{config.navigatorLink.map((link) => {
return (
<Link key={link.id} href={link.link} className="font-medium">
{link.title}
</Link>
);
})}
</div>
<div className="ml-10 hidden md:block">
<Button
className={cn(config.theme.button.variants.primary, "rounded-full")}
>
Get Started
</Button>
</div>
<div className="ml-10 block md:hidden">
<Menu />
</div>
</div>
</header>
);
};
const Content = () => {
return (
<section className="min-h-screen flex justify-center items-center relative overflow-hidden">
<div className="text-center z-10 px-6">
<h1 className="text-6xl md:text-8xl font-black mb-6 tracking-tight">
<span className="bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
{config.content.title1}
</span>
<br />
<span className="">{config.content.title2}</span>
</h1>
<p className="text-xl text-gray-400 mb-8 max-w-3xl mx-auto leading-relaxed">
{config.content.description}
</p>
<div className="flex gap-4 md:gap-10 items-center justify-center">
<Button
className={cn(
config.theme.button.variants.primary,
config.theme.button.size.xl
)}
>
Start Creating
</Button>
<Button
className={cn(
config.theme.button.variants.glass,
config.theme.button.size.xl
)}
>
Watch Demo
</Button>
</div>
</div>
</section>
);
};
export default function HeroOne() {
return (
<>
<section className="bg-slate-900 min-h-screen text-white overflow-x-hidden relative pt-10">
<Header />
<Content />
<Overlay />
</section>
</>
);
}