Aravind/nearle-next-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update content

Browse Source
This commit is contained in:
Aravind
2026-06-23 15:05:50 +05:30
parent 9ea89c317f
commit 6cb34f5b8f
17 changed files with 554 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"css.lint.unknownAtRules": "ignore"
}

BIN
public/QR code .png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
public/mobile image.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 242 KiB

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

@@ -1,5 +1,4 @@
import React from "react"; import React from "react";
import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { ContactForm } from "@/components/contact/ContactForm"; import { ContactForm } from "@/components/contact/ContactForm";

10
src/app/globals.css
View File

@@ -688,10 +688,18 @@ body {
max-width: 540px; max-width: 540px;
min-width: 0; min-width: 0;
box-sizing: border-box; box-sizing: border-box;
padding: 40px; padding: 48px 36px;
border-radius: 32px; border-radius: 32px;
} }
@media (max-width: 640px) {
.footer-contact-card {
max-width: 100%;
padding: 32px 20px;
border-radius: 24px;
}
}
.footer-contact-card input, .footer-contact-card input,
.footer-contact-card textarea, .footer-contact-card textarea,
.footer-contact-card button { .footer-contact-card button {

1
src/app/layout.tsx
View File

@@ -88,6 +88,7 @@ export default function RootLayout({
> >
<head> <head>
{/* Material Symbols Outlined */} {/* Material Symbols Outlined */}
{/* eslint-disable-next-line @next/next/no-page-custom-font */}
<link <link
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"

6
src/app/page.tsx
View File

@@ -1,7 +1,10 @@
import { Hero } from "@/components/home/Hero"; import { Hero } from "@/components/home/Hero";
import { ServiceCategories } from "@/components/home/ServiceCategories"; import { ServiceCategories } from "@/components/home/ServiceCategories";
import { WhyNearle } from "@/components/home/WhyNearle";
import { HowItWorks } from "@/components/home/HowItWorks";
import { HyperlocalFeatures } from "@/components/home/HyperlocalFeatures"; import { HyperlocalFeatures } from "@/components/home/HyperlocalFeatures";
import { BusinessSection } from "@/components/home/BusinessSection"; import { BusinessSection } from "@/components/home/BusinessSection";
import { StoreQRSection } from "@/components/home/StoreQRSection";
import { AppPromo } from "@/components/home/AppPromo"; import { AppPromo } from "@/components/home/AppPromo";
export default function HomePage() { export default function HomePage() {
@@ -9,8 +12,11 @@ export default function HomePage() {
<> <>
<Hero /> <Hero />
<ServiceCategories /> <ServiceCategories />
<WhyNearle />
<HowItWorks />
<HyperlocalFeatures /> <HyperlocalFeatures />
<BusinessSection /> <BusinessSection />
<StoreQRSection />
<AppPromo /> <AppPromo />
</> </>
); );

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

@@ -1,7 +1,6 @@
"use client"; "use client";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { MaterialIcon } from "@/components/ui/MaterialIcon";

53
src/components/home/AppPromo.tsx
View File

@@ -3,19 +3,24 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";
const FEATURES = [ const FEATURES = [
{ {
title: "Eco-Friendly Routing", title: "Browse Nearby Stores",
desc: "Our routing software matches you to stores within 2km to minimize delivery times and energy.", desc: "See all available groceries, pharmacies, and eateries in your immediate area.",
icon: "near_me", icon: "store",
}, },
{ {
title: "Live Courier Tracking", title: "Reorder from Favourite Shops",
desc: "See your neighborhood runner on a live map as they collect your essentials and ride to your gate.", desc: "Save your go-to neighborhood stores and reorder your daily needs with a single tap.",
icon: "map", icon: "replay",
}, },
{ {
title: "Secure Digital Payments", title: "Track Your Delivery",
desc: "Enjoy quick checkouts via UPI, credit/debit cards, and integrated wallet coins with cashbacks.", desc: "Get real-time updates as your neighborhood partner delivers your order straight to your door.",
icon: "payments", icon: "local_shipping",
},
{
title: "Discover Local Offers",
desc: "Access exclusive deals, neighborhood sales, and daily promotions from stores near you.",
icon: "local_offer",
}, },
]; ];
@@ -23,7 +28,7 @@ export function AppPromo() {
return ( return (
<section <section
id="download" id="download"
className="py-28 px-6 md:px-12 lg:px-20 xl:px-24 bg-brand-cream overflow-hidden border-t border-outline-variant/10" className="py-16 px-6 md:px-12 lg:px-20 xl:px-24 bg-brand-cream overflow-hidden border-t border-outline-variant/10"
> >
<div className="max-w-container-max mx-auto relative"> <div className="max-w-container-max mx-auto relative">
{/* Background Dot pattern */} {/* Background Dot pattern */}
@@ -39,17 +44,17 @@ export function AppPromo() {
{/* Left Column: Typography, benefits, download actions (7 cols) */} {/* Left Column: Typography, benefits, download actions (7 cols) */}
<div className="md:col-span-7"> <div className="md:col-span-7">
<span className="text-label-sm text-primary uppercase tracking-widest font-black bg-primary/5 px-3.5 py-1.5 rounded-full border border-primary/10"> <span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/5 px-3.5 py-1.5 rounded-full border border-primary/10">
Download Nearle Mobile Download Nearle Mobile
</span> </span>
<h2 className="text-display text-brand-dark mt-6 mb-6 leading-[1.1] tracking-tight"> <h2 className="text-display text-brand-dark mt-6 mb-6 leading-[1.1] tracking-tight">
Get More With Our <br /> Your Neighbourhood, <br />
<span className="text-primary font-black">Mobile Application</span> <span className="text-primary font-black">Now in Your Pocket.</span>
</h2> </h2>
<p className="text-body-lg text-on-surface-variant mb-10 max-w-lg leading-relaxed"> <p className="text-body-lg text-on-surface-variant mb-10 max-w-lg leading-relaxed">
Experience the fastest way to order groceries, hot food, and emergency home maintenance. Download the app today for live updates and community coins. Experience the easiest way to support and order from your local neighborhood shops. Download the app today.
</p> </p>
{/* Benefit Bullets */} {/* Benefit Bullets */}
@@ -60,8 +65,8 @@ export function AppPromo() {
<MaterialIcon icon={item.icon} size={18} className="text-brand-dark" /> <MaterialIcon icon={item.icon} size={18} className="text-brand-dark" />
</div> </div>
<div> <div>
<h4 className="text-label-md font-bold text-brand-dark">{item.title}</h4> <h4 className="text-base md:text-lg font-bold text-brand-dark">{item.title}</h4>
<p className="text-body-md text-on-surface-variant mt-0.5 leading-relaxed"> <p className="text-sm md:text-base text-on-surface-variant mt-0.5 leading-relaxed">
{item.desc} {item.desc}
</p> </p>
</div> </div>
@@ -72,7 +77,7 @@ export function AppPromo() {
{/* Store Badges */} {/* Store Badges */}
<div className="flex flex-wrap gap-4 mt-8"> <div className="flex flex-wrap gap-4 mt-8">
<a <a
href="https://apps.apple.com" href="https://apps.apple.com/us/app/nearle/id1596895375"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="h-14 border border-brand-dark/20 rounded-2xl hover:bg-brand-dark hover:text-white transition-all duration-300 px-6 py-2 flex items-center gap-3 group hover:-translate-y-1 hover:shadow-lg bg-white" className="h-14 border border-brand-dark/20 rounded-2xl hover:bg-brand-dark hover:text-white transition-all duration-300 px-6 py-2 flex items-center gap-3 group hover:-translate-y-1 hover:shadow-lg bg-white"
@@ -81,10 +86,10 @@ export function AppPromo() {
<path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" /> <path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
</svg> </svg>
<div className="text-left leading-tight"> <div className="text-left leading-tight">
<div className="text-[9px] opacity-75 font-semibold tracking-wider uppercase"> <div className="text-xs opacity-75 font-semibold tracking-wider uppercase">
Download on the Download on the
</div> </div>
<div className="text-headline-md font-black -mt-0.5"> <div className="text-sm md:text-base font-black -mt-0.5">
App Store App Store
</div> </div>
</div> </div>
@@ -100,10 +105,10 @@ export function AppPromo() {
<path d="M3.609 1.814L13.414 12 3.609 22.186c-.244-.178-.395-.466-.395-.786V2.6c0-.32.151-.608.395-.786zM14.244 12.83l2.705 2.688-4.073 2.276-4.073 2.276L14.244 12.83zm1-1.66l2.838-2.8 4.153 2.336c.464.26.464.688 0 .948l-4.153 2.336-2.838-2.82zM8.803 4.93l4.073 2.276 4.073 2.276-2.705 2.688L8.803 4.93z" /> <path d="M3.609 1.814L13.414 12 3.609 22.186c-.244-.178-.395-.466-.395-.786V2.6c0-.32.151-.608.395-.786zM14.244 12.83l2.705 2.688-4.073 2.276-4.073 2.276L14.244 12.83zm1-1.66l2.838-2.8 4.153 2.336c.464.26.464.688 0 .948l-4.153 2.336-2.838-2.82zM8.803 4.93l4.073 2.276 4.073 2.276-2.705 2.688L8.803 4.93z" />
</svg> </svg>
<div className="text-left leading-tight"> <div className="text-left leading-tight">
<div className="text-[9px] opacity-75 font-semibold tracking-wider uppercase"> <div className="text-xs opacity-75 font-semibold tracking-wider uppercase">
GET IT ON GET IT ON
</div> </div>
<div className="text-headline-md font-black -mt-0.5"> <div className="text-sm md:text-base font-black -mt-0.5">
Google Play Google Play
</div> </div>
</div> </div>
@@ -125,7 +130,7 @@ export function AppPromo() {
</div> </div>
<Image <Image
src="/images/app-mockup.png" src="/mobile image.jpeg"
alt="Nearle mobile app interface showing neighborhood services" alt="Nearle mobile app interface showing neighborhood services"
width={360} width={360}
height={760} height={760}
@@ -144,8 +149,8 @@ export function AppPromo() {
/> />
</div> </div>
<div> <div>
<p className="text-label-md font-black text-brand-dark">Order Dispatched</p> <p className="text-sm font-black text-brand-dark">Order Confirmed</p>
<p className="text-[10px] text-on-surface-variant font-medium">Runner is arriving in 4 mins</p> <p className="text-xs text-on-surface-variant font-medium mt-1">Your local store is preparing your order</p>
</div> </div>
</div> </div>
</div> </div>

146
src/components/home/BusinessSection.tsx
View File

@@ -1,51 +1,37 @@
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { MaterialIcon } from "@/components/ui/MaterialIcon";
const FEATURES = [ const BENEFITS = [
{ {
title: "Direct Customer Relationship", title: "Digital Catalogue",
desc: "Build long-term direct ties with nearby families. Own your neighborhood presence.", desc: "Showcase your products online easily to nearby customers.",
}, icon: "menu_book",
{
title: "Managed Instant Delivery Fleet",
desc: "We supply professional, verified moped couriers. Focus on your business, not hiring drivers.",
},
{
title: "Neighborhood Demand Trends",
desc: "Use Nearle's analytic insights to track demand, optimize your stock, and launch promos.",
},
];
const STATS = [
{
value: "40%+",
label: "Average Revenue Rise",
icon: "trending_up",
style: "bg-primary text-white", style: "bg-primary text-white",
}, },
{ {
value: "12k+", title: "QR Ordering",
label: "Daily Neighborhood Orders", desc: "Enable existing customers to scan and place orders directly at your counter.",
icon: "shopping_bag", icon: "qr_code",
style: "bg-brand-accent text-brand-dark", style: "bg-brand-accent text-brand-dark",
}, },
{ {
value: "5k+", title: "Local Discovery",
label: "Verified Retail Partners", desc: "Get discovered by residents in your neighbourhood searching for your products.",
icon: "storefront", icon: "explore",
style: "bg-[#faf8f5] border border-outline-variant/20 text-primary", style: "bg-white border border-outline-variant/20 text-primary",
}, },
{ {
value: "24/7", title: "Delivery Support",
label: "Partner Helpdesk Support", desc: "Fulfill orders with your own staff or rely on Nearle's local delivery partners.",
icon: "support_agent", icon: "local_shipping",
style: "bg-[#de96f9]/20 text-primary border border-primary/10", style: "bg-[#de96f9]/20 text-primary border border-primary/10",
}, },
]; ];
export function BusinessSection() { export function BusinessSection() {
return ( return (
<section className="py-28 px-6 md:px-12 lg:px-20 xl:px-24 bg-background"> <section className="py-20 px-6 md:px-12 lg:px-20 xl:px-24 bg-background border-t border-outline-variant/10">
<div className="max-w-container-max mx-auto"> <div className="max-w-container-max mx-auto">
{/* Merchant Section Grid */} {/* Merchant Section Grid */}
@@ -53,59 +39,63 @@ export function BusinessSection() {
{/* Left Column: Feature copywriting (7 cols) */} {/* Left Column: Feature copywriting (7 cols) */}
<div className="lg:col-span-7"> <div className="lg:col-span-7">
<span className="text-label-sm text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15"> <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
Merchant Partnerships Merchant Partnerships
</span> </span>
<h2 className="text-display text-brand-dark mt-6 mb-6 leading-tight"> <h2 className="text-display text-brand-dark mt-6 mb-6 leading-tight">
Grow your local brand in the <span className="text-secondary">Neighborhood.</span> Bring Your Store Online with Nearle.
</h2> </h2>
<p className="text-body-lg text-on-surface-variant mb-12 max-w-xl leading-relaxed"> <p className="text-body-lg text-on-surface-variant mb-10 max-w-xl leading-relaxed">
Unlock delivery, loyalty programs, and localized promotions. Join over 5,000 neighborhood partners who are digitizing their community sales channels. 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="space-y-8 mb-12"> <div className="space-y-4 mb-10 text-sm md:text-base">
{FEATURES.map((feat) => ( <div className="flex items-center gap-3">
<div key={feat.title} className="flex gap-4 group"> <div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-secondary/10 border border-secondary/20 flex items-center justify-center group-hover:bg-secondary group-hover:text-white transition-all duration-300"> <MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
<MaterialIcon
icon="check"
size={18}
className="text-secondary group-hover:text-white transition-colors"
/>
</div> </div>
<div> <span className="font-bold text-brand-dark">Stay in control of your pricing and orders</span>
<h4 className="text-headline-md font-black text-brand-dark group-hover:text-primary transition-colors">
{feat.title}
</h4>
<p className="text-body-md text-on-surface-variant mt-1.5 leading-relaxed">
{feat.desc}
</p>
</div> </div>
<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">
<MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
</div>
<span className="font-bold text-brand-dark">Build direct relationships with local families</span>
</div> </div>
))}
</div> </div>
<button className="bg-primary hover:bg-primary-container text-white font-black px-10 py-4 rounded-full text-label-md hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200 cursor-pointer"> <div className="flex flex-wrap gap-4 mt-8">
Register as Merchant Partner <Link
</button> href="/businesses"
</div> className="bg-primary hover:bg-primary-container text-white font-black px-10 py-4 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"
{/* Right Column: Premium Bento Stats Grid (5 cols) */}
<div className="lg:col-span-5 grid grid-cols-2 gap-6">
{STATS.map((stat, idx) => (
<div
key={stat.value}
className={`p-6 rounded-[2rem] flex flex-col justify-between aspect-square hover:-translate-y-2 hover:shadow-xl transition-all duration-300 ${stat.style} ${idx % 2 === 1 ? "translate-y-6 md:translate-y-8" : ""}`}
> >
<div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center"> Partner With Nearle
<MaterialIcon icon={stat.icon} size={22} /> </Link>
<Link
href="/contact"
className="bg-white hover:bg-surface-container-high text-brand-dark border border-outline-variant/30 font-black px-10 py-4 rounded-full text-sm md:text-base hover:shadow-md transition-all duration-300 active:scale-95 flex items-center gap-2"
>
Talk to Our Team
</Link>
</div>
</div>
{/* Right Column: Benefit Cards Bento Grid (5 cols) */}
<div className="lg:col-span-5 grid grid-cols-2 gap-6">
{BENEFITS.map((benefit, idx) => (
<div
key={benefit.title}
className={`p-8 rounded-[2.5rem] flex flex-col justify-between h-full min-h-[240px] hover:-translate-y-2 hover:shadow-xl transition-all duration-300 ${benefit.style} ${idx % 2 === 1 ? "translate-y-6 md:translate-y-8" : ""}`}
>
<div className={`w-12 h-12 rounded-full flex items-center justify-center shrink-0 ${benefit.style.includes("primary") && !benefit.style.includes("de96f9") ? "bg-white/20" : "bg-primary/5 text-primary"}`}>
<MaterialIcon icon={benefit.icon} size={24} />
</div> </div>
<div> <div>
<p className="text-4xl font-display font-black tracking-tight"> <h3 className="text-xl md:text-2xl font-black tracking-tight leading-tight mb-2">
{stat.value} {benefit.title}
</p> </h3>
<p className="text-label-sm font-semibold mt-1 opacity-90 leading-tight"> <p className="text-sm md:text-base opacity-90 leading-relaxed">
{stat.label} {benefit.desc}
</p> </p>
</div> </div>
</div> </div>
@@ -114,7 +104,7 @@ export function BusinessSection() {
</div> </div>
{/* CURVED PROMO BANNER: Inspired by GoMoto Hottest Pizza Banner */} {/* CURVED PROMO BANNER */}
<div className="mt-32 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl"> <div className="mt-32 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
{/* Decorative background vectors */} {/* Decorative background vectors */}
<div className="absolute right-0 top-0 w-[400px] h-[400px] bg-white/10 rounded-full blur-3xl pointer-events-none" /> <div className="absolute right-0 top-0 w-[400px] h-[400px] bg-white/10 rounded-full blur-3xl pointer-events-none" />
@@ -122,21 +112,21 @@ export function BusinessSection() {
{/* Left copy column */} {/* Left copy column */}
<div className="md:w-3/5 z-10 text-brand-dark"> <div className="md:w-3/5 z-10 text-brand-dark">
<span className="text-[10px] font-black uppercase tracking-widest bg-brand-dark/15 px-3.5 py-1.5 rounded-full"> <span className="text-xs font-black uppercase tracking-widest bg-brand-dark/15 px-3.5 py-1.5 rounded-full">
Piping Hot & Fresh Piping Hot & Fresh
</span> </span>
<h3 className="text-display mt-6 mb-4 leading-[1.1] font-black"> <h3 className="text-display mt-6 mb-4 leading-[1.1] font-black">
Always the Hottest Meals <br />& Freshest Groceries. Everything Nearby, <br />From Stores You Trust.
</h3> </h3>
<p className="text-body-lg text-brand-dark/80 mb-8 max-w-md font-semibold leading-relaxed"> <p className="text-body-lg text-brand-dark/80 mb-8 max-w-md font-semibold leading-relaxed">
Our advanced insulation packs guarantee your hot food stays steaming, and frozen goods stay completely frozen until handed to you. Groceries, medicines, food, and everyday essentials — all from your neighbourhood.
</p> </p>
<a <Link
href="#" href="/people"
className="bg-brand-dark hover:bg-brand-dark/90 text-white font-black px-8 py-3.5 rounded-full text-label-md hover:shadow-2xl transition-all hover:-translate-y-0.5 active:translate-y-0 active:scale-95 duration-200 inline-block shadow-md" className="bg-brand-dark hover:bg-brand-dark/90 text-white font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-2xl transition-all hover:-translate-y-0.5 active:translate-y-0 active:scale-95 duration-200 inline-block shadow-md text-center"
> >
Order Meals Now Explore Stores Now
</a> </Link>
</div> </div>
{/* Right visual column */} {/* Right visual column */}

164
src/components/home/Hero.tsx
View File

@@ -1,4 +1,5 @@
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { MaterialIcon } from "@/components/ui/MaterialIcon";
const QUICK_LINKS = [ const QUICK_LINKS = [
@@ -30,7 +31,7 @@ export function Hero() {
<div className="hero"> <div className="hero">
{/* ─── Base Dark Background Panel (Clipped diagonally) ─── */} {/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
<div className="hero-dark-panel select-none pointer-events-none"> <div className="hero-dark-panel select-none pointer-events-none">
{/* Subtle Background Dot Texture (Minimal, barely visible) */} {/* Subtle Background Dot Texture */}
<div className="hero-map-layer select-none"> <div className="hero-map-layer select-none">
<Image <Image
src="/images/slider-glob.png" src="/images/slider-glob.png"
@@ -42,69 +43,8 @@ export function Hero() {
/> />
</div> </div>
{/* Minimal Route Animation (2-3 thin lines only, very subtle) */}
<svg
className="absolute inset-0 w-full h-full pointer-events-none"
viewBox="0 0 1000 800"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<filter
id="heroRouteGlow"
x="-50%"
y="-50%"
width="200%"
height="200%"
>
<feGaussianBlur stdDeviation="3" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
{/* Minimal glow nodes - only 2 small ones at top */}
<circle
cx="140"
cy="100"
r="5"
className="fill-[#bd34fe] opacity-20 animate-pulse"
filter="url(#heroRouteGlow)"
/>
<circle cx="140" cy="100" r="1.5" className="fill-white" />
<circle {/* Soft purple radial glow */}
cx="300"
cy="80"
r="5"
className="fill-[#bd34fe] opacity-20 animate-pulse"
filter="url(#heroRouteGlow)"
/>
<circle cx="300" cy="80" r="1.5" className="fill-white" />
{/* Only 2 very thin route lines at top - staying clear of text area */}
<path
d="M140,100 Q220,85 300,80"
fill="none"
stroke="#c02cff"
strokeWidth="1"
strokeDasharray="4,4"
className="animate-route opacity-15"
filter="url(#heroRouteGlow)"
/>
<path
d="M300,80 Q370,110 420,140"
fill="none"
stroke="#c02cff"
strokeWidth="1"
strokeDasharray="4,4"
className="animate-route opacity-12"
filter="url(#heroRouteGlow)"
/>
</svg>
{/* Soft purple radial glow behind the diagonal edge (clipped) */}
<div className="absolute right-0 top-1/4 z-0 h-[60%] w-[45%] rounded-full bg-primary/45 blur-[120px] opacity-50 pointer-events-none" /> <div className="absolute right-0 top-1/4 z-0 h-[60%] w-[45%] rounded-full bg-primary/45 blur-[120px] opacity-50 pointer-events-none" />
</div> </div>
@@ -112,26 +52,60 @@ export function Hero() {
<div className="hero-stage relative w-full flex flex-col z-10 md:justify-center md:items-start"> <div className="hero-stage relative w-full flex flex-col z-10 md:justify-center md:items-start">
{/* Left Column: Text & Search Content */} {/* Left Column: Text & Search Content */}
<div className="hero-content text-white select-none"> <div className="hero-content text-white select-none">
<span className="inline-block text-label-md text-brand-accent font-black tracking-widest uppercase mb-5 bg-brand-accent/10 px-5 py-2 rounded-full border border-brand-accent/20"> <span className="inline-block text-xs font-black tracking-widest uppercase mb-5 bg-brand-accent/15 px-4 py-1.5 rounded-full border border-brand-accent/20 text-brand-accent">
Express Services Neighbourhood commerce, made simple
</span> </span>
<h1 className="text-4xl sm:text-5xl lg:text-[64px] xl:text-[78px] 2xl:text-[92px] lg:leading-[0.95] font-display font-black tracking-tight mb-8"> <h1 className="text-4xl sm:text-5xl lg:text-[60px] xl:text-[70px] 2xl:text-[84px] lg:leading-[1.1] font-display font-black tracking-tight mb-8">
Express Your Favourite
<br /> <br />
<span className="text-brand-accent drop-shadow-md"> <span className="text-brand-accent drop-shadow-md">
Neighborhood Local Stores, Now at Your Doorstep.
</span> </span>
</h1> </h1>
<p className="text-body-lg md:text-[22px] md:leading-9 text-white/80 mb-12 leading-relaxed max-w-2xl"> <p className="text-body-lg md:text-[20px] md:leading-8 text-white/90 mb-10 leading-relaxed max-w-2xl">
Get groceries, hot meals, daily essentials, and local professional Order groceries, medicines, food and everyday essentials from trusted stores near you — all in one convenient app.
services delivered from trusted partners within{" "}
<span className="text-brand-accent font-bold">25-30 minutes</span>.
</p> </p>
{/* Mobile/Tablet Only Nearle Bag Logo */} {/* CTAs */}
<div className="hero-mobile-logo block lg:hidden mt-8 select-none pointer-events-none"> <div className="flex flex-wrap gap-4 mt-8">
<Link
href="/people"
className="bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-8 py-4 rounded-xl text-sm md:text-base hover:shadow-xl transition-all duration-300 active:scale-95 flex items-center gap-2"
>
Explore Nearby Stores
</Link>
<Link
href="/businesses"
className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-8 py-4 rounded-xl text-sm md:text-base transition-all duration-300 active:scale-95 flex items-center gap-2"
>
List Your Store
</Link>
</div>
{/* Trust points */}
<div className="flex flex-wrap gap-x-8 gap-y-3 mt-12 text-sm md:text-base text-white/90">
<div className="flex items-center gap-2">
<MaterialIcon icon="store" size={18} className="text-brand-accent" />
<span>Real local shops</span>
</div>
<div className="flex items-center gap-2">
<MaterialIcon icon="sell" size={18} className="text-brand-accent" />
<span>Fair local prices</span>
</div>
<div className="flex items-center gap-2">
<MaterialIcon icon="local_shipping" size={18} className="text-brand-accent" />
<span>Neighbourhood delivery</span>
</div>
<div className="flex items-center gap-2">
<MaterialIcon icon="location_on" size={18} className="text-brand-accent" />
<span>Available in Coimbatore</span>
</div>
</div>
{/* Mobile/Tablet Only Nearle Bag Logo with context pins */}
<div className="hero-mobile-logo block lg:hidden mt-8 select-none pointer-events-none relative">
<div className="relative w-[280px] h-[230px] mx-auto"> <div className="relative w-[280px] h-[230px] mx-auto">
<Image <Image
src="/nearlenewlogo.png" src="/nearlenewlogo.png"
@@ -141,14 +115,30 @@ export function Hero() {
className="object-contain drop-shadow-2xl" className="object-contain drop-shadow-2xl"
priority priority
/> />
{/* Mobile Context Pins */}
<div className="absolute top-[10%] left-[-15px] bg-white/95 backdrop-blur-sm px-3 py-1.5 rounded-xl border border-outline-variant/20 shadow-md flex items-center gap-1.5 animate-float z-10">
<MaterialIcon icon="shopping_basket" size={14} className="text-secondary" />
<span className="text-xs font-black text-brand-dark">Groceries</span>
</div>
<div className="absolute top-[40%] right-[-15px] bg-white/95 backdrop-blur-sm px-3 py-1.5 rounded-xl border border-outline-variant/20 shadow-md flex items-center gap-1.5 animate-float z-10 [animation-delay:1.5s]">
<MaterialIcon icon="medical_services" size={14} className="text-primary" />
<span className="text-xs font-black text-brand-dark">Pharmacy</span>
</div>
<div className="absolute bottom-[5%] left-[5px] bg-white/95 backdrop-blur-sm px-3 py-1.5 rounded-xl border border-outline-variant/20 shadow-md flex items-center gap-1.5 animate-float z-10 [animation-delay:0.7s]">
<MaterialIcon icon="restaurant" size={14} className="text-orange-600" />
<span className="text-xs font-black text-brand-dark">Food</span>
</div>
</div> </div>
</div> </div>
</div> </div>
{/* Right Column: Centered Nearle bag visual */} {/* Right Column: Centered Nearle bag visual with local commerce context pins and route line */}
<div className="hero-visual-layer select-none pointer-events-none"> <div className="hero-visual-layer select-none pointer-events-none relative">
<div className="hero-visual-panel" /> <div className="hero-visual-panel" />
<div className="hero-visual-image">
<div className="hero-visual-image relative">
<Image <Image
src="/nearlenewlogo.png" src="/nearlenewlogo.png"
alt="Nearle delivery" alt="Nearle delivery"
@@ -158,11 +148,25 @@ export function Hero() {
priority priority
/> />
</div> </div>
{/* Context Pins */}
<div className="absolute top-[20%] left-[10%] bg-white/95 backdrop-blur-sm px-3.5 py-2 rounded-2xl border border-outline-variant/20 shadow-lg flex items-center gap-1.5 animate-float z-10">
<MaterialIcon icon="shopping_basket" size={16} className="text-secondary" />
<span className="text-xs font-black text-brand-dark">Groceries</span>
</div>
<div className="absolute top-[45%] right-[5%] bg-white/95 backdrop-blur-sm px-3.5 py-2 rounded-2xl border border-outline-variant/20 shadow-lg flex items-center gap-1.5 animate-float z-10 [animation-delay:1.5s]">
<MaterialIcon icon="medical_services" size={16} className="text-primary" />
<span className="text-xs font-black text-brand-dark">Pharmacy</span>
</div>
<div className="absolute bottom-[25%] left-[15%] bg-white/95 backdrop-blur-sm px-3.5 py-2 rounded-2xl border border-outline-variant/20 shadow-lg flex items-center gap-1.5 animate-float z-10 [animation-delay:0.7s]">
<MaterialIcon icon="restaurant" size={16} className="text-orange-600" />
<span className="text-xs font-black text-brand-dark">Food</span>
</div>
</div> </div>
</div> </div>
</div> </div>
{/* Overlapping Quick Category Links (Moved outside of .hero for correct overflow behavior) */} {/* Overlapping Quick Category Links */}
<div className="service-cards-wrapper max-w-container-max mx-auto"> <div className="service-cards-wrapper max-w-container-max mx-auto">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{QUICK_LINKS.map((item) => ( {QUICK_LINKS.map((item) => (
@@ -178,10 +182,10 @@ export function Hero() {
/> />
</div> </div>
<div className="flex-grow"> <div className="flex-grow">
<h3 className="text-label-md font-extrabold text-brand-dark group-hover:text-primary transition-colors"> <h3 className="text-sm md:text-base font-extrabold text-brand-dark group-hover:text-primary transition-colors">
{item.name} {item.name}
</h3> </h3>
<p className="text-[11px] text-on-surface-variant font-medium mt-0.5 leading-tight"> <p className="text-xs text-on-surface-variant font-medium mt-0.5 leading-tight">
{item.label} {item.label}
</p> </p>
</div> </div>

74
src/components/home/HowItWorks.tsx Normal file
View File

@@ -0,0 +1,74 @@
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const STEPS = [
{
num: "01",
title: "Choose Your Area",
desc: "See stores available around your neighbourhood.",
icon: "location_on",
color: "bg-primary/5 text-primary border-primary/10",
},
{
num: "02",
title: "Pick Your Favourite Store",
desc: "Browse groceries, medicines, food, and daily essentials from nearby shops.",
icon: "storefront",
color: "bg-secondary/5 text-secondary border-secondary/10",
},
{
num: "03",
title: "Place Order & Get Delivery",
desc: "Order easily and get it delivered by the store or a Nearle delivery partner.",
icon: "local_shipping",
color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
},
];
export function HowItWorks() {
return (
<section className="bg-background py-16 px-6 md:px-12 lg:px-20 xl:px-24 border-t border-outline-variant/10">
<div className="max-w-container-max mx-auto">
{/* Header Section */}
<div className="text-center mb-12">
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full">
Simple Process
</span>
<h2 className="text-display text-brand-dark mt-3 leading-tight">
From Your Neighbourhood Store <span className="text-secondary font-normal">to Your Doorstep</span>
</h2>
</div>
{/* Steps Layout */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 relative">
{/* Connector Line (Desktop Only) */}
<div className="hidden lg:block absolute top-[44px] left-[15%] right-[15%] h-[2px] bg-dashed border-t border-dashed border-outline-variant/30 -z-10" />
{STEPS.map((step) => (
<div
key={step.num}
className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-lg flex flex-col h-full relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300"
>
{/* Step number watermark */}
<div className="absolute top-4 right-6 text-4xl font-black text-brand-dark/10 select-none">
{step.num}
</div>
{/* Step Circle with Icon */}
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 shadow-sm ${step.color}`}>
<MaterialIcon icon={step.icon} size={28} />
</div>
{/* Title & Description */}
<h3 className="font-display text-xl font-black text-brand-dark mb-3">
{step.title}
</h3>
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
{step.desc}
</p>
</div>
))}
</div>
</div>
</section>
);
}

115
src/components/home/HyperlocalFeatures.tsx
View File

@@ -1,27 +1,33 @@
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { MaterialIcon } from "@/components/ui/MaterialIcon";
const FEATURES = [ const FEATURES = [
{ {
title: "Verified Community Partners", title: "Trusted Nearby Stores",
icon: "verified_user", icon: "store",
desc: "Every merchant on Nearle is manually verified for food hygiene, service quality, and local licensing.", desc: "Connect directly with the local merchants you know and shop from regularly.",
}, },
{ {
title: "Eco-Friendly 2KM Logistics", title: "Short-Distance Local Delivery",
icon: "electric_moped", icon: "local_shipping",
desc: "By capping deliveries at 2km, we run a fast, eco-friendly moped fleet that reduces emissions and saves fuel.", desc: "Delivered quickly from shops in your immediate area to keep food hot and groceries fresh.",
}, },
{ {
title: "Exclusive Society Discounting", title: "Easy Reorders",
icon: "local_activity", icon: "replay",
desc: "We coordinate with housing societies to negotiate collective discount rates and free scheduled delivery runs.", desc: "Save your favourite stores and reorder your weekly essentials in seconds.",
},
{
title: "Support Local Businesses",
icon: "favorite",
desc: "Help neighbourhood stores thrive and remain competitive in a digital world.",
}, },
]; ];
export function HyperlocalFeatures() { export function HyperlocalFeatures() {
return ( return (
<section className="bg-background py-28 px-6 md:px-12 lg:px-20 xl:px-24 relative overflow-hidden border-y border-outline-variant/10"> <section className="bg-background py-16 px-6 md:px-12 lg:px-20 xl:px-24 relative overflow-hidden border-y border-outline-variant/10">
{/* Scoped CSS styles for precise layout enforcement */} {/* Scoped CSS styles for precise layout enforcement */}
<style>{` <style>{`
@media (min-width: 901px) { @media (min-width: 901px) {
@@ -64,80 +70,85 @@ export function HyperlocalFeatures() {
<div className="custom-care-grid mx-auto grid items-center"> <div className="custom-care-grid mx-auto grid items-center">
{/* Left Column: Visual Storytelling */} {/* Left Column: Visual Storytelling */}
<div className="custom-care-visual w-full justify-self-center relative rounded-[32px] border-2 border-white/90 bg-gradient-to-br from-[#fdfbf7] to-[#f5f0e6] shadow-[0_20px_50px_rgba(20,0,30,0.12)] z-10"> <div className="custom-care-visual w-full justify-self-center relative rounded-[32px] border border-outline-variant/15 bg-slate-100 shadow-[0_20px_50px_rgba(20,0,30,0.12)] z-10 overflow-hidden">
{/* Grocery image inside the lower area (occupies exactly 62% height) */} {/* Main Background Cover Image */}
<div className="absolute inset-x-0 bottom-0 h-[62%] w-full overflow-hidden select-none pointer-events-none"> <div className="absolute inset-0 w-full h-full select-none pointer-events-none opacity-40 filter saturate-[0.7] blur-[1px]">
<Image <Image
src="/images/cat-daily-essentials.png" src="/images/cat-daily-essentials.png"
alt="Fresh groceries and goods delivered at home" alt="Local store background"
fill fill
sizes="(max-width: 900px) 420px, 470px" sizes="(max-width: 900px) 420px, 470px"
className="object-cover object-bottom block transition-transform duration-500 hover:scale-[1.02]" className="object-cover"
priority priority
/> />
</div> </div>
{/* Eco-Friendly floating pill */} {/* Banner Label at Top */}
<div className="absolute bottom-[22px] left-[22px] right-[22px] bg-white/95 backdrop-blur-sm p-4 rounded-2xl border border-outline-variant/15 shadow-xl z-20"> <div className="absolute top-6 left-6 right-6 bg-white/95 backdrop-blur-sm p-4 rounded-2xl border border-outline-variant/20 shadow-lg z-30 text-center">
<div className="flex items-center gap-3"> <span className="text-xs text-primary font-black uppercase tracking-wider block mb-1">Local Order</span>
<div className="w-9 h-9 rounded-full bg-brand-accent/15 flex items-center justify-center flex-shrink-0"> <h4 className="text-sm md:text-base font-black text-brand-dark">“Your favourite local store, now online.”</h4>
<MaterialIcon icon="eco" className="text-brand-accent" size={20} />
</div> </div>
<div>
<h4 className="text-[13px] font-black text-brand-dark leading-tight">100% Eco-Friendly</h4> {/* Main Store/Product Card (Middle floating) */}
<p className="text-[10px] text-on-surface-variant font-bold mt-0.5 leading-none">Reducing neighbor carbon footprint</p> <div className="absolute top-[34%] left-[6%] right-[6%] bg-white rounded-2xl p-4.5 border border-outline-variant/20 shadow-xl z-30 flex items-center gap-4 hover:scale-[1.01] transition-transform duration-300">
<div className="w-14 h-14 rounded-xl relative overflow-hidden bg-brand-accent/10 shrink-0">
<Image src="/images/cat-daily-essentials.png" alt="Local store" fill className="object-cover" />
</div>
<div className="flex-1 min-w-0">
<h5 className="text-sm md:text-base font-black text-brand-dark truncate">Sri Krishna Groceries</h5>
<p className="text-xs text-on-surface-variant mt-0.5 truncate">Fresh Harvest & Daily Needs</p>
<div className="flex items-center gap-1 mt-1.5">
<MaterialIcon icon="star" size={14} className="text-amber-500" />
<span className="text-xs font-bold text-brand-dark">4.9</span>
<span className="text-xs text-on-surface-variant/80 ml-1">· Coimbatore</span>
</div> </div>
</div> </div>
</div> </div>
{/* Floating Proof Badges near the image (Desktop only, hidden below 900px) */} {/* Small Delivery Status Card (Bottom floating) */}
<div className="absolute top-[40px] -left-[24px] hidden min-[901px]:flex items-center gap-2 bg-white px-4 py-2.5 rounded-full border border-outline-variant/15 shadow-lg z-30 select-none pointer-events-none"> <div className="absolute bottom-[6%] left-[6%] right-[6%] bg-[#006d37] text-white rounded-2xl p-4 border border-white/10 shadow-xl z-30 flex items-center gap-3 animate-pulse-subtle">
<div className="w-6 h-6 rounded-full bg-brand-accent/10 flex items-center justify-center"> <div className="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center shrink-0">
<MaterialIcon icon="location_on" className="text-brand-accent" size={14} /> <MaterialIcon icon="check" size={16} className="text-white font-bold" />
</div> </div>
<span className="text-[11px] font-black text-brand-dark tracking-wide uppercase">2KM Local Delivery</span> <div className="min-w-0">
<p className="text-xs md:text-sm font-black">Order Confirmed</p>
<p className="text-xs text-white/80 font-medium mt-0.5">Your local store is preparing your order</p>
</div> </div>
<div className="absolute top-[144px] -right-[24px] hidden min-[901px]:flex items-center gap-2 bg-white px-4 py-2.5 rounded-full border border-outline-variant/15 shadow-lg z-30 select-none pointer-events-none">
<div className="w-6 h-6 rounded-full bg-brand-accent/10 flex items-center justify-center">
<MaterialIcon icon="verified" className="text-brand-accent" size={14} />
</div>
<span className="text-[11px] font-black text-brand-dark tracking-wide uppercase">Verified Partners</span>
</div> </div>
</div> </div>
{/* Right Column: Dark Feature Panel */} {/* Right Column: Dark Feature Panel */}
<div className="custom-care-card w-full rounded-[36px] bg-[#16001d] text-white shadow-[0_24px_60px_rgba(20,0,30,0.18)] relative overflow-hidden z-10"> <div className="custom-care-card w-full rounded-[36px] bg-[#16001d] text-white shadow-[0_24px_60px_rgba(20,0,30,0.18)] relative overflow-hidden z-10">
{/* Internal ambient glows (subtle) */} {/* Internal ambient glows */}
<div className="absolute right-0 top-0 w-64 h-64 bg-brand-accent/5 rounded-full blur-3xl pointer-events-none" /> <div className="absolute right-0 top-0 w-64 h-64 bg-brand-accent/5 rounded-full blur-3xl pointer-events-none" />
<div className="absolute -left-16 -bottom-16 w-48 h-48 bg-primary/10 rounded-full blur-2xl pointer-events-none" /> <div className="absolute -left-16 -bottom-16 w-48 h-48 bg-primary/10 rounded-full blur-2xl pointer-events-none" />
<div className="relative z-10"> <div className="relative z-10">
<span className="text-label-sm text-brand-accent uppercase tracking-widest font-black bg-brand-accent/10 px-3.5 py-1.5 rounded-full border border-brand-accent/20"> <span className="text-xs text-brand-accent uppercase tracking-widest font-black bg-brand-accent/10 px-3.5 py-1.5 rounded-full border border-brand-accent/20">
Care & Quality Community & Trust
</span> </span>
<h3 className="text-display mt-6 mb-8 leading-tight tracking-tight"> <h3 className="text-display mt-6 mb-8 leading-tight tracking-tight">
Relax at Home,<br /> Built Around Your<br />
<span className="text-brand-accent font-black">We Care.</span> <span className="text-brand-accent font-black">Neighbourhood</span>
</h3> </h3>
<p className="text-body-lg text-white/70 mb-10 max-w-lg leading-relaxed"> <p className="text-body-lg text-white/70 mb-10 max-w-lg leading-relaxed">
Nearle connects you to local, trusted neighborhood shops, bringing you the best essentials while taking care of the logistics and safety standards. Nearle brings the convenience of an app to the stores you already know and trust, making it easy to support local shops.
</p> </p>
{/* Features List with vertical connector line */} {/* Features List with vertical connector line */}
<div className="relative space-y-8"> <div className="relative space-y-8">
{/* Vertical connector line (orange low-opacity) */} {/* Vertical connector line */}
<div className="absolute left-6 top-6 bottom-6 w-0.5 bg-brand-accent/20 -translate-x-1/2 z-0" /> <div className="absolute left-6 top-6 bottom-6 w-0.5 bg-brand-accent/20 -translate-x-1/2 z-0" />
{FEATURES.map((item) => ( {FEATURES.map((item) => (
<div key={item.title} className="flex gap-5 group relative z-10"> <div key={item.title} className="flex gap-5 group relative z-10">
{/* Orange icon circle */} {/* Icon circle */}
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-brand-accent text-brand-dark flex items-center justify-center shadow-md relative z-10 group-hover:scale-105 transition-transform duration-300"> <div className="flex-shrink-0 w-12 h-12 rounded-full bg-brand-accent text-brand-dark flex items-center justify-center shadow-md relative z-10 group-hover:scale-105 transition-transform duration-300">
<MaterialIcon <MaterialIcon
icon={item.icon} icon={item.icon}
@@ -150,7 +161,7 @@ export function HyperlocalFeatures() {
<h4 className="text-headline-md font-black text-white group-hover:text-brand-accent transition-colors"> <h4 className="text-headline-md font-black text-white group-hover:text-brand-accent transition-colors">
{item.title} {item.title}
</h4> </h4>
<p className="text-body-md text-white/60 mt-1 leading-relaxed"> <p className="text-sm md:text-base text-white/60 mt-1 leading-relaxed">
{item.desc} {item.desc}
</p> </p>
</div> </div>
@@ -163,23 +174,23 @@ export function HyperlocalFeatures() {
{/* Onboarding Call to Action */} {/* Onboarding Call to Action */}
<div className="mt-8 flex flex-wrap gap-6 items-center relative z-10"> <div className="mt-8 flex flex-wrap gap-6 items-center relative z-10">
<a <Link
href="#download" href="/#download"
className="bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-black px-8 py-3.5 rounded-full text-label-md hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200" className="bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
> >
Get Nearle App Get Nearle App
</a> </Link>
<a <Link
href="#" href="/businesses"
className="text-white hover:text-brand-accent font-bold text-label-md flex items-center gap-1 group py-2" className="text-white hover:text-brand-accent font-bold text-sm md:text-base flex items-center gap-1 group py-2"
> >
Partner Code of Ethics <span>Learn How to Partner</span>
<MaterialIcon <MaterialIcon
icon="arrow_forward" icon="arrow_forward"
size={16} size={16}
className="transition-transform group-hover:translate-x-1" className="transition-transform group-hover:translate-x-1"
/> />
</a> </Link>
</div> </div>
</div> </div>

109
src/components/home/ServiceCategories.tsx
View File

@@ -1,95 +1,91 @@
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { MaterialIcon } from "@/components/ui/MaterialIcon";
const CATEGORIES = [ const CATEGORIES = [
{ {
name: "Hot Food", name: "Groceries & Daily Essentials",
image: "/images/cat-hot-food.png",
tag: "Popular",
tagStyle: "bg-brand-accent text-brand-dark",
desc: "Fresh meals, bakes & street favorites",
stats: "★ 4.8 (250+ kitchens)",
cta: "Order Now",
},
{
name: "Daily Essentials",
image: "/images/cat-daily-essentials.png", image: "/images/cat-daily-essentials.png",
tag: "15 Mins", tag: "Local Store",
tagStyle: "bg-secondary text-white", tagStyle: "bg-secondary text-white",
desc: "Groceries, fresh fruits & veggies", desc: "Fresh groceries, dairy, and household essentials from nearby shops.",
stats: "★ 4.9 (180+ stores)",
cta: "Shop Fresh", cta: "Shop Fresh",
}, },
{ {
name: "Health & Wellness", name: "Medicines & Pharmacy",
image: "/images/cat-health-wellness.png", image: "/images/cat-health-wellness.png",
tag: "24/7 Delivery", tag: "Available Near You",
tagStyle: "bg-primary text-white", tagStyle: "bg-primary text-white",
desc: "Medicines & daily health supplies", desc: "Prescription medicines and wellness supplies from verified pharmacies.",
stats: "★ 4.7 (95+ pharmacies)",
cta: "Order Meds", cta: "Order Meds",
}, },
{ {
name: "Home Services", name: "Food & Snacks",
image: "/images/cat-home-services.png", image: "/images/cat-hot-food.png",
tag: "Verified Professionals", tag: "Nearby",
tagStyle: "bg-blue-600 text-white", tagStyle: "bg-brand-accent text-brand-dark",
desc: "Electricians, cleaning & repairs", desc: "Fresh meals, bakes, and local snacks from neighbourhood kitchens.",
stats: "★ 4.9 (340+ experts)", cta: "Order Now",
cta: "Book Service",
}, },
{ {
name: "Pet Essentials", name: "Fresh Fruits & Vegetables",
image: "/images/cat-daily-essentials.png",
tag: "Local Store",
tagStyle: "bg-secondary text-white",
desc: "Farm-fresh fruits and vegetables delivered from trusted local vendors.",
cta: "Browse Fresh",
},
{
name: "Home Needs",
image: "/images/cat-pet-essentials.png", image: "/images/cat-pet-essentials.png",
tag: "Express", tag: "Available Near You",
tagStyle: "bg-orange-500 text-white", tagStyle: "bg-orange-500 text-white",
desc: "Pet food, toys & grooming care", desc: "Kitchen supplies, household cleaners, and other daily utility items.",
stats: "★ 4.8 (60+ partners)", cta: "Shop Needs",
cta: "Shop Pet",
}, },
{ {
name: "More Services", name: "Local Services",
image: null, image: "/images/cat-home-services.png",
tag: "Hyperlocal", tag: "Nearby",
tagStyle: "bg-surface-variant text-on-surface", tagStyle: "bg-blue-600 text-white",
desc: "Laundry, car wash, tailoring & more", desc: "Verified local handymen, laundry, tailors, and household help.",
stats: "★ 5.0 (500+ services)", cta: "Book Service",
cta: "Explore All",
}, },
]; ];
export function ServiceCategories() { export function ServiceCategories() {
return ( return (
<section className="bg-background pt-32 pb-24 px-6 md:px-12 lg:px-20 xl:px-24"> <section className="bg-background py-20 px-6 md:px-12 lg:px-20 xl:px-24">
<div className="max-w-container-max mx-auto"> <div className="max-w-container-max mx-auto">
{/* Header Section */} {/* Header Section */}
<div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 gap-4"> <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 gap-4">
<div> <div>
<span className="text-label-sm text-primary uppercase tracking-widest font-black bg-primary/5 px-3 py-1 rounded-full"> <span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/5 px-3 py-1.5 rounded-full">
Neighborhood Offerings Neighbourhood Offerings
</span> </span>
<h2 className="text-display text-brand-dark mt-3 leading-tight"> <h2 className="text-display text-brand-dark mt-3 leading-tight">
Popular Services <span className="text-primary font-normal">Near You</span> Explore Stores <span className="text-primary font-normal">Near You</span>
</h2> </h2>
<p className="text-body-lg text-on-surface-variant mt-2 max-w-xl"> <p className="text-body-lg text-on-surface-variant mt-2 max-w-xl">
From fresh groceries to emergency services, everything in your 2km radius delivered instantly. Groceries, medicines, food, and everyday essentials from nearby local shops.
</p> </p>
</div> </div>
<a <Link
href="#" href="/people"
className="text-primary text-label-md font-black flex items-center gap-1 hover:gap-2 transition-all group" className="text-primary text-sm md:text-base font-black flex items-center gap-1 hover:gap-2 transition-all group"
> >
View All Categories View All Categories
<MaterialIcon icon="arrow_forward" size={18} className="transition-transform group-hover:translate-x-1" /> <MaterialIcon icon="arrow_forward" size={18} className="transition-transform group-hover:translate-x-1" />
</a> </Link>
</div> </div>
{/* Categories Premium Grid */} {/* Categories Premium Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{CATEGORIES.map((cat) => ( {CATEGORIES.map((cat) => (
<div <Link
key={cat.name} key={cat.name}
className="bg-white rounded-[2rem] border border-outline-variant/10 shadow-lg overflow-hidden premium-card flex flex-col group h-full" href="/people"
className="bg-white rounded-[2rem] border border-outline-variant/10 shadow-lg overflow-hidden premium-card flex flex-col group h-full cursor-pointer"
> >
{/* Image Container */} {/* Image Container */}
<div className="relative aspect-[4/3] w-full overflow-hidden bg-surface-container/30"> <div className="relative aspect-[4/3] w-full overflow-hidden bg-surface-container/30">
@@ -110,28 +106,25 @@ export function ServiceCategories() {
)} )}
{/* Overlaid Badge */} {/* Overlaid Badge */}
<div className={`absolute top-4 left-4 text-[10px] font-black uppercase tracking-wider px-3.5 py-1.5 rounded-full shadow-md z-10 ${cat.tagStyle}`}> <div className={`absolute top-4 left-4 text-xs font-black uppercase tracking-wider px-3.5 py-1.5 rounded-full shadow-md z-10 ${cat.tagStyle}`}>
{cat.tag} {cat.tag}
</div> </div>
</div> </div>
{/* Card Body */} {/* Card Body */}
<div className="p-6 flex flex-col flex-grow"> <div className="p-6 flex flex-col flex-grow justify-between min-h-[160px]">
<div className="flex items-center justify-between mb-2"> <div>
<h3 className="text-headline-md font-black text-brand-dark group-hover:text-primary transition-colors"> <h3 className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors mb-2">
{cat.name} {cat.name}
</h3> </h3>
<span className="text-[11px] font-bold text-on-surface-variant bg-surface-container px-2.5 py-1 rounded-full"> <p className="text-sm md:text-base text-on-surface-variant leading-relaxed mb-6">
{cat.stats}
</span>
</div>
<p className="text-body-md text-on-surface-variant mb-6 flex-grow leading-relaxed">
{cat.desc} {cat.desc}
</p> </p>
</div>
{/* Interactive Action Button */} {/* Interactive Action Button */}
<div className="flex items-center justify-between pt-4 border-t border-dashed border-outline-variant/25"> <div className="flex items-center justify-between pt-4 border-t border-dashed border-outline-variant/25">
<span className="text-label-sm text-primary font-black uppercase tracking-wider group-hover:underline"> <span className="text-sm text-primary font-black uppercase tracking-wider group-hover:underline">
{cat.cta} {cat.cta}
</span> </span>
<div className="w-10 h-10 rounded-full bg-brand-dark text-white flex items-center justify-center group-hover:bg-brand-accent group-hover:text-brand-dark transition-colors duration-300 shadow-md"> <div className="w-10 h-10 rounded-full bg-brand-dark text-white flex items-center justify-center group-hover:bg-brand-accent group-hover:text-brand-dark transition-colors duration-300 shadow-md">
@@ -139,7 +132,7 @@ export function ServiceCategories() {
</div> </div>
</div> </div>
</div> </div>
</div> </Link>
))} ))}
</div> </div>
</div> </div>

87
src/components/home/StoreQRSection.tsx Normal file
View File

@@ -0,0 +1,87 @@
import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const FLOW_STEPS = [
{ label: "Scan QR", icon: "qr_code_scanner" },
{ label: "Save Store", icon: "bookmark" },
{ label: "Order Anytime", icon: "shopping_bag" },
];
export function StoreQRSection() {
return (
<section className="bg-background py-16 px-6 md:px-12 lg:px-20 xl:px-24 border-t border-outline-variant/10">
<div className="max-w-container-max mx-auto">
<div className="grid lg:grid-cols-12 gap-16 items-center">
{/* Left Column: Visual representation of QR Sticker/Counter */}
<div className="lg:col-span-5 flex justify-center relative">
<div className="relative w-full max-w-[380px] aspect-square bg-[#120217] rounded-[2.5rem] p-8 shadow-2xl border-4 border-white/10 flex flex-col justify-between items-center group overflow-hidden">
{/* Decorative radial shine */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(224,200,247,0.15),transparent_60%)] pointer-events-none" />
{/* Header inside QR Sticker */}
<div className="text-center w-full relative z-10">
<p className="text-xs font-black text-brand-accent tracking-[0.2em] uppercase">Order Online</p>
<h4 className="font-display font-black text-white text-lg mt-1">Nearle Store QR</h4>
<p className="text-xs text-white/60 font-semibold mt-1">Nearle Partner Store</p>
</div>
{/* Decorative QR Pattern */}
<div className="relative w-52 h-52 bg-white rounded-2xl p-4 flex items-center justify-center shadow-lg group-hover:scale-[1.03] transition-transform duration-500 z-10">
<Image
src="/QR code .png"
alt="Nearle Store QR Code"
width={200}
height={200}
className="object-contain"
/>
</div>
{/* Footer label on QR Sticker */}
<div className="text-center z-10">
<span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-black tracking-wider uppercase bg-brand-accent/15 text-brand-accent">
<span className="w-1.5 h-1.5 rounded-full bg-brand-accent animate-pulse" />
Scan to Shop
</span>
</div>
</div>
</div>
{/* Right Column: Copywriting and Steps */}
<div className="lg:col-span-7">
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
Instant Connections
</span>
<h2 className="text-display text-brand-dark mt-6 mb-6 leading-tight">
Your Favourite Store Is <span className="text-secondary">Now Just One Scan Away.</span>
</h2>
<p className="text-body-lg text-on-surface-variant mb-10 max-w-xl leading-relaxed">
See Nearle at a nearby store? Scan the QR code once, save the store, and order from it anytime.
</p>
{/* Visual Steps Row */}
<div className="grid grid-cols-3 gap-6 mb-12 max-w-lg">
{FLOW_STEPS.map((step) => (
<div key={step.label} className="flex flex-col items-center text-center group">
<div className="w-14 h-14 rounded-xl bg-white border border-outline-variant/20 shadow-sm flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors duration-300 mb-3">
<MaterialIcon icon={step.icon} size={28} />
</div>
<span className="text-sm md:text-base font-black text-brand-dark group-hover:text-primary transition-colors">
{step.label}
</span>
</div>
))}
</div>
<Link
href="/people"
className="bg-primary hover:bg-primary-container text-white font-black px-10 py-4 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 inline-block"
>
Find Stores Near You
</Link>
</div>
</div>
</div>
</section>
);
}

69
src/components/home/WhyNearle.tsx Normal file
View File

@@ -0,0 +1,69 @@
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const CARDS = [
{
title: "Shops You Know",
desc: "Order from familiar neighbourhood stores near you.",
icon: "store",
color: "bg-primary/5 text-primary border-primary/10",
},
{
title: "Better Local Value",
desc: "Discover local offers and everyday essentials from nearby shops.",
icon: "local_offer",
color: "bg-secondary/5 text-secondary border-secondary/10",
},
{
title: "Easy Reordering",
desc: "Save your favourite stores and reorder quickly when you need something.",
icon: "history",
color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
},
{
title: "Support Local Business",
desc: "Every order helps nearby businesses grow digitally.",
icon: "favorite",
color: "bg-rose-500/5 text-rose-700 border-rose-100",
},
];
export function WhyNearle() {
return (
<section className="bg-background py-16 px-6 md:px-12 lg:px-20 xl:px-24 border-t border-outline-variant/10">
<div className="max-w-container-max mx-auto">
{/* Header Section */}
<div className="text-center mb-10">
<span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/5 px-3.5 py-1.5 rounded-full">
Our Philosophy
</span>
<h2 className="text-display text-brand-dark mt-3 leading-tight">
Why Nearle <span className="text-primary font-normal">Feels Different</span>
</h2>
<p className="text-body-lg text-on-surface-variant mt-2 max-w-xl mx-auto">
Nearle brings the convenience of an app to the stores you already know and trust.
</p>
</div>
{/* Cards Grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
{CARDS.map((card) => (
<div
key={card.title}
className="premium-card bg-white rounded-3xl p-10 border border-outline-variant/15 shadow-lg flex flex-col h-full hover:scale-[1.02] transition-transform duration-300"
>
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 ${card.color}`}>
<MaterialIcon icon={card.icon} size={28} />
</div>
<h3 className="font-display text-xl font-black text-brand-dark mb-3">
{card.title}
</h3>
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed flex-grow">
{card.desc}
</p>
</div>
))}
</div>
</div>
</section>
);
}

12
src/components/layout/Footer.tsx
View File

@@ -217,10 +217,10 @@ export function Footer() {
<div className="absolute bottom-0 left-0 w-24 h-24 bg-secondary/5 rounded-full blur-2xl" /> <div className="absolute bottom-0 left-0 w-24 h-24 bg-secondary/5 rounded-full blur-2xl" />
<div className="relative z-10 text-center lg:text-left"> <div className="relative z-10 text-center lg:text-left">
<h3 className="footer-contact-title font-display text-brand-dark tracking-tight"> <h3 className="footer-contact-title font-display text-2xl md:text-3xl font-black text-brand-dark tracking-tight">
Send us a Message Send us a Message
</h3> </h3>
<p className="footer-contact-subtitle"> <p className="footer-contact-subtitle text-sm md:text-base mt-2">
We shall guide you through our Neighbourhood Experts. We shall guide you through our Neighbourhood Experts.
</p> </p>
@@ -234,8 +234,10 @@ export function Footer() {
<div className="footer-form-row"> <div className="footer-form-row">
<div className="flex flex-col text-left"> <div className="flex flex-col text-left">
<label htmlFor="footer-field-name" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Name</label>
<input <input
type="text" type="text"
id="footer-field-name"
name="name" name="name"
value={formData.name} value={formData.name}
onChange={handleInputChange} onChange={handleInputChange}
@@ -250,8 +252,10 @@ export function Footer() {
)} )}
</div> </div>
<div className="flex flex-col text-left"> <div className="flex flex-col text-left">
<label htmlFor="footer-field-phone" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Phone</label>
<input <input
type="text" type="text"
id="footer-field-phone"
name="phone" name="phone"
value={formData.phone} value={formData.phone}
onChange={handleInputChange} onChange={handleInputChange}
@@ -268,8 +272,10 @@ export function Footer() {
</div> </div>
<div className="flex flex-col text-left"> <div className="flex flex-col text-left">
<label htmlFor="footer-field-email" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Email Address</label>
<input <input
type="email" type="email"
id="footer-field-email"
name="email" name="email"
value={formData.email} value={formData.email}
onChange={handleInputChange} onChange={handleInputChange}
@@ -285,7 +291,9 @@ export function Footer() {
</div> </div>
<div className="flex flex-col text-left"> <div className="flex flex-col text-left">
<label htmlFor="footer-field-message" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Message</label>
<textarea <textarea
id="footer-field-message"
name="message" name="message"
value={formData.message} value={formData.message}
onChange={handleInputChange} onChange={handleInputChange}