npm - snowbase-templates-installer - Versions diffs - 1.0.1 - Mend

snowbase-templates-installer 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (181) hide show

package/landing-pages/open-engineer-template/src/components/sections/workflow-tabs.tsx ADDED Viewed

@@ -0,0 +1,792 @@
+"use client";
+import React, { useState } from "react";
+import Image from "next/image";
+import {
+  TrendingUp,
+  Users,
+  Calendar,
+  RefreshCcw,
+  FileText,
+  PenTool,
+  MoreVertical,
+  Play,
+  ArrowRight,
+  Database,
+  Building2,
+  Linkedin
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+const tabs = [
+  { id: "lead-qualifier", label: "Lead Qualifier", icon: TrendingUp },
+  { id: "meeting-prep", label: "Meeting Prep", icon: Users },
+  { id: "follow-ups", label: "Follow-ups", icon: Calendar },
+  { id: "data-sync", label: "Data Sync", icon: RefreshCcw },
+  { id: "reporting", label: "Reporting", icon: FileText },
+  { id: "content-drafting", label: "Content Drafting", icon: PenTool },
+];
+export default function WorkflowTabs() {
+  const [activeTab, setActiveTab] = useState("lead-qualifier");
+  return (
+    <section className="w-full bg-background">
+      <div className="border-b border-border px-4 sm:px-6 lg:px-8">
+        <div className="mx-auto max-w-7xl border-x border-border">
+          {/* Tabs Navigation */}
+          <div className="flex w-full overflow-x-auto no-scrollbar border-b border-border">
+            {tabs.map((tab) => {
+              const Icon = tab.icon;
+              const isActive = activeTab === tab.id;
+              return (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  className={cn(
+                    "flex flex-1 items-center justify-center gap-2 px-4 py-5 text-sm font-medium transition-all duration-200 min-w-[160px] border-r border-border last:border-r-0 relative group",
+                    isActive
+                      ? "bg-muted text-foreground"
+                      : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+                  )}
+                >
+                  <Icon className={cn("size-4", isActive ? "text-foreground" : "text-muted-foreground")} />
+                  {tab.label}
+                  {isActive && (
+                    <div className="absolute top-0 left-0 right-0 h-[2px] bg-foreground" />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+          {/* Workflow Content Area */}
+          <div className="relative min-h-[600px] w-full p-8 md:p-16 overflow-hidden dot-grid">
+            <div className="absolute inset-0 bg-gradient-to-b from-transparent to-background/50 pointer-events-none" />
+            <div className="relative mx-auto max-w-5xl">
+              {/* Lead Qualifier Visual Diagram */}
+              {activeTab === "lead-qualifier" && (
+                <div className="relative flex flex-col items-center justify-between gap-12 md:flex-row md:items-start">
+                  {/* Step 1: Input */}
+                  <div className="z-10 w-full max-w-[320px] animate-in fade-in slide-in-from-left-4 duration-700">
+                    <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-100 px-2 py-1 text-[10px] font-bold text-zinc-600 uppercase tracking-wider">
+                      <PenTool className="size-3" /> Input
+                    </div>
+                    <div className="rounded-xl border border-border bg-white p-5 shadow-sm">
+                      <div className="flex items-start justify-between">
+                        <div className="flex items-center gap-2 mb-4">
+                          <div className="p-1 rounded bg-muted">
+                            <RefreshCcw className="size-4" />
+                          </div>
+                          <h4 className="text-sm font-semibold">New Lead Inquiry</h4>
+                        </div>
+                        <MoreVertical className="size-4 text-muted-foreground" />
+                      </div>
+                      <p className="text-xs text-muted-foreground mb-4">
+                        Automatically qualify new inbound leads from email or forms.
+                      </p>
+                      <div className="space-y-2">
+                        <div className="rounded-lg bg-zinc-50 p-3">
+                          <span className="text-[10px] font-medium text-zinc-600 bg-zinc-200 px-1.5 py-0.5 rounded">Fetching detail...</span>
+                          <div className="mt-2 space-y-2">
+                              <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                                <Building2 className="size-3 text-zinc-600" />
+                                Company details
+                              </div>
+                              <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                                <Linkedin className="size-3 text-zinc-600" />
+                                LinkedIn profiles
+                              </div>
+                          </div>
+                        </div>
+                        <div className="flex items-center justify-end text-[10px] text-muted-foreground italic">
+                          <span>🕒 0.3 sec</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  {/* Connecting Arrows (Desktop) */}
+                  <svg className="absolute left-[320px] top-[140px] hidden h-[300px] w-[calc(100%-640px)] md:block" fill="none">
+                    <path
+                      d="M 0 0 L 100 0 C 120 0 120 80 140 80 H 300"
+                      stroke="#E4E4E7"
+                      strokeWidth="2"
+                      strokeDasharray="4 4"
+                    />
+                    <path
+                      d="M 300 80 H 400 C 420 80 420 0 440 0 H 600"
+                      stroke="#E4E4E7"
+                      strokeWidth="2"
+                      strokeDasharray="4 4"
+                    />
+                  </svg>
+                  {/* Step 2: Action - Positioned middle bottom */}
+                  <div className="z-10 mt-24 w-full max-w-[320px] self-center animate-in fade-in zoom-in-95 duration-1000">
+                    <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-200 px-2 py-1 text-[10px] font-bold text-zinc-700 uppercase tracking-wider">
+                      <Play className="size-3 fill-current" /> Action
+                    </div>
+                    <div className="rounded-xl border border-border bg-white p-5 shadow-sm">
+                      <div className="flex items-start justify-between mb-4">
+                        <div className="flex items-center gap-2">
+                          <TrendingUp className="size-4 text-primary" />
+                          <h4 className="text-sm font-semibold">Scoring & Categorization</h4>
+                        </div>
+                        <MoreVertical className="size-4 text-muted-foreground" />
+                      </div>
+                      <p className="text-xs text-muted-foreground mb-4">
+                        Using AI logic, the lead is scored based on size, industry, and engagement.
+                      </p>
+                      <div className="flex items-center justify-between">
+                         <div className="flex items-center gap-2 text-[11px]">
+                           <span className="text-muted-foreground">🕒 1.8 sec</span>
+                         </div>
+                         <div className="flex items-center gap-1.5 rounded-full bg-zinc-100 px-2 py-1 text-[10px] font-medium text-primary border border-primary/20">
+                            GPT-4-Turbo
+                         </div>
+                      </div>
+                    </div>
+                  </div>
+                  {/* Step 3: Output */}
+                  <div className="z-10 w-full max-w-[320px] animate-in fade-in slide-in-from-right-4 duration-700">
+                    <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-900 px-2 py-1 text-[10px] font-bold text-white uppercase tracking-wider">
+                      <Database className="size-3" /> Output
+                    </div>
+                    <div className="rounded-xl border border-border bg-white p-5 shadow-sm">
+                      <div className="flex items-start justify-between">
+                          <div className="flex items-center gap-2 mb-4">
+                            <FileText className="size-4 text-zinc-600" />
+                            <h4 className="text-sm font-semibold">Response</h4>
+                          </div>
+                        <MoreVertical className="size-4 text-muted-foreground" />
+                      </div>
+                      <p className="text-xs text-muted-foreground mb-4">
+                        The agent have prepared a tailored response.
+                      </p>
+                      <div className="rounded-lg bg-zinc-50 p-4">
+                        <span className="text-[10px] font-medium text-[#71717A] bg-white border border-border px-1.5 py-0.5 rounded shadow-sm uppercase tracking-tighter">Answer</span>
+                        <p className="mt-3 text-[11px] leading-relaxed text-muted-foreground">
+                          Lead status, notes, and follow-up are logged in the CRM, ready for the sales team.
+                        </p>
+                        <div className="mt-4 flex items-center gap-2 text-[11px] text-zinc-900 font-medium border-t border-border/50 pt-3">
+                          <Database className="size-3 text-zinc-500" />
+                          File updated
+                        </div>
+                      </div>
+                      <div className="mt-3 flex items-center justify-end text-[10px] text-muted-foreground italic">
+                        <span>🕒 0.3 sec</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+{/* Meeting Prep Visual Diagram */}
+                {activeTab === "meeting-prep" && (
+                  <div className="relative flex flex-col items-center justify-center gap-8 animate-in fade-in duration-500">
+                    {/* Top: Input Card */}
+                    <div className="z-10 w-full max-w-[340px] animate-in fade-in slide-in-from-top-4 duration-700">
+                      <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-200 px-2 py-1 text-[10px] font-bold text-zinc-700 uppercase tracking-wider">
+                        <PenTool className="size-3" /> Input
+                      </div>
+                      <div className="rounded-xl border border-border bg-white p-5 shadow-sm">
+                        <div className="flex items-start justify-between">
+                          <div className="flex items-center gap-2 mb-2">
+                            <div className="p-1.5 rounded bg-muted">
+                              <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>
+                            </div>
+                            <h4 className="text-sm font-semibold">Upcoming Meeting</h4>
+                          </div>
+                          <span className="text-[11px] text-muted-foreground">1:32 AM</span>
+                        </div>
+                        <p className="text-xs text-muted-foreground">
+                          Four hours before a scheduled event, the agent triggers prep mode.
+                        </p>
+                      </div>
+                    </div>
+                    {/* Center Row: Action Cards with Connecting Lines */}
+                    <div className="relative flex w-full items-start justify-center gap-6 md:gap-12 lg:gap-24">
+                      {/* SVG Connector Lines */}
+                      <svg className="absolute inset-0 h-full w-full pointer-events-none hidden md:block" preserveAspectRatio="none">
+                        <line x1="50%" y1="0" x2="25%" y2="50%" stroke="#E4E4E7" strokeWidth="1.5" strokeDasharray="4 4" />
+                        <line x1="50%" y1="0" x2="75%" y2="50%" stroke="#E4E4E7" strokeWidth="1.5" strokeDasharray="4 4" />
+                        <line x1="25%" y1="50%" x2="50%" y2="100%" stroke="#E4E4E7" strokeWidth="1.5" strokeDasharray="4 4" />
+                        <line x1="75%" y1="50%" x2="50%" y2="100%" stroke="#E4E4E7" strokeWidth="1.5" strokeDasharray="4 4" />
+                      </svg>
+                      {/* Left Action: Context Gathering */}
+                      <div className="z-10 w-full max-w-[300px] animate-in fade-in slide-in-from-left-4 duration-700 delay-150">
+                        <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-200 px-2 py-1 text-[10px] font-bold text-zinc-700 uppercase tracking-wider">
+                          <Play className="size-3 fill-current" /> Action
+                        </div>
+                        <div className="rounded-xl border border-border bg-white p-5 shadow-sm">
+                          <div className="flex items-start justify-between mb-3">
+                            <div className="flex items-center gap-2">
+                              <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+                              <h4 className="text-sm font-semibold">Context Gathering</h4>
+                            </div>
+                            <MoreVertical className="size-4 text-muted-foreground" />
+                          </div>
+                          <div className="rounded-lg bg-zinc-100 p-3 space-y-2.5">
+                            <span className="text-[10px] font-medium text-muted-foreground bg-white border border-border px-1.5 py-0.5 rounded shadow-sm">Fetching detail...</span>
+                              <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                                <svg className="size-3.5 text-zinc-600" viewBox="0 0 24 24" fill="currentColor"><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"/></svg>
+                                Collect recent emails
+                              </div>
+                              <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                                <svg className="size-3.5 text-zinc-600" viewBox="0 0 24 24" fill="currentColor"><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/></svg>
+                                Check participant messages
+                              </div>
+                              <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                                <svg className="size-3.5 text-zinc-600" viewBox="0 0 24 24" fill="currentColor"><path d="M19.5 3.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5zM19 19H5V5h14v14z"/><path d="M9 12h6v2H9v-2zm0-4h6v2H9V8zm0 8h4v2H9v-2z"/></svg>
+                                Past meeting notes
+                              </div>
+                          </div>
+                          <div className="mt-3 flex items-center justify-between">
+                            <span className="text-[10px] text-muted-foreground">⏱ 4 sec</span>
+                            <div className="flex items-center gap-1.5 rounded-full bg-zinc-200 border border-zinc-300 px-2 py-1 text-[10px] font-medium text-zinc-700">
+                              <svg className="size-3" viewBox="0 0 24 24" fill="currentColor"><path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5153-4.9066 6.0462 6.0462 0 0 0-6.5145-2.3254 6.1291 6.1291 0 0 0-4.6544-1.8925 6.0515 6.0515 0 0 0-5.8159 4.3184 6.1055 6.1055 0 0 0-4.1108 2.9836 6.0459 6.0459 0 0 0 .7428 7.121 5.9847 5.9847 0 0 0 .5153 4.9066 6.0462 6.0462 0 0 0 6.5145 2.3254 6.13 6.13 0 0 0 4.6544 1.8925 6.0515 6.0515 0 0 0 5.8159-4.3184 6.0994 6.0994 0 0 0 4.1108-2.9836 6.0461 6.0461 0 0 0-.7428-7.121z"/></svg>
+                              GPT-4-1 Mini
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      {/* Right Action: Brief Generation */}
+                      <div className="z-10 w-full max-w-[300px] animate-in fade-in slide-in-from-right-4 duration-700 delay-150">
+                        <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-200 px-2 py-1 text-[10px] font-bold text-zinc-700 uppercase tracking-wider">
+                          <Play className="size-3 fill-current" /> Action
+                        </div>
+                        <div className="rounded-xl border border-border bg-white p-5 shadow-sm">
+                          <div className="flex items-start justify-between mb-3">
+                            <div className="flex items-center gap-2">
+                              <FileText className="size-4" />
+                              <h4 className="text-sm font-semibold">Brief Generation</h4>
+                            </div>
+                            <MoreVertical className="size-4 text-muted-foreground" />
+                          </div>
+                          <div className="rounded-lg bg-zinc-100 p-3 space-y-2.5">
+                            <span className="text-[10px] font-medium text-muted-foreground bg-white border border-border px-1.5 py-0.5 rounded shadow-sm">Generating</span>
+                            <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                              <svg className="size-3 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
+                              Summaries key points
+                            </div>
+                            <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                              <svg className="size-3 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
+                              Open tasks
+                            </div>
+                            <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                              <svg className="size-3 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
+                              Recommended discussion topics
+                            </div>
+                          </div>
+                          <div className="mt-3 flex items-center justify-between">
+                            <span className="text-[10px] text-muted-foreground">⏱ 1.3 sec</span>
+                            <div className="flex items-center gap-1.5 rounded-full bg-zinc-200 border border-zinc-300 px-2 py-1 text-[10px] font-medium text-zinc-700">
+                              <svg className="size-3" viewBox="0 0 24 24" fill="currentColor"><path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5153-4.9066 6.0462 6.0462 0 0 0-6.5145-2.3254 6.1291 6.1291 0 0 0-4.6544-1.8925 6.0515 6.0515 0 0 0-5.8159 4.3184 6.1055 6.1055 0 0 0-4.1108 2.9836 6.0459 6.0459 0 0 0 .7428 7.121 5.9847 5.9847 0 0 0 .5153 4.9066 6.0462 6.0462 0 0 0 6.5145 2.3254 6.13 6.13 0 0 0 4.6544 1.8925 6.0515 6.0515 0 0 0 5.8159-4.3184 6.0994 6.0994 0 0 0 4.1108-2.9836 6.0461 6.0461 0 0 0-.7428-7.121z"/></svg>
+                              GPT-4-1 Mini
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    {/* Bottom: Output Card */}
+                    <div className="z-10 w-full max-w-[360px] animate-in fade-in slide-in-from-bottom-4 duration-700 delay-300">
+                      <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-900 px-2 py-1 text-[10px] font-bold text-white uppercase tracking-wider">
+                        <svg className="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="20 6 9 17 4 12"/></svg> Output
+                      </div>
+                      <div className="rounded-xl border border-border bg-white p-5 shadow-sm">
+                        <div className="flex items-start justify-between mb-3">
+                          <div className="flex items-center gap-2">
+                            <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><line x1="16" x2="8" y1="13" y2="13"/><line x1="16" x2="8" y1="17" y2="17"/><line x1="10" x2="8" y1="9" y2="9"/></svg>
+                            <h4 className="text-sm font-semibold">Meeting Brief Document</h4>
+                          </div>
+                          <MoreVertical className="size-4 text-muted-foreground" />
+                        </div>
+                        <p className="text-xs text-muted-foreground mb-4">
+                          A polished meeting brief sended to the organizer.
+                        </p>
+                          <div className="rounded-lg bg-zinc-50 p-3 flex items-center gap-2">
+                            <svg className="size-4 text-zinc-600" viewBox="0 0 24 24" fill="currentColor"><path d="M19 4h-1V3c0-.6-.4-1-1-1s-1 .4-1 1v1H8V3c0-.6-.4-1-1-1s-1 .4-1 1v1H5C3.3 4 2 5.3 2 7v12c0 1.7 1.3 3 3 3h14c1.7 0 3-1.3 3-3V7c0-1.7-1.3-3-3-3zm1 15c0 .6-.4 1-1 1H5c-.6 0-1-.4-1-1v-9h16v9zm0-11H4V7c0-.6.4-1 1-1h1v1c0 .6.4 1 1 1s1-.4 1-1V6h8v1c0 .6.4 1 1 1s1-.4 1-1V6h1c.6 0 1 .4 1 1v1z"/></svg>
+                            <span className="text-[11px] text-muted-foreground">Attached to the calendar</span>
+                          </div>
+                        <div className="mt-3 flex items-center justify-end">
+                          <span className="text-[10px] text-muted-foreground">⏱ 0.8 sec</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+{/* Follow-ups Workflow */}
+                {activeTab === "follow-ups" && (
+                  <div className="relative flex flex-col items-center justify-between gap-12 md:flex-row md:items-start">
+                    {/* Input: Missed Response Detection */}
+                    <div className="z-10 w-full max-w-[320px] animate-in fade-in slide-in-from-left-4 duration-700">
+                      <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-100 px-2 py-1 text-[10px] font-bold text-zinc-600 uppercase tracking-wider">
+                        <PenTool className="size-3" /> Input
+                      </div>
+                      <div className="rounded-xl border border-border bg-white p-5 shadow-sm">
+                        <div className="flex items-start justify-between">
+                          <div className="flex items-center gap-2 mb-4">
+                            <div className="p-1 rounded bg-muted">
+                              <Calendar className="size-4" />
+                            </div>
+                            <h4 className="text-sm font-semibold">Missed Response</h4>
+                          </div>
+                          <MoreVertical className="size-4 text-muted-foreground" />
+                        </div>
+                        <p className="text-xs text-muted-foreground mb-4">
+                          Detects emails or messages that haven&apos;t received a reply within 48 hours.
+                        </p>
+                        <div className="rounded-lg bg-zinc-50 p-3">
+                          <span className="text-[10px] font-medium text-zinc-600 bg-zinc-200 px-1.5 py-0.5 rounded">Scanning inbox...</span>
+                            <div className="mt-2 space-y-2">
+                              <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                                <svg className="size-3 text-zinc-600" viewBox="0 0 24 24" fill="currentColor"><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"/></svg>
+                                12 unanswered emails
+                              </div>
+                              <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                                <svg className="size-3.5 text-zinc-600" viewBox="0 0 24 24" fill="currentColor"><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52z"/><path d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834z"/></svg>
+                                5 pending Slack DMs
+                              </div>
+                            </div>
+                        </div>
+                        <div className="mt-2 flex items-center justify-end text-[10px] text-muted-foreground">
+                          <span>🕒 1.2 sec</span>
+                        </div>
+                      </div>
+                    </div>
+                    {/* Action: Draft Follow-up */}
+                    <div className="z-10 mt-24 w-full max-w-[320px] self-center animate-in fade-in zoom-in-95 duration-1000">
+                      <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-200 px-2 py-1 text-[10px] font-bold text-zinc-700 uppercase tracking-wider">
+                        <Play className="size-3 fill-current" /> Action
+                      </div>
+                      <div className="rounded-xl border border-border bg-white p-5 shadow-sm">
+                        <div className="flex items-start justify-between mb-4">
+                          <div className="flex items-center gap-2">
+                            <PenTool className="size-4 text-primary" />
+                            <h4 className="text-sm font-semibold">Draft Follow-up Messages</h4>
+                          </div>
+                          <MoreVertical className="size-4 text-muted-foreground" />
+                        </div>
+                        <p className="text-xs text-muted-foreground mb-4">
+                          AI drafts personalized follow-up messages based on conversation context and urgency.
+                        </p>
+                        <div className="flex items-center justify-between">
+                          <span className="text-[10px] text-muted-foreground">🕒 2.1 sec</span>
+                          <div className="flex items-center gap-1.5 rounded-full bg-zinc-100 px-2 py-1 text-[10px] font-medium text-primary border border-primary/20">
+                            GPT-4-Turbo
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    {/* Output: Scheduled Messages */}
+                    <div className="z-10 w-full max-w-[320px] animate-in fade-in slide-in-from-right-4 duration-700">
+                      <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-900 px-2 py-1 text-[10px] font-bold text-white uppercase tracking-wider">
+                        <Database className="size-3" /> Output
+                      </div>
+                      <div className="rounded-xl border border-border bg-white p-5 shadow-sm">
+                        <div className="flex items-start justify-between">
+                          <div className="flex items-center gap-2 mb-4">
+                            <svg className="size-4 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+                            <h4 className="text-sm font-semibold">Queued for Review</h4>
+                          </div>
+                          <MoreVertical className="size-4 text-muted-foreground" />
+                        </div>
+                        <div className="rounded-lg bg-zinc-50 p-4 space-y-3">
+                          <div className="flex items-center justify-between text-[11px]">
+                            <span className="text-muted-foreground">17 drafts ready</span>
+                            <span className="text-zinc-600 font-medium">Pending approval</span>
+                          </div>
+                          <div className="flex items-center gap-2 text-[11px] text-zinc-900 font-medium border-t border-border/50 pt-3">
+                            <svg className="size-3 text-zinc-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>
+                            Scheduled for 9:00 AM
+                          </div>
+                        </div>
+                        <div className="mt-3 flex items-center justify-end text-[10px] text-muted-foreground">
+                          <span>🕒 0.5 sec</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+                {/* Data Sync Workflow */}
+                {activeTab === "data-sync" && (
+                  <div className="relative flex flex-col items-center justify-center gap-8 animate-in fade-in duration-500">
+                    {/* Top Row: Multiple Input Sources */}
+                    <div className="flex w-full justify-center gap-6 flex-wrap">
+                        {/* CRM Source */}
+                        <div className="z-10 w-full max-w-[200px] animate-in fade-in slide-in-from-top-4 duration-700">
+                          <div className="mb-2 inline-flex items-center gap-1 rounded-md bg-zinc-100 px-2 py-1 text-[9px] font-bold text-zinc-600 uppercase tracking-wider">
+                            Source
+                          </div>
+                          <div className="rounded-xl border border-border bg-white p-4 shadow-sm text-center">
+                            <div className="mx-auto mb-2 flex size-10 items-center justify-center rounded-lg bg-zinc-50">
+                              <svg className="size-5 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+                            </div>
+                            <h4 className="text-xs font-semibold">Salesforce CRM</h4>
+                            <p className="text-[10px] text-muted-foreground mt-1">2,847 contacts</p>
+                          </div>
+                        </div>
+                        {/* Spreadsheet Source */}
+                        <div className="z-10 w-full max-w-[200px] animate-in fade-in slide-in-from-top-4 duration-700 delay-100">
+                          <div className="mb-2 inline-flex items-center gap-1 rounded-md bg-zinc-100 px-2 py-1 text-[9px] font-bold text-zinc-600 uppercase tracking-wider">
+                            Source
+                          </div>
+                          <div className="rounded-xl border border-border bg-white p-4 shadow-sm text-center">
+                            <div className="mx-auto mb-2 flex size-10 items-center justify-center rounded-lg bg-zinc-50">
+                              <svg className="size-5 text-zinc-600" viewBox="0 0 24 24" fill="currentColor"><path d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
+                            </div>
+                            <h4 className="text-xs font-semibold">Google Sheets</h4>
+                            <p className="text-[10px] text-muted-foreground mt-1">15 active sheets</p>
+                          </div>
+                        </div>
+                        {/* Database Source */}
+                        <div className="z-10 w-full max-w-[200px] animate-in fade-in slide-in-from-top-4 duration-700 delay-200">
+                          <div className="mb-2 inline-flex items-center gap-1 rounded-md bg-zinc-100 px-2 py-1 text-[9px] font-bold text-zinc-600 uppercase tracking-wider">
+                            Source
+                          </div>
+                          <div className="rounded-xl border border-border bg-white p-4 shadow-sm text-center">
+                            <div className="mx-auto mb-2 flex size-10 items-center justify-center rounded-lg bg-zinc-50">
+                              <Database className="size-5 text-zinc-600" />
+                            </div>
+                            <h4 className="text-xs font-semibold">PostgreSQL</h4>
+                            <p className="text-[10px] text-muted-foreground mt-1">Main database</p>
+                          </div>
+                        </div>
+                    </div>
+                    {/* Center: Sync Engine */}
+                    <div className="z-10 w-full max-w-[380px] animate-in fade-in zoom-in-95 duration-1000 delay-300">
+                      <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-200 px-2 py-1 text-[10px] font-bold text-zinc-700 uppercase tracking-wider">
+                        <Play className="size-3 fill-current" /> Sync Engine
+                      </div>
+                      <div className="rounded-xl border border-border bg-white p-6 shadow-sm">
+                        <div className="flex items-center gap-3 mb-4">
+                          <div className="flex size-12 items-center justify-center rounded-xl bg-primary/10">
+                            <RefreshCcw className="size-6 text-primary animate-spin" style={{ animationDuration: '3s' }} />
+                          </div>
+                          <div>
+                            <h4 className="text-sm font-semibold">Real-time Data Sync</h4>
+                            <p className="text-xs text-muted-foreground">Bi-directional sync across all platforms</p>
+                          </div>
+                        </div>
+                        <div className="space-y-2">
+                              <div className="flex items-center justify-between rounded-lg bg-zinc-100 p-2">
+                                <span className="text-[11px] text-muted-foreground">Conflict resolution</span>
+                                <span className="text-[10px] font-medium text-zinc-900">Auto-merge</span>
+                              </div>
+                          <div className="flex items-center justify-between rounded-lg bg-zinc-100 p-2">
+                            <span className="text-[11px] text-muted-foreground">Last sync</span>
+                            <span className="text-[10px] font-medium text-zinc-900">2 min ago</span>
+                          </div>
+                          <div className="flex items-center justify-between rounded-lg bg-zinc-100 p-2">
+                            <span className="text-[11px] text-muted-foreground">Records updated</span>
+                            <span className="text-[10px] font-medium text-zinc-900">1,247</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    {/* Bottom: Output Status */}
+                    <div className="z-10 w-full max-w-[400px] animate-in fade-in slide-in-from-bottom-4 duration-700 delay-500">
+                      <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-900 px-2 py-1 text-[10px] font-bold text-white uppercase tracking-wider">
+                        <svg className="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="20 6 9 17 4 12"/></svg> Sync Complete
+                      </div>
+                      <div className="rounded-xl border border-border bg-white p-5 shadow-sm">
+                        <div className="grid grid-cols-3 gap-4 text-center">
+                          <div>
+                            <div className="text-2xl font-semibold text-zinc-900">99.8%</div>
+                            <div className="text-[10px] text-muted-foreground">Accuracy</div>
+                          </div>
+                          <div>
+                            <div className="text-2xl font-semibold text-zinc-900">0</div>
+                            <div className="text-[10px] text-muted-foreground">Conflicts</div>
+                          </div>
+                          <div>
+                            <div className="text-2xl font-semibold text-zinc-900">3.2s</div>
+                            <div className="text-[10px] text-muted-foreground">Avg. sync time</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+                {/* Reporting Workflow */}
+                {activeTab === "reporting" && (
+                  <div className="relative flex flex-col items-center justify-between gap-12 md:flex-row md:items-start">
+                    {/* Input: Data Sources */}
+                    <div className="z-10 w-full max-w-[320px] animate-in fade-in slide-in-from-left-4 duration-700">
+                      <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-100 px-2 py-1 text-[10px] font-bold text-zinc-600 uppercase tracking-wider">
+                        <PenTool className="size-3" /> Input
+                      </div>
+                      <div className="rounded-xl border border-border bg-white p-5 shadow-sm">
+                        <div className="flex items-start justify-between">
+                          <div className="flex items-center gap-2 mb-4">
+                            <div className="p-1 rounded bg-muted">
+                              <Database className="size-4" />
+                            </div>
+                            <h4 className="text-sm font-semibold">Data Collection</h4>
+                          </div>
+                          <MoreVertical className="size-4 text-muted-foreground" />
+                        </div>
+                        <p className="text-xs text-muted-foreground mb-4">
+                          Aggregates metrics from multiple sources for comprehensive reporting.
+                        </p>
+                          <div className="rounded-lg bg-zinc-50 p-3 space-y-2">
+                            <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                              <svg className="size-3 text-zinc-600" viewBox="0 0 24 24" fill="currentColor"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
+                              Google Analytics
+                            </div>
+                            <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                              <svg className="size-3 text-zinc-600" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"/></svg>
+                              Stripe Revenue
+                            </div>
+                            <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                              <svg className="size-3 text-zinc-600" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>
+                              HubSpot CRM
+                            </div>
+                          </div>
+                        <div className="mt-2 flex items-center justify-end text-[10px] text-muted-foreground">
+                          <span>🕒 2.4 sec</span>
+                        </div>
+                      </div>
+                    </div>
+                    {/* Action: Report Generation */}
+                    <div className="z-10 mt-24 w-full max-w-[320px] self-center animate-in fade-in zoom-in-95 duration-1000">
+                      <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-200 px-2 py-1 text-[10px] font-bold text-zinc-700 uppercase tracking-wider">
+                        <Play className="size-3 fill-current" /> Action
+                      </div>
+                      <div className="rounded-xl border border-border bg-white p-5 shadow-sm">
+                        <div className="flex items-start justify-between mb-4">
+                          <div className="flex items-center gap-2">
+                            <FileText className="size-4 text-primary" />
+                            <h4 className="text-sm font-semibold">AI Report Generation</h4>
+                          </div>
+                          <MoreVertical className="size-4 text-muted-foreground" />
+                        </div>
+                        <p className="text-xs text-muted-foreground mb-4">
+                          Analyzes trends, generates insights, and creates visual dashboards automatically.
+                        </p>
+                          <div className="rounded-lg bg-zinc-100 p-3 space-y-2">
+                            <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                              <svg className="size-3 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
+                              Executive summary
+                            </div>
+                            <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                              <svg className="size-3 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
+                              KPI visualizations
+                            </div>
+                            <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                              <svg className="size-3 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
+                              Trend analysis
+                            </div>
+                          </div>
+                        <div className="mt-3 flex items-center justify-between">
+                          <span className="text-[10px] text-muted-foreground">🕒 4.7 sec</span>
+                          <div className="flex items-center gap-1.5 rounded-full bg-zinc-100 px-2 py-1 text-[10px] font-medium text-primary border border-primary/20">
+                            GPT-4-Turbo
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    {/* Output: Generated Report */}
+                    <div className="z-10 w-full max-w-[320px] animate-in fade-in slide-in-from-right-4 duration-700">
+                      <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-900 px-2 py-1 text-[10px] font-bold text-white uppercase tracking-wider">
+                        <Database className="size-3" /> Output
+                      </div>
+                      <div className="rounded-xl border border-border bg-white p-5 shadow-sm">
+                        <div className="flex items-start justify-between">
+                          <div className="flex items-center gap-2 mb-4">
+                            <svg className="size-4 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
+                            <h4 className="text-sm font-semibold">Weekly Report</h4>
+                          </div>
+                          <MoreVertical className="size-4 text-muted-foreground" />
+                        </div>
+                        <div className="rounded-lg bg-zinc-50 p-4">
+                          <div className="flex items-center justify-between mb-3">
+                            <span className="text-[10px] font-medium text-zinc-700">Q4 Performance</span>
+                            <span className="text-[10px] text-zinc-600 font-semibold">+23% ↑</span>
+                          </div>
+                          <div className="h-16 flex items-end gap-1">
+                            {[40, 55, 45, 70, 60, 85, 75].map((h, i) => (
+                              <div key={i} className="flex-1 bg-primary/20 rounded-t" style={{ height: `${h}%` }} />
+                            ))}
+                          </div>
+                          <div className="mt-3 flex items-center gap-2 text-[11px] text-zinc-900 font-medium border-t border-border/50 pt-3">
+                            <svg className="size-3 text-zinc-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4v16a2 2 0 0 0 2 2h12"/><path d="M4 4h16"/></svg>
+                            Sent to stakeholders
+                          </div>
+                        </div>
+                        <div className="mt-3 flex items-center justify-end text-[10px] text-muted-foreground">
+                          <span>🕒 0.8 sec</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+                {/* Content Drafting Workflow */}
+                {activeTab === "content-drafting" && (
+                  <div className="relative flex flex-col items-center justify-center gap-8 animate-in fade-in duration-500">
+                    {/* Top: Input Brief */}
+                    <div className="z-10 w-full max-w-[400px] animate-in fade-in slide-in-from-top-4 duration-700">
+                      <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-100 px-2 py-1 text-[10px] font-bold text-zinc-600 uppercase tracking-wider">
+                        <PenTool className="size-3" /> Input
+                      </div>
+                      <div className="rounded-xl border border-border bg-white p-5 shadow-sm">
+                        <div className="flex items-start justify-between mb-4">
+                          <div className="flex items-center gap-2">
+                            <div className="p-1.5 rounded bg-muted">
+                              <FileText className="size-4" />
+                            </div>
+                            <h4 className="text-sm font-semibold">Content Brief</h4>
+                          </div>
+                          <span className="text-[10px] text-muted-foreground bg-muted px-2 py-0.5 rounded">New request</span>
+                        </div>
+                        <div className="rounded-lg bg-zinc-100 p-3">
+                          <p className="text-xs text-muted-foreground italic">&quot;Write a blog post about AI productivity tools for remote teams, targeting startup founders...&quot;</p>
+                        </div>
+                        <div className="mt-3 flex flex-wrap gap-2">
+                          <span className="text-[10px] bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full">Blog Post</span>
+                          <span className="text-[10px] bg-purple-50 text-purple-700 px-2 py-0.5 rounded-full">1500 words</span>
+                          <span className="text-[10px] bg-green-50 text-green-700 px-2 py-0.5 rounded-full">SEO optimized</span>
+                        </div>
+                      </div>
+                    </div>
+                    {/* Center Row: Action Cards */}
+                    <div className="relative flex w-full items-start justify-center gap-6 md:gap-12">
+                      {/* Research Action */}
+                      <div className="z-10 w-full max-w-[280px] animate-in fade-in slide-in-from-left-4 duration-700 delay-150">
+                        <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-200 px-2 py-1 text-[10px] font-bold text-zinc-700 uppercase tracking-wider">
+                          <Play className="size-3 fill-current" /> Research
+                        </div>
+                        <div className="rounded-xl border border-border bg-white p-4 shadow-sm">
+                          <div className="flex items-center gap-2 mb-3">
+                            <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+                            <h4 className="text-sm font-semibold">Topic Research</h4>
+                          </div>
+                          <div className="space-y-2 text-[11px] text-muted-foreground">
+                            <div className="flex items-center gap-2">
+                              <svg className="size-3 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
+                              Competitor analysis
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <svg className="size-3 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
+                              Keyword research
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <svg className="size-3 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
+                              Trend analysis
+                            </div>
+                          </div>
+                          <div className="mt-3 text-[10px] text-muted-foreground">🕒 3.2 sec</div>
+                        </div>
+                      </div>
+                      {/* Writing Action */}
+                      <div className="z-10 w-full max-w-[280px] animate-in fade-in slide-in-from-right-4 duration-700 delay-150">
+                        <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-200 px-2 py-1 text-[10px] font-bold text-zinc-700 uppercase tracking-wider">
+                          <Play className="size-3 fill-current" /> Writing
+                        </div>
+                        <div className="rounded-xl border border-border bg-white p-4 shadow-sm">
+                          <div className="flex items-center gap-2 mb-3">
+                            <PenTool className="size-4" />
+                            <h4 className="text-sm font-semibold">Content Generation</h4>
+                          </div>
+                          <div className="space-y-2 text-[11px] text-muted-foreground">
+                            <div className="flex items-center gap-2">
+                              <svg className="size-3 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
+                              Outline created
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <svg className="size-3 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
+                              Draft written
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <svg className="size-3 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
+                              SEO optimized
+                            </div>
+                          </div>
+                          <div className="mt-3 flex items-center justify-between">
+                            <span className="text-[10px] text-muted-foreground">🕒 8.5 sec</span>
+                            <div className="flex items-center gap-1 rounded-full bg-zinc-200 px-2 py-0.5 text-[9px] font-medium text-zinc-700">
+                              GPT-4o
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    {/* Bottom: Output */}
+                    <div className="z-10 w-full max-w-[450px] animate-in fade-in slide-in-from-bottom-4 duration-700 delay-300">
+                      <div className="mb-3 inline-flex items-center gap-1.5 rounded-md bg-zinc-900 px-2 py-1 text-[10px] font-bold text-white uppercase tracking-wider">
+                        <svg className="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="20 6 9 17 4 12"/></svg> Output
+                      </div>
+                      <div className="rounded-xl border border-border bg-white p-5 shadow-sm">
+                        <div className="flex items-start justify-between mb-4">
+                          <div className="flex items-center gap-2">
+                            <svg className="size-4 text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
+                            <h4 className="text-sm font-semibold">Draft Ready for Review</h4>
+                          </div>
+                          <MoreVertical className="size-4 text-muted-foreground" />
+                        </div>
+                        <div className="rounded-lg bg-zinc-100 p-4">
+                          <div className="flex items-center justify-between mb-2">
+                            <span className="text-[11px] font-medium text-zinc-700">AI Productivity Tools for Remote Teams</span>
+                          </div>
+                          <div className="text-[10px] text-muted-foreground leading-relaxed line-clamp-2">
+                            In today&apos;s fast-paced digital landscape, remote teams are constantly seeking ways to optimize their workflows and boost productivity...
+                          </div>
+                          <div className="mt-4 flex items-center justify-between border-t border-border/50 pt-3">
+                            <div className="flex gap-3 text-[10px] text-muted-foreground">
+                              <span>📝 1,523 words</span>
+                              <span>⏱ 6 min read</span>
+                            </div>
+                            <button className="text-[10px] font-medium text-primary hover:underline">
+                              Open in editor →
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+            </div>
+          </div>
+          {/* Footer Info */}
+          <div className="border-t border-border px-8 py-6 text-center">
+             <p className="text-sm text-muted-foreground">
+               Boost your efficiency with an AI agent that eliminates manual work and streamlines your operations.
+             </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}