STYLE | improve minor style (#44)

* feat: add css linear-orange-red, orange-flare * fix: move id 'about' to description & apply warning by remove objectFit * fix: support small screen and use GradientCard * style: change option buttons overflow to scroll (was wrap) * refactor: use scroll-padding-top instead of anchor-holder
CE-SMART-CAREER · Nov 22, 2024 · 8263026 · 8263026
1 parent 199a9b7
commit 8263026
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 38 deletions.
diff --git a/src/modules/home/_components/seminar-table.tsx b/src/modules/home/_components/seminar-table.tsx
@@ -1,43 +1,44 @@
 import type { SeminarSlot } from '../_types';
 import { formatStr, fTime } from '@/shared/utils';
+import { GradientCard } from '@/shared/components';
 
 type Props = {
   seminars: SeminarSlot[];
 };
 
 export function SeminarTable({ seminars }: Props) {
   return (
-    <div className="overflow-auto rounded-lg">
-      <table className="w-full table-auto border-collapse animate-fade rounded-lg border-none bg-linear-gray-orange">
+    <GradientCard className="overflow-auto rounded-lg bg-linear-gray-orange p-0.5">
+      <table className="w-full table-auto border-collapse animate-fade rounded-lg border-none">
         <thead>
           <tr>
-            <th className="md:pl-15 mx-6 w-1/3 animate-fade border-b-2 border-gray-300 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-b-2 border-gray-500 p-2 text-left md:px-10 md:py-6 lg:py-8 lg:pl-20">
               เวลา
             </th>
-            <th className="w-1/3 animate-fade border-b-2 border-gray-300 py-3 pl-10 text-left md:py-6 lg:py-8 lg:pl-20">
-              ห้องที่ 1 (001)
+            <th className="w-1/3 animate-fade border-b-2 border-gray-500 p-2 text-left md:px-10 md:py-6 lg:py-8 lg:pl-20">
+              ห้องที่ 1 (802)
             </th>
-            <th className="w-1/3 animate-fade border-b-2 border-gray-300 py-3 pl-10 text-left md:py-6 lg:py-8 lg:pl-20">
-              ห้องที่ 2 (002)
+            <th className="w-1/3 animate-fade border-b-2 border-gray-500 p-2 text-left md:px-10 md:py-6 lg:py-8 lg:pl-20">
+              ห้องที่ 2 (807)
             </th>
           </tr>
         </thead>
         <tbody>
           {seminars.map((seminar, index) => (
             <tr key={index}>
-              <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">
+              <td className="md:pl-15 mx-6 w-1/3 animate-fade border-none p-2 md:px-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 animate-fade border-none py-3 pl-10 md:py-6 lg:py-8 lg:pl-20">
+              <td className="w-1/3 animate-fade border-none p-2 md:px-10 md:py-6 lg:py-8 lg:pl-20">
                 {seminar.room1}
               </td>
-              <td className="w-1/3 animate-fade border-none py-3 pl-10 md:py-6 lg:py-8 lg:pl-20">
+              <td className="w-1/3 animate-fade border-none p-2 md:px-10 md:py-6 lg:py-8 lg:pl-20">
                 {seminar.room2}
               </td>
             </tr>
           ))}
         </tbody>
       </table>
-    </div>
+    </GradientCard>
   );
 }
diff --git a/src/modules/home/_sections/company-logos.tsx b/src/modules/home/_sections/company-logos.tsx
@@ -14,10 +14,10 @@ export default function CompanyLogos({ companies, selectedCompanyId }: Props) {
   );
 
   return (
-    <article className="mx-auto flex flex-col justify-center bg-black bg-linear-orange-gray">
-      <div id="companies" className="anchor-holder invisible relative p-4">
-        $
-      </div>
+    <article
+      id="companies"
+      className="mx-auto flex flex-col justify-center bg-black bg-linear-orange-gray"
+    >
       <div className="container relative mx-auto xl:max-w-screen-xl">
         <section className="px-0 py-10 text-white sm:px-10">
           <h2 className="mb-10 text-center text-3xl font-semibold">

diff --git a/src/modules/home/_sections/description.tsx b/src/modules/home/_sections/description.tsx
@@ -3,37 +3,38 @@ import Image from 'next/image';
 
 export default function Description() {
   return (
-    <div className="relative z-0 overflow-hidden bg-linear-orange-black-vertical">
+    <div
+      id="about"
+      className="relative z-0 overflow-hidden bg-linear-orange-black-vertical"
+    >
       <div className="absolute bottom-0 right-[calc(50%-300px)] z-50 hidden h-[98px] w-full bg-brown-500 lg:block"></div>
       <div className="absolute bottom-0 right-0 z-50 hidden h-[12px] w-full bg-brown-500 lg:block"></div>
       <div className="container relative mx-auto px-5 py-12 lg:py-36 xl:max-w-screen-lg">
         {/* background start here */}
         <div className="absolute right-[10px] top-[15%] z-20 hidden w-[421px] max-w-[30%] lg:block">
           <Image
-            className="w-full"
+            className="w-full object-contain"
             src="/assets/illustrations/city.png"
             alt=""
             width={400}
             height={1000}
-            objectFit="contain"
           ></Image>
         </div>
         <div className="absolute bottom-0 right-0 z-20 hidden w-full lg:block">
           <Image
-            className="ms-auto h-full w-auto"
+            className="ms-auto h-full w-auto object-contain"
             src="/assets/illustrations/people.png"
             alt=""
             width={1000}
             height={300}
-            objectFit="contain"
           ></Image>
         </div>
         <div className="absolute -bottom-[250px] -right-[200px] z-10 hidden h-[968px] w-[1024px] lg:block">
           <Image
+            className="object-contain"
             src="/assets/illustrations/intersect.png"
             alt=""
             fill
-            objectFit="contain"
           ></Image>
         </div>
         <div className="absolute bottom-[25%] right-[-10%] z-10 hidden h-[282px] w-[373px] lg:block">

diff --git a/src/modules/home/_sections/introduction.tsx b/src/modules/home/_sections/introduction.tsx
@@ -29,10 +29,7 @@ function Grid() {
 
 export default function Introduction() {
   return (
-    <div
-      id="about"
-      className="relative flex min-h-screen items-center justify-center overflow-hidden p-4"
-    >
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden p-4">
       <City />
 
       <div className="relative flex flex-col items-center justify-center md:-mt-32">

diff --git a/src/modules/home/_sections/seminar.tsx b/src/modules/home/_sections/seminar.tsx
@@ -15,7 +15,7 @@ export default async function Seminar() {
   return (
     <article
       id="seminar"
-      className="relative mx-auto flex flex-col bg-black pb-20"
+      className="relative z-0 mx-auto flex flex-col bg-black pb-20"
     >
       <div className="relative w-full">
         <Image
@@ -28,26 +28,26 @@ export default async function Seminar() {
       </div>
 
       <div className="relative mx-auto flex w-10/12 flex-col md:w-3/4">
-        <div className="xl:-left-30 xl:-top-30 absolute -left-10 -top-10 h-20 w-20 rounded-full bg-orange-100 opacity-50 blur-2xl sm:-left-8 sm:-top-8 sm:h-16 sm:w-16 md:-left-24 md:-top-24 md:h-48 md:w-48 md:opacity-25 xl:h-60 xl:w-60"></div>
-        <div className="sm:-left-18 absolute -left-16 -top-12 h-24 w-32 rounded-full bg-orange-200 opacity-50 blur-3xl sm:-top-14 sm:h-28 sm:w-36 md:-left-40 md:-top-32 md:h-64 md:w-80 md:opacity-25 xl:-left-36 xl:-top-40 xl:h-96 xl:w-72"></div>
-        <h2 className="w-full text-3xl font-bold sm:text-3xl md:text-4xl">
+        <div className="small-circle xl:-left-30 xl:-top-30 absolute -left-10 -top-10 h-20 w-20 rounded-full bg-linear-orange-red opacity-50 blur-2xl sm:-left-8 sm:-top-8 sm:h-16 sm:w-16 md:-left-24 md:-top-24 md:h-48 md:w-48 md:opacity-25 xl:h-60 xl:w-60"></div>
+        <div className="big-circle sm:-left-18 absolute -left-16 -top-12 h-24 w-32 rounded-full bg-orange-flare opacity-50 blur-3xl sm:-top-14 sm:h-28 sm:w-36 md:-left-40 md:-top-32 md:h-64 md:w-80 md:opacity-25 xl:-left-36 xl:-top-40 xl:h-96 xl:w-72"></div>
+        <h2 className="z-10 w-full text-3xl font-bold sm:text-3xl md:text-4xl">
           กำหนดการสัมมนา
         </h2>
         {seminarList.length <= 0 && (
-          <p className="mt-2 w-full text-2xl font-bold md:text-2xl">
+          <p className="z-10 mt-2 w-full text-2xl font-bold md:text-2xl">
             ไม่พบกำหนดการ
           </p>
         )}
 
-        <Tabs defaultValue="day1" className="flex flex-col">
-          <TabsList className="mx-0 my-2 flex w-fit flex-row flex-wrap gap-2 sm:mx-10 sm:my-3 md:mx-2 md:gap-6 lg:gap-20">
+        <Tabs defaultValue="day1" className="z-10 flex flex-col gap-2 sm:gap-5">
+          <TabsList className="lg:gap-15 mx-0 my-2 flex w-fit gap-10 overflow-x-auto pb-2 font-bold sm:mx-10 sm:my-3 sm:overflow-visible md:mx-2 md:gap-6">
             {seminarList.map((seminarSlot, index) => (
               <TabsTrigger
                 key={index + 1}
                 value={`day${index + 1}`}
-                className="flex flex-row flex-wrap items-baseline gap-2 border-b-4 border-b-gray-500 text-xl text-white transition-colors duration-300 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-shrink-0 items-baseline gap-2 border-b-4 border-b-gray-500 text-xl text-white transition-colors duration-300 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">
+                <span className="text-lg sm:text-xl md:text-2xl">
                   Day {index + 1}{' '}
                 </span>
                 <span className="sm:text-lg md:text-xl">

diff --git a/src/shared/style/globals.css b/src/shared/style/globals.css
@@ -3,8 +3,9 @@
 @tailwind utilities;
 
 html {
-  scroll-behavior: smooth;
   overflow-x: hidden;
+  scroll-behavior: smooth;
+  scroll-padding-top: 2.5rem;
 }
 
 body {
@@ -153,14 +154,20 @@ body {
 
     --radial-orange-black: radial-gradient(
       50% 50% at 50% 50%,
-      #f6871e 40.5%,
+      rgba(246, 135, 30, 1) 40.5%,
       rgba(0, 0, 0, 0) 100%
     );
 
+    --linear-orange-red: linear-gradient(
+      90deg,
+      rgba(237, 140, 56, 1) 0%,
+      rgba(255, 132, 0, 1) 100%
+    );
+
     --linear-orange-black-vertical: linear-gradient(
       180deg,
-      #f6871e 0%,
-      #000000 34.55%
+      rgba(246, 135, 30, 1) 0%,
+      rgba(0, 0, 0, 0) 34.55%
     );
 
     --brown-500: #50341b;
@@ -171,6 +178,7 @@ body {
     --orange-300: #f6871e;
     --orange-400: #ac5f15;
     --orange-500: #965212;
+    --orange-flare: #ffa996;
 
     --gray-75: #d3d3d3;
     --gray-100: #c1c1c1;

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -62,6 +62,7 @@ const config: Config = {
           '300': 'var(--orange-300)',
           '400': 'var(--orange-400)',
           '500': 'var(--orange-500)',
+          'flare': 'var(--orange-flare)',
         },
         gray: {
           '75': 'var(--gray-75)',
@@ -87,6 +88,7 @@ const config: Config = {
         'linear-gray-orange': 'var(--linear-gray-orange)',
         'linear-black-orange-hori': 'var(--linear-black-orange-hori)',
         'radial-orange-black': 'var(--radial-orange-black)',
+        'linear-orange-red': 'var(--linear-orange-red)',
         'linear-orange-black-vertical': 'var(--linear-orange-black-vertical)'
       },
       keyframes: {