availproject · abheektripathy · Jan 11, 2026 · Jan 11, 2026 · Jan 11, 2026 · Jan 11, 2026
diff --git a/app/globals.css b/app/globals.css
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,37 +1,35 @@
-import { Layout, Navbar, Link } from 'nextra-theme-docs'
-import { Footer } from "@components/Footer/Footer";
-import { Head, Search, Banner } from 'nextra/components'
-import { Metadata } from "next";
+import { Layout, Navbar } from "nextra-theme-docs";
+import { Head, Search, Banner } from "nextra/components";
 import { ReactNode } from "react";
-import { getPageMap } from 'nextra/page-map'
-import 'nextra-theme-docs/style.css'
-import './globals.css'
-import { CustomNavbar } from '@components/Navbar';
-import { sharedMetadata } from '@components/lib/metadata';
-
+import { getPageMap } from "nextra/page-map";
+import "nextra-theme-docs/style.css";
+import "./globals.css";
+import { CustomNavbar } from "@components/Navbar";
+import { sharedMetadata } from "@components/lib/metadata";
 
 // Metadata for the website
-export const metadata = sharedMetadata
-
-const footer = <Footer/>
+export const metadata = sharedMetadata;
 
 const defaultSearchOptions = {
   preload: true,
   verbose: false,
   filters: {},
-  sort: {}
+  sort: {},
 };
 
 const banner = (
   <Banner dismissible={true}>
     Avail Nexus is now live!{" "}
-    <Link href="https://docs.availproject.org/nexus/avail-nexus-sdk" className="text-current!">
-    Check out our docs
-    </Link>
-     to get started.
+    <a
+      href="https://docs.availproject.org/nexus/avail-nexus-sdk"
+      className="text-current! underline"
+    >
+      Check out our docs{" "}
+    </a>
+    to get started.
   </Banner>
-)
- 
+);
+
 export default async function RootLayout({
   children,
 }: {
@@ -40,42 +38,48 @@ export default async function RootLayout({
   return (
     <html lang="en" dir="ltr" suppressHydrationWarning>
       <Head>
-      <meta property="og:image" content="/img/docs-link-preview.png" />
-      <meta property="og:image:width" content="1200" />
-      <meta property="og:image:height" content="630" />
-      <meta name="twitter:image" content="/img/docs-link-preview.png" />
+        <link
+          rel="preload"
+          href="/fonts/Thunder-ExtraBoldLC.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+        <meta property="og:image" content="/img/docs-link-preview.png" />
+        <meta property="og:image:width" content="1200" />
+        <meta property="og:image:height" content="630" />
+        <meta name="twitter:image" content="/img/docs-link-preview.png" />
       </Head>
       <body>
         <Layout
           banner={banner}
           navbar={
             <Navbar
-              logo={
-                <CustomNavbar/>
-              }
+              logo={<CustomNavbar />}
               projectLink="https://github.com/availproject/docs"
               chatLink="https://twitter.com/AvailProject"
               chatIcon={
                 <svg width="24" height="24" viewBox="0 0 248 204">
                   <path
-                      fill="currentColor"
-                      d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07a50.338 50.338 0 0 0 22.8-.87C27.8 117.2 10.85 96.5 10.85 72.46v-.64a50.18 50.18 0 0 0 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71a143.333 143.333 0 0 0 104.08 52.76 50.532 50.532 0 0 1 14.61-48.25c20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26a50.69 50.69 0 0 1-22.2 27.93c10.01-1.18 19.79-3.86 29-7.95a102.594 102.594 0 0 1-25.2 26.16z"
-                    />
-                  </svg>
-                }
+                    fill="currentColor"
+                    d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07a50.338 50.338 0 0 0 22.8-.87C27.8 117.2 10.85 96.5 10.85 72.46v-.64a50.18 50.18 0 0 0 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71a143.333 143.333 0 0 0 104.08 52.76 50.532 50.532 0 0 1 14.61-48.25c20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26a50.69 50.69 0 0 1-22.2 27.93c10.01-1.18 19.79-3.86 29-7.95a102.594 102.594 0 0 1-25.2 26.16z"
+                  />
+                </svg>
+              }
             />
           }
-
           navigation={{
             prev: true,
-            next: true
-          }}  
-
+            next: true,
+          }}
           pageMap={await getPageMap()}
           docsRepositoryBase="https://github.com/availproject/docs/tree/main"
           editLink="Edit this page on GitHub"
-          sidebar={{ defaultMenuCollapseLevel: 1, autoCollapse: true, toggleButton: true }}
-          footer={footer}
+          sidebar={{
+            defaultMenuCollapseLevel: 1,
+            autoCollapse: true,
+            toggleButton: true,
+          }}
           search={
             <Search
               emptyResult="No matches found."
@@ -90,4 +94,4 @@ export default async function RootLayout({
       </body>
     </html>
   );
-}
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -3,29 +3,44 @@ export const metadata = {
 };
 
 import Introduction from "components/Introduction";
+import { Footer } from "@components/Footer/Footer";
 
 export default function HomePage() {
   return (
     <>
-      <div className="relative lg:w-[80vw] max-md:px-3 mx-auto mt-16">
-        <img
-          src="/introshapes.png"
-          alt="left image"
-          className="absolute left-0 top-0 max-md:opacity-30"
-        />
-        <h1 className="text-center text-4xl tracking-tighter md:text-5xl mt-4 font-thicccboi font-bold">
+      <div className="relative lg:w-[80vw] max-md:px-3 mx-auto mt-16 mb-8">
+        {/* Main heading - regular weight */}
+        <h1
+          className="text-center text-3xl md:text-4xl lg:text-5xl mt-4 text-[#0a0a0a] dark:text-[#ededed]"
+          style={{
+            fontFamily: 'Inter, -apple-system, sans-serif',
+            fontWeight: 400,
+            letterSpacing: '-0.02em',
+            lineHeight: 1.2,
+          }}
+        >
           Avail Developer Docs
         </h1>
-        <h1 className="text-center text-xl mx-auto mt-3 max-w-xl font-thicccboi font-normal">
-          Build with Avail, the unification layer of Web3
-        </h1>
-        <img
-          src="/introshapes.png"
-          alt="right image"
-          className="absolute right-0 top-0 max-md:opacity-30"
-        />
+
+        {/* Bold blue headline - Thunder ExtraBold LC condensed */}
+        <h2 className="thunder-heading text-center text-[80px] md:text-[120px] lg:text-[180px] mt-4">
+          BUILD WITH AVAIL
+        </h2>
+
+        {/* Subtitle */}
+        <p
+          className="text-center text-base md:text-lg mx-auto mt-4 max-w-xl text-[#737373] dark:text-[#a1a1a1]"
+          style={{
+            fontFamily: 'Inter, -apple-system, sans-serif',
+            fontWeight: 400,
+            lineHeight: 1.6,
+          }}
+        >
+          The unification layer of Web3. Build scalable, modular blockchain applications with Avail's data availability layer.
+        </p>
       </div>
       <Introduction />
+      <Footer />
     </>
   );
 }