Ali Imam

Featured Header Hero Logos Footer Book Demo Download Feature CTA Connect Pricing Stats Login Dashboard 404

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

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

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

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

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

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