import React, { useState, useEffect, useRef } from 'react'; import Navbar from './components/Navbar'; import RevealLayer from './components/RevealLayer'; import { Button } from '@/components/ui/button'; const BG_IMAGE_1 = "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260609_195923_b0ba8ace-1d1d-4f2c-9a28-1ab84b330680.png&w=1280&q=85"; const BG_IMAGE_2 = "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260609_201152_bba90a12-bf12-459f-91f0-51f237dbaf3b.png&w=1280&q=85"; const SPOTLIGHT_R = 260; export default function App() { const [cursorPos, setCursorPos] = useState({ x: -999, y: -999 }); const mouse = useRef({ x: 0, y: 0 }); const smooth = useRef({ x: 0, y: 0 }); const rafRef = useRef(); useEffect(() => { const handleMouseMove = (e: MouseEvent) => { mouse.current = { x: e.clientX, y: e.clientY }; }; const animate = () => { smooth.current.x += (mouse.current.x - smooth.current.x) * 0.1; smooth.current.y += (mouse.current.y - smooth.current.y) * 0.1; setCursorPos({ x: smooth.current.x, y: smooth.current.y }); rafRef.current = requestAnimationFrame(animate); }; window.addEventListener('mousemove', handleMouseMove); rafRef.current = requestAnimationFrame(animate); return () => { window.removeEventListener('mousemove', handleMouseMove); if (rafRef.current) cancelAnimationFrame(rafRef.current); }; }, []); return (

{/* Base Image Layer */}

{/* Reveal Layer (Spotlight) */} {/* Heading Content */}

Layers hold tales of time

{/* Bottom Left Paragraph */}

Every layer of sediment records a chapter of our planet, from ancient seabeds to drifting ash, layered across millions of years beneath us.

{/* Bottom Right Block */}

Our interactive maps let you peel back the crust to trace how stones, fossils, and deep time combine to shape the ground beneath your feet.

); }