Import source: src/components/FeaturedAlbums/FeaturedAlbums

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
2026-09-18 23:07:53 +03:30
parent fb3c1075b8
commit 7be0560d99
1 changed files with 57 additions and 0 deletions
@@ -0,0 +1,57 @@
+import { useRef } from 'react'
+import { motion, useInView } from 'framer-motion'
+import AlbumCard3D from './AlbumCard3D'
+import { albums } from '../../data/mockData'
+
+export default function FeaturedAlbums({ onPlay, currentTrack }) {
+  const ref = useRef()
+  const inView = useInView(ref, { once: true, margin: '-80px' })
+
+  return (
+    <section id="albums" ref={ref} className="py-28 px-6" style={{ background: 'var(--dark-base)' }}>
+      <div className="section-divider-bright" />
+      <div className="max-w-7xl mx-auto">
+        <motion.div
+          initial={{ opacity: 0, y: 28 }}
+          animate={inView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
+          className="flex items-end justify-between mb-14 mt-14"
+        >
+          <div>
+            <p className="text-xs tracking-[0.28em] uppercase gold-text mb-3 font-medium">Collection</p>
+            <h2 className="font-display font-bold text-white leading-tight"
+              style={{ fontSize: 'clamp(2rem, 5vw, 3.5rem)', letterSpacing: '-0.02em' }}>
+              Featured <span className="gold-gradient-text">Albums</span>
+            </h2>
+            <p className="text-secondary text-sm mt-2 max-w-sm">
+              Hand-picked records defining the sound of this moment.
+            </p>
+          </div>
+          <motion.button
+            whileHover={{ scale: 1.04, color: 'var(--gold)', borderColor: 'rgba(201,168,76,0.35)' }}
+            className="hidden md:flex items-center gap-2 text-sm text-secondary border border-dark-border px-5 py-2.5 rounded-full transition-all duration-200"
+          >
+            View All
+            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M9 5l7 7-7 7" />
+            </svg>
+          </motion.button>
+        </motion.div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+          {albums.map((album, i) => (
+            <motion.div
+              key={album.id}
+              initial={{ opacity: 0, y: 48 }}
+              animate={inView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.6, delay: i * 0.09, ease: [0.22, 1, 0.36, 1] }}
+            >
+              <AlbumCard3D album={album} onPlay={onPlay}
+                isActive={currentTrack?.album === album.title} />
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}