gitspace 0.2.0-rc.20 → 0.2.0-rc.21

package/landing-page/src/components/landing/TerminalWindow.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { cn } from "../../lib/utils";
-
-interface TerminalWindowProps {
-  children: React.ReactNode;
-  title?: string;
-  className?: string;
-}
-
-export function TerminalWindow({ children, title = "bash", className }: TerminalWindowProps) {
-  return (
-    <div className={cn("rounded-lg overflow-hidden border border-zinc-800 bg-black/90 font-mono shadow-2xl", className)}>
-      <div className="flex items-center justify-between px-4 py-2 bg-zinc-900/50 border-b border-zinc-800">
-        <div className="flex space-x-2">
-          <div className="w-3 h-3 rounded-full bg-red-500/20 border border-red-500/50" />
-          <div className="w-3 h-3 rounded-full bg-yellow-500/20 border border-yellow-500/50" />
-          <div className="w-3 h-3 rounded-full bg-green-500/20 border border-green-500/50" />
-        </div>
-        <div className="text-xs text-zinc-500 font-medium">{title}</div>
-        <div className="w-16" /> {/* Spacer for centering */}
-      </div>
-      <div className="p-4 text-sm md:text-base text-zinc-300 overflow-x-auto">
-        {children}
-      </div>
-    </div>
-  );
-}

package/landing-page/src/components/landing/UseCases.tsx

@@ -1,55 +0,0 @@
-import { Quote, Star } from "lucide-react";
-import { Card, CardContent } from "../../app/components/ui/card";
-
-export function UseCases() {
-  const testimonials = [
-    {
-      quote: "I run 3-4 Claude agents in parallel now. Each in its own space. I check progress from my phone while making dinner. Context switching between tasks is instant.",
-      author: "Solo founder",
-      role: "Shipping 3x faster",
-      stars: 5
-    },
-    {
-      quote: "We share view-only links in Slack. Everyone can watch the agent work without stepping on each other. Game changer for debugging.",
-      author: "Tech lead",
-      role: "8-person startup",
-      stars: 5
-    },
-    {
-      quote: "No more 'hold on, let me stash my changes.' I have 6 workspaces open right now. Context switching is instant.",
-      author: "Senior engineer",
-      role: "Enterprise",
-      stars: 5
-    }
-  ];
-
-  return (
-    <section className="py-24 bg-zinc-900/20">
-      <div className="container px-4 mx-auto">
-        <h2 className="text-3xl md:text-5xl font-bold text-center mb-16">How developers use GitSpace</h2>
-        
-        <div className="grid md:grid-cols-3 gap-8">
-          {testimonials.map((item, i) => (
-            <Card key={i} className="bg-black/40 border-zinc-800 hover:border-zinc-700 transition-colors">
-              <CardContent className="pt-6">
-                <div className="flex gap-1 mb-4">
-                  {[...Array(item.stars)].map((_, i) => (
-                    <Star key={i} className="w-4 h-4 fill-green-500 text-green-500" />
-                  ))}
-                </div>
-                <Quote className="w-8 h-8 text-zinc-700 mb-4" />
-                <p className="text-zinc-300 leading-relaxed mb-6 italic">
-                  "{item.quote}"
-                </p>
-                <div className="border-t border-zinc-800 pt-4">
-                  <p className="font-bold text-white">{item.author}</p>
-                  <p className="text-sm text-zinc-500">{item.role}</p>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}

package/landing-page/src/components/landing/Workflow.tsx

@@ -1,101 +0,0 @@
-import { Plus, Play, Smartphone, GitMerge, ArrowRight } from "lucide-react";
-
-export function Workflow() {
-  return (
-    <section id="workflow" className="py-24 bg-zinc-950 relative overflow-hidden">
-      <div className="container px-4 mx-auto">
-        <div className="text-center mb-16">
-          <h2 className="text-3xl md:text-5xl font-bold mb-4">Built for how AI agents work</h2>
-          <p className="text-zinc-400 max-w-2xl mx-auto">
-            The old way: One branch. Wait for agent. Messy commits. Manual cleanup.<br />
-            <span className="text-green-400">The GitSpace way: Parallel work. Remote monitoring. Secure relay.</span>
-          </p>
-        </div>
-
-        <div className="relative">
-          {/* Connecting Line (Desktop) */}
-          <div className="hidden md:block absolute top-12 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-zinc-700 to-transparent" />
-
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10">
-            <div className="flex flex-col items-center text-center group">
-              <div className="w-24 h-24 rounded-2xl bg-black border border-zinc-800 flex items-center justify-center mb-6 shadow-xl group-hover:border-green-500/50 group-hover:shadow-green-500/10 transition-all duration-300 relative">
-                  <Plus className="w-10 h-10 text-zinc-400 group-hover:text-green-400 transition-colors" />
-                  <div className="absolute -bottom-3 bg-zinc-900 px-3 py-1 rounded-full text-xs font-bold border border-zinc-800 text-zinc-300">
-                      CREATE
-                  </div>
-              </div>
-              
-              <code className="bg-black/50 px-3 py-1 rounded text-sm font-mono text-green-400/80 mb-2 border border-white/5 w-full md:w-auto truncate max-w-[200px]">
-                  gssh add feature-x
-              </code>
-              
-              <p className="text-zinc-500 text-sm">
-                  Isolated workspace
-              </p>
-
-              {/* Mobile Arrow */}
-              <ArrowRight className="md:hidden w-6 h-6 text-zinc-700 my-4" />
-            </div>
-
-            <div className="flex flex-col items-center text-center group">
-              <div className="w-24 h-24 rounded-2xl bg-black border border-zinc-800 flex items-center justify-center mb-6 shadow-xl group-hover:border-green-500/50 group-hover:shadow-green-500/10 transition-all duration-300 relative">
-                  <Play className="w-10 h-10 text-zinc-400 group-hover:text-green-400 transition-colors" />
-                  <div className="absolute -bottom-3 bg-zinc-900 px-3 py-1 rounded-full text-xs font-bold border border-zinc-800 text-zinc-300">
-                      RUN
-                  </div>
-              </div>
-              
-              <code className="bg-black/50 px-3 py-1 rounded text-sm font-mono text-green-400/80 mb-2 border border-white/5 w-full md:w-auto truncate max-w-[200px]">
-                  claude "add auth system"
-              </code>
-              
-              <p className="text-zinc-500 text-sm">
-                  Agent runs for hours
-              </p>
-
-              {/* Mobile Arrow */}
-              <ArrowRight className="md:hidden w-6 h-6 text-zinc-700 my-4" />
-            </div>
-
-            <div className="flex flex-col items-center text-center group">
-              <div className="w-24 h-24 rounded-2xl bg-black border border-zinc-800 flex items-center justify-center mb-6 shadow-xl group-hover:border-green-500/50 group-hover:shadow-green-500/10 transition-all duration-300 relative">
-                  <Smartphone className="w-10 h-10 text-zinc-400 group-hover:text-green-400 transition-colors" />
-                  <div className="absolute -bottom-3 bg-zinc-900 px-3 py-1 rounded-full text-xs font-bold border border-zinc-800 text-zinc-300">
-                      MONITOR
-                  </div>
-              </div>
-              
-              <code className="bg-black/50 px-3 py-1 rounded text-sm font-mono text-green-400/80 mb-2 border border-white/5 w-full md:w-auto truncate max-w-[200px]">
-                  Check in from your phone
-              </code>
-              
-              <p className="text-zinc-500 text-sm">
-                  Get notified when done
-              </p>
-
-              {/* Mobile Arrow */}
-              <ArrowRight className="md:hidden w-6 h-6 text-zinc-700 my-4" />
-            </div>
-
-            <div className="flex flex-col items-center text-center group">
-              <div className="w-24 h-24 rounded-2xl bg-black border border-zinc-800 flex items-center justify-center mb-6 shadow-xl group-hover:border-green-500/50 group-hover:shadow-green-500/10 transition-all duration-300 relative">
-                  <GitMerge className="w-10 h-10 text-zinc-400 group-hover:text-green-400 transition-colors" />
-                  <div className="absolute -bottom-3 bg-zinc-900 px-3 py-1 rounded-full text-xs font-bold border border-zinc-800 text-zinc-300">
-                      SHIP
-                  </div>
-              </div>
-              
-              <code className="bg-black/50 px-3 py-1 rounded text-sm font-mono text-green-400/80 mb-2 border border-white/5 w-full md:w-auto truncate max-w-[200px]">
-                  gssh switch feature-x
-              </code>
-              
-              <p className="text-zinc-500 text-sm">
-                  Instant context switch
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}

package/landing-page/src/components/layout/DashboardNavbar.tsx

@@ -1,37 +0,0 @@
-import { Link } from "react-router-dom";
-import { Terminal, Bell, ChevronDown } from "lucide-react";
-import { Button } from "../../app/components/ui/button";
-
-export function DashboardNavbar() {
-  return (
-    <nav className="border-b border-white/10 bg-black">
-      <div className="container mx-auto px-4 h-14 flex items-center justify-between">
-        <Link to="/dashboard" className="flex items-center gap-2 font-semibold text-lg tracking-tight">
-          <Terminal className="h-5 w-5 text-green-500" />
-          <span>gitspace.sh</span>
-        </Link>
-        
-        <div className="flex items-center gap-4">
-          <div className="flex items-center gap-2 text-sm font-medium hover:bg-white/5 px-2 py-1.5 rounded-md cursor-pointer transition-colors">
-            <div className="h-6 w-6 rounded-full bg-green-500/20 flex items-center justify-center text-green-500 text-xs">B</div>
-            <span>brad</span>
-            <ChevronDown className="h-4 w-4 text-muted-foreground" />
-          </div>
-          
-          <div className="h-8 w-[1px] bg-white/10" />
-          
-          <Button variant="ghost" size="icon" className="relative text-muted-foreground hover:text-foreground">
-            <Bell className="h-5 w-5" />
-            <span className="absolute top-2 right-2 h-2 w-2 rounded-full bg-red-500 border-2 border-black" />
-          </Button>
-          
-          <Link to="/">
-            <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground">
-              Logout
-            </Button>
-          </Link>
-        </div>
-      </div>
-    </nav>
-  );
-}

package/landing-page/src/components/layout/Footer.tsx

@@ -1,55 +0,0 @@
-import { Link } from "react-router-dom";
-import { Terminal } from "lucide-react";
-
-export function Footer() {
-  return (
-    <footer className="border-t border-white/10 bg-black py-12 text-sm">
-      <div className="container mx-auto px-4">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
-          <div className="space-y-4">
-            <div className="flex items-center gap-2 font-semibold text-lg tracking-tight">
-              <Terminal className="h-5 w-5 text-green-500" />
-              <span>gitspace.sh</span>
-            </div>
-          </div>
-          
-          <div className="space-y-4">
-            <h4 className="font-semibold">Product</h4>
-            <ul className="space-y-2 text-muted-foreground">
-              <li><Link to="/#features" className="hover:text-foreground">Features</Link></li>
-              <li><Link to="/#pricing" className="hover:text-foreground">Pricing</Link></li>
-              <li><Link to="/docs?section=security-notes" className="hover:text-foreground">Security</Link></li>
-              <li><Link to="/#workflow" className="hover:text-foreground">Workflow</Link></li>
-            </ul>
-          </div>
-
-          <div className="space-y-4">
-            <h4 className="font-semibold">Resources</h4>
-            <ul className="space-y-2 text-muted-foreground">
-              <li><Link to="/docs" className="hover:text-foreground">Docs</Link></li>
-              <li><a href="https://github.com/inkibra/gitspace.sh" target="_blank" rel="noopener noreferrer" className="hover:text-foreground">GitHub</a></li>
-              <li><a href="https://discord.gg/kHRWYPnR" target="_blank" rel="noopener noreferrer" className="hover:text-foreground">Discord</a></li>
-            </ul>
-          </div>
-
-          <div className="space-y-4">
-            <h4 className="font-semibold">Company</h4>
-            <ul className="space-y-2 text-muted-foreground">
-              <li><a href="https://www.inkibra.com/ink" target="_blank" rel="noopener noreferrer" className="hover:text-foreground">About</a></li>
-              <li><a href="https://www.inkibra.com/ink/blog" target="_blank" rel="noopener noreferrer" className="hover:text-foreground">Blog</a></li>
-            </ul>
-          </div>
-        </div>
-        
-        <div className="pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-4 text-muted-foreground">
-          <p>© 2026 inkibra, Inc.</p>
-          <div className="flex gap-6">
-            <a href="https://www.inkibra.com/legal/privacy-policy" target="_blank" rel="noopener noreferrer" className="hover:text-foreground">Privacy</a>
-            <a href="https://www.inkibra.com/legal/terms-of-service" target="_blank" rel="noopener noreferrer" className="hover:text-foreground">Terms</a>
-            <Link to="/docs?section=security-notes" className="hover:text-foreground">Security</Link>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-}

package/landing-page/src/components/layout/LandingNavbar.tsx

@@ -1,82 +0,0 @@
-import { Link } from "react-router-dom";
-import { Button } from "../../app/components/ui/button";
-import { Terminal, Menu, X, Github } from "lucide-react";
-import { useState } from "react";
-import { motion, AnimatePresence } from "motion/react";
-
-export function LandingNavbar() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const navLinks = [
-    { name: "Features", href: "/#features" },
-    { name: "Pricing", href: "/#pricing" },
-    { name: "Docs", href: "/docs" },
-  ];
-
-  return (
-    <nav className="border-b border-white/10 bg-black/50 backdrop-blur-md sticky top-0 z-50">
-      <div className="container mx-auto px-4 h-14 flex items-center justify-between">
-        <Link to="/" className="flex items-center gap-2 font-semibold text-lg tracking-tight z-50">
-          <Terminal className="h-5 w-5 text-green-500" />
-          <span>gitspace.sh</span>
-        </Link>
-        
-        {/* Desktop Nav */}
-        <div className="hidden md:flex items-center gap-6 text-sm font-medium text-muted-foreground">
-          {navLinks.map((link) => (
-            <Link key={link.name} to={link.href} className="hover:text-foreground transition-colors">
-              {link.name}
-            </Link>
-          ))}
-          <a href="https://github.com/inkibra/gitspace.sh" target="_blank" rel="noopener noreferrer">
-            <Button size="sm" className="bg-white text-black hover:bg-gray-200">
-              <Github className="w-4 h-4 mr-2" />
-              Star on GitHub
-            </Button>
-          </a>
-        </div>
-
-        {/* Mobile Menu Toggle */}
-        <button 
-          className="md:hidden z-50 p-2 text-zinc-400 hover:text-white"
-          onClick={() => setIsOpen(!isOpen)}
-        >
-          {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
-        </button>
-      </div>
-
-      {/* Mobile Nav Overlay */}
-      <AnimatePresence>
-        {isOpen && (
-          <motion.div
-            initial={{ opacity: 0, y: -20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            transition={{ duration: 0.2 }}
-            className="fixed inset-0 z-40 md:hidden bg-black/95 backdrop-blur-xl pt-24 px-6 flex flex-col gap-8"
-          >
-            <div className="flex flex-col gap-6 text-xl font-medium text-zinc-400">
-              {navLinks.map((link) => (
-                <Link 
-                  key={link.name} 
-                  to={link.href} 
-                  onClick={() => setIsOpen(false)}
-                  className="hover:text-white transition-colors"
-                >
-                  {link.name}
-                </Link>
-              ))}
-            </div>
-            
-            <a href="https://github.com/inkibra/gitspace.sh" target="_blank" rel="noopener noreferrer" onClick={() => setIsOpen(false)} className="mt-auto mb-12">
-              <Button size="lg" className="w-full bg-white text-black hover:bg-gray-200 text-base py-6">
-                <Github className="w-5 h-5 mr-2" />
-                Star on GitHub
-              </Button>
-            </a>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </nav>
-  );
-}

package/landing-page/src/components/ui/badge.tsx

@@ -1,39 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-        success: "border-transparent bg-green-500/15 text-green-500 hover:bg-green-500/25",
-        warning: "border-transparent bg-amber-500/15 text-amber-500 hover:bg-amber-500/25",
-        error: "border-transparent bg-red-500/15 text-red-500 hover:bg-red-500/25",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
-}
-
-export { Badge, badgeVariants }

package/landing-page/src/components/ui/breadcrumb.tsx

@@ -1,115 +0,0 @@
-import * as React from "react"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
-import { Slot } from "@radix-ui/react-slot"
-
-import { cn } from "../../lib/utils"
-
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
-  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
-
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
-    )}
-    {...props}
-  />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
-
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
-
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
-  }
->(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
-
-  return (
-    <Comp
-      ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
-      {...props}
-    />
-  )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
-
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("font-normal text-foreground", className)}
-    {...props}
-  />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
-
-const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={cn("[&>svg]:size-3.5", className)}
-    {...props}
-  >
-    {children ?? <ChevronRight />}
-  </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
-
-const BreadcrumbEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis"
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-}

package/landing-page/src/components/ui/button.tsx

@@ -1,57 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-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-colors 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",
-        terminal: "bg-green-600 text-black hover:bg-green-500 font-mono",
-      },
-      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, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }

package/landing-page/src/components/ui/card.tsx

@@ -1,79 +0,0 @@
-import * as React from "react"
-
-import { cn } from "../../lib/utils"
-
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
-    )}
-    {...props}
-  />
-))
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }