fix/design home page

src/app/(main)/(home)/components/event-calendar/index.tsx

+"use client";
+import React, { useState } from "react";
+import { ArrowRight, ArrowLeft } from "lucide-react";
+export default function EventCalendar() {
+  const mockCalendar = {
+    month: 10,
+    year: 2025,
+    highlighted: [6, 9, 12],
+  };
+  const [month, setMonth] = useState<number>(mockCalendar.month);
+  const [year, setYear] = useState<number>(mockCalendar.year);
+
+  return (
+    <div className="bg-white border rounded-md p-4">
+      <div className="flex items-center justify-between mb-3">
+        <div className="text-sm font-medium">
+          THÁNG {month}/{year}
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="group">
+            <button
+              aria-label="Tháng trước"
+              onClick={() => {
+                // prev month
+                if (month === 1) {
+                  setMonth(12);
+                  setYear((y) => y - 1);
+                } else {
+                  setMonth((m) => m - 1);
+                }
+              }}
+              className="group-hover:border-primary p-1 h-10 w-10 flex items-center justify-center rounded-full border-2 border-[#363636] "
+            >
+              <ArrowLeft
+                size={24}
+                className="group-hover:text-muted-foreground text-[#363636]"
+              />
+            </button>
+          </div>
+          <div className="group">
+            <button
+              aria-label="Tháng sau"
+              onClick={() => {
+                // next month
+                if (month === 12) {
+                  setMonth(1);
+                  setYear((y) => y + 1);
+                } else {
+                  setMonth((m) => m + 1);
+                }
+              }}
+              className="p-1 group-hover:border-primary h-10 w-10 flex items-center justify-center rounded-full border-2 border-[#363636]"
+            >
+              <ArrowRight
+                size={24}
+                className="group-hover:text-muted-foreground"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className="grid grid-cols-7 gap-1 text-center text-xs">
+        {["CN", "T2", "T3", "T4", "T5", "T6", "T7"].map((d) => (
+          <div key={d} className="text-gray-400 py-1">
+            {d}
+          </div>
+        ))}
+        {
+          (() => {
+            const totalDays = new Date(year, month, 0).getDate()
+            const firstDayIndex = new Date(year, month - 1, 1).getDay() // 0 (Sun) - 6 (Sat)
+            // previous month total days
+            const prevMonthTotalDays = new Date(year, month - 1, 0).getDate()
+            const totalCells = firstDayIndex + totalDays
+            const trailingCount = (7 - (totalCells % 7)) % 7
+
+            return (
+              <>
+                {Array.from({ length: firstDayIndex }).map((_, i) => {
+                  const dayNum = prevMonthTotalDays - (firstDayIndex - 1) + i
+                  return (
+                    <div key={`prev-${i}`} className="py-2 text-sm text-gray-300">
+                      {dayNum}
+                    </div>
+                  )
+                })}
+
+                {Array.from({ length: totalDays }, (_, i) => i + 1).map((day) => {
+                  const isHighlighted = mockCalendar.highlighted.includes(day)
+                  return (
+                    <div
+                      key={day}
+                      className={`py-2 rounded-full w-10 h-10 flex flex-col justify-center items-center text-sm ${isHighlighted ? 'bg-yellow-500 text-white' : 'text-gray-700'
+                        }`}
+                    >
+                      {day}
+                    </div>
+                  )
+                })}
+
+                {Array.from({ length: trailingCount }).map((_, i) => (
+                  <div key={`next-${i}`} className="py-2 text-sm text-gray-300">
+                    {i + 1}
+                  </div>
+                ))}
+              </>
+            )
+          })()
+        }
+      </div>
+    </div>
+  );
+}

src/app/(main)/(home)/page.tsx

@@ -15,6 +15,7 @@ import { useGetCategory } from '@/api/endpoints/category'
 import { useGetNews } from '@/api/endpoints/news'
 import { GetCategoryAdminResponseType } from '@/api/types/category'
 import { GetNewsAdminResponseType } from '@/api/types/news'
+import EventCalendar from './components/event-calendar'
 
 const Home = () => {
   // states
@@ -95,8 +96,8 @@ const Home = () => {
         </Swiper>
 
         <div className='container'>
-          {/* Featured News */}
-          <div>
+          {/* slider */}
+          <div className='pb-10'>
             <div className='flex py-10 justify-center items-center w-full text-center'>
               <hr className='border-blue-900 w-full' />
               <h1 className='text-app-blue text-[28px] leading-normal uppercase font-bold w-full text-blue-900'>
@@ -104,8 +105,6 @@ const Home = () => {
               </h1>
               <hr className='border-blue-900 w-full' />
             </div>
-
-            {/* slider */}
             <div>
               <Swiper
                 modules={[Autoplay]}
@@ -152,28 +151,27 @@ const Home = () => {
             </div>
           </div>
 
-          {/* news and quick links section */}
-          <div className='flex flex-row gap-[30px] py-10'>
-            <div className='w-[71%]'>
-              <div>
-                <div className='flex justify-between items-center'>
-                  <a href='#' className='text-[20px] font-bold uppercase text-blue-900'>Tin Tức</a>
-                  <a href='#' className='text-blue-900'>{'>>'}</a>
+          {/* content 1 */}
+          <div className='flex flex-row gap-[30px] pb-10'>
+            <div className='w-[68.5%]'>
+              <div className='pb-5'>
+                <div className="flex flex-row justify-between items-center">
+                  <a href="#" className="text-[20px] font-bold uppercase text-blue-900">
+                    Tin tức
+                  </a>
+                  <a href="#" className="text-blue-900">{'>>'}</a>
                 </div>
-                <hr className=' border-blue-900' />
+                <hr className="border-blue-900" />
               </div>
-
-              <div className='flex flex-row justify-center gap-[30px] pt-5'>
-                {/* special news section */}
-                <div className='bg-gray-500 w-[50%] flex items-center justify-center rounded-lg'>
-                  <p className='text-white'>khung tin tức vip</p>
+              <div className='flex flex-row gap-[30px]'>
+                <div className="w-full bg-gray-500 flex items-center justify-center rounded-md">
+                  <p className="text-white">khung tin tức vip</p>
                 </div>
-
-                <div className='w-[50%]'>
-                  {/* category tabs */}
-                  <div className='flex mb-5 flex-wrap justify-between'>
+                <div className="w-full overflow-hidden">
+                  <div className="flex mb-3 flex-wrap justify-between">
                     <button
-                      className={`w-22 cursor-pointer hover:bg-border-blue-700 hover:bg-blue-50 px-4 py-1 rounded-md border ${'all' === tab ? 'border-blue-700 bg-blue-50' : 'border-gray-300 bg-white'}`}
+                      className={`w-22 cursor-pointer hover:bg-border-blue-700 hover:bg-blue-50 px-4 py-1 rounded-md border ${'all' === tab ? 'border-blue-700 bg-blue-50' : 'border-gray-300 bg-white'
+                        }`}
                       onClick={() => setTab('all')}
                     >
                       Tất cả
@@ -181,34 +179,32 @@ const Home = () => {
                     {categoryData?.responseData.rows.slice(0, 3).map((category) => (
                       <button
                         key={category.id}
-                        className={`w-22 cursor-pointer hover:bg-border-blue-700 hover:bg-blue-50 px-4 py-1 rounded-md border ${category.name === tab ? 'border-blue-700 bg-blue-50' : 'border-gray-300 bg-white'}`}
+                        className={`w-22 cursor-pointer hover:bg-border-blue-700 hover:bg-blue-50 px-4 py-1 rounded-md border ${category.name === tab ? 'border-blue-700 bg-blue-50' : 'border-gray-300 bg-white'
+                          }`}
                         onClick={() => setTab(category.name)}
                       >
                         {category.name}
                       </button>
                     ))}
                   </div>
-
-                  {/* News list */}
-                  <div className='pb-5 overflow-hidden'>
-                    {allData?.responseData.rows.slice(0, 5).map((news) => (
-                      <NewsContent key={news.id} news={news} />
-                    ))}
-                  </div>
+                  {allData?.responseData.rows.slice(0, 5).map((news) => (
+                    <NewsContent key={news.id} news={news} />
+                  ))}
                 </div>
               </div>
             </div>
 
-            {/* quick links section */}
-            <div>
-              <div>
-                <div className='flex justify-between items-center'>
-                  <a href='#' className='text-[20px] font-bold uppercase text-blue-900'>Liên kết nhanh</a>
-                  <a href='#' className='text-blue-900'>{'>>'}</a>
+            <div className='w-[33%]'>
+              <div className='pb-5'>
+                <div className="flex flex-row justify-between items-center">
+                  <a href="#" className="text-[20px] font-bold uppercase text-blue-900">
+                    Liên kết nhanh
+                  </a>
+                  <a href="#" className="text-blue-900">{'>>'}</a>
                 </div>
-                <hr className=' border-blue-900' />
+                <hr className="border-blue-900" />
               </div>
-              <div className='pt-5'>
+              <div>
                 <p>🔗 Cẩm nang Hướng dẫn đầu tư kinh doanh tại Việt Nam</p>
                 <p>🔗 Doanh nghiệp kiến nghị về chính sách và pháp luật</p>
               </div>
@@ -217,24 +213,21 @@ const Home = () => {
 
           {/* content 2 */}
           <div className='flex flex-row gap-[30px] pb-10'>
-            <div className='w-[71%]'>
-              <div>
-                <div className='flex justify-between items-center'>
-                  <a href='#' className='text-[20px] font-bold uppercase text-blue-900'>
+            <div className='w-[68.5%]'>
+              <div className='pb-5'>
+                <div className="flex flex-row justify-between items-center">
+                  <a href="#" className="text-[20px] font-bold uppercase text-blue-900">
                     Sự kiện sắp diễn ra
                   </a>
-                  <a href='#' className='text-blue-900'>{'>>'}</a>
+                  <a href="#" className="text-blue-900">{'>>'}</a>
                 </div>
-                <hr className=' border-blue-900' />
+                <hr className="border-blue-900" />
               </div>
-
-              <div className='flex flex-row justify-center gap-[30px] pt-5'>
-                {/* special news section */}
-                <div className='bg-gray-500 w-[50%] flex items-center justify-center rounded-lg'>
-                  <p className='text-white'>khung tin tức vip</p>
+              <div className='flex flex-row gap-[30px]'>
+                <div className="w-full bg-gray-500 flex items-center justify-center rounded-md">
+                  <p className="text-white">khung tin tức vip</p>
                 </div>
-                {/* News list */}
-                <div className='w-[50%] pb-5 overflow-hidden'>
+                <div className="w-full overflow-hidden">
                   {allData?.responseData.rows.slice(0, 5).map((news) => (
                     <NewsContent key={news.id} news={news} />
                   ))}
@@ -242,26 +235,24 @@ const Home = () => {
               </div>
             </div>
 
-            {/* calendar */}
-            <div>
-              <div>
-                <div className='flex justify-between items-center'>
-                  <a href='#' className='text-[20px] font-bold uppercase text-blue-900'>Lịch sự kiện</a>
-                  <a href='#' className='text-blue-900'>{'>>'}</a>
+            <div className='w-[33%]'>
+              <div className='pb-5'>
+                <div className="flex flex-row justify-between items-center">
+                  <a href="#" className="text-[20px] font-bold uppercase text-blue-900">
+                    Lịch sự kiện
+                  </a>
+                  <a href="#" className="text-blue-900">{'>>'}</a>
                 </div>
-                <hr className=' border-blue-900' />
-              </div>
-              <div className='pt-5'>
-                <p>🔗 Cẩm nang Hướng dẫn đầu tư kinh doanh tại Việt Nam</p>
-                <p>🔗 Doanh nghiệp kiến nghị về chính sách và pháp luật</p>
+                <hr className="border-blue-900" />
               </div>
+              <EventCalendar />
             </div>
           </div>
 
           {/* content 3 */}
-          <div className='flex flex-row gap-[30px] pb-10'>
+          < div className='flex flex-row gap-[30px] pb-10' >
             {/* Cơ hội kinh doanh */}
-            <div className='flex flex-col'>
+            < div className='flex flex-col' >
               <div>
                 <div className='flex justify-between items-center w-full'>
                   <a href='#' className='text-[20px] font-bold uppercase text-blue-900'>
@@ -277,10 +268,10 @@ const Home = () => {
                   <NewsContent key={news.id} news={news} />
                 ))}
               </div>
-            </div>
+            </div >
 
             {/* Chính sách & pháp luật */}
-            <div className='flex flex-col'>
+            < div className='flex flex-col' >
               <div>
                 <div className='flex justify-between items-center w-full'>
                   <a href='#' className='text-[20px] font-bold uppercase text-blue-900'>
@@ -296,8 +287,8 @@ const Home = () => {
                   <NewsContent key={news.id} news={news} />
                 ))}
               </div>
-            </div>
-          </div>
+            </div >
+          </div >
         </div >
       </>
     )