primitive gallery on indexpage

components/IndexGallery/IndexGallery.module.scss

@@ -0,0 +1,55 @@
+.gallerycontainer {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	@media screen and (max-width: 800px) {
+		flex-direction: column;
+		align-items: center;
+	}
+	gap: 1.5rem;
+	.galleryimg {
+		position: relative;
+		@media screen and (max-width: 800px) {
+			text-decoration: none;
+		}
+		img {
+			max-height: 18rem;
+			border-radius: 8px;
+			@media screen and (max-width: 800px) {
+				max-width: 250px;
+			}
+		}
+		article {
+			position: absolute;
+			backdrop-filter: blur(8px);
+			background: rgba(#fff, 0.4);
+			color: var(--backdrop);
+			bottom: 0;
+			width: 100%;
+			display: flex;
+			flex-direction: row;
+			align-items: baseline;
+			justify-content: space-between;
+			padding: 0.25rem 0.5rem;
+			border-radius: 8px;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+			transition-duration: 100ms;
+			opacity: 0;
+			@media screen and (max-width: 800px) {
+				display: block;
+				position: unset;
+				background: unset;
+				color: var(--white0);
+				padding: 0;
+				opacity: 1;
+			}
+		}
+		&:hover {
+			article {
+				opacity: 1;
+			}
+		}
+	}
+}

components/IndexGallery/IndexGallery.tsx

@@ -0,0 +1,32 @@
+import styles from "./IndexGallery.module.scss";
+import gallery from "../../data/gallery.json";
+import Link from "next/link";
+
+const IndexGallery = () => {
+	return (
+		<>
+			<main>
+				<h2>galeria zdjęć idących mocno</h2>
+			</main>
+			<main className={styles.gallerycontainer}>
+				{gallery.map((entry) => {
+					return (
+						<Link
+							key={entry.link}
+							href={entry.link}
+							className={styles.galleryimg}
+						>
+							<img src={entry.link} alt={entry.description} />
+							<article>
+								<h3>{entry.title}</h3>
+								<p>{entry.meta}</p>
+							</article>
+						</Link>
+					);
+				})}
+			</main>
+		</>
+	);
+};
+
+export { IndexGallery };