Merge pull request #33 from Developer-DAO/feat/home-page

feat: home page (desktop)
Developer-DAO · Nov 8, 2023 · 5d4ed34 · 5d4ed34 · vercel · Nov 8, 2023
2 parents 8a89207 + 12e133c
commit 5d4ed34
Show file tree

Hide file tree

Showing 20 changed files with 53 additions and 49 deletions.
diff --git a/apps/academy/public/D_D_NFT_image.png b/apps/academy/public/D_D_NFT_image.png
diff --git a/apps/academy/public/partners/api3-logo.png b/apps/academy/public/partners/api3-logo.png
diff --git a/apps/academy/public/partners/pokt.png b/apps/academy/public/partners/pokt.png
diff --git a/apps/academy/public/partners/polygon-logo.png b/apps/academy/public/partners/polygon-logo.png
diff --git a/apps/academy/public/partners/zerion.png b/apps/academy/public/partners/zerion.png
diff --git a/apps/academy/src/components/Header.tsx b/apps/academy/src/components/Header.tsx
@@ -24,7 +24,7 @@ const sampleMenus: NavItem[] = [
 const PageHeader: FunctionComponent = () => {
   // return <Header {...links} />;
   return (
-    <header className="main-container flex items-center justify-between py-10">
+    <header className="main-container absolute left-0 right-0 top-0 z-50 flex items-center justify-between py-10">
       <TopBar menus={sampleMenus} />
       <ConnectButton />
     </header>

diff --git a/apps/academy/src/pages/_document.tsx b/apps/academy/src/pages/_document.tsx
@@ -41,7 +41,7 @@ class MyDocument extends Document {
           <link rel="manifest" href="/manifest.json" />
           <link rel="shortcut icon" href="/favicon.ico" />
         </Head>
-        <body className="bg-neutral-50 dark:bg-neutral-900">
+        <body className="var(--academy-bg-dark)">
           <Main />
           <NextScript />
         </body>

diff --git a/apps/academy/src/pages/index.tsx b/apps/academy/src/pages/index.tsx
@@ -1,37 +1,42 @@
 import type { ReactElement } from "react";
+import { Icons, LearnWeb3Banner, PartnerBanner } from "ui";
 
 import PageSeoLayout from "@/components/PageSeoLayout";
 import type { NextPageWithLayout } from "@/pages/_app";
-import { api } from "@/utils/api";
 
 const Home: NextPageWithLayout = () => {
-  const {
-    data: ExampleHelloData,
-    isLoading: ExampleHelloIsLoading,
-    // refetch: ExampleHelloRefetch,
-  } = api.example.hello.useQuery({
-    text: "Hello World",
-  });
-
-  console.log({ ExampleHelloData, ExampleHelloIsLoading });
-
   return (
-    <main className="main-container pb-8 pt-16 sm:pt-24">
-      <h1 className="mx-auto text-center text-6xl font-extrabold text-neutral-900 dark:text-white sm:text-7xl lg:text-8xl">
-        Website SSR
-        <span className="block bg-gradient-to-r from-red-500 to-blue-500 bg-clip-text py-8 text-transparent">
-          Turbo Monorepo
-        </span>
-      </h1>
+    <main>
+      <div className="academy-grid">
+        <div className="academy-grid-col-1">
+          <div className="text-bttf-lg">
+            <h1>learn</h1>
+            <h1>web3 __</h1>
+            <h1>with</h1>
+            <h1>frens</h1>
+          </div>
+          <div className="description max-w-lg">
+            <p>Become a web3 developer with DeveloperDAO.</p>
+          </div>
+          <div className="flex w-full items-center justify-center">
+            <Icons.scroll className="h-16 w-16" />
+          </div>
+        </div>
+        <div className="dd-nft" />
+      </div>
+      <div className="main-container space-y-16 py-16">
+        <LearnWeb3Banner href="" />
+        <PartnerBanner href="" imgSrc="/DD_NFT_avatar.png" />
+      </div>
     </main>
   );
 };
 
 Home.getLayout = function getLayout(page: ReactElement) {
   return (
     <PageSeoLayout
-      title="Dapp Page" // DEV_NOTE: This is for the next-seo per page config
-      description="A page for your dapp." // DEV_NOTE: This is for the next-seo per page config
+      title="Developer DAO Academy" // DEV_NOTE: This is for the next-seo per page config
+      description="Become a web3 developer with DeveloperDAO." // DEV_NOTE: This is for the next-seo per page config
     >
       {page}
     </PageSeoLayout>

diff --git a/apps/academy/src/styles.css b/apps/academy/src/styles.css
@@ -3,24 +3,28 @@
 @tailwind utilities;
 
 .text-bttf {
-  @apply text-center text-lg leading-[91%] tracking-[1px] transition-colors;
+  @apply leading-[91%] tracking-[1px] transition-colors;
   font-family: var(--font-future);
 }
 
 .academy-grid {
-  @apply grid h-screen grid-cols-1 text-white  md:grid-cols-2;
+  @apply mx-auto grid h-screen max-h-[1024px] max-w-screen-2xl  grid-cols-1 text-white md:grid-cols-2;
 }
 
 .academy-grid .academy-grid-col-1 {
-  @apply flex flex-col items-center justify-between px-4 py-6 text-center;
+  @apply my-auto space-y-12 lg:pt-24;
 }
 
 .academy-grid .text-bttf-lg {
-  @apply text-bttf mb-12 mt-10 h-full uppercase;
+  @apply text-bttf mb-16 text-center text-6xl lg:text-8xl;
+}
+
+.academy-grid .academy-grid-col-1 .description {
+  @apply mx-auto text-center text-2xl font-light;
 }
 
 .dd-nft {
-  @apply relative py-6 pr-6;
+  @apply relative hidden py-6 pr-6 md:flex md:justify-end;
   background:
     linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
     url("/D_D_NFT_image.png"),

diff --git a/packages/storybook-config/static/DD_NFT_avatar.png b/packages/storybook-config/static/DD_NFT_avatar.png
diff --git a/packages/storybook-config/static/partners/Zerion.png b/packages/storybook-config/static/partners/Zerion.png
diff --git a/packages/storybook-config/static/partners/api3-logo.png b/packages/storybook-config/static/partners/api3-logo.png
diff --git a/packages/storybook-config/static/partners/pokt.png b/packages/storybook-config/static/partners/pokt.png
diff --git a/packages/storybook-config/static/partners/polygon-logo.png b/packages/storybook-config/static/partners/polygon-logo.png
diff --git a/packages/ui/src/components/Banners/PartnerBanner.stories.ts b/packages/ui/src/components/Banners/PartnerBanner.stories.ts
@@ -26,6 +26,6 @@ type Story = StoryObj<typeof meta>;
 export const PartnerBanner: Story = {
   args: {
     href: "",
-    imgSrc: "https://images.unsplash.com/photo-1487260211189-670c54da558d",
+    imgSrc: "/DD_NFT_avatar.png",
   },
 };
diff --git a/packages/ui/src/components/Banners/PartnerBanner.tsx b/packages/ui/src/components/Banners/PartnerBanner.tsx
@@ -30,32 +30,24 @@ export const PartnerBanner: FC<PartnerBannerProps> = ({ href, imgSrc }) => {
           </Button>
         </div>
       </div>
-      <div className=" m-auto max-w-lg">
+      <div className=" m-auto max-w-sm">
         <div className="flex flex-row items-center gap-x-6">
-          <Image
-            src={imgSrc}
-            width={100}
-            height={100}
-            alt="partner"
-            className="w-30 h-14 rounded-full"
-          />
-          <div className="h-20 border" />
+          <Image src={imgSrc} width={120} height={120} alt="partner" className="rounded-full" />
+          <div className="h-28 border" />
           <div className=" flex flex-wrap gap-6">
             {[
-              "https://zerion.io/blog/content/images/2023/03/Zerion-Blog.png",
-              "https://upload.wikimedia.org/wikipedia/commons/2/24/Polygon_blockchain_logo.png",
-              "https://moonbeam.network/wp-content/uploads/2022/06/pocket-logo.png",
-              "https://altcoinsbox.com/wp-content/uploads/2023/03/the-graph-logo-300x300.webp",
-              "https://global.discourse-cdn.com/standard11/uploads/scroll2/original/2X/3/3bc70fd653f9c50abbb41b7568e549535f768fcc.png",
-              "https://seeklogo.com/images/A/api3-logo-7A7D29C8F6-seeklogo.com.png",
+              "/partners/zerion.png",
+              "/partners/polygon-logo.png",
+              "/partners/pokt.png",
+              "/partners/api3-logo.png",
             ].map((e, i) => (
               <Image
                 key={i}
                 src={e}
-                width={100}
-                height={100}
+                width={200}
+                height={50}
                 alt="partner"
-                className="max-w-30 h-auto max-h-12 w-auto"
+                className="h-auto max-h-10 w-auto"
               />
             ))}
           </div>

diff --git a/packages/ui/src/components/Banners/index.ts b/packages/ui/src/components/Banners/index.ts
@@ -0,0 +1,2 @@
+export { LearnWeb3Banner } from "./LearnWeb3Banner";
+export { PartnerBanner } from "./PartnerBanner";
diff --git a/packages/ui/src/components/Footer/Footer.tsx b/packages/ui/src/components/Footer/Footer.tsx
@@ -27,8 +27,8 @@ const socials: readonly SocialLinks[] = [
 
 export const Footer = () => {
   return (
-    <footer>
-      <div className="footer main-container">
+    <footer className="main-container">
+      <div className="footer">
         <nav aria-label="social">
           {socials.map((social) => {
             const Icon = Icons[social.icon];

diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
@@ -1,3 +1,4 @@
+export * from "./Banners";
 export * from "./Button";
 export * from "./Cards";
 export * from "./Container";

diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
@@ -142,7 +142,7 @@
 }
 
 .main-container {
-  @apply container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
+  @apply container mx-auto max-w-7xl;
 }
 
 .gradient-blur {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { LearnWeb3Banner } from "./LearnWeb3Banner";
		export { PartnerBanner } from "./PartnerBanner";