deploylynx.github.io/about.html at main · Deploylynx-tech/deploylynx.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>About - DeployLynx</title>
  <link rel="icon" type="image/png" href="/images/favicon.png">
  <script src="https://cdn.tailwindcss.com"></script>

  <style>
    /* Smooth animation */
    .fade-in {
      animation: fadeIn 1.5s ease-in-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Floating animation */
    .float {
      animation: float 4s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
  </style>
</head>

<body class="bg-gray-950 text-white">

  <!-- Navbar -->
  <nav class="flex items-center justify-between px-6 py-4 bg-gray-900 sticky top-0 z-50">
    <h1 class="text-xl font-bold text-blue-500">DeployLynx</h1>

    <!-- Desktop Menu -->
    <div class="hidden md:flex space-x-6">
      <a href="index.html" class="hover:text-blue-400">Home</a>
      <a href="about.html" class="text-blue-400">About</a>
      <a href="services.html" class="hover:text-blue-400">Services</a>
      <a href="case-studies.html" class="hover:text-blue-400">Case Studies</a>
      <a href="contact.html" class="hover:text-blue-400">Contact</a>
    </div>

    <!-- Mobile Button -->
    <button id="menu-btn" class="md:hidden text-white text-2xl">
      ☰
    </button>
  </nav>

  <!-- Mobile Menu -->
  <div id="mobile-menu" class="hidden flex flex-col bg-gray-900 px-6 py-4 space-y-4 md:hidden">
    <a href="index.html" class="hover:text-blue-400">Home</a>
    <a href="about.html" class="text-blue-400">About</a>
    <a href="services.html" class="hover:text-blue-400">Services</a>
    <a href="case-studies.html" class="hover:text-blue-400">Case Studies</a>
    <a href="contact.html" class="hover:text-blue-400">Contact</a>
  </div>

  <!-- Hero Section -->
  <section class="text-center px-6 py-12 md:py-16 fade-in">
    <h2 class="text-2xl md:text-5xl font-bold leading-tight">
      Engineering Scalable Digital Infrastructure
    </h2>
    <p class="mt-6 text-gray-400 max-w-3xl mx-auto text-sm md:text-base">
      At DeployLynx, we architect, automate, and optimize cloud-native systems that power modern businesses. Our mission is to transform ideas into resilient, high-performance infrastructure with enterprise-grade reliability.
    </p>
  </section>

  <!-- Stats Section -->
  <section class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 px-6 py-10 text-center">
    <div class="bg-gray-900 p-4 md:p-6 rounded-2xl">
      <h3 class="text-xl md:text-2xl font-bold text-blue-400 counter">12+</h3>
      <p class="text-gray-400 text-sm md:text-base">Active Clients</p>
    </div>
    <div class="bg-gray-900 p-4 md:p-6 rounded-2xl">
      <h3 class="text-xl md:text-2xl font-bold text-blue-400 counter">45+</h3>
      <p class="text-gray-400 text-sm md:text-base">Deployments</p>
    </div>
    <div class="bg-gray-900 p-4 md:p-6 rounded-2xl">
      <h3 class="text-xl md:text-2xl font-bold text-blue-400 counter">99%</h3>
      <p class="text-gray-400 text-sm md:text-base">SLA Uptime</p>
    </div>
    <div class="bg-gray-900 p-4 md:p-6 rounded-2xl">
      <h3 class="text-xl md:text-2xl font-bold text-blue-400 counter">70%</h3>
      <p class="text-gray-400 text-sm md:text-base">Cost Optimization</p>
    </div>
  </section>

  <!-- About Content -->
  <section class="px-6 py-12 md:py-16 max-w-5xl mx-auto fade-in">
    <h2 class="text-2xl md:text-4xl font-bold mb-6">Who We Are</h2>
    <p class="text-gray-400 mb-6 leading-relaxed text-sm md:text-base">
      DeployLynx is a cloud engineering and DevOps solutions company focused on building scalable, secure, and automated infrastructure for startups and enterprises. We specialize in transforming traditional systems into modern cloud-native architectures.
    </p>

    <p class="text-gray-400 mb-6 leading-relaxed text-sm md:text-base">
      Our expertise spans across cloud platforms, containerization, CI/CD pipelines, and infrastructure as code. We don't just deploy applications—we design ecosystems that ensure performance, scalability, and reliability at every stage.
    </p>

    <p class="text-gray-400 leading-relaxed text-sm md:text-base">
      Whether you're launching a startup or scaling an enterprise system, DeployLynx ensures your infrastructure evolves with your business needs.
    </p>
  </section>

  <!-- Tech Animation Section -->
  <section class="px-6 py-12 md:py-16 text-center">
    <h2 class="text-2xl md:text-4xl font-bold mb-10">Our Technology Stack</h2>
    <div class="flex flex-wrap justify-center gap-4 md:gap-6">
      <div class="bg-gray-900 px-4 md:px-6 py-3 md:py-4 rounded-xl float">Docker</div>
      <div class="bg-gray-900 px-4 md:px-6 py-3 md:py-4 rounded-xl float">Kubernetes</div>
      <div class="bg-gray-900 px-4 md:px-6 py-3 md:py-4 rounded-xl float">AWS</div>
      <div class="bg-gray-900 px-4 md:px-6 py-3 md:py-4 rounded-xl float">Terraform</div>
      <div class="bg-gray-900 px-4 md:px-6 py-3 md:py-4 rounded-xl float">Jenkins</div>
    </div>
  </section>

  <!-- Testimonials -->
  <section class="px-6 py-12 md:py-16 bg-gray-900">
    <h2 class="text-2xl md:text-4xl font-bold text-center mb-10">What Clients Say</h2>
    <div class="grid md:grid-cols-2 gap-6 max-w-5xl mx-auto">
      <div class="bg-gray-800 p-4 md:p-6 rounded-2xl">
        <p class="text-gray-300 text-sm md:text-base">“DeployLynx transformed our infrastructure into a scalable system. Deployment time reduced drastically.”</p>
        <h4 class="mt-4 font-bold">— Startup Founder</h4>
      </div>
      <div class="bg-gray-800 p-4 md:p-6 rounded-2xl">
        <p class="text-gray-300 text-sm md:text-base">“Professional, reliable, and highly skilled team. Our uptime improved significantly.”</p>
        <h4 class="mt-4 font-bold">— Tech Lead</h4>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="text-center py-6 text-gray-500 text-sm">
    © 2026 DeployLynx. All rights reserved.
  </footer>

  <script>
    // Mobile Menu Toggle
    const btn = document.getElementById('menu-btn');
    const menu = document.getElementById('mobile-menu');

    btn.addEventListener('click', () => {
      menu.classList.toggle('hidden');
    });

    // Counter Animation
    const counters = document.querySelectorAll('.counter');

    const animateCounter = (counter) => {
      const text = counter.innerText;
      const target = parseInt(text.replace(/[^0-9]/g, ''));
      const isPercent = text.includes('%');
      const isPlus = text.includes('+');

      let count = 0;
      const duration = 1500;
      const stepTime = 20;
      const increment = target / (duration / stepTime);

      const update = () => {
        count += increment;
        if (count < target) {
          counter.innerText = Math.floor(count) + (isPercent ? '%' : isPlus ? '+' : '');
          setTimeout(update, stepTime);
        } else {
          counter.innerText = target + (isPercent ? '%' : isPlus ? '+' : '');
        }
      };

      update();
    };

    document.addEventListener('DOMContentLoaded', () => {
      counters.forEach(counter => animateCounter(counter));
    });
  </script>

</body>
</html>