New Grants section (#43)

Co-authored-by: pabl0cks <pablo@asdloop.com>
BuidlGuidl · Oct 1, 2024 · cd3996a · cd3996a
1 parent ab43a53
commit cd3996a
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 31 deletions.
diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -191,37 +191,6 @@ const Home: NextPage<{
         </div>
       </div>
 
-      {/* Stats Streamed / Builder / Builds  */}
-      <div className="bg-white">
-        <div className="container flex flex-col items-center justify-center max-w-[90%] lg:max-w-7xl mx-auto py-16 lg:py-28 lg:px-12 gap-6">
-          <div className="flex flex-col gap-8 md:flex-row justify-between items-start mt-4 lg:w-4/5">
-            <div className="flex items-start gap-3">
-              <Image src="/assets/diamond.svg" alt="diamon icon" width={40} height={40} className="mt-1" />
-              <div className="flex flex-col items-start">
-                <h2 className="text-3xl lg:text-5xl font-semibold my-0 text-primary">
-                  {stats.streamedEth.toFixed(2)}Ξ
-                </h2>
-                <p className="text-sm my-0 -mt-1 lg:-mt-2 font-medium">Streamed</p>
-              </div>
-            </div>
-            <div className="flex items-start gap-3">
-              <Image src="/assets/builders.svg" alt="builder icon" width={45} height={45} className="mt-1" />
-              <div className="flex flex-col items-start">
-                <h2 className="text-3xl lg:text-5xl font-semibold my-0 text-primary">{stats.builderCount}</h2>
-                <p className="text-sm my-0 -mt-1 lg:-mt-2 font-medium">Builders</p>
-              </div>
-            </div>
-            <div className="flex items-start gap-3">
-              <Image src="/assets/builds-uploaded.svg" alt="build icon" width={30} height={30} className="mt-1" />
-              <div className="flex flex-col items-start">
-                <h2 className="text-3xl lg:text-5xl font-semibold my-0 text-primary">{stats.buildCount}</h2>
-                <p className="text-sm my-0 -mt-1 lg:-mt-2 font-medium">Builds Uploaded</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
       {/* Supporting Devs*/}
       <div className="bg-white">
         <div className="container max-w-[90%] lg:max-w-7xl m-auto py-16 lg:py-20 xl:pl-24 lg:pl-16 flex flex-col-reverse lg:flex-row items-center gap-5 lg:gap-0">
@@ -294,6 +263,75 @@ const Home: NextPage<{
         </div>
       </div>
 
+      {/* Stats Streamed / Builder / Builds  */}
+      <div className="bg-white">
+        <div className="container flex flex-col items-center justify-center max-w-[90%] lg:max-w-7xl mx-auto py-16 lg:py-28 lg:px-12 gap-6">
+          <div className="flex flex-col gap-8 md:flex-row justify-between items-start mt-4 lg:w-4/5">
+            <div className="flex items-start gap-3">
+              <Image src="/assets/diamond.svg" alt="diamon icon" width={40} height={40} className="mt-1" />
+              <div className="flex flex-col items-start">
+                <h2 className="text-3xl lg:text-5xl font-semibold my-0 text-primary">
+                  {stats.streamedEth.toFixed(2)}Ξ
+                </h2>
+                <p className="text-sm my-0 -mt-1 lg:-mt-2 font-medium">Streamed</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3">
+              <Image src="/assets/builders.svg" alt="builder icon" width={45} height={45} className="mt-1" />
+              <div className="flex flex-col items-start">
+                <h2 className="text-3xl lg:text-5xl font-semibold my-0 text-primary">{stats.builderCount}</h2>
+                <p className="text-sm my-0 -mt-1 lg:-mt-2 font-medium">Builders</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3">
+              <Image src="/assets/builds-uploaded.svg" alt="build icon" width={30} height={30} className="mt-1" />
+              <div className="flex flex-col items-start">
+                <h2 className="text-3xl lg:text-5xl font-semibold my-0 text-primary">{stats.buildCount}</h2>
+                <p className="text-sm my-0 -mt-1 lg:-mt-2 font-medium">Builds Uploaded</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Grants */}
+      <div className="bg-[#282C52]">
+        <div className="mx-auto lg:max-w-7xl">
+          <div className="container max-w-[90%] lg:max-w-7xl m-auto pb-16 pt-6 lg:py-20 xl:pl-24 lg:pl-16 flex flex-col-reverse lg:flex-row items-center gap-3 lg:gap-0">
+            {/* Grants Text Content */}
+            <div className="md:max-w-[70%] lg:max-w-[45%] flex flex-col items-center lg:items-start text-center lg:text-left">
+              <Image
+                src="/assets/grants-logo-dark.svg"
+                alt="buidlguidl grants logo"
+                width={280}
+                height={200}
+                className="mt-1 mb-1 lg:mb-4 w-[200px] h-auto md:w-[280px]"
+              />
+              <p className="text-[#9FA9FF] font-editorial mb-1 lg:mb-4 text-2xl lg:text-4xl xl:text-5xl">
+                Funding meaningful projects across the Ethereum ecosystem
+              </p>
+              <p className="text-white font-mono lg:pr-8 text-sm lg:text-base mb-6">
+                Have you just joined BG or finished one of our batches, and want to build something to improve the
+                ecosystem? BuidlGuidl can sponsor up to 1 ETH to build your idea.
+              </p>
+              <TrackedLink
+                id="BG-Grants"
+                href="https://grants.buidlguidl.com"
+                className="btn btn-primary btn-md px-8 hover:opacity-100"
+              >
+                Apply for a small grant
+              </TrackedLink>
+            </div>
+            {/* Grants Image */}
+            <div className="flex flex-col items-center lg:pl-16 xl:pl-10 2xl:pl-24">
+              <div className="max-w-md lg:max-w-md xl:max-w-xl 2xl:max-w-2xl">
+                <Image src="/assets/bg-universe.png" alt="buidlguidl universe" width={800} height={800} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       {/* Learn More  */}
       <div className="bg-skin">
         <div className="container flex flex-col items-center justify-center max-w-[90%] lg:max-w-6xl mx-auto py-16 lg:py-24 lg:px-12 gap-6">

diff --git a/packages/nextjs/public/assets/bg-universe.png b/packages/nextjs/public/assets/bg-universe.png
diff --git a/packages/nextjs/public/assets/grants-logo-dark.svg b/packages/nextjs/public/assets/grants-logo-dark.svg
diff --git a/packages/nextjs/public/fonts/PPEditorialNew-Ultralight.otf b/packages/nextjs/public/fonts/PPEditorialNew-Ultralight.otf
diff --git a/packages/nextjs/public/fonts/PPEditorialNew-Ultralight.ttf b/packages/nextjs/public/fonts/PPEditorialNew-Ultralight.ttf
diff --git a/packages/nextjs/public/fonts/PPEditorialNew-Ultralight.woff b/packages/nextjs/public/fonts/PPEditorialNew-Ultralight.woff
diff --git a/packages/nextjs/public/fonts/PPEditorialNew-Ultralight.woff2 b/packages/nextjs/public/fonts/PPEditorialNew-Ultralight.woff2
diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
@@ -15,6 +15,17 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: "PPEditorial";
+  src: url("/fonts/PPEditorialNew-Ultralight.woff2") format("woff2"),
+    url("/fonts/PPEditorialNew-Ultralight.woff") format("woff"),
+    url("/fonts/PPEditorialNew-Ultralight.ttf") format("truetype"),
+    url("/fonts/PPEditorialNew-Ultralight.otf") format("opentype");
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
 html {
   font-size: 18px;
   scroll-behavior: smooth !important;

diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -67,6 +67,7 @@ module.exports = {
       fontFamily: {
         "space-grotesk": ["Space Grotesk", "sans-serif"],
         "neue-machina": ["PPNeueMachina", "sans-serif"],
+        "editorial": ["PPEditorial", "serif"],
       },
       backgroundColor: {
         skin: "#EBECFD",