feat: header section

src/components/header/index.tsx

@@ -0,0 +1,17 @@
+import Hero from '../hero';
+import Container from '../layouts/container';
+import Navbar from '../navbar';
+
+export default function Header() {
+  return (
+    <div className="relative border-b border-slate-200">
+      <Navbar />
+      <div className="pointer-events-none absolute inset-0 -z-10 bg-grid-slate-100 [mask-image:linear-gradient(0deg,white,rgba(255,255,255,0))]"></div>
+      <Container>
+        <div className="mt-4 flex min-h-[21rem] items-center">
+          <Hero />
+        </div>
+      </Container>
+    </div>
+  );
+}

src/components/hero/index.tsx

@@ -0,0 +1,11 @@
+import LogoSection from './logo-section';
+import TextSection from './text-section';
+
+export default function Hero() {
+  return (
+    <div className="flex w-full items-center gap-4 pb-6">
+      <TextSection />
+      <LogoSection />
+    </div>
+  );
+}

src/components/hero/logo-section.tsx

@@ -0,0 +1,3 @@
+export default function LogoSection() {
+  return <section className="hidden lg:block">Logo Section</section>;
+}

src/components/hero/text-section.tsx

@@ -0,0 +1,28 @@
+import Dot from '@/utilities/dot';
+import TypoComp from '@/utilities/typo-component';
+
+export default function TextSection() {
+  return (
+    <section className="space-y-6">
+      {/* icons */}
+      <div className="flex flex-wrap items-center gap-x-4 text-sm font-medium capitalize">
+        1 contributors
+        <Dot />
+        Open Source
+        <Dot />
+        Student community
+      </div>
+      <TypoComp>
+        <h1>
+          Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur.{' '}
+        </h1>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure,
+          veritatis architecto totam accusantium placeat voluptas ipsum numquam.
+        </p>
+      </TypoComp>
+      {/* links */}
+      <div className="">links</div>
+    </section>
+  );
+}

src/components/layouts/container.tsx

@@ -1,22 +1,14 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
+import { clsx } from 'clsx';
+import { FC, HTMLAttributes } from 'react';
 
-type ContainerProps = HTMLAttributes<HTMLDivElement> & {
-  children: ReactNode;
-  styles?: string;
-};
+type ContainerProps = HTMLAttributes<HTMLDivElement>;
 
-const Container: FC<ContainerProps> = ({
-  children,
-  className,
-  styles,
-  ...props
-}) => {
+const Container: FC<ContainerProps> = ({ className, ...props }) => {
   return (
-    <section className={`w-full ${styles || ``} `}>
-      <div {...props} className={`container mx-auto ${className || ``}`}>
-        {children}
-      </div>
-    </section>
+    <div
+      {...props}
+      className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
+    />
   );
 };
 

src/components/layouts/main.tsx

@@ -1,7 +1,7 @@
 import Head from 'next/head';
 import React from 'react';
 import Footer from '../footer';
-import Navbar from '../navbar';
+import Header from '../header';
 
 export type LayoutProps = React.HTMLAttributes<HTMLDivElement> & {
   children: React.ReactNode;
@@ -24,7 +24,7 @@ const Layout: React.FC<LayoutProps> = ({
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <div {...props}>
-        <Navbar />
+        <Header />
         {children}
         <Footer />
       </div>

src/components/navbar/index.tsx

@@ -1,3 +1,24 @@
+import Image from 'next/image';
+import PBCLifeLogo from '~/images/pbclifelogo.png';
+import Container from '../layouts/container';
+
 export default function Navbar() {
-  return <div>Navbar</div>;
+  return (
+    <Container>
+      {/* logo */}
+      <div className="flex items-center gap-x-2 py-4">
+        <Image
+          src={PBCLifeLogo}
+          alt="logo"
+          placeholder="blur"
+          width={48}
+          height={48}
+          className="h-10 w-10 rounded-full object-cover object-center"
+        />
+        <span className="text-2xl font-bold tracking-tight">PBC LIFE</span>
+      </div>
+      {/* social icons */}
+      <div className=""></div>
+    </Container>
+  );
 }

src/components/utilities/dot.tsx

@@ -0,0 +1,5 @@
+export default function Dot() {
+  return (
+    <span className="h-1 w-1 flex-shrink-0 rounded-full bg-slate-800"></span>
+  );
+}

src/components/utilities/typo-component.tsx

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+
+type TypoCompType = HTMLAttributes<HTMLDivElement> & {};
+
+export default function TypoComp({ className, ...props }: TypoCompType) {
+  // todo: implement theme system
+  return <div className={` prose max-w-2xl ${className || ``}`} {...props} />;
+}

src/pages/index.tsx

@@ -4,7 +4,7 @@ export default function Home() {
   return (
     <Layout>
       <main
-        className={`grid min-h-screen place-items-center bg-slate-200 text-7xl font-extrabold tracking-tight text-indigo-600`}
+        className={`grid min-h-screen place-items-center text-7xl font-extrabold tracking-tight text-indigo-600`}
       >
         PBC LIFE
       </main>