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

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 */}