add image
This commit is contained in:
@@ -21,7 +21,7 @@ export function Navbar() {
|
||||
return (
|
||||
<div className="fixed top-0 left-0 right-0 z-50 w-full flex justify-center pointer-events-none">
|
||||
<div className="w-full max-w-[1920px] px-4 md:px-6 lg:px-8 xl:px-10 2xl:px-12 pt-[18px] md:pt-[24px] pointer-events-auto relative">
|
||||
<nav className="w-full h-[68px] lg:h-[76px] rounded-full bg-white/88 border border-white/70 shadow-sm backdrop-blur-md px-5 md:px-8 lg:px-10 flex items-center transition-all duration-300">
|
||||
<nav className="w-full h-[68px] lg:h-[76px] rounded-full bg-[rgba(61,45,143,0.88)] border border-white/20 shadow-sm backdrop-blur-md px-5 md:px-8 lg:px-10 flex items-center transition-all duration-300">
|
||||
<div className="grid grid-cols-2 md:grid-cols-[1fr_auto_1fr] items-center w-full h-full">
|
||||
{/* Left: Brand */}
|
||||
<div className="flex items-center justify-start">
|
||||
@@ -30,7 +30,7 @@ export function Navbar() {
|
||||
className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
|
||||
>
|
||||
<Image
|
||||
src="/logo.png"
|
||||
src="/logo-light.png"
|
||||
alt="Nearle"
|
||||
width={400}
|
||||
height={50}
|
||||
@@ -49,12 +49,12 @@ export function Navbar() {
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className={`relative py-2 text-[15px] font-semibold leading-5 transition-all duration-200 whitespace-nowrap ${
|
||||
isActive ? "text-[#2A1234]" : "text-[#2A1234]/70 hover:text-[#2A1234]"
|
||||
isActive ? "text-white" : "text-white/75 hover:text-white"
|
||||
} group`}
|
||||
>
|
||||
{link.label}
|
||||
<span
|
||||
className={`absolute bottom-[-6px] left-1/2 -translate-x-1/2 h-0.5 bg-[#65149A] rounded-full transition-all duration-300 ${
|
||||
className={`absolute bottom-[-6px] left-1/2 -translate-x-1/2 h-0.5 bg-white rounded-full transition-all duration-300 ${
|
||||
isActive
|
||||
? "w-5 opacity-100"
|
||||
: "w-0 opacity-0 group-hover:w-4 group-hover:opacity-60"
|
||||
@@ -69,14 +69,14 @@ export function Navbar() {
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
<Link
|
||||
href="/#download"
|
||||
className="hidden md:inline-flex items-center justify-center bg-[#65149A] text-white font-bold px-7 h-[46px] rounded-full text-[15px] hover:bg-[#7C3AED] hover:shadow-md hover:scale-[1.02] active:scale-95 transition-all duration-300 whitespace-nowrap"
|
||||
className="hidden md:inline-flex items-center justify-center bg-white text-[rgba(61,45,143,0.88)] font-bold px-7 h-[46px] rounded-full text-[15px] hover:bg-white/90 hover:shadow-md hover:scale-[1.02] active:scale-95 transition-all duration-300 whitespace-nowrap"
|
||||
>
|
||||
Get App
|
||||
</Link>
|
||||
|
||||
{/* Mobile menu toggle */}
|
||||
<button
|
||||
className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-[#2A1234]/5 text-[#2A1234] transition-all active:scale-90 cursor-pointer"
|
||||
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"
|
||||
>
|
||||
@@ -88,7 +88,7 @@ export function Navbar() {
|
||||
|
||||
{/* Mobile Drawer */}
|
||||
{mobileOpen && (
|
||||
<div className="absolute top-[calc(100%+12px)] left-4 right-4 z-40 bg-white/95 border border-white/50 rounded-2xl shadow-[0_20px_40px_rgba(100,60,120,0.15)] backdrop-blur-md p-4 md:hidden">
|
||||
<div className="absolute top-[calc(100%+12px)] left-4 right-4 z-40 bg-[rgba(61,45,143,0.95)] border border-white/20 rounded-2xl shadow-[0_20px_40px_rgba(100,60,120,0.15)] backdrop-blur-md p-4 md:hidden">
|
||||
<div className="flex flex-col gap-2">
|
||||
{NAV_LINKS.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
@@ -98,14 +98,14 @@ export function Navbar() {
|
||||
href={link.href}
|
||||
className={`px-4 py-3 text-body-md font-bold rounded-xl transition-all duration-200 flex items-center justify-between ${
|
||||
isActive
|
||||
? "bg-[#65149A]/10 text-[#65149A]"
|
||||
: "text-[#2A1234]/70 hover:text-[#2A1234] hover:bg-[#2A1234]/5"
|
||||
? "bg-white/10 text-white"
|
||||
: "text-white/70 hover:text-white hover:bg-white/5"
|
||||
}`}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
{link.label}
|
||||
{isActive && (
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#65149A] animate-pulse" />
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
|
||||
@@ -28,118 +28,126 @@ const LEGAL = [
|
||||
|
||||
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
|
||||
<footer className="bg-gradient-to-br from-[#16001D] to-[#25002F] rounded-t-[2.5rem] md:rounded-t-[3.5rem] rounded-b-none overflow-hidden text-white select-none w-full shadow-[0_-12px_40px_rgba(22,0,29,0.12)]">
|
||||
<div className="page-container 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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
{/* Divider */}
|
||||
<div className="border-t border-white/10 w-full mt-[56px] mb-[48px]" />
|
||||
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
</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>
|
||||
<span className="text-sm font-black tracking-tight">+91 80 4912 3456</span>
|
||||
</a>
|
||||
</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>
|
||||
|
||||
@@ -19,7 +19,7 @@ export function PremiumNavbar() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<header className="w-full bg-white border-b border-[#EEE7F4] px-6 md:px-10 h-16 md:h-20 flex items-center relative z-40 select-none">
|
||||
<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) */}
|
||||
<Link
|
||||
@@ -27,7 +27,7 @@ export function PremiumNavbar() {
|
||||
className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
|
||||
>
|
||||
<Image
|
||||
src="/logo.png"
|
||||
src="/logo-light.png"
|
||||
alt="Nearle"
|
||||
width={120}
|
||||
height={30}
|
||||
@@ -45,12 +45,12 @@ export function PremiumNavbar() {
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className={`relative py-1 text-sm font-bold transition-all duration-200 ${
|
||||
isActive ? "text-[#6330D6]" : "text-[#5E5866] hover:text-[#16001D]"
|
||||
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-[#6330D6] rounded-full" />
|
||||
<span className="absolute bottom-[-4px] left-0 right-0 h-0.5 bg-white rounded-full" />
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
@@ -61,13 +61,13 @@ export function PremiumNavbar() {
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
<Link
|
||||
href="#"
|
||||
className="inline-flex items-center justify-center border-2 border-[#6330D6]/20 text-[#6330D6] font-bold px-5 py-1.5 rounded-full text-xs hover:bg-[#6330D6]/5 active:scale-95 transition-all duration-200 whitespace-nowrap"
|
||||
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-[#6330D6] text-white font-bold px-5 py-2 rounded-full text-xs hover:bg-[#5225b8] hover:shadow-md hover:scale-[1.02] active:scale-95 transition-all duration-200 whitespace-nowrap"
|
||||
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>
|
||||
@@ -75,7 +75,7 @@ export function PremiumNavbar() {
|
||||
|
||||
{/* Mobile menu toggle */}
|
||||
<button
|
||||
className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-[#6330D6]/5 text-[#16001D] transition-all active:scale-90 cursor-pointer"
|
||||
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"
|
||||
>
|
||||
@@ -85,7 +85,7 @@ export function PremiumNavbar() {
|
||||
|
||||
{/* Mobile Drawer */}
|
||||
{mobileOpen && (
|
||||
<div className="absolute top-full left-0 right-0 z-50 bg-white border-b border-[#6330D6]/10 shadow-lg p-4 md:hidden animate-fade-in flex flex-col gap-2">
|
||||
<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">
|
||||
{NAV_LINKS.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
return (
|
||||
@@ -94,30 +94,30 @@ export function PremiumNavbar() {
|
||||
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-[#6330D6]/10 text-[#6330D6]"
|
||||
: "text-[#5E5866] hover:text-[#16001D] hover:bg-[#6330D6]/5"
|
||||
? "bg-white/10 text-white"
|
||||
: "text-white/70 hover:text-white hover:bg-white/5"
|
||||
}`}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
{link.label}
|
||||
{isActive && (
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#6330D6]" />
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-white" />
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
<div className="flex flex-col gap-2 pt-2 border-t border-[#6330D6]/5 mt-2">
|
||||
<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-[#6330D6]/20 text-[#6330D6] font-bold py-2.5 rounded-xl text-sm"
|
||||
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-[#6330D6] text-white font-bold py-2.5 rounded-xl text-sm"
|
||||
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>
|
||||
|
||||
@@ -9,35 +9,17 @@ type PremiumPageShellProps = {
|
||||
|
||||
export function PremiumPageShell({ children, className = "" }: PremiumPageShellProps) {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#E8DCF2] p-2 sm:p-3 md:p-4 lg:p-5 xl:p-6 2xl:p-8 font-body text-[#16001D] antialiased">
|
||||
<div className={`
|
||||
mx-auto
|
||||
w-full
|
||||
max-w-[1880px]
|
||||
overflow-hidden
|
||||
rounded-[1.5rem]
|
||||
sm:rounded-[2rem]
|
||||
md:rounded-[2.5rem]
|
||||
lg:rounded-[3rem]
|
||||
border
|
||||
border-white/80
|
||||
bg-white
|
||||
shadow-[0_20px_60px_rgba(93,57,128,0.16)]
|
||||
flex
|
||||
flex-col
|
||||
${className}
|
||||
`}>
|
||||
{/* Header/Navbar */}
|
||||
<PremiumNavbar />
|
||||
<div className={`min-h-screen bg-white font-body text-[#16001D] antialiased flex flex-col ${className}`}>
|
||||
{/* Header/Navbar */}
|
||||
<PremiumNavbar />
|
||||
|
||||
{/* Page Content */}
|
||||
<main className="flex-1 w-full">
|
||||
{children}
|
||||
</main>
|
||||
{/* Page Content */}
|
||||
<main className="flex-1 w-full overflow-x-hidden bg-white">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<PremiumFooter />
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<PremiumFooter />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user