Import source: src/components/Footer/Footer

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
2026-09-18 23:07:55 +03:30
parent 45e4b3e4b8
commit a5498a23f3
1 changed files with 105 additions and 0 deletions
@@ -0,0 +1,105 @@
+import { motion } from 'framer-motion'
+
+const cols = [
+  {
+    heading: 'Discover',
+    links: ['New Releases', 'Charts', 'Genres', 'Moods', 'Podcasts'],
+  },
+  {
+    heading: 'Artists',
+    links: ['Spotlight', 'Rising', 'Verified', 'Submit Music', 'Promotions'],
+  },
+  {
+    heading: 'Company',
+    links: ['About', 'Careers', 'Press', 'Blog', 'Partners'],
+  },
+  {
+    heading: 'Support',
+    links: ['Help Center', 'Privacy', 'Terms', 'Cookies', 'Contact'],
+  },
+]
+
+export default function Footer() {
+  return (
+    <footer style={{ background: '#040406', borderTop: '1px solid var(--dark-border)' }}>
+      <div className="max-w-7xl mx-auto px-6 pt-16 pb-10">
+        {/* Top */}
+        <div className="grid grid-cols-2 md:grid-cols-5 gap-10 mb-16">
+          {/* Brand */}
+          <div className="col-span-2 md:col-span-1">
+            <div className="font-display font-bold text-lg tracking-[0.22em] gold-gradient-text mb-4">CMUSIC</div>
+            <p className="text-secondary text-xs leading-relaxed max-w-xs">
+              The premium destination for immersive music experiences. Sound meets dimension.
+            </p>
+            {/* Socials */}
+            <div className="flex items-center gap-3 mt-5">
+              {['tw', 'ig', 'yt', 'sp'].map(s => (
+                <motion.button
+                  key={s}
+                  whileHover={{ scale: 1.15, color: 'var(--gold)' }}
+                  className="w-7 h-7 rounded-full flex items-center justify-center text-muted transition-colors"
+                  style={{ border: '1px solid var(--dark-border)' }}
+                >
+                  <span className="text-xs font-mono uppercase">{s[0]}</span>
+                </motion.button>
+              ))}
+            </div>
+          </div>
+
+          {/* Link columns */}
+          {cols.map(col => (
+            <div key={col.heading}>
+              <h4 className="text-xs font-semibold tracking-[0.2em] uppercase text-white mb-4">{col.heading}</h4>
+              <ul className="space-y-2.5">
+                {col.links.map(link => (
+                  <li key={link}>
+                    <motion.a
+                      href="#"
+                      whileHover={{ x: 3, color: 'var(--gold)' }}
+                      className="text-xs text-secondary transition-all duration-150 block"
+                    >{link}</motion.a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        {/* Newsletter */}
+        <div className="glass-gold rounded-2xl p-6 mb-12 flex flex-col md:flex-row items-center justify-between gap-4">
+          <div>
+            <p className="font-display font-semibold text-white text-sm">Stay in the loop</p>
+            <p className="text-secondary text-xs mt-0.5">Get new releases and curated picks delivered weekly.</p>
+          </div>
+          <div className="flex gap-2 w-full md:w-auto">
+            <input
+              type="email"
+              placeholder="your@email.com"
+              className="flex-1 md:w-56 px-4 py-2.5 rounded-full text-sm text-white placeholder-muted outline-none"
+              style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid var(--dark-border)' }}
+            />
+            <motion.button
+              whileHover={{ scale: 1.04, boxShadow: '0 0 20px rgba(201,168,76,0.3)' }}
+              whileTap={{ scale: 0.96 }}
+              className="px-5 py-2.5 rounded-full text-sm font-semibold flex-shrink-0"
+              style={{ background: 'linear-gradient(135deg, #c9a84c, #e8c547)', color: '#070709' }}
+            >
+              Subscribe
+            </motion.button>
+          </div>
+        </div>
+
+        {/* Bottom bar */}
+        <div className="section-divider mb-6" />
+        <div className="flex flex-col md:flex-row items-center justify-between gap-3 text-xs text-muted">
+          <p>© 2024 CMusic. All rights reserved.</p>
+          <div className="flex items-center gap-2">
+            <span className="w-1.5 h-1.5 rounded-full bg-gold animate-pulse-gold" />
+            <span>All systems operational</span>
+          </div>
+          <p>Made with precision. Powered by sound.</p>
+        </div>
+      </div>
+    </footer>
+  )
+}