update navbar dropdown
This commit is contained in:
@@ -14,13 +14,28 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
|
||||
|
||||
type NavChild = { label: string; href: string };
|
||||
type NavChild = { label: string; href: string; icon: string; desc: string };
|
||||
type NavLink = { label: string; href: string; children?: NavChild[] };
|
||||
|
||||
const SOLUTIONS_CHILDREN: NavChild[] = [
|
||||
{ label: "For Business", href: "/businesses" },
|
||||
{ label: "For People", href: "/people" },
|
||||
{ label: "For D2C Brands", href: "/brands" },
|
||||
{
|
||||
label: "For Business",
|
||||
href: "/businesses",
|
||||
icon: "storefront",
|
||||
desc: "Run your neighborhood shop online.",
|
||||
},
|
||||
{
|
||||
label: "For People",
|
||||
href: "/people",
|
||||
icon: "shopping_bag",
|
||||
desc: "Order from local stores you trust.",
|
||||
},
|
||||
{
|
||||
label: "For D2C Brands",
|
||||
href: "/brands",
|
||||
icon: "auto_awesome",
|
||||
desc: "Connect regional catalogs direct.",
|
||||
},
|
||||
];
|
||||
|
||||
const NAV_LINKS: NavLink[] = [
|
||||
@@ -29,7 +44,6 @@ const NAV_LINKS: NavLink[] = [
|
||||
{ label: "Platform", href: "/platform" },
|
||||
{ label: "Solutions", href: "/businesses", children: SOLUTIONS_CHILDREN },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
];
|
||||
|
||||
const mobileMenuVariants = {
|
||||
@@ -203,7 +217,7 @@ export function PremiumNavbar() {
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
className="absolute left-1/2 top-full z-50 mt-2 w-56 -translate-x-1/2 overflow-hidden rounded-2xl border border-white/12 bg-[#30226F]/98 p-1.5 shadow-[0_18px_45px_rgba(20,0,30,0.45)] backdrop-blur-xl"
|
||||
className="absolute left-1/2 top-full z-50 mt-3 w-100 -translate-x-1/2 overflow-hidden rounded-2xl border border-white/12 bg-gradient-to-b from-[#1C0F4E] to-[#0A0524] p-2 shadow-[0_24px_50px_rgba(0,0,0,0.55)] backdrop-blur-2xl"
|
||||
role="menu"
|
||||
>
|
||||
{link.children.map((child) => {
|
||||
@@ -214,13 +228,25 @@ export function PremiumNavbar() {
|
||||
href={child.href}
|
||||
role="menuitem"
|
||||
onClick={() => setOpenDropdown(null)}
|
||||
className={`block rounded-xl px-4 py-2.5 text-sm font-bold transition-all duration-200 ${
|
||||
className={`group flex items-start gap-3.5 rounded-xl p-3 transition-all duration-200 ${
|
||||
childActive
|
||||
? "bg-white/15 text-white"
|
||||
: "text-white/75 hover:bg-white/10 hover:text-white"
|
||||
? "bg-white/12 text-white shadow-sm"
|
||||
: "text-white/70 hover:bg-white/[0.07] hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{child.label}
|
||||
{/* Left — Medallion Icon */}
|
||||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-white/10 bg-white/[0.05] text-[#C9A2FF] transition-colors duration-200 group-hover:border-[#C9A2FF]/30 group-hover:bg-[#C9A2FF]/10 group-hover:text-white">
|
||||
<MaterialIcon icon={child.icon} size={18} />
|
||||
</div>
|
||||
{/* Right — Info */}
|
||||
<div className="flex flex-col text-left">
|
||||
<span className="text-lg font-bold tracking-tight leading-none mb-1 text-white group-hover:text-[#C9A2FF] transition-colors">
|
||||
{child.label}
|
||||
</span>
|
||||
<span className="text-[12px] font-normal leading-normal text-white/55 transition-colors group-hover:text-white/70">
|
||||
{child.desc}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
@@ -271,6 +297,16 @@ export function PremiumNavbar() {
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Desktop Action Button */}
|
||||
<div className="hidden lg:block">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center justify-center rounded-full bg-white px-7 py-3 text-sm font-black uppercase tracking-wider text-[#6330D6] shadow-[0_4px_20px_rgba(0,0,0,0.15)] hover:bg-[#FAF7FD] hover:text-[#5225b8] hover:scale-[1.03] active:scale-95 transition-all duration-200"
|
||||
>
|
||||
Contact Us
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Mobile Toggle */}
|
||||
<button
|
||||
type="button"
|
||||
@@ -342,13 +378,13 @@ export function PremiumNavbar() {
|
||||
key={child.href}
|
||||
href={child.href}
|
||||
onClick={closeMobile}
|
||||
className={`flex items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-bold transition-all duration-200 ${
|
||||
className={`flex items-center gap-3 rounded-xl px-4 py-2.5 text-sm font-bold transition-all duration-200 ${
|
||||
childActive
|
||||
? "bg-white/12 text-white"
|
||||
: "text-white/60 hover:bg-white/10 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
<span className="h-1 w-1 rounded-full bg-white/40" />
|
||||
<MaterialIcon icon={child.icon} size={18} className="text-[#C9A2FF]" />
|
||||
{child.label}
|
||||
</Link>
|
||||
);
|
||||
@@ -381,6 +417,17 @@ export function PremiumNavbar() {
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Mobile Contact CTA */}
|
||||
<motion.div variants={mobileItemVariants} className="mt-4 px-4">
|
||||
<Link
|
||||
href="/contact"
|
||||
onClick={closeMobile}
|
||||
className="flex w-full items-center justify-center rounded-full bg-white py-3.5 text-sm font-black uppercase tracking-wider text-[#6330D6] shadow-md active:scale-[0.98] transition-all hover:bg-[#FAF7FD] hover:text-[#5225b8]"
|
||||
>
|
||||
Contact Us
|
||||
</Link>
|
||||
</motion.div>
|
||||
</motion.nav>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
@@ -1,22 +1,107 @@
|
||||
"use client";
|
||||
|
||||
import { ReactNode } from "react";
|
||||
import { motion, useReducedMotion } from "framer-motion";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
import { cardReveal, fadeUp, staggerContainer, staggerSlow, viewport } from "@/lib/animations";
|
||||
|
||||
const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
|
||||
|
||||
const HAVE = [
|
||||
{ img: "/trust.svg", label: "Trust", desc: "Built over years, face to face." },
|
||||
{ img: "/customers.svg", label: "Customers", desc: "Regulars who already walk in." },
|
||||
{ img: "/location.svg", label: "Location", desc: "Minutes from every doorstep." },
|
||||
const HAVE: { img: string; label: string; desc: ReactNode }[] = [
|
||||
{
|
||||
img: "/trust.svg",
|
||||
label: "Trust",
|
||||
desc: (
|
||||
<>
|
||||
Built over years, face to face.
|
||||
<br />
|
||||
Deeply rooted in the community.
|
||||
<br />
|
||||
Built on handshakes and daily greetings.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
img: "/customers.svg",
|
||||
label: "Customers",
|
||||
desc: (
|
||||
<>
|
||||
Regulars who already walk in.
|
||||
<br />
|
||||
Familiar names, familiar preferences.
|
||||
<br />
|
||||
A loyal community built on daily visits.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
img: "/location.svg",
|
||||
label: "Location",
|
||||
desc: (
|
||||
<>
|
||||
Minutes from every doorstep.
|
||||
<br />
|
||||
Closer than any mega warehouse.
|
||||
<br />
|
||||
Fast delivery by design, not by speed.
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const ADD = [
|
||||
{ icon: "auto_awesome", label: "AI", desc: "ProductLLM builds the catalog." },
|
||||
{ icon: "storefront", label: "Digital Storefront", desc: "Their shop, now online." },
|
||||
{ icon: "inventory_2", label: "Inventory", desc: "Live stock, always accurate." },
|
||||
{ icon: "shopping_bag", label: "Ordering", desc: "Pickup and delivery, built in." },
|
||||
const ADD: { icon: string; label: string; desc: ReactNode }[] = [
|
||||
{
|
||||
icon: "auto_awesome",
|
||||
label: "AI",
|
||||
desc: (
|
||||
<>
|
||||
ProductLLM builds the catalog.
|
||||
<br />
|
||||
Zero-effort digitized listings.
|
||||
<br />
|
||||
From shelf to screen in seconds.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: "storefront",
|
||||
label: "Digital Storefront",
|
||||
desc: (
|
||||
<>
|
||||
Their shop, now online.
|
||||
<br />
|
||||
Open 24/7 for neighborhood orders.
|
||||
<br />
|
||||
Modern shopping, locally fulfilled.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: "inventory_2",
|
||||
label: "Inventory",
|
||||
desc: (
|
||||
<>
|
||||
Live stock, always accurate.
|
||||
<br />
|
||||
Real-time updates, zero cancellations.
|
||||
<br />
|
||||
What they see is exactly what they get.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: "shopping_bag",
|
||||
label: "Ordering",
|
||||
desc: (
|
||||
<>
|
||||
Pickup and delivery, built in.
|
||||
<br />
|
||||
Flexible choices for every neighbor.
|
||||
<br />
|
||||
Simple checkout, direct to the store.
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export function AICommerceExplainer() {
|
||||
|
||||
@@ -1,34 +1,67 @@
|
||||
"use client";
|
||||
|
||||
import { ReactNode } from "react";
|
||||
import { motion, useReducedMotion } from "framer-motion";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
import { fadeUp, staggerContainer, viewport } from "@/lib/animations";
|
||||
|
||||
const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
|
||||
|
||||
const STAGES = [
|
||||
const STAGES: { era: string; title: string; desc: ReactNode; icon: string; highlight?: boolean }[] = [
|
||||
{
|
||||
era: "The corner shop",
|
||||
title: "Traditional Retail",
|
||||
desc: "Trust and relationships, built one street at a time.",
|
||||
desc: (
|
||||
<>
|
||||
Trust and relationships, built one street at a time.
|
||||
<br />
|
||||
The heart of the local neighborhood economy.
|
||||
<br />
|
||||
Every customer is known by name, not by ID.
|
||||
</>
|
||||
),
|
||||
icon: "storefront",
|
||||
},
|
||||
{
|
||||
era: "The catalog goes online",
|
||||
title: "E-Commerce",
|
||||
desc: "Endless shelves, but the neighborhood disappears.",
|
||||
desc: (
|
||||
<>
|
||||
Endless shelves, but the neighborhood disappears.
|
||||
<br />
|
||||
Convenient searching, but distant shipping times.
|
||||
<br />
|
||||
Algorithms replace genuine community interactions.
|
||||
</>
|
||||
),
|
||||
icon: "shopping_cart",
|
||||
},
|
||||
{
|
||||
era: "Speed at all costs",
|
||||
title: "Quick Commerce",
|
||||
desc: "Minutes-fast delivery, powered by dark stores.",
|
||||
desc: (
|
||||
<>
|
||||
Minutes-fast delivery, powered by dark stores.
|
||||
<br />
|
||||
High fees and margin pressure on store owners.
|
||||
<br />
|
||||
Faceless transactions that bypass the community.
|
||||
</>
|
||||
),
|
||||
icon: "bolt",
|
||||
},
|
||||
{
|
||||
era: "The store, upgraded",
|
||||
title: "AI Commerce",
|
||||
desc: "Local stores digitized by AI — trust and technology together.",
|
||||
desc: (
|
||||
<>
|
||||
Local stores digitized by AI — trust and technology together.
|
||||
<br />
|
||||
Empowering real owners with bleeding-edge tech.
|
||||
<br />
|
||||
The speed of quick commerce, the soul of local retail.
|
||||
</>
|
||||
),
|
||||
icon: "auto_awesome",
|
||||
highlight: true,
|
||||
},
|
||||
|
||||
@@ -1,25 +1,50 @@
|
||||
"use client";
|
||||
|
||||
import { ReactNode } from "react";
|
||||
import { motion, useReducedMotion } from "framer-motion";
|
||||
import { cardReveal, fadeUp, staggerContainer, viewport } from "@/lib/animations";
|
||||
|
||||
const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
|
||||
|
||||
const CARDS = [
|
||||
const CARDS: { img: string; label: string; desc: ReactNode }[] = [
|
||||
{
|
||||
img: "/trust.svg",
|
||||
label: "Trust",
|
||||
desc: "A face the street has known for years.",
|
||||
desc: (
|
||||
<>
|
||||
A face the street has known for years.
|
||||
<br />
|
||||
Generations of families served with care.
|
||||
<br />
|
||||
A relationship built on personal handshake deals.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
img: "/customers.svg",
|
||||
label: "Community",
|
||||
desc: "Regulars who shop where they belong.",
|
||||
desc: (
|
||||
<>
|
||||
Regulars who shop where they belong.
|
||||
<br />
|
||||
Familiar faces making daily connection points.
|
||||
<br />
|
||||
A vibrant local gathering spot for everyone.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
img: "/location.svg",
|
||||
img: "/convenience.svg",
|
||||
label: "Convenience",
|
||||
desc: "Always minutes from the doorstep.",
|
||||
desc: (
|
||||
<>
|
||||
Always minutes from the doorstep.
|
||||
<br />
|
||||
No long delivery waits, no massive depots.
|
||||
<br />
|
||||
Fulfillment straight from your local corner shop.
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
@@ -90,7 +115,7 @@ export function NeighborhoodStores() {
|
||||
<p className="relative mt-8 font-display font-black text-[#16001D] leading-tight tracking-tight" style={{ fontSize: "clamp(24px, 2.2vw, 30px)" }}>
|
||||
{card.label}
|
||||
</p>
|
||||
<p className="relative mt-2 max-w-[240px] text-[15px] leading-relaxed text-[#5E5866]">
|
||||
<p className="relative mt-2 max-w-[300px] text-[15px] leading-relaxed text-[#5E5866]">
|
||||
{card.desc}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
Reference in New Issue
Block a user