feat(landing-page): add title/subtitle and img (including styling)

app/[locale]/page.tsx

@@ -1,6 +1,32 @@
+import { useTranslations } from "next-intl";
+import { TypographyH1, TypographyLead } from "../../components/ui/typography";
+import { Badge } from "../../components/ui/badge";
+import { MapPin } from "lucide-react";
+import Image from "next/image";
+
 export default function Home() {
+  const t = useTranslations();
+  
   return (
-    <div className="flex flex-col flex-1">
+    <div className="flex flex-row flex-wrap gap-x-20 gap-y-10 justify-center items-center py-10 px-5 md:px-10 lg:px-0">
+      <div className="flex flex-col gap-5 w-full basis-full items-center text-center lg:basis-[40%] lg:items-start lg:text-left">
+        <TypographyH1>{t('landingPage.title')}</TypographyH1>
+        <TypographyLead>{t('landingPage.subtitle')}</TypographyLead>
+        <Badge variant="secondary">
+          <MapPin/>
+          {t('landingPage.location')}
+        </Badge>
+      </div>
+      <Image
+        src="/me.png"
+        alt="Picture of me"
+        width={380}
+        height={380}
+        style={{
+          filter: "drop-shadow(10px 0 25px rgb(from color-mix(in oklch, var(--foreground) 9%, transparent) r g b / .05))",
+        }}
+        className="mask-[linear-gradient(to_bottom,#000_80%,#0000)]"
+      />
     </div>
   );
 }