Developer-DAO · okhaimie-dev · Oct 27, 2023 · Oct 27, 2023 · Oct 27, 2023 · Oct 27, 2023
diff --git a/apps/academy/public/D_D Academy re-do.fig b/apps/academy/public/D_D Academy re-do.fig
diff --git a/apps/academy/public/eth_fam.png b/apps/academy/public/eth_fam.png
diff --git a/apps/academy/public/fundamental-bg.jpeg b/apps/academy/public/fundamental-bg.jpeg
diff --git a/apps/academy/src/components/Header.tsx b/apps/academy/src/components/Header.tsx
@@ -6,7 +6,7 @@ import { ConnectButton } from "@/components/ConnectButton";
 const sampleMenus: NavItem[] = [
   {
     name: "Fundamentals",
-    href: "/",
+    href: "/fundamentals",
     icon: "clarity_blocks",
   },
   {

diff --git a/apps/academy/src/font/BTTF.ttf b/apps/academy/src/font/BTTF.ttf
diff --git a/apps/academy/src/pages/_app.tsx b/apps/academy/src/pages/_app.tsx
@@ -15,6 +15,7 @@ import merge from "lodash.merge";
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
 import Head from "next/head";
+import { useRouter } from "next/router";
 import type { Session } from "next-auth";
 import { SessionProvider } from "next-auth/react";
 import { DefaultSeo } from "next-seo";
@@ -100,8 +101,44 @@ type AppPropsWithLayout<P> = AppProps<P> & {
 };
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout<{ session: Session | null }>) {
+  const router = useRouter();
   const getLayout = Component.getLayout ?? ((page) => page);
 
+  // If the current route is '/fundamentals', don't use the Layout
+  if (router.pathname === "/fundamentals") {
+    return (
+      <WagmiConfig config={wagmiConfig}>
+        <SessionProvider refetchInterval={0} session={pageProps.session}>
+          <RainbowKitSiweNextAuthProvider>
+            <RainbowKitProvider
+              chains={chains}
+              initialChain={polygonMumbai}
+              appInfo={{
+                appName: "Developer DAO Academy",
+                learnMoreUrl: "https://academy.developerdao.com",
+              }}
+              theme={{
+                lightMode: academyLightTheme,
+                darkMode: academyDarkTheme,
+              }}
+            >
+              <ThemeProvider attribute="class">
+                <DefaultSeo {...SEO} />
+                <Head>
+                  <meta
+                    name="viewport"
+                    content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover"
+                  />
+                </Head>
+                <Component {...pageProps} />
+              </ThemeProvider>
+            </RainbowKitProvider>
+          </RainbowKitSiweNextAuthProvider>
+        </SessionProvider>
+      </WagmiConfig>
+    );
+  }
+
   return (
     <WagmiConfig config={wagmiConfig}>
       <SessionProvider refetchInterval={0} session={pageProps.session}>

diff --git a/apps/academy/src/pages/fundamentals.tsx b/apps/academy/src/pages/fundamentals.tsx
@@ -0,0 +1,62 @@
+import type { FC } from "react";
+import React from "react";
+import { type NavItem, TopBar, TrackCard } from "ui";
+
+import { ConnectButton } from "@/components/ConnectButton";
+
+const sampleMenus: NavItem[] = [
+  {
+    name: "Fundamentals",
+    href: "/fundamentals",
+    icon: "clarity_blocks",
+  },
+  {
+    name: "Tracks",
+    href: "/",
+    icon: "vector",
+  },
+  {
+    name: "Community",
+    href: "/",
+    icon: "dd_logo",
+  },
+];
+
+const Fundamentals: FC = () => {
+  const trackCards = Array.from({ length: 10 }).map(() => ({
+    imgSrc: "/eth_fam.png",
+  }));
+
+  return (
+    <div className="flex h-screen w-full flex-col bg-black lg:flex-row">
+      <div className="flex h-full min-h-screen flex-1 flex-col items-center justify-between bg-[url('/fundamental-bg.jpeg')] bg-cover bg-no-repeat object-center lg:fixed lg:inset-y-0 lg:w-1/2">
+        <div className="mt-10">
+          <TopBar menus={sampleMenus} />
+        </div>
+        <div>
+          <h2 className="text-bttf text-5xl text-white">Fundamentals</h2>
+        </div>
+        <div>
+          <p className="text-3xl font-bold text-white">Nail the basics and then take on a track.</p>
+        </div>
+        <div />
+      </div>
+      <div className="lg:fixed lg:right-0 lg:top-0 lg:h-screen lg:w-1/2">
+        <div className="flex max-h-screen w-full flex-1 flex-col space-y-10 overflow-y-scroll bg-black px-8">
+          <div className="mt-10 flex h-fit w-full justify-end">
+            <ConnectButton />
+          </div>
+          <div className="flex w-full justify-center px-8">
+            <div className="grid w-fit grid-cols-1 justify-center gap-x-10 gap-y-8 pb-8 xl:grid-cols-2">
+              {trackCards.map((trackCard, index) => (
+                <TrackCard key={index} imgSrc={trackCard.imgSrc} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Fundamentals;
diff --git a/apps/academy/src/styles.css b/apps/academy/src/styles.css
@@ -2,8 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: "BTTF";
+  font-style: normal;
+  src: url("./font/BTTF.ttf") format("truetype");
+  font-display: swap;
+}
+
+@layer base {
+  :root {
+    --font-future: "BTTF", "Poppins", sans;
+  }
+}
+
 .text-bttf {
-  @apply text-center text-lg leading-[91%] tracking-[1px] transition-colors;
+  @apply text-center leading-[91%] tracking-[1px] transition-colors;
   font-family: var(--font-future);
 }