Nearle/nearle_web_nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update merchant and delivery

Browse Source
This commit is contained in:
Aravind
2026-07-03 13:00:59 +05:30
parent 4f51f772c0
commit 0823fe3333
23 changed files with 242 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/about/page.tsx
View File

@@ -102,12 +102,12 @@ export default function AboutPage() {
>
<MaterialIcon icon={card.icon} size={28} />
</div>
<h3
<p
className="font-display font-black text-[#16001D]"
style={{ fontSize: "clamp(22px, 1.8vw, 30px)", marginTop: 24, marginBottom: 14, lineHeight: 1.2 }}
>
{card.title}
</h3>
</p>
<p
className="text-[#5E5866]"
style={{ fontSize: "clamp(15px, 1.1vw, 18px)", lineHeight: 1.65 }}
@@ -146,7 +146,7 @@ export default function AboutPage() {
<div className="w-12 h-12 rounded-full bg-[#6330D6]/5 text-[#6330D6] flex items-center justify-center mb-4">
<MaterialIcon icon={c.icon} size={22} />
</div>
<h4 className="text-4xl font-display font-black text-[#16001D]">{c.count}</h4>
<p className="text-4xl font-display font-black text-[#16001D]">{c.count}</p>
<p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
{c.label}
</p>

6
src/app/brands/page.tsx
View File

@@ -186,7 +186,7 @@ export default function BrandsPage() {
</span>
</div>
<div>
<h3 className="text-base font-black text-[#16001D] leading-tight mb-2">{item.title}</h3>
<p className="text-base font-black text-[#16001D] leading-tight mb-2">{item.title}</p>
<p className="text-m text-[#5E5866] leading-relaxed">{item.desc}</p>
</div>
</AnimatedCard>
@@ -307,9 +307,9 @@ export default function BrandsPage() {
<div className={`w-12 h-12 rounded-2xl flex items-center justify-center ${step.color} mb-5`}>
<MaterialIcon icon={step.icon} size={24} />
</div>
<h3 className="font-display text-xl font-black text-[#16001D] leading-tight mb-2">
<p className="font-display text-xl font-black text-[#16001D] leading-tight mb-2">
{step.title}
</h3>
</p>
<p className="text-md text-[#5E5866] leading-relaxed">{step.desc}</p>
</AnimatedCard>
))}

12
src/app/businesses/page.tsx
View File

@@ -152,9 +152,9 @@ export default function BusinessesPage() {
<MaterialIcon icon="storefront" size={28} />
</div>
<div className="relative z-10 mt-6 max-w-[260px]">
<h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
<p className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
Get Online
</h3>
</p>
<p className="mt-3 text-base leading-relaxed text-[#5E5866]">
Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.
</p>
@@ -181,9 +181,9 @@ export default function BusinessesPage() {
<MaterialIcon icon="campaign" size={28} />
</div>
<div className="relative z-10 mt-6 max-w-[260px]">
<h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
<p className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
Get Noticed
</h3>
</p>
<p className="mt-3 text-base leading-relaxed text-[#5E5866]">
Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.
</p>
@@ -202,9 +202,9 @@ export default function BusinessesPage() {
<MaterialIcon icon="auto_awesome" size={28} />
</div>
<div className="relative z-10 mt-6 max-w-[260px]">
<h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
<p className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
Get Simplified
</h3>
</p>
<p className="mt-3 text-base leading-relaxed text-[#5E5866]">
Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.
</p>

2
src/app/contact/page.tsx
View File

@@ -38,7 +38,7 @@ export default function ContactPage() {
<MaterialIcon icon="store" size={16} className="text-white" />
</div>
<div className="text-left">
<h4 className="text-xs font-black text-[#16001D]">R.S. Puram Hub</h4>
<p className="text-xs font-black text-[#16001D]">R.S. Puram Hub</p>
<p className="text-[10px] text-[#5E5866] mt-0.5 leading-none">Connecting vendors & residents</p>
</div>
</div>

74
src/app/delivery-partners/page.tsx
View File

@@ -2,8 +2,7 @@ import React from "react";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
import { DeliveryHero } from "@/components/heroes/DeliveryHero";
import { FAQAccordion } from "@/components/ui/FAQAccordion";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
@@ -23,13 +22,6 @@ export const metadata: Metadata = {
},
};
const HERO_STATS = [
{ title: "Flexible Hours", icon: "schedule", desc: "Work when it suits you" },
{ title: "Weekly Payouts", icon: "payments", desc: "Earnings settled every week" },
{ title: "Short Distances", icon: "near_me", desc: "Deliver within your neighbourhood" },
{ title: "Local Support", icon: "support_agent", desc: "Our team is always there" },
];
const BENEFITS = [
{
icon: "access_time",
@@ -161,67 +153,9 @@ const FAQ_ITEMS = [
];
export default function DeliveryPartnersPage() {
const collageCards = [
{ text: "Flexible Hours", icon: "access_time" },
{ text: "Weekly Payouts", icon: "payments" },
{ text: "Local Deliveries", icon: "near_me" },
];
return (
<PremiumPageShell>
{/* ─── Hero Section ─── */}
<section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
<div className="border-b border-[#6330D6]/10">
<div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 max-w-[1600px] mx-auto">
<div className="flex flex-col text-left max-w-xl">
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
Delivery Partners
</span>
<h1 className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight">
Deliver Locally.
<br />
<span className="text-[#6330D6]">Earn Daily.</span>
</h1>
<p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
Join the Nearle delivery network and earn by making short, local deliveries in your neighbourhood, on your own schedule, at your own pace.
</p>
<div className="hidden md:flex md:flex-row md:gap-3.5 mt-8">
<Link
href="/contact"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
>
Join the Delivery Network
</Link>
<a
href="#earnings"
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
>
See Earnings
</a>
</div>
</div>
<div className="w-full">
<HeroVisualCollage
centerImage="/nearlenewlogo.png"
leftImage="/nearle-people.webp"
rightImage="/images/nearle-merchant/delivery-support.webp"
glassCards={collageCards}
isPhoneCenter={false}
/>
</div>
</div>
</div>
<div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 max-w-[1600px] mx-auto">
<FeatureStatsRow items={HERO_STATS} />
</div>
</div>
</section>
<DeliveryHero />
{/* ─── Benefits Grid ─── */}
<section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
@@ -250,7 +184,7 @@ export default function DeliveryPartnersPage() {
<MaterialIcon icon={benefit.icon} size={24} />
</div>
<div>
<h3 className="text-base font-black text-[#16001D] leading-tight">{benefit.title}</h3>
<p className="text-base font-black text-[#16001D] leading-tight">{benefit.title}</p>
<p className="mt-2 text-sm text-[#5E5866] leading-relaxed">{benefit.desc}</p>
</div>
</AnimatedCard>
@@ -291,7 +225,7 @@ export default function DeliveryPartnersPage() {
<MaterialIcon icon={req.icon} size={22} />
</div>
<div>
<h4 className="text-sm font-black text-[#16001D]">{req.title}</h4>
<p className="text-sm font-black text-[#16001D]">{req.title}</p>
<p className="mt-1 text-xs text-[#5E5866] leading-relaxed">{req.desc}</p>
</div>
</AnimatedCard>

2
src/app/globals.css
View File

@@ -723,7 +723,7 @@ body {
backdrop-filter: blur(10px);
}
.experience-card h3 {
.experience-card__title {
color: white;
font-size: clamp(24px, 2vw, 34px);
line-height: 1.1;

78
src/app/merchants/page.tsx
View File

@@ -2,8 +2,7 @@ import React from "react";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
import { MerchantsHero } from "@/components/heroes/MerchantsHero";
import { FAQAccordion } from "@/components/ui/FAQAccordion";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
@@ -22,13 +21,6 @@ export const metadata: Metadata = {
},
};
const HERO_STATS = [
{ title: "Digital Catalogue", icon: "menu_book", desc: "Showcase your products" },
{ title: "QR Ordering", icon: "qr_code", desc: "Scan & order from your store" },
{ title: "Local Discovery", icon: "location_on", desc: "Get found by nearby customers" },
{ title: "Order Management", icon: "assignment", desc: "Track every order live" },
];
const BENEFITS = [
{
icon: "menu_book",
@@ -164,67 +156,9 @@ const FAQ_ITEMS = [
];
export default function MerchantsPage() {
const collageCards = [
{ text: "Digital Catalogue", icon: "menu_book" },
{ text: "Local Orders", icon: "receipt_long" },
{ text: "Nearby Customers", icon: "people_nearby" },
];
return (
<PremiumPageShell>
{/* ─── Hero Section ─── */}
<section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
<div className="border-b border-[#6330D6]/10">
<div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 max-w-[1600px] mx-auto">
<div className="flex flex-col text-left max-w-xl">
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
Merchant Partners
</span>
<h1 className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight">
Bring Your Store Online
<br />
<span className="text-[#6330D6]">with Nearle.</span>
</h1>
<p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
Your neighbourhood customers are already looking for you online. Get discovered, take orders, and grow your business, without leaving your store.
</p>
<div className="hidden md:flex md:flex-row md:gap-3.5 mt-8">
<Link
href="/contact"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
>
Become a Merchant Partner
</Link>
<a
href="#how-it-works"
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
>
See How It Works
</a>
</div>
</div>
<div className="w-full">
<HeroVisualCollage
centerImage="/nearlenewlogo.png"
leftImage="/images/nearle-merchant/catalogue-ui.webp"
rightImage="/nearle-business.webp"
glassCards={collageCards}
isPhoneCenter={false}
/>
</div>
</div>
</div>
<div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 max-w-[1600px] mx-auto">
<FeatureStatsRow items={HERO_STATS} />
</div>
</div>
</section>
<MerchantsHero />
{/* ─── Merchant Benefits Grid ─── */}
<section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
@@ -253,7 +187,7 @@ export default function MerchantsPage() {
<MaterialIcon icon={benefit.icon} size={22} />
</div>
<div>
<h3 className="text-base font-black text-[#16001D] leading-tight">{benefit.title}</h3>
<p className="text-base font-black text-[#16001D] leading-tight">{benefit.title}</p>
<p className="mt-1.5 text-xs md:text-sm text-[#5E5866] leading-relaxed">{benefit.desc}</p>
</div>
</AnimatedCard>
@@ -291,9 +225,9 @@ export default function MerchantsPage() {
<div className={`w-12 h-12 rounded-2xl flex items-center justify-center ${step.color} mb-5`}>
<MaterialIcon icon={step.icon} size={24} />
</div>
<h3 className="font-display text-xl font-black text-[#16001D] leading-tight mb-2">
<p className="font-display text-xl font-black text-[#16001D] leading-tight mb-2">
{step.title}
</h3>
</p>
<p className="text-sm text-[#5E5866] leading-relaxed">{step.desc}</p>
</AnimatedCard>
))}
@@ -342,7 +276,7 @@ export default function MerchantsPage() {
<MaterialIcon icon={reason.icon} size={20} />
</div>
<div>
<h4 className="text-sm font-black text-[#16001D] leading-tight">{reason.title}</h4>
<p className="text-sm font-black text-[#16001D] leading-tight">{reason.title}</p>
<p className="mt-1 text-xs text-[#5E5866] leading-relaxed">{reason.desc}</p>
</div>
</AnimatedCard>

8
src/app/people/page.tsx
View File

@@ -181,7 +181,7 @@ export default function PeoplePage() {
<div className="experience-card__icon">
<MaterialIcon icon={offering.icon} size={22} className="text-white" />
</div>
<h3>{offering.title}</h3>
<p className="experience-card__title">{offering.title}</p>
<p>{offering.descr}</p>
</div>
</article>
@@ -215,7 +215,7 @@ export default function PeoplePage() {
<div className="w-10 h-10 rounded-full bg-[#6330D6]/5 text-[#6330D6] flex items-center justify-center mb-4">
<MaterialIcon icon={s.icon} size={20} />
</div>
<h4 className="text-3xl font-display font-black text-[#16001D]">{s.count}</h4>
<p className="text-3xl font-display font-black text-[#16001D]">{s.count}</p>
<p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
{s.label}
</p>
@@ -293,7 +293,7 @@ export default function PeoplePage() {
<MaterialIcon icon={b.icon} size={20} />
</div>
<div className="text-left relative z-10">
<h4 className="text-base font-black text-white leading-none">{b.title}</h4>
<p className="text-base font-black text-white leading-none">{b.title}</p>
<p className="text-[9px] text-white/50 font-bold tracking-wider uppercase mt-1 mb-1">{b.microcopy}</p>
<p className="text-xs text-white/85 leading-relaxed">{b.text}</p>
</div>
@@ -458,7 +458,7 @@ export default function PeoplePage() {
<MaterialIcon icon={b.icon} size={16} />
</div>
<div>
<h4 className="text-sm font-black text-white leading-tight">{b.title}</h4>
<p className="text-sm font-black text-white leading-tight">{b.title}</p>
<p className="text-xs text-white/70 leading-relaxed mt-0.5">{b.text}</p>
</div>
</div>

4
src/app/privacy/page.tsx
View File

@@ -82,7 +82,7 @@ export default function PrivacyPolicyPage() {
<MaterialIcon icon={point.icon} size={20} />
</div>
<div>
<h4 className="text-sm font-black text-[#16001D]">{point.title}</h4>
<p className="text-sm font-black text-[#16001D]">{point.title}</p>
<p className="text-xs text-[#5E5866] mt-1 leading-relaxed">{point.desc}</p>
</div>
</div>
@@ -246,7 +246,7 @@ export default function PrivacyPolicyPage() {
<PolicySection id="contact" title="Contact and Grievance Officer">
<p>If you have any questions, concerns, or complaints about this Privacy Policy or how Nearle handles your data, please contact:</p>
<div className="mt-5 p-6 rounded-2xl bg-[#FAF7FD] border border-[#6330D6]/10">
<h4 className="text-base font-black text-[#16001D] mb-3">Nearle Privacy Team</h4>
<p className="text-base font-black text-[#16001D] mb-3">Nearle Privacy Team</p>
<div className="space-y-2 text-sm text-[#5E5866]">
<div className="flex gap-2">
<MaterialIcon icon="mail" size={16} className="text-[#6330D6] shrink-0 mt-0.5" />

4
src/app/terms/page.tsx
View File

@@ -84,7 +84,7 @@ export default function TermsOfServicePage() {
<MaterialIcon icon={card.icon} size={20} />
</div>
<div>
<h4 className="text-sm font-black text-[#16001D]">{card.title}</h4>
<p className="text-sm font-black text-[#16001D]">{card.title}</p>
<p className="text-xs text-[#5E5866] mt-1 leading-relaxed">{card.desc}</p>
</div>
</div>
@@ -254,7 +254,7 @@ export default function TermsOfServicePage() {
<TermsSection id="contact" title="10. Contact and Disputes">
<p>For questions about these Terms of Service or to raise a dispute, contact:</p>
<div className="mt-5 p-6 rounded-2xl bg-[#FAF7FD] border border-[#6330D6]/10">
<h4 className="text-base font-black text-[#16001D] mb-3">Nearle Legal Team</h4>
<p className="text-base font-black text-[#16001D] mb-3">Nearle Legal Team</p>
<div className="space-y-2 text-sm text-[#5E5866]">
<div className="flex gap-2">
<MaterialIcon icon="mail" size={16} className="text-[#6330D6] shrink-0 mt-0.5" />