Enhance Webflow guide with image placeholders and improved formatting

Co-authored-by: danielpaul <333233+danielpaul@users.noreply.github.com>

Author: Copilot

docs/installation/webflow.mdx

@@ -9,7 +9,10 @@ icon: "browsers"
     In your Webflow dashboard, navigate to your project settings:
 
     1. Go to **Project Settings** > **Custom Code**
+    <img src="/images/webflow/webflow-project-settings.png" alt="Webflow Project Settings navigation" />
+    
     2. In the **Head Code** section, add your CookieChimp script:
+    <img src="/images/webflow/webflow-custom-code-head.png" alt="Webflow Custom Code Head section" />
 
     <Info>
       The CookieChimp script needs to be added in the Head Code section so that it loads first, before other scripts. This ensures other scripts only run based on user consent.
@@ -29,6 +32,7 @@ icon: "browsers"
 
     1. In the **Webflow Designer**, add a **Div Block** where you want the privacy trigger to appear
     2. Set the Div Block's **ID** to `cookiechimp-container` in the Element Settings panel
+    <img src="/images/webflow/webflow-element-id-setting.png" alt="Setting element ID in Webflow Designer" />
     3. This div will host the floating privacy icon, allowing users to update their preferences
 
     <Note>
@@ -43,6 +47,7 @@ icon: "browsers"
     2. In the Element Settings panel, add a **Custom Attribute**:
        - **Name**: `data-cc`
        - **Value**: `show-preferencesModal`
+    <img src="/images/webflow/webflow-custom-attribute.png" alt="Adding custom attributes in Webflow" />
 
     This allows users to manage their cookie preferences through your custom UI elements.
 

images/webflow/README.md

@@ -0,0 +1,44 @@
+# Webflow Installation Guide Images
+
+This directory should contain screenshots for the Webflow installation guide. 
+
+## Required Images:
+
+1. **webflow-project-settings.png**
+   - Screenshot of Webflow dashboard showing Project Settings navigation
+   - Should highlight the path: Project Settings > Custom Code
+
+2. **webflow-custom-code-head.png**
+   - Screenshot of the Custom Code section in Webflow
+   - Should show the Head Code textarea where the CookieChimp script should be added
+   - Highlight the Head Code section specifically
+
+3. **webflow-element-id-setting.png**
+   - Screenshot of Webflow Designer showing how to set an element's ID
+   - Should demonstrate setting ID to "cookiechimp-container"
+   - Show the Element Settings panel
+
+4. **webflow-custom-attribute.png**
+   - Screenshot showing how to add custom attributes to elements
+   - Should demonstrate adding data-cc="show-preferencesModal" attribute
+   - Show the Element Settings panel with custom attributes section
+
+5. **webflow-publish-button.png**
+   - Screenshot of the Webflow Designer showing the Publish button
+   - Should highlight the publish workflow
+
+## Image Guidelines:
+
+- Use PNG format for clear screenshots
+- Ensure high resolution (at least 1200px wide)
+- Add red arrows or highlighting to point to relevant UI elements
+- Keep screenshots up-to-date with current Webflow UI
+- Include alt text descriptions when adding to the MDX file
+
+## Adding Images to the Guide:
+
+Once screenshots are available, update the webflow.mdx file to include them:
+
+```mdx
+<img src="/images/webflow/webflow-project-settings.png" alt="Webflow Project Settings navigation" />
+```