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

chore: Update profile color in features component

Browse Source
This commit is contained in:
Mauro Balades
2024-07-23 00:05:32 +02:00
parent de428dbd46
commit 9fc73f06f3
2 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/features.tsx
View File

@@ -67,7 +67,7 @@ export default function Features() {
setProfile2Enter(currentProfile === 1); setProfile2Enter(currentProfile === 1);
setProfile3Enter(currentProfile === 2); setProfile3Enter(currentProfile === 2);
setCurrentProfileColor(profileColors[currentProfile]); setCurrentProfileColor(profileColors[currentProfile]);
}, 3500); }, 2500);
}, []); }, []);
return ( return (
<div> <div>

20
src/components/header.tsx
View File

@@ -8,11 +8,20 @@ import ShinyButton from "./ui/shiny-button";
import GridPattern from "./ui/grid-pattern"; import GridPattern from "./ui/grid-pattern";
import BlurIn from "./ui/blur-in"; import BlurIn from "./ui/blur-in";
import { FadeText } from "./ui/fade-text"; import { FadeText } from "./ui/fade-text";
import styled, { keyframes } from "styled-components";
const HeaderElement = styled.div`
background: light-dark(white, rgba(0, 0, 0, 0.5));
`;
export default function Header() { export default function Header() {
return ( return (
<> <>
<div className="w-full relative flex h-screen justify-center flex-col align-center"> <div className="absolute top-3/4 z-10">
<img src="/browser-dark.png" className={ny('hidden dark:block mx-auto shadow-sm border mt-24 z-0 w-4/5 rounded-xl overflow-hidden')} />
<img src="/browser-light.png" className={ny('dark:hidden mx-auto shadow-sm border mt-24 z-0 w-4/5 rounded-xl overflow-hidden')} />
</div>
<HeaderElement className="w-full relative flex h-screen justify-center flex-col align-center border-b">
<GridPattern <GridPattern
numSquares={30} numSquares={30}
maxOpacity={0.5} maxOpacity={0.5}
@@ -40,7 +49,7 @@ export default function Header() {
`inline animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`, `inline animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
)} )}
> >
Introducing Zen Beta Introducing Zen Alpha
</span> </span>
<ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" /> <ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
</AnimatedGradientText> </AnimatedGradientText>
@@ -69,12 +78,7 @@ export default function Header() {
<ShinyButton text="Download now" /> <ShinyButton text="Download now" />
</a> </a>
</div> </div>
<ChevronDown className="absolute bottom-5 left-1/2 size-7 mb-10 animate-bounce" style={{ </HeaderElement>
transform: 'translateX(-50%)',
}} />
</div>
<img src="/browser-dark.png" className={ny('hidden dark:block mx-auto shadow mt-24 z-0 w-3/4 rounded-xl overflow-hidden border-2 border-blue-500')} />
<img src="/browser-light.png" className={ny('dark:hidden mx-auto shadow mt-24 z-0 w-3/4 rounded-xl overflow-hidden border-2 border-blue-500')} />
</> </>
) )
} }