vibecarbon 0.1.0

package/carbon/src/client/components/LanguageSwitcher.tsx

@@ -0,0 +1,67 @@
+import { Globe } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+/**
+ * Language codes and their display names.
+ * To add a new language: add an entry here and create a matching locale file
+ * at src/client/locales/<code>.json with all keys from en.json translated.
+ */
+const LANGUAGE_OPTIONS: Record<string, string> = {
+  en: 'English',
+  es: 'Español',
+  fr: 'Français',
+  de: 'Deutsch',
+  pt: 'Português',
+};
+
+interface LanguageSwitcherProps {
+  /** Only show languages in this list. If empty/undefined, shows all. */
+  enabledLanguages?: string[];
+  className?: string;
+}
+
+/**
+ * Language switcher dropdown. Only renders when more than one language is enabled.
+ * Persists selection to localStorage via i18next's LanguageDetector.
+ */
+export function LanguageSwitcher({ enabledLanguages, className }: LanguageSwitcherProps) {
+  const { i18n } = useTranslation();
+
+  const languages = enabledLanguages?.length
+    ? enabledLanguages.filter((code) => code in LANGUAGE_OPTIONS)
+    : Object.keys(LANGUAGE_OPTIONS);
+
+  // Don't render if only one language is available
+  if (languages.length <= 1) return null;
+
+  const currentLanguage = i18n.language?.split('-')[0] || 'en';
+  const currentLabel = LANGUAGE_OPTIONS[currentLanguage] || currentLanguage;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        className={`cursor-pointer inline-flex items-center gap-1.5 rounded-full border border-border/50 bg-muted/30 px-3 h-8 text-sm font-medium hover:bg-muted/60 transition-colors ${className || ''}`}
+      >
+        <Globe className="size-4" />
+        <span>{currentLabel}</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {languages.map((code) => (
+          <DropdownMenuItem
+            key={code}
+            onClick={() => i18n.changeLanguage(code)}
+            className={code === currentLanguage ? 'bg-accent' : ''}
+          >
+            {LANGUAGE_OPTIONS[code] || code}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/carbon/src/client/components/Logo.tsx

@@ -0,0 +1,87 @@
+import { cn } from '@/lib/utils';
+
+// Split across two lines so the formatted output is stable regardless of the
+// rendered project-name length (biome wraps >100-char lines, which caused CI
+// lint failures in e2e when the project slug was long).
+const DEFAULT_PROJECT_NAME = '{{PROJECT_NAME}}';
+export const PROJECT_NAME = import.meta.env.VITE_PROJECT_NAME ?? DEFAULT_PROJECT_NAME;
+
+interface LogoProps {
+  size?: 'sm' | 'default' | 'lg';
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'size-6',
+  default: 'size-8',
+  lg: 'size-10',
+};
+
+/**
+ * Default logo mark — replace the SVG below with your own brand icon.
+ * Liquid glass hex with circular cutout — gradient fill + specular highlight.
+ */
+export function Logo({ size = 'default', className }: LogoProps) {
+  return (
+    <svg
+      viewBox="0 0 64 64"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn('shrink-0', sizeClasses[size], className)}
+      aria-hidden="true"
+    >
+      <defs>
+        <linearGradient id="logo-fill" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="#5eead4" />
+          <stop offset="100%" stopColor="#0d9488" />
+        </linearGradient>
+        <linearGradient id="logo-shine" x1="0.2" y1="0" x2="0.8" y2="0.6">
+          <stop offset="0%" stopColor="white" stopOpacity="0.5" />
+          <stop offset="100%" stopColor="white" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M32 2L58 17V47L32 62L6 47V17Z M48 32A16 16 0 1 1 16 32A16 16 0 1 1 48 32Z"
+        fill="url(#logo-fill)"
+      />
+      <path d="M32 2L58 17V30L32 38L6 30V17Z" fill="url(#logo-shine)" />
+    </svg>
+  );
+}
+
+/**
+ * Logo mark + project name text.
+ * Sizes: sm (footers), default (nav/sidebar), lg (auth hero pages).
+ * Wrap in a <Link> with className="group" for hover effects.
+ */
+interface WordmarkProps {
+  size?: 'sm' | 'default' | 'lg';
+  className?: string;
+  textClassName?: string;
+}
+
+const wordmarkConfig = {
+  sm: { logoSize: 'sm' as const, text: 'text-sm font-medium', gap: 'gap-1.5' },
+  default: {
+    logoSize: 'lg' as const,
+    text: 'text-[1.24rem] font-semibold tracking-tight',
+    gap: 'gap-1',
+  },
+  lg: {
+    logoSize: 'lg' as const,
+    text: 'text-[1.375rem] font-semibold tracking-tight',
+    gap: 'gap-1',
+  },
+};
+
+export function Wordmark({ size = 'default', className, textClassName }: WordmarkProps) {
+  const { logoSize, text, gap } = wordmarkConfig[size];
+  return (
+    <span className={cn('inline-flex items-center', gap, className)}>
+      <Logo size={logoSize} />
+      <span className={cn(text, textClassName)}>{PROJECT_NAME}</span>
+    </span>
+  );
+}

package/carbon/src/client/components/LogoStrip.tsx

@@ -0,0 +1,76 @@
+import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
+import aiderLogo from '../assets/logos/aider.svg';
+import antigravityLogo from '../assets/logos/antigravity.svg';
+import boltLogo from '../assets/logos/bolt.svg';
+import claudeLogo from '../assets/logos/claude-code.svg';
+import copilotLogo from '../assets/logos/copilot.svg';
+import cursorLogo from '../assets/logos/cursor.svg';
+import geminiLogo from '../assets/logos/gemini-cli.svg';
+import lovableLogo from '../assets/logos/lovable.svg';
+import openaiLogo from '../assets/logos/openai-codex.svg';
+import v0Logo from '../assets/logos/v0.svg';
+import windsurfLogo from '../assets/logos/windsurf.svg';
+
+const LOGO_ITEMS = [
+  { src: claudeLogo, name: 'Claude Code', href: 'https://docs.anthropic.com/en/docs/claude-code' },
+  { src: geminiLogo, name: 'Gemini CLI', href: 'https://github.com/google-gemini/gemini-cli' },
+  { src: openaiLogo, name: 'OpenAI Codex', href: 'https://openai.com/codex/' },
+  { src: antigravityLogo, name: 'Antigravity', href: 'https://antigravityai.org/' },
+  { src: cursorLogo, name: 'Cursor', href: 'https://cursor.com' },
+  { src: windsurfLogo, name: 'Windsurf', href: 'https://windsurf.com' },
+  { src: boltLogo, name: 'Bolt', href: 'https://bolt.new' },
+  { src: v0Logo, name: 'v0', href: 'https://v0.dev' },
+  { src: lovableLogo, name: 'Lovable', href: 'https://lovable.dev' },
+  { src: aiderLogo, name: 'Aider', href: 'https://aider.chat' },
+  { src: copilotLogo, name: 'Copilot', href: 'https://github.com/features/copilot' },
+];
+
+export function LogoStrip() {
+  const { t } = useTranslation();
+  return (
+    <motion.section
+      className="relative py-10 overflow-hidden border-y border-border/20 bg-gradient-to-b from-transparent via-white/[0.02] to-transparent"
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true }}
+    >
+      <div className="max-w-7xl mx-auto">
+        <p className="text-center text-sm uppercase tracking-widest text-muted-foreground mb-6">
+          {t('landing.logoStrip.label')}
+        </p>
+        <div
+          className="relative overflow-hidden"
+          style={{
+            maskImage: 'linear-gradient(to right, transparent, black 15%, black 85%, transparent)',
+          }}
+        >
+          <div className="marquee-track flex w-max">
+            {[...LOGO_ITEMS, ...LOGO_ITEMS].map((item, i) => (
+              <a
+                // Marquee duplicates LOGO_ITEMS for the scroll loop, so the
+                // stable key is `${item.name}-${copyIndex}` — `i` divided by
+                // the original length tells us which copy we're on.
+                key={`${item.name}-${i < LOGO_ITEMS.length ? 'a' : 'b'}`}
+                href={item.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group flex items-center gap-2.5 px-8 shrink-0"
+              >
+                <img
+                  src={item.src}
+                  alt=""
+                  style={{ height: 22, width: 'auto' }}
+                  className="dark:brightness-0 dark:invert opacity-70 group-hover:brightness-100 group-hover:invert-0 group-hover:opacity-100 transition-all duration-300"
+                />
+                <span className="text-sm font-medium text-muted-foreground/70 group-hover:text-foreground whitespace-nowrap transition-colors duration-300">
+                  {item.name}
+                </span>
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </motion.section>
+  );
+}

package/carbon/src/client/components/MetricsStrip.tsx

@@ -0,0 +1,48 @@
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export function MetricsStrip() {
+  const { t } = useTranslation();
+  const ref = useRef<HTMLElement>(null);
+  const isInView = useInView(ref, { once: true, margin: '-50px' });
+
+  const METRICS = [
+    { value: t('landing.metrics.time.value'), label: t('landing.metrics.time.label') },
+    { value: t('landing.metrics.services.value'), label: t('landing.metrics.services.label') },
+    { value: t('landing.metrics.config.value'), label: t('landing.metrics.config.label') },
+    { value: t('landing.metrics.commands.value'), label: t('landing.metrics.commands.label') },
+  ];
+
+  return (
+    <section ref={ref} className="relative overflow-hidden border-y border-border/30">
+      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/30 to-transparent" />
+      <div className="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-primary/30 to-transparent" />
+
+      {/* Horizontal gradient band behind */}
+      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-primary/5 to-transparent" />
+      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[300px] rounded-full bg-primary/6 blur-[120px] pointer-events-none" />
+
+      <div className="relative mx-auto max-w-7xl px-6 py-16">
+        <div className="grid grid-cols-2 md:grid-cols-4 divide-x divide-border/30">
+          {METRICS.map((metric, i) => (
+            <motion.div
+              key={metric.label}
+              initial={{ opacity: 0, y: 20 }}
+              animate={isInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.5, delay: i * 0.1 }}
+              className="px-6 py-4 text-center hover:bg-primary/[0.03] transition-colors duration-300"
+            >
+              <div className="metric-value text-2xl sm:text-3xl md:text-4xl font-black tracking-tight mb-2">
+                {metric.value}
+              </div>
+              <div className="text-xs sm:text-sm text-muted-foreground uppercase tracking-widest">
+                {metric.label}
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/carbon/src/client/components/Nav.tsx

@@ -0,0 +1,195 @@
+import { ArrowRight, Menu, Star, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { useAuthSettings } from '@/hooks/api';
+import { cn } from '@/lib/utils';
+import { useAuth } from './auth/AuthProvider';
+import { LanguageSwitcher } from './LanguageSwitcher';
+import { Wordmark } from './Logo';
+import { Button } from './ui/button';
+
+const GITHUB_REPO = 'hyperformant/vibecarbon';
+
+function GitHubStarButton({ className }: { className?: string }) {
+  const [stars, setStars] = useState<number | null>(null);
+
+  useEffect(() => {
+    fetch(`https://api.github.com/repos/${GITHUB_REPO}`)
+      .then((r) => r.json())
+      .then((d) => {
+        if (typeof d.stargazers_count === 'number') setStars(d.stargazers_count);
+      })
+      .catch(() => {});
+  }, []);
+
+  const formatted =
+    stars !== null
+      ? stars >= 1000
+        ? `${(stars / 1000).toFixed(1).replace(/\.0$/, '')}k`
+        : String(stars)
+      : null;
+
+  return (
+    <a
+      href={`https://github.com/${GITHUB_REPO}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cn(
+        'inline-flex items-center gap-2 rounded-full border border-border/50 bg-muted/30 px-3 h-8 text-sm font-medium text-foreground transition-colors hover:bg-muted/60',
+        className
+      )}
+    >
+      <svg className="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
+      </svg>
+      <Star className="size-3.5 fill-amber-400 text-amber-400" />
+      {formatted !== null && <span>{formatted}</span>}
+    </a>
+  );
+}
+
+export function Nav() {
+  const { t } = useTranslation();
+  const { user } = useAuth();
+  const { data: authSettings } = useAuthSettings();
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  const enabledLanguages = authSettings?.settings?.enabledLanguages ?? ['en'];
+  const localizationEnabled = authSettings?.settings?.localizationEnabled ?? true;
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  // Close mobile menu on resize to desktop
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 768) setMobileOpen(false);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return (
+    <nav className="fixed inset-x-0 z-50 h-20" style={{ top: 'var(--notification-bar-h, 0px)' }}>
+      {/* Background layer that fades in/out smoothly */}
+      <div
+        className={cn(
+          'absolute inset-0 bg-background/80 backdrop-blur-xl border-b border-border/50 shadow-sm transition-opacity duration-500 ease-out',
+          isScrolled || mobileOpen ? 'opacity-100' : 'opacity-0'
+        )}
+      />
+      <div className="relative mx-auto max-w-7xl h-full px-6 flex items-center justify-between">
+        {/* Logo & Brand */}
+        <Link to="/" className="group">
+          <Wordmark size="lg" />
+        </Link>
+
+        {/* Desktop nav */}
+        <div className="hidden md:flex items-center gap-2">
+          {localizationEnabled && <LanguageSwitcher enabledLanguages={enabledLanguages} />}
+          <GitHubStarButton />
+          <Button variant="ghost" size="sm" asChild>
+            <Link to="/docs">{t('nav.docs')}</Link>
+          </Button>
+          <Button variant="ghost" size="sm" asChild>
+            <Link to="/api/docs">{t('nav.apiDocs')}</Link>
+          </Button>
+          {user ? (
+            <Button variant="exciting" size="sm" asChild className="font-semibold gap-2">
+              <Link to="/dashboard">
+                {t('nav.dashboard')}
+                <ArrowRight className="size-4 shrink-0" />
+              </Link>
+            </Button>
+          ) : (
+            <>
+              <Button variant="ghost" size="sm" asChild>
+                <Link to="/login">{t('nav.logIn')}</Link>
+              </Button>
+              <Button size="sm" asChild>
+                <Link to="/signup">{t('nav.signUp')}</Link>
+              </Button>
+            </>
+          )}
+        </div>
+
+        {/* Mobile hamburger */}
+        <button
+          type="button"
+          className="relative md:hidden p-2 text-muted-foreground hover:text-foreground transition-colors"
+          onClick={() => setMobileOpen(!mobileOpen)}
+          aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
+        >
+          {mobileOpen ? <X className="size-6" /> : <Menu className="size-6" />}
+        </button>
+      </div>
+
+      {/* Mobile menu */}
+      {mobileOpen && (
+        <div className="relative md:hidden bg-background/95 backdrop-blur-xl border-b border-border">
+          <div className="mx-auto max-w-7xl px-6 py-6 flex flex-col gap-4">
+            <div className="flex items-center gap-3">
+              <GitHubStarButton className="w-fit" />
+              {localizationEnabled && <LanguageSwitcher enabledLanguages={enabledLanguages} />}
+            </div>
+            <Link
+              to="/docs"
+              onClick={() => setMobileOpen(false)}
+              className="text-foreground font-medium transition-colors text-base"
+            >
+              {t('nav.docs')}
+            </Link>
+            <Link
+              to="/api/docs"
+              onClick={() => setMobileOpen(false)}
+              className="text-foreground font-medium transition-colors text-base"
+            >
+              {t('nav.apiDocs')}
+            </Link>
+            <div className="flex flex-col gap-3 pt-2">
+              {user ? (
+                <Button
+                  variant="exciting"
+                  size="lg"
+                  asChild
+                  className="w-full text-base font-semibold justify-center gap-2"
+                >
+                  <Link to="/dashboard" onClick={() => setMobileOpen(false)}>
+                    {t('nav.dashboard')}
+                    <ArrowRight className="size-4 shrink-0" />
+                  </Link>
+                </Button>
+              ) : (
+                <>
+                  <Button
+                    variant="ghost"
+                    size="lg"
+                    asChild
+                    className="w-full text-base justify-center"
+                  >
+                    <Link to="/login" onClick={() => setMobileOpen(false)}>
+                      {t('nav.logIn')}
+                    </Link>
+                  </Button>
+                  <Button size="lg" asChild className="w-full text-base justify-center">
+                    <Link to="/signup" onClick={() => setMobileOpen(false)}>
+                      {t('nav.signUp')}
+                    </Link>
+                  </Button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}

package/carbon/src/client/components/NewsletterSignup.tsx

@@ -0,0 +1,147 @@
+import { useMutation } from '@tanstack/react-query';
+import { CheckCircle, Loader2 } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+interface NewsletterSignupProps {
+  className?: string;
+  variant?: 'inline' | 'stacked';
+  buttonText?: string;
+}
+
+/**
+ * Newsletter signup form. Embeddable in landing pages, footers, or standalone.
+ * Uses double opt-in (sends confirmation email).
+ */
+export function NewsletterSignup({
+  className,
+  variant = 'inline',
+  buttonText,
+}: NewsletterSignupProps) {
+  const { t } = useTranslation();
+  const resolvedButtonText = buttonText ?? t('landing.newsletter.button');
+  const [email, setEmail] = useState('');
+  const [validationError, setValidationError] = useState<string | null>(null);
+
+  const subscribeMutation = useMutation({
+    mutationFn: async () => {
+      const response = await fetch('/api/v1/newsletter/subscribe', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      });
+      if (!response.ok) {
+        const err = await response.json();
+        throw new Error(err.error || 'Failed to subscribe');
+      }
+      return response.json();
+    },
+    onSuccess: () => {
+      setEmail('');
+      setValidationError(null);
+    },
+  });
+
+  const handleSubmit = () => {
+    if (!email.trim()) {
+      setValidationError(t('landing.newsletter.errorEmpty'));
+      return;
+    }
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setValidationError(t('landing.newsletter.errorInvalid'));
+      return;
+    }
+    setValidationError(null);
+    subscribeMutation.mutate();
+  };
+
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+    if (validationError) setValidationError(null);
+  };
+
+  const hasError = !!validationError || !!subscribeMutation.error;
+  const errorMessage = validationError || subscribeMutation.error?.message;
+
+  if (subscribeMutation.isSuccess) {
+    return (
+      <div className={`flex items-center gap-2 text-sm ${className || ''}`}>
+        <CheckCircle className="size-4 text-primary" />
+        <span className="text-muted-foreground">{t('landing.newsletter.success')}</span>
+      </div>
+    );
+  }
+
+  if (variant === 'stacked') {
+    return (
+      <div className={`space-y-2 ${className || ''}`}>
+        <Input
+          type="email"
+          value={email}
+          onChange={handleEmailChange}
+          placeholder={t('landing.newsletter.placeholder')}
+          className="bg-background"
+          aria-invalid={hasError}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              handleSubmit();
+            }
+          }}
+        />
+        <Button
+          onClick={handleSubmit}
+          disabled={subscribeMutation.isPending}
+          className="w-full"
+          size="sm"
+          sparkle
+        >
+          {subscribeMutation.isPending && <Loader2 className="size-3 mr-1 animate-spin" />}
+          {resolvedButtonText}
+        </Button>
+        {hasError && (
+          <p className="text-sm text-destructive text-center animate-in fade-in slide-in-from-top-1 duration-200">
+            {errorMessage}
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-col gap-2 ${className || ''}`}>
+      <div className="flex items-center gap-2">
+        <Input
+          type="email"
+          value={email}
+          onChange={handleEmailChange}
+          placeholder={t('landing.newsletter.placeholder')}
+          className="bg-background min-w-[280px] sm:min-w-[340px] h-9"
+          aria-invalid={hasError}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              handleSubmit();
+            }
+          }}
+        />
+        <Button
+          onClick={handleSubmit}
+          disabled={subscribeMutation.isPending}
+          size="default"
+          sparkle
+        >
+          {subscribeMutation.isPending && <Loader2 className="size-3 mr-1 animate-spin" />}
+          {resolvedButtonText}
+        </Button>
+      </div>
+      {hasError && (
+        <p className="text-sm text-destructive text-center animate-in fade-in slide-in-from-top-1 duration-200">
+          {errorMessage}
+        </p>
+      )}
+    </div>
+  );
+}