added more images

codebucks27 · Dec 3, 2023 · 824b655 · 824b655
1 parent 0ab23c2
commit 824b655
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 8 deletions.
diff --git a/src/app/page.js b/src/app/page.js
@@ -2,8 +2,8 @@ import ImageList from "@/components/ImageList";
 
 export default function Home() {
   return (
-    <main className="p-16 flex flex-col w-full items-center justify-center">
-      <h1 className="font-medium text-4xl underline underline-offset-8">
+    <main className="p-16 xl:p-32 flex flex-col w-full items-center justify-center">
+      <h1 className="font-medium text-4xl border border-solid border-white p-4">
         Smooth Scolling Using Lenis
       </h1>
       <ImageList />

diff --git a/src/components/ImageList.jsx b/src/components/ImageList.jsx
@@ -16,7 +16,7 @@ const ImageList = () => {
       <button
         href="#last-image"
         onClick={() => lenis.scrollTo("#last-image", { lerp: 0.01 })}
-        className="bg-white text-black capitalize rounded-lg p-4 font-semibold text-xl mt-16"
+        className="bg-white text-black capitalize p-4 font-semibold text-xl mt-16 hover:bg-white/90"
       >
         scroll to anchor
       </button>
@@ -27,6 +27,8 @@ const ImageList = () => {
           alt="Image"
           width={600}
           height={400}
+          priority
+          sizes="50vw"
         />
       </Parallax>
 
@@ -36,54 +38,91 @@ const ImageList = () => {
           alt="Image"
           width={600}
           height={400}
+          priority
+          sizes="50vw"
+        />
+      </Parallax>
+
+      <Parallax speed={-1} className="self-center">
+        <Image
+          src={"https://picsum.photos/400/600?random=3"}
+          alt="Image"
+          width={400}
+          height={600}
+          sizes="50vw"
         />
       </Parallax>
 
       <Parallax speed={-1} className="self-start">
         <Image
-          src={"https://picsum.photos/600/400?random=3"}
+          src={"https://picsum.photos/600/400?random=4"}
           alt="Image"
           width={600}
           height={400}
+          sizes="50vw"
         />
       </Parallax>
 
       <Parallax speed={-2} className="self-end">
         <Image
-          src={"https://picsum.photos/600/400?random=4"}
+          src={"https://picsum.photos/600/400?random=5"}
           alt="Image"
           width={600}
           height={400}
+          sizes="50vw"
         />
       </Parallax>
 
       <Parallax speed={2} className="self-start">
         <Image
-          src={"https://picsum.photos/600/400?random=5"}
+          src={"https://picsum.photos/600/400?random=6"}
           alt="Image"
           width={600}
           height={400}
+          sizes="50vw"
+        />
+      </Parallax>
+
+      <Parallax speed={-1} className="self-center">
+        <Image
+          src={"https://picsum.photos/400/600?random=7"}
+          alt="Image"
+          width={400}
+          height={600}
+          sizes="50vw"
         />
       </Parallax>
 
       <Parallax speed={1} className="self-end">
         <Image
-          src={"https://picsum.photos/600/400?random=6"}
+          src={"https://picsum.photos/600/400?random=8"}
           alt="Image"
           width={600}
           height={400}
+          sizes="50vw"
         />
       </Parallax>
 
       <Parallax speed={-12} className="self-start">
         <Image
-          src={"https://picsum.photos/600/400?random=7"}
+          src={"https://picsum.photos/600/400?random=9"}
           alt="Image"
           width={600}
           height={400}
+          sizes="50vw"
           id="last-image"
         />
       </Parallax>
+
+      <Parallax speed={-1} className="self-center">
+        <Image
+          src={"https://picsum.photos/400/600?random=10"}
+          alt="Image"
+          width={400}
+          height={600}
+          sizes="50vw"
+        />
+      </Parallax>
     </>
   );
 };