Merge pull request #12 from ArnavSingh76533/copilot/update-front-page-ui-design

components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/cn'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

components/ui/card.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/cn'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('px-6', className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('flex items-center px-6', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+}

components/ui/input.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/cn'
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:ring-2 focus-visible:ring-primary-500/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

components/ui/label.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+
+import { cn } from '@/lib/cn'
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { cn } from '@/lib/cn'
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-white/[0.02]', className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

components/ui/switch.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import * as React from 'react'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+
+import { cn } from '@/lib/cn'
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      className={cn(
+        'peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 data-[state=unchecked]:bg-white/10',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        className={
+          'pointer-events-none block size-4 rounded-full ring-0 transition-transform bg-white data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+        }
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

lib/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package-lock.json

@@ -5,6 +5,12 @@
   "packages": {
     "": {
       "dependencies": {
+        "@radix-ui/react-label": "^2.1.8",
+        "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-switch": "^1.2.6",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.561.0",
         "next": "14.2.10",
         "react": "^18.2.0",
         "react-beautiful-dnd": "^13.1.1",
@@ -16,6 +22,7 @@
         "socket.io": "^4.7.2",
         "socket.io-client": "^4.7.2",
         "swr": "^2.2.4",
+        "tailwind-merge": "^3.4.0",
         "unique-names-generator": "^4.7.1"
       },
       "devDependencies": {
@@ -950,6 +957,261 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.8.tgz",
+      "integrity": "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+      "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
+      "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz",
+      "integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz",
@@ -1147,7 +1409,7 @@
       "version": "18.2.18",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz",
       "integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/react": "*"
@@ -1885,6 +2147,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/classnames": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.0.tgz",
@@ -1900,6 +2174,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -4085,6 +4368,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.561.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.561.0.tgz",
+      "integrity": "sha512-Y59gMY38tl4/i0qewcqohPdEbieBy7SovpBL9IFebhc2mDd8x4PZSOsiFRkpPcOq6bj1r/mjH/Rk73gSlIJP2A==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/make-error": {
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
@@ -5655,6 +5947,16 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz",

package.json

@@ -7,6 +7,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.561.0",
     "next": "14.2.10",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
@@ -18,6 +24,7 @@
     "socket.io": "^4.7.2",
     "socket.io-client": "^4.7.2",
     "swr": "^2.2.4",
+    "tailwind-merge": "^3.4.0",
     "unique-names-generator": "^4.7.1"
   },
   "devDependencies": {
@@ -37,4 +44,4 @@
     "ts-node": "^10.9.2",
     "typescript": "5.3.3"
   }
-}
+}

pages/global.css

@@ -149,3 +149,62 @@ html {
     object-fit: contain;
   }
 }
+
+/* New animations for front page */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse-slow {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.01);
+  }
+}
+
+@keyframes bounce-subtle {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(2px);
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 150ms ease-out forwards;
+}
+
+.animate-fade-up {
+  animation: fade-up 150ms ease-out both;
+}
+
+.animate-pulse-slow {
+  animation: pulse-slow 8s ease-in-out infinite;
+}
+
+.animate-bounce-subtle {
+  animation: bounce-subtle 2.5s ease-in-out infinite;
+}

pages/index.tsx

@@ -1,10 +1,15 @@
 import Layout from "../components/Layout"
 import { useState, useEffect } from "react"
-import InputText from "../components/input/InputText"
-import Button from "../components/action/Button"
 import { useRouter } from "next/router"
-import { Tooltip } from "react-tooltip"
 import useSWR from "swr"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardContent } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Switch } from "@/components/ui/switch"
+import { Play, Users, ChevronRight, Search, Settings, ChevronDown } from "lucide-react"
+import { cn } from "@/lib/cn"
 
 interface PublicRoom {
   id: string
@@ -12,23 +17,30 @@ interface PublicRoom {
   memberCount: number
 }
 
+interface Stats {
+  rooms: number
+  users: number
+}
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json())
+
 export default function Index() {
   const router = useRouter()
-  const { data } = useSWR("/api/stats", (url) =>
-    fetch(url).then((r) => r.json())
-  )
-  const { data: roomsData } = useSWR<{ rooms: PublicRoom[] }>(
-    "/api/rooms",
-    (url) => fetch(url).then((r) => r.json()),
-    { refreshInterval: 5000 } // Auto-refresh every 5 seconds
-  )
-  
   const [room, setRoom] = useState("")
   const [userName, setUserName] = useState("")
   const [isPublic, setIsPublic] = useState(false)
   const [nameError, setNameError] = useState("")
+  const [isGenerating, setIsGenerating] = useState(false)
+  const [mounted, setMounted] = useState(false)
+  const [scrolled, setScrolled] = useState(false)
+
+  const { data: stats, isLoading: statsLoading } = useSWR<Stats>("/api/stats", fetcher)
+  const { data: roomsData, isLoading: roomsLoading } = useSWR<{ rooms: PublicRoom[] }>(
+    "/api/rooms",
+    fetcher,
+    { refreshInterval: 5000 }
+  )
 
-  // Load saved user name from localStorage on mount
   useEffect(() => {
     if (typeof window !== "undefined") {
       const savedName = localStorage.getItem("userName")
@@ -36,213 +48,311 @@ export default function Index() {
         setUserName(savedName)
       }
     }
+    setMounted(true)
+
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 20)
+    }
+    window.addEventListener("scroll", handleScroll, { passive: true })
+    return () => window.removeEventListener("scroll", handleScroll)
   }, [])
 
+  const handleJoinRoom = async (roomId: string) => {
+    // Save user name if provided
+    if (userName.trim() && typeof window !== "undefined") {
+      localStorage.setItem("userName", userName.trim())
+    }
+    await router.push("/room/" + roomId)
+  }
+
+  const handleGenerateRoom = () => {
+    // Validate name
+    if (!userName.trim()) {
+      setNameError("Please enter your name before creating a room")
+      return
+    }
+    
+    setIsGenerating(true)
+    // Save user name to localStorage
+    if (typeof window !== "undefined") {
+      localStorage.setItem("userName", userName.trim())
+    }
+    
+    fetch("/api/generate")
+      .then((r) => r.json())
+      .then(async ({ roomId }) => {
+        if (
+          typeof roomId === "string" &&
+          roomId.length >= 4 &&
+          roomId.match(/^[a-z]{4,}$/)
+        ) {
+          console.log("Generated new roomId:", roomId)
+          // Store room metadata in sessionStorage
+          if (typeof window !== "undefined") {
+            sessionStorage.setItem(
+              `room_${roomId}_meta`,
+              JSON.stringify({ isPublic })
+            )
+          }
+          await router.push("/room/" + roomId)
+        } else {
+          throw Error("Invalid roomId generated: " + roomId)
+        }
+      })
+      .catch((error) => {
+        console.error("Failed to generate new roomId", error)
+        setIsGenerating(false)
+      })
+  }
+
   return (
     <Layout meta={{ robots: "index, archive, follow" }} showNavbar={false}>
-      <div className={"self-center flex justify-center items-center min-h-[70vh]"}>
-        <form
-          className={
-            "flex flex-col gap-6 justify-center rounded-xl shadow-2xl p-8 bg-gradient-to-br from-dark-800 to-dark-900 m-8 max-w-md w-full border border-dark-700/50"
-          }
-          onSubmit={async (e) => {
-            e.preventDefault()
-
-            if (room.length >= 4) {
-              // Save user name to localStorage
-              if (userName.trim() && typeof window !== "undefined") {
-                localStorage.setItem("userName", userName.trim())
-              }
-              await router.push("/room/" + room)
-            }
-          }}
+      <div className="min-h-screen bg-[#0B0E13]">
+        <nav
+          className={cn(
+            "fixed top-0 left-0 right-0 z-50 h-[52px] flex items-center justify-between px-6 transition-all duration-200",
+            scrolled ? "bg-[#0B0E13]/95 backdrop-blur-sm border-b border-white/[0.04]" : "bg-transparent",
+          )}
         >
-          <div className="text-center">
-            <h1 className={"text-3xl font-bold bg-gradient-to-r from-primary-500 to-accent-500 bg-clip-text text-transparent mb-2"}>
-              Welcome to Streamer
-            </h1>
-            <p className="text-dark-400 text-sm">Join or create a room to watch together</p>
-          </div>
-
-          {/* User Name Input */}
-          <div>
-            <label className="block text-sm font-medium text-dark-300 mb-1.5">
-              Your Name {" "}
-              <span className="text-xs text-dark-500">(optional for joining, required for creating)</span>
-            </label>
-            <InputText
-              value={userName}
-              placeholder={"Enter your display name"}
-              onChange={(value) => {
-                setUserName(value)
-                setNameError("")
-              }}
-            />
-            {nameError && (
-              <p className="text-red-500 text-xs mt-1">{nameError}</p>
-            )}
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-[#3B82F6] to-[#8B5CF6] flex items-center justify-center">
+              <Play className="w-4 h-4 fill-white text-white" />
+            </div>
+            <span className="text-lg font-bold text-white tracking-tight">Streamer</span>
           </div>
-          
-          {/* Room ID Input */}
-          <div>
-            <label className="block text-sm font-medium text-dark-300 mb-1.5">
-              Room ID
-            </label>
-            <InputText
-              value={room}
-              placeholder={"Enter a room ID"}
-              onChange={(value) =>
-                setRoom(value.toLowerCase().replace(/[^a-z]/g, ""))
-              }
-            />
+          <div className="flex items-center gap-1.5">
+            <button className="w-9 h-9 rounded-full bg-white/[0.04] hover:bg-white/[0.06] flex items-center justify-center transition-colors duration-150">
+              <Search className="w-4 h-4 text-white/40" />
+            </button>
+            <button className="w-9 h-9 rounded-full bg-white/[0.04] hover:bg-white/[0.06] flex items-center justify-center transition-colors duration-150">
+              <Settings className="w-4 h-4 text-white/40" />
+            </button>
           </div>
-          
-          <div className={"flex gap-3 justify-end"}>
+        </nav>
+
+        <div className="relative h-[80vh] flex items-center justify-center overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-b from-[#0B0E13] via-[#0B0E13] to-[#0B0E13]" />
+          <div className="absolute top-1/3 left-1/4 w-[300px] h-[300px] rounded-full bg-[#3B82F6]/[0.06] blur-[100px] animate-pulse-slow" />
+          <div
+            className="absolute bottom-1/3 right-1/4 w-[250px] h-[250px] rounded-full bg-[#8B5CF6]/[0.05] blur-[80px] animate-pulse-slow"
+            style={{ animationDelay: "3s" }}
+          />
+
+          <div className="relative z-10 w-full max-w-6xl mx-auto px-6 text-center animate-fade-up">
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight leading-[1.1] text-white mb-4">
+              Watch Together,
+              <br />
+              <span className="bg-gradient-to-r from-[#3B82F6] to-[#8B5CF6] bg-clip-text text-transparent">
+                Stream Anywhere
+              </span>
+            </h1>
+            <p className="text-sm text-white/25 max-w-sm mx-auto mb-8 font-light">
+              Create a room and invite friends to watch in perfect sync
+            </p>
+
             <Button
-              tooltip={"Create a new personal room"}
-              className={"px-4 py-2.5 font-medium"}
-              actionClasses={
-                "bg-accent-600 hover:bg-accent-700 active:bg-accent-800 shadow-lg hover:shadow-xl"
-              }
+              size="lg"
               onClick={() => {
-                // Validate name
-                if (!userName.trim()) {
-                  setNameError("Please enter your name before creating a room")
-                  return
-                }
-                
-                // Save user name to localStorage
-                if (typeof window !== "undefined") {
-                  localStorage.setItem("userName", userName.trim())
-                }
-                
-                fetch("/api/generate")
-                  .then((r) => r.json())
-                  .then(async ({ roomId }) => {
-                    if (
-                      typeof roomId === "string" &&
-                      roomId.length >= 4 &&
-                      roomId.match(/^[a-z]{4,}$/)
-                    ) {
-                      console.log("Generated new roomId:", roomId)
-                      // Store room metadata in sessionStorage
-                      if (typeof window !== "undefined") {
-                        sessionStorage.setItem(
-                          `room_${roomId}_meta`,
-                          JSON.stringify({ isPublic })
-                        )
-                      }
-                      await router.push("/room/" + roomId)
-                    } else {
-                      throw Error("Invalid roomId generated: " + roomId)
-                    }
-                  })
-                  .catch((error) => {
-                    console.error("Failed to generate new roomId", error)
-                  })
+                const formSection = document.getElementById("join-section")
+                formSection?.scrollIntoView({ behavior: "smooth" })
               }}
+              className="group h-12 px-8 bg-gradient-to-r from-[#3B82F6] to-[#8B5CF6] hover:from-[#4B8FF7] hover:to-[#9B6CF7] text-white text-base font-semibold rounded-2xl shadow-[0_0_24px_rgba(59,130,246,0.2)] hover:shadow-[0_0_32px_rgba(59,130,246,0.3)] transition-all duration-150 active:scale-[0.98]"
             >
-              Generate room
-            </Button>
-            <Button
-              tooltip={room.length < 4 ? "Invalid room id" : "Join room"}
-              className={"px-4 py-2.5 font-medium"}
-              actionClasses={
-                room.length >= 4
-                  ? "bg-primary-600 hover:bg-primary-700 active:bg-primary-800 shadow-lg hover:shadow-xl hover:shadow-glow"
-                  : "bg-dark-700 hover:bg-dark-600 active:bg-red-700 cursor-not-allowed opacity-50"
-              }
-              disabled={room.length < 4}
-              type={"submit"}
-            >
-              Join room
+              <Play className="w-4 h-4 mr-2 fill-white" />
+              Get Started
+              <ChevronRight className="w-4 h-4 ml-1 group-hover:translate-x-0.5 transition-transform duration-150" />
             </Button>
+
+            <div className="flex items-center justify-center gap-2.5 mt-6">
+              <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-white/[0.02]">
+                <div className="w-1 h-1 bg-white/20 rounded-full" />
+                <span className="text-[11px] text-white/20">
+                  {mounted && !statsLoading ? (stats?.rooms ?? 0) : "—"} Rooms
+                </span>
+              </div>
+              <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-white/[0.02]">
+                <div className="w-1 h-1 bg-white/20 rounded-full" />
+                <span className="text-[11px] text-white/20">
+                  {mounted && !statsLoading ? (stats?.users ?? 0) : "—"} Watching
+                </span>
+              </div>
+            </div>
           </div>
 
-          {/* Public/Private Toggle */}
-          <div className="flex items-center gap-3 p-3 bg-dark-800/50 rounded-lg border border-dark-700/30">
-            <label className="flex items-center gap-2 cursor-pointer flex-1">
-              <input
-                type="checkbox"
-                checked={isPublic}
-                onChange={(e) => setIsPublic(e.target.checked)}
-                className="w-4 h-4 rounded border-dark-600 text-primary-600 focus:ring-primary-500 focus:ring-offset-dark-900"
-              />
-              <span className="text-sm text-dark-300">
-                Make room public (visible in lobby)
-              </span>
-            </label>
+          <div
+            className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1 animate-fade-in opacity-0"
+            style={{ animationDelay: "500ms", animationFillMode: "forwards" }}
+          >
+            <span className="text-[9px] text-white/15 font-medium tracking-wider uppercase">Scroll</span>
+            <ChevronDown className="w-3.5 h-3.5 text-white/15 animate-bounce-subtle" />
           </div>
-          
-          <div className={"mt-2 pt-4 border-t border-dark-700/50"}>
-            <small className={"text-dark-400"}>
-              <div className="font-medium text-dark-300 mb-1">Currently active:</div>
-              <div className={"flex flex-row gap-4 text-sm"}>
-                <div className="flex items-center gap-1">
-                  <span className="inline-block w-2 h-2 bg-primary-500 rounded-full"></span>
-                  <span>{data?.rooms || 0} Rooms</span>
-                </div>
-                <div className="flex items-center gap-1">
-                  <span className="inline-block w-2 h-2 bg-accent-500 rounded-full"></span>
-                  <span>{data?.users || 0} Users</span>
-                </div>
+
+          <div className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-[#0B0E13] via-[#0B0E13]/90 to-transparent pointer-events-none" />
+        </div>
+
+        <div id="join-section" className="w-full max-w-6xl mx-auto px-6 py-10">
+          {roomsData && roomsData.rooms && roomsData.rooms.length > 0 && (
+            <div className="mb-12">
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-lg font-semibold text-white">Trending Now</h2>
+                <span className="text-[11px] text-white/20">{roomsData.rooms.length} active</span>
               </div>
-            </small>
-          </div>
-        </form>
-      </div>
 
-      {/* Public Rooms List */}
-      {roomsData && roomsData.rooms && roomsData.rooms.length > 0 && (
-        <div className="max-w-4xl mx-auto px-4 pb-8">
-          <div className="bg-gradient-to-br from-dark-800 to-dark-900 rounded-xl shadow-2xl p-6 border border-dark-700/50">
-            <h2 className="text-xl font-bold text-dark-200 mb-4 flex items-center gap-2">
-              <span className="inline-block w-2 h-2 bg-primary-500 rounded-full"></span>
-              Public Rooms
-            </h2>
-            <div className="space-y-2">
-              {roomsData.rooms.map((room) => (
-                <div
-                  key={room.id}
-                  className="flex items-center justify-between p-4 bg-dark-800/50 rounded-lg border border-dark-700/30 hover:border-primary-500/50 transition-colors"
-                >
-                  <div className="flex-1">
-                    <div className="font-medium text-dark-200">
-                      Room: <span className="text-primary-400">{room.id}</span>
+              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+                {roomsData.rooms.map((publicRoom, idx) => (
+                  <button
+                    key={publicRoom.id}
+                    onClick={() => handleJoinRoom(publicRoom.id)}
+                    className={cn(
+                      "group relative rounded-xl overflow-hidden transition-all duration-150 text-left",
+                      "bg-[#12151B] border border-white/[0.04]",
+                      "hover:border-white/[0.08] hover:scale-[1.01]",
+                      idx === 0 && "col-span-2 row-span-1 md:col-span-2",
+                    )}
+                    style={{ animation: `fade-up 150ms ease-out ${200 + idx * 40}ms both` }}
+                  >
+                    <div className="relative aspect-video bg-[#0B0E13] overflow-hidden">
+                      <div className="w-full h-full bg-gradient-to-br from-[#3B82F6]/20 to-[#8B5CF6]/20 flex items-center justify-center">
+                        <Play className="w-12 h-12 text-white/30" />
+                      </div>
+                      <div className="absolute inset-0 shadow-[inset_0_0_40px_rgba(0,0,0,0.3)]" />
+
+                      <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-150 flex items-center justify-center">
+                        <div className="w-11 h-11 rounded-full bg-white/90 flex items-center justify-center scale-90 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition-all duration-150">
+                          <Play className="w-4 h-4 fill-[#0B0E13] text-[#0B0E13] ml-0.5" />
+                        </div>
+                      </div>
+
+                      <div className="absolute bottom-2 right-2 px-1.5 py-0.5 rounded bg-black/50">
+                        <span className="text-[9px] text-white/40 font-medium">Live</span>
+                      </div>
+
+                      {idx === 0 && (
+                        <div className="absolute top-2 left-2 px-1.5 py-0.5 rounded bg-gradient-to-r from-[#3B82F6] to-[#8B5CF6]">
+                          <span className="text-[9px] text-white font-medium">Featured</span>
+                        </div>
+                      )}
                     </div>
-                    <div className="text-sm text-dark-400 mt-1">
-                      Owner: {room.ownerName} • {room.memberCount} {room.memberCount === 1 ? "member" : "members"}
+
+                    <div className="p-3">
+                      <div className="text-sm font-medium text-white/70 truncate">{publicRoom.ownerName}&apos;s Room</div>
+                      <div className="flex items-center gap-1 text-[10px] text-white/20 mt-1">
+                        <Users className="w-3 h-3" />
+                        <span>{publicRoom.memberCount} watching</span>
+                      </div>
                     </div>
-                  </div>
-                  <Button
-                    tooltip="Join this room"
-                    className="px-4 py-2 text-sm font-medium"
-                    actionClasses="bg-primary-600 hover:bg-primary-700 active:bg-primary-800"
-                    onClick={async () => {
-                      // Save user name if provided
-                      if (userName.trim() && typeof window !== "undefined") {
-                        localStorage.setItem("userName", userName.trim())
-                      }
-                      await router.push("/room/" + room.id)
+                  </button>
+                ))}
+
+                {!mounted || (roomsLoading && (!roomsData || roomsData.rooms.length === 0)) ? (
+                  <>
+                    {[1, 2, 3, 4].map((i) => (
+                      <div
+                        key={i}
+                        className={cn(
+                          "rounded-xl overflow-hidden bg-[#12151B] border border-white/[0.04]",
+                          i === 1 && "col-span-2",
+                        )}
+                      >
+                        <Skeleton className="aspect-video w-full bg-white/[0.02]" />
+                        <div className="p-3 space-y-2">
+                          <Skeleton className="h-4 w-3/4 bg-white/[0.02]" />
+                          <Skeleton className="h-3 w-1/3 bg-white/[0.02]" />
+                        </div>
+                      </div>
+                    ))}
+                  </>
+                ) : null}
+              </div>
+            </div>
+          )}
+
+          <Card className="max-w-md mx-auto bg-[#12151B] border-white/[0.04] rounded-xl">
+            <CardContent className="pt-6 pb-6">
+              <div className="text-center mb-5">
+                <h2 className="text-base font-semibold text-white mb-1">Create Your Room</h2>
+                <p className="text-[11px] text-white/25">Start streaming together in seconds</p>
+              </div>
+
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault()
+                  if (room.length >= 4) {
+                    handleJoinRoom(room)
+                  }
+                }}
+                className="space-y-3.5"
+              >
+                <div className="space-y-1.5">
+                  <Label htmlFor="userName" className="text-[11px] font-medium text-white/40">
+                    Your Name
+                  </Label>
+                  <Input
+                    id="userName"
+                    value={userName}
+                    placeholder="Enter your display name"
+                    onChange={(e) => {
+                      setUserName(e.target.value)
+                      setNameError("")
                     }}
+                    className={cn(
+                      "bg-white/[0.03] border-white/[0.06] text-white placeholder:text-white/15 h-10 rounded-lg text-sm",
+                      "focus-visible:ring-[#3B82F6]/15 focus-visible:border-white/[0.1] transition-all duration-150",
+                      nameError && "border-red-500/40",
+                    )}
+                  />
+                  {nameError && <p className="text-[10px] text-red-400/80">{nameError}</p>}
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label htmlFor="roomId" className="text-[11px] font-medium text-white/40">
+                    Room ID <span className="text-white/15 font-normal">(optional)</span>
+                  </Label>
+                  <Input
+                    id="roomId"
+                    value={room}
+                    placeholder="Enter a room ID to join"
+                    onChange={(e) => setRoom(e.target.value.toLowerCase().replace(/[^a-z]/g, ""))}
+                    className="bg-white/[0.03] border-white/[0.06] text-white placeholder:text-white/15 h-10 rounded-lg text-sm focus-visible:ring-[#3B82F6]/15 focus-visible:border-white/[0.1] transition-all duration-150"
+                  />
+                </div>
+
+                <div className="flex items-center justify-between p-2.5 rounded-lg bg-white/[0.02] border border-white/[0.04]">
+                  <Label htmlFor="public-toggle" className="cursor-pointer text-[11px] text-white/30">
+                    Make room public
+                  </Label>
+                  <Switch
+                    id="public-toggle"
+                    checked={isPublic}
+                    onCheckedChange={setIsPublic}
+                    className="scale-[0.85]"
+                  />
+                </div>
+
+                <div className="flex gap-2 pt-1">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="flex-1 h-10 bg-transparent border-white/[0.06] text-white/35 hover:bg-white/[0.03] hover:text-white/50 hover:border-white/[0.08] rounded-lg text-sm transition-all duration-150 active:scale-[0.98]"
+                    onClick={handleGenerateRoom}
+                    disabled={isGenerating}
+                  >
+                    {isGenerating ? "Creating..." : "Generate"}
+                  </Button>
+                  <Button
+                    type="submit"
+                    disabled={room.length < 4}
+                    className="flex-1 h-10 bg-gradient-to-r from-[#3B82F6] to-[#8B5CF6] hover:from-[#4B8FF7] hover:to-[#9B6CF7] text-white font-medium rounded-lg text-sm transition-all duration-150 active:scale-[0.98] disabled:opacity-25 disabled:cursor-not-allowed"
                   >
-                    Join
+                    Join Room
+                    <ChevronRight className="w-3.5 h-3.5 ml-1" />
                   </Button>
                 </div>
-              ))}
-            </div>
-          </div>
+              </form>
+            </CardContent>
+          </Card>
         </div>
-      )}
-
-      <Tooltip
-        style={{
-          backgroundColor: "var(--dark-700)",
-          borderRadius: "0.5rem",
-          padding: "0.5rem 0.75rem",
-          fontSize: "0.875rem",
-        }}
-      />
+      </div>
     </Layout>
   )
 }

tsconfig.json

@@ -5,6 +5,9 @@
     "jsx": "preserve",
     "lib": ["dom", "es2017"],
     "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    },
     "moduleResolution": "node",
     "strict": true,
     "allowJs": true,

yarn.lock

@@ -216,6 +216,101 @@
     tiny-glob "^0.2.9"
     tslib "^2.4.0"
 
+"@radix-ui/primitive@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz"
+  integrity sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==
+
+"@radix-ui/react-compose-refs@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz"
+  integrity sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==
+
+"@radix-ui/react-context@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz"
+  integrity sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==
+
+"@radix-ui/react-label@^2.1.8":
+  version "2.1.8"
+  resolved "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.8.tgz"
+  integrity sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==
+  dependencies:
+    "@radix-ui/react-primitive" "2.1.4"
+
+"@radix-ui/react-primitive@2.1.3":
+  version "2.1.3"
+  resolved "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz"
+  integrity sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==
+  dependencies:
+    "@radix-ui/react-slot" "1.2.3"
+
+"@radix-ui/react-primitive@2.1.4":
+  version "2.1.4"
+  resolved "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz"
+  integrity sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==
+  dependencies:
+    "@radix-ui/react-slot" "1.2.4"
+
+"@radix-ui/react-slot@^1.2.4", "@radix-ui/react-slot@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz"
+  integrity sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+
+"@radix-ui/react-slot@1.2.3":
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz"
+  integrity sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+
+"@radix-ui/react-switch@^1.2.6":
+  version "1.2.6"
+  resolved "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz"
+  integrity sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+    "@radix-ui/react-use-previous" "1.1.1"
+    "@radix-ui/react-use-size" "1.1.1"
+
+"@radix-ui/react-use-controllable-state@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz"
+  integrity sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==
+  dependencies:
+    "@radix-ui/react-use-effect-event" "0.0.2"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
+"@radix-ui/react-use-effect-event@0.0.2":
+  version "0.0.2"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz"
+  integrity sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
+"@radix-ui/react-use-layout-effect@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz"
+  integrity sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==
+
+"@radix-ui/react-use-previous@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz"
+  integrity sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==
+
+"@radix-ui/react-use-size@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz"
+  integrity sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@rushstack/eslint-patch@^1.3.3":
   version "1.5.1"
   resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz"
@@ -353,7 +448,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@^18.2.18":
+"@types/react-dom@*", "@types/react-dom@^18.2.18":
   version "18.2.18"
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz"
   integrity sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==
@@ -751,6 +846,13 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
+class-variance-authority@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz"
+  integrity sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==
+  dependencies:
+    clsx "^2.1.1"
+
 classnames@^2.3.0, classnames@^2.5.0:
   version "2.5.0"
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.5.0.tgz"
@@ -761,6 +863,11 @@ client-only@^0.0.1, client-only@0.0.1:
   resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
@@ -1987,6 +2094,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lucide-react@^0.561.0:
+  version "0.561.0"
+  resolved "https://registry.npmjs.org/lucide-react/-/lucide-react-0.561.0.tgz"
+  integrity sha512-Y59gMY38tl4/i0qewcqohPdEbieBy7SovpBL9IFebhc2mDd8x4PZSOsiFRkpPcOq6bj1r/mjH/Rk73gSlIJP2A==
+
 make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz"
@@ -2387,7 +2499,7 @@ react-beautiful-dnd@^13.1.1:
     redux "^4.0.4"
     use-memo-one "^1.1.1"
 
-"react-dom@^16.8.5 || ^17.0.0 || ^18.0.0", react-dom@^18.2.0, react-dom@>=16.14.0:
+"react-dom@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom@^16.8.5 || ^17.0.0 || ^18.0.0", react-dom@^18.2.0, react-dom@>=16.14.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -2448,7 +2560,7 @@ react-tooltip@*, react-tooltip@^5.25.1:
     "@floating-ui/dom" "^1.0.0"
     classnames "^2.3.0"
 
-"react@^16.11.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.3 || ^17 || ^18", "react@^16.8.5 || ^17.0.0 || ^18.0.0", react@^18.2.0, "react@>= 16.8.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16.14.0, react@>=16.6.0:
+"react@^16.11.0 || ^17.0.0 || ^18.0.0", "react@^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.3 || ^17 || ^18", "react@^16.8.5 || ^17.0.0 || ^18.0.0", react@^18.2.0, "react@>= 16.8.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16.14.0, react@>=16.6.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@@ -2834,6 +2946,11 @@ synckit@^0.8.4:
     "@pkgr/utils" "^2.3.1"
     tslib "^2.4.0"
 
+tailwind-merge@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz"
+  integrity sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==
+
 tailwindcss@^3.4.0:
   version "3.4.0"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz"