<!-- Navbar -->

<nav class="fixed top-0 left-0 w-full bg-gradient-to-r from-[#0a0a0f] via-[#101020] to-[#0a0a0f] bg-opacity-90 backdrop-blur-md border-b border-primary/30 z-50">
<div class="max-w-7xl mx-auto px-6 py-3 flex items-center justify-between">

<!-- Logo / Title -->
<a href="#" class="flex items-center space-x-2 text-white font-bold text-2xl tracking-wide hover:text-primary transition">
<span class="text-primary">⚡</span>
<span>MultimediaOne</span>
</a>

<!-- Menu Links -->
<div class="hidden md:flex space-x-8 text-gray-300 font-medium">
<a href="#home" class="hover:text-primary transition">Home</a>
<a href="#about" class="hover:text-primary transition">About</a>
<a href="#services" class="hover:text-primary transition">Services</a>
<a href="#portfolio" class="hover:text-primary transition">Portfolio</a>
<a href="#ai" class="hover:text-primary transition">AI</a>
<a href="#contact" class="hover:text-primary transition">Contact</a>
</div>

<!-- CTA Button -->
<a href="#contact" class="hidden md:inline-block bg-primary/80 hover:bg-primary text-white font-semibold px-5 py-2 rounded-full shadow-md transition">
Let’s Talk
</a>

<!-- Mobile Menu Button -->
<button class="md:hidden text-white text-2xl focus:outline-none" id="menu-toggle">
☰
</button>
</div>

<!-- Mobile Dropdown -->
<div id="mobile-menu" class="hidden md:hidden flex flex-col bg-[#0a0a0f] border-t border-primary/20 py-3 px-6 space-y-3">
<a href="#home" class="hover:text-primary transition">Home</a>
<a href="#about" class="hover:text-primary transition">About</a>
<a href="#services" class="hover:text-primary transition">Services</a>
<a href="#portfolio" class="hover:text-primary transition">Portfolio</a>
<a href="#ai" class="hover:text-primary transition">AI</a>
<a href="#contact" class="hover:text-primary transition">Contact</a>
</div>
</nav>

<script>
// Mobile menu toggle
document.getElementById('menu-toggle').addEventListene

README.md

@@ -1,10 +1,13 @@
 ---
-title: Pixelpulse Studios
-emoji: 😻
-colorFrom: purple
-colorTo: green
+title: PixelPulse Studios
+colorFrom: yellow
+colorTo: pink
+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,97 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    background-color: #020617;
+                    border-top: 1px solid rgba(255, 255, 255, 0.1);
+                }
+                
+                .footer-grid {
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+                    gap: 2rem;
+                }
+                
+                .footer-link {
+                    transition: color 0.3s ease, transform 0.3s ease;
+                }
+                
+                .footer-link:hover {
+                    color: #7e22ce;
+                    transform: translateX(5px);
+                }
+                
+                .social-icon {
+                    transition: all 0.3s ease;
+                }
+                
+                .social-icon:hover {
+                    transform: translateY(-3px);
+                    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
+                }
+            </style>
+            
+            <footer class="py-12">
+                <div class="container mx-auto px-6">
+                    <div class="footer-grid mb-12">
+                        <div>
+                            <h3 class="text-xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">
+                                PixelPulse
+                            </h3>
+<p class="text-gray-400 mb-4">
+                                AI-Powered Creative Studio specializing in board games, Kickstarter campaigns, and digital brands.
+                            </p>
+                        </div>
+                        
+                        <div>
+                            <h4 class="text-lg font-semibold mb-4 text-white">Services</h4>
+                            <ul class="space-y-2">
+                                <li><a href="#" class="footer-link text-gray-400">Kickstarter Videos</a></li>
+                                <li><a href="#" class="footer-link text-gray-400">Board Game Design</a></li>
+                                <li><a href="#" class="footer-link text-gray-400">AI Art & Design</a></li>
+                                <li><a href="#" class="footer-link text-gray-400">3D Mockups</a></li>
+                            </ul>
+                        </div>
+                        
+                        <div>
+                            <h4 class="text-lg font-semibold mb-4 text-white">Quick Links</h4>
+                            <ul class="space-y-2">
+                                <li><a href="#about" class="footer-link text-gray-400">About Us</a></li>
+                                <li><a href="#portfolio" class="footer-link text-gray-400">Portfolio</a></li>
+                                <li><a href="#services" class="footer-link text-gray-400">Services</a></li>
+                                <li><a href="#contact" class="footer-link text-gray-400">Contact</a></li>
+                            </ul>
+                        </div>
+                        
+                        <div>
+                            <h4 class="text-lg font-semibold mb-4 text-white">Connect</h4>
+                            <div class="flex space-x-4">
+                                <a href="#" class="social-icon w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-300 hover:bg-primary">
+                                    <i data-feather="instagram"></i>
+                                </a>
+                                <a href="#" class="social-icon w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-300 hover:bg-blue-400">
+                                    <i data-feather="twitter"></i>
+                                </a>
+                                <a href="#" class="social-icon w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-300 hover:bg-red-500">
+                                    <i data-feather="youtube"></i>
+                                </a>
+                                <a href="#" class="social-icon w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-300 hover:bg-green-500">
+                                    <i data-feather="dollar-sign"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="pt-8 border-t border-gray-800 text-center text-gray-500">
+                        <p>© ${new Date().getFullYear()} MultimediaOne. All rights reserved.</p>
+                    </div>
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,159 @@
+
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    z-index: 1000;
+                    background: linear-gradient(90deg, #0a0a0f, #101020, #0a0a0f);
+                    background-opacity: 0.9;
+                    backdrop-filter: blur(10px);
+                    border-bottom: 1px solid rgba(124, 58, 237, 0.3);
+                }
+                
+                .container {
+                    max-width: 1280px;
+                    margin: 0 auto;
+                    padding: 0.75rem 1.5rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    font-weight: 700;
+                    font-size: 1.5rem;
+                    color: white;
+                    transition: color 0.3s ease;
+                }
+                
+                .logo:hover {
+                    color: #7e22ce;
+                }
+                
+                .logo-emoji {
+                    color: #7e22ce;
+                }
+                
+                .nav-links {
+                    display: none;
+                    gap: 2rem;
+                    color: rgb(209, 213, 219);
+                    font-weight: 500;
+                }
+                
+                .nav-links a {
+                    transition: color 0.3s ease;
+                }
+                
+                .nav-links a:hover {
+                    color: #7e22ce;
+                }
+                
+                .cta-button {
+                    display: none;
+                    background: rgba(124, 58, 237, 0.8);
+                    color: white;
+                    font-weight: 600;
+                    padding: 0.5rem 1.25rem;
+                    border-radius: 9999px;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+                    transition: all 0.3s ease;
+                }
+                
+                .cta-button:hover {
+                    background: #7e22ce;
+                }
+                
+                .menu-toggle {
+                    display: block;
+                    color: white;
+                    font-size: 1.5rem;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                }
+                
+                .mobile-menu {
+                    display: none;
+                    flex-direction: column;
+                    background: #0a0a0f;
+                    border-top: 1px solid rgba(124, 58, 237, 0.2);
+                    padding: 0.75rem 1.5rem;
+                    gap: 0.75rem;
+                }
+                
+                .mobile-menu a {
+                    color: rgb(209, 213, 219);
+                    transition: color 0.3s ease;
+                }
+                
+                .mobile-menu a:hover {
+                    color: #7e22ce;
+                }
+                
+                @media (min-width: 768px) {
+                    .nav-links, .cta-button {
+                        display: flex;
+                    }
+                    .menu-toggle {
+                        display: none;
+                    }
+                }
+            </style>
+            
+            <nav>
+                <div class="container">
+                    <a href="#" class="logo">
+                        <span class="logo-emoji">⚡</span>
+                        <span>PixelPulse</span>
+                    </a>
+                    
+                    <div class="nav-links">
+                        <a href="#home">Home</a>
+                        <a href="#about">About</a>
+                        <a href="#services">Services</a>
+                        <a href="#portfolio">Portfolio</a>
+                        <a href="#ai">AI</a>
+                        <a href="#contact">Contact</a>
+                    </div>
+                    
+                    <a href="#contact" class="cta-button">Let's Talk</a>
+                    
+                    <button class="menu-toggle" id="mobile-menu-button">
+                        ☰
+                    </button>
+                </div>
+                
+                <div class="mobile-menu" id="mobile-menu">
+                    <a href="#home">Home</a>
+                    <a href="#about">About</a>
+                    <a href="#services">Services</a>
+                    <a href="#portfolio">Portfolio</a>
+                    <a href="#ai">AI</a>
+                    <a href="#contact">Contact</a>
+                </div>
+            </nav>
+`;
+        // Mobile menu toggle
+        const menuButton = this.shadowRoot.getElementById('mobile-menu-button');
+        const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
+        
+        menuButton.addEventListener('click', () => {
+            const isOpen = mobileMenu.style.display === 'flex';
+            mobileMenu.style.display = isOpen ? 'none' : 'flex';
+            menuButton.textContent = isOpen ? '☰' : '✕';
+        });
+}
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,282 @@
-<!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>PixelPulse Studios - AI-Powered Creative Studio</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 = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#7e22ce',
+                        secondary: '#3b82f6',
+                        dark: '#0f172a',
+                        darker: '#020617'
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-darker text-gray-200 font-sans">
+    <!-- Navbar Component -->
+    <custom-navbar></custom-navbar>
+
+    <!-- Hero Section -->
+    <section class="relative h-screen flex items-center justify-center bg-gradient-to-br from-darker to-primary/10 overflow-hidden">
+        <div class="absolute inset-0 z-0">
+            <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-primary/20 blur-3xl"></div>
+            <div class="absolute bottom-1/3 right-1/3 w-96 h-96 rounded-full bg-secondary/20 blur-3xl"></div>
+        </div>
+        <div class="container mx-auto px-6 z-10 text-center">
+            <h1 class="text-5xl md:text-7xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">
+                PixelPulse
+            </h1>
+<h2 class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto text-gray-300">
+                AI-Powered Creative Studio
+            </h2>
+            <p class="text-lg md:text-xl mb-12 max-w-3xl mx-auto text-gray-400">
+                We design, animate, and build multimedia experiences for board games, Kickstarter campaigns, and digital brands.
+            </p>
+            <a href="#portfolio" class="inline-block px-8 py-4 rounded-full bg-gradient-to-r from-primary to-secondary text-white font-semibold hover:shadow-lg hover:shadow-primary/30 transition-all duration-300">
+                View Portfolio
+            </a>
+        </div>
+        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
+            <i data-feather="chevron-down" class="text-gray-400"></i>
+        </div>
+    </section>
+
+    <!-- About Section -->
+    <section id="about" class="py-20 bg-dark">
+        <div class="container mx-auto px-6">
+            <div class="max-w-4xl mx-auto text-center">
+                <h2 class="text-3xl md:text-4xl font-bold mb-8 text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">
+                    Crafting Digital Magic
+                </h2>
+                <p class="text-lg md:text-xl leading-relaxed text-gray-300">
+                    MultimediaOne is a full-service creative studio specializing in board games, Kickstarter promo videos, and AI-powered design. Our team of experts blends art, motion, and technology to craft visually stunning experiences that stand out.
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Services Section -->
+    <section id="services" class="py-20 bg-darker">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center text-transparent bg-clip-text bg-gradient-to-r from-secondary to-primary">
+                Our Services
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Service 1 -->
+                <div class="bg-dark p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all duration-300 hover:shadow-lg hover:shadow-primary/10">
+                    <div class="w-14 h-14 mb-6 rounded-full bg-primary/10 flex items-center justify-center">
+                        <i data-feather="film" class="text-primary"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4 text-white">Kickstarter Videos & Animation</h3>
+                    <p class="text-gray-400">Captivating animations that boost your campaign's success with compelling storytelling.</p>
+                </div>
+                
+                <!-- Service 2 -->
+                <div class="bg-dark p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all duration-300 hover:shadow-lg hover:shadow-primary/10">
+                    <div class="w-14 h-14 mb-6 rounded-full bg-primary/10 flex items-center justify-center">
+                        <i data-feather="package" class="text-primary"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4 text-white">Board Game & Card Game Design</h3>
+                    <p class="text-gray-400">Complete design solutions from concept to production-ready assets.</p>
+                </div>
+                
+                <!-- Service 3 -->
+                <div class="bg-dark p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all duration-300 hover:shadow-lg hover:shadow-primary/10">
+                    <div class="w-14 h-14 mb-6 rounded-full bg-primary/10 flex items-center justify-center">
+                        <i data-feather="cpu" class="text-primary"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4 text-white">AI Art & Concept Design</h3>
+                    <p class="text-gray-400">Leverage cutting-edge AI tools to rapidly prototype and iterate designs.</p>
+                </div>
+                
+                <!-- Service 4 -->
+                <div class="bg-dark p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all duration-300 hover:shadow-lg hover:shadow-primary/10">
+                    <div class="w-14 h-14 mb-6 rounded-full bg-primary/10 flex items-center justify-center">
+                        <i data-feather="box" class="text-primary"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4 text-white">3D Mockups & Product Visualization</h3>
+                    <p class="text-gray-400">Photorealistic renders that showcase your product before it exists.</p>
+                </div>
+                
+                <!-- Service 5 -->
+                <div class="bg-dark p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all duration-300 hover:shadow-lg hover:shadow-primary/10">
+                    <div class="w-14 h-14 mb-6 rounded-full bg-primary/10 flex items-center justify-center">
+                        <i data-feather="layers" class="text-primary"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4 text-white">Branding & Promo Materials</h3>
+                    <p class="text-gray-400">Cohesive visual identities that make your brand instantly recognizable.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Portfolio Section -->
+    <section id="portfolio" class="py-20 bg-dark">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">
+                Featured Projects
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Project 1 -->
+                <div class="group relative overflow-hidden rounded-xl h-96">
+                    <img src="http://static.photos/gaming/640x360/1" alt="Stoner Realms" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent p-6 flex flex-col justify-end">
+                        <h3 class="text-2xl font-bold text-white mb-2">Stoner Realms</h3>
+                        <p class="text-gray-300">Board game design and Kickstarter campaign</p>
+                        <div class="mt-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                            <a href="#" class="text-primary hover:text-secondary">View Case Study →</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Project 2 -->
+                <div class="group relative overflow-hidden rounded-xl h-96">
+                    <img src="http://static.photos/gaming/640x360/2" alt="Elemental Clash" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent p-6 flex flex-col justify-end">
+                        <h3 class="text-2xl font-bold text-white mb-2">Elemental Clash</h3>
+                        <p class="text-gray-300">Card game illustration and packaging design</p>
+                        <div class="mt-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                            <a href="#" class="text-primary hover:text-secondary">View Case Study →</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Project 3 -->
+                <div class="group relative overflow-hidden rounded-xl h-96">
+                    <img src="http://static.photos/gaming/640x360/3" alt="Jump the Shark" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent p-6 flex flex-col justify-end">
+                        <h3 class="text-2xl font-bold text-white mb-2">Jump the Shark</h3>
+                        <p class="text-gray-300">Party game animation and marketing materials</p>
+                        <div class="mt-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                            <a href="#" class="text-primary hover:text-secondary">View Case Study →</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Project 4 -->
+                <div class="group relative overflow-hidden rounded-xl h-96">
+                    <img src="http://static.photos/gaming/640x360/4" alt="Racket" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent p-6 flex flex-col justify-end">
+                        <h3 class="text-2xl font-bold text-white mb-2">Racket</h3>
+                        <p class="text-gray-300">Tabletop game branding and visual identity</p>
+                        <div class="mt-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                            <a href="#" class="text-primary hover:text-secondary">View Case Study →</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Project 5 -->
+                <div class="group relative overflow-hidden rounded-xl h-96">
+                    <img src="http://static.photos/gaming/640x360/5" alt="King of Kirt" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent p-6 flex flex-col justify-end">
+                        <h3 class="text-2xl font-bold text-white mb-2">King of Kirt</h3>
+                        <p class="text-gray-300">Strategy game components and 3D renders</p>
+                        <div class="mt-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                            <a href="#" class="text-primary hover:text-secondary">View Case Study →</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Project 6 -->
+                <div class="group relative overflow-hidden rounded-xl h-96">
+                    <div class="w-full h-full bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
+                        <div class="text-center p-6">
+                            <h3 class="text-2xl font-bold text-white mb-4">Your Project Here</h3>
+                            <a href="#contact" class="inline-block px-6 py-3 rounded-full bg-white text-dark font-semibold hover:bg-gray-100 transition-all duration-300">
+                                Let's Talk
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- AI Section -->
+    <section class="py-20 bg-gradient-to-r from-darker to-primary/10">
+        <div class="container mx-auto px-6">
+            <div class="max-w-4xl mx-auto text-center">
+                <h2 class="text-3xl md:text-4xl font-bold mb-8 text-transparent bg-clip-text bg-gradient-to-r from-white to-secondary">
+                    AI-Powered Creativity
+                </h2>
+                <p class="text-lg md:text-xl leading-relaxed text-gray-300 mb-12">
+                    We integrate the latest AI tools to accelerate creative production while maintaining artistic integrity and human oversight.
+                </p>
+                <div class="flex flex-wrap justify-center gap-8">
+                    <div class="bg-dark p-4 rounded-lg border border-gray-800 w-24 h-24 flex items-center justify-center">
+                        <img src="https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg" alt="ChatGPT" class="w-16">
+                    </div>
+                    <div class="bg-dark p-4 rounded-lg border border-gray-800 w-24 h-24 flex items-center justify-center">
+                        <img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Midjourney_Emblem.png" alt="Midjourney" class="w-16">
+                    </div>
+                    <div class="bg-dark p-4 rounded-lg border border-gray-800 w-24 h-24 flex items-center justify-center">
+                        <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Runway_ML_logo.png" alt="Runway" class="w-16">
+                    </div>
+                    <div class="bg-dark p-4 rounded-lg border border-gray-800 w-24 h-24 flex items-center justify-center">
+                        <img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/ElevenLabs_logo.svg" alt="ElevenLabs" class="w-16">
+                    </div>
+                    <div class="bg-dark p-4 rounded-lg border border-gray-800 w-24 h-24 flex items-center justify-center">
+                        <img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Sora_%28AI%29_logo.png" alt="Sora" class="w-16">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Contact Section -->
+    <section id="contact" class="py-20 bg-dark">
+        <div class="container mx-auto px-6">
+            <div class="max-w-4xl mx-auto text-center">
+                <h2 class="text-3xl md:text-4xl font-bold mb-8 text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">
+                    Let's Create Something Amazing
+                </h2>
+                <p class="text-xl md:text-2xl leading-relaxed text-gray-300 mb-12">
+                    Ready to bring your creative vision to life? Get in touch with our team.
+                </p>
+                <div class="mb-12">
+                    <a href="mailto:multimediaone.team@gmail.com" class="text-2xl font-semibold text-white hover:text-primary transition-colors duration-300">
+                        multimediaone.team@gmail.com
+                    </a>
+                </div>
+                <div class="flex justify-center gap-6">
+                    <a href="#" class="w-12 h-12 rounded-full bg-gray-800 hover:bg-primary flex items-center justify-center transition-all duration-300">
+                        <i data-feather="youtube" class="text-white"></i>
+                    </a>
+                    <a href="#" class="w-12 h-12 rounded-full bg-gray-800 hover:bg-pink-600 flex items-center justify-center transition-all duration-300">
+                        <i data-feather="instagram" class="text-white"></i>
+                    </a>
+                    <a href="#" class="w-12 h-12 rounded-full bg-gray-800 hover:bg-blue-400 flex items-center justify-center transition-all duration-300">
+                        <i data-feather="twitter" class="text-white"></i>
+                    </a>
+                    <a href="#" class="w-12 h-12 rounded-full bg-gray-800 hover:bg-green-500 flex items-center justify-center transition-all duration-300">
+                        <i data-feather="dollar-sign" class="text-white"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer Component -->
+    <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();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,41 @@
+// Smooth scrolling for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        
+        const targetId = this.getAttribute('href');
+        if (targetId === '#') return;
+        
+        const targetElement = document.querySelector(targetId);
+        if (targetElement) {
+            window.scrollTo({
+                top: targetElement.offsetTop - 80,
+                behavior: 'smooth'
+            });
+        }
+    });
+});
+
+// Add scroll reveal animations
+document.addEventListener('DOMContentLoaded', () => {
+    const animateOnScroll = () => {
+        const elements = document.querySelectorAll('.fade-in, .slide-up, .slide-left, .slide-right');
+        
+        elements.forEach(element => {
+            const elementTop = element.getBoundingClientRect().top;
+            const elementVisible = 150;
+            
+            if (elementTop < window.innerHeight - elementVisible) {
+                element.classList.add('active');
+            }
+        });
+    };
+    
+    // Initial check
+    animateOnScroll();
+    
+    // Check on scroll
+    window.addEventListener('scroll', animateOnScroll);
+});
+
+// Mobile menu toggle functionality will be handled by navbar component

style.css

@@ -1,28 +1,60 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-track {
+    background: #020617;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb {
+    background: #7e22ce;
+    border-radius: 5px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb:hover {
+    background: #6b21a8;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Animations */
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-20px);
+    }
 }
+
+.float-animation {
+    animation: float 6s ease-in-out infinite;
+}
+
+/* Custom Styles */
+.hero-glass {
+    background: rgba(15, 23, 42, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.hover-glow:hover {
+    box-shadow: 0 0 15px rgba(124, 58, 237, 0.5);
+}
+
+.text-gradient {
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .hero-title {
+        font-size: 2.5rem;
+    }
+    
+    .hero-subtitle {
+        font-size: 1rem;
+    }
+}