chore: add style classes + fonts

Author: vignesh-gupta

apps/web/app/(public)/_components/hero-section.tsx

@@ -7,8 +7,8 @@ import { AnimatedShinyText } from "@clikz/ui/components/ui/animated-shiny-text";
 import { Button } from "@clikz/ui/components/ui/button";
 
 import { APP_DOMAIN } from "~/lib/constants";
-import { inter } from "~/lib/utils/font";
 import { DEFAULT_LOGIN_REDIRECT } from "~/routes";
+import { inter } from "~/styles/font";
 
 const HeroSection = () => {
   return (

apps/web/app/(public)/layout.tsx

@@ -3,7 +3,7 @@ import { PropsWithChildren } from "react";
 import { cn } from "@clikz/ui/lib/utils";
 
 import { auth } from "~/auth";
-import { urbanist } from "~/lib/utils/font";
+import { urbanist } from "~/styles/font";
 
 import FooterSection from "./_components/footer-section";
 import Navbar from "./_components/navbar";

apps/web/components/max-width-container.tsx

@@ -7,23 +7,23 @@ type MaxWidthContainerProps = PropsWithChildren<{
   className?: string;
   containerClassName?: string;
   showPattern?: boolean;
+  size?: number;
 }>;
 
 const MaxWidthContainer: FC<MaxWidthContainerProps> = ({
   children,
   className,
   showPattern,
   containerClassName,
+  size = 20,
 }) => {
   return (
     <section className={cn("relative overflow-hidden", containerClassName)}>
       {showPattern && (
         <GridPattern
-          width={20}
-          height={20}
-          className={cn(
-            "[mask-image:linear-gradient(to_bottom,white,white,transparent)] opacity-10 stroke-gray-950/40"
-          )}
+          width={size}
+          height={size}
+          className="[mask-image:linear-gradient(to_bottom,white,white,transparent)] opacity-10 stroke-gray-950/40"
         />
       )}
       <div className={cn("max-w-screen-xl mx-auto px-4 z-20", className)}>

apps/web/lib/utils/font.ts

@@ -27,6 +27,7 @@
     "@vercel/functions": "^1.5.2",
     "@vercel/sdk": "^1.3.1",
     "bcryptjs": "^2.4.3",
+    "geist": "^1.3.1",
     "hono": "^4.6.14",
     "imagekit": "^6.0.0",
     "imagekitio-next": "^1.0.1",

apps/web/package.json

@@ -0,0 +1,27 @@
+import { Inter, Urbanist } from "next/font/google";
+import localFont from "next/font/local";
+
+import { GeistMono } from "geist/font/mono";
+
+export const inter = Inter({ subsets: ["latin"] });
+export const urbanist = Urbanist({
+  subsets: ["latin"],
+});
+
+export const satoshi = localFont({
+  src: "./Satoshi-Variable.woff2",
+  variable: "--font-satoshi",
+  weight: "300 900",
+  display: "swap",
+  style: "normal",
+});
+
+// export const geistMono = Geist_Mono({
+//   variable: "--font-geist-mono",
+//   weight: "400",
+//   display: "swap",
+//   style: "normal",
+//   subsets: ["latin"],
+// });
+
+export const geistMono = GeistMono;