Skip to content

Commit

Permalink
Merge pull request #32 from celestiaorg/hotfix/flashing-gradient-effe…
Browse files Browse the repository at this point in the history 
…ct-on-firefox

Fix flashing gradienr effect on firefox
  • Loading branch information
@gabros20
gabros20 authored Jan 10, 2025
2 parents 9ef403e + c3c1058 commit 376291f
Show file tree
Hide file tree
Showing 2 changed files with 177 additions and 120 deletions.
89 changes: 89 additions & 0 deletions src/components/Banner/Banner.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
"use client";

import { useBanner } from "@/context/BannerContext";
import TertiaryButton from "@/macros/Buttons/TertiaryButton";
import { useScrollPosition } from "@/utils/scrollLock";

export default function Banner() {
const { isBannerVisible, setIsBannerVisible } = useBanner();
const { menuIsOpen } = useScrollPosition();

if (!isBannerVisible || menuIsOpen) return null;

return (
<div className='relative'>
{/* Background color */}
<div className='absolute inset-0 bg-[#1D013D]' />
{/* Content */}
<div className='relative px-3 py-3 sm:px-6 lg:px-8'>
<div className='flex flex-col justify-center gap-3 md:flex-row'>
<div className='flex justify-between md:items-center'>
<div className='flex items-center'>
<p className='font-medium text-white '>
<span className='sm:hidden'>
<span className='mr-4 text-white text-[15px]'>It&apos;s time to go bigger!</span>
<br />
<span className='text-[#D7B9FF] mr-2 text-[15px]'>Mammothon global hackathon begins</span>
<br />
<span className='mr-2 text-white text-[15px]'>Feb 1</span>
</span>
<span className='hidden sm:inline'>
<span className='text-white'>Time to go bigger!</span>{" "}
<span className='text-[#D7B9FF]'>Mammothon global hackathon begins</span>{" "}
<span className='text-white'>February 1</span>
</span>
</p>
</div>
<button
type='button'
className='flex p-2 -mt-1 -mr-1 transition-all duration-200 rounded-md h-fit md:hidden hover:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2'
onClick={() => setIsBannerVisible(false)}
>
<span className='sr-only'>Dismiss</span>
<svg
className='w-6 h-6 text-white'
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
stroke='currentColor'
>
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M6 18L18 6M6 6l12 12' />
</svg>
</button>
</div>
<div className='flex order-3 w-auto gap-4 mt-2 sm:order-2 sm:mt-0 sm:w-auto'>
<TertiaryButton href='https://mammothon.celestia.org/' size='md'>
<div className='flex items-center justify-center w-full gap-2'>
<span className='flex-shrink-0'>Register Now</span>
<svg
className='flex-shrink-0 size-2.5 text-black transition-all duration-200 group-hover:text-[#00FFFF]'
viewBox='0 0 10 10'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<path d='M1 1L9 1M9 1V9M9 1L1 9' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' />
</svg>
</div>
</TertiaryButton>
<button
type='button'
className='absolute flex p-2 -mr-1 transition-all duration-200 transform -translate-y-1/2 rounded-md right-6 top-1/2 h-fit max-md:hidden hover:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2'
onClick={() => setIsBannerVisible(false)}
>
<span className='sr-only'>Dismiss</span>
<svg
className='w-6 h-6 text-white'
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
stroke='currentColor'
>
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M6 18L18 6M6 6l12 12' />
</svg>
</button>
</div>
</div>
</div>
</div>
);
}
208 changes: 88 additions & 120 deletions src/components/Cards/VerticalTitleCards/VerticalTitleCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,132 +7,100 @@ import { useEffect, useRef, useState } from "react";
import MovingGradients from "@/components/Animation/MovingGradient/MovingGradient";
import { motion, AnimatePresence } from "framer-motion";

const VerticalTitleCard = ({
title,
titleClamp = null,
description,
descriptionClamp = null,
url,
dark = false,
verticalTitle,
}) => {
const [minHeight, setMinHeight] = useState(0);
const verticalTitleRef = useRef(null);
const [isHovering, setIsHovering] = useState(false);
const VerticalTitleCard = ({ title, titleClamp = null, description, descriptionClamp = null, url, dark = false, verticalTitle }) => {
const [minHeight, setMinHeight] = useState(0);
const verticalTitleRef = useRef(null);
const [isHovering, setIsHovering] = useState(false);

const handleMouseEnter = () => {
if (url) {
setIsHovering(true);
}
};
const handleMouseLeave = () => {
if (url) {
setIsHovering(false);
}
};
const handleFocus = () => {
if (url) {
setIsHovering(true);
}
};
const handleBlur = () => {
if (url) {
setIsHovering(false);
}
};
const handleMouseEnter = () => {
if (url) {
setIsHovering(true);
}
};
const handleMouseLeave = () => {
if (url) {
setIsHovering(false);
}
};
const handleFocus = () => {
if (url) {
setIsHovering(true);
}
};
const handleBlur = () => {
if (url) {
setIsHovering(false);
}
};

useEffect(() => {
if (verticalTitleRef.current) {
setMinHeight(verticalTitleRef.current.clientWidth + 3 * 16); // 3rem vertical padding
}
}, [verticalTitleRef]);
useEffect(() => {
if (verticalTitleRef.current) {
setMinHeight(verticalTitleRef.current.clientWidth + 3 * 16); // 3rem vertical padding
}
}, [verticalTitleRef]);

const Tag = url ? Link : "div";
const Tag = url ? Link : "div";

return (
<Tag
href={url}
className={`flex min-w-[85%] md:min-w-0 md:w-full rounded-xl border transition-colors duration-300 delay-0 relative overflow-hidden ${
dark
? "bg-black text-white border-white"
: "bg-white text-black border-black"
}
return (
<Tag
href={url}
className={`flex min-w-[85%] md:min-w-0 md:w-full rounded-xl border transition-colors duration-300 delay-0 relative overflow-hidden ${
dark ? "bg-black text-white border-white" : "bg-white text-black border-black"
}
${url ? "group md:hover:border-black md:hover:text-black" : ""}
`}
style={{ minHeight: minHeight }}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onFocus={handleFocus}
onBlur={handleBlur}
>
<AnimatePresence>
{isHovering && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-transparent to-black opacity-0 md:group-hover:opacity-100 transition-opacity duration-500"
>
<MovingGradients />
</motion.div>
)}
</AnimatePresence>
<div
className={`w-[60px] relative border-r grow-0 shrink-0 flex items-end align-middle transition-all duration-300 md:group-hover:border-black z-10 ${
dark
? "border-white group-hover:border-black"
: "border-black group-hover:border-black"
}`}
>
<div ref={verticalTitleRef}>
<Heading
tag={"h3"}
size={"sm"}
className={`block whitespace-nowrap -rotate-90 origin-top-left ml-2.5 -mb-2.5 transition-none md:group-hover:text-black delay-0`}
>
{verticalTitle}
</Heading>
</div>
</div>
<div className={`py-6 px-10 flex flex-col w-full z-10`}>
{url && (
<Icon
Icon={<ArrowLongSVG dark={true} />}
hover
dark
HoverIcon={<ArrowLongSVG dark={false} />}
className={`flex-grow-0 self-end -mr-4 mb-28 md:group-hover:!bg-black`}
direction={`top-right`}
border
size={"lg"}
/>
)}
<div className={"mt-auto mb-0 self-end"}>
{title && (
<Heading
size={"sm"}
tag={"h4"}
className={`text-pretty mb-3 ${
titleClamp ? `line-clamp-${titleClamp}` : ""
}`}
>
{title}
</Heading>
)}
{description && (
<Body
size={"md"}
className={`text-pretty ${
descriptionClamp ? `line-clamp-${descriptionClamp}` : ""
}`}
>
{description}
</Body>
)}
</div>
</div>
</Tag>
);
style={{ minHeight: minHeight }}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onFocus={handleFocus}
onBlur={handleBlur}
>
<div className={`absolute top-0 left-0 w-full h-full transition-opacity duration-300 ${isHovering ? "opacity-100" : "opacity-0"}`}>
<MovingGradients />
</div>
<div
className={`w-[60px] relative border-r grow-0 shrink-0 flex items-end align-middle transition-all duration-300 md:group-hover:border-black z-10 ${
dark ? "border-white group-hover:border-black" : "border-black group-hover:border-black"
}`}
>
<div ref={verticalTitleRef}>
<Heading
tag={"h3"}
size={"sm"}
className={`block whitespace-nowrap -rotate-90 origin-top-left ml-2.5 -mb-2.5 transition-none md:group-hover:text-black delay-0`}
>
{verticalTitle}
</Heading>
</div>
</div>
<div className={`py-6 px-10 flex flex-col w-full z-10`}>
{url && (
<Icon
Icon={<ArrowLongSVG dark={true} />}
hover
dark
HoverIcon={<ArrowLongSVG dark={false} />}
className={`flex-grow-0 self-end -mr-4 mb-28 md:group-hover:!bg-black`}
direction={`top-right`}
border
size={"lg"}
/>
)}
<div className={"mt-auto mb-0 self-end"}>
{title && (
<Heading size={"sm"} tag={"h4"} className={`text-pretty mb-3 ${titleClamp ? `line-clamp-${titleClamp}` : ""}`}>
{title}
</Heading>
)}
{description && (
<Body size={"md"} className={`text-pretty ${descriptionClamp ? `line-clamp-${descriptionClamp}` : ""}`}>
{description}
</Body>
)}
</div>
</div>
</Tag>
);
};

export default VerticalTitleCard;

0 comments on commit 376291f

Please sign in to comment.