[refactor] make clean up edits

src/components/About.astro

@@ -1,10 +1,10 @@
 ---
 import { Image } from 'astro:assets';
 import working from '../graphics/about/working.webp';
-import crowdLarge from '../graphics/about/crowd-large.webp';
+import crowdLarge from '../graphics/about/crowd_large.webp';
 import fourppl from '../graphics/about/fourppl.webp';
 import bear from '../graphics/about/bear.webp';
-import annie from '../graphics/about/anniew.webp';
+import tools from '../graphics/about/tools.webp';
 import crowd from '../graphics/about/crowd.webp';
 ---
 
@@ -26,13 +26,13 @@ import crowd from '../graphics/about/crowd.webp';
       src={crowdLarge}
       alt="Large group of people coding at hackathon"
     />
-    <Image class="img" src={fourppl} alt="Picture of Calhacks members" />
+    <Image class="img" src={fourppl} alt="Picture of CalHacks members" />
     <Image
       class="img"
       src={bear}
       alt="Hackathon attendees posing with stuffed bear"
     />
-    <Image class="img" src={annie} alt="Girl with tools" />
+    <Image class="img" src={tools} alt="Girl with tools" />
     <Image
       class="img"
       src={crowd}
@@ -86,6 +86,7 @@ import crowd from '../graphics/about/crowd.webp';
   @use '../styles/fonts';
 
   section {
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -167,5 +168,6 @@ import crowd from '../graphics/about/crowd.webp';
     border-radius: 8px;
     width: 264px;
     height: 171px;
+    object-fit: cover;
   }
 </style>

src/components/Contact.astro

@@ -1,30 +1,37 @@
-<section> 
+<section>
   <h4 id="contact">CONTACT US</h4>
   <div class="spacer"></div>
   <div class="row">
     <h3>Any other&nbsp;</h3><h2>questions?</h2>
   </div>
   <div class="spacer"></div>
-  <p class="description">We are here to help you! Please check the FAQ first; 
-    If your question is not already answered, you can reach us at 
-    <a class="email" href="mailto:[email protected]">[email protected]</a>.<br>
-    <br>
-    Please email <a class="email" href="mailto:[email protected]">[email protected]</a>
-    if you need a particular accommodation.
-    Note that requests made less than 24 hours before the event will likely not be accommodated.
+  <p class="description">
+    We are here to help you! Please check the FAQ first; If your question is not
+    already answered, you can reach us at
+    <a class="email" href="mailto:[email protected]"
+      >[email protected]</a
+    >.<br />
+    <br />
+    Please email <a class="email" href="mailto:[email protected]"
+      >[email protected]</a
+    >
+    if you need a particular accommodation. Note that requests made less than 24
+    hours before the event will likely not be accommodated.
   </p>
 </section>
 
 <style lang="scss">
   section {
+    position: relative;
     display: flex;
     flex-direction: column;
-    align-items: center; 
+    align-items: center;
     text-align: center;
-    width: 46.5rem;
     margin: 0 auto;
+    padding: 0 20%;
     padding-top: 10.75rem;
   }
+
   div.spacer {
     height: 1.5rem;
   }
@@ -39,6 +46,7 @@
   }
 
   a.email {
-    text-decoration-line: underline; // the underline is too close to the text... 
+    text-decoration-line: underline; // the underline is too close to the text...
+    text-underline-offset: 2px;
   }
-</style>
+</style>

src/components/FAQ.astro

@@ -73,9 +73,9 @@ const faqsCol1 = faqs.slice(0, split);
 const faqsCol2 = faqs.slice(split);
 ---
 
-<section id="faq">
+<section>
   <div class="faq-headers">
-    <h4>FAQ</h4>
+    <h4 id="faq">FAQ</h4>
     <h2>
       Frequently asked questions <span>– we've got the answers</span>
     </h2>
@@ -101,13 +101,15 @@ const faqsCol2 = faqs.slice(split);
 </section>
 
 <style lang="scss">
-  @use '../styles/_fonts.scss';
+  @use '../styles/fonts';
+  @use '../styles/breakpoints';
 
-  #faq {
+  section {
+    position: relative;
     display: flex;
     flex-direction: column;
-    width: 80vw;
-    margin: 10rem auto 0;
+    width: 100%;
+    margin: 160px auto 0;
   }
 
   .faq-headers {
@@ -127,15 +129,22 @@ const faqsCol2 = faqs.slice(split);
   .faq-content {
     display: flex;
     gap: 32px;
-    width: 62rem;
+    width: 100%;
+    flex-direction: column;
     align-items: flex-start;
     margin: 0 auto;
+
+    @media (min-width: breakpoints.$laptop) {
+      width: 900px;
+      flex-direction: row;
+    }
   }
+
   .faq-container {
     display: flex;
     flex-direction: column;
     gap: 35px;
-    width: 50%;
+    flex: 1;
     padding: 0 0.7rem;
   }
 </style>

src/components/Header.astro

@@ -23,5 +23,7 @@ import Hero from './Hero.astro';
     width: 100%;
     display: flex;
     flex-direction: column;
+    justify-content: center;
+    align-items: center;
   }
 </style>

src/components/Hero.astro

@@ -26,20 +26,16 @@ import arrowsIcon from '../graphics/arrows.svg';
       <a
         href="https://www.instagram.com/calblueprint/"
         target="_blank"
-        referrerpolicy="no-referrer"
+        referrerpolicy="no-referrer">@calblueprint</a
       >
-        @calblueprint
-      </a>
 
       and
 
       <a
         href="https://www.instagram.com/calhacks/"
         target="_blank"
         referrerpolicy="no-referrer"
-      >
-        @calhacks
-      </a>
+      >@calhacks</a>
 
       on Instagram for updates.
     </span>
@@ -70,6 +66,10 @@ import arrowsIcon from '../graphics/arrows.svg';
       width: min-content;
       gap: 20px;
     }
+
+    span > a:hover {
+      text-decoration-line: underline;
+    }
   }
 
   .btn-text {

src/components/Navbar/style.module.scss

@@ -2,10 +2,12 @@
 @use '../../styles/breakpoints';
 
 nav {
+  position: fixed;
+  top: 0;
+
   display: flex;
   justify-content: space-between;
   align-items: center;
-  position: fixed;
   width: 100%;
   height: 4.5rem;
   padding: 8px 4.5rem;
@@ -74,6 +76,10 @@ nav {
 
 .links a {
   color: colors.$text;
+
+  h5:hover {
+    text-decoration-line: underline;
+  }
 }
 
 .mobileLinks {

src/components/NonProfit.astro

@@ -1,46 +1,87 @@
 ---
+interface Props {
+  name: string;
+  description: string;
+  image: string;
+  startColor: string;
+  endColor: string;
+  url?: string;
+}
+
 const { name, description, image, startColor, endColor, url } = Astro.props;
 ---
 
-<a class="card" href={url || "#"} target="_blank">
-  <h3>
-    {name}
-  </h3>
-  {description}
-</a>
+<div class="card">
+  <div class="bg"></div>
+  <a href={url || null} target="_blank">
+    <h3>
+      {name}
+    </h3>
+    <p>
+      {description}
+    </p>
+  </a>
+</div>
 
-<style lang="scss" define:vars={{ image: `url(${image})`, startColor, endColor }}>
+<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;
+    position: relative;
+    overflow: hidden;
+    border-radius: 12px;
+
+    .bg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      background-image: linear-gradient(var(--startColor), var(--endColor)),
+        var(--image);
+      background-size: cover;
+      background-position: center;
+      transition: transform 0.225s ease-in-out;
+    }
+
+    &:hover > .bg {
+      transform: scale(1.05);
+    }
+
+    a {
+      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%;
+
+      @media (min-width: breakpoints.$laptop) {
+        padding-top: 0;
+        aspect-ratio: 10 / 9;
+      }
+    }
+
+    &:hover > h3 {
+      text-decoration: underline;
+    }
   }
-  
+
   h3 {
-    font-family: "new-spirit", serif;
+    font-family: 'new-spirit', serif;
     line-height: 1;
   }
-</style>
+
+  p {
+    font-weight: 400;
+  }
+</style>