Refactor Site Builder Integration and Update Docker Configuration

- Merged the site builder functionality into the main app, enhancing the SiteBuilderWizard component with new steps and improved UI.
- Updated the Docker Compose configuration by removing the separate site builder service and integrating its functionality into the igny8_sites service.
- Enhanced Vite configuration to support code-splitting for builder routes, optimizing loading times.
- Updated package dependencies to include new libraries for state management and form handling.

frontend/src/pages/Sites/Builder/steps/StyleStep.tsx

@@ -0,0 +1,106 @@
+import type { StylePreferences } from "../../../../types/siteBuilder";
+import { Card } from "../../../../components/ui/card";
+
+const labelClass =
+  "text-sm font-semibold text-gray-700 dark:text-white/80 mb-2 inline-block";
+const selectClass =
+  "h-11 w-full rounded-xl border border-gray-200 bg-white px-4 text-sm font-medium text-gray-900 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-white/10 dark:bg-white/[0.03] dark:text-white/90 dark:focus:border-brand-800";
+const textareaClass =
+  "w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm font-medium text-gray-900 placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-white/10 dark:bg-white/[0.03] dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800";
+
+const palettes = [
+  "Minimal monochrome with bright accent",
+  "Rich jewel tones with high contrast",
+  "Soft gradients and glassmorphism",
+  "Playful pastel palette",
+];
+
+const typography = [
+  "Modern sans-serif for headings, serif body text",
+  "Editorial serif across the site",
+  "Geometric sans with tight tracking",
+  "Rounded fonts with friendly tone",
+];
+
+interface Props {
+  style: StylePreferences;
+  onChange: (partial: Partial<StylePreferences>) => void;
+}
+
+export function StyleStep({ style, onChange }: Props) {
+  return (
+    <Card variant="surface" padding="lg">
+      <div className="space-y-6">
+        <div>
+          <p className="text-xs uppercase tracking-wider text-gray-500 dark:text-white/50">
+            Look &amp; feel
+          </p>
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+            Visual direction
+          </h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Capture the brand personality so the preview canvas mirrors the
+            right tone.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+          <div>
+            <label className={labelClass}>Palette direction</label>
+            <select
+              className={selectClass}
+              value={style.palette}
+              onChange={(event) => onChange({ palette: event.target.value })}
+            >
+              {palettes.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className={labelClass}>Typography</label>
+            <select
+              className={selectClass}
+              value={style.typography}
+              onChange={(event) => onChange({ typography: event.target.value })}
+            >
+              {typography.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+          <div>
+            <label className={labelClass}>Brand personality</label>
+            <textarea
+              className={textareaClass}
+              rows={3}
+              value={style.personality}
+              onChange={(event) =>
+                onChange({ personality: event.target.value })
+              }
+            />
+          </div>
+          <div>
+            <label className={labelClass}>Hero imagery direction</label>
+            <textarea
+              className={textareaClass}
+              rows={3}
+              value={style.heroImagery}
+              onChange={(event) =>
+                onChange({ heroImagery: event.target.value })
+              }
+            />
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}
+