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

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>
);
}