194 lines
6.7 KiB
TypeScript
194 lines
6.7 KiB
TypeScript
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import Head from "next/head";
|
||
import { FaGithub } from "react-icons/fa";
|
||
|
||
function Header() {
|
||
return (
|
||
<header className="flex w-full items-center justify-between bg-gray-800 p-8 text-white">
|
||
<Link href="/">
|
||
<Image src="/logo.png" alt="My Site Logo" width={128} height={77} />
|
||
</Link>
|
||
<nav>
|
||
<ul className="flex items-center gap-2 space-x-4">
|
||
<li>
|
||
<Link href="/le-club" className="font-poppins text-xl">
|
||
Le club
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href="/galeries" className="font-poppins text-xl">
|
||
Galeries
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href="/contact" className="font-poppins text-xl">
|
||
Contact
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
href="/espace-membres"
|
||
className="bg-white px-6 py-2 font-poppins text-xl text-stone-900"
|
||
>
|
||
Espace membres
|
||
</Link>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
);
|
||
}
|
||
|
||
function Footer() {
|
||
return (
|
||
<footer className="w-full bg-neutral-800">
|
||
<div className="container mx-auto p-8">
|
||
<div className="flex items-center justify-around md:flex-row">
|
||
<Link className="flex items-center" href="/">
|
||
<Image
|
||
src="/logo.png"
|
||
alt="Logo photo club haute lozère"
|
||
width={128}
|
||
height={77}
|
||
/>
|
||
</Link>
|
||
<div className="ml-4 flex flex-col items-center">
|
||
<span className="text-neutral-300">
|
||
© 2023 Photo Club de Haute Lozère
|
||
</span>
|
||
<span className="text-neutral-300">Tous droits réservés</span>
|
||
</div>
|
||
<div className="ml-4 flex">
|
||
<span className="text-neutral-300">
|
||
Développé par{" "}
|
||
<a
|
||
href="https://github.com/polynux"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
polynux <FaGithub className="inline" />
|
||
</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
}
|
||
|
||
function Layout({ children, title }: { children: React.ReactNode, title?: string }) {
|
||
return (
|
||
<div>
|
||
<Head>
|
||
<title>{title ? title + " | " : ""} Photo Club Haute Lozère</title>
|
||
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
||
<link rel="icon" href="/favicon.ico" />
|
||
<meta name="description" content="Site du photo club de Haute Lozère" />
|
||
<meta name="keywords" content="photo, club, haute, lozère" />
|
||
<meta name="author" content="polynux" />
|
||
<meta name="robots" content="index, follow" />
|
||
<meta name="language" content="fr" />
|
||
<meta property="og:title" content="Photo Club de Haute Lozère" />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:url" content="https://photoclubhautelozere.fr" />
|
||
<meta property="og:image" content="/logo.png" />
|
||
<meta property="og:description" content="Site du photo club de Haute Lozère" />
|
||
<meta property="og:site_name" content="Photo Club de Haute Lozère" />
|
||
<meta property="og:locale" content="fr_FR" />
|
||
<meta name="twitter:card" content="summary" />
|
||
<meta name="twitter:site" content="@polynux" />
|
||
<meta name="twitter:creator" content="@polynux" />
|
||
<meta name="twitter:title" content="Photo Club de Haute Lozère" />
|
||
<meta name="twitter:description" content="Site du photo club de Haute Lozère" />
|
||
<meta name="twitter:image" content="/logo.png" />
|
||
</Head>
|
||
<Header />
|
||
<main>{children}</main>
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Home() {
|
||
return (
|
||
<Layout title="Accueil">
|
||
<Image
|
||
src="/IMG_2439-CLUB-3 2.png"
|
||
alt=""
|
||
width={1920}
|
||
height={500}
|
||
/>
|
||
<div className="container mx-auto p-8">
|
||
<div className="mb-4 flex gap-10">
|
||
<div className="w-1/2">
|
||
<h1 className="font-poppins text-5xl">Notre club photo</h1>
|
||
<div className="line h-1 w-full bg-black"></div>
|
||
</div>
|
||
<div className="w-1/2"></div>
|
||
</div>
|
||
<div className="flex gap-10">
|
||
<div className="flex w-1/2 flex-col gap-8">
|
||
<p className="text-xl">
|
||
Le Photo Club de Haute Lozère est une association loi 1901 créée
|
||
en 2018.
|
||
</p>
|
||
<p className="text-xl">
|
||
Le club propose à ses adhérents de partager en groupe la pratique
|
||
de la photographie, de l'initiation à des techniques plus
|
||
avancées et en découvrir les multiples facettes.
|
||
</p>
|
||
<p className="text-xl">
|
||
L’échange de connaissances et de savoir-faire autour des
|
||
techniques et de l’art photographiques ainsi que l’organisation
|
||
d’événements (rencontres, sorties, reportages, concours liés à la
|
||
pratique photographique) travaux informatiques de post traitement
|
||
font parties de nos activités.
|
||
</p>
|
||
<Image
|
||
src={"/forum-eaee.png"}
|
||
alt="Forum photo club haute lozère"
|
||
width={740}
|
||
height={320}
|
||
/>
|
||
</div>
|
||
<div className="flex w-1/2 flex-col gap-6">
|
||
<Image
|
||
src={"/132108978_o.png"}
|
||
alt="Forum photo club haute lozère"
|
||
width={740}
|
||
height={320}
|
||
/>
|
||
<p className="text-xl">
|
||
Ainsi, des sorties à thème sont programmées avec des séances
|
||
d’analyse des photos réalisées.
|
||
</p>
|
||
<p className="text-xl">
|
||
Nous proposons également des séances de formations aux différentes
|
||
techniques de la photographie (l’appareil photo, la prise de vue,
|
||
gestion de la lumière…).
|
||
</p>
|
||
<p className="text-xl">
|
||
En fin de saison, pour finaliser et mettre en valeur nos travaux,
|
||
une exposition de nos photographies sera proposée au public. Nous
|
||
invitons tous les amateurs de photos à nous rejoindre et partager
|
||
cette passion.
|
||
</p>
|
||
<p className="text-xl">
|
||
N’hésitez à contacter le Président : Bernard Sapin au
|
||
<a href="tel:0681818181" className="font-bold">
|
||
{" "}
|
||
06 81 81 81 81
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|
||
|
||
export default Home;
|
||
|
||
export { Layout };
|