Community grants section

packages/nextjs/app/_components/CommunityGrant.tsx

@@ -0,0 +1,82 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export const CommunityGrant = () => {
+  return (
+    <div id="communityGrants" className="bg-secondary">
+      <div className="container max-w-[90%] sm:max-w-md lg:max-w-7xl m-auto xl:pl-18 lg:pl-8 flex flex-col-reverse lg:flex-row gap-5 lg:gap-0 max-h-[30rem] my-6 lg:my-0">
+        {/* Left section(Title, desc and btn) */}
+        <div className="my-4 lg:py-16 space-y-2 lg:max-w-[40%] flex flex-col items-center lg:items-start">
+          {/* Title  */}
+          <div>
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl text-center lg:text-left font-ppEditorial mb-0 lg:mb-2">
+              BuidlGuidl
+            </h2>
+            <div className="relative">
+              <h2 className="text-3xl sm:text-4xl lg:text-5xl text-center lg:text-left font-ppEditorial">
+                Community Grants
+              </h2>
+              <Image
+                className="absolute -top-3 -right-7"
+                src="/assets/sparkle.png"
+                alt="sparkle"
+                width={32}
+                height={32}
+              />
+            </div>
+          </div>
+          {/* Description */}
+          <div className="text-center font-spaceMono px-1 max-w-xs sm:max-w-lg lg:max-w-none lg:w-11/12 lg:px-0 lg:text-left space-y-5">
+            <p className="m-0 text-xs md:text-sm lg:text-lg">
+              Are you a BG member eager to make impact in the ecosystem? At BuidlGuidl, we&apos;re excited to support
+              your builds. We offer sponsorship of up to 1 ETH for projects that drive the community forward.
+            </p>
+            <Link
+              href="/apply"
+              className="btn bg-white hover:opacity-90 hover:bg-white btn-md border-1 border-black hover:border-1 hover:border-black rounded-2xl px-6 shadow-none font-medium"
+            >
+              Apply for a grant
+            </Link>
+          </div>
+        </div>
+        {/* Right section (Who, process, payment, etc) */}
+        <div className="relative w-full h-44 lg:h-auto lg:overflow-hidden">
+          <div className="absolute rotate-6 h-[150px] w-[150px] lg:h-[370px] lg:w-[370px] top-4">
+            <Image src="/assets/blue-patch.png" alt="Who section background" fill className="w-full" />
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center lg:space-y-2">
+              <h2 className="font-extrabold text-xs lg:text-lg">WHO</h2>
+              <p className="my-0 text-[0.4rem] lg:text-sm font-medium">
+                Individuals from BuildGuidl, who want to build a project to contribute to the Ethereum ecosystem.
+              </p>
+            </div>
+          </div>
+          <div className="absolute h-[100px] w-[115px] lg:h-[250px] lg:w-[275px] -bottom-3 left-1/3 lg:-bottom-6 z-10 lg:z-0 lg:left-[30%]">
+            <Image src="/assets/orange-patch.png" alt="Who section background" fill className="w-full" />
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center lg:space-y-2">
+              <h2 className="font-extrabold text-xs lg:text-lg">Payment</h2>
+              <p className="my-0 text-[0.4rem] lg:text-sm font-medium">
+                50% upfront when your application is approved and 50% at project completion.
+              </p>
+            </div>
+          </div>
+          <div className="absolute -rotate-6 h-[130px] w-[140px] lg:h-[300px] lg:w-[300px] top-2 right-0 lg:top-6 lg:right-6">
+            <Image src="/assets/green-patch.png" alt="Who section background" fill className="w-full" />
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center lg:space-y-2">
+              <h2 className="font-extrabold text-xs lg:text-lg">Process</h2>
+              <p className="my-0 text-[0.4rem] lg:text-sm font-medium">
+                Fill your application, get approved from the BG Grants team and submit the project once completed.
+              </p>
+            </div>
+          </div>
+          <div className="absolute rotate-6 h-[70px] w-[70px] lg:h-[200px] lg:w-[200px] -bottom-2 lg:bottom-4 right-3 lg:right-0">
+            <Image src="/assets/gray-patch.png" alt="Who section background" fill className="w-full" />
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center lg:space-y-2">
+              <h2 className="font-extrabold text-xs lg:text-lg">Amount</h2>
+              <p className="my-0 text-[0.4rem] lg:text-sm font-medium">Up to 1 ETH</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/nextjs/app/_components/HomepageHero.tsx

@@ -12,11 +12,11 @@ export const HomepageHero = () => (
       </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">
-          Our micro grants are one of many ways BuidlGuidl funds development and contribute to Ethereum. Did you just
-          finished SRE or completed one of our batches? This could be your next step in BuidlGuidl’s journey.
+          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>
         <Link
-          href="/apply"
+          href="#communityGrants"
           className="btn btn-primary btn-md border-1 border-black rounded-2xl px-14 font-medium shadow-none"
         >
           Learn More

packages/nextjs/app/layout.tsx

@@ -66,13 +66,16 @@ const spaceMono = Space_Mono({
 const spaceGrotesk = Space_Grotesk({
   subsets: ["latin"],
   display: "swap",
-  weight: "400",
+  weight: ["300", "400", "500", "600", "700"],
   variable: "--font-space-grotesk",
 });
 
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (
-    <html suppressHydrationWarning className={`${ppEditorial.variable} ${spaceMono.variable} ${spaceGrotesk.variable}`}>
+    <html
+      suppressHydrationWarning
+      className={`${ppEditorial.variable} ${spaceMono.variable} ${spaceGrotesk.variable} scroll-smooth`}
+    >
       <body>
         <ThemeProvider enableSystem>
           <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>

packages/nextjs/app/page.tsx

@@ -1,3 +1,4 @@
+import { CommunityGrant } from "./_components/CommunityGrant";
 import { CompletedGrants } from "./_components/CompletedGrants";
 import { GrantsStats } from "./_components/GrantsStats";
 import { HomepageHero } from "./_components/HomepageHero";
@@ -7,6 +8,7 @@ const Home = () => {
     <>
       <HomepageHero />
       <GrantsStats />
+      <CommunityGrant />
       <CompletedGrants />
     </>
   );

packages/nextjs/tailwind.config.js

@@ -10,7 +10,7 @@ module.exports = {
         light: {
           primary: "#9FA9FF",
           "primary-content": "#182232",
-          secondary: "#DAE8FF",
+          secondary: "#FFE794",
           "secondary-content": "#212638",
           accent: "#93BBFB",
           "accent-content": "#212638",