Loyaly/loyalyweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated sections design and content

Browse Source
This commit is contained in:
R-Bharathraj
2026-07-11 12:38:33 +05:30
parent cba47aea2b
commit 03ed08d7dd
24 changed files with 907 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/app/about_us/page.tsx
View File

@@ -87,27 +87,65 @@ export default function AboutUsPage() {
</section>
{/* ── MISSION & VISION ── */}
<section style={{ padding: '0 8% 20px', background: '#ffffff' }}>
<div className="au-mv-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, alignItems: 'stretch' }}>
<section style={{ position: 'relative', overflow: 'hidden', padding: 'clamp(60px, 9vh, 104px) 8%', background: '#07070d', margin: '0 20px 20px', borderRadius: 28 }}>
{/* Ambient top glow */}
<div aria-hidden style={{ position: 'absolute', top: '-24%', left: '50%', transform: 'translateX(-50%)', width: 680, height: 420, background: 'radial-gradient(ellipse, rgba(244,190,40,0.12) 0%, transparent 70%)', pointerEvents: 'none' }} />
{/* Section header */}
<div style={{ position: 'relative', zIndex: 1, textAlign: 'center', maxWidth: 640, margin: '0 auto clamp(44px, 6vh, 68px)' }}>
<h2 style={{ margin: 0, fontSize: 'clamp(30px, 4.5vw, 60px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1, color: '#fff', fontFamily: 'Sora, sans-serif' }}>
What drives <span style={{ color: '#f4be28' }}>everything</span> we do.
</h2>
</div>
<div className="au-mv-grid" style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'stretch' }}>
{[
{
label: 'Mission', bg: '#07070d', textColor: '#fff', accent: '#f4be28',
label: 'Mission', emoji: '🎯', bg: 'linear-gradient(160deg, #ffffff 0%, #fdf4e2 100%)', textColor: '#171512',
border: 'rgba(244,190,40,0.45)',
pillBg: 'rgba(244,190,40,0.14)', pillText: '#8a5a14', pillBorder: 'rgba(244,190,40,0.5)',
orb1: 'rgba(244,190,40,0.20)', orb2: 'rgba(255,152,0,0.14)',
gfx: 'rgba(244,190,40,0.38)',
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: 'Empowering every neighbourhood, making exceptional in-store experiences and real rewards accessible to all.',
label: 'Vision', emoji: '🔮', bg: 'linear-gradient(160deg, #fff7e2 0%, #ffe6a8 100%)', textColor: '#171512',
border: 'rgba(244,190,40,0.55)',
pillBg: '#f4be28', pillText: '#171512', pillBorder: 'rgba(201,150,15,0.6)',
orb1: 'rgba(255,255,255,0.7)', orb2: 'rgba(244,190,40,0.3)',
gfx: 'rgba(201,150,15,0.32)',
body: 'Empowering every neighbourhood, making exceptional in-store experiences and real Lyts accessible to all.',
},
].map((mv, i) => (
<Reveal key={i} delay={i * 0.15}>
<div style={{
padding: '72px 56px', borderRadius: 24, background: mv.bg,
<div className="au-mv-card" style={{
position: 'relative',
padding: 'clamp(40px, 4vw, 60px)', borderRadius: 28, background: mv.bg,
border: `1px solid ${mv.border}`,
boxShadow: '0 24px 60px -30px rgba(23,21,18,0.22)',
height: '100%', minHeight: 360,
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', gap: 28,
margin: '0 20px 20px', boxSizing: 'border-box',
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', gap: 24,
margin: 0, boxSizing: 'border-box',
}}>
<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' }}>
{/* Animated background orbs (clipped to the card) */}
<div className="au-mv-bg" aria-hidden style={{ position: 'absolute', inset: 0, borderRadius: 28, overflow: 'hidden', pointerEvents: 'none', zIndex: 0 }}>
<span className="au-mv-orb au-mv-orb-1" style={{ position: 'absolute', top: '-18%', left: '-12%', width: 280, height: 280, borderRadius: '50%', background: `radial-gradient(circle, ${mv.orb1} 0%, transparent 70%)` }} />
<span className="au-mv-orb au-mv-orb-2" style={{ position: 'absolute', bottom: '-20%', right: '-10%', width: 240, height: 240, borderRadius: '50%', background: `radial-gradient(circle, ${mv.orb2} 0%, transparent 70%)` }} />
</div>
{/* Pop-out corner sticker */}
<span aria-hidden style={{ position: 'absolute', top: -22, right: -14, fontSize: 46, transform: 'rotate(12deg)', zIndex: 2 }}>{mv.emoji}</span>
{/* Tilted sticker-pill label */}
<span style={{
position: 'relative', zIndex: 1,
display: 'inline-flex', alignItems: 'center', gap: 7, alignSelf: 'flex-start',
transform: 'rotate(-2deg)', padding: '8px 16px', borderRadius: 100,
background: mv.pillBg, color: mv.pillText, border: `1.5px solid ${mv.pillBorder}`,
fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', fontFamily: 'Sora, sans-serif',
}}>{mv.emoji} {mv.label}</span>
<p style={{ position: 'relative', zIndex: 1, fontSize: 'clamp(21px, 2.4vw, 34px)', fontWeight: 500, lineHeight: 1.3, color: mv.textColor, fontFamily: 'Sora, sans-serif', margin: 0, letterSpacing: '-0.015em' }}>
{mv.body}
</p>
</div>
@@ -178,6 +216,46 @@ export default function AboutUsPage() {
</section>
<style>{`
/* Animated gradient glow ring behind each card */
.au-mv-card::before {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
background: linear-gradient(130deg, #f4be28, #ff9f1c, #f4be28);
background-size: 220% 220%;
z-index: -1;
filter: blur(11px);
opacity: 0.45;
animation: auMvGlow 7s ease-in-out infinite;
}
@keyframes auMvGlow {
0%, 100% { background-position: 0% 50%; opacity: 0.35; }
50% { background-position: 100% 50%; opacity: 0.6; }
}
.au-mv-orb { filter: blur(26px); will-change: transform; }
.au-mv-orb-1 { animation: auMvDrift1 10s ease-in-out infinite; }
.au-mv-orb-2 { animation: auMvDrift2 13s ease-in-out infinite; }
@keyframes auMvDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(44px, -34px) scale(1.2); } }
@keyframes auMvDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-38px, 30px) scale(1.16); } }
.au-mv-gfx { animation: auMvGfxFloat 16s ease-in-out infinite; }
@keyframes auMvGfxFloat {
0%, 100% { transform: translate(0, 0) scale(0.82); }
25% { transform: translate(-34px, -22px) scale(1); }
50% { transform: translate(-14px, -48px) scale(1.22); }
75% { transform: translate(-42px, -14px) scale(1); }
}
.au-mv-ringspin { transform-box: fill-box; transform-origin: center; animation: auMvSpin 12s linear infinite; }
@keyframes auMvSpin { to { transform: rotate(360deg); } }
.au-mv-ringpulse { transform-box: fill-box; transform-origin: center; animation: auMvRingPulse 4.5s ease-in-out infinite; }
@keyframes auMvRingPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.65; } }
.au-mv-dot { transform-box: fill-box; transform-origin: center; animation: auMvDotPulse 1.8s ease-in-out infinite; }
.au-mv-dot-2 { animation-delay: 0.6s; }
.au-mv-dot-3 { animation-delay: 1.2s; }
@keyframes auMvDotPulse { 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.9); opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) {
.au-mv-orb-1, .au-mv-orb-2, .au-mv-card::before, .au-mv-gfx, .au-mv-ringspin, .au-mv-ringpulse, .au-mv-dot { animation: none !important; }
}
@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; }