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

add image

Browse Source
This commit is contained in:
Aravind
2026-06-25 13:56:36 +05:30
parent d3c7d93cef
commit b233992f30
32 changed files with 632 additions and 542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,29 +20,29 @@ const STRATEGY_CARDS = [
},
{
title: "Our Vision",
descr: "Our vision is to achieve Global Digital Transformation services leadership in providing value-added high quality solution to our customers.",
descr: "Our vision is to make every neighbourhood more connected by helping people discover, support, and shop from the local businesses around them.",
icon: "visibility",
color: "bg-secondary/5 text-secondary border-secondary/10"
},
{
title: "Why Nearle",
descr: "Nearly is essential for a business to grow by leveraging the full potential of its neighbourhood. It is an indispensable tool for Consumers to take advantage from its Neighbourhoods.",
descr: "Nearle is essential for a business to grow by leveraging the full potential of its neighbourhood. It is an indispensable tool for consumers to take advantage of what their neighbourhood has to offer.",
icon: "help_outline",
color: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20"
}
];
const LOCAL_COUNTERS = [
{ count: "100+", label: "Customers Served", icon: "people" },
{ count: "100+", label: "Active Businesses", icon: "store" },
{ count: "100+", label: "Active Neighborhoods", icon: "location_city" }
{ count: "Local", label: "Customer First Always", icon: "people" },
{ count: "Verified", label: "Business Partners", icon: "store" },
{ count: "Growing", label: "Neighbourhood Reach", icon: "location_city" }
];
const HERO_STATS = [
{ title: "2km Coverage", icon: "explore", desc: "Hyperlocal radius" },
{ title: "1000+ Verified Stores", icon: "store", desc: "Local commerce" },
{ title: "50000+ Happy Customers", icon: "mood", desc: "Neighborhood residents" },
{ title: "25+ Neighbourhoods", icon: "location_city", desc: "Active locations" }
{ title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
{ title: "Happy Customers", icon: "mood", desc: "Neighbourhood community" },
{ title: "Coimbatore & Beyond", icon: "location_city", desc: "Growing neighbourhood reach" }
];
export default function AboutPage() {
@@ -78,13 +78,13 @@ export default function AboutPage() {
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<a
href="#story-section"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
>
Our Story
</a>
<Link
href="/contact"
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
>
Join Our Journey
</Link>
@@ -186,7 +186,7 @@ export default function AboutPage() {
className="bg-white hover:bg-white/95 border border-[#6330D6]/10 text-[#16001D] font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"
>
<MaterialIcon icon="download" size={18} />
<span>Download App</span>
<span>Explore Nearle</span>
</Link>
</div>
</div>

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

@@ -1,11 +1,16 @@
"use client";
import React from "react";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Nearle for Business",
description:
"Grow your local business with Nearle. Get discovered by nearby customers, manage online orders, run local offers, and build repeat sales — all from one simple hyperlocal platform.",
};
const PROCESS_STEPS = [
{
@@ -67,9 +72,9 @@ const FEATURES = [
];
const STATS = [
{ value: "40%+", label: "Avg Revenue Increase", icon: "trending_up", bg: "bg-[#FAF7FD]" },
{ value: "12k+", label: "Daily Orders Handled", icon: "groups", bg: "bg-[#6330D6] text-white" },
{ value: "5k+", label: "Active Partners", icon: "storefront", bg: "bg-white border border-[#6330D6]/10" },
{ value: "More", label: "Revenue From Local Reach", icon: "trending_up", bg: "bg-[#FAF7FD]" },
{ value: "Fast", label: "Reliable Order Fulfillment", icon: "groups", bg: "bg-[#6330D6] text-white" },
{ value: "Easy", label: "Direct Customer Access", icon: "storefront", bg: "bg-white border border-[#6330D6]/10" },
{ value: "24/7", label: "Merchant Support", icon: "support_agent", bg: "bg-[#FAF7FD]" }
];
@@ -111,17 +116,16 @@ export default function BusinessesPage() {
</p>
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<a
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
target="_blank"
rel="noopener noreferrer"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
>
List Your Store
</a>
{/* TODO: Replace with real merchant onboarding URL once confirmed */}
<Link
href="/contact"
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
>
List Your Store
</Link>
<Link
href="/contact"
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
>
Explore Solutions
</Link>
@@ -225,7 +229,7 @@ export default function BusinessesPage() {
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
{FEATURES.map((feat) => (
<div key={feat.title} className="flex gap-3">
<div className="w-5.5 h-5.5 rounded-full bg-secondary-container text-secondary flex items-center justify-center shrink-0 mt-0.5">
<div className="w-[22px] h-[22px] rounded-full bg-secondary-container text-secondary flex items-center justify-center shrink-0 mt-0.5">
<MaterialIcon icon="check" size={14} className="font-black" />
</div>
<div>
@@ -251,7 +255,7 @@ export default function BusinessesPage() {
}`}
>
<div className="flex items-center justify-between">
<div className={`w-8.5 h-8.5 rounded-xl flex items-center justify-center ${
<div className={`w-[34px] h-[34px] rounded-xl flex items-center justify-center ${
stat.bg.includes("#6330D6") ? "bg-white/10 text-white" : "bg-[#6330D6]/5 text-[#6330D6]"
}`}>
<MaterialIcon icon={stat.icon} size={18} />
@@ -282,15 +286,14 @@ export default function BusinessesPage() {
Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today.
</p>
<div className="flex flex-wrap justify-center gap-3.5">
<a
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
target="_blank"
rel="noopener noreferrer"
{/* TODO: Replace with real merchant onboarding URL once confirmed */}
<Link
href="/contact"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-xl transition-all duration-200 active:scale-95 flex items-center gap-2"
>
<MaterialIcon icon="bolt" size={18} />
<span>Register as Partner</span>
</a>
<span>Register Interest</span>
</Link>
<Link
href="/contact"
className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"

33
src/app/globals.css
View File

@@ -141,12 +141,12 @@
/* ─── Base Styles ─── */
html {
scroll-behavior: smooth;
background: #E8DCF2;
background: #ffffff;
}
body {
min-height: 100vh;
background: #E8DCF2 !important;
background: #ffffff !important;
color: var(--on-surface);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
@@ -1245,6 +1245,35 @@ body {
}
}
/* ─── Global Spacing & Layout System ─── */
.page-container {
width: min(100% - 48px, 1280px);
margin-inline: auto;
}
@media (min-width: 1024px) {
.page-container {
width: min(100% - 128px, 1440px);
}
}
.section {
padding-block: 88px;
}
.section-tight {
padding-block: 56px;
}
.section-soft {
background: #faf7ff;
}
main {
background: #ffffff;
overflow-x: hidden;
}

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

@@ -1,5 +1,3 @@
"use client";
import React from "react";
import Image from "next/image";
import Link from "next/link";
@@ -7,11 +5,18 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Nearle for People",
description:
"Discover verified local stores, save your favourite merchants, and order everyday essentials with superfast local delivery from shops within your 2km neighbourhood.",
};
const OFFERINGS = [
{
title: "Elegant Living",
tag: "Join the #1 Neighbourhood App",
tag: "Your Neighbourhood App",
descr: "Enjoy the comfort of elegant living. Nearle is India's first hyper-local managed platform bringing all amenities and requirements directly to your fingertips.",
icon: "local_florist",
color: "from-purple-500/10 to-indigo-500/10 text-primary border-purple-100",
@@ -93,10 +98,10 @@ const OFFERINGS = [
];
const LOCAL_STATS = [
{ count: "100+", label: "Verified Restaurants", icon: "restaurant" },
{ count: "100+", label: "Green Grocers", icon: "local_mall" },
{ count: "100+", label: "Home Etailers", icon: "shopping_cart" },
{ count: "100+", label: "Service Providers", icon: "handyman" }
{ count: "Local", label: "Verified Restaurants", icon: "restaurant" },
{ count: "Fresh", label: "Green Grocers", icon: "local_mall" },
{ count: "Ready", label: "Home Stores", icon: "shopping_cart" },
{ count: "Trusted", label: "Service Providers", icon: "handyman" }
];
const APP_BENEFITS = [
@@ -133,10 +138,10 @@ const APP_BENEFITS = [
];
const HERO_STATS = [
{ title: "1000+ Verified Stores", icon: "store", desc: "Local commerce active" },
{ title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
{ title: "2km Neighbourhood", icon: "location_on", desc: "Hyperlocal service radius" },
{ title: "50000+ Happy Customers", icon: "mood", desc: "Active daily orders" },
{ title: "4.7 Average Rating", icon: "star", desc: "Highly rated on stores" }
{ title: "Happy Customers", icon: "mood", desc: "Growing neighbourhood community" },
{ title: "Trusted Platform", icon: "star", desc: "Loved by local shoppers" }
];
export default function PeoplePage() {
@@ -172,13 +177,13 @@ export default function PeoplePage() {
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<a
href="#download-section"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
>
Get the App
</a>
<Link
href="/"
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
>
Explore Stores
</Link>
@@ -221,13 +226,13 @@ export default function PeoplePage() {
{OFFERINGS.map((offering) => (
<article
key={offering.title}
className="experience-card"
className={`experience-card${offering.isWide ? " experience-card--wide" : ""}`}
>
<Image
src={offering.image}
alt={offering.title}
fill
sizes="(max-width: 1023px) 100vw, 33vw"
sizes={offering.isWide ? "(max-width: 1023px) 100vw, 66vw" : "(max-width: 1023px) 100vw, 33vw"}
className="experience-card__image"
/>
<div className="experience-card__overlay" />
@@ -250,7 +255,7 @@ export default function PeoplePage() {
Nearle Network
</span>
<h2 className="font-display text-2xl font-black text-[#16001D] mt-4">
Join the #1 Neighbourhood App
The Neighbourhood App
</h2>
<p className="text-xs md:text-sm text-[#5E5866] mt-2">
Bringing local stores to your doorstep instantly.
@@ -491,7 +496,7 @@ export default function PeoplePage() {
<div className="flex flex-col gap-3.5 mt-6 w-full max-w-[320px]">
{APP_BENEFITS.map((b) => (
<div key={b.title} className="bg-white/[0.04] border border-white/5 rounded-xl p-3.5 flex gap-3.5 items-center text-left">
<div className={`flex-shrink-0 w-8.5 h-8.5 rounded-lg flex items-center justify-center border shadow-inner ${b.iconClass}`}>
<div className={`flex-shrink-0 w-[34px] h-[34px] rounded-lg flex items-center justify-center border shadow-inner ${b.iconClass}`}>
<MaterialIcon icon={b.icon} size={16} />
</div>
<div>