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.

Open in
"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>
    </>
  );
}