Hero section minor tweaks (#40)

Co-authored-by: tokodev <[email protected]>
BuidlGuidl · Feb 23, 2024 · 6a7835a · 6a7835a
1 parent 298adf2
commit 6a7835a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/packages/nextjs/app/_components/GrantsStats.tsx b/packages/nextjs/app/_components/GrantsStats.tsx
@@ -4,7 +4,7 @@ import { getGrantsStats } from "~~/services/database/grants";
 export const GrantsStats = async () => {
   const stats = await getGrantsStats();
   return (
-    <div className="bg-base-100">
+    <div className="bg-base-300">
       <div className="container flex flex-col items-center justify-center max-w-[90%] lg:max-w-7xl mx-auto py-12 lg:px-12 gap-6">
         <div className="flex flex-col gap-8 md:flex-row justify-between items-start lg:w-4/5">
           <div className="flex flex-col items-center">

diff --git a/packages/nextjs/app/_components/HomepageHero.tsx b/packages/nextjs/app/_components/HomepageHero.tsx
@@ -2,30 +2,32 @@ import Image from "next/image";
 import Link from "next/link";
 
 export const HomepageHero = () => (
-  <div className="container max-w-[90%] lg:max-w-7xl m-auto py-10 lg:py-16 xl:pl-18 lg:pl-8 flex flex-col-reverse lg:flex-row items-center justify-between gap-5 lg:gap-0">
-    <div className="space-y-2 lg:max-w-[65%] flex flex-col items-center lg:items-start">
+  <div className="container max-w-[90%] lg:py-12 xl:py-0 lg:max-w-7xl m-auto pt-4 pb-8 xl:pl-18 lg:pl-8 flex flex-col-reverse lg:flex-row items-center justify-between gap-5 lg:gap-0">
+    <div className="space-y-2 lg:max-w-[55%] flex flex-col items-center lg:items-start">
       <div className="relative">
         <h2 className="text-3xl md:text-4xl lg:text-6xl lg:leading-[1.2] text-center lg:text-left font-ppEditorial">
           Funding meaningful projects <br /> across the ecosystem
         </h2>
         <Image className="absolute -top-3 -right-7" src="/assets/sparkle.png" alt="sparkle" width={32} height={32} />
       </div>
       <div className="text-center font-spaceMono px-1 max-w-lg lg:max-w-none lg:w-4/5 lg:px-0 lg:text-left space-y-5">
-        <p className="m-0 text-xs md:text-sm lg:text-lg">
-          BG grants are one of the ways BuidlGuidl funds development and contribute to the Ethereum ecosystem. Did you
-          just finished SRE or completed one of our batches? This could be the next step in your BuidlGuidl’s journey.
-        </p>
+        <div className="bg-base-300 p-4 rounded-2xl">
+          <p className="m-0 text-xs md:text-sm lg:text-base">
+            BG grants are one of the ways BuidlGuidl funds development and contribute to the Ethereum ecosystem. Did you
+            just finished SRE or completed one of our batches? This could be the next step in your BuidlGuidl’s journey.
+          </p>
+        </div>
         <Link
           href="#communityGrants"
-          className="btn btn-primary btn-md border-1 border-black rounded-2xl px-14 font-medium shadow-none"
+          className="btn btn-primary btn-md border-1 border-black hover:border-black hover:border-1 rounded-2xl px-14 font-bold shadow-none"
         >
-          Learn More
+          Learn more
         </Link>
       </div>
     </div>
     <div className="flex flex-col items-center">
       <div className="max-w-md lg:max-w-none">
-        <Image src="/assets/bg-universe.png" alt="developers list" width={500} height={500} />
+        <Image src="/assets/bg-universe.png" alt="developers list" width={550} height={550} />
       </div>
     </div>
   </div>

diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -18,7 +18,7 @@ module.exports = {
           "neutral-content": "#ffffff",
           "base-100": "#F1F1F1",
           "base-200": "#FFFCFC",
-          "base-300": "#DAE8FF",
+          "base-300": "#EEF0FF",
           "base-content": "#212638",
           info: "#93BBFB",
           success: "#34EEB6",