diff options
| author | Linnea Gräf <nea@nea.moe> | 2024-11-17 03:02:24 +0100 |
|---|---|---|
| committer | Linnea Gräf <nea@nea.moe> | 2024-11-17 04:01:42 +0100 |
| commit | 46e436ca043c7a969e3296b368cc4a14550e375c (patch) | |
| tree | 80d13bd80402768296a794fe5927992be2ab7a5a /web/src/components/Hero.astro | |
| parent | 5cfe3b72609a361abad791cb95ade2d8e7af0181 (diff) | |
| download | Firmament-46e436ca043c7a969e3296b368cc4a14550e375c.tar.gz Firmament-46e436ca043c7a969e3296b368cc4a14550e375c.tar.bz2 Firmament-46e436ca043c7a969e3296b368cc4a14550e375c.zip | |
feat(web): Add hero image and navbar
Diffstat (limited to 'web/src/components/Hero.astro')
| -rw-r--r-- | web/src/components/Hero.astro | 19 |
1 files changed, 19 insertions, 0 deletions
diff --git a/web/src/components/Hero.astro b/web/src/components/Hero.astro index e69de29..94c7e34 100644 --- a/web/src/components/Hero.astro +++ b/web/src/components/Hero.astro @@ -0,0 +1,19 @@ +--- +import {type ImageMetadata} from "astro"; +import {Picture} from "astro:assets"; + +export type Props = { + image: ImageMetadata, + alt: string +} +--- +<div class="relative text-white overflow-hidden h-80"> + <div class="inset-0 absolute pointer-events-none"> + <Picture src={Astro.props.image} alt={Astro.props.alt} + class="object-cover object-center w-full h-full"></Picture> + <div class="absolute inset-0 bg-black opacity-30"></div> + </div> + <div class="relative z-10 flex flex-col justify-center items-center h-full text-center"> + <slot/> + </div> +</div> |