Merge pull request #18 from 1xINTERNET/28-partners

#28: Partners

src/components/PartnerLink.astro

@@ -0,0 +1,14 @@
+---
+interface Props {
+  logo: string;
+  name: string;
+  size: number;
+  url: string;
+}
+
+const { logo, name, size, url } = Astro.props;
+---
+
+<a class="partner-link" href={url} data-size={size} title={name} target="_blank"
+  ><img src={logo} /></a
+>

src/components/PartnerLinks.astro

@@ -0,0 +1,78 @@
+---
+
+---
+
+<div class="partner-links">
+  <div>
+    <partner-link
+      logo="/images/1xinternet.png"
+      brand="1xINTERNET"
+      url="https://1xintrnet.de/"></partner-link>
+  </div>
+  <div>
+    <partner-link
+      logo="/images/sowandsow.png"
+      brand="Sow & Sow"
+      url="https://www.sowxsow.com/"></partner-link>
+    <partner-link
+      logo="/images/c_sr.png"
+      brand="C_SR"
+      url="https://www.c-sr.org/"></partner-link>
+  </div>
+  <div>
+    <partner-link
+      logo="/images/1xinternet.png"
+      brand="fount"
+      url="https://example.com"></partner-link>
+    <partner-link
+      logo="/images/1xinternet.png"
+      brand="progressiva"
+      url="https://example.com"></partner-link>
+    <partner-link
+      logo="/images/1xinternet.png"
+      brand="büro lehmann"
+      url="https://example.com"></partner-link>
+  </div>
+  <div>
+    <partner-link
+      logo="/images/1xinternet.png"
+      brand="CRAFT BRÄU"
+      url="https://example.com"></partner-link>
+    <partner-link
+      logo="/images/tante-kathe.png"
+      brand="Tante Käthe"
+      url="https://tante-kaethe-fussballkneipe.de/"></partner-link>
+  </div>
+  <div>
+    <partner-link
+      color="#02a95c"
+      logo="/images/gofundme.png"
+      brand="GoFundMe"
+      url="https://www.gofundme.com/"></partner-link>
+    <partner-link
+      logo="/images/betterplace.png"
+      brand="Betterplace"
+      url="https://www.betterplace.org/"></partner-link>
+  </div>
+</div>
+
+<script>
+  class PartnerLink extends HTMLElement {
+    constructor() {
+      super();
+      const _randomSize = (Math.floor(Math.random() * 3) + 1).toString();
+      const a = document.createElement("a");
+      a.classList.add("partner-link");
+      a.setAttribute("data-size", _randomSize);
+      a.style.backgroundColor = this.getAttribute("color") ?? "white";
+      a.href = this.getAttribute("url");
+      a.setAttribute("target", "_blank");
+      a.setAttribute("title", this.getAttribute("brand"));
+      this.appendChild(a);
+      const img = document.createElement("img");
+      img.src = this.getAttribute("logo");
+      a.appendChild(img);
+    }
+  }
+  customElements.define("partner-link", PartnerLink);
+</script>

src/components/PrimaryLink.astro

@@ -9,7 +9,7 @@ const { text, href } = Astro.props;
 
 <a
   href={href}
-  class="bg-white text-blue font-bold py-5 px-8 transition-all duration-300 hover:bg-[#ECE9FF] hover:shadow-lg active:bg-white active:shadow-none text-xl cursor-pointer shadow-flat"
+  class="bg-white text-blue font-bold py-5 px-8 transition-all duration-300 hover:bg-[#ECE9FF] hover:shadow-lg active:bg-white active:shadow-none text-xl cursor-pointer shadow-flat inline-block"
 >
   {text}
 </a>

src/components/Section.astro

@@ -34,11 +34,15 @@ const {
   <div
     class={`container flex flex-col gap-6 sm:gap-12 items-center justify-center mx-auto ${backgroundImage ? "text-light-lilac" : backgroundColor === "green" ? "text-blue" : "text-white"}`}
   >
-    <div
-      class=`uppercase font-bold text-sm ${backgroundColor === "green" ? "text-blue" : "text-green"} tracking-[3px]`
-    >
-      {eyebrow}
-    </div>
+    {
+      eyebrow && (
+        <div
+          class={`uppercase font-bold text-sm ${backgroundColor === "green" ? "text-blue" : "text-green"} tracking-[3px]`}
+        >
+          {eyebrow}
+        </div>
+      )
+    }
     <div
       class=`flex flex-col sm:flex-row gap-6 sm:gap-12 sm:gap-24 items-center`
     >
@@ -54,12 +58,16 @@ const {
       <div
         class=`flex flex-col gap-6 sm:gap-12 items-center ${contentImage ? 'sm:items-start' : ''}`
       >
-        <div
-          class=`flex flex-col items-center text-center ${contentImage ? 'sm:items-start sm:text-left' : ''}`
-        >
-          <h2>{heading}</h2>
-          {subheading && <h2 class="font-light">{subheading}</h2>}
-        </div>
+        {
+          (heading || subheading) && (
+            <div
+              class={`flex flex-col items-center text-center ${contentImage ? "sm:items-start sm:text-left" : ""}`}
+            >
+              {heading && <h2>{heading}</h2>}
+              {subheading && <h2 class="font-light">{subheading}</h2>}
+            </div>
+          )
+        }
         <slot />
         {
           links && (

src/pages/index.astro

@@ -1,6 +1,8 @@
 ---
 import Layout from "@layouts/Layout.astro";
 import "@styles/global.css";
+import PartnerLinks from "../components/PartnerLinks.astro";
+import PrimaryLink from "../components/PrimaryLink.astro";
 import Section from "../components/Section.astro";
 import VideoPlayer from "../components/VideoPlayer.astro";
 ---
@@ -26,8 +28,24 @@ import VideoPlayer from "../components/VideoPlayer.astro";
   >
     <VideoPlayer />
   </Section>
+  <Section backgroundColor="green" id="partners">
+    <div
+      class="flex flex-col gap-6 sm:gap-12 items-center max-w-[800px] text-center"
+    >
+      <h2>Our Partners and Collaborators</h2>
+      <p>
+        We are proud to have the support of numerous partners and supporters who
+        share our vision and have joined us in the 'WHY YOU LOVE FOOTBALL'
+        campaign. Thanks to their valuable contribution, we are one step closer
+        to achieving our goal of donating 10 million footballs to children in
+        need around the world.
+      </p>
+      <PartnerLinks />
+      <PrimaryLink href="mailto:[email protected]" text="Become a partner" />
+    </div>
+  </Section>
   <Section
-    backgroundColor="green"
+    backgroundColor="blue"
     contentImage="/images/goal.jpeg"
     eyebrow="Donations"
     heading="Let's get every child a football."

src/styles/global.css

@@ -71,3 +71,36 @@
     @apply aspect-video;
   }
 }
+
+@layer components {
+  .partner-links {
+    @apply gap-4 grid grid-cols-5;
+  }
+  .partner-links div {
+    @apply flex flex-col gap-4 items-center justify-center;
+  }
+  .partner-link {
+    @apply aspect-square bg-white flex items-center justify-center overflow-hidden rounded-full;
+  }
+  .partner-link[data-size="1"] {
+    @apply w-12 sm:w-20;
+  }
+  .partner-link[data-size="2"] {
+    @apply w-14 sm:w-24;
+  }
+  .partner-link[data-size="3"] {
+    @apply w-16 sm:w-28;
+  }
+  .partner-link img {
+    @apply p-[2%];
+  }
+  .partner-link[data-size="1"] img {
+    @apply w-[calc(48px_/_1.414)] sm:w-[calc(80px_/_1.414)];
+  }
+  .partner-link[data-size="2"] img {
+    @apply w-[calc(56px_/_1.414)] sm:w-[calc(96px_/_1.414)];
+  }
+  .partner-link[data-size="3"] img {
+    @apply w-[calc(64px_/_1.414)] sm:w-[calc(112px_/_1.414)];
+  }
+}