feat(web): add biolnk landing page (#115)

* chore(gamut): add '2xl' variant for input and button components

* chore(web): add assets for meet biolnk section

* chore(web): update tailwind config and global styles

* feat(web): add landing page

* chore(web): update pckg && tweeks

* feat(web): add claim link logic

* feat(studio): add signup username autocomplete from query string

apps/studio/src/pages/signup.tsx

@@ -1,24 +1,51 @@
 import Link from "~components/common/Link";
-import Form from "~components/common/Form";
 import withAuthCheck from "~/utils/HOC/withAuthCheck";
+import { useForm } from "react-hook-form";
+import { vestResolver } from "@hookform/resolvers/vest";
+import { useRouter } from "next/router";
 import { Button, Input, Text } from "@biolnk/gamut";
 import { SigningLayout } from "~/components/layouts";
 import { useSupabase } from "~/lib/supabase";
 import { SIGNUP_SCHEMA } from "~/data/validations";
 import type { SignUpDto } from "~/types";
+import { useSafeLayoutEffect } from "@biolnk/core";
 
 function SignUpPage() {
   const DEFAULT_FORM_VALUES: SignUpDto = {
     email: "",
     username: "",
     password: "",
   };
+
+  const { query } = useRouter();
   const { signUpWithEmail } = useSupabase();
+  const {
+    register,
+    formState: { errors, isValid, isDirty, isSubmitting },
+    handleSubmit,
+    reset,
+    setValue,
+  } = useForm<SignUpDto>({
+    defaultValues: DEFAULT_FORM_VALUES,
+    resolver: vestResolver(SIGNUP_SCHEMA),
+    mode: "all",
+  });
 
   const handleSignUp = async (formData: SignUpDto) => {
     await signUpWithEmail(formData);
+    reset(DEFAULT_FORM_VALUES);
   };
 
+  useSafeLayoutEffect(() => {
+    if (query.username) {
+      setValue("username", query.username as string, {
+        shouldDirty: true,
+        shouldTouch: true,
+        shouldValidate: true,
+      });
+    }
+  }, [query]);
+
   return (
     <SigningLayout
       title="Sign Up"
@@ -37,80 +64,70 @@ function SignUpPage() {
         canonical: "https://app.biolnk.me/signup",
       }}
     >
-      <Form<SignUpDto>
-        onSubmit={handleSignUp}
-        defaultValues={DEFAULT_FORM_VALUES}
-        validationSchema={SIGNUP_SCHEMA}
-        resetOnSubmit
-      >
-        {({
-          register,
-          formState: { errors, isSubmitting, isValid, isDirty },
-        }) => (
-          <>
-            <Input
-              id="email-address"
-              type="email"
-              title="Please enter a valid email address!"
-              label="Email address"
-              srOnlyLabel
-              autoComplete="email"
-              placeholder="Email address"
-              borderless
-              error={errors.email?.message}
-              {...register("email")}
-            />
-            <Input
-              id="username"
-              type="text"
-              title="Please enter a username!"
-              label="Username"
-              srOnlyLabel
-              leftAddon="biolnk.me/"
-              tightAddonSpace
-              autoComplete="username"
-              placeholder="username"
-              borderless
-              error={errors.username?.message}
-              {...register("username")}
-            />
-            <Input
-              id="password"
-              type="password"
-              title="Please enter a password!"
-              label="Password"
-              srOnlyLabel
-              autoComplete="new-password"
-              placeholder="Password"
-              borderless
-              error={errors.password?.message}
-              {...register("password")}
-            />
-            <Button
-              type="submit"
-              className="mt-9"
-              size="md"
-              variant="primary"
-              block
-              uppercase
-              loading={isSubmitting}
-              disabled={isDirty && !isValid}
-            >
-              Sign Up With Email
-            </Button>
-            <Text
-              as="span"
-              size="xs"
-              variant="lighter"
-              spacing="wide"
-              className="mt-3"
-            >
-              By creating an account you are agreeing to our Terms and
-              Conditions and Privacy Policy
-            </Text>
-          </>
-        )}
-      </Form>
+      <form onSubmit={handleSubmit(handleSignUp)}>
+        <>
+          <Input
+            id="email-address"
+            type="email"
+            title="Please enter a valid email address!"
+            label="Email address"
+            srOnlyLabel
+            autoComplete="email"
+            placeholder="Email address"
+            borderless
+            error={errors.email?.message}
+            {...register("email")}
+          />
+          <Input
+            id="username"
+            type="text"
+            title="Please enter a username!"
+            label="Username"
+            srOnlyLabel
+            leftAddon="biolnk.me/"
+            tightAddonSpace
+            autoComplete="username"
+            placeholder="username"
+            borderless
+            error={errors.username?.message}
+            {...register("username")}
+          />
+          <Input
+            id="password"
+            type="password"
+            title="Please enter a password!"
+            label="Password"
+            srOnlyLabel
+            autoComplete="new-password"
+            placeholder="Password"
+            borderless
+            error={errors.password?.message}
+            {...register("password")}
+          />
+          <Button
+            type="submit"
+            className="mt-9"
+            size="md"
+            variant="primary"
+            block
+            uppercase
+            loading={isSubmitting}
+            disabled={isDirty && !isValid}
+          >
+            Sign Up With Email
+          </Button>
+          <Text
+            as="span"
+            size="xs"
+            variant="lighter"
+            spacing="wide"
+            className="mt-3"
+          >
+            By creating an account you are agreeing to our Terms and Conditions
+            and Privacy Policy
+          </Text>
+        </>
+      </form>
     </SigningLayout>
   );
 }

apps/web/README.md

@@ -18,4 +18,5 @@ The `web` is where the landing page lives, along with all users generated pages.
 `├────`[`assets`](./src/assets) — static files<br>
 `├────`[`components`](./src/components) — common React components, UI building blocks<br>
 `├────`[`lib`](./src/lib) — configuration for external libs<br>
-`└────`[`pages`](./src/pages) — application views and router<br>
+`├────`[`pages`](./src/pages) — application views and router<br>
+`└────`[`services`](./src/services) — network calls and business logic<br>

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biolnk/web",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",
@@ -15,6 +15,7 @@
     "@biolnk/core": "*",
     "@biolnk/gamut": "*",
     "@supabase/supabase-js": "^1.28.4",
+    "framer-motion": "^5.6.0",
     "next": "^12.0.7",
     "next-seo": "^4.28.1",
     "react": "17.0.2",

apps/web/src/components/landing/FeatureCard.tsx

@@ -0,0 +1,24 @@
+import { Heading } from "@biolnk/gamut";
+import type { FC } from "react";
+
+export interface FeatureCardProps {
+  title: string;
+  description: string;
+}
+
+/**
+ * @TODO Improve feature cards according to the design
+ */
+const FeatureCard: FC<FeatureCardProps> = ({ title, description }) => {
+  return (
+    <div className="bg-mauve-50 p-8 rounded-3xl shadow-xl">
+      <Heading as="h3" className="!text-3xl font-medium pb-6">
+        {title}
+      </Heading>
+
+      <p className="text-lg text-mauveDark-600">{description}</p>
+    </div>
+  );
+};
+
+export default FeatureCard;

apps/web/src/components/landing/Features.tsx

@@ -0,0 +1,39 @@
+import { Container, Text } from "@biolnk/gamut";
+import type { FC } from "react";
+
+/**
+ * @TODO Add back the features once we get the cards improvemts
+ */
+const Features: FC = () => {
+  return (
+    <section className="bg-mauve-300">
+      <Container as="div" className="pt-32 pb-28 flex flex-col items-center">
+        <h2 className="text-7xl bg-clip-text text-transparent bg-gradient-btn-active font-semibold max-w-6xl text-center pb-8">
+          The link between you and your audience.
+        </h2>
+        <Text center className="xs:!text-xl !text-lg max-w-4xl">
+          With Biolnk you can create pages for things like blogs, merch,
+          multimedia and so much more. Everything included, no subscription or
+          upgrades needed.
+        </Text>
+
+        {/* <div className="grid lg:grid-cols-3 md:grid-cols-2 w-full xl:gap-8 gap-4 mt-20">
+          <FeatureCard
+            title="Add all your links"
+            description="Biolnk makes it super simple to create and manage new links, allowing your audience to engage with your online content through a custom page that reflects your brand."
+          />
+          <FeatureCard
+            title="Your own look and feel"
+            description="Customize your biolink page to fit your brand with your logo, the right colors, background image and much more. You get one link you can share anywhere, on platforms."
+          />
+          <FeatureCard
+            title="Effortless integrations"
+            description="Has a plug and play feel, easily integrate with all your favorite tools and APIs including Google Analytics and more."
+          />
+        </div> */}
+      </Container>
+    </section>
+  );
+};
+
+export default Features;