Merge pull request #79 from acm-ucr/acm-ucr/images_821319974b8e4cba

Update Images to Webp

src/app/gallery/page.tsx

@@ -1,9 +1,11 @@
 import Title from "@/components/Title";
+import Gallery from "@/components/gallery/Gallery";
 
 const page = () => {
   return (
     <div className="bg-csa-tan-100">
       <Title text="gallery" />
+      <Gallery />
     </div>
   );
 };

src/app/not-found.tsx

@@ -1,5 +1,7 @@
-const NotFound = () => {
-  return <div>404 Page Not Found</div>;
+import NotFound from "@/components/NotFound";
+
+const NotFoundPage = () => {
+  return <NotFound />;
 };
 
-export default NotFound;
+export default NotFoundPage;

src/components/NotFound.tsx

@@ -0,0 +1,11 @@
+const NotFound = () => {
+  return (
+    <div className="flex h-screen flex-col items-center justify-center bg-csa-tan-100">
+      <p className="text-[12vw] font-bold text-csa-yellow-300">404</p>
+      <p className="font-lora text-[2.5vw] text-csa-gray-100">
+        page not found :(
+      </p>
+    </div>
+  );
+};
+export default NotFound;

src/components/gallery/Gallery.tsx

@@ -1,7 +1,17 @@
 import React from "react";
+import Image from "next/image";
+import pinkFlower from "@/public/gallery/pinkFlower.webp";
 
 const Gallery = () => {
-  return <div></div>;
+  return (
+    <div>
+      <Image
+        src={pinkFlower}
+        alt="pinkFlower"
+        className="absolute bottom-0 left-0 w-2/12"
+      />
+    </div>
+  );
 };
 
 export default Gallery;