Merge pull request #289 from Developer-DAO/staging

Staging to Main: Homepage REVAMP

apps/academy/src/components/Header.tsx

@@ -23,6 +23,11 @@ const topbarNavMenus: NavItem[] = [
     href: "/tracks",
     icon: "vector",
   },
+  {
+    name: "Posts",
+    href: "https://blog.developerdao.com/",
+    icon: "states",
+  },
   {
     name: "Community",
     href: "https://handbook.developerdao.com/",
@@ -36,19 +41,17 @@ const PageHeader: FunctionComponent = () => {
   const { pathname } = router;
 
   return (
-    <header className="app-container absolute left-0 right-0 top-0 z-50 flex items-start justify-between px-8 pt-8 md:flex-row">
-      <div className="hidden lg:flex ">
+    <header
+      className="absolute top-2 z-40 flex w-full items-center justify-between bg-transparent  px-[15px]
+     pt-[30px] md:px-[30px]  md:pt-[20px]"
+    >
+      <div className="z-50  hidden lg:flex">
         {pathname === "/" || pathname === "/tracks" || pathname === "/fundamentals" ? (
-          <div className="nav-division flex flex-col gap-y-6">
-            <div className="flex justify-between">
-              <Link href="/">
-                <Image src="/academy_logo.svg" width={150} height={40} alt="Academy Logo" />
-              </Link>
-              {/* <ThemeToggleButton hidden={isConnected} /> */}
-            </div>
-            <div className="mx-auto">
-              <TopBar menus={topbarNavMenus} />
-            </div>
+          <div className="flex justify-between">
+            <Link href="/">
+              <Image src="/academy_logo.svg" width={150} height={40} alt="Academy Logo" />
+            </Link>
+            {/* <ThemeToggleButton hidden={isConnected} /> */}
           </div>
         ) : (
           <div className="flex items-center justify-around gap-36 text-white lg:flex lg:justify-between lg:gap-5 lg:self-stretch">
@@ -58,20 +61,27 @@ const PageHeader: FunctionComponent = () => {
           </div>
         )}
       </div>
-      {pathname === "/" || pathname === "/tracks" || pathname === "/fundamentals" ? (
-        <div className="inline-flex gap-2">
-          {/* <ThemeToggleButton hidden={pathname !== "/" && isConnected ? false : true} /> */}
-          <ConnectButton />
-        </div>
-      ) : (
-        <>
-          <BackButton className="lg:hidden" />
-          <div className="hidden gap-2 lg:inline-flex">
+
+      <div className={` hidden md:block`}>
+        <TopBar menus={topbarNavMenus} pathName={pathname} />
+      </div>
+
+      <div>
+        {pathname === "/" || pathname === "/tracks" || pathname === "/fundamentals" ? (
+          <div className="inline-flex gap-2">
             {/* <ThemeToggleButton hidden={pathname !== "/" && isConnected ? false : true} /> */}
             <ConnectButton />
           </div>
-        </>
-      )}
+        ) : (
+          <>
+            <BackButton className="lg:hidden" />
+            <div className="hidden gap-2 lg:inline-flex">
+              {/* <ThemeToggleButton hidden={pathname !== "/" && isConnected ? false : true} /> */}
+              <ConnectButton />
+            </div>
+          </>
+        )}
+      </div>
       <div className="flex lg:hidden">
         {pathname === "/" || pathname === "/tracks" || pathname === "/fundamentals" ? (
           <SideBar

apps/academy/src/components/Layout.tsx

@@ -1,5 +1,5 @@
 import localFont from "next/font/local";
-import { useRouter } from "next/router";
+// import { useRouter } from "next/router";
 // import { useSession } from "next-auth/react";
 import type { FunctionComponent, PropsWithChildren } from "react";
 import { Footer } from "ui";
@@ -25,8 +25,8 @@ const andale = localFont({
 const fontVars = `${bttf.variable} ${deathstar.variable} ${andale.variable}`;
 
 export const Layout: FunctionComponent<PropsWithChildren> = ({ children }) => {
-  const router = useRouter();
-  const { pathname } = router;
+  // const router = useRouter();
+  // const { pathname } = router;
   // const [requestEmail, setRequestEmail] = useState(false);
   // const [emailAlreadySent, setEmailAlreadySent] = useState(false);
 
@@ -94,7 +94,7 @@ export const Layout: FunctionComponent<PropsWithChildren> = ({ children }) => {
       ) : null} */}
       <Header />
       <main className={fontVars}>{children}</main>
-      {pathname !== "/tracks" && pathname !== "/fundamentals" ? <Footer /> : null}
+      <Footer />
     </>
   );
 };

apps/academy/src/pages/_app.tsx

@@ -130,7 +130,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout<{ session: Session |
                 <AppContextProvider>
                   <Layout>
                     {getLayout(<Component {...pageProps} />)}
-                    <Analytics mode={"production"} />;
+                    <Analytics mode={"production"} />
                   </Layout>
                   <Toaster />
                 </AppContextProvider>

apps/academy/src/pages/index.tsx

@@ -1,57 +1,68 @@
+import Image from "next/image";
 import Link from "next/link";
 import type { ReactElement } from "react";
 import { Icons, LearnWeb3Banner, PartnerBanner } from "ui";
 
+//  LearnWeb3Banner, PartnerBanner
 import PageSeoLayout from "@/components/PageSeoLayout";
 import type { NextPageWithLayout } from "@/pages/_app";
 
 const Home: NextPageWithLayout = () => {
   return (
     <>
-      <section className="academy-grid app-container">
-        <div className="academy-grid-col-1">
-          <div className="hidden justify-center md:flex">
-            <div className="text-bttf-lg">
-              <h1>
-                Learn
-                <br />
-                web3__
-                <br />
-                with
-                <br />
-                friends
-              </h1>
+      {/* Background with Overlay */}
+      <div className="relative overflow-hidden bg-[url('/bg_home.png')] bg-cover bg-center bg-no-repeat">
+        {/* Overlay */}
+        <div className="absolute inset-0 z-10 w-screen bg-black opacity-50"></div>
+
+        {/* Hero Section */}
+        <div className="relative z-20 pt-[150px] md:pb-[118px] md:pt-[330px]">
+          <div className="flex flex-col items-center justify-center text-white">
+            <h1 className="text-bttf text-center text-5xl text-[50px] tracking-wide lg:text-[100px]">
+              <span className="md:ml-[50px]">LEArn</span>
+              <br />
+              <span>WEB3__</span>
+              <br />
+              <span className="md:mr-[50px]">WITH</span>
+              <br />
+              <span className="relative flex items-baseline justify-end gap-x-2 md:ml-[20px]">
+                FRIENDS
+                <span className=" -right-20 bottom-0 ml-2 h-[25px] w-[25px] overflow-hidden rounded-full md:absolute md:ml-5 md:h-[50px] md:w-[50px]">
+                  <Image alt="devIcon" src={"/dd_nft2.png"} width={500} height={500} />
+                </span>
+              </span>
+            </h1>
+
+            <div className="mb-[7px] mt-[87px] flex flex-col items-center justify-center md:mb-0 md:mt-[50px]">
+              <div className="max-w-[495px] px-10 text-center text-lg font-light md:px-0 md:text-2xl">
+                <p>Become a web3 developer with DeveloperDAO.</p>
+              </div>
+              <div className="hidden w-full items-center justify-center md:mt-[20px] md:flex">
+                <Link href="/#learn-web3" className="hover:cursor-pointer">
+                  <Icons.scroll className="h-16 w-16" />
+                </Link>
+              </div>
             </div>
           </div>
-          <div className="description max-w-[495px]">
-            <p>Become a web3 developer with Developer DAO.</p>
-          </div>
-          <div className="hidden w-full items-center justify-center md:flex">
-            <Link href="/#learn-web3" className="hover:cursor-pointer">
-              <Icons.scroll className="h-16 w-16" />
-            </Link>
-          </div>
         </div>
-        <div className="dd-nft">
-          <div className="flex h-full items-end justify-center md:hidden">
-            <div className="text-bttf-lg">
-              <h1>learn</h1>
-              <h1>web3__</h1>
-              <h1>with</h1>
-              <h1>friends</h1>
+
+        {/* Banner Section */}
+        <div className="relative z-20 flex flex-col items-center justify-center pb-[400px]">
+          <div className="m-5 md:p-0">
+            <div id="learn-web3" className="lg:pt-16">
+              <LearnWeb3Banner href="/tracks" />
+            </div>
+          </div>
+          <div className="m-5 md:p-0">
+            <div id="partners" className="pb-4 pt-16">
+              <PartnerBanner
+                href="https://airtable.com/appDMMIARfSeiovpk/shrZExypPetXEx6Ox"
+                imgSrc="/dd_logo.svg"
+              />
             </div>
           </div>
         </div>
-      </section>
-      <section id="learn-web3" className="main-container lg:pt-16">
-        <LearnWeb3Banner href="/tracks" />
-      </section>
-      <section id="partners" className="main-container pb-4 pt-16">
-        <PartnerBanner
-          href="https://airtable.com/appDMMIARfSeiovpk/shrZExypPetXEx6Ox"
-          imgSrc="/dd_logo.svg"
-        />
-      </section>
+      </div>
     </>
   );
 };

apps/academy/src/pages/tracks/arweave-101/index.tsx

@@ -21,7 +21,7 @@ const Arweave101TrackPage = () => {
   );
 
   return (
-    <div className="relative m-10 flex lg:mx-auto lg:max-w-screen-lg">
+    <div className="relative  flex p-10 lg:mx-auto lg:max-w-screen-lg">
       <TracksLayout
         trackTitle="Arweave 101: Building Apps on Arweave"
         trackDescription="Go from 0 to building on Arweave. Learn what Arweave is, how to access and store data on Arweave, and how to build permaweb apps and deploy them to Arweave."

apps/academy/src/pages/tracks/arweave-201/index.tsx

@@ -21,7 +21,7 @@ const Arweave101TrackPage = () => {
   );
 
   return (
-    <div className="relative m-10 flex lg:mx-auto lg:max-w-screen-lg">
+    <div className="relative flex p-10 lg:mx-auto lg:max-w-screen-lg">
       <TracksLayout
         trackTitle="Gateway Hosting"
         trackDescription="Understanding Gateways on Arweave and how to use them to read and write permanent data. We'll start by deploying a gateway locally for development, then to the cloud for production and finally to a decentralised infrastructure provider"

apps/academy/src/pages/tracks/erc-20-solidity/index.tsx

@@ -21,7 +21,7 @@ const Erc20SolidityTrackPage = () => {
   );
 
   return (
-    <div className="relative m-10 flex lg:mx-auto lg:max-w-screen-lg">
+    <div className="relative flex p-10 lg:mx-auto lg:max-w-screen-lg">
       <TracksLayout
         trackTitle="Build a Fungible Token"
         trackDescription="Learn to create ERC-20 tokens using Foundry, progressing from the basics to advanced customisation. We will be exploring, testing, real-world applications, security practices, and the role of tokens in decentralised ecosystems. From DeFi to DAO's and everything in between, thanks to its simplicity, but versatility, the ERC-20 is going nowhere. Start with Solidity, or dive directly into token creation — empowering you to contribute to blockchain projects."

apps/academy/src/pages/tracks/index.tsx

@@ -14,7 +14,7 @@ const TracksPage: NextPage & { getLayout?: (page: ReactElement) => ReactElement
     <div className="flex h-full w-full flex-col space-y-10 overflow-hidden bg-black lg:h-screen lg:max-h-screen lg:flex-row">
       <div
         className="flex h-full min-h-screen flex-1 flex-col items-center justify-between overflow-hidden 
-bg-[url('/bg_tracks.png')] bg-cover bg-no-repeat object-center pt-[300px]  lg:fixed lg:inset-y-0 lg:h-screen lg:w-1/2"
+bg-[url('/bg_tracks.png')] bg-cover bg-center bg-no-repeat object-center pt-[300px]  lg:fixed lg:inset-y-0 lg:h-screen lg:w-1/2"
       >
         <div>
           <h2 className="text-bttf text-5xl text-white lg:text-8xl">Tracks</h2>

apps/academy/src/pages/tracks/intro-to-ethereum/index.tsx

@@ -21,7 +21,7 @@ const IntroToEthereumTrackPage = () => {
   );
 
   return (
-    <div className="relative m-10 flex lg:mx-auto lg:max-w-screen-lg">
+    <div className="relative flex p-10 lg:mx-auto lg:max-w-screen-lg">
       <TracksLayout
         trackTitle="A Developer's Guide to Ethereum"
         trackDescription="An accessible introduction to Ethereum via web3.py and Python. Grasp blockchain basics, Ethereum's decentralization, and smart contracts with practical insights. Code included for hands-on learning, but no programming expertise required."

apps/academy/src/pages/tracks/nft-solidity/index.tsx

@@ -22,7 +22,7 @@ const NftSolidityTrackPage = () => {
     );
 
   return (
-    <div className="relative m-10 flex lg:mx-auto lg:max-w-screen-lg">
+    <div className="relative flex p-10 lg:mx-auto lg:max-w-screen-lg">
       <TracksLayout
         trackTitle="Build a Tiered NFT"
         trackDescription="This ERC-721 NFT track will take you from complete beginner to building a series of meaningful, real-world, NFT projects. You'll enhance your skills along the way by using test-driven development to gain confidence that your smart contracts are safe to deploy to a live blockchain. And finally you'll be creating a tasteful front-end interface so your users can mint your ERC-721 tokens in their desired tier. All in all, a rewarding coding journey."

apps/academy/src/pages/tracks/oracles-api3/index.tsx

@@ -21,7 +21,7 @@ const OraclesApi3TrackPage = () => {
   );
 
   return (
-    <div className="relative m-10 flex lg:mx-auto lg:max-w-screen-lg">
+    <div className="relative flex p-10 lg:mx-auto lg:max-w-screen-lg">
       <TracksLayout
         trackTitle="Learn How API3 Brings Data Onchain in Web3"
         trackDescription="Using API3 technology to solve blockchain problems with oracles."

apps/academy/src/pages/tracks/web3-python/index.tsx

@@ -21,7 +21,7 @@ const Web3PythonTrackPage = () => {
   );
 
   return (
-    <div className="relative m-10 flex lg:mx-auto lg:max-w-screen-lg">
+    <div className="relative flex p-10 lg:mx-auto lg:max-w-screen-lg">
       <TracksLayout
         trackTitle="Python Smart Contract Development for Beginniners"
         trackDescription="Prefer Python? This track offers a deep dive into Vyper contract development and complementary tools, including Ape, and web3.py."

apps/academy/src/styles.css

@@ -1,5 +1,27 @@
 @import "ui/styles.css";
 
+/* Apply the background to the entire page */
+
+html {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  overflow-x: hidden; /* Prevent horizontal scroll */
+}
+
+body {
+  margin: 0; /* Remove default margin */
+  padding: 0;
+  min-height: 100vh;
+  width: 100%;
+  /* background-image: url("/bg_home.png"); */
+  /* background-size: cover; Ensure the image covers the entire page */
+  /* background-position: center; Center the image */
+  /* background-repeat: no-repeat; Prevent the image from repeating */
+  position: relative; /* Ensure child elements are positioned relative to body */
+  overflow-x: hidden;
+}
+
 .text-bttf {
   @apply leading-[91%] tracking-[1px] transition-colors;
   font-family: var(--font-future);
@@ -8,6 +30,7 @@
 .academy-grid {
   @apply flex flex-col-reverse text-white md:flex-row;
 }
+
 .academy-grid .academy-grid-col-1 {
   @apply mb-[50px] mt-[50px] flex h-auto max-h-[1024px] w-full flex-col justify-center space-y-8 px-[38px] md:mb-0 md:h-screen md:w-1/2 lg:mt-20;
 }
@@ -34,11 +57,8 @@
 }
 
 .dd-nft {
-  @apply h-screen max-h-[547px] w-full  md:max-h-[1024px] md:w-1/2;
-  background:
-    linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-    url("/bg_home.png"),
-    var(--academy-bg-dark) -406.375px -146px / 219.132% 181.543% no-repeat;
+  @apply h-screen max-h-[547px] w-full md:max-h-[1024px] md:w-1/2;
+  background: var(--academy-bg-dark) -406.375px -146px / 219.132% 181.543% no-repeat;
   box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.25);
   background-repeat: no-repeat;
   background-size: cover;