updated pages
This commit is contained in:
R-Bharathraj
@@ -17,15 +17,6 @@ function Reveal({ children, delay = 0 }: { children: React.ReactNode; delay?: nu
|
||||
);
|
||||
}
|
||||
|
||||
const VALUES = [
|
||||
{ n: '01', title: 'Intelligence first', desc: 'Every product decision starts with data, not instinct.' },
|
||||
{ n: '02', title: 'Merchant obsessed', desc: 'We build for the store owner who works 14-hour days.' },
|
||||
{ n: '03', title: 'Radical transparency', desc: 'No black boxes. Our AI explains every recommendation.' },
|
||||
{ n: '04', title: 'Build to last', desc: 'We optimise for long-term impact, not vanity metrics.' },
|
||||
];
|
||||
|
||||
const TEAM: { name: string; role: string; initials: string; color: string }[] = [];
|
||||
|
||||
export default function AboutUsPage() {
|
||||
return (
|
||||
<main style={{ background: '#ffffff', minHeight: '100vh', overflowX: 'hidden' }}>
|
||||
@@ -101,18 +92,18 @@ export default function AboutUsPage() {
|
||||
{[
|
||||
{
|
||||
label: 'Mission', bg: '#07070d', textColor: '#fff', accent: '#f4be28',
|
||||
body: 'To transform physical retail with AI-driven intelligence and meaningful customer engagement.',
|
||||
body: 'Loyaly exists to close the gap between digital discovery and physical purchase. We give local stores the tools to compete, and give shoppers a reason to keep coming back.',
|
||||
},
|
||||
{
|
||||
label: 'Vision', bg: '#f4be28', textColor: '#111', accent: '#c9960f',
|
||||
body: 'To become the leading retail intelligence platform across global markets.',
|
||||
body: 'Empowering every neighbourhood, making exceptional in-store experiences and real rewards accessible to all.',
|
||||
},
|
||||
].map((mv, i) => (
|
||||
<Reveal key={i} delay={i * 0.15}>
|
||||
<div style={{
|
||||
padding: '72px 56px', borderRadius: 24, background: mv.bg,
|
||||
height: '100%', minHeight: 360,
|
||||
display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
|
||||
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', gap: 28,
|
||||
margin: '0 20px 20px', boxSizing: 'border-box',
|
||||
}}>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: mv.accent, fontFamily: 'Sora, sans-serif' }}>{mv.label}</div>
|
||||
@@ -125,35 +116,39 @@ export default function AboutUsPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── VALUES ── */}
|
||||
{/* ── MARKET OPPORTUNITY ── */}
|
||||
<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: 'Sora, sans-serif', marginBottom: 20 }}>How We Work</div>
|
||||
<h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 80px', fontFamily: 'Sora, sans-serif' }}>
|
||||
What we believe.
|
||||
</h2>
|
||||
</Reveal>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{VALUES.map((v, i) => (
|
||||
<Reveal key={i} delay={i * 0.08}>
|
||||
<div className="au-value-row" style={{
|
||||
display: 'grid', gridTemplateColumns: '80px 1fr 1fr',
|
||||
gap: '4vw', alignItems: 'center',
|
||||
padding: '40px 0', borderBottom: '1px solid rgba(0,0,0,0.07)',
|
||||
}}>
|
||||
<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: 'Sora, sans-serif', margin: 0, lineHeight: 1.65 }}>{v.desc}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
<div className="au-market-grid" 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: 'Sora, sans-serif', marginBottom: 24 }}>Market Opportunity</div>
|
||||
<h2 style={{ fontSize: 'clamp(36px, 4.5vw, 68px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 32px', fontFamily: 'Sora, sans-serif' }}>
|
||||
13 Million Stores.<br />One Opportunity.
|
||||
</h2>
|
||||
<p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', margin: 0 }}>
|
||||
India's retail market is one of the largest and fastest-growing in the world. We're building Loyaly for the stores that power it, and the shoppers who love them.
|
||||
</p>
|
||||
</Reveal>
|
||||
<Reveal delay={0.15}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
{[
|
||||
{ val: '13 Million+', label: 'Total Retail Stores Across India' },
|
||||
{ val: '2 Million+', label: 'Organised & High-Footfall Stores' },
|
||||
{ val: '50,000+', label: 'Stores In Our Launch Cities' },
|
||||
].map((m) => (
|
||||
<div key={m.label} style={{ padding: '28px 32px', borderRadius: 20, background: '#faf9f6', border: '1px solid rgba(0,0,0,0.06)' }}>
|
||||
<div style={{ fontSize: 'clamp(26px, 3vw, 40px)', fontWeight: 900, color: '#0a0a0f', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em' }}>{m.val}</div>
|
||||
<div style={{ fontSize: 14, color: 'rgba(0,0,0,0.45)', fontFamily: 'Sora, sans-serif', marginTop: 6 }}>{m.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── TEAM ── */}
|
||||
<TeamCarousel />
|
||||
|
||||
{/* ── CULTURE CLOSE ── */}
|
||||
{/* ── CLOSE: POINT TO THE CREW ── */}
|
||||
<section style={{
|
||||
padding: '160px 8%', background: '#f4be28',
|
||||
margin: '0 20px 20px', borderRadius: 24,
|
||||
@@ -165,21 +160,29 @@ export default function AboutUsPage() {
|
||||
<p style={{ fontSize: 'clamp(32px, 6vw, 90px)', fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.95, color: '#111', margin: '0 0 48px', fontFamily: 'Sora, sans-serif', position: 'relative', zIndex: 2 }}>
|
||||
"We're not just building a product. We're redefining retail."
|
||||
</p>
|
||||
<Link href="/contacts" style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: 10,
|
||||
padding: '18px 44px', background: '#111', color: '#f4be28',
|
||||
fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none',
|
||||
fontFamily: 'Sora, sans-serif', position: 'relative', zIndex: 2,
|
||||
}}>Join Us →</Link>
|
||||
<div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center', position: 'relative', zIndex: 2 }}>
|
||||
<Link href="/solutions_page" style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: 10,
|
||||
padding: '18px 44px', background: '#111', color: '#f4be28',
|
||||
fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none',
|
||||
fontFamily: 'Sora, sans-serif',
|
||||
}}>See Our Products →</Link>
|
||||
<Link href="/contacts" style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: 10,
|
||||
padding: '18px 44px', background: 'rgba(0,0,0,0.08)', color: '#111',
|
||||
fontSize: 16, fontWeight: 700, borderRadius: 100, textDecoration: 'none',
|
||||
fontFamily: 'Sora, sans-serif', border: '1px solid rgba(0,0,0,0.15)',
|
||||
}}>Join Us</Link>
|
||||
</div>
|
||||
</Reveal>
|
||||
</section>
|
||||
|
||||
<style>{`
|
||||
@media (max-width: 860px) {
|
||||
.au-story-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
|
||||
.au-market-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
|
||||
.au-mv-grid { grid-template-columns: 1fr !important; }
|
||||
.au-mv-grid > div > div { padding: 48px 32px !important; min-height: 280px !important; }
|
||||
.au-value-row { grid-template-columns: 1fr !important; gap: 10px !important; padding: 28px 0 !important; }
|
||||
}
|
||||
`}</style>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user