[feat] add nonprofits to the site (#5)

* Push my basic work

* Update package-lock.json

* Update NonProfits.astro

* Content update!

* Use `.webp`

* Update src/components/NonProfits.astro

* Update src/components/NonProfits.astro

* Update NonProfits.astro

* make it move!

src/components/NonProfit.astro

@@ -0,0 +1,46 @@
+---
+const { name, description, image, startColor, endColor, url } = Astro.props;
+---
+
+<a class="card" href={url || "#"} target="_blank">
+  <h3>
+    {name}
+  </h3>
+  {description}
+</a>
+
+<style lang="scss" define:vars={{ image: `url(${image})`, startColor, endColor }}>
+  @use '../styles/breakpoints';
+  @use '../styles/colors';
+
+  .card {
+    background-image: linear-gradient(var(--startColor), var(--endColor)), var(--image);
+    background-size: cover;
+    background-position: center;
+    border-radius: 12px; 
+    padding: 32px;
+    display: flex; 
+    flex-direction: column;
+    justify-content: flex-end;
+    gap: 12px; 
+    padding-top: 180px;
+    height: 360px;
+    color: white;
+    font-weight: 400;
+    line-height: 100%;
+  }
+
+  .card:hover {
+    transform: scale(1.05);
+    transition: transform .225s ease-in-out;
+  }
+
+  .card:hover > h3 {
+    text-decoration: underline;
+  }
+
+  h3 {
+    font-family: "new-spirit", serif;
+    line-height: 1;
+  }
+</style>

src/components/NonProfits.astro

@@ -1 +1,107 @@
-<section></section>
+---
+import NonProfit from './NonProfit.astro';
+---
+
+<section class="lead" id="nonprofits">
+  <h4>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>
+
+<style lang="scss">
+  @use '../styles/breakpoints';
+  @use '../styles/colors';
+
+  .lead {
+    width: 100%;
+    padding-left: 1rem;
+    position: relative;
+    display: flex; 
+    flex-direction: column;
+    gap: 16px;
+    justify-content: center;
+    text-align: center;
+    color: colors.$text;
+
+    @media (min-width: breakpoints.$laptop) {
+      padding: 0 5rem 2rem 5rem;
+      grid-template-columns: 1fr 1fr 1fr; 
+      max-width: 800px;
+      margin: auto;
+    }
+  }
+
+  .emphasis {
+    font-family: "new-spirit", serif;
+    font-weight: 600;
+  }
+
+
+  .nonprofits {
+    width: 100%;
+    padding-left: 1rem;
+    position: relative;
+    display: grid; 
+    grid-template-columns: 1fr; 
+    gap: 24px;
+
+    @media (min-width: breakpoints.$laptop) {
+      padding: 0 5rem 5rem 5rem;
+      grid-template-columns: 1fr 1fr 1fr; 
+    }
+  }
+
+  #nonprofits {
+    margin-top: 180px;
+  }
+</style>