65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
import { ArrowUpRight, Mail } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { AppCard } from "@/components/ui/app-card";
|
|
import type { ContactCtaSectionCopy } from "./types";
|
|
|
|
type ContactCtaSectionProps = {
|
|
copy: ContactCtaSectionCopy;
|
|
contactHref: string;
|
|
};
|
|
|
|
export function ContactCtaSection({
|
|
copy,
|
|
contactHref,
|
|
}: ContactCtaSectionProps) {
|
|
return (
|
|
<section>
|
|
<AppCard className="overflow-hidden">
|
|
<div className="grid gap-6 rounded-nested border border-border/70 bg-background p-6 sm:p-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end lg:p-10">
|
|
<div className="space-y-4">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
|
|
{copy.eyebrow}
|
|
</p>
|
|
<h2 className="max-w-3xl text-balance text-3xl font-semibold tracking-[-0.05em] text-foreground sm:text-4xl lg:text-5xl">
|
|
{copy.title}
|
|
</h2>
|
|
<p className="max-w-2xl text-sm leading-7 text-muted-foreground sm:text-base">
|
|
{copy.description}
|
|
</p>
|
|
|
|
<div className="flex flex-wrap gap-6 text-sm">
|
|
<div className="space-y-1">
|
|
<p className="font-semibold text-foreground">{copy.emailLabel}</p>
|
|
<a href={`mailto:${copy.emailValue}`} className="text-muted-foreground hover:text-foreground">
|
|
{copy.emailValue}
|
|
</a>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="font-semibold text-foreground">{copy.availabilityLabel}</p>
|
|
<p className="text-muted-foreground">{copy.availabilityValue}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-3 lg:justify-end">
|
|
<Button asChild size="lg">
|
|
<Link href={contactHref}>
|
|
{copy.contactCta}
|
|
<Mail className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
<Button asChild size="lg" variant="outline">
|
|
<a href={copy.githubHref} target="_blank" rel="noreferrer">
|
|
{copy.githubCta}
|
|
<ArrowUpRight className="h-4 w-4" />
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</AppCard>
|
|
</section>
|
|
);
|
|
}
|