Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>v0 by Vercel</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <!-- Top Navigation --> | |
| <nav class="top-nav"> | |
| <div class="nav-left"> | |
| <a href="#" class="logo">v0</a> | |
| <div class="nav-links"> | |
| <button class="nav-link dropdown"> | |
| Templates | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <polyline points="6 9 12 15 18 9"></polyline> | |
| </svg> | |
| </button> | |
| <button class="nav-link dropdown"> | |
| Resources | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <polyline points="6 9 12 15 18 9"></polyline> | |
| </svg> | |
| </button> | |
| <a href="#" class="nav-link">Enterprise</a> | |
| <a href="#" class="nav-link">Pricing</a> | |
| <a href="#" class="nav-link">iOS</a> | |
| <a href="#" class="nav-link">Students</a> | |
| <a href="#" class="nav-link">FAQ</a> | |
| </div> | |
| </div> | |
| <div class="nav-right"> | |
| <button class="btn-secondary">Sign In</button> | |
| <button class="btn-primary">Sign Up</button> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="main-container"> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="hero-watermark">v0</div> | |
| <h1 class="hero-title">What do you want to create?</h1> | |
| <p class="hero-subtitle">Start building with a single prompt. No coding needed.</p> | |
| <!-- Input Area --> | |
| <div class="input-container"> | |
| <button class="add-btn" aria-label="Add attachment"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <line x1="12" y1="5" x2="12" y2="19"></line> | |
| <line x1="5" y1="12" x2="19" y2="12"></line> | |
| </svg> | |
| </button> | |
| <input | |
| type="text" | |
| class="main-input" | |
| placeholder="Ask v0 to build..." | |
| > | |
| <button class="upload-btn" aria-label="Upload file"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 5v14M5 12l7 7 7-7"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Community Section --> | |
| <section class="community"> | |
| <div class="community-header"> | |
| <div> | |
| <h2 class="community-title">From the Community</h2> | |
| <p class="community-subtitle">Explore what the community is building with v0.</p> | |
| </div> | |
| <a href="#" class="browse-all"> | |
| Browse All | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <polyline points="9 18 15 12 9 6"></polyline> | |
| </svg> | |
| </a> | |
| </div> | |
| <!-- Template Grid --> | |
| <div class="template-grid"> | |
| <!-- Template Card 1 --> | |
| <div class="template-card"> | |
| <div class="template-preview"> | |
| <div class="preview-content preview-1"> | |
| <h3>Effortless custom contract billing by Brilliance</h3> | |
| <div class="preview-mockup"> | |
| <div class="mockup-header"></div> | |
| <div class="mockup-content"> | |
| <div class="mockup-text"></div> | |
| <div class="mockup-text short"></div> | |
| <div class="mockup-button"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="template-info"> | |
| <div class="template-avatar"></div> | |
| <div class="template-details"> | |
| <h4 class="template-name">Brilliance SaaS Landing Page</h4> | |
| <div class="template-stats"> | |
| <span class="stat"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> | |
| <circle cx="12" cy="12" r="3"></circle> | |
| </svg> | |
| 2.1k | |
| </span> | |
| <span class="stat"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> | |
| </svg> | |
| 662 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template Card 2 --> | |
| <div class="template-card"> | |
| <div class="template-preview"> | |
| <div class="preview-content preview-2"> | |
| <div class="gallery-item"></div> | |
| <div class="gallery-text">3D Gallery Photography Template</div> | |
| </div> | |
| </div> | |
| <div class="template-info"> | |
| <div class="template-avatar"></div> | |
| <div class="template-details"> | |
| <h4 class="template-name">3D Gallery Photography Template</h4> | |
| <div class="template-stats"> | |
| <span class="stat"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> | |
| <circle cx="12" cy="12" r="3"></circle> | |
| </svg> | |
| 5.14k | |
| </span> | |
| <span class="stat"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> | |
| </svg> | |
| 403 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template Card 3 --> | |
| <div class="template-card"> | |
| <div class="template-preview"> | |
| <div class="preview-content preview-3"> | |
| <div class="ai-badge">AI</div> | |
| <h3>AI Gateway Starter</h3> | |
| </div> | |
| </div> | |
| <div class="template-info"> | |
| <div class="template-avatar"></div> | |
| <div class="template-details"> | |
| <h4 class="template-name">AI Gateway Starter</h4> | |
| <div class="template-stats"> | |
| <span class="stat"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> | |
| <circle cx="12" cy="12" r="3"></circle> | |
| </svg> | |
| 4.42 | |
| </span> | |
| <span class="stat"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> | |
| </svg> | |
| 188 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template Card 4 --> | |
| <div class="template-card"> | |
| <div class="template-preview"> | |
| <div class="preview-content preview-4"> | |
| <div class="gradient-bg"></div> | |
| <h3>Unleash the Power of AI Agents</h3> | |
| <button class="preview-btn">Learn More</button> | |
| </div> | |
| </div> | |
| <div class="template-info"> | |
| <div class="template-avatar"></div> | |
| <div class="template-details"> | |
| <h4 class="template-name">Pointer AI landing page</h4> | |
| <div class="template-stats"> | |
| <span class="stat"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> | |
| <circle cx="12" cy="12" r="3"></circle> | |
| </svg> | |
| 14.8k | |
| </span> | |
| <span class="stat"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> | |
| </svg> | |
| 1.1k | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template Card 5 --> | |
| <div class="template-card"> | |
| <div class="template-preview"> | |
| <div class="preview-content preview-5"> | |
| <div class="dashboard-mockup"> | |
| <div class="chart-area"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="template-info"> | |
| <div class="template-avatar"></div> | |
| <div class="template-details"> | |
| <h4 class="template-name">Dashboard – M.O.N.K.Y</h4> | |
| <div class="template-stats"> | |
| <span class="stat"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> | |
| <circle cx="12" cy="12" r="3"></circle> | |
| </svg> | |
| 7.76k | |
| </span> | |
| <span class="stat"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> | |
| </svg> | |
| 725 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Template Card 6 --> | |
| <div class="template-card"> | |
| <div class="template-preview"> | |
| <div class="preview-content preview-6"> | |
| <h3>Unlock your future growth</h3> | |
| </div> | |
| </div> | |
| <div class="template-info"> | |
| <div class="template-avatar"></div> | |
| <div class="template-details"> | |
| <h4 class="template-name">Skal Ventures Template</h4> | |
| <div class="template-stats"> | |
| <span class="stat"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> | |
| <circle cx="12" cy="12" r="3"></circle> | |
| </svg> | |
| 3.23k | |
| </span> | |
| <span class="stat"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> | |
| </svg> | |
| 495 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |