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

@@ -1,8 +1,105 @@
+import { GuideTable } from '../components/GuideTable';
+import { GuideScreenshot } from '../components/GuideScreenshot';
+
 export const GasStationsSection = () => {
   return (
     <section id="gas-stations" className="py-8 border-b border-white/5 scroll-mt-24">
       <h2 className="text-2xl font-bold text-avus mb-4">6. Gas Stations</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">Gas Stations</strong> in the sidebar. This page helps you find gas stations near you and save your favorites.
+      </p>
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        The page is split into two sections:
+      </p>
+
+      <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
+        <li><strong className="text-avus">Left:</strong> An interactive Google Map showing station locations as markers</li>
+        <li><strong className="text-avus">Right:</strong> Search controls</li>
+      </ul>
+
+      <h3 id="finding-stations" className="text-xl font-semibold text-avus mb-3 mt-8">
+        Finding Stations
+      </h3>
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        <strong className="text-avus">Search Options</strong>
+      </p>
+
+      <GuideTable
+        headers={['Control', 'Description']}
+        rows={[
+          ['Use Current Location', 'Large red button -- uses your device\'s GPS to center the search on your current location'],
+          ['Street', 'Enter a street address (e.g., 123 Main St)'],
+          ['City', 'Enter a city name'],
+          ['State', 'Select from dropdown'],
+          ['ZIP', 'Enter a ZIP code'],
+          ['Search Radius', 'Slider from 1 mi to 25 mi (default: 5 mi)'],
+          ['Search Stations', 'Click to execute the search'],
+        ]}
+      />
+
+      <GuideScreenshot
+        src="/guide/gas-stations-desktop.webp"
+        alt="Gas Stations page showing map and search controls"
+        caption="The Gas Stations page with interactive map and search options"
+      />
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        You can either use your current location OR manually enter an address. Search results appear below the map.
+      </p>
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        <strong className="text-avus">Search Results</strong>
+      </p>
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        Below the map, there are three tabs:
+      </p>
+
+      <GuideTable
+        headers={['Tab', 'Description']}
+        rows={[
+          ['RESULTS (n)', 'Stations found by your search, showing count'],
+          ['SAVED (n)', 'Your saved/favorite stations'],
+          ['PREMIUM 93', 'Stations verified to carry true 93-octane fuel'],
+        ]}
+      />
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        Each station result shows:
+      </p>
+
+      <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
+        <li>Station name (e.g., "Costco Gas Station", "Mobil")</li>
+        <li>Street address and city</li>
+        <li>Star rating (community-verified)</li>
+        <li>Fuel grade badges (e.g., "93 Octane - w/ Ethanol")</li>
+        <li>Save/unsave button</li>
+      </ul>
+
+      <h3 id="saved-stations" className="text-xl font-semibold text-avus mb-3 mt-8">
+        Saved Stations
+      </h3>
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        Click the <strong className="text-avus">SAVED</strong> tab to see your favorite stations. Saved stations also appear as yellow star markers on the map. You can:
+      </p>
+
+      <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
+        <li>View station details</li>
+        <li>Remove a station from your saved list</li>
+        <li>Navigate on the map by clicking a station card</li>
+      </ul>
+
+      <h3 id="premium-93-stations" className="text-xl font-semibold text-avus mb-3 mt-8">
+        Premium 93 Stations
+      </h3>
+
+      <p className="text-titanio/70 leading-relaxed mb-4">
+        Click the <strong className="text-avus">PREMIUM 93</strong> tab to see your "Your Premium 93 Stations" -- stations that have been community-verified to carry genuine 93-octane fuel. This is especially useful for performance vehicles that require premium fuel.
+      </p>
     </section>
   );
 };