feat(client): add footer (#206)

apps/admin/package.json

@@ -15,7 +15,7 @@
     "@hookform/resolvers": "^3.6.0",
     "@repo/ui": "workspace:*",
     "date-fns": "^3.6.0",
-    "lucide-react": "^0.395.0",
+    "lucide-react": "^0.396.0",
     "next": "^14.2.4",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
@@ -28,7 +28,7 @@
   "devDependencies": {
     "@repo/biome-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
-    "@types/node": "^20.14.6",
+    "@types/node": "^20.14.8",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.19",

apps/api/package.json

@@ -29,10 +29,10 @@
   "devDependencies": {
     "@repo/biome-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
-    "@types/node": "^20.14.6",
+    "@types/node": "^20.14.8",
     "@types/swagger-ui-dist": "^3.30.5",
     "supabase": "^1.178.2",
-    "tsx": "^4.15.6",
+    "tsx": "^4.15.7",
     "typescript": "^5.5.2",
     "vitest": "^1.6.0"
   }

apps/client/app/(withNavbar)/about/page.tsx

@@ -1,3 +1,5 @@
+import FAQ from '@/app/ui/components/Faq';
+
 export default function AboutUs() {
   return (
     <div className="min-h-[100dvh] flex flex-col">
@@ -90,6 +92,9 @@ export default function AboutUs() {
           </div>
         </div>
       </section>
+      <section id="faq">
+        <FAQ />
+      </section>
     </div>
   );
 }

apps/client/app/(withNavbar)/layout.tsx

@@ -1,14 +1,8 @@
 import '@repo/ui/globals.css';
 import type { Metadata } from 'next';
-import { Inter as FontSans } from 'next/font/google';
 import { navLinks } from '../lib/navlinks';
 import { NavBar } from '../ui/NavBar';
 
-const fontSans = FontSans({
-  subsets: ['latin'],
-  variable: '--font-sans',
-});
-
 export const metadata: Metadata = {
   title: 'Athlonix',
   description: 'Site web de la société Athlonix',

apps/client/app/(withNavbar)/usage/page.tsx

@@ -0,0 +1,88 @@
+export default function UsageConditions() {
+  return (
+    <div className="container mx-auto max-w-3xl py-12 px-4 md:px-0">
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-3xl font-bold">Conditions d'Utilisation</h1>
+          <p className="mt-2 text-muted-foreground">
+            Bienvenue sur le site web de notre association multisport. En accédant ou en utilisant nos services, vous
+            acceptez d'être lié par ces conditions d'utilisation et notre politique de confidentialité.
+          </p>
+        </div>
+        <div>
+          <h2 className="text-xl font-bold">Responsabilités de l'Utilisateur</h2>
+          <ul className="mt-2 space-y-2 text-muted-foreground">
+            <li>
+              Vous devez avoir au moins 13 ans pour utiliser nos services. Si vous avez moins de 13 ans, vous ne pouvez
+              utiliser nos services que sous la supervision d'un parent ou d'un tuteur légal.
+            </li>
+            <li>
+              Vous acceptez d'utiliser nos services uniquement à des fins légales et conformément à ces conditions
+              d'utilisation.
+            </li>
+            <li>Vous êtes responsable de maintenir la confidentialité de votre compte et de votre mot de passe.</li>
+            <li>
+              Vous acceptez de respecter les règles et les règlements de chaque activité sportive à laquelle vous
+              participez.
+            </li>
+          </ul>
+        </div>
+        <div>
+          <h2 className="text-xl font-bold">Propriété Intellectuelle</h2>
+          <p className="mt-2 text-muted-foreground">
+            Notre site web et tout son contenu, y compris, mais sans s'y limiter, les textes, graphiques, images et
+            logiciels, sont la propriété de notre association ou de nos concédants de licence et sont protégés par le
+            droit d'auteur, le droit des marques et d'autres lois sur la propriété intellectuelle.
+          </p>
+        </div>
+        <div>
+          <h2 className="text-xl font-bold">Confidentialité</h2>
+          <p className="mt-2 text-muted-foreground">
+            Nous prenons la confidentialité de nos utilisateurs au sérieux. Veuillez consulter notre politique de
+            confidentialité pour comprendre comment nous collectons, utilisons et protégeons vos informations
+            personnelles.
+          </p>
+        </div>
+        <div>
+          <h2 className="text-xl font-bold">Résolution des Conflits</h2>
+          <p className="mt-2 text-muted-foreground">
+            Tout litige découlant de ou lié à ces conditions d'utilisation ou à votre utilisation de nos services sera
+            résolu par arbitrage contraignant conformément aux règles de l'Association Française d'Arbitrage.
+          </p>
+        </div>
+        <div>
+          <h2 className="text-xl font-bold">Modification des Conditions</h2>
+          <p className="mt-2 text-muted-foreground">
+            Nous nous réservons le droit de modifier ces conditions d'utilisation à tout moment. Si nous apportons des
+            modifications, nous publierons les conditions mises à jour sur notre site web et vous en informerons. Votre
+            utilisation continue de nos services après toute modification constitue votre acceptation des nouvelles
+            conditions.
+          </p>
+        </div>
+        <div>
+          <h2 className="text-xl font-bold">Participation aux Activités</h2>
+          <p className="mt-2 text-muted-foreground">
+            En participant à nos activités sportives, vous reconnaissez et acceptez les risques inhérents à la pratique
+            de sports. Vous vous engagez à suivre les instructions des entraîneurs et à respecter les règles de
+            sécurité.
+          </p>
+        </div>
+        <div>
+          <h2 className="text-xl font-bold">Assurance</h2>
+          <p className="mt-2 text-muted-foreground">
+            Notre association offre une couverture d'assurance pour les participants inscrits à nos activités. Veuillez
+            consulter notre politique d'assurance pour plus de détails sur la couverture et les procédures de
+            réclamation.
+          </p>
+        </div>
+        <div>
+          <h2 className="text-xl font-bold">Contact</h2>
+          <p className="mt-2 text-muted-foreground">
+            Si vous avez des questions concernant ces conditions d'utilisation, veuillez nous contacter à l'adresse
+            suivante : athlonix@gmail.com
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/client/app/layout.tsx

@@ -4,6 +4,7 @@ import '@repo/ui/globals.css';
 import { cn } from '@repo/ui/lib/utils';
 import type { Metadata } from 'next';
 import { Inter as FontSans } from 'next/font/google';
+import Footer from './ui/Footer';
 
 const fontSans = FontSans({
   subsets: ['latin'],
@@ -22,11 +23,10 @@ export default function RootLayout({
 }): JSX.Element {
   return (
     <html lang="fr">
-      <body
-        className={cn('min-h-screen bg-background font-sans antialiased flex flex-col items-center', fontSans.variable)}
-      >
+      <body className={cn('min-h-screen bg-background font-sans antialiased flex flex-col', fontSans.variable)}>
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
-          {children}
+          <div className="flex-grow flex flex-col items-center">{children}</div>
+          <Footer />
         </ThemeProvider>
         <Toaster richColors closeButton visibleToasts={1} />
       </body>

apps/client/app/lib/navlinks.ts

@@ -1,7 +1,6 @@
 export const navLinks = [
   { name: 'Blog', href: '/blog' },
-  { name: 'Marketplace', href: '/marketplace' },
-  { name: 'Evenements', href: '/blog' },
+  //{ name: 'Marketplace', href: '/marketplace' },
   { name: 'Activités', href: '/activities' },
   { name: 'Tournois', href: '/tournaments' },
   { name: 'Sports', href: '/sports' },

apps/client/app/ui/Footer.tsx

@@ -0,0 +1,176 @@
+import { Button } from '@repo/ui/components/ui/button';
+import { Input } from '@repo/ui/components/ui/input';
+import Link from 'next/link';
+import type { SVGProps } from 'react';
+
+export default function Footer() {
+  return (
+    <footer className="bg-gray-100 py-12 mt-12">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
+          <div className="space-y-4">
+            <h5 className="text-xl font-semibold">Newsletter</h5>
+            <div className="flex flex-col sm:flex-row gap-2">
+              <Input placeholder="Votre email" className="border p-2 flex-grow" />
+              <Button className="bg-blue-600 text-white px-4 py-2">S'abonner</Button>
+            </div>
+          </div>
+          <div className="space-y-4">
+            <h5 className="text-xl font-semibold">Nous suivre</h5>
+            <div className="flex space-x-6">
+              <FacebookIcon className="text-blue-600 w-8 h-8" />
+              <TwitterIcon className="text-blue-400 w-8 h-8" />
+              <InstagramIcon className="text-pink-600 w-8 h-8" />
+              <Link href="https://github.com/Athlonix/athlonix" prefetch={false}>
+                <GithubIcon className="text-gray-600 w-8 h-8 hover:text-gray-900" />
+              </Link>
+            </div>
+          </div>
+          <div className="space-y-4">
+            <h5 className="text-xl font-semibold">Catégories</h5>
+            <ul className="space-y-2 text-lg">
+              <li className="hover:underline">
+                <Link href="/sports" prefetch={false}>
+                  Sports
+                </Link>
+              </li>
+              <li className="hover:underline">
+                <Link href="#" prefetch={false}>
+                  Cours
+                </Link>
+              </li>
+              <li className="hover:underline">
+                <Link href="#" prefetch={false}>
+                  Evénements
+                </Link>
+              </li>
+              <li className="hover:underline">
+                <Link href="/tournaments" prefetch={false}>
+                  Tournois
+                </Link>
+              </li>
+              <li className="hover:underline">
+                <Link href="/blog" prefetch={false}>
+                  Actualités
+                </Link>
+              </li>
+            </ul>
+          </div>
+          <div className="space-y-4">
+            <h5 className="text-xl font-semibold">Support</h5>
+            <ul className="space-y-2 text-lg">
+              <li className="hover:underline">
+                <Link href="/about#faq" prefetch={false}>
+                  FAQ
+                </Link>
+              </li>
+              <li>Contactez le support</li>
+            </ul>
+          </div>
+        </div>
+        <div className="mt-12 border-t pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+          <div className="flex flex-wrap justify-center md:justify-start gap-4">
+            <Link href="/usage" className="text-gray-600 hover:text-gray-900 hover:underline" prefetch={false}>
+              Données personnelles
+            </Link>
+            <Link href="/usage" className="text-gray-600 hover:text-gray-900 hover:underline" prefetch={false}>
+              Conditions d'utilisation
+            </Link>
+            <Link href="/usage" className="text-gray-600 hover:text-gray-900 hover:underline" prefetch={false}>
+              Mentions légales
+            </Link>
+            <Link href="/about" className="text-gray-600 hover:text-gray-900 hover:underline" prefetch={false}>
+              A propos de nous
+            </Link>
+          </div>
+          <div className="text-gray-600 text-center md:text-right">
+            {`Copyright © Athlonix ${new Date().getFullYear()} - Tous droits réservés`}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+function FacebookIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
+      <title>Facebook</title>
+    </svg>
+  );
+}
+
+function GithubIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+      <path d="M9 18c-4.51 2-5-2-7-2" />
+      <title>Github</title>
+    </svg>
+  );
+}
+
+function InstagramIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+      <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
+      <title>Instagram</title>
+    </svg>
+  );
+}
+
+function TwitterIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
+      <title>Twitter</title>
+    </svg>
+  );
+}