Add Sponsorship Section to Homepage (#89)

* Add sponsorship section to homepage

* Fix heart icon alignment

* Address PR comments

src/lib/components/Icon.svelte

@@ -79,7 +79,8 @@
   export let icon: IconType;
   export let width: string | number = "100%";
   export let height: string | number = "100%";
+  export let inline = false;
   export let color = "currentColor";
 </script>
 
-<Icon icon={iconMap[icon].name} {width} {height} {color} />
+<Icon icon={iconMap[icon].name} {width} {height} {color} {inline} />

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,32 @@
   </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" inline />
+        Our Sponsors
+      </h2>
+      <div class="row-center" />
+      <p>
+        A sponsorship with Hack4Impact is a lasting relationship that brings us
+        to your community and, in turn, supports our work.
+      </p>
+      <div class="row-center gap">
+        <Button type="primary-white" href="/join/sponsors">Work With Us</Button>
+      </div>
+    </div>
+  </Row>
+</Section>
+
 <style>
   a {
     text-decoration: none;
@@ -163,6 +189,10 @@
     color: var(--blue-darker);
   }
 
+  #sponsorship-content {
+    color: white;
+  }
+
   figure > img {
     width: 100%;
     border-radius: 4px;