update award

src/components/About.tsx

@@ -3,12 +3,12 @@ import { SECTION_IDS } from '@/constants'
 const About = () => {
   return (
     <div className="grid h-screen grid-cols-3" id={SECTION_IDS.WHO_WE_ARE}>
-      <div className="h-full">
+      <div className="h-full hidden md:block col-span-1">
         <div className="my-20 border-b"></div>
       </div>
-      <div className="flex h-full items-center justify-center border-x py-20">
+      <div className="flex h-full items-center justify-center border-x py-20 col-span-3 md:col-span-1">
         <div
-          className={`flex h-full items-center justify-center px-20 text-center`}
+          className={`flex h-full w-full items-center justify-center px-10 md:px-20 text-center`}
         >
           <div>
             <h2 className="font-bebas-neue text-8xl text-muted-foreground">
@@ -23,7 +23,7 @@ const About = () => {
           </div>
         </div>
       </div>
-      <div className="h-full">
+      <div className="h-full hidden md:block col-span-1">
         <div className="my-20 border-b"></div>
       </div>
     </div>

src/components/Awards.tsx

@@ -1,11 +1,173 @@
+'use client'
+
 import { SECTION_IDS } from '@/constants'
+import Image from 'next/image'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { useState } from 'react'
 
-const Awards = () => {
+const awards = [
+  {
+    image: '/awards/award1.png',
+    title: 'LOREM IPSUM'
+  },
+  {
+    image: '/awards/award2.png',
+    title: 'LOREM IPSUM'
+  },
+  {
+    image: '/awards/award3.png',
+    title: 'LOREM IPSUM'
+  },
+  {
+    image: '/awards/award4.png',
+    title: 'LOREM IPSUM'
+  }
+]
+
+const awardStats = [
+  {
+    count: '10+',
+    label: 'Awards',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, nisi sit amet ultrices tempor, odio magna tempus libero, iris er'
+  },
+  {
+    count: '15+',
+    label: 'Awards',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, nisi sit amet ultrices tempor, odio magna tempus libero, iris er'
+  },
+  {
+    count: '20+',
+    label: 'Awards',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, nisi sit amet ultrices tempor, odio magna tempus libero, iris er'
+  }
+]
+
+const AwardCard = ({ image, title, isActive }: { image: string; title: string; isActive: boolean }) => {
   return (
-    <div className="h-screen bg-green-500" id={SECTION_IDS.AWARDS}>
-      Award
+    <div className="relative aspect-square bg-black rounded-lg overflow-hidden group">
+      <Image
+        src={image}
+        alt={title}
+        fill
+        className="object-cover transition-transform duration-300 group-hover:scale-105"
+      />
+      {/* Gradient overlay - Hiển thị khi hover trên desktop hoặc là slide active trên mobile */}
+      <div
+        className={`absolute inset-0 bg-gradient-to-b from-transparent to-black/60 transition-opacity duration-300
+          md:opacity-0 md:group-hover:opacity-100
+          ${isActive ? 'opacity-100' : 'opacity-0'}
+        `}
+      />
+
+      {/* Title - Hiển thị khi hover trên desktop hoặc là slide active trên mobile */}
+      <div
+        className={`absolute bottom-0 left-0 right-0 p-6 transition-transform duration-300
+          md:translate-y-full md:group-hover:translate-y-0
+          ${isActive ? 'translate-y-0' : 'translate-y-full'}
+        `}
+      >
+        <h3 className="text-2xl font-bold tracking-wider text-white">
+          {title}
+        </h3>
+      </div>
     </div>
   )
 }
 
+const Awards = () => {
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  const nextSlide = () => {
+    setCurrentIndex((prev) => (prev + 1) % awards.length)
+  }
+
+  const prevSlide = () => {
+    setCurrentIndex((prev) => (prev - 1 + awards.length) % awards.length)
+  }
+
+  return (
+    <section id={SECTION_IDS.AWARDS} className="py-20 px-10 md:px-0">
+      <div className="container">
+        {/* Header */}
+        <div className="max-w-xl mb-16">
+          <p className="text-lg text-muted-foreground mb-4">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </p>
+          <h2 className="text-4xl font-bold">AWARDS</h2>
+          <p className="mt-6 text-muted-foreground">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, nisi sit amet ultrices tempor.
+          </p>
+        </div>
+
+        {/* Awards Slider */}
+        <div className="relative mb-8">
+          <div className="flex overflow-hidden">
+            {awards.map((award, index) => (
+              <div
+                key={index}
+                className="min-w-full md:min-w-[25%] transition-all duration-500 px-1"
+                style={{
+                  transform: `translateX(-${currentIndex * 100}%)`,
+                }}
+              >
+                <AwardCard
+                  image={award.image}
+                  title={award.title}
+                  isActive={index === currentIndex}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Navigation */}
+        <div className="flex items-center justify-center gap-4 mt-8">
+          <button
+            onClick={prevSlide}
+            className="w-12 h-12 rounded-full border border-border flex items-center justify-center hover:bg-accent transition-colors"
+          >
+            <ChevronLeft className="w-6 h-6" />
+          </button>
+
+          {/* Dots indicator */}
+          <div className="flex gap-2">
+            {awards.map((_, index) => (
+              <button
+                key={index}
+                onClick={() => setCurrentIndex(index)}
+                className={`w-2 h-2 rounded-full transition-all ${currentIndex === index
+                  ? 'bg-primary w-4'
+                  : 'bg-border hover:bg-primary/50'
+                  }`}
+              />
+            ))}
+          </div>
+
+          <button
+            onClick={nextSlide}
+            className="w-12 h-12 rounded-full border border-border flex items-center justify-center hover:bg-accent transition-colors"
+          >
+            <ChevronRight className="w-6 h-6" />
+          </button>
+        </div>
+
+        {/* Stats */}
+        <div className="grid md:grid-cols-3 gap-8 border-t border-border pt-20 mt-20">
+          {awardStats.map((stat, index) => (
+            <div key={index} className={`${index !== 0 ? 'md:border-l border-border md:pl-8' : ''}`}>
+              <div className="flex items-baseline gap-1">
+                <span className="text-6xl font-bold">{stat.count}</span>
+                <span className="text-2xl">{stat.label}</span>
+              </div>
+              <p className="mt-4 text-muted-foreground">
+                {stat.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
 export default Awards

src/components/Header.tsx

@@ -91,10 +91,18 @@ const Header = () => {
   useEffect(() => {
     const observer = new IntersectionObserver(
       (entries) => {
-        const entry = entries[0]
-        setActiveClass(entry.target.id as SECTION_IDS)
+        const visibleEntries = entries.filter(entry => entry.isIntersecting)
+        if (visibleEntries.length > 0) {
+          const mostVisible = visibleEntries.reduce((prev, current) => {
+            return prev.intersectionRatio > current.intersectionRatio ? prev : current
+          })
+          setActiveClass(mostVisible.target.id as SECTION_IDS)
+        }
       },
-      { threshold: 0.7 },
+      {
+        threshold: [0.2, 0.4, 0.6, 0.8],
+        rootMargin: '-100px 0px -100px 0px'
+      }
     )
 
     const elements = headerItems.map((item) => {
@@ -149,16 +157,16 @@ const Header = () => {
                 )}
                 onClick={() => handleScrollToSection(item.path)}
               >
-                <span className={clsx(
+                {/* <span className={clsx(
                   "transition-colors",
                   {
                     'text-primary': activeClass === item.path,
                     'text-muted-foreground': activeClass !== item.path
                   }
                 )}>
                   {item.icon}
-                </span>
-                <span>{item.title}</span>
+                </span> */}
+                <span className='text-base font-bold'>{item.title}</span>
                 {activeClass === item.path && (
                   <motion.div
                     layoutId="underline"