update navbar dropdown
This commit is contained in:
52
public/convenience.svg
Normal file
52
public/convenience.svg
Normal file
@@ -0,0 +1,52 @@
|
||||
<svg fill="none" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Gradient definitions -->
|
||||
<defs>
|
||||
<radialGradient id="shadow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#7C3AED" stop-opacity="0.15" />
|
||||
<stop offset="100%" stop-color="#7C3AED" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<linearGradient id="purpleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#9367F4" />
|
||||
<stop offset="100%" stop-color="#6330D6" />
|
||||
</linearGradient>
|
||||
<linearGradient id="glowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#C9A2FF" stop-opacity="0.8" />
|
||||
<stop offset="100%" stop-color="#7C3AED" stop-opacity="0.2" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Ground shadow -->
|
||||
<ellipse cx="120" cy="180" rx="70" ry="20" fill="url(#shadow)" />
|
||||
|
||||
<!-- Container group -->
|
||||
<g>
|
||||
<!-- Isometric Delivery Box / Package representing doorstep convenience -->
|
||||
<!-- Top Face -->
|
||||
<path d="M120 75 L165 95 L120 115 L75 95 Z" fill="#F5EEFF" stroke="#6330D6" stroke-width="2" stroke-linejoin="round" />
|
||||
<!-- Left Face -->
|
||||
<path d="M75 95 L120 115 L120 160 L75 140 Z" fill="#EBDCFF" stroke="#6330D6" stroke-width="2" stroke-linejoin="round" />
|
||||
<!-- Right Face -->
|
||||
<path d="M120 115 L165 95 L165 140 L120 160 Z" fill="#DFCAFF" stroke="#6330D6" stroke-width="2" stroke-linejoin="round" />
|
||||
|
||||
<!-- Isometric Lid lines -->
|
||||
<path d="M120 115 L120 75" stroke="#6330D6" stroke-width="1.5" stroke-dasharray="3 3" />
|
||||
<path d="M75 95 L165 95" stroke="#6330D6" stroke-width="1.5" stroke-dasharray="3 3" />
|
||||
|
||||
<!-- Location Pin / Doorstep Marker floating above the box -->
|
||||
<g transform="translate(120, 50)">
|
||||
<!-- Pulsing Glow -->
|
||||
<circle cx="0" cy="-10" r="18" fill="url(#glowGradient)" opacity="0.5" />
|
||||
|
||||
<!-- Pin shape -->
|
||||
<path d="M0 8 C-10 -2 -15 -12 -15 -22 C-15 -32 -6 -40 0 -40 C6 -40 15 -32 15 -22 C15 -12 10 -2 0 8 Z" fill="url(#purpleGradient)" />
|
||||
<!-- Inner dot -->
|
||||
<circle cx="0" cy="-22" r="5" fill="#FFFFFF" />
|
||||
</g>
|
||||
|
||||
<!-- Speed/Convenience Motion Lines -->
|
||||
<path d="M50 110 L65 110" stroke="#C9A2FF" stroke-width="3" stroke-linecap="round" opacity="0.7" />
|
||||
<path d="M45 125 L60 125" stroke="#C9A2FF" stroke-width="3" stroke-linecap="round" opacity="0.7" />
|
||||
<path d="M175 120 L190 120" stroke="#7C3AED" stroke-width="3" stroke-linecap="round" opacity="0.7" />
|
||||
<path d="M180 135 L195 135" stroke="#7C3AED" stroke-width="3" stroke-linecap="round" opacity="0.7" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -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"
|
||||
}`}
|
||||
>
|
||||
{/* 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