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,154 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Header from '@/components/Header';
+import Biography from '@/components/Biography';
+import AlbumShowcase from '@/components/AlbumShowcase';
+import MusicPlayer from '@/components/MusicPlayer';
+import PaymentModal from '@/components/PaymentModal';
+import PurchaseSuccessModal from '@/components/PurchaseSuccessModal';
+import CartSidebar from '@/components/CartSidebar';
+import { Album, Purchase } from '@/lib/types';
+
+export default function Home() {
+  const [purchasedAlbums, setPurchasedAlbums] = useState<string[]>([]);
+  const [purchases, setPurchases] = useState<Purchase[]>([]);
+  const [currentAlbum, setCurrentAlbum] = useState<Album | null>(null);
+  const [albumToPurchase, setAlbumToPurchase] = useState<Album | null>(null);
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
+  const [latestPurchase, setLatestPurchase] = useState<Purchase | null>(null);
+  const [cartOpen, setCartOpen] = useState(false);
+
+  // Load purchases from localStorage on mount
+  useEffect(() => {
+    const savedPurchases = localStorage.getItem('purchases');
+    if (savedPurchases) {
+      const parsedPurchases = JSON.parse(savedPurchases);
+      setPurchases(parsedPurchases);
+      setPurchasedAlbums(parsedPurchases.map((p: Purchase) => p.albumId));
+    }
+  }, []);
+
+  const handlePlayAlbum = (album: Album) => {
+    setCurrentAlbum(album);
+  };
+
+  const handlePurchaseClick = (album: Album) => {
+    setAlbumToPurchase(album);
+  };
+
+  const handlePurchaseSuccess = (albumId: string, transactionId: string) => {
+    const purchase: Purchase = {
+      albumId,
+      transactionId,
+      purchaseDate: new Date(),
+    };
+
+    const updatedPurchases = [...purchases, purchase];
+    setPurchases(updatedPurchases);
+    setPurchasedAlbums([...purchasedAlbums, albumId]);
+    setLatestPurchase(purchase);
+
+    // Save to localStorage
+    localStorage.setItem('purchases', JSON.stringify(updatedPurchases));
+
+    // Close payment modal and show success modal
+    setAlbumToPurchase(null);
+    setShowSuccessModal(true);
+  };
+
+  const handleCloseSuccessModal = () => {
+    setShowSuccessModal(false);
+    // Automatically open the player with the purchased album
+    if (albumToPurchase) {
+      setCurrentAlbum(albumToPurchase);
+    }
+  };
+
+  return (
+    <>
+      <Header onCartClick={() => setCartOpen(true)} />
+
+      <main className="pt-20">
+        {/* Hero Section */}
+        <section className="min-h-[60vh] flex items-center justify-center px-4 md:px-8 relative overflow-hidden">
+          {/* Animated Background */}
+          <div className="absolute inset-0 overflow-hidden">
+            <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-accent-cyan/10 rounded-full blur-3xl animate-pulse"></div>
+            <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-accent-orange/10 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }}></div>
+          </div>
+
+          <div className="relative z-10 text-center max-w-4xl mx-auto">
+            <h1 className="text-5xl md:text-7xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-accent-cyan via-white to-accent-orange mb-6">
+              Progressive Rock
+              <br />
+              Reimagined
+            </h1>
+            <p className="text-xl md:text-2xl text-gray-300 mb-8">
+              Explore intricate compositions and sonic landscapes
+            </p>
+            <button
+              onClick={() => {
+                const element = document.getElementById('albums');
+                element?.scrollIntoView({ behavior: 'smooth' });
+              }}
+              className="px-8 py-4 bg-gradient-to-r from-accent-cyan to-accent-orange hover:from-accent-cyan/80 hover:to-accent-orange/80 rounded-full font-semibold text-white transition-all glow-cyan text-lg"
+            >
+              Explore Albums
+            </button>
+          </div>
+        </section>
+
+        {/* Biography Section */}
+        <Biography />
+
+        {/* Albums Section */}
+        <AlbumShowcase
+          purchasedAlbums={purchasedAlbums}
+          onPlay={handlePlayAlbum}
+          onPurchase={handlePurchaseClick}
+        />
+
+        {/* Footer */}
+        <footer className="py-12 px-4 md:px-8 border-t border-white/10 mt-20">
+          <div className="max-w-7xl mx-auto text-center">
+            <p className="text-gray-400">
+              &copy; {new Date().getFullYear()} Parsa. All rights reserved.
+            </p>
+            <p className="text-sm text-gray-500 mt-2">
+              Progressive Rock Composer & Producer
+            </p>
+          </div>
+        </footer>
+      </main>
+
+      {/* Music Player */}
+      {currentAlbum && (
+        <MusicPlayer
+          album={currentAlbum}
+          isPurchased={purchasedAlbums.includes(currentAlbum.id)}
+          onClose={() => setCurrentAlbum(null)}
+          onPurchase={handlePurchaseClick}
+        />
+      )}
+
+      {/* Payment Modal */}
+      <PaymentModal
+        album={albumToPurchase}
+        onClose={() => setAlbumToPurchase(null)}
+        onSuccess={handlePurchaseSuccess}
+      />
+
+      {/* Purchase Success Modal */}
+      <PurchaseSuccessModal
+        show={showSuccessModal}
+        album={albumToPurchase}
+        purchase={latestPurchase}
+        onClose={handleCloseSuccessModal}
+      />
+
+      {/* Cart Sidebar */}
+      <CartSidebar isOpen={cartOpen} onClose={() => setCartOpen(false)} />
+    </>
+  );
+}