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

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

@@ -11,41 +11,82 @@ export const metadata: Metadata = {
export default function ContactPage() { export default function ContactPage() {
return ( return (
<div className="relative min-h-screen bg-background"> <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">
{/* ─── 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"> {/* ─── Redesigned Hero/Contact Section ─── */}
{/* Background Image with Overlay */} <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="hero-background select-none pointer-events-none"> <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">
<Image {/* Subtle decorative blurred purple glow behind left content */}
src="/contect.png" <div className="absolute left-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-primary/25 blur-[120px] pointer-events-none z-0" />
alt="Contact Nearle Background"
fill <div className="w-full mx-auto relative z-10">
sizes="100vw" <div className="grid grid-cols-1 lg:grid-cols-[1fr_0.9fr] items-center gap-10 lg:gap-16">
className="object-cover object-right"
priority {/* 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>
{/* 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> </div>
<div className="hero-content relative z-10 mx-auto max-w-container-max"> {/* Row 2 */}
{/* Header Title */} <div className="flex gap-4 py-5 border-b border-white/10 items-center">
<p className="text-label-sm font-black uppercase tracking-[0.2em] text-brand-accent"> <div className="w-11 h-11 rounded-full bg-white/10 text-brand-accent flex items-center justify-center shadow-md shrink-0">
Get in touch <MaterialIcon icon="schedule" size={20} />
</p> </div>
<h1 className="mt-4 font-display text-4xl font-black text-white md:text-6xl tracking-tight"> <div className="text-left">
Talk to the Nearle Team <h4 className="text-white font-bold">Talk to Our Team</h4>
</h1> <p className="text-white/60 text-sm mt-0.5">Monday to Saturday, 9:30 AM to 6:30 PM.</p>
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70"> </div>
Have questions about orders, partner onboardings, or neighborhood launches? Reach out and we&apos;ll help you. </div>
</p>
{/* 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> </div>
</section> </section>
</div>
{/* ─── Four Contact Info Cards ─── */} {/* ─── 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"> <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
{/* Card 1: Location */} {/* 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"> <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" /> <MaterialIcon icon="location_on" size={28} className="text-primary" />
</div> </div>
@@ -67,7 +108,7 @@ export default function ContactPage() {
</div> </div>
{/* Card 2: Phones */} {/* 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"> <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" /> <MaterialIcon icon="call" size={28} className="text-secondary" />
</div> </div>
@@ -88,7 +129,7 @@ export default function ContactPage() {
</div> </div>
{/* Card 3: Email */} {/* 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"> <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" /> <MaterialIcon icon="mail" size={28} className="text-primary" />
</div> </div>
@@ -107,7 +148,7 @@ export default function ContactPage() {
</div> </div>
{/* Card 4: Working Hours */} {/* 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"> <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" /> <MaterialIcon icon="schedule" size={28} className="text-brand-accent" />
</div> </div>
@@ -126,15 +167,12 @@ export default function ContactPage() {
</div> </div>
</div> </div>
</section> </div>
{/* ─── Map & Form Section ─── */} {/* ─── Map Section ─── */}
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-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 lg:grid-cols-12 gap-12 items-start"> <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]">
{/* 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 <iframe
title="Nearle Coimbatore Location Map" 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" 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"
@@ -144,26 +182,22 @@ export default function ContactPage() {
allowFullScreen allowFullScreen
loading="lazy" loading="lazy"
referrerPolicy="no-referrer-when-downgrade" referrerPolicy="no-referrer-when-downgrade"
className="filter contrast-[1.05] saturate-[0.9] hover:scale-[1.02] transition-transform duration-700" className="filter contrast-[1.05] saturate-[0.9]"
/> />
{/* Map Floating Info Badge */} {/* 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="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"> <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" /> <MaterialIcon icon="store" size={20} className="text-white" />
</div> </div>
<div> <div className="text-left">
<h4 className="text-body-sm font-black text-brand-dark">R.S. Puram Hub</h4> <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> <p className="text-[11px] text-on-surface-variant">Connecting local vendors & residents</p>
</div> </div>
</div> </div>
</div> </div>
</div>
{/* Right: Message Form (7 Cols) */}
<ContactForm />
</div>
</section> </section>
</div> </div>
</div>
); );
} }

32
src/app/globals.css
View File

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

21
src/app/page.tsx
View File

@@ -5,19 +5,32 @@ import { HowItWorks } from "@/components/home/HowItWorks";
import { HyperlocalFeatures } from "@/components/home/HyperlocalFeatures"; import { HyperlocalFeatures } from "@/components/home/HyperlocalFeatures";
import { BusinessSection } from "@/components/home/BusinessSection"; import { BusinessSection } from "@/components/home/BusinessSection";
import { StoreQRSection } from "@/components/home/StoreQRSection"; import { StoreQRSection } from "@/components/home/StoreQRSection";
import { AppPromo } from "@/components/home/AppPromo";
export default function HomePage() { export default function HomePage() {
return ( return (
<> <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 /> <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 /> <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 /> <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 /> <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 /> <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 /> <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 /> <StoreQRSection />
<AppPromo /> </div>
</> </div>
); );
} }

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

@@ -95,10 +95,10 @@ export function ContactForm() {
return ( 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 */} {/* Background Accent Mesh */}
<div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full blur-3xl" /> <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"> <div className="relative z-10">
<span className="text-label-sm font-black text-primary uppercase tracking-widest"> <span className="text-label-sm font-black text-primary uppercase tracking-widest">
@@ -108,8 +108,8 @@ export function ContactForm() {
Send Message Send Message
</h2> </h2>
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="flex flex-col gap-5">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
{/* Name field */} {/* Name field */}
<div className="flex flex-col"> <div className="flex flex-col">
<label htmlFor="field-name" className="text-label-sm text-on-surface-variant font-bold mb-2"> <label htmlFor="field-name" className="text-label-sm text-on-surface-variant font-bold mb-2">
@@ -185,7 +185,7 @@ export function ContactForm() {
<textarea <textarea
id="field-message" id="field-message"
name="message" name="message"
rows={5} rows={4}
value={formData.message} value={formData.message}
onChange={handleInputChange} onChange={handleInputChange}
placeholder="Describe your inquiry in detail (e.g. partnership options, tech support, etc.)" 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" 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 ${ } 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" 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> </div>
{errors.message && ( {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>
);
}

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

@@ -7,31 +7,31 @@ const BENEFITS = [
title: "Digital Catalogue", title: "Digital Catalogue",
desc: "Showcase your products online easily to nearby customers.", desc: "Showcase your products online easily to nearby customers.",
icon: "menu_book", icon: "menu_book",
style: "bg-primary text-white", iconColor: "bg-primary/5 text-primary",
}, },
{ {
title: "QR Ordering", title: "QR Ordering",
desc: "Enable existing customers to scan and place orders directly at your counter.", desc: "Enable existing customers to scan and place orders directly at your counter.",
icon: "qr_code", icon: "qr_code",
style: "bg-brand-accent text-brand-dark", iconColor: "bg-secondary/5 text-secondary",
}, },
{ {
title: "Local Discovery", title: "Local Discovery",
desc: "Get discovered by residents in your neighbourhood searching for your products.", desc: "Get discovered by residents in your neighbourhood searching for your products.",
icon: "explore", icon: "explore",
style: "bg-white border border-outline-variant/20 text-primary", iconColor: "bg-[#de96f9]/10 text-primary",
}, },
{ {
title: "Delivery Support", title: "Delivery Support",
desc: "Fulfill orders with your own staff or rely on Nearle's local delivery partners.", desc: "Fulfill orders with your own staff or rely on Nearle's local delivery partners.",
icon: "local_shipping", icon: "local_shipping",
style: "bg-[#de96f9]/20 text-primary border border-primary/10", iconColor: "bg-rose-500/5 text-rose-600",
}, },
]; ];
export function BusinessSection() { export function BusinessSection() {
return ( 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"> <div className="max-w-container-max mx-auto">
{/* Merchant Section Grid */} {/* 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"> <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 Merchant Partnerships
</span> </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. Bring Your Store Online with Nearle.
</h2> </h2>
<p className="text-body-lg text-on-surface-variant mb-10 max-w-xl leading-relaxed"> <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>
</div> </div>
{/* Right Column: Benefit Cards Bento Grid (5 cols) */} {/* Right Column: Benefit Grid Cardless (5 cols) */}
<div className="lg:col-span-5 grid grid-cols-2 gap-6"> <div className="lg:col-span-5 grid grid-cols-1 sm:grid-cols-2 gap-8 lg:gap-10">
{BENEFITS.map((benefit, idx) => ( {BENEFITS.map((benefit) => (
<div <div key={benefit.title} className="flex flex-col items-start group">
key={benefit.title} <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}`}>
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" : ""}`} <MaterialIcon icon={benefit.icon} size={28} />
>
<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>
<div> <h3 className="text-xl md:text-2xl font-black tracking-tight text-brand-dark mb-2">
<h3 className="text-xl md:text-2xl font-black tracking-tight leading-tight mb-2">
{benefit.title} {benefit.title}
</h3> </h3>
<p className="text-sm md:text-base opacity-90 leading-relaxed"> <p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
{benefit.desc} {benefit.desc}
</p> </p>
</div> </div>
</div>
))} ))}
</div> </div>
</div> </div>
{/* CURVED PROMO BANNER */} {/* CURVED PROMO BANNER (Bottom CTA Block) */}
<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"> <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 */} {/* 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 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" /> <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"> <span className="text-xs font-black uppercase tracking-widest bg-brand-dark/15 px-3.5 py-1.5 rounded-full">
Piping Hot & Fresh Piping Hot & Fresh
</span> </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. Everything Nearby, <br />From Stores You Trust.
</h3> </h3>
<p className="text-body-lg text-brand-dark/80 mb-8 max-w-md font-semibold leading-relaxed"> <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> </section>
); );
} }

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

@@ -29,7 +29,7 @@ const QUICK_LINKS = [
export function Hero() { export function Hero() {
return ( 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) ─── */} {/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
<div className="hero-dark-panel select-none pointer-events-none"> <div className="hero-dark-panel select-none pointer-events-none">
{/* Subtle Background Dot Texture */} {/* Subtle Background Dot Texture */}

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

@@ -11,14 +11,14 @@ const STEPS = [
{ {
num: "02", num: "02",
title: "Pick Your Favourite Store", 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", icon: "storefront",
color: "bg-secondary/5 text-secondary border-secondary/10", color: "bg-secondary/5 text-secondary border-secondary/10",
}, },
{ {
num: "03", num: "03",
title: "Place Order & Get Delivery", 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", icon: "local_shipping",
color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20", color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
}, },
@@ -26,49 +26,47 @@ const STEPS = [
export function HowItWorks() { export function HowItWorks() {
return ( 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"> <div className="max-w-container-max mx-auto">
{/* Header Section */} {/* Header Section */}
<div className="text-center mb-12"> <div className="text-center mb-8 md:mb-10">
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full"> <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/10 px-3.5 py-1.5 rounded-full">
Simple Process Simple Process
</span> </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> From Your Neighbourhood Store <span className="text-secondary font-normal">to Your Doorstep</span>
</h2> </h2>
</div> </div>
{/* Steps Layout */} {/* Steps Layout - Timeline style */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 relative"> <div className="relative mt-8 md:mt-12">
{/* Connector Line (Desktop Only) */} {/* Connecting 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" /> <div className="hidden lg:block absolute top-[32px] left-[8%] right-[8%] h-[1px] bg-primary/20 -z-0" />
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-16 relative z-10">
{STEPS.map((step) => ( {STEPS.map((step) => (
<div <div key={step.num} className="flex flex-col items-center lg:items-start text-center lg:text-left group relative">
key={step.num} {/* Icon Container with watermark number */}
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" <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} />
{/* Step number watermark */} <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">
<div className="absolute top-4 right-6 text-4xl font-black text-brand-dark/10 select-none">
{step.num} {step.num}
</span>
</div> </div>
{/* Step Circle with Icon */} <h3 className="font-display text-2xl md:text-3xl font-black text-brand-dark mb-3">
<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} {step.title}
</h3> </h3>
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed"> <p className="text-sm md:text-base text-on-surface-variant leading-relaxed max-w-sm">
{step.desc} {step.desc}
</p> </p>
</div> </div>
))} ))}
</div> </div>
</div> </div>
</div>
</section> </section>
); );
} }

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

@@ -6,43 +6,46 @@ const FEATURES = [
{ {
title: "Trusted Nearby Stores", title: "Trusted Nearby Stores",
icon: "store", 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", 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", title: "Easy Reorders",
icon: "replay", 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", title: "Support Local Businesses",
icon: "favorite", icon: "favorite",
desc: "Help neighbourhood stores thrive and remain competitive in a digital world.", desc: "Help local neighbourhood stores thrive digitally.",
}, },
]; ];
export function HyperlocalFeatures() { export function HyperlocalFeatures() {
return ( 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 */} {/* Scoped CSS styles for precise layout enforcement */}
<style>{` <style>{`
@media (min-width: 901px) { @media (min-width: 901px) {
.custom-care-grid { .custom-care-grid {
grid-template-columns: minmax(420px, 0.9fr) minmax(560px, 1.1fr) !important; grid-template-columns: minmax(500px, 1fr) minmax(560px, 1.1fr) !important;
gap: 56px !important; gap: 64px !important;
width: min(1280px, 100%) !important; width: min(1360px, 100%) !important;
} }
.custom-care-visual { .custom-care-visual {
max-width: 470px !important; max-width: 530px !important;
height: 520px !important; height: 580px !important;
} }
.custom-care-card { .custom-care-card {
min-height: 520px !important; min-height: 580px !important;
padding: 60px !important; padding: 60px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
} }
} }
@media (max-width: 900px) { @media (max-width: 900px) {
@@ -130,7 +133,7 @@ export function HyperlocalFeatures() {
Community & Trust Community & Trust
</span> </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 /> Built Around Your<br />
<span className="text-brand-accent font-black">Neighbourhood</span> <span className="text-brand-accent font-black">Neighbourhood</span>
</h3> </h3>
@@ -158,7 +161,7 @@ export function HyperlocalFeatures() {
</div> </div>
<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} {item.title}
</h4> </h4>
<p className="text-sm md:text-base text-white/60 mt-1 leading-relaxed"> <p className="text-sm md:text-base text-white/60 mt-1 leading-relaxed">
@@ -200,3 +203,4 @@ export function HyperlocalFeatures() {
</section> </section>
); );
} }

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

@@ -32,7 +32,7 @@ const CATEGORIES = [
image: "/images/cat-daily-essentials.png", image: "/images/cat-daily-essentials.png",
tag: "Local Store", tag: "Local Store",
tagStyle: "bg-secondary text-white", 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", cta: "Browse Fresh",
}, },
{ {
@@ -40,7 +40,7 @@ const CATEGORIES = [
image: "/images/cat-pet-essentials.png", image: "/images/cat-pet-essentials.png",
tag: "Available Near You", tag: "Available Near You",
tagStyle: "bg-orange-500 text-white", 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", cta: "Shop Needs",
}, },
{ {
@@ -55,24 +55,24 @@ const CATEGORIES = [
export function ServiceCategories() { export function ServiceCategories() {
return ( 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"> <div className="max-w-container-max mx-auto">
{/* Header Section */} {/* 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> <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 Neighbourhood Offerings
</span> </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> Explore Stores <span className="text-primary font-normal">Near You</span>
</h2> </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. Groceries, medicines, food, and everyday essentials from nearby local shops.
</p> </p>
</div> </div>
<Link <Link
href="/people" 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 View All Categories
<MaterialIcon icon="arrow_forward" size={18} className="transition-transform group-hover:translate-x-1" /> <MaterialIcon icon="arrow_forward" size={18} className="transition-transform group-hover:translate-x-1" />
@@ -139,3 +139,4 @@ export function ServiceCategories() {
</section> </section>
); );
} }

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

@@ -1,5 +1,4 @@
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { MaterialIcon } from "@/components/ui/MaterialIcon";
const FLOW_STEPS = [ const FLOW_STEPS = [
@@ -10,77 +9,249 @@ const FLOW_STEPS = [
export function StoreQRSection() { export function StoreQRSection() {
return ( 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 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">
<div className="max-w-container-max mx-auto"> {/* Background ambient glowing details */}
<div className="grid lg:grid-cols-12 gap-16 items-center"> <div className="absolute right-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-brand-accent/5 blur-[120px] pointer-events-none" />
{/* Left Column: Visual representation of QR Sticker/Counter */} <div className="absolute left-[-10%] bottom-[-10%] w-[50%] h-[50%] rounded-full bg-primary/10 blur-[120px] pointer-events-none" />
<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="w-full max-w-container-max mx-auto relative z-10">
<div className="text-center w-full relative z-10">
<p className="text-xs font-black text-brand-accent tracking-[0.2em] uppercase">Order Online</p>
<h4 className="font-display font-black text-white text-lg mt-1">Nearle Store QR</h4>
<p className="text-xs text-white/60 font-semibold mt-1">Nearle Partner Store</p>
</div>
{/* Decorative QR Pattern */} {/* ─── DESKTOP LAYOUT (lg and above) ─── */}
<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"> <div className="hidden lg:grid lg:grid-cols-12 gap-20 xl:gap-24 items-center">
<Image
src="/QR code .png"
alt="Nearle Store QR Code"
width={200}
height={200}
className="object-contain"
/>
</div>
{/* Footer label on QR Sticker */} {/* Left Column: Heading, flow steps, download buttons */}
<div className="text-center z-10"> <div className="lg:col-span-6">
<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="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">
<span className="w-1.5 h-1.5 rounded-full bg-brand-accent animate-pulse" /> Instant Connections & App
Scan to Shop
</span> </span>
</div> <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">
</div> Scan to Shop, <br />
</div> <span className="text-brand-accent font-black">Order in Your Pocket.</span>
{/* Right Column: Copywriting and Steps */}
<div className="lg:col-span-7">
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
Instant Connections
</span>
<h2 className="text-display text-brand-dark mt-6 mb-6 leading-tight">
Your Favourite Store Is <span className="text-secondary">Now Just One Scan Away.</span>
</h2> </h2>
<p className="text-body-lg text-on-surface-variant mb-10 max-w-xl leading-relaxed"> <p className="text-body-lg text-white/70 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. Find Nearle QRs at nearby stores. Scan once to save it, then order groceries, food, or medicines from your favourite local merchant anytime.
</p> </p>
{/* Visual Steps Row */} {/* QR Steps row with arrows */}
<div className="grid grid-cols-3 gap-6 mb-12 max-w-lg"> <div className="flex items-center gap-6 mb-12 max-w-md select-none">
{FLOW_STEPS.map((step) => ( {FLOW_STEPS.map((step, idx) => (
<div key={step.label} className="flex flex-col items-center text-center group"> <div key={step.label} className="flex items-center gap-6 flex-1">
<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"> <div className="flex flex-col items-center text-center group flex-1">
<MaterialIcon icon={step.icon} size={28} /> <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> </div>
<span className="text-sm md:text-base font-black text-brand-dark group-hover:text-primary transition-colors"> <span className="text-sm font-bold text-white/90">
{step.label} {step.label}
</span> </span>
</div> </div>
{idx < FLOW_STEPS.length - 1 && (
<MaterialIcon icon="arrow_forward" size={16} className="text-white/30" />
)}
</div>
))} ))}
</div> </div>
<Link {/* App Store Badges (Prominent White Buttons) */}
href="/people" <div className="flex flex-wrap gap-4">
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" <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"
> >
Find Stores Near You <svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current text-brand-dark transition-colors" fill="currentColor">
</Link> <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>
</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> </div>
</section> </section>
); );

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

@@ -9,19 +9,19 @@ const CARDS = [
}, },
{ {
title: "Better Local Value", 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", icon: "local_offer",
color: "bg-secondary/5 text-secondary border-secondary/10", color: "bg-secondary/5 text-secondary border-secondary/10",
}, },
{ {
title: "Easy Reordering", 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", icon: "history",
color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20", color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
}, },
{ {
title: "Support Local Business", title: "Support Local Business",
desc: "Every order helps nearby businesses grow digitally.", desc: "Every order directly supports nearby shopkeepers.",
icon: "favorite", icon: "favorite",
color: "bg-rose-500/5 text-rose-700 border-rose-100", color: "bg-rose-500/5 text-rose-700 border-rose-100",
}, },
@@ -29,29 +29,29 @@ const CARDS = [
export function WhyNearle() { export function WhyNearle() {
return ( 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"> <div className="max-w-container-max mx-auto">
{/* Header Section */} {/* 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"> <span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/5 px-3.5 py-1.5 rounded-full">
Our Philosophy Our Philosophy
</span> </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> Why Nearle <span className="text-primary font-normal">Feels Different</span>
</h2> </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. Nearle brings the convenience of an app to the stores you already know and trust.
</p> </p>
</div> </div>
{/* Cards Grid */} {/* 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) => ( {CARDS.map((card) => (
<div <div
key={card.title} 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} /> <MaterialIcon icon={card.icon} size={28} />
</div> </div>
<h3 className="font-display text-xl font-black text-brand-dark mb-3"> <h3 className="font-display text-xl font-black text-brand-dark mb-3">
@@ -67,3 +67,5 @@ export function WhyNearle() {
</section> </section>
); );
} }

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

@@ -43,7 +43,7 @@ type FooterFormErrors = {
export function Footer() { export function Footer() {
const pathname = usePathname(); const pathname = usePathname();
const isContactPage = pathname === "/contact"; const isContactPage = pathname?.startsWith("/contact");
// Form states // Form states
const [formData, setFormData] = useState<FooterFormData>({ const [formData, setFormData] = useState<FooterFormData>({
@@ -121,43 +121,8 @@ export function Footer() {
}, 5000); }, 5000);
}; };
return ( const brandCol = (
<footer className="footer relative z-10 bg-brand-dark text-white border-t border-white/5 w-full mt-24"> <div className="footer-brand min-w-0 self-start">
{/* 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>
<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 <Link
href="/" href="/"
className="mb-4 inline-block" className="mb-4 inline-block"
@@ -171,9 +136,10 @@ export function Footer() {
className="object-contain" className="object-contain"
/> />
</Link> </Link>
<p className="footer-desc mb-4"> <p className="footer-desc mb-4 text-white/80">
India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within 2km. India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within 2km.
</p> </p>
{/* Social Links */} {/* Social Links */}
<div className="flex gap-4"> <div className="flex gap-4">
<a <a
@@ -192,26 +158,106 @@ export function Footer() {
</a> </a>
</div> </div>
</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>
{/* 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}
{/* Company Links */} {/* Company Links */}
<div className="footer-company"> <div className="footer-company min-w-0 self-start">
<FooterCol title="Company" links={COMPANY} /> <FooterCol title="Company" links={COMPANY} />
</div> </div>
{/* Partnerships Links */} {/* Partnerships Links */}
<div className="footer-partnerships"> <div className="footer-partnerships min-w-0 self-start">
<FooterCol title="Partnerships" links={PARTNERSHIPS} /> <FooterCol title="Partnerships" links={PARTNERSHIPS} />
</div> </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}
{/* Legal Links */} {/* Company Links */}
<div className="footer-legal"> <div className="footer-company min-w-0 self-start">
<FooterCol title="Legal" links={LEGAL} /> <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> </div>
{/* Contact Form Card */} {/* Contact Form Card */}
{!isContactPage && ( <div className="footer-contact-wrap w-full self-start">
<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 w-full max-w-[540px] lg:ml-auto p-7 md:p-8 lg:p-9">
<div className="footer-contact-card bg-white text-brand-dark shadow-2xl border border-outline-variant/15 relative overflow-hidden">
{/* Background Glow Decors */} {/* Background Glow Decors */}
<div className="absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full blur-2xl" /> <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="absolute bottom-0 left-0 w-24 h-24 bg-secondary/5 rounded-full blur-2xl" />
@@ -220,11 +266,11 @@ export function Footer() {
<h3 className="footer-contact-title font-display text-2xl md:text-3xl font-black text-brand-dark tracking-tight"> <h3 className="footer-contact-title font-display text-2xl md:text-3xl font-black text-brand-dark tracking-tight">
Send us a Message Send us a Message
</h3> </h3>
<p className="footer-contact-subtitle text-sm md:text-base mt-2"> <p className="footer-contact-subtitle text-sm md:text-base mt-1 mb-5">
We shall guide you through our Neighbourhood Experts. We shall guide you through our Neighbourhood Experts.
</p> </p>
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-3">
{submitSuccess && ( {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"> <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} /> <MaterialIcon icon="check_circle" size={16} />
@@ -232,7 +278,7 @@ export function Footer() {
</div> </div>
)} )}
<div className="footer-form-row"> <div className="footer-form-row grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="flex flex-col text-left"> <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> <label htmlFor="footer-field-name" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Name</label>
<input <input
@@ -242,7 +288,7 @@ export function Footer() {
value={formData.name} value={formData.name}
onChange={handleInputChange} onChange={handleInputChange}
placeholder="Your Name..." placeholder="Your Name..."
className={`footer-input ${errors.name ? "has-error" : ""}`} className={`footer-input h-12 md:h-13 ${errors.name ? "has-error" : ""}`}
/> />
{errors.name && ( {errors.name && (
<span className="footer-error-text"> <span className="footer-error-text">
@@ -260,7 +306,7 @@ export function Footer() {
value={formData.phone} value={formData.phone}
onChange={handleInputChange} onChange={handleInputChange}
placeholder="Your Phone..." placeholder="Your Phone..."
className={`footer-input ${errors.phone ? "has-error" : ""}`} className={`footer-input h-12 md:h-13 ${errors.phone ? "has-error" : ""}`}
/> />
{errors.phone && ( {errors.phone && (
<span className="footer-error-text"> <span className="footer-error-text">
@@ -280,7 +326,7 @@ export function Footer() {
value={formData.email} value={formData.email}
onChange={handleInputChange} onChange={handleInputChange}
placeholder="Your Email Address..." placeholder="Your Email Address..."
className={`footer-input ${errors.email ? "has-error" : ""}`} className={`footer-input h-12 md:h-13 ${errors.email ? "has-error" : ""}`}
/> />
{errors.email && ( {errors.email && (
<span className="footer-error-text"> <span className="footer-error-text">
@@ -298,7 +344,7 @@ export function Footer() {
value={formData.message} value={formData.message}
onChange={handleInputChange} onChange={handleInputChange}
placeholder="Your Message..." placeholder="Your Message..."
className={`footer-textarea ${errors.message ? "has-error" : ""}`} className={`footer-textarea min-h-[120px] md:min-h-[130px] ${errors.message ? "has-error" : ""}`}
/> />
{errors.message && ( {errors.message && (
<span className="footer-error-text"> <span className="footer-error-text">
@@ -311,7 +357,7 @@ export function Footer() {
<button <button
type="submit" type="submit"
disabled={isSubmitting} disabled={isSubmitting}
className="footer-submit-btn" className="footer-submit-btn h-12 md:h-13"
> >
{isSubmitting ? ( {isSubmitting ? (
<> <>
@@ -326,24 +372,22 @@ export function Footer() {
</div> </div>
</div> </div>
</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>
{/* 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> </div>
</div> </div>

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

@@ -3,6 +3,7 @@
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import { useState } from "react"; import { useState } from "react";
import { usePathname } from "next/navigation";
import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { MaterialIcon } from "@/components/ui/MaterialIcon";
const NAV_LINKS = [ const NAV_LINKS = [
@@ -15,12 +16,15 @@ const NAV_LINKS = [
export function Navbar() { export function Navbar() {
const [mobileOpen, setMobileOpen] = useState(false); const [mobileOpen, setMobileOpen] = useState(false);
const pathname = usePathname();
return ( 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="fixed top-0 left-0 right-0 z-50 w-full flex justify-center pointer-events-none">
<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"> <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 */} {/* Left: Brand */}
<div className="flex items-center"> <div className="flex items-center justify-start">
<Link <Link
href="/" href="/"
className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200" className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
@@ -30,31 +34,42 @@ export function Navbar() {
alt="Nearle" alt="Nearle"
width={400} width={400}
height={50} height={50}
style={{ height: "40px", width: "auto" }} className="h-8 lg:h-9 w-auto object-contain"
className="object-contain"
priority priority
/> />
</Link> </Link>
</div> </div>
<div className="hidden md:flex items-center justify-center gap-8 xl:gap-10"> {/* Center: Navigation Links */}
{NAV_LINKS.map((link) => ( <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 <Link
key={link.label} key={link.label}
href={link.href} 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" 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} {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" /> <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> </Link>
))} );
})}
</div> </div>
{/* Right: Actions */} {/* Right: Actions */}
<div className="flex items-center justify-end gap-3"> <div className="flex items-center justify-end gap-3">
<Link <Link
href="/#download" 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" 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 Get App
</Link> </Link>
@@ -69,24 +84,37 @@ export function Navbar() {
</button> </button>
</div> </div>
</div> </div>
</nav>
{/* Mobile Drawer */} {/* Mobile Drawer */}
{mobileOpen && ( {mobileOpen && (
<div className="md:hidden bg-[#4d046a] border-t border-white/10"> <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="max-w-container-max mx-auto px-6 py-stack-md flex flex-col gap-2"> <div className="flex flex-col gap-2">
{NAV_LINKS.map((link) => ( {NAV_LINKS.map((link) => {
const isActive = pathname === link.href;
return (
<Link <Link
key={link.label} key={link.label}
href={link.href} 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" 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)} onClick={() => setMobileOpen(false)}
> >
{link.label} {link.label}
{isActive && (
<span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
)}
</Link> </Link>
))} );
})}
</div> </div>
</div> </div>
)} )}
</nav> </div>
</div>
); );
} }