feat(home): finished, cards should be resized, todo added comments

src/Gallery/Slideshow.jsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+import "./slideshow.css";
+export default function Slideshow() {
+	let listPhotos = [
+		{ imgUrl: "https://picsum.photos/200", imgAlt: "Lorem picsum1" },
+		{ imgUrl: "https://picsum.photos/200/200", imgAlt: "Lorem picsum2" },
+		{ imgUrl: "https://picsum.photos/200/400", imgAlt: "Lorem picsum3" },
+		{ imgUrl: "https://picsum.photos/200/600", imgAlt: "Lorem picsum4" },
+	];
+
+	var slideIndex = 1;
+	useEffect(() => {
+		showSlides(slideIndex);
+	}, []);
+
+	const plusSlides = (n) => {
+		slideIndex += n;
+		showSlides();
+	};
+
+	const showSlides = () => {
+		let i;
+		let slides = document.getElementsByClassName("slides");
+		if (slideIndex > slides.length) {
+			slideIndex = 1;
+		}
+		if (slideIndex < 1) {
+			slideIndex = slides.length;
+		}
+		for (i = 0; i < slides.length; i++) {
+			slides[i].style.display = "none";
+		}
+		slides[slideIndex - 1].style.display = "block";
+	};
+	return (
+		<div className="slideshow">
+			{/* you can use keys to get the index of the value to show either dots or what place they are out of x */}
+			{Object.values(listPhotos).map((photoDetail) => {
+				return (
+					<img
+						key={photoDetail.imgAlt}
+						className="slides fade"
+						src={photoDetail.imgUrl}
+						alt={photoDetail.imgAlt}
+					/>
+				);
+			})}
+			<a
+				className="prev-button"
+				onClick={() => plusSlides(-1)}>
+				❮
+			</a>
+			<a
+				className="next-button"
+				onClick={() => plusSlides(1)}>
+				❯
+			</a>
+		</div>
+	);
+}