cn utils, change absolute

package.json

@@ -11,9 +11,11 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "next": "14.2.4",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
     "@iconify/react": "^5.0.1",

src/app/comingsoon/page.tsx

@@ -1,15 +1,15 @@
 import Image from 'next/image';
 import Border from '@/components/Border';
 import Back_To_Menu from '@/components/comingsoon/back_to_menu';
-import Welcome from '@/components/welcome';
+import Welcome from '@/components/Welcome';
 import comingsoon from '../../../public/comingsoon.svg';
 
 export default function Home() {
   return (
     <main className="w-full h-screen flex justify-center items-center flex-col">
       <Border
         variant="transparent"
-        className="flex justify-center items-center flex-col"
+        className="flex flex-col"
       >
         {' '}
         <Welcome />

src/components/Welcome.tsx

@@ -1,10 +1,31 @@
 import React from 'react';
+import { cn } from './lib/utils';
 
-export default function Welcome() {
+interface WelcomeProps {
+  containerClassName?: string; // Optional string prop
+  welcomeClassName?: string;
+  cuClassName?: string;
+}
+
+export default function Welcome({
+  containerClassName,
+  welcomeClassName,
+  cuClassName,
+}: WelcomeProps) {
   return (
-    <div className="absolute top-20 text-center font-season italic">
-      <h1 className="text-4xl mb-1">Welcome,</h1>
-      <h1 className="text-3xl bg-gradient-to-t bg-clip-text text-transparent from-project-fuchsia from-30% via-80% to-95% to-project-cream">
+    <div
+      className={cn(
+        'text-center font-season italic mt-8 mb-28',
+        containerClassName
+      )}
+    >
+      <h1 className={cn('text-4xl mb-1', welcomeClassName)}>Welcome,</h1>
+      <h1
+        className={cn(
+          'text-3xl bg-gradient-to-t bg-clip-text text-transparent from-project-fuchsia from-30% via-80% to-95% to-project-cream',
+          cuClassName
+        )}
+      >
         CU108
       </h1>
     </div>

src/components/lib/utils.tsx

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