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

feat: add guide page foundation and routing (refs #203)

Browse Source 
- Create GuidePage with responsive layout (sticky TOC sidebar desktop, collapsible accordion mobile)
- Add GuideTableOfContents with scroll-based active section tracking
- Create GuideScreenshot and GuideTable shared components
- Add guideTypes.ts with section metadata for all 10 sections
- Add lazy-loaded /guide route in App.tsx with public access
- Placeholder section components for all 10 guide sections

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

8
frontend/src/pages/GuidePage/sections/DashboardSection.tsx Normal file
View File

@@ -0,0 +1,8 @@
export const DashboardSection = () => {
return (
<section id="dashboard" className="py-8 border-b border-white/5 scroll-mt-24">
<h2 className="text-2xl font-bold text-avus mb-4">2. Dashboard</h2>
<p className="text-titanio/70">Content loading in Milestone 2...</p>
</section>
);
};

8
frontend/src/pages/GuidePage/sections/DocumentsSection.tsx Normal file
View File

@@ -0,0 +1,8 @@
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>
</section>
);
};

8
frontend/src/pages/GuidePage/sections/FuelLogsSection.tsx Normal file
View File

@@ -0,0 +1,8 @@
export const FuelLogsSection = () => {
return (
<section id="fuel-logs" className="py-8 border-b border-white/5 scroll-mt-24">
<h2 className="text-2xl font-bold text-avus mb-4">4. Fuel Logs</h2>
<p className="text-titanio/70">Content loading in Milestone 2...</p>
</section>
);
};

8
frontend/src/pages/GuidePage/sections/GasStationsSection.tsx Normal file
View File

@@ -0,0 +1,8 @@
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>
</section>
);
};

8
frontend/src/pages/GuidePage/sections/GettingStartedSection.tsx Normal file
View File

@@ -0,0 +1,8 @@
export const GettingStartedSection = () => {
return (
<section id="getting-started" className="py-8 border-b border-white/5 scroll-mt-24">
<h2 className="text-2xl font-bold text-avus mb-4">1. Getting Started</h2>
<p className="text-titanio/70">Content loading in Milestone 2...</p>
</section>
);
};

8
frontend/src/pages/GuidePage/sections/MaintenanceSection.tsx Normal file
View File

@@ -0,0 +1,8 @@
export const MaintenanceSection = () => {
return (
<section id="maintenance" className="py-8 border-b border-white/5 scroll-mt-24">
<h2 className="text-2xl font-bold text-avus mb-4">5. Maintenance</h2>
<p className="text-titanio/70">Content loading in Milestone 2...</p>
</section>
);
};

8
frontend/src/pages/GuidePage/sections/MobileExperienceSection.tsx Normal file
View File

@@ -0,0 +1,8 @@
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>
</section>
);
};

8
frontend/src/pages/GuidePage/sections/SettingsSection.tsx Normal file
View File

@@ -0,0 +1,8 @@
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>
</section>
);
};

8
frontend/src/pages/GuidePage/sections/SubscriptionSection.tsx Normal file
View File

@@ -0,0 +1,8 @@
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>
</section>
);
};

8
frontend/src/pages/GuidePage/sections/VehiclesSection.tsx Normal file
View File

@@ -0,0 +1,8 @@
export const VehiclesSection = () => {
return (
<section id="vehicles" className="py-8 border-b border-white/5 scroll-mt-24">
<h2 className="text-2xl font-bold text-avus mb-4">3. Vehicles</h2>
<p className="text-titanio/70">Content loading in Milestone 2...</p>
</section>
);
};

12
frontend/src/pages/GuidePage/sections/index.ts Normal file
View File

@@ -0,0 +1,12 @@
import { lazy } from 'react';
export const GettingStartedSection = lazy(() => import('./GettingStartedSection').then(m => ({ default: m.GettingStartedSection })));
export const DashboardSection = lazy(() => import('./DashboardSection').then(m => ({ default: m.DashboardSection })));
export const VehiclesSection = lazy(() => import('./VehiclesSection').then(m => ({ default: m.VehiclesSection })));
export const FuelLogsSection = lazy(() => import('./FuelLogsSection').then(m => ({ default: m.FuelLogsSection })));
export const MaintenanceSection = lazy(() => import('./MaintenanceSection').then(m => ({ default: m.MaintenanceSection })));
export const GasStationsSection = lazy(() => import('./GasStationsSection').then(m => ({ default: m.GasStationsSection })));
export const DocumentsSection = lazy(() => import('./DocumentsSection').then(m => ({ default: m.DocumentsSection })));
export const SettingsSection = lazy(() => import('./SettingsSection').then(m => ({ default: m.SettingsSection })));
export const SubscriptionSection = lazy(() => import('./SubscriptionSection').then(m => ({ default: m.SubscriptionSection })));
export const MobileExperienceSection = lazy(() => import('./MobileExperienceSection').then(m => ({ default: m.MobileExperienceSection })));