egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add guide content sections 1-10 with screenshot placeholders (refs #203)

Browse Source 
All 10 guide sections converted from USER-GUIDE.md to styled React
components using GuideTable and GuideScreenshot shared components.
Sections 1-5: Getting Started, Dashboard, Vehicles, Fuel Logs, Maintenance.
Sections 6-10: Gas Stations, Documents, Settings, Subscription Tiers, Mobile Experience.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2026-02-15 16:55:30 -06:00
parent 864da55cec
commit 6196ebfc91
10 changed files with 1556 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/src/pages/GuidePage/sections/MobileExperienceSection.tsx
View File

@@ -1,8 +1,69 @@
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">Content loading in Milestone 3...</p>
<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.webp"
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.webp"
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>
);
};