- features-grid changed to repeat(3, 1fr) for 2x3 layout
- 6th cell is a Free Trial card with midnight bg, brass border
- Email input, location dropdown (preselected to best ping server),
brass Send button
- POST to webhook as JSON {email, location}
- On success: form hides, success message shown
- Responsive: 3col -> 2col -> 1col
- Pings all 6 servers silently with 2s timeout
- Picks the lowest-latency server
- GSAP slides the city image in from right with label
- Server banner cards stay static (city + country only, no ping UI)
- Header changed to 'Our Server Locations'
- Cards hardcoded in HTML with just city name + region
- Removed all ping JS (IIFE, pingServer, markBest, etc.)
- Removed server-ping-wrap, best-badge, server-best, ping-spinner,
status-dot, server-optimal CSS
- Removed empty server-optimal div
- Removed card entrance animation (static display)
- Added GSAP 3.12.5 from CDN
- Card stagger entrance now uses gsap.fromTo with 0.6s duration, 0.09 stagger
- Carousel slide uses gsap.timeline: old slides out right (3s), new slides
in from right (3s), label slides in (2.5s after 0.3s offset)
- All animations use power2.out easing
- Image brightness: opacity 0.12→0.25, filter brightness(1.15) saturate(1.1)
- ::after overlay changed from solid midnight @ 0.6 to gradient
(midnight→transparent @ 0.5) — brighter image with smooth falloff
- ::after is now a dark overlay only (no bg image)
- .hero-bg container created on first swap
- Old slide (Amsterdam default) starts at translateX(0), animates to
translateX(100%) — slides out to the right
- New slide (winning city) starts at translateX(100%), animates to
translateX(0) — slides in from the right
- Both fire simultaneously via requestAnimationFrame, same easing
- Old slide removed after 1.2s cleanup timeout
- Label 'Our <City> server fits your location' slides in from right
alongside the carousel animation
- Preloads the best server's city image via new Image() before showing
- Reveal overlay uses clip-path: inset(0 100% ...) → inset(0) for smooth
left-to-right slide over the default Amsterdam background
- Label 'Our <City> server fits your location' slides in from right
simultaneously with backdrop-blur and brass border
- Both animations start and end together via requestAnimationFrame
- Maps each server to a city image (holland, brazil, india, england,
boston/sydney from Wikimedia Commons CC-BY-SA)
- CSS var --hero-bg controls ::after background, falls back to Amsterdam
- 0.8s ease-out transition when the image swaps
- Uses local webp for Odoo-sourced images, JPG for Wikimedia imports
- Replaced city placards with a full server status banner
- Grid of 6 server cards (Amsterdam, Boston, Manchester, Mumbai, São Paulo, Sydney)
- JS pings each server via Image() timing, shows ms latency
- Best server highlighted with brass glow, shadow, and 'Best' badge
- 'Your optimal server location: <city> (<ms> ms)' with bounce animation
- Staggered card entrance animation on page load
- Responsive: 6-col -> 3-col -> 2-col grid
reef
oliver