diff --git a/apps/marketing/src/pages/index.astro b/apps/marketing/src/pages/index.astro index 8d6dc03fe..d5c7ef04f 100644 --- a/apps/marketing/src/pages/index.astro +++ b/apps/marketing/src/pages/index.astro @@ -43,10 +43,14 @@ import { AnimatedBeamDemo } from '../components/animated-beam-demo'

Try Cloud → - +
@@ -291,3 +295,23 @@ import { AnimatedBeamDemo } from '../components/animated-beam-demo' + + diff --git a/apps/marketing/src/styles/global.css b/apps/marketing/src/styles/global.css index a1bf02793..93bf010a0 100644 --- a/apps/marketing/src/styles/global.css +++ b/apps/marketing/src/styles/global.css @@ -55,8 +55,9 @@ body { z-index: 1; } .pattern-graph { - -webkit-mask-image: url("/pattern-graph-paper.svg"); - mask-image: url("/pattern-graph-paper.svg"); + --pattern-graph: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%3E%3Cg%20fill-rule='evenodd'%3E%3Cg%20fill='%23000'%3E%3Cpath%20opacity='.5'%20d='M96%2095h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9z'/%3E%3Cpath%20d='M6%205V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + -webkit-mask-image: var(--pattern-graph); + mask-image: var(--pattern-graph); -webkit-mask-size: 100px 100px; mask-size: 100px 100px; opacity: 0.08; @@ -141,11 +142,44 @@ body { align-items: center; gap: 0.4rem; transition: color 0.15s ease; + background: transparent; + border: 0; + padding: 0; + font-family: inherit; + cursor: pointer; } .btn-link:hover { color: var(--color-ink); } +.copy-icons { + position: relative; + display: inline-flex; + width: 14px; + height: 14px; + margin-left: 0.15rem; +} +.copy-icons > svg { + position: absolute; + inset: 0; + transition: + opacity 0.15s ease, + transform 0.15s ease; +} +.copy-icon-check { + opacity: 0; + transform: scale(0.8); + color: var(--color-accent); +} +.copy-btn[data-copied="true"] .copy-icon-copy { + opacity: 0; + transform: scale(0.8); +} +.copy-btn[data-copied="true"] .copy-icon-check { + opacity: 1; + transform: scale(1); +} + /* Legal pages */ .legal-prose { color: color-mix(in srgb, var(--color-ink) 85%, transparent);