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>
This commit is contained in:
Eric Gullickson
@@ -1,8 +1,384 @@
|
||||
import { GuideTable } from '../components/GuideTable';
|
||||
|
||||
export const SubscriptionSection = () => {
|
||||
return (
|
||||
<section id="subscription-tiers" className="py-8 border-b border-white/5 scroll-mt-24">
|
||||
<h2 className="text-2xl font-bold text-avus mb-4">9. Subscription Tiers and Pro Features</h2>
|
||||
<p className="text-titanio/70">Content loading in Milestone 3...</p>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
MotoVaultPro offers three subscription tiers. Higher tiers automatically include all features from lower tiers.
|
||||
</p>
|
||||
|
||||
<h3 id="tier-comparison" className="text-xl font-semibold text-avus mb-3 mt-8">
|
||||
Tier Comparison
|
||||
</h3>
|
||||
|
||||
<GuideTable
|
||||
headers={['Feature', 'Free', 'Pro', 'Enterprise']}
|
||||
rows={[
|
||||
['Vehicle Slots', '2', '5', 'Unlimited'],
|
||||
['Vehicle management', 'Yes', 'Yes', 'Yes'],
|
||||
['Fuel log tracking', 'Yes', 'Yes', 'Yes'],
|
||||
['Document storage', 'Yes', 'Yes', 'Yes'],
|
||||
['Gas station finder', 'Yes', 'Yes', 'Yes'],
|
||||
['Maintenance records', 'Yes', 'Yes', 'Yes'],
|
||||
['Maintenance schedules', 'Yes', 'Yes', 'Yes'],
|
||||
['Data import/export', 'Yes', 'Yes', 'Yes'],
|
||||
['VIN camera scan and decode', '--', 'Yes', 'Yes'],
|
||||
['Fuel receipt OCR scanning', '--', 'Yes', 'Yes'],
|
||||
['Maintenance receipt OCR scanning', '--', 'Yes', 'Yes'],
|
||||
['Maintenance manual PDF extraction', '--', 'Yes', 'Yes'],
|
||||
['Email ingestion (forward receipts)', '--', 'Yes', 'Yes'],
|
||||
['Shared vehicle documents', '--', 'Yes', 'Yes'],
|
||||
['Community station submissions', '--', 'Yes', 'Yes'],
|
||||
]}
|
||||
/>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
When you attempt to use a Pro feature on the Free tier, an <strong className="text-avus">Upgrade Required</strong> dialog appears explaining the feature and offering a direct link to upgrade.
|
||||
</p>
|
||||
|
||||
<h3 id="vin-camera-scanning" className="text-xl font-semibold text-avus mb-3 mt-8">
|
||||
VIN Camera Scanning and Decode (Pro)
|
||||
</h3>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">What it does:</strong> Use your device camera to photograph your vehicle's VIN plate, and the system automatically reads the VIN using OCR (Optical Character Recognition) and decodes it from the NHTSA database.
|
||||
</p>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">How to use it:</strong>
|
||||
</p>
|
||||
|
||||
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>Go to <strong className="text-avus">Vehicles</strong> and click <strong className="text-avus">+ Add Vehicle</strong></li>
|
||||
<li>In the VIN Number field, click the <strong className="text-avus">camera icon</strong></li>
|
||||
<li>Point your camera at the VIN plate on your vehicle (typically on the driver-side dashboard or door jamb)</li>
|
||||
<li>The OCR system reads the 17-character VIN from the image</li>
|
||||
<li>A <strong className="text-avus">VIN OCR Review modal</strong> appears showing the detected VIN with confidence indicators</li>
|
||||
<li>Confirm or correct the VIN, then click <strong className="text-avus">Accept</strong></li>
|
||||
<li>Click the <strong className="text-avus">Decode VIN</strong> button</li>
|
||||
<li>The system queries the NHTSA database and auto-populates: Year, Make, Model, Engine, Transmission, and Trim</li>
|
||||
<li>Review the pre-filled fields and complete the remaining details</li>
|
||||
</ol>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
This eliminates manual data entry errors and ensures accurate vehicle specifications.
|
||||
</p>
|
||||
|
||||
<h3 id="fuel-receipt-scanning" className="text-xl font-semibold text-avus mb-3 mt-8">
|
||||
Fuel Receipt Scanning (Pro)
|
||||
</h3>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">What it does:</strong> Photograph a fuel receipt and the OCR system extracts all relevant data, automatically filling in your fuel log entry.
|
||||
</p>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">How to use it:</strong>
|
||||
</p>
|
||||
|
||||
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>Open the <strong className="text-avus">Log Fuel</strong> modal (from Dashboard or Fuel Logs page)</li>
|
||||
<li>Click the <strong className="text-avus">SCAN RECEIPT</strong> button at the top of the form</li>
|
||||
<li>Use your camera to photograph the fuel receipt</li>
|
||||
<li>The system processes the image and extracts relevant data</li>
|
||||
</ol>
|
||||
|
||||
<GuideTable
|
||||
headers={['Extracted Field', 'Description']}
|
||||
rows={[
|
||||
['Fuel Amount', 'Gallons or liters purchased'],
|
||||
['Cost Per Unit', 'Price per gallon/liter'],
|
||||
['Total Cost', 'Total transaction amount'],
|
||||
['Date & Time', 'Transaction timestamp'],
|
||||
['Fuel Grade', 'Regular, Midgrade, Premium, etc.'],
|
||||
['Station Name', 'Merchant name matched to known stations'],
|
||||
]}
|
||||
/>
|
||||
|
||||
<ol start={5} className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>A <strong className="text-avus">Receipt OCR Review modal</strong> appears showing all extracted values with confidence scores</li>
|
||||
<li>Each field can be edited inline if the OCR got something wrong</li>
|
||||
<li>The station name is automatically matched against known gas stations in the system</li>
|
||||
<li>Click <strong className="text-avus">Accept</strong> to auto-fill the Log Fuel form with the extracted values</li>
|
||||
<li>Click <strong className="text-avus">Reject</strong> to discard the scan and enter data manually</li>
|
||||
<li>Review the pre-filled form and click <strong className="text-avus">Add Fuel Log</strong></li>
|
||||
</ol>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">Tips for best results:</strong>
|
||||
</p>
|
||||
|
||||
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>Photograph the receipt on a flat, well-lit surface</li>
|
||||
<li>Ensure the entire receipt is visible in the frame</li>
|
||||
<li>Avoid wrinkled or faded receipts when possible</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="maintenance-receipt-scanning" className="text-xl font-semibold text-avus mb-3 mt-8">
|
||||
Maintenance Receipt Scanning (Pro)
|
||||
</h3>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">What it does:</strong> Photograph a maintenance or service receipt to automatically extract service details into a maintenance record.
|
||||
</p>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">How to use it:</strong>
|
||||
</p>
|
||||
|
||||
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>Go to <strong className="text-avus">Maintenance</strong> and select a vehicle</li>
|
||||
<li>On the <strong className="text-avus">RECORDS</strong> tab, click the <strong className="text-avus">ADD RECEIPT</strong> button (dashed outline area)</li>
|
||||
<li>Use your camera to photograph the service receipt</li>
|
||||
<li>The system processes the image and extracts relevant data</li>
|
||||
</ol>
|
||||
|
||||
<GuideTable
|
||||
headers={['Extracted Field', 'Description']}
|
||||
rows={[
|
||||
['Category', 'Service type (Routine, Repair, Performance)'],
|
||||
['Subtypes', 'Specific services performed (e.g., Oil Change, Tire Rotation)'],
|
||||
['Cost', 'Total service cost'],
|
||||
['Date', 'Service date'],
|
||||
['Shop Name', 'Name of the service shop'],
|
||||
]}
|
||||
/>
|
||||
|
||||
<ol start={5} className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>A <strong className="text-avus">Maintenance Receipt Review modal</strong> shows extracted values with confidence indicators</li>
|
||||
<li>Edit any incorrect values inline</li>
|
||||
<li>Click <strong className="text-avus">Accept</strong> to auto-fill the maintenance record form</li>
|
||||
<li>Review and click <strong className="text-avus">Add Record</strong></li>
|
||||
</ol>
|
||||
|
||||
<h3 id="maintenance-manual-pdf" className="text-xl font-semibold text-avus mb-3 mt-8">
|
||||
Maintenance Manual PDF Extraction (Pro)
|
||||
</h3>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">What it does:</strong> Upload your vehicle's owner's manual or maintenance manual as a PDF, and the system automatically extracts the recommended maintenance schedule -- creating maintenance schedules with the correct intervals for your specific vehicle.
|
||||
</p>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">How to use it:</strong>
|
||||
</p>
|
||||
|
||||
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>Go to <strong className="text-avus">Documents</strong> and click <strong className="text-avus">Add Document</strong></li>
|
||||
<li>Select your vehicle and choose <strong className="text-avus">Maintenance Manual</strong> as the document type</li>
|
||||
<li>Upload the PDF file</li>
|
||||
<li>Check the <strong className="text-avus">Scan for Maintenance Schedule</strong> checkbox (Pro feature -- indicated by a lock icon for Free tier users)</li>
|
||||
<li>Click <strong className="text-avus">Create Document</strong></li>
|
||||
<li>The system submits the PDF for asynchronous processing</li>
|
||||
<li>A progress indicator shows while the document is being analyzed</li>
|
||||
<li>When processing completes, the <strong className="text-avus">Maintenance Schedule Review</strong> screen appears</li>
|
||||
</ol>
|
||||
|
||||
<GuideTable
|
||||
headers={['Column', 'Description']}
|
||||
rows={[
|
||||
['Checkbox', 'Select which items to create as schedules'],
|
||||
['Service Name', 'Extracted maintenance service (e.g., "Engine Oil and Filter Change")'],
|
||||
['Interval', 'Recommended interval in months and/or miles'],
|
||||
['Details', 'Additional notes or specifications'],
|
||||
['Confidence', 'How confident the system is in the extraction (High/Medium/Low)'],
|
||||
]}
|
||||
/>
|
||||
|
||||
<ol start={9} className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>Check the boxes next to the maintenance items you want to create</li>
|
||||
<li>Edit any service names, intervals, or details inline</li>
|
||||
<li>Click <strong className="text-avus">Create Selected Schedules</strong> to batch-create all selected items as maintenance schedules for your vehicle</li>
|
||||
</ol>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
This turns a 50-page owner's manual into a complete set of maintenance reminders in minutes.
|
||||
</p>
|
||||
|
||||
<h3 id="email-ingestion" className="text-xl font-semibold text-avus mb-3 mt-8">
|
||||
Email Ingestion (Pro)
|
||||
</h3>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">What it does:</strong> Forward vehicle-related emails (service receipts, insurance documents, registration notices) to a dedicated email address, and they automatically appear in your MotoVaultPro account ready to be associated with a vehicle.
|
||||
</p>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">How to use it:</strong>
|
||||
</p>
|
||||
|
||||
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>Forward any vehicle-related email to your dedicated MotoVaultPro ingestion address</li>
|
||||
<li>The system processes the email and any attachments</li>
|
||||
<li>On your <strong className="text-avus">Dashboard</strong>, a <strong className="text-avus">Pending Associations</strong> banner appears showing how many items are waiting</li>
|
||||
<li>Click the banner to open the <strong className="text-avus">Pending Association List</strong></li>
|
||||
<li>For each pending item, you see a preview of the document or receipt and a vehicle selector dropdown</li>
|
||||
<li>Select the correct vehicle for each item and click <strong className="text-avus">Associate</strong></li>
|
||||
<li>Or click <strong className="text-avus">Discard</strong> to remove items you do not want</li>
|
||||
</ol>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">Bulk actions</strong> are available to discard all pending items at once.
|
||||
</p>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
This is especially useful for:
|
||||
</p>
|
||||
|
||||
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>Forwarding digital receipts from auto parts stores</li>
|
||||
<li>Forwarding service confirmation emails from your mechanic</li>
|
||||
<li>Forwarding insurance policy documents from your provider</li>
|
||||
<li>Forwarding registration renewal notices</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="shared-vehicle-documents" className="text-xl font-semibold text-avus mb-3 mt-8">
|
||||
Shared Vehicle Documents (Pro)
|
||||
</h3>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">What it does:</strong> Associate a single document with multiple vehicles. Useful for fleet insurance policies, multi-vehicle service agreements, or shared maintenance contracts.
|
||||
</p>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">How to use it:</strong>
|
||||
</p>
|
||||
|
||||
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>Open an existing document's detail page</li>
|
||||
<li>In the <strong className="text-avus">Shared Vehicles</strong> section, click <strong className="text-avus">Add Vehicle</strong></li>
|
||||
<li>Select additional vehicles from the dropdown</li>
|
||||
<li>The document now appears in the Documents section for each associated vehicle</li>
|
||||
<li>To remove a vehicle association, click the <strong className="text-avus">Remove</strong> button next to that vehicle</li>
|
||||
</ol>
|
||||
|
||||
<h3 id="community-station-submissions" className="text-xl font-semibold text-avus mb-3 mt-8">
|
||||
Community Station Submissions (Pro)
|
||||
</h3>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">What it does:</strong> Submit new gas stations to the MotoVaultPro community database, helping other enthusiasts find quality fuel locations -- especially stations carrying true 93-octane premium fuel.
|
||||
</p>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">How to use it:</strong>
|
||||
</p>
|
||||
|
||||
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>Go to <strong className="text-avus">Gas Stations</strong></li>
|
||||
<li>Look for the option to submit a new community station</li>
|
||||
<li>Fill in the submission form</li>
|
||||
</ol>
|
||||
|
||||
<GuideTable
|
||||
headers={['Field', 'Description']}
|
||||
rows={[
|
||||
['Station Name', 'Name of the gas station'],
|
||||
['Location', 'Address or location'],
|
||||
['Fuel Types', 'Available fuel types and grades'],
|
||||
['Amenities', 'Available amenities (bathrooms, ATM, convenience store, etc.)'],
|
||||
['Notes', 'Any additional information'],
|
||||
['Photo', 'Optional photo of the station'],
|
||||
]}
|
||||
/>
|
||||
|
||||
<ol start={4} className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>Submit for community review</li>
|
||||
<li>An admin reviews and approves or rejects the submission</li>
|
||||
<li>Approved stations appear in the <strong className="text-avus">PREMIUM 93</strong> tab and search results with a community-verified badge</li>
|
||||
</ol>
|
||||
|
||||
<h3 id="managing-your-subscription" className="text-xl font-semibold text-avus mb-3 mt-8">
|
||||
Managing Your Subscription
|
||||
</h3>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">Viewing Your Plan</strong>
|
||||
</p>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
Go to <strong className="text-avus">Settings</strong> and find the <strong className="text-avus">Subscription</strong> section. It shows your current plan (FREE, Pro, or Enterprise) with a <strong className="text-avus">Manage</strong> button.
|
||||
</p>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">Upgrading</strong>
|
||||
</p>
|
||||
|
||||
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>Click <strong className="text-avus">Manage</strong> in the Subscription section</li>
|
||||
<li>The Subscription page shows tier comparison cards with pricing</li>
|
||||
<li>Toggle between <strong className="text-avus">Monthly</strong> and <strong className="text-avus">Annual</strong> billing (annual saves money)</li>
|
||||
<li>Click <strong className="text-avus">Upgrade</strong> on the plan you want</li>
|
||||
<li>Enter your payment details using the secure Stripe payment form</li>
|
||||
<li>Your new features are available immediately</li>
|
||||
</ol>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">Payment Methods</strong>
|
||||
</p>
|
||||
|
||||
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>Payment is processed through Stripe (credit/debit cards)</li>
|
||||
<li>You can save a card for recurring billing</li>
|
||||
<li>Update or remove your payment method at any time</li>
|
||||
<li>View billing history and download invoices as PDFs</li>
|
||||
</ul>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">Billing History</strong>
|
||||
</p>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
The billing history table shows all past invoices with:
|
||||
</p>
|
||||
|
||||
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>Date</li>
|
||||
<li>Description</li>
|
||||
<li>Amount</li>
|
||||
<li>Status (Paid, Pending, Failed)</li>
|
||||
<li>Download PDF button for each invoice</li>
|
||||
</ul>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">Downgrading</strong>
|
||||
</p>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
If you downgrade from a higher tier, you may need to reduce your vehicles to fit within the lower tier's limit:
|
||||
</p>
|
||||
|
||||
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>Click <strong className="text-avus">Downgrade</strong> on the lower plan</li>
|
||||
<li>A <strong className="text-avus">Vehicle Selection dialog</strong> appears if you exceed the new tier's vehicle limit</li>
|
||||
<li>Select which vehicles to keep (e.g., keep 2 for Free tier)</li>
|
||||
<li>A warning explains that removed vehicles and their data will be deleted</li>
|
||||
<li>Confirm the downgrade</li>
|
||||
</ol>
|
||||
|
||||
<GuideTable
|
||||
headers={['Tier', 'Vehicle Limit']}
|
||||
rows={[
|
||||
['Free', '2'],
|
||||
['Pro', '5'],
|
||||
['Enterprise', 'Unlimited'],
|
||||
]}
|
||||
/>
|
||||
|
||||
<p className="text-titanio/70 leading-relaxed mb-4">
|
||||
<strong className="text-avus">Cancelling</strong>
|
||||
</p>
|
||||
|
||||
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
|
||||
<li>On the Subscription page, click <strong className="text-avus">Cancel Subscription</strong></li>
|
||||
<li>A confirmation dialog appears with retention options</li>
|
||||
<li>Confirm cancellation</li>
|
||||
<li>Your subscription remains active until the end of the current billing period</li>
|
||||
<li>After expiration, your account reverts to the Free tier</li>
|
||||
<li>Click <strong className="text-avus">Reactivate</strong> at any time before expiration to keep your plan</li>
|
||||
</ol>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user