From fc4f9ce657dcfad2b803c091c15709781bfbb070 Mon Sep 17 00:00:00 2001
From: Anya Parekh <49364484+anyaparekh@users.noreply.github.com>
Date: Wed, 16 Aug 2023 00:21:48 -0400
Subject: [PATCH] Add Sponsorship Section to Homepage (#89)

* Add sponsorship section to homepage

* Fix heart icon alignment

* Address PR comments
---
 src/lib/components/Icon.svelte |  3 ++-
 src/lib/utils/schema.ts        |  1 +
 src/routes/+page.svelte        | 30 ++++++++++++++++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte
index 0de19d9..fa33bde 100644
--- a/src/lib/components/Icon.svelte
+++ b/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} />
diff --git a/src/lib/utils/schema.ts b/src/lib/utils/schema.ts
index 447fdef..da5610c 100644
--- a/src/lib/utils/schema.ts
+++ b/src/lib/utils/schema.ts
@@ -64,6 +64,7 @@ export type Info = {
   applicationBlurb: string;
   homepageAbout: Image;
   homepagePartnerships: Image;
+  homepageSponsorships: Image;
   homepageBannerText: string;
   homepageBannerUrl: string;
 };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5b21557..64057a7 100644
--- a/src/routes/+page.svelte
+++ b/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;