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>
This commit is contained in:
+85
-76
@@ -1,92 +1,101 @@
|
||||
import type { Metadata } from "next";
|
||||
import { ContactForm } from "../components/ContactForm";
|
||||
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 channels = [
|
||||
{
|
||||
label: "GENERAL",
|
||||
value: "hello@highlandgamesstudio.com",
|
||||
href: "mailto:hello@highlandgamesstudio.com",
|
||||
},
|
||||
{
|
||||
label: "PRESS",
|
||||
value: "press@highlandgamesstudio.com",
|
||||
href: "mailto:press@highlandgamesstudio.com",
|
||||
},
|
||||
{
|
||||
label: "BUSINESS",
|
||||
value: "business@highlandgamesstudio.com",
|
||||
href: "mailto:business@highlandgamesstudio.com",
|
||||
},
|
||||
];
|
||||
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 (
|
||||
<div className="pt-32 pb-24 px-6 lg:px-10">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<p className="font-display text-sm tracking-[0.3em] text-accent mb-4">
|
||||
— GET IN TOUCH
|
||||
</p>
|
||||
<h1 className="font-display text-5xl sm:text-6xl lg:text-7xl tracking-wider leading-[0.95] mb-8">
|
||||
SAY HELLO.
|
||||
</h1>
|
||||
<p className="text-lg text-foreground-muted leading-relaxed max-w-2xl mb-16">
|
||||
Press inquiries, business opportunities, fan messages — all are
|
||||
welcome. Pick a channel and reach out.
|
||||
</p>
|
||||
<>
|
||||
<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."
|
||||
/>
|
||||
|
||||
<div className="grid sm:grid-cols-3 gap-6 mb-24">
|
||||
{channels.map((c) => (
|
||||
<a
|
||||
key={c.label}
|
||||
href={c.href}
|
||||
className="border border-border p-8 hover:border-accent transition-colors group"
|
||||
>
|
||||
<p className="font-display text-xs tracking-[0.3em] text-accent mb-3">
|
||||
{c.label}
|
||||
<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>
|
||||
<p className="text-xs text-foreground group-hover:text-accent transition-colors">
|
||||
{c.value}
|
||||
</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<ButtonLink
|
||||
href={`mailto:${pressEmail}?subject=Press%20Kit%20Request`}
|
||||
variant="outline"
|
||||
>
|
||||
REQUEST PRESS KIT
|
||||
</ButtonLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border pt-16">
|
||||
<p className="font-display text-xs tracking-[0.3em] text-accent mb-3">
|
||||
— OR
|
||||
</p>
|
||||
<h2 className="font-display text-3xl sm:text-4xl tracking-wider mb-4">
|
||||
SEND US A MESSAGE
|
||||
</h2>
|
||||
<p className="text-foreground-muted leading-relaxed max-w-2xl mb-10">
|
||||
Prefer not to use email? Drop your message here and we'll get
|
||||
back to you.
|
||||
</p>
|
||||
<ContactForm />
|
||||
<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>
|
||||
|
||||
<div className="mt-24 border-t border-border pt-12">
|
||||
<h2 className="font-display text-2xl tracking-wider mb-4">
|
||||
PRESS KIT
|
||||
</h2>
|
||||
<p className="text-foreground-muted leading-relaxed mb-6 max-w-xl">
|
||||
Logos, screenshots and fact sheets for our games will be available
|
||||
here soon. In the meantime, drop us an email and we'll send
|
||||
assets directly.
|
||||
</p>
|
||||
<a
|
||||
href="mailto:press@highlandgamesstudio.com?subject=Press%20Kit%20Request"
|
||||
className="inline-block px-8 py-3 border border-border text-foreground font-display tracking-widest text-sm hover:border-accent hover:text-accent hover:scale-[1.03] transition duration-200"
|
||||
>
|
||||
REQUEST PRESS KIT →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user