Aravind/nearle-next-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix home page

Browse Source
This commit is contained in:
Aravind
2026-06-20 16:30:35 +05:30
parent 2778527442
commit be15ae458c
12 changed files with 344 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,113 +31,62 @@ export function Hero() {
{/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
<div className="hero-dark-panel select-none pointer-events-none">
{/* Flat Dotted World Map Layer */}
<div className="hero-map-layer select-none mix-blend-screen">
{/* Subtle Background Dot Texture (Minimal, barely visible) */}
<div className="hero-map-layer select-none">
<Image
src="/images/slider-glob.png"
alt="Dotted World Map"
alt="Subtle Background"
fill
sizes="(max-width: 768px) 100vw, 75vw"
className="object-contain object-left"
sizes="(max-width: 768px) 100vw, 40vw"
className="object-contain object-left-top"
priority
/>
{/* Animated Route Lines & Glowing Location Nodes */}
<svg
className="absolute inset-0 w-full h-full opacity-85 pointer-events-none"
viewBox="0 0 1000 800"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<filter id="heroRouteGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="5" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
{/* Glowing nodes */}
<circle cx="150" cy="180" r="8" className="fill-[#bd34fe] opacity-70 animate-pulse" filter="url(#heroRouteGlow)" />
<circle cx="150" cy="180" r="2.5" className="fill-white" />
<circle cx="350" cy="110" r="8" className="fill-[#bd34fe] opacity-70 animate-pulse" filter="url(#heroRouteGlow)" />
<circle cx="350" cy="110" r="2.5" className="fill-white" />
<circle cx="280" cy="300" r="8" className="fill-[#bd34fe] opacity-70 animate-pulse" filter="url(#heroRouteGlow)" />
<circle cx="280" cy="300" r="2.5" className="fill-white" />
<circle cx="480" cy="220" r="8" className="fill-[#bd34fe] opacity-70 animate-pulse" filter="url(#heroRouteGlow)" />
<circle cx="480" cy="220" r="2.5" className="fill-white" />
<circle cx="650" cy="165" r="8" className="fill-[#bd34fe] opacity-70 animate-pulse" filter="url(#heroRouteGlow)" />
<circle cx="650" cy="165" r="2.5" className="fill-white" />
<circle cx="780" cy="250" r="8" className="fill-[#bd34fe] opacity-70 animate-pulse" filter="url(#heroRouteGlow)" />
<circle cx="780" cy="250" r="2.5" className="fill-white" />
<circle cx="580" cy="140" r="8" className="fill-[#bd34fe] opacity-70 animate-pulse" filter="url(#heroRouteGlow)" />
<circle cx="580" cy="140" r="2.5" className="fill-white" />
{/* Arc dashed lines with moving stroke-dash animation */}
<path
d="M150,180 Q250,120 350,110"
fill="none"
stroke="#c02cff"
strokeWidth="2"
strokeDasharray="6,6"
className="animate-route opacity-70"
filter="url(#heroRouteGlow)"
/>
<path
d="M150,180 Q200,240 280,300"
fill="none"
stroke="#c02cff"
strokeWidth="2"
strokeDasharray="6,6"
className="animate-route opacity-70"
filter="url(#heroRouteGlow)"
/>
<path
d="M350,110 Q420,165 480,220"
fill="none"
stroke="#c02cff"
strokeWidth="2"
strokeDasharray="6,6"
className="animate-route opacity-70"
filter="url(#heroRouteGlow)"
/>
<path
d="M280,300 Q380,250 480,220"
fill="none"
stroke="#c02cff"
strokeWidth="2"
strokeDasharray="6,6"
className="animate-route opacity-70"
filter="url(#heroRouteGlow)"
/>
<path
d="M480,220 Q520,180 580,140 Q630,120 650,165"
fill="none"
stroke="#c02cff"
strokeWidth="2"
strokeDasharray="6,6"
className="animate-route opacity-70"
filter="url(#heroRouteGlow)"
/>
<path
d="M480,220 Q620,250 780,250"
fill="none"
stroke="#c02cff"
strokeWidth="2"
strokeDasharray="6,6"
className="animate-route opacity-70"
filter="url(#heroRouteGlow)"
/>
</svg>
</div>
{/* Minimal Route Animation (2-3 thin lines only, very subtle) */}
<svg
className="absolute inset-0 w-full h-full pointer-events-none"
viewBox="0 0 1000 800"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<filter id="heroRouteGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="3" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
{/* Minimal glow nodes - only 2 small ones at top */}
<circle cx="140" cy="100" r="5" className="fill-[#bd34fe] opacity-20 animate-pulse" filter="url(#heroRouteGlow)" />
<circle cx="140" cy="100" r="1.5" className="fill-white" />
<circle cx="300" cy="80" r="5" className="fill-[#bd34fe] opacity-20 animate-pulse" filter="url(#heroRouteGlow)" />
<circle cx="300" cy="80" r="1.5" className="fill-white" />
{/* Only 2 very thin route lines at top - staying clear of text area */}
<path
d="M140,100 Q220,85 300,80"
fill="none"
stroke="#c02cff"
strokeWidth="1"
strokeDasharray="4,4"
className="animate-route opacity-15"
filter="url(#heroRouteGlow)"
/>
<path
d="M300,80 Q370,110 420,140"
fill="none"
stroke="#c02cff"
strokeWidth="1"
strokeDasharray="4,4"
className="animate-route opacity-12"
filter="url(#heroRouteGlow)"
/>
</svg>
{/* Soft purple radial glow behind the bike near the diagonal edge (clipped) */}
<div className="absolute right-0 top-1/4 z-0 h-[60%] w-[45%] rounded-full bg-primary/45 blur-[120px] opacity-50 pointer-events-none" />
</div>