s1

app/components/AlbumsIndex.tsx

@@ -0,0 +1,41 @@
+let albumsData = [
+    {
+        id : "1",
+        type : "Art & Craft Album",
+        img : "/assets/athumbnail1.jpg",
+        url : "/albums/art-&-craft"
+    },
+    {
+        id : "2",
+        type : "GK & Group Activity",
+        img : "/assets/athumbnail2.jpg",
+        url : "/albums/gk-&-group-activity"
+    },
+    {
+        id : "3",
+        type : "Language & Maths",
+        img : "/assets/athumbnail3.jpg",
+        url : "/albums/language-&-maths"
+    }
+]
+
+
+export default function AlbumIndex(){
+    return(
+        <div>
+            <section className="container mx-auto px-4">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 p-8">
+                    {
+                        albumsData.map((data) => (
+                            <a href={data.url} key={data.id} className="rounded-[10px] border-[1px] border-[#D4D4D4] relative inline-block">
+                                <img className="w-full rounded-[10px]" src={data.img} alt="" />
+                                <h2 className="absolute bottom-6 left-6 text-[24px] font-[700] text-[#FFF] underline">{data.type}</h2>
+                            </a>
+                        ))
+                    }
+                    <div></div>
+                </div>
+            </section>
+        </div>
+    )
+}