Hugging Face's logo

Spaces:
fascorp
/
quantumsync-nexus
Running

App Files Community
quantumsync-nexus / index.html
fascorp's picture
fascorp
I don't like the logo. I expect it to be spinning and bright - almost like blinding.
16b6c16 verified
Raw History Blame Contribute Delete
14.3 kB
<!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>