259 lines
14 KiB
TypeScript
259 lines
14 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import Link from 'next/link';
|
||
import Image from 'next/image';
|
||
|
||
const NAV = [
|
||
{
|
||
title: 'Product',
|
||
links: [
|
||
{ label: 'For People', href: '/for_people' },
|
||
{ label: 'For Business', href: '/use_cases' },
|
||
{ label: 'Meet the Agents', href: '/solutions_page' },
|
||
],
|
||
},
|
||
{
|
||
title: 'Platform',
|
||
links: [
|
||
{ label: 'Behavision AI', href: '/use_cases' },
|
||
{ label: 'SpendSense AI', href: '/use_cases' },
|
||
{ label: 'Dyscount AI', href: '/use_cases' },
|
||
],
|
||
},
|
||
{
|
||
title: 'Company',
|
||
links: [
|
||
{ label: 'About us', href: '/about_us' },
|
||
{ label: 'Market Insights', href: '/blog_main' },
|
||
{ label: 'Contact Us', href: '/contacts' },
|
||
],
|
||
},
|
||
];
|
||
|
||
const SOCIALS = [
|
||
{
|
||
label: 'LinkedIn', href: 'https://www.linkedin.com/company/loyaly-ai',
|
||
icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M19.7 3H4.3C3.58 3 3 3.58 3 4.3v15.4C3 20.42 3.58 21 4.3 21h15.4c.72 0 1.3-.58 1.3-1.3V4.3C21 3.58 20.42 3 19.7 3zM8.34 18.34H5.67V9.75h2.67v8.59zM7 8.57a1.55 1.55 0 1 1 0-3.1 1.55 1.55 0 0 1 0 3.1zm11.34 9.77h-2.67v-4.18c0-1-.02-2.28-1.39-2.28-1.39 0-1.6 1.09-1.6 2.21v4.25h-2.67V9.75h2.56v1.17h.04c.36-.68 1.23-1.39 2.53-1.39 2.7 0 3.2 1.78 3.2 4.09v4.72z"/></svg>,
|
||
},
|
||
{
|
||
label: 'X / Twitter', href: 'https://twitter.com/loyalyai',
|
||
icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M13.98 10.62 20.54 3h-1.55l-5.7 6.62L8.74 3H3.5l6.88 10.01L3.5 21h1.55l6.01-6.99L15.87 21h5.24l-7.13-10.38zm-2.13 2.47-.7-1-5.54-7.93H8l4.47 6.4.7 1 5.82 8.32h-2.39l-4.74-6.79z"/></svg>,
|
||
},
|
||
{
|
||
label: 'Instagram', href: 'https://instagram.com/loyalyai',
|
||
icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>,
|
||
},
|
||
{
|
||
label: 'YouTube', href: 'https://www.youtube.com/@loyalyai',
|
||
icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M21.8 8s-.2-1.38-.8-1.99c-.76-.8-1.61-.8-2-.85C16.2 5 12 5 12 5s-4.2 0-7 .17c-.39.05-1.24.05-2 .85C2.4 6.62 2.2 8 2.2 8S2 9.62 2 11.24v1.52c0 1.62.2 3.24.2 3.24s.2 1.38.8 1.99c.76.8 1.76.77 2.2.85C6.8 19 12 19.03 12 19.03s4.2-.01 7-.22c.39-.05 1.24-.05 2-.85.6-.61.8-1.99.8-1.99S22 14.38 22 12.76v-1.52C22 9.62 21.8 8 21.8 8zm-11.87 6.59V8.79l5.4 2.82-5.4 2.98z"/></svg>,
|
||
},
|
||
];
|
||
|
||
export default function Footer() {
|
||
const [showScroll, setShowScroll] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const onScroll = () => setShowScroll(window.scrollY > 400);
|
||
window.addEventListener('scroll', onScroll, { passive: true });
|
||
return () => window.removeEventListener('scroll', onScroll);
|
||
}, []);
|
||
|
||
return (
|
||
<>
|
||
<footer className="ly-footer" style={{
|
||
background: 'linear-gradient(to top, #3a2800 0%, #1e1600 18%, #0e0b04 36%, #07070d 58%)',
|
||
color: '#ffffff',
|
||
position: 'relative',
|
||
overflow: 'hidden',
|
||
margin: '0 20px 20px',
|
||
borderRadius: '0 0 24px 24px',
|
||
}}>
|
||
|
||
{/* ── TOP CTA STRIP ── */}
|
||
<div className="ly-footer-cta" style={{
|
||
padding: '72px 64px 64px',
|
||
borderBottom: '1px solid rgba(255,255,255,0.06)',
|
||
display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
|
||
flexWrap: 'wrap', gap: 32,
|
||
position: 'relative',
|
||
}}>
|
||
|
||
<div style={{ maxWidth: 600 }}>
|
||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 20, display: 'flex', alignItems: 'center', gap: 10 }}>
|
||
<span style={{ width: 24, height: 1, background: '#f4be28', display: 'block' }} />Let's build together
|
||
</div>
|
||
<h2 className="ly-footer-heading" style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: 0, fontFamily: 'Sora, sans-serif' }}>
|
||
Turn every visit<br />
|
||
<span style={{ color: '#f4be28' }}>into value.</span>
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="ly-footer-cta-actions" style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-end' }}>
|
||
<Link href="/contacts" className="ly-footer-cta-btn" style={{
|
||
display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
|
||
padding: '18px 40px', background: '#f4be28', color: '#111',
|
||
fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none',
|
||
fontFamily: 'Sora, sans-serif', boxShadow: '0 16px 48px rgba(244,190,40,0.25)',
|
||
whiteSpace: 'nowrap',
|
||
}}>
|
||
Book a Demo
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||
</Link>
|
||
<Link href="/contacts" style={{
|
||
display: 'inline-flex', alignItems: 'center', gap: 8,
|
||
fontSize: 14, fontWeight: 600, color: 'rgba(255,255,255,0.45)',
|
||
textDecoration: 'none', fontFamily: 'Sora, sans-serif',
|
||
borderBottom: '1px solid rgba(255,255,255,0.15)', paddingBottom: 2,
|
||
}}>
|
||
or talk to sales →
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── MAIN COLUMNS ── */}
|
||
<div className="ly-footer-columns" style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: '1.6fr 1fr 1fr 1fr',
|
||
gap: '48px', padding: '64px 64px 48px',
|
||
alignItems: 'start',
|
||
}}>
|
||
{/* Brand */}
|
||
<div className="ly-footer-brand" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
|
||
<Link href="/" aria-label="Loyaly.AI home" style={{ display: 'block', maxWidth: '100%', marginBottom: 18 }}>
|
||
{/* 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="/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 }}>
|
||
Offline shopping. Online intelligence.
|
||
</p>
|
||
<div style={{ display: 'flex', gap: 10 }}>
|
||
{SOCIALS.map(({ label, href, icon }) => (
|
||
<a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label}
|
||
style={{
|
||
width: 38, height: 38, borderRadius: 10,
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.08)',
|
||
color: 'rgba(255,255,255,0.5)',
|
||
transition: 'all 0.2s ease',
|
||
}}
|
||
onMouseEnter={e => { const el = e.currentTarget as HTMLElement; el.style.background = 'rgba(244,190,40,0.12)'; el.style.borderColor = 'rgba(244,190,40,0.3)'; el.style.color = '#f4be28'; }}
|
||
onMouseLeave={e => { const el = e.currentTarget as HTMLElement; el.style.background = 'rgba(255,255,255,0.05)'; el.style.borderColor = 'rgba(255,255,255,0.08)'; el.style.color = 'rgba(255,255,255,0.5)'; }}
|
||
>{icon}</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Nav columns */}
|
||
{NAV.map(col => (
|
||
<nav key={col.title} className="ly-footer-nav" aria-label={col.title}>
|
||
<ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||
{col.links.map(({ label, href }) => (
|
||
<li key={label}>
|
||
<Link href={href} style={{ textDecoration: 'none', fontSize: 15, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif', transition: 'color 0.2s', fontWeight: 500 }}
|
||
onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = '#ffffff')}
|
||
onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = 'rgba(255,255,255,0.5)')}
|
||
>{label}</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</nav>
|
||
))}
|
||
</div>
|
||
|
||
{/* ── BOTTOM BAR ── */}
|
||
<div className="ly-footer-bottom" style={{
|
||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||
flexWrap: 'wrap', gap: 12,
|
||
padding: '20px 64px 36px',
|
||
borderTop: '1px solid rgba(255,255,255,0.05)',
|
||
fontSize: 13, color: 'rgba(255,255,255,0.25)', fontFamily: 'Sora, sans-serif',
|
||
}}>
|
||
<span>© {new Date().getFullYear()} Loyaly.AI. All rights reserved.</span>
|
||
<div style={{ display: 'flex', gap: 24 }}>
|
||
{[['Terms', '/terms'], ['Privacy', '/privacy'], ['Cookies', '/cookies']].map(([l, h]) => (
|
||
<Link key={l} href={h} style={{ textDecoration: 'none', color: 'inherit', transition: 'color 0.2s' }}
|
||
onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = 'rgba(255,255,255,0.6)')}
|
||
onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = 'rgba(255,255,255,0.25)')}
|
||
>{l}</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<style>{`
|
||
@media (max-width: 900px) {
|
||
.ly-footer { margin: 0 12px 12px; border-radius: 0 0 20px 20px; }
|
||
.ly-footer-cta { padding: 48px 28px 40px !important; align-items: flex-start !important; }
|
||
.ly-footer-cta-actions { align-items: flex-start !important; width: 100%; }
|
||
.ly-footer-cta-btn { width: 100%; padding: 16px 28px !important; }
|
||
.ly-footer-columns { grid-template-columns: 1fr 1fr !important; gap: 36px 24px !important; padding: 48px 28px 36px !important; }
|
||
.ly-footer-brand { grid-column: 1 / -1; }
|
||
.ly-footer-bottom { padding: 20px 28px 28px !important; flex-direction: column !important; align-items: flex-start !important; }
|
||
}
|
||
@media (max-width: 560px) {
|
||
.ly-footer-heading { font-size: clamp(30px, 9vw, 44px) !important; }
|
||
.ly-footer-columns { grid-template-columns: 1fr !important; gap: 32px !important; }
|
||
.ly-footer-logo { width: 260px !important; }
|
||
.ly-footer-bottom { gap: 16px !important; }
|
||
.ly-footer-bottom > div { gap: 18px !important; }
|
||
}
|
||
`}</style>
|
||
</footer>
|
||
|
||
{/* Scroll-to-top */}
|
||
<style>{`
|
||
@keyframes sttPulseRing {
|
||
0% { transform: scale(1); opacity: 0.6; }
|
||
70% { transform: scale(1.55); opacity: 0; }
|
||
100% { transform: scale(1.55); opacity: 0; }
|
||
}
|
||
@keyframes sttBounceArrow {
|
||
0%, 100% { transform: translateY(0); }
|
||
40% { transform: translateY(-5px); }
|
||
60% { transform: translateY(-2px); }
|
||
}
|
||
.stt-btn:hover { transform: scale(1.1) !important; box-shadow: 0 8px 32px rgba(244,190,40,0.65) !important; }
|
||
.stt-arrow { animation: sttBounceArrow 1.6s ease-in-out infinite; }
|
||
`}</style>
|
||
|
||
<div style={{
|
||
position: 'fixed', bottom: 32, right: 32, zIndex: 9999,
|
||
opacity: showScroll ? 1 : 0,
|
||
transform: showScroll ? 'translateY(0)' : 'translateY(16px)',
|
||
transition: 'opacity 0.3s ease, transform 0.3s ease',
|
||
pointerEvents: showScroll ? 'auto' : 'none',
|
||
}}>
|
||
{/* Pulse ring */}
|
||
<span style={{
|
||
position: 'absolute', inset: 0, borderRadius: '50%',
|
||
background: 'rgba(244,190,40,0.45)',
|
||
animation: 'sttPulseRing 2s cubic-bezier(0.215,0.61,0.355,1) infinite',
|
||
pointerEvents: 'none',
|
||
}} />
|
||
<button
|
||
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
|
||
aria-label="Scroll to top"
|
||
className="stt-btn"
|
||
style={{
|
||
position: 'relative',
|
||
width: 64, height: 64, borderRadius: '50%',
|
||
background: '#f4be28', color: '#111', border: 'none',
|
||
cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
boxShadow: '0 4px 20px rgba(244,190,40,0.4)',
|
||
transition: 'transform 0.25s ease, box-shadow 0.25s ease',
|
||
}}
|
||
>
|
||
<span className="stt-arrow" style={{ display: 'flex' }}>
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M12 19V5M5 12l7-7 7 7"/>
|
||
</svg>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|