Import source: src/components/ArtistSpotlight/ArtistSpotlight

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
2026-09-18 23:07:51 +03:30
parent 63f606bb28
commit 57276e10b2
1 changed files with 100 additions and 0 deletions
@@ -0,0 +1,100 @@
+import { useRef } from 'react'
+import { motion, useInView } from 'framer-motion'
+import ArtistParticles from './ArtistParticles'
+import { artists } from '../../data/mockData'
+
+export default function ArtistSpotlight() {
+  const artist = artists[0]
+  const ref = useRef()
+  const inView = useInView(ref, { once: true, margin: '-100px' })
+
+  return (
+    <section id="artists" ref={ref} className="relative py-28 overflow-hidden" style={{ background: '#080808' }}>
+      <div className="section-divider" />
+
+      {/* Particle field */}
+      <div className="absolute inset-0 pointer-events-none">
+        <ArtistParticles />
+      </div>
+
+      {/* Gradient fade left */}
+      <div className="absolute inset-0 pointer-events-none"
+        style={{ background: 'linear-gradient(90deg, #080808 30%, rgba(8,8,8,0.5) 60%, transparent 100%)' }} />
+      <div className="absolute inset-0 pointer-events-none"
+        style={{ background: 'linear-gradient(180deg, #080808 0%, transparent 15%, transparent 85%, #080808 100%)' }} />
+
+      <div className="relative z-10 max-w-7xl mx-auto px-6 mt-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          {/* Text */}
+          <motion.div
+            initial={{ opacity: 0, x: -50 }}
+            animate={inView ? { opacity: 1, x: 0 } : {}}
+            transition={{ duration: 0.75, ease: [0.22, 1, 0.36, 1] }}
+          >
+            <p className="text-xs tracking-[0.25em] uppercase mb-4" style={{ color: '#c9a84c' }}>Artist Spotlight</p>
+            <h2
+              className="font-display font-bold leading-none mb-4"
+              style={{ fontSize: 'clamp(3rem, 8vw, 6rem)', color: 'white' }}
+            >
+              {artist.name}
+            </h2>
+            <p className="text-sm text-gray-600 mb-6 tracking-wide">{artist.genre}</p>
+            <p className="text-gray-400 text-base leading-relaxed mb-10 max-w-md">{artist.bio}</p>
+
+            {/* Stats */}
+            <div className="flex items-center gap-10 mb-10">
+              {[
+                [artist.followers, 'Followers'],
+                ['48', 'Tracks'],
+                ['6', 'Albums'],
+              ].map(([val, label], i) => (
+                <div key={label}>
+                  <p className="font-display font-bold text-2xl text-white"
+                    style={i === 0 ? { color: '#c9a84c' } : {}}>{val}</p>
+                  <p className="text-xs text-gray-700 mt-1 tracking-wider uppercase">{label}</p>
+                </div>
+              ))}
+            </div>
+
+            <div className="flex items-center gap-3">
+              <motion.button
+                whileHover={{ scale: 1.04, boxShadow: '0 0 28px rgba(201,168,76,0.3)' }}
+                whileTap={{ scale: 0.97 }}
+                className="px-7 py-3 rounded-full font-semibold text-sm tracking-wide"
+                style={{ background: 'linear-gradient(135deg, #c9a84c, #e8c547)', color: '#080808' }}
+              >
+                Follow Artist
+              </motion.button>
+              <motion.button
+                whileHover={{ scale: 1.04, borderColor: 'rgba(201,168,76,0.4)' }}
+                className="px-7 py-3 rounded-full text-sm text-gray-400 transition-all glass"
+                style={{ border: '1px solid rgba(255,255,255,0.08)' }}
+              >
+                Play Discography
+              </motion.button>
+            </div>
+          </motion.div>
+
+          {/* Artist image */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.85 }}
+            animate={inView ? { opacity: 1, scale: 1 } : {}}
+            transition={{ duration: 0.75, delay: 0.15, ease: [0.22, 1, 0.36, 1] }}
+            className="relative flex justify-center"
+          >
+            <div className="relative rounded-2xl overflow-hidden max-w-xs w-full"
+              style={{ boxShadow: '0 0 60px rgba(201,168,76,0.15), 0 40px 80px rgba(0,0,0,0.6)', aspectRatio: '4/5' }}>
+              <img src={artist.image} alt={artist.name} className="w-full h-full object-cover" />
+              <div className="absolute inset-0" style={{ background: 'linear-gradient(to top, rgba(8,8,8,0.7) 0%, transparent 50%)' }} />
+              {/* Gold corner accents */}
+              <div className="absolute top-4 left-4 w-6 h-6 border-t border-l" style={{ borderColor: 'rgba(201,168,76,0.5)' }} />
+              <div className="absolute top-4 right-4 w-6 h-6 border-t border-r" style={{ borderColor: 'rgba(201,168,76,0.5)' }} />
+              <div className="absolute bottom-4 left-4 w-6 h-6 border-b border-l" style={{ borderColor: 'rgba(201,168,76,0.5)' }} />
+              <div className="absolute bottom-4 right-4 w-6 h-6 border-b border-r" style={{ borderColor: 'rgba(201,168,76,0.5)' }} />
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  )
+}