From ba2dd0a11242cc39420838a45108dfef5440baa3 Mon Sep 17 00:00:00 2001
From: Kachen <106764256+Roshanen@users.noreply.github.com>
Date: Tue, 12 Nov 2024 01:29:44 +0700
Subject: [PATCH] Feat/seminar section (#29)

* style: add table overflow-scroll

* style: add seminar table fade animation

* Feat/maicivil (#26)

* chore: ignore

* feat: mock navbar

* docs: update package.json

* feat: change navbar titile

* feat: init footer

* chore: update package-lock

* feat: called nav bar component

* feat: clean navbar and restructure

* feat: adjust css to navbar and footer

* fix: css in footer to have horizon linear fade

* remove package-lock

* remove: conflict file ( src/app/footer.tsx )

* remove conflict file ( nav-tabs.tsx )

* Feat/navbar active (#28)

* chore: ignore

* feat: mock navbar

* docs: update package.json

* feat: change navbar titile

* feat: init footer

* chore: update package-lock

* feat: called nav bar component

* feat: clean navbar and restructure

* feat: adjust css to navbar and footer

* fix: css in footer to have horizon linear fade

* remove package-lock

* remove: conflict file ( src/app/footer.tsx )

* remove conflict file ( nav-tabs.tsx )

* feat: add navbar href and anchor

* feat: add navbar color and smooth scroll

* feat: add navbar active animation and hamburger menu

---------

Co-authored-by: ktunchar <maikittitee1615@gmail.com>
Co-authored-by: Kittipod Lambangchang <tonkittipod@gmail.com>

* style: more height and bright seminar table

---------

Co-authored-by: ktunchar <70048235+Maikittitee@users.noreply.github.com>
Co-authored-by: ktunchar <maikittitee1615@gmail.com>
Co-authored-by: Kittipod Lambangchang <tonkittipod@gmail.com>
---
 src/modules/home/_components/seminar-table.tsx | 16 ++++++++--------
 src/modules/home/_sections/seminar.tsx         |  8 ++++----
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/modules/home/_components/seminar-table.tsx b/src/modules/home/_components/seminar-table.tsx
index 4aefb0d..9f98b93 100644
--- a/src/modules/home/_components/seminar-table.tsx
+++ b/src/modules/home/_components/seminar-table.tsx
@@ -7,17 +7,17 @@ type Props = {
 
 export function SeminarTable({ seminars }: Props) {
   return (
-    <div className="h-[60svh] overflow-auto rounded-lg">
-      <table className="w-full table-auto border-collapse rounded-lg border-none bg-linear-gray-orange">
+    <div className="h-[80svh] overflow-auto rounded-lg">
+      <table className="w-full table-auto border-collapse animate-fade rounded-lg border-none bg-linear-gray-orange">
         <thead>
           <tr>
-            <th className="md:pl-15 mx-6 w-1/3 border-none py-3 pl-10 text-left md:py-6 lg:py-8 lg:pl-20">
+            <th className="md:pl-15 mx-6 w-1/3 animate-fade border-none py-3 pl-10 text-left md:py-6 lg:py-8 lg:pl-20">
               เวลา
             </th>
-            <th className="w-1/3 border-none py-3 pl-10 text-left md:py-6 lg:py-8 lg:pl-20">
+            <th className="w-1/3 animate-fade border-none py-3 pl-10 text-left md:py-6 lg:py-8 lg:pl-20">
               ห้องที่ 1 (001)
             </th>
-            <th className="w-1/3 border-none py-3 pl-10 text-left md:py-6 lg:py-8 lg:pl-20">
+            <th className="w-1/3 animate-fade border-none py-3 pl-10 text-left md:py-6 lg:py-8 lg:pl-20">
               ห้องที่ 2 (002)
             </th>
           </tr>
@@ -25,13 +25,13 @@ export function SeminarTable({ seminars }: Props) {
         <tbody>
           {seminars.map((seminar, index) => (
             <tr key={index}>
-              <td className="md:pl-15 mx-6 w-1/3 border-none py-3 pl-10 md:py-6 lg:py-8 lg:pl-20">
+              <td className="md:pl-15 mx-6 w-1/3 animate-fade border-none py-3 pl-10 md:py-6 lg:py-8 lg:pl-20">
                 {`${fTime(seminar.startAt, formatStr.time24Hr)}-${fTime(seminar.endAt, formatStr.time24Hr)}`}
               </td>
-              <td className="w-1/3 border-none py-3 pl-10 md:py-6 lg:py-8 lg:pl-20">
+              <td className="w-1/3 animate-fade border-none py-3 pl-10 md:py-6 lg:py-8 lg:pl-20">
                 {seminar.room1}
               </td>
-              <td className="w-1/3 border-none py-3 pl-10 md:py-6 lg:py-8 lg:pl-20">
+              <td className="w-1/3 animate-fade border-none py-3 pl-10 md:py-6 lg:py-8 lg:pl-20">
                 {seminar.room2}
               </td>
             </tr>
diff --git a/src/modules/home/_sections/seminar.tsx b/src/modules/home/_sections/seminar.tsx
index 204b2b4..b2573ae 100644
--- a/src/modules/home/_sections/seminar.tsx
+++ b/src/modules/home/_sections/seminar.tsx
@@ -21,10 +21,10 @@ export default async function Seminar() {
           className="object-cover"
         />
       </div>
-      <div className="absolute left-6 top-0 h-20 w-20 rounded-full bg-orange-100 opacity-25 blur-2xl sm:h-16 sm:w-16 md:h-48 md:w-48 xl:left-10 xl:h-60 xl:w-60"></div>
-      <div className="absolute left-0 top-0 h-24 w-32 rounded-full bg-orange-200 opacity-25 blur-3xl sm:h-28 sm:w-36 md:h-64 md:w-80 xl:left-14 xl:h-96 xl:w-72"></div>
+      <div className="absolute left-6 top-20 h-20 w-20 rounded-full bg-orange-100 opacity-50 blur-2xl sm:h-16 sm:w-16 md:h-48 md:w-48 md:opacity-25 xl:left-10 xl:h-60 xl:w-60"></div>
+      <div className="absolute left-0 top-20 h-24 w-32 rounded-full bg-orange-200 opacity-50 blur-3xl sm:h-28 sm:w-36 md:h-64 md:w-80 md:opacity-25 xl:left-14 xl:h-96 xl:w-72"></div>
 
-      <div className="relative mx-auto flex w-10/12 flex-col pt-[8%] md:w-3/4">
+      <div className="relative mx-auto flex w-10/12 flex-col md:w-3/4">
         <h2 className="w-full text-3xl font-bold sm:text-3xl md:text-4xl">
           กำหนดการสัมมนา
         </h2>
@@ -40,7 +40,7 @@ export default async function Seminar() {
               <TabsTrigger
                 key={index + 1}
                 value={`day${index + 1}`}
-                className="flex flex-row flex-wrap items-baseline gap-2 text-xl text-gray-400 transition-colors duration-300 hover:text-white data-[state=active]:border-b-4 data-[state=active]:border-b-orange-300 data-[state=active]:text-orange-300 sm:gap-5 sm:py-2 md:text-2xl"
+                className="flex flex-row flex-wrap items-baseline gap-2 text-xl text-gray-100 transition-colors duration-300 hover:text-white data-[state=active]:border-b-4 data-[state=active]:border-b-orange-300 data-[state=active]:text-orange-300 sm:gap-5 sm:py-2 md:text-2xl"
               >
                 <span className="text-lg font-bold sm:text-xl md:text-2xl">
                   Day {index + 1}{' '}