mirror of
https://github.com/TheRealOwenRees/echecsfrance.git
synced 2026-07-23 04:26:57 +00:00
New front page design
This commit is contained in:
Timothy Armes
@@ -0,0 +1,18 @@
|
||||
import { ReactNode } from "react";
|
||||
|
||||
import Footer from "./components/Footer";
|
||||
import Navbar from "./components/Navbar";
|
||||
|
||||
export default async function MainLayout({
|
||||
children,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<div className="relative min-h-content">{children}</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
+1
-1
@@ -9,7 +9,7 @@ import { FaExternalLinkAlt, FaTrophy } from "react-icons/fa";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import DatePicker from "@/app/[locale]/tournaments/DatePicker";
|
||||
import DatePicker from "@/app/[locale]/(main)/tournaments/DatePicker";
|
||||
import {
|
||||
datePickerIsOpenAtom,
|
||||
dateRangeAtom,
|
||||
@@ -9,8 +9,8 @@ import Script from "next/script";
|
||||
import "@/css/globals.css";
|
||||
import Providers from "@/providers";
|
||||
|
||||
import Footer from "./components/Footer";
|
||||
import Navbar from "./components/Navbar";
|
||||
import Footer from "./(main)/components/Footer";
|
||||
import Navbar from "./(main)/components/Navbar";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
|
||||
const title = Julius_Sans_One({
|
||||
@@ -71,11 +71,11 @@ export default async function RootLayout({
|
||||
<body>
|
||||
<Providers>
|
||||
<NextIntlClientProvider locale={locale} messages={messages}>
|
||||
<div className="bg-white font-sans leading-normal tracking-normal dark:bg-gray-800">
|
||||
<Navbar />
|
||||
<div className="relative min-h-content">{children}</div>
|
||||
<Footer />
|
||||
<div className="bg-white pb-40 font-sans leading-normal tracking-normal dark:bg-gray-700 dark:bg-gray-800">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</NextIntlClientProvider>
|
||||
<Script
|
||||
defer
|
||||
|
||||
+151
-26
@@ -1,44 +1,169 @@
|
||||
import { useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
import { GiTrophyCup } from "react-icons/gi";
|
||||
import { GrLineChart } from "react-icons/gr";
|
||||
import { HiUserGroup } from "react-icons/hi2";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import bgImage from "@/img/map-bg.webp";
|
||||
import bannerImage from "@/img/banner.jpeg";
|
||||
import { Link } from "@/utils/navigation";
|
||||
|
||||
export default function Home() {
|
||||
const t = useTranslations("Home");
|
||||
|
||||
return (
|
||||
<header className="relative mb-12 flex min-h-content items-center justify-center">
|
||||
<div className="absolute h-full w-full py-4 brightness-[0.2]">
|
||||
<div className="min-h-[100vh] bg-white dark:bg-gray-800">
|
||||
<div className="relative mb-20 max-h-[400px]">
|
||||
<Image
|
||||
src={bgImage}
|
||||
alt="Background image of France"
|
||||
fill={true}
|
||||
style={{ objectFit: "cover" }}
|
||||
priority
|
||||
src={bannerImage}
|
||||
alt="banner"
|
||||
sizes="100vw"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
maxHeight: "400px",
|
||||
objectFit: "cover",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={twMerge(
|
||||
"absolute",
|
||||
"left-5 top-[50%] max-w-[50%] -translate-y-[50%]",
|
||||
"sm:left-10",
|
||||
"md:left-15",
|
||||
)}
|
||||
>
|
||||
<h1
|
||||
className={twMerge(
|
||||
"mb-2 font-title text-2xl/6 font-bold text-white",
|
||||
"sm:text-4xl",
|
||||
"md:text-5xl",
|
||||
)}
|
||||
data-test="header1"
|
||||
>
|
||||
{t("title")}
|
||||
</h1>
|
||||
<p className={twMerge("text-sm", "sm:text-lg", "md:text-xl")}>
|
||||
{t("purpose")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="absolute -bottom-[2px] w-full text-white dark:text-gray-800">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="100%"
|
||||
height="auto"
|
||||
viewBox="0 0 1440 128"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M0,471 L1440,471 L1440,386.338583 C1331.33333,357.446194 1239,343 1163,343 C821.995497,343 821.995497,463.944882 426,463.944882 C262.447846,463.944882 120.447846,438.076115 0,386.338583 L0,471 Z"
|
||||
transform="translate(0 -343)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="z-10 py-4 text-center text-white">
|
||||
<h1 className="p-5 font-title 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) => (
|
||||
<a href="http://www.echecs.asso.fr/" target="_blank">
|
||||
<abbr title="Fédération Française des Échecs">{chunks}</abbr>
|
||||
|
||||
<div className="mx-auto max-w-4xl px-4 text-black dark:text-white sm:px-10">
|
||||
<div
|
||||
className={twMerge(
|
||||
"grid gap-8",
|
||||
"grid-rows-[repeat(3,1fr)]",
|
||||
"md:grid-cols-[repeat(3,1fr)] md:grid-rows-[auto_min-content_1fr_max-content]",
|
||||
)}
|
||||
>
|
||||
<section
|
||||
className={twMerge(
|
||||
"row-span-4 grid gap-4",
|
||||
// We use subgrid if possible (to align columns across each button), falling back to a grid
|
||||
"grid-rows-[auto_min-content_1fr_max-content]",
|
||||
"grid-rows-[subgrid] gap-2",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-center text-5xl">
|
||||
<GiTrophyCup />
|
||||
</div>
|
||||
<h2 className="text-center text-2xl font-semibold">
|
||||
{t("tournamentsTitle")}
|
||||
</h2>
|
||||
|
||||
<p className="">{t("tournamentsInfo")}</p>
|
||||
|
||||
<Link
|
||||
href="/tournaments"
|
||||
className="mt-4 rounded-lg bg-primary px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-primary-700 hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-800"
|
||||
>
|
||||
{t("tournamentsLink")}
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
<section
|
||||
className={twMerge(
|
||||
"row-span-4 grid gap-4",
|
||||
// We use subgrid if possible (to align columns across each button), falling back to a grid
|
||||
"grid-rows-[auto_min-content_1fr_max-content]",
|
||||
"grid-rows-[subgrid] gap-2",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-center text-5xl">
|
||||
<HiUserGroup />
|
||||
</div>
|
||||
<h2 className="text-center text-2xl font-semibold">
|
||||
{t("clubsTitle")}
|
||||
</h2>
|
||||
<p className="">{t("clubsInfo")}</p>
|
||||
|
||||
<Link
|
||||
href="/clubs"
|
||||
className="mt-4 rounded-lg bg-primary px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-primary-700 hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-800"
|
||||
>
|
||||
{t("clubsLink")}
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
<section
|
||||
className={twMerge(
|
||||
"row-span-4 grid gap-4",
|
||||
// We use subgrid if possible (to align columns across each button), falling back to a grid
|
||||
"grid-rows-[auto_min-content_1fr_max-content]",
|
||||
"grid-rows-[subgrid] gap-2",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-center text-5xl">
|
||||
<GrLineChart />
|
||||
</div>
|
||||
<h2 className="text-center text-2xl font-semibold">
|
||||
{t("eloTitle")}
|
||||
</h2>
|
||||
<p className="">{t("eloInfo")}</p>
|
||||
|
||||
<Link
|
||||
href="/elo"
|
||||
className="mt-4 rounded-lg bg-primary px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-primary-700 hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-800"
|
||||
>
|
||||
{t("calculatorLink")}
|
||||
</Link>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<hr className="my-10" />
|
||||
|
||||
<div className="text-center italic">
|
||||
{t.rich("getInvolved", {
|
||||
link: (str) => (
|
||||
<a
|
||||
target="_blank"
|
||||
className="text-primary hover:bg-primary-700"
|
||||
rel="noopener noreferrer"
|
||||
href="https://github.com/TheRealOwenRees/echecsfrance"
|
||||
>
|
||||
{str}
|
||||
</a>
|
||||
),
|
||||
})}
|
||||
</h3>
|
||||
<Link
|
||||
href="/tournaments"
|
||||
className="mb-2 rounded-lg bg-primary px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-primary-700 hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-800"
|
||||
>
|
||||
{t("mapLink")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user