B2B-29: Create register-company form

app/(public)/register-company/page.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { MedReportTitle } from "@/components/MedReportTitle";
+import React from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import Image from "next/image";
+import medReportBigLogo from "@/assets/medReportBigLogo.png";
+import { SubmitButton } from "@/components/submit-button";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import { companySchema } from "@/lib/validations/companySchema";
+import { CompanySubmitData } from "@/lib/types/company";
+import { submitCompanyRegistration } from "@/lib/services/register-company.service";
+import { useRouter } from "next/navigation";
+
+export default function RegisterCompany() {
+  const router = useRouter();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid, isSubmitting },
+  } = useForm({
+    resolver: yupResolver(companySchema),
+    mode: "onChange",
+  });
+
+  async function onSubmit(data: CompanySubmitData) {
+    const formData = new FormData();
+    Object.entries(data).forEach(([key, value]) => {
+      if (value !== undefined) formData.append(key, value);
+    });
+
+    try {
+      await submitCompanyRegistration(formData);
+      router.push("/register-company/success");
+    } catch (err: any) {
+      alert("Server validation error: " + err.message);
+    }
+  }
+
+  return (
+    <div className="flex flex-row border rounded-3xl border-border">
+      <div className="flex flex-col text-center py-14 px-12 w-1/2">
+        <MedReportTitle />
+        <h1 className="pt-8">Ettevõtte andmed</h1>
+        <p className="pt-2">
+          Pakkumise saamiseks palun sisesta ettevõtte andmed millega MedReport
+          kasutada kavatsed.
+        </p>
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          noValidate
+          className="flex gap-4 flex-col text-left pt-8 px-6"
+        >
+          <div>
+            <Label>Ettevõtte nimi</Label>
+            <Input {...register("companyName")} />
+          </div>
+          <div>
+            <Label>Kontaktisik</Label>
+            <Input {...register("contactPerson")} />
+          </div>
+          <div>
+            <Label>E-mail</Label>
+            <Input type="email" {...register("email")}></Input>
+          </div>
+          <div>
+            <Label>Telefon</Label>
+            <Input type="tel" {...register("phone")} />
+          </div>
+          <SubmitButton
+            disabled={!isValid || isSubmitting}
+            pendingText="Saatmine..."
+            type="submit"
+            formAction={submitCompanyRegistration}
+            className="mt-4 hover:bg-primary/90"
+          >
+            Küsi pakkumist
+          </SubmitButton>
+        </form>
+      </div>
+      <div className="w-1/2">
+        <Image src={medReportBigLogo} alt="MedReport" priority />
+      </div>
+    </div>
+  );
+}

app/(public)/register-company/success/page.tsx

@@ -0,0 +1,21 @@
+import { MedReportTitle } from "@/components/MedReportTitle";
+import Image from "next/image";
+import sucess from "@/assets/success.png";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+export default function CompanyRegistrationSuccess() {
+  return (
+    <div className="pt-2 px-16 pb-12 border rounded-3xl border-border">
+      <MedReportTitle />
+      <div className="flex flex-col items-center px-4">
+        <Image src={sucess} alt="Success" className="pt-6 pb-8" />
+        <h1 className="pb-2">Päring edukalt saadetud!</h1>
+        <p>Saadame teile esimesel võimalusel vastuse</p>
+      </div>
+      <Button className="w-full mt-8">
+        <Link href="/">Tagasi kodulehele</Link>
+      </Button>
+    </div>
+  );
+}

app/(public)/sign-in/page.tsx

@@ -0,0 +1,22 @@
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import React from "react";
+
+export default async function SignIn() {
+  return (
+    <div className="flex flex-col gap-2">
+      <Button variant="outline">
+        <Link href="/">Smart-ID</Link>
+      </Button>
+      <Button variant="outline">
+        <Link href="/">Mobiil-ID</Link>
+      </Button>
+      <Button variant="outline">
+        <Link href="/">ID-Kaart</Link>
+      </Button>
+      <Button variant="outline">
+        <Link href="/register-company">Loo ettevõtte konto</Link>
+      </Button>
+    </div>
+  );
+}

app/example/(auth-pages)/forgot-password/page.tsx

@@ -1,4 +1,4 @@
-import { forgotPasswordAction } from "@/app/actions";
+import { forgotPasswordAction } from "@/app/example/actions";
 import { FormMessage, Message } from "@/components/form-message";
 import { SubmitButton } from "@/components/submit-button";
 import { Input } from "@/components/ui/input";

app/example/(auth-pages)/sign-in/page.tsx

@@ -1,4 +1,4 @@
-import { signInAction } from "@/app/actions";
+import { signInAction } from "@/app/example/actions";
 import { FormMessage, Message } from "@/components/form-message";
 import { SubmitButton } from "@/components/submit-button";
 import { Input } from "@/components/ui/input";

app/example/(auth-pages)/sign-up/page.tsx

@@ -1,4 +1,4 @@
-import { signUpAction } from "@/app/actions";
+import { signUpAction } from "@/app/example/actions";
 import { FormMessage, Message } from "@/components/form-message";
 import { SubmitButton } from "@/components/submit-button";
 import { Input } from "@/components/ui/input";
@@ -24,7 +24,10 @@ export default async function Signup(props: {
         <h1 className="text-2xl font-medium">Sign up</h1>
         <p className="text-sm text text-foreground">
           Already have an account?{" "}
-          <Link className="text-primary font-medium underline" href="/sign-in">
+          <Link
+            className="text-primary font-medium underline"
+            href="/example/sign-in"
+          >
             Sign in
           </Link>
         </p>

app/example/globals.css

@@ -0,0 +1,69 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/example/layout.tsx

@@ -0,0 +1,77 @@
+import DeployButton from "@/components/deploy-button";
+import { EnvVarWarning } from "@/components/env-var-warning";
+import HeaderAuth from "@/components/header-auth";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import { hasEnvVars } from "@/utils/supabase/check-env-vars";
+import { Geist } from "next/font/google";
+import { ThemeProvider } from "next-themes";
+import Link from "next/link";
+import "./globals.css";
+
+const defaultUrl = process.env.VERCEL_URL
+  ? `https://${process.env.VERCEL_URL}`
+  : "http://localhost:3000";
+
+export const metadata = {
+  metadataBase: new URL(defaultUrl),
+  title: "Next.js and Supabase Starter Kit",
+  description: "The fastest way to build apps with Next.js and Supabase",
+};
+
+const geistSans = Geist({
+  display: "swap",
+  subsets: ["latin"],
+});
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className={geistSans.className} suppressHydrationWarning>
+      <body className="bg-background text-foreground">
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <main className="min-h-screen flex flex-col items-center">
+            <div className="flex-1 w-full flex flex-col gap-20 items-center">
+              <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16">
+                <div className="w-full max-w-5xl flex justify-between items-center p-3 px-5 text-sm">
+                  <div className="flex gap-5 items-center font-semibold">
+                    <Link href={"/"}>Next.js Supabase Starter</Link>
+                    <div className="flex items-center gap-2">
+                      <DeployButton />
+                    </div>
+                  </div>
+                  {!hasEnvVars ? <EnvVarWarning /> : <HeaderAuth />}
+                </div>
+              </nav>
+              <div className="flex flex-col gap-20 max-w-5xl p-5">
+                {children}
+              </div>
+
+              <footer className="w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16">
+                <p>
+                  Powered by{" "}
+                  <a
+                    href="https://supabase.com/?utm_source=create-next-app&utm_medium=template&utm_term=nextjs"
+                    target="_blank"
+                    className="font-bold hover:underline"
+                    rel="noreferrer"
+                  >
+                    Supabase
+                  </a>
+                </p>
+                <ThemeSwitcher />
+              </footer>
+            </div>
+          </main>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

app/example/page.tsx

@@ -0,0 +1,16 @@
+import Hero from "@/components/hero";
+import ConnectSupabaseSteps from "@/components/tutorial/connect-supabase-steps";
+import SignUpUserSteps from "@/components/tutorial/sign-up-user-steps";
+import { hasEnvVars } from "@/utils/supabase/check-env-vars";
+
+export default async function Home() {
+  return (
+    <>
+      <Hero />
+      <main className="flex-1 flex flex-col gap-6 px-4">
+        <h2 className="font-medium text-xl mb-4">Next steps</h2>
+        {hasEnvVars ? <SignUpUserSteps /> : <ConnectSupabaseSteps />}
+      </main>
+    </>
+  );
+}

app/example/protected/page.tsx

@@ -11,7 +11,7 @@ export default async function ProtectedPage() {
   } = await supabase.auth.getUser();
 
   if (!user) {
-    return redirect("/sign-in");
+    return redirect("/example/sign-in");
   }
 
   return (

app/example/protected/reset-password/page.tsx

@@ -1,4 +1,4 @@
-import { resetPasswordAction } from "@/app/actions";
+import { resetPasswordAction } from "@/app/example/actions";
 import { FormMessage, Message } from "@/components/form-message";
 import { SubmitButton } from "@/components/submit-button";
 import { Input } from "@/components/ui/input";

app/globals.css

@@ -3,24 +3,48 @@
 @tailwind utilities;
 
 @layer base {
+  @font-face {
+    font-family: 'Inter Display';
+    src: url('../fonts/InterDisplay-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Inter Display';
+    src: url('../fonts/InterDisplay-Medium.woff2') format('woff2');
+    font-weight: 500;
+    font-style: medium;
+    font-display: swap;
+  }
+
+  h1 {
+    @apply text-foreground text-2xl font-semibold tracking-tight
+  }
+
+  p {
+    @apply font-inter text-muted-foreground text-sm
+  }
+
   :root {
     --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    --foreground: 240 10% 4%;
     --card: 0 0% 100%;
     --card-foreground: 0 0% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
+    --popover-foreground: 356 100% 97%;
+    --primary: 145 78% 18%;
     --primary-foreground: 0 0% 98%;
     --secondary: 0 0% 96.1%;
     --secondary-foreground: 0 0% 9%;
     --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
+    --muted-foreground: 240 4% 41%;
     --accent: 0 0% 96.1%;
     --accent-foreground: 0 0% 9%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
+    --border: 240 6% 90%;
     --input: 0 0% 89.8%;
     --ring: 0 0% 3.9%;
     --radius: 0.5rem;
@@ -30,33 +54,6 @@
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
   }
-
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
 }
 
 @layer base {
@@ -66,4 +63,4 @@
   body {
     @apply bg-background text-foreground;
   }
-}
+}

app/layout.tsx

@@ -1,21 +1,22 @@
-import DeployButton from "@/components/deploy-button";
 import { EnvVarWarning } from "@/components/env-var-warning";
 import HeaderAuth from "@/components/header-auth";
-import { ThemeSwitcher } from "@/components/theme-switcher";
 import { hasEnvVars } from "@/utils/supabase/check-env-vars";
 import { Geist } from "next/font/google";
 import { ThemeProvider } from "next-themes";
-import Link from "next/link";
 import "./globals.css";
+import { Metadata } from "next";
 
 const defaultUrl = process.env.VERCEL_URL
   ? `https://${process.env.VERCEL_URL}`
   : "http://localhost:3000";
 
-export const metadata = {
+export const metadata: Metadata = {
   metadataBase: new URL(defaultUrl),
-  title: "Next.js and Supabase Starter Kit",
-  description: "The fastest way to build apps with Next.js and Supabase",
+  title: "MedReport",
+  description: "MedReport",
+  icons: {
+    icon: "icon.ico",
+  },
 };
 
 const geistSans = Geist({
@@ -41,33 +42,12 @@ export default function RootLayout({
             <div className="flex-1 w-full flex flex-col gap-20 items-center">
               <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16">
                 <div className="w-full max-w-5xl flex justify-between items-center p-3 px-5 text-sm">
-                  <div className="flex gap-5 items-center font-semibold">
-                    <Link href={"/"}>Next.js Supabase Starter</Link>
-                    <div className="flex items-center gap-2">
-                      <DeployButton />
-                    </div>
-                  </div>
                   {!hasEnvVars ? <EnvVarWarning /> : <HeaderAuth />}
                 </div>
               </nav>
               <div className="flex flex-col gap-20 max-w-5xl p-5">
                 {children}
               </div>
-
-              <footer className="w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16">
-                <p>
-                  Powered by{" "}
-                  <a
-                    href="https://supabase.com/?utm_source=create-next-app&utm_medium=template&utm_term=nextjs"
-                    target="_blank"
-                    className="font-bold hover:underline"
-                    rel="noreferrer"
-                  >
-                    Supabase
-                  </a>
-                </p>
-                <ThemeSwitcher />
-              </footer>
             </div>
           </main>
         </ThemeProvider>

app/page.tsx

@@ -1,16 +1,5 @@
-import Hero from "@/components/hero";
-import ConnectSupabaseSteps from "@/components/tutorial/connect-supabase-steps";
-import SignUpUserSteps from "@/components/tutorial/sign-up-user-steps";
-import { hasEnvVars } from "@/utils/supabase/check-env-vars";
+import { MedReportTitle } from "@/components/MedReportTitle";
 
 export default async function Home() {
-  return (
-    <>
-      <Hero />
-      <main className="flex-1 flex flex-col gap-6 px-4">
-        <h2 className="font-medium text-xl mb-4">Next steps</h2>
-        {hasEnvVars ? <SignUpUserSteps /> : <ConnectSupabaseSteps />}
-      </main>
-    </>
-  );
+  return <MedReportTitle />;
 }

assets/MedReportSmallLogo.tsx

@@ -0,0 +1,16 @@
+export const MedReportSmallLogo = () => {
+  return (
+    <svg
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.7002 11.7002C15.7296 11.7002 11.7002 15.7296 11.7002 20.7002H8.10059C8.10059 13.7414 13.7414 8.10059 20.7002 8.10059V11.7002ZM12.8994 0.299805C12.8994 7.25859 7.25859 12.8994 0.299805 12.8994V9.2998C5.27037 9.2998 9.2998 5.27037 9.2998 0.299805H12.8994Z"
+        fill="#0A5328"
+      />
+    </svg>
+  );
+};

components/MedReportTitle.tsx

@@ -0,0 +1,10 @@
+import { MedReportSmallLogo } from "@/assets/MedReportSmallLogo";
+
+export const MedReportTitle = () => (
+  <div className="flex gap-2 justify-center">
+    <MedReportSmallLogo />
+    <span className="text-foreground text-lg font-semibold tracking-tighter">
+      MedReport
+    </span>
+  </div>
+);

components/header-auth.tsx

@@ -1,4 +1,4 @@
-import { signOutAction } from "@/app/actions";
+import { signOutAction } from "@/app/example/actions";
 import { hasEnvVars } from "@/utils/supabase/check-env-vars";
 import Link from "next/link";
 import { Badge } from "./ui/badge";
@@ -41,7 +41,7 @@ export default async function AuthButton() {
               disabled
               className="opacity-75 cursor-none pointer-events-none"
             >
-              <Link href="/sign-up">Sign up</Link>
+              <Link href="example/sign-up">Sign up</Link>
             </Button>
           </div>
         </div>
@@ -62,9 +62,6 @@ export default async function AuthButton() {
       <Button asChild size="sm" variant={"outline"}>
         <Link href="/sign-in">Sign in</Link>
       </Button>
-      <Button asChild size="sm" variant={"default"}>
-        <Link href="/sign-up">Sign up</Link>
-      </Button>
     </div>
   );
 }

components/ui/button.tsx

@@ -5,11 +5,12 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-xl text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground font-inter font-medium hover:bg-primary/90",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
@@ -30,7 +31,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
+  }
 );
 
 export interface ButtonProps
@@ -49,7 +50,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       />
     );
-  },
+  }
 );
 Button.displayName = "Button";
 

components/ui/label.tsx

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  "text-sm text-foreground font-inter font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
 
 const Label = React.forwardRef<

lib/services/register-company.service.ts

@@ -0,0 +1,31 @@
+"use server";
+
+import * as yup from "yup";
+import { companySchema } from "@/lib/validations/companySchema";
+
+export async function submitCompanyRegistration(formData: FormData) {
+  const data = {
+    companyName: formData.get("companyName")?.toString() || "",
+    contactPerson: formData.get("contactPerson")?.toString() || "",
+    email: formData.get("email")?.toString() || "",
+    phone: formData.get("phone")?.toString() || "",
+  };
+
+  try {
+    await companySchema.validate(data, { abortEarly: false });
+
+    console.log("Valid data:", data);
+  } catch (validationError) {
+    if (validationError instanceof yup.ValidationError) {
+      const errors = validationError.inner.map((err) => ({
+        path: err.path,
+        message: err.message,
+      }));
+      throw new Error(
+        "Validation failed: " +
+          errors.map((e) => `${e.path}: ${e.message}`).join(", ")
+      );
+    }
+    throw validationError;
+  }
+}

lib/types/company.ts

@@ -0,0 +1,6 @@
+export interface CompanySubmitData {
+  companyName: string;
+  contactPerson: string;
+  email: string;
+  phone?: string;
+}

lib/validations/companySchema.ts

@@ -0,0 +1,8 @@
+import * as yup from "yup";
+
+export const companySchema = yup.object({
+  companyName: yup.string().required("Company name is required"),
+  contactPerson: yup.string().required("Contact person is required"),
+  email: yup.string().email("Invalid email").required("Email is required"),
+  phone: yup.string().optional(),
+});

package.json

@@ -25,14 +25,17 @@
     "xml-js": "^1.6.11"
   },
   "devDependencies": {
+    "@hookform/resolvers": "^5.0.1",
     "@types/node": "22.10.2",
     "@types/react": "^19.0.2",
     "@types/react-dom": "19.0.2",
+    "react-hook-form": "^7.57.0",
     "postcss": "8.4.49",
     "supabase": "^2.23.4",
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "3.4.17",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "5.7.2"
+    "typescript": "5.7.2",
+    "yup": "^1.6.1"
   }
 }

tailwind.config.ts

@@ -72,6 +72,9 @@ const config = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      fontFamily: {
+        inter: ['"Inter Display"', "Geist"],
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],