Section 2 intro

src/app/case-study-energy/page.tsx

@@ -1,9 +1,9 @@
+import Intro from '@/components/energy/intro';
+
 export default function Energy() {
   return (
-    <main className="bg-green-700">
-      <div className="pt-[90px] text-white container">
-        Case study: Energy
-      </div>
-    </main>
+    <main>
+      <Intro />
+    </main >
   );
 }

src/app/page.tsx

@@ -1,13 +1,13 @@
-import Intro from "@/components/intro";
-import Section1 from "@/components/section-1";
-import Section2 from "@/components/section-2";
-import Section3 from "@/components/section-3";
-import Section4 from "@/components/section-4";
-import Section5 from "@/components/section-5";
+import Intro from "@/components/home/intro";
+import Section1 from "@/components/home/section-1";
+import Section2 from "@/components/home/section-2";
+import Section3 from "@/components/home/section-3";
+import Section4 from "@/components/home/section-4";
+import Section5 from "@/components/home/section-5";
 
 export default function Home() {
   return (
-    <main className="snap-y snap-mandatory">
+    <main>
       <Intro />
       <Section1 />
       <Section2 />

src/components/energy/intro/index.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import Lines from '@/components/lines';
+import Image from 'next/image';
+
+export default function Intro() {
+  const handleAnchor = (anchor: string) => {
+    const element = document.getElementById(anchor);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }
+  return (
+    <section className="relative bg-blue-950">
+      <Lines verticalClassName="left-8 w-[calc(100vh-16px)]" sectionName='intro' columns={[64, 136, 452, 947]} rows={[220, 286, 302, 364, 468, 764]} />
+      <div className='container relative pt-[110px] xl:pt-[177px] pl-8 xl:pl-24 flex flex-col-reverse xl:grid xl:grid-cols-[250px_1fr_250px] pb-[60px]'>
+        <div className='space-y-10 pt-[41px]'>
+          <div className='text-white text-balanced leading-[18px] pt-4 xl:pt-0'>
+            The Climate Adaptation <br />Digital Twin in Action: <br />Climate simulations to support decisions in the energy sector.
+          </div>
+          <ul className='flex flex-row xl:flex-col gap-[10px]'>
+            {
+              Array(5).fill(0).map((_, i) => (
+                <li key={`intro-images-${i}`} className='flex items-center gap-[9px]'>
+                  <Image alt="" src={`/images/energy-thumbs-${i + 1}.png`} width={72} height={79} />
+                  {i === 0 && <span className='bg-white w-[10px] h-[10px] rounded-full' />}
+                </li>
+              ))
+            }
+          </ul>
+        </div>
+        <div className='text-center space-y-[30px] xl:space-y-[94px]'>
+          <div>
+            <div className='text-light-green text-xs inline-flex items-center pb-4'>Case study<span className='mx-[10px] h-px w-[20px] bg-light-green' />01 Energy</div>
+            <h1 className='xl:max-w-[1012px]'>
+              <div className="text-light-green text-2xl xl:text-[90px] xl:leading-[81px] font-semibold">The Future of </div>
+              <div className="text-white text-2xl xl:text-[90px] xl:leading-[81px] font-semibold">Energy</div>
+            </h1>
+          </div>
+          <div className='flex items-center justify-center'>
+            <Image alt="" src="/images/energy-intro.png" width={494} height={297} />
+          </div>
+        </div>
+      </div>
+    </section>);
+};

src/components/home/intro/hero-video.tsx

@@ -0,0 +1,32 @@
+import { useRef, SyntheticEvent } from 'react';
+
+const HeroVideo = () => {
+  const vidRef = useRef<HTMLVideoElement>(null);
+  const handleProgress = (e: SyntheticEvent<HTMLVideoElement>) => {
+    const videoTarget = e.target as HTMLVideoElement;
+
+    if (isNaN(videoTarget.duration)) return;
+    if (videoTarget.currentTime >= videoTarget.duration - 2.1) {
+      // Fade out the video
+      if (!vidRef.current) return;
+      vidRef.current.style.opacity = '0';
+    }
+    if (videoTarget.currentTime >= videoTarget.duration - 1) {
+      // Start the video again
+      if (!vidRef.current) return;
+      vidRef.current.currentTime = 1;
+      vidRef.current.play();
+      vidRef.current.style.opacity = '0.5';
+    }
+  };
+  // Added 'transform' class to fix a safari issue with mix-blend-screen
+  // https://gsap.com/community/forums/topic/21802-issues-with-safari-perspective-mix-blend-mode/?do=findComment&comment=102778
+  return (
+    <video autoPlay muted playsInline ref={vidRef} onTimeUpdate={handleProgress} className="absolute bottom-0 w-full object-cover transform mix-blend-screen z-0 opacity-50 transition-opacity duration-2000 ease-in-out">
+      <source src="/videos/hero.webm" type="video/webm" />
+    </video>
+
+  );
+}
+
+export default HeroVideo;

src/components/section-2/index.tsx → src/components/home/section-2/index.tsx

@@ -11,7 +11,7 @@ import { useScroll, useTransform, motion, useMotionValueEvent, useInView, Animat
 import { useScreenWidthWithResize } from '@/lib/hooks';
 import { scrollToSection } from "@/lib/utils";
 import { useIsMobile } from '@/lib/hooks';
-import InfoPopover from '../info-popover';
+import InfoPopover from '../../info-popover';
 import ArrowRight from '@/svgs/arrow-right.svg';
 
 const ResizeButton = () => (