ComponentsHeader
A responsive header with your logo (left), links (center) and a CTA (right). Links and CTA are hidden on mobile and accessible with a burger menu. Add your own logo in the /app
folder. Make sure to match the file name in the <Header />
component (currently icon.png
).
/app/page.js
1import { Suspense } from "react";
2import Header from "@/components/Header";
3
4export default function Home() {
5 return (
6 <>
7 <Suspense>
8 <Header />
9 </Suspense>
10 <main>
11 ...
12 </main>
13 </>
14 );
15}
Tips
- Unless you're Nike or Apple, visitors have no idea who you are. Keep your brand name small.
- Try to always have a Pricing link in your header. No matter what you sell, people will look for it.