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
|
|
|
|
classes="googley-eye-target relative rounded-diag-md border border-light gradient grid grid-cols-[250px_1fr] h-[180px] my-8xl"
|
|
|
|
>
|
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;
|
|
|
|
}
|
|
|
|
|
|
|
|
.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%;
|
|
|
|
right: 27%;
|
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>
|