Blame for index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fascorp | InsurTech IT Solutions</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.min.js"></script>
    <style>
        @keyframes pulse {
            0% { opacity: 0.8; }
            50% { opacity: 1; transform: scale(1.05); }
            100% { opacity: 0.8; }
        }
        .atom-spin {
            animation: spin 8s linear infinite;
        }
        @keyframes spin {
            100% { transform: rotate(360deg); }
        }
        .neon-text {
            text-shadow: 0 0 8px rgba(0, 255, 255, 0.8), 0 0 16px rgba(0, 255, 255, 0.6);
        }
        @keyframes spin {
            100% { transform: rotate(360deg); filter: brightness(1.5); }
        }
.gradient-bg {
            background: linear-gradient(135deg, #000428 0%, #004e92 100%);
        }
    </style>
</head>
<body class="text-white font-sans overflow-x-hidden relative">
    <div id="vanta-bg" class="fixed inset-0 z-0"></div>
    <div class="relative z-10 min-h-screen flex flex-col">
        <!-- Navigation -->
        <nav class="bg-black bg-opacity-50 backdrop-blur-sm px-6 py-4 sticky top-0 z-50">
            <div class="container mx-auto flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <div class="relative h-16 w-16 flex items-center justify-center">
                        <div class="absolute h-16 w-16 rounded-full border-4 border-cyan-300 border-opacity-90 atom-spin" style="box-shadow: 0 0 15px cyan;"></div>
                        <div class="absolute h-12 w-12 rounded-full border-4 border-cyan-200 border-opacity-90 atom-spin" style="animation-direction: reverse; animation-duration: 3s; box-shadow: 0 0 20px cyan;"></div>
                        <div class="absolute h-8 w-8 rounded-full border-4 border-cyan-100 border-opacity-90 atom-spin" style="animation-duration: 2s; box-shadow: 0 0 25px cyan;"></div>
                        <div class="absolute h-6 w-6 rounded-full bg-cyan-200 pulse" style="animation: pulse 0.5s ease-in-out infinite; box-shadow: 0 0 30px cyan;"></div>
                    </div>
                    <span class="text-3xl font-bold tracking-tighter neon-text" style="text-shadow: 0 0 15px cyan, 0 0 30px cyan;">FASCORP</span>
</div>
                <div class="hidden md:flex space-x-8">
                    <a href="#" class="hover:text-cyan-300 transition-colors">Services</a>
                    <a href="#" class="hover:text-cyan-300 transition-colors">Solutions</a>
                    <a href="#" class="hover:text-cyan-300 transition-colors">Industries</a>
                    <a href="#" class="hover:text-cyan-300 transition-colors">About</a>
                    <a href="#" class="hover:text-cyan-300 transition-colors">Contact</a>
                </div>
                <button class="md:hidden">
                    <i data-feather="menu"></i>
                </button>
            </div>
        </nav>

        <!-- Hero Section -->
        <section class="flex-1 flex items-center gradient-bg bg-opacity-90">
            <div class="container mx-auto px-6 py-20 text-center">
                <h1 class="text-5xl md:text-6xl font-bold mb-6 neon-text">Quantum Sync Your <span class="text-cyan-300">InsurTech</span> Infrastructure</h1>
                <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto opacity-90">
                    Cutting-edge InsurTech solutions for insurance systems integration with atomic precision.
</p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <button class="px-8 py-3 bg-cyan-500 hover:bg-cyan-600 rounded-full font-semibold transition-all transform hover:scale-105">
                        Get Started
                    </button>
                    <button class="px-8 py-3 border border-cyan-400 hover:bg-cyan-900 hover:bg-opacity-30 rounded-full font-semibold transition-all transform hover:scale-105">
                        Learn More
                    </button>
                </div>
            </div>
        </section>

        <!-- Services Preview -->
        <section class="py-20 bg-black bg-opacity-70 backdrop-blur-sm">
            <div class="container mx-auto px-6">
                <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center neon-text">Our Quantum Solutions</h2>
                <div class="grid md:grid-cols-3 gap-8">
                    <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-700 hover:border-cyan-400 transition-all hover:shadow-lg hover:shadow-cyan-500/20">
                        <div class="h-16 w-16 mb-6 bg-cyan-900 rounded-lg flex items-center justify-center">
                            <i data-feather="cpu" class="h-8 w-8 text-cyan-300"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">System Integration</h3>
                        <p class="opacity-80">Seamlessly connect legacy insurance systems with modern fintech platforms.</p>
                    </div>
                    <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-700 hover:border-cyan-400 transition-all hover:shadow-lg hover:shadow-cyan-500/20">
                        <div class="h-16 w-16 mb-6 bg-cyan-900 rounded-lg flex items-center justify-center">
                            <i data-feather="shield" class="h-8 w-8 text-cyan-300"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Security Protocols</h3>
                        <p class="opacity-80">Quantum-grade encryption and security for your insurance transactions.</p>
</div>
                    <div class="bg-gray-900 bg-opacity-50 p-8 rounded-xl border border-gray-700 hover:border-cyan-400 transition-all hover:shadow-lg hover:shadow-cyan-500/20">
                        <div class="h-16 w-16 mb-6 bg-cyan-900 rounded-lg flex items-center justify-center">
                            <i data-feather="activity" class="h-8 w-8 text-cyan-300"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">AI Analytics</h3>
                        <p class="opacity-80">Predictive modeling and risk assessment powered by machine learning.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Tech Showcase -->
        <section class="py-20">
            <div class="container mx-auto px-6">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
                        <h2 class="text-3xl md:text-4xl font-bold mb-6 neon-text">Particle Acceleration for Your Business</h2>
                        <p class="opacity-90 mb-6">Our proprietary quantum integration framework reduces implementation time by 300% while increasing transaction throughput.</p>
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <i data-feather="check-circle" class="text-cyan-400 mr-3 mt-1"></i>
                                <span>Zero-downtime migration strategies</span>
                            </li>
                            <li class="flex items-start">
                                <i data-feather="check-circle" class="text-cyan-400 mr-3 mt-1"></i>
                                <span>Blockchain-compatible architecture</span>
                            </li>
                            <li class="flex items-start">
                                <i data-feather="check-circle" class="text-cyan-400 mr-3 mt-1"></i>
                                <span>Compliance with all financial regulations</span>
                            </li>
                        </ul>
                    </div>
                    <div class="md:w-1/2 relative">
                        <div class="relative h-80 w-full bg-gray-900 rounded-xl overflow-hidden">
                            <div class="absolute inset-0 flex items-center justify-center">
                                <div class="relative h-48 w-48">
                                    <div class="absolute h-48 w-48 rounded-full border-2 border-cyan-400 border-opacity-50 atom-spin"></div>
                                    <div class="absolute h-32 w-32 rounded-full border-2 border-cyan-300 border-opacity-70 atom-spin" style="animation-duration: 6s; animation-direction: reverse;"></div>
                                    <div class="absolute h-16 w-16 rounded-full border-2 border-cyan-200 border-opacity-90 atom-spin" style="animation-duration: 4s;"></div>
                                    <div class="absolute h-6 w-6 rounded-full bg-cyan-400 pulse" style="animation: pulse 1.5s ease-in-out infinite;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- CTA Section -->
        <section class="py-20 bg-gradient-to-r from-cyan-900 to-blue-900">
            <div class="container mx-auto px-6 text-center">
                <h2 class="text-3xl md:text-4xl font-bold mb-6 neon-text">Ready for Quantum Leap?</h2>
                <p class="text-xl mb-10 max-w-2xl mx-auto opacity-90">
                    Contact our team of quantum InsurTech specialists today and revolutionize your insurance systems.
</p>
                <button class="px-10 py-4 bg-white text-gray-900 hover:bg-gray-100 rounded-full font-bold text-lg transition-all transform hover:scale-105">
                    Schedule Consultation
                </button>
            </div>
        </section>

        <!-- Footer -->
        <footer class="bg-black bg-opacity-80 py-12">
            <div class="container mx-auto px-6">
                <div class="flex flex-col md:flex-row justify-between">
                    <div class="mb-8 md:mb-0">
                        <div class="flex items-center space-x-2 mb-6">
                        <div class="relative h-12 w-12 flex items-center justify-center">
                            <div class="absolute h-12 w-12 rounded-full border-4 border-cyan-300 border-opacity-90 atom-spin" style="box-shadow: 0 0 10px cyan;"></div>
                            <div class="absolute h-8 w-8 rounded-full border-4 border-cyan-200 border-opacity-90 atom-spin" style="animation-direction: reverse; animation-duration: 3s; box-shadow: 0 0 15px cyan;"></div>
                        </div>
<span class="text-xl font-bold tracking-tighter">FASCORP</span>
                        </div>
                        <p class="opacity-70 max-w-xs">
                            Quantum-grade IT solutions for the fintech insurance industry.
                        </p>
                    </div>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
                        <div>
                            <h4 class="font-bold mb-4 text-cyan-300">Solutions</h4>
                            <ul class="space-y-2">
                                <li><a href="#" class="opacity-70 hover:opacity-100 hover:text-cyan-300">System Integration</a></li>
                                <li><a href="#" class="opacity-70 hover:opacity-100 hover:text-cyan-300">Data Migration</a></li>
                                <li><a href="#" class="opacity-70 hover:opacity-100 hover:text-cyan-300">Security</a></li>
                                <li><a href="#" class="opacity-70 hover:opacity-100 hover:text-cyan-300">Analytics</a></li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-bold mb-4 text-cyan-300">Company</h4>
                            <ul class="space-y-2">
                                <li><a href="#" class="opacity-70 hover:opacity-100 hover:text-cyan-300">About Us</a></li>
                                <li><a href="#" class="opacity-70 hover:opacity-100 hover:text-cyan-300">Careers</a></li>
                                <li><a href="#" class="opacity-70 hover:opacity-100 hover:text-cyan-300">News</a></li>
                                <li><a href="#" class="opacity-70 hover:opacity-100 hover:text-cyan-300">Contact</a></li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-bold mb-4 text-cyan-300">Connect</h4>
                            <div class="flex space-x-4">
                                <a href="#" class="opacity-70 hover:opacity-100 hover:text-cyan-300"><i data-feather="linkedin"></i></a>
                                <a href="#" class="opacity-70 hover:opacity-100 hover:text-cyan-300"><i data-feather="twitter"></i></a>
                                <a href="#" class="opacity-70 hover:opacity-100 hover:text-cyan-300"><i data-feather="github"></i></a>
                                <a href="#" class="opacity-70 hover:opacity-100 hover:text-cyan-300"><i data-feather="mail"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="border-t border-gray-800 mt-12 pt-8 text-center opacity-70 text-sm">
                    © 2023 Fascorp Quantum IT Solutions. All rights reserved.
                </div>
            </div>
        </footer>
    </div>

    <script>
        VANTA.GLOBE({
            el: "#vanta-bg",
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 1.00,
            color: 0x00ffff,
            backgroundColor: 0x0,
            size: 0.8
        });

        feather.replace();
    </script>
</body>
</html>