updated section design

2026-07-14 16:09:50 +05:30
parent 4dbc330b1d
commit 211d2489e1
14 changed files with 793 additions and 311 deletions
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -128,7 +128,7 @@ export default function Footer() {
              </span>
            </Link>
            <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.
+              Offline shopping. Online intelligence.
            </p>
            <div style={{ display: 'flex', gap: 10 }}>
              {SOCIALS.map(({ label, href, icon }) => (
@@ -150,9 +150,6 @@ export default function Footer() {
          {/* Nav columns */}
          {NAV.map(col => (
            <nav key={col.title} className="ly-footer-nav" 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: '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}>
--- a/src/components/home/ProblemSection.tsx
+++ b/src/components/home/ProblemSection.tsx
@@ -153,58 +153,6 @@ export default function ProblemSection({ isLoaded = true }: ProblemSectionProps)
        </div>
      </div>

-      {/* India retail market stats strip */}
-      <div className="relative z-10 mx-auto problem-india-stats" style={{
-        maxWidth: 1200,
-        marginBottom: 'clamp(32px, 4vw, 48px)',
-        display: 'grid',
-        gridTemplateColumns: 'repeat(5, 1fr)',
-        gap: 'clamp(8px, 1.2vw, 14px)',
-      }}>
-        {[
-          {
-            val: '$2 Tn', label: 'Indian retail market by 2032, 26% CAGR',
-            icon: (<><line x1="12" y1="1" x2="12" y2="23" /><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></>),
-          },
-          {
-            val: '5th', label: 'Largest retail destination globally',
-            icon: (<><circle cx="12" cy="12" r="10" /><line x1="2" y1="12" x2="22" y2="12" /><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /></>),
-          },
-          {
-            val: '10%', label: "Of India's GDP from retail",
-            icon: (<><path d="M21.21 15.89A10 10 0 1 1 8 2.83" /><path d="M22 12A10 10 0 0 0 12 2v10z" /></>),
-          },
-          {
-            val: '12%', label: 'Of retail is organized, the rest is offline',
-            icon: (<><path d="M3 9l1.5-5h15L21 9" /><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9" /><path d="M9 21v-6h6v6" /></>),
-          },
-          {
-            val: '500M', label: "India's online shoppers by 2030, up from 250M",
-            icon: (<><polyline points="23 6 13.5 16.5 8.5 11.5 1 19" /><polyline points="17 6 23 6 23 12" /></>),
-          },
-        ].map((s, i) => (
-          <div key={i} className="problem-india-stat" style={{
-            padding: 'clamp(14px, 1.8vw, 20px)', borderRadius: 16,
-            background: '#f9f7f2', border: '1px solid rgba(23,21,18,0.08)',
-          }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
-              <span style={{
-                width: 38, height: 38, borderRadius: '50%', flexShrink: 0,
-                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                background: 'linear-gradient(150deg, #ee3a34 0%, #c81e1e 100%)',
-                boxShadow: '0 6px 14px -6px rgba(200,30,30,0.6)',
-              }}>
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffffff" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round">
-                  {s.icon}
-                </svg>
-              </span>
-              <div style={{ fontSize: 'clamp(1.3rem, 2vw, 1.7rem)', fontWeight: 900, color: '#171512', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em', lineHeight: 1 }}>{s.val}</div>
-            </div>
-            <div style={{ fontSize: '0.72rem', color: '#4f463a', fontFamily: 'Sora, sans-serif', lineHeight: 1.4 }}>{s.label}</div>
-          </div>
-        ))}
-      </div>
-
      {/* Grid wrapper */}
      <div className="relative z-10 mx-auto" style={{ maxWidth: 1200 }}>
        {/* Row 1: Red Stat Cards */}
@@ -527,15 +475,6 @@ export default function ProblemSection({ isLoaded = true }: ProblemSectionProps)
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
        }

-        .problem-india-stat {
-          transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1);
-        }
-        .problem-india-stat:hover {
-          border-color: rgba(239, 68, 68, 0.35);
-          box-shadow: 0 14px 30px -18px rgba(23,21,18,0.28);
-          transform: translateY(-3px);
-        }
-
        .dark-bento-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
@@ -592,7 +531,6 @@ export default function ProblemSection({ isLoaded = true }: ProblemSectionProps)
          #problem .problem-stats-row { grid-template-columns: 1fr !important; }
          #problem .dark-bento-grid { grid-template-columns: 1fr !important; }
          #problem .dark-bento-card-4 { grid-column: span 1; }
-          #problem .problem-india-stats { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </section>
--- a/src/components/home/ProductsSection.tsx
+++ b/src/components/home/ProductsSection.tsx
@@ -653,7 +653,7 @@ export default function ProductsSection({ isLoaded = false }: ProductsSectionPro
        }
        .products-card {
          flex: 0 0 auto;
-          width: clamp(320px, 74vw, 880px);
+          width: clamp(320px, 90vw, 1280px);
          /* Fill the band between heading and progress bar, capped on huge screens */
          height: min(740px, calc(100vh - var(--pt) - var(--pb)));
        }
@@ -704,7 +704,7 @@ export default function ProductsSection({ isLoaded = false }: ProductsSectionPro
          }
          .products-track::-webkit-scrollbar { display: none; }
          .products-track { scrollbar-width: none; }
-          .products-card { height: auto; width: min(86vw, 460px); }
+          .products-card { height: auto; width: min(90vw, 520px); }
          .products-card { flex-direction: column !important; }
          .products-card-content { flex: 0 0 auto !important; }
          .products-card-visual {
--- a/src/components/home/heroCarouselData.ts
+++ b/src/components/home/heroCarouselData.ts
@@ -16,7 +16,7 @@ export interface HeroSlideData {
 export const HERO_SLIDES: HeroSlideData[] = [
  {
    id: 'intro',
-    badge: 'AI-Powered Retail Intelligence',
+    badge: 'Offline Shopping. Online Intelligence.',
    headline: 'Turn Every Visit Into Loyalty',
    highlightWords: ['Loyalty'],
    description:
--- a/src/components/use-cases/ProductsScrollSection.tsx
+++ b/src/components/use-cases/ProductsScrollSection.tsx
@@ -147,7 +147,7 @@ export default function ProductsScrollSection() {
        <div style={{ position: 'relative', zIndex: 2, marginBottom: 'clamp(56px,8vh,96px)' }}>
          <SectionEyebrow variant="pill" style={{ marginBottom: 16 }}>Our Products</SectionEyebrow>
          <h2 style={{ fontSize: 'clamp(32px, 4.5vw, 64px)', fontWeight: 800, letterSpacing: '-0.05em', lineHeight: 0.92, color: '#fff', margin: 0, fontFamily: 'Sora, sans-serif', maxWidth: 640 }}>
-            AI Powered Retail Intelligence.
+            Offline Shopping. Online Intelligence.
          </h2>
        </div>