update content
This commit is contained in:
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"css.lint.unknownAtRules": "ignore"
|
||||
}
|
||||
BIN
public/QR code .png
Normal file
BIN
public/QR code .png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
BIN
public/mobile image.jpeg
Normal file
BIN
public/mobile image.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
@@ -1,5 +1,4 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
import { ContactForm } from "@/components/contact/ContactForm";
|
||||
|
||||
@@ -688,10 +688,18 @@ body {
|
||||
max-width: 540px;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 40px;
|
||||
padding: 48px 36px;
|
||||
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 textarea,
|
||||
.footer-contact-card button {
|
||||
|
||||
@@ -88,6 +88,7 @@ export default function RootLayout({
|
||||
>
|
||||
<head>
|
||||
{/* Material Symbols Outlined */}
|
||||
{/* eslint-disable-next-line @next/next/no-page-custom-font */}
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
||||
rel="stylesheet"
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import { Hero } from "@/components/home/Hero";
|
||||
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 { BusinessSection } from "@/components/home/BusinessSection";
|
||||
import { StoreQRSection } from "@/components/home/StoreQRSection";
|
||||
import { AppPromo } from "@/components/home/AppPromo";
|
||||
|
||||
export default function HomePage() {
|
||||
@@ -9,8 +12,11 @@ export default function HomePage() {
|
||||
<>
|
||||
<Hero />
|
||||
<ServiceCategories />
|
||||
<WhyNearle />
|
||||
<HowItWorks />
|
||||
<HyperlocalFeatures />
|
||||
<BusinessSection />
|
||||
<StoreQRSection />
|
||||
<AppPromo />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
|
||||
@@ -3,19 +3,24 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const FEATURES = [
|
||||
{
|
||||
title: "Eco-Friendly Routing",
|
||||
desc: "Our routing software matches you to stores within 2km to minimize delivery times and energy.",
|
||||
icon: "near_me",
|
||||
title: "Browse Nearby Stores",
|
||||
desc: "See all available groceries, pharmacies, and eateries in your immediate area.",
|
||||
icon: "store",
|
||||
},
|
||||
{
|
||||
title: "Live Courier Tracking",
|
||||
desc: "See your neighborhood runner on a live map as they collect your essentials and ride to your gate.",
|
||||
icon: "map",
|
||||
title: "Reorder from Favourite Shops",
|
||||
desc: "Save your go-to neighborhood stores and reorder your daily needs with a single tap.",
|
||||
icon: "replay",
|
||||
},
|
||||
{
|
||||
title: "Secure Digital Payments",
|
||||
desc: "Enjoy quick checkouts via UPI, credit/debit cards, and integrated wallet coins with cashbacks.",
|
||||
icon: "payments",
|
||||
title: "Track Your Delivery",
|
||||
desc: "Get real-time updates as your neighborhood partner delivers your order straight to your door.",
|
||||
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 (
|
||||
<section
|
||||
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">
|
||||
{/* Background Dot pattern */}
|
||||
@@ -39,17 +44,17 @@ export function AppPromo() {
|
||||
|
||||
{/* Left Column: Typography, benefits, download actions (7 cols) */}
|
||||
<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
|
||||
</span>
|
||||
|
||||
<h2 className="text-display text-brand-dark mt-6 mb-6 leading-[1.1] tracking-tight">
|
||||
Get More With Our <br />
|
||||
<span className="text-primary font-black">Mobile Application</span>
|
||||
Your Neighbourhood, <br />
|
||||
<span className="text-primary font-black">Now in Your Pocket.</span>
|
||||
</h2>
|
||||
|
||||
<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>
|
||||
|
||||
{/* Benefit Bullets */}
|
||||
@@ -60,8 +65,8 @@ export function AppPromo() {
|
||||
<MaterialIcon icon={item.icon} size={18} className="text-brand-dark" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-label-md font-bold text-brand-dark">{item.title}</h4>
|
||||
<p className="text-body-md text-on-surface-variant mt-0.5 leading-relaxed">
|
||||
<h4 className="text-base md:text-lg font-bold text-brand-dark">{item.title}</h4>
|
||||
<p className="text-sm md:text-base text-on-surface-variant mt-0.5 leading-relaxed">
|
||||
{item.desc}
|
||||
</p>
|
||||
</div>
|
||||
@@ -72,7 +77,7 @@ export function AppPromo() {
|
||||
{/* Store Badges */}
|
||||
<div className="flex flex-wrap gap-4 mt-8">
|
||||
<a
|
||||
href="https://apps.apple.com"
|
||||
href="https://apps.apple.com/us/app/nearle/id1596895375"
|
||||
target="_blank"
|
||||
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"
|
||||
@@ -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" />
|
||||
</svg>
|
||||
<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
|
||||
</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
|
||||
</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" />
|
||||
</svg>
|
||||
<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
|
||||
</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
|
||||
</div>
|
||||
</div>
|
||||
@@ -125,7 +130,7 @@ export function AppPromo() {
|
||||
</div>
|
||||
|
||||
<Image
|
||||
src="/images/app-mockup.png"
|
||||
src="/mobile image.jpeg"
|
||||
alt="Nearle mobile app interface showing neighborhood services"
|
||||
width={360}
|
||||
height={760}
|
||||
@@ -144,8 +149,8 @@ export function AppPromo() {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-label-md font-black text-brand-dark">Order Dispatched</p>
|
||||
<p className="text-[10px] text-on-surface-variant font-medium">Runner is arriving in 4 mins</p>
|
||||
<p className="text-sm font-black text-brand-dark">Order Confirmed</p>
|
||||
<p className="text-xs text-on-surface-variant font-medium mt-1">Your local store is preparing your order</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,51 +1,37 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const FEATURES = [
|
||||
const BENEFITS = [
|
||||
{
|
||||
title: "Direct Customer Relationship",
|
||||
desc: "Build long-term direct ties with nearby families. Own your neighborhood presence.",
|
||||
},
|
||||
{
|
||||
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",
|
||||
title: "Digital Catalogue",
|
||||
desc: "Showcase your products online easily to nearby customers.",
|
||||
icon: "menu_book",
|
||||
style: "bg-primary text-white",
|
||||
},
|
||||
{
|
||||
value: "12k+",
|
||||
label: "Daily Neighborhood Orders",
|
||||
icon: "shopping_bag",
|
||||
title: "QR Ordering",
|
||||
desc: "Enable existing customers to scan and place orders directly at your counter.",
|
||||
icon: "qr_code",
|
||||
style: "bg-brand-accent text-brand-dark",
|
||||
},
|
||||
{
|
||||
value: "5k+",
|
||||
label: "Verified Retail Partners",
|
||||
icon: "storefront",
|
||||
style: "bg-[#faf8f5] border border-outline-variant/20 text-primary",
|
||||
title: "Local Discovery",
|
||||
desc: "Get discovered by residents in your neighbourhood searching for your products.",
|
||||
icon: "explore",
|
||||
style: "bg-white border border-outline-variant/20 text-primary",
|
||||
},
|
||||
{
|
||||
value: "24/7",
|
||||
label: "Partner Helpdesk Support",
|
||||
icon: "support_agent",
|
||||
title: "Delivery Support",
|
||||
desc: "Fulfill orders with your own staff or rely on Nearle's local delivery partners.",
|
||||
icon: "local_shipping",
|
||||
style: "bg-[#de96f9]/20 text-primary border border-primary/10",
|
||||
},
|
||||
];
|
||||
|
||||
export function BusinessSection() {
|
||||
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">
|
||||
|
||||
{/* Merchant Section Grid */}
|
||||
@@ -53,59 +39,63 @@ export function BusinessSection() {
|
||||
|
||||
{/* Left Column: Feature copywriting (7 cols) */}
|
||||
<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
|
||||
</span>
|
||||
<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>
|
||||
<p className="text-body-lg text-on-surface-variant mb-12 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.
|
||||
<p className="text-body-lg text-on-surface-variant mb-10 max-w-xl leading-relaxed">
|
||||
Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business.
|
||||
</p>
|
||||
|
||||
<div className="space-y-8 mb-12">
|
||||
{FEATURES.map((feat) => (
|
||||
<div key={feat.title} className="flex gap-4 group">
|
||||
<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={18}
|
||||
className="text-secondary group-hover:text-white transition-colors"
|
||||
/>
|
||||
<div className="space-y-4 mb-10 text-sm md:text-base">
|
||||
<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>
|
||||
<div>
|
||||
<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>
|
||||
<span className="font-bold text-brand-dark">Stay in control of your pricing and orders</span>
|
||||
</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>
|
||||
|
||||
<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">
|
||||
Register as Merchant Partner
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 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="flex flex-wrap gap-4 mt-8">
|
||||
<Link
|
||||
href="/businesses"
|
||||
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"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
|
||||
<MaterialIcon icon={stat.icon} size={22} />
|
||||
Partner With Nearle
|
||||
</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>
|
||||
<p className="text-4xl font-display font-black tracking-tight">
|
||||
{stat.value}
|
||||
</p>
|
||||
<p className="text-label-sm font-semibold mt-1 opacity-90 leading-tight">
|
||||
{stat.label}
|
||||
<h3 className="text-xl md:text-2xl font-black tracking-tight leading-tight mb-2">
|
||||
{benefit.title}
|
||||
</h3>
|
||||
<p className="text-sm md:text-base opacity-90 leading-relaxed">
|
||||
{benefit.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -114,7 +104,7 @@ export function BusinessSection() {
|
||||
|
||||
</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">
|
||||
{/* Decorative background vectors */}
|
||||
<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 */}
|
||||
<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
|
||||
</span>
|
||||
<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>
|
||||
<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>
|
||||
<a
|
||||
href="#"
|
||||
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"
|
||||
<Link
|
||||
href="/people"
|
||||
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
|
||||
</a>
|
||||
Explore Stores Now
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Right visual column */}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const QUICK_LINKS = [
|
||||
@@ -30,7 +31,7 @@ export function Hero() {
|
||||
<div className="hero">
|
||||
{/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
|
||||
<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">
|
||||
<Image
|
||||
src="/images/slider-glob.png"
|
||||
@@ -42,69 +43,8 @@ export function Hero() {
|
||||
/>
|
||||
</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
|
||||
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) */}
|
||||
{/* Soft purple radial glow */}
|
||||
<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>
|
||||
|
||||
@@ -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">
|
||||
{/* Left Column: Text & Search Content */}
|
||||
<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">
|
||||
Express Services
|
||||
<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">
|
||||
Neighbourhood commerce, made simple
|
||||
</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">
|
||||
Express
|
||||
<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">
|
||||
Your Favourite
|
||||
<br />
|
||||
<span className="text-brand-accent drop-shadow-md">
|
||||
Neighborhood
|
||||
Local Stores, Now at Your Doorstep.
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-body-lg md:text-[22px] md:leading-9 text-white/80 mb-12 leading-relaxed max-w-2xl">
|
||||
Get groceries, hot meals, daily essentials, and local professional
|
||||
services delivered from trusted partners within{" "}
|
||||
<span className="text-brand-accent font-bold">25-30 minutes</span>.
|
||||
<p className="text-body-lg md:text-[20px] md:leading-8 text-white/90 mb-10 leading-relaxed max-w-2xl">
|
||||
Order groceries, medicines, food and everyday essentials from trusted stores near you — all in one convenient app.
|
||||
</p>
|
||||
|
||||
{/* Mobile/Tablet Only Nearle Bag Logo */}
|
||||
<div className="hero-mobile-logo block lg:hidden mt-8 select-none pointer-events-none">
|
||||
{/* CTAs */}
|
||||
<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">
|
||||
<Image
|
||||
src="/nearlenewlogo.png"
|
||||
@@ -141,14 +115,30 @@ export function Hero() {
|
||||
className="object-contain drop-shadow-2xl"
|
||||
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>
|
||||
|
||||
{/* Right Column: Centered Nearle bag visual */}
|
||||
<div className="hero-visual-layer select-none pointer-events-none">
|
||||
{/* Right Column: Centered Nearle bag visual with local commerce context pins and route line */}
|
||||
<div className="hero-visual-layer select-none pointer-events-none relative">
|
||||
<div className="hero-visual-panel" />
|
||||
<div className="hero-visual-image">
|
||||
|
||||
|
||||
<div className="hero-visual-image relative">
|
||||
<Image
|
||||
src="/nearlenewlogo.png"
|
||||
alt="Nearle delivery"
|
||||
@@ -158,11 +148,25 @@ export function Hero() {
|
||||
priority
|
||||
/>
|
||||
</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>
|
||||
|
||||
{/* 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="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{QUICK_LINKS.map((item) => (
|
||||
@@ -178,10 +182,10 @@ export function Hero() {
|
||||
/>
|
||||
</div>
|
||||
<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}
|
||||
</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}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
74
src/components/home/HowItWorks.tsx
Normal file
74
src/components/home/HowItWorks.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -1,27 +1,33 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const FEATURES = [
|
||||
{
|
||||
title: "Verified Community Partners",
|
||||
icon: "verified_user",
|
||||
desc: "Every merchant on Nearle is manually verified for food hygiene, service quality, and local licensing.",
|
||||
title: "Trusted Nearby Stores",
|
||||
icon: "store",
|
||||
desc: "Connect directly with the local merchants you know and shop from regularly.",
|
||||
},
|
||||
{
|
||||
title: "Eco-Friendly 2KM Logistics",
|
||||
icon: "electric_moped",
|
||||
desc: "By capping deliveries at 2km, we run a fast, eco-friendly moped fleet that reduces emissions and saves fuel.",
|
||||
title: "Short-Distance Local Delivery",
|
||||
icon: "local_shipping",
|
||||
desc: "Delivered quickly from shops in your immediate area to keep food hot and groceries fresh.",
|
||||
},
|
||||
{
|
||||
title: "Exclusive Society Discounting",
|
||||
icon: "local_activity",
|
||||
desc: "We coordinate with housing societies to negotiate collective discount rates and free scheduled delivery runs.",
|
||||
title: "Easy Reorders",
|
||||
icon: "replay",
|
||||
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() {
|
||||
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 */}
|
||||
<style>{`
|
||||
@media (min-width: 901px) {
|
||||
@@ -64,80 +70,85 @@ export function HyperlocalFeatures() {
|
||||
<div className="custom-care-grid mx-auto grid items-center">
|
||||
|
||||
{/* 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) */}
|
||||
<div className="absolute inset-x-0 bottom-0 h-[62%] w-full overflow-hidden select-none pointer-events-none">
|
||||
{/* Main Background Cover Image */}
|
||||
<div className="absolute inset-0 w-full h-full select-none pointer-events-none opacity-40 filter saturate-[0.7] blur-[1px]">
|
||||
<Image
|
||||
src="/images/cat-daily-essentials.png"
|
||||
alt="Fresh groceries and goods delivered at home"
|
||||
alt="Local store background"
|
||||
fill
|
||||
sizes="(max-width: 900px) 420px, 470px"
|
||||
className="object-cover object-bottom block transition-transform duration-500 hover:scale-[1.02]"
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Eco-Friendly floating pill */}
|
||||
<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="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-full bg-brand-accent/15 flex items-center justify-center flex-shrink-0">
|
||||
<MaterialIcon icon="eco" className="text-brand-accent" size={20} />
|
||||
{/* Banner Label at Top */}
|
||||
<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">
|
||||
<span className="text-xs text-primary font-black uppercase tracking-wider block mb-1">Local Order</span>
|
||||
<h4 className="text-sm md:text-base font-black text-brand-dark">“Your favourite local store, now online.”</h4>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-[13px] font-black text-brand-dark leading-tight">100% Eco-Friendly</h4>
|
||||
<p className="text-[10px] text-on-surface-variant font-bold mt-0.5 leading-none">Reducing neighbor carbon footprint</p>
|
||||
|
||||
{/* Main Store/Product Card (Middle floating) */}
|
||||
<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>
|
||||
|
||||
{/* Floating Proof Badges near the image (Desktop only, hidden below 900px) */}
|
||||
<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="w-6 h-6 rounded-full bg-brand-accent/10 flex items-center justify-center">
|
||||
<MaterialIcon icon="location_on" className="text-brand-accent" size={14} />
|
||||
{/* Small Delivery Status Card (Bottom floating) */}
|
||||
<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-8 h-8 rounded-full bg-white/20 flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="check" size={16} className="text-white font-bold" />
|
||||
</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 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>
|
||||
|
||||
{/* 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">
|
||||
{/* 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 -left-16 -bottom-16 w-48 h-48 bg-primary/10 rounded-full blur-2xl pointer-events-none" />
|
||||
|
||||
<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">
|
||||
Care & Quality
|
||||
<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">
|
||||
Community & Trust
|
||||
</span>
|
||||
|
||||
<h3 className="text-display mt-6 mb-8 leading-tight tracking-tight">
|
||||
Relax at Home,<br />
|
||||
<span className="text-brand-accent font-black">We Care.</span>
|
||||
Built Around Your<br />
|
||||
<span className="text-brand-accent font-black">Neighbourhood</span>
|
||||
</h3>
|
||||
|
||||
<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>
|
||||
|
||||
{/* Features List with vertical connector line */}
|
||||
<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" />
|
||||
|
||||
{FEATURES.map((item) => (
|
||||
<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">
|
||||
<MaterialIcon
|
||||
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">
|
||||
{item.title}
|
||||
</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}
|
||||
</p>
|
||||
</div>
|
||||
@@ -163,23 +174,23 @@ export function HyperlocalFeatures() {
|
||||
|
||||
{/* Onboarding Call to Action */}
|
||||
<div className="mt-8 flex flex-wrap gap-6 items-center relative z-10">
|
||||
<a
|
||||
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"
|
||||
<Link
|
||||
href="/#download"
|
||||
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
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-white hover:text-brand-accent font-bold text-label-md flex items-center gap-1 group py-2"
|
||||
</Link>
|
||||
<Link
|
||||
href="/businesses"
|
||||
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
|
||||
icon="arrow_forward"
|
||||
size={16}
|
||||
className="transition-transform group-hover:translate-x-1"
|
||||
/>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,95 +1,91 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const CATEGORIES = [
|
||||
{
|
||||
name: "Hot Food",
|
||||
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",
|
||||
name: "Groceries & Daily Essentials",
|
||||
image: "/images/cat-daily-essentials.png",
|
||||
tag: "15 Mins",
|
||||
tag: "Local Store",
|
||||
tagStyle: "bg-secondary text-white",
|
||||
desc: "Groceries, fresh fruits & veggies",
|
||||
stats: "★ 4.9 (180+ stores)",
|
||||
desc: "Fresh groceries, dairy, and household essentials from nearby shops.",
|
||||
cta: "Shop Fresh",
|
||||
},
|
||||
{
|
||||
name: "Health & Wellness",
|
||||
name: "Medicines & Pharmacy",
|
||||
image: "/images/cat-health-wellness.png",
|
||||
tag: "24/7 Delivery",
|
||||
tag: "Available Near You",
|
||||
tagStyle: "bg-primary text-white",
|
||||
desc: "Medicines & daily health supplies",
|
||||
stats: "★ 4.7 (95+ pharmacies)",
|
||||
desc: "Prescription medicines and wellness supplies from verified pharmacies.",
|
||||
cta: "Order Meds",
|
||||
},
|
||||
{
|
||||
name: "Home Services",
|
||||
image: "/images/cat-home-services.png",
|
||||
tag: "Verified Professionals",
|
||||
tagStyle: "bg-blue-600 text-white",
|
||||
desc: "Electricians, cleaning & repairs",
|
||||
stats: "★ 4.9 (340+ experts)",
|
||||
cta: "Book Service",
|
||||
name: "Food & Snacks",
|
||||
image: "/images/cat-hot-food.png",
|
||||
tag: "Nearby",
|
||||
tagStyle: "bg-brand-accent text-brand-dark",
|
||||
desc: "Fresh meals, bakes, and local snacks from neighbourhood kitchens.",
|
||||
cta: "Order Now",
|
||||
},
|
||||
{
|
||||
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",
|
||||
tag: "Express",
|
||||
tag: "Available Near You",
|
||||
tagStyle: "bg-orange-500 text-white",
|
||||
desc: "Pet food, toys & grooming care",
|
||||
stats: "★ 4.8 (60+ partners)",
|
||||
cta: "Shop Pet",
|
||||
desc: "Kitchen supplies, household cleaners, and other daily utility items.",
|
||||
cta: "Shop Needs",
|
||||
},
|
||||
{
|
||||
name: "More Services",
|
||||
image: null,
|
||||
tag: "Hyperlocal",
|
||||
tagStyle: "bg-surface-variant text-on-surface",
|
||||
desc: "Laundry, car wash, tailoring & more",
|
||||
stats: "★ 5.0 (500+ services)",
|
||||
cta: "Explore All",
|
||||
name: "Local Services",
|
||||
image: "/images/cat-home-services.png",
|
||||
tag: "Nearby",
|
||||
tagStyle: "bg-blue-600 text-white",
|
||||
desc: "Verified local handymen, laundry, tailors, and household help.",
|
||||
cta: "Book Service",
|
||||
},
|
||||
];
|
||||
|
||||
export function ServiceCategories() {
|
||||
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">
|
||||
{/* Header Section */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 gap-4">
|
||||
<div>
|
||||
<span className="text-label-sm text-primary uppercase tracking-widest font-black bg-primary/5 px-3 py-1 rounded-full">
|
||||
Neighborhood Offerings
|
||||
<span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/5 px-3 py-1.5 rounded-full">
|
||||
Neighbourhood Offerings
|
||||
</span>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
className="text-primary text-label-md font-black flex items-center gap-1 hover:gap-2 transition-all group"
|
||||
<Link
|
||||
href="/people"
|
||||
className="text-primary text-sm md:text-base font-black flex items-center gap-1 hover:gap-2 transition-all group"
|
||||
>
|
||||
View All Categories
|
||||
<MaterialIcon icon="arrow_forward" size={18} className="transition-transform group-hover:translate-x-1" />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Categories Premium Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{CATEGORIES.map((cat) => (
|
||||
<div
|
||||
<Link
|
||||
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 */}
|
||||
<div className="relative aspect-[4/3] w-full overflow-hidden bg-surface-container/30">
|
||||
@@ -110,28 +106,25 @@ export function ServiceCategories() {
|
||||
)}
|
||||
|
||||
{/* 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}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Body */}
|
||||
<div className="p-6 flex flex-col flex-grow">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-headline-md font-black text-brand-dark group-hover:text-primary transition-colors">
|
||||
<div className="p-6 flex flex-col flex-grow justify-between min-h-[160px]">
|
||||
<div>
|
||||
<h3 className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors mb-2">
|
||||
{cat.name}
|
||||
</h3>
|
||||
<span className="text-[11px] font-bold text-on-surface-variant bg-surface-container px-2.5 py-1 rounded-full">
|
||||
{cat.stats}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-body-md text-on-surface-variant mb-6 flex-grow leading-relaxed">
|
||||
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed mb-6">
|
||||
{cat.desc}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Interactive Action Button */}
|
||||
<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}
|
||||
</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">
|
||||
@@ -139,7 +132,7 @@ export function ServiceCategories() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
87
src/components/home/StoreQRSection.tsx
Normal file
87
src/components/home/StoreQRSection.tsx
Normal 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
69
src/components/home/WhyNearle.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -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="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
|
||||
</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.
|
||||
</p>
|
||||
|
||||
@@ -234,8 +234,10 @@ export function Footer() {
|
||||
|
||||
<div className="footer-form-row">
|
||||
<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
|
||||
type="text"
|
||||
id="footer-field-name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
@@ -250,8 +252,10 @@ export function Footer() {
|
||||
)}
|
||||
</div>
|
||||
<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
|
||||
type="text"
|
||||
id="footer-field-phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
@@ -268,8 +272,10 @@ export function Footer() {
|
||||
</div>
|
||||
|
||||
<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
|
||||
type="email"
|
||||
id="footer-field-email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
@@ -285,7 +291,9 @@ export function Footer() {
|
||||
</div>
|
||||
|
||||
<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
|
||||
id="footer-field-message"
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
|
||||
Reference in New Issue
Block a user