gitspace 0.2.0-rc.1

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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,55 @@
+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. When they're done, git stack turns the mess into reviewable PRs.",
+      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

@@ -0,0 +1,101 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,79 @@
+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 }