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/SettingsSection.tsx

@@ -1,8 +1,148 @@
+import { GuideTable } from '../components/GuideTable';
+import { GuideScreenshot } from '../components/GuideScreenshot';
+
 export const SettingsSection = () => {
   return (
     <section id="settings" className="py-8 border-b border-white/5 scroll-mt-24">
       <h2 className="text-2xl font-bold text-avus mb-4">8. Settings</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">Settings</strong> in the sidebar to manage your account, preferences, and data.
+      </p>
+
+      <h3 id="profile" className="text-xl font-semibold text-avus mb-3 mt-8">
+        Profile
+      </h3>
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        The Profile section displays your account information:
+      </p>
+
+      <GuideTable
+        headers={['Field', 'Description']}
+        rows={[
+          ['Avatar', 'Shows your initial in a circle'],
+          ['Name', 'Your display name (e.g., "Eric Gullickson")'],
+          ['Email', 'Your account email address'],
+          ['Account Status', 'Shows "Verified account" if email is verified'],
+          ['Display Name', 'Your public-facing name'],
+          ['Notification Email', 'The email address used for notifications (defaults to "Using primary email")'],
+        ]}
+      />
+
+      <GuideScreenshot
+        src="/guide/settings-desktop.webp"
+        alt="Settings page showing profile and account options"
+        caption="The Settings page with profile, security, subscription, and preferences"
+      />
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        Click the <strong className="text-avus">Edit</strong> button to update your display name or notification email.
+      </p>
+
+      <h3 id="security-and-privacy" className="text-xl font-semibold text-avus mb-3 mt-8">
+        Security and Privacy
+      </h3>
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        The Security & Privacy row shows "Password, two-factor authentication" with a <strong className="text-avus">Manage</strong> button. Click it to:
+      </p>
+
+      <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
+        <li>Change your password</li>
+        <li>Set up two-factor authentication</li>
+        <li>Manage active sessions</li>
+        <li>Log out all devices</li>
+      </ul>
+
+      <h3 id="subscription" className="text-xl font-semibold text-avus mb-3 mt-8">
+        Subscription
+      </h3>
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        Shows your current subscription plan with a <strong className="text-avus">Manage</strong> button.
+      </p>
+
+      <GuideTable
+        headers={['Plan', 'Features']}
+        rows={[
+          ['FREE', 'Basic vehicle management, up to 2 vehicles, basic fuel tracking, document storage'],
+          ['Pro', 'Up to 10 vehicles, receipt OCR scanning, maintenance schedules, email ingestion'],
+          ['Enterprise', 'Unlimited vehicles, all Pro features'],
+        ]}
+      />
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        "Upgrade to Pro or Enterprise for more features and vehicle slots."
+      </p>
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        Click <strong className="text-avus">Manage</strong> to view plan details, change your subscription, manage payment methods, and view billing history.
+      </p>
+
+      <h3 id="notifications" className="text-xl font-semibold text-avus mb-3 mt-8">
+        Notifications
+      </h3>
+
+      <GuideTable
+        headers={['Setting', 'Description', 'Default']}
+        rows={[
+          ['Push Notifications', 'Receive notifications about your vehicles (maintenance due, etc.)', 'ON'],
+          ['Email Updates', 'Receive maintenance reminders and updates via email', 'OFF'],
+        ]}
+      />
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        Toggle each setting on or off.
+      </p>
+
+      <h3 id="appearance-and-units" className="text-xl font-semibold text-avus mb-3 mt-8">
+        Appearance and Units
+      </h3>
+
+      <GuideTable
+        headers={['Setting', 'Description', 'Options']}
+        rows={[
+          ['Dark Mode', 'Use dark theme for better night viewing', 'Toggle ON/OFF (default: OFF)'],
+          ['Units for distance and capacity', 'Choose between measurement systems', 'Imperial: miles, gallons, MPG, USD / Metric: km, liters, L/100km, EUR'],
+        ]}
+      />
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        The unit system you select here applies throughout the entire application -- Dashboard, Fuel Logs, Maintenance, and Vehicle Details all update to reflect your preference.
+      </p>
+
+      <h3 id="data-import-and-export" className="text-xl font-semibold text-avus mb-3 mt-8">
+        Data Import and Export
+      </h3>
+
+      <GuideTable
+        headers={['Action', 'Description', 'Button']}
+        rows={[
+          ['Import Data', 'Upload and restore your vehicle data from a backup file', 'Import'],
+          ['Export Data', 'Download your vehicle and fuel log data as a backup file', 'Export'],
+        ]}
+      />
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        Export creates a downloadable archive of all your data. Import accepts a previously exported backup file to restore your data.
+      </p>
+
+      <h3 id="account-actions" className="text-xl font-semibold text-avus mb-3 mt-8">
+        Account Actions
+      </h3>
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        At the bottom of the Settings page:
+      </p>
+
+      <GuideTable
+        headers={['Button', 'Action']}
+        rows={[
+          ['Sign Out', 'Log out of your account'],
+          ['DELETE ACCOUNT', 'Permanently delete your account and all data. This initiates a 30-day grace period during which you can cancel the deletion by logging back in.'],
+        ]}
+      />
     </section>
   );
 };