Merge branch 'main' into sun/fdr-37-emegency-contact

package.json

@@ -12,9 +12,11 @@
   },
   "dependencies": {
     "@iconify/react": "^5.0.1",
+    "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

@@ -0,0 +1,33 @@
+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 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 flex-col"
+      >
+        {' '}
+        <Welcome />
+        <h1 className="text-2xl text-center font-semibold text-project-light-gray mb-7">
+          รับเพื่อนก้าวใหม่ 2024
+        </h1>
+        <Image
+          src={comingsoon}
+          alt="Coming Soon"
+          className="w-64 h-14 mb-6"
+        />
+        <h1 className="text-xl text-center font-semibold text-project-light-gray mb-10">
+          พร้อมให้ลงทะเบียน
+          <br />
+          ในวันที่ 18 กรกฎาคม 2567
+        </h1>
+        <Back_To_Menu />
+      </Border>
+    </main>
+  );
+}

src/components/Welcome.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { cn } from '../lib/utils';
+
+interface WelcomeProps {
+  containerClassName?: string; // Optional string prop
+  welcomeClassName?: string;
+  cuClassName?: string;
+}
+
+export default function Welcome({
+  containerClassName,
+  welcomeClassName,
+  cuClassName,
+}: WelcomeProps) {
+  return (
+    <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/comingsoon/back_to_menu.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Link from 'next/link';
+export default function Back_To_Menu() {
+  return (
+    <div className="flex text-center justify-center ">
+      <Link
+        href="/"
+        className="bg-project-fuchsia text-xl text-white py-2 px-2 w-60 h-12 rounded-md"
+      >
+        กลับสู่หน้าหลัก
+      </Link>
+    </div>
+  );
+}

src/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));
+}