Merge branch 'main' into feature/14-update-navigation-and-create-sect…

…ions

src/components/Footer.astro

@@ -41,9 +41,7 @@ import HashtagWhyULoveFootball from "@components/HashtagWhyULoveFootball.astro";
         <a href="/privacy-policy" class="text-white hover:underline"
           >Privacy Policy</a
         >
-        <a href="/terms-conditions" class="text-white hover:underline"
-          >Terms & Conditions</a
-        >
+        <a href="/imprint" class="text-white hover:underline">Imprint</a>
       </div>
     </div>
   </div>

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/layouts/Layout.astro

@@ -1,6 +1,5 @@
 ---
 import Footer from "@components/Footer.astro";
-import Hero from "@components/Hero.astro";
 
 interface Props {
   title: string;
@@ -21,7 +20,6 @@ const { title } = Astro.props;
   </head>
   <body>
     <main>
-      <Hero />
       <slot />
       <Footer />
     </main>

src/pages/imprint.astro

@@ -0,0 +1,14 @@
+---
+import Layout from "@layouts/Layout.astro";
+import "@styles/global.css";
+---
+
+<Layout title="Imprint">
+  <div class="container mx-auto py-8 px-4 sm:py-12 sm:px-8 lg:py-16 lg:px-28">
+    <div class="flex items-center justify-between">
+      <h1 class="mb-4">Imprint</h1>
+      <a class="hover:underline text-blue" href="/">Back</a>
+    </div>
+    <p>Imprint text goes here...</p>
+  </div>
+</Layout>

src/pages/index.astro

@@ -1,13 +1,17 @@
 ---
+import Hero from "../components/Hero.astro";
 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";
 import HowToHelp from "../components/HowToHelp.astro";
 import AboutUs from "../components/AboutUs.astro";
 ---
 
 <Layout title="Welcome to Whyuluvfootball">
+  <Hero />
   <Section
     backgroundColor="green"
     eyebrow="Our goal"
@@ -29,19 +33,30 @@ import AboutUs from "../components/AboutUs.astro";
   >
     <VideoPlayer />
   </Section>
-  <Section
-    backgroundColor="green"
-    eyebrow="How to help"
-    heading=""
-    id="how-to-help"
-  >
+  <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="blue" eyebrow="How to help" id="how-to-help">
     <HowToHelp />
   </Section>
-  <Section backgroundColor="blue" eyebrow="About us" heading="" id="about-us">
+  <Section backgroundColor="green" eyebrow="About us" id="about-us">
     <AboutUs />
   </Section>
   <Section
-    backgroundColor="green"
+    backgroundColor="blue"
     contentImage="/images/goal.jpeg"
     eyebrow="Donations"
     heading="Let's get every child a football."

src/pages/privacy-policy.astro

@@ -0,0 +1,14 @@
+---
+import Layout from "@layouts/Layout.astro";
+import "@styles/global.css";
+---
+
+<Layout title="Imprint">
+  <div class="container mx-auto py-8 px-4 sm:py-12 sm:px-8 lg:py-16 lg:px-28">
+    <div class="flex items-center justify-between">
+      <h1 class="mb-4">Privacy policy</h1>
+      <a class="hover:underline text-blue" href="/">Back</a>
+    </div>
+    <p>Privacy policy text goes here...</p>
+  </div>
+</Layout>

src/styles/global.css

@@ -41,6 +41,10 @@
     font-display: swap;
   }
 
+  html {
+    @apply scroll-smooth;
+  }
+
   h1 {
     @apply text-[64px] leading-[78px];
   }
@@ -55,7 +59,7 @@
 
   body,
   p {
-    @apply text-[18px] leading-6;
+    @apply text-[18px] leading-6 mb-4 last:mb-0;
   }
 
   @media only screen and (max-width: 640px) {
@@ -71,3 +75,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)];
+  }
+}