fix home page
This commit is contained in:
@@ -21,108 +21,170 @@ const FEATURES = [
|
||||
|
||||
export function HyperlocalFeatures() {
|
||||
return (
|
||||
<section className="py-20 bg-surface-container-low border-y border-outline-variant/10 relative overflow-hidden">
|
||||
{/* Background soft blur */}
|
||||
<div className="absolute -left-20 top-1/3 w-80 h-80 bg-primary/5 rounded-full blur-3xl pointer-events-none" />
|
||||
<section className="bg-[#f7f7f9] py-[72px] px-4 min-[901px]:py-[100px] min-[901px]:px-8 relative overflow-hidden border-y border-outline-variant/10">
|
||||
{/* Scoped CSS styles for precise layout enforcement */}
|
||||
<style>{`
|
||||
@media (min-width: 901px) {
|
||||
.custom-care-grid {
|
||||
grid-template-columns: minmax(420px, 0.9fr) minmax(560px, 1.1fr) !important;
|
||||
gap: 56px !important;
|
||||
width: min(1280px, calc(100% - 64px)) !important;
|
||||
}
|
||||
.custom-care-visual {
|
||||
max-width: 470px !important;
|
||||
height: 520px !important;
|
||||
}
|
||||
.custom-care-card {
|
||||
min-height: 520px !important;
|
||||
padding: 60px !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.custom-care-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 32px !important;
|
||||
width: min(1280px, calc(100% - 32px)) !important;
|
||||
}
|
||||
.custom-care-visual {
|
||||
max-width: 420px !important;
|
||||
height: 460px !important;
|
||||
}
|
||||
.custom-care-card {
|
||||
min-height: auto !important;
|
||||
padding: 36px 24px !important;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="max-w-container-max mx-auto px-margin-mobile md:px-margin-desktop">
|
||||
<div className="grid lg:grid-cols-12 gap-12 items-center">
|
||||
{/* Subtle background radial glows */}
|
||||
<div className="absolute left-[15%] top-1/2 -translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-brand-accent/[0.03] blur-[130px] pointer-events-none z-0" />
|
||||
<div className="absolute right-[15%] top-1/2 translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-primary/[0.03] blur-[130px] pointer-events-none z-0" />
|
||||
|
||||
{/* Inner container */}
|
||||
<div className="custom-care-grid mx-auto grid items-center">
|
||||
|
||||
{/* Left Column: Visual Storytelling */}
|
||||
<div className="custom-care-visual w-full justify-self-center relative rounded-[32px] border-2 border-white/90 bg-gradient-to-br from-[#fdfbf7] to-[#f5f0e6] shadow-[0_20px_50px_rgba(20,0,30,0.12)] z-10">
|
||||
|
||||
{/* Left Column: Visual Storytelling (5 cols) */}
|
||||
<div className="lg:col-span-5 relative">
|
||||
<div className="relative aspect-[4/5] w-full max-w-[420px] mx-auto rounded-[3rem] overflow-hidden border-4 border-white shadow-2xl">
|
||||
<Image
|
||||
src="/images/cat-daily-essentials.png"
|
||||
alt="Fresh groceries and goods delivered at home"
|
||||
width={500}
|
||||
height={600}
|
||||
className="w-full h-full object-cover group-hover:scale-102 transition-transform duration-500"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent" />
|
||||
|
||||
{/* Floating Badge */}
|
||||
<div className="absolute bottom-6 left-6 right-6 bg-white/95 backdrop-blur-md p-5 rounded-2xl border border-outline-variant/20 shadow-xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-brand-accent/20 flex items-center justify-center">
|
||||
<MaterialIcon icon="eco" className="text-brand-accent" size={22} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-label-md font-black text-brand-dark">100% Eco-Friendly</h4>
|
||||
<p className="text-[11px] text-on-surface-variant font-semibold mt-0.5">Reducing neighbor carbon footprint</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Background Decorative Circle */}
|
||||
<div className="absolute -bottom-8 -right-8 w-32 h-32 bg-brand-accent/10 rounded-full blur-xl pointer-events-none" />
|
||||
{/* Grocery image inside the lower area (occupies exactly 62% height) */}
|
||||
<div className="absolute inset-x-0 bottom-0 h-[62%] w-full overflow-hidden select-none pointer-events-none">
|
||||
<Image
|
||||
src="/images/cat-daily-essentials.png"
|
||||
alt="Fresh groceries and goods delivered at home"
|
||||
fill
|
||||
sizes="(max-width: 900px) 420px, 470px"
|
||||
className="object-cover object-bottom block transition-transform duration-500 hover:scale-[1.02]"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Dark Feature Panel (7 cols) */}
|
||||
<div className="lg:col-span-7">
|
||||
<div className="bg-brand-dark text-white p-8 md:p-16 rounded-[3rem] shadow-2xl relative overflow-hidden border border-white/5">
|
||||
{/* Internal vector decor */}
|
||||
<div className="absolute right-0 top-0 w-64 h-64 bg-brand-accent/5 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute -left-16 -bottom-16 w-48 h-48 bg-primary/10 rounded-full blur-2xl pointer-events-none" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<span className="text-label-sm 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">
|
||||
Care & Quality
|
||||
</span>
|
||||
|
||||
<h3 className="text-display mt-6 mb-8 leading-tight tracking-tight">
|
||||
Relax at Home,<br />
|
||||
<span className="text-brand-accent font-black">We Care.</span>
|
||||
</h3>
|
||||
|
||||
<p className="text-body-lg text-white/70 mb-10 max-w-lg leading-relaxed">
|
||||
Nearle connects you to local, trusted neighborhood shops, bringing you the best essentials while taking care of the logistics and safety standards.
|
||||
</p>
|
||||
|
||||
{/* Features List */}
|
||||
<div className="space-y-8">
|
||||
{FEATURES.map((item) => (
|
||||
<div key={item.title} className="flex gap-5 group">
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-brand-accent/15 border border-brand-accent/30 flex items-center justify-center group-hover:bg-brand-accent group-hover:text-brand-dark transition-colors duration-300">
|
||||
<MaterialIcon
|
||||
icon={item.icon}
|
||||
className="text-brand-accent group-hover:text-brand-dark transition-colors"
|
||||
size={22}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-headline-md font-black text-white group-hover:text-brand-accent transition-colors">
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-body-md text-white/60 mt-1 leading-relaxed">
|
||||
{item.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Onboarding Call to Action */}
|
||||
<div className="mt-12 flex flex-wrap gap-4 items-center">
|
||||
<a
|
||||
href="#download"
|
||||
className="bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-black px-8 py-3.5 rounded-full text-label-md hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
|
||||
>
|
||||
Get Nearle App
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-white hover:text-brand-accent font-bold text-label-md flex items-center gap-1 group py-2"
|
||||
>
|
||||
Partner Code of Ethics
|
||||
<MaterialIcon icon="arrow_forward" size={16} className="transition-transform group-hover:translate-x-1" />
|
||||
</a>
|
||||
</div>
|
||||
{/* Eco-Friendly floating pill */}
|
||||
<div className="absolute bottom-[22px] left-[22px] right-[22px] bg-white/95 backdrop-blur-sm p-4 rounded-2xl border border-outline-variant/15 shadow-xl z-20">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-full bg-brand-accent/15 flex items-center justify-center flex-shrink-0">
|
||||
<MaterialIcon icon="eco" className="text-brand-accent" size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-[13px] font-black text-brand-dark leading-tight">100% Eco-Friendly</h4>
|
||||
<p className="text-[10px] text-on-surface-variant font-bold mt-0.5 leading-none">Reducing neighbor carbon footprint</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating Proof Badges near the image (Desktop only, hidden below 900px) */}
|
||||
<div className="absolute top-[40px] -left-[24px] hidden min-[901px]:flex items-center gap-2 bg-white px-4 py-2.5 rounded-full border border-outline-variant/15 shadow-lg z-30 select-none pointer-events-none">
|
||||
<div className="w-6 h-6 rounded-full bg-brand-accent/10 flex items-center justify-center">
|
||||
<MaterialIcon icon="location_on" className="text-brand-accent" size={14} />
|
||||
</div>
|
||||
<span className="text-[11px] font-black text-brand-dark tracking-wide uppercase">2KM Local Delivery</span>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-[144px] -right-[24px] hidden min-[901px]:flex items-center gap-2 bg-white px-4 py-2.5 rounded-full border border-outline-variant/15 shadow-lg z-30 select-none pointer-events-none">
|
||||
<div className="w-6 h-6 rounded-full bg-brand-accent/10 flex items-center justify-center">
|
||||
<MaterialIcon icon="verified" className="text-brand-accent" size={14} />
|
||||
</div>
|
||||
<span className="text-[11px] font-black text-brand-dark tracking-wide uppercase">Verified Partners</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Right Column: Dark Feature Panel */}
|
||||
<div className="custom-care-card w-full rounded-[36px] bg-[#16001d] text-white shadow-[0_24px_60px_rgba(20,0,30,0.18)] relative overflow-hidden z-10">
|
||||
{/* Internal ambient glows (subtle) */}
|
||||
<div className="absolute right-0 top-0 w-64 h-64 bg-brand-accent/5 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute -left-16 -bottom-16 w-48 h-48 bg-primary/10 rounded-full blur-2xl pointer-events-none" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<span className="text-label-sm 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">
|
||||
Care & Quality
|
||||
</span>
|
||||
|
||||
<h3 className="text-display mt-6 mb-8 leading-tight tracking-tight">
|
||||
Relax at Home,<br />
|
||||
<span className="text-brand-accent font-black">We Care.</span>
|
||||
</h3>
|
||||
|
||||
<p className="text-body-lg text-white/70 mb-10 max-w-lg leading-relaxed">
|
||||
Nearle connects you to local, trusted neighborhood shops, bringing you the best essentials while taking care of the logistics and safety standards.
|
||||
</p>
|
||||
|
||||
{/* Features List with vertical connector line */}
|
||||
<div className="relative space-y-8">
|
||||
|
||||
{/* Vertical connector line (orange low-opacity) */}
|
||||
<div className="absolute left-6 top-6 bottom-6 w-0.5 bg-brand-accent/20 -translate-x-1/2 z-0" />
|
||||
|
||||
{FEATURES.map((item) => (
|
||||
<div key={item.title} className="flex gap-5 group relative z-10">
|
||||
|
||||
{/* Orange icon circle */}
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-brand-accent text-brand-dark flex items-center justify-center shadow-md relative z-10 group-hover:scale-105 transition-transform duration-300">
|
||||
<MaterialIcon
|
||||
icon={item.icon}
|
||||
className="text-brand-dark"
|
||||
size={22}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-headline-md font-black text-white group-hover:text-brand-accent transition-colors">
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-body-md text-white/60 mt-1 leading-relaxed">
|
||||
{item.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Divider Line above CTA Area */}
|
||||
<hr className="border-t border-white/10 my-8 relative z-10" />
|
||||
|
||||
{/* Onboarding Call to Action */}
|
||||
<div className="mt-8 flex flex-wrap gap-6 items-center relative z-10">
|
||||
<a
|
||||
href="#download"
|
||||
className="bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-black px-8 py-3.5 rounded-full text-label-md hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
|
||||
>
|
||||
Get Nearle App
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-white hover:text-brand-accent font-bold text-label-md flex items-center gap-1 group py-2"
|
||||
>
|
||||
Partner Code of Ethics
|
||||
<MaterialIcon
|
||||
icon="arrow_forward"
|
||||
size={16}
|
||||
className="transition-transform group-hover:translate-x-1"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user