Skip to content

Commit

Permalink
🐛 fix: Change up FREE tier CTA
Browse files Browse the repository at this point in the history
  • Loading branch information
@wanjohiryan
wanjohiryan committed Dec 26, 2024
1 parent c39866a commit c6c7b6a
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 8 deletions.
35 changes: 28 additions & 7 deletions apps/www/src/routes/pricing/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { component$, useSignal } from "@builder.io/qwik";
import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
import { TitleSection, MotionComponent, transition } from "@nestri/ui/react";
import { NavBar, Footer, Book } from "@nestri/ui"
import { cn } from "@nestri/ui/design";
Expand Down Expand Up @@ -65,6 +65,26 @@ export default component$(() => {
const audioUrl = new URL('./cash.mp3', import.meta.url).href
const audio = useSignal<HTMLAudioElement | undefined>()

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 (
<>
<NavBar />
Expand Down Expand Up @@ -97,7 +117,7 @@ export default component$(() => {
<div class="flex flex-col w-full">
<p class="text-[4rem] leading-[1] font-medium font-title"> Free </p>
{/**FIXME: Add the link to the docs here */}
<button class="h-[154px] w-full flex items-start pt-4 justify-center overflow-hidden">
<button ref={v => bookRef.value = v} class="h-[154px] w-full flex items-start pt-4 justify-center overflow-hidden">
<Book textColor="#FFF"
bgColor="#FF4F01"
title="Getting started with Nestri" class="shadow-lg shadow-gray-900 dark:shadow-gray-300" />
Expand Down Expand Up @@ -193,11 +213,12 @@ export default component$(() => {
</div>
</div>
</div>
<button class="bg-white group my-4 max-w-full dark:bg-black text-gray-900/70 hover:ring-primary-500 rounded-lg outline-none dark:text-gray-100/70 ring-2 text-sm h-max ring-gray-300 dark:ring-gray-700 py-2 px-4 flex items-center hover:bg-gray-100 dark:hover:bg-gray-900 transition-all duration-200 focus:bg-primary-100 dark:focus:bg-primary-900 focus:text-primary-500 focus:ring-primary-500 font-title font-bold justify-between">
<p class="overflow-hidden overflow-ellipsis max-w-[210px] text-left whitespace-nowrap font-mono">curl -fsSL https://nestri.io/install | bash</p>
<div class="ml-auto flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="group-focus:hidden size-6 flex-shrink-0" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M15.24 2h-3.894c-1.764 0-3.162 0-4.255.148c-1.126.152-2.037.472-2.755 1.193c-.719.721-1.038 1.636-1.189 2.766C3 7.205 3 8.608 3 10.379v5.838c0 1.508.92 2.8 2.227 3.342c-.067-.91-.067-2.185-.067-3.247v-5.01c0-1.281 0-2.386.118-3.27c.127-.948.413-1.856 1.147-2.593s1.639-1.024 2.583-1.152c.88-.118 1.98-.118 3.257-.118h3.07c1.276 0 2.374 0 3.255.118A3.6 3.6 0 0 0 15.24 2" /><path fill="currentColor" d="M6.6 11.397c0-2.726 0-4.089.844-4.936c.843-.847 2.2-.847 4.916-.847h2.88c2.715 0 4.073 0 4.917.847S21 8.671 21 11.397v4.82c0 2.726 0 4.089-.843 4.936c-.844.847-2.202.847-4.917.847h-2.88c-2.715 0-4.073 0-4.916-.847c-.844-.847-.844-2.21-.844-4.936z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="group-focus:block hidden text-green-500 size-6 flex-shrink-0" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" /></svg>
<button ref={v => buttonRef.value = v} class="my-4 bg-white dark:bg-black 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">
Read the Docs
<div class="size-5 relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
<path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
</svg>
</div>
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/react/hero-section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export function ReactHeroSection({ children }: Props) {
viewport={{ once: true }}
className="dark:text-gray-50/70 text-gray-950/70 text-lg font-normal tracking-tight sm:text-xl"
>
Nestri is a cloud gaming platform that lets you play games on your own terms — invite friends to join your gaming sessions, share your game library, and take even more control by hosting your own server.
Nestri is an open-source cloud gaming platform that lets you play games on your own terms — invite friends to join your gaming sessions, share your game library, and take even more control by hosting on your own server.
</motion.p>
<motion.div
initial={{
Expand Down

0 comments on commit c6c7b6a

Please sign in to comment.