Search Results | TruckAda
A high-tech, dark-mode logistics marketplace with a focus on 3D depth and glassmorphism. Featuring a carbon fiber texture, animated gradient backgrounds, and responsive grid layouts. Ideal for SaaS dashboards, transport management, fintech, or any industrial service platform. Keywords: dark mode, blue glow, glassmorphism, 3D hover, logistics, editorial typography, Satoshi, Cabinet Grotesk, responsive grid, sidebar filters.
Summary
A sophisticated dark-themed logistics search results interface characterized by 3D-transforming listing cards, translucent glassmorphic UI elements, and high-contrast blue and emerald accents. The design utilizes a 'depth-first' approach with perspective containers and staggered scroll animations to create an immersive, premium user experience.
Style
The style is 'Dark 3D Modern'. It uses a deep midnight background (#050811) with a subtle carbon fiber pattern and a moving 4-color gradient. Typography pairs the bold, geometric 'Cabinet Grotesk' for headers with the clean, legible 'Satoshi' for interface text. UI elements are glassmorphic with thin 1px borders (rgba(255,255,255,0.08)) and 12px background blurs. Buttons and interactive states use vibrant blue (#2563eb) and emerald (#10b981) shadows to signify action.
Layout & Structure
A 12-column responsive layout featuring a fixed glass header, a 288px sidebar for filtering, and a flexible results grid. The layout prioritizes vertical scanning on mobile and a dashboard-like arrangement on desktop.
Header
Sidebar Filters
Results Header
Results Grid
Pagination
Components
TruckCard3D
Interactive listing card with dynamic 3D tilt and shimmer effect.
Availability Toggle
High-fidelity switch for filtering.
Special Notes
Must maintain a strict 1px border-radius consistency (2rem to 2.5rem for large containers). Must use the shimmer animation on cards to imply premium quality. Do not use solid backgrounds for any panels; everything must have some degree of transparency and blur. The 3D rotation on hover should not exceed 5-10 degrees to ensure text remains readable.