Loyaly/lytsup-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
R-Bharathraj
2026-07-15 17:13:09 +05:30
parent a314b87153
commit 3cb2613195
59 changed files with 7428 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/components/layout/Footer.tsx Normal file
View File

@@ -0,0 +1,152 @@
"use client";
import { useState } from "react";
import { Send, Instagram, Twitter, MessageSquare, Heart } from "lucide-react";
import Link from "next/link";
export default function Footer() {
const [email, setEmail] = useState("");
const [subscribed, setSubscribed] = useState(false);
const handleSubscribe = (e: React.FormEvent) => {
e.preventDefault();
if (email) {
setSubscribed(true);
setEmail("");
setTimeout(() => setSubscribed(false), 5000);
}
};
return (
<footer className="relative bg-[#060606] border-t border-white/5 pt-16 pb-8 overflow-hidden">
{/* Ambient background light glows */}
<div className="absolute top-0 left-1/4 -translate-y-1/2 w-80 h-80 rounded-full bg-accent-purple/10 blur-[80px] pointer-events-none" />
<div className="absolute top-0 right-1/4 -translate-y-1/2 w-80 h-80 rounded-full bg-accent-pink/10 blur-[80px] pointer-events-none" />
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
{/* Brand Info */}
<div className="space-y-4 col-span-1 md:col-span-1">
<Link href="/" className="inline-block">
<span className="text-2xl font-extrabold tracking-wider font-sora text-white">
Lyts<span className="text-primary text-glow-yellow">Up</span>
</span>
</Link>
<p className="text-white/60 text-sm leading-relaxed max-w-xs">
The premier social currency app for Gen Z. Earn rewards for walking, playing, and living your best life.
</p>
<p className="text-primary font-semibold text-xs tracking-wider uppercase">
Earn. Spend. Live More.
</p>
</div>
{/* Site Navigation */}
<div className="space-y-4">
<h4 className="text-white font-bold text-sm tracking-wider uppercase font-sora">Navigate</h4>
<ul className="space-y-2.5">
<li>
<a href="#earn" className="text-white/60 hover:text-primary transition-colors text-sm">Earn Points</a>
</li>
<li>
<a href="#spend" className="text-white/60 hover:text-primary transition-colors text-sm">Redeem Rewards</a>
</li>
<li>
<a href="#play" className="text-white/60 hover:text-primary transition-colors text-sm">Mini-Game</a>
</li>
<li>
<a href="#leaderboard" className="text-white/60 hover:text-primary transition-colors text-sm">Leaderboard</a>
</li>
</ul>
</div>
{/* Corporate Links */}
<div className="space-y-4">
<h4 className="text-white font-bold text-sm tracking-wider uppercase font-sora">Partnerships</h4>
<ul className="space-y-2.5">
<li>
<Link href="#" className="text-white/60 hover:text-primary transition-colors text-sm">Become a Partner</Link>
</li>
<li>
<Link href="#" className="text-white/60 hover:text-primary transition-colors text-sm">Brands Portal</Link>
</li>
<li>
<Link href="#" className="text-white/60 hover:text-primary transition-colors text-sm">API Integration</Link>
</li>
<li>
<Link href="#" className="text-white/60 hover:text-primary transition-colors text-sm">Support Hub</Link>
</li>
</ul>
</div>
{/* Newsletter subscription */}
<div className="space-y-4">
<h4 className="text-white font-bold text-sm tracking-wider uppercase font-sora">Get Secret Drops</h4>
<p className="text-white/60 text-xs">
Subscribe to get notified about ultra-rare brand voucher drops.
</p>
<form onSubmit={handleSubscribe} className="relative flex">
<input
type="email"
placeholder="your.email@gmail.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-primary/50 transition-colors pr-10"
/>
<button
type="submit"
className="absolute right-1 top-1 bottom-1 bg-primary text-dark font-bold px-3.5 rounded-lg hover:bg-primary/95 transition-colors flex items-center justify-center cursor-pointer"
aria-label="Subscribe"
>
<Send className="w-4 h-4" />
</button>
</form>
{subscribed && (
<p className="text-accent-lime text-xs font-semibold animate-pulse">
You're in! Check your inbox for secret codes.
</p>
)}
</div>
</div>
<hr className="border-white/5 mb-8" />
{/* Socials & Copyright */}
<div className="flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
<div className="flex items-center space-x-2 text-xs text-white/40">
<span>© {new Date().getFullYear()} LytsUp.com. All rights reserved.</span>
<span className="hidden sm:inline">•</span>
<span className="flex items-center">
Made with <Heart className="w-3.5 h-3.5 text-accent-pink fill-current mx-1" /> for Gen Z
</span>
</div>
{/* Social Icons */}
<div className="flex space-x-4">
<a
href="#"
className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-white/60 hover:bg-accent-pink hover:text-white transition-all scale-95 hover:scale-100"
aria-label="Instagram"
>
<Instagram className="w-4 h-4" />
</a>
<a
href="#"
className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-white/60 hover:bg-accent-purple hover:text-white transition-all scale-95 hover:scale-100"
aria-label="Twitter"
>
<Twitter className="w-4 h-4" />
</a>
<a
href="#"
className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-white/60 hover:bg-primary hover:text-dark transition-all scale-95 hover:scale-100"
aria-label="Discord"
>
<MessageSquare className="w-4 h-4" />
</a>
</div>
</div>
</div>
</footer>
);
}