199 lines
7.6 KiB
TypeScript
199 lines
7.6 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 Footer() {
|
|
return (
|
|
<footer className="bg-[#E6D7EA] px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 2xl:px-12 pb-6 md:pb-8 lg:pb-10 w-full mt-4">
|
|
<div className="mx-auto w-full max-w-[1920px]">
|
|
<div className="section-card-dark p-8 md:p-12 lg:p-14 text-white relative">
|
|
{/* Background ambient glowing details */}
|
|
<div className="absolute right-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-brand-accent/5 blur-[120px] pointer-events-none" />
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-10 lg:gap-12 relative z-10 items-start text-left">
|
|
{/* Col 1: Brand info */}
|
|
<div className="flex flex-col gap-4">
|
|
<Link href="/" className="inline-block">
|
|
<Image
|
|
src="/logo-light.png"
|
|
alt="Nearle"
|
|
width={220}
|
|
height={36}
|
|
style={{ width: "160px", height: "auto" }}
|
|
className="object-contain"
|
|
/>
|
|
</Link>
|
|
<p className="text-sm leading-relaxed text-white/70">
|
|
India's leading hyperlocal neighborhood network, empowering
|
|
communities and verified local businesses within 2km.
|
|
</p>
|
|
{/* Social Links */}
|
|
<div className="flex gap-3 mt-2">
|
|
<a
|
|
href="#"
|
|
className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300"
|
|
aria-label="Share"
|
|
>
|
|
<MaterialIcon icon="share" size={20} />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300"
|
|
aria-label="Website"
|
|
>
|
|
<MaterialIcon icon="public" size={20} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Col 2: Company Links */}
|
|
<div>
|
|
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">
|
|
Company
|
|
</h5>
|
|
<ul className="flex flex-col gap-3">
|
|
{COMPANY.map((l) => (
|
|
<li key={l.label}>
|
|
<Link
|
|
href={l.href}
|
|
className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block"
|
|
>
|
|
{l.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Col 3: Partnerships */}
|
|
<div>
|
|
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">
|
|
Partnerships
|
|
</h5>
|
|
<ul className="flex flex-col gap-3">
|
|
{PARTNERSHIPS.map((l) => (
|
|
<li key={l.label}>
|
|
<Link
|
|
href={l.href}
|
|
className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block"
|
|
>
|
|
{l.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Col 4: Support / Legal */}
|
|
<div>
|
|
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">
|
|
Support & Legal
|
|
</h5>
|
|
<ul className="flex flex-col gap-3">
|
|
{LEGAL.map((l) => (
|
|
<li key={l.label}>
|
|
<Link
|
|
href={l.href}
|
|
className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block"
|
|
>
|
|
{l.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Col 5: HQ Address & Helpdesk */}
|
|
<div className="flex flex-col gap-4">
|
|
<div>
|
|
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-4">
|
|
Visit Nearle
|
|
</h5>
|
|
<p className="text-xs leading-relaxed text-white/60">
|
|
424, Diwan Bahadur Rd,
|
|
<br />
|
|
Opposite to Sri Krishna Sweets,
|
|
<br />
|
|
R.S. Puram, Coimbatore,
|
|
<br />
|
|
Tamil Nadu 641002
|
|
</p>
|
|
<a
|
|
href="https://maps.google.com/?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="mt-3 inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl border border-white/10 hover:border-[#E6D7EA]/50 text-white/80 hover:text-[#E6D7EA] text-xs font-bold transition-all duration-300"
|
|
>
|
|
<MaterialIcon icon="location_on" size={14} />
|
|
<span>Get Directions</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div className="border-t border-white/10 pt-4 flex flex-col gap-2">
|
|
<p className="text-[10px] font-bold text-white/40 uppercase tracking-widest">
|
|
Neighborhood Helpdesk
|
|
</p>
|
|
<a
|
|
href="tel:+919092068666"
|
|
className="flex items-center gap-2 text-white hover:text-[#E6D7EA] transition-all"
|
|
>
|
|
<MaterialIcon
|
|
icon="phone"
|
|
size={16}
|
|
className="text-[#E6D7EA] shrink-0"
|
|
/>
|
|
<span className="text-sm font-black tracking-tight">
|
|
+91 90920 68666
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Copyright Divider & Bar */}
|
|
<div className="mt-12 pt-6 border-t border-white/10 relative z-10 flex flex-col sm:flex-row justify-between items-center gap-4 text-xs text-white/40">
|
|
<p>© {new Date().getFullYear()} Nearle. All rights reserved.</p>
|
|
<div className="flex flex-wrap gap-x-6 gap-y-2 justify-center">
|
|
{LEGAL.map((link) => (
|
|
<Link
|
|
key={link.label}
|
|
href={link.href}
|
|
className="hover:text-[#E6D7EA] transition-colors"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|
|
|
|
export default Footer;
|