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

fix hero section layout in homepage

Browse Source
This commit is contained in:
Aravind
2026-06-24 12:53:36 +05:30
parent 230be11899
commit 6ddfc57217
18 changed files with 514 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,8 +31,8 @@ const BENEFITS = [
export function BusinessSection() {
return (
<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">
<section className="pt-4 md:pt-5 lg:pt-6 pb-4 md:pb-5 lg:pb-6">
<div className="w-full">
{/* Merchant Section Grid */}
<div className="grid lg:grid-cols-12 gap-16 items-center">
@@ -100,7 +100,7 @@ export function BusinessSection() {
</div>
{/* CURVED PROMO BANNER (Bottom CTA Block) */}
<div className="mt-16 md:mt-20 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
<div className="mt-8 md:mt-10 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
{/* Decorative background vectors */}
<div className="absolute right-0 top-0 w-[400px] h-[400px] bg-white/10 rounded-full blur-3xl pointer-events-none" />
<div className="absolute left-10 bottom-0 w-[200px] h-[200px] bg-brand-dark/5 rounded-full blur-2xl pointer-events-none" />

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

@@ -28,8 +28,8 @@ const QUICK_LINKS = [
export function Hero() {
return (
<>
<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">
<section className="relative pb-4 md:pb-6">
<div className="relative overflow-hidden rounded-[1.75rem] md:rounded-[2.25rem] bg-[#16001F]">
{/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
<div className="hero-dark-panel select-none pointer-events-none">
{/* Subtle Background Dot Texture */}
@@ -50,7 +50,7 @@ export function Hero() {
</div>
{/* ─── Main Content Wrapper ─── */}
<div className="hero-stage relative w-full flex flex-col z-10 md:justify-center md:items-start">
<div className="hero-stage min-h-0 pb-10 md:pb-12 relative w-full flex flex-col z-10 md:justify-center md:items-start">
{/* Left Column: Text & Search Content */}
<div className="hero-content text-white select-none">
<span className="inline-block text-xs font-black tracking-widest uppercase mb-5 bg-brand-accent/15 px-4 py-1.5 rounded-full border border-brand-accent/20 text-brand-accent">
@@ -141,7 +141,7 @@ export function Hero() {
</div>
{/* Overlapping Quick Category Links */}
<div className="service-cards-wrapper max-w-container-max mx-auto">
<div className="service-cards-wrapper max-w-container-max mx-auto relative z-20 -mt-8 md:-mt-10 lg:-mt-12">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{QUICK_LINKS.map((item) => (
<div
@@ -174,6 +174,6 @@ export function Hero() {
))}
</div>
</div>
</>
</section>
);
}

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

@@ -26,10 +26,10 @@ const STEPS = [
export function HowItWorks() {
return (
<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">
<section className="border-t border-brand-dark/10 pt-12 md:pt-16 lg:pt-20 pb-6 md:pb-8 lg:pb-10">
<div className="w-full">
{/* Header Section */}
<div className="text-center mb-8 md:mb-10">
<div className="text-center mb-12 md:mb-16">
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/10 px-3.5 py-1.5 rounded-full">
Simple Process
</span>

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

@@ -27,42 +27,42 @@ const FEATURES = [
export function HyperlocalFeatures() {
return (
<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">
<section className="pt-4 md:pt-5 lg:pt-6 pb-2 md:pb-3 lg:pb-4 relative">
{/* Scoped CSS styles for precise layout enforcement */}
<style>{`
@media (min-width: 901px) {
.custom-care-grid {
grid-template-columns: minmax(500px, 1fr) minmax(560px, 1.1fr) !important;
gap: 64px !important;
width: min(1360px, 100%) !important;
}
.custom-care-visual {
max-width: 530px !important;
height: 580px !important;
}
.custom-care-card {
min-height: 580px !important;
padding: 60px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
}
@media (max-width: 900px) {
.custom-care-grid {
grid-template-columns: 1fr !important;
gap: 32px !important;
width: 100% !important;
}
.custom-care-visual {
max-width: 420px !important;
height: 460px !important;
}
.custom-care-card {
min-height: auto !important;
padding: 36px 24px !important;
}
}
.custom-care-grid {
grid-template-columns: minmax(500px, 1fr) minmax(560px, 1.1fr) !important;
gap: 56px !important;
width: min(1360px, 100%) !important;
}
.custom-care-visual {
max-width: 530px !important;
height: 580px !important;
}
.custom-care-card {
min-height: 580px !important;
padding: 60px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
}
@media (max-width: 900px) {
.custom-care-grid {
grid-template-columns: 1fr !important;
gap: 40px !important;
width: 100% !important;
}
.custom-care-visual {
max-width: 420px !important;
height: 460px !important;
}
.custom-care-card {
min-height: auto !important;
padding: 36px 24px !important;
}
}
`}</style>
{/* Subtle background radial glows */}

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

@@ -55,8 +55,8 @@ const CATEGORIES = [
export function ServiceCategories() {
return (
<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">
<section className="pt-10 md:pt-14 lg:pt-16 pb-2 md:pb-3 lg:pb-4">
<div className="w-full">
{/* Header Section */}
<div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 md:mb-16 gap-6">
<div>

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

@@ -9,12 +9,12 @@ const FLOW_STEPS = [
export function StoreQRSection() {
return (
<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">
<section id="download" className="bg-gradient-to-br from-[#1C0024] to-[#0D0012] rounded-[1.75rem] md:rounded-[2.25rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-white relative flex items-center mt-2 md:mt-3 mb-2 md:mb-3">
{/* Background ambient glowing details */}
<div className="absolute right-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-brand-accent/5 blur-[120px] pointer-events-none" />
<div className="absolute left-[-10%] bottom-[-10%] w-[50%] h-[50%] rounded-full bg-primary/10 blur-[120px] pointer-events-none" />
<div className="w-full max-w-container-max mx-auto relative z-10">
<div className="w-full relative z-10">
{/* ─── DESKTOP LAYOUT (lg and above) ─── */}
<div className="hidden lg:grid lg:grid-cols-12 gap-20 xl:gap-24 items-center">

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

@@ -29,8 +29,8 @@ const CARDS = [
export function WhyNearle() {
return (
<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">
<section className="pt-4 md:pt-5 lg:pt-6 pb-4 md:pb-5 lg:pb-6">
<div className="w-full">
{/* Header Section */}
<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">

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

@@ -57,7 +57,7 @@ export function Footer() {
const [submitSuccess, setSubmitSuccess] = useState(false);
const handleInputChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
const { name, value } = e.target;
setFormData((prev) => ({
@@ -123,10 +123,7 @@ export function Footer() {
const brandCol = (
<div className="footer-brand min-w-0 self-start">
<Link
href="/"
className="mb-4 inline-block"
>
<Link href="/" className="mb-4 inline-block">
<Image
src="/logo-v2.png"
alt="Nearle"
@@ -137,23 +134,16 @@ export function Footer() {
/>
</Link>
<p className="footer-desc mb-4 text-white/80">
India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within 2km.
India&apos;s leading hyperlocal neighborhood network, empowering
communities and verified local businesses within 2km.
</p>
{/* Social Links */}
<div className="flex gap-4">
<a
href="#"
className="footer-social-link"
aria-label="Share"
>
<a href="#" className="footer-social-link" aria-label="Share">
<MaterialIcon icon="share" size={24} />
</a>
<a
href="#"
className="footer-social-link"
aria-label="Website"
>
<a href="#" className="footer-social-link" aria-label="Website">
<MaterialIcon icon="public" size={24} />
</a>
</div>
@@ -161,8 +151,8 @@ export function Footer() {
);
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]">
<footer className="bg-[#E6D7EA] px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 pb-0 w-full mt-3 md:mt-4">
<div className="mx-auto" style={{ maxWidth: "min(100% - 48px, 1520px)" }}>
<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">
@@ -171,7 +161,9 @@ export function Footer() {
<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>
<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>
@@ -181,18 +173,24 @@ export function Footer() {
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" />
<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"
}>
<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 */}
@@ -237,9 +235,12 @@ export function Footer() {
</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 />
424, Diwan Bahadur Rd,
<br />
Opposite to Sri Krishna Sweets,
<br />
R.S. Puram, Coimbatore,
<br />
Tamil Nadu 641002
</p>
@@ -280,7 +281,12 @@ export function Footer() {
<div className="footer-form-row grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="flex flex-col text-left">
<label htmlFor="footer-field-name" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Name</label>
<label
htmlFor="footer-field-name"
className="text-xs font-black text-brand-dark/70 mb-1.5"
>
Your Name
</label>
<input
type="text"
id="footer-field-name"
@@ -298,7 +304,12 @@ export function Footer() {
)}
</div>
<div className="flex flex-col text-left">
<label htmlFor="footer-field-phone" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Phone</label>
<label
htmlFor="footer-field-phone"
className="text-xs font-black text-brand-dark/70 mb-1.5"
>
Your Phone
</label>
<input
type="text"
id="footer-field-phone"
@@ -318,7 +329,12 @@ export function Footer() {
</div>
<div className="flex flex-col text-left">
<label htmlFor="footer-field-email" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Email Address</label>
<label
htmlFor="footer-field-email"
className="text-xs font-black text-brand-dark/70 mb-1.5"
>
Your Email Address
</label>
<input
type="email"
id="footer-field-email"
@@ -337,7 +353,12 @@ export function Footer() {
</div>
<div className="flex flex-col text-left">
<label htmlFor="footer-field-message" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Message</label>
<label
htmlFor="footer-field-message"
className="text-xs font-black text-brand-dark/70 mb-1.5"
>
Your Message
</label>
<textarea
id="footer-field-message"
name="message"
@@ -382,7 +403,11 @@ export function Footer() {
<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
key={link.label}
href={link.href}
className="hover:text-[#e0c8f7] transition-colors"
>
{link.label}
</Link>
))}
@@ -399,7 +424,6 @@ export function Footer() {
// Ensure default export is also available for Next.js app router client components if needed
export default Footer;
function FooterCol({
title,
links,
@@ -409,16 +433,11 @@ function FooterCol({
}) {
return (
<div>
<h5 className="footer-column-title">
{title}
</h5>
<h5 className="footer-column-title">{title}</h5>
<ul className="footer-links-list">
{links.map((l) => (
<li key={l.label}>
<Link
href={l.href}
className="footer-link inline-block"
>
<Link href={l.href} className="footer-link inline-block">
{l.label}
</Link>
</li>