From f6df1bf9717215d30c7f94e8c51f841ccc32d950 Mon Sep 17 00:00:00 2001
From: Peter Pham <pttp15122002@gmail.com>
Date: Wed, 11 Dec 2024 12:49:50 +0700
Subject: [PATCH] fix: UI bugs

---
 src/components/Home/Highlight/_index.tsx    | 2 +-
 src/components/Home/OpenSource/_index.tsx   | 2 +-
 src/components/Home/SupportTechs/_index.tsx | 2 +-
 src/pages/index.tsx                         | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Home/Highlight/_index.tsx b/src/components/Home/Highlight/_index.tsx
index cec831f..e288e21 100644
--- a/src/components/Home/Highlight/_index.tsx
+++ b/src/components/Home/Highlight/_index.tsx
@@ -3,7 +3,7 @@ import BentoGrid from "./BentoGrid";
 
 export default function Highlight() {
   return (
-    <section className="flex flex-col gap-y-24 lg:gap-y-48 justify-center min-h-screen lg:mt-32">
+    <section className="flex flex-col gap-y-24 lg:gap-y-48 justify-center items-center h-full min-h-screen mt-0 lg:mt-32">
       <SectionTitle
         title={
           <p>
diff --git a/src/components/Home/OpenSource/_index.tsx b/src/components/Home/OpenSource/_index.tsx
index d428d34..a92f86b 100644
--- a/src/components/Home/OpenSource/_index.tsx
+++ b/src/components/Home/OpenSource/_index.tsx
@@ -4,7 +4,7 @@ import { useInView } from "framer-motion";
 
 export default function OpenSource() {
   const ref = useRef(null);
-  const isInView = useInView(ref);
+  const isInView = useInView(ref, { once: true });
 
   return (
     <section
diff --git a/src/components/Home/SupportTechs/_index.tsx b/src/components/Home/SupportTechs/_index.tsx
index c318845..9446c0d 100644
--- a/src/components/Home/SupportTechs/_index.tsx
+++ b/src/components/Home/SupportTechs/_index.tsx
@@ -117,7 +117,7 @@ export default function SupportedTechs() {
     <section
       id="techstacks"
       ref={ref}
-      className="flex flex-col gap-y-24 lg:gap-y-48 justify-center min-h-screen max-w-7xl mx-auto"
+      className="flex flex-col gap-y-24 lg:gap-y-48 justify-center items-center min-h-screen max-w-7xl mx-auto"
     >
       <SectionTitle
         title="Wonderfull Supported Technologies and Tools"
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index c8c782e..e15ce7f 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -65,7 +65,7 @@ export default function Home() {
     >
       <DynamicHero />
       <DyanmicFeatures />
-      <section className="relative w-screen lg:max-w-7xl min-h-screen mx-auto flex flex-col items-center mt-24 lg:mt-48 lg:mb-24 mb-16 md:mb-48">
+      <section className="relative w-screen lg:max-w-7xl min-h-screen mx-auto flex flex-col items-center mt-24 lg:mt-48 lg:mb-24 mb-16 md:mb-48 max-w-screen overflow-x-hidden">
         {isHeroInView && <DynamicAnimation />}
         <DynamicHighlightSection />
         <DynamicSupportedTechs />