Start mobile version: Intro, menu, header

Vizzuality · Oct 22, 2024 · eae8cbc · eae8cbc
1 parent 6b15aff
commit eae8cbc
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 15 deletions.
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -33,7 +33,7 @@ export default function Header() {
       })
     }>
       <div className="container flex justify-between items-center">
-        <Logo className="w-60 h-10 text-white" />
+        <Logo className="w-40 lg:w-60 h-10 text-white" />
         <MenuButton />
       </div>
     </header>

diff --git a/src/components/intro/index.tsx b/src/components/intro/index.tsx
@@ -20,12 +20,12 @@ export default function Intro() {
     <section className="relative h-[110vh] bg-blue-900">
       <HeroVideo />
       <Lines verticalClassName="left-8 w-[calc(100vh-16px)]" sectionName='intro' columns={[64, 254, 270, 430, 1074]} rows={[204, 444, 516, 559, 602]} />
-      <div className='container relative pt-[198px] space-y-[30px] pl-24'>
-        <h1 className='max-w-[1012px]'>
-          <div className="text-light-green text-5xl font-semibold">Digital Twins: </div>
-          <div className="text-white text-5xl font-semibold">Innovative Research for a Sustainable Future</div>
+      <div className='container relative pt-[110px] lg:pt-[198px] space-y-[30px] pl-8 lg:pl-24'>
+        <h1 className='lg:max-w-[1012px]'>
+          <div className="text-light-green text-2xl lg:text-5xl font-semibold">Digital Twins: </div>
+          <div className="text-white text-2xl lg:text-5xl font-semibold">Innovative Research for a Sustainable Future</div>
         </h1>
-        <VerticalCarousel className="text-white text-2xl">
+        <VerticalCarousel className="text-white text-sm lg:text-2xl">
           <div>
             Bridging data and discovery with state-of-the-art digital twin technology
           </div>
@@ -36,9 +36,9 @@ export default function Intro() {
             Harnessing advanced simulations to adapt to and mitigate climate impacts
           </div>
         </VerticalCarousel>
-        <div className='flex gap-4'>
+        <div className='flex gap-4 flex-wrap'>
           <Button variant="white" size="lg" className='z-10 group'>
-            <Link href="#">View use cases</Link>
+            <Link href="#use-cases">View use cases</Link>
             <ArrowRightIcon className="w-5 h-5 group-hover:text-blue-900 text-white transform group-hover:translate-x-0.5 transition-transform" />
           </Button>
           <MotionButton variant="secondary"
@@ -54,7 +54,7 @@ export default function Intro() {
           </MotionButton>
         </div>
       </div>
-      <Marquee className="w-full text-light-green text-xl gap-12 border-t border-light-green py-4 absolute bottom-0">
+      <Marquee className="w-full text-light-green lg:text-xl gap-12 border-t border-light-green py-4 absolute bottom-0">
         <span className='ml-10 pl-10 border-l h-8 border-light-green' >Bridging data and discovery with state-of-the-art digital twin technology</span>
         <span className='ml-10 pl-10 border-l h-8 border-light-green' >Advancing climate knowledge through digital twins</span>
         <span className='ml-10 pl-10 border-l h-8 border-light-green' >Harnessing advanced simulations to adapt to and mitigate climate impacts</span>

diff --git a/src/components/lines/index.tsx b/src/components/lines/index.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { cn } from '@/lib/utils';
 import { AnimatePresence, motion } from 'framer-motion';
+import { useIsMobile } from '@/lib/hooks';
 
 type LinesProps = {
   sectionName: string;
@@ -21,7 +22,6 @@ const Lines = ({
   columnsNumber = 0,
   hoveredIndex,
 }: LinesProps) => {
-
   const gridColumns2 = 'grid transition-all duration-500 grid-cols-[1fr_1fr_1px]';
   const gridColumns3 = {
     'grid transition-all duration-500': true,
@@ -47,6 +47,9 @@ const Lines = ({
     5: gridColumns5
   }[columnsNumber];
 
+  const isMobile = useIsMobile();
+  if (isMobile) return null;
+
   return <>
     <AnimatePresence>
       {/* Vertical lines */}

diff --git a/src/components/menu-lines/index.tsx b/src/components/menu-lines/index.tsx
@@ -3,6 +3,7 @@
 import { cn } from '@/lib/utils';
 import { AnimatePresence, motion } from 'framer-motion';
 import { createPortal } from 'react-dom';
+import { useIsMobile } from '@/lib/hooks';
 
 type MenuLinesProps = {
   colorClass?: string;
@@ -16,6 +17,8 @@ const MenuLines = ({
 }: MenuLinesProps) => {
   const screenWidth = window.innerWidth;
   const initialX = screenWidth - 470;
+  const isMobile = useIsMobile();
+  if (isMobile) return null;
   return <>
     <AnimatePresence>
       <div className='menu-vertical-lines container fixed inset-0 w-full h-full pointer-events-none z-40'>

diff --git a/src/components/menu/index.tsx b/src/components/menu/index.tsx
@@ -37,14 +37,14 @@ export default function Menu() {
     <>
       {openedMenu && <MenuLines verticalClassName="absolute right-0" columns={[0, 254, 270, 430, 1074]} />}
       <motion.nav
-        className="fixed top-0 w-[470px] right-0 h-full bg-light-green flex flex-col p-10 justify-between z-50"
+        className="fixed top-0 w-full overflow-auto lg:w-[470px] right-0 h-full bg-light-green flex flex-col p-10 justify-between z-50"
         initial={{ x: "100%" }}
         animate={{ x: openedMenu ? 0 : "100%" }}
         transition={{ type: "linear", duration: 0.3 }}
       >
-        <div className="flex flex-col gap-[72px]">
+        <div className="flex flex-col gap-[72px] pb-10">
           <CloseMenuButton />
-          <ul className="text-3xl text-green-700 font-semibold space-y-8 max-w-[292px]">
+          <ul className="text-xl lg:text-3xl text-green-700 font-semibold space-y-8 max-w-[292px]">
             <li>
               <Link href="/">
                 <HoverRepeatAnimation>Home</HoverRepeatAnimation></Link>

diff --git a/src/components/section-3/index.tsx b/src/components/section-3/index.tsx
@@ -167,7 +167,7 @@ export default function Section3() {
             ))}
           </AnimatePresence>
         </div>
-        <div className={cn('min-h-[290px]', gridColumns)}>
+        <div className={cn('min-h-[290px]', gridColumns)} id="use-cases">
           <div className="pt-10 pb-20 pl-1 flex-col gap-4 flex text-green-700 text-base" onMouseEnter={() => setHoveredIndex(0)} onMouseLeave={() => setHoveredIndex(null)}>
             <div className="leading-relaxed">
               <div>01</div>

diff --git a/src/lib/hooks.ts b/src/lib/hooks.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
 
 export const useScreenWidthWithResize = () => {
   const [width, setWidth] = useState(0);
@@ -18,3 +18,18 @@ export const useScreenWidthWithResize = () => {
 
   return width;
 };
+
+export const useIsMobile = () => {
+  const [isMobile, setIsMobile] = useState(false);
+  const handleResize = useCallback(() => {
+    setIsMobile(window.innerWidth < 768);
+  }, []);
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return isMobile;
+};