a7f12ad580
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 3m31s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 53s
Deploy to Staging / Verify Staging (pull_request) Successful in 9s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 8s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
import { GuideScreenshot } from '../components/GuideScreenshot';
|
|
|
|
export const MobileExperienceSection = () => {
|
|
return (
|
|
<section id="mobile-experience" className="py-8 scroll-mt-24">
|
|
<h2 className="text-2xl font-bold text-avus mb-4">10. Mobile Experience</h2>
|
|
|
|
<p className="text-titanio/70 leading-relaxed mb-4">
|
|
MotoVaultPro is fully responsive and works on both desktop and mobile devices.
|
|
</p>
|
|
|
|
<p className="text-titanio/70 leading-relaxed mb-4">
|
|
<strong className="text-avus">Mobile Navigation</strong>
|
|
</p>
|
|
|
|
<p className="text-titanio/70 leading-relaxed mb-4">
|
|
On mobile, the sidebar is replaced by:
|
|
</p>
|
|
|
|
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
|
<li>
|
|
A <strong className="text-avus">bottom navigation bar</strong> with icons for: Dashboard, Vehicles, Stations
|
|
</li>
|
|
<li>
|
|
A <strong className="text-avus">floating action button (FAB)</strong> in the center with quick actions:
|
|
<ul className="list-disc list-inside ml-6 mt-2 space-y-1">
|
|
<li>Log Fuel</li>
|
|
<li>Add Vehicle</li>
|
|
<li>Add Document</li>
|
|
<li>Add Maintenance</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
A <strong className="text-avus">hamburger menu</strong> (accessed from the header) that slides up from the bottom, providing access to all sections: Dashboard, Vehicles, Log Fuel, Maintenance, Documents, Settings
|
|
</li>
|
|
</ul>
|
|
|
|
<GuideScreenshot
|
|
src="/guide/mobile-bottom-nav.png"
|
|
alt="Mobile bottom navigation bar with FAB quick actions"
|
|
caption="The mobile bottom navigation bar and floating action button"
|
|
mobile
|
|
/>
|
|
|
|
<GuideScreenshot
|
|
src="/guide/mobile-hamburger.png"
|
|
alt="Mobile hamburger drawer menu"
|
|
caption="The mobile hamburger menu provides access to all sections"
|
|
mobile
|
|
/>
|
|
|
|
<p className="text-titanio/70 leading-relaxed mb-4">
|
|
<strong className="text-avus">Mobile Optimizations</strong>
|
|
</p>
|
|
|
|
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
|
<li>Touch-friendly buttons and targets (minimum 44px)</li>
|
|
<li>Swipe gestures for image viewing</li>
|
|
<li>Camera integration for VIN scanning and receipt capture</li>
|
|
<li>Full-screen forms for data entry</li>
|
|
<li>Responsive card layouts that stack vertically on smaller screens</li>
|
|
</ul>
|
|
|
|
<p className="text-titanio/70 leading-relaxed mb-4">
|
|
All features available on desktop are also available on mobile -- no functionality is lost on smaller screens.
|
|
</p>
|
|
</section>
|
|
);
|
|
};
|