remove unused files
This commit is contained in:
@@ -1,17 +1,285 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const ROTATOR_SLIDES = [
|
||||
"Enjoy your Neighbourhood Living.",
|
||||
"Just a Click – For all your needs.",
|
||||
"Convenient & safe shopping locally."
|
||||
];
|
||||
|
||||
const OFFERINGS = [
|
||||
{
|
||||
title: "Elegant Living",
|
||||
tag: "Join the #1 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"
|
||||
},
|
||||
{
|
||||
title: "Awareness at a Touch",
|
||||
tag: "Hot Deals",
|
||||
descr: "Pick hot deals within your neighbourhood. Stay updated on localized sales, discounts, and flash promotions happening today.",
|
||||
icon: "local_activity",
|
||||
color: "from-amber-500/10 to-orange-500/10 text-amber-700 border-amber-100"
|
||||
},
|
||||
{
|
||||
title: "Best of Both Worlds",
|
||||
tag: "Convenience & Speed",
|
||||
descr: "Enjoy the ease of the World Wide Web, fulfilled entirely by trusted local businesses. Avoid traffic lights, parking hassles, and pollution.",
|
||||
icon: "travel_explore",
|
||||
color: "from-green-500/10 to-emerald-500/10 text-secondary border-green-100"
|
||||
},
|
||||
{
|
||||
title: "Lifestyle Shopping",
|
||||
tag: "Exclusive Privileges",
|
||||
descr: "Enjoy safe, convenient shopping with custom pricing, resident promotions, and bulk order discounts negotiated for your community.",
|
||||
icon: "shopping_bag",
|
||||
color: "from-rose-500/10 to-pink-500/10 text-rose-700 border-rose-100"
|
||||
},
|
||||
{
|
||||
title: "Just a Click away",
|
||||
tag: "Instant Delivery",
|
||||
descr: "Order everything you need in your neighborhood with a single tap. A fast, organized last-mile delivery network ensures prompt fulfillment.",
|
||||
icon: "touch_app",
|
||||
color: "from-sky-500/10 to-blue-500/10 text-sky-700 border-sky-100"
|
||||
},
|
||||
{
|
||||
title: "Amazingly Fresh",
|
||||
tag: "Daily Essentials",
|
||||
descr: "Get your fresh fruits, farm-fresh vegetables, dairy, and grocery items delivered instantly from verified local green grocers.",
|
||||
icon: "eco",
|
||||
color: "from-emerald-500/10 to-teal-500/10 text-emerald-700 border-emerald-100"
|
||||
},
|
||||
{
|
||||
title: "Restaurants & Takeaways",
|
||||
tag: "Hot Food Nearby",
|
||||
descr: "Choose from the best local restaurants and neighborhood eateries close to your home. Hot food delivered with relevance and speed.",
|
||||
icon: "restaurant",
|
||||
color: "from-orange-500/10 to-red-500/10 text-orange-700 border-orange-100"
|
||||
},
|
||||
{
|
||||
title: "Never Before Experience",
|
||||
tag: "Custom Services",
|
||||
descr: "Access custom-tailored local neighborhood services designed to integrate convenience directly into residential society living.",
|
||||
icon: "stars",
|
||||
color: "from-violet-500/10 to-purple-500/10 text-violet-700 border-violet-100"
|
||||
},
|
||||
{
|
||||
title: "Home Services @ Ease",
|
||||
tag: "Unified Local Partner",
|
||||
descr: "Book certified local service providers at your convenience. From handymen to laundry, pet care to pharmacy delivery, all in one place.",
|
||||
icon: "construction",
|
||||
color: "from-cyan-500/10 to-blue-500/10 text-cyan-700 border-cyan-100"
|
||||
}
|
||||
];
|
||||
|
||||
const 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" }
|
||||
];
|
||||
|
||||
export default function PeoplePage() {
|
||||
const [slideIndex, setSlideIndex] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setSlideIndex((prev) => (prev + 1) % ROTATOR_SLIDES.length);
|
||||
}, 3000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="min-h-[70vh] bg-surface px-margin-mobile md:px-margin-desktop py-24">
|
||||
<div className="mx-auto max-w-container-max text-center">
|
||||
<p className="text-label-sm font-black uppercase tracking-widest text-primary">
|
||||
Nearle for People
|
||||
</p>
|
||||
<h1 className="mt-4 font-display text-4xl font-black text-brand-dark md:text-6xl">
|
||||
Everything nearby, delivered.
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-on-surface-variant">
|
||||
Discover groceries, meals, essentials, and services from trusted local partners around you.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<div className="relative min-h-screen bg-background">
|
||||
|
||||
{/* ─── Hero Section ─── */}
|
||||
<section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-24 pb-32 text-center">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_25%_25%,rgba(108,14,128,0.25),transparent_40%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_75%_75%,rgba(252,163,17,0.1),transparent_45%)]" />
|
||||
|
||||
<div className="relative z-10 mx-auto max-w-container-max">
|
||||
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
|
||||
Nearle for People
|
||||
</p>
|
||||
|
||||
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
|
||||
<span>Redefining Local Living.</span>
|
||||
<br />
|
||||
<span className="relative inline-block text-brand-accent min-h-[1.2em] transition-all duration-500">
|
||||
{ROTATOR_SLIDES[slideIndex]}
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
|
||||
India's first hyper-local managed Neighbourhood Living Platform. Connect to verified stores and daily amenities around you instantly.
|
||||
</p>
|
||||
|
||||
{/* Quick Action */}
|
||||
<div className="mt-10">
|
||||
<a
|
||||
href="#download-section"
|
||||
className="bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-xl transition-all duration-300 active:scale-95 inline-flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="download" size={18} />
|
||||
<span>Get the App Now</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── 9 Core Offerings Bento Grid ─── */}
|
||||
<section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
|
||||
<div className="text-center mb-16">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
What we offer
|
||||
</span>
|
||||
<h2 className="font-display text-3xl font-black text-brand-dark mt-2">
|
||||
Everything You Need, Just a Click Away
|
||||
</h2>
|
||||
<p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
|
||||
Discover fresh produce, delicious meals, and daily home services from trusted neighborhood businesses.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{OFFERINGS.map((offering) => (
|
||||
<div
|
||||
key={offering.title}
|
||||
className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col hover:border-primary/25 transition-all"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<span className="text-[10px] font-black uppercase tracking-wider text-secondary-container bg-secondary/15 text-secondary px-3 py-1 rounded-full">
|
||||
{offering.tag}
|
||||
</span>
|
||||
<div className={`w-11 h-11 rounded-xl bg-gradient-to-br ${offering.color} flex items-center justify-center`}>
|
||||
<MaterialIcon icon={offering.icon} size={22} />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-3">
|
||||
{offering.title}
|
||||
</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
{offering.descr}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Localized Stats Block ─── */}
|
||||
<section className="bg-surface-container-low border-y border-outline-variant/15 py-20">
|
||||
<div className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
|
||||
<div className="text-center mb-12">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
Nearle Network
|
||||
</span>
|
||||
<h2 className="font-display text-2xl font-black text-brand-dark mt-1">
|
||||
Join the #1 Neighbourhood App
|
||||
</h2>
|
||||
<p className="text-body-sm text-on-surface-variant mt-2">
|
||||
Bringing local stores to your doorstep instantly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{STATS.map((s) => (
|
||||
<div
|
||||
key={s.label}
|
||||
className="bg-white rounded-2xl p-6 border border-outline-variant/10 shadow-sm flex flex-col items-center text-center"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-primary/5 text-primary flex items-center justify-center mb-4">
|
||||
<MaterialIcon icon={s.icon} size={20} />
|
||||
</div>
|
||||
<h4 className="text-3xl font-display font-black text-brand-dark">{s.count}</h4>
|
||||
<p className="text-[11px] font-bold text-on-surface-variant/80 mt-1 uppercase tracking-wider">
|
||||
{s.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Ready to Download Section ─── */}
|
||||
<section id="download-section" className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
|
||||
<div className="bg-primary rounded-[2.5rem] p-10 md:p-16 relative overflow-hidden shadow-2xl">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(123,248,161,0.12),transparent_40%)]" />
|
||||
|
||||
<div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-12">
|
||||
<div className="max-w-xl text-on-primary text-center lg:text-left">
|
||||
<span className="text-label-sm font-black text-brand-accent uppercase tracking-[0.2em]">
|
||||
GET READY NOW
|
||||
</span>
|
||||
<h2 className="font-display text-3xl md:text-5xl font-black mt-2 mb-4 tracking-tight">
|
||||
Download Nearle
|
||||
</h2>
|
||||
<p className="text-body-lg text-white/80 font-bold mb-2">
|
||||
Enjoy the benefits of Neighbourhood Living.
|
||||
</p>
|
||||
<p className="text-body-md text-white/60 mb-8">
|
||||
Proudly support your neighbourhood businesses and get everything delivered in minutes.
|
||||
</p>
|
||||
|
||||
{/* App badges */}
|
||||
<div className="flex flex-wrap gap-4 justify-center lg:justify-start">
|
||||
<a
|
||||
href="https://apps.apple.com/us/app/nearle/id1596895375"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
|
||||
>
|
||||
<div className="flex items-center gap-3 text-white text-left">
|
||||
<MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent" />
|
||||
<div>
|
||||
<div className="text-[10px] uppercase font-bold text-white/60">Download on the</div>
|
||||
<div className="text-sm font-black">App Store</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
|
||||
>
|
||||
<div className="flex items-center gap-3 text-white text-left">
|
||||
<MaterialIcon icon="play_arrow" size={24} className="text-brand-accent" />
|
||||
<div>
|
||||
<div className="text-[10px] uppercase font-bold text-white/60">Get it on</div>
|
||||
<div className="text-sm font-black">Google Play</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Visual element representing App */}
|
||||
<div className="relative shrink-0 w-full max-w-[280px]">
|
||||
<div className="bg-brand-dark-surface w-full aspect-[9/19] rounded-[2.5rem] border-[6px] border-white/10 shadow-2xl relative overflow-hidden flex flex-col justify-between p-6">
|
||||
<div className="flex items-center justify-between text-white/40">
|
||||
<MaterialIcon icon="signal_cellular_alt" size={16} />
|
||||
<MaterialIcon icon="battery_full" size={16} />
|
||||
</div>
|
||||
|
||||
{/* Mock UI */}
|
||||
<div className="my-auto text-center text-white space-y-4">
|
||||
<div className="w-14 h-14 bg-brand-accent text-brand-dark rounded-2xl flex items-center justify-center mx-auto shadow-lg animate-pulse-subtle">
|
||||
<MaterialIcon icon="local_shipping" size={32} />
|
||||
</div>
|
||||
<h4 className="font-display font-black text-lg text-brand-accent">Nearle App</h4>
|
||||
<p className="text-[11px] text-white/70">Coimbatore neighborhood orders delivered in 15 mins.</p>
|
||||
</div>
|
||||
|
||||
<div className="h-1.5 w-1/3 bg-white/20 rounded-full mx-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user