init

frontend/src/components/PopularSection.jsx

@@ -0,0 +1,50 @@
+import './PopularSection.css'
+
+const MOVIES = [
+  { title: 'Дети перемен', rating: '8.4', badge: 'Подписка', color: 'linear-gradient(160deg,#1a3a5c,#0d6e8c)' },
+  { title: 'Чёрное солнце', rating: '9.4', badge: 'Бесплатно', color: 'linear-gradient(160deg,#1c0a36,#4a1a7a)' },
+  { title: 'Трофей', rating: '6.7', badge: 'Подписка', color: 'linear-gradient(160deg,#3d1a00,#8b4000)' },
+  { title: 'Реализация', rating: '8.9', badge: 'Бесплатно', color: 'linear-gradient(160deg,#0a2e1a,#0d6e40)' },
+  { title: 'Чебурашка 2', rating: '8.5', badge: 'Подписка', color: 'linear-gradient(160deg,#1a1a3d,#3d3d8c)' },
+  { title: 'Склиф', rating: '7.7', badge: 'Подписка', color: 'linear-gradient(160deg,#2e0a0a,#8c1a1a)' },
+  { title: 'Простая просьба', rating: '8.2', badge: 'Подписка', color: 'linear-gradient(160deg,#0a1a2e,#1a4a6e)' },
+  { title: 'Рикошет', rating: '8.7', badge: 'Бесплатно', color: 'linear-gradient(160deg,#1a2e0a,#4a7a1a)' },
+]
+
+export default function PopularSection() {
+  return (
+    <section className="popular">
+      <div className="popular-inner">
+        <div className="section-header">
+          <h2 className="section-title">Популярно сейчас</h2>
+          <button className="section-arrow" aria-label="Показать все">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <polyline points="9 18 15 12 9 6"/>
+            </svg>
+          </button>
+        </div>
+        <div className="cards-scroll">
+          <div className="cards-track">
+            {MOVIES.map((m) => (
+              <div key={m.title} className="movie-card">
+                <div className="movie-poster" style={{ background: m.color }}>
+                  <span className="movie-poster-text">{m.title}</span>
+                  <div className={`movie-badge ${m.badge === 'Бесплатно' ? 'badge-free' : 'badge-sub'}`}>
+                    {m.badge}
+                  </div>
+                </div>
+                <div className="movie-info">
+                  <p className="movie-title">{m.title}</p>
+                  <div className="movie-meta">
+                    <span className="movie-k">К</span>
+                    <span className="movie-rating">{m.rating}</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}