Mathew
9b6638eb00
Deploy / deploy (push) Successful in 1m13s
Deux courbes partagées dans lib/motion.ts, pour que le CSS et Framer aient le même feeling, et quatre primitives que Tailwind ne sait pas exprimer : reflet de bouton, halo qui suit le curseur, soulignement qui se dessine, secousse d'erreur. Nouveaux composants : Stagger (les collections se distribuent une par une), Spotlight (trouve son parent tout seul, donc les cartes restent des composants serveur), ScrollProgress, BackToTop, Parallax, Spinner, CheckMark. Reveal accepte maintenant une direction. Côté rendu : le trait de nav glisse d'un onglet à l'autre, les cartes se soulèvent, le hero réagit au scroll, les piliers entrent en zig-zag, la lightbox glisse dans le sens demandé et les formulaires répondent. prefers-reduced-motion est respecté partout : Framer coupe via useReducedMotion, le CSS via la media query déjà en place. Le commit embarque aussi la réorganisation des composants par domaine qui était en cours dans l'arbre de travail — les deux étaient trop imbriquées pour être séparées proprement. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
102 lines
4.0 KiB
TypeScript
102 lines
4.0 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { PageHeader } from "../components/ui/PageHeader";
|
|
import { Section } from "../components/ui/Section";
|
|
import { ButtonLink } from "../components/ui/ButtonLink";
|
|
import { ContactForm } from "../components/forms/ContactForm";
|
|
import { SocialLinks } from "../components/layout/SocialLinks";
|
|
import { CONTACT_CHANNELS } from "@/lib/site";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Contact",
|
|
description: "Get in touch with Highland Games Studio.",
|
|
};
|
|
|
|
const pressEmail =
|
|
CONTACT_CHANNELS.find((channel) => channel.label === "PRESS")?.email ??
|
|
CONTACT_CHANNELS[0].email;
|
|
|
|
/**
|
|
* Contact.
|
|
*
|
|
* The page used to stack three sections of identical weight — three mailto
|
|
* cards, then the form, then a press-kit block — which offered four ways to do
|
|
* one thing and ranked none of them. Now the form is the page, and every
|
|
* alternative sits in a column beside it: same information, one obvious
|
|
* default.
|
|
*/
|
|
export default function ContactPage() {
|
|
return (
|
|
<>
|
|
<PageHeader
|
|
eyebrow="GET IN TOUCH"
|
|
title="SAY HELLO."
|
|
lead="Press inquiries, business opportunities, fan messages. All are welcome. We're three people, so answers take a few days, but they always come."
|
|
/>
|
|
|
|
<Section top="none">
|
|
<div className="grid gap-12 lg:grid-cols-[1.35fr_0.65fr] lg:gap-16">
|
|
<div>
|
|
<h2 className="mb-8 font-display text-2xl tracking-wider sm:text-3xl">
|
|
SEND US A MESSAGE
|
|
</h2>
|
|
<ContactForm />
|
|
</div>
|
|
|
|
<aside className="flex flex-col gap-6">
|
|
{/* Direct addresses, for anyone who would rather use their own mail
|
|
client than a form. Secondary by placement, not hidden. */}
|
|
<div className="rounded-2xl border border-border bg-surface p-8 transition-colors duration-300 hover:border-accent/40">
|
|
<h2 className="font-display text-sm tracking-[0.25em] text-foreground-muted">
|
|
DIRECT EMAIL
|
|
</h2>
|
|
<ul className="mt-6 space-y-6">
|
|
{CONTACT_CHANNELS.map((channel) => (
|
|
<li key={channel.label}>
|
|
<p className="font-display text-xs tracking-[0.3em] text-accent">
|
|
{channel.label}
|
|
</p>
|
|
<p className="mt-2 text-sm leading-relaxed text-foreground-muted">
|
|
{channel.description}
|
|
</p>
|
|
<a
|
|
href={`mailto:${channel.email}`}
|
|
className="underline-grow mt-2 inline-block break-words text-sm text-foreground transition-colors hover:text-accent"
|
|
>
|
|
{channel.email}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-border bg-surface p-8 transition-colors duration-300 hover:border-accent/40">
|
|
<h2 className="font-display text-sm tracking-[0.25em] text-foreground-muted">
|
|
PRESS KIT
|
|
</h2>
|
|
<p className="mt-4 text-sm leading-relaxed text-foreground-muted">
|
|
Logos, screenshots and fact sheets will live here soon. Until
|
|
then, ask and we send the assets directly.
|
|
</p>
|
|
<div className="mt-6">
|
|
<ButtonLink
|
|
href={`mailto:${pressEmail}?subject=Press%20Kit%20Request`}
|
|
variant="outline"
|
|
>
|
|
REQUEST PRESS KIT
|
|
</ButtonLink>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-border bg-surface p-8 transition-colors duration-300 hover:border-accent/40">
|
|
<h2 className="mb-6 font-display text-sm tracking-[0.25em] text-foreground-muted">
|
|
FOLLOW
|
|
</h2>
|
|
<SocialLinks />
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</Section>
|
|
</>
|
|
);
|
|
}
|