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

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

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