refactor: Migrate documentation content, rebuild UI components, and update core architecture.

docs/builder/header-footer.mdx

@@ -0,0 +1,45 @@
+---
+title: Header & Footer
+description: Customize your store's global navigation and footer area.
+---
+
+Your store's header and footer are crucial for navigation and branding. Use the built-in settings## Footer
+Configure your footer layout and copyright text.
+
+![Footer Preview](/images/docs/builder/footer-preview.png)
+
+## Header Settings
+
+Go to **Appearance > Header** to control the top of your site.
+
+![Header Settings](/images/docs/builder/header-settings.png)
+
+### Layout & Style
+*   **Style**: Choose between `Classic` (Logo left, nav right) or `Centered` layouts.
+*   **Sticky Header**: Toggle this to keep the header visible as users scroll down the page.
+*   **Logo Sizing**: Adjust the width and height of your logo to fit perfectly.
+
+### Elements
+Enable or disable specific icons:
+*   **Search**: Allow customers to search your catalog.
+*   **Account**: Link to the user profile/login page.
+*   **Cart**: Show the shopping bag icon.
+
+## Footer Settings
+
+Go to **Appearance > Footer** to manage the bottom of your site.
+
+![Footer Settings](/images/docs/builder/footer-settings.png)
+
+### Layout
+*   **Columns**: Choose a 3 or 4-column layout to organize your links.
+*   **Style**: Select `Simple` or `Detailed`.
+
+### Newsletter Integration
+You can easily collect emails directly from your footer.
+1.  Scroll down to the **Newsletter** section (or "Content & Contact").
+2.  Enable **Show in footer**.
+3.  This automatically adds a subscription input field to your footer, which connects directly to the [Newsletter Marketing](/docs/marketing/newsletter) system.
+
+### Contact Info
+Add your store address, email, and social media links. These helps build trust with your customers.