Your ImageYour Image
  • About
  • Templates10
  • Blocks80New
  • Icons1635
  • Graphics4K
  • Components107New
  • About
  • Components
  • Pricing
  • Contact
Book an Intro call
Book an Intro call
  • About
  • Works
  • Pricing
  • Templates
  • Blocks
  • components
  • Graphic
  • Backgrounds
  • Designs
  • Icons
  • Logos
  • Flags
  • Privacy
  • Terms
  • Contact
© 2025Made with by Ali Imam
FeaturedHeaderHeroLogosFooterBook DemoDownloadFeatureCTAConnectPricingStatsLoginDashboard404
Open in New Tab
Files
components/header-01.tsx
import { Header } from "@/components/header";

export function Header01() {
  return (
    <div className="flex flex-col min-h-screen w-full overflow-hidden">
      <Header /> 
      <main className="flex-1">
        <section className="h-screen flex items-center justify-center">
          <h1 className="text-4xl font-bold">Hero</h1>
        </section> 

        <section className="h-screen flex items-center justify-center">
          <h1 className="text-4xl font-bold">Section</h1>
        </section>
      </main>
    </div>
  );
}
A simple header section.
header-01
header-01header-01
Open in New Tab
Files
components/header-02.tsx
import { Header } from "@/components/header";

export function Header02() {
  return (
    <div className="flex flex-col min-h-screen w-full">
      <Header /> 
      <main className="flex-1">
        <section className="h-screen flex items-center justify-center">
          <h1 className="text-4xl font-bold">Hero</h1>
        </section> 

        <section className="h-screen flex items-center justify-center">
          <h1 className="text-4xl font-bold">Section</h1>
        </section>
      </main>
    </div>
  );
}
A simple header section.
header-02
header-02header-02
Open in New Tab
Files
components/header-03.tsx
import { Header } from "@/components/header";

export function Header03() {
  return (
    <div className="flex flex-col min-h-screen w-full">
      <Header /> 
      <main className="flex-1">
        <section className="h-screen flex items-center justify-center">
          <h1 className="text-4xl font-bold">Hero</h1>
        </section> 

        <section className="h-screen flex items-center justify-center">
          <h1 className="text-4xl font-bold">Section</h1>
        </section>
      </main>
    </div>
  );
}
A simple header section.
header-03
header-03header-03
Open in New Tab
Files
components/header-04.tsx
import { Header } from "@/components/header";

export function Header04() {
  return (
    <div className="flex flex-col min-h-screen w-full">
      <Header /> 
      <main className="flex-1">
        <section className="h-screen flex items-center justify-center">
          <h1 className="text-4xl font-bold">Hero</h1>
        </section> 

        <section className="h-screen flex items-center justify-center">
          <h1 className="text-4xl font-bold">Section</h1>
        </section>
      </main>
    </div>
  );
}
A simple header section.
header-04
header-04header-04
Open in New Tab
Files
components/header-05.tsx
import { Header } from "@/components/header";

export function Header05() {
  return (
    <div className="flex flex-col min-h-screen w-full">
      <Header /> 
      <main className="flex-1">
        <section className="h-screen flex items-center justify-center">
          <h1 className="text-4xl font-bold">Hero</h1>
        </section> 

        <section className="h-screen flex items-center justify-center">
          <h1 className="text-4xl font-bold">Section</h1>
        </section>
      </main>
    </div>
  );
}
A simple header section.
header-05
header-05header-05
Open in New Tab
Files
components/header-06.tsx
import { Header } from "@/components/header";

export function Header05() {
  return (
    <div className="flex flex-col min-h-screen w-full">
      <Header /> 
      <main className="flex-1">
        <section className="h-screen flex items-center justify-center">
          <h1 className="text-4xl font-bold">Hero</h1>
        </section> 

        <section className="h-screen flex items-center justify-center">
          <h1 className="text-4xl font-bold">Section</h1>
        </section>
      </main>
    </div>
  );
}
A simple header section.
header-06
header-06header-06