From 82c0905c0e25c2fdc9644869b1b93e1b2f5cde63 Mon Sep 17 00:00:00 2001
From: itsfinniii <102350242+itsfinniii@users.noreply.github.com>
Date: Thu, 26 Mar 2026 22:08:04 +0100
Subject: [PATCH] Add IDs to all components of the website

---
 astro/src/components/web/EquipmentTable.astro           | 5 ++++-
 astro/src/components/web/FrequentlyAskedQuestions.astro | 5 ++++-
 astro/src/components/web/LastBlogs.astro                | 5 ++++-
 astro/src/components/web/Reviews.astro                  | 5 ++++-
 astro/src/components/web/UpcomingEvents.astro           | 7 +++++--
 astro/src/components/web/WallOfText.astro               | 5 ++++-
 6 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/astro/src/components/web/EquipmentTable.astro b/astro/src/components/web/EquipmentTable.astro
index c7aa45a..3ed3717 100644
--- a/astro/src/components/web/EquipmentTable.astro
+++ b/astro/src/components/web/EquipmentTable.astro
@@ -9,7 +9,10 @@ interface Props {
 const equipment = Astro.props.equipment;
 ---
 
-<div class="flex lg:flex-row flex-col lg:justify-center justify-center py-12 px-12 lg:container mx-auto gap-y-8 lg:gap-x-28 gap-x-18 lg:text-left text-center">
+<div
+    id={`equipment-${equipment.id}`}
+    class="flex lg:flex-row flex-col lg:justify-center justify-center py-12 px-12 lg:container mx-auto gap-y-8 lg:gap-x-28 gap-x-18 lg:text-left text-center"
+>
     <div class="flex flex-col gap-1.5">
         <h2 class="text-5xl font-bold">{equipment.title}</h2>
         { equipment.text !== null && (
diff --git a/astro/src/components/web/FrequentlyAskedQuestions.astro b/astro/src/components/web/FrequentlyAskedQuestions.astro
index 6a64033..5bd43f3 100644
--- a/astro/src/components/web/FrequentlyAskedQuestions.astro
+++ b/astro/src/components/web/FrequentlyAskedQuestions.astro
@@ -9,7 +9,10 @@ interface Props {
 const faq = Astro.props.faq;
 ---
 
-<div class="flex lg:flex-row flex-col justify-between py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full">
+<div
+    id={`faq-${faq.id}`}
+    class="flex lg:flex-row flex-col justify-between py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
+>
     <div class="flex flex-col gap-2.5 lg:w-[50%] w-full">
         <h2 class="text-5xl font-bold">{faq.title}</h2>
         { faq.text !== null && (
diff --git a/astro/src/components/web/LastBlogs.astro b/astro/src/components/web/LastBlogs.astro
index 2d40dba..844ea5b 100644
--- a/astro/src/components/web/LastBlogs.astro
+++ b/astro/src/components/web/LastBlogs.astro
@@ -26,7 +26,10 @@ const lastBlogs = await getLastBlogs(blogs.amount);
 const size = calculateSizeClasses(blogs.amount, lastBlogs.length);
 ---
 
-<div class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full">
+<div
+    id={`lastblogs-${blogs.id}`}
+    class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
+>
     <div class="flex flex-row justify-between items-center w-full">
         <h2 class="text-4xl font-bold">{blogs.title}</h2>
         <div>
diff --git a/astro/src/components/web/Reviews.astro b/astro/src/components/web/Reviews.astro
index 354aa51..d602ab9 100644
--- a/astro/src/components/web/Reviews.astro
+++ b/astro/src/components/web/Reviews.astro
@@ -19,7 +19,10 @@ const averageStars = Math.round((totalStars / totalReviews) * 10) / 10;
 const reviewsToShow = reviews.reviews.slice(0, 5);
 ---
 
-<div class="flex lg:flex-row flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full">
+<div
+    id={`reviews-${reviews.id}`}
+    class="flex lg:flex-row flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
+>
     <div class="flex flex-col lg:gap-5 gap-2.25 lg:min-w-[32.5%]">
         <div class="flex flex-col">
             <h2 class="text-3xl font-bold">{reviews.title}</h2>
diff --git a/astro/src/components/web/UpcomingEvents.astro b/astro/src/components/web/UpcomingEvents.astro
index 6a70af0..2dbcf4c 100644
--- a/astro/src/components/web/UpcomingEvents.astro
+++ b/astro/src/components/web/UpcomingEvents.astro
@@ -11,8 +11,11 @@ interface Props {
 const upcomingEvents = Astro.props.upcomingEvents;
 ---
 
-<div id={`upcomingevents-${upcomingEvents.id}`} class="flex flex-col justify-between items-center py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18">
-    <h1 class="text-5xl font-bold">Upcoming Events</h1>
+<div 
+    id={`upcomingevents-${upcomingEvents.id}`}
+    class="flex flex-col justify-between items-center py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18"
+>
+    <h1 class="text-5xl font-bold">{upcomingEvents.title}</h1>
     
     <div class="flex flex-col items-start gap-7 w-full">
         { upcomingEvents.events.map((event) => (
diff --git a/astro/src/components/web/WallOfText.astro b/astro/src/components/web/WallOfText.astro
index 839e54f..59eb421 100644
--- a/astro/src/components/web/WallOfText.astro
+++ b/astro/src/components/web/WallOfText.astro
@@ -8,7 +8,10 @@ interface Props {
 const wallOfText = Astro.props.wallOfText;
 ---
 
-<div id={`walloftext-${wallOfText.id}`} class="flex flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full">
+<div
+    id={`walloftext-${wallOfText.id}`}
+    class="flex flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
+>
     <h2 class="text-5xl font-bold">{wallOfText.title}</h2>
     <div set:html={markdownToHtml(wallOfText.text)}></div>
 </div>