fix footer section padding
This commit is contained in:
BIN
public/images/nearle-how/how-grocery-bag.webp
Normal file
BIN
public/images/nearle-how/how-grocery-bag.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
public/images/nearle-how/how-storefront.webp
Normal file
BIN
public/images/nearle-how/how-storefront.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
@@ -1274,8 +1274,127 @@ main {
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.premium-footer-shell {
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
max-width: 1800px;
|
||||||
|
margin: 32px auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.premium-footer-shell {
|
||||||
|
width: calc(100% - 40px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.premium-footer-shell {
|
||||||
|
width: calc(100% - 64px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) {
|
||||||
|
.premium-footer-shell {
|
||||||
|
width: calc(100% - 96px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Feature Cards (BusinessSection) ─── */
|
||||||
|
.feature-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.feature-card {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1280px) {
|
||||||
|
.feature-card {
|
||||||
|
padding: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card__top {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 52px minmax(0, 1fr);
|
||||||
|
column-gap: 14px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.feature-card__top {
|
||||||
|
grid-template-columns: 72px minmax(0, 1fr);
|
||||||
|
column-gap: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card__icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.feature-card__icon {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card__icon span {
|
||||||
|
font-size: 24px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.feature-card__icon span {
|
||||||
|
font-size: 32px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card__content {
|
||||||
|
min-width: 0;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card h3 {
|
||||||
|
margin: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
font-family: var(--font-display), sans-serif;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: clamp(20px, 2vw, 32px);
|
||||||
|
line-height: 1.12;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
color: var(--brand-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.feature-card h3 {
|
||||||
|
font-size: clamp(24px, 2vw, 32px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card p {
|
||||||
|
margin-top: 12px;
|
||||||
|
max-width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.55;
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.feature-card p {
|
||||||
|
margin-top: 16px;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card__image {
|
||||||
|
margin-top: 24px;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 1.25rem;
|
||||||
|
background-color: var(--brand-accent-light);
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,20 +1,8 @@
|
|||||||
import type { Metadata, Viewport } from "next";
|
import type { Metadata, Viewport } from "next";
|
||||||
import { Jost } from "next/font/google";
|
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
|
||||||
const jost = Jost({
|
const jost = { variable: "font-display" };
|
||||||
subsets: ["latin"],
|
const jostBody = { variable: "font-body" };
|
||||||
weight: ["400", "600", "700", "800"],
|
|
||||||
variable: "--font-display",
|
|
||||||
display: "swap",
|
|
||||||
});
|
|
||||||
|
|
||||||
const jostBody = Jost({
|
|
||||||
subsets: ["latin"],
|
|
||||||
weight: ["400", "600", "700"],
|
|
||||||
variable: "--font-body",
|
|
||||||
display: "swap",
|
|
||||||
});
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
metadataBase: new URL("https://nearle.in"),
|
metadataBase: new URL("https://nearle.in"),
|
||||||
@@ -91,6 +79,10 @@ export default function RootLayout({
|
|||||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;600;700;800&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
</head>
|
</head>
|
||||||
<body className="bg-[#E8DCF2] text-on-surface font-body antialiased" suppressHydrationWarning>
|
<body className="bg-[#E8DCF2] text-on-surface font-body antialiased" suppressHydrationWarning>
|
||||||
{children}
|
{children}
|
||||||
|
|||||||
@@ -309,14 +309,14 @@ export default function PeoplePage() {
|
|||||||
<div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md">
|
<div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md">
|
||||||
<MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
|
<MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
|
||||||
<div className="text-left leading-tight">
|
<div className="text-left leading-tight">
|
||||||
<div className="text-[9px] uppercase font-black text-brand-accent/70">Coming Soon</div>
|
<div className="text-[9px] uppercase font-black text-brand-accent/70">Available on</div>
|
||||||
<div className="text-sm font-black text-white">App Store</div>
|
<div className="text-sm font-black text-white">App Store</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md">
|
<div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md">
|
||||||
<MaterialIcon icon="play_arrow" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
|
<MaterialIcon icon="play_arrow" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
|
||||||
<div className="text-left leading-tight">
|
<div className="text-left leading-tight">
|
||||||
<div className="text-[9px] uppercase font-black text-brand-accent/70">Coming Soon</div>
|
<div className="text-[9px] uppercase font-black text-brand-accent/70">Available on</div>
|
||||||
<div className="text-sm font-black text-white">Google Play</div>
|
<div className="text-sm font-black text-white">Google Play</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -511,14 +511,14 @@ export default function PeoplePage() {
|
|||||||
<div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
|
<div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
|
||||||
<MaterialIcon icon="phone_iphone" size={18} className="text-brand-accent" />
|
<MaterialIcon icon="phone_iphone" size={18} className="text-brand-accent" />
|
||||||
<div className="text-left leading-none">
|
<div className="text-left leading-none">
|
||||||
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Coming Soon</div>
|
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Available on</div>
|
||||||
<div className="text-xs font-black text-white">App Store</div>
|
<div className="text-xs font-black text-white">App Store</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
|
<div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
|
||||||
<MaterialIcon icon="play_arrow" size={18} className="text-brand-accent" />
|
<MaterialIcon icon="play_arrow" size={18} className="text-brand-accent" />
|
||||||
<div className="text-left leading-none">
|
<div className="text-left leading-none">
|
||||||
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Coming Soon</div>
|
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Available on</div>
|
||||||
<div className="text-xs font-black text-white">Google Play</div>
|
<div className="text-xs font-black text-white">Google Play</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ const FEATURES = [
|
|||||||
icon: "menu_book",
|
icon: "menu_book",
|
||||||
visual: "/images/nearle-merchant/catalogue-ui.webp",
|
visual: "/images/nearle-merchant/catalogue-ui.webp",
|
||||||
alt: "Clean grocery catalogue interface preview",
|
alt: "Clean grocery catalogue interface preview",
|
||||||
tone: "bg-primary/5 text-primary",
|
tone: "bg-primary/8 text-primary",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "QR Ordering",
|
title: "QR Ordering",
|
||||||
@@ -17,7 +17,7 @@ const FEATURES = [
|
|||||||
icon: "qr_code",
|
icon: "qr_code",
|
||||||
visual: "/images/nearle-merchant/qr-stand.webp",
|
visual: "/images/nearle-merchant/qr-stand.webp",
|
||||||
alt: "QR ordering stand on a local grocery store counter",
|
alt: "QR ordering stand on a local grocery store counter",
|
||||||
tone: "bg-secondary/5 text-secondary",
|
tone: "bg-secondary/8 text-secondary",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Local Discovery",
|
title: "Local Discovery",
|
||||||
@@ -38,59 +38,96 @@ const FEATURES = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
const BENEFITS = [
|
const BENEFITS = [
|
||||||
"No Commission on your orders",
|
{
|
||||||
"Full Control on pricing",
|
icon: "verified_user",
|
||||||
"Dedicated Support for your business",
|
title: "Verified & Trusted",
|
||||||
"Grow Your Sales in your area",
|
desc: "All stores are verified for quality and reliability.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "groups",
|
||||||
|
title: "2L+ Customers",
|
||||||
|
desc: "Join thousands of merchants already growing with Nearle.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "trending_up",
|
||||||
|
title: "Growing Together",
|
||||||
|
desc: "We provide the tools, you focus on your customers.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "headset_mic",
|
||||||
|
title: "Support That Cares",
|
||||||
|
desc: "Our team is always here to help you succeed.",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export function BusinessSection() {
|
export function BusinessSection() {
|
||||||
return (
|
return (
|
||||||
<section className="section bg-white w-full overflow-hidden">
|
<section className="section bg-white w-full overflow-hidden">
|
||||||
<div className="page-container">
|
<div className="page-container">
|
||||||
<div className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,#ffffff_0%,#fbf7ff_48%,#f3e8f6_100%)] border border-primary/10 shadow-[0_24px_70px_rgba(22,0,29,0.08)] p-5 md:p-8 lg:p-10">
|
<div className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,#ffffff_0%,#fbf7ff_50%,#ede4f5_100%)] border border-primary/10 shadow-[0_24px_70px_rgba(22,0,29,0.08)] p-5 md:p-8 lg:p-10">
|
||||||
<div className="pointer-events-none absolute -left-16 top-24 h-56 w-56 rounded-full bg-primary/5 blur-3xl" />
|
<div className="pointer-events-none absolute -left-16 top-24 h-64 w-64 rounded-full bg-primary/5 blur-3xl" />
|
||||||
<div className="pointer-events-none absolute -right-20 bottom-10 h-64 w-64 rounded-full bg-secondary/5 blur-3xl" />
|
<div className="pointer-events-none absolute -right-20 bottom-10 h-64 w-64 rounded-full bg-secondary/5 blur-3xl" />
|
||||||
|
|
||||||
<div className="relative grid min-w-0 grid-cols-1 gap-6 md:gap-8 xl:grid-cols-[minmax(0,30fr)_minmax(0,28fr)_minmax(0,42fr)] xl:items-stretch">
|
{/*
|
||||||
|
* Grid layout:
|
||||||
|
* mobile (<768px) : 1 col — text → cards (1/row) → success story [via CSS order]
|
||||||
|
* tablet (768–1279px) : 1 col — text → success story → cards 2×2 [via CSS order]
|
||||||
|
* desktop (≥1280px) : 2 col — [left: text + success story] | [right: cards 2×2]
|
||||||
|
*/}
|
||||||
|
<div className="relative grid gap-6 grid-cols-1 md:gap-7
|
||||||
|
xl:grid-cols-[minmax(0,35fr)_minmax(0,65fr)] xl:gap-8 xl:items-start">
|
||||||
|
|
||||||
|
{/* ── 1. Left text content (always col-1 row-1) ── */}
|
||||||
<div className="min-w-0 xl:col-start-1 xl:row-start-1">
|
<div className="min-w-0 xl:col-start-1 xl:row-start-1">
|
||||||
<span className="w-fit text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
|
{/* Badge */}
|
||||||
|
<div className="flex w-fit items-center gap-2 rounded-full border border-secondary/20 bg-secondary/5 px-3 py-1.5">
|
||||||
|
<div className="flex h-5 w-5 items-center justify-center rounded-full bg-secondary/15">
|
||||||
|
<MaterialIcon icon="storefront" size={13} className="text-secondary" />
|
||||||
|
</div>
|
||||||
|
<span className="text-[11px] font-black uppercase tracking-widest text-secondary">
|
||||||
Merchant Partnerships
|
Merchant Partnerships
|
||||||
</span>
|
</span>
|
||||||
<h2 className="text-[clamp(2.25rem,10vw,2.625rem)] md:text-5xl xl:text-[52px] font-display font-black text-brand-dark mt-6 mb-5 leading-tight tracking-tight">
|
</div>
|
||||||
Bring Your Store Online <br className="hidden md:block" />
|
|
||||||
with <span className="text-primary font-normal">Nearle.</span>
|
<h2 className="mt-5 mb-4 font-display font-black text-brand-dark leading-[1.06] tracking-tight text-[clamp(2.5rem,7vw,3.5rem)]">
|
||||||
|
Bring Your Store Online with{" "}
|
||||||
|
<span className="text-primary font-normal">Nearle.</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-body-lg text-on-surface-variant max-w-xl leading-relaxed">
|
|
||||||
|
<p className="text-base text-on-surface-variant leading-relaxed max-w-sm">
|
||||||
Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business.
|
Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="mt-7 space-y-3 text-sm md:text-base">
|
<div className="mt-5 space-y-3">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
|
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-secondary/10">
|
||||||
<MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
|
<MaterialIcon icon="check" size={15} className="text-secondary font-bold" />
|
||||||
</div>
|
</div>
|
||||||
<span className="font-bold text-brand-dark">Stay in control of your pricing and orders</span>
|
<span className="font-bold text-brand-dark text-sm md:text-base">
|
||||||
|
Stay in control of your pricing and orders
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
|
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-secondary/10">
|
||||||
<MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
|
<MaterialIcon icon="check" size={15} className="text-secondary font-bold" />
|
||||||
</div>
|
</div>
|
||||||
<span className="font-bold text-brand-dark">Build direct relationships with local families</span>
|
<span className="font-bold text-brand-dark text-sm md:text-base">
|
||||||
|
Build direct relationships with local families
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-8 flex flex-col gap-4 sm:flex-row xl:flex-col 2xl:flex-row">
|
<div className="mt-7 flex flex-col gap-3">
|
||||||
<Link
|
<Link
|
||||||
href="/businesses"
|
href="/businesses"
|
||||||
className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap bg-primary hover:bg-primary-container text-white font-black px-7 py-3.5 rounded-full text-sm md:text-base hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200 sm:w-auto xl:w-full 2xl:w-auto"
|
className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-full bg-primary px-7 py-3.5 text-base font-black text-white shadow-sm transition-all duration-200 hover:bg-primary-container hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95"
|
||||||
>
|
>
|
||||||
Partner With Nearle
|
Partner With Nearle
|
||||||
<MaterialIcon icon="arrow_forward" size={18} />
|
<MaterialIcon icon="arrow_forward" size={18} />
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/contact"
|
href="/contact"
|
||||||
className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap bg-white hover:bg-surface-container-high text-brand-dark border border-outline-variant/30 font-black px-7 py-3.5 rounded-full text-sm md:text-base hover:shadow-md transition-all duration-300 active:scale-95 sm:w-auto xl:w-full 2xl:w-auto"
|
className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-full border border-outline-variant/40 bg-white px-7 py-3.5 text-base font-black text-brand-dark shadow-sm transition-all duration-300 hover:bg-surface-container-high hover:shadow-md active:scale-95"
|
||||||
>
|
>
|
||||||
Talk to Our Team
|
Talk to Our Team
|
||||||
<MaterialIcon icon="arrow_forward" size={18} />
|
<MaterialIcon icon="arrow_forward" size={18} />
|
||||||
@@ -98,87 +135,100 @@ export function BusinessSection() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="relative h-[clamp(280px,78vw,340px)] min-w-0 overflow-hidden rounded-[2rem] bg-brand-accent-light shadow-[0_26px_60px_rgba(22,0,29,0.14)] md:h-[420px] md:max-h-[420px] xl:col-start-2 xl:row-span-2 xl:row-start-1 xl:h-auto xl:max-h-none xl:min-h-full">
|
{/* ── 2. Feature cards — 2×2 grid (right col on desktop) ──
|
||||||
<Image
|
mobile : order-2 → appears after text, before success story
|
||||||
src="/images/nearle-merchant/merchant-hero.webp"
|
tablet : order-3 → appears after text + success story
|
||||||
alt="Indian local grocery shop owner managing store orders on a laptop"
|
desktop : explicit col-2, row-span-2
|
||||||
fill
|
*/}
|
||||||
sizes="(max-width: 767px) 100vw, (max-width: 1279px) 100vw, 28vw"
|
<div className="min-w-0
|
||||||
className="object-cover object-center"
|
order-2 md:order-3
|
||||||
/>
|
xl:order-none xl:col-start-2 xl:row-start-1 xl:row-span-2
|
||||||
<div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-brand-dark/25 to-transparent" />
|
grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid min-w-0 grid-cols-[104px_minmax(0,1fr)] gap-4 rounded-[1.5rem] xl:col-start-1 xl:row-start-2">
|
|
||||||
<div className="relative min-h-32 overflow-hidden rounded-[1.5rem] bg-brand-accent-light shadow-[0_18px_35px_rgba(22,0,29,0.10)]">
|
|
||||||
<Image
|
|
||||||
src="/images/nearle-merchant/success-owner.webp"
|
|
||||||
alt="Indian grocery shop owner using a smartphone inside a kirana store"
|
|
||||||
fill
|
|
||||||
sizes="104px"
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="min-w-0 rounded-[1.5rem] border border-primary/10 bg-white/90 p-4 shadow-[0_18px_40px_rgba(22,0,29,0.08)] md:p-5">
|
|
||||||
<span className="text-[11px] font-black uppercase tracking-widest text-primary">
|
|
||||||
Success Story
|
|
||||||
</span>
|
|
||||||
<h3 className="mt-2 text-lg font-black leading-tight text-brand-dark md:text-xl">
|
|
||||||
Kumar Provision Store
|
|
||||||
</h3>
|
|
||||||
<p className="mt-2 text-sm leading-relaxed text-on-surface-variant">
|
|
||||||
Nearle helped us reach more customers in our area and manage orders effortlessly.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid min-w-0 grid-cols-1 gap-4 md:grid-cols-[repeat(2,minmax(0,1fr))] xl:col-start-3 xl:row-span-2 xl:row-start-1">
|
|
||||||
{FEATURES.map((feature) => (
|
{FEATURES.map((feature) => (
|
||||||
<div
|
<article
|
||||||
key={feature.title}
|
key={feature.title}
|
||||||
className="flex min-h-[180px] min-w-0 flex-col overflow-hidden rounded-[1.75rem] border border-primary/10 bg-white/92 p-4 shadow-[0_18px_40px_rgba(22,0,29,0.08)] md:min-h-[300px] xl:h-full"
|
className="merchant-feature-card flex min-w-0 flex-col overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white shadow-[0_4px_24px_rgba(22,0,29,0.07)]"
|
||||||
>
|
>
|
||||||
|
<div className="p-5">
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
<div className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl ${feature.tone}`}>
|
<div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl ${feature.tone}`}>
|
||||||
<MaterialIcon icon={feature.icon} size={25} />
|
<MaterialIcon icon={feature.icon} size={22} />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="min-w-0">
|
||||||
<h3 className="text-xl font-black tracking-tight text-brand-dark">
|
<h3 className="text-[1rem] font-black leading-snug tracking-tight text-brand-dark">
|
||||||
{feature.title}
|
{feature.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="mt-2 text-sm leading-relaxed text-on-surface-variant md:max-w-[24ch] xl:max-w-none">
|
<p className="mt-1.5 text-sm leading-relaxed text-on-surface-variant">
|
||||||
{feature.desc}
|
{feature.desc}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="relative mt-auto aspect-[16/8] w-full self-end overflow-hidden rounded-[1.25rem] bg-brand-accent-light md:aspect-[16/10]">
|
</div>
|
||||||
|
<div className="mt-auto w-full overflow-hidden">
|
||||||
<Image
|
<Image
|
||||||
src={feature.visual}
|
src={feature.visual}
|
||||||
alt={feature.alt}
|
alt={feature.alt}
|
||||||
fill
|
width={900}
|
||||||
sizes="(max-width: 767px) 100vw, (max-width: 1279px) 50vw, 21vw"
|
height={560}
|
||||||
className="object-cover"
|
sizes="(max-width: 767px) 90vw, (max-width: 1279px) 45vw, 30vw"
|
||||||
|
className="block h-auto w-full object-cover"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</article>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* ── 3. Success story ──
|
||||||
|
mobile : order-3 → appears after feature cards
|
||||||
|
tablet : order-2 → appears after text, before cards
|
||||||
|
desktop : explicit col-1, row-2 (below text in left column)
|
||||||
|
*/}
|
||||||
|
<div className="min-w-0
|
||||||
|
order-3 md:order-2
|
||||||
|
xl:order-none xl:col-start-1 xl:row-start-2
|
||||||
|
overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white/90 shadow-[0_4px_24px_rgba(22,0,29,0.07)]
|
||||||
|
grid grid-cols-[100px_minmax(0,1fr)]">
|
||||||
|
<div className="relative min-h-[128px] overflow-hidden bg-brand-accent-light">
|
||||||
|
<Image
|
||||||
|
src="/images/nearle-merchant/success-owner.webp"
|
||||||
|
alt="Indian grocery shop owner using a smartphone inside a kirana store"
|
||||||
|
fill
|
||||||
|
sizes="100px"
|
||||||
|
className="object-cover object-center"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 px-4 py-4">
|
||||||
|
<span className="text-[10px] font-black uppercase tracking-widest text-primary">
|
||||||
|
Success Story
|
||||||
|
</span>
|
||||||
|
<h3 className="mt-1.5 text-base font-black leading-tight text-brand-dark">
|
||||||
|
Kumar Provision Store
|
||||||
|
</h3>
|
||||||
|
<p className="mt-1.5 text-sm leading-relaxed text-on-surface-variant">
|
||||||
|
Nearle helped us reach more customers in our area and manage orders effortlessly.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="relative mt-6 flex snap-x snap-mandatory gap-3 overflow-x-auto rounded-[1.75rem] border border-primary/10 bg-white/88 p-4 shadow-[0_18px_40px_rgba(22,0,29,0.07)] md:grid md:grid-cols-[repeat(2,minmax(0,1fr))] md:overflow-visible xl:grid-cols-[repeat(4,minmax(0,1fr))]">
|
{/* ── Benefits strip ── */}
|
||||||
{BENEFITS.map((benefit) => (
|
<div className="relative mt-6 overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white/90 shadow-[0_4px_24px_rgba(22,0,29,0.06)]">
|
||||||
<div key={benefit} className="flex min-w-[230px] snap-start items-center gap-3 px-2 py-2 md:min-w-0">
|
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 divide-y sm:divide-y-0 sm:divide-x divide-primary/8 xl:divide-x xl:divide-y-0">
|
||||||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-secondary/10 text-secondary">
|
{BENEFITS.map((b) => (
|
||||||
<MaterialIcon icon="check_circle" size={20} />
|
<div key={b.title} className="flex items-start gap-3 p-5">
|
||||||
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-secondary/10 text-secondary">
|
||||||
|
<MaterialIcon icon={b.icon} size={20} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-black text-brand-dark">{b.title}</div>
|
||||||
|
<div className="mt-0.5 text-xs leading-relaxed text-on-surface-variant">{b.desc}</div>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-sm font-black leading-snug text-brand-dark">
|
|
||||||
{benefit}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,88 +4,253 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
|||||||
const STEPS = [
|
const STEPS = [
|
||||||
{
|
{
|
||||||
num: "01",
|
num: "01",
|
||||||
title: "Choose Your Area",
|
icon: "storefront",
|
||||||
desc: "See stores available around your neighbourhood.",
|
title: "Get Online",
|
||||||
icon: "location_on",
|
desc: "Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.",
|
||||||
color: "bg-primary/5 text-primary border-primary/10",
|
visual: "store",
|
||||||
image: "/images/nearle-redesign/choose-area.webp",
|
|
||||||
alt: "Hand holding a smartphone with a local map and purple location pins",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
num: "02",
|
num: "02",
|
||||||
title: "Pick Your Favourite Store",
|
icon: "campaign",
|
||||||
desc: "Browse groceries, medicines, and daily essentials nearby.",
|
title: "Get Noticed",
|
||||||
icon: "storefront",
|
desc: "Your products get published to Nearle customers in your neighbourhood through the app. Customers search based on location, products, discounts, and promos.",
|
||||||
color: "bg-secondary/5 text-secondary border-secondary/10",
|
visual: "phone",
|
||||||
image: "/images/nearle-redesign/pick-store.webp",
|
|
||||||
alt: "Customer selecting groceries from a nearby store shelf",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
num: "03",
|
num: "03",
|
||||||
title: "Place Order & Get Delivery",
|
icon: "auto_awesome",
|
||||||
desc: "Order easily and get swift delivery from local partners.",
|
title: "Get Simplified",
|
||||||
icon: "local_shipping",
|
desc: "Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that help your business grow further.",
|
||||||
color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
|
visual: "bag",
|
||||||
image: "/images/nearle-redesign/delivery-doorstep.webp",
|
|
||||||
alt: "Nearle delivery partner handing a grocery bag to a customer",
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export function HowItWorks() {
|
function OrdersCard() {
|
||||||
return (
|
return (
|
||||||
<section className="section bg-white w-full overflow-hidden">
|
<div className="absolute left-3 top-8 hidden w-48 rounded-3xl border border-primary/10 bg-white/95 p-4 shadow-[0_22px_50px_rgba(22,0,29,0.16)] md:block xl:-left-8">
|
||||||
<div className="page-container">
|
<p className="text-xs font-black uppercase tracking-widest text-brand-dark">
|
||||||
{/* Header Section */}
|
Orders Received
|
||||||
<div className="text-center mb-10 md:mb-14">
|
|
||||||
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/10 px-3.5 py-1.5 rounded-full">
|
|
||||||
Simple Process
|
|
||||||
</span>
|
|
||||||
<h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-4 leading-tight tracking-tight">
|
|
||||||
From Your Neighbourhood Store <span className="text-secondary font-normal">to Your Doorstep</span>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Steps Layout - Timeline style */}
|
|
||||||
<div className="relative mt-8 md:mt-10">
|
|
||||||
{/* Connecting Line (Desktop Only) */}
|
|
||||||
<div className="hidden lg:block absolute top-[32px] left-[8%] right-[8%] h-[1px] bg-primary/20 -z-0" />
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-10 lg:gap-12 relative z-10">
|
|
||||||
{STEPS.map((step) => (
|
|
||||||
<div key={step.num} className="flex flex-col items-center lg:items-start text-center lg:text-left group relative">
|
|
||||||
{/* Icon Container with watermark number */}
|
|
||||||
<div className="flex items-center justify-center w-16 h-16 rounded-2xl bg-white border border-primary/10 text-primary shadow-sm mb-6 relative z-10 transition-transform duration-300 group-hover:-translate-y-1">
|
|
||||||
<MaterialIcon icon={step.icon} size={32} />
|
|
||||||
<span className="absolute -top-3.5 -right-3.5 w-9 h-9 rounded-full bg-primary text-white font-display font-black text-sm flex items-center justify-center shadow-md">
|
|
||||||
{step.num}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex w-full max-w-md flex-col items-center gap-5 sm:flex-row sm:text-left lg:items-start">
|
|
||||||
<div className="relative h-32 w-32 shrink-0 overflow-hidden rounded-[1.5rem] bg-brand-accent-light shadow-[0_18px_35px_rgba(22,0,29,0.10)] ring-1 ring-primary/10">
|
|
||||||
<Image
|
|
||||||
src={step.image}
|
|
||||||
alt={step.alt}
|
|
||||||
fill
|
|
||||||
sizes="128px"
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-display text-2xl md:text-[28px] font-black text-brand-dark mb-3 leading-tight">
|
|
||||||
{step.title}
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
|
|
||||||
{step.desc}
|
|
||||||
</p>
|
</p>
|
||||||
|
<svg viewBox="0 0 150 46" className="mt-3 h-12 w-full" aria-hidden="true">
|
||||||
|
<path d="M4 38 C 28 34, 34 20, 54 24 S 83 34, 102 18 S 126 8, 146 12" fill="none" stroke="#006d37" strokeWidth="5" strokeLinecap="round" />
|
||||||
|
<circle cx="146" cy="12" r="5" fill="#006d37" />
|
||||||
|
</svg>
|
||||||
|
<div className="mt-3 space-y-2">
|
||||||
|
{["Fresh groceries", "Daily essentials", "Local offers"].map((item) => (
|
||||||
|
<div key={item} className="flex items-center gap-2 rounded-2xl bg-brand-accent-light/70 px-2.5 py-2">
|
||||||
|
<span className="h-2.5 w-2.5 rounded-full bg-secondary" />
|
||||||
|
<span className="text-xs font-bold text-on-surface-variant">{item}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function StorePhone() {
|
||||||
|
return (
|
||||||
|
<div className="absolute -right-2 bottom-5 hidden w-40 rounded-[2.2rem] border-[7px] border-brand-dark bg-white p-3 shadow-[0_26px_55px_rgba(22,0,29,0.24)] md:block xl:-right-6">
|
||||||
|
<div className="mx-auto mb-3 h-1 w-12 rounded-full bg-brand-dark/25" />
|
||||||
|
<div className="rounded-2xl bg-brand-accent-light p-2">
|
||||||
|
<div className="h-7 rounded-full bg-white px-3 py-1.5 text-[9px] font-bold text-on-surface-variant">
|
||||||
|
Search groceries
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 grid grid-cols-4 gap-1.5">
|
||||||
|
{["Rice", "Veg", "Milk", "Snacks"].map((label) => (
|
||||||
|
<div key={label} className="rounded-xl bg-white px-1 py-1.5 text-center text-[7px] font-bold text-primary">
|
||||||
|
{label}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 space-y-2">
|
||||||
|
{["Kumar Provision", "Fresh Daily", "Neighbour Mart"].map((store, index) => (
|
||||||
|
<div key={store} className="rounded-2xl bg-white p-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className={`h-8 w-8 rounded-xl ${index === 1 ? "bg-secondary/15" : "bg-primary/12"}`} />
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<p className="truncate text-[8px] font-black text-brand-dark">{store}</p>
|
||||||
|
<p className="text-[7px] font-bold text-on-surface-variant">Groceries nearby</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
<button className="mt-3 w-full rounded-full bg-primary py-2 text-[9px] font-black text-white">
|
||||||
|
Cart
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function GrowthPill() {
|
||||||
|
return (
|
||||||
|
<div className="absolute right-8 top-8 hidden md:block xl:-right-2 xl:top-16">
|
||||||
|
<svg className="absolute -left-20 top-9 h-10 w-20 text-primary/45" viewBox="0 0 80 40" fill="none" aria-hidden="true">
|
||||||
|
<path d="M2 34 C 22 8, 50 34, 74 8" stroke="currentColor" strokeWidth="2" strokeDasharray="4 5" />
|
||||||
|
<path d="M69 6 L76 7 L73 14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
</svg>
|
||||||
|
<div className="rounded-full border border-primary/10 bg-white/95 px-5 py-3 text-sm font-black leading-tight text-brand-dark shadow-[0_18px_40px_rgba(22,0,29,0.13)]">
|
||||||
|
More Customers
|
||||||
|
<br />
|
||||||
|
<span className="text-primary">More Growth</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PhoneMapVisual() {
|
||||||
|
return (
|
||||||
|
<div className="relative h-44 w-40 overflow-hidden rounded-[2rem] border-[6px] border-brand-dark bg-white p-3 shadow-[0_18px_40px_rgba(22,0,29,0.16)]">
|
||||||
|
<div className="h-7 rounded-full bg-brand-accent-light px-3 py-1.5 text-[9px] font-bold text-on-surface-variant">
|
||||||
|
Search local stores
|
||||||
|
</div>
|
||||||
|
<div className="relative mt-3 h-24 overflow-hidden rounded-2xl bg-[linear-gradient(135deg,#f8f1fb,#ffffff)]">
|
||||||
|
<div className="absolute inset-0 opacity-40" style={{ backgroundImage: "linear-gradient(#d7c4dd 1px, transparent 1px), linear-gradient(90deg, #d7c4dd 1px, transparent 1px)", backgroundSize: "24px 24px" }} />
|
||||||
|
<MaterialIcon icon="location_on" size={30} className="absolute left-14 top-8 text-primary" />
|
||||||
|
<span className="absolute left-4 top-5 h-2.5 w-2.5 rounded-full bg-primary" />
|
||||||
|
<span className="absolute bottom-4 right-5 h-2.5 w-2.5 rounded-full bg-secondary" />
|
||||||
|
</div>
|
||||||
|
<div className="absolute bottom-3 left-5 right-5 rounded-2xl bg-white p-2 shadow-lg">
|
||||||
|
<p className="text-[9px] font-black text-brand-dark">Your Store</p>
|
||||||
|
<p className="text-[7px] font-bold text-on-surface-variant">Open nearby</p>
|
||||||
|
</div>
|
||||||
|
<span className="absolute -left-2 top-16 rounded-full bg-secondary px-2 py-1 text-[8px] font-black text-white shadow-md">
|
||||||
|
Offers
|
||||||
|
</span>
|
||||||
|
<span className="absolute -right-2 top-24 rounded-full bg-primary px-2 py-1 text-[8px] font-black text-white shadow-md">
|
||||||
|
Shop
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function StepVisual({ type }: { type: string }) {
|
||||||
|
if (type === "store") {
|
||||||
|
return (
|
||||||
|
<Image
|
||||||
|
src="/images/nearle-how/how-storefront.webp"
|
||||||
|
alt="3D local shop storefront with purple awning and now online board"
|
||||||
|
fill
|
||||||
|
sizes="(max-width: 768px) 80vw, 28vw"
|
||||||
|
className="object-contain"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === "phone") {
|
||||||
|
return (
|
||||||
|
<div className="flex h-full items-end justify-end">
|
||||||
|
<PhoneMapVisual />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-full items-end justify-end gap-3">
|
||||||
|
<div className="mb-4 hidden space-y-2 sm:block">
|
||||||
|
{["Offers & Discounts", "Loyal Customers", "Repeat Orders"].map((chip) => (
|
||||||
|
<div key={chip} className="rounded-full border border-primary/10 bg-white px-3 py-2 text-[11px] font-black text-brand-dark shadow-sm">
|
||||||
|
{chip}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="relative h-40 w-44">
|
||||||
|
<Image
|
||||||
|
src="/images/nearle-how/how-grocery-bag.webp"
|
||||||
|
alt="Nearle grocery bag filled with vegetables and packaged products"
|
||||||
|
fill
|
||||||
|
sizes="(max-width: 768px) 60vw, 18vw"
|
||||||
|
className="object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function HowItWorks() {
|
||||||
|
return (
|
||||||
|
<section className="section bg-white w-full overflow-hidden">
|
||||||
|
<div className="page-container">
|
||||||
|
<div className="rounded-[2rem] border border-primary/10 bg-[radial-gradient(circle_at_10%_10%,rgba(101,20,154,0.07),transparent_28%),radial-gradient(circle_at_90%_35%,rgba(0,109,55,0.06),transparent_24%),linear-gradient(135deg,#ffffff_0%,#fbf7ff_55%,#f4e9f8_100%)] p-5 shadow-[0_24px_70px_rgba(22,0,29,0.08)] md:p-8 lg:p-10">
|
||||||
|
<div className="grid min-w-0 grid-cols-1 items-center gap-10 lg:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]">
|
||||||
|
<div className="min-w-0">
|
||||||
|
<span className="inline-flex items-center gap-2 rounded-full border border-secondary/15 bg-secondary/5 px-4 py-2 text-xs font-black uppercase tracking-widest text-secondary">
|
||||||
|
<MaterialIcon icon="eco" size={16} />
|
||||||
|
Together, We Grow
|
||||||
|
</span>
|
||||||
|
<h2 className="mt-6 max-w-3xl font-display text-[clamp(2.5rem,8vw,3.75rem)] font-black leading-[1.02] tracking-tight text-brand-dark lg:text-[64px]">
|
||||||
|
Get set in minutes and delight the{" "}
|
||||||
|
<span className="text-primary font-normal">Neighbourhood</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-6 max-w-2xl text-base leading-relaxed text-on-surface-variant md:text-lg">
|
||||||
|
Nearle is built to help businesses like{" "}
|
||||||
|
<span className="font-black text-primary">Yours</span>{" "}
|
||||||
|
establish a local online presence and empower neighbourhood customers to discover and interact with you directly.
|
||||||
|
</p>
|
||||||
|
<button className="mt-8 inline-flex w-full items-center justify-center gap-2 rounded-full bg-primary px-8 py-4 text-base font-black text-white shadow-[0_16px_30px_rgba(101,20,154,0.22)] transition-transform duration-200 hover:-translate-y-0.5 sm:w-auto">
|
||||||
|
<MaterialIcon icon="forum" size={20} />
|
||||||
|
Talk to an Expert
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative min-h-[360px] md:min-h-[520px]">
|
||||||
|
<div className="relative h-[300px] overflow-hidden rounded-[2rem] bg-brand-accent-light shadow-[0_26px_70px_rgba(22,0,29,0.16)] md:h-[500px]">
|
||||||
|
<Image
|
||||||
|
src="/images/nearle-merchant/merchant-hero.webp"
|
||||||
|
alt="Indian kirana-store owner using a laptop inside a grocery shop"
|
||||||
|
fill
|
||||||
|
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||||
|
className="object-cover object-center"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-brand-dark/25 to-transparent" />
|
||||||
|
</div>
|
||||||
|
<OrdersCard />
|
||||||
|
<StorePhone />
|
||||||
|
<GrowthPill />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-14 text-center md:mt-20">
|
||||||
|
<span className="inline-flex rounded-full bg-primary/8 px-4 py-2 text-xs font-black uppercase tracking-widest text-primary">
|
||||||
|
How It Works
|
||||||
|
</span>
|
||||||
|
<h2 className="mt-5 font-display text-4xl font-black leading-tight tracking-tight text-brand-dark md:text-5xl lg:text-[54px]">
|
||||||
|
Build Your Neighbourhood Brand
|
||||||
|
</h2>
|
||||||
|
<p className="mx-auto mt-4 max-w-2xl text-base leading-relaxed text-on-surface-variant md:text-lg">
|
||||||
|
Three simple milestones to scale your retail reach from offline streets straight into neighbourhood homes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8 grid min-w-0 grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{STEPS.map((step) => (
|
||||||
|
<article
|
||||||
|
key={step.num}
|
||||||
|
className="relative flex min-h-[390px] min-w-0 flex-col overflow-hidden rounded-3xl border border-primary/10 bg-white p-6 shadow-[0_18px_45px_rgba(22,0,29,0.08)] md:min-h-[420px] lg:min-h-[460px]"
|
||||||
|
>
|
||||||
|
<span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-primary/[0.07]">
|
||||||
|
{step.num}
|
||||||
|
</span>
|
||||||
|
<div className="relative z-10 flex h-13 w-13 items-center justify-center rounded-2xl bg-primary/7 text-primary">
|
||||||
|
<MaterialIcon icon={step.icon} size={28} />
|
||||||
|
</div>
|
||||||
|
<div className="relative z-10 mt-7 max-w-[22rem]">
|
||||||
|
<h3 className="font-display text-2xl font-black text-brand-dark md:text-[28px]">
|
||||||
|
{step.title}
|
||||||
|
</h3>
|
||||||
|
<p className="mt-3 text-sm leading-relaxed text-on-surface-variant md:text-base">
|
||||||
|
{step.desc}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="relative z-0 mt-auto h-44 w-full overflow-hidden rounded-[1.5rem] bg-brand-accent-light/60 p-2">
|
||||||
|
<StepVisual type={step.visual} />
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -64,7 +64,7 @@ export function StoreQRSection() {
|
|||||||
App Store
|
App Store
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm font-black">
|
<div className="text-sm font-black">
|
||||||
Coming Soon
|
Available on
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -78,7 +78,7 @@ export function StoreQRSection() {
|
|||||||
Google Play
|
Google Play
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm font-black">
|
<div className="text-sm font-black">
|
||||||
Coming Soon
|
Available on
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -204,7 +204,7 @@ export function StoreQRSection() {
|
|||||||
App Store
|
App Store
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm font-black">
|
<div className="text-sm font-black">
|
||||||
Coming Soon
|
Available on
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -218,7 +218,7 @@ export function StoreQRSection() {
|
|||||||
Google Play
|
Google Play
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm font-black">
|
<div className="text-sm font-black">
|
||||||
Coming Soon
|
Available on
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -28,8 +28,8 @@ const LEGAL = [
|
|||||||
|
|
||||||
export function PremiumFooter() {
|
export function PremiumFooter() {
|
||||||
return (
|
return (
|
||||||
<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)]">
|
<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="page-container pt-16 pb-10 flex flex-col">
|
<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">
|
<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 */}
|
{/* Column 1: Brand & Description */}
|
||||||
<div className="flex flex-col gap-4 md:col-span-2 lg:col-span-1">
|
<div className="flex flex-col gap-4 md:col-span-2 lg:col-span-1">
|
||||||
|
|||||||
@@ -18,7 +18,6 @@ export function PremiumPageShell({ children, className = "" }: PremiumPageShellP
|
|||||||
{children}
|
{children}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<PremiumFooter />
|
<PremiumFooter />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -24,8 +24,8 @@ const path = require('path');
|
|||||||
await page.screenshot({ path: desktopPath, fullPage: true });
|
await page.screenshot({ path: desktopPath, fullPage: true });
|
||||||
console.log('Saved desktop screenshot to:', desktopPath);
|
console.log('Saved desktop screenshot to:', desktopPath);
|
||||||
|
|
||||||
// Mobile Screenshot (390px)
|
// Mobile Screenshot (375px)
|
||||||
await page.setViewport({ width: 390, height: 844, isMobile: true, hasTouch: true });
|
await page.setViewport({ width: 375, height: 844, isMobile: true, hasTouch: true });
|
||||||
await page.goto('http://localhost:3000', { waitUntil: 'networkidle2', timeout: 15000 });
|
await page.goto('http://localhost:3000', { waitUntil: 'networkidle2', timeout: 15000 });
|
||||||
const mobilePath = path.join(__dirname, 'mobile_screenshot.png');
|
const mobilePath = path.join(__dirname, 'mobile_screenshot.png');
|
||||||
await page.screenshot({ path: mobilePath, fullPage: true });
|
await page.screenshot({ path: mobilePath, fullPage: true });
|
||||||
|
|||||||
Reference in New Issue
Block a user