From aa97f5b243845c4c24618d041fac7da71a9ddc45 Mon Sep 17 00:00:00 2001
From: Ayushi Srivastava <ayushirensa@gmail.com>
Date: Wed, 21 Aug 2024 00:33:52 +0530
Subject: [PATCH] Lamp fixed

---
 src/components/ui/lamp.tsx | 38 ++++++++++++++-------------
 src/pages/Home.tsx         | 54 ++++++++++++++++++++------------------
 2 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/src/components/ui/lamp.tsx b/src/components/ui/lamp.tsx
index 6e839eb..9fe143a 100644
--- a/src/components/ui/lamp.tsx
+++ b/src/components/ui/lamp.tsx
@@ -18,9 +18,10 @@ export const LampContainer = ({
       )}
     >
       <div className="relative flex w-full flex-1 scale-y-125 items-center justify-center isolate z-0 ">
+        {/* Adjusting the width based on the screen size */}
         <motion.div
-          initial={{ opacity: 0.5, width: "15rem" }}
-          whileInView={{ opacity: 1, width: "30rem" }}
+          initial={{ opacity: 0.5, width: "10rem" }}
+          whileInView={{ opacity: 1, width: "20rem" }}
           transition={{
             delay: 0.3,
             duration: 0.8,
@@ -29,14 +30,14 @@ 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]"
+          className="absolute inset-auto right-1/2 h-56 overflow-visible sm:w-[20rem] md:w-[25rem] lg: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)]" />
-          <div className="absolute  w-40 h-[100%] left-0 bg-black  bottom-0 z-20 [mask-image:linear-gradient(to_right,white,transparent)]" />
+          <div className="absolute w-[100%] left-0 bg-black h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
+          <div className="absolute w-40 h-[100%] 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" }}
-          whileInView={{ opacity: 1, width: "30rem" }}
+          initial={{ opacity: 0.5, width: "10rem" }}
+          whileInView={{ opacity: 1, width: "20rem" }}
           transition={{
             delay: 0.3,
             duration: 0.8,
@@ -45,36 +46,36 @@ 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]"
+          className="absolute inset-auto left-1/2 h-56 sm:w-[20rem] md:w-[25rem] lg: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)]" />
-          <div className="absolute  w-[100%] right-0 bg-black h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
+          <div className="absolute w-40 h-[100%] right-0 bg-black bottom-0 z-20 [mask-image:linear-gradient(to_left,white,transparent)]" />
+          <div className="absolute w-[100%] 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"></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-[28rem] -translate-y-1/2 rounded-full bg-[#987D39] opacity-50 blur-3xl"></div>
+        <div className="absolute inset-auto z-50 h-36 w-[16rem] sm:w-[20rem] md:w-[24rem] lg:w-[28rem] -translate-y-1/2 rounded-full bg-[#987D39] opacity-50 blur-3xl"></div>
         <motion.div
-          initial={{ width: "8rem" }}
-          whileInView={{ width: "16rem" }}
+          initial={{ width: "6rem" }}
+          whileInView={{ width: "12rem" }}
           transition={{
             delay: 0.3,
             duration: 0.8,
             ease: "easeInOut",
           }}
-          className="absolute inset-auto z-30 h-36 w-64 -translate-y-[6rem] rounded-full bg-[#FFC020] blur-2xl"
+          className="absolute inset-auto z-30 h-36 sm:w-[12rem] md:w-[16rem] lg:w-[20rem] -translate-y-[6rem] rounded-full bg-[#FFC020] blur-2xl"
         ></motion.div>
         <motion.div
-          initial={{ width: "15rem" }}
-          whileInView={{ width: "30rem" }}
+          initial={{ width: "10rem" }}
+          whileInView={{ width: "20rem" }}
           transition={{
             delay: 0.3,
             duration: 0.8,
             ease: "easeInOut",
           }}
-          className="absolute inset-auto z-50 h-0.5 w-[30rem] -translate-y-[7rem] bg-[#FFC020] "
+          className="absolute inset-auto z-50 h-0.5 sm:w-[20rem] md:w-[25rem] lg: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 "></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">
@@ -83,3 +84,4 @@ export const LampContainer = ({
     </div>
   );
 };
+
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index bff67ac..36d4b68 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -4,33 +4,35 @@ import glowing_penguin from "../assets/images/glowing_penguin.svg";
 
 const Home = () => {
   return (
-    <div>
-      <div className="relative min-h-screen overflow-hidden">
-        <LampContainer>
-          <motion.h1
-            initial={{ opacity: 0.5, y: 100 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            transition={{
-              delay: 0.3,
-              duration: 0.8,
-              ease: "easeInOut",
-            }}
-            className="text-center text-white font-semibold font-manrope leading-tight
-                      sm:text-3xl sm:leading-[40px]
-                      md:text-4xl md:leading-[50px]
-                      lg:text-5xl lg:leading-[60px]
-                      xl:text-6xl xl:leading-[70px]"
-          >
-            We appreciate your patience but<br />something really cool is coming soon!
-          </motion.h1>
-        </LampContainer>
-        <img src={glowing_penguin}
-          alt="Glowing Penguin"
-          className="absolute right-0 bottom-[-3%]"
-        />
-      </div>
+    <div className="relative min-h-screen overflow-x-hidden overflow-y-auto">
+      <LampContainer>
+        <motion.h1
+          initial={{ opacity: 0.5, y: 100 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{
+            delay: 0.3,
+            duration: 0.8,
+            ease: "easeInOut",
+          }}
+          className="text-center text-white font-semibold font-manrope leading-tight
+                    text-2xl sm:text-3xl sm:leading-[40px]
+                    md:text-4xl md:leading-[50px]
+                    lg:text-5xl lg:leading-[60px]
+                    xl:text-6xl xl:leading-[70px]"
+        >
+          We appreciate your patience but
+          <br />
+          something really cool is coming soon!
+        </motion.h1>
+      </LampContainer>
+      <img
+        src={glowing_penguin}
+        alt="Glowing Penguin"
+        className="absolute right-0 bottom-[-3%]
+                     w-[50%] sm:w-[40%] md:w-[30%] lg:w-[25%] xl:w-[20%]"
+      />
     </div>
   );
 };
 
-export default Home;
\ No newline at end of file
+export default Home;