-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
469 lines (459 loc) · 24.9 KB
/
Copy pathindex.html
File metadata and controls
469 lines (459 loc) · 24.9 KB
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
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Bulutsoft - Innovative cloud solutions, SaaS, and mobile app development. Experience the future of software with our cutting-edge technology.">
<title>Bulutsoft | Cloud Solutions & Software Innovation</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Floating Background Elements -->
<div class="floating-elements" aria-hidden="true">
<div class="floating-sphere sphere-1"></div>
<div class="floating-sphere sphere-2"></div>
<div class="floating-sphere sphere-3"></div>
<div class="floating-cloud cloud-1"></div>
<div class="floating-cloud cloud-2"></div>
<div class="code-snippet snippet-1"></></div>
<div class="code-snippet snippet-2">{ }</div>
<div class="code-snippet snippet-3">0101</div>
</div>
<!-- Navigation -->
<nav class="glass-nav">
<div class="nav-container">
<div class="logo">
<div class="logo-icon">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="cloudGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#00d4ff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#ffffff;stop-opacity:0.9" />
</linearGradient>
</defs>
<ellipse cx="20" cy="22" rx="16" ry="10" fill="url(#cloudGradient)" opacity="0.9"/>
<circle cx="14" cy="18" r="8" fill="url(#cloudGradient)" opacity="0.95"/>
<circle cx="26" cy="16" r="10" fill="url(#cloudGradient)"/>
<circle cx="20" cy="14" r="7" fill="white" opacity="0.8"/>
</svg>
</div>
<span class="logo-text">Bulutsoft</span>
</div>
<ul class="nav-links">
<li><a href="#services">Services</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact" class="nav-cta">Get Started</a></li>
</ul>
<button class="mobile-menu-btn" aria-label="Toggle menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="hero" id="hero">
<div class="hero-content">
<div class="hero-text">
<h1 class="hero-title">
<span class="title-line">Transform Your</span>
<span class="title-line gradient-text">Digital Future</span>
</h1>
<p class="hero-subtitle">
Elevate your business with cloud-native solutions that feel weightless yet powerful.
Experience technology that's as clear as the sky and as reliable as the horizon.
</p>
<div class="hero-buttons">
<a href="#contact" class="btn btn-primary">
<span>Start Your Journey</span>
<svg class="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
<a href="#services" class="btn btn-secondary">
<span>Explore Services</span>
</a>
</div>
</div>
<div class="hero-visual">
<div class="cloud-3d">
<div class="cloud-glow"></div>
<div class="cloud-main">
<svg viewBox="0 0 200 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="heroCloudGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#00d4ff;stop-opacity:1" />
<stop offset="50%" style="stop-color:#4fc3f7;stop-opacity:0.9" />
<stop offset="100%" style="stop-color:#ffffff;stop-opacity:0.95" />
</linearGradient>
<filter id="cloudBlur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
</defs>
<ellipse cx="100" cy="95" rx="85" ry="35" fill="url(#heroCloudGradient)" opacity="0.7"/>
<circle cx="55" cy="70" r="40" fill="url(#heroCloudGradient)" opacity="0.9"/>
<circle cx="145" cy="60" r="50" fill="url(#heroCloudGradient)"/>
<circle cx="100" cy="50" r="45" fill="url(#heroCloudGradient)" opacity="0.95"/>
<circle cx="75" cy="45" r="30" fill="white" opacity="0.6"/>
<circle cx="130" cy="40" r="25" fill="white" opacity="0.5"/>
</svg>
</div>
<div class="cloud-particles">
<span></span><span></span><span></span><span></span><span></span>
</div>
</div>
</div>
</div>
<div class="scroll-indicator">
<span>Scroll to explore</span>
<div class="scroll-arrow">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 5v14M5 12l7 7 7-7"/>
</svg>
</div>
</div>
</section>
<!-- Services Section -->
<section class="services" id="services">
<div class="container">
<div class="section-header">
<span class="section-tag">Our Services</span>
<h2 class="section-title">Solutions That <span class="gradient-text">Elevate</span></h2>
<p class="section-description">
Discover our comprehensive suite of cloud-powered solutions,
designed to transform your ideas into reality.
</p>
</div>
<div class="services-grid">
<!-- SaaS Card -->
<div class="glass-card service-card" data-aos="fade-up">
<div class="card-glow"></div>
<div class="card-icon">
<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="8" y="12" width="48" height="36" rx="4" stroke="url(#iconGradient)" stroke-width="2"/>
<path d="M8 20h48" stroke="url(#iconGradient)" stroke-width="2"/>
<circle cx="14" cy="16" r="2" fill="#00d4ff"/>
<circle cx="22" cy="16" r="2" fill="#4fc3f7"/>
<circle cx="30" cy="16" r="2" fill="#80deea"/>
<rect x="16" y="28" width="32" height="4" rx="2" fill="url(#iconGradient)" opacity="0.5"/>
<rect x="16" y="36" width="24" height="4" rx="2" fill="url(#iconGradient)" opacity="0.3"/>
<path d="M20 52h24" stroke="url(#iconGradient)" stroke-width="2"/>
<path d="M28 48v4M36 48v4" stroke="url(#iconGradient)" stroke-width="2"/>
<defs>
<linearGradient id="iconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#00d4ff" />
<stop offset="100%" style="stop-color:#ffffff" />
</linearGradient>
</defs>
</svg>
</div>
<h3 class="card-title">SaaS Solutions</h3>
<p class="card-description">
Scalable software-as-a-service platforms that grow with your business.
Access powerful tools from anywhere, anytime.
</p>
<ul class="card-features">
<li>Multi-tenant Architecture</li>
<li>Real-time Collaboration</li>
<li>Automatic Updates</li>
</ul>
<a href="#contact" class="card-link">
Learn More
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</div>
<!-- Cloud Card -->
<div class="glass-card service-card featured" data-aos="fade-up" data-aos-delay="100">
<div class="card-glow"></div>
<div class="featured-badge">Most Popular</div>
<div class="card-icon">
<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M48 42H18c-6.627 0-12-5.373-12-12 0-5.941 4.325-10.872 10-11.834C17.168 11.42 23.944 6 32 6c9.389 0 17 7.611 17 17 0 .338-.01.673-.03 1.006C54.488 25.166 58 29.67 58 35c0 6.075-4.925 11-11 11h1z" stroke="url(#iconGradient)" stroke-width="2"/>
<path d="M32 34v16M26 44l6 6 6-6" stroke="url(#iconGradient)" stroke-width="2"/>
</svg>
</div>
<h3 class="card-title">Cloud Infrastructure</h3>
<p class="card-description">
Enterprise-grade cloud solutions with unmatched reliability.
Your data, secured and accessible across the globe.
</p>
<ul class="card-features">
<li>99.99% Uptime SLA</li>
<li>Global CDN Network</li>
<li>Advanced Security</li>
</ul>
<a href="#contact" class="card-link">
Learn More
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</div>
<!-- Mobile App Card -->
<div class="glass-card service-card" data-aos="fade-up" data-aos-delay="200">
<div class="card-glow"></div>
<div class="card-icon">
<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="6" width="28" height="52" rx="4" stroke="url(#iconGradient)" stroke-width="2"/>
<path d="M18 14h28M18 46h28" stroke="url(#iconGradient)" stroke-width="2"/>
<circle cx="32" cy="51" r="3" stroke="url(#iconGradient)" stroke-width="2"/>
<rect x="28" y="9" width="8" height="2" rx="1" fill="#00d4ff" opacity="0.6"/>
<rect x="24" y="22" width="16" height="16" rx="2" stroke="url(#iconGradient)" stroke-width="1.5" opacity="0.8"/>
<path d="M28 30l4 4 4-4" stroke="url(#iconGradient)" stroke-width="1.5"/>
</svg>
</div>
<h3 class="card-title">Mobile Apps</h3>
<p class="card-description">
Native and cross-platform mobile applications that deliver
seamless experiences on every device.
</p>
<ul class="card-features">
<li>iOS & Android Native</li>
<li>Offline Capabilities</li>
<li>Push Notifications</li>
</ul>
<a href="#contact" class="card-link">
Learn More
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="features" id="features">
<div class="container">
<div class="section-header">
<span class="section-tag">Why Choose Us</span>
<h2 class="section-title">Built for <span class="gradient-text">Tomorrow</span></h2>
<p class="section-description">
Our technology stack is designed with the future in mind,
ensuring your solutions remain cutting-edge.
</p>
</div>
<div class="features-grid">
<div class="feature-item" data-aos="fade-right">
<div class="feature-icon">
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24 4l20 12v16L24 44 4 32V16L24 4z" stroke="url(#featureGradient)" stroke-width="2"/>
<path d="M24 44V28M4 16l20 12 20-12" stroke="url(#featureGradient)" stroke-width="2"/>
<defs>
<linearGradient id="featureGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#00d4ff" />
<stop offset="100%" style="stop-color:#ffffff" />
</linearGradient>
</defs>
</svg>
</div>
<div class="feature-content">
<h3>Scalable Architecture</h3>
<p>Infrastructure that grows with your needs, from startup to enterprise scale.</p>
</div>
</div>
<div class="feature-item" data-aos="fade-left">
<div class="feature-icon">
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="20" stroke="url(#featureGradient)" stroke-width="2"/>
<path d="M16 24l6 6 12-12" stroke="url(#featureGradient)" stroke-width="2"/>
</svg>
</div>
<div class="feature-content">
<h3>Enterprise Security</h3>
<p>Bank-grade encryption and compliance with global security standards.</p>
</div>
</div>
<div class="feature-item" data-aos="fade-right">
<div class="feature-icon">
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24 4v40M4 24h40" stroke="url(#featureGradient)" stroke-width="2"/>
<circle cx="24" cy="24" r="8" stroke="url(#featureGradient)" stroke-width="2"/>
<circle cx="24" cy="24" r="16" stroke="url(#featureGradient)" stroke-width="2" opacity="0.5"/>
</svg>
</div>
<div class="feature-content">
<h3>Global Reach</h3>
<p>Deploy across multiple regions with our worldwide infrastructure network.</p>
</div>
</div>
<div class="feature-item" data-aos="fade-left">
<div class="feature-icon">
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="6" y="6" width="36" height="36" rx="4" stroke="url(#featureGradient)" stroke-width="2"/>
<path d="M14 24h20M24 14v20" stroke="url(#featureGradient)" stroke-width="2"/>
</svg>
</div>
<div class="feature-content">
<h3>Seamless Integration</h3>
<p>Connect with your existing tools through our comprehensive API ecosystem.</p>
</div>
</div>
</div>
<div class="features-stats">
<div class="stat-item">
<span class="stat-number" data-count="500">0</span>
<span class="stat-suffix">+</span>
<span class="stat-label">Clients Worldwide</span>
</div>
<div class="stat-item">
<span class="stat-number" data-count="99.9">0</span>
<span class="stat-suffix">%</span>
<span class="stat-label">Uptime Guaranteed</span>
</div>
<div class="stat-item">
<span class="stat-number" data-count="24">0</span>
<span class="stat-suffix">/7</span>
<span class="stat-label">Expert Support</span>
</div>
<div class="stat-item">
<span class="stat-number" data-count="50">0</span>
<span class="stat-suffix">+</span>
<span class="stat-label">Countries Served</span>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section class="about" id="about">
<div class="container">
<div class="about-content">
<div class="about-text">
<span class="section-tag">About Bulutsoft</span>
<h2 class="section-title">Innovation in <span class="gradient-text">Every Byte</span></h2>
<p class="about-description">
At Bulutsoft, we believe technology should feel invisible yet powerful—like the clouds that
carry rain across continents. Our name, derived from the Turkish word for "cloud," reflects
our mission: to make complex computing as natural and essential as the air we breathe.
</p>
<p class="about-description">
Founded by a team of passionate engineers and designers, we've dedicated ourselves to
creating software solutions that don't just meet today's needs but anticipate tomorrow's
challenges. Every line of code we write is crafted with care, precision, and an unwavering
commitment to excellence.
</p>
<div class="about-values">
<div class="value-item">
<div class="value-icon">✦</div>
<span>Innovation First</span>
</div>
<div class="value-item">
<div class="value-icon">◇</div>
<span>Client Focused</span>
</div>
<div class="value-item">
<div class="value-icon">○</div>
<span>Quality Obsessed</span>
</div>
</div>
</div>
<div class="about-visual">
<div class="glass-card about-card">
<div class="card-glow"></div>
<div class="about-pattern">
<div class="pattern-line"></div>
<div class="pattern-line"></div>
<div class="pattern-line"></div>
<div class="pattern-circle"></div>
<div class="pattern-circle"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta" id="contact">
<div class="container">
<div class="cta-content glass-card">
<div class="card-glow"></div>
<h2 class="cta-title">Ready to <span class="gradient-text">Ascend</span>?</h2>
<p class="cta-description">
Let's build something extraordinary together. Start your journey
to the cloud and transform the way you do business.
</p>
<form class="cta-form" id="contact-form">
<div class="form-row">
<div class="form-group">
<input type="text" id="name" name="name" placeholder="Your Name" required>
<div class="input-glow"></div>
</div>
<div class="form-group">
<input type="email" id="email" name="email" placeholder="Your Email" required>
<div class="input-glow"></div>
</div>
</div>
<div class="form-group">
<textarea id="message" name="message" placeholder="Tell us about your project..." rows="4" required></textarea>
<div class="input-glow"></div>
</div>
<button type="submit" class="btn btn-primary btn-large">
<span>Send Message</span>
<svg class="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
</svg>
</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<div class="logo">
<div class="logo-icon">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="footerCloudGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#00d4ff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#ffffff;stop-opacity:0.9" />
</linearGradient>
</defs>
<ellipse cx="20" cy="22" rx="16" ry="10" fill="url(#footerCloudGradient)" opacity="0.9"/>
<circle cx="14" cy="18" r="8" fill="url(#footerCloudGradient)" opacity="0.95"/>
<circle cx="26" cy="16" r="10" fill="url(#footerCloudGradient)"/>
<circle cx="20" cy="14" r="7" fill="white" opacity="0.8"/>
</svg>
</div>
<span class="logo-text">Bulutsoft</span>
</div>
<p class="footer-tagline">Elevating businesses through cloud innovation.</p>
</div>
<div class="footer-links">
<div class="footer-column">
<h4>Services</h4>
<a href="#services">SaaS Solutions</a>
<a href="#services">Cloud Infrastructure</a>
<a href="#services">Mobile Apps</a>
</div>
<div class="footer-column">
<h4>Company</h4>
<a href="#about">About Us</a>
<a href="#features">Features</a>
<a href="#contact">Contact</a>
</div>
<div class="footer-column">
<h4>Connect</h4>
<a href="#">LinkedIn</a>
<a href="#">Twitter</a>
<a href="#">GitHub</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Bulutsoft. All rights reserved.</p>
<p>Crafted with ☁️ in the cloud</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>