feat: complete UI/UX improvements and localization

docs/stitch_akyaka_golden_hour_retreat/aegean_coastal_sanctuary/DESIGN.md

@@ -0,0 +1,175 @@
+---
+name: Aegean Coastal Sanctuary
+colors:
+  surface: '#f6fafb'
+  surface-dim: '#d7dbdc'
+  surface-bright: '#f6fafb'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#f1f4f5'
+  surface-container: '#ebeef0'
+  surface-container-high: '#e5e9ea'
+  surface-container-highest: '#dfe3e4'
+  on-surface: '#181c1d'
+  on-surface-variant: '#3e494b'
+  inverse-surface: '#2d3132'
+  inverse-on-surface: '#eef1f2'
+  outline: '#6e797c'
+  outline-variant: '#bdc8cb'
+  surface-tint: '#006877'
+  primary: '#006574'
+  on-primary: '#ffffff'
+  primary-container: '#088092'
+  on-primary-container: '#f8fdff'
+  inverse-primary: '#78d4e7'
+  secondary: '#705a4c'
+  on-secondary: '#ffffff'
+  secondary-container: '#f8dac8'
+  on-secondary-container: '#755e50'
+  tertiary: '#8a4c17'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#a7642e'
+  on-tertiary-container: '#fffbff'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#a3eeff'
+  primary-fixed-dim: '#78d4e7'
+  on-primary-fixed: '#001f25'
+  on-primary-fixed-variant: '#004e5a'
+  secondary-fixed: '#fbddca'
+  secondary-fixed-dim: '#dec1af'
+  on-secondary-fixed: '#28180d'
+  on-secondary-fixed-variant: '#574335'
+  tertiary-fixed: '#ffdcc5'
+  tertiary-fixed-dim: '#ffb782'
+  on-tertiary-fixed: '#301400'
+  on-tertiary-fixed-variant: '#703802'
+  background: '#f6fafb'
+  on-background: '#181c1d'
+  surface-variant: '#dfe3e4'
+typography:
+  headline-xl:
+    fontFamily: Literata
+    fontSize: 48px
+    fontWeight: '600'
+    lineHeight: '1.2'
+  headline-lg:
+    fontFamily: Literata
+    fontSize: 32px
+    fontWeight: '600'
+    lineHeight: '1.3'
+  headline-md:
+    fontFamily: Literata
+    fontSize: 24px
+    fontWeight: '500'
+    lineHeight: '1.4'
+  body-lg:
+    fontFamily: Nunito Sans
+    fontSize: 18px
+    fontWeight: '400'
+    lineHeight: '1.6'
+  body-md:
+    fontFamily: Nunito Sans
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: '1.6'
+  label-lg:
+    fontFamily: Nunito Sans
+    fontSize: 14px
+    fontWeight: '700'
+    lineHeight: '1.2'
+    letterSpacing: 0.05em
+  headline-lg-mobile:
+    fontFamily: Literata
+    fontSize: 28px
+    fontWeight: '600'
+    lineHeight: '1.3'
+rounded:
+  sm: 0.25rem
+  DEFAULT: 0.5rem
+  md: 0.75rem
+  lg: 1rem
+  xl: 1.5rem
+  full: 9999px
+spacing:
+  unit: 8px
+  container-max: 1200px
+  gutter: 24px
+  margin-mobile: 20px
+  section-gap: 80px
+---
+
+## Brand & Style
+
+This design system embodies the "Warm Coastal" aesthetic, specifically tailored for the slow-living atmosphere of Akyaka. It departs from sterile corporate luxury in favor of an **Authentic & Boutique** personality. The visual language is tactile and inviting, evoking the feeling of sun-drenched stone walls, turquoise waters, and the iconic bougainvillea of the Turkish coast.
+
+The style leverages **soft minimalism** paired with **organic accents**. Large, evocative photography of the Aegean landscape is grounded by generous whitespace and soft, rounded geometry. A signature line-art motif of a bougainvillea branch is used sparingly to anchor section headers, adding a human, illustrative touch to the digital interface.
+
+## Colors
+
+The palette is derived directly from the Akyaka landscape:
+- **Primary (Turquoise):** Represents the Azmak River and the Aegean sea. Used for primary branding and navigational elements.
+- **Secondary (Dark Wood):** Inspired by the traditional Ula-style architecture and woodwork. Used for deep contrast, footers, and high-priority text.
+- **Accent (Bougainvillea Pink):** Reserved specifically for call-to-action buttons and highlights to ensure they pop against the neutral base.
+- **Background (Cream):** An off-white, paper-like base that feels warmer and more organic than pure white.
+
+## Typography
+
+The typographic hierarchy balances a literary, authoritative serif with a friendly, accessible sans-serif.
+
+- **Headlines:** Use **Literata** (or Lora) to convey a sense of history and boutique quality. Larger headlines should use tighter tracking, while smaller subheads benefit from more breathing room.
+- **Body & UI:** Use **Nunito Sans**. Its rounded terminals mirror the "soft" shape language of the UI and ensure high readability for room descriptions and booking details.
+- **Accents:** Use all-caps labels with slight letter spacing for categories or "small print" to maintain a clean, organized appearance.
+
+## Layout & Spacing
+
+This design system uses a **Fluid-Fixed hybrid grid**. On desktop, content is contained within a 1200px max-width container to maintain focus, while background elements can bleed to the edges.
+
+- **Rhythm:** A base 8px unit dictates all spacing.
+- **Sectioning:** Large gaps (80px-120px) are used between major content blocks to evoke a sense of calm and "unhurried" browsing.
+- **Mobile:** Margins shrink to 20px, and vertical spacing is compressed slightly to 64px between sections to maintain momentum.
+
+## Elevation & Depth
+
+Visual hierarchy is established through **Tonal Layers** and **Ambient Shadows**.
+
+- **Surfaces:** Cards and floating elements sit on the Cream background with extremely soft, diffused shadows (Blur: 32px, Opacity: 4%, Color: Secondary Brown).
+- **Glassmorphism:** The primary navigation bar uses a frosted glass effect (Backdrop Blur: 12px) with a semi-transparent cream tint (85% opacity). This allows the colors of the hero imagery to bleed through subtly.
+- **Depth Levels:**
+  - Level 0: Background (#F7F4EF).
+  - Level 1: Flat cards with a 1px #E5E0D5 border.
+  - Level 2: Raised elements (interactive cards) with the ambient shadow.
+
+## Shapes
+
+The shape language is consistently "Soft-Organic." 
+
+- **Corner Radii:** Standard components (buttons, input fields) use 12px. Larger components (cards, image containers) use 24px.
+- **Images:** Always utilize the `rounded-xl` (24px) radius to soften the edges of the photography, making the imagery feel more like "windows" into the hotel.
+- **Icons:** Use rounded icon sets (e.g., Feather or Lucide) with a 2px stroke weight to match the body typography weight.
+
+## Components
+
+### Navbar
+The navbar is a fixed-top element with a frosted glass background. The logo (Sitar) is placed on the left, with primary navigation links in the center (Secondary Brown) and a "Book Now" CTA in the Accent Pink on the right.
+
+### Buttons
+- **Primary:** Filled Accent Pink (#D46A8C) with Cream text. 24px rounded corners. Minimum height 48px.
+- **Secondary:** Outlined Primary Teal (#3A9CAE) with 1.5px border.
+- **Text:** Underlined Serif (Literata) for a sophisticated "Read More" feel.
+
+### Cards
+Room and amenity cards use a vertical stack:
+1. **Image:** 3:2 aspect ratio with a 24px corner radius.
+2. **Content:** Cream background, 12px padding. 
+3. **Typography:** Headline-MD for titles, Body-MD for descriptions.
+
+### Input Fields
+Soft cream background (#F2EEE5) with no border until focused. On focus, a 1.5px Primary Teal border appears. Label text sits above the field in Nunito Sans Bold (12px).
+
+### Footer
+A high-contrast block using the Dark Wood Brown (#3D2B1F). Text is rendered in Cream (#F7F4EF) at 80% opacity for secondary info, and 100% for links and titles.
+
+### Motifs
+Small SVG line-art bougainvillea branches should be placed at a -5 degree angle above H2 section headers, slightly overlapping the text to create a hand-crafted, scrapbook feel.