Skip to content

Commit bcb380d

Browse files
sonikrosonikro
committed
Update features tab with refined cards and add YouTube overview video
1 parent 5fcd2d8 commit bcb380d

2 files changed

Lines changed: 62 additions & 28 deletions

File tree

‎landing-page/index.html‎

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -73,66 +73,69 @@ <h1 class="hero-title">TF2-QuickServer</h1>
7373
<h2 class="section-title text-center">Features</h2>
7474
<p class="section-subtitle text-center">Everything you need to run TF2 servers</p>
7575
<div class="row g-4 mt-3">
76-
<div class="col-md-6 col-lg-4">
76+
<div class="col-md-6 col-lg-6">
7777
<div class="feature-card card h-100">
7878
<div class="card-body text-center p-4">
7979
<div class="feature-icon"><i class="fas fa-bolt"></i></div>
80-
<h5 class="card-title">Quick Server Deployment</h5>
81-
<p class="card-text">Spin up a TF2 server in ~3 minutes with a simple Discord command. No manual configuration needed.</p>
80+
<h5 class="card-title">QuickServer Deployment</h5>
81+
<p class="card-text">Create a completely new server from scratch &mdash; all infrastructure included &mdash; in just <strong>3&ndash;4 minutes</strong>. One Discord command and you&rsquo;re ready to play.</p>
8282
</div>
8383
</div>
8484
</div>
85-
<div class="col-md-6 col-lg-4">
85+
<div class="col-md-6 col-lg-6">
8686
<div class="feature-card card h-100">
8787
<div class="card-body text-center p-4">
8888
<div class="feature-icon"><i class="fas fa-globe-americas"></i></div>
89-
<h5 class="card-title">Multi-Cloud Global</h5>
90-
<p class="card-text">Deploy across Oracle Cloud regions and AWS Local Zones for low-latency gameplay worldwide.</p>
89+
<h5 class="card-title">Multi-Cloud &amp; Global</h5>
90+
<p class="card-text">Powered by <strong>two cloud providers</strong> (Oracle Cloud &amp; AWS) to deliver servers in the best regions for players worldwide. Low latency, no matter where you are.</p>
9191
</div>
9292
</div>
9393
</div>
94-
<div class="col-md-6 col-lg-4">
94+
<div class="col-md-6 col-lg-6">
9595
<div class="feature-card card h-100">
9696
<div class="card-body text-center p-4">
9797
<div class="feature-icon"><i class="fas fa-shield-halved"></i></div>
9898
<h5 class="card-title">DDoS Protection</h5>
99-
<p class="card-text">TF2-QuickServer-Shield monitors and blocks attacks in real time with in-game notifications.</p>
99+
<p class="card-text">Custom DDoS protection designed specifically for TF2 servers. You&rsquo;ll receive an <strong>in-game notification</strong> if the SHIELD is ever activated &mdash; full transparency, always.</p>
100100
</div>
101101
</div>
102102
</div>
103-
<div class="col-md-6 col-lg-4">
104-
<div class="feature-card card h-100">
105-
<div class="card-body text-center p-4">
106-
<div class="feature-icon"><i class="fas fa-cubes"></i></div>
107-
<h5 class="card-title">Containerized</h5>
108-
<p class="card-text">Each server runs in an isolated Docker container with baked-in maps and configs.</p>
109-
</div>
110-
</div>
111-
</div>
112-
<div class="col-md-6 col-lg-4">
103+
<div class="col-md-6 col-lg-6">
113104
<div class="feature-card card h-100">
114105
<div class="card-body text-center p-4">
115106
<div class="feature-icon"><i class="fas fa-coins"></i></div>
116-
<h5 class="card-title">Auto Cost Savings</h5>
117-
<p class="card-text">Idle servers terminate after 10 minutes. Pay only for what you use &mdash; no wasted resources.</p>
107+
<h5 class="card-title">Cost Efficient</h5>
108+
<p class="card-text">Designed to have <strong>zero cost</strong> if no servers are running. Servers auto-terminate after being empty to save resources &mdash; you only pay for what you use.</p>
118109
</div>
119110
</div>
120111
</div>
121-
<div class="col-md-6 col-lg-4">
122-
<div class="feature-card card h-100">
123-
<div class="card-body text-center p-4">
124-
<div class="feature-icon"><i class="fas fa-chart-line"></i></div>
125-
<h5 class="card-title">Full Observability</h5>
126-
<p class="card-text">OpenTelemetry instrumentation provides traces, metrics, and logs. Optional New Relic sidecar for enhanced infrastructure monitoring.</p>
127-
</div>
112+
</div>
113+
</div>
114+
</section>
115+
116+
<!-- Video Overview -->
117+
<section id="video" class="section bg-section">
118+
<div class="container">
119+
<h2 class="section-title text-center">Watch the Overview</h2>
120+
<p class="section-subtitle text-center">Learn how TF2-QuickServer works in this walkthrough by <a href="https://www.youtube.com/@FrisbeeTF2" target="_blank" rel="noopener" class="text-accent">FRISBEE</a></p>
121+
<div class="row mt-4 justify-content-center">
122+
<div class="col-lg-8">
123+
<div class="video-wrapper">
124+
<iframe src="https://www.youtube.com/embed/maqbCCp1tKo"
125+
title="TF2-QuickServer - A New Competitive Server Hosting System - How to Install &amp; Use"
126+
frameborder="0"
127+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
128+
referrerpolicy="strict-origin-when-cross-origin"
129+
allowfullscreen>
130+
</iframe>
128131
</div>
129132
</div>
130133
</div>
131134
</div>
132135
</section>
133136

134137
<!-- How It Works -->
135-
<section id="how-it-works" class="section bg-section">
138+
<section id="how-it-works" class="section">
136139
<div class="container">
137140
<h2 class="section-title text-center">How It Works</h2>
138141
<p class="section-subtitle text-center">From command to server in five simple steps</p>

‎landing-page/style.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,37 @@ body {
170170
color: var(--accent);
171171
}
172172

173+
/* Text */
174+
.text-accent {
175+
color: var(--accent);
176+
text-decoration: none;
177+
font-weight: 600;
178+
transition: color 0.2s;
179+
}
180+
181+
.text-accent:hover {
182+
color: var(--accent-hover);
183+
}
184+
185+
/* Video */
186+
.video-wrapper {
187+
position: relative;
188+
padding-bottom: 56.25%; /* 16:9 */
189+
height: 0;
190+
overflow: hidden;
191+
border-radius: 16px;
192+
box-shadow: 0 0 40px rgba(243, 156, 18, 0.08);
193+
}
194+
195+
.video-wrapper iframe {
196+
position: absolute;
197+
top: 0;
198+
left: 0;
199+
width: 100%;
200+
height: 100%;
201+
border-radius: 16px;
202+
}
203+
173204
/* Steps */
174205
.step-list {
175206
display: flex;

0 commit comments

Comments
 (0)