footer section fix
This commit is contained in:
@@ -33,7 +33,7 @@ export function Footer() {
|
||||
<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">
|
||||
@@ -53,10 +53,18 @@ export function Footer() {
|
||||
</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">
|
||||
<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">
|
||||
<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>
|
||||
@@ -64,11 +72,16 @@ export function Footer() {
|
||||
|
||||
{/* Col 2: Company Links */}
|
||||
<div>
|
||||
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Company</h5>
|
||||
<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">
|
||||
<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>
|
||||
@@ -78,11 +91,16 @@ export function Footer() {
|
||||
|
||||
{/* Col 3: Partnerships */}
|
||||
<div>
|
||||
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Partnerships</h5>
|
||||
<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">
|
||||
<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>
|
||||
@@ -92,11 +110,16 @@ export function Footer() {
|
||||
|
||||
{/* Col 4: Support / Legal */}
|
||||
<div>
|
||||
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Support & Legal</h5>
|
||||
<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">
|
||||
<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>
|
||||
@@ -107,11 +130,16 @@ export function Footer() {
|
||||
{/* 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 HQ</h5>
|
||||
<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 />
|
||||
424, Diwan Bahadur Rd,
|
||||
<br />
|
||||
Opposite to Sri Krishna Sweets,
|
||||
<br />
|
||||
R.S. Puram, Coimbatore,
|
||||
<br />
|
||||
Tamil Nadu 641002
|
||||
</p>
|
||||
<a
|
||||
@@ -126,13 +154,21 @@ export function Footer() {
|
||||
</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>
|
||||
<p className="text-[10px] font-bold text-white/40 uppercase tracking-widest">
|
||||
Neighborhood Helpdesk
|
||||
</p>
|
||||
<a
|
||||
href="tel:+918049123456"
|
||||
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 80 4912 3456</span>
|
||||
<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>
|
||||
|
||||
@@ -3,153 +3,209 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import { FaFacebookF, FaInstagram, FaLinkedinIn } from "react-icons/fa";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const COMPANY = [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press & News", 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: "#" },
|
||||
{ label: "Direct to Customer Brands", href: "#" },
|
||||
// { label: "Local Real Estate", href: "#" },
|
||||
];
|
||||
|
||||
const LEGAL = [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Sitemap", href: "#" },
|
||||
// { label: "Sitemap", href: "#" },
|
||||
];
|
||||
|
||||
const socialButtonClass =
|
||||
"flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white transition-all duration-300 xl:h-[54px] xl:w-[54px]";
|
||||
|
||||
export function PremiumFooter() {
|
||||
return (
|
||||
<footer className="premium-footer-shell bg-gradient-to-br from-[#16001D] to-[#25002F] rounded-t-[28px] md:rounded-t-[40px] rounded-b-none overflow-hidden text-white select-none shadow-[0_-12px_40px_rgba(22,0,29,0.12)]">
|
||||
<div className="mx-auto max-w-[1440px] px-6 md:px-10 xl:px-16 pt-16 pb-10 flex flex-col">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[minmax(320px,1.6fr)_repeat(3,minmax(150px,1fr))] gap-8 lg:gap-x-[clamp(56px,6vw,120px)] w-full text-left items-start">
|
||||
{/* Column 1: Brand & Description */}
|
||||
<div className="flex flex-col gap-4 md:col-span-2 lg:col-span-1">
|
||||
<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-[340px]">
|
||||
India's leading hyperlocal neighborhood network, empowering communities and verified local businesses within a 2km radius.
|
||||
</p>
|
||||
{/* Social Icons */}
|
||||
<div className="flex gap-3 mt-4">
|
||||
<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>
|
||||
<section className="bg-white px-2 pb-2 md:px-3 md:pb-3 lg:px-4 lg:pb-4 xl:px-5 xl:pb-4 2xl:px-6 2xl:pb-5">
|
||||
<footer className="w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#16001D] to-[#25002F] text-white shadow-[0_-12px_40px_rgba(22,0,29,0.12)]">
|
||||
<div className="flex flex-col px-6 pb-8 pt-10 md:px-8 md:pb-8 md:pt-12 xl:px-16 xl:pb-8 xl:pt-12 2xl:px-20 2xl:pt-10 2xl:pb-8">
|
||||
<div className="grid w-full grid-cols-1 items-start gap-10 text-left md:grid-cols-2 md:gap-x-12 md:gap-y-12 lg:grid-cols-[1.6fr_1fr_1fr_1fr] lg:gap-10 xl:gap-14">
|
||||
<div className="flex flex-col gap-5">
|
||||
<Link href="/" className="inline-block w-fit">
|
||||
<Image
|
||||
src="/logo-light.png"
|
||||
alt="Nearle"
|
||||
width={240}
|
||||
height={60}
|
||||
className="h-auto w-[160px] object-contain md:w-[200px] xl:w-[240px]"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Column 2: Company */}
|
||||
<div className="flex flex-col">
|
||||
<h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Company</h5>
|
||||
<ul className="flex flex-col gap-[22px]">
|
||||
{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 className="flex flex-col">
|
||||
<h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Nearle</h5>
|
||||
<ul className="flex flex-col gap-[22px]">
|
||||
{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 className="flex flex-col">
|
||||
<h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Support</h5>
|
||||
<ul className="flex flex-col gap-[22px]">
|
||||
{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>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-white/10 w-full mt-[56px] mb-[48px]" />
|
||||
|
||||
{/* Middle Contact Row */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-center gap-[48px] w-full py-1.5 md:py-2">
|
||||
{/* 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 w-full md:w-auto">
|
||||
<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 className="max-w-[430px] text-base leading-[1.65] text-white/70 md:text-lg xl:text-[19px]">
|
||||
India's leading hyperlocal neighborhood network, empowering
|
||||
communities and verified local businesses within a 2km radius.
|
||||
</p>
|
||||
|
||||
<div className="mt-1 flex gap-3 xl:mt-2 xl:gap-4">
|
||||
<a
|
||||
href="https://www.facebook.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Facebook"
|
||||
className={`${socialButtonClass} hover:bg-[#1877F2]`}
|
||||
>
|
||||
<FaFacebookF size={20} />
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://www.instagram.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Instagram"
|
||||
className={`${socialButtonClass} hover:bg-[#E4405F]`}
|
||||
>
|
||||
<FaInstagram size={21} />
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://www.linkedin.com/company/nearledigital/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="LinkedIn"
|
||||
className={`${socialButtonClass} hover:bg-[#0A66C2]`}
|
||||
>
|
||||
<FaLinkedinIn size={20} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<h5 className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
|
||||
Company
|
||||
</h5>
|
||||
|
||||
<ul className="flex flex-col gap-4 xl:gap-5">
|
||||
{COMPANY.map((link) => (
|
||||
<li key={link.label}>
|
||||
<Link
|
||||
href={link.href}
|
||||
className="inline-block text-sm leading-normal text-white/70 transition-all hover:translate-x-0.5 hover:text-white md:text-base xl:text-[17px]"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<h5 className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
|
||||
Nearle
|
||||
</h5>
|
||||
|
||||
<ul className="flex flex-col gap-4 xl:gap-5">
|
||||
{PARTNERSHIPS.map((link) => (
|
||||
<li key={link.label}>
|
||||
<Link
|
||||
href={link.href}
|
||||
className="inline-block text-sm leading-normal text-white/70 transition-all hover:translate-x-0.5 hover:text-white md:text-base xl:text-[17px]"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<h5 className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
|
||||
Support
|
||||
</h5>
|
||||
|
||||
<ul className="flex flex-col gap-4 xl:gap-5">
|
||||
{LEGAL.map((link) => (
|
||||
<li key={link.label}>
|
||||
<Link
|
||||
href={link.href}
|
||||
className="inline-block text-sm leading-normal text-white/70 transition-all hover:translate-x-0.5 hover:text-white md:text-base xl:text-[17px]"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Call center */}
|
||||
<div className="flex flex-col items-center md:items-end gap-1.5 shrink-0 text-center md:text-right">
|
||||
<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 className="my-8 w-full border-t border-white/10 xl:my-10" />
|
||||
|
||||
<div className="flex w-full flex-col items-center justify-between gap-8 md:flex-row xl:gap-12">
|
||||
<div className="flex min-h-[120px] w-full max-w-[560px] items-start gap-3 rounded-2xl border border-white/10 bg-white/5 p-4 md:w-auto md:p-5 xl:min-h-[130px] xl:gap-4 xl:p-6">
|
||||
<div className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/10 text-white xl:h-[58px] xl:w-[58px] xl:rounded-2xl">
|
||||
<MaterialIcon icon="location_on" size={20} />
|
||||
</div>
|
||||
<span className="text-sm font-black tracking-tight">+91 80 4912 3456</span>
|
||||
</a>
|
||||
|
||||
<div className="text-left">
|
||||
<h6 className="text-sm font-black text-white md:text-base xl:text-lg">
|
||||
Nearle
|
||||
</h6>
|
||||
|
||||
<p className="mt-0.5 text-xs leading-normal text-white/60 md:text-sm xl:mt-1 xl:text-base">
|
||||
424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram,
|
||||
Coimbatore, TN 641002
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 flex-col items-center gap-1.5 text-center md:items-end md:text-right xl:gap-2">
|
||||
<span className="text-xs font-black uppercase tracking-widest text-white/40 md:text-sm xl:text-base">
|
||||
Neighborhood Helpdesk
|
||||
</span>
|
||||
|
||||
<a
|
||||
href="tel:+919092068666"
|
||||
className="flex items-center gap-2 text-white transition-colors hover:text-[#8A5CFF] xl:gap-3"
|
||||
>
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-[#6330D6] xl:h-14 xl:w-14">
|
||||
<MaterialIcon icon="phone" size={20} className="text-white" />
|
||||
</div>
|
||||
|
||||
<span className="text-base font-black tracking-tight md:text-lg xl:text-[30px]">
|
||||
+91 90920 68666
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 mt-8 w-full border-t border-white/5 xl:mb-6 xl:mt-10" />
|
||||
|
||||
<div className="flex w-full flex-col items-center justify-between gap-4 text-[13px] text-white/40 md:flex-row md:text-[14px] xl:text-[15px]">
|
||||
<p className="text-center md:text-left">
|
||||
© {new Date().getFullYear()} Nearle. All rights reserved.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
|
||||
<Link href="#" className="transition-colors hover:text-white">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<span className="select-none font-bold opacity-35">·</span>
|
||||
<Link href="#" className="transition-colors hover:text-white">
|
||||
Terms of Service
|
||||
</Link>
|
||||
<span className="select-none font-bold opacity-35">·</span>
|
||||
<Link href="#" className="transition-colors hover:text-white">
|
||||
Help Center
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Divider */}
|
||||
<div className="border-t border-white/5 w-full mt-10 mb-8" />
|
||||
|
||||
{/* Bottom Row */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-center gap-4 text-[11px] text-white/40 w-full">
|
||||
<p className="text-center md:text-left">© {new Date().getFullYear()} Nearle. All rights reserved.</p>
|
||||
<div className="flex flex-wrap gap-x-4 gap-y-1 justify-center items-center">
|
||||
<Link href="#" className="hover:text-white transition-colors">Privacy Policy</Link>
|
||||
<span className="opacity-35 select-none font-bold">·</span>
|
||||
<Link href="#" className="hover:text-white transition-colors">Terms of Service</Link>
|
||||
<span className="opacity-35 select-none font-bold">·</span>
|
||||
<Link href="#" className="hover:text-white transition-colors">Help Center</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -18,112 +18,102 @@ export function PremiumNavbar() {
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const pathname = usePathname();
|
||||
|
||||
const isActiveLink = (href: string) => {
|
||||
if (href === "/") return pathname === "/";
|
||||
return pathname.startsWith(href);
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="w-full bg-[rgba(61,45,143,0.88)] border-b border-white/10 px-6 md:px-10 h-16 md:h-20 flex items-center relative z-40 select-none">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
{/* LOGO (LEFT) */}
|
||||
<header className="sticky top-0 z-50 w-full border-b border-white/10 bg-[#3D2D8F]/90 text-white backdrop-blur-xl">
|
||||
<div className="relative mx-auto flex h-16 w-full max-w-[1600px] items-center px-6 md:h-20 md:px-10 xl:px-16">
|
||||
{/* Logo - Left */}
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
|
||||
className="flex shrink-0 items-center transition-transform duration-200 hover:scale-[1.02] active:scale-95"
|
||||
aria-label="Nearle Home"
|
||||
>
|
||||
<Image
|
||||
src="/logo-light.png"
|
||||
alt="Nearle"
|
||||
width={120}
|
||||
height={30}
|
||||
className="h-7 md:h-8 w-auto object-contain"
|
||||
width={180}
|
||||
height={45}
|
||||
className="h-7 w-auto object-contain md:h-8 xl:h-9"
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* LINKS (CENTER) */}
|
||||
<nav className="hidden md:flex items-center gap-6 lg:gap-8">
|
||||
{/* Desktop Navigation - Center */}
|
||||
<nav className="absolute left-1/2 hidden -translate-x-1/2 items-center gap-6 lg:flex lg:gap-8 xl:gap-10">
|
||||
{NAV_LINKS.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
const isActive = isActiveLink(link.href);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className={`relative py-1 text-sm font-bold transition-all duration-200 ${
|
||||
isActive ? "text-white" : "text-white/70 hover:text-white"
|
||||
className={`relative whitespace-nowrap py-2 text-sm font-bold transition-colors duration-200 ${
|
||||
isActive
|
||||
? "text-white"
|
||||
: "text-white/70 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
{isActive && (
|
||||
<span className="absolute bottom-[-4px] left-0 right-0 h-0.5 bg-white rounded-full" />
|
||||
)}
|
||||
|
||||
<span
|
||||
className={`absolute bottom-0 left-1/2 h-0.5 -translate-x-1/2 rounded-full bg-white transition-all duration-300 ${
|
||||
isActive ? "w-full" : "w-0"
|
||||
}`}
|
||||
/>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* ACTIONS (RIGHT) */}
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
<Link
|
||||
href="#"
|
||||
className="inline-flex items-center justify-center border-2 border-white/20 text-white font-bold px-5 py-1.5 rounded-full text-xs hover:bg-white/10 active:scale-95 transition-all duration-200 whitespace-nowrap"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
<Link
|
||||
href="/people#download-section"
|
||||
className="inline-flex items-center justify-center bg-white text-[rgba(61,45,143,0.88)] font-bold px-5 py-2 rounded-full text-xs hover:bg-white/90 hover:shadow-md hover:scale-[1.02] active:scale-95 transition-all duration-200 whitespace-nowrap"
|
||||
>
|
||||
Get App
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu toggle */}
|
||||
{/* Mobile Toggle - Right */}
|
||||
<button
|
||||
className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-white/10 text-white transition-all active:scale-90 cursor-pointer"
|
||||
onClick={() => setMobileOpen(!mobileOpen)}
|
||||
aria-label="Toggle menu"
|
||||
type="button"
|
||||
className="ml-auto flex h-10 w-10 items-center justify-center rounded-full text-white transition-all duration-200 hover:bg-white/10 active:scale-90 lg:hidden"
|
||||
onClick={() => setMobileOpen((value) => !value)}
|
||||
aria-label={mobileOpen ? "Close menu" : "Open menu"}
|
||||
aria-expanded={mobileOpen}
|
||||
>
|
||||
<MaterialIcon icon={mobileOpen ? "close" : "menu"} size={22} />
|
||||
<MaterialIcon icon={mobileOpen ? "close" : "menu"} size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Drawer */}
|
||||
{mobileOpen && (
|
||||
<div className="absolute top-full left-0 right-0 z-50 bg-[rgba(61,45,143,0.95)] backdrop-blur-md border-b border-white/10 shadow-lg p-4 md:hidden animate-fade-in flex flex-col gap-2">
|
||||
{/* Mobile Menu */}
|
||||
<div
|
||||
className={`overflow-hidden border-t border-white/10 bg-[#30226F]/98 backdrop-blur-xl transition-all duration-300 lg:hidden ${
|
||||
mobileOpen
|
||||
? "max-h-[500px] opacity-100"
|
||||
: "pointer-events-none max-h-0 opacity-0"
|
||||
}`}
|
||||
>
|
||||
<nav className="mx-auto flex w-full max-w-[1600px] flex-col gap-1 px-6 py-5 md:px-10">
|
||||
{NAV_LINKS.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
const isActive = isActiveLink(link.href);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className={`px-4 py-2.5 text-sm font-bold rounded-xl transition-all duration-200 flex items-center justify-between ${
|
||||
isActive
|
||||
? "bg-white/10 text-white"
|
||||
: "text-white/70 hover:text-white hover:bg-white/5"
|
||||
}`}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className={`flex items-center justify-between rounded-xl px-4 py-3 text-sm font-bold transition-all duration-200 ${
|
||||
isActive
|
||||
? "bg-white/15 text-white"
|
||||
: "text-white/70 hover:bg-white/10 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
|
||||
{isActive && (
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-white" />
|
||||
<span className="h-2 w-2 rounded-full bg-white" />
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
<div className="flex flex-col gap-2 pt-2 border-t border-white/10 mt-2">
|
||||
<Link
|
||||
href="#"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="flex items-center justify-center border-2 border-white/20 text-white font-bold py-2.5 rounded-xl text-sm"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
<Link
|
||||
href="/people#download-section"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="flex items-center justify-center bg-white text-[rgba(61,45,143,0.88)] font-bold py-2.5 rounded-xl text-sm"
|
||||
>
|
||||
Get App
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -14,7 +14,7 @@ export function PremiumPageShell({ children, className = "" }: PremiumPageShellP
|
||||
<PremiumNavbar />
|
||||
|
||||
{/* Page Content */}
|
||||
<main className="flex-1 w-full overflow-x-hidden bg-white">
|
||||
<main className="w-full overflow-x-hidden bg-white">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user