Aravind/nearle-next-new
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>
);
}