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>
CE-SMART-CAREER · Nov 11, 2024 · ba2dd0a · ba2dd0a
1 parent 9ea8da8
commit ba2dd0a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/src/modules/home/_components/seminar-table.tsx b/src/modules/home/_components/seminar-table.tsx
@@ -7,31 +7,31 @@ 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>
         </thead>
         <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
@@ -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}{' '}