From 13d2f1f1dca1a05b444971bd6481b9f5cd69d99f Mon Sep 17 00:00:00 2001 From: Ogulcan Celik Date: Tue, 19 May 2026 02:47:36 +0300 Subject: website: add company logo marquee --- website/assets/company-logos/alibaba.svg | 1 + website/assets/company-logos/atlassian.svg | 145 +++++++++++++++++ website/assets/company-logos/automattic.svg | 8 + website/assets/company-logos/aws.svg | 38 +++++ website/assets/company-logos/bytedance.svg | 49 ++++++ website/assets/company-logos/docker.svg | 21 +++ website/assets/company-logos/google.svg | 2 + website/assets/company-logos/ibm.svg | 244 ++++++++++++++++++++++++++++ website/assets/company-logos/jetbrains.svg | 13 ++ website/assets/company-logos/nvidia.svg | 9 + website/assets/company-logos/salesforce.svg | 25 +++ website/assets/company-logos/sentry.svg | 1 + website/assets/company-logos/tencent.svg | 8 + website/assets/company-logos/vercel.svg | 1 + website/css/style.css | 99 +++++++++++ website/index.html | 45 ++++- 16 files changed, 708 insertions(+), 1 deletion(-) create mode 100644 website/assets/company-logos/alibaba.svg create mode 100644 website/assets/company-logos/atlassian.svg create mode 100644 website/assets/company-logos/automattic.svg create mode 100644 website/assets/company-logos/aws.svg create mode 100644 website/assets/company-logos/bytedance.svg create mode 100644 website/assets/company-logos/docker.svg create mode 100644 website/assets/company-logos/google.svg create mode 100644 website/assets/company-logos/ibm.svg create mode 100644 website/assets/company-logos/jetbrains.svg create mode 100644 website/assets/company-logos/nvidia.svg create mode 100644 website/assets/company-logos/salesforce.svg create mode 100644 website/assets/company-logos/sentry.svg create mode 100644 website/assets/company-logos/tencent.svg create mode 100644 website/assets/company-logos/vercel.svg (limited to 'website') diff --git a/website/assets/company-logos/alibaba.svg b/website/assets/company-logos/alibaba.svg new file mode 100644 index 00000000..f3f8a687 --- /dev/null +++ b/website/assets/company-logos/alibaba.svg @@ -0,0 +1 @@ +Layer 1 \ No newline at end of file diff --git a/website/assets/company-logos/atlassian.svg b/website/assets/company-logos/atlassian.svg new file mode 100644 index 00000000..41cf15b0 --- /dev/null +++ b/website/assets/company-logos/atlassian.svg @@ -0,0 +1,145 @@ + + + + + + image/svg+xml + + atlassian-logo-gradient-horizontal-blue + + + + + + + + + + + + atlassian-logo-gradient-horizontal-blue + + + + + + + + + + + + diff --git a/website/assets/company-logos/automattic.svg b/website/assets/company-logos/automattic.svg new file mode 100644 index 00000000..49b5b112 --- /dev/null +++ b/website/assets/company-logos/automattic.svg @@ -0,0 +1,8 @@ + + + + \ No newline at end of file diff --git a/website/assets/company-logos/aws.svg b/website/assets/company-logos/aws.svg new file mode 100644 index 00000000..4715937f --- /dev/null +++ b/website/assets/company-logos/aws.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + diff --git a/website/assets/company-logos/bytedance.svg b/website/assets/company-logos/bytedance.svg new file mode 100644 index 00000000..ef17a697 --- /dev/null +++ b/website/assets/company-logos/bytedance.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + diff --git a/website/assets/company-logos/docker.svg b/website/assets/company-logos/docker.svg new file mode 100644 index 00000000..4518f0bf --- /dev/null +++ b/website/assets/company-logos/docker.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/assets/company-logos/google.svg b/website/assets/company-logos/google.svg new file mode 100644 index 00000000..3790851d --- /dev/null +++ b/website/assets/company-logos/google.svg @@ -0,0 +1,2 @@ + + diff --git a/website/assets/company-logos/ibm.svg b/website/assets/company-logos/ibm.svg new file mode 100644 index 00000000..896cb74b --- /dev/null +++ b/website/assets/company-logos/ibm.svg @@ -0,0 +1,244 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/assets/company-logos/jetbrains.svg b/website/assets/company-logos/jetbrains.svg new file mode 100644 index 00000000..cb3a2a0e --- /dev/null +++ b/website/assets/company-logos/jetbrains.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/website/assets/company-logos/nvidia.svg b/website/assets/company-logos/nvidia.svg new file mode 100644 index 00000000..843ef60e --- /dev/null +++ b/website/assets/company-logos/nvidia.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/website/assets/company-logos/salesforce.svg b/website/assets/company-logos/salesforce.svg new file mode 100644 index 00000000..051f7790 --- /dev/null +++ b/website/assets/company-logos/salesforce.svg @@ -0,0 +1,25 @@ + + +Salesforce.com logo +A cloud computing company based in San Francisco, California, United States + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/website/assets/company-logos/sentry.svg b/website/assets/company-logos/sentry.svg new file mode 100644 index 00000000..5133617a --- /dev/null +++ b/website/assets/company-logos/sentry.svg @@ -0,0 +1 @@ + diff --git a/website/assets/company-logos/tencent.svg b/website/assets/company-logos/tencent.svg new file mode 100644 index 00000000..faa6058c --- /dev/null +++ b/website/assets/company-logos/tencent.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/website/assets/company-logos/vercel.svg b/website/assets/company-logos/vercel.svg new file mode 100644 index 00000000..3dd8af03 --- /dev/null +++ b/website/assets/company-logos/vercel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/css/style.css b/website/css/style.css index 165d7393..1667c59e 100644 --- a/website/css/style.css +++ b/website/css/style.css @@ -723,6 +723,81 @@ samp { box-shadow: var(--shadow), 0 0 0 1px rgb(21 26 33 / 0.08); } +.logo-cloud { + max-width: var(--max); + margin: 0 auto; + padding: 0 1.25rem 4rem; + overflow: hidden; +} + +.logo-cloud-heading { + margin-bottom: 0.9rem; + text-align: center; +} + +.logo-cloud-heading .section-kicker { + margin-bottom: 0.45rem; +} + +.logo-cloud-heading h2 { + margin: 0; + color: var(--ink-soft); + font-size: clamp(1.05rem, 2vw, 1.35rem); + line-height: 1.25; + letter-spacing: -0.035em; +} + +.logo-marquee { + position: relative; + overflow: hidden; + background: radial-gradient(ellipse at center, rgb(201 189 173 / 0.28) 0%, rgb(201 189 173 / 0.16) 36%, transparent 72%); + -webkit-mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent); + mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent); +} + +.logo-track { + display: flex; + width: max-content; + animation: logo-marquee 36s linear infinite; +} + +.logo-marquee:hover .logo-track { + animation-play-state: paused; +} + +.logo-row { + display: flex; + flex: 0 0 auto; + gap: 0.65rem; + padding: 0.45rem 0.325rem; +} + +.logo-card { + width: 150px; + height: 58px; + display: grid; + place-items: center; + padding: 0.5rem 0.85rem; + color: var(--ink-soft); +} + +.logo-card img { + width: auto; + height: 32px; + max-width: 116px; + object-fit: contain; +} + +.logo-card span { + display: none; +} + +@keyframes logo-marquee { + to { + transform: translateX(-50%); + } +} + .section { padding-top: 6rem; padding-bottom: 6rem; @@ -1519,6 +1594,7 @@ td:last-child { .hero, .section, .demo-section, + .logo-cloud, .footer, .final-cta { padding-inline: 1rem; @@ -1556,6 +1632,20 @@ td:last-child { border-radius: 18px; } + .logo-cloud { + padding-bottom: 3rem; + } + + .logo-card { + width: 132px; + height: 54px; + } + + .logo-card img { + height: 28px; + max-width: 100px; + } + .section { padding-top: 4rem; padding-bottom: 4rem; @@ -1694,6 +1784,15 @@ td:last-child { font-size: 0.78rem; } + .logo-card { + width: 118px; + } + + .logo-card img { + height: 26px; + max-width: 92px; + } + .mobile-proof, .mobile-shots { gap: 0.65rem; diff --git a/website/index.html b/website/index.html index 877afe3d..9953ea3f 100644 --- a/website/index.html +++ b/website/index.html @@ -48,7 +48,7 @@ type="font/woff2" crossorigin /> - +