Update pages, components, and add stock images for visual layout enhancements

src/app/about_us/page.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState } from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 import { useReveal } from '@/hooks/useReveal';
 import GSAPAnimator from '@/components/GSAPAnimator';
 
@@ -32,28 +33,41 @@ export default function AboutUsPage() {
 
       {/* ── HERO ── */}
       <section style={{
-        minHeight: '100vh', background: '#07070d',
+        minHeight: '100vh', background: 'radial-gradient(ellipse 120% 90% at 22% 0%, #3a2b5e 0%, #251c40 38%, #1a1530 100%)',
         display: 'flex', alignItems: 'center',
         padding: '120px 8% 80px',
-        margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
+        margin: '0 20px 20px', borderRadius: '0 0 32px 32px',
         position: 'relative', overflow: 'hidden',
       }}>
+        {/* Background photo */}
+        <Image src="/images/stock/about-team.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9 }} />
+        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,21,48,0.1) 0%, rgba(26,21,48,0.55) 85%)' }} />
+        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 65% at 50% 48%, rgba(18,14,30,0.78) 0%, rgba(18,14,30,0.35) 60%, transparent 100%)' }} />
+        {/* Accent blobs */}
+        <div style={{ position: 'absolute', top: '-12%', right: '-8%', width: 520, height: 520, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.22) 0%, transparent 70%)', filter: 'blur(10px)', pointerEvents: 'none' }} />
+        <div style={{ position: 'absolute', bottom: '-15%', left: '-10%', width: 460, height: 460, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
         {/* Big ghost text */}
         <div style={{
           position: 'absolute', top: '50%', left: '50%',
           transform: 'translate(-50%,-50%)',
           fontSize: 'clamp(120px, 22vw, 320px)', fontWeight: 900,
           fontFamily: 'Sora, sans-serif', color: 'transparent',
-          WebkitTextStroke: '1px rgba(244,190,40,0.06)',
+          WebkitTextStroke: '1px rgba(244,190,40,0.08)',
           letterSpacing: '-0.06em', lineHeight: 1,
           whiteSpace: 'nowrap', userSelect: 'none',
           pointerEvents: 'none', zIndex: 0,
         }}>LOYALY</div>
 
-        <div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: '6vw' }}>
+        <div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
-          <div style={{ maxWidth: 680 }}>
+          <div style={{ maxWidth: 760 }}>
-            <div data-gsap="badge" style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 28, display: 'flex', alignItems: 'center', gap: 12 }}>
+            <div data-gsap="badge" style={{
-              <span data-gsap="line" style={{ width: 32, height: 1, background: '#f4be28', display: 'block' }} />Meet the Crew
+              fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
+              color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 32,
+              display: 'inline-flex', alignItems: 'center', gap: 10,
+              padding: '8px 18px', borderRadius: 100,
+              background: 'rgba(244,190,40,0.08)', border: '1px solid rgba(244,190,40,0.22)',
+            }}>
+              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', display: 'block' }} />Meet the Crew
             </div>
             <h1 data-gsap="heading" style={{
               fontSize: 'clamp(52px, 9vw, 140px)', fontWeight: 900,
@@ -63,51 +77,10 @@ export default function AboutUsPage() {
               The People<br />
               <span style={{ color: '#f4be28' }}>Behind</span> Loyaly.
             </h1>
-            <p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', maxWidth: 560, margin: 0 }}>
+            <p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', maxWidth: 560, margin: '0 auto' }}>
               We're not just building a product. We're redefining retail — one store at a time.
             </p>
           </div>
-          {/* Company DNA widget */}
-          <div className="pw-widget-col" style={{ flexShrink: 0, width: 320 }}>
-            <div style={{
-              borderRadius: 24, padding: '28px 24px',
-              background: 'linear-gradient(145deg,#0e0e13 0%,#16161d 100%)',
-              border: '1px solid rgba(244,190,40,0.15)',
-              boxShadow: '0 40px 100px rgba(0,0,0,0.6)',
-            }}>
-              {/* Brand header */}
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
-                <div style={{ width: 42, height: 42, borderRadius: 13, background: 'rgba(244,190,40,0.12)', border: '1px solid rgba(244,190,40,0.28)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, color: '#f4be28' }}>✦</div>
-                <div>
-                  <div style={{ fontSize: 15, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif' }}>Loyaly.ai</div>
-                  <div style={{ fontSize: 10, color: '#f4be28', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase' }}>AI Retail Platform</div>
-                </div>
-              </div>
-              {/* Stats */}
-              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 20 }}>
-                {[['2024', 'Founded'], ['12+', 'Cities'], ['20+', 'Team']].map(([v, l]) => (
-                  <div key={l} style={{ background: 'rgba(255,255,255,0.04)', borderRadius: 14, padding: '14px 8px', textAlign: 'center', border: '1px solid rgba(255,255,255,0.07)' }}>
-                    <div style={{ fontSize: 20, fontWeight: 900, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>{v}</div>
-                    <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.38)', fontFamily: 'Manrope, sans-serif', marginTop: 4 }}>{l}</div>
-                  </div>
-                ))}
-              </div>
-              {/* Values */}
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 18 }}>
-                {['Intelligence first', 'Merchant obsessed', 'Build to last'].map((v, i) => (
-                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', borderRadius: 12, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)' }}>
-                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', flexShrink: 0 }} />
-                    <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.68)', fontFamily: 'Manrope, sans-serif', fontWeight: 600 }}>{v}</span>
-                  </div>
-                ))}
-              </div>
-              {/* Mission */}
-              <div style={{ padding: '14px 16px', borderRadius: 14, background: 'rgba(244,190,40,0.06)', border: '1px solid rgba(244,190,40,0.2)' }}>
-                <div style={{ fontSize: 10, fontWeight: 700, color: '#f4be28', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>Mission</div>
-                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Manrope, sans-serif', lineHeight: 1.65 }}>Transform physical retail with AI-driven intelligence and meaningful customer engagement.</div>
-              </div>
-            </div>
-          </div>
         </div>
       </section>
 
@@ -115,16 +88,16 @@ export default function AboutUsPage() {
       <section style={{ padding: '140px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
         <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8vw', alignItems: 'start' }}>
           <Reveal>
-            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 24 }}>Our Story</div>
+            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 24 }}>Our Story</div>
             <h2 style={{ fontSize: 'clamp(36px, 4.5vw, 68px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 32px', fontFamily: 'Sora, sans-serif' }}>
               We started with<br />a simple idea.
             </h2>
           </Reveal>
           <Reveal delay={0.15}>
-            <p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Manrope, sans-serif', margin: '0 0 32px' }}>
+            <p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', margin: '0 0 32px' }}>
               Offline retail deserves the same intelligence as online. A store owner in Coimbatore shouldn't be flying blind while an e-commerce algorithm knows exactly what every user wants.
             </p>
-            <p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Manrope, sans-serif', margin: 0 }}>
+            <p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', margin: 0 }}>
               Today, we're building a connected ecosystem where businesses grow smarter and customers shop better — together.
             </p>
           </Reveal>
@@ -151,7 +124,7 @@ export default function AboutUsPage() {
                 display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                 margin: '0 20px 20px', boxSizing: 'border-box',
               }}>
-                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: mv.accent, fontFamily: 'Manrope, sans-serif' }}>{mv.label}</div>
+                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: mv.accent, fontFamily: 'Sora, sans-serif' }}>{mv.label}</div>
                 <p style={{ fontSize: 'clamp(22px, 2.5vw, 36px)', fontWeight: 800, lineHeight: 1.25, color: mv.textColor, fontFamily: 'Sora, sans-serif', margin: 0, letterSpacing: '-0.02em' }}>
                   {mv.body}
                 </p>
@@ -164,7 +137,7 @@ export default function AboutUsPage() {
       {/* ── VALUES ── */}
       <section style={{ padding: '140px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
         <Reveal>
-          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 20 }}>How We Work</div>
+          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 20 }}>How We Work</div>
           <h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 80px', fontFamily: 'Sora, sans-serif' }}>
             What we believe.
           </h2>
@@ -179,7 +152,7 @@ export default function AboutUsPage() {
               }}>
                 <span style={{ fontSize: 13, fontWeight: 700, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '0.06em' }}>{v.n}</span>
                 <h3 style={{ fontSize: 'clamp(20px, 2.5vw, 36px)', fontWeight: 800, color: '#0a0a0f', fontFamily: 'Sora, sans-serif', margin: 0, letterSpacing: '-0.03em' }}>{v.title}</h3>
-                <p style={{ fontSize: 16, color: 'rgba(0,0,0,0.45)', fontFamily: 'Manrope, sans-serif', margin: 0, lineHeight: 1.65 }}>{v.desc}</p>
+                <p style={{ fontSize: 16, color: 'rgba(0,0,0,0.45)', fontFamily: 'Sora, sans-serif', margin: 0, lineHeight: 1.65 }}>{v.desc}</p>
               </div>
             </Reveal>
           ))}
@@ -205,7 +178,7 @@ export default function AboutUsPage() {
             display: 'inline-flex', alignItems: 'center', gap: 10,
             padding: '18px 44px', background: '#111', color: '#f4be28',
             fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none',
-            fontFamily: 'Manrope, sans-serif', position: 'relative', zIndex: 2,
+            fontFamily: 'Sora, sans-serif', position: 'relative', zIndex: 2,
           }}>Join Us →</Link>
         </Reveal>
       </section>
@@ -237,11 +210,11 @@ function TeamCarousel() {
 
       {/* Header */}
       <div style={{ textAlign: 'center', marginBottom: 72, position: 'relative', zIndex: 2, padding: '0 8%' }}>
-        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 16 }}>The Team</div>
+        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 16 }}>The Team</div>
         <h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: '0 0 16px', fontFamily: 'Sora, sans-serif' }}>
           Builders. Thinkers.<br />Retail obsessives.
         </h2>
-        <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.35)', fontFamily: 'Manrope, sans-serif', margin: 0 }}>
+        <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif', margin: 0 }}>
           Profiles coming soon — we&apos;re still busy building the future of retail.
         </p>
       </div>
@@ -325,7 +298,7 @@ function TeamCarousel() {
                   transition: 'opacity 0.4s ease',
                 }}>
                   <div style={{ fontSize: 17, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em', marginBottom: 4 }}>{member.name}</div>
-                  <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Manrope, sans-serif' }}>{member.role}</div>
+                  <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif' }}>{member.role}</div>
                 </div>
 
                 {/* Gold dot */}

src/app/blog_main/page.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState } from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 import { useReveal } from '@/hooks/useReveal';
 import GSAPAnimator from '@/components/GSAPAnimator';
 
@@ -65,63 +66,38 @@ export default function BlogMainPage() {
 
       {/* ── HERO ── */}
       <section style={{
-        padding: '120px 8% 100px', background: '#07070d',
+        padding: '120px 8% 100px', background: 'radial-gradient(ellipse 120% 90% at 50% 0%, #2c2350 0%, #211c3e 38%, #181429 100%)',
-        margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
+        margin: '0 20px 20px', borderRadius: '0 0 32px 32px',
         position: 'relative', overflow: 'hidden',
         display: 'flex', alignItems: 'center',
       }}>
+        {/* Background photo */}
+        <Image src="/images/stock/blog-main.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9 }} />
+        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(24,20,41,0.1) 0%, rgba(24,20,41,0.55) 85%)' }} />
+        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 65% at 50% 48%, rgba(18,14,30,0.78) 0%, rgba(18,14,30,0.35) 60%, transparent 100%)' }} />
+        {/* Accent blobs */}
+        <div style={{ position: 'absolute', top: '-14%', left: '6%', width: 480, height: 480, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.2) 0%, transparent 70%)', pointerEvents: 'none' }} />
+        <div style={{ position: 'absolute', bottom: '-16%', right: '4%', width: 420, height: 420, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
         <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(244,190,40,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(244,190,40,0.025) 1px,transparent 1px)', backgroundSize: '60px 60px', pointerEvents: 'none' }} />
 
-        <div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: '6vw' }}>
+        <div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
-          <div style={{ maxWidth: 680 }}>
+          <div style={{ maxWidth: 720 }}>
-            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 28, display: 'flex', alignItems: 'center', gap: 12 }}>
+            <div style={{
-              <span style={{ width: 32, height: 1, background: '#f4be28', display: 'block' }} />Market Insights
+              fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 28,
+              display: 'inline-flex', alignItems: 'center', gap: 10,
+              padding: '8px 18px', borderRadius: 100,
+              background: 'rgba(244,190,40,0.08)', border: '1px solid rgba(244,190,40,0.22)',
+            }}>
+              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', display: 'block' }} />Market Insights
             </div>
             <h1 data-gsap="heading" style={{ fontSize: 'clamp(48px, 8vw, 120px)', fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.9, color: '#fff', margin: '0 0 28px', fontFamily: 'Sora, sans-serif' }}>
               Insights for the<br />
               <span style={{ color: '#f4be28' }}>Future of Retail.</span>
             </h1>
-            <p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', maxWidth: 520, margin: 0 }}>
+            <p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', maxWidth: 520, margin: '0 auto' }}>
               Explore ideas, trends, and strategies shaping modern retail — from our team to yours.
             </p>
           </div>
-          {/* Featured article preview widget */}
-          <div className="pw-widget-col" style={{ flexShrink: 0, width: 320 }}>
-            <div style={{
-              borderRadius: 24, overflow: 'hidden',
-              background: 'linear-gradient(145deg,#0e0e13 0%,#16161d 100%)',
-              border: '1px solid rgba(244,190,40,0.15)',
-              boxShadow: '0 40px 100px rgba(0,0,0,0.6)',
-            }}>
-              {/* Visual banner */}
-              <div style={{ height: 148, background: 'linear-gradient(135deg,#1a1430 0%,#0e0e1a 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
-                <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(244,190,40,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(244,190,40,0.04) 1px,transparent 1px)', backgroundSize: '28px 28px' }} />
-                <div style={{ position: 'relative', textAlign: 'center', lineHeight: 1, userSelect: 'none' }}>
-                  <div style={{ fontSize: 40, fontWeight: 900, color: 'transparent', WebkitTextStroke: '1px rgba(244,190,40,0.22)', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.04em' }}>RETAIL</div>
-                  <div style={{ fontSize: 40, fontWeight: 900, color: 'rgba(244,190,40,0.12)', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.04em' }}>AI</div>
-                </div>
-                <span style={{ position: 'absolute', top: 14, left: 14, fontSize: 10, fontWeight: 700, color: '#f4be28', background: 'rgba(244,190,40,0.12)', border: '1px solid rgba(244,190,40,0.28)', padding: '4px 10px', borderRadius: 100, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Featured</span>
-              </div>
-              {/* Article info */}
-              <div style={{ padding: '18px 20px 22px' }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
-                  <span style={{ fontSize: 10, fontWeight: 700, color: '#f4be28', background: 'rgba(244,190,40,0.1)', border: '1px solid rgba(244,190,40,0.2)', padding: '3px 9px', borderRadius: 100, fontFamily: 'Manrope, sans-serif', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Analytics</span>
-                  <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.28)', fontFamily: 'Manrope, sans-serif' }}>6 min read</span>
-                </div>
-                <h3 style={{ fontSize: 16, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em', lineHeight: 1.3, margin: '0 0 10px' }}>Why Footfall Data is the New Gold</h3>
-                <p style={{ fontSize: 12, color: 'rgba(255,255,255,0.38)', fontFamily: 'Manrope, sans-serif', lineHeight: 1.65, margin: '0 0 16px' }}>Offline retailers are sitting on untapped behavioural gold — and most don&apos;t even know it exists yet.</p>
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.07)' }}>
-                  <div style={{ display: 'flex', gap: 8 }}>
-                    {['02', '03', '04'].map(n => (
-                      <div key={n} style={{ width: 28, height: 28, borderRadius: 8, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.07)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: 'rgba(255,255,255,0.28)', fontFamily: 'Sora, sans-serif', fontWeight: 700 }}>{n}</div>
-                    ))}
-                    <div style={{ width: 28, height: 28, borderRadius: 8, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.07)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: 'rgba(255,255,255,0.28)', fontFamily: 'Manrope, sans-serif' }}>+2</div>
-                  </div>
-                  <span style={{ fontSize: 12, fontWeight: 700, color: '#f4be28', fontFamily: 'Manrope, sans-serif' }}>Read article →</span>
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
       </section>
 
@@ -133,7 +109,7 @@ export default function BlogMainPage() {
               padding: '10px 22px', borderRadius: 100,
               background: activeFilter === f ? '#0a0a0f' : 'transparent',
               color: activeFilter === f ? '#f4be28' : 'rgba(0,0,0,0.4)',
-              fontSize: 13, fontWeight: 700, fontFamily: 'Manrope, sans-serif',
+              fontSize: 13, fontWeight: 700, fontFamily: 'Sora, sans-serif',
               border: `1px solid ${activeFilter === f ? '#0a0a0f' : 'rgba(0,0,0,0.1)'}`,
               cursor: 'pointer', transition: 'all 0.2s ease',
             }}>{f}</button>
@@ -154,13 +130,13 @@ export default function BlogMainPage() {
               {/* Left — article info */}
               <div>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 32 }}>
-                  <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', background: 'rgba(244,190,40,0.1)', padding: '5px 12px', borderRadius: 100, border: '1px solid rgba(244,190,40,0.2)' }}>{featured.tag}</span>
+                  <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', background: 'rgba(244,190,40,0.1)', padding: '5px 12px', borderRadius: 100, border: '1px solid rgba(244,190,40,0.2)' }}>{featured.tag}</span>
-                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.3)', fontFamily: 'Manrope, sans-serif' }}>{featured.readTime} read</span>
+                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.3)', fontFamily: 'Sora, sans-serif' }}>{featured.readTime} read</span>
-                  <span style={{ fontSize: 11, fontWeight: 700, color: '#f4be28', fontFamily: 'Manrope, sans-serif', background: 'rgba(244,190,40,0.08)', padding: '4px 10px', borderRadius: 100 }}>Featured</span>
+                  <span style={{ fontSize: 11, fontWeight: 700, color: '#f4be28', fontFamily: 'Sora, sans-serif', background: 'rgba(244,190,40,0.08)', padding: '4px 10px', borderRadius: 100 }}>Featured</span>
                 </div>
                 <h2 style={{ fontSize: 'clamp(28px, 3.5vw, 52px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 1.05, color: '#fff', margin: '0 0 20px', fontFamily: 'Sora, sans-serif' }}>{featured.title}</h2>
-                <p style={{ fontSize: 16, lineHeight: 1.75, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', margin: '0 0 36px' }}>{featured.excerpt}</p>
+                <p style={{ fontSize: 16, lineHeight: 1.75, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', margin: '0 0 36px' }}>{featured.excerpt}</p>
-                <Link href="/blog_single_page" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 15, fontWeight: 700, color: '#f4be28', fontFamily: 'Manrope, sans-serif', textDecoration: 'none', borderBottom: '1px solid rgba(244,190,40,0.3)', paddingBottom: 4 }}>
+                <Link href="/blog_single_page" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 15, fontWeight: 700, color: '#f4be28', fontFamily: 'Sora, sans-serif', textDecoration: 'none', borderBottom: '1px solid rgba(244,190,40,0.3)', paddingBottom: 4 }}>
                   Read Article →
                 </Link>
               </div>
@@ -206,13 +182,13 @@ export default function BlogMainPage() {
               >
                 <div>
                   <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
-                    <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', background: 'rgba(244,190,40,0.08)', padding: '4px 10px', borderRadius: 100, border: '1px solid rgba(244,190,40,0.15)' }}>{article.tag}</span>
+                    <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', background: 'rgba(244,190,40,0.08)', padding: '4px 10px', borderRadius: 100, border: '1px solid rgba(244,190,40,0.15)' }}>{article.tag}</span>
-                    <span style={{ fontSize: 12, color: 'rgba(0,0,0,0.3)', fontFamily: 'Manrope, sans-serif' }}>{article.readTime}</span>
+                    <span style={{ fontSize: 12, color: 'rgba(0,0,0,0.3)', fontFamily: 'Sora, sans-serif' }}>{article.readTime}</span>
                   </div>
                   <h3 style={{ fontSize: 'clamp(20px, 2vw, 28px)', fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.2, color: '#0a0a0f', margin: '0 0 16px', fontFamily: 'Sora, sans-serif' }}>{article.title}</h3>
-                  <p style={{ fontSize: 14, lineHeight: 1.7, color: 'rgba(0,0,0,0.45)', fontFamily: 'Manrope, sans-serif', margin: 0 }}>{article.excerpt}</p>
+                  <p style={{ fontSize: 14, lineHeight: 1.7, color: 'rgba(0,0,0,0.45)', fontFamily: 'Sora, sans-serif', margin: 0 }}>{article.excerpt}</p>
                 </div>
-                <Link href="/blog_single_page" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 700, color: hovered === i ? '#c9960f' : 'rgba(0,0,0,0.35)', fontFamily: 'Manrope, sans-serif', textDecoration: 'none', marginTop: 28, transition: 'color 0.2s' }}>
+                <Link href="/blog_single_page" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 700, color: hovered === i ? '#c9960f' : 'rgba(0,0,0,0.35)', fontFamily: 'Sora, sans-serif', textDecoration: 'none', marginTop: 28, transition: 'color 0.2s' }}>
                   Read Article →
                 </Link>
               </div>
@@ -228,20 +204,20 @@ export default function BlogMainPage() {
           <h2 style={{ fontSize: 'clamp(32px, 5vw, 72px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: '0 0 20px', fontFamily: 'Sora, sans-serif', position: 'relative', zIndex: 2 }}>
             Stay ahead of retail.
           </h2>
-          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', margin: '0 auto 44px', maxWidth: 400, position: 'relative', zIndex: 2 }}>
+          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', margin: '0 auto 44px', maxWidth: 400, position: 'relative', zIndex: 2 }}>
             Get our latest insights on AI, footfall, and the future of physical retail — delivered monthly.
           </p>
           <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', position: 'relative', zIndex: 2 }}>
             <input placeholder="your@email.com" style={{
               padding: '16px 24px', borderRadius: 100, border: '1px solid rgba(255,255,255,0.12)',
               background: 'rgba(255,255,255,0.06)', color: '#fff',
-              fontSize: 15, fontFamily: 'Manrope, sans-serif', outline: 'none',
+              fontSize: 15, fontFamily: 'Sora, sans-serif', outline: 'none',
               backdropFilter: 'blur(12px)', width: 280,
             }} />
             <button style={{
               padding: '16px 32px', borderRadius: 100, border: 'none',
               background: '#f4be28', color: '#111',
-              fontSize: 15, fontWeight: 800, fontFamily: 'Manrope, sans-serif', cursor: 'pointer',
+              fontSize: 15, fontWeight: 800, fontFamily: 'Sora, sans-serif', cursor: 'pointer',
             }}>Subscribe →</button>
           </div>
         </Reveal>

src/app/blog_single_page/page.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 
 const ARTICLE = {
   tag: 'Analytics',
@@ -41,30 +42,36 @@ export default function BlogSinglePage() {
 
       {/* Hero */}
       <section style={{
-        padding: '140px 8% 100px', background: '#07070d',
+        padding: '140px 8% 100px', background: 'radial-gradient(ellipse 120% 90% at 50% 0%, #2c2350 0%, #211c3e 38%, #181429 100%)',
-        margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
+        margin: '0 20px 20px', borderRadius: '0 0 32px 32px',
         position: 'relative', overflow: 'hidden',
       }}>
+        {/* Background photo */}
+        <Image src="/images/stock/blog-article.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9 }} />
+        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(24,20,41,0.1) 0%, rgba(24,20,41,0.55) 85%)' }} />
+        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 65% 70% at 50% 48%, rgba(18,14,30,0.78) 0%, rgba(18,14,30,0.35) 60%, transparent 100%)' }} />
+        <div style={{ position: 'absolute', top: '-14%', right: '8%', width: 460, height: 460, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.2) 0%, transparent 70%)', pointerEvents: 'none' }} />
+        <div style={{ position: 'absolute', bottom: '-18%', left: '4%', width: 400, height: 400, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
         <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(244,190,40,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(244,190,40,0.025) 1px,transparent 1px)', backgroundSize: '60px 60px', pointerEvents: 'none' }} />
-        <div style={{ position: 'relative', zIndex: 2, maxWidth: 820 }}>
+        <div style={{ position: 'relative', zIndex: 2, maxWidth: 820, margin: '0 auto', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 32 }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, marginBottom: 32 }}>
-            <Link href="/blog_main" style={{ fontSize: 12, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6 }}>
+            <Link href="/blog_main" style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6 }}>
               ← Market Insights
             </Link>
-            <span style={{ color: 'rgba(255,255,255,0.15)' }}>/</span>
+            <span style={{ color: 'rgba(255,255,255,0.2)' }}>/</span>
-            <span style={{ fontSize: 11, fontWeight: 700, color: '#f4be28', background: 'rgba(244,190,40,0.1)', border: '1px solid rgba(244,190,40,0.2)', padding: '3px 10px', borderRadius: 100, fontFamily: 'Manrope, sans-serif', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{ARTICLE.tag}</span>
+            <span style={{ fontSize: 11, fontWeight: 700, color: '#f4be28', background: 'rgba(244,190,40,0.1)', border: '1px solid rgba(244,190,40,0.2)', padding: '3px 10px', borderRadius: 100, fontFamily: 'Sora, sans-serif', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{ARTICLE.tag}</span>
           </div>
           <h1 style={{ fontSize: 'clamp(36px, 6vw, 88px)', fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.92, color: '#fff', margin: '0 0 28px', fontFamily: 'Sora, sans-serif' }}>
             {ARTICLE.title}
           </h1>
-          <p style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif', maxWidth: 600, margin: '0 0 40px' }}>
+          <p style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', maxWidth: 600, margin: '0 0 40px' }}>
             {ARTICLE.excerpt}
           </p>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 20 }}>
             <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(244,190,40,0.15)', border: '1.5px solid rgba(244,190,40,0.35)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, color: '#f4be28' }}>✦</div>
-            <div>
+            <div style={{ textAlign: 'left' }}>
-              <div style={{ fontSize: 14, fontWeight: 700, color: '#fff', fontFamily: 'Manrope, sans-serif' }}>{ARTICLE.author}</div>
+              <div style={{ fontSize: 14, fontWeight: 700, color: '#fff', fontFamily: 'Sora, sans-serif' }}>{ARTICLE.author}</div>
-              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.35)', fontFamily: 'Manrope, sans-serif' }}>{ARTICLE.date} · {ARTICLE.readTime} read</div>
+              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif' }}>{ARTICLE.date} · {ARTICLE.readTime} read</div>
             </div>
           </div>
         </div>
@@ -78,7 +85,7 @@ export default function BlogSinglePage() {
               <h2 style={{ fontSize: 'clamp(22px, 2.5vw, 32px)', fontWeight: 800, letterSpacing: '-0.03em', color: '#0a0a0f', margin: '0 0 18px', fontFamily: 'Sora, sans-serif' }}>
                 {s.heading}
               </h2>
-              <p style={{ fontSize: 17, lineHeight: 1.9, color: 'rgba(0,0,0,0.6)', fontFamily: 'Manrope, sans-serif', margin: 0 }}>
+              <p style={{ fontSize: 17, lineHeight: 1.9, color: 'rgba(0,0,0,0.6)', fontFamily: 'Sora, sans-serif', margin: 0 }}>
                 {s.body}
               </p>
               {i < ARTICLE.sections.length - 1 && (
@@ -96,7 +103,7 @@ export default function BlogSinglePage() {
             <p style={{ fontSize: 'clamp(18px, 2.2vw, 26px)', fontWeight: 800, color: '#0a0a0f', fontFamily: 'Sora, sans-serif', lineHeight: 1.4, margin: 0, letterSpacing: '-0.02em' }}>
               "Every day without footfall data is a day of lost insight."
             </p>
-            <footer style={{ fontSize: 13, color: 'rgba(0,0,0,0.4)', fontFamily: 'Manrope, sans-serif', marginTop: 12 }}>— Loyaly.ai, 2026</footer>
+            <footer style={{ fontSize: 13, color: 'rgba(0,0,0,0.4)', fontFamily: 'Sora, sans-serif', marginTop: 12 }}>— Loyaly.ai, 2026</footer>
           </blockquote>
         </div>
       </section>
@@ -107,16 +114,16 @@ export default function BlogSinglePage() {
           <h2 style={{ fontSize: 'clamp(28px, 3.5vw, 52px)', fontWeight: 900, letterSpacing: '-0.04em', color: '#fff', margin: '0 0 12px', fontFamily: 'Sora, sans-serif' }}>
             Ready to see your store&apos;s data?
           </h2>
-          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', margin: 0 }}>Book a 30-minute demo and see Behavision AI in action.</p>
+          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', margin: 0 }}>Book a 30-minute demo and see Behavision AI in action.</p>
         </div>
-        <Link href="/contacts" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '16px 36px', background: '#f4be28', color: '#111', fontSize: 15, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif', whiteSpace: 'nowrap', boxShadow: '0 8px 28px rgba(244,190,40,0.35)' }}>
+        <Link href="/contacts" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '16px 36px', background: '#f4be28', color: '#111', fontSize: 15, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, sans-serif', whiteSpace: 'nowrap', boxShadow: '0 8px 28px rgba(244,190,40,0.35)' }}>
           Book a Demo →
         </Link>
       </section>
 
       {/* Related articles */}
       <section style={{ padding: '80px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
-        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 32 }}>More from Market Insights</div>
+        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 32 }}>More from Market Insights</div>
         <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 16 }}>
           {ARTICLE.relatedArticles.map((a) => (
             <Link key={a.n} href="/blog_main" style={{ textDecoration: 'none', display: 'block', padding: '28px 24px', borderRadius: 20, background: '#fafafa', border: '1px solid rgba(0,0,0,0.07)', transition: 'all 0.25s ease' }}
@@ -124,8 +131,8 @@ export default function BlogSinglePage() {
               onMouseLeave={e => { (e.currentTarget as HTMLAnchorElement).style.background = '#fafafa'; (e.currentTarget as HTMLAnchorElement).style.borderColor = 'rgba(0,0,0,0.07)'; }}
             >
               <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
-                <span style={{ fontSize: 10, fontWeight: 700, color: '#f4be28', background: 'rgba(244,190,40,0.1)', border: '1px solid rgba(244,190,40,0.2)', padding: '3px 9px', borderRadius: 100, fontFamily: 'Manrope, sans-serif', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{a.tag}</span>
+                <span style={{ fontSize: 10, fontWeight: 700, color: '#f4be28', background: 'rgba(244,190,40,0.1)', border: '1px solid rgba(244,190,40,0.2)', padding: '3px 9px', borderRadius: 100, fontFamily: 'Sora, sans-serif', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{a.tag}</span>
-                <span style={{ fontSize: 11, color: 'rgba(0,0,0,0.3)', fontFamily: 'Manrope, sans-serif' }}>{a.readTime} read</span>
+                <span style={{ fontSize: 11, color: 'rgba(0,0,0,0.3)', fontFamily: 'Sora, sans-serif' }}>{a.readTime} read</span>
               </div>
               <h3 style={{ fontSize: 17, fontWeight: 800, color: '#0a0a0f', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em', lineHeight: 1.3, margin: 0 }}>{a.title}</h3>
             </Link>

src/app/contacts/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React from 'react';
+import Image from 'next/image';
 import GSAPAnimator from '@/components/GSAPAnimator';
 import dynamic from 'next/dynamic';
 
@@ -13,11 +14,18 @@ export default function ContactsPage() {
 
       {/* ── HERO ── */}
       <section style={{
-        padding: '120px 8% 100px', background: '#07070d',
+        padding: '120px 8% 100px', background: 'radial-gradient(ellipse 120% 90% at 78% 0%, #2e2350 0%, #221b3e 38%, #191529 100%)',
-        margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
+        margin: '0 20px 20px', borderRadius: '0 0 32px 32px',
         position: 'relative', overflow: 'hidden',
         display: 'flex', alignItems: 'center',
       }}>
+        {/* Background photo */}
+        <Image src="/images/stock/contacts.jpg" alt="" fill priority style={{ objectFit: 'cover', objectPosition: 'top center', opacity: 0.9 }} />
+        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(25,21,41,0.1) 0%, rgba(25,21,41,0.55) 85%)' }} />
+        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 65% at 50% 48%, rgba(18,14,30,0.78) 0%, rgba(18,14,30,0.35) 60%, transparent 100%)' }} />
+        {/* Accent blobs */}
+        <div style={{ position: 'absolute', top: '-10%', left: '-8%', width: 480, height: 480, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.2) 0%, transparent 70%)', pointerEvents: 'none' }} />
+        <div style={{ position: 'absolute', bottom: '-18%', right: '-6%', width: 440, height: 440, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
         {/* Grid texture */}
         <div style={{
           position: 'absolute', inset: 0, pointerEvents: 'none',
@@ -25,14 +33,16 @@ export default function ContactsPage() {
           backgroundSize: '60px 60px',
         }} />
 
-        <div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: '6vw' }}>
+        <div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
-          <div style={{ maxWidth: 680 }}>
+          <div style={{ maxWidth: 760 }}>
             <div style={{
               fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
-              color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 28,
+              color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 32,
-              display: 'flex', alignItems: 'center', gap: 12,
+              display: 'inline-flex', alignItems: 'center', gap: 10,
+              padding: '8px 18px', borderRadius: 100,
+              background: 'rgba(244,190,40,0.08)', border: '1px solid rgba(244,190,40,0.22)',
             }}>
-              <span style={{ width: 32, height: 1, background: '#f4be28', display: 'block' }} />Contact
+              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', display: 'block' }} />Contact
             </div>
             <h1 data-gsap="heading" style={{
               fontSize: 'clamp(48px, 8vw, 120px)', fontWeight: 900,
@@ -44,14 +54,14 @@ export default function ContactsPage() {
             </h1>
             <p data-gsap="text" style={{
               fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75,
-              color: 'rgba(255,255,255,0.42)', fontFamily: 'Manrope, sans-serif',
+              color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif',
-              maxWidth: 540, margin: 0,
+              maxWidth: 540, margin: '0 auto',
             }}>
               Tell us about your store and your goals. Our team will get back to you within one business day.
             </p>
 
             {/* Quick contact chips */}
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 44 }}>
+            <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 12, marginTop: 44 }}>
               {[
                 { label: 'loyalydigital@gmail.com', href: 'mailto:loyalydigital@gmail.com' },
                 { label: 'Coimbatore, TN', href: undefined },
@@ -60,9 +70,9 @@ export default function ContactsPage() {
                   <span style={{
                     display: 'inline-flex', alignItems: 'center', gap: 8,
                     padding: '10px 18px', borderRadius: 100,
-                    background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)',
+                    background: 'rgba(255,255,255,0.07)', border: '1px solid rgba(255,255,255,0.14)',
-                    fontSize: 14, fontWeight: 600, color: 'rgba(255,255,255,0.7)',
+                    fontSize: 14, fontWeight: 600, color: 'rgba(255,255,255,0.8)',
-                    fontFamily: 'Manrope, sans-serif',
+                    fontFamily: 'Sora, sans-serif',
                   }}>
                     <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', display: 'block' }} />
                     {c.label}
@@ -74,45 +84,6 @@ export default function ContactsPage() {
               })}
             </div>
           </div>
-          {/* Message preview widget */}
-          <div className="pw-widget-col" style={{ flexShrink: 0, width: 320 }}>
-            <div style={{
-              borderRadius: 24, padding: '24px',
-              background: 'linear-gradient(145deg,#0e0e13 0%,#16161d 100%)',
-              border: '1px solid rgba(244,190,40,0.15)',
-              boxShadow: '0 40px 100px rgba(0,0,0,0.6)',
-            }}>
-              {/* Header */}
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18, paddingBottom: 16, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
-                <div>
-                  <div style={{ fontSize: 13, fontWeight: 700, color: '#fff', fontFamily: 'Manrope, sans-serif' }}>New Message</div>
-                  <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.28)', fontFamily: 'Manrope, sans-serif', marginTop: 2 }}>loyalydigital@gmail.com</div>
-                </div>
-                <span style={{ fontSize: 10, color: '#4ade80', fontWeight: 700, background: 'rgba(74,222,128,0.1)', border: '1px solid rgba(74,222,128,0.28)', padding: '4px 10px', borderRadius: 100, fontFamily: 'Manrope, sans-serif' }}>● LIVE</span>
-              </div>
-              {/* Incoming message */}
-              <div style={{ background: 'rgba(255,255,255,0.04)', borderRadius: 16, padding: '14px 16px', marginBottom: 12, border: '1px solid rgba(255,255,255,0.07)' }}>
-                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)', fontFamily: 'Manrope, sans-serif', marginBottom: 8 }}>From: A Retail Partner</div>
-                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.68)', fontFamily: 'Manrope, sans-serif', lineHeight: 1.65 }}>"We'd love to explore how Loyaly.ai can drive footfall and loyalty for our chain of stores..."</div>
-              </div>
-              {/* Reply */}
-              <div style={{ background: 'rgba(244,190,40,0.07)', borderRadius: 16, padding: '14px 16px', marginBottom: 20, border: '1px solid rgba(244,190,40,0.2)' }}>
-                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)', fontFamily: 'Manrope, sans-serif', marginBottom: 8 }}>Loyaly.ai</div>
-                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.68)', fontFamily: 'Manrope, sans-serif', lineHeight: 1.65 }}>We'll be in touch within one business day. Let's build something great together! ✦</div>
-              </div>
-              {/* Contact details */}
-              {[
-                { icon: '📍', text: 'Coimbatore, Tamil Nadu' },
-                { icon: '✉️', text: 'loyalydigital@gmail.com' },
-                { icon: '⏱', text: 'Response within 24 hours' },
-              ].map((c, i) => (
-                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 0', borderTop: i > 0 ? '1px solid rgba(255,255,255,0.05)' : 'none' }}>
-                  <span style={{ fontSize: 14, width: 20, textAlign: 'center' }}>{c.icon}</span>
-                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.42)', fontFamily: 'Manrope, sans-serif' }}>{c.text}</span>
-                </div>
-              ))}
-            </div>
-          </div>
         </div>
       </section>
 

src/app/faq/page.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState } from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 import GSAPAnimator from '@/components/GSAPAnimator';
 
 const FAQS = [
@@ -49,45 +50,41 @@ export default function FAQPage() {
 
       {/* Hero */}
       <section style={{
-        padding: '140px 8% 100px', background: '#07070d',
+        padding: '140px 8% 100px', background: 'radial-gradient(ellipse 120% 90% at 50% 0%, #2c2350 0%, #211c3e 38%, #181429 100%)',
-        margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
+        margin: '0 20px 20px', borderRadius: '0 0 32px 32px',
         position: 'relative', overflow: 'hidden',
         display: 'flex', alignItems: 'center',
       }}>
+        {/* Background photo */}
+        <Image src="/images/stock/faq.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9 }} />
+        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(24,20,41,0.1) 0%, rgba(24,20,41,0.55) 85%)' }} />
+        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 65% at 50% 48%, rgba(18,14,30,0.78) 0%, rgba(18,14,30,0.35) 60%, transparent 100%)' }} />
+        {/* Accent blobs */}
+        <div style={{ position: 'absolute', top: '-14%', right: '8%', width: 480, height: 480, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.2) 0%, transparent 70%)', pointerEvents: 'none' }} />
+        <div style={{ position: 'absolute', bottom: '-16%', left: '4%', width: 420, height: 420, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
         <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(244,190,40,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(244,190,40,0.025) 1px,transparent 1px)', backgroundSize: '60px 60px', pointerEvents: 'none' }} />
-        <div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: '6vw' }}>
+        <div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
-          <div>
+          <div style={{ maxWidth: 720 }}>
-            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 24, display: 'flex', alignItems: 'center', gap: 12 }}>
+            <div style={{
-              <span style={{ width: 32, height: 1, background: '#f4be28', display: 'block' }} />FAQ
+              fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 28,
+              display: 'inline-flex', alignItems: 'center', gap: 10,
+              padding: '8px 18px', borderRadius: 100,
+              background: 'rgba(244,190,40,0.08)', border: '1px solid rgba(244,190,40,0.22)',
+            }}>
+              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', display: 'block' }} />FAQ
             </div>
             <h1 data-gsap="heading" style={{ fontSize: 'clamp(48px, 8vw, 110px)', fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.9, color: '#fff', margin: '0 0 24px', fontFamily: 'Sora, sans-serif' }}>
               Got<br />
               <span style={{ color: '#f4be28' }}>Questions?</span>
             </h1>
-            <p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.42)', fontFamily: 'Manrope, sans-serif', maxWidth: 520, margin: '0 0 40px' }}>
+            <p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', maxWidth: 520, margin: '0 auto 40px' }}>
               Everything you need to know about Loyaly — for customers, merchants, and curious minds.
             </p>
-            <Link href="/contacts" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '14px 32px', background: '#f4be28', color: '#111', fontSize: 15, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif' }}>
+            <Link href="/contacts" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '14px 32px', background: '#f4be28', color: '#111', fontSize: 15, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, sans-serif' }}>
               Still need help? Contact us →
             </Link>
           </div>
-          {/* Stats card */}
-          <div className="pw-widget-col" style={{ flexShrink: 0, width: 280 }}>
-            <div style={{ borderRadius: 24, padding: '28px 24px', background: 'linear-gradient(145deg,#0e0e13 0%,#16161d 100%)', border: '1px solid rgba(244,190,40,0.15)', boxShadow: '0 40px 100px rgba(0,0,0,0.6)' }}>
-              {[
-                { v: '15+', l: 'FAQ answers' },
-                { v: '3', l: 'Categories' },
-                { v: '<24h', l: 'Support response' },
-              ].map((s, i) => (
-                <div key={i} style={{ padding: '16px 0', borderBottom: i < 2 ? '1px solid rgba(255,255,255,0.06)' : 'none' }}>
-                  <div style={{ fontSize: 28, fontWeight: 900, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em' }}>{s.v}</div>
-                  <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', marginTop: 4 }}>{s.l}</div>
         </div>
-              ))}
-            </div>
-          </div>
-        </div>
-        <style>{`.pw-widget-col { } @media(max-width:900px){.pw-widget-col{display:none}}`}</style>
       </section>
 
       {/* FAQ sections */}
@@ -121,7 +118,7 @@ export default function FAQPage() {
                       padding: '20px 24px', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', gap: 16,
                     }}
                   >
-                    <span style={{ fontSize: 16, fontWeight: 700, color: '#0a0a0f', fontFamily: 'Manrope, sans-serif', lineHeight: 1.4 }}>{item.q}</span>
+                    <span style={{ fontSize: 16, fontWeight: 700, color: '#0a0a0f', fontFamily: 'Sora, sans-serif', lineHeight: 1.4 }}>{item.q}</span>
                     <span style={{
                       flexShrink: 0, width: 28, height: 28, borderRadius: '50%',
                       background: isOpen ? section.color : 'rgba(0,0,0,0.06)',
@@ -133,7 +130,7 @@ export default function FAQPage() {
                   </button>
                   {isOpen && (
                     <div style={{ padding: '0 24px 22px' }}>
-                      <p style={{ margin: 0, fontSize: 15, color: 'rgba(0,0,0,0.55)', fontFamily: 'Manrope, sans-serif', lineHeight: 1.8 }}>{item.a}</p>
+                      <p style={{ margin: 0, fontSize: 15, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', lineHeight: 1.8 }}>{item.a}</p>
                     </div>
                   )}
                 </div>
@@ -146,8 +143,8 @@ export default function FAQPage() {
       {/* CTA */}
       <section style={{ padding: '80px 8%', background: '#f4be28', margin: '0 20px 20px', borderRadius: 24, textAlign: 'center' }}>
         <h2 style={{ fontSize: 'clamp(28px, 4vw, 56px)', fontWeight: 900, letterSpacing: '-0.04em', color: '#111', margin: '0 0 16px', fontFamily: 'Sora, sans-serif' }}>Still have questions?</h2>
-        <p style={{ fontSize: 16, color: 'rgba(0,0,0,0.55)', fontFamily: 'Manrope, sans-serif', margin: '0 0 36px' }}>Our team is happy to help — get in touch and we&apos;ll respond within one business day.</p>
+        <p style={{ fontSize: 16, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', margin: '0 0 36px' }}>Our team is happy to help — get in touch and we&apos;ll respond within one business day.</p>
-        <Link href="/contacts" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '16px 40px', background: '#111', color: '#f4be28', fontSize: 15, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif' }}>
+        <Link href="/contacts" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '16px 40px', background: '#111', color: '#f4be28', fontSize: 15, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, sans-serif' }}>
           Contact Us →
         </Link>
       </section>

src/app/layout.tsx

@@ -41,7 +41,7 @@ export default function RootLayout({
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link
           rel="stylesheet"
-          href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&family=Sora:wght@400;500;600;700;800;900&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800;900&display=swap"
         />
       </head>
       <body suppressHydrationWarning>

src/app/page.tsx

@@ -351,7 +351,7 @@ export default function IndexPage() {
           position: 'relative', zIndex: 2,
           fontSize: 11, fontWeight: 800, letterSpacing: '0.3em',
           textTransform: 'uppercase', color: 'rgba(244,190,40,0.75)',
-          fontFamily: 'Manrope, sans-serif', marginBottom: 36,
+          fontFamily: 'Sora, sans-serif', marginBottom: 36,
           userSelect: 'none',
         }}>
           Loyaly
@@ -383,7 +383,7 @@ export default function IndexPage() {
           position: 'relative', zIndex: 2,
           fontSize: 11, fontWeight: 600, letterSpacing: '0.2em',
           textTransform: 'uppercase', color: 'rgba(255,255,255,0.28)',
-          fontFamily: 'Manrope, sans-serif', marginTop: 28,
+          fontFamily: 'Sora, sans-serif', marginTop: 28,
           userSelect: 'none',
         }}>
           Loading experience
@@ -469,7 +469,7 @@ export default function IndexPage() {
             letterSpacing: '0.12em',
             textTransform: 'uppercase',
             color: 'rgba(255,255,255,0.42)',
-            fontFamily: 'Manrope, sans-serif',
+            fontFamily: 'Sora, sans-serif',
             position: 'relative',
           }}>
             Scroll to explore

src/app/solutions_page/page.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState } from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 import GSAPAnimator from '@/components/GSAPAnimator';
 import { useReveal } from '@/hooks/useReveal';
 
@@ -48,88 +49,50 @@ export default function SolutionsPage() {
 
       {/* ── HERO ── */}
       <section style={{
-        minHeight: '92vh', background: '#07070d',
+        minHeight: '92vh', background: 'radial-gradient(ellipse 120% 90% at 70% 0%, #2c2350 0%, #211c3e 38%, #181429 100%)',
         display: 'flex', alignItems: 'center',
         padding: '120px 8% 100px',
-        margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
+        margin: '0 20px 20px', borderRadius: '0 0 32px 32px',
         position: 'relative', overflow: 'hidden',
       }}>
+        {/* Background photo */}
+        <Image src="/images/stock/solutions.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9 }} />
+        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(24,20,41,0.1) 0%, rgba(24,20,41,0.55) 85%)' }} />
+        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 65% at 50% 48%, rgba(18,14,30,0.78) 0%, rgba(18,14,30,0.35) 60%, transparent 100%)' }} />
+        {/* Accent blobs */}
+        <div style={{ position: 'absolute', top: '-12%', left: '4%', width: 480, height: 480, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.2) 0%, transparent 70%)', pointerEvents: 'none' }} />
+        <div style={{ position: 'absolute', bottom: '-14%', right: '0%', width: 440, height: 440, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
         {/* Animated rings */}
         {[600, 900, 1200].map((s, i) => (
           <div key={i} style={{
             position: 'absolute', top: '50%', right: '-10%',
             width: s, height: s, borderRadius: '50%',
-            border: '1px solid rgba(244,190,40,0.05)',
+            border: '1px solid rgba(244,190,40,0.07)',
             transform: 'translateY(-50%)',
             pointerEvents: 'none',
           }} />
         ))}
 
-        <div style={{ width: '100%', position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: '6vw' }}>
+        <div style={{ width: '100%', position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
-          <div style={{ maxWidth: 680 }}>
+          <div style={{ maxWidth: 760 }}>
-            <div data-gsap="badge" style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 28, display: 'flex', alignItems: 'center', gap: 12 }}>
+            <div data-gsap="badge" style={{
-              <span data-gsap="line" style={{ width: 32, height: 1, background: '#f4be28', display: 'block' }} />Solutions
+              fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 28,
+              display: 'inline-flex', alignItems: 'center', gap: 10,
+              padding: '8px 18px', borderRadius: 100,
+              background: 'rgba(244,190,40,0.08)', border: '1px solid rgba(244,190,40,0.22)',
+            }}>
+              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', display: 'block' }} />Solutions
             </div>
             <h1 data-gsap="heading" style={{ fontSize: 'clamp(52px, 8.5vw, 130px)', fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.88, color: '#fff', margin: '0 0 36px', fontFamily: 'Sora, sans-serif' }}>
               Built for<br />Modern<br />
-              <span style={{ WebkitTextStroke: '2px rgba(244,190,40,0.4)', color: 'transparent' }}>Retail Growth.</span>
+              <span style={{ color: '#f4be28' }}>Retail Growth.</span>
             </h1>
-            <p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.6vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', maxWidth: 540, margin: '0 0 52px' }}>
+            <p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.6vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', maxWidth: 540, margin: '0 auto 52px' }}>
               Instead of waiting for customers to walk in, create exciting reasons for them to come — with game-based campaigns, smart coupons, and a loyalty ecosystem that rewards every visit.
             </p>
-            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
+            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' }}>
-              <Link href="/contacts" style={{ padding: '18px 40px', background: '#f4be28', color: '#111', fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif', boxShadow: '0 16px 48px rgba(244,190,40,0.25)' }}>Explore Solutions →</Link>
+              <Link href="/contacts" style={{ padding: '18px 40px', background: '#f4be28', color: '#111', fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, sans-serif', boxShadow: '0 16px 48px rgba(244,190,40,0.25)' }}>Explore Solutions →</Link>
-              <Link href="/contacts" style={{ padding: '18px 40px', background: 'rgba(255,255,255,0.06)', color: '#fff', fontSize: 16, fontWeight: 700, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif', border: '1px solid rgba(255,255,255,0.12)', backdropFilter: 'blur(12px)' }}>Book Demo</Link>
+              <Link href="/contacts" style={{ padding: '18px 40px', background: 'rgba(255,255,255,0.06)', color: '#fff', fontSize: 16, fontWeight: 700, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, sans-serif', border: '1px solid rgba(255,255,255,0.12)', backdropFilter: 'blur(12px)' }}>Book Demo</Link>
-            </div>
-          </div>
-          {/* Merchant campaign dashboard widget */}
-          <div className="pw-widget-col" style={{ flexShrink: 0, width: 340 }}>
-            <div style={{
-              borderRadius: 24, padding: '22px',
-              background: 'linear-gradient(145deg,#0e0e13 0%,#16161d 100%)',
-              border: '1px solid rgba(244,190,40,0.15)',
-              boxShadow: '0 40px 100px rgba(0,0,0,0.6)',
-            }}>
-              {/* Header */}
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
-                <div>
-                  <div style={{ fontSize: 13, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif' }}>Merchant Dashboard</div>
-                  <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.32)', fontFamily: 'Manrope, sans-serif', marginTop: 2 }}>Live Campaign Analytics</div>
-                </div>
-                <span style={{ fontSize: 10, color: '#4ade80', fontWeight: 700, background: 'rgba(74,222,128,0.1)', border: '1px solid rgba(74,222,128,0.25)', padding: '4px 10px', borderRadius: 100, fontFamily: 'Manrope, sans-serif' }}>● LIVE</span>
-              </div>
-              {/* Campaign cards */}
-              {[
-                { game: 'Maze Challenge', product: 'Nike Air Max', players: 847, conv: 38, color: '#f4be28' },
-                { game: 'Spin Wheel', product: 'H&M Summer Collection', players: 523, conv: 44, color: '#a78bfa' },
-                { game: 'Scratch Card', product: 'Starbucks Bundle', players: 1204, conv: 61, color: '#34d399' },
-              ].map((c, i) => (
-                <div key={i} style={{ marginBottom: 10, padding: '12px 14px', borderRadius: 14, background: 'rgba(255,255,255,0.03)', border: `1px solid ${c.color}25` }}>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
-                    <div>
-                      <div style={{ fontSize: 10, fontWeight: 700, color: c.color, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{c.game}</div>
-                      <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(255,255,255,0.8)', fontFamily: 'Manrope, sans-serif', marginTop: 2 }}>{c.product}</div>
-                    </div>
-                    <span style={{ fontSize: 10, background: `${c.color}18`, color: c.color, padding: '3px 8px', borderRadius: 6, fontWeight: 700, fontFamily: 'Manrope, sans-serif' }}>Active</span>
-                  </div>
-                  <div style={{ display: 'flex', gap: 14 }}>
-                    <div>
-                      <div style={{ fontSize: 16, fontWeight: 900, color: '#fff', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>{c.players.toLocaleString()}</div>
-                      <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.32)', fontFamily: 'Manrope, sans-serif' }}>Players</div>
-                    </div>
-                    <div style={{ width: 1, background: 'rgba(255,255,255,0.07)' }} />
-                    <div>
-                      <div style={{ fontSize: 16, fontWeight: 900, color: c.color, fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>{c.conv}%</div>
-                      <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.32)', fontFamily: 'Manrope, sans-serif' }}>Conversion</div>
-                    </div>
-                  </div>
-                </div>
-              ))}
-              {/* Footer stat */}
-              <div style={{ marginTop: 4, padding: '12px 14px', borderRadius: 14, background: 'rgba(244,190,40,0.07)', border: '1px solid rgba(244,190,40,0.2)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif' }}>Store visits this week</span>
-                <span style={{ fontSize: 17, fontWeight: 900, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>+42%</span>
-              </div>
             </div>
           </div>
         </div>
@@ -140,12 +103,12 @@ export default function SolutionsPage() {
         <RevealBlock>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 80, flexWrap: 'wrap', gap: 24 }}>
             <div>
-              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 16 }}>Capabilities</div>
+              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 16 }}>Capabilities</div>
               <h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: 0, fontFamily: 'Sora, sans-serif' }}>
                 Four tools.<br />One merchant platform.
               </h2>
             </div>
-            <p style={{ fontSize: 16, color: 'rgba(0,0,0,0.45)', fontFamily: 'Manrope, sans-serif', maxWidth: 360, lineHeight: 1.7 }}>
+            <p style={{ fontSize: 16, color: 'rgba(0,0,0,0.45)', fontFamily: 'Sora, sans-serif', maxWidth: 360, lineHeight: 1.7 }}>
               Every tool works independently and amplifies the others — giving merchants a complete system to attract, engage, and retain customers.
             </p>
           </div>
@@ -168,12 +131,12 @@ export default function SolutionsPage() {
               >
                 <span style={{ fontSize: 13, fontWeight: 700, color: hovered === i ? cap.color : 'rgba(0,0,0,0.2)', fontFamily: 'Sora, sans-serif', letterSpacing: '0.06em', transition: 'color 0.3s' }}>{cap.n}</span>
                 <h3 style={{ fontSize: 'clamp(22px, 2.8vw, 40px)', fontWeight: 800, color: hovered === i ? '#0a0a0f' : 'rgba(0,0,0,0.8)', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em', margin: 0, transition: 'color 0.3s' }}>{cap.title}</h3>
-                <p style={{ fontSize: 15, color: 'rgba(0,0,0,0.45)', fontFamily: 'Manrope, sans-serif', margin: 0, lineHeight: 1.6, maxWidth: 340 }}>{cap.desc}</p>
+                <p style={{ fontSize: 15, color: 'rgba(0,0,0,0.45)', fontFamily: 'Sora, sans-serif', margin: 0, lineHeight: 1.6, maxWidth: 340 }}>{cap.desc}</p>
                 <div style={{ display: 'flex', gap: 28 }}>
                   {cap.metrics.map((m, j) => (
                     <div key={j} style={{ textAlign: 'right' }}>
                       <div style={{ fontSize: 22, fontWeight: 900, color: cap.color, fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em' }}>{m.val}</div>
-                      <div style={{ fontSize: 11, color: 'rgba(0,0,0,0.35)', fontFamily: 'Manrope, sans-serif', marginTop: 3 }}>{m.lbl}</div>
+                      <div style={{ fontSize: 11, color: 'rgba(0,0,0,0.35)', fontFamily: 'Sora, sans-serif', marginTop: 3 }}>{m.lbl}</div>
                     </div>
                   ))}
                 </div>
@@ -198,7 +161,7 @@ export default function SolutionsPage() {
             <span style={{ color: '#f4be28' }}>meaningful in-store experience.</span>"
           </blockquote>
           <div style={{ height: 2, width: 80, background: '#f4be28', margin: '48px 0 32px' }} />
-          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', margin: 0 }}>— Loyaly.ai, 2025</p>
+          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', margin: 0 }}>— Loyaly.ai, 2025</p>
         </RevealBlock>
       </section>
 
@@ -208,12 +171,12 @@ export default function SolutionsPage() {
           <h2 style={{ fontSize: 'clamp(36px, 5vw, 68px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 24px', fontFamily: 'Sora, sans-serif' }}>
             See every solution working together.
           </h2>
-          <p style={{ fontSize: 16, color: 'rgba(0,0,0,0.5)', fontFamily: 'Manrope, sans-serif', margin: '0 0 40px', lineHeight: 1.7 }}>
+          <p style={{ fontSize: 16, color: 'rgba(0,0,0,0.5)', fontFamily: 'Sora, sans-serif', margin: '0 0 40px', lineHeight: 1.7 }}>
             Get a tailored walkthrough of how Loyaly.ai&apos;s merchant platform, game campaigns, and coupon engine fit your specific retail format.
           </p>
           <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
-            <Link href="/contacts" style={{ padding: '18px 40px', background: '#f4be28', color: '#111', fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif', boxShadow: '0 12px 40px rgba(244,190,40,0.3)' }}>Book Demo →</Link>
+            <Link href="/contacts" style={{ padding: '18px 40px', background: '#f4be28', color: '#111', fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, sans-serif', boxShadow: '0 12px 40px rgba(244,190,40,0.3)' }}>Book Demo →</Link>
-            <Link href="/contacts" style={{ padding: '18px 40px', background: 'transparent', color: '#111', fontSize: 16, fontWeight: 700, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif', border: '1.5px solid rgba(0,0,0,0.15)' }}>Explore Solutions</Link>
+            <Link href="/contacts" style={{ padding: '18px 40px', background: 'transparent', color: '#111', fontSize: 16, fontWeight: 700, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, sans-serif', border: '1.5px solid rgba(0,0,0,0.15)' }}>Explore Solutions</Link>
           </div>
         </RevealBlock>
         <RevealBlock delay={0.15}>
@@ -224,7 +187,7 @@ export default function SolutionsPage() {
             ].map((s, i) => (
               <div key={i} style={{ padding: '32px 28px', background: '#fff', borderRadius: 20, boxShadow: '0 4px 32px rgba(0,0,0,0.06)', border: '1px solid rgba(0,0,0,0.05)' }}>
                 <div style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', fontWeight: 900, color: '#0a0a0f', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.04em' }}>{s.v}</div>
-                <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.4)', fontFamily: 'Manrope, sans-serif', marginTop: 8 }}>{s.l}</div>
+                <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.4)', fontFamily: 'Sora, sans-serif', marginTop: 8 }}>{s.l}</div>
               </div>
             ))}
           </div>

src/app/use_cases/page.tsx

@@ -2,6 +2,7 @@
 
 import React, { useRef, useState, useEffect } from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 import GSAPAnimator from '@/components/GSAPAnimator';
 import { useReveal } from '@/hooks/useReveal';
 
@@ -87,11 +88,18 @@ export default function ForBusinessPage() {
 
       {/* ── HERO ── */}
       <section style={{
-        minHeight: '100vh', background: '#07070d',
+        minHeight: '100vh', background: 'radial-gradient(ellipse 120% 90% at 30% 0%, #2c2350 0%, #211c3e 38%, #181429 100%)',
         display: 'flex', alignItems: 'center',
         padding: '120px 8% 100px', position: 'relative', overflow: 'hidden',
-        margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
+        margin: '0 20px 20px', borderRadius: '0 0 32px 32px',
       }}>
+        {/* Background photo */}
+        <Image src="/images/stock/use-cases.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9 }} />
+        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(24,20,41,0.1) 0%, rgba(24,20,41,0.55) 85%)' }} />
+        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 65% at 50% 48%, rgba(18,14,30,0.78) 0%, rgba(18,14,30,0.35) 60%, transparent 100%)' }} />
+        {/* Accent blobs */}
+        <div style={{ position: 'absolute', top: '-14%', right: '6%', width: 480, height: 480, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.2) 0%, transparent 70%)', pointerEvents: 'none' }} />
+        <div style={{ position: 'absolute', bottom: '-16%', left: '2%', width: 420, height: 420, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
         {/* Grid bg */}
         <div style={{
           position: 'absolute', inset: 0, pointerEvents: 'none',
@@ -99,15 +107,15 @@ export default function ForBusinessPage() {
           backgroundSize: '72px 72px',
         }} />
 
-        <div style={{ width: '100%', position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: '6vw' }}>
+        <div style={{ width: '100%', position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
-          <div style={{ maxWidth: 680 }}>
+          <div style={{ maxWidth: 760 }}>
             <div style={{
               display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 32,
               background: 'rgba(244,190,40,0.08)', border: '1px solid rgba(244,190,40,0.2)',
               borderRadius: 100, padding: '8px 20px',
             }}>
               <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', display: 'block' }} />
-              <span style={{ fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.55)', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase' }}>For Business</span>
+              <span style={{ fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase' }}>For Business</span>
             </div>
 
             <h1 data-gsap="heading" style={{
@@ -125,70 +133,27 @@ export default function ForBusinessPage() {
 
             <p data-gsap="text" style={{
               fontSize: 'clamp(16px, 1.6vw, 21px)', lineHeight: 1.7, color: 'rgba(255,255,255,0.45)',
-              fontFamily: 'Manrope, sans-serif', maxWidth: 560, margin: '0 0 52px',
+              fontFamily: 'Sora, sans-serif', maxWidth: 560, margin: '0 auto 52px',
             }}>
               Loyaly.ai gives you complete visibility and control over your retail operations — understanding customers from entry to purchase.
             </p>
 
-            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
+            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' }}>
               <Link href="/contacts" style={{
                 display: 'inline-flex', alignItems: 'center', gap: 10,
                 padding: '18px 40px', background: '#f4be28', color: '#111',
                 fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none',
-                fontFamily: 'Manrope, sans-serif', boxShadow: '0 16px 60px rgba(244,190,40,0.3)',
+                fontFamily: 'Sora, sans-serif', boxShadow: '0 16px 60px rgba(244,190,40,0.3)',
               }}>Book a Demo →</Link>
               <Link href="/contacts" style={{
                 display: 'inline-flex', alignItems: 'center', gap: 10,
                 padding: '18px 40px', background: 'rgba(255,255,255,0.06)', color: '#fff',
                 fontSize: 16, fontWeight: 700, borderRadius: 100, textDecoration: 'none',
-                fontFamily: 'Manrope, sans-serif', border: '1px solid rgba(255,255,255,0.12)',
+                fontFamily: 'Sora, sans-serif', border: '1px solid rgba(255,255,255,0.12)',
                 backdropFilter: 'blur(12px)',
               }}>Talk to Sales</Link>
             </div>
           </div>
-          {/* Real-time analytics widget */}
-          <div className="pw-widget-col" style={{ flexShrink: 0, width: 340 }}>
-            <div style={{
-              borderRadius: 24, padding: '22px',
-              background: 'linear-gradient(145deg,#0e0e13 0%,#16161d 100%)',
-              border: '1px solid rgba(244,190,40,0.15)',
-              boxShadow: '0 40px 100px rgba(0,0,0,0.6)',
-            }}>
-              {/* Header */}
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
-                <div style={{ fontSize: 13, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif' }}>Live Analytics</div>
-                <span style={{ fontSize: 10, color: '#4ade80', fontWeight: 700, background: 'rgba(74,222,128,0.1)', border: '1px solid rgba(74,222,128,0.25)', padding: '4px 10px', borderRadius: 100, fontFamily: 'Manrope, sans-serif' }}>● LIVE</span>
-              </div>
-              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.28)', fontFamily: 'Manrope, sans-serif', marginBottom: 16 }}>Coimbatore Flagship Store</div>
-              {/* Main visitors stat */}
-              <div style={{ marginBottom: 16, padding: '16px', borderRadius: 16, background: 'rgba(244,190,40,0.07)', border: '1px solid rgba(244,190,40,0.2)' }}>
-                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.38)', fontFamily: 'Manrope, sans-serif', marginBottom: 4 }}>Visitors Today</div>
-                <div style={{ fontSize: 38, fontWeight: 900, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.04em', lineHeight: 1 }}>2,847</div>
-                <div style={{ fontSize: 11, color: '#4ade80', fontWeight: 700, fontFamily: 'Manrope, sans-serif', marginTop: 8 }}>↑ +12% vs yesterday</div>
-              </div>
-              {/* Mini bar chart */}
-              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 48, marginBottom: 16, padding: '0 4px' }}>
-                {[30, 45, 38, 55, 62, 50, 70, 80, 65, 90, 75, 60].map((h, i) => (
-                  <div key={i} style={{ flex: 1, height: `${h}%`, borderRadius: '3px 3px 0 0', background: i === 9 ? '#f4be28' : `rgba(244,190,40,${0.15 + i * 0.04})` }} />
-                ))}
-              </div>
-              {/* Metric rows */}
-              {[
-                { label: 'Conversion Rate', val: '34.8%', delta: '+3.2×', color: '#f4be28' },
-                { label: 'Avg Basket Value', val: '₹1,240', delta: '+18%', color: '#a78bfa' },
-                { label: 'Customer Retention', val: '68%', delta: '+12%', color: '#4ade80' },
-                { label: 'Discount Savings', val: '41%', delta: 'saved', color: '#34d399' },
-              ].map((m, i) => (
-                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '9px 0', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
-                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.42)', fontFamily: 'Manrope, sans-serif' }}>{m.label}</span>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
-                    <span style={{ fontSize: 13, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif' }}>{m.val}</span>
-                    <span style={{ fontSize: 10, fontWeight: 700, color: m.color, background: `${m.color}15`, padding: '2px 7px', borderRadius: 6, fontFamily: 'Manrope, sans-serif' }}>{m.delta}</span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
         </div>
       </section>
 
@@ -199,7 +164,7 @@ export default function ForBusinessPage() {
         </RevealBlock>
         <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8vw', alignItems: 'center' }}>
           <RevealBlock>
-            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 24 }}>The Challenge</div>
+            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 24 }}>The Challenge</div>
             <h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 28px', fontFamily: 'Sora, sans-serif' }}>
               You're Getting<br />Visitors. But<br />
               <em style={{ fontStyle: 'normal', color: '#c9960f' }}>Missing Revenue.</em>
@@ -219,7 +184,7 @@ export default function ForBusinessPage() {
                   display: 'flex', gap: 20, alignItems: 'flex-start',
                 }}>
                   <span style={{ fontSize: 12, fontWeight: 700, color: '#f4be28', fontFamily: 'Sora, sans-serif', marginTop: 3, flexShrink: 0 }}>0{i + 1}</span>
-                  <span style={{ fontSize: 'clamp(16px, 1.6vw, 22px)', fontWeight: 600, color: '#1a1a1a', fontFamily: 'Manrope, sans-serif', lineHeight: 1.4 }}>{line}</span>
+                  <span style={{ fontSize: 'clamp(16px, 1.6vw, 22px)', fontWeight: 600, color: '#1a1a1a', fontFamily: 'Sora, sans-serif', lineHeight: 1.4 }}>{line}</span>
                 </div>
               </RevealBlock>
             ))}
@@ -230,7 +195,7 @@ export default function ForBusinessPage() {
       {/* ── PRODUCTS ── */}
       <section style={{ padding: '140px 8%', background: '#07070d', margin: '0 20px 20px', borderRadius: 24 }}>
         <RevealBlock>
-          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 20 }}>Our Products</div>
+          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 20 }}>Our Products</div>
           <h2 style={{ fontSize: 'clamp(40px, 5.5vw, 80px)', fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.92, color: '#fff', margin: '0 0 80px', fontFamily: 'Sora, sans-serif', maxWidth: 700 }}>
             AI-Powered Retail Intelligence.
           </h2>
@@ -243,7 +208,7 @@ export default function ForBusinessPage() {
               padding: '10px 24px', borderRadius: 100, border: 'none', cursor: 'pointer',
               background: activeProduct === i ? p.color : 'transparent',
               color: activeProduct === i ? '#111' : 'rgba(255,255,255,0.45)',
-              fontSize: 14, fontWeight: 700, fontFamily: 'Manrope, sans-serif',
+              fontSize: 14, fontWeight: 700, fontFamily: 'Sora, sans-serif',
               transition: 'all 0.3s cubic-bezier(0.22,1,0.36,1)',
             }}>{p.name}</button>
           ))}
@@ -258,17 +223,17 @@ export default function ForBusinessPage() {
             <div>
               <div style={{
                 display: 'inline-block', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
-                textTransform: 'uppercase', color: p.color, fontFamily: 'Manrope, sans-serif',
+                textTransform: 'uppercase', color: p.color, fontFamily: 'Sora, sans-serif',
                 marginBottom: 20, background: `${p.color}15`, padding: '6px 14px', borderRadius: 100,
                 border: `1px solid ${p.color}30`,
               }}>{p.tag}</div>
               <h3 style={{ fontSize: 'clamp(32px, 4vw, 60px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: '0 0 24px', fontFamily: 'Sora, sans-serif' }}>{p.name}</h3>
-              <p style={{ fontSize: 18, lineHeight: 1.75, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif', margin: '0 0 40px' }}>{p.desc}</p>
+              <p style={{ fontSize: 18, lineHeight: 1.75, color: 'rgba(255,255,255,0.45)', fontFamily: 'Sora, sans-serif', margin: '0 0 40px' }}>{p.desc}</p>
               <Link href="/contacts" style={{
                 display: 'inline-flex', alignItems: 'center', gap: 8,
                 padding: '14px 28px', background: p.color, color: '#111',
                 fontSize: 14, fontWeight: 800, borderRadius: 100, textDecoration: 'none',
-                fontFamily: 'Manrope, sans-serif',
+                fontFamily: 'Sora, sans-serif',
               }}>Learn More →</Link>
             </div>
             <div style={{
@@ -277,7 +242,7 @@ export default function ForBusinessPage() {
               boxShadow: `0 0 80px ${p.color}08`,
             }}>
               <div style={{ fontSize: 'clamp(60px, 9vw, 110px)', fontWeight: 900, color: p.color, fontFamily: 'Sora, sans-serif', letterSpacing: '-0.05em', lineHeight: 1 }}>{p.metric}</div>
-              <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', marginTop: 12, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{p.metricLabel}</div>
+              <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', marginTop: 12, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{p.metricLabel}</div>
             </div>
           </div>
         ))}
@@ -286,7 +251,7 @@ export default function ForBusinessPage() {
       {/* ── OUTCOMES ── */}
       <section ref={statsRef} style={{ padding: '140px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
         <RevealBlock>
-          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 20 }}>Outcomes</div>
+          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 20 }}>Outcomes</div>
           <h2 style={{ fontSize: 'clamp(36px, 5vw, 68px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 80px', fontFamily: 'Sora, sans-serif' }}>
             Real Results.<br />Not Assumptions.
           </h2>
@@ -300,7 +265,7 @@ export default function ForBusinessPage() {
                 borderRadius: i === 0 ? '24px 0 0 24px' : i === 3 ? '0 24px 24px 0' : 0,
               }}>
                 <div style={{ fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 900, color: i % 2 === 0 ? '#f4be28' : '#111', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.04em', lineHeight: 1 }}>{o.stat}</div>
-                <div style={{ fontSize: 14, color: i % 2 === 0 ? 'rgba(255,255,255,0.45)' : 'rgba(0,0,0,0.55)', fontFamily: 'Manrope, sans-serif', marginTop: 14, lineHeight: 1.5 }}>{o.label}</div>
+                <div style={{ fontSize: 14, color: i % 2 === 0 ? 'rgba(255,255,255,0.45)' : 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', marginTop: 14, lineHeight: 1.5 }}>{o.label}</div>
               </div>
             </RevealBlock>
           ))}
@@ -310,7 +275,7 @@ export default function ForBusinessPage() {
       {/* ── WHO IT'S FOR ── */}
       <section style={{ padding: '140px 8%', background: '#07070d', margin: '0 20px 20px', borderRadius: 24 }}>
         <RevealBlock>
-          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 20 }}>Who It's For</div>
+          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 20 }}>Who It's For</div>
           <h2 style={{ fontSize: 'clamp(36px, 5vw, 68px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: '0 0 80px', fontFamily: 'Sora, sans-serif', maxWidth: 600 }}>
             Built for every format of physical retail.
           </h2>
@@ -339,10 +304,10 @@ export default function ForBusinessPage() {
           <h2 style={{ fontSize: 'clamp(44px, 7vw, 100px)', fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.92, color: '#111', margin: '0 0 24px', fontFamily: 'Sora, sans-serif', position: 'relative', zIndex: 2 }}>
             Ready to Transform<br />Your Retail Business?
           </h2>
-          <p style={{ fontSize: 18, color: 'rgba(0,0,0,0.55)', fontFamily: 'Manrope, sans-serif', margin: '0 auto 52px', maxWidth: 480, position: 'relative', zIndex: 2 }}>Schedule a demo and see your store's potential in 30 minutes.</p>
+          <p style={{ fontSize: 18, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', margin: '0 auto 52px', maxWidth: 480, position: 'relative', zIndex: 2 }}>Schedule a demo and see your store's potential in 30 minutes.</p>
           <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', position: 'relative', zIndex: 2 }}>
-            <Link href="/contacts" style={{ padding: '18px 44px', background: '#111', color: '#f4be28', fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif' }}>Schedule a Demo</Link>
+            <Link href="/contacts" style={{ padding: '18px 44px', background: '#111', color: '#f4be28', fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, sans-serif' }}>Schedule a Demo</Link>
-            <Link href="/contacts" style={{ padding: '18px 44px', background: 'rgba(0,0,0,0.1)', color: '#111', fontSize: 16, fontWeight: 700, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif', border: '1px solid rgba(0,0,0,0.15)' }}>Talk to Sales</Link>
+            <Link href="/contacts" style={{ padding: '18px 44px', background: 'rgba(0,0,0,0.1)', color: '#111', fontSize: 16, fontWeight: 700, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, sans-serif', border: '1px solid rgba(0,0,0,0.15)' }}>Talk to Sales</Link>
           </div>
         </RevealBlock>
       </section>

src/components/Footer.tsx

@@ -80,7 +80,7 @@ export default function Footer() {
         }}>
 
           <div style={{ maxWidth: 600 }}>
-            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 20, display: 'flex', alignItems: 'center', gap: 10 }}>
+            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 20, display: 'flex', alignItems: 'center', gap: 10 }}>
               <span style={{ width: 24, height: 1, background: '#f4be28', display: 'block' }} />Let's build together
             </div>
             <h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: 0, fontFamily: 'Sora, sans-serif' }}>
@@ -94,7 +94,7 @@ export default function Footer() {
               display: 'inline-flex', alignItems: 'center', gap: 10,
               padding: '18px 40px', background: '#f4be28', color: '#111',
               fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none',
-              fontFamily: 'Manrope, sans-serif', boxShadow: '0 16px 48px rgba(244,190,40,0.25)',
+              fontFamily: 'Sora, sans-serif', boxShadow: '0 16px 48px rgba(244,190,40,0.25)',
               whiteSpace: 'nowrap',
             }}>
               Book a Demo
@@ -103,7 +103,7 @@ export default function Footer() {
             <Link href="/contacts" style={{
               display: 'inline-flex', alignItems: 'center', gap: 8,
               fontSize: 14, fontWeight: 600, color: 'rgba(255,255,255,0.45)',
-              textDecoration: 'none', fontFamily: 'Manrope, sans-serif',
+              textDecoration: 'none', fontFamily: 'Sora, sans-serif',
               borderBottom: '1px solid rgba(255,255,255,0.15)', paddingBottom: 2,
             }}>
               or talk to sales →
@@ -123,7 +123,7 @@ export default function Footer() {
             <Link href="/" aria-label="Loyaly.AI home">
               <Image src="/images/logo-dark.png" alt="Loyaly.AI" width={560} height={160} style={{ height: 140, width: 'auto', marginBottom: 24, display: 'block' }} />
             </Link>
-            <p style={{ fontSize: 14, lineHeight: 1.75, color: 'rgba(255,255,255,0.35)', fontFamily: 'Manrope, sans-serif', margin: '0 0 28px', maxWidth: 280 }}>
+            <p style={{ fontSize: 14, lineHeight: 1.75, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif', margin: '0 0 28px', maxWidth: 280 }}>
               AI-powered retail intelligence that turns every walk-in into a loyal customer.
             </p>
             <div style={{ display: 'flex', gap: 10 }}>
@@ -146,13 +146,13 @@ export default function Footer() {
           {/* Nav columns */}
           {NAV.map(col => (
             <nav key={col.title} aria-label={col.title}>
-              <h5 style={{ margin: '0 0 20px', fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.3)', letterSpacing: '0.16em', textTransform: 'uppercase', fontFamily: 'Manrope, sans-serif' }}>
+              <h5 style={{ margin: '0 0 20px', fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.3)', letterSpacing: '0.16em', textTransform: 'uppercase', fontFamily: 'Sora, sans-serif' }}>
                 {col.title}
               </h5>
               <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                 {col.links.map(({ label, href }) => (
                   <li key={label}>
-                    <Link href={href} style={{ textDecoration: 'none', fontSize: 15, color: 'rgba(255,255,255,0.5)', fontFamily: 'Manrope, sans-serif', transition: 'color 0.2s', fontWeight: 500 }}
+                    <Link href={href} style={{ textDecoration: 'none', fontSize: 15, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif', transition: 'color 0.2s', fontWeight: 500 }}
                       onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = '#ffffff')}
                       onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = 'rgba(255,255,255,0.5)')}
                     >{label}</Link>
@@ -169,7 +169,7 @@ export default function Footer() {
           flexWrap: 'wrap', gap: 12,
           padding: '20px 64px 36px',
           borderTop: '1px solid rgba(255,255,255,0.05)',
-          fontSize: 13, color: 'rgba(255,255,255,0.25)', fontFamily: 'Manrope, sans-serif',
+          fontSize: 13, color: 'rgba(255,255,255,0.25)', fontFamily: 'Sora, sans-serif',
         }}>
           <span>© {new Date().getFullYear()} Loyaly.AI — All rights reserved.</span>
           <div style={{ display: 'flex', gap: 24 }}>

src/components/GetInTouch.tsx

@@ -92,7 +92,7 @@ export default function GetInTouch() {
         <div>
           <div style={{
             fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
-            color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 24,
+            color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 24,
             display: 'flex', alignItems: 'center', gap: 12,
           }}>
             <span style={{ width: 28, height: 1, background: '#f4be28', display: 'block' }} />Get in Touch
@@ -109,7 +109,7 @@ export default function GetInTouch() {
 
           <p style={{
             margin: '0 0 44px', fontSize: 16, lineHeight: 1.8,
-            color: 'rgba(255,255,255,0.42)', fontFamily: 'Manrope, sans-serif', maxWidth: 380,
+            color: 'rgba(255,255,255,0.42)', fontFamily: 'Sora, sans-serif', maxWidth: 380,
           }}>
             Whether you're exploring AI possibilities or ready to deploy, our team will help you find the right solution for your business.
           </p>
@@ -129,8 +129,8 @@ export default function GetInTouch() {
                   color: '#f4be28',
                 }}>{d.icon}</div>
                 <div>
-                  <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', marginBottom: 6 }}>{d.label}</div>
+                  <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', marginBottom: 6 }}>{d.label}</div>
-                  <div style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.7)', fontFamily: 'Manrope, sans-serif' }}>{d.value}</div>
+                  <div style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.7)', fontFamily: 'Sora, sans-serif' }}>{d.value}</div>
                 </div>
               </div>
             ))}
@@ -138,7 +138,7 @@ export default function GetInTouch() {
 
           {/* Socials */}
           <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.35)', fontFamily: 'Manrope, sans-serif' }}>Follow</span>
+            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif' }}>Follow</span>
             {SOCIALS.map((s) => (
               <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label} className="git-social">
                 {s.icon}
@@ -167,12 +167,12 @@ export default function GetInTouch() {
                 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4ade80" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
               </div>
               <h3 style={{ margin: '0 0 10px', fontSize: 22, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>Message sent!</h3>
-              <p style={{ margin: 0, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif' }}>We'll get back to you within one business day.</p>
+              <p style={{ margin: 0, color: 'rgba(255,255,255,0.45)', fontFamily: 'Sora, sans-serif' }}>We'll get back to you within one business day.</p>
               <button onClick={() => setFormState('idle')} style={{
                 marginTop: 28, padding: '12px 28px', borderRadius: 100,
                 background: 'transparent', border: '1px solid rgba(255,255,255,0.2)',
                 color: '#fff', fontWeight: 600, fontSize: 14, cursor: 'pointer',
-                fontFamily: 'Manrope, sans-serif',
+                fontFamily: 'Sora, sans-serif',
               }}>Send another message</button>
             </div>
           ) : (
@@ -185,7 +185,7 @@ export default function GetInTouch() {
                 <div role="alert" style={{
                   marginBottom: 20, padding: '12px 16px',
                   background: 'rgba(248,113,113,0.1)', border: '1px solid rgba(248,113,113,0.3)',
-                  color: '#fca5a5', borderRadius: 12, fontSize: 14, fontFamily: 'Manrope, sans-serif',
+                  color: '#fca5a5', borderRadius: 12, fontSize: 14, fontFamily: 'Sora, sans-serif',
                 }}>{errorMessage}</div>
               )}
 
@@ -210,7 +210,7 @@ export default function GetInTouch() {
                 <button type="submit" disabled={formState === 'sending'} style={{
                   marginTop: 4, padding: '16px 28px', borderRadius: 100, border: 'none',
                   background: formState === 'sending' ? 'rgba(244,190,40,0.6)' : '#f4be28',
-                  color: '#111', fontWeight: 800, fontSize: 15, fontFamily: 'Manrope, sans-serif',
+                  color: '#111', fontWeight: 800, fontSize: 15, fontFamily: 'Sora, sans-serif',
                   cursor: formState === 'sending' ? 'wait' : 'pointer',
                   display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                   boxShadow: '0 12px 36px rgba(244,190,40,0.25)',
@@ -250,7 +250,7 @@ export default function GetInTouch() {
 const labelStyle: React.CSSProperties = {
   display: 'flex', flexDirection: 'column', gap: 8,
   fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,0.55)',
-  fontFamily: 'Manrope, sans-serif',
+  fontFamily: 'Sora, sans-serif',
 };
 
 const inputStyle: React.CSSProperties = {
@@ -263,6 +263,6 @@ const inputStyle: React.CSSProperties = {
   outline: 'none',
   width: '100%',
   boxSizing: 'border-box',
-  fontFamily: 'Manrope, sans-serif',
+  fontFamily: 'Sora, sans-serif',
   transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
 };

src/components/MapSection.tsx

@@ -29,7 +29,7 @@ export default function MapSection() {
           <div style={{
             fontSize: 11, fontWeight: 700, letterSpacing: '0.2em',
             textTransform: 'uppercase', color: '#f4be28',
-            fontFamily: 'Manrope, sans-serif', marginBottom: 14,
+            fontFamily: 'Sora, sans-serif', marginBottom: 14,
             display: 'flex', alignItems: 'center', gap: 10,
           }}>
             <span style={{ width: 28, height: 2, background: '#f4be28', borderRadius: 2, display: 'block' }} />
@@ -49,7 +49,7 @@ export default function MapSection() {
           </h2>
 
           <p style={{
-            fontSize: 15, color: 'rgba(0,0,0,0.45)', fontFamily: 'Manrope, sans-serif',
+            fontSize: 15, color: 'rgba(0,0,0,0.45)', fontFamily: 'Sora, sans-serif',
             lineHeight: 1.7, margin: '0 0 36px', maxWidth: 380,
           }}>
             Come visit us or drop a message — we&apos;ll get back to you within one business day.
@@ -81,8 +81,8 @@ export default function MapSection() {
                   </svg>
                 </div>
                 <div>
-                  <div style={{ fontSize: 10, fontWeight: 700, color: '#f4be28', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 3 }}>{item.label}</div>
+                  <div style={{ fontSize: 10, fontWeight: 700, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 3 }}>{item.label}</div>
-                  <div style={{ fontSize: 13, color: '#374151', fontFamily: 'Manrope, sans-serif', lineHeight: 1.6, fontWeight: 500 }}>{item.value}</div>
+                  <div style={{ fontSize: 13, color: '#374151', fontFamily: 'Sora, sans-serif', lineHeight: 1.6, fontWeight: 500 }}>{item.value}</div>
                 </div>
               </div>
             ))}
@@ -96,7 +96,7 @@ export default function MapSection() {
               display: 'inline-flex', alignItems: 'center', gap: 10,
               padding: '14px 32px', background: '#f4be28', color: '#171512',
               fontSize: 14, fontWeight: 800, borderRadius: 100,
-              textDecoration: 'none', fontFamily: 'Manrope, sans-serif',
+              textDecoration: 'none', fontFamily: 'Sora, sans-serif',
               boxShadow: '0 8px 28px rgba(244,190,40,0.35)',
               width: 'fit-content',
             }}

src/components/PhoneWidget.tsx

@@ -97,8 +97,8 @@ export default function PhoneWidget() {
 
             {/* Header */}
             <div style={{ padding: '8px 22px 12px' }}>
-              <div style={{ fontSize: 10, color: '#f4be28', fontWeight: 700, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Good Morning</div>
+              <div style={{ fontSize: 10, color: '#f4be28', fontWeight: 700, fontFamily: 'Sora, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Good Morning</div>
-              <div style={{ fontSize: 16, color: '#fff', fontWeight: 800, fontFamily: 'Manrope, sans-serif', marginTop: 2 }}>Loyaly ✦</div>
+              <div style={{ fontSize: 16, color: '#fff', fontWeight: 800, fontFamily: 'Sora, sans-serif', marginTop: 2 }}>Loyaly ✦</div>
             </div>
 
             {/* Points card */}
@@ -109,9 +109,9 @@ export default function PhoneWidget() {
               position: 'relative', overflow: 'hidden',
             }}>
               <div style={{ position: 'absolute', top: '-30%', right: '-10%', width: 110, height: 110, borderRadius: '50%', background: 'rgba(255,255,255,0.12)' }} />
-              <div style={{ fontSize: 10, color: 'rgba(23,21,18,0.65)', fontWeight: 700, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Total Points</div>
+              <div style={{ fontSize: 10, color: 'rgba(23,21,18,0.65)', fontWeight: 700, fontFamily: 'Sora, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Total Points</div>
-              <div style={{ fontSize: 34, color: '#171512', fontWeight: 900, fontFamily: 'Manrope, sans-serif', letterSpacing: '-0.03em', marginTop: 2 }}>284</div>
+              <div style={{ fontSize: 34, color: '#171512', fontWeight: 900, fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em', marginTop: 2 }}>284</div>
-              <div style={{ fontSize: 10, color: 'rgba(23,21,18,0.6)', fontFamily: 'Manrope, sans-serif', marginTop: 4 }}>≈ ₹284 redeemable</div>
+              <div style={{ fontSize: 10, color: 'rgba(23,21,18,0.6)', fontFamily: 'Sora, sans-serif', marginTop: 4 }}>≈ ₹284 redeemable</div>
             </div>
 
             {/* Activity feed */}
@@ -126,8 +126,8 @@ export default function PhoneWidget() {
                   background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: '10px 13px',
                   border: '1px solid rgba(255,255,255,0.06)',
                 }}>
-                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.78)', fontFamily: 'Manrope, sans-serif' }}>{item.label}</span>
+                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.78)', fontFamily: 'Sora, sans-serif' }}>{item.label}</span>
-                  <span style={{ fontSize: 12, color: item.color, fontWeight: 700, fontFamily: 'Manrope, sans-serif' }}>{item.pts}</span>
+                  <span style={{ fontSize: 12, color: item.color, fontWeight: 700, fontFamily: 'Sora, sans-serif' }}>{item.pts}</span>
                 </div>
               ))}
             </div>
@@ -151,8 +151,8 @@ export default function PhoneWidget() {
           }}>
             <div style={{ width: 30, height: 30, borderRadius: 9, background: 'rgba(74,222,128,0.16)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4ade80', fontSize: 14, fontWeight: 800 }}>↑</div>
             <div>
-              <div style={{ fontSize: 11, fontWeight: 700, color: '#fff', fontFamily: 'Manrope, sans-serif' }}>+120 pts</div>
+              <div style={{ fontSize: 11, fontWeight: 700, color: '#fff', fontFamily: 'Sora, sans-serif' }}>+120 pts</div>
-              <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif' }}>just now</div>
+              <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif' }}>just now</div>
             </div>
           </div>
 
@@ -165,7 +165,7 @@ export default function PhoneWidget() {
             boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
             animation: 'pwOrbFloat 8s ease-in-out infinite',
           }}>
-            <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 3 }}>Redeemable</div>
+            <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.45)', fontFamily: 'Sora, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 3 }}>Redeemable</div>
             <div style={{ fontSize: 17, fontWeight: 900, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>₹284.00</div>
           </div>
         </div>

src/components/Testimonial.tsx

@@ -109,7 +109,7 @@ export default function Testimonial() {
               lineHeight: 1,
               color: '#f4be28',
               opacity: 0.25,
-              fontFamily: 'Georgia, serif',
+              fontFamily: 'Sora, serif',
             }}
           >
             "

src/components/for-people/AIRecommendationsSection.tsx

@@ -44,7 +44,7 @@ export default function AIRecommendationsSection() {
             </h2>
 
             <p className="fp-rise" style={{
-              fontSize: 15, lineHeight: 1.8, color: '#4f463a', fontFamily: 'Manrope, sans-serif', margin: '0 0 36px', maxWidth: 340,
+              fontSize: 15, lineHeight: 1.8, color: '#4f463a', fontFamily: 'Sora, sans-serif', margin: '0 0 36px', maxWidth: 340,
             }}>
               Our recommendation engine learns your taste from every transaction and surfaces offers uniquely matched to you — getting sharper with every visit.
             </p>
@@ -57,7 +57,7 @@ export default function AIRecommendationsSection() {
               ].map((s, i) => (
                 <div key={i} style={{ padding: '16px 20px', borderRadius: 16, background: '#fff7e0', border: '2px solid #f4be28', minWidth: 110 }}>
                   <div style={{ fontSize: 28, fontWeight: 900, color: '#bc7122', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em' }}>{s.val}</div>
-                  <div style={{ fontSize: 11, color: 'rgba(23,21,18,0.55)', fontFamily: 'Manrope, sans-serif', marginTop: 4 }}>{s.lbl}</div>
+                  <div style={{ fontSize: 11, color: 'rgba(23,21,18,0.55)', fontFamily: 'Sora, sans-serif', marginTop: 4 }}>{s.lbl}</div>
                 </div>
               ))}
             </div>
@@ -66,8 +66,8 @@ export default function AIRecommendationsSection() {
           {/* Right — recommendation cards */}
           <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4, padding: '0 2px' }}>
-              <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#171512', fontFamily: 'Manrope, sans-serif' }}>Recommended for you</span>
+              <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#171512', fontFamily: 'Sora, sans-serif' }}>Recommended for you</span>
-              <span style={{ fontSize: 11, color: '#bc7122', fontFamily: 'Manrope, sans-serif', fontWeight: 700,
+              <span style={{ fontSize: 11, color: '#bc7122', fontFamily: 'Sora, sans-serif', fontWeight: 700,
                 display: 'inline-flex', alignItems: 'center', gap: 5,
                 background: '#fff7e0', border: '1px solid #f4be28', borderRadius: 100, padding: '4px 10px',
               }}>
@@ -98,8 +98,8 @@ export default function AIRecommendationsSection() {
 
                 {/* Info */}
                 <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ fontSize: 14, fontWeight: 700, color: '#171512', fontFamily: 'Manrope, sans-serif', marginBottom: 3 }}>{rec.label}</div>
+                  <div style={{ fontSize: 14, fontWeight: 700, color: '#171512', fontFamily: 'Sora, sans-serif', marginBottom: 3 }}>{rec.label}</div>
-                  <div style={{ fontSize: 11, color: 'rgba(23,21,18,0.45)', fontFamily: 'Manrope, sans-serif' }}>{rec.tag}</div>
+                  <div style={{ fontSize: 11, color: 'rgba(23,21,18,0.45)', fontFamily: 'Sora, sans-serif' }}>{rec.tag}</div>
                 </div>
 
                 {/* Match badge — brand gold */}
@@ -109,7 +109,7 @@ export default function AIRecommendationsSection() {
                   textAlign: 'center',
                 }}>
                   <div style={{ fontSize: 14, fontWeight: 900, color: '#bc7122', fontFamily: 'Sora, sans-serif' }}>{rec.match}</div>
-                  <div style={{ fontSize: 9, color: 'rgba(23,21,18,0.4)', fontFamily: 'Manrope, sans-serif' }}>match</div>
+                  <div style={{ fontSize: 9, color: 'rgba(23,21,18,0.4)', fontFamily: 'Sora, sans-serif' }}>match</div>
                 </div>
               </div>
             ))}
@@ -117,9 +117,9 @@ export default function AIRecommendationsSection() {
             {/* Confidence bar */}
             <div style={{ padding: '16px 2px 0' }}>
               <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
-                <span style={{ fontSize: 12, fontWeight: 600, color: '#171512', fontFamily: 'Manrope, sans-serif' }}>Model confidence</span>
+                <span style={{ fontSize: 12, fontWeight: 600, color: '#171512', fontFamily: 'Sora, sans-serif' }}>Model confidence</span>
                 <span style={{
-                  fontSize: 11, fontWeight: 700, color: '#bc7122', fontFamily: 'Manrope, sans-serif',
+                  fontSize: 11, fontWeight: 700, color: '#bc7122', fontFamily: 'Sora, sans-serif',
                   background: '#fff7e0', border: '1px solid #f4be28', borderRadius: 100, padding: '3px 10px',
                 }}>High</span>
               </div>

src/components/for-people/DiscoverDealsSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
+import Image from 'next/image';
 
 const deals = [
   { store: 'Starbucks', category: 'Coffee & Drinks', offer: '2× Points', savings: '₹120 saved', color: '#00704A', distance: '0.3 km', rating: 4.8 },
@@ -16,6 +17,10 @@ export default function DiscoverDealsSection() {
   return (
     <section className="fp-panel" style={{ background: '#08080f' }}>
 
+      {/* Background photo */}
+      <Image src="/images/stock/deals-retail.jpg" alt="" fill style={{ objectFit: 'cover', opacity: 0.25, zIndex: 0 }} />
+      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(8,8,15,0.3) 0%, rgba(8,8,15,0.75) 80%)', zIndex: 0 }} />
+
       {/* Soft radial */}
       <div className="fp-deco" style={{
         position: 'absolute', top: '20%', left: '20%', width: 500, height: 500, borderRadius: '50%',
@@ -39,7 +44,7 @@ export default function DiscoverDealsSection() {
             </h2>
 
             <p className="fp-rise" style={{
-              fontSize: 16, lineHeight: 1.8, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif', margin: '0 0 36px', maxWidth: 380,
+              fontSize: 16, lineHeight: 1.8, color: 'rgba(255,255,255,0.45)', fontFamily: 'Sora, sans-serif', margin: '0 0 36px', maxWidth: 380,
             }}>
               Find participating stores nearby and see their active game-based discount campaigns, live coupons, and coin-earning opportunities — all surfaced in real time so you never miss a deal.
             </p>
@@ -52,7 +57,7 @@ export default function DiscoverDealsSection() {
                 <circle cx="12" cy="10" r="3" stroke="#f4be28" strokeWidth="2" />
                 <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" stroke="#f4be28" strokeWidth="2" fill="none" />
               </svg>
-              <span style={{ fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,0.65)', fontFamily: 'Manrope, sans-serif' }}>Coimbatore, TN</span>
+              <span style={{ fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,0.65)', fontFamily: 'Sora, sans-serif' }}>Coimbatore, TN</span>
             </div>
           </div>
 
@@ -83,21 +88,21 @@ export default function DiscoverDealsSection() {
                 </div>
                 <div>
                   <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
-                    <span style={{ fontSize: 16, fontWeight: 700, color: '#fff', fontFamily: 'Manrope, sans-serif' }}>{deal.store}</span>
+                    <span style={{ fontSize: 16, fontWeight: 700, color: '#fff', fontFamily: 'Sora, sans-serif' }}>{deal.store}</span>
-                    <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.32)', fontFamily: 'Manrope, sans-serif' }}>{deal.distance}</span>
+                    <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.32)', fontFamily: 'Sora, sans-serif' }}>{deal.distance}</span>
-                    <span style={{ fontSize: 11, color: '#f4be28', fontFamily: 'Manrope, sans-serif' }}>★ {deal.rating}</span>
+                    <span style={{ fontSize: 11, color: '#f4be28', fontFamily: 'Sora, sans-serif' }}>★ {deal.rating}</span>
                   </div>
-                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.38)', fontFamily: 'Manrope, sans-serif' }}>{deal.category}</span>
+                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.38)', fontFamily: 'Sora, sans-serif' }}>{deal.category}</span>
                 </div>
                 <div style={{ textAlign: 'right' }}>
                   <div style={{ fontSize: 15, fontWeight: 800, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>{deal.offer}</div>
-                  <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.32)', fontFamily: 'Manrope, sans-serif', marginTop: 2 }}>{deal.savings}</div>
+                  <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.32)', fontFamily: 'Sora, sans-serif', marginTop: 2 }}>{deal.savings}</div>
                 </div>
               </div>
             ))}
             <div className="fp-rise" style={{
               textAlign: 'right', paddingRight: 4, marginTop: 4, transitionDelay: '0.5s',
-              fontSize: 12, color: 'rgba(255,255,255,0.25)', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.06em',
+              fontSize: 12, color: 'rgba(255,255,255,0.25)', fontFamily: 'Sora, sans-serif', letterSpacing: '0.06em',
             }}>
               + 2,400 more deals near you
             </div>

src/components/for-people/EarnRewardsSection.tsx

@@ -48,7 +48,7 @@ export default function EarnRewardsSection() {
               background: '#f0fdf4', border: '1.5px solid #16a34a', borderRadius: 100, padding: '7px 16px',
             }}>
               <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#16a34a', flexShrink: 0, animation: 'fpPulse 1.5s infinite' }} />
-              <span style={{ fontSize: 11, fontWeight: 700, color: '#16a34a', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Live points balance</span>
+              <span style={{ fontSize: 11, fontWeight: 700, color: '#16a34a', fontFamily: 'Sora, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Live points balance</span>
             </div>
 
             {/* Giant gold number */}
@@ -67,7 +67,7 @@ export default function EarnRewardsSection() {
               background: '#fff7e0', border: '1px solid #f4be28',
             }}>
               <span style={{ fontSize: 18, fontWeight: 900, color: '#bc7122', fontFamily: 'Sora, sans-serif' }}>₹{pts.toLocaleString()}</span>
-              <span style={{ fontSize: 13, color: '#4f463a', fontFamily: 'Manrope, sans-serif' }}>redeemable value</span>
+              <span style={{ fontSize: 13, color: '#4f463a', fontFamily: 'Sora, sans-serif' }}>redeemable value</span>
             </div>
 
             <div style={{ marginBottom: 16 }}><span className="fp-kicker fp-rise">Earn · 03</span></div>
@@ -82,7 +82,7 @@ export default function EarnRewardsSection() {
             </h2>
 
             <p className="fp-rise" style={{
-              fontSize: 15, lineHeight: 1.8, color: '#4f463a', fontFamily: 'Manrope, sans-serif', maxWidth: 380, margin: 0,
+              fontSize: 15, lineHeight: 1.8, color: '#4f463a', fontFamily: 'Sora, sans-serif', maxWidth: 380, margin: 0,
             }}>
               Earn Loyaly Coins through daily app login, completing 5,000-step walking challenges, playing Maze, Spin Wheel, Scratch Card, and Match Master games, or visiting Selfie Booths at partner malls. Every activity puts more coins in your wallet.
             </p>
@@ -95,8 +95,8 @@ export default function EarnRewardsSection() {
               display: 'flex', justifyContent: 'space-between', alignItems: 'center',
               marginBottom: 14, paddingBottom: 14, borderBottom: '2px solid #f4be28',
             }}>
-              <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#171512', fontFamily: 'Manrope, sans-serif' }}>Activity feed</span>
+              <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#171512', fontFamily: 'Sora, sans-serif' }}>Activity feed</span>
-              <span style={{ fontSize: 11, color: '#16a34a', fontWeight: 700, fontFamily: 'Manrope, sans-serif', display: 'flex', alignItems: 'center', gap: 5,
+              <span style={{ fontSize: 11, color: '#16a34a', fontWeight: 700, fontFamily: 'Sora, sans-serif', display: 'flex', alignItems: 'center', gap: 5,
                 background: '#f0fdf4', border: '1px solid #16a34a', borderRadius: 100, padding: '4px 10px',
               }}>
                 <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#16a34a', display: 'block', animation: 'fpPulse 1.5s infinite' }} />
@@ -123,8 +123,8 @@ export default function EarnRewardsSection() {
                       color: tx.type === 'earn' ? '#16a34a' : '#ef4444',
                     }}>{tx.type === 'earn' ? '↑' : '↓'}</div>
                     <div>
-                      <div style={{ fontSize: 13, fontWeight: 700, color: '#171512', fontFamily: 'Manrope, sans-serif' }}>{tx.store}</div>
+                      <div style={{ fontSize: 13, fontWeight: 700, color: '#171512', fontFamily: 'Sora, sans-serif' }}>{tx.store}</div>
-                      <div style={{ fontSize: 11, color: 'rgba(23,21,18,0.45)', fontFamily: 'Manrope, sans-serif', marginTop: 1 }}>{tx.time}</div>
+                      <div style={{ fontSize: 11, color: 'rgba(23,21,18,0.45)', fontFamily: 'Sora, sans-serif', marginTop: 1 }}>{tx.time}</div>
                     </div>
                   </div>
                   <span style={{
@@ -148,7 +148,7 @@ export default function EarnRewardsSection() {
                 { label: 'Redeemable value',   val: '₹660',       color: '#f4be28', bg: '#fff7e0', border: '#f4be28' },
               ].map((s, i) => (
                 <div key={i} style={{ padding: '14px 16px', borderRadius: 14, background: s.bg, border: `1.5px solid ${s.border}` }}>
-                  <div style={{ fontSize: 11, color: 'rgba(23,21,18,0.5)', fontFamily: 'Manrope, sans-serif', marginBottom: 4 }}>{s.label}</div>
+                  <div style={{ fontSize: 11, color: 'rgba(23,21,18,0.5)', fontFamily: 'Sora, sans-serif', marginBottom: 4 }}>{s.label}</div>
                   <div style={{ fontSize: 18, fontWeight: 900, color: s.color, fontFamily: 'Sora, sans-serif' }}>{s.val}</div>
                 </div>
               ))}

src/components/for-people/ExperienceSection.tsx

@@ -40,7 +40,7 @@ export default function ExperienceSection() {
           {/* 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,
+              fontSize: 16, lineHeight: 1.85, color: 'rgba(255,255,255,0.45)', fontFamily: 'Sora, 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>
@@ -53,7 +53,7 @@ export default function ExperienceSection() {
                   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>
+                  <span style={{ fontSize: 16, fontWeight: 600, color: 'rgba(255,255,255,0.75)', fontFamily: 'Sora, sans-serif', lineHeight: 1.4 }}>{s.label}</span>
                 </div>
               ))}
             </div>
@@ -64,7 +64,7 @@ export default function ExperienceSection() {
                   <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' }}>
+              <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif' }}>
                 Joined by <span style={{ color: '#fff', fontWeight: 700 }}>50,000+</span> shoppers
               </span>
             </div>

src/components/for-people/FinalCTASection.tsx

@@ -58,7 +58,7 @@ export default function FinalCTASection() {
           background: '#f0fdf4', border: '1.5px solid #16a34a', borderRadius: 100, padding: '10px 22px',
         }}>
           <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#16a34a', display: 'block', animation: 'fpPulse 1.5s infinite', boxShadow: '0 0 0 3px rgba(22,163,74,0.2)' }} />
-          <span style={{ fontSize: 13, fontWeight: 700, color: '#16a34a', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.06em' }}>
+          <span style={{ fontSize: 13, fontWeight: 700, color: '#16a34a', fontFamily: 'Sora, sans-serif', letterSpacing: '0.06em' }}>
             Now live in Coimbatore
           </span>
         </div>
@@ -73,7 +73,7 @@ export default function FinalCTASection() {
         </h2>
 
         <p className="fp-rise" style={{
-          fontSize: 18, lineHeight: 1.7, color: '#4f463a', fontFamily: 'Manrope, sans-serif',
+          fontSize: 18, lineHeight: 1.7, color: '#4f463a', fontFamily: 'Sora, sans-serif',
           maxWidth: 460, margin: '0 auto 48px', transitionDelay: '0.1s',
         }}>
           Download Loyaly and start earning on your very next purchase. Free. Instant. Yours.
@@ -106,7 +106,7 @@ export default function FinalCTASection() {
               minWidth: 110,
             }}>
               <div style={{ fontSize: 'clamp(20px, 2.5vw, 28px)', fontWeight: 900, color: p.color, fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em' }}>{p.val}</div>
-              <div style={{ fontSize: 11, color: 'rgba(23,21,18,0.55)', fontFamily: 'Manrope, sans-serif', marginTop: 5, letterSpacing: '0.04em' }}>{p.label}</div>
+              <div style={{ fontSize: 11, color: 'rgba(23,21,18,0.55)', fontFamily: 'Sora, sans-serif', marginTop: 5, letterSpacing: '0.04em' }}>{p.label}</div>
             </div>
           ))}
         </div>

src/components/for-people/HeroSection.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import React, { useRef, useEffect, useCallback } from 'react';
+import React, { useRef, useEffect } from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 
 function useMagnetic<T extends HTMLElement>(strength = 12) {
   const ref = useRef<T | null>(null);
@@ -28,29 +29,14 @@ function useMagnetic<T extends HTMLElement>(strength = 12) {
 export default function HeroSection() {
   const magPrimary = useMagnetic<HTMLAnchorElement>(10);
   const magSecondary = useMagnetic<HTMLButtonElement>(8);
-  const stageRef = useRef<HTMLDivElement>(null);
-
-  // Pointer parallax for the phone stage
-  const onStageMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-    const el = stageRef.current; if (!el) return;
-    const r = el.getBoundingClientRect();
-    const px = (e.clientX - r.left) / r.width - 0.5;
-    const py = (e.clientY - r.top) / r.height - 0.5;
-    el.style.setProperty('--rx', `${(-py * 8).toFixed(2)}deg`);
-    el.style.setProperty('--ry', `${(px * 10).toFixed(2)}deg`);
-    el.style.setProperty('--tx', `${(px * 18).toFixed(1)}px`);
-    el.style.setProperty('--ty', `${(py * 18).toFixed(1)}px`);
-  }, []);
-  const onStageLeave = useCallback(() => {
-    const el = stageRef.current; if (!el) return;
-    el.style.setProperty('--rx', '0deg');
-    el.style.setProperty('--ry', '0deg');
-    el.style.setProperty('--tx', '0px');
-    el.style.setProperty('--ty', '0px');
-  }, []);
 
   return (
-    <section className="fp-panel" style={{ background: 'radial-gradient(ellipse 90% 80% at 78% 42%, #1a1040 0%, #0a0a12 55%, #06060b 100%)' }}>
+    <section className="fp-panel" style={{ background: 'radial-gradient(ellipse 100% 85% at 78% 30%, #3a2b66 0%, #2a2150 45%, #1c1838 100%)' }}>
+
+      {/* Background photo */}
+      <Image src="/images/stock/app-hero.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9, zIndex: 0 }} />
+      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 90% 80% at 78% 42%, rgba(58,43,102,0.15) 0%, rgba(42,33,80,0.35) 55%, rgba(28,24,56,0.55) 100%)', zIndex: 0 }} />
+      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 55% 65% at 30% 48%, rgba(18,14,30,0.7) 0%, rgba(18,14,30,0.3) 60%, transparent 100%)', zIndex: 0 }} />
 
       {/* Ambient orbs + grid */}
       <div className="fp-deco" style={{ position: 'absolute', inset: 0, zIndex: 0 }}>
@@ -71,11 +57,11 @@ export default function HeroSection() {
       </div>
 
       <div className="fp-shell">
-        <div className="fp-split">
+        <div className="fp-split" style={{ gridTemplateColumns: '1fr', justifyItems: 'center', textAlign: 'center' }}>
 
           {/* Text column */}
-          <div>
+          <div style={{ maxWidth: 720 }}>
-            <div className="fp-content fp-eyebrow" style={{ marginBottom: 26 }}>
+            <div className="fp-content fp-eyebrow" style={{ marginBottom: 26, display: 'flex', justifyContent: 'center' }}>
               <span className="fp-kicker">For People · By Loyaly</span>
             </div>
 
@@ -89,12 +75,12 @@ export default function HeroSection() {
 
             <p className="fp-content fp-subtext" style={{
               fontSize: 'clamp(16px, 1.4vw, 19px)', lineHeight: 1.7, fontWeight: 400,
-              color: 'rgba(255,255,255,0.58)', maxWidth: 440, margin: '0 0 40px', fontFamily: 'Manrope, sans-serif',
+              color: 'rgba(255,255,255,0.58)', maxWidth: 560, margin: '0 auto 40px', fontFamily: 'Sora, sans-serif',
             }}>
               Earn Loyaly Coins through daily activities, interactive games, and walking challenges — then redeem them at participating stores near you. Earn Online. Spend Offline.
             </p>
 
-            <div className="fp-content fp-cta" style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <div className="fp-content fp-cta" style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center' }}>
               <Link
                 href="/contacts"
                 ref={magPrimary}
@@ -111,124 +97,17 @@ export default function HeroSection() {
             </div>
 
             {/* Trust row */}
-            <div className="fp-content fp-cta" style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 40 }}>
+            <div className="fp-content fp-cta" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, marginTop: 40 }}>
               <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 #0a0a12', marginLeft: i > 0 ? -9 : 0, opacity: 0.9 }} />
                 ))}
               </div>
-              <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.42)', fontFamily: 'Manrope, sans-serif' }}>
+              <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.42)', fontFamily: 'Sora, sans-serif' }}>
                 <strong style={{ color: 'rgba(255,255,255,0.75)', fontWeight: 700 }}>50,000+</strong> active shoppers earning daily
               </span>
             </div>
           </div>
-
-          {/* Visual column — phone */}
-          <div
-            ref={stageRef}
-            onMouseMove={onStageMove}
-            onMouseLeave={onStageLeave}
-            className="fp-deco"
-            style={{
-              position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center',
-              perspective: 1200,
-            }}
-          >
-            <div style={{
-              transformStyle: 'preserve-3d',
-              transform: 'rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(var(--tx,0px), var(--ty,0px))',
-              transition: 'transform 0.5s cubic-bezier(0.22,1,0.36,1)',
-              position: 'relative',
-            }}>
-              {/* Glow ring */}
-              <div style={{
-                position: 'absolute', inset: -36, borderRadius: '56px',
-                background: 'radial-gradient(circle at 50% 50%, rgba(244,190,40,0.2) 0%, transparent 70%)',
-                animation: 'fpGlow 3s ease-in-out infinite',
-              }} />
-              {/* Phone shell */}
-              <div style={{
-                width: 268, height: 548, borderRadius: '48px',
-                background: 'linear-gradient(160deg, #22223a 0%, #10101c 100%)',
-                border: '1.5px solid rgba(255,255,255,0.1)',
-                boxShadow: '0 70px 130px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.1)',
-                display: 'flex', flexDirection: 'column', overflow: 'hidden',
-                animation: 'fpOrbFloat 6s ease-in-out infinite', position: 'relative',
-              }}>
-                {/* Shimmer sweep */}
-                <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 20, overflow: 'hidden', borderRadius: '48px' }}>
-                  <div style={{
-                    position: 'absolute', top: '-20%', left: 0, width: '40%', height: '140%',
-                    background: 'linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.07) 50%, transparent 100%)',
-                    animation: 'fpScreenShimmer 4.5s ease-in-out infinite', animationDelay: '1s',
-                  }} />
-                </div>
-                {/* Dynamic island */}
-                <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 16, paddingBottom: 4 }}>
-                  <div style={{ width: 96, height: 28, borderRadius: 20, background: '#080810', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
-                    <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#1a1a28', border: '1px solid rgba(255,255,255,0.08)' }} />
-                    <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#0d0d18' }} />
-                  </div>
-                </div>
-                {/* Header */}
-                <div style={{ padding: '8px 22px 12px' }}>
-                  <div style={{ fontSize: 10, color: '#f4be28', fontWeight: 700, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Good Morning</div>
-                  <div style={{ fontSize: 16, color: '#fff', fontWeight: 800, fontFamily: 'Manrope, sans-serif', marginTop: 2 }}>Loyaly ✦</div>
-                </div>
-                {/* Points card */}
-                <div style={{
-                  margin: '0 14px', borderRadius: 22, background: 'linear-gradient(135deg, #f4be28 0%, #e09820 100%)',
-                  padding: '18px 20px', boxShadow: '0 8px 24px rgba(244,190,40,0.35)', position: 'relative', overflow: 'hidden',
-                }}>
-                  <div style={{ position: 'absolute', top: '-30%', right: '-10%', width: 110, height: 110, borderRadius: '50%', background: 'rgba(255,255,255,0.12)' }} />
-                  <div style={{ fontSize: 10, color: 'rgba(23,21,18,0.65)', fontWeight: 700, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Total Points</div>
-                  <div style={{ fontSize: 34, color: '#171512', fontWeight: 900, fontFamily: 'Manrope, sans-serif', letterSpacing: '-0.03em', marginTop: 2 }}>284</div>
-                  <div style={{ fontSize: 10, color: 'rgba(23,21,18,0.6)', fontFamily: 'Manrope, sans-serif', marginTop: 4 }}>≈ ₹284 redeemable</div>
-                </div>
-                {/* Activity */}
-                <div style={{ padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 7, flex: 1 }}>
-                  {[
-                    { store: 'Starbucks', pts: '+120', color: '#4ade80' },
-                    { store: 'Nike Store', pts: '+85', color: '#4ade80' },
-                    { store: 'H&M', pts: '−50', color: '#f87171' },
-                  ].map((item, i) => (
-                    <div key={i} style={{
-                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
-                      background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: '10px 13px', border: '1px solid rgba(255,255,255,0.06)',
-                    }}>
-                      <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.78)', fontFamily: 'Manrope, sans-serif' }}>{item.store}</span>
-                      <span style={{ fontSize: 12, color: item.color, fontWeight: 700, fontFamily: 'Manrope, sans-serif' }}>{item.pts}</span>
-                    </div>
-                  ))}
-                </div>
-                {/* Nav dots */}
-                <div style={{ display: 'flex', justifyContent: 'center', gap: 6, padding: '10px 0 20px' }}>
-                  {[1, 0, 0, 0].map((a, i) => (
-                    <div key={i} style={{ width: a ? 22 : 6, height: 4, borderRadius: 2, background: a ? '#f4be28' : 'rgba(255,255,255,0.2)' }} />
-                  ))}
-                </div>
-              </div>
-
-              {/* Floating mini chips */}
-              <div className="fp-glass" style={{
-                position: 'absolute', top: '12%', left: '-12%', borderRadius: 16, padding: '12px 16px',
-                display: 'flex', alignItems: 'center', gap: 10, animation: 'fpOrb2Float 7s ease-in-out infinite',
-              }}>
-                <div style={{ width: 30, height: 30, borderRadius: 9, background: 'rgba(74,222,128,0.16)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4ade80', fontSize: 14, fontWeight: 800 }}>↑</div>
-                <div>
-                  <div style={{ fontSize: 11, fontWeight: 700, color: '#fff', fontFamily: 'Manrope, sans-serif' }}>+120 pts</div>
-                  <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif' }}>just now</div>
-                </div>
-              </div>
-              <div className="fp-glass" style={{
-                position: 'absolute', bottom: '14%', right: '-14%', borderRadius: 16, padding: '12px 16px',
-                animation: 'fpOrbFloat 8s ease-in-out infinite',
-              }}>
-                <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 3 }}>Redeemable</div>
-                <div style={{ fontSize: 17, fontWeight: 900, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>₹284.00</div>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
 
@@ -236,7 +115,7 @@ export default function HeroSection() {
       <div style={{
         position: 'absolute', bottom: 38, left: '50%', transform: 'translateX(-50%)',
         display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, zIndex: 10,
-        color: 'rgba(255,255,255,0.3)', fontSize: 10, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.16em', textTransform: 'uppercase',
+        color: 'rgba(255,255,255,0.3)', fontSize: 10, fontFamily: 'Sora, sans-serif', letterSpacing: '0.16em', textTransform: 'uppercase',
       }}>
         <span>Scroll</span>
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ animation: 'fpScrollHint 1.6s ease-in-out infinite' }}>

src/components/for-people/SpendAnywhereSection.tsx

@@ -38,7 +38,7 @@ export default function SpendAnywhereSection() {
             </h2>
           </div>
           <p className="fp-rise" style={{
-            fontSize: 15, lineHeight: 1.75, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif', margin: 0, maxWidth: 320,
+            fontSize: 15, lineHeight: 1.75, color: 'rgba(255,255,255,0.45)', fontFamily: 'Sora, sans-serif', margin: 0, maxWidth: 320,
           }}>
             One wallet. Every store. Your Loyaly points are universal — no restrictions, no expiry, no fine print.
           </p>
@@ -64,12 +64,12 @@ export default function SpendAnywhereSection() {
             >
               <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 14 }}>
                 {(() => { const BrandIcon = brand.Icon; return <span style={{ color: active === i ? brand.color : 'rgba(255,255,255,0.45)', transition: 'color 0.3s' }}><BrandIcon /></span>; })()}
-                <span style={{ fontSize: 14, fontWeight: 700, color: active === i ? '#fff' : 'rgba(255,255,255,0.75)', fontFamily: 'Manrope, sans-serif', transition: 'color 0.2s' }}>{brand.name}</span>
+                <span style={{ fontSize: 14, fontWeight: 700, color: active === i ? '#fff' : 'rgba(255,255,255,0.75)', fontFamily: 'Sora, sans-serif', transition: 'color 0.2s' }}>{brand.name}</span>
               </div>
               <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                 {brand.stores.map((s, j) => (
                   <span key={j} style={{
-                    fontSize: 11, fontWeight: 600, fontFamily: 'Manrope, sans-serif',
+                    fontSize: 11, fontWeight: 600, fontFamily: 'Sora, sans-serif',
                     color: active === i ? brand.color : 'rgba(255,255,255,0.3)',
                     background: active === i ? `${brand.color}18` : 'rgba(255,255,255,0.04)',
                     border: `1px solid ${active === i ? `${brand.color}30` : 'rgba(255,255,255,0.06)'}`,
@@ -94,7 +94,7 @@ export default function SpendAnywhereSection() {
           ].map((s, i) => (
             <div key={i}>
               <div style={{ fontSize: 'clamp(26px, 3vw, 42px)', fontWeight: 900, fontFamily: 'Sora, sans-serif', color: '#f4be28', letterSpacing: '-0.04em', lineHeight: 1 }}>{s.val}</div>
-              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.35)', fontFamily: 'Manrope, sans-serif', marginTop: 8, letterSpacing: '0.06em' }}>{s.lbl}</div>
+              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif', marginTop: 8, letterSpacing: '0.06em' }}>{s.lbl}</div>
             </div>
           ))}
         </div>

src/components/for-people/VerticalScrollWrapper.tsx

@@ -209,7 +209,7 @@ export default function VerticalScrollWrapper({ children, sections = [] }: Props
         }
         .fp-kicker {
           display: inline-flex; align-items: center; gap: 12px;
-          font-family: 'Manrope', sans-serif; font-weight: 700;
+          font-family: 'Sora', sans-serif; font-weight: 700;
           font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
         }
         .fp-kicker::before {
@@ -219,7 +219,7 @@ export default function VerticalScrollWrapper({ children, sections = [] }: Props
         /* ── Shared buttons ── */
         .fp-btn {
           display: inline-flex; align-items: center; gap: 10px;
-          font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px;
+          font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px;
           border-radius: 100px; text-decoration: none; cursor: pointer;
           letter-spacing: -0.01em; white-space: nowrap;
           transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.3s ease, box-shadow 0.3s ease;
@@ -296,7 +296,7 @@ export default function VerticalScrollWrapper({ children, sections = [] }: Props
         .fp-rail-item.is-active .fp-rail-dot { background: var(--gold); box-shadow: 0 0 12px rgba(244,190,40,0.8); transform: scale(1.3); }
         .fp-rail-label {
           display: flex; align-items: center; gap: 8px;
-          font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600;
+          font-family: 'Sora', sans-serif; font-size: 11px; font-weight: 600;
           letter-spacing: 0.04em; color: rgba(255,255,255,0.8); white-space: nowrap;
           padding: 5px 12px; border-radius: 100px;
           background: rgba(12,12,18,0.72); border: 1px solid rgba(255,255,255,0.08);

src/components/for-people/WhyLoyalySection.tsx

@@ -68,7 +68,7 @@ export default function WhyLoyalySection() {
               <div style={{
                 display: 'inline-block', padding: '8px 16px', borderRadius: 10,
                 background: '#ef4444', color: '#fff',
-                fontSize: 12, fontWeight: 700, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.08em', textTransform: 'uppercase',
+                fontSize: 12, fontWeight: 700, fontFamily: 'Sora, sans-serif', letterSpacing: '0.08em', textTransform: 'uppercase',
               }}>Loyalty penetration in offline retail</div>
             </div>
 
@@ -85,7 +85,7 @@ export default function WhyLoyalySection() {
                   transitionDelay: `${0.1 + i * 0.08}s`,
                 }}>
                   <div style={{ fontSize: 20, fontWeight: 900, fontFamily: 'Sora, sans-serif', color: m.accent, letterSpacing: '-0.03em', flexShrink: 0, minWidth: 72 }}>{m.val}</div>
-                  <div style={{ fontSize: 12, color: 'rgba(23,21,18,0.6)', fontFamily: 'Manrope, sans-serif', lineHeight: 1.4 }}>{m.label}</div>
+                  <div style={{ fontSize: 12, color: 'rgba(23,21,18,0.6)', fontFamily: 'Sora, sans-serif', lineHeight: 1.4 }}>{m.label}</div>
                 </div>
               ))}
             </div>
@@ -99,7 +99,7 @@ export default function WhyLoyalySection() {
               background: '#fff7e0', border: '1.5px solid #f4be28', borderRadius: 100, padding: '10px 20px',
             }}>
               <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#16a34a', display: 'block', flexShrink: 0, boxShadow: '0 0 0 3px rgba(22,163,74,0.2)', animation: 'fpPulse 1.5s ease-in-out infinite' }} />
-              <span style={{ fontSize: 13, fontWeight: 700, color: '#171512', fontFamily: 'Manrope, sans-serif' }}>
+              <span style={{ fontSize: 13, fontWeight: 700, color: '#171512', fontFamily: 'Sora, sans-serif' }}>
                 <span style={{ color: '#f4be28' }}>{count.toLocaleString()}</span> txns today · unrewarded
               </span>
             </div>
@@ -114,7 +114,7 @@ export default function WhyLoyalySection() {
 
             <p className="fp-rise" style={{
               fontSize: 16, lineHeight: 1.8, color: '#4f463a', margin: '0 0 36px',
-              fontFamily: 'Manrope, sans-serif', maxWidth: 440,
+              fontFamily: 'Sora, sans-serif', maxWidth: 440,
             }}>
               India&apos;s offline retail market is worth ₹2.1 lakh crore. Yet loyalty penetration sits at effectively zero. Loyaly exists to close that gap — permanently.
             </p>
@@ -123,7 +123,7 @@ export default function WhyLoyalySection() {
             {bars.map((b, i) => (
               <div key={i} style={{ marginBottom: 16 }}>
                 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 7 }}>
-                  <span style={{ fontSize: 13, fontWeight: 600, color: '#171512', fontFamily: 'Manrope, sans-serif' }}>{b.label}</span>
+                  <span style={{ fontSize: 13, fontWeight: 600, color: '#171512', fontFamily: 'Sora, sans-serif' }}>{b.label}</span>
                   <span style={{ fontSize: 14, fontWeight: 800, color: b.color, fontFamily: 'Sora, sans-serif' }}>{b.pct}%</span>
                 </div>
                 <div style={{ height: 8, background: 'rgba(23,21,18,0.07)', borderRadius: 100, overflow: 'hidden' }}>

src/components/home/ProblemsShift.tsx

@@ -156,7 +156,7 @@ function CompareCard({
             <svg width="16" height="16" viewBox="0 0 20 20" fill={accent}><path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" /></svg>
           )}
         </span>
-        <span style={{ color: accent, fontSize: 12, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', fontFamily: 'Manrope, sans-serif' }}>{badge}</span>
+        <span style={{ color: accent, fontSize: 12, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', fontFamily: 'Sora, sans-serif' }}>{badge}</span>
       </div>
 
       {/* Description */}
@@ -181,7 +181,7 @@ function CompareCard({
             <span style={{ width: 38, height: 38, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 11, background: `${accent}12`, border: `1px solid ${accent}26` }}>
               <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="2" style={{ color: accent }}>{item.icon}</svg>
             </span>
-            <span style={{ color: '#3f3a32', fontSize: '0.95rem', fontWeight: 600, lineHeight: 1.35, fontFamily: 'Manrope, sans-serif' }}>{item.text}</span>
+            <span style={{ color: '#3f3a32', fontSize: '0.95rem', fontWeight: 600, lineHeight: 1.35, fontFamily: 'Sora, sans-serif' }}>{item.text}</span>
           </div>
         ))}
       </div>
@@ -261,12 +261,12 @@ export default function ProblemsShift({ isLoaded = true }: ProblemsShiftProps) {
       <div className="ps-header relative z-10 text-center max-w-3xl mx-auto" style={{ marginBottom: 'clamp(40px, 5vw, 72px)' }}>
         <div className="ps-eyebrow" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '7px 16px', borderRadius: 999, background: 'rgba(244,190,40,0.1)', border: '1px solid rgba(244,190,40,0.28)', marginBottom: 24 }}>
           <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', display: 'block' }} />
-          <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#C49600', fontFamily: 'Manrope, sans-serif' }}>The Opportunity</span>
+          <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#C49600', fontFamily: 'Sora, sans-serif' }}>The Opportunity</span>
         </div>
         <h2 className="ps-title" style={{ color: '#171512', fontWeight: 900, fontSize: 'clamp(2.4rem, 6vw, 4.8rem)', letterSpacing: '-0.05em', lineHeight: 0.94, margin: '0 0 20px', fontFamily: 'Sora, sans-serif' }}>
           Retail is busy.<br /><span style={{ color: '#f4be28' }}>But blind.</span>
         </h2>
-        <p className="ps-subtitle" style={{ color: '#4f463a', fontSize: 'clamp(1rem, 1.3vw, 1.2rem)', fontWeight: 500, maxWidth: 620, margin: '0 auto', lineHeight: 1.7, fontFamily: 'Manrope, sans-serif' }}>
+        <p className="ps-subtitle" style={{ color: '#4f463a', fontSize: 'clamp(1rem, 1.3vw, 1.2rem)', fontWeight: 500, maxWidth: 620, margin: '0 auto', lineHeight: 1.7, fontFamily: 'Sora, sans-serif' }}>
           Customers have no compelling reason to choose your store over the next one. Loyaly creates that reason — with daily rewards, interactive games, and surprise coupons redeemable in person.
         </p>
       </div>
@@ -312,7 +312,7 @@ export default function ProblemsShift({ isLoaded = true }: ProblemsShiftProps) {
               <span style={{ width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 10, background: '#faf9f5', border: '1px solid rgba(0,0,0,0.05)' }}>
                 <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#171512" strokeWidth="2">{f.icon}</svg>
               </span>
-              <span style={{ color: '#171512', fontWeight: 700, fontSize: '0.95rem', fontFamily: 'Manrope, sans-serif' }}>{f.label}</span>
+              <span style={{ color: '#171512', fontWeight: 700, fontSize: '0.95rem', fontFamily: 'Sora, sans-serif' }}>{f.label}</span>
             </div>
             {i < BOTTOM_FEATURES.length - 1 && <span className="ps-sep" style={{ width: 1, height: 28, background: 'rgba(0,0,0,0.07)' }} />}
           </React.Fragment>

src/components/home/ProductsSection.tsx

@@ -130,8 +130,8 @@ function ProductVisual({ product }: { product: Product }) {
     return (
       <div style={{ width: '86%', display: 'flex', flexDirection: 'column', gap: 14 }}>
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <span style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', fontWeight: 600 }}>Live footfall</span>
+          <span style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', fontWeight: 600 }}>Live footfall</span>
-          <span style={{ fontSize: 11, color: accent, fontFamily: 'Manrope, sans-serif', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 5 }}>
+          <span style={{ fontSize: 11, color: accent, fontFamily: 'Sora, sans-serif', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 5 }}>
             <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#4ade80', display: 'block' }} />2,847
           </span>
         </div>
@@ -145,7 +145,7 @@ function ProductVisual({ product }: { product: Product }) {
         <div style={{ display: 'flex', gap: 10 }}>
           {[['Peak', '6–8 PM'], ['Dwell', '14 min'], ['Zones', '12']].map(([k, v]) => (
             <div key={k} style={{ flex: 1, padding: '10px 12px', borderRadius: 12, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)' }}>
-              <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif' }}>{k}</div>
+              <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif' }}>{k}</div>
               <div style={{ fontSize: 15, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif', marginTop: 2 }}>{v}</div>
             </div>
           ))}
@@ -163,10 +163,10 @@ function ProductVisual({ product }: { product: Product }) {
     return (
       <div style={{ width: '86%', display: 'flex', flexDirection: 'column', gap: 16 }}>
         <div>
-          <div style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', fontWeight: 600 }}>Avg basket value</div>
+          <div style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', fontWeight: 600 }}>Avg basket value</div>
           <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 4 }}>
             <span style={{ fontSize: 34, fontWeight: 900, color: '#fff', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em' }}>₹1,240</span>
-            <span style={{ fontSize: 13, fontWeight: 700, color: accent, fontFamily: 'Manrope, sans-serif' }}>+18%</span>
+            <span style={{ fontSize: 13, fontWeight: 700, color: accent, fontFamily: 'Sora, sans-serif' }}>+18%</span>
           </div>
         </div>
         <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: 'auto', overflow: 'visible' }}>
@@ -189,19 +189,19 @@ function ProductVisual({ product }: { product: Product }) {
     return (
       <div style={{ width: '82%', display: 'flex', flexDirection: 'column', gap: 14 }}>
         <div style={{ borderRadius: 16, padding: '18px 20px', background: `linear-gradient(135deg, ${accent} 0%, #c0392b 100%)`, position: 'relative', overflow: 'hidden' }}>
-          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.6)', fontFamily: 'Manrope, sans-serif' }}>Smart Offer</div>
+          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.6)', fontFamily: 'Sora, sans-serif' }}>Smart Offer</div>
           <div style={{ fontSize: 30, fontWeight: 900, color: '#fff', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em', marginTop: 2 }}>15% OFF</div>
-          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.85)', fontFamily: 'Manrope, sans-serif', marginTop: 2 }}>Targeted · high-intent shoppers</div>
+          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.85)', fontFamily: 'Sora, sans-serif', marginTop: 2 }}>Targeted · high-intent shoppers</div>
         </div>
         <div style={{ padding: '14px 16px', borderRadius: 14, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)' }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
-            <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Manrope, sans-serif' }}>Conversion uplift</span>
+            <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif' }}>Conversion uplift</span>
             <span style={{ fontSize: 13, fontWeight: 800, color: accent, fontFamily: 'Sora, sans-serif' }}>+41%</span>
           </div>
           <div style={{ height: 6, borderRadius: 3, background: 'rgba(255,255,255,0.08)', overflow: 'hidden' }}>
             <div style={{ height: '100%', width: '72%', borderRadius: 3, background: accent }} />
           </div>
-          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.35)', fontFamily: 'Manrope, sans-serif', marginTop: 10 }}>Margin protected · 0 waste</div>
+          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif', marginTop: 10 }}>Margin protected · 0 waste</div>
         </div>
       </div>
     );
@@ -212,16 +212,16 @@ function ProductVisual({ product }: { product: Product }) {
     <div style={{ width: '80%', borderRadius: 22, padding: 22, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', display: 'flex', flexDirection: 'column', gap: 16 }}>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <span style={{ fontSize: 12, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif' }}>Loyaly ✦</span>
-        <span style={{ fontSize: 10, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif' }}>GOLD MEMBER</span>
+        <span style={{ fontSize: 10, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif' }}>GOLD MEMBER</span>
       </div>
       <div style={{ borderRadius: 16, padding: '18px 20px', background: `linear-gradient(135deg, ${accent} 0%, #e09820 100%)` }}>
-        <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.6)', fontFamily: 'Manrope, sans-serif' }}>Reward Points</div>
+        <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.6)', fontFamily: 'Sora, sans-serif' }}>Reward Points</div>
         <div style={{ fontSize: 32, fontWeight: 900, color: '#111', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em', marginTop: 2 }}>284</div>
       </div>
       {[['Starbucks', '+120'], ['Nike Store', '+85']].map(([s, p]) => (
         <div key={s} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 12px', borderRadius: 10, background: 'rgba(255,255,255,0.04)' }}>
-          <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', fontFamily: 'Manrope, sans-serif' }}>{s}</span>
+          <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', fontFamily: 'Sora, sans-serif' }}>{s}</span>
-          <span style={{ fontSize: 12, fontWeight: 700, color: '#4ade80', fontFamily: 'Manrope, sans-serif' }}>{p}</span>
+          <span style={{ fontSize: 12, fontWeight: 700, color: '#4ade80', fontFamily: 'Sora, sans-serif' }}>{p}</span>
         </div>
       ))}
     </div>
@@ -269,7 +269,7 @@ function ProductCard({ product, index }: { product: Product; index: number }) {
           <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
             <span style={{ fontSize: 13, fontWeight: 800, color: product.accent, fontFamily: 'Sora, sans-serif', letterSpacing: '0.05em' }}>0{product.id}</span>
             <span style={{ width: 24, height: 1, background: `rgba(${product.accentRgb},0.4)`, display: 'block' }} />
-            <span style={{ fontSize: '0.68rem', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: product.accent, fontFamily: 'Manrope, sans-serif' }}>{product.subtitle}</span>
+            <span style={{ fontSize: '0.68rem', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: product.accent, fontFamily: 'Sora, sans-serif' }}>{product.subtitle}</span>
           </div>
 
           <h3 style={{
@@ -283,7 +283,7 @@ function ProductCard({ product, index }: { product: Product; index: number }) {
             margin: 0,
             fontSize: 'clamp(0.82rem, 0.95vw, 0.98rem)',
             lineHeight: 1.6, color: 'rgba(255,255,255,0.5)',
-            maxWidth: '420px', fontFamily: 'Manrope, sans-serif',
+            maxWidth: '420px', fontFamily: 'Sora, sans-serif',
           }}>{product.description}</p>
         </div>
 
@@ -293,7 +293,7 @@ function ProductCard({ product, index }: { product: Product; index: number }) {
               <span key={tag} style={{
                 padding: '5px 13px', borderRadius: '99px', fontSize: '0.7rem', fontWeight: 600,
                 color: 'rgba(255,255,255,0.7)', background: 'rgba(255,255,255,0.05)',
-                border: '1px solid rgba(255,255,255,0.1)', fontFamily: 'Manrope, sans-serif',
+                border: '1px solid rgba(255,255,255,0.1)', fontFamily: 'Sora, sans-serif',
               }}>{tag}</span>
             ))}
           </div>
@@ -304,7 +304,7 @@ function ProductCard({ product, index }: { product: Product; index: number }) {
               display: 'inline-flex', alignItems: 'center', gap: '8px', width: 'max-content',
               padding: '11px 22px', borderRadius: '99px', fontSize: '0.85rem', fontWeight: 800,
               textDecoration: 'none', color: '#111111', background: product.accent,
-              fontFamily: 'Manrope, sans-serif', boxShadow: `0 12px 36px rgba(${product.accentRgb},0.25)`,
+              fontFamily: 'Sora, sans-serif', boxShadow: `0 12px 36px rgba(${product.accentRgb},0.25)`,
               transition: 'transform 0.3s cubic-bezier(0.34,1.56,0.64,1)',
             }}
             onMouseEnter={(e) => { (e.currentTarget as HTMLAnchorElement).style.transform = 'scale(1.04)'; }}
@@ -408,7 +408,7 @@ export default function ProductsSection({ isLoaded = false }: ProductsSectionPro
         <div style={{ maxWidth: 480 }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
             <span style={{ width: 32, height: 2, background: '#f4be28', display: 'block', borderRadius: 2 }} />
-            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#C49600', fontFamily: 'Manrope, sans-serif' }}>Platform</span>
+            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#C49600', fontFamily: 'Sora, sans-serif' }}>Platform</span>
           </div>
           <h2 style={{ margin: 0, fontSize: 'clamp(1.9rem, 3.6vw, 3.2rem)', fontWeight: 900, lineHeight: 0.94, letterSpacing: '-0.04em', color: '#111111', fontFamily: 'Sora, sans-serif' }}>
             Four products.<br />
@@ -417,10 +417,10 @@ export default function ProductsSection({ isLoaded = false }: ProductsSectionPro
         </div>
 
         <div className="products-heading-hint" style={{ maxWidth: 280, textAlign: 'right' }}>
-          <p style={{ margin: '0 0 14px', fontSize: 'clamp(0.85rem, 1vw, 1rem)', lineHeight: 1.6, color: 'rgba(0,0,0,0.45)', fontFamily: 'Manrope, sans-serif' }}>
+          <p style={{ margin: '0 0 14px', fontSize: 'clamp(0.85rem, 1vw, 1rem)', lineHeight: 1.6, color: 'rgba(0,0,0,0.45)', fontFamily: 'Sora, sans-serif' }}>
             Powering every stage of the retail journey with intelligent AI solutions.
           </p>
-          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.32)', fontFamily: 'Manrope, sans-serif' }}>
+          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.32)', fontFamily: 'Sora, sans-serif' }}>
             Scroll to explore
             <svg viewBox="0 0 24 16" fill="none" width="22" height="14">
               <path d="M2 8h18M14 3l5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

src/components/home/TheLoop.tsx

@@ -149,7 +149,7 @@ export default function TheLoop() {
           background: 'rgba(244,190,40,0.08)', border: '1px solid rgba(244,190,40,0.22)',
         }}>
           <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', display: 'block' }} />
-          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif' }}>The Loop</span>
+          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif' }}>The Loop</span>
         </div>
 
         <h2 style={{
@@ -171,7 +171,7 @@ export default function TheLoop() {
           margin: '0 auto', maxWidth: 480,
           fontSize: 'clamp(0.95rem, 1.1vw, 1.05rem)',
           color: 'rgba(255,255,255,0.42)', lineHeight: 1.8,
-          fontFamily: 'Manrope, sans-serif',
+          fontFamily: 'Sora, sans-serif',
         }}>
           Earn coins online, unlock game-based deals, discover nearby stores, and redeem offline — a self-reinforcing loop that keeps customers engaged and drives repeat footfall.
         </p>
@@ -204,7 +204,7 @@ export default function TheLoop() {
         <div className="loop-arc-label" style={{
           position: 'absolute', top: -78, left: '50%', transform: 'translateX(-50%)',
           fontSize: 10, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
-          color: 'rgba(244,190,40,0.7)', fontFamily: 'Manrope, sans-serif',
+          color: 'rgba(244,190,40,0.7)', fontFamily: 'Sora, sans-serif',
           background: 'rgba(244,190,40,0.06)', border: '1px solid rgba(244,190,40,0.18)',
           padding: '5px 14px', borderRadius: 999, whiteSpace: 'nowrap',
         }}>
@@ -258,13 +258,13 @@ export default function TheLoop() {
                     <StepIcon id={s.id} />
                   </div>
 
-                  <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(244,190,40,0.7)', fontFamily: 'Manrope, sans-serif', marginBottom: 8 }}>
+                  <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(244,190,40,0.7)', fontFamily: 'Sora, sans-serif', marginBottom: 8 }}>
                     Step {s.step}
                   </div>
                   <h3 style={{ margin: '0 0 10px', fontSize: 'clamp(1.15rem, 1.5vw, 1.5rem)', fontWeight: 800, color: '#fff', letterSpacing: '-0.02em', lineHeight: 1.1, fontFamily: 'Sora, sans-serif' }}>
                     {s.title}
                   </h3>
-                  <p style={{ margin: 0, fontSize: '0.86rem', lineHeight: 1.65, color: 'rgba(255,255,255,0.42)', fontFamily: 'Manrope, sans-serif' }}>
+                  <p style={{ margin: 0, fontSize: '0.86rem', lineHeight: 1.65, color: 'rgba(255,255,255,0.42)', fontFamily: 'Sora, sans-serif' }}>
                     {s.desc}
                   </p>
                 </div>
@@ -297,7 +297,7 @@ export default function TheLoop() {
       {/* ── Impact metrics ── */}
       <div ref={metricsRef} style={{ position: 'relative', zIndex: 10, maxWidth: 1000, margin: 'clamp(64px, 8vh, 110px) auto 0' }}>
         <div style={{ textAlign: 'center', marginBottom: 36 }}>
-          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.35)', fontFamily: 'Manrope, sans-serif' }}>
+          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif' }}>
             Measured Impact
           </span>
         </div>
@@ -318,7 +318,7 @@ export default function TheLoop() {
                 {counts[i].toFixed(m.decimals)}
                 <span style={{ fontSize: '50%', verticalAlign: 'middle', marginLeft: 1 }}>{m.suffix}</span>
               </div>
-              <div style={{ fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,0.5)', fontFamily: 'Manrope, sans-serif', marginTop: 12, lineHeight: 1.4 }}>
+              <div style={{ fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif', marginTop: 12, lineHeight: 1.4 }}>
                 {m.label}
               </div>
             </div>

src/components/home/WhatWeDo.tsx

@@ -94,7 +94,7 @@ function StageCard({ num, title, description, icon, cardRef, orderClass }: CardP
         fontSize: 'clamp(0.9rem, 1vw, 1rem)',
         color: 'rgba(255,255,255,0.45)',
         lineHeight: 1.75, maxWidth: '360px',
-        fontFamily: 'Manrope, sans-serif',
+        fontFamily: 'Sora, sans-serif',
         position: 'relative', zIndex: 2,
       }}>
         {description}
@@ -264,7 +264,7 @@ export default function WhatWeDo({ isLoaded = false }: WhatWeDoProps) {
         </h2>
 
         {/* Subtitle */}
-        <p className="wwd-header-el text-gray-400 text-base sm:text-lg max-w-xl font-medium" style={{ fontFamily: 'Manrope, sans-serif', lineHeight: 1.75 }}>
+        <p className="wwd-header-el text-gray-400 text-base sm:text-lg max-w-xl font-medium" style={{ fontFamily: 'Sora, sans-serif', lineHeight: 1.75 }}>
           Four stages. One platform. A smarter retail cycle that turns every walk-in into a loyal customer.
         </p>
       </div>