Merge pull request #31 from Developer-DAO/feat/home-banners-update

feat: home page banner updates
Developer-DAO · Oct 31, 2023 · 8a89207 · 8a89207
2 parents b0163ee + fce5905
commit 8a89207
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 30 deletions.
diff --git a/packages/ui/src/components/Banners/LearnWeb3Banner.tsx b/packages/ui/src/components/Banners/LearnWeb3Banner.tsx
@@ -10,24 +10,8 @@ export interface HomePageBannerProps {
 
 export const LearnWeb3Banner: FC<HomePageBannerProps> = ({ href }) => {
   return (
-    <Card className="banner flex-col lg:flex-row-reverse">
-      <div>
-        <CardHeader className="flex-row justify-center">
-          <CardTitle className="title">LEARN WEB3</CardTitle>
-        </CardHeader>
-        <CardContent className="description">
-          <p>
-            DeveloperDAO Academy offers learning resources to help you learn how to build web3
-            technologies.
-          </p>
-        </CardContent>
-        <CardContent className=" flex justify-center">
-          <Button asChild className="button-rounded text-black">
-            <NextLink href={href}>get started</NextLink>
-          </Button>
-        </CardContent>
-      </div>
-      <CardContent className="terminal-text">
+    <Card className="banner flex-col lg:flex-row">
+      <div className="terminal-text">
         <div className="line">
           <div>1</div>
           <div className="text-white">
@@ -124,7 +108,23 @@ export const LearnWeb3Banner: FC<HomePageBannerProps> = ({ href }) => {
             <p className="pl-3 text-white">...</p>
           </div>
         </div>
-      </CardContent>
+      </div>
+      <div>
+        <CardHeader className="flex-row justify-center">
+          <CardTitle className="title">LEARN WEB3</CardTitle>
+        </CardHeader>
+        <CardContent className="description max-w-xl">
+          <p>
+            DeveloperDAO Academy offers learning resources to help you learn how to build web3
+            technologies.
+          </p>
+        </CardContent>
+        <div className="flex justify-center">
+          <Button asChild className="button-rounded text-black">
+            <NextLink href={href}>get started!</NextLink>
+          </Button>
+        </div>
+      </div>
     </Card>
   );
 };

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: "",
+    imgSrc: "https://images.unsplash.com/photo-1487260211189-670c54da558d",
   },
 };
diff --git a/packages/ui/src/components/Banners/PartnerBanner.tsx b/packages/ui/src/components/Banners/PartnerBanner.tsx
@@ -1,4 +1,5 @@
 // import Image from "next/image"; to be used with imgSrc
+import Image from "next/image";
 import NextLink from "next/link";
 import type { FC } from "react";
 
@@ -10,26 +11,56 @@ export interface PartnerBannerProps extends HomePageBannerProps {
   imgSrc: string;
 }
 
-export const PartnerBanner: FC<PartnerBannerProps> = ({ href /** imgSrc*/ }) => {
+export const PartnerBanner: FC<PartnerBannerProps> = ({ href, imgSrc }) => {
   return (
-    <Card className="banner flex-col lg:flex-row">
+    <Card className="banner flex-col-reverse lg:flex-row">
       <div>
         <CardHeader className="flex-row justify-center">
           <CardTitle className="title">Partner with D_D Academy</CardTitle>
         </CardHeader>
-        <CardContent className="description">
+        <CardContent className="description max-w-2xl">
           <p>
             Developer DAO is a community of thousands of web3 builders creating a better internet.
             Join us and help educate the next generation of developers.
           </p>
         </CardContent>
-        <CardContent className=" flex justify-center">
+        <div className=" flex justify-center">
           <Button asChild className="button-rounded text-black">
             <NextLink href={href}>reach out!</NextLink>
           </Button>
-        </CardContent>
+        </div>
+      </div>
+      <div className=" m-auto max-w-lg">
+        <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" />
+          <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",
+            ].map((e, i) => (
+              <Image
+                key={i}
+                src={e}
+                width={100}
+                height={100}
+                alt="partner"
+                className="max-w-30 h-auto max-h-12 w-auto"
+              />
+            ))}
+          </div>
+        </div>
       </div>
-      <div className="m-auto text-3xl text-white">[ image here ]</div>
     </Card>
   );
 };

diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
@@ -200,8 +200,8 @@
 }
 
 .banner {
-  @apply gradient-blur m-2 flex min-h-[500px] w-full items-center justify-between rounded-[51px];
-  @apply max-w-screen-2xl gap-6 border-none border-[var(--gray-white)] p-2 shadow-sm md:p-4 lg:p-7;
+  @apply gradient-neutral flex min-h-[500px] w-full items-center 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;
 }
 
 .banner .title {
@@ -210,12 +210,12 @@
 }
 
 .banner .description {
-  @apply min-h-[187px] max-w-3xl text-center text-2xl font-light leading-normal text-white;
+  @apply min-h-[187px] text-center text-2xl font-light leading-normal text-white;
   font-family: var(--font-poppins);
 }
 
 .terminal-text {
-  @apply ml-0 p-1 text-left text-xs font-normal leading-5 text-[#e1e4e84a] md:text-sm lg:ml-auto;
+  @apply mx-0 p-1 text-left text-xs font-normal leading-5 text-[#e1e4e84a] md:text-sm lg:mx-auto;
   font-family: var(--font-andale-mono);
 }