diff --git a/next.config.ts b/next.config.ts index 025ca0d..08237f9 100644 --- a/next.config.ts +++ b/next.config.ts @@ -29,22 +29,22 @@ const nextConfig: NextConfig = { }, { source: '/loyaly_php/use_cases.php', - destination: '/use_cases', + destination: '/for_business', permanent: true, }, { source: '/use_cases.php', - destination: '/use_cases', + destination: '/for_business', permanent: true, }, { source: '/loyaly_php/solutions_page.php', - destination: '/solutions_page', + destination: '/meet_the_agents', permanent: true, }, { source: '/solutions_page.php', - destination: '/solutions_page', + destination: '/meet_the_agents', permanent: true, }, { diff --git a/src/app/about_us/page.tsx b/src/app/about_us/page.tsx index 27967d8..a73aea6 100644 --- a/src/app/about_us/page.tsx +++ b/src/app/about_us/page.tsx @@ -1,6 +1,6 @@ 'use client'; -import React, { useState } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import Link from 'next/link'; import Image from 'next/image'; import { useReveal } from '@/hooks/useReveal'; @@ -28,7 +28,7 @@ export default function AboutUsPage() { 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: '20px', borderRadius: '32px', + margin: 'var(--hero-top) var(--sec-gutter) var(--sec-gap) var(--sec-gutter)', borderRadius: '32px', position: 'relative', overflow: 'hidden', }}> {/* Background photo */} @@ -57,7 +57,7 @@ export default function AboutUsPage() { {/* ── OUR STORY ── */} -
+
Our Story @@ -77,7 +77,7 @@ export default function AboutUsPage() {
{/* ── MISSION & VISION ── */} -
+
{/* Ambient top glow */}
@@ -209,7 +209,7 @@ export default function AboutUsPage() {
{/* ── MARKET OPPORTUNITY ── */} -
+
Market Opportunity @@ -243,7 +243,7 @@ export default function AboutUsPage() { {/* ── CLOSE: POINT TO THE CREW ── */}
@@ -253,7 +253,7 @@ export default function AboutUsPage() { "We're not just building a product. We're redefining retail."

- (null); const { ref, visible } = useReveal(); const count = TEAM_MEMBERS.length; - + // Dimensions matching premium layout const CARD_W = 320; const CARD_GAP = 24; - const STEP = CARD_W + CARD_GAP; + + // The card width (and gap) is responsive via CSS media queries, so the slide + // distance can't be a hard-coded constant. We measure the real pixel offset + // between the first two cards and recompute it on resize — this keeps the + // active card perfectly centered at every breakpoint. + const trackRef = useRef(null); + const [step, setStep] = useState(CARD_W + CARD_GAP); + useEffect(() => { + const measure = () => { + const track = trackRef.current; + if (!track) return; + const cards = track.querySelectorAll('.team-card'); + if (cards.length >= 2) { + const delta = cards[1].offsetLeft - cards[0].offsetLeft; + if (delta > 0) setStep(delta); + } + }; + measure(); + // Re-measure once layout has settled (fonts, media queries, reveal) so the + // slide distance always matches the real rendered card width. + const raf = requestAnimationFrame(() => requestAnimationFrame(measure)); + window.addEventListener('resize', measure); + return () => { + cancelAnimationFrame(raf); + window.removeEventListener('resize', measure); + }; + }, [visible]); const go = (dir: number) => setActive(a => Math.min(count - 1, Math.max(0, a + dir))); @@ -405,10 +431,10 @@ function TeamCarousel() { const indexStr = String(active + 1).padStart(2, '0'); return ( -
} style={{ +
} className="team-section" style={{ padding: '110px 0 120px', background: '#07070d', - margin: '0 20px 20px', + margin: '0 var(--sec-gutter) var(--sec-gap)', borderRadius: 24, overflow: 'hidden', position: 'relative' @@ -602,8 +628,10 @@ function TeamCarousel() { {/* Right Column: Carousel Stage */}
{/* Main viewport */} -
+
@@ -647,7 +675,7 @@ function TeamCarousel() { }} > {/* Top Left Number Tag */} -
+
{/* Prev button */}