Add reviews to the website

astro/src/components/web/Reviews.astro

@@ -0,0 +1,50 @@
+---
+import StarRating from './subcomponents/StarRating.astro';
+
+interface Props {
+    reviews: ReviewListComponent;
+}
+
+const reviews = Astro.props.reviews;
+
+let totalStars: number = 0;
+const totalReviews: number = reviews.reviews.length;
+
+reviews.reviews.forEach((review) => {
+    totalStars = totalStars + review.stars;
+});
+
+const averageStars = Math.round((totalStars / totalReviews) * 10) / 10;
+const reviewsToShow = reviews.reviews.slice(0, 5);
+---
+
+<div class="flex flex-row py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full">
+    <div class="flex flex-col gap-5 min-w-[32.5%]">
+        <div class="flex flex-col">
+            <h2 class="text-3xl font-bold">{reviews.title}</h2>
+            <div>{reviews.text}</div>
+        </div>
+
+        <div class="flex flex-col gap-1.5 text-lg">
+            <StarRating size="big" stars={averageStars} />
+            <p class="italic">{averageStars}</span> stars out of {totalReviews} {totalReviews === 1 ? "review" : "reviews"}.</p>
+        </div>
+    </div>
+
+    <div class="flex flex-col gap-6.5">
+        { reviewsToShow.map((review) => (
+            <div class="flex flex-col justify-center gap-3 bg-neutral-50 py-4 px-5.5 rounded-2xl shadow-sm">
+                <div class="flex flex-col justify-center gap-[5px]">
+                    <h4 class="text-2xl font-semibold">{review.name}</h4>
+                    <div>
+                        <StarRating size="small" stars={review.stars} />
+                    </div>
+                </div>
+
+                <div>
+                    { review.review }
+                </div>
+            </div>
+        )) }
+    </div>
+</div>