83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
import { useTranslations } from "next-intl";
|
|
import { TypographyH1, TypographyLead } from "../../components/ui/typography";
|
|
import { Badge } from "../../components/ui/badge";
|
|
import { Mail, MapPin, Phone } from "lucide-react";
|
|
import Image from "next/image";
|
|
import { Button } from "../../components/ui/button";
|
|
import { InstagramIcon } from "../../components/icons/instagram";
|
|
import { LinkedInIcon } from "../../components/icons/linkedin";
|
|
import { FacebookIcon } from "../../components/icons/facebook";
|
|
|
|
export default function Home() {
|
|
const t = useTranslations();
|
|
|
|
return (
|
|
<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>
|
|
<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 className="flex flex-col gap-4">
|
|
<div className="flex justify-center gap-3">
|
|
<Button variant="outline">
|
|
<Mail/>
|
|
nico@byhaider.dev
|
|
</Button>
|
|
<Button variant="outline">
|
|
<Phone/>
|
|
+43 670 2060140
|
|
</Button>
|
|
</div>
|
|
<div className="flex gap-3 justify-center">
|
|
<Button asChild variant="ghost" size="icon">
|
|
<a
|
|
href="https://www.linkedin.com/in/nico-haider-164444316"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="LinkedIn"
|
|
>
|
|
<LinkedInIcon className="size-5" />
|
|
</a>
|
|
</Button>
|
|
<Button asChild variant="ghost" size="icon">
|
|
<a
|
|
href="https://www.instagram.com/nico.hdr8/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Instagram"
|
|
>
|
|
<InstagramIcon className="size-5" />
|
|
</a>
|
|
</Button>
|
|
<Button asChild variant="ghost" size="icon">
|
|
<a
|
|
href="https://www.facebook.com/nico.haider.33/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Facebook"
|
|
>
|
|
<FacebookIcon className="size-5" />
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|