@tellet/create 0.8.0

package/template/components/dashboard/OrchestratorChat.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "@/lib/utils";
+import { Markdown } from "@/components/chat/Markdown";
+
+interface ChatMessage {
+  role: "user" | "assistant";
+  content: string;
+}
+
+export function OrchestratorChat() {
+  const [open, setOpen] = useState(false);
+  const [input, setInput] = useState("");
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [streaming, setStreaming] = useState(false);
+  const [toolStatus, setToolStatus] = useState<string | null>(null);
+  const endRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, toolStatus]);
+
+  const send = async () => {
+    const text = input.trim();
+    if (!text || streaming) return;
+    setInput("");
+
+    const newMessages = [...messages, { role: "user" as const, content: text }];
+    setMessages(newMessages);
+    setStreaming(true);
+    setMessages((p) => [...p, { role: "assistant", content: "" }]);
+
+    try {
+      const res = await fetch("/api/orchestrator", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          messages: newMessages.map((m) => ({ role: m.role, content: m.content })),
+        }),
+      });
+
+      const reader = res.body?.getReader();
+      const decoder = new TextDecoder();
+      if (!reader) return;
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        for (const line of decoder
+          .decode(value)
+          .split("\n")
+          .filter((l) => l.startsWith("data: "))) {
+          try {
+            const data = JSON.parse(line.slice(6));
+
+            if (data.text) {
+              setMessages((p) => {
+                const u = [...p];
+                const last = u[u.length - 1];
+                if (last.role === "assistant")
+                  u[u.length - 1] = { ...last, content: last.content + data.text };
+                return u;
+              });
+            }
+
+            if (data.tool) {
+              setToolStatus(
+                data.status === "running"
+                  ? `Running ${data.tool.replace("_", " ")}...`
+                  : null
+              );
+            }
+
+            if (data.error) {
+              setMessages((p) => {
+                const u = [...p];
+                u[u.length - 1] = { role: "assistant", content: `Error: ${data.error}` };
+                return u;
+              });
+            }
+          } catch {}
+        }
+      }
+    } catch {
+      setMessages((p) => {
+        const u = [...p];
+        u[u.length - 1] = { role: "assistant", content: "Connection error." };
+        return u;
+      });
+    } finally {
+      setStreaming(false);
+      setToolStatus(null);
+    }
+  };
+
+  return (
+    <>
+      {/* Trigger button */}
+      <button
+        onClick={() => setOpen(!open)}
+        className={cn(
+          "fixed bottom-6 right-6 z-50 flex items-center gap-2 rounded-full px-5 py-3 shadow-lg transition-all cursor-pointer",
+          open
+            ? "bg-bg-secondary border border-border"
+            : "bg-accent hover:bg-accent-hover text-white shadow-[0_0_30px_var(--color-accent-glow)]"
+        )}
+      >
+        {open ? (
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+          </svg>
+        ) : (
+          <>
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z" />
+            </svg>
+            <span className="text-sm font-medium">Orchestrator</span>
+          </>
+        )}
+      </button>
+
+      {/* Chat panel */}
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            initial={{ opacity: 0, y: 20, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 20, scale: 0.95 }}
+            transition={{ duration: 0.15 }}
+            className="fixed bottom-20 right-6 z-50 w-[420px] max-h-[600px] rounded-2xl border border-border bg-bg-primary shadow-2xl flex flex-col overflow-hidden"
+          >
+            {/* Header */}
+            <div className="px-5 py-4 border-b border-border bg-bg-secondary/50">
+              <div className="flex items-center gap-2">
+                <div className="w-7 h-7 rounded-full bg-accent/20 text-accent flex items-center justify-center">
+                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z" />
+                  </svg>
+                </div>
+                <div>
+                  <p className="text-sm font-semibold">Orchestrator</p>
+                  <p className="text-[11px] text-text-tertiary">
+                    Manage your company with AI
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Messages */}
+            <div className="flex-1 overflow-y-auto px-4 py-3 space-y-3 min-h-[200px] max-h-[420px]">
+              {messages.length === 0 && (
+                <div className="text-center py-8 space-y-3">
+                  <p className="text-sm text-text-secondary">
+                    I can help you manage your AI company.
+                  </p>
+                  <div className="flex flex-wrap gap-2 justify-center">
+                    {[
+                      "Show my stats",
+                      "List my agents",
+                      "Update the website tagline",
+                      "Recent conversations",
+                    ].map((suggestion) => (
+                      <button
+                        key={suggestion}
+                        onClick={() => {
+                          setInput(suggestion);
+                        }}
+                        className="text-xs bg-bg-secondary border border-border rounded-lg px-3 py-1.5 text-text-secondary hover:text-text-primary hover:border-border-hover transition-colors cursor-pointer"
+                      >
+                        {suggestion}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {messages.map((m, i) => (
+                <div
+                  key={i}
+                  className={cn(
+                    "flex",
+                    m.role === "user" ? "justify-end" : "justify-start"
+                  )}
+                >
+                  <div
+                    className={cn(
+                      "rounded-xl px-3 py-2 max-w-[85%] text-sm leading-relaxed",
+                      m.role === "user"
+                        ? "bg-accent text-white"
+                        : "bg-bg-secondary text-text-primary border border-border"
+                    )}
+                  >
+                    {m.content ? (
+                      <Markdown content={m.content} />
+                    ) : (
+                      <span className="inline-flex gap-1">
+                        <span className="w-1.5 h-1.5 rounded-full bg-text-tertiary animate-pulse" />
+                        <span className="w-1.5 h-1.5 rounded-full bg-text-tertiary animate-pulse [animation-delay:150ms]" />
+                        <span className="w-1.5 h-1.5 rounded-full bg-text-tertiary animate-pulse [animation-delay:300ms]" />
+                      </span>
+                    )}
+                  </div>
+                </div>
+              ))}
+
+              {toolStatus && (
+                <div className="flex items-center gap-2 text-xs text-accent">
+                  <svg className="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                  </svg>
+                  {toolStatus}
+                </div>
+              )}
+
+              <div ref={endRef} />
+            </div>
+
+            {/* Input */}
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                send();
+              }}
+              className="px-3 py-3 border-t border-border flex gap-2"
+            >
+              <input
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                placeholder="Tell me what to do..."
+                disabled={streaming}
+                className="flex-1 rounded-lg bg-bg-secondary border border-border px-3 py-2 text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none focus:border-accent disabled:opacity-50"
+              />
+              <button
+                type="submit"
+                disabled={streaming || !input.trim()}
+                className="rounded-lg bg-accent px-3 py-2 text-white text-sm hover:bg-accent-hover disabled:opacity-50 cursor-pointer transition-colors"
+              >
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+                </svg>
+              </button>
+            </form>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}

package/template/components/dashboard/Sidebar.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+const nav = [
+  { label: "Dashboard", href: "/dashboard", icon: "H" },
+  { label: "Agents", href: "/agents", icon: "A" },
+  { label: "Conversations", href: "/conversations", icon: "C" },
+  { label: "Settings", href: "/settings", icon: "S" },
+];
+
+export function Sidebar({ companyName }: { companyName: string }) {
+  const pathname = usePathname();
+
+  return (
+    <aside className="w-56 border-r border-border bg-bg-primary flex flex-col h-full">
+      <Link href="/" className="block p-5 hover:bg-bg-secondary/50 transition-colors">
+        <span className="text-lg font-bold tracking-tight">{companyName}</span>
+        <p className="text-[11px] text-text-tertiary mt-0.5">Powered by tellet</p>
+      </Link>
+      <nav className="flex-1 px-3 space-y-0.5">
+        {nav.map((item) => (
+          <Link
+            key={item.href}
+            href={item.href}
+            className={cn(
+              "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
+              pathname === item.href
+                ? "bg-accent/10 text-accent"
+                : "text-text-secondary hover:text-text-primary hover:bg-bg-secondary"
+            )}
+          >
+            <span className="w-5 h-5 rounded bg-bg-tertiary flex items-center justify-center text-[10px] font-bold">
+              {item.icon}
+            </span>
+            {item.label}
+          </Link>
+        ))}
+      </nav>
+    </aside>
+  );
+}

package/template/components/dashboard/StatsCards.tsx

@@ -0,0 +1,40 @@
+interface StatsCardsProps {
+  totalConversations: number;
+  totalMessages: number;
+  activeAgents: number;
+  estimatedCost: number;
+}
+
+const cards = [
+  { key: "conversations", label: "Conversations", color: "text-blue-400" },
+  { key: "messages", label: "Messages", color: "text-green-400" },
+  { key: "agents", label: "Active Agents", color: "text-purple-400" },
+  { key: "cost", label: "Est. Cost", color: "text-amber-400" },
+] as const;
+
+export function StatsCards({ totalConversations, totalMessages, activeAgents, estimatedCost }: StatsCardsProps) {
+  const values: Record<string, string> = {
+    conversations: String(totalConversations),
+    messages: String(totalMessages),
+    agents: String(activeAgents),
+    cost: `$${estimatedCost.toFixed(2)}`,
+  };
+
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+      {cards.map((card) => (
+        <div
+          key={card.key}
+          className="rounded-xl border border-border bg-bg-secondary/50 p-5"
+        >
+          <p className="text-xs text-text-tertiary uppercase tracking-wider mb-2">
+            {card.label}
+          </p>
+          <p className={`text-2xl font-semibold ${card.color}`}>
+            {values[card.key]}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+}

package/template/components/dashboard/Welcome.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+const STORAGE_KEY = "tellet_onboarding_dismissed";
+
+interface WelcomeProps {
+  agentCount: number;
+  conversationCount: number;
+}
+
+const steps = [
+  { id: "agents", label: "AI team created", auto: true },
+  { id: "migration", label: "Database migration", auto: true },
+  { id: "conversation", label: "First conversation", auto: false },
+  { id: "deploy", label: "Deploy to production", auto: false },
+] as const;
+
+export function Welcome({ agentCount, conversationCount }: WelcomeProps) {
+  const [dismissed, setDismissed] = useState(true);
+  const [deployChecked, setDeployChecked] = useState(false);
+
+  useEffect(() => {
+    setDismissed(localStorage.getItem(STORAGE_KEY) === "true");
+    setDeployChecked(localStorage.getItem("tellet_deploy_done") === "true");
+  }, []);
+
+  if (dismissed) return null;
+
+  const checks = {
+    agents: agentCount > 0,
+    migration: agentCount > 0,
+    conversation: conversationCount > 0,
+    deploy: deployChecked,
+  };
+
+  const completed = Object.values(checks).filter(Boolean).length;
+  const total = steps.length;
+
+  const dismiss = () => {
+    localStorage.setItem(STORAGE_KEY, "true");
+    setDismissed(true);
+  };
+
+  const toggleDeploy = () => {
+    const next = !deployChecked;
+    setDeployChecked(next);
+    localStorage.setItem("tellet_deploy_done", String(next));
+  };
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, height: 0 }}
+        className="rounded-xl border border-accent/20 bg-accent/5 p-6 mb-8"
+      >
+        <div className="flex items-start justify-between mb-4">
+          <div>
+            <h3 className="text-lg font-semibold">Welcome to your AI company</h3>
+            <p className="text-sm text-text-secondary mt-1">
+              {completed}/{total} steps complete
+            </p>
+          </div>
+          <button
+            onClick={dismiss}
+            className="text-text-tertiary hover:text-text-secondary transition-colors cursor-pointer"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="w-full bg-bg-tertiary rounded-full h-1.5 mb-5">
+          <div
+            className="bg-accent h-1.5 rounded-full transition-all duration-500"
+            style={{ width: `${(completed / total) * 100}%` }}
+          />
+        </div>
+
+        <div className="space-y-3">
+          {steps.map((step) => {
+            const checked = checks[step.id];
+            return (
+              <div key={step.id} className="flex items-center gap-3">
+                {step.id === "deploy" ? (
+                  <button
+                    onClick={toggleDeploy}
+                    className={`w-5 h-5 rounded border flex items-center justify-center flex-shrink-0 cursor-pointer transition-colors ${
+                      checked
+                        ? "bg-accent border-accent"
+                        : "border-border hover:border-accent/50"
+                    }`}
+                  >
+                    {checked && (
+                      <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                      </svg>
+                    )}
+                  </button>
+                ) : (
+                  <div
+                    className={`w-5 h-5 rounded border flex items-center justify-center flex-shrink-0 ${
+                      checked
+                        ? "bg-accent border-accent"
+                        : "border-border"
+                    }`}
+                  >
+                    {checked && (
+                      <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                      </svg>
+                    )}
+                  </div>
+                )}
+                <span className={`text-sm ${checked ? "text-text-tertiary line-through" : "text-text-primary"}`}>
+                  {step.label}
+                </span>
+                {step.id === "migration" && !checked && (
+                  <code className="text-xs bg-bg-tertiary px-2 py-0.5 rounded text-text-secondary ml-auto">
+                    npx supabase db push
+                  </code>
+                )}
+                {step.id === "deploy" && !checked && (
+                  <code className="text-xs bg-bg-tertiary px-2 py-0.5 rounded text-text-secondary ml-auto">
+                    vercel deploy
+                  </code>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}

package/template/components/sections/Agents.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { motion } from "framer-motion";
+import config from "../../tellet.json";
+
+const roleColors: Record<string, string> = {
+  customer_support: "bg-green-500/10 text-green-400 border-green-500/20",
+  marketing: "bg-blue-500/10 text-blue-400 border-blue-500/20",
+  sales: "bg-amber-500/10 text-amber-400 border-amber-500/20",
+  operations: "bg-purple-500/10 text-purple-400 border-purple-500/20",
+  development: "bg-cyan-500/10 text-cyan-400 border-cyan-500/20",
+  analytics: "bg-rose-500/10 text-rose-400 border-rose-500/20",
+};
+
+export function Agents() {
+  return (
+    <section className="py-24 px-6 bg-bg-secondary/30">
+      <div className="max-w-5xl mx-auto">
+        <motion.div
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+        >
+          <h2 className="text-3xl md:text-4xl font-bold tracking-tight">
+            Meet our AI team
+          </h2>
+          <p className="mt-3 text-text-secondary">
+            Always online. Always ready to help.
+          </p>
+        </motion.div>
+
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
+          {config.agents.map((agent, i) => (
+            <motion.div
+              key={agent.id}
+              className="rounded-xl border border-border bg-bg-primary p-6 transition-all duration-200 hover:border-border-hover"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: i * 0.08, duration: 0.4 }}
+            >
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-10 h-10 rounded-full bg-accent/10 text-accent text-sm font-bold flex items-center justify-center">
+                  {agent.name[0]}
+                </div>
+                <div>
+                  <p className="font-semibold text-text-primary">{agent.name}</p>
+                  <span
+                    className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-medium ${roleColors[agent.role] || "bg-bg-tertiary text-text-secondary border-border"}`}
+                  >
+                    {agent.role.replace("_", " ")}
+                  </span>
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
+                <span className="text-xs text-text-secondary">Online</span>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/template/components/sections/CTA.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { motion } from "framer-motion";
+import config from "../../tellet.json";
+
+export function CTA() {
+  return (
+    <section className="py-24 px-6">
+      <motion.div
+        className="max-w-3xl mx-auto text-center rounded-2xl border border-border bg-bg-secondary/50 p-12 md:p-16 relative overflow-hidden"
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}
+      >
+        <div
+          className="absolute inset-0 pointer-events-none"
+          style={{
+            background:
+              "radial-gradient(ellipse 60% 50% at 50% 50%, rgba(139,92,246,0.06) 0%, transparent 70%)",
+          }}
+        />
+        <div className="relative">
+          <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+            {config.site.cta || "Ready to get started?"}
+          </h2>
+          <p className="text-text-secondary mb-8 max-w-lg mx-auto">
+            Our AI team is available 24/7 to help you. Start a conversation now.
+          </p>
+          <button
+            onClick={() => {
+              const el = document.getElementById("chat-trigger");
+              el?.click();
+            }}
+            className="inline-flex items-center gap-2 rounded-xl bg-accent px-8 py-4 text-sm font-medium text-white hover:bg-accent-hover transition-all shadow-[0_0_30px_var(--color-accent-glow)] cursor-pointer"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
+            </svg>
+            Chat with us
+          </button>
+        </div>
+      </motion.div>
+    </section>
+  );
+}

package/template/components/sections/FAQ.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import config from "../../tellet.json";
+
+function FAQItem({ question, answer }: { question: string; answer: string }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="border-b border-border">
+      <button
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center justify-between py-5 text-left cursor-pointer group"
+      >
+        <span className="text-sm font-medium text-text-primary group-hover:text-accent transition-colors pr-4">
+          {question}
+        </span>
+        <svg
+          className={`w-4 h-4 text-text-tertiary flex-shrink-0 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+        </svg>
+      </button>
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden"
+          >
+            <p className="pb-5 text-sm text-text-secondary leading-relaxed">
+              {answer}
+            </p>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+export function FAQ() {
+  const faq = config.site.faq as { question: string; answer: string }[];
+  if (!faq || faq.length === 0) return null;
+
+  return (
+    <section className="py-24 px-6">
+      <div className="max-w-2xl mx-auto">
+        <motion.div
+          className="text-center mb-12"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+        >
+          <h2 className="text-3xl md:text-4xl font-bold tracking-tight">
+            Frequently asked questions
+          </h2>
+        </motion.div>
+
+        <motion.div
+          className="border-t border-border"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5, delay: 0.1 }}
+        >
+          {faq.map((item) => (
+            <FAQItem key={item.question} question={item.question} answer={item.answer} />
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}