Skip to content

Commit

Permalink
Lamp fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@AyushiSrivastava11
AyushiSrivastava11 committed Aug 20, 2024
1 parent 5198fb1 commit aa97f5b
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 44 deletions.
38 changes: 20 additions & 18 deletions src/components/ui/lamp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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">
Expand All @@ -83,3 +84,4 @@ export const LampContainer = ({
</div>
);
};

54 changes: 28 additions & 26 deletions src/pages/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
export default Home;

0 comments on commit aa97f5b

Please sign in to comment.