Update index.html

index.html

@@ -23,7 +23,7 @@
         }
         
         .neon-text {
-            text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
+            text-shadow: 0 0 10px var(--极on-cyan), 0 0 20px var(--neon-cyan);
             color: white;
         }
         
@@ -42,7 +42,7 @@
             backdrop-filter: blur(10px);
             border: 1px solid rgba(100, 100, 255, 0.2);
             border-radius: 12px;
-            box-shadow: 0 0 20px rgba(0, 200, 255, 0.1);
+            box-shadow: 0 0 20px rgba(0, 200, 255, 极.1);
             transition: all 0.3s ease;
         }
         
@@ -296,6 +296,119 @@
             display: block;
             animation: fadeIn 0.8s ease;
         }
+        
+        /* New Footer Styles */
+        .footer-section {
+            background: linear-gradient(135deg, #0a0e1a 0%, #0d1120 100%);
+            border-top: 1px solid rgba(0, 200, 255, 0.1);
+            padding: 60px 0 30px;
+        }
+        
+        .footer-column h3 {
+            font-size: 1.25rem;
+            font-weight: 700;
+            margin-bottom: 1.5rem;
+            position: relative;
+            padding-bottom: 10px;
+            color: var(--neon-cyan);
+        }
+        
+        .footer-column h3::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 40px;
+            height: 2px;
+            background: var(--neon-cyan);
+            box-shadow: 0 0 10px var(--neon-cyan);
+        }
+        
+        .footer-links a {
+            display: block;
+            margin-bottom: 12px;
+            color: #a0aec0;
+            transition: all 0.3s ease;
+            position: relative;
+            padding-left: 20px;
+        }
+        
+        .footer-links a::before {
+            content: '▹';
+            position: absolute;
+            left: 0;
+            color: var(--neon-cyan);
+        }
+        
+        .footer-links a:hover {
+            color: white;
+            transform: translateX(5px);
+        }
+        
+        .social-links a {
+            display: inline-block;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: rgba(100, 100, 255, 0.1);
+            color: var(--neon-cyan);
+            text-align: center;
+            line-height: 40px;
+            margin-right: 12px;
+            transition: all 0.3s ease;
+        }
+        
+        .social-links a:hover {
+            background: var(--neon-cyan);
+            color: #0a0a12;
+            transform: translateY(-3px);
+            box-shadow: 0 0 15px var(--neon-cyan);
+        }
+        
+        .copyright {
+            border-top: 1px solid rgba(100, 100, 255, 0.1);
+            padding-top: 30px;
+            margin-top: 50px;
+            text-align: center;
+            color: #718096;
+            font-size: 0.9rem;
+        }
+        
+        .copyright-text {
+            color: var(--neon-cyan);
+            text-shadow: 0 0 5px var(--neon-cyan);
+        }
+        
+        .cta-section {
+            background: linear-gradient(135deg, #0d1120 0%, #0a0e1a 100%);
+            border: 1px solid rgba(0, 200, 255, 0.1);
+            border-radius: 12px;
+            padding: 50px 30px;
+            margin-bottom: 60px;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .cta-section::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(
+                transparent,
+                rgba(0, 255, 255, 0.05),
+                transparent
+            );
+            transform: rotate(30deg);
+            animation: hologram 10s linear infinite;
+        }
+        
+        @keyframes hologram {
+            0% { transform: rotate(30deg) translateX(-100%); }
+            100% { transform: rotate(30deg) translateX(100%); }
+        }
     </style>
 </head>
 <body>
@@ -352,7 +465,7 @@
                     <button class="bg-transparent border-2 border-cyan-500 text-cyan-300 rounded-full px-8 py-3 text-lg font-semibold hover:bg-cyan-900 hover:bg-opacity-30 transition">
                         <i class="fas fa-terminal mr-2"></i>Try Now
                     </button>
-                </div>
+                </极>
                 
                 <div class="glowing-border max-w-5xl mx-auto p-1 rounded-xl">
                     <div class="futuristic-card p-6">
@@ -447,7 +560,7 @@
                             <div class="text-cyan-200">Faster Campaign Creation</div>
                         </div>
                         <div>
-                            <div class="text-4xl font-bold neon-pink mb-极">47%</div>
+                            <div class="text-4xl font-bold neon-pink mb-2">47%</div>
                             <div class="text-cyan-200">Higher Average CTR</div>
                         </div>
                         <div>
@@ -553,7 +666,7 @@
                             <div class="text-3xl font-bold bg-green-900 w-16 h-16 rounded-full flex items-center justify-center matrix-text mr-6">4</div>
                             <h3 class="text-2xl font-bold matrix-text">Visual Content Creation</h3>
                         </div>
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        <div class="grid grid-c极ls-1 md:grid-cols-2 gap-8">
                             <div>
                                 <p class="text-cyan-100 mb-4">AI generates stunning visuals that match your brand and campaign goals.</p>
                                 <div class="flex flex-wrap gap-2">
@@ -822,7 +935,7 @@
                                     <span>A/B testing capabilities</span>
                                 </li>
                                 <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></极>
+                                    <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
                                     <span>Priority support</span>
                                 </li>
                             </ul>
@@ -896,50 +1009,64 @@
         </div>
     </section>
     
-    <!-- Footer -->
-    <footer class="py-12 px-6 border-t border-gray-800">
-        <div class="container mx-auto max-w-6xl">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
-                <div>
-                    <h3 class="text-lg font-bold neon-text mb-4">Product</h3>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Features</a></li>
-                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Pricing</a></li>
-                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">API</a></li>
-                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Integrations</a></li>
-                    </ul>
+    <!-- Enhanced Footer -->
+    <footer class="footer-section">
+        <div class="container mx-auto px-6">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <!-- Product Column -->
+                <div class="footer-column">
+                    <h3>Product</h3>
+                    <div class="footer-links">
+                        <a href="#">Features</a>
+                        <a href="#">Pricing</a>
+                        <a href="#">API</a>
+                        <a href="#">Integrations</a>
+                    </div>
                 </div>
-                <div>
-                    <h3 class="text-lg font-bold neon-text mb-4">Resources</h3>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Documentation</a></li>
-                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Guides</a></li>
-                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Blog</a></li>
-                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Support</a></li>
-                    </ul>
+                
+                <!-- Resources Column -->
+                <div class="footer-column">
+                    <h3>Resources</h3>
+                    <div class="footer-links">
+                        <a href="#">Documentation</a>
+                        <a href="#">Guides</a>
+                        <a href="#">Blog</a>
+                        <a href="#">Support</a>
+                    </div>
                 </div>
-                <div>
-                    <h3 class="text-lg font-bold neon-text mb-4">Company</h3>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">About</a></li>
-                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Careers</a></li>
-                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Privacy</a></li>
-                        <li><a href="#" class="text-cyan-200 hover:text-cyan-400">Terms</a></li>
-                    </ul>
+                
+                <!-- Company Column -->
+                <div class="footer-column">
+                    <h3>Company</h3>
+                    <div class="footer-links">
+                        <a href="#">About</a>
+                        <a href="#">Careers</a>
+                        <a href="#">Privacy</a>
+                        <a href="#">Terms</a>
+                    </div>
                 </div>
-                <div>
-                    <h3 class="text-lg font-bold neon-text mb-4">Connect</h3>
-                    <div class="flex space-x-4">
-                        <a href="#" class="text-cyan-200 hover:text-cyan-400 text-xl"><i class="fab fa-twitter"></i></a>
-                        <a href="#" class="text-cyan-200 hover:text-cyan-400 text-xl"><i class="fab fa-linkedin"></i></a>
-                        <a href="#" class="text-cyan-200 hover:text-cyan-400 text-xl"><i class="fab fa-facebook"></i></a>
-                        <a href="#" class="text-cyan-200 hover:text-cyan-400 text-xl"><i class="fab fa-instagram"></i></a>
+                
+                <!-- Connect Column -->
+                <div class="footer-column">
+                    <h3>Connect</h3>
+                    <div class="social-links mb-6">
+                        <a href="#"><i class="fab fa-twitter"></i></a>
+                        <a href="#"><i class="fab fa-linkedin"></i></a>
+                        <a href="#"><i class="fab fa-facebook"></i></a>
+                        <a href="#"><i class="fab fa-instagram"></i></a>
+                    </div>
+                    <p class="text-cyan-100">Subscribe to our newsletter</p>
+                    <div class="mt-4 flex">
+                        <input type="email" placeholder="Your email" class="flex-grow bg-gray-800 text-white rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500">
+                        <button class="bg-cyan-600 hover:bg-cyan-500 text-white px-4 rounded-r-lg">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
                     </div>
                 </div>
             </div>
             
-            <div class="border-t border-gray-800 pt-8 text-center text-cyan-200">
-                <p>&copy; 2023 Rookus AI. All rights reserved. The future of marketing is here.</p>
+            <div class="copyright">
+                <p>&copy; 2023 Rookus AI. All rights reserved. <span class="copyright-text">The future of marketing is here.</span></p>
             </div>
         </div>
     </footer>
@@ -1028,6 +1155,30 @@
                 }
             });
         }
+        
+        // Simple animation for the newsletter input
+        const emailInput = document.querySelector('input[type="email"]');
+        if (emailInput) {
+            emailInput.addEventListener('focus', function() {
+                this.parentElement.classList.add('ring-2', 'ring-cyan-500', 'rounded-lg');
+            });
+            
+            emailInput.addEventListener('blur', function() {
+                this.parentElement.classList.remove('ring-2', 'ring-cyan-500', 'rounded-lg');
+            });
+        }
+        
+        // Add hover effect to footer links
+        const footerLinks = document.querySelectorAll('.footer-links a');
+        footerLinks.forEach(link => {
+            link.addEventListener('mouseenter', function() {
+                this.style.color = 'var(--neon-cyan)';
+            });
+            
+            link.addEventListener('mouseleave', function() {
+                this.style.color = '#a0aec0';
+            });
+        });
     </script>
 </body>
 </html>