Redesign my website

README.md

@@ -1,10 +1,13 @@
 ---
-title: Opencoder Terminal Ai Wizard
-emoji: 📉
-colorFrom: blue
-colorTo: pink
+title: OpenCoder Terminal AI Wizard 🧙‍♂️
+colorFrom: green
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

components/footer.js

@@ -0,0 +1,126 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: rgba(17, 24, 39, 0.8);
+          color: white;
+          padding: 3rem 2rem;
+          text-align: center;
+          border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .footer-content {
+          max-width: 1200px;
+          margin: 0 auto;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+          gap: 2rem;
+          text-align: left;
+        }
+        .footer-logo {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          font-size: 1.25rem;
+          font-weight: bold;
+          margin-bottom: 1rem;
+        }
+        .footer-links h3 {
+          font-size: 1rem;
+          font-weight: 600;
+          margin-bottom: 1rem;
+          color: rgba(255, 255, 255, 0.9);
+        }
+        .footer-links ul {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+        .footer-links li {
+          margin-bottom: 0.5rem;
+        }
+        .footer-links a {
+          color: rgba(255, 255, 255, 0.6);
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        .footer-links a:hover {
+          color: #8b5cf6;
+        }
+        .social-links {
+          display: flex;
+          gap: 1rem;
+          margin-top: 1rem;
+        }
+        .social-links a {
+          color: rgba(255, 255, 255, 0.6);
+          transition: color 0.2s;
+        }
+        .social-links a:hover {
+          color: #8b5cf6;
+        }
+        .copyright {
+          margin-top: 3rem;
+          padding-top: 1.5rem;
+          border-top: 1px solid rgba(255, 255, 255, 0.1);
+          color: rgba(255, 255, 255, 0.5);
+          font-size: 0.875rem;
+        }
+        @media (max-width: 768px) {
+          .footer-content {
+            grid-template-columns: 1fr;
+            text-align: center;
+          }
+          .social-links {
+            justify-content: center;
+          }
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div>
+            <div class="footer-logo">
+              <i data-feather="terminal"></i>
+              OpenCoder
+            </div>
+            <p class="text-gray-400">The open source AI coding agent for your terminal.</p>
+            <div class="social-links">
+              <a href="#"><i data-feather="twitter"></i></a>
+              <a href="#"><i data-feather="github"></i></a>
+              <a href="#"><i data-feather="discord"></i></a>
+            </div>
+          </div>
+          <div class="footer-links">
+            <h3>Product</h3>
+            <ul>
+              <li><a href="#features">Features</a></li>
+              <li><a href="https://opencode.ai/docs">Documentation</a></li>
+              <li><a href="https://github.com/sst/opencode/releases">Releases</a></li>
+            </ul>
+          </div>
+          <div class="footer-links">
+            <h3>Community</h3>
+            <ul>
+              <li><a href="https://github.com/sst/opencode">GitHub</a></li>
+              <li><a href="#">Discord</a></li>
+              <li><a href="#">Twitter</a></li>
+            </ul>
+          </div>
+          <div class="footer-links">
+            <h3>Legal</h3>
+            <ul>
+              <li><a href="#">Privacy</a></li>
+              <li><a href="#">Terms</a></li>
+              <li><a href="#">License</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="copyright">
+          &copy; ${new Date().getFullYear()} OpenCode. All rights reserved.
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,88 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: rgba(17, 24, 39, 0.8);
+          backdrop-filter: blur(10px);
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 1000;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .logo {
+          color: white;
+          font-weight: bold;
+          font-size: 1.25rem;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .logo-icon {
+          color: #8b5cf6;
+        }
+        ul {
+          display: flex;
+          gap: 1.5rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        a {
+          color: rgba(255, 255, 255, 0.8);
+          text-decoration: none;
+          transition: color 0.2s;
+          font-weight: 500;
+        }
+        a:hover {
+          color: #8b5cf6;
+        }
+        .github-btn {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          padding: 0.5rem 1rem;
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 6px;
+          transition: background 0.2s;
+        }
+        .github-btn:hover {
+          background: rgba(255, 255, 255, 0.2);
+        }
+        @media (max-width: 768px) {
+          nav {
+            padding: 1rem;
+          }
+          ul {
+            display: none;
+          }
+        }
+      </style>
+      <nav>
+        <a href="/" class="logo">
+          <i data-feather="terminal" class="logo-icon"></i>
+          OpenCoder
+        </a>
+        <ul>
+          <li><a href="#features">Features</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="https://opencode.ai/docs">Documentation</a></li>
+          <li>
+            <a href="https://github.com/sst/opencode" class="github-btn">
+              <i data-feather="github"></i>
+              GitHub
+            </a>
+          </li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,198 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OpenCoder - The AI Coding Agent for Terminal</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+</head>
+<body class="bg-gray-900 text-gray-100">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-12">
+        <!-- Hero Section -->
+        <section class="mb-20 text-center">
+            <div class="max-w-4xl mx-auto">
+                <span class="inline-block px-3 py-1 bg-purple-800 bg-opacity-30 text-purple-400 rounded-full text-sm font-medium mb-4">What's new in v0.15.12</span>
+                <h1 class="text-5xl font-bold mb-6 bg-gradient-to-r from-purple-400 to-blue-500 bg-clip-text text-transparent">The AI coding agent built for the terminal</h1>
+                <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">OpenCode is fully open source, giving you control and freedom to use any provider, any model, and any editor.</p>
+                <div class="flex gap-4 justify-center">
+                    <a href="https://opencode.ai/docs" class="px-6 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition-colors">Read Docs</a>
+                    <a href="#features" class="px-6 py-3 border border-gray-700 hover:border-gray-600 rounded-lg font-medium transition-colors">Explore Features</a>
+                </div>
+            </div>
+            
+            <div class="mt-16 rounded-xl overflow-hidden shadow-2xl max-w-6xl mx-auto border border-gray-800">
+                <div class="bg-gray-800 p-4">
+                    <div class="flex gap-2">
+                        <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                        <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                        <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                    </div>
+                </div>
+                <video autoplay loop muted class="w-full">
+                    <source src="https://opencode.ai/_build/assets/demo.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+        </section>
+
+        <!-- What is OpenCode? -->
+        <section id="about" class="mb-20">
+            <h2 class="text-3xl font-bold mb-12 text-center">What is OpenCode?</h2>
+            <p class="text-xl text-gray-300 mb-12 max-w-3xl mx-auto text-center">OpenCode is an open source agent that helps you write and run code directly from the terminal.</p>
+            
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Feature Cards -->
+                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors">
+                    <div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="terminal" class="text-purple-400"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Native TUI</h3>
+                    <p class="text-gray-400">A responsive, native, themeable terminal UI</p>
+                </div>
+                
+                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors">
+                    <div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="code" class="text-purple-400"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">LSP enabled</h3>
+                    <p class="text-gray-400">Automatically loads the right LSPs for the LLM</p>
+                </div>
+                
+                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors">
+                    <div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="layers" class="text-purple-400"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Multi-session</h3>
+                    <p class="text-gray-400">Start multiple agents in parallel on the same project</p>
+                </div>
+                
+                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors">
+                    <div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="share-2" class="text-purple-400"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Share links</h3>
+                    <p class="text-gray-400">Share a link to any session for reference or to debug</p>
+                </div>
+                
+                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors">
+                    <div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="key" class="text-purple-400"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Claude Pro</h3>
+                    <p class="text-gray-400">Log in with Anthropic to use your Claude Pro or Max account</p>
+                </div>
+                
+                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors">
+                    <div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="cpu" class="text-purple-400"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Any model</h3>
+                    <p class="text-gray-400">75+ LLM providers through Models.dev, including local models</p>
+                </div>
+            </div>
+        </section>
+
+        <!-- Stats Section -->
+        <section class="mb-20 py-16 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl">
+            <div class="max-w-6xl mx-auto px-4">
+                <h2 class="text-3xl font-bold mb-12 text-center">The open source AI coding agent</h2>
+                
+                <div class="grid md:grid-cols-3 gap-8">
+                    <div class="text-center">
+                        <div class="text-5xl font-bold text-purple-400 mb-2">26K</div>
+                        <p class="text-gray-400">GitHub Stars</p>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-5xl font-bold text-purple-400 mb-2">188</div>
+                        <p class="text-gray-400">Contributors</p>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-5xl font-bold text-purple-400 mb-2">200K</div>
+                        <p class="text-gray-400">Monthly Devs</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Privacy Section -->
+        <section class="mb-20">
+            <div class="flex flex-col md:flex-row items-center gap-12">
+                <div class="md:w-1/2">
+                    <h2 class="text-3xl font-bold mb-6">Built for privacy first</h2>
+                    <p class="text-xl text-gray-300 mb-6">OpenCode does not store any of your code or context data, so that it can operate in privacy sensitive environments.</p>
+                    <a href="https://opencode.ai/docs/enterprise/" class="inline-block px-6 py-3 border border-gray-700 hover:border-gray-600 rounded-lg font-medium transition-colors">Learn about privacy</a>
+                </div>
+                <div class="md:w-1/2">
+                    <img src="https://opencode.ai/_build/assets/dock-DjAVB4vb.png" alt="Privacy focused" class="rounded-xl shadow-2xl">
+                </div>
+            </div>
+        </section>
+
+        <!-- FAQ Section -->
+        <section class="mb-20">
+            <div class="bg-gray-800 rounded-2xl p-8 md:p-12">
+                <div class="flex flex-col md:flex-row gap-12">
+                    <div class="md:w-1/2">
+                        <h2 class="text-3xl font-bold mb-6">FAQ</h2>
+                        <h3 class="text-xl font-semibold mb-4">Access reliable optimized models for coding agents</h3>
+                        <p class="text-gray-300 mb-6">Zen gives you access to a handpicked set of AI models that OpenCode has tested and benchmarked specifically for coding agents. No need to worry about inconsistent performance and quality across providers, use validated models that work.</p>
+                        <a href="https://opencode.ai/zen" class="inline-block px-6 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition-colors">Learn about Zen</a>
+                    </div>
+                    <div class="md:w-1/2 flex items-center justify-center">
+                        <div class="terminal-mockup">
+                            <div class="terminal-header">
+                                <div class="terminal-buttons">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </div>
+                                <div class="terminal-title">opencode --model=zen</div>
+                            </div>
+                            <div class="terminal-body">
+                                <span class="text-green-400">$</span> <span class="text-gray-300">How can I implement a binary search in Python?</span>
+                                <div class="terminal-output">
+                                    <div class="text-gray-400"># Here's an implementation of binary search in Python:</div>
+                                    <div class="text-blue-400">def</div> <div class="text-yellow-300">binary_search</div>(arr, target):
+                                    <div class="ml-4">...</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- CTA Section -->
+        <section class="text-center py-16 bg-gradient-to-r from-purple-900 to-blue-900 rounded-2xl">
+            <h2 class="text-3xl font-bold mb-6">OpenCode will be available on desktop soon</h2>
+            <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">Join the waitlist for early access.</p>
+            <button class="px-8 py-4 bg-white text-gray-900 hover:bg-gray-200 rounded-lg font-bold text-lg transition-colors">Join Waitlist</button>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <!-- Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        VANTA.NET({
+            el: "body",
+            color: 0x4c1d95,
+            backgroundColor: 0x111827,
+            points: 12,
+            maxDistance: 20,
+            spacing: 15
+        });
+    </script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,25 @@
+// Shared JavaScript code
+document.addEventListener('DOMContentLoaded', () => {
+    // Animate feature cards on scroll
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-fadeInUp');
+            }
+        });
+    }, {
+        threshold: 0.1
+    });
+
+    document.querySelectorAll('.bg-gray-800').forEach((card) => {
+        observer.observe(card);
+    });
+
+    // Handle waitlist form
+    const waitlistForm = document.querySelector('button');
+    if (waitlistForm) {
+        waitlistForm.addEventListener('click', () => {
+            alert('Thanks for your interest! We\'ll notify you when the desktop version is ready.');
+        });
+    }
+});

style.css

@@ -1,28 +1,76 @@
+/* Base styles */
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', -apple-system, BlurMacSystemFont, sans-serif;
+    line-height: 1.6;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Terminal mockup for FAQ section */
+.terminal-mockup {
+    background: #1e1e1e;
+    border-radius: 8px;
+    overflow: hidden;
+    width: 100%;
+    max-width: 600px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.terminal-header {
+    background: #333;
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.terminal-buttons {
+    display: flex;
+    gap: 6px;
+    margin-right: 12px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.terminal-buttons span {
+    display: block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #555;
 }
+
+.terminal-title {
+    color: #aaa;
+    font-size: 0.85rem;
+    flex-grow: 1;
+    text-align: center;
+}
+
+.terminal-body {
+    padding: 16px;
+    font-family: 'Courier New', monospace;
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.terminal-output {
+    margin-top: 8px;
+    opacity: 0;
+    animation: fadeIn 0.5s 0.3s forwards;
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .terminal-mockup {
+        margin-top: 2rem;
+    }
+}
+
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}