remove unused files
This commit is contained in:
@@ -1,17 +1,253 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const STRATEGY_CARDS = [
|
||||
{
|
||||
title: "Our Mission",
|
||||
descr: "To make mediocre, or average stores, perform as well as the great ones. By going beyond selling a product, to establish a solid brand identity and build a relationship with their customers using Nearle.",
|
||||
icon: "target",
|
||||
color: "bg-primary/5 text-primary border-primary/10"
|
||||
},
|
||||
{
|
||||
title: "Our Vision",
|
||||
descr: "Our vision is to achieve Global Digital Transformation services leadership in providing value-added high quality solution to our customers.",
|
||||
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.",
|
||||
icon: "help_outline",
|
||||
color: "bg-brand-accent/10 text-brand-accent border-brand-accent/20"
|
||||
}
|
||||
];
|
||||
|
||||
const COUNTERS = [
|
||||
{ count: "100+", label: "Customers Served", icon: "people" },
|
||||
{ count: "100+", label: "Active Businesses", icon: "store" },
|
||||
{ count: "100+", label: "Active Neighborhoods", icon: "location_city" }
|
||||
];
|
||||
|
||||
const TEAM = [
|
||||
{
|
||||
name: "Nellian Solliappan",
|
||||
role: "Co-Founder & CEO",
|
||||
initials: "NS",
|
||||
color: "bg-primary text-white"
|
||||
},
|
||||
{
|
||||
name: "Fazul Ilahi",
|
||||
role: "Founder & CTO",
|
||||
initials: "FI",
|
||||
color: "bg-secondary text-white"
|
||||
},
|
||||
{
|
||||
name: "Sagar",
|
||||
role: "Co-Founder & COO",
|
||||
initials: "S",
|
||||
color: "bg-brand-accent text-brand-dark"
|
||||
},
|
||||
{
|
||||
name: "Prithvi",
|
||||
role: "Investor",
|
||||
initials: "P",
|
||||
color: "bg-surface-container text-on-surface"
|
||||
},
|
||||
{
|
||||
name: "Sriram Sundararajan",
|
||||
role: "Investor",
|
||||
initials: "SS",
|
||||
color: "bg-surface-container-highest text-brand-dark"
|
||||
}
|
||||
];
|
||||
|
||||
export default function AboutPage() {
|
||||
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">
|
||||
About
|
||||
</p>
|
||||
<h1 className="mt-4 font-display text-4xl font-black text-brand-dark md:text-6xl">
|
||||
Built for local communities.
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-on-surface-variant">
|
||||
Nearle connects people with verified neighborhood businesses through a fast, reliable hyperlocal commerce network.
|
||||
</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_30%_30%,rgba(108,14,128,0.25),transparent_40%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_70%,rgba(0,109,55,0.15),transparent_40%)]" />
|
||||
|
||||
<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">
|
||||
We are Nearle
|
||||
</p>
|
||||
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight">
|
||||
We build Neighbourhoods.
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
|
||||
Nearle is India's first hyper-local managed “Neighbourhood living platform” which brings all the amenities and requirements of residents to their fingertips.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Intro Description Block ─── */}
|
||||
<section className="relative z-20 -mt-16 mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
|
||||
<div className="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl text-center">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
Our Platform
|
||||
</span>
|
||||
<h2 className="font-display text-2xl md:text-3xl font-black text-brand-dark mt-2 mb-6">
|
||||
Nearle Neighbourhood Commerce
|
||||
</h2>
|
||||
<p className="mx-auto max-w-3xl text-body-md text-on-surface-variant leading-relaxed">
|
||||
We are redefining modern urban living by providing never before convenience. By linking local physical stores to an integrated digital framework, Nearle boosts merchant sales and delivers products instantly, fostering closer, cleaner, and faster local economies.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
|
||||
<section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{STRATEGY_CARDS.map((card) => (
|
||||
<div
|
||||
key={card.title}
|
||||
className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col"
|
||||
>
|
||||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center border mb-6 ${card.color}`}>
|
||||
<MaterialIcon icon={card.icon} size={24} />
|
||||
</div>
|
||||
<h3 className="font-display text-xl font-black text-brand-dark mb-3">
|
||||
{card.title}
|
||||
</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
{card.descr}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Global Stats counters ─── */}
|
||||
<section className="bg-surface-container-low border-y border-outline-variant/15 py-16">
|
||||
<div className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{COUNTERS.map((c) => (
|
||||
<div key={c.label} className="flex flex-col items-center text-center">
|
||||
<div className="w-12 h-12 rounded-full bg-primary/5 text-primary flex items-center justify-center mb-4">
|
||||
<MaterialIcon icon={c.icon} size={24} />
|
||||
</div>
|
||||
<h4 className="text-4xl font-display font-black text-brand-dark">{c.count}</h4>
|
||||
<p className="text-label-sm font-black text-on-surface-variant/80 mt-1 uppercase tracking-wider">
|
||||
{c.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Team Section ─── */}
|
||||
<section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
|
||||
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||||
|
||||
{/* Left: About team content */}
|
||||
<div className="lg:col-span-5">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
Who we are
|
||||
</span>
|
||||
<h2 className="font-display text-3xl font-black text-brand-dark mt-2 mb-6">
|
||||
Team Nearle
|
||||
</h2>
|
||||
<p className="text-body-md text-on-surface-variant mb-6 leading-relaxed">
|
||||
Nearle is built on the core concept of <strong>“Boost business by trust”</strong>. We assist local offline stores in successfully spreading their brand message to the neighborhood to open new revenue streams.
|
||||
</p>
|
||||
<p className="text-body-sm text-on-surface-variant/80 mb-8 leading-relaxed">
|
||||
Our team combines technology skills, domain expertise, and operational focus to ensure the highest quality solution for our customers.
|
||||
</p>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-primary hover:bg-primary-container text-on-primary font-black px-8 py-4 rounded-xl text-label-md hover:shadow-lg active:scale-95 transition-all inline-flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="mail" size={18} />
|
||||
<span>Contact Team</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Right: Team Grid cards */}
|
||||
<div className="lg:col-span-7 grid grid-cols-2 sm:grid-cols-3 gap-6">
|
||||
{TEAM.map((t) => (
|
||||
<div
|
||||
key={t.name}
|
||||
className="premium-card bg-white p-6 rounded-3xl border border-outline-variant/15 shadow-sm flex flex-col items-center text-center"
|
||||
>
|
||||
<div className={`w-16 h-16 rounded-full flex items-center justify-center font-display text-xl font-black mb-4 ${t.color}`}>
|
||||
{t.initials}
|
||||
</div>
|
||||
<h4 className="font-display text-sm font-black text-brand-dark mb-1">
|
||||
{t.name}
|
||||
</h4>
|
||||
<p className="text-[11px] font-bold text-on-surface-variant/65">
|
||||
{t.role}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Client Testimonial & Quote ─── */}
|
||||
<section className="bg-brand-dark px-margin-mobile md:px-margin-desktop py-24 text-center text-white">
|
||||
<div className="mx-auto max-w-4xl relative">
|
||||
<span className="absolute -top-12 left-1/2 -translate-x-1/2 text-8xl font-black text-brand-accent/10 font-display">
|
||||
“
|
||||
</span>
|
||||
<div className="relative z-10">
|
||||
<h3 className="font-display text-xl md:text-2xl font-black text-brand-accent mb-6">
|
||||
Partner Feedback
|
||||
</h3>
|
||||
<blockquote className="text-lg md:text-xl font-light italic leading-relaxed text-white/90 max-w-2xl mx-auto mb-8">
|
||||
“Nearle has opened up immense opportunities for us to survive the competition, sustain in business, and gain our customers back.”
|
||||
</blockquote>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="w-10 h-10 rounded-full bg-brand-accent text-brand-dark flex items-center justify-center font-display font-black text-xs">
|
||||
DK
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-label-md font-black">Darshan K</p>
|
||||
<p className="text-body-sm text-white/50">Erranderz Partner</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Brand Building Banner ─── */}
|
||||
<section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24 text-center">
|
||||
<div className="bg-white rounded-[2.5rem] p-12 md:p-16 border border-outline-variant/15 shadow-xl max-w-4xl mx-auto">
|
||||
<span className="text-label-sm font-black text-secondary uppercase tracking-widest">
|
||||
Don't miss the opportunity
|
||||
</span>
|
||||
<h2 className="font-display text-3xl font-black text-brand-dark mt-2 mb-4">
|
||||
Build Your Brand with Nearle
|
||||
</h2>
|
||||
<p className="text-body-md text-on-surface-variant max-w-2xl mx-auto mb-10 leading-relaxed">
|
||||
Delight your neighborhood with a personalized online experience. Unlock revenue opportunities and local marketing strategies that will take your business further.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<Link
|
||||
href="/businesses"
|
||||
className="bg-primary hover:bg-primary-container text-on-primary font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-lg transition-all duration-300 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="bolt" size={18} />
|
||||
<span>Register Merchant</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/people"
|
||||
className="bg-surface-container hover:bg-surface-container-high text-brand-dark font-black px-10 py-4.5 rounded-xl text-label-md transition-all duration-300 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="download" size={18} />
|
||||
<span>Download App</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,17 +1,313 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const ROTATOR_WORDS = [
|
||||
"Stand above your competitors!",
|
||||
"Reach the right people, near you.",
|
||||
"Get noticed in your locality!"
|
||||
];
|
||||
|
||||
const PROCESS_STEPS = [
|
||||
{
|
||||
step: "01",
|
||||
title: "Get Online",
|
||||
descr: "Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.",
|
||||
icon: "storefront",
|
||||
color: "bg-primary/5 text-primary border-primary/10"
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
title: "Get Noticed",
|
||||
descr: "Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.",
|
||||
icon: "campaign",
|
||||
color: "bg-secondary/5 text-secondary border-secondary/10"
|
||||
},
|
||||
{
|
||||
step: "03",
|
||||
title: "Get Simplified",
|
||||
descr: "Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.",
|
||||
icon: "auto_awesome",
|
||||
color: "bg-brand-accent/10 text-brand-accent border-brand-accent/20"
|
||||
}
|
||||
];
|
||||
|
||||
const FEATURES = [
|
||||
{
|
||||
title: "Direct Customer Access",
|
||||
descr: "Build direct relationships and trust with residents in your immediate vicinity."
|
||||
},
|
||||
{
|
||||
title: "Become a Partner",
|
||||
descr: "Be part of a strong community of like-minded people. A unified partner for neighborhood needs."
|
||||
},
|
||||
{
|
||||
title: "Build Your Brand",
|
||||
descr: "Brand your business on Nearle and reach out to your community with ease."
|
||||
},
|
||||
{
|
||||
title: "Huge Opportunity",
|
||||
descr: "Unlock revenue opportunities and marketing strategies that will take your business further."
|
||||
},
|
||||
{
|
||||
title: "Delight Your Customers",
|
||||
descr: "Delight customers in the neighborhood with a personalized online shopping experience."
|
||||
},
|
||||
{
|
||||
title: "Unique Model",
|
||||
descr: "Hyperlocal commerce is an effective, sustainable model to meet today's consumer needs."
|
||||
},
|
||||
{
|
||||
title: "Reach Right Audience",
|
||||
descr: "We target your ideal customers — people in your neighborhood search for what you offer."
|
||||
},
|
||||
{
|
||||
title: "Increase Your Customers",
|
||||
descr: "Increase walk-in and online customers by targeting local demand."
|
||||
}
|
||||
];
|
||||
|
||||
const STATS = [
|
||||
{ value: "40%+", label: "Avg Revenue Increase", icon: "trending_up", bg: "bg-surface-container" },
|
||||
{ value: "12k+", label: "Daily Orders Handled", icon: "groups", bg: "bg-primary text-white" },
|
||||
{ value: "5k+", label: "Active Partners", icon: "storefront", bg: "bg-white border border-outline-variant/15" },
|
||||
{ value: "24/7", label: "Merchant Support", icon: "support_agent", bg: "bg-surface-container" }
|
||||
];
|
||||
|
||||
export default function BusinessesPage() {
|
||||
const [wordIndex, setWordIndex] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setWordIndex((prev) => (prev + 1) % ROTATOR_WORDS.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 Business
|
||||
</p>
|
||||
<h1 className="mt-4 font-display text-4xl font-black text-brand-dark md:text-6xl">
|
||||
Grow with neighborhood delivery.
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-on-surface-variant">
|
||||
Partner with Nearle to reach nearby customers, manage local demand, and deliver faster within your neighborhood.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<div className="relative min-h-screen bg-background">
|
||||
{/* ─── Hero Section with Animated Rotator ─── */}
|
||||
<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_30%_30%,rgba(108,14,128,0.25),transparent_40%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_75%_75%,rgba(0,109,55,0.15),transparent_40%)]" />
|
||||
|
||||
<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 Business
|
||||
</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>Power your business.</span>
|
||||
<br />
|
||||
<span className="relative inline-block text-brand-accent min-h-[1.2em] transition-all duration-500">
|
||||
{ROTATOR_WORDS[wordIndex]}
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
|
||||
India's #1 Neighborhood Commerce App. Join the futuristic community lifestyle living and move your business forward.
|
||||
</p>
|
||||
|
||||
{/* App Download Links */}
|
||||
<div className="mt-10 flex flex-wrap justify-center gap-4">
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{/* ─── Intro Highlight Banner ─── */}
|
||||
<section className="relative z-20 -mt-16 mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
|
||||
<div className="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl flex flex-col lg:flex-row justify-between items-center gap-8">
|
||||
<div className="max-w-2xl">
|
||||
<span className="text-label-sm font-black text-secondary uppercase tracking-widest">
|
||||
Together, we grow
|
||||
</span>
|
||||
<h2 className="font-display text-2xl md:text-3xl font-black text-brand-dark mt-2 mb-4 leading-tight">
|
||||
Get set in minutes and delight the Neighborhood
|
||||
</h2>
|
||||
<p className="text-body-md text-on-surface-variant leading-relaxed">
|
||||
Nearle is built to help businesses like <strong className="text-primary">Yours</strong> establish a local online presence and empower neighborhood customers to discover and interact with you directly.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-4 shrink-0">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-primary hover:bg-primary-container text-on-primary font-black px-8 py-4 rounded-xl text-label-md shadow-lg active:scale-95 duration-200 transition-all flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="chat" size={18} />
|
||||
<span>Talk to an Expert</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Timeline / Core Process Steps ─── */}
|
||||
<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">
|
||||
How it works
|
||||
</span>
|
||||
<h2 className="font-display text-3xl font-black text-brand-dark mt-2">
|
||||
Build Your Neighborhood Brand
|
||||
</h2>
|
||||
<p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
|
||||
Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{PROCESS_STEPS.map((ps) => (
|
||||
<div
|
||||
key={ps.step}
|
||||
className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-4 right-6 text-6xl font-black text-on-surface-variant/5">
|
||||
{ps.step}
|
||||
</div>
|
||||
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 ${ps.color}`}>
|
||||
<MaterialIcon icon={ps.icon} size={28} />
|
||||
</div>
|
||||
<h3 className="font-display text-xl font-black text-brand-dark mb-3">
|
||||
{ps.title}
|
||||
</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
{ps.descr}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Grid Stats & Value Prop ─── */}
|
||||
<section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
|
||||
<div className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
|
||||
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||||
|
||||
{/* Left side: features block (7 cols) */}
|
||||
<div className="lg:col-span-7">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
Our features
|
||||
</span>
|
||||
<h2 className="font-display text-3xl md:text-4xl font-black text-brand-dark mt-2 mb-6">
|
||||
Move Your Business Forward
|
||||
</h2>
|
||||
<p className="text-body-md text-on-surface-variant mb-12 max-w-2xl">
|
||||
Be a part of a community of like-minded people. Brand your business on Nearle and reach out to your neighborhood with ease.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
|
||||
{FEATURES.map((feat) => (
|
||||
<div key={feat.title} className="flex gap-4">
|
||||
<div className="w-6 h-6 rounded-full bg-secondary-container text-secondary flex items-center justify-center shrink-0 mt-1">
|
||||
<MaterialIcon icon="check" size={16} className="font-black" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-display text-[15px] font-black text-brand-dark mb-1">
|
||||
{feat.title}
|
||||
</h4>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
{feat.descr}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right side: stats quadrant (5 cols) */}
|
||||
<div className="lg:col-span-5 grid grid-cols-2 gap-6">
|
||||
{STATS.map((stat, i) => (
|
||||
<div
|
||||
key={stat.label}
|
||||
className={`p-6 rounded-3xl flex flex-col justify-between aspect-square shadow-sm ${stat.bg} ${
|
||||
i % 2 === 1 ? "lg:mt-8" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className={`w-10 h-10 rounded-xl flex items-center justify-center ${
|
||||
stat.bg.includes("primary") ? "bg-white/10 text-white" : "bg-primary/5 text-primary"
|
||||
}`}>
|
||||
<MaterialIcon icon={stat.icon} size={20} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8">
|
||||
<p className="text-4xl font-display font-black tracking-tight">{stat.value}</p>
|
||||
<p className={`text-[11px] font-bold mt-1 ${
|
||||
stat.bg.includes("primary") ? "text-white/80" : "text-on-surface-variant/80"
|
||||
}`}>
|
||||
{stat.label}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Join/Download Call to Action ─── */}
|
||||
<section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24 text-center">
|
||||
<div className="bg-primary rounded-[2.5rem] p-12 md:p-20 relative overflow-hidden shadow-2xl">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(252,163,17,0.18),transparent_50%)] animate-pulse-subtle" />
|
||||
<div className="relative z-10 max-w-2xl mx-auto text-on-primary">
|
||||
<h2 className="font-display text-3xl md:text-5xl font-black mb-6 tracking-tight">
|
||||
Nearle is Essential for Business Growth
|
||||
</h2>
|
||||
<p className="text-body-lg text-white/80 mb-10 leading-relaxed">
|
||||
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-4">
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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 flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="bolt" size={18} />
|
||||
<span>Register as Partner</span>
|
||||
</a>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-10 py-4.5 rounded-xl text-label-md transition-all duration-300 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="phone" size={18} />
|
||||
<span>Contact Experts</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,17 +1,416 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
type FormData = {
|
||||
name: string;
|
||||
email: string;
|
||||
message: string;
|
||||
};
|
||||
|
||||
type FormErrors = {
|
||||
name?: string;
|
||||
email?: string;
|
||||
message?: string;
|
||||
};
|
||||
|
||||
export default function ContactPage() {
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
name: "",
|
||||
email: "",
|
||||
message: "",
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState<FormErrors>({});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [showToast, setShowToast] = useState(false);
|
||||
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
// Clear error for this field as the user types
|
||||
if (errors[name as keyof FormErrors]) {
|
||||
setErrors((prev) => ({
|
||||
...prev,
|
||||
[name]: undefined,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
const tempErrors: FormErrors = {};
|
||||
let isValid = true;
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
tempErrors.name = "Name is required";
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!formData.email.trim()) {
|
||||
tempErrors.email = "Email is required";
|
||||
isValid = false;
|
||||
} else if (!emailRegex.test(formData.email)) {
|
||||
tempErrors.email = "Please enter a valid email address";
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!formData.message.trim()) {
|
||||
tempErrors.message = "Message is required";
|
||||
isValid = false;
|
||||
} else if (formData.message.trim().length < 10) {
|
||||
tempErrors.message = "Message must be at least 10 characters long";
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
setErrors(tempErrors);
|
||||
return isValid;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Simulate API Request delay
|
||||
await new Promise((resolve) => setTimeout(resolve, 1200));
|
||||
|
||||
setIsSubmitting(false);
|
||||
setShowToast(true);
|
||||
setFormData({ name: "", email: "", message: "" });
|
||||
|
||||
// Auto-hide toast after 5 seconds
|
||||
setTimeout(() => {
|
||||
setShowToast(false);
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
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">
|
||||
Contact
|
||||
</p>
|
||||
<h1 className="mt-4 font-display text-4xl font-black text-brand-dark md:text-6xl">
|
||||
Talk to the Nearle team.
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-on-surface-variant">
|
||||
Reach out for partnerships, support, business onboarding, or neighborhood launch enquiries.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<div className="relative min-h-screen bg-background">
|
||||
{/* ─── Breadcrumbs & Hero Page Header ─── */}
|
||||
<section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-20 pb-24 text-center">
|
||||
{/* Background Decorative Gradients */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(108,14,128,0.25),transparent_40%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(252,163,17,0.08),transparent_50%)]" />
|
||||
|
||||
<div className="relative z-10 mx-auto max-w-container-max">
|
||||
{/* Breadcrumbs */}
|
||||
<nav className="flex justify-center mb-6">
|
||||
<ol className="inline-flex items-center space-x-1 md:space-x-2 text-body-sm font-bold text-white/50">
|
||||
<li className="inline-flex items-center">
|
||||
<Link
|
||||
href="/"
|
||||
className="hover:text-brand-accent transition-colors flex items-center gap-1"
|
||||
>
|
||||
<MaterialIcon icon="home" size={14} />
|
||||
Home
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<div className="flex items-center">
|
||||
<span className="mx-1 text-white/30">/</span>
|
||||
<span className="text-brand-accent">Contact</span>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<p className="text-label-sm font-black uppercase tracking-[0.2em] text-brand-accent">
|
||||
Get in touch
|
||||
</p>
|
||||
<h1 className="mt-4 font-display text-4xl font-black text-white md:text-6xl tracking-tight">
|
||||
Talk to the Nearle Team
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
|
||||
Have questions about orders, partner onboardings, or neighborhood launches? Reach out and we'll help you.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Four Contact Info Cards ─── */}
|
||||
<section className="relative z-20 mx-auto -mt-10 max-w-container-max px-margin-mobile md:px-margin-desktop">
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
|
||||
{/* Card 1: Location */}
|
||||
<div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="location_on" size={28} className="text-primary" />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Our Location</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
Nearle HQ, 29 Avinashi Road,<br />
|
||||
Coimbatore, Tamil Nadu,<br />
|
||||
641018, India
|
||||
</p>
|
||||
<a
|
||||
href="https://maps.google.com/?q=Avinashi+Road,+Coimbatore,+Tamil+Nadu,+India"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
|
||||
>
|
||||
Get Directions
|
||||
<MaterialIcon icon="arrow_forward" size={14} className="group-hover:translate-x-1 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Card 2: Phones */}
|
||||
<div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-secondary/5 text-secondary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="call" size={28} className="text-secondary" />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Phones</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
|
||||
<span>+91 80 4912 3456</span>
|
||||
<span>+91 422 491 2345</span>
|
||||
</p>
|
||||
<div className="mt-auto pt-4 flex gap-4">
|
||||
<a
|
||||
href="tel:+918049123456"
|
||||
className="text-label-sm text-secondary hover:text-on-secondary-container font-black flex items-center gap-1 group"
|
||||
>
|
||||
Helpdesk
|
||||
<MaterialIcon icon="phone" size={14} className="group-hover:scale-110 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 3: Email */}
|
||||
<div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="mail" size={28} className="text-primary" />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Email Us</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
|
||||
<a href="mailto:support@nearle.in" className="hover:text-primary transition-colors">support@nearle.in</a>
|
||||
<a href="mailto:partners@nearle.in" className="hover:text-primary transition-colors">partners@nearle.in</a>
|
||||
</p>
|
||||
<a
|
||||
href="mailto:support@nearle.in"
|
||||
className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
|
||||
>
|
||||
Write to us
|
||||
<MaterialIcon icon="drafts" size={14} className="group-hover:-translate-y-0.5 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Card 4: Working Hours */}
|
||||
<div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-brand-accent/10 text-brand-accent flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="schedule" size={28} className="text-brand-accent" />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Working Hours</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
Monday - Saturday<br />
|
||||
9:00 AM - 6:00 PM<br />
|
||||
<span className="font-bold text-secondary">24/7 Phone Helpdesk</span>
|
||||
</p>
|
||||
<div className="mt-auto pt-4">
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black tracking-wider uppercase bg-secondary/10 text-secondary">
|
||||
<span className="w-2 h-2 rounded-full bg-secondary animate-pulse" />
|
||||
Helpdesk Active
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Map & Form Section ─── */}
|
||||
<section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-20">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
|
||||
|
||||
{/* Left: Google Map (5 Cols) */}
|
||||
<div className="lg:col-span-5 w-full">
|
||||
<div className="relative bg-white rounded-3xl overflow-hidden shadow-xl border border-outline-variant/20 group h-[450px]">
|
||||
<iframe
|
||||
title="Nearle Coimbatore Location Map"
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3916.2816999266157!2d76.9587!3d11.0168!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba859af2f97b047%3A0x36b04859873d6e5a!2sAvinashi%20Rd%2C%20Coimbatore%2C%20Tamil%20Nadu!5e0!3m2!1sen!2sin!4v1719000000000!5m2!1sen!2sin"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
className="filter contrast-[1.05] saturate-[0.9] hover:scale-[1.02] transition-transform duration-700"
|
||||
/>
|
||||
{/* Map Floating Info Badge */}
|
||||
<div className="absolute bottom-6 left-6 right-6 bg-white/95 backdrop-blur-md rounded-2xl p-4 border border-outline-variant/20 shadow-lg flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="store" size={20} className="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-body-sm font-black text-brand-dark">Coimbatore Hub</h4>
|
||||
<p className="text-[11px] text-on-surface-variant">Connecting local vendors & residents</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Message Form (7 Cols) */}
|
||||
<div className="lg:col-span-7 bg-white rounded-3xl p-8 md:p-10 border border-outline-variant/25 shadow-xl relative overflow-hidden">
|
||||
{/* Background Accent Mesh */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 left-0 w-32 h-32 bg-secondary/5 rounded-full blur-3xl" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
Write to us
|
||||
</span>
|
||||
<h2 className="font-display text-2xl md:text-3xl font-black text-brand-dark mt-2 mb-8">
|
||||
Send Message
|
||||
</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Name field */}
|
||||
<div className="flex flex-col">
|
||||
<label htmlFor="field-name" className="text-label-sm text-on-surface-variant font-bold mb-2">
|
||||
Your Name
|
||||
</label>
|
||||
<div className="relative">
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-4 text-on-surface-variant/40">
|
||||
<MaterialIcon icon="person" size={20} />
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
id="field-name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
placeholder="e.g. John Doe"
|
||||
className={`w-full pl-11 pr-4 py-3.5 bg-surface rounded-xl border ${
|
||||
errors.name ? "border-error" : "border-outline-variant/30"
|
||||
} text-body-md text-on-surface placeholder:text-on-surface-variant/45 focus:outline-none focus:ring-2 ${
|
||||
errors.name ? "focus:ring-error/20" : "focus:ring-primary/20"
|
||||
} focus:border-primary transition-all`}
|
||||
/>
|
||||
</div>
|
||||
{errors.name && (
|
||||
<span className="text-body-sm text-error font-bold mt-1.5 flex items-center gap-1">
|
||||
<MaterialIcon icon="error" size={14} />
|
||||
{errors.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Email field */}
|
||||
<div className="flex flex-col">
|
||||
<label htmlFor="field-email" className="text-label-sm text-on-surface-variant font-bold mb-2">
|
||||
Your Email
|
||||
</label>
|
||||
<div className="relative">
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-4 text-on-surface-variant/40">
|
||||
<MaterialIcon icon="email" size={20} />
|
||||
</span>
|
||||
<input
|
||||
type="email"
|
||||
id="field-email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
placeholder="e.g. john@example.com"
|
||||
className={`w-full pl-11 pr-4 py-3.5 bg-surface rounded-xl border ${
|
||||
errors.email ? "border-error" : "border-outline-variant/30"
|
||||
} text-body-md text-on-surface placeholder:text-on-surface-variant/45 focus:outline-none focus:ring-2 ${
|
||||
errors.email ? "focus:ring-error/20" : "focus:ring-primary/20"
|
||||
} focus:border-primary transition-all`}
|
||||
/>
|
||||
</div>
|
||||
{errors.email && (
|
||||
<span className="text-body-sm text-error font-bold mt-1.5 flex items-center gap-1">
|
||||
<MaterialIcon icon="error" size={14} />
|
||||
{errors.email}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Message field */}
|
||||
<div className="flex flex-col">
|
||||
<label htmlFor="field-message" className="text-label-sm text-on-surface-variant font-bold mb-2">
|
||||
Message
|
||||
</label>
|
||||
<div className="relative">
|
||||
<span className="absolute top-3.5 left-4 text-on-surface-variant/40">
|
||||
<MaterialIcon icon="chat_bubble" size={20} />
|
||||
</span>
|
||||
<textarea
|
||||
id="field-message"
|
||||
name="message"
|
||||
rows={5}
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Describe your inquiry in detail (e.g. partnership options, tech support, etc.)"
|
||||
className={`w-full pl-11 pr-4 py-3.5 bg-surface rounded-xl border ${
|
||||
errors.message ? "border-error" : "border-outline-variant/30"
|
||||
} text-body-md text-on-surface placeholder:text-on-surface-variant/45 focus:outline-none focus:ring-2 ${
|
||||
errors.message ? "focus:ring-error/20" : "focus:ring-primary/20"
|
||||
} focus:border-primary transition-all resize-none`}
|
||||
/>
|
||||
</div>
|
||||
{errors.message && (
|
||||
<span className="text-body-sm text-error font-bold mt-1.5 flex items-center gap-1">
|
||||
<MaterialIcon icon="error" size={14} />
|
||||
{errors.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Submit button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full bg-primary hover:bg-primary-container disabled:bg-primary-container/60 text-on-primary font-black px-8 py-4 rounded-xl text-label-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] flex items-center justify-center gap-2 cursor-pointer"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
<span>Sending Message...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<MaterialIcon icon="send" size={18} />
|
||||
<span>Submit Message</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Success Toast Notification ─── */}
|
||||
{showToast && (
|
||||
<div className="fixed bottom-8 right-8 z-50 animate-bounce-subtle max-w-sm w-full bg-brand-dark-surface border border-brand-accent/30 rounded-2xl shadow-2xl p-4 flex gap-4 items-start">
|
||||
<div className="w-10 h-10 rounded-xl bg-secondary text-white flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="check_circle" size={24} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-body-md font-black text-white">Message Sent!</h4>
|
||||
<p className="text-body-sm text-white/70 mt-1 leading-normal">
|
||||
Thank you for reaching out. We will get back to you within 24 hours.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowToast(false)}
|
||||
className="text-white/40 hover:text-white transition-colors cursor-pointer shrink-0"
|
||||
aria-label="Close Toast"
|
||||
>
|
||||
<MaterialIcon icon="close" size={18} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -330,21 +330,20 @@ body {
|
||||
@media (min-width: 768px) {
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 760px;
|
||||
overflow: visible;
|
||||
background: #ffffff;
|
||||
min-height: 785px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 62% 48%, rgba(108, 14, 128, 0.7), transparent 36%),
|
||||
radial-gradient(circle at 25% 38%, rgba(55, 0, 74, 0.62), transparent 34%),
|
||||
linear-gradient(135deg, #09000e 0%, #17001f 42%, #2c0038 70%, #0b0010 100%);
|
||||
}
|
||||
|
||||
.hero-dark-panel {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
background:
|
||||
radial-gradient(circle at 62% 48%, rgba(108, 14, 128, 0.7), transparent 36%),
|
||||
radial-gradient(circle at 25% 38%, rgba(55, 0, 74, 0.62), transparent 34%),
|
||||
linear-gradient(135deg, #09000e 0%, #17001f 42%, #2c0038 70%, #0b0010 100%);
|
||||
clip-path: polygon(0 0, 94% 0, 56% 100%, 0 100%);
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero-dark-panel::after {
|
||||
@@ -359,20 +358,42 @@ body {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-bike {
|
||||
.hero-visual-layer {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: clamp(560px, 44vw, 760px);
|
||||
aspect-ratio: 1080 / 867;
|
||||
right: clamp(40px, 5vw, 100px);
|
||||
bottom: 70px;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 110px;
|
||||
width: min(50vw, 820px);
|
||||
pointer-events: none;
|
||||
filter: none;
|
||||
overflow: hidden;
|
||||
animation: hero-bike-enter 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
.hero-bike img {
|
||||
.hero-visual-panel {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #ffffff;
|
||||
clip-path: polygon(42% 0, 100% 0, 100% 100%, 0 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero-visual-image {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: clamp(48px, 5vw, 96px);
|
||||
bottom: clamp(26px, 4vw, 60px);
|
||||
width: min(78%, 600px);
|
||||
max-width: 600px;
|
||||
max-height: calc(100% - 80px);
|
||||
aspect-ratio: 455 / 374;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.hero-visual-image img {
|
||||
animation: hero-bike-float 5.5s ease-in-out 900ms infinite;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.hero-map-layer {
|
||||
@@ -394,7 +415,7 @@ body {
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
z-index: 3;
|
||||
width: min(610px, 48vw);
|
||||
padding-top: 94px;
|
||||
animation: hero-copy-enter 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
@@ -407,8 +428,12 @@ body {
|
||||
}
|
||||
|
||||
.hero-cards {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
transform: translateY(-50%);
|
||||
padding-left: clamp(72px, 7.5vw, 150px);
|
||||
padding-right: clamp(72px, 7.5vw, 150px);
|
||||
margin-bottom: -45px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -417,15 +442,15 @@ body {
|
||||
min-height: 720px;
|
||||
}
|
||||
|
||||
.hero-dark-panel {
|
||||
width: 82%;
|
||||
clip-path: polygon(0 0, 100% 0, 58% 100%, 0 100%);
|
||||
.hero-visual-layer {
|
||||
width: min(52vw, 560px);
|
||||
bottom: 128px;
|
||||
}
|
||||
|
||||
.hero-bike {
|
||||
width: 500px;
|
||||
right: -72px;
|
||||
bottom: 86px;
|
||||
.hero-visual-image {
|
||||
right: -8px;
|
||||
bottom: 52px;
|
||||
width: min(86%, 460px);
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
@@ -438,8 +463,8 @@ body {
|
||||
.hero {
|
||||
position: relative;
|
||||
background: #120018;
|
||||
padding-bottom: 120px;
|
||||
overflow: visible;
|
||||
padding-bottom: 48px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-dark-panel {
|
||||
@@ -472,16 +497,49 @@ body {
|
||||
width: 100%;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 24px;
|
||||
padding-left: var(--spacing-margin-mobile);
|
||||
padding-right: var(--spacing-margin-mobile);
|
||||
}
|
||||
|
||||
.hero-bike {
|
||||
.hero-visual-layer {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
z-index: 2;
|
||||
width: 95%;
|
||||
max-width: 450px;
|
||||
aspect-ratio: 1080 / 867;
|
||||
margin: 20px auto 0 auto;
|
||||
pointer-events: none;
|
||||
filter: none; /* No filter tint */
|
||||
filter: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-visual-panel {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #ffffff;
|
||||
clip-path: polygon(44% 0, 100% 0, 100% 100%, 14% 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero-visual-image {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset: 12% 6% 12% 20%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.hero-visual-image img {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.hero-cards {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
margin-top: 40px;
|
||||
padding-left: var(--spacing-margin-mobile);
|
||||
padding-right: var(--spacing-margin-mobile);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -165,12 +165,13 @@ export function Hero() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Dominant Purple Scooter Rider (Overlapping) */}
|
||||
<div className="hero-bike select-none pointer-events-none">
|
||||
<div className="relative w-full h-full flex items-end">
|
||||
{/* Right Column: Dominant delivery image (Overlapping) */}
|
||||
<div className="hero-visual-layer select-none pointer-events-none">
|
||||
<div className="hero-visual-panel" />
|
||||
<div className="hero-visual-image">
|
||||
<Image
|
||||
src="/images/slider-courier-mask-purple-v4.png"
|
||||
alt="Nearle Delivery Courier"
|
||||
src="/nearlenewlogo.png"
|
||||
alt="Nearle delivery"
|
||||
fill
|
||||
sizes="(max-width: 768px) 95vw, 48vw"
|
||||
className="object-contain object-bottom drop-shadow-2xl"
|
||||
@@ -181,7 +182,7 @@ export function Hero() {
|
||||
</div>
|
||||
|
||||
{/* Overlapping Quick Category Links (Anchored at the bottom edge) */}
|
||||
<div className="hero-cards absolute bottom-0 left-0 right-0 transform translate-y-[50%] z-20">
|
||||
<div className="hero-cards">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{QUICK_LINKS.map((item) => (
|
||||
<div
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { usePathname } from "next/navigation";
|
||||
import React, { useState } from "react";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const COMPANY = [
|
||||
@@ -23,11 +27,104 @@ const LEGAL = [
|
||||
{ label: "Sitemap", href: "#" },
|
||||
];
|
||||
|
||||
type FooterFormData = {
|
||||
name: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
message: string;
|
||||
};
|
||||
|
||||
type FooterFormErrors = {
|
||||
name?: string;
|
||||
phone?: string;
|
||||
email?: string;
|
||||
message?: string;
|
||||
};
|
||||
|
||||
export function Footer() {
|
||||
const pathname = usePathname();
|
||||
const isContactPage = pathname === "/contact";
|
||||
|
||||
// Form states
|
||||
const [formData, setFormData] = useState<FooterFormData>({
|
||||
name: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
message: "",
|
||||
});
|
||||
const [errors, setErrors] = useState<FooterFormErrors>({});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submitSuccess, setSubmitSuccess] = useState(false);
|
||||
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
if (errors[name as keyof FooterFormErrors]) {
|
||||
setErrors((prev) => ({
|
||||
...prev,
|
||||
[name]: undefined,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
const tempErrors: FooterFormErrors = {};
|
||||
let isValid = true;
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
tempErrors.name = "Name is required";
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!formData.phone.trim()) {
|
||||
tempErrors.phone = "Phone is required";
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!formData.email.trim()) {
|
||||
tempErrors.email = "Email is required";
|
||||
isValid = false;
|
||||
} else if (!emailRegex.test(formData.email)) {
|
||||
tempErrors.email = "Please enter a valid email address";
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!formData.message.trim()) {
|
||||
tempErrors.message = "Message is required";
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
setErrors(tempErrors);
|
||||
return isValid;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!validateForm()) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
// Simulate API delay
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
setIsSubmitting(false);
|
||||
setSubmitSuccess(true);
|
||||
setFormData({ name: "", phone: "", email: "", message: "" });
|
||||
|
||||
// Hide success alert after 5 seconds
|
||||
setTimeout(() => {
|
||||
setSubmitSuccess(false);
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
return (
|
||||
<footer className="relative bg-brand-dark text-white border-t border-white/5 pt-28 pb-12 w-full mt-24">
|
||||
<footer className="relative z-10 bg-brand-dark text-white border-t border-white/5 pt-24 pb-6 w-full mt-24">
|
||||
{/* Overlapping Contact Helpdesk Card */}
|
||||
<div className="absolute top-0 left-0 right-0 transform -translate-y-1/2 z-20 max-w-container-max mx-auto px-margin-mobile md:px-margin-desktop">
|
||||
<div className="absolute -top-20 md:-top-14 left-0 right-0 z-20 max-w-[1380px] mx-auto px-margin-mobile md:px-margin-desktop">
|
||||
<div className="bg-brand-accent p-6 md:p-8 rounded-[2.5rem] flex flex-col md:flex-row justify-between items-center gap-6 shadow-2xl border border-brand-accent/20">
|
||||
<div className="flex items-center gap-4 text-brand-dark">
|
||||
<div className="w-12 h-12 rounded-full bg-brand-dark text-brand-accent flex items-center justify-center shadow-lg">
|
||||
@@ -50,25 +147,30 @@ export function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-container-max mx-auto px-margin-mobile md:px-margin-desktop">
|
||||
{/* Footer Link Grid */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-gutter mb-16 pt-4">
|
||||
<div className="max-w-[1380px] mx-auto px-margin-mobile md:px-margin-desktop">
|
||||
|
||||
{/* Main content grid: aligned on the same top baseline */}
|
||||
<div className={`grid grid-cols-1 md:grid-cols-2 lg:items-start gap-y-10 gap-x-6 lg:gap-x-12 mb-12 ${
|
||||
isContactPage
|
||||
? "lg:grid-cols-[220px_170px_190px_150px]"
|
||||
: "lg:grid-cols-[220px_170px_190px_150px_minmax(360px,480px)]"
|
||||
}`}>
|
||||
{/* Brand Column */}
|
||||
<div className="col-span-2 md:col-span-1">
|
||||
<div className="col-span-1 md:col-span-2 lg:col-span-1">
|
||||
<Link
|
||||
href="/"
|
||||
className="hover:scale-[1.02] transition-transform active:scale-95 duration-200 mb-6 inline-block"
|
||||
className="hover:scale-[1.02] transition-transform active:scale-95 duration-200 mb-4 inline-block"
|
||||
>
|
||||
<Image
|
||||
src="/logo-v2.png"
|
||||
alt="Nearle"
|
||||
width={140}
|
||||
height={23}
|
||||
width={220}
|
||||
height={36}
|
||||
style={{ height: "auto" }}
|
||||
className="h-7 w-auto object-contain"
|
||||
className="h-9 w-auto object-contain"
|
||||
/>
|
||||
</Link>
|
||||
<p className="text-body-sm text-white/60 max-w-xs mb-8 leading-relaxed">
|
||||
<p className="text-body-sm text-white/60 max-w-xs mb-4 leading-relaxed">
|
||||
India's leading hyperlocal neighborhood network, empowering communities and verified local businesses within 2km.
|
||||
</p>
|
||||
{/* Social Links */}
|
||||
@@ -91,18 +193,143 @@ export function Footer() {
|
||||
</div>
|
||||
|
||||
{/* Company Links */}
|
||||
<FooterCol title="Company" links={COMPANY} />
|
||||
|
||||
<div className="col-span-1">
|
||||
<FooterCol title="Company" links={COMPANY} />
|
||||
</div>
|
||||
|
||||
{/* Partnerships Links */}
|
||||
<FooterCol title="Partnerships" links={PARTNERSHIPS} />
|
||||
|
||||
<div className="col-span-1">
|
||||
<FooterCol title="Partnerships" links={PARTNERSHIPS} />
|
||||
</div>
|
||||
|
||||
{/* Legal Links */}
|
||||
<FooterCol title="Legal" links={LEGAL} />
|
||||
<div className="col-span-1">
|
||||
<FooterCol title="Legal" links={LEGAL} />
|
||||
</div>
|
||||
|
||||
{/* Contact Form Card */}
|
||||
{!isContactPage && (
|
||||
<div className="col-span-1 md:col-span-2 lg:col-span-1 bg-white text-brand-dark rounded-3xl p-5 md:p-6 shadow-2xl border border-outline-variant/15 relative overflow-hidden w-full lg:max-w-none lg:-translate-x-16 lg:translate-y-2">
|
||||
{/* Background Glow Decors */}
|
||||
<div className="absolute top-0 right-0 w-24 h-24 bg-primary/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">
|
||||
<h3 className="text-xl font-display font-black text-brand-dark tracking-tight">
|
||||
Send us a Message
|
||||
</h3>
|
||||
<p className="text-[11px] text-on-surface-variant mt-1 mb-6">
|
||||
We shall guide you through our Neighbourhood Experts.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{submitSuccess && (
|
||||
<div className="p-3 bg-secondary/10 border border-secondary/20 text-secondary text-body-sm font-bold rounded-xl flex items-center justify-center gap-1.5 animate-bounce-subtle">
|
||||
<MaterialIcon icon="check_circle" size={16} />
|
||||
<span>Message sent successfully!</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-4">
|
||||
<div className="flex flex-col text-left">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Your Name..."
|
||||
className={`w-full bg-surface border ${
|
||||
errors.name ? "border-error focus:ring-error/20" : "border-outline-variant/30 focus:ring-primary/20"
|
||||
} text-body-sm text-on-surface placeholder:text-on-surface-variant/45 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:border-primary transition-all`}
|
||||
/>
|
||||
{errors.name && (
|
||||
<span className="text-[9px] text-error font-bold mt-1 pl-1 flex items-center gap-0.5">
|
||||
<MaterialIcon icon="error" size={10} />
|
||||
{errors.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col text-left">
|
||||
<input
|
||||
type="text"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Your Phone..."
|
||||
className={`w-full bg-surface border ${
|
||||
errors.phone ? "border-error focus:ring-error/20" : "border-outline-variant/30 focus:ring-primary/20"
|
||||
} text-body-sm text-on-surface placeholder:text-on-surface-variant/45 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:border-primary transition-all`}
|
||||
/>
|
||||
{errors.phone && (
|
||||
<span className="text-[9px] text-error font-bold mt-1 pl-1 flex items-center gap-0.5">
|
||||
<MaterialIcon icon="error" size={10} />
|
||||
{errors.phone}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col text-left">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Your Email Address..."
|
||||
className={`w-full bg-surface border ${
|
||||
errors.email ? "border-error focus:ring-error/20" : "border-outline-variant/30 focus:ring-primary/20"
|
||||
} text-body-sm text-on-surface placeholder:text-on-surface-variant/45 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:border-primary transition-all`}
|
||||
/>
|
||||
{errors.email && (
|
||||
<span className="text-[9px] text-error font-bold mt-1 pl-1 flex items-center gap-0.5">
|
||||
<MaterialIcon icon="error" size={10} />
|
||||
{errors.email}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col text-left">
|
||||
<textarea
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Your Message..."
|
||||
rows={3}
|
||||
className={`w-full bg-surface border ${
|
||||
errors.message ? "border-error focus:ring-error/20" : "border-outline-variant/30 focus:ring-primary/20"
|
||||
} text-body-sm text-on-surface placeholder:text-on-surface-variant/45 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:border-primary transition-all resize-none`}
|
||||
/>
|
||||
{errors.message && (
|
||||
<span className="text-[9px] text-error font-bold mt-1 pl-1 flex items-center gap-0.5">
|
||||
<MaterialIcon icon="error" size={10} />
|
||||
{errors.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full bg-primary hover:bg-primary-container disabled:bg-primary/50 text-on-primary font-black px-6 py-3 rounded-xl text-label-md shadow-md active:scale-95 duration-200 transition-all flex items-center justify-center gap-2 cursor-pointer"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
<span>SUBMITTING...</span>
|
||||
</>
|
||||
) : (
|
||||
<span>SUBMIT</span>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p className="text-body-sm text-white/40">
|
||||
<div className="border-t border-white/10 pt-7 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p className="text-body-sm text-white/40 lg:pl-20">
|
||||
© {new Date().getFullYear()} Nearle. All rights reserved.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-white/40 text-body-sm">
|
||||
|
||||
@@ -28,10 +28,10 @@ export function Navbar() {
|
||||
<Image
|
||||
src="/logo-purple-v2.png"
|
||||
alt="Nearle"
|
||||
width={140}
|
||||
height={23}
|
||||
width={220}
|
||||
height={50}
|
||||
style={{ height: "auto" }}
|
||||
className="h-7 w-auto object-contain"
|
||||
className="h-9 w-auto object-contain"
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user