joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor CoolHeaderText component

Browse Source
This commit is contained in:
mauro-balades
2024-10-08 22:50:24 +02:00
parent e154c00019
commit 9bed00c10a
1 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/cool-header-text.tsx
View File

@@ -18,6 +18,8 @@ const TextTitle = styled.h1`
filter: hue-rotate(0deg); filter: hue-rotate(0deg);
animation: ${hueShift} 10s infinite linear 1s; animation: ${hueShift} 10s infinite linear 1s;
padding-bottom: 8px; padding-bottom: 8px;
user-select: none;
cursor: default;
`; `;
export default function CoolHeaderText() { export default function CoolHeaderText() {
@@ -25,7 +27,7 @@ export default function CoolHeaderText() {
<> <>
<div className="relative mb-3 mt-5 -translate-y-4 animate-fade-in text-balance bg-gradient-to-br from-30% to-black/40 bg-clip-text py-6 text-5xl font-extrabold font-semibold leading-none tracking-tighter text-transparent opacity-0 [--animation-delay:200ms] dark:from-white dark:to-white/40 sm:text-6xl md:text-7xl lg:text-8xl"> <div className="relative mb-3 mt-5 -translate-y-4 animate-fade-in text-balance bg-gradient-to-br from-30% to-black/40 bg-clip-text py-6 text-5xl font-extrabold font-semibold leading-none tracking-tighter text-transparent opacity-0 [--animation-delay:200ms] dark:from-white dark:to-white/40 sm:text-6xl md:text-7xl lg:text-8xl">
<TextTitle> <TextTitle>
Stay focused, browse faster with Zen 🚀 Stay focused, browse faster with Zen
</TextTitle> </TextTitle>
</div> </div>
<div className="pointer-events-none absolute right-20 top-[-5px] mt-12 hidden h-fit w-fit !rotate-[15deg] transform animate-fade-in rounded-full bg-blue-500 px-3 py-1 text-white opacity-0 shadow [--animation-delay:400ms] md:block"> <div className="pointer-events-none absolute right-20 top-[-5px] mt-12 hidden h-fit w-fit !rotate-[15deg] transform animate-fade-in rounded-full bg-blue-500 px-3 py-1 text-white opacity-0 shadow [--animation-delay:400ms] md:block">