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

Update pages, components, and add stock images for visual layout enhancements

Browse Source
This commit is contained in:
R-Bharathraj
2026-06-30 13:36:16 +05:30
parent 9b93fa0d07
commit 7175adb0db
36 changed files with 340 additions and 604 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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';
@@ -32,28 +33,41 @@ export default function AboutUsPage() {
{/* ── HERO ── */}
<section style={{
minHeight: '100vh', background: '#07070d',
minHeight: '100vh', background: 'radial-gradient(ellipse 120% 90% at 22% 0%, #3a2b5e 0%, #251c40 38%, #1a1530 100%)',
display: 'flex', alignItems: 'center',
padding: '120px 8% 80px',
margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
margin: '0 20px 20px', borderRadius: '0 0 32px 32px',
position: 'relative', overflow: 'hidden',
}}>
{/* Background photo */}
<Image src="/images/stock/about-team.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9 }} />
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,21,48,0.1) 0%, rgba(26,21,48,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: '-12%', right: '-8%', width: 520, height: 520, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.22) 0%, transparent 70%)', filter: 'blur(10px)', pointerEvents: 'none' }} />
<div style={{ position: 'absolute', bottom: '-15%', left: '-10%', width: 460, height: 460, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
{/* Big ghost text */}
<div style={{
position: 'absolute', top: '50%', left: '50%',
transform: 'translate(-50%,-50%)',
fontSize: 'clamp(120px, 22vw, 320px)', fontWeight: 900,
fontFamily: 'Sora, sans-serif', color: 'transparent',
WebkitTextStroke: '1px rgba(244,190,40,0.06)',
WebkitTextStroke: '1px rgba(244,190,40,0.08)',
letterSpacing: '-0.06em', lineHeight: 1,
whiteSpace: 'nowrap', userSelect: 'none',
pointerEvents: 'none', zIndex: 0,
}}>LOYALY</div>
<div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: '6vw' }}>
<div style={{ maxWidth: 680 }}>
<div data-gsap="badge" 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 data-gsap="line" style={{ width: 32, height: 1, background: '#f4be28', display: 'block' }} />Meet the Crew
<div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
<div style={{ maxWidth: 760 }}>
<div data-gsap="badge" style={{
fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 32,
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' }} />Meet the Crew
</div>
<h1 data-gsap="heading" style={{
fontSize: 'clamp(52px, 9vw, 140px)', fontWeight: 900,
@@ -63,51 +77,10 @@ export default function AboutUsPage() {
The People<br />
<span style={{ color: '#f4be28' }}>Behind</span> Loyaly.
</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: 560, 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: 560, margin: '0 auto' }}>
We're not just building a product. We're redefining retail — one store at a time.
</p>
</div>
{/* Company DNA widget */}
<div className="pw-widget-col" style={{ flexShrink: 0, width: 320 }}>
<div style={{
borderRadius: 24, padding: '28px 24px',
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)',
}}>
{/* Brand header */}
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
<div style={{ width: 42, height: 42, borderRadius: 13, background: 'rgba(244,190,40,0.12)', border: '1px solid rgba(244,190,40,0.28)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, color: '#f4be28' }}>✦</div>
<div>
<div style={{ fontSize: 15, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif' }}>Loyaly.ai</div>
<div style={{ fontSize: 10, color: '#f4be28', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase' }}>AI Retail Platform</div>
</div>
</div>
{/* Stats */}
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 20 }}>
{[['2024', 'Founded'], ['12+', 'Cities'], ['20+', 'Team']].map(([v, l]) => (
<div key={l} style={{ background: 'rgba(255,255,255,0.04)', borderRadius: 14, padding: '14px 8px', textAlign: 'center', border: '1px solid rgba(255,255,255,0.07)' }}>
<div style={{ fontSize: 20, fontWeight: 900, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>{v}</div>
<div style={{ fontSize: 10, color: 'rgba(255,255,255,0.38)', fontFamily: 'Manrope, sans-serif', marginTop: 4 }}>{l}</div>
</div>
))}
</div>
{/* Values */}
<div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 18 }}>
{['Intelligence first', 'Merchant obsessed', 'Build to last'].map((v, i) => (
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', borderRadius: 12, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)' }}>
<span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', flexShrink: 0 }} />
<span style={{ fontSize: 13, color: 'rgba(255,255,255,0.68)', fontFamily: 'Manrope, sans-serif', fontWeight: 600 }}>{v}</span>
</div>
))}
</div>
{/* Mission */}
<div style={{ padding: '14px 16px', borderRadius: 14, background: 'rgba(244,190,40,0.06)', border: '1px solid rgba(244,190,40,0.2)' }}>
<div style={{ fontSize: 10, fontWeight: 700, color: '#f4be28', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>Mission</div>
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Manrope, sans-serif', lineHeight: 1.65 }}>Transform physical retail with AI-driven intelligence and meaningful customer engagement.</div>
</div>
</div>
</div>
</div>
</section>
@@ -115,16 +88,16 @@ export default function AboutUsPage() {
<section style={{ padding: '140px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
<div 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: 'Manrope, sans-serif', marginBottom: 24 }}>Our Story</div>
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 24 }}>Our Story</div>
<h2 style={{ fontSize: 'clamp(36px, 4.5vw, 68px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 32px', fontFamily: 'Sora, sans-serif' }}>
We started with<br />a simple idea.
</h2>
</Reveal>
<Reveal delay={0.15}>
<p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Manrope, sans-serif', margin: '0 0 32px' }}>
<p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', margin: '0 0 32px' }}>
Offline retail deserves the same intelligence as online. A store owner in Coimbatore shouldn't be flying blind while an e-commerce algorithm knows exactly what every user wants.
</p>
<p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Manrope, sans-serif', margin: 0 }}>
<p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', margin: 0 }}>
Today, we're building a connected ecosystem where businesses grow smarter and customers shop better — together.
</p>
</Reveal>
@@ -151,7 +124,7 @@ export default function AboutUsPage() {
display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
margin: '0 20px 20px', boxSizing: 'border-box',
}}>
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: mv.accent, fontFamily: 'Manrope, sans-serif' }}>{mv.label}</div>
<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' }}>
{mv.body}
</p>
@@ -164,7 +137,7 @@ export default function AboutUsPage() {
{/* ── VALUES ── */}
<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: 'Manrope, sans-serif', marginBottom: 20 }}>How We Work</div>
<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: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 80px', fontFamily: 'Sora, sans-serif' }}>
What we believe.
</h2>
@@ -179,7 +152,7 @@ export default function AboutUsPage() {
}}>
<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: 'Manrope, sans-serif', margin: 0, lineHeight: 1.65 }}>{v.desc}</p>
<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>
))}
@@ -205,7 +178,7 @@ export default function AboutUsPage() {
display: 'inline-flex', alignItems: 'center', gap: 10,
padding: '18px 44px', background: '#111', color: '#f4be28',
fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none',
fontFamily: 'Manrope, sans-serif', position: 'relative', zIndex: 2,
fontFamily: 'Sora, sans-serif', position: 'relative', zIndex: 2,
}}>Join Us →</Link>
</Reveal>
</section>
@@ -237,11 +210,11 @@ function TeamCarousel() {
{/* Header */}
<div style={{ textAlign: 'center', marginBottom: 72, position: 'relative', zIndex: 2, padding: '0 8%' }}>
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 16 }}>The Team</div>
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 16 }}>The Team</div>
<h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: '0 0 16px', fontFamily: 'Sora, sans-serif' }}>
Builders. Thinkers.<br />Retail obsessives.
</h2>
<p style={{ fontSize: 15, color: 'rgba(255,255,255,0.35)', fontFamily: 'Manrope, sans-serif', margin: 0 }}>
<p style={{ fontSize: 15, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif', margin: 0 }}>
Profiles coming soon — we&apos;re still busy building the future of retail.
</p>
</div>
@@ -325,7 +298,7 @@ function TeamCarousel() {
transition: 'opacity 0.4s ease',
}}>
<div style={{ fontSize: 17, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em', marginBottom: 4 }}>{member.name}</div>
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Manrope, sans-serif' }}>{member.role}</div>
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif' }}>{member.role}</div>
</div>
{/* Gold dot */}