https://phantom-digital.com/

README.md

@@ -1,10 +1,13 @@
 ---
-title: Phantom Digital Vibes
-emoji: 💻
-colorFrom: yellow
-colorTo: purple
+title: Phantom Digital Vibes 🌀
+colorFrom: green
+colorTo: yellow
+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,110 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .footer-link:hover {
+          color: #38bdf8;
+          transform: translateX(4px);
+        }
+      </style>
+      <footer class="bg-gray-900 border-t border-gray-800">
+        <div class="container mx-auto px-4 py-12">
+          <div class="grid md:grid-cols-4 gap-12">
+            <div>
+              <div class="flex items-center gap-2 mb-6">
+                <div class="w-8 h-8 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center">
+                  <i data-feather="activity" class="text-white w-4 h-4"></i>
+                </div>
+                <span class="text-xl font-bold">Phantom Digital</span>
+              </div>
+              <p class="text-gray-400 mb-6">
+                Crafting digital experiences that captivate and convert.
+              </p>
+              <div class="flex gap-4">
+                <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-cyan-500/10 hover:text-cyan-400 transition">
+                  <i data-feather="twitter"></i>
+                </a>
+                <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-cyan-500/10 hover:text-cyan-400 transition">
+                  <i data-feather="linkedin"></i>
+                </a>
+                <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-cyan-500/10 hover:text-cyan-400 transition">
+                  <i data-feather="instagram"></i>
+                </a>
+                <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-cyan-500/10 hover:text-cyan-400 transition">
+                  <i data-feather="github"></i>
+                </a>
+              </div>
+            </div>
+            
+            <div>
+              <h3 class="text-lg font-semibold mb-6">Services</h3>
+              <ul class="space-y-3">
+                <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2">
+                  <i data-feather="chevron-right" class="w-4 h-4"></i> Web Development
+                </a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2">
+                  <i data-feather="chevron-right" class="w-4 h-4"></i> Mobile Apps
+                </a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2">
+                  <i data-feather="chevron-right" class="w-4 h-4"></i> UI/UX Design
+                </a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2">
+                  <i data-feather="chevron-right" class="w-4 h-4"></i> Digital Strategy
+                </a></li>
+              </ul>
+            </div>
+            
+            <div>
+              <h3 class="text-lg font-semibold mb-6">Company</h3>
+              <ul class="space-y-3">
+                <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2">
+                  <i data-feather="chevron-right" class="w-4 h-4"></i> About Us
+                </a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2">
+                  <i data-feather="chevron-right" class="w-4 h-4"></i> Careers
+                </a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2">
+                  <i data-feather="chevron-right" class="w-4 h-4"></i> Blog
+                </a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-cyan-400 transition flex items-center gap-2">
+                  <i data-feather="chevron-right" class="w-4 h-4"></i> Contact
+                </a></li>
+              </ul>
+            </div>
+            
+            <div>
+              <h3 class="text-lg font-semibold mb-6">Contact</h3>
+              <ul class="space-y-3">
+                <li class="flex items-start gap-3 text-gray-400">
+                  <i data-feather="map-pin" class="w-5 h-5 mt-0.5 text-cyan-400"></i>
+                  <span>123 Digital Street, Tech City, TC 10101</span>
+                </li>
+                <li class="flex items-center gap-3 text-gray-400">
+                  <i data-feather="mail" class="w-5 h-5 text-cyan-400"></i>
+                  <span>hello@phantom-digital.com</span>
+                </li>
+                <li class="flex items-center gap-3 text-gray-400">
+                  <i data-feather="phone" class="w-5 h-5 text-cyan-400"></i>
+                  <span>+1 (555) 123-4567</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+          
+          <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+            <p class="text-gray-500 text-sm mb-4 md:mb-0">
+              © ${new Date().getFullYear()} Phantom Digital. All rights reserved.
+            </p>
+            <div class="flex gap-6">
+              <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition">Privacy Policy</a>
+              <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition">Terms of Service</a>
+              <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition">Cookies</a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,61 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .navbar {
+          backdrop-filter: blur(10px);
+          background-color: rgba(15, 23, 42, 0.8);
+        }
+        .nav-link {
+          position: relative;
+        }
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          bottom: -2px;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: linear-gradient(to right, #06b6d4, #3b82f6);
+          transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+          width: 100%;
+        }
+      </style>
+      <nav class="navbar fixed w-full z-50 border-b border-gray-800">
+        <div class="container mx-auto px-4 py-4">
+          <div class="flex items-center justify-between">
+            <a href="/" class="flex items-center gap-2">
+              <div class="w-8 h-8 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center">
+                <i data-feather="activity" class="text-white w-4 h-4"></i>
+              </div>
+              <span class="text-xl font-bold">Phantom</span>
+            </a>
+            
+            <div class="hidden md:flex items-center gap-8">
+              <a href="#services" class="nav-link text-gray-300 hover:text-white">Services</a>
+              <a href="#work" class="nav-link text-gray-300 hover:text-white">Work</a>
+              <a href="#about" class="nav-link text-gray-300 hover:text-white">About</a>
+              <a href="#contact" class="nav-link text-gray-300 hover:text-white">Contact</a>
+            </div>
+            
+            <div class="flex items-center gap-4">
+              <button id="darkModeToggle" class="p-2 rounded-lg hover:bg-gray-800 transition">
+                <i data-feather="moon" class="text-gray-300 w-5 h-5"></i>
+              </button>
+              <a href="#contact" class="px-6 py-2 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg font-medium hover:opacity-90 transition hidden md:block">
+                Get Started
+              </a>
+              <button class="md:hidden p-2 rounded-lg hover:bg-gray-800 transition">
+                <i data-feather="menu" class="text-gray-300 w-5 h-5"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,252 @@
-<!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" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Phantom Digital | Digital Experiences Redefined</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+      tailwind.config = {
+        darkMode: 'class',
+        theme: {
+          extend: {
+            colors: {
+              phantom: {
+                50: '#f0f9ff',
+                100: '#e0f2fe',
+                200: '#bae6fd',
+                300: '#7dd3fc',
+                400: '#38bdf8',
+                500: '#0ea5e9',
+                600: '#0284c7',
+                700: '#0369a1',
+                800: '#075985',
+                900: '#0c4a6e',
+              }
+            }
+          }
+        }
+      }
+    </script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-12">
+        <!-- Hero Section -->
+        <section class="flex flex-col md:flex-row items-center justify-between gap-12 mb-24">
+            <div class="md:w-1/2 space-y-6">
+                <h1 class="text-5xl md:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500">
+                    Digital Experiences <br> <span class="text-white">Redefined</span>
+                </h1>
+                <p class="text-xl text-gray-300">
+                    We craft immersive digital experiences that captivate audiences and drive results.
+                </p>
+                <div class="flex gap-4">
+                    <a href="#contact" class="px-8 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full font-medium hover:opacity-90 transition">
+                        Get Started
+                    </a>
+                    <a href="#work" class="px-8 py-3 border border-gray-700 rounded-full font-medium hover:bg-gray-800 transition">
+                        Our Work
+                    </a>
+                </div>
+            </div>
+            <div class="md:w-1/2">
+                <div class="relative">
+                    <div class="absolute -inset-4 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-2xl blur opacity-75"></div>
+                    <img src="http://static.photos/technology/1024x576/42" alt="Digital Technology" class="relative rounded-xl w-full h-auto">
+                </div>
+            </div>
+        </section>
+
+        <!-- Clients Section -->
+        <section class="mb-24">
+            <h2 class="text-2xl font-medium text-center text-gray-400 mb-12">Trusted by innovative companies worldwide</h2>
+            <div class="flex flex-wrap justify-center gap-8 md:gap-16 items-center">
+                <img src="https://via.placeholder.com/120x40/1e293b/ffffff?text=Client+1" alt="Client Logo" class="h-8 opacity-70 hover:opacity-100 transition">
+                <img src="https://via.placeholder.com/120x40/1e293b/ffffff?text=Client+2" alt="Client Logo" class="h-8 opacity-70 hover:opacity-100 transition">
+                <img src="https://via.placeholder.com/120x40/1e293b/ffffff?text=Client+3" alt="Client Logo" class="h-8 opacity-70 hover:opacity-100 transition">
+                <img src="https://via.placeholder.com/120x40/1e293b/ffffff?text=Client+4" alt="Client Logo" class="h-8 opacity-70 hover:opacity-100 transition">
+                <img src="https://via.placeholder.com/120x40/1e293b/ffffff?text=Client+5" alt="Client Logo" class="h-8 opacity-70 hover:opacity-100 transition">
+            </div>
+        </section>
+
+        <!-- Services Section -->
+        <section id="services" class="mb-24">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold mb-4">Our Digital Services</h2>
+                <p class="text-xl text-gray-400 max-w-2xl mx-auto">
+                    Comprehensive solutions tailored to your digital needs
+                </p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-gray-800 p-8 rounded-xl hover:bg-gray-700 transition group">
+                    <div class="w-14 h-14 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center mb-6">
+                        <i data-feather="code" class="text-white w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 group-hover:text-cyan-400 transition">Web Development</h3>
+                    <p class="text-gray-400">
+                        Custom websites and web applications built with modern technologies for optimal performance.
+                    </p>
+                </div>
+                <div class="bg-gray-800 p-8 rounded-xl hover:bg-gray-700 transition group">
+                    <div class="w-14 h-14 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center mb-6">
+                        <i data-feather="smartphone" class="text-white w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 group-hover:text-cyan-400 transition">Mobile Apps</h3>
+                    <p class="text-gray-400">
+                        Engaging mobile experiences for iOS and Android that delight users and drive engagement.
+                    </p>
+                </div>
+                <div class="bg-gray-800 p-8 rounded-xl hover:bg-gray-700 transition group">
+                    <div class="w-14 h-14 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center mb-6">
+                        <i data-feather="bar-chart-2" class="text-white w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 group-hover:text-cyan-400 transition">Digital Strategy</h3>
+                    <p class="text-gray-400">
+                        Data-driven strategies to maximize your digital presence and achieve business objectives.
+                    </p>
+                </div>
+            </div>
+        </section>
+
+        <!-- Work Section -->
+        <section id="work" class="mb-24">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold mb-4">Featured Work</h2>
+                <p class="text-xl text-gray-400 max-w-2xl mx-auto">
+                    A glimpse of our recent digital projects
+                </p>
+            </div>
+            <div class="grid md:grid-cols-2 gap-8">
+                <div class="group relative overflow-hidden rounded-xl">
+                    <img src="http://static.photos/workspace/1200x630/5" alt="Project 1" class="w-full h-80 object-cover group-hover:scale-105 transition duration-500">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent flex flex-col justify-end p-8">
+                        <h3 class="text-2xl font-bold text-white mb-2">Corporate Portal</h3>
+                        <p class="text-gray-300">Enterprise web application</p>
+                    </div>
+                </div>
+                <div class="group relative overflow-hidden rounded-xl">
+                    <img src="http://static.photos/technology/1200x630/7" alt="Project 2" class="w-full h-80 object-cover group-hover:scale-105 transition duration-500">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent flex flex-col justify-end p-8">
+                        <h3 class="text-2xl font-bold text-white mb-2">E-commerce Platform</h3>
+                        <p class="text-gray-300">Next-gen shopping experience</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Testimonials -->
+        <section class="mb-24">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold mb-4">Client Testimonials</h2>
+                <p class="text-xl text-gray-400 max-w-2xl mx-auto">
+                    What our clients say about working with us
+                </p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-gray-800 p-8 rounded-xl">
+                    <div class="flex items-center gap-4 mb-6">
+                        <img src="http://static.photos/people/200x200/1" alt="Client" class="w-12 h-12 rounded-full">
+                        <div>
+                            <h4 class="font-bold">Sarah Johnson</h4>
+                            <p class="text-sm text-gray-400">CEO, TechCorp</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300">
+                        "Phantom Digital transformed our online presence with their innovative approach and technical expertise."
+                    </p>
+                </div>
+                <div class="bg-gray-800 p-8 rounded-xl">
+                    <div class="flex items-center gap-4 mb-6">
+                        <img src="http://static.photos/people/200x200/2" alt="Client" class="w-12 h-12 rounded-full">
+                        <div>
+                            <h4 class="font-bold">Michael Chen</h4>
+                            <p class="text-sm text-gray-400">CMO, RetailX</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300">
+                        "The mobile app they developed exceeded our expectations and drove a 40% increase in engagement."
+                    </p>
+                </div>
+                <div class="bg-gray-800 p-8 rounded-xl">
+                    <div class="flex items-center gap-4 mb-6">
+                        <img src="http://static.photos/people/200x200/3" alt="Client" class="w-12 h-12 rounded-full">
+                        <div>
+                            <h4 class="font-bold">Emma Rodriguez</h4>
+                            <p class="text-sm text-gray-400">Director, FinTech</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300">
+                        "Their strategic guidance helped us navigate digital transformation successfully."
+                    </p>
+                </div>
+            </div>
+        </section>
+
+        <!-- Contact Section -->
+        <section id="contact" class="mb-24">
+            <div class="bg-gradient-to-r from-gray-800 to-gray-900 rounded-2xl p-8 md:p-12">
+                <div class="grid md:grid-cols-2 gap-12 items-center">
+                    <div>
+                        <h2 class="text-3xl font-bold mb-4">Ready to elevate your digital presence?</h2>
+                        <p class="text-gray-400 mb-8">
+                            Let's discuss how we can help you achieve your digital goals. Get in touch with our team today.
+                        </p>
+                        <div class="space-y-4">
+                            <div class="flex items-center gap-4">
+                                <div class="w-10 h-10 bg-cyan-500/10 rounded-lg flex items-center justify-center">
+                                    <i data-feather="mail" class="text-cyan-400"></i>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-400">Email us at</p>
+                                    <p class="font-medium">hello@phantom-digital.com</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center gap-4">
+                                <div class="w-10 h-10 bg-cyan-500/10 rounded-lg flex items-center justify-center">
+                                    <i data-feather="phone" class="text-cyan-400"></i>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-400">Call us at</p>
+                                    <p class="font-medium">+1 (555) 123-4567</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <form class="space-y-4">
+                            <div>
+                                <label for="name" class="block text-sm font-medium mb-1">Name</label>
+                                <input type="text" id="name" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-500">
+                            </div>
+                            <div>
+                                <label for="email" class="block text-sm font-medium mb-1">Email</label>
+                                <input type="email" id="email" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-500">
+                            </div>
+                            <div>
+                                <label for="message" class="block text-sm font-medium mb-1">Message</label>
+                                <textarea id="message" rows="4" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-500"></textarea>
+                            </div>
+                            <button type="submit" class="w-full bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-medium py-3 px-6 rounded-lg hover:opacity-90 transition">
+                                Send Message
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.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,28 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // 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'
+            });
+        });
+    });
+
+    // Dark mode toggle (if needed)
+    const darkModeToggle = document.getElementById('darkModeToggle');
+    if (darkModeToggle) {
+        darkModeToggle.addEventListener('click', () => {
+            document.documentElement.classList.toggle('dark');
+            localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
+        });
+    }
+
+    // Check for saved dark mode preference
+    if (localStorage.getItem('darkMode') === 'true' || 
+        (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark');
+    } else {
+        document.documentElement.classList.remove('dark');
+    }
+});

style.css

@@ -1,28 +1,41 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-track {
+    background: #1e293b;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb {
+    background: #334155;
+    border-radius: 4px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb:hover {
+    background: #475569;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Animation classes */
+.animate-float {
+    animation: float 6s ease-in-out infinite;
 }
+
+@keyframes float {
+    0% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+    100% { transform: translateY(0px); }
+}
+
+.gradient-text {
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+}