cosmic-code-comet / index.html
researcher28's picture
Fix file components/footer.js
57d05ca verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Silent Comet LDA | Engineering Intelligent Futures</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>
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'cosmic-navy': '#0A0F2C',
'cosmic-blue': '#1E3B70',
'electric-teal': '#00E5CC',
'soft-violet': '#9D4EDD',
'deep-space': '#050A1C',
},
fontFamily: {
'heading': ['Exo 2', 'sans-serif'],
'body': ['Inter', 'sans-serif'],
},
backgroundImage: {
'gradient-cosmic': 'radial-gradient(circle at 50% 50%, #0A0F2C 0%, #050A1C 70%)',
'gradient-nebula': 'linear-gradient(135deg, #0A0F2C 0%, #1E3B70 50%, #9D4EDD 100%)',
}
}
}
}
</script>
</head>
<body class="bg-deep-space text-white font-body overflow-x-hidden">
<!-- Navigation Component -->
<custom-navigation></custom-navigation>
<!-- Hero Section -->
<section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-cosmic">
<div class="absolute inset-0 z-0">
<div class="absolute top-10 left-1/4 w-96 h-96 bg-electric-teal/5 rounded-full blur-3xl animate-pulse"></div>
<div class="absolute bottom-20 right-1/4 w-80 h-80 bg-soft-violet/5 rounded-full blur-3xl animate-pulse delay-1000"></div>
<!-- Comet Trail Animation -->
<div class="comet-trail"></div>
</div>
<div class="container mx-auto px-6 z-10 text-center">
<h1 class="text-4xl md:text-6xl lg:text-7xl font-heading font-bold mb-6 leading-tight">
Engineering
<span class="bg-gradient-to-r from-electric-teal to-soft-violet bg-clip-text text-transparent">
Intelligent Futures
</span>
</h1>
<p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto">
Silent Comet LDA drives digital innovation through intelligent software, strategic IT consulting, and cutting-edge AI research. We empower businesses to transform, secure, and scale.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#services" class="px-8 py-4 bg-electric-teal text-cosmic-navy font-semibold rounded-lg hover:bg-electric-teal/90 transition-all duration-300 transform hover:-translate-y-1 shadow-lg shadow-electric-teal/25">
Explore Our Solutions
</a>
<a href="#contact" class="px-8 py-4 border-2 border-electric-teal text-electric-teal font-semibold rounded-lg hover:bg-electric-teal/10 transition-all duration-300">
Start Your Transformation
</a>
</div>
</div>
<!-- Scroll Indicator -->
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
<i data-feather="chevron-down" class="text-electric-teal w-8 h-8"></i>
</div>
</section>
<!-- Services Overview -->
<section id="services" class="py-20 px-6">
<div class="container mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-heading font-bold mb-4">
Comprehensive <span class="text-electric-teal">Technology Solutions</span>
</h2>
<p class="text-gray-400 max-w-2xl mx-auto">
From AI research to global tech trade, we provide end-to-end services that drive innovation and business growth.
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service Card 1 -->
<div class="service-card group">
<div class="icon-wrapper">
<i data-feather="cpu" class="text-electric-teal w-10 h-10"></i>
</div>
<h3 class="text-xl font-heading font-semibold mb-3">AI & Intelligent Systems</h3>
<p class="text-gray-400 mb-4">Design and development of AI/ML models, NLP engines, and computer vision systems that transform data into strategic advantages.</p>
<a href="services.html#ai" class="text-electric-teal hover:text-electric-teal/80 inline-flex items-center gap-2">
Learn More <i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Service Card 2 -->
<div class="service-card group">
<div class="icon-wrapper">
<i data-feather="code" class="text-electric-teal w-10 h-10"></i>
</div>
<h3 class="text-xl font-heading font-semibold mb-3">Software Engineering</h3>
<p class="text-gray-400 mb-4">Full-stack development, systems architecture, and DevOps integration for scalable, robust digital solutions.</p>
<a href="services.html#software" class="text-electric-teal hover:text-electric-teal/80 inline-flex items-center gap-2">
Learn More <i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Service Card 3 -->
<div class="service-card group">
<div class="icon-wrapper">
<i data-feather="shield" class="text-electric-teal w-10 h-10"></i>
</div>
<h3 class="text-xl font-heading font-semibold mb-3">Cybersecurity Solutions</h3>
<p class="text-gray-400 mb-4">Risk assessment, threat modeling, and secure architecture design to protect your digital assets and ensure compliance.</p>
<a href="services.html#cybersecurity" class="text-electric-teal hover:text-electric-teal/80 inline-flex items-center gap-2">
Learn More <i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Service Card 4 -->
<div class="service-card group">
<div class="icon-wrapper">
<i data-feather="cloud" class="text-electric-teal w-10 h-10"></i>
</div>
<h3 class="text-xl font-heading font-semibold mb-3">Digital Transformation</h3>
<p class="text-gray-400 mb-4">Strategic advisory on cloud migration, big data infrastructure, and process automation to future-proof your business.</p>
<a href="services.html#transformation" class="text-electric-teal hover:text-electric-teal/80 inline-flex items-center gap-2">
Learn More <i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Service Card 5 -->
<div class="service-card group">
<div class="icon-wrapper">
<i data-feather="book-open" class="text-electric-teal w-10 h-10"></i>
</div>
<h3 class="text-xl font-heading font-semibold mb-3">Training & Capacity Building</h3>
<p class="text-gray-400 mb-4">Corporate workshops, certification prep, and upskilling programs in IT, AI, and cybersecurity.</p>
<a href="services.html#training" class="text-electric-teal hover:text-electric-teal/80 inline-flex items-center gap-2">
Learn More <i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Service Card 6 -->
<div class="service-card group">
<div class="icon-wrapper">
<i data-feather="globe" class="text-electric-teal w-10 h-10"></i>
</div>
<h3 class="text-xl font-heading font-semibold mb-3">Global Tech Trade</h3>
<p class="text-gray-400 mb-4">Sales and global distribution of software licenses, hardware, AI tools, and computing equipment.</p>
<a href="services.html#trade" class="text-electric-teal hover:text-electric-teal/80 inline-flex items-center gap-2">
Learn More <i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Tech Stack -->
<section class="py-20 px-6 bg-gradient-nebula">
<div class="container mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-heading font-bold mb-4">
Technologies & <span class="text-electric-teal">Expertise</span>
</h2>
<p class="text-gray-300 max-w-2xl mx-auto">
We leverage cutting-edge tools and frameworks to build robust, scalable solutions.
</p>
</div>
<div class="flex flex-wrap justify-center gap-6" id="tech-stack-container">
<!-- Tech items will be populated by JavaScript -->
</div>
</div>
</section>
<!-- CTA Section -->
<section id="contact" class="py-20 px-6">
<div class="container mx-auto text-center max-w-4xl">
<h2 class="text-3xl md:text-4xl font-heading font-bold mb-6">
Ready to Launch Your <span class="text-electric-teal">Digital Transformation</span>?
</h2>
<p class="text-gray-400 mb-10 text-lg">
Connect with our experts to discuss how Silent Comet LDA can empower your business with intelligent technology solutions.
</p>
<a href="contact.html" class="inline-flex items-center gap-3 px-10 py 4 bg-electric-teal text-cosmic-navy font-semibold text-lg rounded-lg hover:bg-electric-teal/90 transition-all duration-300 transform hover:-translate-y-1 shadow-2xl shadow-electric-teal/30">
<i data-feather="send" class="w-5 h-5"></i>
Get In Touch
</a>
</div>
</section>
<!-- Footer Component -->
<custom-footer></custom-footer>
<!-- Component Scripts -->
<script src="components/navigation.js"></script>
<script src="components/footer.js"></script>
<!-- Main Script -->
<script src="script.js"></script>
<script>
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>