Merge branch 'dev' of https://github.com/acm-ucr/star-wars-website in…

…to stormyy00/fixes
acm-ucr · Dec 4, 2024 · 4b00a25 · 4b00a25
2 parents 4fb3420 + abd5fb8
commit 4b00a25
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 13 deletions.
diff --git a/public/tatooine.png b/public/tatooine.png
diff --git a/public/tatooine.webp b/public/tatooine.webp
diff --git a/src/components/What.tsx b/src/components/What.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import Title from "./Title";
 import Header from "./Header";
 import Image from "next/image";
-import planet from "@/public/tatooine.png";
+import planet from "@/public/tatooine.webp";
 import { motion } from "framer-motion";
 
 const delayedPopup = {

diff --git a/src/components/gallery/Creation.tsx b/src/components/gallery/Creation.tsx
@@ -1,18 +1,74 @@
+"use client";
 import Card from "../Card";
 import { ITEMS } from "@/data/creation";
 import Header from "../Header";
+import { motion } from "framer-motion";
+const containerVariants = {
+  hidden: {
+    opacity: 0,
+  },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.3,
+      delayChildren: 0.2,
+    },
+  },
+};
 
+const cardVariants = {
+  hidden: {
+    opacity: 0,
+    scale: 0,
+    x: -500,
+  },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    x: 0,
+  },
+};
+const title = {
+  hidden: {
+    opacity: 0,
+    y: 100,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+  },
+};
 const Creation = () => {
   return (
-    <div className="w-full">
-      <Header title={"CREATION"} />
-      <div className="flex w-full flex-wrap justify-center gap-20">
+    <div className="flex w-full flex-col items-center">
+      <motion.div
+        variants={title}
+        initial="hidden"
+        whileInView={"visible"}
+        transition={{ duration: 0.7 }}
+        viewport={{ once: true }}
+        className="flex justify-center md:w-2/5"
+      >
+        <Header title={"CREATION"} />
+      </motion.div>
+      <motion.div
+        variants={containerVariants}
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true }}
+        className="flex w-full flex-wrap justify-center gap-20"
+      >
         {ITEMS.map((item, index) => (
-          <div key={index} className="w-1/4 sm:w-1/4">
+          <motion.div
+            variants={cardVariants}
+            transition={{ duration: 0.9, type: "spring", bounce: 0.2 }}
+            key={index}
+            className="w-1/4 sm:w-1/4"
+          >
             <Card topText={item.topText} bottomText={item.bottomText} />
-          </div>
+          </motion.div>
         ))}
-      </div>
+      </motion.div>
     </div>
   );
 };

diff --git a/src/components/gallery/Gallery.tsx b/src/components/gallery/Gallery.tsx
@@ -1,20 +1,55 @@
+"use client";
 import React from "react";
 import Image from "next/image";
 import largeFrame from "@/public/frame/largeframe.svg";
 import Title from "@/components/Title";
-
+import { motion } from "framer-motion";
+const animateAbout = {
+  hidden: {
+    opacity: 0,
+    scale: 0.8,
+  },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition: {
+      duration: 0.5,
+    },
+  },
+};
 const Gallery = ({ title }: { title: string }) => {
   return (
-    <div className="relative flex items-center justify-center">
+    <motion.div
+      variants={animateAbout}
+      initial="hidden"
+      whileInView="visible"
+      className="relative flex items-center justify-center"
+    >
       <Image
         src={largeFrame}
         alt="largeFrame"
         className="h-11/12 inset-0 w-11/12 object-cover"
       />
-      <div className="absolute bottom-2 top-0 flex items-center justify-center">
-        <Title text={title} />
-      </div>
-    </div>
+      <motion.div
+        variants={animateAbout}
+        className="absolute bottom-12 top-0 flex items-center justify-center"
+      >
+        <motion.div
+          animate={{ rotate: 360 }}
+          transition={{ repeat: 0, duration: 0.5, ease: "linear" }}
+          whileHover={{
+            scale: 1.1,
+            transition: { type: "spring", stiffness: 200, damping: 10 },
+          }}
+          whileTap={{
+            scale: 0.95,
+            transition: { type: "spring", stiffness: 200, damping: 10 },
+          }}
+        >
+          <Title text={title} />
+        </motion.div>
+      </motion.div>
+    </motion.div>
   );
 };