TruckAda Dark 3D Marketplace
A high-performance dark-themed logistics marketplace style. Features a sophisticated deep navy aesthetic with vibrant blue and emerald accents, utilizing glassmorphism, 3D interactive transforms, and scroll-triggered animations. Optimized for industrial SaaS, fintech dashboards, or transport logistics platforms requiring a professional yet cutting-edge 'future-tech' feel. Key design elements include editorial typography (Cabinet Grotesk), carbon-fiber textured backgrounds, and high-gloss 3D card components with shimmer effects.
Summary
A modern, industrial dark-mode interface for a logistics marketplace. It combines a dynamic animated gradient background with glassmorphism UI elements. The design leverages 3D perspective transforms on hover and smooth reveal-on-scroll animations to create an immersive, premium user experience suitable for high-end B2B platforms.
Style
Industrial Dark Mode with Glassmorphism and 3D Interaction. Typography uses heavy-weight headings (Cabinet Grotesk) paired with geometric sans-serif body text (Satoshi). Color palette centers on Deep Navy (#050811), Electric Blue (#2563EB), and WhatsApp Green (#22C55E). Animations include 15s looping gradient backgrounds and cubic-bezier (0.23, 1, 0.32, 1) transforms for 3D interactions.
Layout & Structure
The layout follows a structured landing page format with a centered high-impact hero, a grid-based product marketplace, and a dual-column feature section with a dashboard preview.
Header
Hero Section
Marketplace Grid
Dashboard Registration Section
Footer
Components
3D Interactive Product Card
A high-depth card that tilts towards the user's cursor.
Glassmorphism Status Badge
Small, high-visibility indicator used on images.
Special Notes
MUST: Use 'Cabinet Grotesk' for all numbers and titles to maintain the industrial aesthetic. MUST: Implement the 3D hover effect using JavaScript to calculate mouse position relative to card center for realistic tilt. MUST NOT: Use solid backgrounds for cards; always maintain the 12px blur transparency. MUST NOT: Use standard system fonts; use Satoshi for all data-heavy UI components for readability.