owenrees/echecsfrance
1
0
Fork 0
mirror of https://github.com/TheRealOwenRees/echecsfrance.git synced 2026-07-23 04:26:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix layout issues & co-locate components (#46)

Browse Source 
* Fix layout issues & co-locate components

* Fix front page

* Fix centering
This commit is contained in:
Timothy Armes
2023-07-04 13:26:25 +02:00
committed by GitHub
parent a9822b65fe
commit 75a6c74306
26 changed files with 306 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[lang]/page.tsx
+31 -34
View File
@@ -2,45 +2,42 @@ import Link from "next/link";
import Image from "next/image";
import { useTranslations } from "next-intl";
import Layout from "@/components/Layout";
import bgImage from "@/public/images/map-bg.jpg";
export default function Home() {
const t = useTranslations("Home");
return (
<Layout>
<header className="grid h-[calc(100%-153px)] md:h-[calc(100%-173px)] items-center">
<div className="relative h-full w-full brightness-[0.2]">
<Image
src={bgImage}
alt="Background image of France"
fill={true}
style={{ objectFit: "cover" }}
/>
</div>
<div className="absolute flex flex-col items-center w-full text-center text-white">
<h1 className="p-5 text-5xl" data-test="header1">
{t("title")}
</h1>
<h2 className="p-5 text-3xl">{t("purpose")}</h2>
<h3 className="mb-5 p-5 text-xl">
{t.rich("how", {
link: (chunks) => (
<Link href="http://www.echecs.asso.fr/" target="_blank">
<abbr title="Fédération Française des Échecs">{chunks}</abbr>
</Link>
),
})}
</h3>
<Link
href="/tournois"
className="mb-2 mr-2 rounded-lg bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800"
>
{t("mapLink")}
</Link>
</div>
</header>
</Layout>
<header className="relative flex flex-1 items-center justify-center">
<div className="absolute h-full w-full brightness-[0.2]">
<Image
src={bgImage}
alt="Background image of France"
fill={true}
style={{ objectFit: "cover" }}
/>
</div>
<div className="z-10 text-center text-white">
<h1 className="p-5 text-5xl" data-test="header1">
{t("title")}
</h1>
<h2 className="p-5 text-3xl">{t("purpose")}</h2>
<h3 className="mb-5 p-5 text-xl">
{t.rich("how", {
link: (chunks) => (
<Link href="http://www.echecs.asso.fr/" target="_blank">
<abbr title="Fédération Française des Échecs">{chunks}</abbr>
</Link>
),
})}
</h3>
<Link
href="/tournois"
className="mb-2 mr-2 rounded-lg bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800"
>
{t("mapLink")}
</Link>
</div>
</header>
);
}