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

update layout

Browse Source
This commit is contained in:
Aravind
2026-06-23 19:50:35 +05:30
parent 8ffc7809ce
commit 230be11899
14 changed files with 841 additions and 731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,41 +11,82 @@ export const metadata: Metadata = {
export default function ContactPage() {
return (
<div className="relative min-h-screen bg-background">
{/* ─── Breadcrumbs & Hero Page Header ─── */}
<section className="hero-section relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-36 pb-40 text-center">
{/* Background Image with Overlay */}
<div className="hero-background select-none pointer-events-none">
<Image
src="/contect.png"
alt="Contact Nearle Background"
fill
sizes="100vw"
className="object-cover object-right"
priority
/>
</div>
<div className="bg-[#E6D7EA] min-h-screen pt-20 md:pt-24 lg:pt-28 pb-10 md:pb-16 flex flex-col gap-4 md:gap-6 lg:gap-8">
{/* ─── Redesigned Hero/Contact Section ─── */}
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
<section className="bg-brand-dark rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden min-h-[720px] flex items-center relative px-6 py-16 md:px-10 md:py-20 lg:px-16 lg:py-24">
{/* Subtle decorative blurred purple glow behind left content */}
<div className="absolute left-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-primary/25 blur-[120px] pointer-events-none z-0" />
<div className="w-full mx-auto relative z-10">
<div className="grid grid-cols-1 lg:grid-cols-[1fr_0.9fr] items-center gap-10 lg:gap-16">
{/* Left Column — MUST BE VISIBLE */}
<div className="relative z-10 text-white max-w-[580px]">
<span className="text-brand-accent uppercase tracking-[0.18em] font-bold text-xs block">
LET’S CONNECT
</span>
<h1 className="mt-4 font-display text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] text-white">
Let’s Build Better Neighbourhoods Together.
</h1>
<p className="text-white/70 text-lg leading-relaxed mt-6">
Whether you are a customer, local store owner, or delivery partner, our team is here to help you get started with Nearle.
</p>
<div className="hero-content relative z-10 mx-auto max-w-container-max">
{/* Header Title */}
<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&apos;ll help you.
</p>
</div>
</section>
{/* Info Rows */}
<div className="mt-10 border-t border-white/10">
{/* Row 1 */}
<div className="flex gap-4 py-5 border-b border-white/10 items-center">
<div className="w-11 h-11 rounded-full bg-white/10 text-brand-accent flex items-center justify-center shadow-md shrink-0">
<MaterialIcon icon="location_on" size={20} />
</div>
<div className="text-left">
<h4 className="text-white font-bold">Based in Coimbatore</h4>
<p className="text-white/60 text-sm mt-0.5">Building neighbourhood commerce, one local store at a time.</p>
</div>
</div>
{/* Row 2 */}
<div className="flex gap-4 py-5 border-b border-white/10 items-center">
<div className="w-11 h-11 rounded-full bg-white/10 text-brand-accent flex items-center justify-center shadow-md shrink-0">
<MaterialIcon icon="schedule" size={20} />
</div>
<div className="text-left">
<h4 className="text-white font-bold">Talk to Our Team</h4>
<p className="text-white/60 text-sm mt-0.5">Monday to Saturday, 9:30 AM to 6:30 PM.</p>
</div>
</div>
{/* Row 3 */}
<div className="flex gap-4 py-5 border-b border-white/10 items-center">
<div className="w-11 h-11 rounded-full bg-white/10 text-brand-accent flex items-center justify-center shadow-md shrink-0">
<MaterialIcon icon="support_agent" size={20} />
</div>
<div className="text-left">
<h4 className="text-white font-bold">Quick Support</h4>
<p className="text-white/60 text-sm mt-0.5">Share your details and our team will get back to you.</p>
</div>
</div>
</div>
</div>
{/* Right Column: Form Card */}
<div className="w-full max-w-[520px] lg:ml-auto relative z-10">
<ContactForm />
</div>
</div>
</div>
</section>
</div>
{/* ─── Four Contact Info Cards ─── */}
<section className="relative z-20 mx-auto -mt-16 max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
<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="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 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>
@@ -67,7 +108,7 @@ export default function ContactPage() {
</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="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 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>
@@ -88,7 +129,7 @@ export default function ContactPage() {
</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="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 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>
@@ -107,7 +148,7 @@ export default function ContactPage() {
</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="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 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>
@@ -126,44 +167,37 @@ export default function ContactPage() {
</div>
</div>
</section>
</div>
{/* ─── Map & Form Section ─── */}
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24">
<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://maps.google.com/maps?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002&t=&z=16&ie=UTF8&iwloc=&output=embed"
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">R.S. Puram Hub</h4>
<p className="text-[11px] text-on-surface-variant">Connecting local vendors & residents</p>
</div>
{/* ─── Map Section ─── */}
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
<section className="bg-white rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-6 md:p-8 shadow-lg">
<div className="relative w-full h-[450px]">
<iframe
title="Nearle Coimbatore Location Map"
src="https://maps.google.com/maps?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002&t=&z=16&ie=UTF8&iwloc=&output=embed"
width="100%"
height="100%"
style={{ border: 0 }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
className="filter contrast-[1.05] saturate-[0.9]"
/>
{/* 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 max-w-sm">
<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 className="text-left">
<h4 className="text-body-sm font-black text-brand-dark">R.S. Puram Hub</h4>
<p className="text-[11px] text-on-surface-variant">Connecting local vendors & residents</p>
</div>
</div>
</div>
</section>
</div>
{/* Right: Message Form (7 Cols) */}
<ContactForm />
</div>
</section>
</div>
);
}

32
src/app/globals.css
View File

@@ -113,6 +113,7 @@
--color-brand-cream: var(--brand-cream);
/* Spacing */
--spacing-13: 3.25rem;
--spacing-stack-xs: 4px;
--spacing-stack-sm: 8px;
--spacing-stack-md: 16px;
@@ -422,7 +423,7 @@ body {
z-index: 3;
width: 48%;
max-width: 48%;
padding-top: 94px;
padding-top: 184px;
padding-bottom: 40px;
animation: hero-copy-enter 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@@ -479,7 +480,7 @@ body {
position: relative;
z-index: 3;
width: 100%;
padding-top: 60px;
padding-top: 138px;
padding-bottom: 24px;
padding-left: var(--spacing-margin-mobile);
padding-right: var(--spacing-margin-mobile);
@@ -662,24 +663,22 @@ body {
/* Contact Form Card styling */
.footer-brand {
grid-area: brand;
min-width: 0;
}
.footer-company {
grid-area: company;
min-width: 0;
}
.footer-partnerships {
grid-area: partnerships;
min-width: 0;
}
.footer-legal {
grid-area: legal;
margin-top: 12px;
}
.footer-contact-wrap {
grid-area: form;
min-width: 0;
width: 100%;
}
@@ -689,14 +688,12 @@ body {
max-width: 540px;
min-width: 0;
box-sizing: border-box;
padding: 48px 36px;
border-radius: 32px;
}
@media (max-width: 640px) {
.footer-contact-card {
max-width: 100%;
padding: 32px 20px;
border-radius: 24px;
}
}
@@ -726,15 +723,7 @@ body {
}
.footer-form-row {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 1440px) {
.footer-form-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Layout handled via Tailwind grid classes in Footer.tsx */
}
.footer-input {
@@ -745,7 +734,6 @@ body {
color: var(--on-surface);
border-radius: 14px;
padding-inline: 16px;
min-height: 60px;
font-size: 16px;
outline: none;
transition: all 0.2s ease;
@@ -777,7 +765,6 @@ body {
color: var(--on-surface);
border-radius: 14px;
padding: 16px;
min-height: 130px;
font-size: 16px;
outline: none;
resize: none;
@@ -818,7 +805,6 @@ body {
background: var(--primary);
color: var(--on-primary);
font-weight: 700;
min-height: 62px;
font-size: 18px;
border-radius: 14px;
display: flex;
@@ -915,10 +901,6 @@ body {
"legal";
gap: 32px;
}
.footer-contact-card {
padding: 28px 22px;
}
}
/* ─── Footer Vertical Spacing & Height Alignment ─── */

35
src/app/page.tsx
View File

@@ -5,19 +5,32 @@ import { HowItWorks } from "@/components/home/HowItWorks";
import { HyperlocalFeatures } from "@/components/home/HyperlocalFeatures";
import { BusinessSection } from "@/components/home/BusinessSection";
import { StoreQRSection } from "@/components/home/StoreQRSection";
import { AppPromo } from "@/components/home/AppPromo";
export default function HomePage() {
return (
<>
<Hero />
<ServiceCategories />
<WhyNearle />
<HowItWorks />
<HyperlocalFeatures />
<BusinessSection />
<StoreQRSection />
<AppPromo />
</>
<div className="bg-[#E6D7EA] min-h-screen pt-20 md:pt-24 lg:pt-28 pb-10 md:pb-16 flex flex-col gap-4 md:gap-6 lg:gap-8">
<div className="w-full max-w-[1560px] mx-auto px-4 md:px-6 lg:px-8 xl:px-10">
<Hero />
</div>
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
<ServiceCategories />
</div>
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
<WhyNearle />
</div>
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
<HowItWorks />
</div>
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
<HyperlocalFeatures />
</div>
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
<BusinessSection />
</div>
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
<StoreQRSection />
</div>
</div>
);
}

12
src/components/contact/ContactForm.tsx
View File

@@ -95,10 +95,10 @@ export function ContactForm() {
return (
<>
<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">
<div className="w-full max-w-[520px] lg:ml-auto bg-white rounded-[2rem] md:rounded-[2.5rem] p-7 md:p-10 border border-outline-variant/25 shadow-[0_20px_60px_rgba(0,0,0,0.28)] 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="absolute bottom-0 left-0 w-32 h-32 bg-secondary/5 rounded-full blur-2xl" />
<div className="relative z-10">
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
@@ -108,8 +108,8 @@ export function ContactForm() {
Send Message
</h2>
<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<form onSubmit={handleSubmit} className="flex flex-col gap-5">
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
{/* Name field */}
<div className="flex flex-col">
<label htmlFor="field-name" className="text-label-sm text-on-surface-variant font-bold mb-2">
@@ -185,7 +185,7 @@ export function ContactForm() {
<textarea
id="field-message"
name="message"
rows={5}
rows={4}
value={formData.message}
onChange={handleInputChange}
placeholder="Describe your inquiry in detail (e.g. partnership options, tech support, etc.)"
@@ -193,7 +193,7 @@ export function ContactForm() {
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`}
} focus:border-primary transition-all resize-none min-h-[140px]`}
/>
</div>
{errors.message && (

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

@@ -1,164 +0,0 @@
import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const FEATURES = [
{
title: "Browse Nearby Stores",
desc: "See all available groceries, pharmacies, and eateries in your immediate area.",
icon: "store",
},
{
title: "Reorder from Favourite Shops",
desc: "Save your go-to neighborhood stores and reorder your daily needs with a single tap.",
icon: "replay",
},
{
title: "Track Your Delivery",
desc: "Get real-time updates as your neighborhood partner delivers your order straight to your door.",
icon: "local_shipping",
},
{
title: "Discover Local Offers",
desc: "Access exclusive deals, neighborhood sales, and daily promotions from stores near you.",
icon: "local_offer",
},
];
export function AppPromo() {
return (
<section
id="download"
className="py-16 px-6 md:px-12 lg:px-20 xl:px-24 bg-brand-cream overflow-hidden border-t border-outline-variant/10"
>
<div className="max-w-container-max mx-auto relative">
{/* Background Dot pattern */}
<div
className="absolute inset-0 opacity-[0.03] pointer-events-none"
style={{
backgroundImage: "radial-gradient(#120217 2px, transparent 2px)",
backgroundSize: "24px 24px",
}}
/>
<div className="grid md:grid-cols-12 gap-12 items-center relative z-10">
{/* Left Column: Typography, benefits, download actions (7 cols) */}
<div className="md:col-span-7">
<span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/5 px-3.5 py-1.5 rounded-full border border-primary/10">
Download Nearle Mobile
</span>
<h2 className="text-display text-brand-dark mt-6 mb-6 leading-[1.1] tracking-tight">
Your Neighbourhood, <br />
<span className="text-primary font-black">Now in Your Pocket.</span>
</h2>
<p className="text-body-lg text-on-surface-variant mb-10 max-w-lg leading-relaxed">
Experience the easiest way to support and order from your local neighborhood shops. Download the app today.
</p>
{/* Benefit Bullets */}
<div className="space-y-6 mb-10">
{FEATURES.map((item) => (
<div key={item.title} className="flex gap-4">
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-accent/20 flex items-center justify-center">
<MaterialIcon icon={item.icon} size={18} className="text-brand-dark" />
</div>
<div>
<h4 className="text-base md:text-lg font-bold text-brand-dark">{item.title}</h4>
<p className="text-sm md:text-base text-on-surface-variant mt-0.5 leading-relaxed">
{item.desc}
</p>
</div>
</div>
))}
</div>
{/* Store Badges */}
<div className="flex flex-wrap gap-4 mt-8">
<a
href="https://apps.apple.com/us/app/nearle/id1596895375"
target="_blank"
rel="noopener noreferrer"
className="h-14 border border-brand-dark/20 rounded-2xl hover:bg-brand-dark hover:text-white transition-all duration-300 px-6 py-2 flex items-center gap-3 group hover:-translate-y-1 hover:shadow-lg bg-white"
>
<svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current text-brand-dark group-hover:text-white transition-colors" fill="currentColor">
<path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
</svg>
<div className="text-left leading-tight">
<div className="text-xs opacity-75 font-semibold tracking-wider uppercase">
Download on the
</div>
<div className="text-sm md:text-base font-black -mt-0.5">
App Store
</div>
</div>
</a>
<a
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
target="_blank"
rel="noopener noreferrer"
className="h-14 border border-brand-dark/20 rounded-2xl hover:bg-brand-dark hover:text-white transition-all duration-300 px-6 py-2 flex items-center gap-3 group hover:-translate-y-1 hover:shadow-lg bg-white"
>
<svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current text-brand-dark group-hover:text-white transition-colors" fill="currentColor">
<path d="M3.609 1.814L13.414 12 3.609 22.186c-.244-.178-.395-.466-.395-.786V2.6c0-.32.151-.608.395-.786zM14.244 12.83l2.705 2.688-4.073 2.276-4.073 2.276L14.244 12.83zm1-1.66l2.838-2.8 4.153 2.336c.464.26.464.688 0 .948l-4.153 2.336-2.838-2.82zM8.803 4.93l4.073 2.276 4.073 2.276-2.705 2.688L8.803 4.93z" />
</svg>
<div className="text-left leading-tight">
<div className="text-xs opacity-75 font-semibold tracking-wider uppercase">
GET IT ON
</div>
<div className="text-sm md:text-base font-black -mt-0.5">
Google Play
</div>
</div>
</a>
</div>
</div>
{/* Right Column: Phone Mockup showcase (5 cols) */}
<div className="md:col-span-5 flex justify-center md:justify-end relative">
{/* Background glowing circle */}
<div className="absolute w-80 h-80 bg-brand-accent/10 rounded-full blur-2xl pointer-events-none -right-10 top-10" />
<div className="relative w-full max-w-[270px] animate-float">
{/* iPhone style phone container */}
<div className="bg-[#120217] w-full aspect-[9/18.5] rounded-[3rem] border-[6px] border-brand-dark-surface shadow-2xl relative overflow-hidden ring-4 ring-outline-variant/15">
{/* Speaker notch */}
<div className="absolute top-2.5 left-1/2 -translate-x-1/2 w-24 h-4 bg-black rounded-full z-20 flex items-center justify-center">
<div className="w-12 h-1 bg-zinc-800 rounded-full" />
</div>
<Image
src="/mobile image.jpeg"
alt="Nearle mobile app interface showing neighborhood services"
width={360}
height={760}
className="w-full h-full object-cover"
/>
</div>
{/* Overlapping alert bubble */}
<div className="absolute -left-10 top-1/4 bg-white/95 backdrop-blur-md p-4 rounded-2xl shadow-2xl border border-outline-variant/20 hidden lg:block hover:scale-105 transition-transform duration-300">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-full bg-secondary-fixed flex items-center justify-center">
<MaterialIcon
icon="check_circle"
size={18}
className="text-secondary"
/>
</div>
<div>
<p className="text-sm font-black text-brand-dark">Order Confirmed</p>
<p className="text-xs text-on-surface-variant font-medium mt-1">Your local store is preparing your order</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}

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

@@ -7,31 +7,31 @@ const BENEFITS = [
title: "Digital Catalogue",
desc: "Showcase your products online easily to nearby customers.",
icon: "menu_book",
style: "bg-primary text-white",
iconColor: "bg-primary/5 text-primary",
},
{
title: "QR Ordering",
desc: "Enable existing customers to scan and place orders directly at your counter.",
icon: "qr_code",
style: "bg-brand-accent text-brand-dark",
iconColor: "bg-secondary/5 text-secondary",
},
{
title: "Local Discovery",
desc: "Get discovered by residents in your neighbourhood searching for your products.",
icon: "explore",
style: "bg-white border border-outline-variant/20 text-primary",
iconColor: "bg-[#de96f9]/10 text-primary",
},
{
title: "Delivery Support",
desc: "Fulfill orders with your own staff or rely on Nearle's local delivery partners.",
icon: "local_shipping",
style: "bg-[#de96f9]/20 text-primary border border-primary/10",
iconColor: "bg-rose-500/5 text-rose-600",
},
];
export function BusinessSection() {
return (
<section className="py-20 px-6 md:px-12 lg:px-20 xl:px-24 bg-background border-t border-outline-variant/10">
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-12 lg:py-16 px-6 md:px-12 lg:px-20 xl:px-24">
<div className="max-w-container-max mx-auto">
{/* Merchant Section Grid */}
@@ -42,7 +42,7 @@ export function BusinessSection() {
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
Merchant Partnerships
</span>
<h2 className="text-display text-brand-dark mt-6 mb-6 leading-tight">
<h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-6 mb-6 leading-tight tracking-tight">
Bring Your Store Online with Nearle.
</h2>
<p className="text-body-lg text-on-surface-variant mb-10 max-w-xl leading-relaxed">
@@ -80,32 +80,27 @@ export function BusinessSection() {
</div>
</div>
{/* Right Column: Benefit Cards Bento Grid (5 cols) */}
<div className="lg:col-span-5 grid grid-cols-2 gap-6">
{BENEFITS.map((benefit, idx) => (
<div
key={benefit.title}
className={`p-8 rounded-[2.5rem] flex flex-col justify-between h-full min-h-[240px] hover:-translate-y-2 hover:shadow-xl transition-all duration-300 ${benefit.style} ${idx % 2 === 1 ? "translate-y-6 md:translate-y-8" : ""}`}
>
<div className={`w-12 h-12 rounded-full flex items-center justify-center shrink-0 ${benefit.style.includes("primary") && !benefit.style.includes("de96f9") ? "bg-white/20" : "bg-primary/5 text-primary"}`}>
<MaterialIcon icon={benefit.icon} size={24} />
</div>
<div>
<h3 className="text-xl md:text-2xl font-black tracking-tight leading-tight mb-2">
{benefit.title}
</h3>
<p className="text-sm md:text-base opacity-90 leading-relaxed">
{benefit.desc}
</p>
{/* Right Column: Benefit Grid Cardless (5 cols) */}
<div className="lg:col-span-5 grid grid-cols-1 sm:grid-cols-2 gap-8 lg:gap-10">
{BENEFITS.map((benefit) => (
<div key={benefit.title} className="flex flex-col items-start group">
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center mb-4 transition-transform duration-300 group-hover:-translate-y-0.5 shadow-sm ${benefit.iconColor}`}>
<MaterialIcon icon={benefit.icon} size={28} />
</div>
<h3 className="text-xl md:text-2xl font-black tracking-tight text-brand-dark mb-2">
{benefit.title}
</h3>
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
{benefit.desc}
</p>
</div>
))}
</div>
</div>
{/* CURVED PROMO BANNER */}
<div className="mt-32 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
{/* CURVED PROMO BANNER (Bottom CTA Block) */}
<div className="mt-16 md:mt-20 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
{/* Decorative background vectors */}
<div className="absolute right-0 top-0 w-[400px] h-[400px] bg-white/10 rounded-full blur-3xl pointer-events-none" />
<div className="absolute left-10 bottom-0 w-[200px] h-[200px] bg-brand-dark/5 rounded-full blur-2xl pointer-events-none" />
@@ -115,7 +110,7 @@ export function BusinessSection() {
<span className="text-xs font-black uppercase tracking-widest bg-brand-dark/15 px-3.5 py-1.5 rounded-full">
Piping Hot & Fresh
</span>
<h3 className="text-display mt-6 mb-4 leading-[1.1] font-black">
<h3 className="text-4xl md:text-5xl lg:text-[54px] mt-6 mb-4 leading-[1.1] font-display font-black tracking-tight">
Everything Nearby, <br />From Stores You Trust.
</h3>
<p className="text-body-lg text-brand-dark/80 mb-8 max-w-md font-semibold leading-relaxed">
@@ -150,3 +145,5 @@ export function BusinessSection() {
</section>
);
}

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

@@ -29,7 +29,7 @@ const QUICK_LINKS = [
export function Hero() {
return (
<>
<div className="hero">
<div className="hero rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden">
{/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
<div className="hero-dark-panel select-none pointer-events-none">
{/* Subtle Background Dot Texture */}

64
src/components/home/HowItWorks.tsx
View File

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

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

@@ -6,61 +6,64 @@ const FEATURES = [
{
title: "Trusted Nearby Stores",
icon: "store",
desc: "Connect directly with the local merchants you know and shop from regularly.",
desc: "Connect directly with the local merchants you already know.",
},
{
title: "Short-Distance Local Delivery",
title: "Short-Distance Delivery",
icon: "local_shipping",
desc: "Delivered quickly from shops in your immediate area to keep food hot and groceries fresh.",
desc: "Delivered quickly from nearby shops to keep items fresh.",
},
{
title: "Easy Reorders",
icon: "replay",
desc: "Save your favourite stores and reorder your weekly essentials in seconds.",
desc: "Save your favourite stores and reorder in seconds.",
},
{
title: "Support Local Businesses",
icon: "favorite",
desc: "Help neighbourhood stores thrive and remain competitive in a digital world.",
desc: "Help local neighbourhood stores thrive digitally.",
},
];
export function HyperlocalFeatures() {
return (
<section className="bg-background py-16 px-6 md:px-12 lg:px-20 xl:px-24 relative overflow-hidden border-y border-outline-variant/10">
<section className="bg-[#F6F1F8] rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/50 overflow-hidden py-16 md:py-24 px-6 md:px-12 lg:px-20 xl:px-24 relative">
{/* Scoped CSS styles for precise layout enforcement */}
<style>{`
@media (min-width: 901px) {
.custom-care-grid {
grid-template-columns: minmax(420px, 0.9fr) minmax(560px, 1.1fr) !important;
gap: 56px !important;
width: min(1280px, 100%) !important;
}
.custom-care-visual {
max-width: 470px !important;
height: 520px !important;
}
.custom-care-card {
min-height: 520px !important;
padding: 60px !important;
}
}
@media (max-width: 900px) {
.custom-care-grid {
grid-template-columns: 1fr !important;
gap: 32px !important;
width: 100% !important;
}
.custom-care-visual {
max-width: 420px !important;
height: 460px !important;
}
.custom-care-card {
min-height: auto !important;
padding: 36px 24px !important;
}
}
`}</style>
@media (min-width: 901px) {
.custom-care-grid {
grid-template-columns: minmax(500px, 1fr) minmax(560px, 1.1fr) !important;
gap: 64px !important;
width: min(1360px, 100%) !important;
}
.custom-care-visual {
max-width: 530px !important;
height: 580px !important;
}
.custom-care-card {
min-height: 580px !important;
padding: 60px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
}
@media (max-width: 900px) {
.custom-care-grid {
grid-template-columns: 1fr !important;
gap: 32px !important;
width: 100% !important;
}
.custom-care-visual {
max-width: 420px !important;
height: 460px !important;
}
.custom-care-card {
min-height: auto !important;
padding: 36px 24px !important;
}
}
`}</style>
{/* Subtle background radial glows */}
<div className="absolute left-[15%] top-1/2 -translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-brand-accent/[0.03] blur-[130px] pointer-events-none z-0" />
@@ -130,7 +133,7 @@ export function HyperlocalFeatures() {
Community & Trust
</span>
<h3 className="text-display mt-6 mb-8 leading-tight tracking-tight">
<h3 className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-white mt-6 mb-8 leading-tight tracking-tight">
Built Around Your<br />
<span className="text-brand-accent font-black">Neighbourhood</span>
</h3>
@@ -158,7 +161,7 @@ export function HyperlocalFeatures() {
</div>
<div>
<h4 className="text-headline-md font-black text-white group-hover:text-brand-accent transition-colors">
<h4 className="text-lg md:text-xl font-black text-white group-hover:text-brand-accent transition-colors">
{item.title}
</h4>
<p className="text-sm md:text-base text-white/60 mt-1 leading-relaxed">
@@ -200,3 +203,4 @@ export function HyperlocalFeatures() {
</section>
);
}

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

@@ -32,7 +32,7 @@ const CATEGORIES = [
image: "/images/cat-daily-essentials.png",
tag: "Local Store",
tagStyle: "bg-secondary text-white",
desc: "Farm-fresh fruits and vegetables delivered from trusted local vendors.",
desc: "Farm-fresh fruits and vegetables from trusted local vendors.",
cta: "Browse Fresh",
},
{
@@ -40,7 +40,7 @@ const CATEGORIES = [
image: "/images/cat-pet-essentials.png",
tag: "Available Near You",
tagStyle: "bg-orange-500 text-white",
desc: "Kitchen supplies, household cleaners, and other daily utility items.",
desc: "Kitchen supplies, household cleaners, and daily utilities.",
cta: "Shop Needs",
},
{
@@ -55,24 +55,24 @@ const CATEGORIES = [
export function ServiceCategories() {
return (
<section className="bg-background py-20 px-6 md:px-12 lg:px-20 xl:px-24">
<section className="bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-24 px-6 md:px-12 lg:px-20 xl:px-24">
<div className="max-w-container-max mx-auto">
{/* Header Section */}
<div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 gap-4">
<div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 md:mb-16 gap-6">
<div>
<span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/5 px-3 py-1.5 rounded-full">
<span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/10 px-3 py-1.5 rounded-full">
Neighbourhood Offerings
</span>
<h2 className="text-display text-brand-dark mt-3 leading-tight">
<h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-4 leading-tight tracking-tight">
Explore Stores <span className="text-primary font-normal">Near You</span>
</h2>
<p className="text-body-lg text-on-surface-variant mt-2 max-w-xl">
<p className="text-body-lg text-on-surface-variant mt-4 max-w-xl">
Groceries, medicines, food, and everyday essentials from nearby local shops.
</p>
</div>
<Link
href="/people"
className="text-primary text-sm md:text-base font-black flex items-center gap-1 hover:gap-2 transition-all group"
className="text-primary text-sm md:text-base font-black flex items-center gap-1 hover:gap-2 transition-all group shrink-0"
>
View All Categories
<MaterialIcon icon="arrow_forward" size={18} className="transition-transform group-hover:translate-x-1" />
@@ -139,3 +139,4 @@ export function ServiceCategories() {
</section>
);
}

291
src/components/home/StoreQRSection.tsx
View File

@@ -1,5 +1,4 @@
import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const FLOW_STEPS = [
@@ -10,77 +9,249 @@ const FLOW_STEPS = [
export function StoreQRSection() {
return (
<section className="bg-background py-16 px-6 md:px-12 lg:px-20 xl:px-24 border-t border-outline-variant/10">
<div className="max-w-container-max mx-auto">
<div className="grid lg:grid-cols-12 gap-16 items-center">
{/* Left Column: Visual representation of QR Sticker/Counter */}
<div className="lg:col-span-5 flex justify-center relative">
<div className="relative w-full max-w-[380px] aspect-square bg-[#120217] rounded-[2.5rem] p-8 shadow-2xl border-4 border-white/10 flex flex-col justify-between items-center group overflow-hidden">
{/* Decorative radial shine */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(224,200,247,0.15),transparent_60%)] pointer-events-none" />
{/* Header inside QR Sticker */}
<div className="text-center w-full relative z-10">
<p className="text-xs font-black text-brand-accent tracking-[0.2em] uppercase">Order Online</p>
<h4 className="font-display font-black text-white text-lg mt-1">Nearle Store QR</h4>
<p className="text-xs text-white/60 font-semibold mt-1">Nearle Partner Store</p>
</div>
<section id="download" className="bg-gradient-to-br from-[#1C0024] to-[#0D0012] rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden py-16 md:py-24 px-6 md:px-12 lg:px-20 xl:px-24 text-white relative min-h-[640px] flex items-center">
{/* Background ambient glowing details */}
<div className="absolute right-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-brand-accent/5 blur-[120px] pointer-events-none" />
<div className="absolute left-[-10%] bottom-[-10%] w-[50%] h-[50%] rounded-full bg-primary/10 blur-[120px] pointer-events-none" />
{/* Decorative QR Pattern */}
<div className="relative w-52 h-52 bg-white rounded-2xl p-4 flex items-center justify-center shadow-lg group-hover:scale-[1.03] transition-transform duration-500 z-10">
<Image
src="/QR code .png"
alt="Nearle Store QR Code"
width={200}
height={200}
className="object-contain"
/>
</div>
{/* Footer label on QR Sticker */}
<div className="text-center z-10">
<span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-black tracking-wider uppercase bg-brand-accent/15 text-brand-accent">
<span className="w-1.5 h-1.5 rounded-full bg-brand-accent animate-pulse" />
Scan to Shop
</span>
</div>
</div>
</div>
{/* Right Column: Copywriting and Steps */}
<div className="lg:col-span-7">
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
Instant Connections
<div className="w-full max-w-container-max mx-auto relative z-10">
{/* ─── DESKTOP LAYOUT (lg and above) ─── */}
<div className="hidden lg:grid lg:grid-cols-12 gap-20 xl:gap-24 items-center">
{/* Left Column: Heading, flow steps, download buttons */}
<div className="lg:col-span-6">
<span className="text-xs text-brand-accent uppercase tracking-widest font-black bg-brand-accent/10 px-3.5 py-1.5 rounded-full border border-brand-accent/20">
Instant Connections & App
</span>
<h2 className="text-display text-brand-dark mt-6 mb-6 leading-tight">
Your Favourite Store Is <span className="text-secondary">Now Just One Scan Away.</span>
<h2 className="text-4xl md:text-5xl lg:text-[60px] xl:text-[66px] font-display font-black text-white mt-6 mb-6 leading-[1.08] tracking-tight">
Scan to Shop, <br />
<span className="text-brand-accent font-black">Order in Your Pocket.</span>
</h2>
<p className="text-body-lg text-on-surface-variant mb-10 max-w-xl leading-relaxed">
See Nearle at a nearby store? Scan the QR code once, save the store, and order from it anytime.
<p className="text-body-lg text-white/70 mb-10 max-w-xl leading-relaxed">
Find Nearle QRs at nearby stores. Scan once to save it, then order groceries, food, or medicines from your favourite local merchant anytime.
</p>
{/* Visual Steps Row */}
<div className="grid grid-cols-3 gap-6 mb-12 max-w-lg">
{FLOW_STEPS.map((step) => (
<div key={step.label} className="flex flex-col items-center text-center group">
<div className="w-14 h-14 rounded-xl bg-white border border-outline-variant/20 shadow-sm flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors duration-300 mb-3">
<MaterialIcon icon={step.icon} size={28} />
{/* QR Steps row with arrows */}
<div className="flex items-center gap-6 mb-12 max-w-md select-none">
{FLOW_STEPS.map((step, idx) => (
<div key={step.label} className="flex items-center gap-6 flex-1">
<div className="flex flex-col items-center text-center group flex-1">
<div className="w-14 h-14 rounded-xl bg-white/10 text-brand-accent flex items-center justify-center shadow-md mb-2 transition-transform duration-300 group-hover:-translate-y-0.5">
<MaterialIcon icon={step.icon} size={24} />
</div>
<span className="text-sm font-bold text-white/90">
{step.label}
</span>
</div>
<span className="text-sm md:text-base font-black text-brand-dark group-hover:text-primary transition-colors">
{step.label}
</span>
{idx < FLOW_STEPS.length - 1 && (
<MaterialIcon icon="arrow_forward" size={16} className="text-white/30" />
)}
</div>
))}
</div>
<Link
href="/people"
className="bg-primary hover:bg-primary-container text-white font-black px-10 py-4 rounded-full text-sm md:text-base hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200 inline-block"
>
Find Stores Near You
</Link>
{/* App Store Badges (Prominent White Buttons) */}
<div className="flex flex-wrap gap-4">
<a
href="https://apps.apple.com/us/app/nearle/id1596895375"
target="_blank"
rel="noopener noreferrer"
className="h-[60px] border border-white/10 rounded-2xl bg-white text-brand-dark hover:bg-white/90 transition-all duration-300 px-8 py-2 flex items-center gap-3.5 group hover:-translate-y-0.5 hover:shadow-2xl hover:shadow-[rgba(255,255,255,0.15)] shrink-0"
>
<svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current text-brand-dark transition-colors" fill="currentColor">
<path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
</svg>
<div className="text-left leading-tight">
<div className="text-[10px] opacity-75 font-bold tracking-wider uppercase">
Download on the
</div>
<div className="text-sm font-black">
App Store
</div>
</div>
</a>
<a
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
target="_blank"
rel="noopener noreferrer"
className="h-[60px] border border-white/10 rounded-2xl bg-white text-brand-dark hover:bg-white/90 transition-all duration-300 px-8 py-2 flex items-center gap-3.5 group hover:-translate-y-0.5 hover:shadow-2xl hover:shadow-[rgba(255,255,255,0.15)] shrink-0"
>
<svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current text-brand-dark transition-colors" fill="currentColor">
<path d="M3.609 1.814L13.414 12 3.609 22.186c-.244-.178-.395-.466-.395-.786V2.6c0-.32.151-.608.395-.786zM14.244 12.83l2.705 2.688-4.073 2.276-4.073 2.276L14.244 12.83zm1-1.66l2.838-2.8 4.153 2.336c.464.26.464.688 0 .948l-4.153 2.336-2.838-2.82zM8.803 4.93l4.073 2.276 4.073 2.276-2.705 2.688L8.803 4.93z" />
</svg>
<div className="text-left leading-tight">
<div className="text-[10px] opacity-75 font-bold tracking-wider uppercase">
GET IT ON
</div>
<div className="text-sm font-black">
Google Play
</div>
</div>
</a>
</div>
</div>
{/* Right Column: Visual components (QR Sticker & Phone Mockup) */}
<div className="lg:col-span-6 flex items-center justify-center gap-8 relative select-none">
{/* Small supporting visual: QR Sticker (Secondary) */}
<div className="relative w-[210px] shrink-0 aspect-[9/11.5] bg-white rounded-[2rem] p-6 text-brand-dark flex flex-col justify-between items-center shadow-2xl border-2 border-white/20">
<div className="text-center w-full">
<p className="text-[10px] font-black text-primary tracking-wider uppercase">Order Online</p>
<h4 className="font-display font-black text-brand-dark text-base mt-0.5 leading-none">Store QR</h4>
</div>
<div className="relative w-32 h-32 bg-white flex items-center justify-center">
<Image
src="/QR code .png"
alt="Nearle Store QR Code"
width={132}
height={132}
className="object-contain"
/>
</div>
<span className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-[10px] font-black tracking-wider uppercase bg-primary/5 text-primary leading-none">
<span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
Scan to Shop
</span>
</div>
{/* Primary large visual: Phone Mockup (Significantly Larger) */}
<div className="relative w-[290px] shrink-0 aspect-[9/18.5] bg-[#120217] rounded-[2.75rem] border-[7px] border-brand-dark-surface shadow-2xl overflow-hidden ring-4 ring-outline-variant/10">
<Image
src="/mobile image.jpeg"
alt="Nearle mobile app interface"
width={360}
height={760}
className="w-full h-full object-cover"
/>
</div>
{/* Overlapping Confirmation Bubble */}
<div className="absolute -left-8 bottom-[15%] z-20 hidden xl:flex bg-white p-4.5 rounded-2xl shadow-2xl border border-outline-variant/20 max-w-[210px] text-brand-dark items-center gap-3">
<div className="w-8 h-8 rounded-full bg-secondary-fixed flex items-center justify-center shrink-0">
<MaterialIcon icon="check_circle" size={18} className="text-secondary" />
</div>
<div className="min-w-0">
<p className="text-xs font-black">Order Confirmed</p>
<p className="text-[10px] text-on-surface-variant font-medium mt-0.5 leading-tight">Your order is preparing</p>
</div>
</div>
</div>
</div>
{/* ─── MOBILE & TABLET LAYOUT (below lg) ─── */}
<div className="lg:hidden flex flex-col gap-12 text-center">
{/* 1. Heading and description */}
<div>
<span className="text-xs text-brand-accent uppercase tracking-widest font-black bg-brand-accent/10 px-3.5 py-1.5 rounded-full border border-brand-accent/20 inline-block">
Instant Connections & App
</span>
<h2 className="text-4xl font-display font-black text-white mt-6 mb-4 tracking-tight leading-tight">
Scan to Shop, <br />Order in Pocket.
</h2>
<p className="text-body-md text-white/70 max-w-md mx-auto leading-relaxed">
Scan Nearle QRs to instantly save local stores, and order from them anytime in one convenient app.
</p>
</div>
{/* 2. QR Sticker */}
<div className="mx-auto w-[240px] aspect-[9/11.5] bg-white rounded-[2rem] p-6 text-brand-dark flex flex-col justify-between items-center shadow-xl border-2 border-white/20 select-none">
<div className="text-center w-full">
<p className="text-[10px] font-black text-primary tracking-wider uppercase">Order Online</p>
<h4 className="font-display font-black text-brand-dark text-base mt-0.5">Store QR</h4>
</div>
<div className="relative w-36 h-36 bg-white flex items-center justify-center">
<Image
src="/QR code .png"
alt="Nearle Store QR Code"
width={144}
height={144}
className="object-contain"
/>
</div>
<span className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-[10px] font-black tracking-wider uppercase bg-primary/5 text-primary">
<span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
Scan to Shop
</span>
</div>
{/* 3. Scan → Save → Order steps */}
<div className="flex items-center justify-center gap-4 max-w-sm mx-auto select-none">
{FLOW_STEPS.map((step, idx) => (
<div key={step.label} className="flex items-center gap-4 flex-1">
<div className="flex flex-col items-center text-center">
<div className="w-12 h-12 rounded-xl bg-white/10 text-brand-accent flex items-center justify-center shadow-md mb-2">
<MaterialIcon icon={step.icon} size={22} />
</div>
<span className="text-xs font-bold text-white/90">
{step.label}
</span>
</div>
{idx < FLOW_STEPS.length - 1 && (
<MaterialIcon icon="chevron_right" size={16} className="text-white/30" />
)}
</div>
))}
</div>
{/* 4. Phone Mockup */}
<div className="mx-auto w-[240px] aspect-[9/18.5] bg-[#120217] rounded-[2.5rem] border-[5px] border-brand-dark-surface shadow-xl relative overflow-hidden select-none">
<Image
src="/mobile image.jpeg"
alt="Nearle mobile app interface"
width={360}
height={760}
className="w-full h-full object-cover"
/>
</div>
{/* 5. App store buttons */}
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<a
href="https://apps.apple.com/us/app/nearle/id1596895375"
target="_blank"
rel="noopener noreferrer"
className="h-14 w-60 sm:w-auto border border-white/10 rounded-2xl bg-white text-brand-dark hover:bg-white/90 transition-all duration-300 px-6 py-2 flex items-center justify-center gap-3 group"
>
<svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current text-brand-dark transition-colors" fill="currentColor">
<path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
</svg>
<div className="text-left leading-tight">
<div className="text-[10px] opacity-75 font-bold tracking-wider uppercase">
Download on the
</div>
<div className="text-sm font-black">
App Store
</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-60 sm:w-auto border border-white/10 rounded-2xl bg-white text-brand-dark hover:bg-white/90 transition-all duration-300 px-6 py-2 flex items-center justify-center gap-3 group"
>
<svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current text-brand-dark transition-colors" fill="currentColor">
<path d="M3.609 1.814L13.414 12 3.609 22.186c-.244-.178-.395-.466-.395-.786V2.6c0-.32.151-.608.395-.786zM14.244 12.83l2.705 2.688-4.073 2.276-4.073 2.276L14.244 12.83zm1-1.66l2.838-2.8 4.153 2.336c.464.26.464.688 0 .948l-4.153 2.336-2.838-2.82zM8.803 4.93l4.073 2.276 4.073 2.276-2.705 2.688L8.803 4.93z" />
</svg>
<div className="text-left leading-tight">
<div className="text-[10px] opacity-75 font-bold tracking-wider uppercase">
GET IT ON
</div>
<div className="text-sm font-black">
Google Play
</div>
</div>
</a>
</div>
</div>
</div>
</section>
);

22
src/components/home/WhyNearle.tsx
View File

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

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

@@ -43,7 +43,7 @@ type FooterFormErrors = {
export function Footer() {
const pathname = usePathname();
const isContactPage = pathname === "/contact";
const isContactPage = pathname?.startsWith("/contact");
// Form states
const [formData, setFormData] = useState<FooterFormData>({
@@ -121,229 +121,273 @@ export function Footer() {
}, 5000);
};
return (
<footer className="footer relative z-10 bg-brand-dark text-white border-t border-white/5 w-full mt-24">
{/* Overlapping Contact Helpdesk Card */}
<div className="footer-helpdesk-wrap">
<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">
<MaterialIcon icon="headset_mic" size={24} />
</div>
<div>
<h4 className="text-headline-md font-black">24/7 Neighborhood Helpdesk</h4>
<p className="helpdesk-subtitle mt-0.5">
Need immediate assistance with an order or local service?
</p>
</div>
</div>
<a
href="tel:+918049123456"
className="helpdesk-btn"
>
<MaterialIcon icon="phone" size={20} className="animate-pulse-subtle" />
<span>+91 80 4912 3456</span>
</a>
</div>
</div>
const brandCol = (
<div className="footer-brand min-w-0 self-start">
<Link
href="/"
className="mb-4 inline-block"
>
<Image
src="/logo-v2.png"
alt="Nearle"
width={220}
height={36}
style={{ width: "210px", height: "auto" }}
className="object-contain"
/>
</Link>
<p className="footer-desc mb-4 text-white/80">
India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within 2km.
</p>
<div className="footer-container">
{/* Main content wrapper */}
<div className="footer-main">
{/* Main content grid: aligned on the same top baseline */}
<div className={`${
isContactPage
? "footer-grid-contact-page"
: "footer-grid"
}`}>
{/* Brand Column */}
<div className="footer-brand">
<Link
href="/"
className="mb-4 inline-block"
>
<Image
src="/logo-v2.png"
alt="Nearle"
width={220}
height={36}
style={{ width: "210px", height: "auto" }}
className="object-contain"
/>
</Link>
<p className="footer-desc mb-4">
India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within 2km.
</p>
{/* Social Links */}
<div className="flex gap-4">
<a
href="#"
className="footer-social-link"
aria-label="Share"
>
<MaterialIcon icon="share" size={24} />
</a>
<a
href="#"
className="footer-social-link"
aria-label="Website"
>
<MaterialIcon icon="public" size={24} />
</a>
{/* Social Links */}
<div className="flex gap-4">
<a
href="#"
className="footer-social-link"
aria-label="Share"
>
<MaterialIcon icon="share" size={24} />
</a>
<a
href="#"
className="footer-social-link"
aria-label="Website"
>
<MaterialIcon icon="public" size={24} />
</a>
</div>
</div>
);
return (
<footer className="bg-[#E6D7EA] px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 py-8 md:py-12 lg:py-14 w-full mt-24">
<div className="mx-auto max-w-[1560px]">
<div className="bg-[#120217] rounded-[1.5rem] md:rounded-[2rem] lg:rounded-[2.5rem] overflow-hidden border border-white/10 shadow-[0_18px_45px_rgba(20,0,30,0.28)]">
{/* Top Helpdesk Bar */}
<div className="bg-[#2A0838] border-b border-white/10 px-5 py-4 md:px-8 md:py-5 flex flex-col md:flex-row justify-between items-center gap-6">
<div className="flex items-center gap-4 text-white">
<div className="w-12 h-12 rounded-full bg-brand-accent text-brand-dark flex items-center justify-center shadow-lg shrink-0">
<MaterialIcon icon="headset_mic" size={24} />
</div>
<div className="text-left">
<h4 className="text-headline-md font-black text-white">24/7 Neighborhood Helpdesk</h4>
<p className="text-sm font-semibold text-white/70 mt-0.5">
Need immediate assistance with an order or local service?
</p>
</div>
</div>
<a
href="tel:+918049123456"
className="flex items-center gap-3 bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-6 py-3 rounded-full text-base shadow-lg transition-all duration-300 hover:-translate-y-0.5 shrink-0"
>
<MaterialIcon icon="phone" size={20} className="animate-pulse-subtle" />
<span>+91 80 4912 3456</span>
</a>
</div>
{/* Company Links */}
<div className="footer-company">
<FooterCol title="Company" links={COMPANY} />
</div>
{/* Main Footer Content */}
<div className="px-5 pt-10 pb-8 md:px-8 md:pt-12 md:pb-10 lg:px-12 lg:pt-12 lg:pb-10 text-white">
<div className={
isContactPage
? "grid grid-cols-1 sm:grid-cols-3 gap-8 lg:gap-10"
: "grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(500px,560px)] gap-10 xl:gap-14 items-start"
}>
{isContactPage ? (
<>
{/* Brand Column */}
{brandCol}
{/* Partnerships Links */}
<div className="footer-partnerships">
<FooterCol title="Partnerships" links={PARTNERSHIPS} />
</div>
{/* Legal Links */}
<div className="footer-legal">
<FooterCol title="Legal" links={LEGAL} />
</div>
{/* Contact Form Card */}
{!isContactPage && (
<div className="footer-contact-wrap">
<div className="footer-contact-card bg-white text-brand-dark shadow-2xl border border-outline-variant/15 relative overflow-hidden">
{/* 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="footer-contact-title font-display text-2xl md:text-3xl font-black text-brand-dark tracking-tight">
Send us a Message
</h3>
<p className="footer-contact-subtitle text-sm md:text-base mt-2">
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="footer-form-row">
<div className="flex flex-col text-left">
<label htmlFor="footer-field-name" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Name</label>
<input
type="text"
id="footer-field-name"
name="name"
value={formData.name}
onChange={handleInputChange}
placeholder="Your Name..."
className={`footer-input ${errors.name ? "has-error" : ""}`}
/>
{errors.name && (
<span className="footer-error-text">
<MaterialIcon icon="error" size={16} />
{errors.name}
</span>
)}
</div>
<div className="flex flex-col text-left">
<label htmlFor="footer-field-phone" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Phone</label>
<input
type="text"
id="footer-field-phone"
name="phone"
value={formData.phone}
onChange={handleInputChange}
placeholder="Your Phone..."
className={`footer-input ${errors.phone ? "has-error" : ""}`}
/>
{errors.phone && (
<span className="footer-error-text">
<MaterialIcon icon="error" size={16} />
{errors.phone}
</span>
)}
</div>
</div>
<div className="flex flex-col text-left">
<label htmlFor="footer-field-email" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Email Address</label>
<input
type="email"
id="footer-field-email"
name="email"
value={formData.email}
onChange={handleInputChange}
placeholder="Your Email Address..."
className={`footer-input ${errors.email ? "has-error" : ""}`}
/>
{errors.email && (
<span className="footer-error-text">
<MaterialIcon icon="error" size={16} />
{errors.email}
</span>
)}
</div>
<div className="flex flex-col text-left">
<label htmlFor="footer-field-message" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Message</label>
<textarea
id="footer-field-message"
name="message"
value={formData.message}
onChange={handleInputChange}
placeholder="Your Message..."
className={`footer-textarea ${errors.message ? "has-error" : ""}`}
/>
{errors.message && (
<span className="footer-error-text">
<MaterialIcon icon="error" size={16} />
{errors.message}
</span>
)}
</div>
<button
type="submit"
disabled={isSubmitting}
className="footer-submit-btn"
>
{isSubmitting ? (
<>
<span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
<span>SUBMITTING...</span>
</>
) : (
<span>SUBMIT</span>
)}
</button>
</form>
{/* Company Links */}
<div className="footer-company min-w-0 self-start">
<FooterCol title="Company" links={COMPANY} />
</div>
{/* Partnerships Links */}
<div className="footer-partnerships min-w-0 self-start">
<FooterCol title="Partnerships" links={PARTNERSHIPS} />
</div>
</>
) : (
<>
<div className="flex flex-col self-start w-full">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8 lg:gap-10">
{/* Brand Column */}
{brandCol}
{/* Company Links */}
<div className="footer-company min-w-0 self-start">
<FooterCol title="Company" links={COMPANY} />
</div>
{/* Partnerships Links */}
<div className="footer-partnerships min-w-0 self-start">
<FooterCol title="Partnerships" links={PARTNERSHIPS} />
</div>
</div>
{/* HQ Office Location & Directions block */}
<div className="mt-8 border-t border-white/10 pt-7 max-w-[520px] text-left">
<p className="text-[11px] font-black uppercase tracking-[0.18em] text-brand-accent">
VISIT NEARLE HQ
</p>
<h4 className="mt-2 font-display text-xl md:text-2xl font-black text-white">
Meet the team behind your neighbourhood.
</h4>
<p className="mt-3 text-sm leading-6 text-white/60">
424, Diwan Bahadur Rd,<br />
Opposite to Sri Krishna Sweets,<br />
R.S. Puram, Coimbatore,<br />
Tamil Nadu 641002
</p>
<a
href="https://maps.google.com/?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002"
target="_blank"
rel="noopener noreferrer"
className="mt-4 inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-white/15 hover:border-brand-accent/50 text-white hover:text-brand-accent text-xs md:text-sm font-black transition-all duration-300"
>
<MaterialIcon icon="location_on" size={16} />
<span>Get Directions</span>
</a>
</div>
</div>
{/* Contact Form Card */}
<div className="footer-contact-wrap w-full self-start">
<div className="footer-contact-card bg-white text-brand-dark shadow-2xl border border-outline-variant/15 relative overflow-hidden w-full max-w-[540px] lg:ml-auto p-7 md:p-8 lg:p-9">
{/* 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="footer-contact-title font-display text-2xl md:text-3xl font-black text-brand-dark tracking-tight">
Send us a Message
</h3>
<p className="footer-contact-subtitle text-sm md:text-base mt-1 mb-5">
We shall guide you through our Neighbourhood Experts.
</p>
<form onSubmit={handleSubmit} className="space-y-3">
{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="footer-form-row grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="flex flex-col text-left">
<label htmlFor="footer-field-name" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Name</label>
<input
type="text"
id="footer-field-name"
name="name"
value={formData.name}
onChange={handleInputChange}
placeholder="Your Name..."
className={`footer-input h-12 md:h-13 ${errors.name ? "has-error" : ""}`}
/>
{errors.name && (
<span className="footer-error-text">
<MaterialIcon icon="error" size={16} />
{errors.name}
</span>
)}
</div>
<div className="flex flex-col text-left">
<label htmlFor="footer-field-phone" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Phone</label>
<input
type="text"
id="footer-field-phone"
name="phone"
value={formData.phone}
onChange={handleInputChange}
placeholder="Your Phone..."
className={`footer-input h-12 md:h-13 ${errors.phone ? "has-error" : ""}`}
/>
{errors.phone && (
<span className="footer-error-text">
<MaterialIcon icon="error" size={16} />
{errors.phone}
</span>
)}
</div>
</div>
<div className="flex flex-col text-left">
<label htmlFor="footer-field-email" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Email Address</label>
<input
type="email"
id="footer-field-email"
name="email"
value={formData.email}
onChange={handleInputChange}
placeholder="Your Email Address..."
className={`footer-input h-12 md:h-13 ${errors.email ? "has-error" : ""}`}
/>
{errors.email && (
<span className="footer-error-text">
<MaterialIcon icon="error" size={16} />
{errors.email}
</span>
)}
</div>
<div className="flex flex-col text-left">
<label htmlFor="footer-field-message" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Message</label>
<textarea
id="footer-field-message"
name="message"
value={formData.message}
onChange={handleInputChange}
placeholder="Your Message..."
className={`footer-textarea min-h-[120px] md:min-h-[130px] ${errors.message ? "has-error" : ""}`}
/>
{errors.message && (
<span className="footer-error-text">
<MaterialIcon icon="error" size={16} />
{errors.message}
</span>
)}
</div>
<button
type="submit"
disabled={isSubmitting}
className="footer-submit-btn h-12 md:h-13"
>
{isSubmitting ? (
<>
<span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
<span>SUBMITTING...</span>
</>
) : (
<span>SUBMIT</span>
)}
</button>
</form>
</div>
</div>
</div>
</>
)}
</div>
{/* Footer Bottom Bar */}
<div className="mt-8 border-t border-white/10 pt-5 text-xs text-white/45">
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<p>© {new Date().getFullYear()} Nearle. All rights reserved.</p>
<div className="flex flex-col md:flex-row gap-2 md:gap-6 text-left">
{LEGAL.map((link) => (
<Link key={link.label} href={link.href} className="hover:text-[#e0c8f7] transition-colors">
{link.label}
</Link>
))}
</div>
</div>
)}
</div>
</div>
{/* Divider */}
<hr className="footer-divider" />
{/* Bottom Bar */}
<div className="footer-bottom">
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
<p className="footer-bottom-text">
© {new Date().getFullYear()} Nearle. All rights reserved.
</p>
<div className="flex items-center gap-2 footer-bottom-text">
<span>Designed for neighborhoods in</span>
<span className="flex items-center gap-1 font-bold text-white/80">
India 🇮🇳
</span>
</div>
</div>
</div>

162
src/components/layout/Navbar.tsx
View File

@@ -3,6 +3,7 @@
import Link from "next/link";
import Image from "next/image";
import { useState } from "react";
import { usePathname } from "next/navigation";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const NAV_LINKS = [
@@ -15,78 +16,105 @@ const NAV_LINKS = [
export function Navbar() {
const [mobileOpen, setMobileOpen] = useState(false);
const pathname = usePathname();
return (
<nav className="sticky top-0 z-50 w-full bg-[#4d046a]/95 backdrop-blur-md border-b border-white/10 transition-all duration-300">
<div className="grid w-full grid-cols-[auto_auto] md:grid-cols-[auto_1fr_auto] items-center gap-4 md:gap-8 px-6 md:px-12 lg:px-20 xl:px-24 py-3">
{/* Left: Brand */}
<div className="flex items-center">
<Link
href="/"
className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
>
<Image
src="/logo-light.png"
alt="Nearle"
width={400}
height={50}
style={{ height: "40px", width: "auto" }}
className="object-contain"
priority
/>
</Link>
</div>
<div className="hidden md:flex items-center justify-center gap-8 xl:gap-10">
{NAV_LINKS.map((link) => (
<Link
key={link.label}
href={link.href}
className="relative py-1 text-[15px] font-bold leading-5 text-white/80 hover:text-brand-accent transition-all duration-200 group whitespace-nowrap"
>
{link.label}
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-brand-accent transition-all duration-300 group-hover:w-full" />
</Link>
))}
</div>
{/* Right: Actions */}
<div className="flex items-center justify-end gap-3">
<Link
href="/#download"
className="hidden md:inline-flex bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-bold px-7 py-3 rounded-full text-label-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 active:scale-95 whitespace-nowrap"
>
Get App
</Link>
{/* Mobile menu toggle */}
<button
className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-white/10 text-white transition-all active:scale-90 cursor-pointer"
onClick={() => setMobileOpen(!mobileOpen)}
aria-label="Toggle menu"
>
<MaterialIcon icon={mobileOpen ? "close" : "menu"} size={22} />
</button>
</div>
</div>
{/* Mobile Drawer */}
{mobileOpen && (
<div className="md:hidden bg-[#4d046a] border-t border-white/10">
<div className="max-w-container-max mx-auto px-6 py-stack-md flex flex-col gap-2">
{NAV_LINKS.map((link) => (
<div className="fixed top-0 left-0 right-0 z-50 w-full flex justify-center pointer-events-none">
<div className="w-full max-w-[1440px] px-4 md:px-8 lg:px-12 pt-5 md:pt-6 pointer-events-auto relative">
<nav className="w-full h-[68px] lg:h-[80px] rounded-[1.75rem] lg:rounded-[2rem] bg-gradient-to-r from-[#65108A] via-[#5A087B] to-[#3A044F] border border-white/10 shadow-[0_18px_40px_rgba(60,0,80,0.25)] backdrop-blur-md px-5 md:px-8 lg:px-10 flex items-center transition-all duration-300">
<div className="grid grid-cols-2 md:grid-cols-[1fr_auto_1fr] items-center w-full h-full">
{/* Left: Brand */}
<div className="flex items-center justify-start">
<Link
key={link.label}
href={link.href}
className="px-3 py-2.5 text-body-md text-white/80 hover:text-brand-accent hover:bg-white/10 rounded-lg transition-colors"
onClick={() => setMobileOpen(false)}
href="/"
className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
>
{link.label}
<Image
src="/logo-light.png"
alt="Nearle"
width={400}
height={50}
className="h-8 lg:h-9 w-auto object-contain"
priority
/>
</Link>
))}
</div>
{/* Center: Navigation Links */}
<div className="hidden md:flex items-center justify-center gap-6 lg:gap-8 xl:gap-10">
{NAV_LINKS.map((link) => {
const isActive = pathname === link.href;
return (
<Link
key={link.label}
href={link.href}
className={`relative py-2 text-[15px] font-medium leading-5 transition-all duration-200 whitespace-nowrap ${
isActive ? "text-white" : "text-white/80 hover:text-white"
} group`}
>
{link.label}
<span
className={`absolute bottom-[-6px] left-1/2 -translate-x-1/2 h-0.5 bg-white rounded-full transition-all duration-300 ${
isActive
? "w-5 opacity-100"
: "w-0 opacity-0 group-hover:w-4 group-hover:opacity-60"
}`}
/>
</Link>
);
})}
</div>
{/* Right: Actions */}
<div className="flex items-center justify-end gap-3">
<Link
href="/#download"
className="hidden md:inline-flex items-center justify-center bg-white text-[#4d046a] font-bold px-7 h-[46px] rounded-full text-[15px] hover:shadow-[0_8px_24px_rgba(255,255,255,0.2)] hover:scale-[1.03] active:scale-95 transition-all duration-300 whitespace-nowrap"
>
Get App
</Link>
{/* Mobile menu toggle */}
<button
className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-white/10 text-white transition-all active:scale-90 cursor-pointer"
onClick={() => setMobileOpen(!mobileOpen)}
aria-label="Toggle menu"
>
<MaterialIcon icon={mobileOpen ? "close" : "menu"} size={22} />
</button>
</div>
</div>
</div>
)}
</nav>
</nav>
{/* Mobile Drawer */}
{mobileOpen && (
<div className="absolute top-[calc(100%+12px)] left-4 right-4 z-40 bg-gradient-to-b from-[#5A087B] to-[#3A044F] border border-white/10 rounded-2xl shadow-[0_20px_40px_rgba(0,0,0,0.4)] backdrop-blur-md p-4 md:hidden">
<div className="flex flex-col gap-2">
{NAV_LINKS.map((link) => {
const isActive = pathname === link.href;
return (
<Link
key={link.label}
href={link.href}
className={`px-4 py-3 text-body-md font-bold rounded-xl transition-all duration-200 flex items-center justify-between ${
isActive
? "bg-white/10 text-white"
: "text-white/85 hover:text-white hover:bg-white/5"
}`}
onClick={() => setMobileOpen(false)}
>
{link.label}
{isActive && (
<span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
)}
</Link>
);
})}
</div>
</div>
)}
</div>
</div>
);
}