main: add many things to app :)

Signed-off-by: nfel <nfilsaraee@gmail.com>

components/PurchaseSuccessModal.tsx

@@ -18,12 +18,12 @@ export default function PurchaseSuccessModal({ show, album, purchase, onClose }:
   const handleDownloadReceipt = () => {
     // Create a simple text receipt
     const receipt = `
-PURCHASE RECEIPT
+PURCHASE RECEIPT / رسید خرید
 ================
 
-Status: PENDING APPROVAL
+Status: PENDING APPROVAL / در انتظار تایید
 Album: ${album.title}
-Artist: Parsa
+Artist: Parsa Sadatie (@parsadat)
 Amount: ${formatPrice(album.price)}
 Transaction ID: ${purchase.transactionId}
 Date: ${new Date(purchase.purchaseDate).toLocaleString()}
@@ -31,9 +31,11 @@ Date: ${new Date(purchase.purchaseDate).toLocaleString()}
 Tracks Included:
 ${album.songs.map((song, idx) => `${idx + 1}. ${song.title} (${song.duration})`).join('\n')}
 
-Thank you for your purchase!
+Thank you for your purchase! / از خرید شما متشکریم!
 Your order is pending admin approval.
+سفارش شما در انتظار تایید مدیر است.
 You will receive access to this album after confirmation.
+پس از تایید به آلبوم دسترسی خواهید داشت.
 `;
 
     const blob = new Blob([receipt], { type: 'text/plain' });
@@ -54,7 +56,7 @@ You will receive access to this album after confirmation.
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
-          className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+          className="fixed inset-0 bg-paper-dark/90 backdrop-blur-sm z-50 flex items-center justify-center p-4"
           onClick={onClose}
         >
           <motion.div
@@ -62,55 +64,55 @@ You will receive access to this album after confirmation.
             animate={{ scale: 1, opacity: 1, y: 0 }}
             exit={{ scale: 0.9, opacity: 0, y: 20 }}
             onClick={(e) => e.stopPropagation()}
-            className="glass-effect rounded-2xl max-w-lg w-full p-8 border-2 border-accent-cyan/30"
+            className="paper-card max-w-lg w-full p-8 border-4 border-paper-dark shadow-paper-lg"
           >
             {/* Header */}
             <div className="flex items-start justify-between mb-6">
               <div className="flex items-center gap-3">
-                <div className="p-3 bg-accent-orange/20 rounded-full">
-                  <FaClock className="text-3xl text-accent-orange" />
+                <div className="p-3 bg-paper-brown border-2 border-paper-dark">
+                  <FaClock className="text-3xl text-paper-light" />
                 </div>
                 <div>
-                  <h2 className="text-2xl font-bold text-white">
+                  <h2 className="text-2xl font-bold text-paper-dark border-b-4 border-paper-dark inline-block pb-1">
                     Purchase Pending Approval
                   </h2>
-                  <p className="text-sm text-gray-400">Please wait for admin confirmation</p>
+                  <p className="text-sm text-paper-gray mt-2">در انتظار تایید مدیر</p>
                 </div>
               </div>
               <button
                 onClick={onClose}
-                className="p-2 hover:bg-white/10 rounded-full transition-colors"
+                className="p-2 hover:bg-paper-brown hover:text-paper-light border-2 border-paper-brown transition-colors"
                 aria-label="Close"
               >
-                <FaTimes className="text-xl text-gray-400" />
+                <FaTimes className="text-xl text-paper-dark" />
               </button>
             </div>
 
             {/* Receipt Details */}
             <div className="space-y-4 mb-6">
-              <div className="p-4 bg-white/5 rounded-lg space-y-3">
+              <div className="p-4 bg-paper-light border-2 border-paper-brown space-y-3">
                 <div className="flex justify-between">
-                  <span className="text-gray-400">Album</span>
-                  <span className="text-white font-semibold">{album.title}</span>
+                  <span className="text-paper-gray">Album / آلبوم</span>
+                  <span className="text-paper-dark font-semibold">{album.title}</span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-gray-400">Artist</span>
-                  <span className="text-white font-semibold">Parsa</span>
+                  <span className="text-paper-gray">Artist / هنرمند</span>
+                  <span className="text-paper-dark font-semibold">Parsa Sadatie</span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-gray-400">Tracks</span>
-                  <span className="text-white font-semibold">{album.songs.length} songs</span>
+                  <span className="text-paper-gray">Tracks / تعداد آهنگ</span>
+                  <span className="text-paper-dark font-semibold">{album.songs.length} songs</span>
                 </div>
-                <div className="border-t border-white/10 pt-3 flex justify-between">
-                  <span className="text-gray-400">Amount</span>
-                  <span className="text-accent-orange font-bold text-xl">{formatPrice(album.price)}</span>
+                <div className="border-t-2 border-paper-brown pt-3 flex justify-between">
+                  <span className="text-paper-gray">Amount / مبلغ</span>
+                  <span className="text-paper-brown font-bold text-xl">{formatPrice(album.price)}</span>
                 </div>
               </div>
 
-              <div className="p-4 bg-accent-cyan/10 border border-accent-cyan/30 rounded-lg">
-                <p className="text-xs text-gray-400 mb-1">Transaction ID</p>
-                <p className="text-sm font-mono text-accent-cyan">{purchase.transactionId}</p>
-                <p className="text-xs text-gray-500 mt-2">
+              <div className="p-4 bg-paper-sand border-2 border-paper-dark">
+                <p className="text-xs text-paper-gray mb-1">Transaction ID / شناسه تراکنش</p>
+                <p className="text-sm font-mono text-paper-dark font-semibold">{purchase.transactionId}</p>
+                <p className="text-xs text-paper-brown mt-2">
                   {new Date(purchase.purchaseDate).toLocaleString()}
                 </p>
               </div>
@@ -120,25 +122,26 @@ You will receive access to this album after confirmation.
             <div className="space-y-3">
               <button
                 onClick={handleDownloadReceipt}
-                className="w-full py-3 bg-white/10 hover:bg-white/20 border border-white/20 rounded-lg font-semibold text-white transition-all flex items-center justify-center gap-2"
+                className="w-full py-3 bg-paper-light hover:bg-paper-sand border-2 border-paper-brown font-semibold text-paper-dark transition-all shadow-paper flex items-center justify-center gap-2"
               >
                 <FaDownload />
-                Download Receipt
+                Download Receipt / دریافت رسید
               </button>
 
               <motion.button
                 whileHover={{ scale: 1.02 }}
                 whileTap={{ scale: 0.98 }}
                 onClick={onClose}
-                className="w-full py-3 bg-gradient-to-r from-accent-cyan to-accent-cyan/80 hover:from-accent-cyan/90 hover:to-accent-cyan/70 rounded-lg font-semibold text-white transition-all glow-cyan"
+                className="w-full py-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark font-semibold text-paper-light transition-all shadow-paper-lg"
               >
-                OK, Got It
+                OK, Got It / متوجه شدم
               </motion.button>
             </div>
 
             {/* Info */}
-            <p className="text-xs text-gray-500 text-center mt-6">
-              Your purchase will be reviewed by an admin. You will receive access after approval.
+            <p className="text-xs text-paper-gray text-center mt-6">
+              Your purchase will be reviewed by an admin. You will receive access after approval.<br />
+              سفارش شما توسط مدیر بررسی می‌شود. پس از تایید به آلبوم دسترسی خواهید داشت.
             </p>
           </motion.div>
         </motion.div>