Further optimizations for Fire Image

HackRU · Feb 5, 2024 · 1ddac26 · 1ddac26
1 parent 668f740
commit 1ddac26
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 18 deletions.
diff --git a/app/(landing)/misc/StarsBackground.jsx b/app/(landing)/misc/StarsBackground.jsx
@@ -46,7 +46,7 @@ export function StarryBackground({ numberOfStars }) {
 
   return (
     <ClientOnly>
-      <div className="absolute left-0 top-0 h-full w-full">
+      <div className="absolute left-0 top-0 z-0 h-full w-full">
         {stars.map((style, index) => (
           <Star key={index} style={style} />
         ))}

diff --git a/app/(landing)/page.tsx b/app/(landing)/page.tsx
@@ -45,7 +45,6 @@ export default function Page() {
           <Image
             src="/landing/wand-cats-combined.png"
             alt="bottom image"
-            layout="responsive"
             object-fit="cover"
             style={{
               width: '100%',

diff --git a/app/(landing)/sections/About.tsx b/app/(landing)/sections/About.tsx
@@ -26,7 +26,7 @@ function AboutInfo({
     return (
       <div
         className={clsx(
-          'h-fit w-full bg-red-100 p-20 md:w-1/2 md:grow md:justify-end',
+          'h-fit w-full bg-red-100 p-20 md:w-1/2 md:grow md:justify-end z-10',
           {
             'text-end': reverse,
           },

diff --git a/app/(landing)/sections/FAQ/FAQ.tsx b/app/(landing)/sections/FAQ/FAQ.tsx
@@ -21,7 +21,7 @@ export default function FAQ() {
   return (
     <div
       id="FAQ"
-      className="relative flex w-full flex-col items-center justify-start overflow-visible"
+      className="relative flex w-full flex-col items-center justify-start overflow-visible z-10 h-[70vh]"
     >
       <div className="relative flex w-full px-[10vw] xl:px-[15vw] flex-col items-center pb-[10rem]">
         <QuestionContainer />

diff --git a/app/(landing)/sections/Hero/Hero.tsx b/app/(landing)/sections/Hero/Hero.tsx
@@ -85,22 +85,12 @@ export default function Hero() {
         <Image
           src={FIRE_IMG[currentImageIndex]}
           quality={fireImageQuality}
-          width="0"
-          height="0"
-          sizes="100vw"
+          width="900"
+          height="900"
           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,
-          })}
+          className={"h-auto w-[790px] pl-8 md:w-[500px] lg:w-[600px] xl:w-[650px] mb-32 xl:mb-10"}
           priority
-          onLoad={() => {
-            // setCompletedLoadedImages((prev) => prev + 1);
-            // setImgArray((prev) => {
-            //   return [...prev, "/landing/fire-1.png"];
-            // });
-          }}
         />
 
       </div>

diff --git a/app/(landing)/sections/Schedule.tsx b/app/(landing)/sections/Schedule.tsx
@@ -31,7 +31,7 @@ export default async function Schedule() {
 
   return (
     <div
-      className="relative mb-20 flex w-full justify-center px-4"
+      className="relative mb-20 flex w-full justify-center px-4 z-10"
       id="Schedule"
     >
       <div className="flex h-fit w-full max-w-7xl flex-col items-center">