[feat] add Graphics To Nonprofits Section + Patch Design (#27)

* Add Graphics To Nonprofits Section + Patch Design * Update NonProfits.astro * Fix Review Comments * Delete duplicate assests * bring favicon back, remove public shape svg, add overflow hidden * improve padding --------- Co-authored-by: jinkang-0 <[email protected]>
calblueprint · Jan 17, 2024 · 2756d8f · 2756d8f
1 parent b14d921
commit 2756d8f
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 65 deletions.
diff --git a/src/components/NonProfit.astro b/src/components/NonProfit.astro
@@ -34,6 +34,9 @@ const { name, description, image, startColor, endColor, url } = Astro.props;
     position: relative;
     overflow: hidden;
     border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
 
     .bg {
       position: absolute;
@@ -56,18 +59,18 @@ const { name, description, image, startColor, endColor, url } = Astro.props;
 
     .content {
       width: 100%;
-      padding-top: 160px;
-      padding: 32px;
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
       gap: 12px;
       color: white;
       font-weight: 400;
       line-height: 100%;
+      padding: 32px;
+      padding-top: 120px;
 
       @media (min-width: breakpoints.$laptop) {
-        padding-top: 0;
+        padding-top: 32px;
         aspect-ratio: 10 / 9;
       }
     }

diff --git a/src/components/NonProfits.astro b/src/components/NonProfits.astro
@@ -1,73 +1,80 @@
 ---
 import NonProfit from './NonProfit.astro';
+import { Image } from 'astro:assets';
+import sparkles from '../graphics/shapes_sparkle_2.svg';
+import clouds from '../graphics/clouds_star_twirl_2.svg';
 ---
 
-<section class="lead">
-  <h4 id="nonprofits">NON-PROFITS</h4>
-  <h3>
-    We’re a hackathon with <b class="emphasis">social good</b> at its heart.
-  </h3>
-  <p>
-    Our nonprofits have presented several problem areas and projects to tackle
-    their most pressing needs. Here are the incredible organizations that we’ve
-    partnered with:
-  </p>
-</section>
+<div class="container">
+  <Image src={sparkles} class="sparkles" alt="" />
+  <Image src={clouds} class="clouds" alt="" />
+  <section class="lead">
+    <h4 id="nonprofits">NON-PROFITS</h4>
+    <h3>
+      We’re a hackathon with <b class="emphasis">social good</b> at its heart.
+    </h3>
+    <p>
+      Our nonprofits have presented several problem areas and projects to tackle
+      their most pressing needs. Here are the incredible organizations that
+      we’ve partnered with:
+    </p>
+  </section>
 
-<section class="nonprofits">
-  <NonProfit
-    name="Bay Area Street Soccer"
-    description="Building life-changing community-based sports programs reaching the least-served communities across the U.S."
-    image="/nonprofits/street-soccer.webp"
-    startColor="rgba(223, 114, 145, 0.3)"
-    endColor="rgba(223, 114, 145, 1)"
-    url="https://www.streetsoccerusa.org/cities/san-francisco/"
-  />
-  <NonProfit
-    name="1951 Coffee"
-    description="Promoting the well-being of the refugee community in the U.S. through job training and employment"
-    image="/nonprofits/1951-coffee-company.webp"
-    startColor="rgba(247, 207, 82, 0.3)"
-    endColor="rgba(247, 207, 82, 1)"
-    url="https://www.1951coffee.com/"
-  />
-  <NonProfit
-    name="The Dancing Cat"
-    description="Animal rescue organization dedicated to saving at-risk cats from the San Jose Animal Care Center"
-    image="/nonprofits/dancing-cat.webp"
-    startColor="rgba(128, 211, 241, 0.3)"
-    endColor="rgba(128, 211, 241, 1)"
-    url="https://www.thedancingcat.org/"
-  />
-  <NonProfit
-    name="Coming soon..."
-    description="This amazing nonprofit will be announced soon!"
-    image="/nonprofits/coming-soon.webp"
-    startColor="rgba(120, 120, 120, 0.3)"
-    endColor="rgba(120, 120, 120, 1)"
-  />
-  <NonProfit
-    name="Coming soon..."
-    description="This amazing nonprofit will be announced soon!"
-    image="/nonprofits/coming-soon.webp"
-    startColor="rgba(120, 120, 120, 0.3)"
-    endColor="rgba(120, 120, 120, 1)"
-  />
-  <NonProfit
-    name="Coming soon..."
-    description="This amazing nonprofit will be announced soon!"
-    image="/nonprofits/coming-soon.webp"
-    startColor="rgba(120, 120, 120, 0.3)"
-    endColor="rgba(120, 120, 120, 1)"
-  />
-</section>
+  <section class="nonprofits">
+    <NonProfit
+      name="Bay Area Street Soccer"
+      description="Building life-changing community-based sports programs reaching the least-served communities across the U.S."
+      image="/nonprofits/street-soccer.webp"
+      startColor="rgba(223, 114, 145, 0.3)"
+      endColor="rgba(223, 114, 145, 1)"
+      url="https://www.streetsoccerusa.org/cities/san-francisco/"
+    />
+    <NonProfit
+      name="1951 Coffee"
+      description="Promoting the well-being of the refugee community in the U.S. through job training and employment"
+      image="/nonprofits/1951-coffee-company.webp"
+      startColor="rgba(247, 207, 82, 0.3)"
+      endColor="rgba(247, 207, 82, 1)"
+      url="https://www.1951coffee.com/"
+    />
+    <NonProfit
+      name="The Dancing Cat"
+      description="Animal rescue organization dedicated to saving at-risk cats from the San Jose Animal Care Center"
+      image="/nonprofits/dancing-cat.webp"
+      startColor="rgba(128, 211, 241, 0.3)"
+      endColor="rgba(128, 211, 241, 1)"
+      url="https://www.thedancingcat.org/"
+    />
+    <NonProfit
+      name="Coming soon..."
+      description="This amazing nonprofit will be announced soon!"
+      image="/nonprofits/coming-soon.webp"
+      startColor="rgba(120, 120, 120, 0.3)"
+      endColor="rgba(120, 120, 120, 1)"
+    />
+    <NonProfit
+      name="Coming soon..."
+      description="This amazing nonprofit will be announced soon!"
+      image="/nonprofits/coming-soon.webp"
+      startColor="rgba(120, 120, 120, 0.3)"
+      endColor="rgba(120, 120, 120, 1)"
+    />
+    <NonProfit
+      name="Coming soon..."
+      description="This amazing nonprofit will be announced soon!"
+      image="/nonprofits/coming-soon.webp"
+      startColor="rgba(120, 120, 120, 0.3)"
+      endColor="rgba(120, 120, 120, 1)"
+    />
+  </section>
+</div>
 
 <style lang="scss">
   @use '../styles/breakpoints';
   @use '../styles/colors';
 
   .lead {
-    width: 100%;
+    width: 80%;
     padding-left: 1rem;
     position: relative;
     display: flex;
@@ -77,11 +84,14 @@ import NonProfit from './NonProfit.astro';
     text-align: center;
     color: colors.$text;
     padding-bottom: 2rem;
-    margin-top: 180px;
+    margin: auto;
+    margin-top: 90px;
 
     @media (min-width: breakpoints.$laptop) {
+      margin-top: 180px;
       padding: 0 20%;
-      padding-bottom: 80px;
+      padding-bottom: 30px;
+      width: 100%;
       grid-template-columns: 1fr 1fr 1fr;
     }
   }
@@ -93,7 +103,7 @@ import NonProfit from './NonProfit.astro';
 
   .nonprofits {
     width: 100%;
-    padding-left: 1rem;
+    padding: 0 10%;
     position: relative;
     display: grid;
     grid-template-rows: min-content;
@@ -105,4 +115,31 @@ import NonProfit from './NonProfit.astro';
       grid-template-columns: 1fr 1fr 1fr;
     }
   }
+
+  .container {
+    position: relative;
+    overflow-x: hidden;
+  }
+
+  .clouds {
+    display: none;
+    position: absolute;
+    top: 72px;
+    right: -60px;
+    height: 120px;
+    @media (min-width: breakpoints.$laptop) {
+      display: block;
+    }
+  }
+
+  .sparkles {
+    display: none;
+    position: absolute;
+    top: 0px;
+    left: -18px;
+    height: 90px;
+    @media (min-width: breakpoints.$laptop) {
+      display: block;
+    }
+  }
 </style>