54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
import { useTranslations } from "next-intl";
|
|
import { TypographyH1, TypographyLead } from "../../components/ui/typography";
|
|
import { Badge } from "../../components/ui/badge";
|
|
import { Apple, Mail, MapPin, Phone } from "lucide-react";
|
|
import Image from "next/image";
|
|
import { Button } from "../../components/ui/button";
|
|
|
|
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">
|
|
{/* TODO: social media icons and links */}
|
|
<Button variant="ghost"><Apple/></Button>
|
|
<Button variant="ghost"><Apple/></Button>
|
|
<Button variant="ghost"><Apple/></Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|