create me a worlds best digital art designs portfolio website

README.md

@@ -1,10 +1,13 @@
 ---
-title: Pixelpulse Gallery
-emoji: 📊
+title: PixelPulse Gallery ✨
 colorFrom: pink
-colorTo: red
+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,84 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    background: linear-gradient(to right, #0c4a6e, #4c1d95);
+                }
+                .social-icon {
+                    transition: all 0.3s ease;
+                }
+                .social-icon:hover {
+                    transform: translateY(-3px) scale(1.1);
+                }
+                .footer-link {
+                    position: relative;
+                }
+                .footer-link::after {
+                    content: '';
+                    position: absolute;
+                    width: 0;
+                    height: 2px;
+                    bottom: 0;
+                    left: 0;
+                    background-color: currentColor;
+                    transition: width 0.3s ease;
+                }
+                .footer-link:hover::after {
+                    width: 100%;
+                }
+            </style>
+            <footer class="text-white py-12 px-4 sm:px-6 lg:px-8">
+                <div class="max-w-7xl mx-auto">
+                    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                        <div class="md:col-span-2">
+                            <h3 class="text-2xl font-bold mb-4">PixelPulse Gallery</h3>
+                            <p class="text-white/80 mb-6">Creating digital art that inspires and captivates. Let's bring your vision to life.</p>
+                            <div class="flex space-x-4">
+                                <a href="#" class="social-icon text-white hover:text-primary-300">
+                                    <i data-feather="instagram"></i>
+                                </a>
+                                <a href="#" class="social-icon text-white hover:text-primary-300">
+                                    <i data-feather="twitter"></i>
+                                </a>
+                                <a href="#" class="social-icon text-white hover:text-primary-300">
+                                    <i data-feather="dribbble"></i>
+                                </a>
+                                <a href="#" class="social-icon text-white hover:text-primary-300">
+                                    <i data-feather="youtube"></i>
+                                </a>
+                            </div>
+                        </div>
+                        <div>
+                            <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
+                            <ul class="space-y-2">
+                                <li><a href="#gallery" class="footer-link text-white/80 hover:text-white transition-colors">Gallery</a></li>
+                                <li><a href="#about" class="footer-link text-white/80 hover:text-white transition-colors">About</a></li>
+                                <li><a href="#testimonials" class="footer-link text-white/80 hover:text-white transition-colors">Testimonials</a></li>
+                                <li><a href="#contact" class="footer-link text-white/80 hover:text-white transition-colors">Contact</a></li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h4 class="text-lg font-semibold mb-4">Legal</h4>
+                            <ul class="space-y-2">
+                                <li><a href="#" class="footer-link text-white/80 hover:text-white transition-colors">Privacy Policy</a></li>
+                                <li><a href="#" class="footer-link text-white/80 hover:text-white transition-colors">Terms of Service</a></li>
+                                <li><a href="#" class="footer-link text-white/80 hover:text-white transition-colors">Cookie Policy</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="border-t border-white/20 mt-12 pt-6 flex flex-col md:flex-row justify-between items-center">
+                        <p class="text-white/60">© 2023 PixelPulse Gallery. All rights reserved.</p>
+                        <p class="text-white/60 mt-4 md:mt-0">Made with <i data-feather="heart" class="w-4 h-4 inline text-red-400"></i> for digital art</p>
+                    </div>
+                </div>
+            </footer>
+        `;
+
+        // Initialize feather icons
+        feather.replace();
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,124 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    transition: all 0.3s ease;
+                }
+                nav.scrolled {
+                    background-color: white;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+                }
+                nav.scrolled a {
+                    color: #1f2937;
+                }
+                nav.scrolled a:hover {
+                    color: #0ea5e9;
+                }
+                .nav-link {
+                    position: relative;
+                }
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    width: 0;
+                    height: 2px;
+                    bottom: 0;
+                    left: 0;
+                    background-color: currentColor;
+                    transition: width 0.3s ease;
+                }
+                .nav-link:hover::after {
+                    width: 100%;
+                }
+                .mobile-menu {
+                    transition: all 0.3s ease;
+                }
+            </style>
+            <nav class="fixed w-full z-50 py-4 px-6 transition-all duration-300">
+                <div class="max-w-7xl mx-auto flex justify-between items-center">
+                    <a href="/" class="text-2xl font-bold text-gradient">PixelPulse</a>
+                    
+                    <div class="hidden md:flex items-center space-x-8">
+                        <a href="#gallery" class="nav-link text-white hover:text-primary-200 transition-colors">Gallery</a>
+                        <a href="#about" class="nav-link text-white hover:text-primary-200 transition-colors">About</a>
+                        <a href="#testimonials" class="nav-link text-white hover:text-primary-200 transition-colors">Testimonials</a>
+                        <a href="#contact" class="nav-link text-white hover:text-primary-200 transition-colors">Contact</a>
+                        <a href="#" class="px-6 py-2 bg-white text-primary-500 rounded-full font-medium hover:bg-gray-100 transition-colors">Commission</a>
+                    </div>
+                    
+                    <button class="md:hidden text-white focus:outline-none" id="mobile-menu-button">
+                        <i data-feather="menu"></i>
+                    </button>
+                </div>
+                
+                <!-- Mobile menu -->
+                <div class="mobile-menu md:hidden hidden absolute left-0 right-0 bg-white py-4 px-6 shadow-lg rounded-b-lg" id="mobile-menu">
+                    <div class="flex flex-col space-y-4">
+                        <a href="#gallery" class="nav-link text-gray-800 hover:text-primary-500 transition-colors">Gallery</a>
+                        <a href="#about" class="nav-link text-gray-800 hover:text-primary-500 transition-colors">About</a>
+                        <a href="#testimonials" class="nav-link text-gray-800 hover:text-primary-500 transition-colors">Testimonials</a>
+                        <a href="#contact" class="nav-link text-gray-800 hover:text-primary-500 transition-colors">Contact</a>
+                        <a href="#" class="px-6 py-2 bg-primary-500 text-white rounded-full font-medium hover:bg-primary-600 transition-colors text-center">Commission</a>
+                    </div>
+                </div>
+            </nav>
+        `;
+
+        // Add scroll event listener for navbar
+        const nav = this.shadowRoot.querySelector('nav');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 50) {
+                nav.classList.add('scrolled');
+                // Change all text-white to text-gray-800
+                const links = this.shadowRoot.querySelectorAll('.nav-link');
+                links.forEach(link => {
+                    link.classList.remove('text-white');
+                    link.classList.add('text-gray-800');
+                    link.classList.add('hover:text-primary-500');
+                });
+            } else {
+                nav.classList.remove('scrolled');
+                // Change back to text-white
+                const links = this.shadowRoot.querySelectorAll('.nav-link');
+                links.forEach(link => {
+                    link.classList.add('text-white');
+                    link.classList.remove('text-gray-800');
+                    link.classList.remove('hover:text-primary-500');
+                });
+            }
+        });
+
+        // Mobile menu toggle
+        const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
+        const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
+        
+        mobileMenuButton.addEventListener('click', () => {
+            const menuHidden = mobileMenu.classList.contains('hidden');
+            if (menuHidden) {
+                mobileMenu.classList.remove('hidden');
+                mobileMenuButton.innerHTML = '<i data-feather="x"></i>';
+            } else {
+                mobileMenu.classList.add('hidden');
+                mobileMenuButton.innerHTML = '<i data-feather="menu"></i>';
+            }
+            feather.replace();
+        });
+
+        // Close mobile menu when clicking on a link
+        const mobileLinks = this.shadowRoot.querySelectorAll('#mobile-menu a');
+        mobileLinks.forEach(link => {
+            link.addEventListener('click', () => {
+                mobileMenu.classList.add('hidden');
+                mobileMenuButton.innerHTML = '<i data-feather="menu"></i>';
+                feather.replace();
+            });
+        });
+
+        // Initialize feather icons
+        feather.replace();
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,315 @@
-<!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="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PixelPulse | Digital Art Portfolio</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>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        secondary: {
+                            50: '#f5f3ff',
+                            100: '#ede9fe',
+                            200: '#ddd6fe',
+                            300: '#c4b5fd',
+                            400: '#a78bfa',
+                            500: '#8b5cf6',
+                            600: '#7c3aed',
+                            700: '#6d28d9',
+                            800: '#5b21b6',
+                            900: '#4c1d95',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50 text-gray-900 font-sans antialiased">
+    <custom-navbar></custom-navbar>
+    <main>
+        <!-- Hero Section -->
+        <section class="relative h-screen flex items-center justify-center overflow-hidden">
+            <div class="absolute inset-0 bg-gradient-to-br from-primary-500 to-secondary-600 opacity-90"></div>
+            <div class="absolute inset-0 bg-[url('https://static.photos/abstract/1200x630/42')] bg-cover bg-center mix-blend-overlay"></div>
+            <div class="relative z-10 text-center px-4 max-w-4xl mx-auto">
+                <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 animate-fadeIn">PixelPulse Gallery</h1>
+                <p class="text-xl md:text-2xl text-white/90 mb-8 max-w-2xl mx-auto animate-fadeIn delay-100">Where digital brushstrokes meet infinite imagination</p>
+                <a href="#gallery" class="inline-flex items-center px-8 py-3 bg-white text-primary-600 rounded-full font-semibold shadow-lg hover:bg-gray-100 transition-all duration-300 animate-bounce">
+                    Explore Artworks
+                    <i data-feather="arrow-down" class="ml-2"></i>
+                </a>
+            </div>
+            <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
+                <i data-feather="chevron-down" class="text-white w-8 h-8"></i>
+            </div>
+        </section>
+
+        <!-- Gallery Section -->
+        <section id="gallery" class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
+            <div class="max-w-7xl mx-auto">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">My Digital Creations</h2>
+                    <p class="text-lg text-gray-600 max-w-2xl mx-auto">A curated collection of my finest digital artworks, each telling a unique visual story.</p>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <!-- Artwork 1 -->
+                    <div class="group relative overflow-hidden rounded-xl shadow-xl hover:shadow-2xl transition-all duration-500">
+                        <img src="https://static.photos/abstract/640x360/1" alt="Digital Artwork" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
+                            <div>
+                                <h3 class="text-xl font-bold text-white">Cosmic Dreams</h3>
+                                <p class="text-white/80">Digital Painting | 2023</p>
+                                <button class="mt-2 px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors">
+                                    View Details
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Artwork 2 -->
+                    <div class="group relative overflow-hidden rounded-xl shadow-xl hover:shadow-2xl transition-all duration-500">
+                        <img src="https://static.photos/minimal/640x360/2" alt="Digital Artwork" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
+                            <div>
+                                <h3 class="text-xl font-bold text-white">Minimal Essence</h3>
+                                <p class="text-white/80">Vector Art | 2023</p>
+                                <button class="mt-2 px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors">
+                                    View Details
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Artwork 3 -->
+                    <div class="group relative overflow-hidden rounded-xl shadow-xl hover:shadow-2xl transition-all duration-500">
+                        <img src="https://static.photos/technology/640x360/3" alt="Digital Artwork" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
+                            <div>
+                                <h3 class="text-xl font-bold text-white">Cyber Synth</h3>
+                                <p class="text-white/80">3D Render | 2023</p>
+                                <button class="mt-2 px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors">
+                                    View Details
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Artwork 4 -->
+                    <div class="group relative overflow-hidden rounded-xl shadow-xl hover:shadow-2xl transition-all duration-500">
+                        <img src="https://static.photos/nature/640x360/4" alt="Digital Artwork" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
+                            <div>
+                                <h3 class="text-xl font-bold text-white">Ethereal Flora</h3>
+                                <p class="text-white/80">Digital Painting | 2023</p>
+                                <button class="mt-2 px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors">
+                                    View Details
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Artwork 5 -->
+                    <div class="group relative overflow-hidden rounded-xl shadow-xl hover:shadow-2xl transition-all duration-500">
+                        <img src="https://static.photos/abstract/640x360/5" alt="Digital Artwork" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
+                            <div>
+                                <h3 class="text-xl font-bold text-white">Liquid Architecture</h3>
+                                <p class="text-white/80">3D Animation | 2023</p>
+                                <button class="mt-2 px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors">
+                                    View Details
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Artwork 6 -->
+                    <div class="group relative overflow-hidden rounded-xl shadow-xl hover:shadow-2xl transition-all duration-500">
+                        <img src="https://static.photos/black/640x360/6" alt="Digital Artwork" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
+                            <div>
+                                <h3 class="text-xl font-bold text-white">Monochrome Visions</h3>
+                                <p class="text-white/80">Digital Illustration | 2023</p>
+                                <button class="mt-2 px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors">
+                                    View Details
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="text-center mt-16">
+                    <a href="#" class="inline-flex items-center px-8 py-3 bg-primary-500 text-white rounded-full font-semibold shadow-lg hover:bg-primary-600 transition-all duration-300">
+                        Load More
+                        <i data-feather="plus" class="ml-2"></i>
+                    </a>
+                </div>
+            </div>
+        </section>
+
+        <!-- About Section -->
+        <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50">
+            <div class="max-w-7xl mx-auto">
+                <div class="flex flex-col lg:flex-row items-center gap-12">
+                    <div class="lg:w-1/2">
+                        <img src="https://static.photos/people/640x360/7" alt="Artist" class="rounded-2xl shadow-2xl w-full">
+                    </div>
+                    <div class="lg:w-1/2">
+                        <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">About The Artist</h2>
+                        <p class="text-lg text-gray-600 mb-6">I'm a passionate digital artist with over 8 years of experience creating stunning visual experiences. My work spans across various mediums including digital painting, 3D modeling, and vector illustration.</p>
+                        <p class="text-lg text-gray-600 mb-8">Each piece I create is a journey into imagination, blending technical precision with creative expression to craft artworks that resonate with emotion and meaning.</p>
+                        <div class="flex flex-wrap gap-4">
+                            <span class="px-4 py-2 bg-primary-100 text-primary-700 rounded-full">Photoshop</span>
+                            <span class="px-4 py-2 bg-primary-100 text-primary-700 rounded-full">Illustrator</span>
+                            <span class="px-4 py-2 bg-primary-100 text-primary-700 rounded-full">Blender</span>
+                            <span class="px-4 py-2 bg-primary-100 text-primary-700 rounded-full">Procreate</span>
+                            <span class="px-4 py-2 bg-primary-100 text-primary-700 rounded-full">After Effects</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Testimonials Section -->
+        <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-primary-500 to-secondary-600">
+            <div class="max-w-7xl mx-auto">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Client Testimonials</h2>
+                    <p class="text-lg text-white/90 max-w-2xl mx-auto">What people say about my work</p>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                    <!-- Testimonial 1 -->
+                    <div class="bg-white p-8 rounded-xl shadow-lg">
+                        <div class="flex items-center mb-4">
+                            <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
+                                <img src="https://static.photos/people/200x200/8" alt="Client" class="w-full h-full object-cover">
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-gray-900">Sarah Johnson</h4>
+                                <p class="text-primary-500">Creative Director</p>
+                            </div>
+                        </div>
+                        <p class="text-gray-600">"Absolutely stunning work! The attention to detail and creativity in each piece is remarkable. Our brand visuals have never looked better."</p>
+                        <div class="flex mt-4 text-yellow-400">
+                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                        </div>
+                    </div>
+
+                    <!-- Testimonial 2 -->
+                    <div class="bg-white p-8 rounded-xl shadow-lg">
+                        <div class="flex items-center mb-4">
+                            <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
+                                <img src="https://static.photos/people/200x200/9" alt="Client" class="w-full h-full object-cover">
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-gray-900">Michael Chen</h4>
+                                <p class="text-primary-500">Art Director</p>
+                            </div>
+                        </div>
+                        <p class="text-gray-600">"Working with this artist was a game-changer for our project. The ability to translate abstract concepts into breathtaking visuals is truly exceptional."</p>
+                        <div class="flex mt-4 text-yellow-400">
+                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                        </div>
+                    </div>
+
+                    <!-- Testimonial 3 -->
+                    <div class="bg-white p-8 rounded-xl shadow-lg">
+                        <div class="flex items-center mb-4">
+                            <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
+                                <img src="https://static.photos/people/200x200/10" alt="Client" class="w-full h-full object-cover">
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-gray-900">Emma Rodriguez</h4>
+                                <p class="text-primary-500">Marketing Director</p>
+                            </div>
+                        </div>
+                        <p class="text-gray-600">"The digital artworks created for our campaign exceeded all expectations. The artist's unique style and professionalism made the entire process seamless."</p>
+                        <div class="flex mt-4 text-yellow-400">
+                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                            <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Contact Section -->
+        <section class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
+            <div class="max-w-4xl mx-auto">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Get In Touch</h2>
+                    <p class="text-lg text-gray-600 max-w-2xl mx-auto">Have a project in mind? Let's create something amazing together.</p>
+                </div>
+
+                <form class="space-y-6">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div>
+                            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
+                            <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all">
+                        </div>
+                        <div>
+                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                            <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all">
+                        </div>
+                    </div>
+                    <div>
+                        <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
+                        <input type="text" id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all">
+                    </div>
+                    <div>
+                        <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
+                        <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all"></textarea>
+                    </div>
+                    <div>
+                        <button type="submit" class="w-full px-6 py-4 bg-primary-500 text-white font-semibold rounded-lg hover:bg-primary-600 transition-colors shadow-lg">
+                            Send Message
+                            <i data-feather="send" class="ml-2 inline"></i>
+                        </button>
+                    </div>
+                </form>
+            </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,61 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // 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) {
+                targetElement.scrollIntoView({
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+
+    // Artwork modal functionality
+    const artworkButtons = document.querySelectorAll('[data-artwork]');
+    artworkButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const artworkId = this.getAttribute('data-artwork');
+            // In a real implementation, you would show a modal with the artwork details
+            console.log(`Viewing artwork ${artworkId}`);
+        });
+    });
+
+    // Form submission
+    const contactForm = document.querySelector('form');
+    if (contactForm) {
+        contactForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            // In a real implementation, you would send the form data to a server
+            alert('Thank you for your message! I will get back to you soon.');
+            this.reset();
+        });
+    }
+
+    // Intersection Observer for animations
+    const animateOnScroll = () => {
+        const elements = document.querySelectorAll('.scroll-animate');
+        
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('animate-fadeIn');
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, {
+            threshold: 0.1
+        });
+
+        elements.forEach(element => {
+            observer.observe(element);
+        });
+    };
+
+    animateOnScroll();
+});

style.css

@@ -1,28 +1,88 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
+    40% { transform: translateY(-20px); }
+    60% { transform: translateY(-10px); }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.animate-fadeIn {
+    animation: fadeIn 1s ease-out forwards;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.delay-100 {
+    animation-delay: 100ms;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.delay-200 {
+    animation-delay: 200ms;
 }
+
+.animate-bounce {
+    animation: bounce 2s infinite;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(to bottom, #0ea5e9, #7c3aed);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(to bottom, #0284c7, #6d28d9);
+}
+
+/* Hover effects */
+.group:hover .group-hover\:opacity-100 {
+    opacity: 1;
+}
+
+/* Smooth transitions */
+.transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+}
+
+/* Artwork hover effect */
+.group:hover img {
+    transform: scale(1.1);
+}
+
+/* Custom shadow */
+.shadow-lg {
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.shadow-xl {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.shadow-2xl {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+/* Button hover effect */
+button:hover, a:hover {
+    transform: translateY(-2px);
+}
+
+/* Gradient text */
+.text-gradient {
+    background: linear-gradient(to right, #0ea5e9, #7c3aed);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}