Add IDs to all components of the website

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 && (

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 && (

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>

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>

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">
+<div 
-    <h1 class="text-5xl font-bold">Upcoming Events</h1>
+    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) => (

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>