@nextclaw/ui 0.2.1

package/src/components/config/ProviderForm.tsx

@@ -0,0 +1,147 @@
+import { useEffect, useState } from 'react';
+import { useConfig, useConfigMeta, useUpdateProvider } from '@/hooks/useConfig';
+import { useUiStore } from '@/stores/ui.store';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { MaskedInput } from '@/components/common/MaskedInput';
+import { KeyValueEditor } from '@/components/common/KeyValueEditor';
+import { t } from '@/lib/i18n';
+import type { ProviderConfigUpdate } from '@/api/types';
+import { KeyRound, Globe, Hash } from 'lucide-react';
+
+export function ProviderForm() {
+  const { providerModal, closeProviderModal } = useUiStore();
+  const { data: config } = useConfig();
+  const { data: meta } = useConfigMeta();
+  const updateProvider = useUpdateProvider();
+
+  const [apiKey, setApiKey] = useState('');
+  const [apiBase, setApiBase] = useState('');
+  const [extraHeaders, setExtraHeaders] = useState<Record<string, string> | null>(null);
+
+  const providerName = providerModal.provider;
+  const providerSpec = meta?.providers.find((p) => p.name === providerName);
+  const providerConfig = providerName ? config?.providers[providerName] : null;
+
+  useEffect(() => {
+    if (providerConfig) {
+      setApiBase(providerConfig.apiBase || providerSpec?.defaultApiBase || '');
+      setExtraHeaders(providerConfig.extraHeaders || null);
+      setApiKey(''); // Always start with empty for security
+    }
+  }, [providerConfig, providerSpec]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const payload: ProviderConfigUpdate = {};
+
+    // Only include apiKey if user has entered something
+    if (apiKey !== '') {
+      payload.apiKey = apiKey;
+    }
+
+    if (apiBase && apiBase !== providerSpec?.defaultApiBase) {
+      payload.apiBase = apiBase;
+    }
+
+    if (extraHeaders && Object.keys(extraHeaders).length > 0) {
+      payload.extraHeaders = extraHeaders;
+    }
+
+    if (!providerName) return;
+
+    updateProvider.mutate(
+      { provider: providerName, data: payload },
+      { onSuccess: () => closeProviderModal() }
+    );
+  };
+
+  return (
+    <Dialog open={providerModal.open} onOpenChange={closeProviderModal}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <div className="flex items-center gap-3">
+            <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-orange-400 to-amber-500 flex items-center justify-center">
+              <KeyRound className="h-5 w-5 text-white" />
+            </div>
+            <div>
+              <DialogTitle>{providerSpec?.displayName || providerName}</DialogTitle>
+              <DialogDescription>Configure API keys and parameters for AI provider</DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-5 pt-2">
+          <div className="space-y-2.5">
+            <Label htmlFor="apiKey" className="text-sm font-medium text-[hsl(30,20%,12%)] flex items-center gap-2">
+              <KeyRound className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />
+              {t('apiKey')}
+            </Label>
+            <MaskedInput
+              id="apiKey"
+              value={apiKey}
+              isSet={providerConfig?.apiKeySet}
+              onChange={(e) => setApiKey(e.target.value)}
+              placeholder={providerConfig?.apiKeySet ? t('apiKeySet') : 'Enter API Key'}
+              className="rounded-xl border-[hsl(40,20%,90%)] bg-[hsl(40,20%,98%)] focus:bg-white"
+            />
+          </div>
+
+          <div className="space-y-2.5">
+            <Label htmlFor="apiBase" className="text-sm font-medium text-[hsl(30,20%,12%)] flex items-center gap-2">
+              <Globe className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />
+              {t('apiBase')}
+            </Label>
+            <Input
+              id="apiBase"
+              type="text"
+              value={apiBase}
+              onChange={(e) => setApiBase(e.target.value)}
+              placeholder={providerSpec?.defaultApiBase || 'https://api.example.com'}
+              className="rounded-xl border-[hsl(40,20%,90%)] bg-[hsl(40,20%,98%)] focus:bg-white"
+            />
+          </div>
+
+          <div className="space-y-2.5">
+            <Label className="text-sm font-medium text-[hsl(30,20%,12%)] flex items-center gap-2">
+              <Hash className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />
+              {t('extraHeaders')}
+            </Label>
+            <KeyValueEditor
+              value={extraHeaders}
+              onChange={setExtraHeaders}
+            />
+          </div>
+
+          <DialogFooter className="pt-4">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={closeProviderModal}
+              className="rounded-xl border-[hsl(40,20%,90%)] bg-white hover:bg-[hsl(40,20%,96%)]"
+            >
+              {t('cancel')}
+            </Button>
+            <Button
+              type="submit"
+              disabled={updateProvider.isPending}
+              className="rounded-xl bg-gradient-to-r from-orange-400 to-amber-500 hover:from-orange-500 hover:to-amber-600 text-white border-0"
+            >
+              {updateProvider.isPending ? 'Saving...' : t('save')}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/config/ProvidersList.tsx

@@ -0,0 +1,90 @@
+import { useConfig, useConfigMeta } from '@/hooks/useConfig';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { KeyRound, Lock, Check, Plus, MoreHorizontal } from 'lucide-react';
+import { useState } from 'react';
+import { ProviderForm } from './ProviderForm';
+import { useUiStore } from '@/stores/ui.store';
+import { cn } from '@/lib/utils';
+import { Tabs } from '@/components/ui/tabs-custom';
+import { HighlightCard } from '@/components/ui/HighlightCard';
+
+export function ProvidersList() {
+  const { data: config } = useConfig();
+  const { data: meta } = useConfigMeta();
+  const { openProviderModal } = useUiStore();
+  const [activeTab, setActiveTab] = useState('featured');
+
+  if (!config || !meta) {
+    return <div className="p-8">Loading...</div>; // Skeleton optimization can follow
+  }
+
+  const tabs = [
+    { id: 'installed', label: 'Configured', count: config.providers ? Object.keys(config.providers).filter(k => config.providers[k].apiKeySet).length : 0 },
+    { id: 'all', label: 'All Providers' }
+  ];
+
+  return (
+    <div className="animate-fade-in pb-20">
+      <div className="flex items-center justify-between mb-8">
+        <h2 className="text-2xl font-bold text-[hsl(30,15%,10%)]">AI Providers</h2>
+      </div>
+
+      {/* Tabs */}
+      <Tabs tabs={tabs} activeTab={activeTab === 'featured' ? 'all' : activeTab} onChange={setActiveTab} />
+
+      {/* Provider List Row-Style */}
+      <div className="space-y-1">
+        {(activeTab === 'installed'
+          ? meta.providers.filter((p) => config.providers[p.name]?.apiKeySet)
+          : meta.providers
+        ).map((provider) => {
+          const providerConfig = config.providers[provider.name];
+          const hasConfig = providerConfig?.apiKeySet;
+
+          return (
+            <div
+              key={provider.name}
+              className="group flex items-center gap-5 p-3 rounded-2xl hover:bg-[hsl(40,10%,96%)] transition-all cursor-pointer border border-transparent hover:border-[hsl(40,10%,94%)]"
+              onClick={() => openProviderModal(provider.name)}
+            >
+              {/* Logo/Icon */}
+              <div className="h-10 w-10 flex items-center justify-center bg-transparent border border-[hsl(40,10%,92%)] rounded-xl group-hover:scale-105 transition-transform overflow-hidden">
+                <span className="text-xl font-bold uppercase text-[hsl(30,15%,10%)]">{provider.name[0]}</span>
+              </div>
+
+              {/* Info */}
+              <div className="flex-1 min-w-0">
+                <h3 className="text-[14px] font-bold text-[hsl(30,15%,10%)] truncate">
+                  {provider.displayName || provider.name}
+                </h3>
+                <p className="text-[12px] text-[hsl(30,8%,55%)] truncate leading-tight">
+                  {provider.name === 'openai' ? 'TypeScript authentication framework integration guide' : 'Configure AI services for your agents'}
+                </p>
+              </div>
+
+              {/* Status/Actions */}
+              <div className="flex items-center gap-4">
+                {hasConfig ? (
+                  <div className="flex items-center gap-1.5 text-emerald-600">
+                    <Check className="h-4 w-4" />
+                    <span className="text-[11px] font-bold">Ready</span>
+                  </div>
+                ) : (
+                  <button className="h-8 w-8 flex items-center justify-center text-[hsl(30,8%,45%)] hover:text-[hsl(30,15%,10%)] group-hover:opacity-100 opacity-0 transition-opacity">
+                    <Plus className="h-4 w-4" />
+                  </button>
+                )}
+                <button className="h-8 w-8 flex items-center justify-center text-[hsl(30,8%,45%)]">
+                  <MoreHorizontal className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <ProviderForm />
+    </div>
+  );
+}

package/src/components/config/UiConfig.tsx

@@ -0,0 +1,189 @@
+import { useState, useEffect } from 'react';
+import { useConfig, useUpdateUiConfig, useReloadConfig } from '@/hooks/useConfig';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Card, CardContent, CardTitle, CardDescription } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { RefreshCw, Save, Monitor, Power } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { t } from '@/lib/i18n';
+
+export function UiConfig() {
+  const { data: config, isLoading } = useConfig();
+  const updateUiConfig = useUpdateUiConfig();
+  const reloadConfig = useReloadConfig();
+
+  const [enabled, setEnabled] = useState(false);
+  const [host, setHost] = useState('127.0.0.1');
+  const [port, setPort] = useState(18791);
+
+  useEffect(() => {
+    if (config?.ui) {
+      setEnabled(config.ui.enabled);
+      setHost(config.ui.host);
+      setPort(config.ui.port);
+    }
+  }, [config]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    updateUiConfig.mutate({ enabled, host, port, open: true });
+  };
+
+  const handleReload = () => {
+    reloadConfig.mutate();
+  };
+
+  if (isLoading) {
+    return (
+      <div className="max-w-2xl space-y-6">
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-32" />
+          <Skeleton className="h-4 w-48" />
+        </div>
+        <Card className="rounded-2xl border-[hsl(40,20%,90%)] p-6">
+          <div className="flex items-center gap-4 mb-6">
+            <Skeleton className="h-12 w-12 rounded-xl" />
+            <div className="space-y-2">
+              <Skeleton className="h-5 w-28" />
+              <Skeleton className="h-3 w-36" />
+            </div>
+          </div>
+          <Skeleton className="h-16 w-full rounded-xl mb-4" />
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Skeleton className="h-4 w-16 mb-2" />
+              <Skeleton className="h-10 w-full rounded-xl" />
+            </div>
+            <div>
+              <Skeleton className="h-4 w-12 mb-2" />
+              <Skeleton className="h-10 w-full rounded-xl" />
+            </div>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      {/* Header */}
+      <div>
+        <h2 className="text-xl font-semibold text-[hsl(30,20%,12%)]">{t('uiConfig')}</h2>
+        <p className="text-sm text-[hsl(30,8%,45%)] mt-1">Configure Web UI server and access options</p>
+      </div>
+
+      <Card className="rounded-2xl border-[hsl(40,20%,90%)] bg-white">
+        <CardContent className="p-6">
+          <div className="flex items-center gap-4 mb-6">
+            <div className="h-12 w-12 rounded-xl bg-gradient-to-br from-purple-400 to-indigo-500 flex items-center justify-center">
+              <Monitor className="h-5 w-5 text-white" />
+            </div>
+            <div>
+              <CardTitle className="text-base font-semibold text-[hsl(30,20%,12%)]">Web UI Server</CardTitle>
+              <CardDescription className="text-xs text-[hsl(30,8%,45%)]">Configure server runtime parameters</CardDescription>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className={cn(
+              "flex items-center justify-between p-4 rounded-xl transition-colors",
+              enabled ? "bg-emerald-50" : "bg-[hsl(40,20%,96%)]"
+            )}>
+              <div className="flex items-center gap-3">
+                <div className={cn(
+                  "h-10 w-10 rounded-lg flex items-center justify-center",
+                  enabled ? "bg-emerald-100 text-emerald-600" : "bg-[hsl(40,20%,94%)] text-[hsl(30,8%,45%)]"
+                )}>
+                  <Power className="h-5 w-5" />
+                </div>
+                <div>
+                  <h3 className="font-medium text-[hsl(30,20%,12%)]">Enable Web UI</h3>
+                  <p className={cn(
+                    "text-xs",
+                    enabled ? "text-emerald-600" : "text-[hsl(30,8%,45%)]"
+                  )}>
+                    {enabled ? t('connected') : t('disconnected')}
+                  </p>
+                </div>
+              </div>
+              <Switch
+                id="enabled"
+                checked={enabled}
+                onCheckedChange={setEnabled}
+                className="data-[state=checked]:bg-emerald-500"
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="host" className="text-sm font-medium text-[hsl(30,20%,12%)]">{t('host')}</Label>
+                <Input
+                  id="host"
+                  type="text"
+                  value={host}
+                  onChange={(e) => setHost(e.target.value)}
+                  placeholder="127.0.0.1"
+                  className="rounded-xl border-[hsl(40,20%,90%)] bg-[hsl(40,20%,98%)] focus:bg-white"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="port" className="text-sm font-medium text-[hsl(30,20%,12%)]">{t('port')}</Label>
+                <Input
+                  id="port"
+                  type="number"
+                  value={port}
+                  onChange={(e) => setPort(parseInt(e.target.value) || 18791)}
+                  placeholder="18791"
+                  min="1"
+                  max="65535"
+                  className="rounded-xl border-[hsl(40,20%,90%)] bg-[hsl(40,20%,98%)] focus:bg-white"
+                />
+              </div>
+            </div>
+
+            <div className="flex justify-end">
+              <Button
+                type="submit"
+                disabled={updateUiConfig.isPending}
+                className="gap-2 rounded-xl bg-gradient-to-r from-orange-400 to-amber-500 hover:from-orange-500 hover:to-amber-600 text-white border-0"
+              >
+                <Save className="h-4 w-4" />
+                {t('save')}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card className="rounded-2xl border-[hsl(40,20%,90%)] bg-white">
+        <CardContent className="p-6">
+          <div className="flex items-center gap-4 mb-6">
+            <div className="h-12 w-12 rounded-xl bg-gradient-to-br from-slate-400 to-gray-500 flex items-center justify-center">
+              <RefreshCw className="h-5 w-5 text-white" />
+            </div>
+            <div>
+              <CardTitle className="text-base font-semibold text-[hsl(30,20%,12%)]">{t('reloadConfig')}</CardTitle>
+              <CardDescription className="text-xs text-[hsl(30,8%,45%)]">Apply changes and restart services</CardDescription>
+            </div>
+          </div>
+          <p className="text-sm text-[hsl(30,8%,45%)] mb-4">
+            Click the button below to reload the configuration file and apply all changes.
+          </p>
+          <Button
+            variant="outline"
+            onClick={handleReload}
+            disabled={reloadConfig.isPending}
+            className="w-full gap-2 rounded-xl border-[hsl(40,20%,90%)] bg-[hsl(40,20%,98%)] hover:bg-[hsl(40,20%,94%)] text-[hsl(30,10%,35%)]"
+          >
+            <RefreshCw className="h-4 w-4" />
+            {t('reloadConfig')}
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/components/layout/AppLayout.tsx

@@ -0,0 +1,20 @@
+import { Sidebar } from './Sidebar';
+
+interface AppLayoutProps {
+  children: React.ReactNode;
+}
+
+export function AppLayout({ children }: AppLayoutProps) {
+  return (
+    <div className="h-screen flex bg-[hsl(40,20%,98%)] p-2">
+      <Sidebar />
+      <div className="flex-1 flex flex-col min-w-0 bg-white rounded-[2rem] shadow-sm overflow-hidden border border-[hsl(40,10%,94%)]">
+        <main className="flex-1 overflow-auto custom-scrollbar p-8">
+          <div className="max-w-6xl mx-auto animate-fade-in h-full">
+            {children}
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

package/src/components/layout/Header.tsx

@@ -0,0 +1,36 @@
+import { Bell, Search } from 'lucide-react';
+
+interface HeaderProps {
+  title?: string;
+  description?: string;
+}
+
+export function Header({ title, description }: HeaderProps) {
+  return (
+    <header className="h-16 bg-white/80 backdrop-blur-md sticky top-0 z-10 border-b border-[hsl(40,20%,90%)] flex items-center justify-between px-6 transition-all duration-300">
+      <div className="flex items-center gap-4">
+        {title && (
+          <div>
+            <h2 className="text-base font-semibold text-[hsl(30,20%,12%)]">{title}</h2>
+            {description && (
+              <p className="text-xs text-[hsl(30,8%,45%)]">{description}</p>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center gap-3">
+        <button className="h-9 w-9 rounded-lg bg-[hsl(40,20%,96%)] flex items-center justify-center text-[hsl(30,8%,45%)] hover:bg-[hsl(40,20%,94%)] hover:text-[hsl(30,20%,12%)] transition-colors">
+          <Search className="h-4 w-4" />
+        </button>
+        <button className="h-9 w-9 rounded-lg bg-[hsl(40,20%,96%)] flex items-center justify-center text-[hsl(30,8%,45%)] hover:bg-[hsl(40,20%,94%)] hover:text-[hsl(30,20%,12%)] transition-colors relative">
+          <Bell className="h-4 w-4" />
+          <span className="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-orange-500" />
+        </button>
+        <div className="h-9 w-9 rounded-lg bg-gradient-to-br from-orange-400 to-amber-500 flex items-center justify-center">
+          <span className="text-xs font-semibold text-white">N</span>
+        </div>
+      </div>
+    </header>
+  );
+}

package/src/components/layout/Sidebar.tsx

@@ -0,0 +1,103 @@
+import { useUiStore } from '@/stores/ui.store';
+import { cn } from '@/lib/utils';
+import {
+  Cpu,
+  MessageSquare,
+  Sparkles,
+  ChevronRight,
+  Settings
+} from 'lucide-react';
+
+const navItems = [
+  {
+    id: 'model' as const,
+    label: 'Models',
+    icon: Cpu,
+    color: 'text-[hsl(30,15%,10%)]'
+  },
+  {
+    id: 'providers' as const,
+    label: 'Providers',
+    icon: Sparkles,
+    color: 'text-[hsl(30,15%,10%)]'
+  },
+  {
+    id: 'channels' as const,
+    label: 'Channels',
+    icon: MessageSquare,
+    color: 'text-[hsl(30,15%,10%)]'
+  },
+  {
+    id: 'ui' as const,
+    label: 'Appearance',
+    icon: Settings,
+    color: 'text-[hsl(30,15%,10%)]'
+  }
+];
+
+export function Sidebar() {
+  const { activeTab, setActiveTab } = useUiStore();
+
+  return (
+    <aside className="w-[240px] bg-transparent flex flex-col h-full py-6 px-4">
+      {/* Logo Area */}
+      <div className="px-3 mb-8">
+        <div className="flex items-center gap-2 group cursor-pointer">
+          <div className="h-6 w-6 rounded-md bg-[hsl(30,15%,10%)] flex items-center justify-center transition-transform group-hover:scale-110">
+            <Sparkles className="h-4 w-4 text-white" />
+          </div>
+          <h1 className="text-lg font-bold text-[hsl(30,15%,10%)] tracking-tight">nextclaw</h1>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1">
+        <ul className="space-y-1">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = activeTab === item.id;
+
+            return (
+              <li key={item.id}>
+                <button
+                  onClick={() => setActiveTab(item.id)}
+                  className={cn(
+                    'group w-full flex items-center gap-3 px-3 py-2 rounded-lg text-[13px] font-medium transition-all duration-200',
+                    isActive
+                      ? 'bg-[hsl(40,10%,92%)] text-[hsl(30,15%,10%)]'
+                      : 'text-[hsl(30,8%,45%)] hover:bg-[hsl(40,10%,94%)] hover:text-[hsl(30,15%,10%)]'
+                  )}
+                >
+                  <Icon className={cn('h-4 w-4 transition-transform group-hover:scale-110', isActive ? 'text-[hsl(30,15%,10%)]' : 'text-[hsl(30,8%,45%)]')} />
+                  <span className="flex-1 text-left">{item.label}</span>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+
+      </nav>
+
+      {/* Bottom Profile Section */}
+      <div className="mt-auto px-1 pt-4">
+        <div className="flex items-center gap-2 mb-4 px-2">
+          <div className="flex gap-1.5 items-center">
+            <div className="w-2 h-2 rounded-full bg-amber-400" />
+            <span className="text-[11px] text-[hsl(30,8%,65%)]">Starting...</span>
+          </div>
+        </div>
+
+        <button className="w-full flex items-center gap-3 p-2 rounded-xl hover:bg-[hsl(40,10%,94%)] transition-all group">
+          <div className="h-8 w-8 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-white text-xs font-bold shadow-sm group-hover:scale-105 transition-transform">
+            WX
+          </div>
+          <div className="flex-1 text-left min-w-0">
+            <p className="text-[13px] font-semibold text-[hsl(30,15%,10%)] truncate">Wang Xiaotiao</p>
+            <p className="text-[11px] text-[hsl(30,8%,55%)] truncate">Free plan</p>
+          </div>
+          <ChevronRight className="h-4 w-4 text-[hsl(30,8%,65%)] group-hover:translate-x-0.5 transition-transform" />
+        </button>
+      </div>
+    </aside>
+  );
+}

package/src/components/ui/HighlightCard.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { ArrowRight } from 'lucide-react';
+
+interface HighlightCardProps {
+    category: string;
+    title: string;
+    description: string;
+    image: string;
+    gradient: string;
+    className?: string;
+}
+
+export function HighlightCard({ category, title, description, image, gradient, className }: HighlightCardProps) {
+    return (
+        <div className={cn(
+            'group relative overflow-hidden rounded-[1.5rem] bg-white border border-[hsl(40,10%,94%)] flex h-[180px] transition-all duration-300 hover:shadow-premium cursor-pointer',
+            className
+        )}>
+            <div className="flex-1 p-6 flex flex-col">
+                <span className="text-[10px] font-bold text-[hsl(30,8%,65%)] uppercase tracking-widest mb-2">{category}</span>
+                <h3 className="text-xl font-bold text-[hsl(30,15%,10%)] leading-tight mb-2 group-hover:text-amber-600 transition-colors">{title}</h3>
+                <p className="text-[13px] text-[hsl(30,8%,55%)] line-clamp-2 leading-relaxed max-w-[200px]">{description}</p>
+
+                <div className="mt-auto flex items-center gap-1 text-[11px] font-bold text-[hsl(30,15%,10%)] opacity-0 group-hover:opacity-100 transition-opacity">
+                    Learn more <ArrowRight className="h-3 w-3" />
+                </div>
+            </div>
+
+            <div className={cn('w-[160px] relative overflow-hidden', gradient)}>
+                <img
+                    src={image}
+                    alt={title}
+                    className="w-full h-full object-cover mix-blend-multiply opacity-90 group-hover:scale-110 transition-transform duration-500"
+                />
+                <div className="absolute inset-0 bg-gradient-to-l from-transparent to-white/10" />
+            </div>
+        </div>
+    );
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all duration-200 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline'
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };