started working on the top header

app/page.tsx

@@ -1,9 +1,19 @@
 import Footer from "@/components/footer/Footer";
 import Header from "@/components/header/Header";
+import Image from "next/image";
 
 export default function Home() {
   return (
-    <main className="">
+    <main className="bg-[#111111] h-[100vh] text-neutral-0 relative">
+      {/* Header Eclipse */}
+      <div className="absolute top-[0px] right-[15%]">
+        <Image
+          src="/images/header-eclipse.png"
+          width="300"
+          height="300"
+          alt="header eclipse"
+        />
+      </div>
       <Header />
       <Footer />
     </main>

components/header/Header.tsx

@@ -1,9 +1,103 @@
 import Image from "next/image";
 import React from "react";
-import { FiSettings } from "react-icons/fi";
+import SearchInput from "./SearchInput";
 
 const Header = () => {
-  return <>Header</>;
+  const socials = [
+    {
+      name: "chart",
+      link: "https://twitter.com/",
+      logo: "/icons/chart.svg",
+      alt: "chart logo",
+      width: 24,
+      height: 24,
+    },
+    {
+      name: "telegram",
+      link: "https://twitter.com/",
+      logo: "/icons/telegram-icon.svg",
+      alt: "superpumpfun telegram logo",
+      width: 30.4,
+      height: 24,
+    },
+    {
+      name: "twitter",
+      link: "https://twitter.com/",
+      logo: "/icons/x-logo.svg",
+      alt: "superpumpfun x logo",
+      width: 23.48,
+      height: 24,
+    },
+    {
+      name: "question",
+      link: "https://twitter.com/",
+      logo: "/icons/questionmark-logo.svg",
+      alt: "superpumpfun x logo",
+      width: 19,
+      height: 24,
+    },
+  ];
+
+  const tokenomics = [
+    {
+      title: "24H VOL",
+      desc: "$ 50M",
+    },
+    {
+      title: "LOCKED TVL",
+      desc: "$ 88M",
+    },
+    {
+      title: "TOKENS CREATED",
+      desc: "1,230,223",
+    },
+  ];
+  return (
+    <header className="">
+      <div className="container flex items-center gap-[40px] py-[30px] px-[0px]">
+        {/* LOGO */}
+        <Image
+          src="/icons/superpumpfun-logo.svg"
+          width="64"
+          height="64"
+          alt="superpumpfun logo"
+        />
+
+        {/* SOCIALS */}
+        <ul className="flex items-center gap-[20px]">
+          {socials.map((social, index) => {
+            return (
+              <li key={index}>
+                <a href={social.link} target="_blank">
+                  <Image
+                    src={social.logo}
+                    width={social.width}
+                    height={social.height}
+                    alt={social.alt}
+                  />
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+
+        {/* TOKENOMICS */}
+        <ul className="flex items-center gap-y-[10px] gap-x-[30px]">
+          {tokenomics.map((info, index) => {
+            return (
+              <li key={index}>
+                <p>{info.title}</p>
+                <p className="mt-[15px]">{info.desc}</p>
+              </li>
+            );
+          })}
+        </ul>
+
+        {/* SEARCH INPUT */}
+        <SearchInput />
+      </div>
+    </header>
+  );
 };
 
 export default Header;

components/header/SearchInput.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const SearchInput = () => {
+  return <div>Search Input</div>;
+};
+
+export default SearchInput;

tailwind.config.ts

@@ -13,7 +13,7 @@ const config = {
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: "1rem",
       screens: {
         "2xl": "1400px",
       },