pages/index.js

import GlassCard from '../components/GlassCard';
import MainLayout from '../layouts/MainLayout';

export default function Home() {
  // 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>
      {/* THE SNAP CONTAINER */}
      <div className="h-[100dvh] w-full overflow-y-scroll snap-y snap-mandatory scroll-smooth no-scrollbar">
        
        {posts.map((post) => (
          // 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}
              price={post.price}
            />
          </div>
        ))}
        
      </div>
    </MainLayout>
  );
}