feat: update landing page and add new library and scan pages

- Refactor landing page content and links for better user experience.
- Introduce a new library page to display disease information with filtering and modal details.
- Add a scan page for users to upload images for diagnosis with a preview modal.
- Enhance login and registration pages with automatic navigation to the dashboard.
- Integrate vite-tsconfig-paths for improved path resolution in Vite configuration.

apps/web/src/components/ui/button.tsx

@@ -1,25 +1,25 @@
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import type { ButtonHTMLAttributes } from 'react';
-import { cn } from '@/lib/utils';
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ButtonHTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50',
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        outline: 'border border-border bg-transparent hover:bg-muted',
-        ghost: 'hover:bg-muted',
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        outline: "border border-border bg-transparent hover:bg-muted",
+        ghost: "hover:bg-[#48A111] hover:text-primary-foreground hover:rounded-[50px]",
       },
       size: {
-        default: 'h-10 px-4 py-2',
-        lg: 'h-12 rounded-lg px-6',
+        default: "h-10 px-4 py-2",
+        lg: "h-12 rounded-lg px-6",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
   },
 );
@@ -29,8 +29,19 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
     asChild?: boolean;
   };
 
-export function Button({ className, variant, size, asChild = false, ...props }: ButtonProps) {
-  const Comp = asChild ? Slot : 'button';
+export function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot : "button";
 
-  return <Comp className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+  return (
+    <Comp
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
 }

apps/web/src/components/ui/modal-footer.tsx

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+
+type Props = {
+  children?: ReactNode;
+  className?: string;
+};
+
+export function ModalFooter({ children, className }: Props) {
+  return <div className={`mt-4 text-right ${className ?? ''}`}>{children}</div>;
+}
+
+export default ModalFooter;

apps/web/src/components/ui/modal-header.tsx

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+
+type Props = {
+  children?: ReactNode;
+  right?: ReactNode;
+  className?: string;
+};
+
+export function ModalHeader({ children, right, className }: Props) {
+  return (
+    <div className={`flex items-start justify-between ${className ?? ''}`}>
+      <div>{children}</div>
+      {right && <div>{right}</div>}
+    </div>
+  );
+}
+
+export default ModalHeader;

apps/web/src/components/ui/modal.tsx

@@ -0,0 +1,82 @@
+import React, { ReactNode, useEffect, useRef } from "react";
+import { ModalHeader } from "./modal-header";
+import { ModalFooter } from "./modal-footer";
+
+type Size = "sm" | "md" | "lg" | "full";
+
+const sizeClass: Record<Size, string> = {
+  sm: "max-w-xl",
+  md: "max-w-3xl",
+  lg: "max-w-5xl",
+  full: "max-w-full h-full",
+};
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  title?: string;
+  footer?: ReactNode;
+  headerRight?: ReactNode;
+  size?: Size;
+  closeOnBackdrop?: boolean;
+  className?: string;
+};
+
+export function Modal({
+  open,
+  onClose,
+  children,
+  title,
+  footer,
+  headerRight,
+  size = "md",
+  closeOnBackdrop = true,
+  className,
+}: Props) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (open) window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  useEffect(() => {
+    if (open) {
+      containerRef.current?.focus();
+    }
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div
+        className="absolute inset-0 bg-black/40"
+        onClick={() => closeOnBackdrop && onClose()}
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        tabIndex={-1}
+        ref={containerRef}
+        className={`relative z-10 w-full ${sizeClass[size]} rounded-lg bg-white p-6 shadow-lg ${className ?? ""}`}
+      >
+        <ModalHeader right={headerRight}>
+          {title ? <h2 className="text-lg font-semibold">{title}</h2> : null}
+        </ModalHeader>
+        <div className="mt-4">{children}</div>
+        <ModalFooter>
+          {footer ?? (
+            <button onClick={onClose} className="px-4 py-2 rounded bg-gray-200">
+              Tutup
+            </button>
+          )}
+        </ModalFooter>
+      </div>
+    </div>
+  );
+}