diff --git a/tlas/copy-to-clipboard.js b/tlas/copy-to-clipboard.js new file mode 100644 index 0000000..bd4daf8 --- /dev/null +++ b/tlas/copy-to-clipboard.js @@ -0,0 +1,21 @@ +'use strict' + +document.querySelectorAll('.copyicon')?.forEach(elem => { + elem.addEventListener('click', copyToClipBoard) +}) + +function copyToClipBoard(e) { + const parentNode = e.currentTarget.parentNode + const text = parentNode?.querySelector('.copytext')?.innerText + if (text) { + navigator.clipboard.writeText(text) + const copyIcon = parentNode.querySelector('.copyicon') + const copiedIcon = parentNode.querySelector('.copiedicon') + copyIcon.style.display = 'none' + copiedIcon.style.display = 'block' + setTimeout(() => { + copyIcon.style.display = 'block' + copiedIcon.style.display = 'none' + }, 1500) + } +} \ No newline at end of file diff --git a/tlas/images/copied-icon.svg b/tlas/images/copied-icon.svg new file mode 100644 index 0000000..b655a7b --- /dev/null +++ b/tlas/images/copied-icon.svg @@ -0,0 +1,3 @@ + diff --git a/tlas/images/demo-apps/bloopernet.jpg b/tlas/images/demo-apps/bloopernet.jpg new file mode 100644 index 0000000..c196100 Binary files /dev/null and b/tlas/images/demo-apps/bloopernet.jpg differ diff --git a/tlas/images/demo-apps/business-cat.jpg b/tlas/images/demo-apps/business-cat.jpg deleted file mode 100644 index 92b19c5..0000000 Binary files a/tlas/images/demo-apps/business-cat.jpg and /dev/null differ diff --git a/tlas/images/demo-apps/business-cat.png b/tlas/images/demo-apps/business-cat.png deleted file mode 100644 index b5c8687..0000000 Binary files a/tlas/images/demo-apps/business-cat.png and /dev/null differ diff --git a/tlas/images/demo-apps/cat-chat-demo.jpg b/tlas/images/demo-apps/cat-chat-demo.jpg deleted file mode 100644 index 88cd4a6..0000000 Binary files a/tlas/images/demo-apps/cat-chat-demo.jpg and /dev/null differ diff --git a/tlas/images/demo-apps/dashboard.jpg b/tlas/images/demo-apps/dashboard.jpg deleted file mode 100644 index a731dc4..0000000 Binary files a/tlas/images/demo-apps/dashboard.jpg and /dev/null differ diff --git a/tlas/images/demo-apps/dashboard.png b/tlas/images/demo-apps/dashboard.png deleted file mode 100644 index 0c41887..0000000 Binary files a/tlas/images/demo-apps/dashboard.png and /dev/null differ diff --git a/tlas/images/demo-apps/epiphany.jpg b/tlas/images/demo-apps/epiphany.jpg deleted file mode 100644 index 4eca374..0000000 Binary files a/tlas/images/demo-apps/epiphany.jpg and /dev/null differ diff --git a/tlas/images/demo-apps/epiphany.png b/tlas/images/demo-apps/epiphany.png deleted file mode 100644 index 2e0596e..0000000 Binary files a/tlas/images/demo-apps/epiphany.png and /dev/null differ diff --git a/tlas/images/demo-apps/firehouse-chat.jpg b/tlas/images/demo-apps/firehouse-chat.jpg new file mode 100644 index 0000000..8adef13 Binary files /dev/null and b/tlas/images/demo-apps/firehouse-chat.jpg differ diff --git a/tlas/images/demo-apps/partykit-poem.jpg b/tlas/images/demo-apps/partykit-poem.jpg deleted file mode 100644 index b49f19a..0000000 Binary files a/tlas/images/demo-apps/partykit-poem.jpg and /dev/null differ diff --git a/tlas/images/demo-apps/partykit-poem.png b/tlas/images/demo-apps/partykit-poem.png deleted file mode 100644 index 9c846ce..0000000 Binary files a/tlas/images/demo-apps/partykit-poem.png and /dev/null differ diff --git a/tlas/images/demo-apps/spend-sage.jpg b/tlas/images/demo-apps/spend-sage.jpg new file mode 100644 index 0000000..0b992b1 Binary files /dev/null and b/tlas/images/demo-apps/spend-sage.jpg differ diff --git a/tlas/images/demo-apps/starter-kit.jpg b/tlas/images/demo-apps/starter-kit.jpg deleted file mode 100644 index 2d0e644..0000000 Binary files a/tlas/images/demo-apps/starter-kit.jpg and /dev/null differ diff --git a/tlas/images/demo-apps/starter-kit.png b/tlas/images/demo-apps/starter-kit.png deleted file mode 100644 index 9d12d90..0000000 Binary files a/tlas/images/demo-apps/starter-kit.png and /dev/null differ diff --git a/tlas/images/demo-apps/taskify.jpg b/tlas/images/demo-apps/taskify.jpg new file mode 100644 index 0000000..484798a Binary files /dev/null and b/tlas/images/demo-apps/taskify.jpg differ diff --git a/tlas/images/demo-apps/team-chat.jpg b/tlas/images/demo-apps/team-chat.jpg deleted file mode 100644 index 8b6ba43..0000000 Binary files a/tlas/images/demo-apps/team-chat.jpg and /dev/null differ diff --git a/tlas/images/demo-apps/team-chat.png b/tlas/images/demo-apps/team-chat.png deleted file mode 100644 index 8db8ac6..0000000 Binary files a/tlas/images/demo-apps/team-chat.png and /dev/null differ diff --git a/tlas/images/demo-apps/tripgenius.jpg b/tlas/images/demo-apps/tripgenius.jpg new file mode 100644 index 0000000..28acc21 Binary files /dev/null and b/tlas/images/demo-apps/tripgenius.jpg differ diff --git a/tlas/images/demo-apps/usequickcheck.jpg b/tlas/images/demo-apps/usequickcheck.jpg new file mode 100644 index 0000000..2ef87a2 Binary files /dev/null and b/tlas/images/demo-apps/usequickcheck.jpg differ diff --git a/tlas/images/react-icon.svg b/tlas/images/react-icon.svg new file mode 100644 index 0000000..18f028a --- /dev/null +++ b/tlas/images/react-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tlas/images/solid-icon.png b/tlas/images/solid-icon.png new file mode 100644 index 0000000..10265c8 Binary files /dev/null and b/tlas/images/solid-icon.png differ diff --git a/tlas/images/star-icon.svg b/tlas/images/star-icon.svg new file mode 100644 index 0000000..2e69dfa --- /dev/null +++ b/tlas/images/star-icon.svg @@ -0,0 +1,3 @@ + diff --git a/tlas/index.html b/tlas/index.html index 3b22aa1..d62b111 100644 --- a/tlas/index.html +++ b/tlas/index.html @@ -59,8 +59,10 @@ --color-background-secondary: rgba(240, 240, 240, 1); --color-borders: rgba(224, 222, 222, 1); - --section-max-width: 1364px; - --section-side-padding: 98px; + --section-max-width: 1168px; + --section-bg-max-width: 1364px; + --section-side-padding: 136px; + --section-bottom-padding: 80px; --body-side-padding: 38px; --radius-large: 20px; @@ -91,7 +93,6 @@ display: flex; align-items: center; flex-direction: column; - padding: 0 var(--body-side-padding); margin: 0; color: var(--color-primary); line-height: 1.2; @@ -126,7 +127,7 @@ font-family: 'Geist', sans-serif; font-style: normal; font-weight: 700; - font-size: 52px; + font-size: 42px; line-height: 1.2; letter-spacing: -0.04em; text-wrap: balance; @@ -136,7 +137,7 @@ font-family: 'Inter Tight', sans-serif; font-style: normal; font-weight: 600; - font-size: 30px; + font-size: 23px; line-height: 1.2; letter-spacing: 0.01em; } @@ -145,7 +146,7 @@ font-family: 'Geist', sans-serif; font-style: normal; font-weight: 600; - font-size: 19px; + font-size: 16px; line-height: 1.2; letter-spacing: 0.01em; } @@ -154,8 +155,8 @@ font-family: 'Inter Tight', sans-serif; font-style: normal; font-weight: 480; - font-size: 19px; - line-height: 1.4; + font-size: 16px; + line-height: 1.5; letter-spacing: 0.02em; color: var(--color-secondary); } @@ -189,7 +190,7 @@ font-family: 'Geist', sans-serif; font-style: normal; font-weight: 500; - font-size: 16px; + font-size: 14px; line-height: 1.2; } @@ -215,7 +216,6 @@ footer { position: relative; width: 100%; - max-width: var(--section-max-width); } section, @@ -224,15 +224,30 @@ padding-right: var(--section-side-padding); } + .section-conteiner { + max-width: var(--section-max-width); + margin: 0 auto; + } + .button { display: inline-flex; justify-content: center; align-items: center; gap: 4px; + font-family: 'Geist', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 1.2; width: 200px; height: 51px; border: 1px solid var(--color-borders); border-radius: var(--radius-button); + transition: all 0.2s ease-in-out; + } + + .button-small { + height: 45px; } .button-primary { @@ -240,19 +255,28 @@ color: var(--color-background-primary); } + .button-primary:hover { + opacity: 0.7; + } + .button-secondary { background-color: var(--color-background-primary); } + .button-secondary:hover { + background-color: var(--color-borders); + } + @media (max-width: 1150px) { :root { - --section-side-padding: 38px; + --section-side-padding: 58px; } } @media (max-width: 770px) { :root { - --section-side-padding: 30px; + --section-side-padding: 50px; + --section-bottom-padding: 60px; --body-side-padding: 20px; } @@ -261,7 +285,7 @@ } h2 { - font-size: 7.8vw; + font-size: 6vw; } h3 { @@ -273,6 +297,16 @@ } } + @media (max-width: 550px) { + h1 { + font-size: 9vw; + } + + h2 { + font-size: 34px; + } + } + /* flying hint */ #flying-hint { padding: 8px 20px; @@ -297,6 +331,7 @@ align-items: center; gap: 30px; height: 70px; + padding: 0 var(--body-side-padding); } header .text-buttons:hover { @@ -362,16 +397,26 @@ /* hero */ section.hero { + padding: 0 var(--body-side-padding); + } + + section.hero .section-conteiner { position: relative; + display: flex; + gap: 60px; + align-items: center; + justify-content: space-between; margin-top: 28px; - margin-bottom: 80px; + margin-bottom: var(--section-bottom-padding); background-color: var(--color-background-secondary); border-radius: var(--radius-large); min-height: 600px; + padding: 0px 120px; overflow: hidden; + max-width: var(--section-bg-max-width); } - section.hero::before { + section.hero .section-conteiner::before { content: ' '; position: absolute; left: 0; @@ -389,7 +434,7 @@ pointer-events: none; } - section.hero::after { + section.hero .section-conteiner::after { content: ' '; position: absolute; left: 0; @@ -410,7 +455,7 @@ .hero-heading { position: relative; max-width: 500px; - margin-top: 162px; + margin-top: 0; margin-bottom: 20px; } @@ -450,7 +495,7 @@ } @media (prefers-color-scheme: dark) { - section.hero::before { + section.hero .section-conteiner::before { filter: invert(75%); } @@ -467,10 +512,13 @@ } } - @media (max-width: 1370px) { - section.hero { + @media (max-width: 1150px) { + section.hero .section-conteiner { padding-top: 80px; - padding-bottom: 80px; + padding-bottom: 160px; + flex-direction: column; + align-items: center; + gap: 0; } .hero-heading, @@ -481,546 +529,664 @@ } .hero-heading { - margin-top: unset; - margin-bottom: 36px; - margin-top: 36px; text-align: center; + max-width: unset; } .hero-text { - max-width: unset; - margin-top: 36px; text-align: center; + margin-bottom: 0; + margin-left: auto; + margin-right: auto; } .hero-buttons { + position: absolute; + bottom: 90px; + left: 0; justify-content: center; + align-items: center; + width: 100%; } } - @media (max-width: 1150px) { - section.hero { - margin-bottom: 130px; + @media (max-width: 770px) { + section.hero .section-conteiner { + padding-left: 60px; + padding-right: 60px; } } @media (max-width: 550px) { - section.hero { - padding-bottom: 60px; - padding-top: 60px; - margin-bottom: 110px; + section.hero .section-conteiner { + padding: 60px 30px 200px 30px; } .hero-buttons { flex-direction: column; + bottom: 60px; } } /* hero app */ .hero-app { - position: absolute; - top: 130px; - right: var(--section-side-padding); - width: 594px; - border: 0px solid #555453; - /*height: 365px; - /* background-color: #292828; - /*background: white;*/ - border-radius: var(--radius-small); - /* overflow: hidden; */ - display: flex; - flex-direction: column; + width: 520px; + margin-top: 20px; } - .app-header { + .hero-app .file-wrapper { position: relative; - height: 16px; - border-radius: 6px 6px 0 0; - font-size: 7px; - text-align: center; - padding-top: 4px; - background-color: #383736; - color: rgba(129, 127, 127, 0.7); - z-index: 100; - } - - .app-header::before { - content: ' '; - position: absolute; - left: 8px; - width: 34px; - height: 8px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%234C4C4B'/%3E%3C/svg%3E"); - background-repeat: repeat; - } - - .app-body { - flex-grow: 1; - margin: -1px; - display: flex; - flex-direction: column; - align-content: center; - justify-content: space-between; - } - - .app-body .file-wrapper { - max-width: 28rem; - margin: 0 auto; - width: 100%; - display: flex; - flex-direction: column; - align-items: flex-start; + width: 450px; + z-index: 1; } - .app-body div.filename { + .hero-app .filename { color: #888; font-size: 8px; padding-bottom: 4px; font-family: monospace; - text-align: left; } #llm-txt { - position: relative; - z-index: 1; width: 100%; - max-width: 28rem; height: 12rem; - align-self: center; background: #ffc; color: #320; - margin-bottom: 1rem; - cursor: default; overflow: hidden; - resize: none; line-height: 140%; - letter-spacing: 4%; font-size: 11px; font-family: monospace; + resize: none; + pointer-events: none; } - .app-body p { - width: 28rem; - align-self: center; - } - - .app-body .click-to-copy { + .hero-app .click-to-copy { position: absolute; - z-index: 2; - align-self: center; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); color: rgba(44, 44, 44, 1); border-color: rgb(255, 220, 36); background: rgb(251, 211, 28); - top: 75px; box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.18); text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.5); + cursor: pointer; } - .app-body .click-to-copy:hover { - background-color: #ff8200 ; + .hero-app .click-to-copy:hover { + background-color: #ff8200; border-color: #ff8200; text-shadow: 0px 1px 3px rgba(255, 255, 255, 0.5); box-shadow: 0px 2px 3px rgba(0, 0, 0, 1); } - .app-body .click-to-copy:active { - position: absolute; - align-self: center; - border-color: var(--color-primary); + .hero-app .click-to-copy:active { border-color: rgb(255, 220, 36); - background-color: #ff8200 ; + background-color: #ff8200; text-shadow: 0px 1px 3px rgba(255, 255, 255, 1); - box-shadow: 0px 2px 3px rgba(0, 0, 0, 1); - top: 75px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.18); } - .app-body .cp_embed_wrapper, - .app-body .cp_embed_iframe { - height: 100%; + .hero-app .text-large { + line-height: 1.2; + margin-bottom: 0; } - @media (max-width: 1370px) { - .hero-app { - position: relative; - top: unset; - right: unset; - width: 100%; - max-width: unset; - margin: 2rem auto; - } + /* clipboard icon styles */ + .clipboard-icon { + width: 16px; + height: 16px; + margin-left: 5px; + background-image: url('./images/clipboard-icon.svg'); + background-size: contain; + background-repeat: no-repeat; + filter: drop-shadow(0px 1px 2px rgba(255, 255, 255, 0.5)); + } - .app-body { - width: unset; + @media (max-width: 1150px) { + .hero-app, + .hero-app .file-wrapper { + width: 100%; } - .app-body p { - max-width: unset; - width: unset; + .hero-app .text { text-align: center; } } - @media (max-width: 550px) { - .hero-app-tabs .tab { - font-size: 7px; - } - } - /* benefits */ section.benefits { - margin-bottom: 120px; + position: relative; + margin-bottom: var(--section-bottom-padding); + padding-bottom: 36px; + border-bottom: 1px solid var(--color-borders); + overflow: hidden; + } + + section.benefits::after { + content: " "; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(360deg, #F0F0F0 50.33%, rgba(255, 255, 255, 0) 96.06%); + z-index: -1; } .benefits-heading { - text-align: center; - margin-top: 36px; - margin-bottom: 36px; + margin-top: 0; + margin-bottom: 28px; } .benefits-list { display: flex; - gap: 40px; + gap: 14px; justify-content: space-between; } .benefit { - max-width: 290px; + border: 1px solid var(--color-borders); + border-radius: 12px; + padding: 26px 30px 14px 30px; + background-color: var(--color-background-primary); } - @media (max-width: 1150px) { - section.benefits { - margin-bottom: 80px; + .benefit p { + max-width: 80%; + } + + .benefit h3 { + margin: unset; + } + + .benefit-title { + display: flex; + gap: 8px; + } + + .benefit-icon { + opacity: 0.3; + color: var(--color-primary); + } + + @media (prefers-color-scheme: dark) { + section.benefits::after { + background: linear-gradient(360deg, #0e0e0f 33.92%, #171616 96.06%); } + .benefit { + background-color: var(--color-background-secondary); + } + } + + @media (max-width: 1150px) { .benefits-list { flex-direction: column; - align-items: center; } .benefit { - text-align: center; - max-width: 440px; + width: 100%; + } + + .benefit p { + max-width: unset; } } - /* demo */ - section.demo { - margin-bottom: 60px; - text-align: center; + /* logos */ + .logos-list-container { + position: relative; + height: 120px; + width: 100%; } - section.demo.deploy { - margin-bottom: 20px; + .logos-list { + position: absolute; + bottom: 0; + right: 0; + display: flex; + gap: 60px; + align-items: center; + filter: grayscale(10%); } - section.demo code { - background-color: var(--color-background-secondary); - padding: 2px 8px; - border-radius: 4px; + .logo-image { + height: 40px; + min-width: 50px; + max-width: 100px; + object-fit: contain; + } + + .logos-animate { + animation: logo-move linear infinite; + } + + .testimonials-animate:hover { + animation-play-state: paused; + } + + @keyframes logo-move { + from { + transform: translateX(0); + } + to { + transform: translateX(calc(50% + 30px)); + } + } + + @media (prefers-color-scheme: dark) { + .logo-image { + filter: invert(1) brightness(1.1) hue-rotate(180deg); + } + } + + @media (max-width: 550px) { + .logo-image { + height: 36px; + min-width: 40px; + max-width: 120px; + } + } + + /* demo */ + section.demo { + margin-bottom: var(--section-bottom-padding); } .demo-heading { - max-width: 740px; - margin: 36px auto; + margin: 10px 0 4px 0; } .demo-text { - max-width: 820px; - margin-left: auto; - margin-right: auto; - margin-bottom: 70px; + margin-bottom: 32px; } .demo-text a { text-decoration: underline; } - .centered-image { - display: block; - margin-left: auto; - margin-right: auto; - width: 75%; - border-radius: 8px; - border: 2px solid black; - } - - .demo-carusel { + .demo-content { display: flex; - justify-content: space-between; - align-items: center; - gap: 10px; - height: 32vw; - max-height: 460px; + gap: 70px; } - .demo-carusel-item { + .demo-code { position: relative; - width: 100%; - height: 74%; - display: flex; - justify-content: center; - align-items: center; + padding: 12px 36px 12px 18px; background-color: var(--color-background-secondary); - border-radius: var(--radius-large); - overflow: hidden; - transition: all 0.4s ease; + border: 1px solid var(--color-borders); + border-radius: 6px; + width: 445px; + font-weight: 500; + font-size: 16px; + } + + .copyicon, + .copiedicon { + position: absolute; + top: 50%; + right: 10px; + width: 24px; + height: 24px; + opacity: 0.3; + transform: translateY(-50%); + background-position: center center; + background-repeat: no-repeat; } - .demo-carusel-item.active, - .demo-carusel-item.hovered { - margin: 0 50px; - box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.18); - z-index: 100; + .copyicon { + background-image: url('./images/clipboard-icon.svg'); + background-size: 14px 18px; + cursor: pointer; } - .demo-carusel-item.active { - transform: scale(1.4); + .copiedicon { + display: none; + background-image: url('./images/copied-icon.svg'); } - .demo-carusel-item.hovered { - transform: scale(1.5); + .demo-links { + width: 515px; + border: 1px solid var(--color-borders); + border-radius: 12px; + padding: 18px 28px; + flex-shrink: 0; } - .demo-carusel-link { - padding: 10% 5%; - height: 100%; - width: 100%; + .demo-links a { + text-decoration: underline; } - .demo-image { - width: 100%; - height: 100%; - object-fit: cover; + .demo-buttons { + display: flex; + gap: 14px; + margin-bottom: 10px; + margin-top: 35px; } - .demo-title, - .demo-description { - position: absolute; + .demo-button { + gap: 8px; + padding: 6px 16px 6px 8px; width: 100%; - left: 0; - margin: 0; - text-align: left; - padding: 14px; - pointer-events: none; - user-select: none; - z-index: 2; - background: rgba(240, 240, 240, 0.4); - backdrop-filter: blur(8px); - transition: all 0.4s ease; + text-decoration: unset !important; } - .demo-title { - font-size: 20px; - top: 0; - text-wrap: nowrap; - text-overflow: ellipsis; - overflow: hidden; - padding: 16px; + .demo-button .react-icon, + .demo-button .solid-icon { + width: 28px; + height: 28px; + background-size: cover; } - .demo-description { - font-size: 12px; - bottom: 0; - color: var(--color-primary); + .demo-button .react-icon { + background-image: url('./images/react-icon.svg'); } - @media (prefers-color-scheme: dark) { - .demo-title, - .demo-description { - background: rgba(32, 31, 31, 0.6); - } + .demo-button .solid-icon { + background-image: url('./images/solid-icon.png'); } - @media (max-width: 1370px) { - .demo-carusel-item.active, - .demo-carusel-item.hovered { - margin: 0 2vw; - } + .demo-apps { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 14px; + margin-top: 30px; } - @media (max-width: 1150px) { - .demo-text { - margin-bottom: 80px; + .demo-apps-item { + position: relative; + border-radius: 8px; + overflow: hidden; + box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.18); + cursor: pointer; + transition: all 0.4s ease; + } + + .demo-apps-item:hover { + transform: scale(1.02); + z-index: 99; + } + + .demo-apps-item::after { + content: ' '; + background-color: rgba(40, 40, 44, 0.65); + backdrop-filter: blur(4px); + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0; + transition: all 0.4s ease; + } + + @media (prefers-color-scheme: dark) { + .demo-apps-item { + box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.25); } - .demo-carusel { - gap: 0; + .copyicon, + .copiedicon { + filter: invert(1); } - .demo-carusel-item { - border-radius: 10px; + .demo-links { + background-color: var(--color-background-secondary); } - .demo-carusel-item.active { - transform: scale(1.55); - margin: 0 36px; + .demo-button { + background-color: #1f1e1e; } - .demo-carusel-item:first-of-type, - .demo-carusel-item:last-of-type { - transform: scale(0.85); + .demo-button .react-icon, + .demo-button .solid-icon { + filter: brightness(1.5); } + } + + .demo-apps-item:hover::after { + opacity: 1; + } + + .demo-apps-link { + display: block; + } + + .demo-image { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + aspect-ratio: 380 / 240; + } - .demo-carusel-link { - padding: 20px 7%; + .demo-title, + .demo-description { + position: absolute; + width: 100%; + left: 0; + margin: 0; + padding: 20px 24px; + color: white; + ointer-events: none; + user-select: none; + opacity: 0; + z-index: 2; + transition: all 0.4s ease; + } + + .demo-apps-item:hover .demo-title, + .demo-apps-item:hover .demo-description { + opacity: 1; + } + + .demo-title { + font-size: 24px; + font-weight: 700; + top: 0; + text-wrap: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + .demo-description { + font-size: 18px; + bottom: 0; + } + + @media (max-width: 1370px) { + .demo-content { + flex-direction: column; + gap: 40px; } - .demo-title, - .demo-description { - padding: 1.3vw; + .demo-links { + width: 100%; } - .demo-title { - font-size: 1.8vw; + .demo-links .text { + max-width: 610px; } + } - .demo-description { - font-size: 1vw; + @media (max-width: 1150px) { + .demo-apps { + grid-template-columns: 1fr 1fr; } } @media (max-width: 770px) { - section.demo { - margin-bottom: 100px; + .demo-apps { + grid-template-columns: 1fr; + margin-top: 40px; } - .demo-carusel-item.active { - margin: 0 2vw; + .demo-title { + font-size: 4.6vw; } } @media (max-width: 550px) { - .demo-carusel { - transform: scale(1.15); - } - - .demo-carusel-item { - border-radius: 4px; + .demo-title { + font-size: 5.5vw; } - section.demo.deploy { - margin-bottom: 30px; + .demo-code { + width: 100%; } - section.demo.deploy .centered-image { - width: 95%; + .demo-buttons { + flex-direction: column; } } - /* logos */ - section.logos { - max-width: unset; - left: 0; - width: 100vw; - width: 100vw; - height: 240px; + /* delpoy */ + section.deploy { + border-top: 1px solid var(--color-borders); + border-bottom: 1px solid var(--color-borders); + padding-top: 105px; + padding-bottom: 160px; + background: linear-gradient(360deg, #F0F0F0 50.33%, rgba(255, 255, 255, 0) 96.06%); overflow: hidden; - margin-bottom: 80px; + margin-bottom: 68px; } - .logos-heading { - text-align: center; - margin-top: 36px; - margin-bottom: 36px; + section.deploy .deploy-content { + width: 48%; } - .logos-list-container { - position: relative; - padding-top: 100px; - width: 100%; + .deploy-heading { + margin-top: unset; + margin-bottom: 20px; } - .logos-list { - position: absolute; - bottom: 0; - right: 0; - display: flex; - gap: 60px; - align-items: center; - filter: grayscale(90%); + .deploy-text { + margin: 16px 0 0 0; } - .logo-image { - height: 44px; - min-width: 50px; - max-width: 140px; - object-fit: contain; + .deploy-text a { + text-decoration: underline; } - .logos-animate { - animation: logo-move linear infinite; + .deploy-subtitle { + text-transform: uppercase; + font-size: 13px; + opacity: 0.4; + margin-top: 6px; } - .testimonials-animate:hover { - animation-play-state: paused; + .deploy-image { + position: absolute; + width: 55vw; + max-width: 750px; + left: 55%; + top: 50%; + transform: translateY(-50%); } - @keyframes logo-move { - from { - transform: translateX(0); + .deploy-image img { + width: 100%; + height: auto; + border-radius: 16px; + } + + @media (prefers-color-scheme: dark) { + section.deploy { + background: linear-gradient(360deg, #0e0e0f 33.92%, #171616 96.06%); } - to { - transform: translateX(calc(50% + 30px)); + + .deploy-text em { + color: var(--color-primary); + } + + .deploy-image { + filter: brightness(1.2); } } - @media (prefers-color-scheme: dark) { - .logo-image { - filter: invert(1) hue-rotate(180deg); + @media (max-width: 1150px) { + section.deploy { + padding-top: 70px; + padding-bottom: 70px; } } @media (max-width: 770px) { - section.logos { - height: 40vw; + section.deploy { + padding-top: 50px; + padding-bottom: 50px; } - } - @media (max-width: 550px) { - section.logos { - height: 47vw; - margin-bottom: 40px; + section.deploy .deploy-content { + width: 100%; + margin-bottom: 36px; } - .logo-image { - height: 36px; - min-width: 40px; - max-width: 120px; + .deploy-image { + position: static; + transform: unset; + } + + .deploy-image img { + border-radius: 10px; } } /* testimonials */ section.testimonials { - margin-bottom: 130px; - max-width: unset; + margin-bottom: var(--section-bottom-padding); left: 0; width: 100vw; - width: 100vw; overflow: hidden; } .testimonials-heading { - text-align: center; - margin-top: 36px; - margin-bottom: 36px; + margin-top: 0; + margin-bottom: 20px; } .testimonials-text { - max-width: 740px; - margin-left: auto; - margin-right: auto; + max-width: 730px; margin-top: 0; - margin-bottom: 60px; - text-align: center; + margin-bottom: 30px; } .testimonials-text a { text-decoration: underline; } + .testimonials-buttons { + display: flex; + gap: 14px; + } + + .testimonials-buttons .button { + height: 44px; + } + + .testimonials-buttons .star-button { + position: relative; + padding-left: 12px; + } + + .testimonials-buttons .star-button::before { + content: " "; + position: absolute; + background-image: url('./images/star-icon.svg'); + background-size: contain; + color: var(--color-primary); + opacity: 0.2; + top: 50%; + left: 11px; + transform: translateY(-50%); + width: 22px; + height: 22px; + margin-top: -1px; + } + .testimonials-list-container { - margin-top: 60px; + margin-top: 40px; position: relative; width: 100%; height: 240px; @@ -1105,11 +1271,32 @@ .testimonials-body .testimonial-text { color: #a2a2a2; } + + .testimonials-buttons .button-primary { + background-color: var(--color-borders); + color: var(--color-primary); + } + + .testimonials-buttons .star-button::before { + filter: invert(1); + } } @media (max-width: 550px) { section.testimonials { - margin-bottom: 160px; + margin-bottom: 110px; + } + + .testimonials-buttons { + flex-direction: column; + } + + .testimonials-buttons .button { + width: 100%; + } + + .testimonials-buttons .star-button::before { + left: calc(50% - 90px); } .testimonials-list { @@ -1140,14 +1327,20 @@ /* community */ section.community { + padding: 0 var(--body-side-padding); + } + + section.community .section-conteiner { + position: relative; margin-bottom: 40px; padding: 112px var(--body-side-padding); text-align: center; background-color: var(--color-background-secondary); border-radius: var(--radius-large); + max-width: var(--section-bg-max-width); } - section.community::before { + section.community .section-conteiner::before { content: ' '; position: absolute; left: 0; @@ -1172,21 +1365,56 @@ margin-bottom: 36px; } + .community-buttons { + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + margin-top: 16px; + } + .community .button { position: relative; - width: 235px; + width: 100%; } - .community .button::before { + .community .button:first-of-type::before { content: ' '; width: 28px; height: 28px; - background-image: url('./images/discord-icon-white.svg'); + background-image: url('./images/discord-icon.svg'); background-size: cover; background-repeat: no-repeat; margin-left: -8px; } + .community-content { + max-width: 500px; + margin: 0 auto; + } + + .community .subscribe-input { + position: relative; + display: block; + width: 100%; + height: 45px; + border: 1px solid var(--color-borders); + border-radius: 6px; + background-color: var(--color-background-primary); + outline: unset; + padding: 8px 18px; + z-index: 1; + } + + .community .subscribe-input::placeholder { + color: var(--color-primary); + opacity: 0.2; + } + + .community .subscribe-input:focus::placeholder { + opacity: 0; + } + .community .trademark { position: absolute; top: -70px; @@ -1205,12 +1433,16 @@ filter: invert(75%); } - .community .button::before { - background-image: url('./images/discord-icon.svg'); + .community .button:first-of-type::before { + background-image: url('./images/discord-icon-white.svg'); } } @media (max-width: 550px) { + .community .community-buttons { + flex-direction: column; + } + .community .trademark { width: 200px; height: 131px; @@ -1247,23 +1479,6 @@ padding-right: 16px; } } - - /* Clipboard icon styles */ - .clipboard-icon { - display: inline-block; - width: 16px; - height: 16px; - margin-left: 5px; - background-image: url('./images/clipboard-icon.svg'); - background-size: contain; - background-repeat: no-repeat; - background-position: center; - vertical-align: middle; - filter: drop-shadow(0px 1px 2px rgba(255, 255, 255, 0.5)); - } - .app-body .click-to-copy:hover .clipboard-icon { - filter: drop-shadow(0px 1px 2px rgba(255, 255, 255, 0.5)); - }
@@ -1288,489 +1503,585 @@- Runs in the browser, fits in the context window, and syncs anywhere. -
++ Runs in the browser, fits in the context window, and syncs anywhere. +
+ +LLMs.txt is a universal way to share prompts — ours is designed for one-shot success. Paste it into any AI code generator along with something like “an inventory tracker for my bakery.”
++ LLMs.txt is a universal way to share prompts — ours is designed for one-shot success. + Paste it into any AI code generator along with something like “an inventory tracker for my bakery.” +
All you need to write an app is your web browser.
-Easier to get started than any other database.
-Connectors for AWS, Cloudflare, Netlify, and more.
-
- All you need to write an app is your web browser.
Easier to get started than any other database.
+ Connectors for AWS, Cloudflare, Netlify, and more.
+
+
+
+
+ Write your app first, choose your backend later. Getting started is as easy as adding a
+ script tag or running npm install use-fireproof in
+ your project. Experience live updates across peers so everyone can collaborate together,
+ using your existing backend.
+
npm install use-fireproof
+
+
+ + Try the React or Solid tutorials, open + + the code pen above + + , hack on this + + HTMX example + + , or check out these open-source starters: +
+ +
+ + Bloopernet Drum Machine with Fireproof +
+
+ + Personalized trip plans generator +
+
+ + Playful finances tracker +
+
+
+ + Task management system app +
+
+
+ + AI-enabled chat, illustrates collaborative data model +
+
+ + Check printing application +
+
- Write your app first, choose your backend later. Getting started is as easy as adding a
- script tag or running npm install use-fireproof in
- your project. Experience live updates across peers so everyone can collaborate together,
- using your existing backend.
- Try the
- React or
- Solid
- tutorials, open
- the code pen above
- , hack on this
- HTMX example, or check out these open-source starters:
-
+ Fireproof is simple to sync via any backend. Open-source connectors make it easy to add
+ Fireproof to any environment, including
+
+ Cloudflare, AWS, Netlify, and more.
+
+
+
+ Coming soon — live data anywhere via Fireproof Cloud.
+
+
Preview the dashboard:
+
- - Realtime fun and collaboration via PartyKit and Fireproof. -
+
-
- + Our passionate community contributes documentation, code, and camaraderie across the stack. + Say hello in our Discord server -
- - Get started using Fireproof with TypeScript by forking this repo. -
- - -
- - AI-enabled chat, illustrates collaborative data model. -
- -
+
+