Feature/explore featured boards

src/components/ExploreFeaturedBoard/FeaturedBoardCard.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import styles from "./FeaturedBoards.module.css"; 
+
+const FeaturedBoardCard = ({ board }) => {
+  return (
+    <div className={styles.boardCard}>
+      <div className={styles.boardImages}>
+        <div className={styles.leftImg}>
+          <img src={board.images[0]} alt={`${board.title} 0`} />
+        </div>
+        <div className={styles.rightImgs}>
+          <img src={board.images[1]} alt={`${board.title} 1`} />
+          <img src={board.images[2]} alt={`${board.title} 2`} />
+        </div>
+      </div>
+      <div className={styles.boardInfo}>
+        <h3>{board.title}</h3>
+        <div className={styles.boardMeta}>
+          <span className={styles.verified}>
+            Pinterest Deutschland
+            <CheckCircleIcon />
+          </span>
+        </div>
+        <p>
+          {board.pins} Pins • {board.daysAgo}d
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default FeaturedBoardCard;

src/components/ExploreFeaturedBoard/FeaturedBoards.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import FeaturedBoardCard from './FeaturedBoardCard';
+import styles from './FeaturedBoards.module.css';
+
+
+const generateRandomImages = (id) => [
+  `https://picsum.photos/seed/${id}-1/300/300`,
+  `https://picsum.photos/seed/${id}-2/150/145`,
+  `https://picsum.photos/seed/${id}-3/150/145`,
+];
+
+const baseBoards = [
+  { title: "Ballerina-Schuhe Outfits", pins: 53, daysAgo: 1 },
+  { title: "Leckere Tofu-Rezepte", pins: 60, daysAgo: 2 },
+  { title: "Mocktails & Drinks", pins: 44, daysAgo: 3 },
+  { title: "Osterbrunch-Ideen", pins: 47, daysAgo: 5 },
+  { title: "Inspirierende Sprüche", pins: 60, daysAgo: 5 },
+  { title: "Playlist-Cover-Ideen", pins: 84, daysAgo: 1 },
+  { title: "Hautpflege für Männer", pins: 75, daysAgo: 1 },
+  { title: "Alles voller Sticker", pins: 50, daysAgo: 5 },
+  { title: "Split-Screen-Fotoideen", pins: 61, daysAgo: 1 },
+  { title: "Abiball-Frisuren", pins: 61, daysAgo: 1 },
+];
+
+
+const boardsData = baseBoards.map((board, index) => ({
+  ...board,
+  images: generateRandomImages(index)
+}));
+
+const FeaturedBoards = () => {
+  return (
+    <div className={styles.boardsContainer}>
+      <h2 className={styles.sectionTitle}>Explore featured boards</h2>
+      <div className={styles.boardsGrid}>
+        {boardsData.map((board, index) => (
+          <FeaturedBoardCard key={index} board={board} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FeaturedBoards;
+

src/components/ExploreFeaturedBoard/FeaturedBoards.module.css

@@ -0,0 +1,153 @@
+/* Container + Grid */
+.boardsContainer {
+  padding: 24px;
+  max-width: 1200px;
+  margin: auto;
+}
+
+.sectionTitle {
+  font-size: 28px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.boardsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 20px;
+}
+
+/* Card Styles */
+.boardCard {
+  cursor: pointer;
+  border-radius: 12px;
+  overflow: hidden;
+  background: white;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s ease;
+  font-family: sans-serif;
+}
+
+.boardCard:hover {
+  transform: translateY(-4px);
+}
+
+
+.boardImages {
+  display: flex;
+  background-color: white;
+  gap: 2px;
+  padding: 2px;
+  box-sizing: border-box;
+}
+
+.leftImg,
+.rightImgs {
+  background-color: white;
+  overflow: hidden;
+}
+
+/* Left Large Image */
+.leftImg {
+  flex: 2;
+}
+
+.leftImg img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Right Stacked Images */
+.rightImgs {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.rightImgs img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Card Info */
+.boardInfo {
+  padding: 10px 12px;
+}
+
+.boardInfo h3 {
+  font-size: 14px;
+  margin: 0 0 6px;
+  font-weight: 600;
+}
+
+.boardMeta {
+  font-size: 11px;
+  color: #767676;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 2px;
+}
+
+.verified {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+
+.verified svg {
+  color: #e60023 !important;
+  font-size: 14px !important;
+}
+
+/* Meta text */
+.boardInfo p {
+  font-size: 11px;
+  color: #767676;
+  margin: 0;
+}
+
+
+@media (max-width: 768px) {
+  .sectionTitle {
+    font-size: 24px;
+  }
+
+  .boardInfo h3 {
+    font-size: 13px;
+  }
+
+  .boardInfo p,
+  .boardMeta {
+    font-size: 10px;
+  }
+}
+
+@media (max-width: 480px) {
+  .boardsContainer {
+    padding: 16px;
+  }
+
+  .boardsGrid {
+    gap: 16px;
+  }
+
+  .sectionTitle {
+    font-size: 20px;
+  }
+
+  .boardInfo h3 {
+    font-size: 12px;
+  }
+
+  .boardInfo p,
+  .boardMeta {
+    font-size: 9.5px;
+  }
+}

src/pages/Explorepage.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
+import FeaturedBoards from "../components/ExploreFeaturedBoard/FeaturedBoards";
 
 function Explorepage() {
   return (
@@ -13,7 +14,8 @@ function Explorepage() {
           Go to Image Detail
         </Link>
       </nav>
-    </div>
+      <FeaturedBoards />
+    </div> 
   );
 }