docker-basic-app/index.html at main · codiing-5/docker-basic-app · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>DevOps World</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>

<div class="bg-mesh"></div>

<!-- NAV -->
<nav>
  <div class="nav-logo">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
      <rect x="2" y="2" width="9" height="9" rx="2.5" fill="#6366f1"/>
      <rect x="13" y="2" width="9" height="9" rx="2.5" fill="#06b6d4" opacity="0.7"/>
      <rect x="2" y="13" width="9" height="9" rx="2.5" fill="#a855f7" opacity="0.7"/>
      <rect x="13" y="13" width="9" height="9" rx="2.5" fill="#6366f1" opacity="0.5"/>
    </svg>
    DevOps World
  </div>
  <div class="nav-links">
    <a href="#features">Features</a>
    <a href="#pipeline">Pipeline</a>
    <a href="#docs">Docs</a>
  </div>
  <button class="nav-cta">Get started</button>
</nav>

<main>

  <!-- HERO -->
  <div class="hero">
    <div class="hero-badge">
      <span class="dot"></span>
      Now in production
    </div>
    <h1>Build. Ship. <br/><span class="gradient-text">Scale faster.</span></h1>
    <p class="hero-sub">
      A modern DevOps platform engineered for teams who move fast — automate your pipelines, monitor deployments, and ship with confidence.
    </p>
    <div class="hero-actions">
      <button class="btn-primary">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
          <polygon points="5,3 19,12 5,21"/>
        </svg>
        Start building
      </button>
      <button class="btn-secondary">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="10"/><polyline points="12,8 12,12 14,14"/>
        </svg>
        Watch demo
      </button>
    </div>
  </div>

  <!-- STATS BAR -->
  <div class="stats-bar reveal">
    <div class="stat">
      <div class="stat-num">99.9%</div>
      <div class="stat-label">Uptime SLA</div>
    </div>
    <div class="stat">
      <div class="stat-num">2.4s</div>
      <div class="stat-label">Avg deploy time</div>
    </div>
    <div class="stat">
      <div class="stat-num">50k+</div>
      <div class="stat-label">Deployments / day</div>
    </div>
    <div class="stat">
      <div class="stat-num">180+</div>
      <div class="stat-label">Integrations</div>
    </div>
  </div>

  <!-- FEATURES -->
  <section id="features">
    <div class="reveal">
      <div class="section-tag">Core features</div>
      <h2>Everything you need to <span class="gradient-text">ship production-grade</span> software</h2>
      <p class="section-sub">From automated testing to zero-downtime deployments — the full DevOps lifecycle, unified.</p>
    </div>
    <div class="cards-grid">

      <div class="card reveal" style="transition-delay:0.05s">
        <div class="card-icon" style="background:rgba(99,102,241,0.15)">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="2">
            <polyline points="4,17 10,11 4,5"/><line x1="12" y1="19" x2="20" y2="19"/>
          </svg>
        </div>
        <h3>CI/CD Pipelines</h3>
        <p>Define declarative pipelines with YAML. Parallel jobs, matrix builds, and intelligent caching out of the box.</p>
      </div>

      <div class="card reveal" style="transition-delay:0.10s">
        <div class="card-icon" style="background:rgba(6,182,212,0.15)">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#22d3ee" stroke-width="2">
            <rect x="2" y="3" width="20" height="14" rx="2"/><polyline points="8,21 12,17 16,21"/>
          </svg>
        </div>
        <h3>Container Orchestration</h3>
        <p>Native Kubernetes integration with auto-scaling, rollback, and health-check-driven deployments.</p>
      </div>

      <div class="card reveal" style="transition-delay:0.15s">
        <div class="card-icon" style="background:rgba(168,85,247,0.15)">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#c084fc" stroke-width="2">
            <path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
          </svg>
        </div>
        <h3>Infrastructure as Code</h3>
        <p>Terraform, Pulumi, and CDK first-class support. Drift detection and plan previews on every PR.</p>
      </div>

      <div class="card reveal" style="transition-delay:0.20s">
        <div class="card-icon" style="background:rgba(16,185,129,0.15)">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="2">
            <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
          </svg>
        </div>
        <h3>Observability</h3>
        <p>Metrics, logs, and traces unified in one dashboard. Smart alerting with noise reduction and root-cause hints.</p>
      </div>

      <div class="card reveal" style="transition-delay:0.25s">
        <div class="card-icon" style="background:rgba(251,146,60,0.15)">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fb923c" stroke-width="2">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
          </svg>
        </div>
        <h3>Security Scanning</h3>
        <p>SAST, DAST, and container vulnerability scanning — automated and gated on every pipeline run.</p>
      </div>

      <div class="card reveal" style="transition-delay:0.30s">
        <div class="card-icon" style="background:rgba(244,63,94,0.15)">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fb7185" stroke-width="2">
            <circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/>
          </svg>
        </div>
        <h3>Multi-cloud Ready</h3>
        <p>Deploy seamlessly to AWS, GCP, or Azure. Environment parity ensured across every stage.</p>
      </div>

    </div>
  </section>

  <!-- PIPELINE -->
  <section id="pipeline" style="padding-top:0">
    <div class="reveal">
      <div class="section-tag">How it works</div>
      <h2>Your pipeline, <span class="gradient-text">visualized</span></h2>
      <p class="section-sub">From commit to production in seconds — every stage auditable and reproducible.</p>
    </div>
    <div class="pipeline reveal">
      <div class="pipe-step">
        <div class="pipe-icon" style="background:rgba(99,102,241,0.15)">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="2">
            <circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/>
          </svg>
        </div>
        <strong>Code</strong>
        <span>Git push</span>
      </div>
      <div class="pipe-step">
        <div class="pipe-icon" style="background:rgba(6,182,212,0.15)">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22d3ee" stroke-width="2">
            <polyline points="9,11 12,14 22,4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
          </svg>
        </div>
        <strong>Test</strong>
        <span>CI runs</span>
      </div>
      <div class="pipe-step">
        <div class="pipe-icon" style="background:rgba(168,85,247,0.15)">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#c084fc" stroke-width="2">
            <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6M9 12h6M9 15h4"/>
          </svg>
        </div>
        <strong>Build</strong>
        <span>Docker image</span>
      </div>
      <div class="pipe-step">
        <div class="pipe-icon" style="background:rgba(251,146,60,0.15)">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fb923c" stroke-width="2">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
          </svg>
        </div>
        <strong>Scan</strong>
        <span>Security gate</span>
      </div>
      <div class="pipe-step">
        <div class="pipe-icon" style="background:rgba(16,185,129,0.15)">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="2">
            <polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/>
          </svg>
        </div>
        <strong>Deploy</strong>
        <span>To production</span>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <div class="cta-section reveal">
    <h2>Ready to ship with <span class="gradient-text">confidence?</span></h2>
    <p>Join thousands of teams automating their way to faster, safer deployments.</p>
    <button class="btn-primary">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
        <path d="M5 12h14M12 5l7 7-7 7"/>
      </svg>
      Start for free
    </button>
  </div>

</main>

<footer>
  &copy; 2026 DevOps World &mdash; Built with precision.
</footer>

<script src="main.js"></script>
</body>
</html>