Fire Animation (#45)

* Merging from Dev (#35)

* Hero Section (#27)

* set up initial template

* added navbar to hero section

* responsive hero section

* Basic About is done

* About is added

* created cursor component with wand image (#30)

* "created cursor component with wang image
 with '#' will be ignored, and an empty message aborts the commit.

* Created Simple About Section (#31)

* Hero Section (#27)

* set up initial template

* added navbar to hero section

* responsive hero section

* Basic About is done

* Merge from Dev (#33)

* Hero Section (#27)

* set up initial template

* added navbar to hero section

* responsive hero section

* Basic About is done

* About is added

* fixed cursor selection bugs and added a trail

* Fixed missing component import for FAQ

* added comment in luge.js

---------

Co-authored-by: Kevin Monisit <monisitkevin@gmail.com>

* Basic Sections (#32)

* completed basic generic sections

* Formatting with prettier

* added some colors and additional divider

* moved text divider half way up to previous section

---------

Co-authored-by: Kevin Monisit <monisitkevin@gmail.com>

---------

Co-authored-by: poojakedia <67982568+poojakedia@users.noreply.github.com>
Co-authored-by: Shivam Kajaria <57373405+bhivam@users.noreply.github.com>

* Fire Animation

* Fire Animation

* Animating fire-animation

* Animating fire-animation

* Fire-Animation

* Fire-Animation
Fire Animation.

* Fire Animation

* deleted webp in favor of png, fixed safari stuttering animation

---------

Co-authored-by: Kevin Monisit <monisitkevin@gmail.com>
Co-authored-by: poojakedia <67982568+poojakedia@users.noreply.github.com>
Co-authored-by: Shivam Kajaria <57373405+bhivam@users.noreply.github.com>

app/(landing)/sections/Hero/Hero.tsx

@@ -1,7 +1,28 @@
+"use client";
 import Image from 'next/image';
 import Navbar from './Navbar';
+import React, { useState, useEffect } from "react";
+import clsx from 'clsx';
+
+const FIRE_IMG = [
+  "/landing/fire3.png",
+  "/landing/fire1.png",
+  "/landing/fire2.png",
+];
+
+const animationTime = 700;
 
 export default function Hero() {
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentImageIndex((prevIndex) => (prevIndex + 1) % FIRE_IMG.length);
+    }, animationTime);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
   return (
     <>
       <Navbar />
@@ -30,13 +51,42 @@ export default function Hero() {
         </div>
 
         <Image
-          src="/landing/fire.png"
+          src={FIRE_IMG[0]}
+          width="0"
+          height="0"
+          sizes="100vw"
+          alt="Fire"
+          // https://stackoverflow.com/questions/69230343/nextjs-image-component-with-fixed-witdth-and-auto-height
+          className={clsx("h-auto w-[790px] pl-8 md:w-[800px] lg:w-[800px]", {
+            "opacity-100": currentImageIndex === 0,
+            "opacity-0 absolute": currentImageIndex !== 0,
+          })}
+          priority
+        />
+        <Image
+          src={FIRE_IMG[1]}
+          width="0"
+          height="0"
+          sizes="100vw"
+          alt="Fire"
+          // https://stackoverflow.com/questions/69230343/nextjs-image-component-with-fixed-witdth-and-auto-height
+          className={clsx("h-auto w-[790px] pl-8 md:w-[800px] lg:w-[800px]", {
+            "opacity-100": currentImageIndex === 1,
+            "opacity-0 absolute ": currentImageIndex !== 1,
+          })}
+          priority
+        />
+        <Image
+          src={FIRE_IMG[2]}
           width="0"
           height="0"
           sizes="100vw"
           alt="Fire"
           // https://stackoverflow.com/questions/69230343/nextjs-image-component-with-fixed-witdth-and-auto-height
-          className="h-auto w-[790px] pl-8 md:w-[550px] lg:w-[650px]"
+          className={clsx("h-auto w-[790px] pl-8 md:w-[800px] lg:w-[800px]", {
+            "opacity-100": currentImageIndex === 2,
+            "opacity-0 absolute ": currentImageIndex !== 2,
+          })}
           priority
         />
       </div>