feat: some shit?

src/components/HeroCard.astro

@@ -32,9 +32,9 @@ const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
 ---
 
 <Card
-  classes={`grid gradient border-1 border-neutral overflow-hidden  ${cover ? "grid-rows-[200px_1fr] sm:grid-rows-none sm:grid-cols-[1fr_200px]" : ""}`}
+  classes={`grid gradient border-1 border-neutral overflow-hidden  ${cover ? "grid-rows-[200px_1fr] xs:grid-rows-none xs:grid-cols-[1fr_200px]" : ""}`}
 >
-  <Card.Content classes="px-8 py-7 order-last sm:order-first">
+  <Card.Content classes="px-8 py-7 order-last xs:order-first">
     <Card.Title classes="text-4xl flex items-center gap-2">
       {icon && <img src={icon} class="h-6" />}
       {title}

src/components/Image.astro

@@ -5,6 +5,7 @@ import { generateThumbHash } from "@helpers/image";
 interface Props {
   src: ImageMetadata;
   alt: string;
+  pictureClass?: string;
   class?: string;
   caption?: string;
   hash?: boolean;
@@ -12,7 +13,14 @@ interface Props {
   maxWidth?: number;
 }
 
-const { src: image, loader = true, hash = true, alt, maxWidth } = Astro.props;
+const {
+  src: image,
+  loader = true,
+  pictureClass = "",
+  hash = true,
+  alt,
+  maxWidth,
+} = Astro.props;
 
 let thumbhash = hash ? await generateThumbHash(image) : "";
 
@@ -40,7 +48,7 @@ const sizes = [
   alt={alt}
   data-thumbhash={thumbhash}
   pictureAttributes={{
-    class: `${hash ? "block h-full relative" : ""} ${loader ? "thumb" : ""}`,
+    class: `${hash ? "block h-full relative" : ""} ${loader ? "thumb" : ""} ${pictureClass}`,
   }}
   class={Astro.props.class}
   widths={sizes.map((size) => size.width)}

src/components/LanguagePicker.astro

@@ -24,19 +24,15 @@ const flags = {
 const t = useTranslations(Astro.url);
 ---
 
-<ul class="flex items-center gap-4">
-  {
-    Object.entries(locales).map(([lang, label]) => (
-      <li>
-        <a
-          class="flex gap-2 items-center"
-          href={translatePath(lang)}
-          data-astro-prefetch
-        >
-          <span class="text-xs">{flags[label as keyof typeof flags]}</span>
-          {t(label as "de")}
-        </a>
-      </li>
-    ))
-  }
-</ul>
+{
+  Object.entries(locales).map(([lang, label]) => (
+    <a
+      class="flex gap-2 items-center"
+      href={translatePath(lang)}
+      data-astro-prefetch
+    >
+      <span class="text-xs">{flags[label as keyof typeof flags]}</span>
+      {t(label as "de")}
+    </a>
+  ))
+}

src/components/Max.astro

@@ -10,12 +10,15 @@ const t = useTranslations(Astro.url);
 ---
 
 <Card
-  classes="googley-eye-target relative rounded-diag-md border border-neutral gradient grid grid-cols-[250px_1fr] h-[180px] mt-8"
+  classes="googley-eye-target relative rounded-diag-md border border-neutral gradient grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8"
 >
-  <div class="image">
+  <div
+    class="image relative h-[130%] self-end items-end flex overflow-hidden order-last xs:order-first"
+  >
     <Image
       src={MaxImg}
       alt="its mee"
+      class="object-bottom h-full object-cover w-1/2 xs:w-full"
       hash={false}
       maxWidth={700}
       loader={false}
@@ -28,7 +31,7 @@ const t = useTranslations(Astro.url);
     </div>
   </div>
 
-  <div class="content gap-2">
+  <div class="content flex flex-col p-8 pl-4 gap-2 justify-center">
     <h1 class="text-2xl">{t("home.title")}</h1>
     <p>{t("home.subtitle")}</p>
   </div>
@@ -36,13 +39,11 @@ const t = useTranslations(Astro.url);
 
 <style>
   .image {
-    position: relative;
-    height: 130%;
-    align-self: end;
-    overflow: hidden;
     border-bottom-left-radius: var(--border-radius-md);
-    display: flex;
-    align-items: flex-end;
+  }
+
+  .googley-eye-target {
+    height: calc(100% - 30px);
   }
 
   .image::before {
@@ -72,12 +73,4 @@ const t = useTranslations(Astro.url);
     top: 31%;
     right: 12%;
   }
-
-  .content {
-    padding: 30px;
-    padding-left: 15px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-  }
 </style>

src/components/SmallGrid.astro

@@ -0,0 +1,3 @@
+<div class="grid xs:grid-cols-2 gap-4 mt-4">
+  <slot />
+</div>

src/components/arrows/ArrowA.astro

@@ -3,7 +3,7 @@ import { useTranslations } from "@i18n/utils";
 const t = useTranslations(Astro.url);
 ---
 
-<div class="arrow flex items-center gap-2">
+<div class="arrow items-center gap-2 hidden lg:flex">
   <img src="/images/arrow_a.svg" alt="Arrow" />
   <p class="text-xl">{t("latest-projects")}</p>
 </div>

src/components/arrows/ArrowB.astro

@@ -3,7 +3,7 @@ import { useTranslations } from "@i18n/utils";
 const t = useTranslations(Astro.url);
 ---
 
-<div class="arrow flex items-center gap-2">
+<div class="arrow items-center gap-2 hidden lg:flex">
   <p class="text-xl">{t("latest-posts")}</p>
   <img src="/images/arrow_b.svg" alt="Arrow" />
 </div>