TruckAda Dark 3D Marketplace
TruckAda Dark 3D Marketplace is a premium, industrial-themed dark mode aesthetic designed for logistics platforms and high-end SaaS dashboards. Characterized by a deep navy/carbon palette (#050811), the design employs heavy glassmorphism, vibrant blue (#2563eb) and emerald (#10b981) accents, and immersive 3D interactions. It features scroll-triggered reveal animations, 3D perspective card hovers, and animated mesh gradients that provide a high-tech, futuristic feel. Suitable for supply chain, fintech, heavy industry marketplaces, and professional fleet management tools.
Summary
A high-tech industrial dark mode interface featuring glassmorphism cards with 3D perspective transforms, animated deep-sea gradients, and bold editorial typography. The UI focuses on direct connectivity and high-impact visual storytelling through staggered reveal animations.
Style
The style is 'Industrial Futurist'—combining a dark carbon-fiber texture with glass elements and vibrant accent colors. Typography uses a high-contrast pairing of 'Cabinet Grotesk' for bold headings and 'Satoshi' for readable body text. Animations are fluid and physics-based, utilizing cubic-bezier curves for a premium feel.
Layout & Structure
The layout follows a centered hero structure moving into a modular grid of interactive cards, concluding with a split-section feature showcase.
Header
Hero Section
Featured Grid
Registration Feature Section
Footer
Components
3D Interactive Glass Card
A card that tilts towards the user's cursor while maintaining a shimmering glass effect.
Perspective Search Bar
A search input group that appears to sit on a 3D plane.
Special Notes
MUST use 'backdrop-filter: blur(12px)' on all glass elements to maintain legibility over the animated background. MUST implement the 3D card hover script to dynamically calculate rotateX and rotateY based on mouse position for the 'card-3d' class. DO NOT use flat solid colors for cards; they must remain semi-transparent to show the background mesh gradient.