Update pages, components, and add stock images for visual layout enhancements
This commit is contained in:
R-Bharathraj
@@ -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',
|
||||
margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
|
||||
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 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={{ maxWidth: 680 }}>
|
||||
<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 }}>
|
||||
<span style={{ width: 32, height: 1, background: '#f4be28', display: 'block' }} />Market Insights
|
||||
<div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
|
||||
<div style={{ maxWidth: 720 }}>
|
||||
<div style={{
|
||||
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'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: 12, color: 'rgba(255,255,255,0.3)', fontFamily: 'Manrope, 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, 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: 'Sora, sans-serif' }}>{featured.readTime} read</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>
|
||||
<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 }}>
|
||||
<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: '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: 12, color: 'rgba(0,0,0,0.3)', fontFamily: 'Manrope, sans-serif' }}>{article.readTime}</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: '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>
|
||||
|
||||
Reference in New Issue
Block a user