Component Showcase
All reusable components extracted from the Pilot Kit design language. Each row demonstrates one component with its variants and states.
色彩系统
主色板、语义色、透明度层次
主色板
语义色
SUCCESS
emerald
border emerald-400/30
bg emerald-500/10
text emerald-100
icon emerald-400
WARNING
amber
border amber-400/30
bg amber-500/10
text amber-100
icon amber-300
INFO
blue
border blue-400/30
bg blue-500/10
text blue-200
icon blue-300
ERROR
rose
border rose-400/30
bg rose-500/10
text rose-100
icon rose-300
透明度层次
排版
字体大小阶梯、Eyebrow、渐变文字
字体大小阶梯
text-xs · 12px — Pilot Kit Dashboard
text-sm · 14px — Pilot Kit Dashboard
text-base · 16px — Pilot Kit Dashboard
text-lg · 18px — Pilot Kit Dashboard
text-xl · 20px — Pilot Kit Dashboard
text-2xl · 24px — Pilot Kit Dashboard
text-3xl · 30px — Pilot Kit Dashboard
Eyebrow 标签
EYEBROW 标签FLIGHT DATA MANAGEMENT
MUTED EYEBROW
渐变文字
Ready to Elevate Your Flying ?
Hero Feature Preview
功能预览图标模块，用于 Hero 区域展示核心功能。
Button
按钮组件，6 种变体 x 4 种尺寸。基于 CVA (class-variance-authority)。
With Icons
Badge
状态徽章，5 种语义色 + 2 种尺寸。
Tones
Small Size
Card
卡片组件，9 个层级：基础 5 级 + 加强效果（Accent）+ 渐变边框（Gradient）+ 暖色渐变（Warm）+ Pro 推荐（Pro）。
Light
border-white/10 bg-white/5
Standard
border-white/10 bg-white/6 shadow-sm
Container
shadow-2xl backdrop-blur
Deep
bg-[#07162f]/82
Blue
border-blue-400/20 bg-[#081327]/90
Accent
ring-2 ring-blue-500/40 + glow shadow
Gradient
gradient border blue→purple→blue
Warm
orange gradient + glow shadow
Pro
radial warm-top + deep purple-blue
Input
文本输入框，支持 label 和 placeholder。
Textarea
多行文本输入。
Hint / Tip
内联提示框，4 种语义色调。支持纯文字和带图标两种模式。
Without Icon
Information
Cloud Sync requires a Plus or Pro subscription. Your data is encrypted end-to-end.
Success
All 42 flight records have been synced successfully.
With Icon
Information
Cloud Sync requires a Plus or Pro subscription. Your data is encrypted end-to-end.
Success
All 42 flight records have been synced successfully.
Warning
Your subscription expires in 7 days. Renew to keep cloud sync active.
Error
Failed to decode METAR. Please check the raw report format.
Progress Bar
进度条，4 种颜色 x 3 种尺寸。
Steps / Workflow
流程步骤组件，带序号圆。≤4 步水平单行带横线连接，≥5 步自动 grid 换行。移动端统一垂直排列。
Vertical (4 steps)
Install Pilot Kit
Download from App Store, Google Play, or Huawei AppGallery.
Create Account
Sign up with email or social login to enable cloud sync.
Configure Aircraft
Add your aircraft profiles with performance data.
Start Flying
Use E6B, weather decoder, and logbook during your flights.
Horizontal ≤4 steps (single row + lines)
Install Pilot Kit
Download from App Store, Google Play, or Huawei AppGallery.
Create Account
Sign up with email or social login to enable cloud sync.
Configure Aircraft
Add your aircraft profiles with performance data.
Start Flying
Use E6B, weather decoder, and logbook during your flights.
Install Pilot Kit
Download from App Store, Google Play, or Huawei AppGallery.
Create Account
Sign up with email or social login to enable cloud sync.
Configure Aircraft
Add your aircraft profiles with performance data.
Start Flying
Use E6B, weather decoder, and logbook during your flights.
Horizontal ≥5 steps (auto grid wrap)
Enter Airport Code
Input any global airport ICAO code (e.g. KJFK) or IATA code (JFK).
Fetch Weather Data
The app retrieves the latest METAR and TAF reports from official sources.
Read Plain Language
View decoded reports with clear explanations for every element.
Analyze Trends
Check historical METAR to see how conditions are changing over time.
Check Flight Rules
See color-coded flight categories: VFR, MVFR, IFR, or LIFR.
Make Smart Decisions
Use the complete weather picture to make safe go/no-go decisions.
Enter Airport Code
Input any global airport ICAO code (e.g. KJFK) or IATA code (JFK).
Fetch Weather Data
The app retrieves the latest METAR and TAF reports from official sources.
Read Plain Language
View decoded reports with clear explanations for every element.
Analyze Trends
Check historical METAR to see how conditions are changing over time.
Check Flight Rules
See color-coded flight categories: VFR, MVFR, IFR, or LIFR.
Make Smart Decisions
Use the complete weather picture to make safe go/no-go decisions.
List
列表组件，3 种变体：check（勾号）、dot（圆点）、plain（普通）。
Check List (Emerald)
- E6B Flight Calculator
- METAR/TAF Weather Decoder
- Digital Flight Logbook
Dot List (Blue)
- Real-time cloud synchronization
- End-to-end encryption
- Multi-device support
Table
表格组件，支持斑马纹、推荐列高亮、boolean 值自动渲染勾号/叉号。
| Feature | Free | Plus | Pro |
|---|---|---|---|
| E6B Calculator | |||
| Weather Decoder | |||
| Cloud Sync | |||
| PDF Export | |||
| Unlimited Logs | |||
| Priority Support |
Toggle / Switch
切换开关，基于 Radix Switch。
Checkbox
复选框，基于 Radix Checkbox。
Select
下拉选择，基于 Radix Select。
Dropdown Menu
下拉菜单，基于 Radix DropdownMenu。
Search Dropdown
搜索下拉建议，来源于天气工具的 ICAO 机场搜索模式。
Tabs
标签页，基于 Radix Tabs。4 种变体：Grid（网格）、Flex Wrap（带边框）、Pill（药丸内联）、Text（默认 shadcn 文本样式）。
Variant 1 — Grid (equal width)
METAR KJFK 161853Z 31009KT 10SM FEW250 M02/M17 A3042
Variant 2 — Flex Wrap (auto rows)
Wind Triangle Calculator — compute headwind, crosswind, ground speed.
Variant 3 — Pill (inline compact)
Showing all flight categories.
Variant 4 — Text (default shadcn, used in E6B sub-tabs)
Time / Speed / Distance — default shadcn TabsTrigger styling with bg-background active state.
Accordion / Collapse
折叠面板，基于 Radix Accordion。可用于 FAQ 折叠。
Modal / Dialog
弹窗，基于 Radix Dialog。
Toast
通知提示，使用项目已有的 toast 系统。
Navigation
导航栏已在页面顶部展示（Header 组件）。包含桌面端 DropdownMenu 和移动端 Sheet 侧滑菜单。
Live Example
Look at the Header above - it demonstrates the navigation component with desktop dropdowns and mobile sheet menu. Resize the browser window to see responsive behavior.
Composite Cases
组件组合的实际使用场景，展示 Hero、CTA、Pricing、Download 等真实页面效果。
Case 1 — Hero Section (Centered)
Everything Pilots Need, In One App
E6B calculator, weather decoder, digital logbook, GPS tracking, and more — built for student pilots to airline captains.
Case 2 — Hero Section (Left-Right Layout)
METAR & TAF Weather Decoder
Decode complex aviation weather reports instantly. Get plain-English translations, trend analysis, and visual flight category indicators.
PILOT KIT
Feature Preview
Aviation Weather
Web Tool + App
Platforms
iOS · Android · Huawei
Next Step
Try Web Tool
Case 3 — CTA Section (Centered)
Ready to Elevate Your Flying ?
Join thousands of pilots worldwide. Free to get started, upgrade anytime.
Case 4 — CTA Section (Left-Right)
Your Data, Everywhere
Seamlessly sync logbook, checklists, and aircraft profiles across all your devices with end-to-end encryption.
Sync Queue
All devices synced. Last sync: 2 min ago.
Case 5 — Conversion CTA (Compact Left-Right Bar)
Download Pilot Kit App, Access Aviation Weather Offline
Save your favorite airports, keep recent queries and exported PDF reports, and continue viewing METAR / TAF and decoded weather results even without an internet connection.
Case 6 — Conversion CTA (Multi-Action)
Try the Free Workflow, Then Decide: "Just Logbook" or Full Flight Toolkit
Want to see what Pilot Kit can do beyond logbook? Open the weather and calculator tools first, then come back to pricing and decide whether you need just a logbook or a complete cross-device flight workflow.
Case 7 — Feature Cards with Buttons
E6B Calculator
Wind triangle, TSD, fuel burn, density altitude, and more aviation calculations.
Weather Decoder
Decode METAR and TAF reports instantly with visual flight category indicators.
Cloud Sync
Seamlessly sync your flight data across all devices with end-to-end encryption.
Case 8 — Pricing Comparison
Simple, Transparent Pricing
Start free, upgrade when you need more.
Plus
$9.99/mo
Pro tools + PDF export
- All Free features
- PDF Export
- Advanced Analytics
Pro
$19.99/mo
Full sync + unlimited everything
- All Plus features
- Cloud Sync
- Unlimited Logs & Tracks
Case 9 — Download CTA (Inline Buttons)
Case 10 — Feature Section (Left-Right with Accent Card)
Log Every Flight, Anywhere You Fly
Record your flight hours with precision. Export to PDF or CSV, sync across devices, and track your progress towards your next rating.
- Auto-calculate total hours, PIC, SIC, night, instrument
- Export to PDF and CSV for CFI sign-off
- Cloud sync across all your devices
Flight Statistics
LiveTotal Flight Hours
1,247.5
PIC
892.3
Night
156.8
Instrument
89.2
Cross-Country
423.7
75% towards ATP minimum hours
Case 11 — Feature Section (Reversed Layout with Gradient Card)
GPS TRACKING
Track Preview
Record Every Nautical Mile
Automatically record your flight path with GPS. View detailed track analysis, altitude profiles, and export to GPX/KML for sharing.
42
Flights
8,421
NM Flown
127h
Airborne
Case 12 — E6B Calculator (Left-Right with Screenshot)
E6B Flight Computer
Wind triangle, time/speed/distance, fuel burn, density altitude, crosswind component — all the calculations a pilot needs, right in your pocket.
Calculators
8 Modules
Price
Free Forever
PILOT KIT
E6B Calculator
Case 13 — Simple Card Grid (4 columns, no icon)
Flight Logs
Keep logbook entries aligned across your phone, tablet, and other signed-in devices.
Aircraft Profiles
Sync aircraft details so performance planning and records stay consistent everywhere.
Checklists
Carry checklist libraries and completed execution data across devices without re-entering them.
GPS Track Logs
Upload recorded track data and pull it back to another device when you need to review or export it.
Case 14 — Status Cards with Badge (3 columns)
Synced
SyncedLocal and cloud data match.
Pending
PendingLocal edits are waiting to upload.
Syncing
SyncingA sync cycle is running now.
Conflict
ConflictLocal and cloud changes need review.
Error
ErrorA sync action failed and needs attention.
Upgrade Required
Upgrade RequiredCloud sync is gated by plan access.
Case 15 — Feature Cards with Icon (3×3 grid)
METAR Translation
Current weather observations decoded into plain language. Understand visibility, clouds, wind, temperature, and special conditions instantly.
TAF Forecasts
Terminal area forecasts translated with time periods clearly marked. See how weather will change throughout your flight window.
Flight Categories
Automatic VFR, MVFR, IFR, or LIFR categorization based on ceiling and visibility. Color-coded for quick decision making.
Wind Analysis
Crosswind and headwind components calculated for any runway. Gust factors highlighted. Wind shear alerts when present.
Cloud Layers
Visual representation of cloud layers with bases and tops. Clear identification of ceiling height and cloud types.
Remarks Decoded
Complex remarks section translated including pressure trends, precipitation amounts, and automated station notes.
Weather Phenomena
Complete decoding of phenomena like rain, mist, thunderstorms, hail and special conditions. Detailed explanations of intensity and type.
Safety Alerts
Automatic highlighting of dangerous conditions like icing, severe turbulence, low visibility or thunderstorms. Visual alerts for quick decisions.
Weather History
Access historical METARs to analyze patterns and trends. Compare current conditions with previous hours for better planning.
Case 16 — Detail Cards with Check Lists (2 columns)
Why Weather Decoding Matters
Weather is a primary factor in aviation accidents, particularly in general aviation. Quick and accurate interpretation of weather reports is essential for:
- Making safe go/no-go decisions before departure
- Understanding weather trends during flight planning
- Identifying hazardous conditions like icing, turbulence, or low visibility
- Determining alternate airport suitability
- Calculating fuel requirements based on wind conditions
- Assessing runway conditions and crosswind components
METAR Components Explained
Our decoder breaks down each element of a METAR report:
- Station Identifier: Full airport name and location
- Observation Time: Converted to local time and UTC
- Wind: Direction, speed, gusts, and variability explained
- Visibility: Distance in miles or meters with conditions
- Weather Phenomena: Rain, snow, mist, and other conditions in clear terms
- Sky Condition: Cloud layers, types, and ceiling height
- Temperature/Dewpoint: In Celsius and Fahrenheit with spread analysis
- Altimeter: Pressure setting in inches Hg or hPa
TAF Forecast Intelligence
TAF reports provide crucial forecast information for flight planning. Our decoder translates complex forecast groups into timeline views showing:
- Valid period with clear start and end times
- Expected changes (BECMG, TEMPO, FM groups) explained
- Probability indicators for conditional weather
- Wind shift timing and intensity changes
- Forecast confidence levels and amendments
Advanced Weather Features
Beyond basic decoding, Pilot Kit provides advanced analysis tools:
- Trend Analysis: Compare multiple reports to see improving or deteriorating conditions
- Flight Rules: Automatic VFR/IFR determination with regulatory references
- Crosswind Calculator: Runway-specific wind components
- Density Altitude: Performance impact calculations
- Icing Probability: Temperature/dewpoint spread analysis for icing conditions
- Convective Outlook: Thunderstorm likelihood based on atmospheric conditions
Case 17 — History / Saved Inputs Panel
来源: src/components/tools/tool-history-panel.tsx
ADVANCED FUEL · SAVED INPUTS
Real Page Heroes
使用新设计语言构建的首页、Feature 页、Compare 页的 Hero 区域。
Homepage Hero (Left-Right Layout)
One Toolbox, Your Complete Flight Workflow.
Free web tools for weather queries and fuel calculations right on your desktop; Pilot Kit free app turns your phone/tablet into a powerful electronic flight bag with interactive charts, checklists, and logbook management. Need cloud sync? Start a 30-day free Pro trial.
Supported Platforms
Free Web Tools, Ready to Use
No login, no install. Check weather, decode reports, run flight calculations, and export PDF right from your browser.
- Real-time METAR / TAF lookup
- E6B & unit conversion
- Visual calculation results at a glance
Free App, Maps & Logbook Flow
The free app gives you interactive charts, airport search, airways and navaids, logbook management, checklists, and aircraft profiles.
30 Days Free Pro, Then Decide
Need cloud sync, unlimited records, and export? Start a 30-day free Pro trial, then decide whether to upgrade.
Free Web Tools
METAR / TAF, E6B, aviation calculations & PDF export
Free App
Maps, logbook, checklists, and aircraft profiles — download free
30 Days Free Pro
Cloud sync and advanced workflows — free trial first
Charts & Procedures
Airways, waypoints, SID, STAR, IAP & AIP at your fingertips
Feature Page Hero (e.g. Weather Decoder)
METAR & TAF Weather Decoder
Decode complex aviation weather reports instantly. Get plain-English translations, trend analysis, and visual flight category indicators.
PILOT KIT
Feature Preview
Aviation Weather
Web Tool + App
Platforms
iOS · Android · Huawei
Next Step
Try Web Tool
Compare Page Hero
ALTERNATIVE COMPARISON
Pilot Kit vs ForeFlight
Compare features, pricing, and platform support. Pilot Kit offers professional aviation features at 30–50% lower cost, with Android support and a generous free tier.
Ready for Component Review
All components above follow the cloud-sync baseline design language. Review each component and provide feedback for refinement.