Update pages/index.js

pages/index.js

@@ -2,19 +2,21 @@ import GlassCard from '../components/GlassCard';
 import MainLayout from '../layouts/MainLayout';
 
 export default function Home() {
-  const posts = [ /* ... your data ... */ ];
+  // Mock Data - Replace with real data later
+  const posts = [
+    { id: 1, image: "/assets/model1.jpg", caption: "Summer Collection", price: "$45" },
+    { id: 2, image: "/assets/model2.jpg", caption: "Urban Fit", price: "$80" },
+    { id: 3, image: "/assets/model3.jpg", caption: "Evening Wear", price: "$120" },
+  ];
 
   return (
     <MainLayout>
-      {/* h-[100dvh] = Full Dynamic Viewport Height (ignores browser bars)
-         overflow-y-scroll = Allows vertical scrolling
-         snap-y snap-mandatory = Forces the scroll to stop exactly on a card
-      */}
+      {/* THE SNAP CONTAINER */}
       <div className="h-[100dvh] w-full overflow-y-scroll snap-y snap-mandatory scroll-smooth no-scrollbar">
         
         {posts.map((post) => (
-          // Each card wrapper must be full screen and defined as a snap point
-          <div key={post.id} className="w-full h-[100dvh] snap-start snap-always">
+          // snap-start = Locks the card to the top of the screen
+          <div key={post.id} className="w-full h-[100dvh] snap-start flex items-center justify-center p-4">
             <GlassCard 
               image={post.image}
               caption={post.caption}