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

updated image path

Browse Source
This commit is contained in:
R-Bharathraj
2026-07-14 16:43:51 +05:30
parent 6c41c97d44
commit 89b0089457
300 changed files with 66 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Footer.tsx
View File

@@ -124,7 +124,7 @@ export default function Footer() {
{/* logo-dark.png is 250x150 with the wordmark in the middle strip (y 58–107);
an overflow box crops the transparent top/bottom padding so it fills at size */}
<span className="ly-footer-logo" style={{ display: 'block', width: 300, maxWidth: '100%', aspectRatio: '250 / 58', overflow: 'hidden' }}>
<Image src="/images/logo-dark.png" alt="Loyaly.AI" width={250} height={150} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 55%', display: 'block' }} />
<Image src="/assets/images/logo-dark.png" alt="Loyaly.AI" width={250} height={150} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 55%', display: 'block' }} />
</span>
</Link>
<p style={{ fontSize: 14, lineHeight: 1.75, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif', margin: '0 0 28px', maxWidth: 280 }}>

4
src/components/Header.tsx
View File

@@ -133,7 +133,7 @@ export default function Header() {
{/* Panel header */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Image
src="/images/loyalyai.png"
src="/assets/images/loyalyai.png"
alt="Loyaly.AI"
width={140}
height={40}
@@ -261,7 +261,7 @@ export default function Header() {
<div style={{ flexShrink: 0, flex: 1, minWidth: 120 }}>
<Link href="/" aria-label="Loyaly.AI home" style={{ display: 'inline-flex', alignItems: 'center', textDecoration: 'none' }}>
<Image
src={transparentHeader ? '/images/logo-dark.png' : '/images/loyalyai.png'}
src={transparentHeader ? '/assets/images/logo-dark.png' : '/assets/images/loyalyai.png'}
alt="Loyaly.AI"
width={460}
height={138}

2
src/components/Preloader.tsx
View File

@@ -81,7 +81,7 @@ export default function Preloader() {
>
<div ref={logoRef} className="preloader-logo">
<Image
src="/images/loyalyai-logo.png"
src="/assets/images/loyalyai-logo.png"
alt="Loyaly.AI"
width={110}
height={110}

4
src/components/for-people/DiscoverDealsSection.tsx
View File

@@ -54,7 +54,7 @@ export default function DiscoverDealsSection() {
<section ref={panelRef} className="fp-panel" style={{ background: '#08080f' }}>
{/* Background photo */}
<Image src="/images/stock/discover.png" alt="" fill style={{ objectFit: 'cover', opacity: 0.72, zIndex: 0 }} />
<Image src="/assets/images/stock/discover.png" alt="" fill style={{ objectFit: 'cover', opacity: 0.72, zIndex: 0 }} />
<div style={{
position: 'absolute', inset: 0, zIndex: 0,
background: 'linear-gradient(100deg, rgba(8,8,15,0.72) 0%, rgba(8,8,15,0.32) 42%, rgba(8,8,15,0.12) 70%, rgba(8,8,15,0.24) 100%), linear-gradient(180deg, rgba(8,8,15,0) 0%, rgba(8,8,15,0.28) 90%)',
@@ -102,7 +102,7 @@ export default function DiscoverDealsSection() {
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src="/images/stock/discover.gif"
src="/assets/images/stock/discover.gif"
alt="Discover deals in the LytsUp app"
style={{ position: 'relative', zIndex: 1, width: '100%', aspectRatio: '1465 / 1074', objectFit: 'cover', borderRadius: 20, display: 'block' }}
/>

2
src/components/for-people/FinalCTASection.tsx
View File

@@ -195,7 +195,7 @@ export default function FinalCTASection() {
{/* Lyts logo */}
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src="/images/lyts.png"
src="/assets/images/lyts.png"
alt="Lyts"
style={{ height: 88, width: 'auto', display: 'block', margin: '0 auto 28px', objectFit: 'contain' }}
/>

2
src/components/for-people/HeroSection.tsx
View File

@@ -32,7 +32,7 @@ export default function HeroSection() {
<section className="fp-panel" style={{ background: 'radial-gradient(ellipse 100% 85% at 78% 30%, #3a2b66 0%, #2a2150 45%, #1c1838 100%)' }}>
{/* Background photo */}
<Image src="/images/stock/app-hero.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9, zIndex: 0 }} />
<Image src="/assets/images/stock/app-hero.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9, zIndex: 0 }} />
<div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 90% 80% at 78% 42%, rgba(58,43,102,0.15) 0%, rgba(42,33,80,0.35) 55%, rgba(28,24,56,0.55) 100%)', zIndex: 0 }} />
<div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 55% 65% at 30% 48%, rgba(18,14,30,0.7) 0%, rgba(18,14,30,0.3) 60%, transparent 100%)', zIndex: 0 }} />

2
src/components/for-people/LiveMoreSection.tsx
View File

@@ -40,7 +40,7 @@ export default function LiveMoreSection() {
{/* Left — phone mockup: lifestyle moments feed */}
<div ref={phoneRef} style={{ display: 'flex', justifyContent: 'center', opacity: 0, width: '100%' }}>
<PhoneMockupImage
src="/For_people/03_live-cropped.png"
src="/assets/For_people/03_live-cropped.png"
alt="LytsUp Live More screen showing today's lifestyle moments"
floatClassName="live-phone-shell"
aspectRatio={1608 / 3088}

2
src/components/for-people/LytsUniverseSection.tsx
View File

@@ -83,7 +83,7 @@ export default function LytsUniverseSection() {
{/* Right — phone mockup: Lytian profile + India lighting up */}
<div ref={phoneRef} style={{ display: 'flex', justifyContent: 'center', opacity: 0, width: '100%' }}>
<PhoneMockupImage
src="/For_people/04_Lyts_Universe-cropped.png"
src="/assets/For_people/04_Lyts_Universe-cropped.png"
alt="LytsUp Lyts Universe screen showing Lytian profile and live city feed"
floatClassName="universe-phone-shell"
aspectRatio={1596 / 3120}

2
src/components/for-people/PhoneMockup.tsx
View File

@@ -59,7 +59,7 @@ export function MapIcon() {
export function HeartLogoIcon({ size = 16 }: { size?: number; active?: boolean }) {
return (
<Image
src="/images/loyalyai-logo.png"
src="/assets/images/loyalyai-logo.png"
alt=""
width={32}
height={32}

2
src/components/for-people/SpendAnywhereSection.tsx
View File

@@ -80,7 +80,7 @@ export default function SpendAnywhereSection() {
{/* Right — phone mockup: where to spend */}
<div ref={phoneRef} style={{ display: 'flex', justifyContent: 'center', opacity: 0, width: '100%' }}>
<PhoneMockupImage
src="/For_people/02_spend-cropped.png"
src="/assets/For_people/02_spend-cropped.png"
alt="LytsUp Spend screen showing redeem-at categories"
floatClassName="spa-phone-shell"
aspectRatio={1516 / 3040}

2
src/components/home/LytsUpSection.tsx
View File

@@ -405,7 +405,7 @@ export default function LytsUpSection({ isLoaded = true }: LytsUpSectionProps) {
border: '2.5px solid #171512', borderRadius: 16, boxShadow: '4px 4px 0 0 #171512',
}}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src="/images/lyts.png" alt="LytsUp" style={{ height: 32, width: 'auto', display: 'block', objectFit: 'contain' }} />
<img src="/assets/images/lyts.png" alt="LytsUp" style={{ height: 32, width: 'auto', display: 'block', objectFit: 'contain' }} />
</span>
</div>

18
src/components/home/ProblemSection.tsx
View File

@@ -20,7 +20,7 @@ const DARK_CARDS = [
{
title: 'No Compelling Reason',
description: 'No compelling reason for customers to visit your store',
image: '/problems/4.png',
image: '/assets/problems/4.png',
icon: (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="10" /><line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
@@ -30,7 +30,7 @@ const DARK_CARDS = [
{
title: 'Margin Erosion',
description: 'Traditional discounts erode profit margins',
image: '/problems/5.png',
image: '/assets/problems/5.png',
icon: (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<polyline points="23 18 13.5 8.5 8.5 13.5 1 6" /><polyline points="17 18 23 18 23 12" />
@@ -40,7 +40,7 @@ const DARK_CARDS = [
{
title: 'Wasted Ad Spend',
description: 'Digital ads rarely convert into store footfall',
image: '/problems/6.png',
image: '/assets/problems/6.png',
icon: (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<path d="M11 5L6 9H2v6h4l5 4V5z" /><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" />
@@ -50,7 +50,7 @@ const DARK_CARDS = [
{
title: 'No Real-Time Signals',
description: 'No real-time connection between online activity and offline shopping',
image: '/problems/7.png',
image: '/assets/problems/7.png',
wide: true,
icon: (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
@@ -61,7 +61,7 @@ const DARK_CARDS = [
{
title: 'Customer Amnesia',
description: 'Customers forget about brands between visits',
image: '/problems/8.png',
image: '/assets/problems/8.png',
icon: (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="10" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /><line x1="12" y1="17" x2="12.01" y2="17" />
@@ -136,7 +136,7 @@ export default function ProblemSection({ isLoaded = true }: ProblemSectionProps)
<div>
<div className="problem-eyebrow" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, marginBottom: 22, padding: '6px 16px 6px 8px', borderRadius: 100, background: '#ffffff', border: `1px solid ${accent}2a`, boxShadow: '0 1px 2px rgba(0,0,0,0.03), 0 12px 30px -18px rgba(23,21,18,0.2)' }}>
<span style={{ width: 24, height: 24, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: `${accent}0d` }}>
<img src="/images/loyalyai-logo.png" alt="" width={15} height={15} style={{ display: 'block', objectFit: 'contain' }} />
<img src="/assets/images/loyalyai-logo.png" alt="" width={15} height={15} style={{ display: 'block', objectFit: 'contain' }} />
</span>
<span style={{ color: accent, fontSize: 12, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', fontFamily: 'Sora, sans-serif' }}>The Problem</span>
</div>
@@ -199,7 +199,7 @@ export default function ProblemSection({ isLoaded = true }: ProblemSectionProps)
zIndex: 1,
}}>
<Image
src="/problems/1.png"
src="/assets/problems/1.png"
alt="68%+"
width={340}
height={340}
@@ -251,7 +251,7 @@ export default function ProblemSection({ isLoaded = true }: ProblemSectionProps)
zIndex: 1,
}}>
<Image
src="/problems/2.png"
src="/assets/problems/2.png"
alt="0+"
width={340}
height={340}
@@ -303,7 +303,7 @@ export default function ProblemSection({ isLoaded = true }: ProblemSectionProps)
zIndex: 1,
}}>
<Image
src="/problems/3.png"
src="/assets/problems/3.png"
alt="5+"
width={340}
height={340}

2
src/components/home/ProductsSection.tsx
View File

@@ -527,7 +527,7 @@ export default function ProductsSection({ isLoaded = false }: ProductsSectionPro
<div style={{ maxWidth: 520 }}>
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, marginBottom: 20, padding: '6px 16px 6px 8px', borderRadius: 100, background: '#ffffff', border: '1px solid rgba(244,190,40,0.3)', boxShadow: '0 1px 2px rgba(0,0,0,0.03), 0 12px 30px -18px rgba(23,21,18,0.2)' }}>
<span style={{ width: 24, height: 24, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(244,190,40,0.15)' }}>
<img src="/images/loyalyai-logo.png" alt="" width={15} height={15} style={{ display: 'block', objectFit: 'contain' }} />
<img src="/assets/images/loyalyai-logo.png" alt="" width={15} height={15} style={{ display: 'block', objectFit: 'contain' }} />
</span>
<span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#8a5a14', fontFamily: 'Sora, sans-serif' }}>Platform</span>
<span className="pv-live-dot" style={{ width: 6, height: 6, borderRadius: '50%', background: '#4ade80', display: 'block', marginLeft: 2 }} />

18
src/components/home/ShiftSection.tsx
View File

@@ -21,19 +21,19 @@ const GREEN_CARDS = [
value: '3.4x',
label: 'MORE RETURN VISITS',
description: 'Businesses using LYTs see customers come back more often and stay engaged longer.',
image: '/shift/1.png',
image: '/assets/shift/1.png',
},
{
value: '20%',
label: 'MORE CUSTOMER ENGAGEMENT',
description: 'AI-powered LYT experiences turn everyday shopping into something worth coming back for.',
image: '/shift/2.png',
image: '/assets/shift/2.png',
},
{
value: '5',
label: 'LYT EXPERIENCES EVERY DAY',
description: 'From check-ins to surprise drops, there is always a new way to earn LYTs.',
image: '/shift/3.png',
image: '/assets/shift/3.png',
},
];
@@ -49,7 +49,7 @@ const BLACK_CARDS = [
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
),
image: '/shift/4.png',
image: '/assets/shift/4.png',
},
{
title: 'LYT Challenges',
@@ -63,7 +63,7 @@ const BLACK_CARDS = [
<rect x="2" y="6" width="20" height="12" rx="3"></rect>
</svg>
),
image: '/shift/5.png',
image: '/assets/shift/5.png',
},
{
title: 'LYT Drops',
@@ -74,7 +74,7 @@ const BLACK_CARDS = [
<line x1="7" y1="7" x2="7.01" y2="7"></line>
</svg>
),
image: '/shift/6.png',
image: '/assets/shift/6.png',
},
{
title: 'Discover Nearby',
@@ -85,7 +85,7 @@ const BLACK_CARDS = [
<circle cx="12" cy="10" r="3"></circle>
</svg>
),
image: '/shift/7.png',
image: '/assets/shift/7.png',
},
{
title: 'Get LIT',
@@ -95,7 +95,7 @@ const BLACK_CARDS = [
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
),
image: '/shift/8.png',
image: '/assets/shift/8.png',
},
];
@@ -173,7 +173,7 @@ export default function ShiftSection({ isLoaded = true }: ShiftSectionProps) {
<div>
<div className="shift-eyebrow" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, marginBottom: 22, padding: '6px 16px 6px 8px', borderRadius: 100, background: '#ffffff', border: `1px solid ${accent}44`, boxShadow: '0 1px 2px rgba(0,0,0,0.03), 0 12px 30px -18px rgba(23,21,18,0.2)' }}>
<span style={{ width: 24, height: 24, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: `${accent}1a` }}>
<img src="/images/loyalyai-logo.png" alt="" width={15} height={15} style={{ display: 'block', objectFit: 'contain' }} />
<img src="/assets/images/loyalyai-logo.png" alt="" width={15} height={15} style={{ display: 'block', objectFit: 'contain' }} />
</span>
<span style={{ color: '#8a5a14', fontSize: 12, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', fontFamily: 'Sora, sans-serif' }}>The Shift</span>
</div>

8
src/components/home/TheLoop.tsx
View File

@@ -45,10 +45,10 @@ const IMPACTS = [
];
const IMAGE_PATHS = [
'/retail_cycle/01_Earn_online.png',
'/retail_cycle/02_unlock_deals.png',
'/retail_cycle/03_discover+visits.png',
'/retail_cycle/04_redeem+repeat.png',
'/assets/retail_cycle/01_Earn_online.png',
'/assets/retail_cycle/02_unlock_deals.png',
'/assets/retail_cycle/03_discover+visits.png',
'/assets/retail_cycle/04_redeem+repeat.png',
];
export default function TheLoop() {

2
src/components/home/WhatWeDo.tsx
View File

@@ -227,7 +227,7 @@ export default function WhatWeDo({ isLoaded = false }: WhatWeDoProps) {
zIndex: 2,
}}
>
<AnimatedDarkBg variant="amber" bgImage="/images/stock/one_platform_bg.png" bgImageAlt="" />
<AnimatedDarkBg variant="amber" bgImage="/assets/images/stock/one_platform_bg.png" bgImageAlt="" />
{/* Header */}
<div className="wwd-header relative z-10 text-center max-w-4xl mx-auto mb-16 sm:mb-20 flex flex-col items-center">

6
src/components/home/heroCarouselData.ts
View File

@@ -25,7 +25,7 @@ export const HERO_SLIDES: HeroSlideData[] = [
ctaHref: '/contacts',
secondaryLabel: 'See How It Works',
secondaryHref: '/solutions_page',
image: '/home_hero/home_hero_01.png',
image: '/assets/home_hero/home_hero_01.png',
imageAlt: 'Shoppers walking through a modern premium shopping mall',
},
{
@@ -39,7 +39,7 @@ export const HERO_SLIDES: HeroSlideData[] = [
ctaHref: '/for_people',
secondaryLabel: 'Get Early Access',
secondaryHref: '/contacts',
image: '/home_hero/home_hero_02.png',
image: '/assets/home_hero/home_hero_02.png',
imageAlt: 'A shopper viewing the Loyaly app splash screen on their phone inside a mall',
},
{
@@ -53,7 +53,7 @@ export const HERO_SLIDES: HeroSlideData[] = [
ctaHref: '/solutions_page',
secondaryLabel: 'Meet the Tools',
secondaryHref: '/solutions_page',
image: '/home_hero/home_hero_03.png',
image: '/assets/home_hero/home_hero_03.png',
imageAlt: 'Aerial view of a large, crowded luxury shopping mall atrium',
},
];