145 lines
11 KiB
TypeScript
145 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
|
|
const ARTICLE = {
|
|
tag: 'Analytics',
|
|
readTime: '6 min',
|
|
title: 'Why Footfall Data is the New Gold',
|
|
date: 'June 2026',
|
|
author: 'Loyaly.ai Team',
|
|
excerpt: 'In an era where every online click is tracked, offline retailers are sitting on untapped behavioural gold, and most don\'t even know it exists.',
|
|
sections: [
|
|
{
|
|
heading: 'The data gap in offline retail',
|
|
body: 'E-commerce has always had an advantage: every click, scroll, and abandoned cart is tracked and analysed. Offline retail never had this luxury, until now. Footfall data is rapidly becoming the most valuable asset a physical store can own. It tells you not just how many people walk in, but when, where they go, how long they stay, and whether they convert.',
|
|
},
|
|
{
|
|
heading: 'What footfall data actually tells you',
|
|
body: 'A modern footfall intelligence system captures far more than a head count. It maps movement patterns through your store, identifies dwell zones, flags bottlenecks, and connects visit behaviour to purchase outcomes. When you overlay this with loyalty data: who the customer is, what they\'ve bought before, how long since their last visit, you get a complete picture that was previously impossible for offline businesses.',
|
|
},
|
|
{
|
|
heading: 'Turning insights into revenue',
|
|
body: 'The real power of footfall data emerges when it drives action. If you know that 60% of visitors who enter your electronics section but leave without buying spend more than 12 minutes near the display stands, that\'s a cue for a targeted offer. Loyaly\'s Behavision AI does exactly this: it detects intent signals and triggers personalised engagements in real time, closing the gap between visit and purchase.',
|
|
},
|
|
{
|
|
heading: 'The competitive advantage is closing',
|
|
body: 'Retailers who adopt footfall intelligence today are building a data moat that will be very hard for competitors to close later. Every day without this data is a day of lost insight. The good news: AI has made footfall analytics accessible to stores of all sizes — not just enterprise chains with seven-figure tech budgets. Loyaly brings this capability to any merchant who wants it.',
|
|
},
|
|
],
|
|
relatedArticles: [
|
|
{ n: '02', tag: 'Strategy', title: 'The End of Blind Discounts', readTime: '5 min' },
|
|
{ n: '03', tag: 'Technology', title: 'AI in Offline Retail', readTime: '8 min' },
|
|
{ n: '04', tag: 'Growth', title: 'How to Increase Repeat Customers', readTime: '4 min' },
|
|
],
|
|
};
|
|
|
|
export default function BlogSinglePage() {
|
|
return (
|
|
<main style={{ background: '#ffffff', minHeight: '100vh', overflowX: 'hidden' }}>
|
|
|
|
{/* Hero */}
|
|
<section style={{
|
|
padding: '140px 8% 100px', background: 'radial-gradient(ellipse 120% 90% at 50% 0%, #2c2350 0%, #211c3e 38%, #181429 100%)',
|
|
margin: '20px', borderRadius: '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, margin: '0 auto', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
|
|
<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.5)', fontFamily: 'Sora, sans-serif', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
← Market Insights
|
|
</Link>
|
|
<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: 'Sora, sans-serif', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{ARTICLE.tag}</span>
|
|
</div>
|
|
<h1 style={{ fontSize: 'clamp(36px, 6vw, 88px)', fontWeight: 800, 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.55)', fontFamily: 'Sora, sans-serif', maxWidth: 600, margin: '0 0 40px' }}>
|
|
{ARTICLE.excerpt}
|
|
</p>
|
|
<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 style={{ textAlign: 'left' }}>
|
|
<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: 'Sora, sans-serif' }}>{ARTICLE.date} · {ARTICLE.readTime} read</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Article body */}
|
|
<section style={{ padding: '80px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
|
|
<div style={{ maxWidth: 740, margin: '0 auto' }}>
|
|
{ARTICLE.sections.map((s, i) => (
|
|
<div key={i} style={{ marginBottom: 56 }}>
|
|
<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: 'Sora, sans-serif', margin: 0 }}>
|
|
{s.body}
|
|
</p>
|
|
{i < ARTICLE.sections.length - 1 && (
|
|
<div style={{ height: 1, background: 'rgba(0,0,0,0.06)', marginTop: 56 }} />
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
{/* Pull quote */}
|
|
<blockquote style={{
|
|
margin: '56px 0', padding: '32px 40px',
|
|
borderLeft: '4px solid #f4be28', borderRadius: '0 16px 16px 0',
|
|
background: '#fff8e0',
|
|
}}>
|
|
<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: 'Sora, sans-serif', marginTop: 12 }}>Loyaly.ai, 2026</footer>
|
|
</blockquote>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<section style={{ padding: '80px 8%', background: '#07070d', margin: '0 20px 20px', borderRadius: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 32 }}>
|
|
<div>
|
|
<h2 style={{ fontSize: 'clamp(28px, 3.5vw, 52px)', fontWeight: 800, letterSpacing: '-0.04em', color: '#fff', margin: '0 0 12px', fontFamily: 'Sora, sans-serif' }}>
|
|
Ready to see your store's data?
|
|
</h2>
|
|
<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: '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: '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' }}
|
|
onMouseEnter={e => { (e.currentTarget as HTMLAnchorElement).style.background = '#fff8e0'; (e.currentTarget as HTMLAnchorElement).style.borderColor = 'rgba(244,190,40,0.3)'; }}
|
|
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: 'Sora, sans-serif', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{a.tag}</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>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|