feat(www): Updated early access form

alifarooq9 · Apr 9, 2024 · 7c265e3 · 7c265e3
1 parent b76a671
commit 7c265e3
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 56 deletions.
diff --git a/.../www/src/components/early-access-form.tsx → ...p/(app)/_components/early-access-form.tsx b/.../www/src/components/early-access-form.tsx → ...p/(app)/_components/early-access-form.tsx
@@ -13,7 +13,7 @@ import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { useMutation } from "@tanstack/react-query";
-import { joinEarlyAccessAction } from "@/server/actions";
+import { joinEarlyAccessAction } from "@/server/actions/early-access";
 import { Icons } from "@/components/icons";
 import { toast } from "sonner";
 
@@ -62,7 +62,7 @@ export function EarlyAccessForm() {
         <Form {...form}>
             <form
                 onSubmit={form.handleSubmit(onSubmit)}
-                className="w-full max-w-sm space-y-2"
+                className="w-full space-y-2"
             >
                 <FormField
                     control={form.control}
@@ -72,7 +72,7 @@ export function EarlyAccessForm() {
                             <FormControl>
                                 <Input
                                     placeholder="Name"
-                                    className="bg-background"
+                                    className="h-12 bg-background"
                                     {...field}
                                 />
                             </FormControl>
@@ -88,7 +88,7 @@ export function EarlyAccessForm() {
                             <FormControl>
                                 <Input
                                     placeholder="Email"
-                                    className="bg-background"
+                                    className="h-12 bg-background"
                                     {...field}
                                 />
                             </FormControl>
@@ -100,7 +100,8 @@ export function EarlyAccessForm() {
                     <Button
                         disabled={isPending}
                         type="submit"
-                        className="w-full gap-2"
+                        className="h-12 w-full gap-2"
+                        size="lg"
                     >
                         {isPending ? (
                             <Icons.loader className="h-4 w-4" />

diff --git a/apps/www/src/app/(app)/_components/mobile-nav.tsx b/apps/www/src/app/(app)/_components/mobile-nav.tsx
@@ -23,6 +23,7 @@ export function MobileNav() {
                     className="flex sm:hidden"
                 >
                     <Icons.hamburger className="h-4 w-4" />
+                    <span className="sr-only">menu</span>
                 </Button>
             </SheetTrigger>
             <SheetContent side="left" className="pr-0">

diff --git a/apps/www/src/app/(app)/page.tsx b/apps/www/src/app/(app)/page.tsx
@@ -5,68 +5,92 @@ import { siteUrls } from "@/config/urls";
 import { buttonVariants } from "@/components/ui/button";
 import { Icons } from "@/components/icons";
 import { HighlightTabs } from "@/app/(app)/_components/highlight-tabs";
+import { EarlyAccessForm } from "@/app/(app)/_components/early-access-form";
+import Balancer from "react-wrap-balancer";
+import { Background } from "@/components/background";
 
 export default async function HomePage() {
     const repoStars = await getRepoStars();
 
     return (
-        <div className="container flex flex-col items-center justify-center gap-4 py-20">
-            <Link
-                href={siteUrls.twitter}
-                className="flex items-center space-x-2 rounded-md bg-secondary px-3 py-2 text-sm hover:bg-secondary/80"
-            >
-                <span>🎉</span>
-                <span className="font-medium">
-                    RapidLaunch is in development. Follow our progress on 𝕏
-                    (formally Twitter)
-                </span>
-                <ExternalLinkIcon className="h-4 w-4 flex-shrink-0" />
-            </Link>
-            <Balance
-                as="h1"
-                className="text-center font-heading text-3xl font-bold sm:text-4xl sm:leading-tight md:text-5xl md:leading-tight"
-            >
-                Rapidly launch your MVP with Beautiful Starterkits, Blocks, and
-                more.
-            </Balance>
-            <Balance
-                as="p"
-                className="text-center text-muted-foreground sm:text-xl"
-            >
-                Elevate your development game with Rapidlaunch! Launch your apps
-                faster with our SaaS starterkits, components, building guides,
-                and more. Customizable. Open Source.
-            </Balance>
-            <div className="flex items-center gap-4">
-                <Link
-                    href={siteUrls.docs}
-                    className={buttonVariants({
-                        className: "flex items-center gap-2",
-                    })}
-                >
-                    Early Access
-                </Link>
+        <>
+            <section className="container flex flex-col items-center justify-center gap-4 py-20">
                 <Link
-                    href={siteUrls.github}
-                    className={buttonVariants({
-                        className: "flex items-center",
-                        variant: "outline",
-                    })}
+                    href={siteUrls.twitter}
+                    className="flex items-center space-x-2 rounded-md bg-secondary px-3 py-2 text-sm hover:bg-secondary/80"
                 >
-                    <Icons.gitHub className="mr-2 h-4 w-4" />
-                    Github -
-                    <span className="ml-1 flex items-center font-normal text-muted-foreground">
-                        {repoStars}
+                    <span>🎉</span>
+                    <span className="font-medium">
+                        RapidLaunch is in development. Follow our progress on 𝕏
+                        (formally Twitter)
                     </span>
+                    <ExternalLinkIcon className="h-4 w-4 flex-shrink-0" />
                 </Link>
-            </div>
+                <Balance
+                    as="h1"
+                    className="text-center font-heading text-3xl font-bold sm:text-4xl sm:leading-tight md:text-5xl md:leading-tight"
+                >
+                    Rapidly launch your MVP with Beautiful Starterkits, Blocks,
+                    and more.
+                </Balance>
+                <Balance
+                    as="p"
+                    className="text-center text-muted-foreground sm:text-xl"
+                >
+                    Elevate your development game with Rapidlaunch! Launch your
+                    apps faster with our SaaS starterkits, components, building
+                    guides, and more. Customizable. Open Source.
+                </Balance>
+                <div className="flex items-center gap-4">
+                    <Link
+                        href={siteUrls.earlyAccess}
+                        className={buttonVariants({
+                            className: "flex items-center gap-2",
+                        })}
+                    >
+                        Early Access
+                    </Link>
+                    <Link
+                        href={siteUrls.github}
+                        className={buttonVariants({
+                            className: "flex items-center",
+                            variant: "outline",
+                        })}
+                    >
+                        <Icons.gitHub className="mr-2 h-4 w-4" />
+                        Github -
+                        <span className="ml-1 flex items-center font-normal text-muted-foreground">
+                            {repoStars}
+                        </span>
+                    </Link>
+                </div>
+
+                <HighlightTabs className="mt-36" />
+            </section>
 
-            <HighlightTabs className="mt-36" />
-        </div>
+            <section
+                id="early-access"
+                className="relative border-y border-border bg-muted/30 py-36"
+            >
+                <Background>
+                    <div className="container flex max-w-xl flex-col items-center space-y-8">
+                        <Balancer
+                            as="h2"
+                            className="w-full text-center font-heading text-4xl font-bold"
+                        >
+                            Join the Early Access List and get notified when we
+                            launch!
+                        </Balancer>
+
+                        <EarlyAccessForm />
+                    </div>
+                </Background>
+            </section>
+        </>
     );
 }
 
-export async function getRepoStars() {
+async function getRepoStars() {
     const response = await fetch(
         "https://api.github.com/repos/afarooq-oss/rapidlaunch",
         {
@@ -82,7 +106,5 @@ export async function getRepoStars() {
         ? Number((data as { stargazers_count?: string }).stargazers_count)
         : 0;
 
-    console.log(data);
-
     return stars;
 }
diff --git a/apps/www/src/components/background.tsx b/apps/www/src/components/background.tsx
@@ -0,0 +1,48 @@
+interface BackgroundProps {
+    children: React.ReactNode;
+}
+
+export function Background({ children }: BackgroundProps) {
+    return (
+        <>
+            <div className="absolute left-0 top-0 -z-50 h-full w-full overflow-hidden">
+                <div className="sticky left-0 top-0 h-full w-full overflow-hidden">
+                    <div className="absolute inset-0 z-[-1] bg-muted-foreground/40" />
+                    <div className="absolute left-[--x] top-[--y] z-[-1] h-56 w-56 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-radial from-muted-foreground/50 from-0% to-transparent to-90% blur-md" />
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="100%"
+                        height="100%"
+                    >
+                        <defs>
+                            <pattern
+                                id="dotted-pattern"
+                                width="16"
+                                height="16"
+                                patternUnits="userSpaceOnUse"
+                            >
+                                <circle cx="2" cy="2" r="1" fill="black" />
+                            </pattern>
+                            <mask id="dots-mask">
+                                <rect width="100%" height="100%" fill="white" />
+                                <rect
+                                    width="100%"
+                                    height="100%"
+                                    fill="url(#dotted-pattern)"
+                                />
+                            </mask>
+                        </defs>
+                        <rect
+                            width="100%"
+                            height="100%"
+                            fill="hsl(var(--background))"
+                            mask="url(#dots-mask)"
+                        />
+                    </svg>
+                </div>
+            </div>
+
+            {children}
+        </>
+    );
+}
diff --git a/apps/www/src/config/urls.ts b/apps/www/src/config/urls.ts
@@ -6,4 +6,5 @@ export const siteUrls = {
     docs: "/docs",
     twitter: "https://twitter.com/AliFarooqDev",
     github: "/gh",
+    earlyAccess: "/#early-access",
 } as const;
diff --git a/apps/www/src/server/actions.ts → apps/www/src/server/actions/early-access.ts b/apps/www/src/server/actions.ts → apps/www/src/server/actions/early-access.ts