148 lines
9.3 KiB
TypeScript
148 lines
9.3 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { motion } from "framer-motion"
|
|
import { Twitter, Github, Linkedin, Mail } from "lucide-react"
|
|
import Image from "next/image"
|
|
|
|
export function LandingFooter() {
|
|
return (
|
|
<footer className="py-20 border-t border-white/5 relative overflow-hidden">
|
|
{/* Background Glow */}
|
|
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[800px] h-[300px] bg-indigo-600/10 blur-[120px] rounded-full -z-10 will-change-transform" />
|
|
|
|
<div className="container mx-auto px-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
|
|
<div className="col-span-1 md:col-span-1">
|
|
<Link href="/" className="flex items-center gap-3 mb-6 group">
|
|
<div className="w-10 h-10 rounded-xl bg-indigo-600/10 border border-white/10 flex items-center justify-center backdrop-blur-sm overflow-hidden shadow-lg shadow-indigo-500/20 group-hover:scale-110 transition-transform">
|
|
<Image
|
|
src="/logo.png"
|
|
alt="JUNO Logo"
|
|
width={40}
|
|
height={40}
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<span className="text-xl font-black tracking-titter text-white">JUNO</span>
|
|
</Link>
|
|
<p className="text-slate-300 font-medium mb-8">
|
|
The next generation of supply chain connectivity. Secure, encrypted, and real-time.
|
|
</p>
|
|
<div className="flex items-center gap-4">
|
|
<a href="#" aria-label="Follow us on Twitter" className="p-2 rounded-lg bg-white/5 border border-white/10 text-slate-300 hover:text-white hover:bg-white/10 transition-all">
|
|
<Twitter className="w-5 h-5" />
|
|
</a>
|
|
<a href="#" aria-label="Connect on LinkedIn" className="p-2 rounded-lg bg-white/5 border border-white/10 text-slate-300 hover:text-white hover:bg-white/10 transition-all">
|
|
<Linkedin className="w-5 h-5" />
|
|
</a>
|
|
<a href="#" aria-label="View our GitHub" className="p-2 rounded-lg bg-white/5 border border-white/10 text-slate-300 hover:text-white hover:bg-white/10 transition-all">
|
|
<Github className="w-5 h-5" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="text-white font-black uppercase tracking-widest text-sm mb-6">Platform</h4>
|
|
<ul className="space-y-4">
|
|
<li><Link href="/platform" className="text-slate-300 hover:text-indigo-400 transition-colors font-medium">Features</Link></li>
|
|
<li><Link href="/platform" className="text-slate-300 hover:text-indigo-400 transition-colors font-medium">Shopify Sync</Link></li>
|
|
<li><Link href="/platform" className="text-slate-300 hover:text-indigo-400 transition-colors font-medium">Security</Link></li>
|
|
<li><Link href="/platform" className="text-slate-300 hover:text-indigo-400 transition-colors font-medium">API</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="text-white font-black uppercase tracking-widest text-sm mb-6">Company</h4>
|
|
<ul className="space-y-4">
|
|
<li><Link href="/about" className="text-slate-300 hover:text-indigo-400 transition-colors font-medium">About Us</Link></li>
|
|
<li><Link href="/privacy-policy" className="text-slate-300 hover:text-indigo-400 transition-colors font-medium">Privacy Policy</Link></li>
|
|
<li><Link href="/terms-of-service" className="text-slate-300 hover:text-indigo-400 transition-colors font-medium">Terms of Service</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="text-white font-black uppercase tracking-widest text-sm mb-6">Newsletter</h4>
|
|
<p className="text-slate-300 font-medium mb-6">Stay updated with the latest in supply chain tech.</p>
|
|
|
|
{/* Status Message */}
|
|
<form
|
|
onSubmit={async (e) => {
|
|
e.preventDefault();
|
|
const form = e.currentTarget;
|
|
const email = new FormData(form).get("email") as string;
|
|
const btn = form.querySelector('button');
|
|
const statusEl = document.getElementById('newsletter-status');
|
|
|
|
if (btn) btn.disabled = true;
|
|
if (statusEl) {
|
|
statusEl.textContent = "Processing...";
|
|
statusEl.className = "text-xs font-bold text-indigo-400 mt-2 block";
|
|
}
|
|
|
|
try {
|
|
const res = await fetch("/api/newsletter/subscribe", {
|
|
method: "POST",
|
|
body: JSON.stringify({ email }),
|
|
headers: { "Content-Type": "application/json" }
|
|
});
|
|
if (res.ok) {
|
|
if (statusEl) {
|
|
statusEl.textContent = "Successfully subscribed! ⚡";
|
|
statusEl.className = "text-xs font-bold text-emerald-400 mt-2 block";
|
|
}
|
|
form.reset();
|
|
setTimeout(() => { if (statusEl) statusEl.textContent = ""; }, 5000);
|
|
} else {
|
|
if (statusEl) {
|
|
statusEl.textContent = "Something went wrong. Try again.";
|
|
statusEl.className = "text-xs font-bold text-rose-400 mt-2 block";
|
|
}
|
|
}
|
|
} catch (err) {
|
|
if (statusEl) {
|
|
statusEl.textContent = "Connection error.";
|
|
statusEl.className = "text-xs font-bold text-rose-400 mt-2 block";
|
|
}
|
|
} finally {
|
|
if (btn) btn.disabled = false;
|
|
}
|
|
}}
|
|
className="flex flex-col gap-2"
|
|
>
|
|
<div className="flex gap-2">
|
|
<input
|
|
name="email"
|
|
type="email"
|
|
required
|
|
placeholder="Enter your email"
|
|
className="bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-indigo-500 transition-colors flex-1"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
aria-label="Subscribe to newsletter"
|
|
className="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white p-3 rounded-xl transition-all active:scale-95 shadow-lg shadow-indigo-600/20"
|
|
>
|
|
<Mail className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
<span id="newsletter-status" className="h-4"></span>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-8 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-4">
|
|
<p className="text-sm text-slate-400 font-medium">
|
|
© 2026 JUNO. All rights reserved.
|
|
</p>
|
|
<div className="flex items-center gap-6">
|
|
<Link href="/terms-of-service" className="text-xs text-slate-400 hover:text-indigo-300 font-bold uppercase tracking-widest">Terms</Link>
|
|
<Link href="/privacy-policy" className="text-xs text-slate-400 hover:text-indigo-300 font-bold uppercase tracking-widest">Privacy</Link>
|
|
<Link href="/cookies" className="text-xs text-slate-400 hover:text-indigo-300 font-bold uppercase tracking-widest">Cookies</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|