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 @@
-

The vibe coding database

-

- Runs in the browser, fits in the context window, and syncs anywhere. -

+
+
+

The vibe coding database

+

+ Runs in the browser, fits in the context window, and syncs anywhere. +

+ +
-
-
+
+
- - + + # Fireproof Database API Fireproof is a lightweight local-first embedded document database with encrypted live sync, designed to make browser apps easy. ```sh npm install use-fireproof ``` Works with ⚡️ ESM.sh: ```js import { useFireproof } from "https://esm.sh/use-fireproof"; ``` React example creating, listing, and toggling todos: ```js import { useFireproof } from "use-fireproof"; function App() { const { database, useDocument, useLiveQuery } = useFireproof("my-todos"); const { doc, merge, submit } = useDocument({ text: "" }); const { docs } = useLiveQuery("_id", { descending: true }); return (
merge({ text: e.target.value })} placeholder="New todo" />

Todos

    {docs.map(todo =>
  • database.put({...todo, done: !todo.done})} >{/* Update existing document */}{todo.done ? "✅" : "❌"} {todo.text}
  • )}
);}``` Sorting: ```js // Multiple fields const { docs } = useLiveQuery( (doc) => [doc.list_id, doc.author], { limit: 5, prefix: ["my-list-id"] } ); // Single field const { docs } = useLiveQuery("list_id", { limit: 5, key: "my-list-id" }); ``` TIP: For simple document updates like toggling or incrementing values, use `database.put()` directly as shown in the todo example: `onClick={() => database.put({...todo, done: !todo.done})}`. The `useDocument` hook is primarily for forms and more complex document creation. Data is local-first, you don't need to handle loading or error states. Deliver running applications via ChatGPT Canvas, v0, bolt.new, or Claude Artifacts. Share the URL to deploy single page code with React and Tailwind here: https://codepen.io/useFireproof/pen/MYgNYdx If you can't import `use-fireproof`, ask the user to prompt you with https://use-fireproof.com/llms-mock.txt For JavaScript see https://use-fireproof.com/llms-full.txt and full docs at https://use-fireproof.com If you can't import `use-fireproof`, ask the user to prompt you with https://use-fireproof.com/llms-mock.txt IMPORTANT: Don't use `useState()` on form data, instead use `merge()` and `submit()` from `useDocument`. Only use `useState` for ephemeral UI state (tabs, panels, etc.). Keep data in Fireproof. +
-

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.” +

-
-

Works with your existing stack

- - - -
-
+ +
+
+

Write features first

+
+
+

+ 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 +
+
+
+
+ +
+
-
-

Write features first

-

- 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: -

-
+ +
+
+

Loved by developers

+ +

+ Our passionate community contributes documentation, code, and camaraderie across the stack. + Say hello in our Discord server -

React Starter Kit

- -

- Get started using Fireproof with TypeScript by forking this repo. -

- - -
  • + or -

    Group Chat

    - -

    - AI-enabled chat, illustrates collaborative data model. -

    -
    -
  • -
  • + data-hint="guide the roadmap" + >GitHub discussions, or read the contributor spotlights + on our blog. +

    + +
  • -
  • -

    Focus Group Sim

    - -

    - Use the methodology of Four Steps to the Epiphany to validate your startup idea. -

    + target="_blank"> + Star us on GitHub
    -
  • - -
    - -
    -

    Deploy anywhere

    - -

    - 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: -

    - - Dashboard Image - -

    -
    - -
    -

    Loved by developers

    - -

    - Our passionate community contributes documentation, code, and camaraderie across the stack. - Say hello in our - Discord server - or - GitHub discussions, or read the - contributor spotlights - on our blog. -

    - -
    -
    - - -
  • -
    -

    - Dhruv Soni - Contributor, Fireproof -

    - -
    -
    -

    - What - intrigued me the most - about Fireproof was the convenience and simplicity in its approach. I think - Fireproof storage is all about its developer experience and people get the approach - behind this straight away. -

    -
    -
  • - +
    + +
    -

    Become part of the community today!

    - Join on Discord - Light up your data +
    +

    Become part of the community today!

    + + Light up your data +