148 lines
6.5 KiB
TypeScript
148 lines
6.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import React from "react";
|
|
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
|
|
|
const COMPANY = [
|
|
{ label: "About Us", href: "/about" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Press & News", href: "#" },
|
|
{ label: "Help Center", href: "#" },
|
|
];
|
|
|
|
const PARTNERSHIPS = [
|
|
{ label: "Merchant Partner", href: "/businesses" },
|
|
{ label: "Delivery Partner", href: "#" },
|
|
{ label: "Corporate Gifting", href: "#" },
|
|
{ label: "Local Real Estate", href: "#" },
|
|
];
|
|
|
|
const LEGAL = [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
{ label: "Sitemap", href: "#" },
|
|
];
|
|
|
|
export function PremiumFooter() {
|
|
return (
|
|
<footer className="bg-gradient-to-br from-[#16001D] to-[#25002F] rounded-[1.5rem] md:rounded-[2rem] overflow-hidden text-white p-8 md:p-12 select-none mx-3 sm:mx-4 md:mx-6 lg:mx-8 mb-3 sm:mb-4 md:mb-6 shadow-[0_12px_40px_rgba(22,0,29,0.22)]">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 items-start text-left">
|
|
{/* Column 1: Brand & Description */}
|
|
<div className="flex flex-col gap-4 lg:col-span-2 pr-0 lg:pr-8">
|
|
<Link href="/" className="inline-block">
|
|
<Image
|
|
src="/logo-light.png"
|
|
alt="Nearle"
|
|
width={130}
|
|
height={30}
|
|
className="h-7 w-auto object-contain"
|
|
/>
|
|
</Link>
|
|
<p className="text-xs md:text-sm leading-relaxed text-white/70 max-w-sm">
|
|
India's leading hyperlocal neighborhood network, empowering communities and verified local businesses within a 2km radius.
|
|
</p>
|
|
{/* Social Icons */}
|
|
<div className="flex gap-2.5 mt-2">
|
|
<a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Share">
|
|
<MaterialIcon icon="share" size={16} />
|
|
</a>
|
|
<a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Website">
|
|
<MaterialIcon icon="public" size={16} />
|
|
</a>
|
|
<a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Help">
|
|
<MaterialIcon icon="help" size={16} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Column 2: Company */}
|
|
<div>
|
|
<h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Company</h5>
|
|
<ul className="flex flex-col gap-2.5">
|
|
{COMPANY.map((l) => (
|
|
<li key={l.label}>
|
|
<Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
|
|
{l.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Column 3: Nearle */}
|
|
<div>
|
|
<h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Nearle</h5>
|
|
<ul className="flex flex-col gap-2.5">
|
|
{PARTNERSHIPS.map((l) => (
|
|
<li key={l.label}>
|
|
<Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
|
|
{l.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Column 4: Support */}
|
|
<div>
|
|
<h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Support</h5>
|
|
<ul className="flex flex-col gap-2.5">
|
|
{LEGAL.map((l) => (
|
|
<li key={l.label}>
|
|
<Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
|
|
{l.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* HQ Address card at bottom-left and info */}
|
|
<div className="mt-10 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
|
|
{/* HQ Address Card */}
|
|
<div className="bg-white/5 border border-white/10 rounded-2xl p-4 flex items-start gap-3.5 max-w-sm">
|
|
<div className="w-8 h-8 rounded-lg bg-white/10 text-white flex items-center justify-center shrink-0 mt-0.5">
|
|
<MaterialIcon icon="location_on" size={16} />
|
|
</div>
|
|
<div className="text-left">
|
|
<h6 className="text-xs font-black text-white">Nearle HQ</h6>
|
|
<p className="text-[11px] text-white/60 leading-normal mt-0.5">
|
|
424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram, Coimbatore, TN 641002
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Call center */}
|
|
<div className="flex flex-col items-start md:items-end gap-1">
|
|
<span className="text-[10px] font-black text-white/40 uppercase tracking-widest">Neighborhood Helpdesk</span>
|
|
<a
|
|
href="tel:+918049123456"
|
|
className="flex items-center gap-2 text-white hover:text-[#6330D6] transition-colors"
|
|
>
|
|
<div className="w-7 h-7 rounded-full bg-[#6330D6] flex items-center justify-center">
|
|
<MaterialIcon icon="phone" size={14} className="text-white" />
|
|
</div>
|
|
<span className="text-sm font-black tracking-tight">+91 80 4912 3456</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Copyright & legal links */}
|
|
<div className="mt-8 pt-6 border-t border-white/5 flex flex-col sm:flex-row justify-between items-center gap-4 text-[11px] text-white/40 text-center sm:text-left">
|
|
<p>© {new Date().getFullYear()} Nearle. All rights reserved.</p>
|
|
<div className="flex flex-wrap gap-x-4 gap-y-1 justify-center">
|
|
<Link href="#" className="hover:text-white transition-colors">Privacy Policy</Link>
|
|
<span className="opacity-50">•</span>
|
|
<Link href="#" className="hover:text-white transition-colors">Terms of Service</Link>
|
|
<span className="opacity-50">•</span>
|
|
<Link href="#" className="hover:text-white transition-colors">Help Center</Link>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|