main: added inital version of music shop

Signed-off-by: nfel <nfilsaraee@gmail.com>
2025-11-20 14:42:58 +03:30
commit 8a7842e263
25 changed files with 8820 additions and 0 deletions
@@ -0,0 +1,47 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import AlbumCard from './AlbumCard';
+import { Album } from '@/lib/types';
+import { albums } from '@/lib/data';
+
+interface AlbumShowcaseProps {
+  purchasedAlbums: string[];
+  onPlay: (album: Album) => void;
+  onPurchase: (album: Album) => void;
+}
+
+export default function AlbumShowcase({ purchasedAlbums, onPlay, onPurchase }: AlbumShowcaseProps) {
+  return (
+    <section className="py-20 px-4 md:px-8" id="albums">
+      <div className="max-w-7xl mx-auto">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-accent-cyan to-accent-orange mb-4">
+            Discography
+          </h2>
+          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+            Explore a collection of progressive rock albums that push the boundaries of sound and creativity
+          </p>
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {albums.map((album) => (
+            <AlbumCard
+              key={album.id}
+              album={album}
+              isPurchased={purchasedAlbums.includes(album.id)}
+              onPlay={onPlay}
+              onPurchase={onPurchase}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}