Lucid: High-Performance SaaS Landing Page
A conversion-focused SaaS landing page with a dark blue identity, GPU-accelerated floating components and touch-friendly hover effects.
Project Overview
Lucid is a responsive SaaS landing page crafted with the Next.js App Router and Tailwind CSS. It pairs a dark base with electric-blue accents and uses GPU-accelerated animations. Its signature feature is a floating dark contact card above an embedded satellite map that pauses while the visitor types. Buttons, navigation and pricing cards share a center-outward expand effect that works for both mouse hover and mobile touch. The page is split into reusable sections (Navbar, Hero, Features, DeviceShowcase, Customization, Testimonials, CallToAction, Pricing, Contact and Footer).
Challenges Faced
Animating a floating contact form smoothly with GPU transforms while pausing it during input.
Making the same expand effect work for both mouse hover and mobile touch.
Future Plans & Improvements
Connect the contact form to an email or database service.
Add more pricing and feature variations.