main: vibe coded app to feel like paper
Signed-off-by: nfel <nfilsaraee@gmail.com>
This commit is contained in:
+13
-13
@@ -23,24 +23,24 @@ export default function Header({ onCartClick }: HeaderProps) {
|
||||
<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"
|
||||
className="fixed top-0 left-0 right-0 z-40 bg-paper-sand border-b-4 border-paper-dark shadow-paper-lg"
|
||||
>
|
||||
<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 }}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
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 className="p-2 bg-paper-dark border-2 border-paper-brown">
|
||||
<FaMusic className="text-2xl text-paper-light" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-accent-cyan to-accent-orange">
|
||||
<h1 className="text-xl font-bold text-paper-dark tracking-tight">
|
||||
Parsa
|
||||
</h1>
|
||||
<p className="text-xs text-gray-400">Progressive Rock</p>
|
||||
<p className="text-xs text-paper-brown">Progressive Rock</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
@@ -49,13 +49,13 @@ export default function Header({ onCartClick }: HeaderProps) {
|
||||
<div className="hidden md:flex items-center gap-8">
|
||||
<button
|
||||
onClick={() => scrollToSection('bio')}
|
||||
className="text-gray-300 hover:text-accent-cyan transition-colors"
|
||||
className="text-paper-dark hover:text-paper-brown transition-colors font-medium border-b-2 border-transparent hover:border-paper-brown"
|
||||
>
|
||||
Bio
|
||||
</button>
|
||||
<button
|
||||
onClick={() => scrollToSection('albums')}
|
||||
className="text-gray-300 hover:text-accent-cyan transition-colors"
|
||||
className="text-paper-dark hover:text-paper-brown transition-colors font-medium border-b-2 border-transparent hover:border-paper-brown"
|
||||
>
|
||||
Albums
|
||||
</button>
|
||||
@@ -63,18 +63,18 @@ export default function Header({ onCartClick }: HeaderProps) {
|
||||
|
||||
{/* Cart Button */}
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={onCartClick}
|
||||
className="relative p-3 bg-white/10 hover:bg-white/20 rounded-lg transition-all"
|
||||
className="relative p-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark transition-all shadow-paper"
|
||||
aria-label="Shopping cart"
|
||||
>
|
||||
<FaShoppingCart className="text-xl text-accent-cyan" />
|
||||
<FaShoppingCart className="text-xl text-paper-light" />
|
||||
{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"
|
||||
className="absolute -top-2 -right-2 bg-paper-dark text-paper-light text-xs font-bold border-2 border-paper-brown w-6 h-6 flex items-center justify-center"
|
||||
>
|
||||
{cartCount}
|
||||
</motion.div>
|
||||
|
||||
Reference in New Issue
Block a user