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,88 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { FaMusic, FaShoppingCart } from 'react-icons/fa';
+import { useCart } from '@/lib/CartContext';
+
+interface HeaderProps {
+  onCartClick?: () => void;
+}
+
+export default function Header({ onCartClick }: HeaderProps) {
+  const { getCartCount } = useCart();
+  const cartCount = getCartCount();
+
+  const scrollToSection = (id: string) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
+  return (
+    <motion.header
+      initial={{ y: -100 }}
+      animate={{ y: 0 }}
+      className="fixed top-0 left-0 right-0 z-40 glass-effect border-b border-white/10"
+    >
+      <div className="max-w-7xl mx-auto px-4 md:px-8 py-4">
+        <div className="flex items-center justify-between">
+          {/* Logo */}
+          <motion.div
+            whileHover={{ scale: 1.05 }}
+            className="flex items-center gap-3 cursor-pointer"
+            onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+          >
+            <div className="p-2 bg-gradient-to-br from-accent-cyan to-accent-orange rounded-lg glow-cyan">
+              <FaMusic className="text-2xl text-white" />
+            </div>
+            <div>
+              <h1 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-accent-cyan to-accent-orange">
+                Parsa
+              </h1>
+              <p className="text-xs text-gray-400">Progressive Rock</p>
+            </div>
+          </motion.div>
+
+          {/* Navigation */}
+          <nav className="flex items-center gap-6">
+            <div className="hidden md:flex items-center gap-8">
+              <button
+                onClick={() => scrollToSection('bio')}
+                className="text-gray-300 hover:text-accent-cyan transition-colors"
+              >
+                Bio
+              </button>
+              <button
+                onClick={() => scrollToSection('albums')}
+                className="text-gray-300 hover:text-accent-cyan transition-colors"
+              >
+                Albums
+              </button>
+            </div>
+
+            {/* Cart Button */}
+            <motion.button
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              onClick={onCartClick}
+              className="relative p-3 bg-white/10 hover:bg-white/20 rounded-lg transition-all"
+              aria-label="Shopping cart"
+            >
+              <FaShoppingCart className="text-xl text-accent-cyan" />
+              {cartCount > 0 && (
+                <motion.div
+                  initial={{ scale: 0 }}
+                  animate={{ scale: 1 }}
+                  className="absolute -top-1 -right-1 bg-accent-orange text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center"
+                >
+                  {cartCount}
+                </motion.div>
+              )}
+            </motion.button>
+          </nav>
+        </div>
+      </div>
+    </motion.header>
+  );
+}