convert-next.js

src/components/for-people/ExperienceSection.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import React from 'react';
+
+const words = [
+  { text: 'Effortless.', size: 'clamp(58px, 9vw, 134px)', color: '#ffffff' },
+  { text: 'Invisible.',  size: 'clamp(50px, 7.5vw, 112px)', color: 'rgba(255,255,255,0.35)' },
+  { text: 'Yours.',      size: 'clamp(58px, 9vw, 134px)', color: '#f4be28' },
+];
+
+const steps = [
+  { n: '01', label: 'Walk into any partner store' },
+  { n: '02', label: 'Pay the way you always do' },
+  { n: '03', label: 'Points land in your wallet' },
+];
+
+export default function ExperienceSection() {
+  return (
+    <section className="fp-panel" style={{ background: '#07070d' }}>
+      <div className="fp-shell">
+
+        <div style={{ marginBottom: 'clamp(36px, 5vh, 60px)' }}>
+          <span className="fp-kicker fp-rise">The Experience · 06</span>
+        </div>
+
+        <div className="fp-split" style={{ gridTemplateColumns: '1.1fr 0.9fr', alignItems: 'center' }}>
+
+          {/* Giant words */}
+          <div>
+            {words.map((w, i) => (
+              <span key={i} className="fp-mask" style={{ display: 'block' }}>
+                <span style={{
+                  display: 'block', fontSize: w.size, fontWeight: 900, fontFamily: 'Sora, sans-serif',
+                  color: w.color, letterSpacing: '-0.05em', lineHeight: 0.96,
+                }}>{w.text}</span>
+              </span>
+            ))}
+          </div>
+
+          {/* Steps */}
+          <div>
+            <p className="fp-rise" style={{
+              fontSize: 16, lineHeight: 1.85, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif', margin: '0 0 44px', maxWidth: 360,
+            }}>
+              No plastic cards. No coupon hunting. No app open required at checkout. Loyaly works quietly in the background while you shop the way you always have.
+            </p>
+
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              {steps.map((s, i) => (
+                <div key={i} className="fp-rise" style={{
+                  display: 'flex', gap: 20, alignItems: 'center', padding: '20px 0',
+                  borderBottom: i < steps.length - 1 ? '1px solid rgba(255,255,255,0.07)' : 'none',
+                  transitionDelay: `${0.2 + i * 0.1}s`,
+                }}>
+                  <span style={{ fontSize: 12, fontWeight: 700, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '0.06em', flexShrink: 0, width: 24 }}>{s.n}</span>
+                  <span style={{ fontSize: 16, fontWeight: 600, color: 'rgba(255,255,255,0.75)', fontFamily: 'Manrope, sans-serif', lineHeight: 1.4 }}>{s.label}</span>
+                </div>
+              ))}
+            </div>
+
+            <div className="fp-rise" style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 12, transitionDelay: '0.5s' }}>
+              <div style={{ display: 'flex' }}>
+                {['#f4be28', '#4ade80', '#a855f7', '#3b82f6'].map((c, i) => (
+                  <div key={i} style={{ width: 30, height: 30, borderRadius: '50%', background: c, border: '2px solid #07070d', marginLeft: i > 0 ? -9 : 0 }} />
+                ))}
+              </div>
+              <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif' }}>
+                Joined by <span style={{ color: '#fff', fontWeight: 700 }}>50,000+</span> shoppers
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}