Create a clean, modern horizontal process timeline section for a UX case study. The layout should be simple, professional, and figma-ready. Use soft pastel colors, rounded pill bars, minimal icons, and three clear phases: Discovery, Design, Delivery.

Overall Layout
• Full-width section
• Light pastel gradient background
• Subtle dashed circular shapes behind the timeline
• Centered header:
Title: Process
Subtitle: “A structured workflow blending research, clarity, AI-assisted exploration, and focused decision-making.”

Phase Labels

Place these three labels horizontally at the top, evenly spaced, subtle uppercase:
• Discovery
• Design
• Delivery

Timeline Style
• Horizontal 12-column grid
• Each process step rendered as a rounded, colored horizontal pill
• Each pill uses a unique color and unique length
• Each pill starts and ends in the correct phase
• Include a small left icon (simple, monochrome)
• Text is clear and left-aligned
• Soft shadow + slight glass blur

⸻

📌 PROCESS STEPS (with AI workflows integrated)

DISCOVERY PHASE
1. Journey Mapping & UX Analysis
Icon: magnifying glass
Bar length: medium (columns 1 → 4)
Color: pastel mint
2. Problem Framing & Opportunity Definition
Icon: pencil
Bar length: long (columns 1 → 7)
Color: aqua blue
3. AI Research Summaries & Pattern Insights
Icon: sparkle
Bar length: short (columns 2 → 5)
Color: light lime
AI analyzes competitor flows, highlights common friction & trends.

⸻

DESIGN PHASE
4. Flows, System Mapping, Information Architecture
Icon: puzzle
Bar length: long (columns 3 → 10)
Color: soft green
5. AI-Generated Early Wireframes & Layout Concepts
Icon: AI chip
Bar length: medium-long (columns 4 → 9)
Color: lavender
AI produces 5–10 exploratory wireframe variations.
6. Interaction Design & Variant Exploration
Icon: cursor
Bar length: long (columns 5 → 11)
Color: lilac
7. AI-Assisted UI Variants & Refinement Suggestions
Icon: sparkle
Bar length: medium (columns 6 → 10)
Color: pastel blue
AI proposes alternative UI versions, spacing tweaks, clarity fixes.

⸻

DELIVERY PHASE
8. High-Fidelity Screens & Design System Specs
Icon: document
Bar length: medium (columns 7 → 12)
Color: pale blue
9. Prototype Handoff & Continuous AI Iteration
Icon: rocket
Bar length: long (columns 9 → 13)
Color: cream
AI checks consistency, spacing, contrast, and UX flow integrity.
10. AI Regression Validation & Flow Quality Checks
Icon: checkmark
Bar length: short (columns 10 → 12)
Color: teal
AI verifies screen-to-screen logic and flags mismatches.

⸻

🎨 Design Notes
• All bars must have different lengths
• Soft shadows, subtle glow
• Minimal monochrome icons inside white circular holders
• Smooth pastel palette (mint, blue, lavender, cream)
• Figma-friendly vectors, clean spacing

⸻

🧾 Deliverable:

A refined, visually clean, figma-ready horizontal process timeline with clear AI workflows in the Discovery and Design phases.

⸻

README.md

@@ -1,10 +1,13 @@
 ---
-title: Ux Process Flow Visualizer
-emoji: 😻
-colorFrom: blue
+title: UX Process Flow Visualizer ✨
+colorFrom: red
 colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/process-phase.js

@@ -0,0 +1,79 @@
+class ProcessPhase extends HTMLElement {
+    connectedCallback() {
+        const phase = this.getAttribute('phase') || 'Discovery';
+        const color = this.getAttribute('color') || 'blue-100';
+        const start = this.getAttribute('start') || '1';
+        const span = this.getAttribute('span') || '4';
+        const icon = this.getAttribute('icon') || 'search';
+        const title = this.getAttribute('title') || 'Process Step';
+        const desc = this.getAttribute('desc') || '';
+
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .phase-container {
+                    position: relative;
+                    grid-column-start: ${start};
+                    grid-column-end: span ${span};
+                    margin-bottom: 1rem;
+                }
+                .phase-pill {
+                    border-radius: 9999px;
+                    padding: 0.75rem 1.5rem;
+                    display: flex;
+                    align-items: center;
+                    background-color: rgba(219, 234, 254, 0.8);
+                    backdrop-filter: blur(4px);
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+                    transition: all 0.3s ease;
+                }
+                .phase-pill:hover {
+                    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+                }
+                .phase-icon {
+                    flex-shrink: 0;
+                    height: 2.5rem;
+                    width: 2.5rem;
+                    border-radius: 9999px;
+                    background: white;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+                }
+                .phase-content {
+                    margin-left: 1rem;
+                }
+                .phase-title {
+                    color: #1f2937;
+                    font-weight: 500;
+                    font-size: 0.9375rem;
+                    margin: 0;
+                }
+                .phase-desc {
+                    color: #4b5563;
+                    font-size: 0.75rem;
+                    margin-top: 0.25rem;
+                }
+            </style>
+            <div class="phase-container">
+                <div class="phase-pill">
+                    <div class="phase-icon">
+                        <i data-feather="${icon}"></i>
+                    </div>
+                    <div class="phase-content">
+                        <h3 class="phase-title">${title}</h3>
+                        ${desc ? `<p class="phase-desc">${desc}</p>` : ''}
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // Initialize feather icons in shadow DOM
+        if (window.feather) {
+            window.feather.replace({ class: 'phase-icon i' });
+        }
+    }
+}
+
+customElements.define('process-phase', ProcessPhase);

index.html

@@ -1,19 +1,200 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UX Process Timeline</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-gradient-to-br from-blue-50 to-green-50 min-h-screen py-12">
+    <section class="max-w-7xl mx-auto px-4">
+        <!-- Header -->
+        <div class="text-center mb-16">
+            <h1 class="text-4xl font-bold text-gray-800 mb-2">Process</h1>
+            <p class="text-lg text-gray-600 max-w-2xl mx-auto">
+                A structured workflow blending research, clarity, AI-assisted exploration, and focused decision-making.
+            </p>
+        </div>
+
+        <!-- Phase Labels -->
+        <div class="grid grid-cols-12 gap-4 mb-8">
+            <div class="col-span-4 text-center">
+                <span class="uppercase text-sm font-medium text-gray-500 tracking-wider">Discovery</span>
+            </div>
+            <div class="col-span-4 text-center">
+                <span class="uppercase text-sm font-medium text-gray-500 tracking-wider">Design</span>
+            </div>
+            <div class="col-span-4 text-center">
+                <span class="uppercase text-sm font-medium text-gray-500 tracking-wider">Delivery</span>
+            </div>
+        </div>
+
+        <!-- Timeline -->
+        <div class="relative">
+            <!-- Background Grid -->
+            <div class="absolute inset-0 grid grid-cols-12 gap-4 z-0">
+                <template x-for="i in 12">
+                    <div class="h-full border-r border-dashed border-gray-200"></div>
+                </template>
+            </div>
+
+            <!-- Process Steps -->
+            <div class="relative z-10 space-y-6">
+                <!-- 1. Journey Mapping -->
+                <div class="grid grid-cols-12 gap-4">
+                    <div class="col-span-4">
+                        <div class="process-pill bg-green-100">
+                            <div class="process-icon">
+                                <i data-feather="search"></i>
+                            </div>
+                            <div class="process-content">
+                                <h3 class="process-title">Journey Mapping & UX Analysis</h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 2. Problem Framing -->
+                <div class="grid grid-cols-12 gap-4">
+                    <div class="col-span-7">
+                        <div class="process-pill bg-blue-100">
+                            <div class="process-icon">
+                                <i data-feather="edit"></i>
+                            </div>
+                            <div class="process-content">
+                                <h3 class="process-title">Problem Framing & Opportunity Definition</h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 3. AI Research -->
+                <div class="grid grid-cols-12 gap-4">
+                    <div class="col-start-2 col-span-4">
+                        <div class="process-pill bg-lime-100">
+                            <div class="process-icon">
+                                <i data-feather="zap"></i>
+                            </div>
+                            <div class="process-content">
+                                <h3 class="process-title">AI Research Summaries & Pattern Insights</h3>
+                                <p class="process-desc">AI analyzes competitor flows, highlights common friction & trends.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 4. System Mapping -->
+                <div class="grid grid-cols-12 gap-4">
+                    <div class="col-start-3 col-span-8">
+                        <div class="process-pill bg-emerald-100">
+                            <div class="process-icon">
+                                <i data-feather="box"></i>
+                            </div>
+                            <div class="process-content">
+                                <h3 class="process-title">Flows, System Mapping, Information Architecture</h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 5. AI Wireframes -->
+                <div class="grid grid-cols-12 gap-4">
+                    <div class="col-start-4 col-span-6">
+                        <div class="process-pill bg-purple-100">
+                            <div class="process-icon">
+                                <i data-feather="cpu"></i>
+                            </div>
+                            <div class="process-content">
+                                <h3 class="process-title">AI-Generated Early Wireframes & Layout Concepts</h3>
+                                <p class="process-desc">AI produces 5–10 exploratory wireframe variations.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 6. Interaction Design -->
+                <div class="grid grid-cols-12 gap-4">
+                    <div class="col-start-5 col-span-7">
+                        <div class="process-pill bg-violet-100">
+                            <div class="process-icon">
+                                <i data-feather="mouse-pointer"></i>
+                            </div>
+                            <div class="process-content">
+                                <h3 class="process-title">Interaction Design & Variant Exploration</h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 7. AI UI Refinement -->
+                <div class="grid grid-cols-12 gap-4">
+                    <div class="col-start-6 col-span-5">
+                        <div class="process-pill bg-sky-100">
+                            <div class="process-icon">
+                                <i data-feather="zap"></i>
+                            </div>
+                            <div class="process-content">
+                                <h3 class="process-title">AI-Assisted UI Variants & Refinement Suggestions</h3>
+                                <p class="process-desc">AI proposes alternative UI versions, spacing tweaks, clarity fixes.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 8. High-Fidelity -->
+                <div class="grid grid-cols-12 gap-4">
+                    <div class="col-start-7 col-span-6">
+                        <div class="process-pill bg-cyan-100">
+                            <div class="process-icon">
+                                <i data-feather="file-text"></i>
+                            </div>
+                            <div class="process-content">
+                                <h3 class="process-title">High-Fidelity Screens & Design System Specs</h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 9. Prototype Handoff -->
+                <div class="grid grid-cols-12 gap-4">
+                    <div class="col-start-9 col-span-5">
+                        <div class="process-pill bg-amber-50">
+                            <div class="process-icon">
+                                <i data-feather="send"></i>
+                            </div>
+                            <div class="process-content">
+                                <h3 class="process-title">Prototype Handoff & Continuous AI Iteration</h3>
+                                <p class="process-desc">AI checks consistency, spacing, contrast, and UX flow integrity.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 10. AI Validation -->
+                <div class="grid grid-cols-12 gap-4">
+                    <div class="col-start-10 col-span-3">
+                        <div class="process-pill bg-teal-100">
+                            <div class="process-icon">
+                                <i data-feather="check-circle"></i>
+                            </div>
+                            <div class="process-content">
+                                <h3 class="process-title">AI Regression Validation & Flow Quality Checks</h3>
+                                <p class="process-desc">AI verifies screen-to-screen logic and flags mismatches.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,14 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Animation for process pills
+    const pills = document.querySelectorAll('.process-pill');
+    pills.forEach((pill, index) => {
+        pill.style.opacity = '0';
+        pill.style.transform = 'translateY(20px)';
+        
+        setTimeout(() => {
+            pill.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+            pill.style.opacity = '1';
+            pill.style.transform = 'translateY(0)';
+        }, 150 * index);
+    });
+});

style.css

@@ -1,28 +1,52 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+.process-pill {
+    @apply rounded-full py-3 px-6 flex items-center;
+    @apply shadow-sm backdrop-blur-sm bg-opacity-80;
+    @apply transition-all duration-300 hover:shadow-md;
+    position: relative;
+    overflow: hidden;
+}
+
+.process-pill::before {
+    content: '';
+    @apply absolute inset-0;
+    background: rgba(255, 255, 255, 0.7);
+    z-index: -1;
+    border-radius: 9999px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.process-icon {
+    @apply flex-shrink-0 h-10 w-10 rounded-full bg-white flex items-center justify-center;
+    @apply shadow-sm text-gray-700;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.process-content {
+    @apply ml-4;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.process-title {
+    @apply text-gray-800 font-medium;
+    font-size: 15px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.process-desc {
+    @apply text-gray-600 text-sm mt-1;
 }
+
+body {
+    background-image: 
+        radial-gradient(circle at 10% 20%, rgba(200, 253, 255, 0.2) 0%, transparent 20%),
+        radial-gradient(circle at 90% 80%, rgba(200, 240, 210, 0.2) 0%, transparent 20%);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .process-pill {
+        @apply py-2 px-4;
+    }
+    .process-icon {
+        @apply h-8 w-8;
+    }
+    .process-title {
+        font-size: 14px;
+    }
+}