so I want a website called complex developers which will offer these services (1. Web designing.

2. Web development.
3. Software development.
4. Game development.
5. AI integration.
6. AI engineering.
7. API integration.
8. Website and app security(Cybersecurity and penetration Testing).
9. Cloud infrastructure setup and migration(Cloud Migration and management).
10. Web assembly compliance.
11. Site speed and SEO Optimization(Performance Optimization).
12. Business Automation and workflow integration(No-code/Low-code Automation for Businesses).
13. Multi-language website integration(Localization and multi-language website setup).
14. Website/App Maintenance plan(Maintenance-as-a-service).
15. App development.
), let it be professional

README.md

@@ -1,10 +1,13 @@
 ---
-title: Codecraft Complex Devs
-emoji: 🌍
-colorFrom: indigo
-colorTo: indigo
+title: CodeCraft Complex Devs 🧩
+colorFrom: blue
+colorTo: gray
+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/cta-banner.js

@@ -0,0 +1,32 @@
+class CustomCtaBanner extends HTMLElement {
+    connectedCallback() {
+        const title = this.getAttribute('title') || 'Ready to get started?';
+        const buttonText = this.getAttribute('button-text') || 'Contact Us';
+        const link = this.getAttribute('link') || '#contact';
+        
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .cta-banner {
+                    background: linear-gradient(135deg, #6366f1 0%, #10b981 100%);
+                }
+                .cta-button {
+                    transition: all 0.3s ease;
+                }
+                .cta-button:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
+                }
+            </style>
+            <section class="cta-banner text-white py-16 px-6">
+                <div class="max-w-7xl mx-auto text-center">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-8">${title}</h2>
+                    <a href="${link}" class="cta-button inline-block bg-white text-primary-700 hover:bg-gray-100 font-semibold py-4 px-10 rounded-lg text-lg">
+                        ${buttonText}
+                    </a>
+                </div>
+            </section>
+        `;
+    }
+}
+customElements.define('custom-cta-banner', CustomCtaBanner);

components/footer.js

@@ -0,0 +1,99 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .footer-link {
+                    transition: all 0.2s ease;
+                }
+                .footer-link:hover {
+                    color: #10b981;
+                    transform: translateX(4px);
+                }
+                .social-icon {
+                    transition: all 0.2s ease;
+                }
+                .social-icon:hover {
+                    transform: translateY(-3px);
+                }
+            </style>
+            <footer class="bg-gray-900 text-gray-300 py-16 px-6">
+                <div class="max-w-7xl mx-auto">
+                    <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
+                        <div>
+                            <div class="flex items-center mb-6">
+                                <div class="w-10 h-10 rounded-lg bg-primary-500 flex items-center justify-center text-white font-bold mr-3">CC</div>
+                                <span class="text-xl font-bold text-white">CodeCraft Complex</span>
+                            </div>
+                            <p class="mb-6">Full-spectrum digital solutions for businesses of all sizes.</p>
+                            <div class="flex space-x-4">
+                                <a href="#" class="social-icon text-gray-400 hover:text-primary-500">
+                                    <i data-feather="twitter"></i>
+                                </a>
+                                <a href="#" class="social-icon text-gray-400 hover:text-primary-500">
+                                    <i data-feather="linkedin"></i>
+                                </a>
+                                <a href="#" class="social-icon text-gray-400 hover:text-primary-500">
+                                    <i data-feather="github"></i>
+                                </a>
+                                <a href="#" class="social-icon text-gray-400 hover:text-primary-500">
+                                    <i data-feather="facebook"></i>
+                                </a>
+                            </div>
+                        </div>
+                        
+                        <div>
+                            <h3 class="text-white text-lg font-semibold mb-6">Services</h3>
+                            <ul class="space-y-3">
+                                <li><a href="#" class="footer-link flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> Web Development</a></li>
+                                <li><a href="#" class="footer-link flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> AI Integration</a></li>
+                                <li><a href="#" class="footer-link flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> Cybersecurity</a></li>
+                                <li><a href="#" class="footer-link flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> Cloud Migration</a></li>
+                            </ul>
+                        </div>
+                        
+                        <div>
+                            <h3 class="text-white text-lg font-semibold mb-6">Company</h3>
+                            <ul class="space-y-3">
+                                <li><a href="#" class="footer-link flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> About Us</a></li>
+                                <li><a href="#" class="footer-link flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> Our Process</a></li>
+                                <li><a href="#" class="footer-link flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> Careers</a></li>
+                                <li><a href="#" class="footer-link flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> Blog</a></li>
+                            </ul>
+                        </div>
+                        
+                        <div>
+                            <h3 class="text-white text-lg font-semibold mb-6">Contact</h3>
+                            <ul class="space-y-3">
+                                <li class="flex items-start">
+                                    <i data-feather="mail" class="w-5 h-5 mr-3 mt-1"></i>
+                                    <span>contact@codecraftcomplex.com</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i data-feather="phone" class="w-5 h-5 mr-3 mt-1"></i>
+                                    <span>+1 (555) 123-4567</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i data-feather="map-pin" class="w-5 h-5 mr-3 mt-1"></i>
+                                    <span>123 Tech Street, Silicon Valley, CA 94000</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    
+                    <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
+                        <p>&copy; <span id="current-year"></span> CodeCraft Complex Devs. All rights reserved.</p>
+                    </div>
+                </div>
+                
+                <script>
+                    // Set current year
+                    document.getElementById('current-year').textContent = new Date().getFullYear();
+                    // Initialize feather icons
+                    feather.replace();
+                </script>
+            </footer>
+        `;
+    }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,119 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .navbar {
+                    transition: all 0.3s ease;
+                }
+                .navbar-scrolled {
+                    background-color: white;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+                }
+                .nav-link {
+                    position: relative;
+                }
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    width: 0;
+                    height: 2px;
+                    bottom: -2px;
+                    left: 0;
+                    background-color: currentColor;
+                    transition: width 0.3s ease;
+                }
+                .nav-link:hover::after {
+                    width: 100%;
+                }
+                .mobile-menu {
+                    max-height: 0;
+                    overflow: hidden;
+                    transition: max-height 0.3s ease-out;
+                }
+                .mobile-menu.open {
+                    max-height: 500px;
+                }
+            </style>
+            <nav class="navbar fixed w-full z-50 px-6 py-4">
+                <div class="max-w-7xl mx-auto flex justify-between items-center">
+                    <a href="/" class="flex items-center">
+                        <div class="w-10 h-10 rounded-lg bg-primary-500 flex items-center justify-center text-white font-bold mr-3">CC</div>
+                        <span class="text-xl font-bold text-gray-800">CodeCraft Complex</span>
+                    </a>
+                    
+                    <div class="hidden md:flex items-center space-x-8">
+                        <a href="/" class="nav-link text-gray-600 hover:text-primary-500">Home</a>
+                        <a href="#services" class="nav-link text-gray-600 hover:text-primary-500">Services</a>
+                        <a href="#process" class="nav-link text-gray-600 hover:text-primary-500">Process</a>
+                        <a href="#about" class="nav-link text-gray-600 hover:text-primary-500">About</a>
+                        <a href="#contact" class="nav-link text-gray-600 hover:text-primary-500">Contact</a>
+                        <a href="#contact" class="bg-primary-500 hover:bg-primary-600 text-white font-semibold py-2 px-6 rounded-lg transition duration-300">
+                            Get Started
+                        </a>
+                    </div>
+                    
+                    <button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none">
+                        <i data-feather="menu"></i>
+                    </button>
+                </div>
+                
+                <div id="mobile-menu" class="mobile-menu md:hidden bg-white rounded-lg mt-2 shadow-lg">
+                    <div class="px-4 py-2 space-y-4">
+                        <a href="/" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">Home</a>
+                        <a href="#services" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">Services</a>
+                        <a href="#process" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">Process</a>
+                        <a href="#about" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">About</a>
+                        <a href="#contact" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">Contact</a>
+                        <a href="#contact" class="block px-4 py-2 bg-primary-500 text-white font-semibold text-center rounded-lg hover:bg-primary-600">
+                            Get Started
+                        </a>
+                    </div>
+                </div>
+            </nav>
+            
+            <script>
+                // Mobile menu toggle
+                document.addEventListener('DOMContentLoaded', () => {
+                    const menuButton = this.shadowRoot.getElementById('mobile-menu-button');
+                    const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
+                    
+                    menuButton.addEventListener('click', () => {
+                        mobileMenu.classList.toggle('open');
+                        const icon = menuButton.querySelector('i');
+                        if (mobileMenu.classList.contains('open')) {
+                            feather.replace();
+                            icon.setAttribute('data-feather', 'x');
+                        } else {
+                            feather.replace();
+                            icon.setAttribute('data-feather', 'menu');
+                        }
+                        feather.replace();
+                    });
+                    
+                    // Navbar scroll effect
+                    const navbar = this.shadowRoot.querySelector('.navbar');
+                    window.addEventListener('scroll', () => {
+                        if (window.scrollY > 50) {
+                            navbar.classList.add('navbar-scrolled');
+                        } else {
+                            navbar.classList.remove('navbar-scrolled');
+                        }
+                    });
+                    
+                    // Close mobile menu when clicking a link
+                    const navLinks = this.shadowRoot.querySelectorAll('#mobile-menu a');
+                    navLinks.forEach(link => {
+                        link.addEventListener('click', () => {
+                            mobileMenu.classList.remove('open');
+                            const icon = menuButton.querySelector('i');
+                            icon.setAttribute('data-feather', 'menu');
+                            feather.replace();
+                        });
+                    });
+                });
+            </script>
+        `;
+    }
+}
+customElements.define('custom-navbar', CustomNavbar);

components/service-card.js

@@ -0,0 +1,44 @@
+class ServiceCard extends HTMLElement {
+    connectedCallback() {
+        const icon = this.getAttribute('icon') || 'code';
+        const title = this.getAttribute('title') || 'Service';
+        const description = this.getAttribute('description') || 'Professional service description';
+        
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .card {
+                    transition: all 0.3s ease;
+                }
+                .card:hover {
+                    transform: translateY(-5px);
+                    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+                }
+                .icon-container {
+                    transition: all 0.3s ease;
+                }
+                .card:hover .icon-container {
+                    background-color: #10b981;
+                    color: white;
+                }
+            </style>
+            <div class="card bg-white rounded-xl shadow-md overflow-hidden hover-scale transition-all-300 animate-on-scroll">
+                <div class="p-8">
+                    <div class="icon-container w-16 h-16 rounded-lg bg-primary-100 text-primary-500 flex items-center justify-center mb-6">
+                        <i data-feather="${icon}" class="w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-gray-800">${title}</h3>
+                    <p class="text-gray-600">${description}</p>
+                </div>
+            </div>
+        `;
+        
+        // Initialize feather icons after component is rendered
+        setTimeout(() => {
+            if (this.shadowRoot.querySelector('i')) {
+                feather.replace();
+            }
+        }, 100);
+    }
+}
+customElements.define('service-card', ServiceCard);

index.html

@@ -1,19 +1,271 @@
-<!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>CodeCraft Complex Devs | Full-Spectrum Digital Solutions</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            100: '#d1fae5',
+                            500: '#10b981',
+                            700: '#047857',
+                        },
+                        secondary: {
+                            100: '#e0e7ff',
+                            500: '#6366f1',
+                            700: '#4338ca',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <script src="components/navbar.js"></script>
+    <script src="components/service-card.js"></script>
+    <script src="components/cta-banner.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-50 text-gray-800 font-sans antialiased">
+    <custom-navbar></custom-navbar>
+
+    <main>
+        <!-- Hero Section -->
+        <section class="relative bg-gradient-to-r from-primary-500 to-secondary-500 text-white py-24 px-4 sm:px-6 lg:px-8">
+            <div class="max-w-7xl mx-auto text-center">
+                <h1 class="text-4xl md:text-6xl font-bold mb-6">Crafting Digital Excellence</h1>
+                <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8">Full-spectrum digital solutions tailored to your business needs through our 15 specialized services.</p>
+                <div class="flex flex-col sm:flex-row justify-center gap-4">
+                    <a href="#services" class="bg-white text-primary-700 hover:bg-gray-100 font-semibold py-3 px-8 rounded-lg transition duration-300">
+                        Explore Services
+                    </a>
+                    <a href="#contact" class="bg-transparent border-2 border-white hover:bg-white hover:text-primary-700 font-semibold py-3 px-8 rounded-lg transition duration-300">
+                        Get in Touch
+                    </a>
+                </div>
+            </div>
+            <div class="absolute bottom-0 left-0 right-0 h-16 bg-white/10 backdrop-blur-sm"></div>
+        </section>
+
+        <!-- Services Section -->
+        <section id="services" 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 mb-4">Our Comprehensive Services</h2>
+                    <p class="text-lg text-gray-600 max-w-3xl mx-auto">From conception to execution and beyond, we cover every aspect of digital presence and functionality.</p>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <service-card 
+                        icon="globe" 
+                        title="Web Design" 
+                        description="Beautiful, intuitive interfaces that engage users and reflect your brand identity."
+                    ></service-card>
+                    
+                    <service-card 
+                        icon="code" 
+                        title="Web Development" 
+                        description="Robust, scalable websites built with modern technologies and best practices."
+                    ></service-card>
+                    
+                    <service-card 
+                        icon="cpu" 
+                        title="Software Development" 
+                        description="Custom software solutions designed to streamline your business operations."
+                    ></service-card>
+                    
+                    <service-card 
+                        icon="joystick" 
+                        title="Game Development" 
+                        description="Immersive gaming experiences across multiple platforms and devices."
+                    ></service-card>
+                    
+                    <service-card 
+                        icon="activity" 
+                        title="AI Integration" 
+                        description="Smart automation and intelligence infused into your digital products."
+                    ></service-card>
+                    
+                    <service-card 
+                        icon="brain" 
+                        title="AI Engineering" 
+                        description="Custom AI models and machine learning solutions for your specific needs."
+                    ></service-card>
+                    
+                    <service-card 
+                        icon="link" 
+                        title="API Integration" 
+                        description="Seamless connectivity between your systems and third-party services."
+                    ></service-card>
+                    
+                    <service-card 
+                        icon="shield" 
+                        title="Cybersecurity" 
+                        description="Comprehensive protection for your digital assets and user data."
+                    ></service-card>
+                    
+                    <service-card 
+                        icon="cloud" 
+                        title="Cloud Services" 
+                        description="Migration, setup, and management of cloud infrastructure."
+                    ></service-card>
+                    
+                    <service-card 
+                        icon="zap" 
+                        title="WebAssembly" 
+                        description="High-performance web applications with near-native speed."
+                    ></service-card>
+                    
+                    <service-card 
+                        icon="trending-up" 
+                        title="Performance Optimization" 
+                        description="Faster loading, better SEO, and improved user experience."
+                    ></service-card>
+                    
+                    <service-card 
+                        icon="repeat" 
+                        title="Business Automation" 
+                        description="Streamline workflows with no-code/low-code solutions."
+                    ></service-card>
+                    
+                    <service-card 
+                        icon="globe" 
+                        title="Localization" 
+                        description="Multi-language support for global audience reach."
+                    ></service-card>
+                    
+                    <service-card 
+                        icon="tool" 
+                        title="Maintenance Plans" 
+                        description="Ongoing support to keep your digital products running smoothly."
+                    ></service-card>
+                    
+                    <service-card 
+                        icon="smartphone" 
+                        title="App Development" 
+                        description="Cross-platform mobile applications for iOS and Android."
+                    ></service-card>
+                </div>
+            </div>
+        </section>
+
+        <!-- Process 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="text-center mb-16">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Proven Process</h2>
+                    <p class="text-lg text-gray-600 max-w-3xl mx-auto">A structured approach to delivering exceptional results every time.</p>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                    <div class="bg-white p-8 rounded-xl shadow-md text-center">
+                        <div class="bg-primary-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
+                            <i data-feather="search" class="text-primary-700 w-8 h-8"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Discovery</h3>
+                        <p class="text-gray-600">We analyze your needs and goals to create a tailored solution.</p>
+                    </div>
+                    
+                    <div class="bg-white p-8 rounded-xl shadow-md text-center">
+                        <div class="bg-primary-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
+                            <i data-feather="layout" class="text-primary-700 w-8 h-8"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Planning</h3>
+                        <p class="text-gray-600">Structured roadmap with milestones and deliverables.</p>
+                    </div>
+                    
+                    <div class="bg-white p-8 rounded-xl shadow-md text-center">
+                        <div class="bg-primary-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
+                            <i data-feather="code" class="text-primary-700 w-8 h-8"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Execution</h3>
+                        <p class="text-gray-600">Agile development with regular progress updates.</p>
+                    </div>
+                    
+                    <div class="bg-white p-8 rounded-xl shadow-md text-center">
+                        <div class="bg-primary-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
+                            <i data-feather="check-circle" class="text-primary-700 w-8 h-8"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Delivery</h3>
+                        <p class="text-gray-600">Thorough testing and deployment with ongoing support.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Testimonials -->
+        <section class="py-20 px-4 sm:px-6 lg:px-8 bg-primary-700 text-white">
+            <div class="max-w-7xl mx-auto">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-4">Trusted By Industry Leaders</h2>
+                    <p class="text-lg text-primary-100 max-w-3xl mx-auto">Don't just take our word for it - hear what our clients have to say.</p>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                    <div class="bg-white/10 p-8 rounded-xl backdrop-blur-sm">
+                        <div class="flex items-center mb-4">
+                            <div class="w-12 h-12 rounded-full bg-primary-500 flex items-center justify-center mr-4">
+                                <span class="text-xl font-bold">AS</span>
+                            </div>
+                            <div>
+                                <h4 class="font-semibold">Alex Smith</h4>
+                                <p class="text-primary-200 text-sm">CTO, TechNova</p>
+                            </div>
+                        </div>
+                        <p class="italic">"The AI integration completely transformed our customer service operations. The Complex Devs team delivered beyond our expectations."</p>
+                    </div>
+                    
+                    <div class="bg-white/10 p-8 rounded-xl backdrop-blur-sm">
+                        <div class="flex items-center mb-4">
+                            <div class="w-12 h-12 rounded-full bg-primary-500 flex items-center justify-center mr-4">
+                                <span class="text-xl font-bold">MJ</span>
+                            </div>
+                            <div>
+                                <h4 class="font-semibold">Maria Johnson</h4>
+                                <p class="text-primary-200 text-sm">CEO, Global Retail</p>
+                            </div>
+                        </div>
+                        <p class="italic">"Their cloud migration expertise saved us thousands in infrastructure costs while improving performance dramatically."</p>
+                    </div>
+                    
+                    <div class="bg-white/10 p-8 rounded-xl backdrop-blur-sm">
+                        <div class="flex items-center mb-4">
+                            <div class="w-12 h-12 rounded-full bg-primary-500 flex items-center justify-center mr-4">
+                                <span class="text-xl font-bold">DR</span>
+                            </div>
+                            <div>
+                                <h4 class="font-semibold">David Rodriguez</h4>
+                                <p class="text-primary-200 text-sm">Founder, FinTech Startup</p>
+                            </div>
+                        </div>
+                        <p class="italic">"The security audit uncovered vulnerabilities we didn't even know existed. Their expertise is unparalleled."</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- CTA Section -->
+        <custom-cta-banner 
+            title="Ready to Transform Your Digital Presence?"
+            button-text="Schedule Consultation"
+            link="#contact"
+        ></custom-cta-banner>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,33 @@
+// Intersection Observer for animations
+document.addEventListener('DOMContentLoaded', () => {
+    const animateElements = document.querySelectorAll('.animate-on-scroll');
+    
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-fade-in');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, {
+        threshold: 0.1
+    });
+
+    animateElements.forEach(el => observer.observe(el));
+
+    // Feather icons replacement
+    feather.replace();
+});
+
+// Smooth scroll for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        document.querySelector(this.getAttribute('href')).scrollIntoView({
+            behavior: 'smooth'
+        });
+    });
+});
+
+// Current year for footer
+document.getElementById('current-year').textContent = new Date().getFullYear();

style.css

@@ -1,28 +1,60 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Smooth scroll behavior */
+html {
+    scroll-behavior: smooth;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Custom animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.animate-fade-in {
+    animation: fadeIn 0.8s ease-out forwards;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Delay animations for staggered effect */
+.delay-100 {
+    animation-delay: 0.1s;
+}
+.delay-200 {
+    animation-delay: 0.2s;
+}
+.delay-300 {
+    animation-delay: 0.3s;
+}
+.delay-400 {
+    animation-delay: 0.4s;
+}
+
+/* Custom hover effects */
+.hover-scale {
+    transition: transform 0.3s ease;
+}
+.hover-scale:hover {
+    transform: scale(1.03);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Gradient text */
+.text-gradient {
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    background-image: linear-gradient(to right, #10b981, #6366f1);
 }
+
+/* Custom shadows */
+.shadow-soft {
+    box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.1);
+}
+
+/* Section spacing */
+.section-py {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+}
+
+/* Custom transition */
+.transition-all-300 {
+    transition: all 0.3s ease;
+}