From 08275b8bd5f3c92b53e6377f9fbc36ee45cc0aa8 Mon Sep 17 00:00:00 2001
From: omarghandour <omarkhaled9913@gmail.com>
Date: Thu, 7 Nov 2024 04:55:37 +0200
Subject: [PATCH] adjusting the animation and the hero section bg

---
 app/components/Hero.tsx            | 8 ++++----
 app/components/ScrollBySection.tsx | 4 +---
 app/components/Welcome/Welcome.tsx | 2 +-
 app/globals.css                    | 2 +-
 app/page.tsx                       | 2 +-
 5 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index 70fe746..4efed6c 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -34,15 +34,15 @@ const Hero = forwardRef<HTMLDivElement>((_, ref) => {
   return (
     <section
       ref={localRef}
-      className="overflow-y-hidden min-h-[100dvh] snap-start relative back bg-cover bg-center bg-fixed h-[100dvh] center "
+      className="overflow-x-hidden flex justify-center h-screen w-full snap-start "
     >
-      <div className="flex flex-col md:flex-row justify-center items-center ">
+      <div className="flex w-full h-full flex-col md:flex-row justify-center items-center ">
         <Image
           src={logo}
           alt="Hero Image"
           width={200}
           height={200}
-          className={`center ${
+          className={`flex justify-center items-center ${
             isInView
               ? "motion-scale-in-[0.5] motion-translate-x-in-[-88%] motion-translate-y-in-[-9%] motion-opacity-in-[0%] motion-rotate-in-[-10deg] motion-blur-in-[5px] motion-duration-[0.00s] motion-duration-[0.61s]/translate motion-ease-spring-bouncy"
               : ""
@@ -51,7 +51,7 @@ const Hero = forwardRef<HTMLDivElement>((_, ref) => {
         <p
           className={`text-white text-base md:text-lg text-center md:text-left lg:text-xl  text-pretty leading-relaxed p-4 md:p-6 ${
             isInView
-              ? "motion-scale-in-[0.5] motion-translate-x-in-[-88%] motion-translate-y-in-[-9%] motion-opacity-in-[0%] motion-rotate-in-[-10deg] motion-blur-in-[5px] motion-duration-[0.00s] motion-duration-[0.61s]/translate motion-ease-spring-bouncy"
+              ? "motion-scale-in-[0.5] motion-translate-x-in-[66%] motion-translate-y-in-[-6%] motion-opacity-in-[0%] motion-rotate-in-[-10deg] motion-blur-in-[5px] motion-duration-[0.00s] motion-duration-[0.61s]/translate motion-ease-spring-bouncy"
               : "hidden"
           }`}
         >
diff --git a/app/components/ScrollBySection.tsx b/app/components/ScrollBySection.tsx
index 4dbb118..d080d8a 100644
--- a/app/components/ScrollBySection.tsx
+++ b/app/components/ScrollBySection.tsx
@@ -60,9 +60,7 @@ const ScrollBySection: React.FC = () => {
 
   return (
     <div
-      className={`h-[100dvh] w-full ${
-        isDesktop ? "overflow-hidden" : "overflow-auto"
-      }`} // Overflow hidden only for desktop
+      className={`h-screen w-full ${isDesktop ? "overflow-y-hidden" : ""}`} // Overflow hidden only for desktop
     >
       <Hero
         ref={(el) => {
diff --git a/app/components/Welcome/Welcome.tsx b/app/components/Welcome/Welcome.tsx
index ac51659..b7211e2 100644
--- a/app/components/Welcome/Welcome.tsx
+++ b/app/components/Welcome/Welcome.tsx
@@ -38,7 +38,7 @@ const Welcome = forwardRef<HTMLDivElement>((_, ref) => {
     <section
       id="welcome"
       ref={localRef}
-      className="overflow-y-hidden min-h-[100dvh] snap-start bg-black pt-10 gap-5 md:gap-12 flex flex-col justify-around text-white"
+      className="overflow-x-hidden min-h-[100dvh] snap-start bg-black pt-10 gap-5 md:gap-12 flex flex-col justify-around text-white"
     >
       <div className="center flex-col mt-28">
         <h2
diff --git a/app/globals.css b/app/globals.css
index 997d64b..1397a7e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,7 +6,7 @@ body {
   scroll-behavior: smooth !important;
 }
 * {
-  overflow-y: hidden !important;
+  overflow-x: hidden !important;
 }
 body {
   font-family: Arial, Helvetica, sans-serif;
diff --git a/app/page.tsx b/app/page.tsx
index ce525e2..061be3e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,7 +4,7 @@ import ScrollBySection from "./components/ScrollBySection";
 // import Welcome from "./components/Welcome/Welcome";
 export default function Home() {
   return (
-    <div className="min-h-[100dvh] overflow-y-hidden  scroll-smooth snap-y snap-mandatory">
+    <div className="min-h-[100dvh] back bg-cover bg-fixed bg-center overflow-x-hidden  scroll-smooth snap-y snap-mandatory">
       <Nav />
       {/* <Welcome />
       <MeetUs /> */}