feat: add some stuff

src/components/Max.astro

@@ -2,17 +2,16 @@
 import MaxImg from "./Max.png";
 import Image from "./Image.astro";
 import GoogleyEye from "./GoogleyEye.svelte";
+import { Card } from "./card";
 
 import { useTranslations } from "@i18n/utils";
 
-import { getLocale } from "astro-i18n-aut";
-
-const locale = getLocale(Astro.url);
-
-const t = useTranslations(locale);
+const t = useTranslations(Astro);
 ---
 
-<section class="googley-eye-target">
+<Card
+  classes="googley-eye-target relative rounded-diag-md border border-light gradient grid grid-cols-[250px_1fr] h-[180px] my-8xl"
+>
   <div class="image">
     <Image src={MaxImg} alt="its mee" maxWidth={700} />
     <div class="eye right">
@@ -23,11 +22,11 @@ const t = useTranslations(locale);
     </div>
   </div>
 
-  <div class="content">
-    <h1>{t("home.title")}</h1>
+  <div class="content gap-2">
+    <h1 class="text-2xl">{t("home.title")}</h1>
     <p>{t("home.subtitle")}</p>
   </div>
-</section>
+</Card>
 
 <style>
   .image {
@@ -35,7 +34,7 @@ const t = useTranslations(locale);
     height: 130%;
     align-self: end;
     overflow: hidden;
-    border-bottom-left-radius: 20px;
+    border-bottom-left-radius: var(--border-radius-md);
     display: flex;
     align-items: flex-end;
   }
@@ -43,37 +42,19 @@ const t = useTranslations(locale);
   .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%
-    );
+    object-position: bottom;
   }
 
   .eye {
     position: absolute;
   }
-
   .eye.left {
-    top: 25%;
-    right: 30%;
+    top: 29%;
+    right: 27%;
   }
   .eye.right {
-    top: 27%;
-    right: 15%;
+    top: 31%;
+    right: 12%;
   }
 
   .content {
@@ -81,6 +62,6 @@ const t = useTranslations(locale);
     padding-left: 15px;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: space-around;
   }
 </style>