87 lines
1.6 KiB
Plaintext
87 lines
1.6 KiB
Plaintext
|
---
|
||
|
|
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>
|