Hugging Face's logo

Spaces:
researcher28
/
cosmic-code-comet
Running

App Files Community
cosmic-code-comet
File size: 11,424 Bytes 
57d05ca
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
 
<!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>