🧭 Application Page – HS Code Search PlatformLegacy format

This page defines the visual and functional layout for the HS Code Search Application.

It combines a clean, data‑driven interface with the design system defined in design.md.

---

• Primary Color: #009B6F

• Secondary Color: #6B7280

• Accent Colors: #E5E7EB, #0B2239, #F8FAFB, #000000, #FFFFFF

• Typography: Sans‑serif family, bold headings, regular body text

• Button Styles: Primary (filled green), Secondary (outlined), Inverted (pink accent)

---

### 1. Header

• Logo (top‑left)

• Navigation: Home | Search | Documentation | Contact

• Background: #F8FAFB

• Font color: #0B2239

### 2. Hero Section

• Headline: “Simplify Your Logistics, Transform Your Business”

• Subtext: “From route planning to shipment tracking, fuel management to insurance — everything you need to run your logistics operations efficiently, all in one platform.”

• Buttons:

• Primary: “Get Started Free” (#009B6F, white text)

• Secondary: “Learn More” (white background, green border)

### 3. Search Module

• Input field: Enter HS code or product name

• Search button: Primary green

• Clear button: Gray outline

• Results displayed in card layout:

• HS Code

• Product Description

• Category / Country

• Expandable details

### 4. Dashboard Section

• Metrics cards (Revenue, Active Users, Session Duration, Churn Rate)

• Graphs: Bar chart for growth, pie chart for acquisition sources

• Sidebar navigation: Dashboard | Analytics | Reports | Customers | Settings | Help

• Footer: Privacy Policy | Terms | GitHub Repo

---

| Element | Width | Height | Notes |

|----------|--------|--------|-------|

| Hero Section | 840 px | 426 px | Center‑aligned |

| Dashboard Cards | 300 px | 180 px | Rounded corners |

| Sidebar | 240 px | Full height | Fixed position |

---

1. User enters HS code or product name.

2. Backend (FastAPI) fetches data from PostgreSQL.

3. Results displayed dynamically in React cards.

4. User can view details or export results.

5. Docker ensures consistent environment across deployments.

---

• Responsive design: Stack elements vertically on mobile.

• Accessibility: Maintain color contrast and keyboard navigation.

• Consistency: Use the same color palette and typography across all modules.

---

This page serves as the main interface for users to interact with the HS Code Search Application.

It demonstrates the integration of backend logic, frontend design, and user experience principles.