Add sponsorship section to homepage

src/lib/utils/schema.ts

@@ -64,6 +64,7 @@ export type Info = {
   applicationBlurb: string;
   homepageAbout: Image;
   homepagePartnerships: Image;
+  homepageSponsorships: Image;
   homepageBannerText: string;
   homepageBannerUrl: string;
 };

src/routes/+page.svelte

@@ -99,6 +99,34 @@
   </Row>
 </Section>
 
+<Section id="sponsorships" color="var(--blue)" padding="60px">
+  <Row gap={84} reverse
+    ><figure>
+      <img
+        src={data.info.homepageSponsorships.src}
+        alt={data.info.homepageSponsorships.alt}
+      />
+    </figure>
+    <div id="sponsorship-content">
+      <h2>
+        We
+        <Icon icon="heart" width="1em" height="1em" />
+        Our Sponsors
+      </h2>
+      <div class="row-center" />
+      <p>
+        Our drive to write impactful software for social good is made possible
+        by equally socially minded organizations. A sponsorship with Hack4Impact
+        is a lasting relationship that brings us to your commnunity and, in
+        turn, supports our work.
+      </p>
+      <div class="row-center gap">
+        <Button type="primary-white" href="/join/sponsors">For Sponsors</Button>
+      </div>
+    </div>
+  </Row>
+</Section>
+
 <style>
   a {
     text-decoration: none;
@@ -163,6 +191,11 @@
     color: var(--blue-darker);
   }
 
+  #sponsorship-content {
+    color: white;
+    vertical-align: top;
+  }
+
   figure > img {
     width: 100%;
     border-radius: 4px;