website/src/components/Max.astro

78 lines
1.5 KiB
Plaintext
Raw Normal View History

2024-03-27 01:51:42 +01:00
---
import MaxImg from "./Max.png";
import Image from "./Image.astro";
import GoogleyEye from "./GoogleyEye.svelte";
2024-03-28 18:30:52 +01:00
import { Card } from "./card";
2024-03-27 01:51:42 +01:00
import { useTranslations } from "@i18n/utils";
2024-03-28 18:30:52 +01:00
const t = useTranslations(Astro);
2024-03-27 01:51:42 +01:00
---
2024-03-28 18:30:52 +01:00
<Card
2024-04-03 14:27:48 +02:00
classes="googley-eye-target relative rounded-diag-md border border-neutral gradient grid grid-cols-[250px_1fr] h-[180px] mt-8"
2024-03-28 18:30:52 +01:00
>
2024-03-27 01:51:42 +01:00
<div class="image">
<Image src={MaxImg} alt="its mee" maxWidth={700} />
<div class="eye right">
<GoogleyEye client:load />
</div>
<div class="eye left">
<GoogleyEye client:load />
</div>
</div>
2024-03-28 18:30:52 +01:00
<div class="content gap-2">
<h1 class="text-2xl">{t("home.title")}</h1>
2024-03-27 01:51:42 +01:00
<p>{t("home.subtitle")}</p>
</div>
2024-03-28 18:30:52 +01:00
</Card>
2024-03-27 01:51:42 +01:00
<style>
.image {
position: relative;
height: 130%;
align-self: end;
overflow: hidden;
2024-03-28 18:30:52 +01:00
border-bottom-left-radius: var(--border-radius-md);
2024-03-27 01:51:42 +01:00
display: flex;
align-items: flex-end;
}
2024-04-03 14:27:48 +02:00
.image::before {
content: "";
position: absolute;
height: 80%;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(-12deg, var(--background) 0%, transparent 50%);
}
2024-03-27 01:51:42 +01:00
.image > :global(img) {
height: 100%;
object-fit: contain;
2024-03-28 18:30:52 +01:00
object-position: bottom;
2024-03-27 01:51:42 +01:00
}
.eye {
position: absolute;
}
.eye.left {
2024-03-28 18:30:52 +01:00
top: 29%;
2024-04-03 14:27:48 +02:00
right: 28%;
2024-03-27 01:51:42 +01:00
}
.eye.right {
2024-03-28 18:30:52 +01:00
top: 31%;
right: 12%;
2024-03-27 01:51:42 +01:00
}
.content {
padding: 30px;
padding-left: 15px;
display: flex;
flex-direction: column;
2024-03-28 18:30:52 +01:00
justify-content: space-around;
2024-03-27 01:51:42 +01:00
}
</style>