eric/gitlab-instance-0a899031_nomadro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign landing page and add Caddy deployment for nomadro.com

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
eric
2026-07-11 11:25:50 -05:00
parent e452424f61
commit d2b381ac7b
23 changed files with 730 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
components/ui/globe-animation.tsx Normal file
View File

@@ -0,0 +1,117 @@
"use client";
export function GlobeAnimation() {
return (
<div className="pointer-events-none absolute right-[-5%] top-[15%] hidden opacity-20 lg:block xl:right-[5%] xl:opacity-30">
<div className="relative h-72 w-72 xl:h-96 xl:w-96">
{/* Orbit ring 1 */}
<div className="animate-orbit absolute inset-0">
<svg viewBox="0 0 200 200" className="h-full w-full">
<ellipse
cx="100"
cy="100"
rx="95"
ry="35"
fill="none"
stroke="url(#orbitGrad1)"
strokeWidth="0.5"
strokeDasharray="4 6"
/>
<circle cx="195" cy="100" r="3" fill="#22d3ee" opacity="0.8">
<animate attributeName="opacity" values="0.4;1;0.4" dur="2s" repeatCount="indefinite" />
</circle>
<defs>
<linearGradient id="orbitGrad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor="#8b5cf6" stopOpacity="0" />
<stop offset="50%" stopColor="#8b5cf6" stopOpacity="0.6" />
<stop offset="100%" stopColor="#22d3ee" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
</div>
{/* Orbit ring 2 */}
<div className="animate-orbit-reverse absolute inset-4">
<svg viewBox="0 0 200 200" className="h-full w-full">
<ellipse
cx="100"
cy="100"
rx="80"
ry="80"
fill="none"
stroke="url(#orbitGrad2)"
strokeWidth="0.3"
strokeDasharray="2 8"
transform="rotate(-30 100 100)"
/>
<circle cx="100" cy="20" r="2.5" fill="#d946ef" opacity="0.7">
<animate attributeName="opacity" values="0.3;0.9;0.3" dur="3s" repeatCount="indefinite" />
</circle>
<defs>
<linearGradient id="orbitGrad2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#d946ef" stopOpacity="0.2" />
<stop offset="100%" stopColor="#34d399" stopOpacity="0.2" />
</linearGradient>
</defs>
</svg>
</div>
{/* Globe */}
<div className="absolute inset-[25%] flex items-center justify-center">
<svg viewBox="0 0 120 120" className="h-full w-full">
<defs>
<radialGradient id="globeGrad" cx="35%" cy="30%">
<stop offset="0%" stopColor="#22d3ee" stopOpacity="0.3" />
<stop offset="50%" stopColor="#8b5cf6" stopOpacity="0.15" />
<stop offset="100%" stopColor="#06060f" stopOpacity="0.05" />
</radialGradient>
<linearGradient id="globeLine" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor="#22d3ee" stopOpacity="0.1" />
<stop offset="50%" stopColor="#8b5cf6" stopOpacity="0.3" />
<stop offset="100%" stopColor="#22d3ee" stopOpacity="0.1" />
</linearGradient>
</defs>
<circle cx="60" cy="60" r="55" fill="url(#globeGrad)" stroke="url(#globeLine)" strokeWidth="0.8" />
{/* Latitude lines */}
{[30, 45, 60, 75, 90].map((lat) => {
const ry = Math.sin((lat * Math.PI) / 180) * 55;
return (
<ellipse
key={lat}
cx="60"
cy="60"
rx="55"
ry={ry}
fill="none"
stroke="#22d3ee"
strokeWidth="0.3"
opacity="0.2"
/>
);
})}
{/* Longitude lines */}
{[0, 30, 60, 90, 120, 150].map((lon) => (
<ellipse
key={lon}
cx="60"
cy="60"
rx={Math.cos((lon * Math.PI) / 180) * 8 + 8}
ry="55"
fill="none"
stroke="#8b5cf6"
strokeWidth="0.3"
opacity="0.15"
transform={`rotate(${lon} 60 60)`}
/>
))}
{/* Glow dot */}
<circle cx="42" cy="38" r="4" fill="#22d3ee" opacity="0.6">
<animate attributeName="r" values="3;5;3" dur="4s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="4s" repeatCount="indefinite" />
</circle>
</svg>
</div>
</div>
</div>
);
}