Create a webpage based on the content provided by the user. The webpage style requirements are as follows:

### I. Visual Style Positioning - **Artistic Hand-drawn Style**: Adopting a line art style, blending modern digital design with traditional hand-drawn aesthetics. - **Color Scheme**: Using neutral colors (off-white/light gray) as the base, paired with dark gray main text, and using orange-red (accent color) as the visual focal color. - **Brand Tone**: Refined, artistic, and warm, targeting a discerning user group. ### II. Layout Structure Principles **Hero Section (First Screen Design)** - Left-right column layout (60:40 golden ratio) - Left side: - Oversized title (Display Font, 72-96px), dark font, strong visual impact - Key data highlighted in accent color (e.g., "15 Cities, 4749 locations") - Concise and powerful subtitle copy, stating the core value proposition - Ample white space, creating a high-end feel - Right side: - Customized hand-drawn illustrations, occupying 50% of the visual space - Consistent Illustration Style: Line drawing + local color accents - Illustration content deeply integrated with the brand story - **Navigation Bar Design** - Minimalist top navigation, fixed positioning - Logo + 2-3 main menu items - Right-side icon group (search/favorites/menu) - Transparent or pure white background with subtle shadows - **Content Card Area** - Card grid layout (3-4 columns, responsive) - Each card includes: - Title (Heading 3, 32-40px) - Description (2-3 lines, 16-18px, line height 1.6) - Accompanying hand-drawn illustration (consistent with the main visual style) - Light background (#F5F3F0), rounded corners (8-12px) - Hover state: Slightly rising + deepened shadow - ### III. Illustration System Specifications **Illustration Creation Guidelines** 1. 2. **Line Processing**: - Use 1-2px irregular hand-drawn lines to simulate realistic painting texture - Maintain smooth lines with a touch of artificiality, avoiding excessive mechanicalness. 3. **Color Usage:** - 80% gray lines + 20% brand color fill - Orange-red used only to emphasize elements (people, windows, key buildings) - Background uses gradient beige (#FDFBF7 → #F5F1EB) - 5. **Scene Composition:** - Urban scenes: blending landmark buildings + everyday life scenes - Overhead or isometric perspective - Adding small figures to enhance narrative and intimacy - 7. **Detail Density:** - Rich foreground details, moderately simplified midground, and outlined background - Maintain visual hierarchy, guiding the eye to key information - 9. ### IV. Font System - **Display Font (Title):** Serif font, heavy and powerful (e.g., Freight Display, Tiempos) - **Body Font (Body Text):** Sans-serif, highly legible (e.g., Inter, Manrope) - **Font Size Ratio**: Uses a modular scale (1.25 or 1.333) - - **Font Weight Levels**: Light (300) / Regular (400) / Medium (500) / Bold (700) - ### V. Interaction Details - - **Micro-animations**: Cards float up 4-8px upon hover, transition time 300-400ms - - **Loading Status**: Uses a skeleton screen to maintain brand tone - - **Responsive Breakpoints**: - - Desktop: 1440px+ - - Tablet: 768-1439px - - Mobile: 375-767px - - ### VI. Design Output Requirements Each design output should include: 1. 2. Clear visual hierarchy (achieved through size/color/white space) 3. 4. At least one custom illustration (deeply related to the content, generated using Nano Banana Pro) 5. 6. 2-3 accent color highlights (not exceeding 7. 8. Ample breathing space (section spacing ≥ 120px) 9. 10. Clear user action path 11. --- **Design Philosophy**: Use artistic visual language to convey the brand's uniqueness and warmth. Every pixel serves to tell a story, not simply showcase functionality. The design should make users feel, "This is for people who appreciate life," rather than a cold, commercial product.

The web page illustrations were all generated by nano banana pro.