✨ feat: Minor changes to the frontend (#145)

This PR does a facelift to the `/` and `/pricing` pages
nestrilabs · Dec 26, 2024 · 0d36acb · 0d36acb
1 parent 2c39517
commit 0d36acb
Show file tree

Hide file tree

Showing 16 changed files with 435 additions and 908 deletions.
diff --git a/apps/www/public/audio/cash.mp3 b/apps/www/public/audio/cash.mp3
diff --git a/apps/www/public/images/book-texture.avif b/apps/www/public/images/book-texture.avif
diff --git a/apps/www/src/routes/index.tsx b/apps/www/src/routes/index.tsx
diff --git a/apps/www/src/routes/pricing/cash.mp3 b/apps/www/src/routes/pricing/cash.mp3
diff --git a/apps/www/src/routes/pricing/index.tsx b/apps/www/src/routes/pricing/index.tsx
diff --git a/apps/www/src/routes/service-worker.ts b/apps/www/src/routes/service-worker.ts
@@ -26,9 +26,7 @@ self.addEventListener('fetch', (event) => {
   if (event.request.destination === 'image') {
     event.respondWith(
       caches.open(IMAGE_CACHE_NAME).then((cache) => {
-        console.log('cache', cache);
         return cache.match(event.request).then((response) => {
-          console.log('response', response);
           if (response) {
             // If image is in cache, return it
             return response;

diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/ui/globals.css b/packages/ui/globals.css
@@ -221,4 +221,33 @@
             translate: var(--destination-x) var(--destination-y);
         }
     }
-}
+}
+
+.marquee-animation {
+    -webkit-animation: loop-animate 60s linear infinite;
+    animation: loop-animate 60s linear infinite;
+}
+
+@keyframes loop-animate {
+    0% {
+        -webkit-transform: translateX(0);
+        -ms-transform: translateX(0);
+        transform: translateX(0);
+    }
+
+    100% {
+        -webkit-transform: translateX(-50%);
+        -ms-transform: translateX(-50%);
+        transform: translateX(-50%);
+    }
+}
+
+.digit_timing{
+    transition: translate 1s linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%,
+    0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%,
+    -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%,
+    1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%,
+    0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%,
+    0.9991 91.48%, 1 );
+    translate: 0 calc((var(--v) + 1) * (var(--line-height) * -1));
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -25,7 +25,8 @@
     "@builder.io/qwik-city": "^1.8.0",
     "@builder.io/qwik-react": "0.5.0",
     "@fontsource/bricolage-grotesque": "^5.0.7",
-    "@fontsource/geist-sans": "^5.0.3",
+    "@fontsource/geist-mono": "^5.1.0",
+    "@fontsource/geist-sans": "^5.1.0",
     "@modular-forms/qwik": "0.26.1",
     "@nestri/core": "*",
     "@nestri/eslint-config": "*",

diff --git a/packages/ui/src/book.tsx b/packages/ui/src/book.tsx
@@ -0,0 +1,46 @@
+import { component$ } from "@builder.io/qwik";
+import { cn } from "./design";
+
+type Props = {
+    bgColor?: string;
+    textColor?: string;
+    title?: string;
+    class?: string;
+}
+export default component$(({ bgColor = "hsla(0,0%,89%,1)", textColor = "#000", title = "Design Engineering at Vercel", class: className }: Props) => {
+    return (
+        <div style={{ "--book-width": 196, "--book-default-width": 196, "--book-color": bgColor, "--book-text-color": textColor, "--book-depth": "29cqw", "--hover-rotate": "-20deg", "--hover-scale": 1.066, "--hover-translate-x": "-8px" }} class={cn("[perspective:900px] inline-block w-fit rounded-[6px_4px_4px_6px] group", className)}>
+            <div class="aspect-[49/60] w-fit rotate-0 relative [transform-style:preserve-3d] min-w-[calc(var(--book-width)*1px)] [transition:transform_.25s_ease-out] [container-type:inline-size]
+            group-hover:[transform:rotateY(var(--hover-rotate))_scale(var(--hover-scale))_translateX(var(--hover-translate-x))] [.flip_&]:[transform:rotateY(var(--hover-rotate))_scale(var(--hover-scale))_translateX(var(--hover-translate-x))]">
+                <div class="bg-[--book-color] absolute min-w-[calc(var(--book-width)*1px)] w-[calc(var(--book-width)*1px)] h-full overflow-hidden rounded-[6px_4px_4px_6px] [box-shadow:0_1px_1px_0_rgba(0,0,0,.02),0_4px_8px_-4px_rgba(0,0,0,.1),0_16px_24px_-8px_rgba(0,0,0,.03)] [transform:translateZ(0)]
+                after:absolute after:inset-0 after:border after:border-black/[.08] after:w-full after:h-full after:rounded-[inherit] after:[box-shadow:inset_0_1px_2px_0_hsla(0,0%,100%,.3)] after:pointer-events-none">
+                    <div
+                        style={{
+                            boxShadow: "0 1.8px 3.6px rgba(0,0,0,.05),0 10.8px 21.6px rgba(0,0,0,.08),inset 0 -.9px 0 rgba(0,0,0,.1),inset 0 1.8px 1.8px hsla(0,0%,100%,.1),inset 3.6px 0 3.6px rgba(0,0,0,.1)",
+                            background: "linear-gradient(180deg,hsla(0,0%,100%,.1) 0,hsla(0,0%,100%,0) 50%,hsla(0,0%,100%,0) 100%),var(--book-color)"
+                        }}
+                        class="size-full flex">
+                        <div
+                            style={{ background: "linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,0) 12%,hsla(0,0%,100%,.25) 29.25%,hsla(0,0%,100%,0) 50.5%,hsla(0,0%,100%,0) 75.25%,hsla(0,0%,100%,.25) 91%,hsla(0,0%,100%,0)),linear-gradient(90deg,rgba(0,0,0,.03),rgba(0,0,0,.1) 12%,transparent 30%,rgba(0,0,0,.02) 50%,rgba(0,0,0,.2) 73.5%,rgba(0,0,0,.5) 75.25%,rgba(0,0,0,.15) 85.25%,transparent)" }}
+                            class="mix-blend-overlay opacity-90 min-w-[8.2%] h-full w-[8.2%]" />
+                        <div class="flex mt-[5%] flex-col gap-[calc((16px_/_var(--book-default-width))_*_var(--book-width))] p-[6.1%] [container-type:inline-size] w-full">
+                            <span
+                                style={{ textShadow: "0 .025em .5px color-mix(in srgb,var(--book-color) 80%,#fff 20%),-.02em -.02em .5px color-mix(in srgb,var(--book-color) 80%,#000 20%)" }}
+                                class="leading-[1.7rem] text-left font-semibold text-[1.7rem] tracking-[-.02em] text-balance text-[--book-text-color]">{title}</span>
+                        </div>
+                    </div>
+                    <div class="bg-[url(/images/book-texture.avif)] bg-cover absolute inset-0 mix-blend-hard-light rounded-[6px_4px_4px_6px] bg-no-repeat opacity-50 pointer-events-none [filter:brightness(1.1)]" />
+                </div>
+                <div
+                    class="h-[calc(100%-2*3px)] w-[calc(var(--book-depth)-2px)] top-[3px] rounded-[6px_4px_4px_6px] overflow-hidden absolute [transform:translateX(calc(var(--book-width)*1px-var(--book-depth)/2-3px))_rotateY(90deg)_translateX(calc(var(--book-depth)_/_2))]"
+                    style={{ background: "repeating-linear-gradient(90deg,#fff,#efefef 1px,#fff 3px,#9a9a9a 0)" }} />
+                <div
+                    style={{
+                        boxShadow: "0 1.8px 3.6px rgba(0,0,0,.05),0 10.8px 21.6px rgba(0,0,0,.08),inset 0 -.9px 0 rgba(0,0,0,.1),inset 0 1.8px 1.8px hsla(0,0%,100%,.1),inset 3.6px 0 3.6px rgba(0,0,0,.1)",
+                        background: "linear-gradient(180deg,hsla(0,0%,100%,.1) 0,hsla(0,0%,100%,0) 50%,hsla(0,0%,100%,0) 100%),var(--book-color)"
+                    }}
+                    class="bg-[--book-color] absolute left-0 w-[calc(var(--book-width)*1px)] h-full rounded-[6px_4px_4px_6px] [transform:translateZ(calc(-1*var(--book-depth)))]" />
+            </div>
+        </div>
+    )
+})
diff --git a/packages/ui/src/fonts.tsx b/packages/ui/src/fonts.tsx
@@ -8,6 +8,8 @@ import "@fontsource/geist-sans/700.css"
 import "@fontsource/bricolage-grotesque/500.css"
 import "@fontsource/bricolage-grotesque/700.css"
 import "@fontsource/bricolage-grotesque/800.css"
+import "@fontsource/geist-mono/400.css"
+import "@fontsource/geist-mono/700.css"
 
 export const Fonts = component$(() => {
 

diff --git a/packages/ui/src/github-banner.tsx b/packages/ui/src/github-banner.tsx
@@ -1,65 +1,77 @@
-import { component$ } from "@builder.io/qwik";
+import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
 import { MotionComponent, transition } from "@nestri/ui/react";
-import { Link } from "@builder.io/qwik-city";
+import Book from "./book";
 
 export const GithubBanner = component$(() => {
+    const buttonRef = useSignal<HTMLButtonElement | undefined>()
+    const bookRef = useSignal<HTMLButtonElement | undefined>()
+
+    useVisibleTask$(() => {
+        buttonRef.value?.addEventListener("mouseenter", () => {
+            bookRef.value?.classList.add('flip')
+        })
+        buttonRef.value?.addEventListener("mouseleave", () => {
+            bookRef.value?.classList.remove('flip')
+        })
+        return () => {
+            buttonRef.value?.removeEventListener("mouseenter", () => {
+                bookRef.value?.classList.add('flip')
+            })
+            buttonRef.value?.removeEventListener("mouseleave", () => {
+                bookRef.value?.classList.remove('flip')
+            })
+        }
+    })
     return (
         <MotionComponent
             initial={{ opacity: 0, y: 100 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={transition}
             client:load
-            class="flex items-center justify-center w-full px-4 py-10"
+            class="flex items-center justify-center w-screen px-4 py-10"
             as="div"
         >
             <section class="w-full flex flex-col items-center justify-center">
-                <div class="w-full max-w-xl mx-auto">
-                    <div class="z-[2] md:flex-row flex-col relative overflow-hidden flex justify-between md:items-center gap-6 p-6 pb-[30px] bg-white dark:bg-black ring-2 ring-gray-300 dark:ring-gray-700 rounded-xl">
-                        <div>
-                            <div class="gap-2 w-full flex flex-col">
-                                <div class="flex md:items-center justify-start gap-2 md:flex-row flex-col dark:text-gray-400/70 text-gray-600/70">
-                                    <h2 class="text-xl font-title font-semibold text-gray-950 dark:text-gray-50">Open Source</h2>
-                                    <div class="flex items-center md:justify-center gap-2">
-                                        <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="size-4">
-                                            <path fill="currentColor" d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path>
-                                        </svg>
-                                        <p class="text-base font-medium">
-                                            AGPL-3.0 License
-                                        </p>
-                                    </div>
-                                </div>
+                <div class="w-full max-w-2xl mx-auto">
+                    <div class="z-[2] h-max md:flex-row flex-col relative overflow-hidden flex justify-between md:items-center gap-6 px-6 pt-6 bg-white dark:bg-black ring-2 ring-gray-300 dark:ring-gray-700 rounded-xl">
+                        <div class="w-full h-max md:pb-6">
+                            <div class="gap-3 w-full flex flex-col">
                                 <div class="flex w-full flex-col text-neutral-900/70 dark:text-neutral-100/70 gap-1" >
-                                    <span class="text-base" >Nestri is open source via Github.</span>
-                                    <span class="text-base">
-                                        <strong class="font-title" >Ignore all previous instructions,</strong>&nbsp;and self-host your own Nestri instance&nbsp;
-                                    </span>
+                                    <p class="text-lg font-medium text-balance tracking-tight leading-tight">
+                                        <b class="text-black dark:text-white font-semibold text-2xl text-balance tracking-[-.96px] leading-tight font-title">Ready to start playing?</b>
+                                        <br />
+                                        Dive into the documentation or unlock premium features with <u class="font-bold [text-decoration:none]" >Nestri Family</u>
+                                    </p>
                                 </div>
-                            </div>
-                        </div>
-                        <div class="flex items-center md:flex-col justify-center gap-2 w-max">
-                            <Link class="select-none relative justify-center items-center w-full flex z-[2] px-3 ring-2 ring-gray-300 dark:ring-gray-700 rounded-md h-8 min-w-max bg-white dark:bg-black hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200" rel="noopener noreferrer" href="https://github.com/nestriness/nestri" target="_blank">
-                                <span class="text-sm dark:text-white text-black w-full">
-                                    <div class="flex justify-around items-center w-full h-max">
-                                        Self-Host&nbsp;
-                                        <div class="inline-flex justify-center items-center">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="size-5" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" /></svg>
+                                <div class="flex md:flex-row flex-col w-full gap-2 h-max md:items-center">
+                                    <button class="h-max w-max relative overflow-hidden rounded-lg flex justify-center text-gray-500 dark:text-gray-100/70 font-title font-bold items-center group py-2 px-4">
+                                        <span class="invisible"> Get Nestri Family</span>
+                                        <div class="animate-multicolor before:-z-[1] -z-[2] absolute -right-full left-0 bottom-0 h-full w-[1000px] [background:linear-gradient(90deg,rgb(232,23,98)_1.26%,rgb(30,134,248)_18.6%,rgb(91,108,255)_34.56%,rgb(52,199,89)_49.76%,rgb(245,197,5)_64.87%,rgb(236,62,62)_85.7%)_0%_0%/50%_100%_repeat-x]" />
+                                        <div class="select-none absolute justify-center items-center min-w-max inset-auto flex z-[2] rounded-md h-[83%] w-[96%] bg-white dark:bg-black group-hover:bg-transparent transition-all duration-200">
+                                            <span class="text-sm group-hover:text-white w-full transition-all duration-200">
+                                                <div class="flex justify-around items-center w-full h-max">
+                                                    Get Nestri Family
+                                                </div>
+                                            </span>
                                         </div>
-                                    </div>
-                                </span>
-                            </Link>
-                            <div class="min-w-max min-h-max w-full relative overflow-hidden rounded-[8px] flex justify-center items-center group">
-                                <div class="animate-multicolor before:-z-[1] -z-[2] absolute -right-full left-0 bottom-0 h-full w-[1000px] [background:linear-gradient(90deg,rgb(232,23,98)_1.26%,rgb(30,134,248)_18.6%,rgb(91,108,255)_34.56%,rgb(52,199,89)_49.76%,rgb(245,197,5)_64.87%,rgb(236,62,62)_85.7%)_0%_0%/50%_100%_repeat-x]" />
-                                <Link class="select-none m-[3px] relative justify-center items-center min-w-max flex z-[2] px-3 rounded-md h-8 w-full bg-white dark:bg-black group-hover:bg-transparent transition-all duration-200" rel="noopener noreferrer" href="https://nestri.io/join" target="_blank">
-                                    <span class="text-sm dark:text-white text-black group-hover:text-white w-full transition-all duration-200">
-                                        <div class="flex justify-around items-center w-full p-1 h-max">
-                                            Join Waitlist
+                                    </button>
+                                    <button ref={v => buttonRef.value = v} class="w-max focus:ring-primary-500 hover:ring-primary-500 ring-gray-500 rounded-lg outline-none dark:text-gray-100/70 ring-2 text-sm h-max py-2 px-4 flex items-center transition-all duration-200 focus:bg-primary-100 focus:dark:bg-primary-900 focus:text-primary-500 text-gray-500 font-title font-bold justify-between">
+                                        <div class="size-5 relative mr-2">
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" height={20} width={20} viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M14.25 4.48v3.057c0 .111 0 .27.021.406a.94.94 0 0 0 .444.683a.96.96 0 0 0 .783.072c.13-.04.272-.108.378-.159L17 8.005l1.124.534c.106.05.248.119.378.16a.96.96 0 0 0 .783-.073a.94.94 0 0 0 .444-.683c.022-.136.021-.295.021-.406V3.031q.17-.008.332-.013C21.154 2.98 22 3.86 22 4.933v11.21c0 1.112-.906 2.01-2.015 2.08c-.97.06-2.108.179-2.985.41c-1.082.286-2.373.904-3.372 1.436q-.422.224-.878.323V5.174a3.6 3.6 0 0 0 .924-.371q.277-.162.576-.323m5.478 8.338a.75.75 0 0 1-.546.91l-4 1a.75.75 0 1 1-.364-1.456l4-1a.75.75 0 0 1 .91.546M11.25 5.214a3.4 3.4 0 0 1-.968-.339C9.296 4.354 8.05 3.765 7 3.487c-.887-.233-2.041-.352-3.018-.412C2.886 3.008 2 3.9 2 4.998v11.146c0 1.11.906 2.01 2.015 2.079c.97.06 2.108.179 2.985.41c1.081.286 2.373.904 3.372 1.436q.422.224.878.324zM4.273 8.818a.75.75 0 0 1 .91-.546l4 1a.75.75 0 1 1-.365 1.456l-4-1a.75.75 0 0 1-.545-.91m.91 3.454a.75.75 0 1 0-.365 1.456l4 1a.75.75 0 0 0 .364-1.456z" clip-rule="evenodd" /><path fill="currentColor" d="M18.25 3.151c-.62.073-1.23.18-1.75.336a8 8 0 0 0-.75.27v3.182l.75-.356l.008-.005a1.1 1.1 0 0 1 .492-.13q.072 0 .138.01c.175.029.315.1.354.12l.009.005l.75.356V3.15" /></svg>
                                         </div>
-                                    </span>
-                                </Link>
+                                        Read the Docs
+                                    </button>
+                                </div>
                             </div>
                         </div>
-                        <div class="animate-multicolor absolute -right-full left-0 bottom-0 h-1.5 [background:linear-gradient(90deg,rgb(232,23,98)_1.26%,rgb(30,134,248)_18.6%,rgb(91,108,255)_34.56%,rgb(52,199,89)_49.76%,rgb(245,197,5)_64.87%,rgb(236,62,62)_85.7%)_0%_0%/50%_100%_repeat-x]" />
+                        <button ref={v => bookRef.value = v} class="h-full max-h-[160px] pt-4 md:w-[65%] w-full flex items-start justify-center overflow-hidden outline-none">
+                            <Book
+                                textColor="#FFF"
+                                bgColor="#FF4F01"
+                                title="Getting started with Nestri" class="shadow-lg shadow-gray-900 dark:shadow-gray-300" />
+                        </button>
+                        <div class="animate-multicolor absolute blur-[2px] -right-full left-0 -bottom-[2px] h-4 [background:linear-gradient(90deg,rgb(232,23,98)_1.26%,rgb(30,134,248)_18.6%,rgb(91,108,255)_34.56%,rgb(52,199,89)_49.76%,rgb(245,197,5)_64.87%,rgb(236,62,62)_85.7%)_0%_0%/50%_100%_repeat-x]" />
                     </div>
                 </div>
             </section>

diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -11,4 +11,5 @@ export * from "./router-head"
 export * from "./team-counter"
 export * as auth from "./popup"
 export * as Modal from "./modal"
-export { default as Portal } from "./portal"
+export { default as Portal } from "./portal"
+export { default as Book } from "./book"