website/src/components/Max.astro

87 lines
1.6 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";
import { useTranslations } from "@i18n/utils";
import { getLocale } from "astro-i18n-aut";
const locale = getLocale(Astro.url);
const t = useTranslations(locale);
---
<section class="googley-eye-target">
<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>
<div class="content">
<h1>{t("home.title")}</h1>
<p>{t("home.subtitle")}</p>
</div>
</section>
<style>
.image {
position: relative;
height: 130%;
align-self: end;
overflow: hidden;
border-bottom-left-radius: 20px;
display: flex;
align-items: flex-end;
}
.image > :global(img) {
height: 100%;
object-fit: contain;
object-position: top;
}
section {
position: relative;
margin-top: 100px;
height: 180px;
background-color: var(--background);
border-radius: 0px 20px 0px 20px;
border: solid thin var(--outline);
display: grid;
grid-template-columns: 300px 1fr;
background: var(--background-gradient);
background: linear-gradient(
150deg,
var(--neutral400) 0%,
var(--neutral500) 100%
);
}
.eye {
position: absolute;
}
.eye.left {
top: 25%;
right: 30%;
}
.eye.right {
top: 27%;
right: 15%;
}
.content {
padding: 30px;
padding-left: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>