npm - git0 - Versions diffs - 0.3.16 → 0.3.18 - Mend

git0 0.3.16 → 0.3.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/docs/README.md +20 -0
package/docs/app/(home)/docs-home.css +235 -0
package/docs/app/(home)/layout.tsx +12 -0
package/docs/app/(home)/page.tsx +27 -0
package/docs/app/docs/[[...slug]]/page.tsx +84 -0
package/docs/app/docs/api/docs-search/route.ts +11 -0
package/docs/app/docs/layout.tsx +16 -0
package/docs/app/docs/llms-full.txt/route.ts +15 -0
package/docs/app/docs/llms.mdx/docs/[[...slug]]/route.ts +24 -0
package/docs/app/globals.css +814 -0
package/docs/app/layout.config.tsx +32 -0
package/docs/app/layout.tsx +22 -0
package/docs/app/provider.tsx +20 -0
package/docs/cli.json +11 -0
package/docs/components/DocsHomepage/code-example.tsx +123 -0
package/docs/components/DocsHomepage/features-grid.tsx +92 -0
package/docs/components/DocsHomepage/footer.tsx +58 -0
package/docs/components/DocsHomepage/hero-section.tsx +114 -0
package/docs/components/DocsHomepage/project-types.tsx +114 -0
package/docs/components/fumadocs/ai/ask-ai-dropdown.tsx +299 -0
package/docs/components/fumadocs/ai/llm-copy-button.tsx +61 -0
package/docs/components/fumadocs/api/api-page.client.tsx +7 -0
package/docs/components/fumadocs/api/api-page.tsx +7 -0
package/docs/components/fumadocs/layout/breadcrumb.tsx +36 -0
package/docs/components/fumadocs/layout/search.tsx +55 -0
package/docs/components/fumadocs/layout/theme-dropdown.tsx +3 -0
package/docs/components/fumadocs/layout/theme-provider.tsx +15 -0
package/docs/components/fumadocs/layout/theme-toggle.tsx +40 -0
package/docs/components/ui/badge.tsx +50 -0
package/docs/components/ui/button.tsx +66 -0
package/docs/components/ui/collapsible.tsx +44 -0
package/docs/components/ui/slider.tsx +36 -0
package/docs/components/ui/tooltip.tsx +63 -0
package/docs/components/ui/video-modal.tsx +238 -0
package/docs/content/docs/fm.mdx +11 -0
package/docs/content/docs/git0.mdx +104 -0
package/docs/content/docs/github-api.mdx +764 -0
package/docs/content/docs/index.mdx +98 -0
package/docs/content/docs/meta.json +15 -0
package/docs/content/docs/modules.mdx +10 -0
package/docs/lib/fumadocs/customize-docs.ts +47 -0
package/docs/lib/fumadocs/generate-api-docs.ts +73 -0
package/docs/lib/fumadocs/source.tsx +50 -0
package/docs/lib/utils.ts +10 -0
package/docs/mdx-components.tsx +21 -0
package/docs/next-env.d.ts +7 -0
package/docs/next.config.ts +35 -0
package/docs/package.json +61 -0
package/docs/postcss.config.mjs +5 -0
package/docs/public/apple-touch-icon.png +0 -0
package/docs/public/favicon-192.png +0 -0
package/docs/public/favicon-512.png +0 -0
package/docs/public/favicon.ico +0 -0
package/docs/public/manifest.webmanifest +14 -0
package/docs/source.config.ts +29 -0
package/docs/tsconfig.json +50 -0
package/docs/vite.config.ts +2 -0
package/docs/wrangler.jsonc +13 -0
package/package.json +1 -1

package/docs/app/layout.config.tsx ADDED Viewed

@@ -0,0 +1,32 @@
+/**
+ * @file layout.config.tsx
+ * @description Configuration for the documentation layout, including navigation and links.
+ */
+import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
+import { BookOpen, Link2 } from 'lucide-react';
+import { docsConfig } from '@/lib/fumadocs/customize-docs';
+import { ThemeDropdown } from '@/components/fumadocs/layout/theme-dropdown';
+export const baseOptions: BaseLayoutProps = {
+  nav: {
+    title: (
+      <span className="inline-flex items-center gap-2">
+        { docsConfig.favicon ? <img src={docsConfig.favicon} alt="Logo" /> : <Link2 />}
+        {docsConfig.title}
+      </span>
+    ),
+  },
+  links: [
+    {
+      label: 'Docs',
+      icon: <BookOpen />,
+      text: 'Docs',
+      url: '/docs',
+    },
+    {
+      type: 'custom' as const,
+      children: <ThemeDropdown />,
+    },
+  ],
+  githubUrl: docsConfig.github,
+};

package/docs/app/layout.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+/**
+ * @file layout.tsx
+ * @description Root layout component that wraps the entire application.
+ */
+import type { ReactNode } from 'react';
+import { Provider } from './provider';
+import './globals.css';
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <html
+      lang="en"
+      suppressHydrationWarning
+    >
+      <body className="flex flex-col min-h-screen">
+        <Provider>{children}</Provider>
+        {/* <RootProvider>{children}</RootProvider> */}
+      </body>
+    </html>
+  );
+}

package/docs/app/provider.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+/**
+ * @file provider.tsx
+ * @description Root provider component that sets up Fumadocs and search functionality.
+ */
+'use client';
+import { RootProvider } from 'fumadocs-ui/provider/next';
+import SearchDialog from '@/components/fumadocs/layout/search';
+import type { ReactNode } from 'react';
+export function Provider({ children }: { children: ReactNode }) {
+  return (
+    <RootProvider
+      search={{
+        SearchDialog,
+      }}
+    >
+      {children}
+    </RootProvider>
+  );
+}

package/docs/cli.json ADDED Viewed

@@ -0,0 +1,11 @@
+{
+  "aliases": {
+    "uiDir": "./components/ui",
+    "componentsDir": "./components",
+    "blockDir": "./components",
+    "cssDir": "./styles",
+    "libDir": "./lib"
+  },
+  "baseDir": "",
+  "commands": {}
+}

package/docs/components/DocsHomepage/code-example.tsx ADDED Viewed

@@ -0,0 +1,123 @@
+/**
+ * @file code-example.tsx
+ * @description Interactive component displaying git0 usage examples.
+ */
+"use client"
+import { useState, useEffect, useRef } from "react"
+import { Button } from "@/components/ui/button"
+import { Copy, Check } from "lucide-react"
+import hljs from 'highlight.js/lib/core'
+import bash from 'highlight.js/lib/languages/bash'
+import 'highlight.js/styles/github-dark.css'
+// Register languages
+hljs.registerLanguage('bash', bash)
+const codeExamples = {
+  search: `# Search for repositories by name
+g react starter
+# g and git0 both work
+git0 react starter`,
+  download: `# Direct download from GitHub URL
+g https://github.com/facebook/react
+# Download using owner/repo shorthand
+git0 facebook/react
+# Use git0 without installing (only node needed)
+npx git0 facebook/react`,
+  paths: `# Download only one folder — paste the GitHub link as you copied it
+g https://github.com/facebook/react/tree/main/packages/react-dom
+# ...or one file
+g https://github.com/debate/debate-ai.com/blob/master/.continue/agents/new-config.yaml
+# Same thing, without a URL
+git0 facebook/react/packages/react-dom
+git0 facebook/react --path=packages/react-dom`,
+  history: `# A specific branch, tag or commit
+git0 facebook/react --branch=v18.2.0
+# With the full .git history attached after the download
+git0 facebook/react --history
+# History only — no working files at all
+git0 facebook/react --history-only --mirror`,
+  releases: `# Download the latest release for your system
+gg user/repo`,
+}
+type TabKey = keyof typeof codeExamples
+const tabLabels: Record<TabKey, string> = {
+  search: "Search",
+  download: "Download",
+  paths: "Partial Paths",
+  history: "History",
+  releases: "Releases",
+}
+export function CodeExample() {
+  const [activeTab, setActiveTab] = useState<TabKey>("search")
+  const [copied, setCopied] = useState(false)
+  const codeRef = useRef<HTMLElement>(null)
+  const copyCode = () => {
+    navigator.clipboard.writeText(codeExamples[activeTab])
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+  useEffect(() => {
+    if (codeRef.current) {
+      // Remove previous highlighting before applying new highlighting
+      delete codeRef.current.dataset.highlighted
+      hljs.highlightElement(codeRef.current)
+    }
+  }, [activeTab])
+  return (
+    <section className="py-20 md:py-32 border-b border-border">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl md:text-4xl font-bold mb-4">
+            Usage <span className="text-primary">Examples</span>
+          </h2>
+          <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
+            One command to find a repo, download exactly what you need, install it and open it in your editor.
+          </p>
+        </div>
+        <div className="max-w-4xl mx-auto">
+          <div className="bg-card border border-border rounded-xl overflow-hidden">
+            <div className="flex items-center justify-between border-b border-border px-4 py-3 overflow-x-auto">
+              <div className="flex gap-1">
+                {(Object.keys(codeExamples) as TabKey[]).map((tab) => (
+                  <button
+                    key={tab}
+                    onClick={() => setActiveTab(tab)}
+                    className={`px-3 py-1.5 text-sm rounded-md transition-colors whitespace-nowrap ${activeTab === tab
+                      ? "bg-primary text-primary-foreground"
+                      : "text-muted-foreground hover:text-foreground hover:bg-secondary"
+                      }`}
+                  >
+                    {tabLabels[tab]}
+                  </button>
+                ))}
+              </div>
+              <Button variant="ghost" size="sm" onClick={copyCode} className="gap-2 ml-2 flex-shrink-0">
+                {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+                {copied ? "Copied" : "Copy"}
+              </Button>
+            </div>
+            <pre className="p-6 overflow-x-auto text-sm max-h-[400px] overflow-y-auto">
+              <code ref={codeRef} className={`font-mono language-bash`} style={{ fontFamily: 'var(--font-mono)' }}>{codeExamples[activeTab]}</code>
+            </pre>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/docs/components/DocsHomepage/features-grid.tsx ADDED Viewed

@@ -0,0 +1,92 @@
+/**
+ * @file features-grid.tsx
+ * @description Grid of git0's core features, each with an example command.
+ */
+import Image from "next/image"
+import { Search, Download, Package, Zap, Code, Shield } from "lucide-react"
+const coreFeatures = [
+  {
+    icon: Search,
+    title: "Search GitHub Repositories",
+    description: "Search repositories by name with intelligent fuzzy matching and instant results",
+    example: "git0 react starter",
+  },
+  {
+    icon: Download,
+    title: "Direct Repository Download",
+    description: "Download from GitHub URLs or owner/repo shortcuts. Skip the manual git clone dance",
+    example: "git0 facebook/react",
+  },
+  {
+    icon: Package,
+    title: "Git Release Package Manager",
+    description: "Instantly download latest release binaries for your system or all platforms",
+    example: "gg user/repo",
+  },
+  {
+    icon: Zap,
+    title: "Automatic Dependency Installation",
+    description: "Smart detection and installation of dependencies for multiple project types",
+    example: "Auto-detects package.json, requirements.txt, Cargo.toml",
+  },
+  {
+    icon: Code,
+    title: "Smart IDE Integration",
+    description: "Automatically opens projects in Cursor, Windsurf, VS Code, or your preferred editor",
+    example: "Opens in cursor, windsurf, code, nvim",
+  },
+  {
+    icon: Shield,
+    title: "Conflict Resolution",
+    description: "Handles directory naming conflicts automatically with smart numbering",
+    example: "react → react-2 → react-3",
+  },
+]
+export function FeaturesGrid() {
+  return (
+    <section id="features" className="relative py-20 md:py-32 border-b border-border overflow-hidden">
+      <div className="absolute inset-0 animated-grid-bg opacity-30" />
+      <div className="container mx-auto px-4 relative">
+        <div className="flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12 mb-16">
+          <div className="relative" style={{ animation: "float 6s ease-in-out infinite" }}>
+            <Image
+              src="https://i.imgur.com/857meew.png"
+              alt="git0 logo"
+              width={160}
+              height={160}
+              className="drop-shadow-2xl"
+            />
+          </div>
+          <div className="text-center md:text-left max-w-2xl">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4">
+              The Proper Protocol to Download a Git Repo
+            </h2>
+            <p className="text-muted-foreground text-lg">
+              Skip the manual &quot;git clone, cd, install&quot; dance.
+            </p>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {coreFeatures.map((feature, index) => (
+            <div
+              key={feature.title}
+              className="animated-border-card group p-6 hover:bg-card/80 transition-all duration-300"
+              style={{ animationDelay: `${index * 0.05}s` }}
+            >
+              <div className="relative z-10">
+                <feature.icon className="h-8 w-8 text-primary mb-4 group-hover:scale-110 transition-transform duration-300" />
+                <h3 className="font-semibold mb-2 text-foreground text-lg">{feature.title}</h3>
+                <p className="text-sm text-muted-foreground leading-relaxed mb-4">{feature.description}</p>
+                <code className="text-xs text-primary bg-secondary px-2 py-1 rounded font-mono">{feature.example}</code>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/docs/components/DocsHomepage/footer.tsx ADDED Viewed

@@ -0,0 +1,58 @@
+/**
+ * @file footer.tsx
+ * @description Footer component for the git0 landing page.
+ */
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Github, BookOpen, MessageCircle, GitBranch } from "lucide-react"
+export function Footer() {
+  return (
+    <footer className="py-20 md:py-32">
+      <div className="container mx-auto px-4">
+        <div className="text-center max-w-3xl mx-auto">
+          <h2 className="text-3xl md:text-5xl font-bold mb-6 text-balance">
+            Download Git Repo on <span className="text-primary">Step Zero</span>
+          </h2>
+          <p className="text-xl text-muted-foreground mb-8">
+            Skip the manual &quot;git clone, cd, install&quot; dance.
+          </p>
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
+            <Link href="/docs">
+              <Button size="lg" className="gap-2 bg-primary text-primary-foreground hover:bg-primary/90">
+                <BookOpen className="h-4 w-4" />
+                Read the Docs
+              </Button>
+            </Link>
+            <Link href="https://github.com/OpenSourceAGI/dev-tools-starter-agent" target="_blank" rel="noopener noreferrer">
+              <Button variant="outline" size="lg" className="gap-2 bg-transparent">
+                <Github className="h-4 w-4" />
+                Star on GitHub
+              </Button>
+            </Link>
+            <Link href="https://github.com/OpenSourceAGI/dev-tools-starter-agent/discussions" target="_blank" rel="noopener noreferrer">
+              <Button variant="outline" size="lg" className="gap-2 bg-transparent">
+                <GitBranch className="h-4 w-4" />
+                Discussions
+              </Button>
+            </Link>
+            <Link href="https://discord.gg/SJdBqBz3tV" target="_blank" rel="noopener noreferrer">
+              <Button variant="outline" size="lg" className="gap-2 bg-transparent">
+                <MessageCircle className="h-4 w-4" />
+                Discord
+              </Button>
+            </Link>
+          </div>
+          <div className="border-t border-border pt-8">
+            <p className="text-muted-foreground text-sm">🌟 Star this repo so it will grow and get updates!</p>
+            <p className="text-muted-foreground text-sm mt-2">
+              MIT License — Made by <a href="https://github.com/vtempest" className="text-primary hover:underline">vtempest</a> with ❤️ for the developer community
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/docs/components/DocsHomepage/hero-section.tsx ADDED Viewed

@@ -0,0 +1,114 @@
+/**
+ * @file hero-section.tsx
+ * @description Hero section for the git0 landing page: tagline, preview media and install commands.
+ */
+"use client"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Copy, Github, BookOpen, Check, Sparkles } from "lucide-react"
+import { useState } from "react"
+const installCommands = {
+  bun: "bun install -g git0",
+  npm: "npm install -g git0",
+  npx: "npx git0 react starter",
+}
+type InstallTab = keyof typeof installCommands
+export function HeroSection() {
+  const [activeTab, setActiveTab] = useState<InstallTab>("bun")
+  const [copied, setCopied] = useState(false)
+  const copyCommand = () => {
+    navigator.clipboard.writeText(installCommands[activeTab])
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+  return (
+    <section id="installation" className="relative overflow-hidden border-b border-border">
+      <div className="absolute inset-0 animated-grid-bg" />
+      <div className="absolute inset-0 grid-glow" />
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/50 to-background" />
+      <div className="container mx-auto px-4 pt-12 relative">
+        <div className="flex flex-col items-center text-center max-w-5xl mx-auto">
+          <Badge variant="outline" className="mb-6 px-4 py-1.5 border-primary/30 text-primary gap-2">
+            <Sparkles className="h-4 w-4" />
+            Download Git Repo on Step Zero
+          </Badge>
+          <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight mb-6">
+            <span className="shimmer-text">git0</span>
+          </h1>
+          <p className="text-lg md:text-2xl text-muted-foreground max-w-3xl mb-6 text-pretty">
+            CLI tool to search GitHub repositories, download source &amp; releases, and instantly set up projects with{" "}
+            <span className="text-primary font-semibold">automatic dependency installation and editor opening</span>
+          </p>
+          <div className="flex flex-wrap justify-center gap-2 mb-8">
+            <a href="https://www.npmjs.com/package/git0" target="_blank" rel="noreferrer">
+              <img alt="NPM Version" src="https://img.shields.io/npm/v/git0.svg" />
+            </a>
+            <a href="https://www.npmjs.com/package/git0" target="_blank" rel="noreferrer">
+              <img alt="NPM Monthly Downloads" src="https://img.shields.io/npm/dm/git0.svg" />
+            </a>
+            <a href="https://github.com/OpenSourceAGI/dev-tools-starter-agent/discussions" target="_blank" rel="noreferrer">
+              <img alt="GitHub Discussions" src="https://img.shields.io/github/discussions/OpenSourceAGI/dev-tools-starter-agent" />
+            </a>
+            <a href="https://github.blog/developer-skills/github/beginners-guide-to-github-creating-a-pull-request/" target="_blank" rel="noreferrer">
+              <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs Welcome" />
+            </a>
+          </div>
+          <div className="flex flex-col items-center gap-3 mb-8 w-full max-w-xl">
+            <div className="flex gap-1 bg-card border border-border rounded-lg p-1">
+              {(Object.keys(installCommands) as InstallTab[]).map((tab) => (
+                <button
+                  key={tab}
+                  onClick={() => setActiveTab(tab)}
+                  className={`px-4 py-1.5 text-sm font-semibold rounded-md transition-colors ${activeTab === tab
+                    ? "bg-primary text-primary-foreground"
+                    : "text-muted-foreground hover:text-foreground hover:bg-secondary"
+                    }`}
+                >
+                  {tab.toUpperCase()}
+                </button>
+              ))}
+            </div>
+            <div
+              onClick={copyCommand}
+              className="flex w-full items-center justify-between gap-3 bg-card border border-border rounded-lg px-4 py-3 cursor-pointer hover:border-primary/50 transition-colors group"
+            >
+              <code className="font-mono text-base text-foreground">{installCommands[activeTab]}</code>
+              {copied ? (
+                <Check className="h-4 w-4 text-primary" />
+              ) : (
+                <Copy className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+              )}
+            </div>
+          </div>
+          <div className="flex flex-col sm:flex-row items-center gap-4 mb-12">
+            <Button onClick={() => window.location.href = "/docs"} size="lg" className="gap-2 bg-primary text-primary-foreground hover:bg-primary/90">
+              <BookOpen className="h-4 w-4" />
+              Documentation
+            </Button>
+            <Button onClick={() => window.location.href = "https://github.com/OpenSourceAGI/dev-tools-starter-agent/tree/master/packages/git0-repo-downloader"} variant="outline" size="lg" className="gap-2 bg-transparent">
+              <Github className="h-4 w-4" />
+              GitHub
+            </Button>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full mb-12">
+            <img src="https://i.imgur.com/Io3ukRC.gif" alt="git0 live preview" className="w-full rounded-xl border border-border" />
+            <img src="https://i.imgur.com/6l9esbL.png" alt="git0 preview" className="w-full rounded-xl border border-border" />
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/docs/components/DocsHomepage/project-types.tsx ADDED Viewed

@@ -0,0 +1,114 @@
+/**
+ * @file project-types.tsx
+ * @description Supported project types, supported IDEs and the post-download workflow.
+ */
+import { Package, Layers, FileCode, Settings, Play, Download, Search, Code } from "lucide-react"
+const projectTypes = [
+  { name: "Node.js", file: "package.json", install: "bun install (fallback to npm)", icon: Package },
+  { name: "Docker", file: "Dockerfile, docker-compose.yml", install: "docker-compose up -d", icon: Layers },
+  { name: "Python", file: "requirements.txt, setup.py", install: "Virtual env + pip install", icon: FileCode },
+  { name: "Rust", file: "Cargo.toml", install: "cargo build", icon: Settings },
+  { name: "Go", file: "go.mod", install: "go mod tidy", icon: Play },
+]
+const supportedIDEs = [
+  { name: "Cursor", command: "cursor" },
+  { name: "Windsurf", command: "windsurf" },
+  { name: "VS Code", command: "code" },
+  { name: "Code Server", command: "code-server" },
+  { name: "Neovim", command: "nvim" },
+]
+const workflowSteps = [
+  { step: "1", title: "Repository Downloaded", desc: "To your current directory", icon: Download },
+  { step: "2", title: "Project Type Detected", desc: "Automatically identified", icon: Search },
+  { step: "3", title: "Dependencies Installed", desc: "Based on project type", icon: Package },
+  { step: "4", title: "IDE Launched", desc: "Opens in preferred editor", icon: Code },
+  { step: "5", title: "Dev Server Started", desc: "For Node.js projects", icon: Play },
+]
+export function ProjectTypes() {
+  return (
+    <section id="workflow" className="py-20 md:py-32 border-b border-border">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl md:text-4xl font-bold mb-4">
+            Supported <span className="text-primary">Project Types</span>
+          </h2>
+          <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
+            git0 detects the project and runs the right installer for it.
+          </p>
+        </div>
+        <div className="max-w-4xl mx-auto overflow-x-auto mb-16">
+          <table className="w-full border-collapse">
+            <thead>
+              <tr className="border-b border-border">
+                <th className="text-left py-4 px-4 font-semibold text-foreground">Project Type</th>
+                <th className="text-left py-4 px-4 font-semibold text-foreground">Detection</th>
+                <th className="text-left py-4 px-4 font-semibold text-foreground">Installation</th>
+              </tr>
+            </thead>
+            <tbody>
+              {projectTypes.map((type, rowIndex) => (
+                <tr key={type.name} className={`border-b border-border ${rowIndex % 2 === 0 ? "bg-card/50" : ""}`}>
+                  <td className="py-4 px-4 font-semibold text-foreground">
+                    <span className="inline-flex items-center gap-2">
+                      <type.icon className="h-5 w-5 text-primary" />
+                      {type.name}
+                    </span>
+                  </td>
+                  <td className="py-4 px-4 text-muted-foreground"><code className="text-sm">{type.file}</code></td>
+                  <td className="py-4 px-4 text-muted-foreground"><code className="text-sm">{type.install}</code></td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <div className="text-center mb-8">
+          <h3 className="text-2xl md:text-3xl font-bold mb-4">Supported IDEs</h3>
+          <div className="flex flex-wrap justify-center gap-3">
+            {supportedIDEs.map((ide) => (
+              <div key={ide.name} className="bg-card border border-border rounded-lg px-4 py-2">
+                <span className="font-semibold text-foreground">{ide.name}</span>{" "}
+                <code className="text-xs text-primary">{ide.command}</code>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="text-center mt-16 mb-10">
+          <h3 className="text-2xl md:text-3xl font-bold mb-4">What Happens After Download</h3>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-5 gap-8 max-w-5xl mx-auto">
+          {workflowSteps.map((step) => (
+            <div key={step.step} className="text-center group">
+              <div className="relative mb-4 w-16 h-16 mx-auto">
+                <div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                  <step.icon className="w-8 h-8 text-primary-foreground" />
+                </div>
+                <div className="absolute -top-2 -right-2 w-7 h-7 bg-card border border-border rounded-full flex items-center justify-center text-sm font-bold text-foreground">
+                  {step.step}
+                </div>
+              </div>
+              <h4 className="font-semibold mb-1 text-foreground">{step.title}</h4>
+              <p className="text-sm text-muted-foreground">{step.desc}</p>
+            </div>
+          ))}
+        </div>
+        <div className="mt-12 text-center">
+          <div className="bg-card border border-border rounded-xl p-6 max-w-2xl mx-auto">
+            <p className="text-muted-foreground mb-4">
+              <strong className="text-primary">Conflict Resolution:</strong> If a directory with the same name exists,
+              git0 automatically appends a number
+            </p>
+            <code className="text-sm bg-secondary px-4 py-2 rounded">react-app → react-app-2 → react-app-3</code>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}