Skip to content

Commit d0516a6

Browse files
accoacco
committed
website: style tweaks
1 parent 5b546e3 commit d0516a6

File tree

2 files changed

+30
-32
lines changed

2 files changed

+30
-32
lines changed

‎website/index.html‎

Lines changed: 26 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
class="icon-sm mr-1"
8080
/>
8181
<span id="header-stars">-</span>
82-
<span class="ml-2">Try now</span>
82+
<span class="ml-2 hidden sm:inline">Try now</span>
8383
</a>
8484
<a
8585
href="https://console.sequinstream.com/register"
@@ -108,7 +108,7 @@
108108
class="icon-sm mr-1"
109109
/>
110110
<span id="header-stars-mobile">-</span>
111-
<span class="ml-2">Try now</span>
111+
<span class="ml-2 hidden sm:inline">Try now</span>
112112
</a>
113113
<a
114114
href="https://console.sequinstream.com/register"
@@ -169,9 +169,9 @@
169169
</div>
170170
</nav>
171171

172-
<main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-16">
172+
<main class="max-w-4xl mx-auto py-12 space-y-16">
173173
<!-- Hero Section -->
174-
<section class="text-left space-y-6">
174+
<section class="text-left space-y-6 px-4 sm:px-6 lg:px-8">
175175
<h1 class="hero-header">
176176
<img
177177
src="icons/postgres.svg"
@@ -187,7 +187,7 @@ <h1 class="hero-header">
187187

188188
<p class="text-gray-600 max-w-4xl">
189189
Stream data from Postgres directly to Kafka, Redis, and
190-
more. Replace complex tools like Debezium or pipeline like
190+
more. Replace complex tools like Debezium or pipelines like
191191
Flink.
192192
</p>
193193
<p class="text-gray-600 max-w-4xl">
@@ -200,7 +200,7 @@ <h1 class="hero-header">
200200
>
201201
<a
202202
href="https://github.com/sequinstream/sequin"
203-
class="btn btn-primary"
203+
class="btn btn-primary w-40 sm:w-auto"
204204
data-testid="button-github-star"
205205
>
206206
<img
@@ -213,7 +213,7 @@ <h1 class="hero-header">
213213
</a>
214214
<a
215215
href="https://join.slack.com/t/sequin-community/shared_invite/zt-37begzach-4aUwR5xt_XgivdvctZDemA"
216-
class="btn btn-outline"
216+
class="btn btn-outline w-40 sm:w-auto"
217217
data-testid="button-join-slack"
218218
>
219219
<img
@@ -225,7 +225,7 @@ <h1 class="hero-header">
225225
</a>
226226
<a
227227
href="https://discord.gg/BV8wFXvNtY"
228-
class="btn btn-outline"
228+
class="btn btn-outline w-40 sm:w-auto"
229229
data-testid="button-join-discord"
230230
>
231231
<img
@@ -241,7 +241,7 @@ <h1 class="hero-header">
241241
<hr class="border-gray-200" />
242242

243243
<!-- Killer features -->
244-
<section id="performance" class="space-y-8">
244+
<section id="performance" class="space-y-8 px-4 sm:px-6 lg:px-8">
245245
<h2 class="section-header">Killer features</h2>
246246

247247
<table class="table">
@@ -286,7 +286,7 @@ <h2 class="section-header">Killer features</h2>
286286
<hr class="border-gray-200" />
287287

288288
<!-- Architecture Section -->
289-
<section id="architecture" class="space-y-8">
289+
<section id="architecture" class="space-y-8 px-4 sm:px-6 lg:px-8">
290290
<h2 class="section-header">How it works</h2>
291291

292292
<p class="text-gray-600">
@@ -313,7 +313,7 @@ <h2 class="section-header">How it works</h2>
313313
<hr class="border-gray-200" />
314314

315315
<!-- Destinations Section -->
316-
<section id="destinations" class="space-y-8">
316+
<section id="destinations" class="space-y-8 px-4 sm:px-6 lg:px-8">
317317
<h2 class="section-header">Supported destinations</h2>
318318

319319
<p class="text-gray-600">
@@ -446,11 +446,11 @@ <h3 class="flex items-center space-x-2">
446446
<!-- Advanced Processing Pipeline Section -->
447447
<section
448448
id="processing-pipeline"
449-
class="space-y-8"
449+
class="space-y-8 px-4 sm:px-6 lg:px-8"
450450
style="
451451
background-color: #eff6ff;
452-
padding: 2rem;
453-
margin: 0 -2rem;
452+
padding-top: 2rem;
453+
padding-bottom: 2rem;
454454
"
455455
>
456456
<h2 class="section-header">Advanced processing pipeline</h2>
@@ -473,7 +473,7 @@ <h2 class="section-header">Advanced processing pipeline</h2>
473473
╔════════════════════════════════════╗
474474
║ Sequin ║
475475
║ ┌──────────┐ ┌──────────┐ ║
476-
║ │ Filter │ │ Enrich │ ║
476+
║ │ Enrich │ │ Filter │ ║
477477
║ └──────────┘ └──────────┘ ║
478478
║ ┌──────────┐ ┌──────────┐ ║
479479
║ │Transform │ │ Route │ ║
@@ -490,16 +490,16 @@ <h2 class="section-header">Advanced processing pipeline</h2>
490490

491491
<table class="table">
492492
<tr>
493-
<td><strong>Filters</strong></td>
493+
<td><strong>Enrich</strong></td>
494494
<td>
495-
Write custom filters to include or exclude changes
496-
from Postgres
495+
Enrich changes by joining back to data in Postgres
497496
</td>
498497
</tr>
499498
<tr>
500-
<td><strong>Enrich</strong></td>
499+
<td><strong>Filters</strong></td>
501500
<td>
502-
Enrich changes by joining back to data in Postgres
501+
Write custom filters to include or exclude changes
502+
from Postgres
503503
</td>
504504
</tr>
505505
<tr>
@@ -521,7 +521,7 @@ <h2 class="section-header">Advanced processing pipeline</h2>
521521
<hr class="border-gray-200" />
522522

523523
<!-- Use Cases Section -->
524-
<section id="use-cases" class="space-y-8">
524+
<section id="features" class="space-y-8 px-4 sm:px-6 lg:px-8">
525525
<h2 class="section-header">Key use cases</h2>
526526

527527
<p class="text-gray-600">
@@ -565,7 +565,7 @@ <h2 class="section-header">Key use cases</h2>
565565
<hr class="border-gray-200" />
566566

567567
<!-- Why Sequin Section -->
568-
<section id="why-sequin" class="space-y-8">
568+
<section id="why-sequin" class="space-y-8 px-4 sm:px-6 lg:px-8">
569569
<h2 class="section-header">Why Sequin?</h2>
570570

571571
<p class="text-gray-600">
@@ -635,7 +635,7 @@ <h4 class="font-semibold text-gray-700 mb-2">
635635
<hr class="border-gray-200" />
636636

637637
<!-- Features Section -->
638-
<section id="features" class="space-y-8">
638+
<section id="comparison" class="space-y-8 px-4 sm:px-6 lg:px-8">
639639
<h2 class="section-header">Platform features</h2>
640640

641641
<p class="text-gray-600">
@@ -733,9 +733,7 @@ <h3 class="font-semibold flex items-center space-x-2">
733733
>
734734
<span
735735
class="w-2 h-2 rounded-full mt-2 flex-shrink-0"
736-
style="
737-
background-color: hsl(214.7 100% 60%);
738-
"
736+
style="background-color: #0277bd"
739737
></span>
740738
<div>
741739
<strong>CLI and API</strong> for
@@ -748,9 +746,7 @@ <h3 class="font-semibold flex items-center space-x-2">
748746
>
749747
<span
750748
class="w-2 h-2 rounded-full mt-2 flex-shrink-0"
751-
style="
752-
background-color: hsl(214.7 100% 60%);
753-
"
749+
style="background-color: #0277bd"
754750
></span>
755751
<div>
756752
<strong>Configuration as code</strong> with
@@ -772,9 +768,7 @@ <h3 class="font-semibold flex items-center space-x-2">
772768
>
773769
<span
774770
class="w-2 h-2 rounded-full mt-2 flex-shrink-0"
775-
style="
776-
background-color: hsl(214.7 100% 60%);
777-
"
771+
style="background-color: #0277bd"
778772
></span>
779773
<div>
780774
<strong>Observability</strong> with a

‎website/styles.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ h6 {
3737
font-size: 14px;
3838
}
3939

40+
section {
41+
padding: 2rem;
42+
}
43+
4044
.section-header {
4145
font-family:
4246
"Berkeley Mono", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono",

0 commit comments

Comments
 (0)