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

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>

frontend/src/pages/GuidePage/sections/DocumentsSection.tsx

@@ -1,8 +1,102 @@
+import { GuideTable } from '../components/GuideTable';
+import { GuideScreenshot } from '../components/GuideScreenshot';
+
 export const DocumentsSection = () => {
   return (
     <section id="documents" className="py-8 border-b border-white/5 scroll-mt-24">
       <h2 className="text-2xl font-bold text-avus mb-4">7. Documents</h2>
-      <p className="text-titanio/70">Content loading in Milestone 3...</p>
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        Click <strong className="text-avus">Documents</strong> in the sidebar. This page stores all your vehicle-related paperwork digitally.
+      </p>
+
+      <h3 id="documents-overview" className="text-xl font-semibold text-avus mb-3 mt-8">
+        Documents Overview
+      </h3>
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        The page shows the title "Documents" with an <strong className="text-avus">Add Document</strong> button in the top-right corner.
+      </p>
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        If you have no documents yet, you will see an empty state:
+      </p>
+
+      <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
+        <li>A document icon</li>
+        <li>"No Documents Yet"</li>
+        <li>"You haven't added any documents yet. Documents will appear here once you create them."</li>
+        <li>A <strong className="text-avus">Go to Vehicles</strong> button (since documents are associated with vehicles)</li>
+      </ul>
+
+      <GuideScreenshot
+        src="/guide/documents-desktop.webp"
+        alt="Documents page showing document storage"
+        caption="The Documents page for managing vehicle-related paperwork"
+      />
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        When documents exist, they appear in a list/grid with preview thumbnails, titles, document types, and associated vehicles.
+      </p>
+
+      <h3 id="adding-a-document" className="text-xl font-semibold text-avus mb-3 mt-8">
+        Adding a Document
+      </h3>
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        Click <strong className="text-avus">Add Document</strong> to open the "Add Document" modal with these fields:
+      </p>
+
+      <GuideTable
+        headers={['Field', 'Required', 'Description']}
+        rows={[
+          ['Vehicle', 'Yes', 'Select which vehicle this document belongs to (dropdown of your vehicles)'],
+          ['Document Type', 'Yes', 'Select the type (see Document Types below)'],
+          ['Title', 'Yes', 'A descriptive title (e.g., "Honda CBR600RR Service Manual")'],
+          ['Notes', 'Optional', 'Any additional notes about this document'],
+          ['Upload image/PDF', 'Yes', 'Click Choose File to upload an image or PDF file'],
+        ]}
+      />
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        Click <strong className="text-avus">Create Document</strong> to save, or <strong className="text-avus">Cancel</strong> to discard.
+      </p>
+
+      <h3 id="document-types" className="text-xl font-semibold text-avus mb-3 mt-8">
+        Document Types
+      </h3>
+
+      <GuideTable
+        headers={['Type', 'What to Store']}
+        rows={[
+          ['Insurance', 'Insurance policies, cards, declarations pages'],
+          ['Registration', 'Vehicle registration documents'],
+          ['Maintenance Manual', 'Owner\'s manuals and service manuals'],
+          ['Service Records', 'Service history documentation from dealers/shops'],
+          ['Recall Notices', 'Vehicle recall notifications'],
+          ['Inspection Reports', 'State inspection or emissions test reports'],
+          ['Receipts', 'Purchase receipts for parts, accessories, services'],
+          ['Other', 'Any other vehicle-related document'],
+        ]}
+      />
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        <strong className="text-avus">Insurance documents</strong> have additional fields: Insurance Company, Policy Number, Effective Date, Expiration Date, Coverage amounts (Bodily Injury, Property Damage), and Premium.
+      </p>
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        <strong className="text-avus">Registration documents</strong> have additional fields: License Plate, Expiration Date, and Registration Cost.
+      </p>
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        Documents with expiration dates will show countdown badges so you know when renewals are coming up.
+      </p>
+
+      <div className="bg-primary-500/10 border border-primary-500/30 rounded-lg p-4 my-4">
+        <p className="text-titanio/70 leading-relaxed">
+          <strong className="text-avus">Pro Feature:</strong> When uploading a Maintenance Manual PDF, Pro and Enterprise users can check <strong className="text-avus">Scan for Maintenance Schedule</strong> to automatically extract a complete maintenance schedule from the document. See Maintenance Manual PDF Extraction (Pro) for the full workflow.
+        </p>
+      </div>
     </section>
   );
 };