49 lines
1.1 KiB
Plaintext
49 lines
1.1 KiB
Plaintext
---
|
|
import Logo from "components/Logo.astro";
|
|
---
|
|
|
|
<header id="main-header">
|
|
<div class="inner-container">
|
|
<Logo />
|
|
<button id="get-started-button" class="button">Get Started</button>
|
|
</div>
|
|
</header>
|
|
<script>
|
|
import { animate } from "motion";
|
|
import { ease } from "@unom/style";
|
|
|
|
const getStartedButton = document.getElementById("get-started-button");
|
|
const header = document.getElementById("main-header");
|
|
|
|
if (header) {
|
|
animate(header, { opacity: [0, 1], y: ["-101%", 0] }, ease.quart(0.6).out);
|
|
}
|
|
|
|
if (getStartedButton) {
|
|
animate(
|
|
getStartedButton,
|
|
{ scale: [0, 1] },
|
|
{ ...ease.quart(0.6).out, delay: 0 }
|
|
);
|
|
}
|
|
</script>
|
|
<style lang="postcss">
|
|
header {
|
|
position: fixed;
|
|
width: 100%;
|
|
top: 2rem;
|
|
z-index: 99;
|
|
|
|
& .inner-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
border-radius: 100px;
|
|
margin: auto;
|
|
max-width: var(--content-max-width);
|
|
padding: var(--padding-main);
|
|
background-color: var(--color-neutral-accent);
|
|
}
|
|
}
|
|
</style>
|