@bluefly/openstandardagents 0.2.4 → 0.2.7

package/website/components/layout/Header.tsx

@@ -1,60 +1,63 @@
 'use client';
 
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import { useState } from 'react';
 
 export function Header() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const pathname = usePathname();
+  
+  const isActive = (path: string) => pathname === path || pathname?.startsWith(path + '/');
 
   return (
     <header className="bg-white border-b border-gray-300 sticky top-0 z-50">
       <nav className="container mx-auto max-w-6xl px-4">
         <div className="flex items-center justify-between h-16">
-          <Link href="/" className="flex items-center space-x-3 group">
+          <Link href="/" className="flex items-center space-x-2 group">
             <img
               src="/assets/brand/ossa-logo.svg"
               alt="OSSA Logo"
               className="h-10 w-10 transition-transform group-hover:scale-110"
             />
-            <span className="text-2xl font-bold bg-gradient-to-r from-[#0066CC] to-[#00B8D4] bg-clip-text text-transparent">
+            <span className="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
               OSSA
             </span>
           </Link>
 
           {/* Desktop Navigation */}
-          <div className="hidden md:flex items-center space-x-6">
-            <Link href="/about" className="text-gray-600 hover:text-[#0066CC] transition-colors font-medium">
+          <div className="hidden md:flex items-center space-x-3 lg:space-x-6 text-sm lg:text-base">
+            <Link href="/about" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/about') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
               About
             </Link>
-            <Link href="/specification" className="text-gray-600 hover:text-[#0066CC] transition-colors font-medium">
+            <Link href="/specification" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/specification') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
               Specification
             </Link>
-            <Link href="/docs" className="text-gray-600 hover:text-[#0066CC] transition-colors font-medium">
-              Documentation
-            </Link>
-            <Link href="/schema" className="text-gray-600 hover:text-[#0066CC] transition-colors font-medium">
+            <Link href="/schema" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/schema') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
               Schema
             </Link>
-            <Link href="/playground" className="text-gray-600 hover:text-[#0066CC] transition-colors font-medium">
+            <Link href="/docs" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/docs') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
+              Docs
+            </Link>
+            <Link href="/blog" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/blog') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
+              Blog
+            </Link>
+            <Link href="/playground" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/playground') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
               Playground
             </Link>
-            <Link href="/examples" className="text-gray-600 hover:text-[#0066CC] transition-colors font-medium">
+            <Link href="/examples" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/examples') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
               Examples
             </Link>
-            <Link href="/blog" className="text-gray-600 hover:text-[#0066CC] transition-colors font-medium">
-              Blog
-            </Link>
             <a
               href="https://github.com/blueflyio/openstandardagents"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-gray-600 hover:text-[#0066CC] transition-colors flex items-center gap-1 font-medium"
+              className="text-gray-600 hover:text-primary transition-colors flex items-center font-medium"
               title="View on GitHub"
             >
               <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                 <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
               </svg>
-              GitHub
             </a>
           </div>
 
@@ -92,77 +95,76 @@ export function Header() {
         </div>
 
         {/* Mobile Navigation */}
-        {mobileMenuOpen && (
-          <div
-            id="mobile-menu"
-            className="md:hidden py-4 border-t border-gray-300"
-            role="navigation"
-            aria-label="Mobile navigation"
-          >
+        <div
+          id="mobile-menu"
+          className={`md:hidden overflow-hidden transition-all duration-300 ease-in-out ${
+            mobileMenuOpen ? 'max-h-96 opacity-100 py-4 border-t border-gray-300' : 'max-h-0 opacity-0'
+          }`}
+          role="navigation"
+          aria-label="Mobile navigation"
+        >
             <Link
               href="/about"
-              className="block py-2 text-gray-600 hover:text-[#0066CC] transition-colors font-medium"
+              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/about') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
               onClick={() => setMobileMenuOpen(false)}
             >
               About
             </Link>
             <Link
               href="/specification"
-              className="block py-2 text-gray-600 hover:text-[#0066CC] transition-colors font-medium"
+              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/specification') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
               onClick={() => setMobileMenuOpen(false)}
             >
               Specification
             </Link>
+            <Link
+              href="/schema"
+              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/schema') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Schema
+            </Link>
             <Link
               href="/docs"
-              className="block py-2 text-gray-600 hover:text-[#0066CC] transition-colors font-medium"
+              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/docs') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
               onClick={() => setMobileMenuOpen(false)}
             >
-              Documentation
+              Docs
             </Link>
             <Link
-              href="/schema"
-              className="block py-2 text-gray-600 hover:text-[#0066CC] transition-colors font-medium"
+              href="/blog"
+              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/blog') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
               onClick={() => setMobileMenuOpen(false)}
             >
-              Schema
+              Blog
             </Link>
             <Link
               href="/playground"
-              className="block py-2 text-gray-600 hover:text-[#0066CC] transition-colors font-medium"
+              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/playground') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
               onClick={() => setMobileMenuOpen(false)}
             >
               Playground
             </Link>
             <Link
               href="/examples"
-              className="block py-2 text-gray-600 hover:text-[#0066CC] transition-colors font-medium"
+              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/examples') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
               onClick={() => setMobileMenuOpen(false)}
             >
               Examples
             </Link>
-            <Link
-              href="/blog"
-              className="block py-2 text-gray-600 hover:text-[#0066CC] transition-colors font-medium"
-              onClick={() => setMobileMenuOpen(false)}
-            >
-              Blog
-            </Link>
             <a
               href="https://github.com/blueflyio/openstandardagents"
               target="_blank"
               rel="noopener noreferrer"
-              className="block py-2 text-gray-600 hover:text-[#0066CC] transition-colors flex items-center gap-2 font-medium"
+              className="flex items-center gap-2 py-2 text-gray-600 hover:text-primary transition-colors font-medium"
               onClick={() => setMobileMenuOpen(false)}
               title="View on GitHub"
             >
               <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                 <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
               </svg>
-              GitHub
             </a>
           </div>
-        )}
       </nav>
     </header>
   );

package/website/components/schema/SchemaComponentsAccordion.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { useState } from 'react';
+
+interface AccordionItemProps {
+  title: string;
+  children: React.ReactNode;
+  isOpen: boolean;
+  onToggle: () => void;
+  borderColor: string;
+  bgColor: string;
+}
+
+function AccordionItem({ title, children, isOpen, onToggle, borderColor, bgColor }: AccordionItemProps) {
+  return (
+    <div className={`bg-white rounded-lg border-l-4 ${borderColor} shadow-md transition-all`}>
+      <button
+        onClick={onToggle}
+        className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
+        aria-expanded={isOpen}
+      >
+        <h3 className="text-xl font-bold text-gray-900">{title}</h3>
+        <svg
+          className={`w-5 h-5 text-gray-600 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+      {isOpen && (
+        <div className="px-6 pb-6 border-t border-gray-200">
+          <div className="pt-4">
+            {children}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface SchemaComponentsAccordionProps {
+  items: Array<{
+    id: string;
+    title: string;
+    content: React.ReactNode;
+    borderColor: string;
+  }>;
+}
+
+export function SchemaComponentsAccordion({ items }: SchemaComponentsAccordionProps) {
+  const [openItems, setOpenItems] = useState<Set<string>>(new Set([items[0]?.id]));
+
+  const toggleItem = (id: string) => {
+    setOpenItems(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      {items.map((item) => (
+        <AccordionItem
+          key={item.id}
+          title={item.title}
+          isOpen={openItems.has(item.id)}
+          onToggle={() => toggleItem(item.id)}
+          borderColor={item.borderColor}
+          bgColor="bg-white"
+        >
+          {item.content}
+        </AccordionItem>
+      ))}
+    </div>
+  );
+}
+

package/website/components/schema/SchemaExplorer.tsx

@@ -141,16 +141,16 @@ export function SchemaExplorer({ schema }: SchemaExplorerProps) {
     : schema;
 
   return (
-    <div className="grid lg:grid-cols-2 gap-6">
-      {/* Property Tree */}
+    <div className="space-y-6">
+      {/* Property Tree - Row 1 */}
       <div className="card">
         <h2 className="text-xl font-semibold mb-4">Schema Structure</h2>
-        <div className="space-y-1 max-h-[600px] overflow-y-auto">
+        <div className="space-y-1 max-h-[400px] overflow-y-auto">
           {rootProperties.map((prop) => renderProperty(prop))}
         </div>
       </div>
 
-      {/* Property Details */}
+      {/* Property Details - Row 2 */}
       <div className="card">
         <h2 className="text-xl font-semibold mb-4">
           {selectedPath || 'Schema Overview'}

package/website/components/ui/Badge.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'primary' | 'secondary';
+type BadgeSize = 'sm' | 'md' | 'lg';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Badge content */
+  children: React.ReactNode;
+  /** Visual variant */
+  variant?: BadgeVariant;
+  /** Size variant */
+  size?: BadgeSize;
+  /** Icon to display before text */
+  icon?: React.ReactNode;
+  /** Dot indicator instead of full background */
+  dot?: boolean;
+}
+
+const variantClasses: Record<BadgeVariant, string> = {
+  default: 'bg-gray-100 text-gray-800 border border-gray-300',
+  success: 'bg-success-100 text-success-800 border border-success-300',
+  warning: 'bg-warning-100 text-warning-800 border border-warning-300',
+  error: 'bg-error-100 text-error-800 border border-error-300',
+  info: 'bg-info-100 text-info-800 border border-info-300',
+  primary: 'bg-primary-100 text-primary-800 border border-primary-300',
+  secondary: 'bg-secondary-100 text-secondary-800 border border-secondary-300',
+};
+
+const sizeClasses: Record<BadgeSize, string> = {
+  sm: 'px-2 py-0.5 text-xs',
+  md: 'px-3 py-1 text-sm',
+  lg: 'px-4 py-1.5 text-base',
+};
+
+const dotVariantClasses: Record<BadgeVariant, string> = {
+  default: 'bg-gray-500',
+  success: 'bg-success-500',
+  warning: 'bg-warning-500',
+  error: 'bg-error-500',
+  info: 'bg-info-500',
+  primary: 'bg-primary-500',
+  secondary: 'bg-secondary-500',
+};
+
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  (
+    {
+      className = '',
+      variant = 'default',
+      size = 'md',
+      children,
+      icon,
+      dot = false,
+      ...props
+    },
+    ref
+  ) => {
+    const classes = [
+      'inline-flex items-center justify-center rounded-full font-semibold',
+      variantClasses[variant],
+      sizeClasses[size],
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <span ref={ref} className={classes} {...props}>
+        {dot && (
+          <span
+            className={`w-2 h-2 rounded-full mr-1.5 ${dotVariantClasses[variant]}`}
+            aria-hidden="true"
+          />
+        )}
+        {icon && <span className="mr-1">{icon}</span>}
+        {children}
+      </span>
+    );
+  }
+);
+
+Badge.displayName = 'Badge';

package/website/components/ui/Button.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success';
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Button content */
+  children: React.ReactNode;
+  /** Visual variant */
+  variant?: ButtonVariant;
+  /** Size variant */
+  size?: ButtonSize;
+  /** Full width button */
+  fullWidth?: boolean;
+  /** Loading state */
+  loading?: boolean;
+  /** Icon to display before text */
+  iconLeft?: React.ReactNode;
+  /** Icon to display after text */
+  iconRight?: React.ReactNode;
+  /** Accessible label for screen readers */
+  ariaLabel?: string;
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary:
+    'bg-gradient-to-r from-secondary via-primary to-accent text-white hover:shadow-lg hover:scale-105 focus:ring-primary/30',
+  secondary:
+    'bg-secondary text-white hover:bg-secondary/90 hover:shadow-md focus:ring-secondary/30',
+  outline:
+    'border-2 border-primary text-primary bg-transparent hover:bg-primary hover:text-white focus:ring-primary/30',
+  ghost:
+    'text-primary bg-transparent hover:bg-primary/10 focus:ring-primary/20',
+  danger:
+    'bg-error text-white hover:bg-error-600 hover:shadow-md focus:ring-error/30',
+  success:
+    'bg-success text-white hover:bg-success-600 hover:shadow-md focus:ring-success/30',
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: 'px-4 py-2 text-sm min-h-[36px]',
+  md: 'px-6 py-3 text-base min-h-[44px]',
+  lg: 'px-8 py-4 text-lg min-h-[52px]',
+};
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className = '',
+      variant = 'primary',
+      size = 'md',
+      fullWidth = false,
+      children,
+      loading = false,
+      iconLeft,
+      iconRight,
+      disabled,
+      ariaLabel,
+      ...props
+    },
+    ref
+  ) => {
+    const baseClasses =
+      'inline-flex items-center justify-center rounded-lg font-semibold transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
+
+    const classes = [
+      baseClasses,
+      variantClasses[variant],
+      sizeClasses[size],
+      fullWidth ? 'w-full' : 'w-auto',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <button
+        ref={ref}
+        className={classes}
+        disabled={disabled || loading}
+        aria-label={ariaLabel}
+        aria-busy={loading}
+        {...props}
+      >
+        {loading && (
+          <svg
+            className="animate-spin -ml-1 mr-3 h-5 w-5"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+        )}
+        {!loading && iconLeft && <span className="mr-2">{iconLeft}</span>}
+        {children}
+        {!loading && iconRight && <span className="ml-2">{iconRight}</span>}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';

package/website/components/ui/Card.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+
+type CardVariant = 'default' | 'featured' | 'interactive' | 'ghost';
+type CardPadding = 'sm' | 'md' | 'lg';
+type CardElevation = 0 | 1 | 2 | 3;
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Card content */
+  children: React.ReactNode;
+  /** Visual variant */
+  variant?: CardVariant;
+  /** Padding size */
+  padding?: CardPadding;
+  /** Shadow elevation level */
+  elevation?: CardElevation;
+  /** Enable hover effects */
+  hover?: boolean;
+  /** Make card clickable */
+  onClick?: () => void;
+}
+
+const variantClasses: Record<CardVariant, string> = {
+  default: 'bg-white border border-gray-200 rounded-xl',
+  featured:
+    'bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-primary/20 rounded-xl',
+  interactive:
+    'bg-white border-2 border-gray-200 rounded-xl cursor-pointer hover:border-primary',
+  ghost: 'bg-transparent border-none',
+};
+
+const paddingClasses: Record<CardPadding, string> = {
+  sm: 'p-4',
+  md: 'p-6',
+  lg: 'p-8',
+};
+
+const elevationClasses: Record<CardElevation, string> = {
+  0: 'shadow-none',
+  1: 'shadow-sm',
+  2: 'shadow-md',
+  3: 'shadow-lg',
+};
+
+const hoverClasses = 'hover:shadow-xl hover:-translate-y-1 transition-all duration-300';
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  (
+    {
+      className = '',
+      variant = 'default',
+      padding = 'md',
+      elevation = 1,
+      hover = false,
+      children,
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
+    const classes = [
+      variantClasses[variant],
+      paddingClasses[padding],
+      elevationClasses[elevation],
+      hover || onClick ? hoverClasses : '',
+      onClick ? 'cursor-pointer' : '',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <div
+        ref={ref}
+        className={classes}
+        onClick={onClick}
+        role={onClick ? 'button' : undefined}
+        tabIndex={onClick ? 0 : undefined}
+        onKeyDown={
+          onClick
+            ? (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  onClick();
+                }
+              }
+            : undefined
+        }
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+// Card sub-components for better composition
+export const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <div className={`mb-4 ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+CardHeader.displayName = 'CardHeader';
+
+export const CardTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <h3 className={`text-2xl font-semibold text-gray-900 ${className}`} {...props}>
+      {children}
+    </h3>
+  );
+};
+
+CardTitle.displayName = 'CardTitle';
+
+export const CardDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <p className={`text-gray-600 ${className}`} {...props}>
+      {children}
+    </p>
+  );
+};
+
+CardDescription.displayName = 'CardDescription';
+
+export const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <div className={className} {...props}>
+      {children}
+    </div>
+  );
+};
+
+CardContent.displayName = 'CardContent';
+
+export const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <div className={`mt-4 pt-4 border-t border-gray-200 ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+CardFooter.displayName = 'CardFooter';