Merge pull request #99 from LizzyEll/main

Style and optimization
Mr-Ben-Merch-Store · Sep 7, 2024 · f553141 · f553141
2 parents ced70a2 + 5c5a5ec
commit f553141
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 5 deletions.
diff --git a/public/product images/BenShwarma.png → public/ProdImages/BenShwarma.png b/public/product images/BenShwarma.png → public/ProdImages/BenShwarma.png
diff --git a/public/product images/shirt1.png → public/ProdImages/shirt1.png b/public/product images/shirt1.png → public/ProdImages/shirt1.png
diff --git a/public/product images/sticker1.png → public/ProdImages/sticker1.png b/public/product images/sticker1.png → public/ProdImages/sticker1.png
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -36,7 +36,7 @@
 
 
 h1 {
-    @apply font-semibold text-7xl text-white animate-bounce-in my-10;
+    @apply font-semibold text-5xl text-white animate-bounce-in my-10;
 }
 
 hr {

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,4 +1,5 @@
 import { Metadata } from 'next';
+import Image from 'next/image';
 
 export const metadata: Metadata = {
     title: 'Home',
@@ -14,16 +15,40 @@ export default function Home() {
             <div className="w-1/2 mx-auto overflow-x-auto scrollable-gallery">
                 <div className="whitespace-nowrap scroll-smooth snap-x snap-mandatory flex py-10">
                     <div className="inline-block w-64 h-64 m-4 bg-transparent snap-center flex-shrink-0">
-                        <img src="gallery/bettereagle_chip.png" alt="Concept 1" className="w-full h-full object-cover rounded-lg" />
+                        <Image 
+                            src="/gallery/bettereagle_chip.png" 
+                            alt="Concept 1" 
+                            className="w-full h-full object-cover rounded-lg" 
+                            height={500}
+                            width={500}   
+                        />
                     </div>
                     <div className="inline-block w-64 h-64 m-4 bg-transparent snap-center flex-shrink-0">
-                        <img src="gallery/spacecsdesign.jpg" alt="Concept 2" className="w-full h-full object-cover rounded-lg" />
+                        <Image 
+                            src="/gallery/spacecsdesign.jpg" 
+                            alt="Concept 2" 
+                            className="w-full h-full object-cover rounded-lg" 
+                            height={500}
+                            width={500}
+                            />
                     </div>
                     <div className="inline-block w-64 h-64 m-4 bg-transparent snap-center flex-shrink-0">
-                        <img src="gallery/mrbenword.png" alt="Concept 3" className="w-full h-full object-cover rounded-lg" />
+                        <Image 
+                            src="/gallery/mrbenword.png" 
+                            alt="Concept 3" 
+                            className="w-full h-full object-cover rounded-lg" 
+                            height={500}
+                            width={500}
+                        />
                     </div>
                     <div className="inline-block w-64 h-64 m-4 bg-transparent snap-center flex-shrink-0">
-                        <img src="product images/shirt1.png" alt="Concept 4" className="w-full h-full object-cover rounded-lg" />
+                        <Image 
+                            src="/ProdImages/shirt1.png" 
+                            alt="Concept 4" 
+                            className="w-full h-full object-cover rounded-lg" 
+                            width={500}
+                            height={500}
+                            />
                     </div>
                 </div>
             </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,7 +36,7 @@ @@
     h1 {
-        @apply font-semibold text-7xl text-white animate-bounce-in my-10;
+        @apply font-semibold text-5xl text-white animate-bounce-in my-10;
     }
     hr {
@@ Expand Down @@