Begin working on home page

src/app/page.tsx

@@ -5,6 +5,7 @@ import Sign_In_Apple_Button from "~/components/auth/server/SignInAppleButton"
 import Title from "~/components/home/Title"
 import Avatar_Popover from "~/components/auth/AvatarPopover"
 import First_Sign_In_Form from "~/components/auth/FirstSignInForm"
+import Hero from "~/components/home/Hero"
 
 export default async function HomePage() {
   const session = await auth();
@@ -23,21 +24,20 @@ export default async function HomePage() {
   } else {
     const users_email = session.user.email ?? "";
     const users_name = session.user.name ?? "New User";
-    console.log("session:", session);
-    console.log("users_email:", users_email);
-    console.log("users_name:", users_name);
     return (
       <main className="min-h-screen">
-        <div className="w-full justify-end items-end p-3 flex flex-col">
-          <div className="my-auto flex flex-row">
-            <div className="px-4">
-              <Avatar_Popover />
-            </div>
+        < First_Sign_In_Form users_name={users_name} users_email={users_email} />
+        <div className="w-11/12 flex flex-row p-4 mx-auto">
+          < Hero />
+          <div className="w-full p-3 flex flex-row justify-end items-end">
+            <div className="my-auto flex flex-row justify-end items-end">
+              <div className="pb-1 px-4">
                 <Theme_Toggle />
               </div>
-          <div className="w-full flex flex-col justify-center items-center">
-            <h1>Welcome, {users_name.split(" ")[0]}</h1>
-            <First_Sign_In_Form users_name={users_name} users_email={users_email} />
+              <div className="pl-2">
+                <Avatar_Popover />
+              </div>
+            </div>
           </div>
         </div>
       </main>

src/components/home/Hero.tsx

@@ -0,0 +1,24 @@
+import { Outfit as FontSans } from "next/font/google";
+import { cn } from "~/lib/utils"
+
+const fontSans = FontSans({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+export default function Hero() {
+  return (
+    <div className="flex flex-col justify-start items-start">
+    <h1 className={cn("text-6xl font-bold text-center font-sans antialiased", 
+      fontSans.variable)}
+    >
+      TENANT
+    </h1>
+    <h1 className={cn("text-6xl font-bold text-center font-sans antialiased", 
+      fontSans.variable)}
+    >
+      PORTAL
+    </h1>
+    </div>
+  );
+};

src/components/ui/breadcrumb.tsx

@@ -0,0 +1,115 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:size-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

tailwind.config.ts

@@ -56,6 +56,7 @@ const config = {
       },
       fontFamily: {
         sans: ["var(--font-sans)", ...fontFamily.sans],
+        outfit: ["var(--font-outfit)", ...fontFamily.sans],
       },
       borderRadius: {
         lg: "var(--radius)",