Merge branch 'main' into 20-prettier

1xINTERNET · Jun 18, 2024 · 7d8f9fb · 7d8f9fb
2 parents 4dbcf1b + 9656ecf
commit 7d8f9fb
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 13 deletions.
diff --git a/public/images/football.jpeg b/public/images/football.jpeg
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,8 +1,8 @@
 ---
-import IconTwitter from "../assets/icons/IconTwitter.astro";
-import IconYoutube from "../assets/icons/IconYoutube.astro";
-import IconInstagram from "../assets/icons/IconInstagram.astro";
-import HashtagWhyULoveFootball from "./HashtagWhyULoveFootball.astro";
+import IconTwitter from "@icons/IconTwitter.astro";
+import IconYoutube from "@icons/IconYoutube.astro";
+import IconInstagram from "@icons/IconInstagram.astro";
+import HashtagWhyULoveFootball from "@components/HashtagWhyULoveFootball.astro";
 ---
 
 <footer class="bg-black text-white">

diff --git a/src/components/NavigationBar.astro b/src/components/NavigationBar.astro
@@ -1,5 +1,5 @@
 ---
-import HashtagWhyULoveFootball from "./HashtagWhyULoveFootball.astro";
+import HashtagWhyULoveFootball from "@components/HashtagWhyULoveFootball.astro";
 ---
 
 <nav class="bg-transparent">

diff --git a/src/components/PlayVideoButton.astro b/src/components/PlayVideoButton.astro
@@ -1,5 +1,5 @@
 ---
-import IconPlayVideo from "../assets/icons/IconPlayVideo.astro";
+import IconPlayVideo from "@icons/IconPlayVideo.astro";
 ---
 
 <button

diff --git a/src/components/Section.astro b/src/components/Section.astro
@@ -0,0 +1,41 @@
+---
+import PrimaryLink from "./PrimaryLink.astro";
+
+interface Props {
+  backgroundColor: "blue" | "green";
+  backgroundImage?: string;
+  eyebrow?: string;
+  heading?: string;
+  links?: {
+    href: string;
+    text: string;
+  }[];
+}
+
+const { backgroundColor, backgroundImage, eyebrow, heading, links } =
+  Astro.props;
+---
+
+<section
+  class={backgroundImage
+    ? `bg-cover p-6 sm:p-12 h-full`
+    : `bg-${backgroundColor} p-6 sm:p-12`}
+  style=`background-image: url('${backgroundImage}')`
+>
+  <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-green"}`}
+  >
+    <div class="uppercase font-bold text-sm tracking-[3px]">{eyebrow}</div>
+    <div class="text-3xl sm:text-5xl text-center">{heading}</div>
+    <slot />
+    {
+      links && (
+        <div class="flex gap-6">
+          {links?.map((link) => (
+            <PrimaryLink href={link.href} text={link.text} />
+          ))}
+        </div>
+      )
+    }
+  </div>
+</section>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,6 +1,7 @@
 ---
-import Footer from "../components/Footer.astro";
-import NavigationBar from "../components/NavigationBar.astro";
+import Footer from "@components/Footer.astro";
+import NavigationBar from "@components/NavigationBar.astro";
+import Section from "@components/Section.astro";
 
 interface Props {
   title: string;
@@ -22,7 +23,18 @@ const { title } = Astro.props;
   <body>
     <main>
       <NavigationBar />
-
+      <Section
+        backgroundColor="green"
+        backgroundImage="../images/football.jpeg"
+        eyebrow="Our goal"
+        heading="Our goal is to donate 10 million balls to children around the world."
+        links={[
+          { href: "https://example.com", text: "Link" },
+          { href: "https://example.com", text: "Link" },
+        ]}
+      >
+        Slot content
+      </Section>
       <slot />
       <Footer />
     </main>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
-import Layout from "../layouts/Layout.astro";
-import "../styles/global.css";
+import Layout from "@layouts/Layout.astro";
+import "@styles/global.css";
 ---
 
 <Layout title="Welcome to Whyuluvfootball" />
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,3 +1,13 @@
 {
-  "extends": "astro/tsconfigs/strict"
-}
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@icons/*": ["src/assets/icons/*"],
+      "@components/*": ["src/components/*"],
+      "@layouts/*": ["src/layouts/*"],
+      "@pages/*": ["src/pages/*"],
+      "@styles/*": ["src/styles/*"]
+    }
+  }
+}