Mathew/highland_games_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajoute une couche de micro-animations sur tout le site
Deploy / deploy (push) Successful in 1m13s
Details

Browse Source 
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:
Mathew
2026-08-02 16:04:41 +02:00
parent 8fd9ca88cc
commit 9b6638eb00
66 changed files with 3938 additions and 1469 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/layout.tsx
+21 -21
View File
@@ -1,9 +1,10 @@
import type { Metadata } from "next";
import { Bebas_Neue, Inter } from "next/font/google";
import "./globals.css";
import { Navbar } from "./components/Navbar";
import { Footer } from "./components/Footer";
import { SITE_URL, LOGO_URL } from "@/lib/site";
import { Navbar } from "./components/layout/Navbar";
import { Footer } from "./components/layout/Footer";
import { BackToTop } from "./components/ui/BackToTop";
import { CONTACT_CHANNELS, LOGO_URL, SITE_URL, STUDIO } from "@/lib/site";
const bebas = Bebas_Neue({
variable: "--font-bebas",
@@ -18,27 +19,26 @@ const inter = Inter({
export const metadata: Metadata = {
title: {
default: "Highland Games Studio — Where summits become worlds",
template: "%s — Highland Games Studio",
default: `${STUDIO.name} — Where summits become worlds`,
template: `%s — ${STUDIO.name}`,
},
description:
"Indie game studio crafting survival adventures. Where summits become worlds.",
description: STUDIO.description,
metadataBase: new URL(SITE_URL),
openGraph: {
title: "Highland Games Studio",
description: "Where summits become worlds.",
title: STUDIO.name,
description: STUDIO.tagline,
type: "website",
siteName: "Highland Games Studio",
siteName: STUDIO.name,
},
twitter: {
card: "summary_large_image",
title: "Highland Games Studio",
description: "Where summits become worlds.",
title: STUDIO.name,
description: STUDIO.tagline,
},
alternates: {
types: {
"application/rss+xml": [
{ url: "/feed.xml", title: "Highland Games Studio — Devblog" },
{ url: "/feed.xml", title: `${STUDIO.name} — Devblog` },
],
},
},
@@ -47,14 +47,13 @@ export const metadata: Metadata = {
const organizationJsonLd = {
"@context": "https://schema.org",
"@type": "Organization",
name: "Highland Games Studio",
name: STUDIO.name,
url: SITE_URL,
logo: LOGO_URL,
description:
"Indie game studio crafting survival adventures. Where summits become worlds.",
description: STUDIO.description,
slogan: "Where summits become worlds",
foundingDate: "2026",
email: "hello@highlandgamesstudio.com",
foundingDate: STUDIO.foundingDate,
email: CONTACT_CHANNELS[0].email,
};
export default function RootLayout({
@@ -67,18 +66,19 @@ export default function RootLayout({
lang="en"
className={`${bebas.variable} ${inter.variable} h-full antialiased`}
>
<body className="min-h-full flex flex-col bg-background text-foreground">
<body className="flex min-h-full flex-col bg-background text-foreground">
<a
href="#main"
className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:bg-accent focus:text-background focus:font-display focus:tracking-widest focus:text-sm"
className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:bg-accent focus:px-4 focus:py-2 focus:font-display focus:text-sm focus:tracking-widest focus:text-background"
>
Skip to content
</a>
<Navbar />
<main id="main" className="flex-1 flex flex-col">
<main id="main" className="flex-1">
{children}
</main>
<Footer />
<BackToTop />
<script
type="application/ld+json"
dangerouslySetInnerHTML={{