https://orbitpremium.com/

README.md

@@ -1,10 +1,13 @@
 ---
-title: Orbit Premium Clone
-emoji: 🚀
-colorFrom: gray
-colorTo: red
+title: Orbit Premium Clone 🚀
+colorFrom: blue
+colorTo: green
+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://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,172 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        
+        * {
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+        }
+        
+        footer {
+          background-color: #1f2937;
+          border-top: 1px solid #374151;
+          padding: 4rem 0 2rem;
+        }
+        
+        .container {
+          max-width: 1280px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+        
+        .footer-content {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 2rem;
+          margin-bottom: 3rem;
+        }
+        
+        .footer-column h3 {
+          color: #f9fafb;
+          margin-bottom: 1.5rem;
+          font-size: 1.125rem;
+          font-weight: 600;
+        }
+        
+        .footer-links {
+          list-style: none;
+        }
+        
+        .footer-links li {
+          margin-bottom: 0.75rem;
+        }
+        
+        .footer-links a {
+          color: #9ca3af;
+          text-decoration: none;
+          transition: color 0.3s ease;
+        }
+        
+        .footer-links a:hover {
+          color: #e5e7eb;
+        }
+        
+        .social-links {
+          display: flex;
+          gap: 1rem;
+          margin-top: 1rem;
+        }
+        
+        .social-link {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background-color: #374151;
+          color: #9ca3af;
+          transition: all 0.3s ease;
+        }
+        
+        .social-link:hover {
+          background-color: #4f46e5;
+          color: white;
+          transform: translateY(-2px);
+        }
+        
+        .copyright {
+          border-top: 1px solid #374151;
+          padding-top: 2rem;
+          text-align: center;
+          color: #6b7280;
+          font-size: 0.875rem;
+        }
+        
+        @media (max-width: 640px) {
+          .footer-content {
+            grid-template-columns: 1fr;
+          }
+        }
+      </style>
+      
+      <footer>
+        <div class="container">
+          <div class="footer-content">
+            <div class="footer-column">
+              <h3>OrbitPremium</h3>
+              <p style="color: #9ca3af; margin-bottom: 1rem;">Premium digital solutions for modern businesses.</p>
+              <div class="social-links">
+                <a href="#" class="social-link">
+                  <i data-feather="twitter" class="w-4 h-4"></i>
+                </a>
+                <a href="#" class="social-link">
+                  <i data-feather="facebook" class="w-4 h-4"></i>
+                </a>
+                <a href="#" class="social-link">
+                  <i data-feather="instagram" class="w-4 h-4"></i>
+                </a>
+                <a href="#" class="social-link">
+                  <i data-feather="linkedin" class="w-4 h-4"></i>
+                </a>
+              </div>
+            </div>
+            
+            <div class="footer-column">
+              <h3>Product</h3>
+              <ul class="footer-links">
+                <li><a href="#">Features</a></li>
+                <li><a href="#">Pricing</a></li>
+                <li><a href="#">Templates</a></li>
+                <li><a href="#">Roadmap</a></li>
+                <li><a href="#">Changelog</a></li>
+              </ul>
+            </div>
+            
+            <div class="footer-column">
+              <h3>Resources</h3>
+              <ul class="footer-links">
+                <li><a href="#">Documentation</a></li>
+                <li><a href="#">Tutorials</a></li>
+                <li><a href="#">Blog</a></li>
+                <li><a href="#">Support</a></li>
+                <li><a href="#">API Status</a></li>
+              </ul>
+            </div>
+            
+            <div class="footer-column">
+              <h3>Company</h3>
+              <ul class="footer-links">
+                <li><a href="#">About</a></li>
+                <li><a href="#">Careers</a></li>
+                <li><a href="#">Contact</a></li>
+                <li><a href="#">Partners</a></li>
+                <li><a href="#">Press</a></li>
+              </ul>
+            </div>
+          </div>
+          
+          <div class="copyright">
+            <p>&copy; 2023 OrbitPremium. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    `;
+    
+    // Initialize feather icons in shadow DOM
+    const featherScript = document.createElement('script');
+    featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
+    featherScript.onload = () => {
+      feather.replace();
+    };
+    this.shadowRoot.appendChild(featherScript);
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/header.js

@@ -0,0 +1,163 @@
+class CustomHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        
+        * {
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+        }
+        
+        header {
+          background-color: rgba(17, 24, 39, 0.9);
+          backdrop-filter: blur(10px);
+          position: sticky;
+          top: 0;
+          z-index: 50;
+          border-bottom: 1px solid rgba(55, 65, 81, 0.5);
+        }
+        
+        .container {
+          max-width: 1280px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+        
+        nav {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 1.5rem 0;
+        }
+        
+        .logo {
+          display: flex;
+          align-items: center;
+          font-weight: 700;
+          font-size: 1.5rem;
+          color: #f9fafb;
+          text-decoration: none;
+        }
+        
+        .logo span {
+          color: #818cf8;
+        }
+        
+        .nav-links {
+          display: flex;
+          gap: 2rem;
+          align-items: center;
+        }
+        
+        .nav-link {
+          color: #9ca3af;
+          text-decoration: none;
+          font-weight: 500;
+          transition: color 0.3s ease;
+        }
+        
+        .nav-link:hover {
+          color: #e5e7eb;
+        }
+        
+        .nav-button {
+          background-color: transparent;
+          color: #c7d2fe;
+          border: 1px solid #4f46e5;
+          padding: 0.5rem 1.5rem;
+          border-radius: 0.5rem;
+          font-weight: 500;
+          transition: all 0.3s ease;
+        }
+        
+        .nav-button:hover {
+          background-color: #4f46e5;
+          color: white;
+        }
+        
+        .mobile-menu-button {
+          display: none;
+          background: none;
+          border: none;
+          color: #9ca3af;
+        }
+        
+        .mobile-menu {
+          display: none;
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          background-color: #1f2937;
+          padding: 1rem;
+          border-top: 1px solid #374151;
+        }
+        
+        .mobile-nav-links {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+        
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+          }
+          
+          .mobile-menu-button {
+            display: block;
+          }
+          
+          .mobile-menu-button:hover {
+            color: #e5e7eb;
+          }
+        }
+      </style>
+      
+      <header>
+        <div class="container">
+          <nav>
+            <a href="#" class="logo">Orbit<span>Premium</span></a>
+            
+            <div class="nav-links">
+              <a href="#" class="nav-link">Home</a>
+              <a href="#" class="nav-link">Features</a>
+              <a href="#" class="nav-link">Pricing</a>
+              <a href="#" class="nav-link">About</a>
+              <a href="#" class="nav-button">Sign In</a>
+            </div>
+            
+            <button id="mobile-menu-button" class="mobile-menu-button">
+              <i data-feather="menu" class="w-6 h-6"></i>
+            </button>
+          </nav>
+          
+          <div id="mobile-menu" class="mobile-menu hidden">
+            <div class="mobile-nav-links">
+              <a href="#" class="nav-link">Home</a>
+              <a href="#" class="nav-link">Features</a>
+              <a href="#" class="nav-link">Pricing</a>
+              <a href="#" class="nav-link">About</a>
+              <a href="#" class="nav-button">Sign In</a>
+            </div>
+          </div>
+        </div>
+      </header>
+    `;
+    
+    // Initialize feather icons in shadow DOM
+    const featherScript = document.createElement('script');
+    featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
+    featherScript.onload = () => {
+      feather.replace();
+    };
+    this.shadowRoot.appendChild(featherScript);
+  }
+}
+
+customElements.define('custom-header', CustomHeader);

index.html

@@ -1,19 +1,118 @@
-<!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>Orbit Premium Clone</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <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>
+</head>
+<body class="bg-gray-900 text-white">
+    <!-- Header Component -->
+    <custom-header></custom-header>
+
+    <!-- Hero Section -->
+    <section class="relative py-20 md:py-32 overflow-hidden">
+        <div class="absolute inset-0 bg-gradient-to-br from-purple-900 via-indigo-900 to-gray-900 opacity-90"></div>
+        <div class="container mx-auto px-4 relative z-10">
+            <div class="max-w-3xl mx-auto text-center">
+                <h1 class="text-4xl md:text-6xl font-bold mb-6">Premium Digital Experiences</h1>
+                <p class="text-xl text-gray-300 mb-10">Elevate your online presence with our cutting-edge solutions designed for modern businesses.</p>
+                <div class="flex flex-col sm:flex-row justify-center gap-4">
+                    <a href="#" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300">Get Started</a>
+                    <a href="#" class="bg-transparent border-2 border-indigo-500 text-indigo-300 hover:bg-indigo-500/10 font-bold py-3 px-8 rounded-lg transition duration-300">View Demo</a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="py-20 bg-gray-800">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful Features</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">Everything you need to build a stunning digital presence that converts visitors into customers.</p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
+                <!-- Feature 1 -->
+                <div class="bg-gray-700/50 p-8 rounded-xl hover:bg-gray-700 transition duration-300">
+                    <div class="w-14 h-14 rounded-full bg-indigo-500/10 flex items-center justify-center mb-6">
+                        <i data-feather="zap" class="text-indigo-400 w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Lightning Fast</h3>
+                    <p class="text-gray-400">Optimized for speed and performance to ensure your visitors have the best experience.</p>
+                </div>
+                
+                <!-- Feature 2 -->
+                <div class="bg-gray-700/50 p-8 rounded-xl hover:bg-gray-700 transition duration-300">
+                    <div class="w-14 h-14 rounded-full bg-indigo-500/10 flex items-center justify-center mb-6">
+                        <i data-feather="smartphone" class="text-indigo-400 w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Fully Responsive</h3>
+                    <p class="text-gray-400">Looks perfect on any device from mobile phones to large desktop monitors.</p>
+                </div>
+                
+                <!-- Feature 3 -->
+                <div class="bg-gray-700/50 p-8 rounded-xl hover:bg-gray-700 transition duration-300">
+                    <div class="w-14 h-14 rounded-full bg-indigo-500/10 flex items-center justify-center mb-6">
+                        <i data-feather="lock" class="text-indigo-400 w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Secure by Default</h3>
+                    <p class="text-gray-400">Enterprise-grade security to protect your data and your customers' privacy.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Stats Section -->
+    <section class="py-20">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+                <div>
+                    <div class="text-4xl md:text-5xl font-bold text-indigo-400 mb-2">99.9%</div>
+                    <div class="text-gray-400">Uptime</div>
+                </div>
+                <div>
+                    <div class="text-4xl md:text-5xl font-bold text-indigo-400 mb-2">24/7</div>
+                    <div class="text-gray-400">Support</div>
+                </div>
+                <div>
+                    <div class="text-4xl md:text-5xl font-bold text-indigo-400 mb-2">10K+</div>
+                    <div class="text-gray-400">Customers</div>
+                </div>
+                <div>
+                    <div class="text-4xl md:text-5xl font-bold text-indigo-400 mb-2">50+</div>
+                    <div class="text-gray-400">Countries</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="py-20 bg-gradient-to-r from-indigo-900/50 to-purple-900/50">
+        <div class="container mx-auto px-4">
+            <div class="max-w-3xl mx-auto text-center">
+                <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to get started?</h2>
+                <p class="text-gray-300 mb-10 max-w-2xl mx-auto">Join thousands of satisfied customers who have transformed their digital presence with our premium solutions.</p>
+                <a href="#" class="bg-white text-indigo-900 hover:bg-gray-100 font-bold py-3 px-8 rounded-lg inline-flex items-center transition duration-300">
+                    Start Free Trial
+                    <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer Component -->
+    <custom-footer></custom-footer>
+
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,29 @@
+// Mobile menu toggle functionality
+document.addEventListener('DOMContentLoaded', function() {
+    const mobileMenuButton = document.getElementById('mobile-menu-button');
+    const mobileMenu = document.getElementById('mobile-menu');
+    
+    if (mobileMenuButton && mobileMenu) {
+        mobileMenuButton.addEventListener('click', function() {
+            mobileMenu.classList.toggle('hidden');
+        });
+    }
+    
+    // Close mobile menu when clicking outside
+    document.addEventListener('click', function(event) {
+        if (mobileMenu && !mobileMenu.contains(event.target) && 
+            mobileMenuButton && !mobileMenuButton.contains(event.target)) {
+            mobileMenu.classList.add('hidden');
+        }
+    });
+});
+
+// Smooth scrolling for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
+        e.preventDefault();
+        document.querySelector(this.getAttribute('href')).scrollIntoView({
+            behavior: 'smooth'
+        });
+    });
+});

style.css

@@ -1,28 +1,47 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+  --primary-color: #6366f1; /* indigo-500 */
+  --secondary-color: #8b5cf6; /* violet-500 */
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Inter', sans-serif;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  background-color: #111827; /* gray-900 */
+  color: #f9fafb; /* gray-50 */
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-track {
+  background: #1f2937; /* gray-800 */
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb {
+  background: #4f46e5; /* indigo-600 */
+  border-radius: 4px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb:hover {
+  background: #6366f1; /* indigo-500 */
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Button hover effects */
+a {
+  transition: all 0.3s ease;
 }
+
+/* Feather icons alignment */
+.feather {
+  display: inline-block;
+  vertical-align: middle;
+}