diff --git a/apps/academy/public/D_Dfooter.png b/apps/academy/public/D_Dfooter.png
new file mode 100644
index 00000000..f0797bc4
Binary files /dev/null and b/apps/academy/public/D_Dfooter.png differ
diff --git a/apps/academy/public/bg_home.png b/apps/academy/public/bg_home.png
index cbf41def..492e6e07 100644
Binary files a/apps/academy/public/bg_home.png and b/apps/academy/public/bg_home.png differ
diff --git a/apps/academy/public/carbon_blog.svg b/apps/academy/public/carbon_blog.svg
new file mode 100644
index 00000000..b6832cca
--- /dev/null
+++ b/apps/academy/public/carbon_blog.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 18H10.5V19.5H3V18ZM3 13.5H10.5V15H3V13.5ZM19.5 10.5H4.5C4.10218 10.5 3.72064 10.342 3.43934 10.0607C3.15804 9.77936 3 9.39782 3 9V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H19.5C19.8978 3 20.2794 3.15804 20.5607 3.43934C20.842 3.72064 21 4.10218 21 4.5V9C21 9.39782 20.842 9.77936 20.5607 10.0607C20.2794 10.342 19.8978 10.5 19.5 10.5ZM4.5 4.5V9H19.5V4.5H4.5ZM19.5 21H15C14.6022 21 14.2206 20.842 13.9393 20.5607C13.658 20.2794 13.5 19.8978 13.5 19.5V15C13.5 14.6022 13.658 14.2206 13.9393 13.9393C14.2206 13.658 14.6022 13.5 15 13.5H19.5C19.8978 13.5 20.2794 13.658 20.5607 13.9393C20.842 14.2206 21 14.6022 21 15V19.5C21 19.8978 20.842 20.2794 20.5607 20.5607C20.2794 20.842 19.8978 21 19.5 21ZM15 15V19.5H19.5V15H15Z" fill="white"/>
+</svg>
diff --git a/apps/academy/public/dd_nft.png b/apps/academy/public/dd_nft.png
new file mode 100644
index 00000000..a7212210
Binary files /dev/null and b/apps/academy/public/dd_nft.png differ
diff --git a/apps/academy/public/dd_nft2.png b/apps/academy/public/dd_nft2.png
new file mode 100644
index 00000000..a8df4447
Binary files /dev/null and b/apps/academy/public/dd_nft2.png differ
diff --git a/apps/academy/public/home_bg.png b/apps/academy/public/home_bg.png
new file mode 100644
index 00000000..eeca7a84
Binary files /dev/null and b/apps/academy/public/home_bg.png differ
diff --git a/apps/academy/public/image_home_bg.png b/apps/academy/public/image_home_bg.png
new file mode 100644
index 00000000..e7392733
Binary files /dev/null and b/apps/academy/public/image_home_bg.png differ
diff --git a/apps/academy/src/components/Header.tsx b/apps/academy/src/components/Header.tsx
index d497609a..81369f4d 100644
--- a/apps/academy/src/components/Header.tsx
+++ b/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
diff --git a/apps/academy/src/components/Layout.tsx b/apps/academy/src/components/Layout.tsx
index 9fe594f6..f3b42458 100644
--- a/apps/academy/src/components/Layout.tsx
+++ b/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 />
</>
);
};
diff --git a/apps/academy/src/pages/_app.tsx b/apps/academy/src/pages/_app.tsx
index 2b46bddd..a769c48a 100644
--- a/apps/academy/src/pages/_app.tsx
+++ b/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>
diff --git a/apps/academy/src/pages/index.tsx b/apps/academy/src/pages/index.tsx
index 98299cff..e89445e3 100644
--- a/apps/academy/src/pages/index.tsx
+++ b/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>
</>
);
};
diff --git a/apps/academy/src/pages/tracks/arweave-101/index.tsx b/apps/academy/src/pages/tracks/arweave-101/index.tsx
index c05a0d77..af109545 100644
--- a/apps/academy/src/pages/tracks/arweave-101/index.tsx
+++ b/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."
diff --git a/apps/academy/src/pages/tracks/arweave-201/index.tsx b/apps/academy/src/pages/tracks/arweave-201/index.tsx
index a3d287e0..752e1383 100644
--- a/apps/academy/src/pages/tracks/arweave-201/index.tsx
+++ b/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"
diff --git a/apps/academy/src/pages/tracks/erc-20-solidity/index.tsx b/apps/academy/src/pages/tracks/erc-20-solidity/index.tsx
index 0695ae15..672535f2 100644
--- a/apps/academy/src/pages/tracks/erc-20-solidity/index.tsx
+++ b/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."
diff --git a/apps/academy/src/pages/tracks/index.tsx b/apps/academy/src/pages/tracks/index.tsx
index 1ba0d512..6b49138d 100644
--- a/apps/academy/src/pages/tracks/index.tsx
+++ b/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>
diff --git a/apps/academy/src/pages/tracks/intro-to-ethereum/index.tsx b/apps/academy/src/pages/tracks/intro-to-ethereum/index.tsx
index 0fc3bcd2..599cf26a 100644
--- a/apps/academy/src/pages/tracks/intro-to-ethereum/index.tsx
+++ b/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."
diff --git a/apps/academy/src/pages/tracks/nft-solidity/index.tsx b/apps/academy/src/pages/tracks/nft-solidity/index.tsx
index 55c9fee1..0fd7db67 100644
--- a/apps/academy/src/pages/tracks/nft-solidity/index.tsx
+++ b/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."
diff --git a/apps/academy/src/pages/tracks/oracles-api3/index.tsx b/apps/academy/src/pages/tracks/oracles-api3/index.tsx
index 5f6e4534..8458e42f 100644
--- a/apps/academy/src/pages/tracks/oracles-api3/index.tsx
+++ b/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."
diff --git a/apps/academy/src/pages/tracks/web3-python/index.tsx b/apps/academy/src/pages/tracks/web3-python/index.tsx
index 5b859bda..b9c33564 100644
--- a/apps/academy/src/pages/tracks/web3-python/index.tsx
+++ b/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."
diff --git a/apps/academy/src/styles.css b/apps/academy/src/styles.css
index 117c4d6d..cafb6823 100644
--- a/apps/academy/src/styles.css
+++ b/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;
diff --git a/home_bg.png b/home_bg.png
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/ui/src/components/Banners/LearnWeb3Banner.tsx b/packages/ui/src/components/Banners/LearnWeb3Banner.tsx
index 31ad5c87..46f122d2 100644
--- a/packages/ui/src/components/Banners/LearnWeb3Banner.tsx
+++ b/packages/ui/src/components/Banners/LearnWeb3Banner.tsx
@@ -10,119 +10,129 @@ export interface HomePageBannerProps {
export const LearnWeb3Banner: FC<HomePageBannerProps> = ({ href }) => {
return (
- <Card className="banner flex-col lg:flex-row">
- <div className="terminal-text">
- <div className="line">
- <div>1</div>
- <div className="text-white">
- <p>
- <span className="text-[#F97583]">function submitVote</span>(
- </p>
- <p>
- <span className="text-[#FF39F7]">
- uint256 <span className="text-[#e65a9e]">proposalIndex</span>{" "}
- </span>
- ,
- </p>
- <p>
- <span className="text-[#FF39F7]">
- uint8 <span className="text-[#e65a9e]">uintVote</span>
- </span>
- </p>
+ <div className=" banner flex-col !border-none !bg-opacity-20 !bg-gradient-to-tr from-stone-700 from-10% via-black via-60% to-[#727171] to-90% !p-[2px] lg:flex-row">
+ <Card className=" banner !bg-opacity-85 flex-col !border-none !bg-black lg:flex-row">
+ <div className=" z-20 items-center justify-center md:flex md:w-[78rem]">
+ <div className="terminal-text text-[10px] md:py-[25px] md:pr-[80px] md:text-[15px]">
+ <div className="line">
+ <div>1</div>
+ <div className="text-white">
+ <p>
+ <span className="text-[#F97583]">function submitVote</span>(
+ </p>
+ <p>
+ <span className="text-[#FF39F7]">
+ uint256 <span className="text-[#e65a9e]">proposalIndex</span>{" "}
+ </span>
+ ,
+ </p>
+ <p>
+ <span className="text-[#FF39F7]">
+ uint8 <span className="text-[#e65a9e]">uintVote</span>
+ </span>
+ </p>
+ </div>
+ </div>
+ <div className="line">
+ <div>2</div>
+ <div className="text-white">
+ <p>
+ )
+ <span className="text-[#F97583]">
+ public <span className="text-[#BE2D61]">nonReentrant onlyDelegate</span>
+ </span>
+ {
+ </p>
+ </div>
+ </div>
+ <div className="line">
+ <div>3</div>
+ <div className="text-white">
+ <p className="pl-6">
+ <span className="text-[#FF39F7]">address </span>
+ <span className="text-[#e65a9e]">member Address</span> =
+ </p>
+ <p className="pl-12">
+ memberAddress[<span className="text-[#79B8FF]">msg</span>.sender];
+ </p>
+ </div>
+ </div>
+ <div className="line">
+ <div>4</div>
+ <div>
+ <p className="pl-6 text-white md:whitespace-nowrap">
+ <span className="text-[#FF39F7]">Member </span>
+ <span className="text-[#e65a9e]">storage member</span> = members[memberAddress];
+ </p>
+ </div>
+ </div>
+ <div className="line">
+ <div>5</div>
+ <div className="text-white">
+ <p className="pl-6">
+ <span className="text-[#F97583]">require</span>
+ (proposalIndex <span className="text-[#F97583]">< </span>
+ proposalQueue.length,
+ </p>
+ <p className="pl-12">
+ <span className="text-[#9ECBFF]">"proposal does not exist"</span>);
+ </p>
+ </div>
+ </div>
+ <div className="line">
+ <div>6</div>
+ <div className="text-white">
+ <p className="pl-6">
+ <span className="text-[#FF39F7]">Proposal </span>
+ <span className="text-[#e65a9e]">storage proposal</span> =
+ </p>
+ <p className="pl-12">proposals[proposalQueue[ proposalIndex ]];</p>
+ </div>
+ </div>
+ <div className="line">
+ <div>7</div>
+ <div className="text-white md:whitespace-nowrap">
+ <p className="pl-6">
+ <span className="text-[#F97583]">require</span>
+ (uintVote <span className="text-[#F97583]">< </span>
+ <span className="text-[#9ECBFF]">3, "must be less than 3"</span>);
+ </p>
+ </div>
+ </div>
+ <div className="line">
+ <div>8</div>
+ <div>
+ <p className="pl-6 text-white">
+ <span className="text-[#FF39F7]">Vote </span>
+ <span className="text-[#e65a9e]">vote</span> =
+ <span className="text-[#B392F0]">Vote</span>(uintVote);
+ </p>
+ <p className="pl-3 text-white">...</p>
+ </div>
+ </div>
</div>
- </div>
- <div className="line">
- <div>2</div>
- <div className="text-white">
- <p>
- )
- <span className="text-[#F97583]">
- public <span className="text-[#BE2D61]">nonReentrant onlyDelegate</span>
- </span>
- {
- </p>
- </div>
- </div>
- <div className="line">
- <div>3</div>
- <div className="text-white">
- <p className="pl-6">
- <span className="text-[#FF39F7]">address </span>
- <span className="text-[#e65a9e]">member Address</span> =
- </p>
- <p className="pl-12">
- memberAddress[<span className="text-[#79B8FF]">msg</span>.sender];
- </p>
- </div>
- </div>
- <div className="line">
- <div>4</div>
- <div>
- <p className="pl-6 text-white md:whitespace-nowrap">
- <span className="text-[#FF39F7]">Member </span>
- <span className="text-[#e65a9e]">storage member</span> = members[memberAddress];
- </p>
- </div>
- </div>
- <div className="line">
- <div>5</div>
- <div className="text-white">
- <p className="pl-6">
- <span className="text-[#F97583]">require</span>
- (proposalIndex <span className="text-[#F97583]">< </span>
- proposalQueue.length,
- </p>
- <p className="pl-12">
- <span className="text-[#9ECBFF]">"proposal does not exist"</span>);
- </p>
+ <div className="p-10">
+ <CardHeader className="flex-row justify-center">
+ <CardTitle className="title">LEARN WEB3</CardTitle>
+ </CardHeader>
+ <CardContent className=" p-1 pb-12 text-center text-sm font-light text-white md:mb-[40px] md:pb-1 md:text-[17px]">
+ <p>
+ DeveloperDAO offers learning <br /> resources to help you build with web3 <br />
+ technologies.
+ </p>
+ </CardContent>
+ <div className="flex justify-center">
+ <Button
+ asChild
+ className="button-rounded text-black hover:bg-[#721F79] hover:text-white"
+ >
+ <NextLink href={href}>get started!</NextLink>
+ </Button>
+ </div>
</div>
</div>
- <div className="line">
- <div>6</div>
- <div className="text-white">
- <p className="pl-6">
- <span className="text-[#FF39F7]">Proposal </span>
- <span className="text-[#e65a9e]">storage proposal</span> =
- </p>
- <p className="pl-12">proposals[proposalQueue[ proposalIndex ]];</p>
- </div>
- </div>
- <div className="line">
- <div>7</div>
- <div className="text-white md:whitespace-nowrap">
- <p className="pl-6">
- <span className="text-[#F97583]">require</span>
- (uintVote <span className="text-[#F97583]">< </span>
- <span className="text-[#9ECBFF]">3, "must be less than 3"</span>);
- </p>
- </div>
- </div>
- <div className="line">
- <div>8</div>
- <div>
- <p className="pl-6 text-white">
- <span className="text-[#FF39F7]">Vote </span>
- <span className="text-[#e65a9e]">vote</span> =
- <span className="text-[#B392F0]">Vote</span>(uintVote);
- </p>
- <p className="pl-3 text-white">...</p>
- </div>
- </div>
- </div>
- <div className="pb-8">
- <CardHeader className="flex-row justify-center">
- <CardTitle className="title">LEARN WEB3</CardTitle>
- </CardHeader>
- <CardContent className="description max-w-[552px] p-1 pb-12 md:pb-1">
- <p>Developer DAO offers learning resources to help you build with web3 technologies.</p>
- </CardContent>
- <div className="flex justify-center">
- <Button asChild className="button-rounded text-black hover:bg-[#721F79] hover:text-white">
- <NextLink href={href}>get started!</NextLink>
- </Button>
- </div>
- </div>
- </Card>
+ </Card>
+ </div>
);
};
diff --git a/packages/ui/src/components/Banners/PartnerBanner.tsx b/packages/ui/src/components/Banners/PartnerBanner.tsx
index b062fdb0..799de5b0 100644
--- a/packages/ui/src/components/Banners/PartnerBanner.tsx
+++ b/packages/ui/src/components/Banners/PartnerBanner.tsx
@@ -11,55 +11,64 @@ export interface PartnerBannerProps extends HomePageBannerProps {
export const PartnerBanner: FC<PartnerBannerProps> = ({ href, imgSrc }) => {
return (
- <Card className="banner flex-col-reverse lg:flex-row">
- <div className="mb-8">
- <CardHeader className="flex-row justify-center">
- <CardTitle className="title">Partner with D_D Academy</CardTitle>
- </CardHeader>
- <CardContent className="description max-w-2xl p-1 pb-12 md:pb-1">
- <p>
- Developer DAO is a community of builders creating a better internet. Help us educate the
- next generation.
- </p>
- </CardContent>
- <div className=" flex justify-center">
- <Button asChild className="button-rounded text-black hover:bg-[#721F79] hover:text-white">
- <a href={href} target="_blank">
- reach out!
- </a>
- </Button>
- </div>
- </div>
- <div className="mx-8 mt-8 max-w-sm md:m-auto">
- <div className="flex flex-col items-center md:flex-row">
- <Image
- src={imgSrc}
- width={100}
- height={100}
- alt="partner"
- className="mb-4 h-[100px] w-[94px] rounded-full lg:mr-[50px]"
- />
- <div className="separator mb-4" />
- <div className="flex flex-wrap items-center justify-center gap-6">
- {[
- "/partners/pokt.png",
- "/partners/zerion.png",
- "/partners/api3-logo.png",
- "/partners/scroll.png",
- ].map((logoPath, i) => (
+ <div className=" banner !border-none !bg-opacity-20 !bg-gradient-to-tr from-stone-700 from-10% via-black via-60% to-[#727171] to-90% !p-[2px] md:flex-col lg:flex-row">
+ <Card className=" banner !bg-opacity-85 !md:flex-col !border-none !bg-black lg:flex-row">
+ <div className=" flex flex-col-reverse items-center justify-center md:w-[78rem] md:flex-row">
+ <div className="mb-8 md:mb-0 md:py-[25px] md:pl-[30px] md:pr-[200px]">
+ <CardHeader className="flex-row justify-center">
+ <CardTitle className="title !md:text-[40px] !text-[35.2px]">
+ Partner with D_D Academy
+ </CardTitle>
+ </CardHeader>
+ <CardContent className=" p-1 pb-12 text-center text-[13px] font-light text-white md:mb-[40px] md:pb-1 md:text-[17px]">
+ <p>
+ DeveloperDAO is a community of thousands of web3 <br /> builders creating a better
+ internet. Join us and help <br /> educate the next generation of developers.
+ </p>
+ </CardContent>
+ <div className=" flex justify-center">
+ <Button
+ asChild
+ className="button-rounded text-black hover:bg-[#721F79] hover:text-white"
+ >
+ <a href={href} target="_blank">
+ reach out!
+ </a>
+ </Button>
+ </div>
+ </div>
+ <div className="felx-col my-8 flex items-center justify-center md:m-auto md:my-0 md:ml-8 md:mr-4 md:mt-8">
+ <div className="flex flex-col items-center">
<Image
- key={i}
- src={logoPath}
- width={175}
- height={25}
+ src={imgSrc}
+ width={100}
+ height={100}
alt="partner"
- className={`${i === 2 ? "max-h-16" : "max-h-10"} w-auto ${i === 0 ? "mb-4" : ""}`}
+ className="mb-4 h-[70px] w-[64px] rounded-full md:mb-[60px] md:ml-[45px] md:h-[90px] md:w-[84px] lg:mr-[50px]"
/>
- ))}
+ <div className=" mb-4 h-[1px] w-full border border-gray-700" />
+ <div className="my-5 flex flex-wrap items-center justify-center gap-6 md:my-0">
+ {[
+ "/partners/pokt.png",
+ "/partners/zerion.png",
+ "/partners/api3-logo.png",
+ // "/partners/scroll.png",
+ ].map((logoPath, i) => (
+ <Image
+ key={i}
+ src={logoPath}
+ width={175}
+ height={25}
+ alt="partner"
+ className={` ${i === 2 ? "max-h-10" : "max-h-5 md:max-h-7"} w-auto `}
+ />
+ ))}
+ </div>
+ </div>
</div>
</div>
- </div>
- </Card>
+ </Card>
+ </div>
);
};
diff --git a/packages/ui/src/components/Cards/TrackCard.tsx b/packages/ui/src/components/Cards/TrackCard.tsx
index 159c4d08..35b55503 100644
--- a/packages/ui/src/components/Cards/TrackCard.tsx
+++ b/packages/ui/src/components/Cards/TrackCard.tsx
@@ -16,35 +16,37 @@ export interface TrackCardProps {
const TrackCard: FC<TrackCardProps> = ({ imgSrc, tags, title, description }) => {
return (
- <Card className="track">
- <Image
- src={imgSrc}
- alt="eth_family"
- width={20}
- height={20}
- className="h-40 w-full rounded-t-[51px] bg-no-repeat object-cover px-1 pt-1"
- unoptimized
- />
- <div className="mt-3 flex w-full gap-x-2 px-4 text-base">
- {tags.map((tag, i) => (
- <Badge
- key={i}
- className={`${
- i === 0
- ? "gray-badge bg-[#155D61] hover:bg-[#155D6180]"
- : "gray-badge bg-[var(--academy-dark)]"
- }`}
- >
- {tag}
- </Badge>
- ))}
- </div>
- <CardHeader className="space-y-4 pb-10">
- <CardTitle className="title">{title}</CardTitle>
- <CardDescription className="description">{description}</CardDescription>
- </CardHeader>
- <Separator className="opacity-10" />
- </Card>
+ <div className="track !border-none !bg-opacity-20 !bg-gradient-to-tr from-stone-700 from-10% via-black via-60% to-[#727171] to-90% p-[1.5px]">
+ <Card className="track !bg-black ">
+ <Image
+ src={imgSrc}
+ alt="eth_family"
+ width={20}
+ height={20}
+ className="h-40 w-full rounded-t-[51px] bg-no-repeat object-cover"
+ unoptimized
+ />
+ <div className="mt-3 flex w-full gap-x-2 px-4 text-base">
+ {tags.map((tag, i) => (
+ <Badge
+ key={i}
+ className={`${
+ i === 0
+ ? "gray-badge bg-[#155D61] hover:bg-[#155D6180]"
+ : "gray-badge bg-[var(--academy-dark)]"
+ }`}
+ >
+ {tag}
+ </Badge>
+ ))}
+ </div>
+ <CardHeader className="space-y-4 pb-10">
+ <CardTitle className="title">{title}</CardTitle>
+ <CardDescription className="description">{description}</CardDescription>
+ </CardHeader>
+ <Separator className="opacity-10" />
+ </Card>
+ </div>
);
};
diff --git a/packages/ui/src/components/Footer/Footer.tsx b/packages/ui/src/components/Footer/Footer.tsx
index 5a66f02d..02c5862e 100644
--- a/packages/ui/src/components/Footer/Footer.tsx
+++ b/packages/ui/src/components/Footer/Footer.tsx
@@ -1,5 +1,7 @@
+"use client";
import Image from "next/image";
import Link from "next/link";
+import { useRouter } from "next/router";
import { Icons } from "../Icons";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
@@ -53,101 +55,137 @@ const socials: readonly SocialLinks[] = [
];
export const Footer = () => {
+ const router = useRouter();
+ const { pathname } = router;
return (
- <footer className="main-container">
- <div className="footer">
- <nav aria-label="social" className="px-4">
- {socials.map((social) => {
- const Icon = Icons[social.icon];
- return (
- <TooltipProvider delayDuration={30} key={social.href}>
- <Tooltip>
- <TooltipTrigger>
- <a aria-label={social.alt} href={social.href} className="group" target="_blank">
- {Icon ? <Icon className="h-16 w-16 md:h-20 md:w-20" /> : null}
- </a>
- </TooltipTrigger>
- <TooltipContent>
- <p>{social.tooltipText}</p>
- </TooltipContent>
- </Tooltip>
- </TooltipProvider>
- );
- })}
- </nav>
- <nav aria-label="quick links" className="h-20 divide-x">
- {links.map((link) => (
- <TooltipProvider delayDuration={30} key={link.href}>
+ <footer
+ className={` ${
+ pathname === "/tracks" || pathname === "/fundamentals" ? "md:hidden" : "md:block"
+ } absolute ${
+ pathname === "/" ? "bottom-0" : "-bottom-[450px]"
+ } z-50 w-full px-[15px] pb-14 md:px-[30px]`}
+ >
+ <div className=" ">
+ {/* border */}
+ <div className=" mb-[20px] h-[1px] border border-gray-300 md:mx-[110px]" />
+ <div className="footer ">
+ <nav
+ aria-label="social"
+ className=" flex flex-col items-end justify-end md:mb-[1px] md:mr-[15px]"
+ >
+ <div className=" flex items-center justify-center gap-x-5">
+ {socials.map((social) => {
+ const Icon = Icons[social.icon];
+ return (
+ <TooltipProvider delayDuration={30} key={social.href}>
+ <Tooltip>
+ <TooltipTrigger>
+ <a
+ key={social.tooltipText}
+ aria-label={social.alt}
+ href={social.href}
+ className="group"
+ target="_blank"
+ >
+ {Icon ? <Icon className="h-[45px] w-[45px]" /> : null}
+ </a>
+ </TooltipTrigger>
+ <TooltipContent>
+ <p>{social.tooltipText}</p>
+ </TooltipContent>
+ </Tooltip>
+ </TooltipProvider>
+ );
+ })}
+ </div>
+ <div className=" mt-2 ">
+ <Image
+ className=" hidden md:block"
+ src={"/vercel_badge.png"}
+ alt={"powered by vercel"}
+ width={100}
+ height={100}
+ />
+ </div>
+ </nav>
+ <nav aria-label="quick links" className=" ml-[60px] md:mb-[25px] md:ml-0">
+ {links.map((link) => (
+ <div key={link.name}>
+ <TooltipProvider delayDuration={30} key={link.href}>
+ <Tooltip>
+ <TooltipTrigger className="flex flex-col !border-none text-center md:mt-[30px]">
+ <div key={link.name}>
+ <a href={link.href} className=" mr-5 md:mr-10 md:pb-5" target="_blank">
+ {link.name}
+ </a>
+ {/* Border */}
+ <div
+ className={`hidden opacity-30 md:-mt-[10px] md:mr-[25px] ${
+ link.name == "Newsletter" ? "h-0 w-0" : " w-[2px] md:h-[40px]"
+ } border-l`}
+ />
+ </div>
+ </TooltipTrigger>
+ <TooltipContent>
+ <p>{link.tooltipText}</p>
+ </TooltipContent>
+ </Tooltip>
+ </TooltipProvider>
+ </div>
+ ))}
+ </nav>
+
+ <div className="flex-col items-center justify-center gap-y-0 md:flex-row md:gap-y-6">
+ <TooltipProvider delayDuration={30}>
<Tooltip>
<TooltipTrigger>
- <a
- href={link.href}
- className="group inline-flex h-full items-center pl-4 md:pl-6"
- target="_blank"
- >
- {link.name}
+ <a href="https://www.developerdao.com/" target="_blank" className="flex">
+ <div className="">
+ <Image
+ src={"/D_Dfooter.png"}
+ alt={"Developer DAO"}
+ width={200}
+ height={80}
+ className="h-[80px] w-[80px] border-none p-3 md:mr-[5px] md:h-[90px] md:w-[90px]"
+ />
+ </div>
</a>
</TooltipTrigger>
<TooltipContent>
- <p>{link.tooltipText}</p>
+ <p>Developer DAO Website</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
- ))}
- </nav>
- <div className="flex-col gap-y-6 md:flex-row">
- <TooltipProvider delayDuration={30}>
- <Tooltip>
- <TooltipTrigger>
- <a
- href="https://www.developerdao.com/"
- target="_blank"
- className="flex border-b border-r-0 md:border-b-0 md:border-r"
+
+ {/* Border */}
+ <div className=" h-0 border-l md:mx-0 md:mr-[25px] md:h-[50px] md:w-[1px]" />
+
+ <div className="mb-3 flex-col items-center justify-center text-center text-[9px] font-light md:mb-0 md:items-start md:justify-start md:text-left md:text-[11px]">
+ <p>DeveloperDAO Foundation © 2023</p>
+ <p>
+ Website content licensed under
+ <Link href="https://creativecommons.org/licenses/by-nc/4.0/" className="underline">
+ CC BY-NC 4.0.
+ </Link>
+ </p>
+ <p>
+ Website code is licensed under
+ <Link
+ href="https://github.com/Developer-DAO/academy-turbo/blob/main/LICENSE"
+ className="underline"
>
- <div className="m-auto">
- <Image
- src={"/dd_logo_dark.png"}
- alt={"Developer DAO"}
- width={200}
- height={80}
- className="mb-4 h-20 w-32 p-4 md:mb-0"
- />
- </div>
- </a>
- </TooltipTrigger>
- <TooltipContent>
- <p>Developer DAO Website</p>
- </TooltipContent>
- </Tooltip>
- </TooltipProvider>
- <div className="ml-6 max-w-[346px] flex-col justify-center text-start">
- <p>Developer DAO Foundation © 2023</p>
- <p>
- Website content licensed under
- <Link href="https://creativecommons.org/licenses/by-nc/4.0/" className="underline">
- CC BY-NC 4.0.
- </Link>
- </p>
- <p>
- Website code is licensed under
- <Link
- href="https://github.com/Developer-DAO/academy-turbo/blob/main/LICENSE"
- className="underline"
- >
- MIT.
- </Link>
- </p>
- <p>
- <Link href="https://www.developerdao.com/privacy-policy" className="underline">
- Privacy Policy
- </Link>
- </p>
+ MIT.
+ </Link>
+ </p>
+ <p>
+ <Link href="https://www.developerdao.com/privacy-policy" className="underline">
+ Privacy Policy
+ </Link>
+ </p>
+ </div>
</div>
</div>
</div>
- <div className="mb-[33px] hidden lg:block">
- <Image src={"/vercel_badge.png"} alt={"powered by vercel"} width={200} height={80} />
- </div>
</footer>
);
};
diff --git a/packages/ui/src/components/Icons.tsx b/packages/ui/src/components/Icons.tsx
index 7b7661ef..08617eba 100644
--- a/packages/ui/src/components/Icons.tsx
+++ b/packages/ui/src/components/Icons.tsx
@@ -37,6 +37,7 @@ interface DDIcons {
home_icon: (props: LucideProps) => JSX.Element;
moon_light: (props: LucideProps) => JSX.Element;
more_horizontal: (props: LucideProps) => JSX.Element;
+ states: (props: LucideProps) => JSX.Element;
}
export const Icons: DDIcons = {
@@ -44,6 +45,21 @@ export const Icons: DDIcons = {
moon: (props: LucideProps) => <Moon {...props} />,
info: (props: LucideProps) => <Info {...props} />,
twitter: (props: LucideProps) => <Twitter {...props} />,
+ states: (props: LucideProps) => (
+ <svg
+ width={24}
+ height={24}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path
+ d="M3 18h7.5v1.5H3V18zm0-4.5h7.5V15H3v-1.5zm16.5-3h-15A1.5 1.5 0 013 9V4.5A1.5 1.5 0 014.5 3h15A1.5 1.5 0 0121 4.5V9a1.5 1.5 0 01-1.5 1.5zm-15-6V9h15V4.5h-15zm15 16.5H15a1.5 1.5 0 01-1.5-1.5V15a1.5 1.5 0 011.5-1.5h4.5A1.5 1.5 0 0121 15v4.5a1.5 1.5 0 01-1.5 1.5zM15 15v4.5h4.5V15H15z"
+ fill="currentColor"
+ />
+ </svg>
+ ),
logo: (props: LucideProps) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
diff --git a/packages/ui/src/components/Topbar/TopBar.tsx b/packages/ui/src/components/Topbar/TopBar.tsx
index 87aba037..f51dd9c8 100644
--- a/packages/ui/src/components/Topbar/TopBar.tsx
+++ b/packages/ui/src/components/Topbar/TopBar.tsx
@@ -27,6 +27,7 @@ interface NavItem {
export interface TopBarProps {
menus: NavItem[];
+ pathName?: string; // Add pathName to TopBarProps
}
const renderSubmenus = (submenus: SubNavItem[]): JSX.Element[] | undefined => {
@@ -73,11 +74,17 @@ const TopBarItem: FC<NavItem> = ({ name, icon, href, subnavs }) => {
);
};
-const TopBar: FC<TopBarProps> = ({ menus }) => {
+const TopBar: FC<TopBarProps> = ({ menus, pathName }) => {
return (
- <NavigationMenu className="top-nav gradient-blur">
- <NavigationMenuList className="gap-x-4">{renderMenus({ menus })}</NavigationMenuList>
- </NavigationMenu>
+ <>
+ {pathName === "/" || pathName === "/tracks" || pathName === "/fundamentals" ? (
+ <NavigationMenu className="top-nav gradient-blur">
+ <NavigationMenuList className="gap-x-4">{renderMenus({ menus })}</NavigationMenuList>
+ </NavigationMenu>
+ ) : (
+ <></>
+ )}
+ </>
);
};
diff --git a/packages/ui/src/components/ui/tooltip.tsx b/packages/ui/src/components/ui/tooltip.tsx
index f9d04a47..e5c2a4ca 100644
--- a/packages/ui/src/components/ui/tooltip.tsx
+++ b/packages/ui/src/components/ui/tooltip.tsx
@@ -27,4 +27,4 @@ const TooltipContent = React.forwardRef<
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-export { Tooltip, TooltipContent, TooltipProvider,TooltipTrigger };
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
index 4397b155..7985db04 100644
--- a/packages/ui/src/styles.css
+++ b/packages/ui/src/styles.css
@@ -199,11 +199,11 @@
}
.main-container {
- @apply container max-w-7xl;
+ @apply container w-full;
}
.app-container {
- @apply mx-auto w-full max-w-[1440px];
+ @apply mx-auto w-full;
}
.gradient-blur {
@@ -229,7 +229,7 @@
}
.top-nav {
- @apply h-[62px] w-min max-w-lg rounded-[51px] border-2 border-[var(--academy-dark)] px-4 py-6;
+ @apply h-[62px] rounded-[51px] border border-[var(--academy-dark)] px-4 py-6;
}
.top-nav .nav {
@@ -256,7 +256,6 @@
.track {
@apply gradient-blur h-[446px] max-w-[285px] rounded-[51px] border-none shadow-sm hover:bg-zinc-900;
- @apply ring-[2px] ring-inset ring-[#E9E9E930] ring-offset-0;
overflow: hidden;
}
@@ -277,11 +276,11 @@
.banner {
@apply gradient-neutral flex w-full items-start justify-between rounded-[51px];
@apply max-w-screen-2xl gap-x-6 gap-y-10 border-none border-[var(--gray-white)] p-2 shadow-sm md:p-4 lg:p-7;
- @apply ring-[2px] ring-inset ring-[#E9E9E920] ring-offset-0;
+ /* @apply ring-[2px] ring-inset ring-red-500 ring-offset-0; */
}
.banner .title {
- @apply max-w-[220px] text-center text-4xl font-normal leading-normal tracking-wide text-white md:max-w-md;
+ @apply max-w-[220px] text-center text-[48px] font-normal leading-normal tracking-wide text-white md:max-w-md;
font-family: var(--font-future);
}
@@ -295,7 +294,7 @@
}
.terminal-text {
- @apply mx-4 pt-8 text-left text-xs font-normal leading-5 text-[#e1e4e84a] md:text-sm lg:mx-auto lg:pb-8;
+ @apply mx-4 pt-8 text-left text-xs font-normal leading-5 text-[#e1e4e84a] md:text-[15px] lg:mx-auto lg:pb-8;
font-family: var(--font-andale-mono);
}
@@ -316,9 +315,9 @@
}
.footer {
- @apply flex min-h-[224px] flex-col items-center gap-y-8 border-t sm:flex-row-reverse sm:justify-between;
+ @apply flex flex-col items-center gap-y-8 sm:flex-row-reverse sm:justify-between;
@apply border-white text-white;
- @apply mt-20 px-0 py-8 text-xs font-semibold md:text-sm;
+ @apply mt-[20px] px-0 text-xs font-semibold md:text-sm;
}
.footer nav {