Merge pull request #54 from TEDx-SJEC/hero

refactor : header background
TEDx-SJEC · Oct 28, 2024 · 4116654 · 4116654
2 parents 2b6ef34 + a8e5c07
commit 4116654
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 83 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -20,6 +20,7 @@ export default function RootLayout({
   return (
     <html lang="en" className="dark font-satoshi">
       <body className={(inter.className = "overflow-x-hidden")}>
+      <div className="fixed top-0 w-full h-24 z-50 backdrop-blur-md head-5 bg-black/5" /> 
         <Navbar />
         <StarsCanvas />
         <Providers>{children} </Providers>

diff --git a/src/components/edil-ozi/text-glitch.tsx b/src/components/edil-ozi/text-glitch.tsx
@@ -17,10 +17,10 @@ const TextGlitchEffect: FC<Props> = ({ textOne, textTwo, className }) => {
       )}
     >
       <span className="invisible whitespace-nowrap">{textOne}</span>
-      <span className="absolute left-0 top-0 text-red-600 transition-transform duration-300 ease-in-out group-hover:-translate-y-full whitespace-nowrap">
+      <span className="absolute left-0 top-0 text-black transition-transform duration-300 ease-in-out group-hover:-translate-y-full whitespace-nowrap">
         {textOne}
       </span>
-      <span className="absolute left-0 top-0 translate-y-full transition-transform duration-300 ease-in-out group-hover:translate-y-0 text-white whitespace-nowrap">
+      <span className="absolute left-0 top-0 translate-y-full transition-transform duration-300 ease-in-out group-hover:translate-y-0 text-red-600 whitespace-nowrap">
         {textTwo}
       </span>
     </div>

diff --git a/src/components/navbar/full-page-menu.tsx b/src/components/navbar/full-page-menu.tsx
@@ -2,7 +2,6 @@
 import { tedxsjecAssetsPrefix } from "@/lib/utils";
 import Image from "next/image";
 import React from "react";
-import SocialLinks from "../common/social-links";
 import NavItem from "./nav-items";
 import RegisterButton from "./register-button";
 
@@ -58,7 +57,6 @@ const FullPageMenu = () => {
             </h1>
           </div>
         </div>
-        <SocialLinks />
       </div>
     </section>
   );

diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
@@ -44,7 +44,7 @@ const Navbar = () => {
       );
 
     tl.to(".logo", { x: -300 }, "go")
-      .to(".reg", { y: -300 }, "go")
+      .to(".head-5", { y: -300 }, "go")
       .to(".fullpage-menu", {
         duration: 0,
         display: "block",

diff --git a/src/components/navbar/nav-header.tsx b/src/components/navbar/nav-header.tsx
@@ -11,51 +11,65 @@ interface NavHeaderProps {
 
 const NavHeader: React.FC<NavHeaderProps> = ({ handleClick }) => {
   const menuToggle = useRef(null);
+
+  const handleMenuClick = () => {
+    handleClick();
+
+    // Toggle overflow style on the body to enable/disable scrolling
+    if (document.body.style.overflow === "hidden") {
+      document.body.style.overflow = "auto";
+    } else {
+      document.body.style.overflow = "hidden";
+    }
+  };
+
   return (
-    <header className="fixed  z-[100] aboute left-0 top-0 w-screen">
-      <div className="header-1 flex md:py-[20px] md:px-[30px] p-[30px]  justify-between  items-center  ">
-        <div className="logo">
-          <Link href="/">
-            <Image
-              src={`${tedxsjecAssetsPrefix}/logo/whiteLogo.png`}
-              height={200}
-              width={200}
-              alt="logo"
-              layout="fixed"
-              priority={true}
-            />
-          </Link>
-        </div>
-        <div className="flex justify-between items-center ">
-          <button
-            id="menuToggle"
-            ref={menuToggle}
-            onClick={handleClick}
-            className="menu-toggle bg-transparent border-none cursor-pointer"
-          >
-            <svg
-              viewBox="0 0 12 10"
-              className="hamburger"
-              height="40px"
-              width="40px"
+    <>
+      <header className="fixed z-50 aboute left-0 top-0 w-screen">
+        <div className="header-1 flex md:py-[15px] md:px-[30px] px-3 py-4 justify-between items-center">
+          <div className="logo">
+            <Link href="/">
+              <Image
+                src={`${tedxsjecAssetsPrefix}/logo/whiteLogo.png`}
+                height={200}
+                width={200}
+                alt="logo"
+                layout="fixed"
+                priority={true}
+              />
+            </Link>
+          </div>
+          <div className="flex justify-between items-center">
+            <button
+              id="menuToggle"
+              ref={menuToggle}
+              onClick={handleMenuClick}
+              className="menu-toggle bg-transparent border-none cursor-pointer"
             >
-              <path
-                d="M10,2 L2,2"
-                className="bar-1 fill-none stroke-white"
-              ></path>
-              <path
-                d="M2,5 L10,5"
-                className="bar-2 fill-none stroke-white"
-              ></path>
-              <path
-                d="M10,8 L2,8"
-                className="bar-3 fill-none stroke-white"
-              ></path>
-            </svg>
-          </button>
+              <svg
+                viewBox="0 0 12 10"
+                className="hamburger"
+                height="40px"
+                width="40px"
+              >
+                <path
+                  d="M10,2 L2,2"
+                  className="bar-1 fill-none stroke-white"
+                ></path>
+                <path
+                  d="M2,5 L10,5"
+                  className="bar-2 fill-none stroke-white"
+                ></path>
+                <path
+                  d="M10,8 L2,8"
+                  className="bar-3 fill-none stroke-white"
+                ></path>
+              </svg>
+            </button>
+          </div>
         </div>
-      </div>
-    </header>
+      </header>
+    </>
   );
 };
 

diff --git a/src/components/navbar/nav-items.tsx b/src/components/navbar/nav-items.tsx
@@ -9,17 +9,17 @@ type NavItemProps = {
 
 const NavItem = ({ href, textOne, textTwo }: NavItemProps) => {
   return (
-    <li className="listo list-none overflow-hidden mt-[10px] leading-[1] font-bold text-black  text-[40px] md:text-[50px]">
+    <li className="listo list-none overflow-hidden mt-[10px] leading-[1] font-bold text-black  text-[35px] md:text-[43px]">
       <Link
         href={href}
-        className=" my-2 text-xl font-bold text-[40px] md:text-[50px]"
+        className=" my-2 text-xl font-bold text-[35px] md:text-[43px]"
         rel="noopener noreferrer"
         target="_blank"
       >
         <TextGlitch
           textOne={textOne}
           textTwo={textTwo}
-          className="font-bold text-black  text-[40px] md:text-[50px] leading-tight"
+          className="font-bold text-black  text-[35px] md:text-[43px] leading-tight"
         />
       </Link>
     </li>

diff --git a/src/components/widget/hero.tsx b/src/components/widget/hero.tsx
@@ -16,27 +16,21 @@ type TimeLeft = {
 
 const StaticShadow = ({ children }: { children: React.ReactNode }) => {
   return (
-    <motion.div 
+    <div 
       className="relative w-72 h-72 md:w-[500px] md:h-[500px]"
-      initial={{ opacity: 0, scale: 0.8 }}
-      animate={{ opacity: 1, scale: 1 }}
-      transition={{ duration: 0.8, ease: "easeOut" }}
       style={{
         filter: 'drop-shadow(0 0 15px rgba(255, 255, 255, 0.4))'
       }}
     >
       {children}
-    </motion.div>
+    </div>
   )
 }
 
 const FlipCard = ({ value, label }: { value: number; label: string }) => {
   return (
-    <motion.div 
+    <div 
       className="flex flex-col items-center justify-center bg-gradient-to-b from-red-900 to-red-950 rounded-lg shadow-lg p-2 w-full aspect-square overflow-hidden border border-red-500/30"
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.5, ease: "easeOut" }}
     >
       <div className="relative w-full h-2/3 bg-black/30 rounded-md flex items-center justify-center">
         <AnimatePresence mode="popLayout">
@@ -53,7 +47,7 @@ const FlipCard = ({ value, label }: { value: number; label: string }) => {
         </AnimatePresence>
       </div>
       <span className="text-xs sm:text-sm md:text-base capitalize text-white mt-2 font-semibold">{label}</span>
-    </motion.div>
+    </div>
   )
 }
 
@@ -112,12 +106,7 @@ export default function HeroHighlight() {
       </svg>
 
       <div className="container mx-auto py-8 lg:py-0 flex flex-col-reverse lg:flex-row items-center justify-between relative z-10">
-        <motion.div 
-          className="lg:w-1/2 space-y-8 hero-2"
-          initial={{ opacity: 0, x: -50 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.8, ease: "easeOut" }}
-        >
+        <div className="lg:w-1/2 space-y-8 hero-2">
           <h1 className="text-[28px] py-1 md:text-5xl font-satoshi lg:mt-16 font-extrabold bg-clip-text text-white">
             Ideas Worth Spreading
           </h1>
@@ -139,7 +128,7 @@ export default function HeroHighlight() {
               <p>Venue: Grand Convention Center</p>
             </div>
           </div>
-        </motion.div>
+        </div>
         <div className="lg:w-[50%] lg:mt-0 flex flex-col mb-10 items-center lg:items-end">
           <StaticShadow>
             <Image
@@ -149,29 +138,19 @@ export default function HeroHighlight() {
               alt="TEDx Event Logo"
             />
           </StaticShadow>
-          <motion.p 
-            className="text-xl md:text-3xl font-semibold mt-4 lg:mr-2 text-white"
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.5, ease: "easeOut" }}
-          >
-              Life - Explore What&#39;s Worth Living
-          </motion.p>
+          <p className="text-xl md:text-3xl font-semibold mt-4 lg:mr-2 text-white">
+            Life - Explore What&#39;s Worth Living
+          </p>
         </div>
       </div>
-      <motion.div 
-        className="container mx-auto px-4 py-2 relative z-10"
-        initial={{ opacity: 0, y: 50 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.8, delay: 0.8, ease: "easeOut" }}
-      >
+      <div className="container mx-auto px-4 py-2 relative z-10">
         <h2 className="text-3xl md:text-4xl font-bold text-center mb-8 font-satoshi text-white">Event Starts In</h2>
         <div className="grid grid-cols-4 font-satoshi gap-2 sm:gap-4 md:gap-6 max-w-xs sm:max-w-md md:max-w-lg lg:max-w-xl mx-auto">
           {timeUnits.map((unit) => (
             <FlipCard key={unit} value={timeLeft[unit]} label={unit} />
           ))}
         </div>
-      </motion.div>
+      </div>
     </section>
   )
-} 
+}