Skip to main content

​
Overview

The Header component provides a sticky navigation bar at the top of the application. It displays the VisionaryAI branding along with external links for contact and repository access.

​
Props

This component does not accept any props.

​
Usage

import Header from '@/components/Header';

function Layout() {
  return (
    <div>
      <Header />
      {/* Page content */}
    </div>
  );
}

​
Component structure

The header is divided into two main sections:

​
Left section - Branding

Displays the VisionaryAI logo and tagline: 
<div className="flex space-x-2">
  <Image
    src="https://seeklogo.com/images/O/open-ai-logo-8B9BFEDC26-seeklogo.com.png"
    alt="VisionaryAI"
    width={37}
    height={20}
  />
  <div>
    <h1 className="font-bold">
      VisionaryAI: <span className="text-violet-500">AI</span> Image generator
    </h1>
    <h2 className="text-xs">Powered by DALL.E 3 & GPT turbo</h2>
  </div>
</div>
Provides external navigation options: 
<div className="flex divide-x text-xs md:text-base items-center text-gray-500">
  <Link href="https://twitter.com/Srijan_Dby" className="px-2 font-light">
    Contact Me!
  </Link>
  <Link href="https://github.com/Srijan-D/dall-e2" className="px-2 font-light">
    Github repository
  </Link>
</div>

​
Features

​
Sticky positioning

The header remains visible at the top of the viewport while scrolling: 
className="flex justify-between p-4 bg-white z-40 sticky shadow-md top-0"

​
Responsive typography

Navigation link text sizes adapt to screen size:
  • Mobile: Extra small text (text-xs)
  • Desktop (md and above): Base text size (md:text-base)

​
Visual separation

The navigation links are separated by vertical dividers using the divide-x utility class.

​
Layout

The header uses flexbox for layout:
  • justify-between - Distributes branding and navigation to opposite ends
  • items-center - Vertically centers content in the navigation section
  • space-x-2 - Adds horizontal spacing between logo and text

​
Branding elements

OpenAI logo from external CDN (seeklogo.com)
  • Width: 37px
  • Height: 20px
​
Title
h1
“VisionaryAI: AI Image generator” with violet accent on “AI”
​
Subtitle
h2
“Powered by DALL.E 3 & GPT turbo” in small text
​
Contact Link
Link
Links to Twitter profile: https://twitter.com/Srijan_Dby
​
Repository Link
Link
Links to GitHub repository: https://github.com/Srijan-D/dall-e2

​
Dependencies

  • next/image - Optimized image loading
  • next/link - Client-side navigation and external links

​
Styling

The component uses Tailwind CSS classes:
  • White background with shadow for depth
  • Sticky positioning with high z-index (z-40)
  • Responsive text sizing
  • Violet accent color (#8b5cf6) for brand emphasis
  • Gray text for navigation links
  • Padding and spacing utilities for consistent layout

Build docs developers (and LLMs) love

Get started for freeTalk to us