Revert "Removed Penguin Mascot."

This reverts commit a079b4b.
ArkTechOrg · Aug 24, 2024 · d89da51 · d89da51
1 parent a079b4b
commit d89da51
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/src/components/ui/lamp.tsx b/src/components/ui/lamp.tsx
@@ -29,10 +29,10 @@ export const LampContainer = ({
           style={{
             backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
           }}
-          className="absolute inset-auto right-1/2 h-56 overflow-visible w-[30rem] bg-gradient-conic from-[#B49955] via-transparent to-transparent text-white [--conic-position:from_70deg_at_center_top] sm:w-[20rem] sm:h-40"
+          className="absolute inset-auto right-1/2 h-56 overflow-visible w-[80vw] max-w-[30rem] bg-gradient-conic from-[#B49955] via-transparent to-transparent text-white [--conic-position:from_70deg_at_center_top]"
         >
-          <div className="absolute w-[100%] left-0 bg-black h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)] sm:h-24" />
-          <div className="absolute w-40 h-[100%] left-0 bg-black bottom-0 z-20 [mask-image:linear-gradient(to_right,white,transparent)] sm:w-24" />
+          <div className="absolute w-full left-0 bg-black h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
+          <div className="absolute w-40 h-full left-0 bg-black bottom-0 z-20 [mask-image:linear-gradient(to_right,white,transparent)]" />
         </motion.div>
         <motion.div
           initial={{ opacity: 0.5, width: "15rem" }}
@@ -45,14 +45,14 @@ export const LampContainer = ({
           style={{
             backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
           }}
-          className="absolute inset-auto left-1/2 h-56 w-[30rem] bg-gradient-conic from-transparent via-transparent to-[#B49955] text-white [--conic-position:from_290deg_at_center_top] sm:w-[20rem] sm:h-40"
+          className="absolute inset-auto left-1/2 h-56 w-[80vw] max-w-[30rem] bg-gradient-conic from-transparent via-transparent to-[#B49955] text-white [--conic-position:from_290deg_at_center_top]"
         >
-          <div className="absolute w-40 h-[100%] right-0 bg-black bottom-0 z-20 [mask-image:linear-gradient(to_left,white,transparent)] sm:w-24" />
-          <div className="absolute w-[100%] right-0 bg-black h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)] sm:h-24" />
+          <div className="absolute w-40 h-full right-0 bg-black bottom-0 z-20 [mask-image:linear-gradient(to_left,white,transparent)]" />
+          <div className="absolute w-full right-0 bg-black h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
         </motion.div>
-        <div className="absolute top-1/2 h-48 w-full translate-y-12 scale-x-150 bg-black blur-2xl sm:h-32"></div>
-        <div className="absolute top-1/2 z-50 h-48 w-full bg-transparent opacity-10 backdrop-blur-md sm:h-32"></div>
-        <div className="absolute inset-auto z-50 h-36 w-[28rem] -translate-y-1/2 rounded-full bg-[#987D39] opacity-50 blur-3xl sm:w-[18rem] sm:h-24"></div>
+        <div className="absolute top-1/2 h-48 w-full translate-y-12 scale-x-150 bg-black blur-2xl"></div>
+        <div className="absolute top-1/2 z-50 h-48 w-full bg-transparent opacity-10 backdrop-blur-md"></div>
+        <div className="absolute inset-auto z-50 h-36 w-[70vw] max-w-[28rem] -translate-y-1/2 rounded-full bg-[#987D39] opacity-50 blur-3xl"></div>
         <motion.div
           initial={{ width: "8rem" }}
           whileInView={{ width: "16rem" }}
@@ -61,7 +61,7 @@ export const LampContainer = ({
             duration: 0.8,
             ease: "easeInOut",
           }}
-          className="absolute inset-auto z-30 h-36 w-64 -translate-y-[6rem] rounded-full bg-[#FFC020] blur-2xl sm:w-40 sm:h-24"
+          className="absolute inset-auto z-30 h-36 w-[40vw] max-w-64 -translate-y-[6rem] rounded-full bg-[#FFC020] blur-2xl"
         ></motion.div>
         <motion.div
           initial={{ width: "15rem" }}
@@ -71,13 +71,13 @@ export const LampContainer = ({
             duration: 0.8,
             ease: "easeInOut",
           }}
-          className="absolute inset-auto z-50 h-0.5 w-[30rem] -translate-y-[7rem] bg-[#FFC020] sm:w-[20rem]"
+          className="absolute inset-auto z-50 h-0.5 w-[80vw] max-w-[30rem] -translate-y-[7rem] bg-[#FFC020] "
         ></motion.div>
 
-        <div className="absolute inset-auto z-40 h-44 w-full -translate-y-[12.5rem] bg-black sm:h-28"></div>
+        <div className="absolute inset-auto z-40 h-44 w-full -translate-y-[12.5rem] bg-black "></div>
       </div>
 
-      <div className="relative z-50 flex -translate-y-80 flex-col items-center px-5 sm:-translate-y-40">
+      <div className="relative z-50 flex -translate-y-80 flex-col items-center px-5">
         {children}
       </div>
     </div>

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,5 +1,6 @@
 import { LampContainer } from "../components/ui/lamp";
 import { motion } from "framer-motion";
+import glowing_penguin from "../assets/images/glowing_penguin.svg";
 
 const Home = () => {
   return (
@@ -25,6 +26,11 @@ const Home = () => {
             something really cool is coming soon!
           </motion.h1>
         </LampContainer>
+        <img
+          src={glowing_penguin}
+          alt="Glowing Penguin"
+          className="absolute right-0 bottom-[-5vh] w-[50vw] max-w-[400px] md:bottom-[-3%] md:w-[30vw] lg:w-[25vw]"
+        />
       </div>
     </div>
   );