fix some panda problems

panda.config.ts

@@ -5,7 +5,7 @@ export default defineConfig({
     preflight: true,
 
     // Where to look for your css declarations
-    include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
+    include: ["./src/**/*.{js,jsx,ts,tsx}", "./src/pages/**/*.{js,jsx,ts,tsx}"],
 
     // Files to exclude
     exclude: [],

src/components/Footer.tsx

@@ -1,41 +1,46 @@
-import Link from "next/link";
-import Image from "next/image";
-import { FaGithub } from "react-icons/fa";
+import { css } from '../../styled-system/css';
+
+import Link from 'next/link'
+import Image from 'next/image'
+import { FaGithub } from 'react-icons/fa'
 
 export default 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"
+    <footer className={css({ width: 'full', backgroundColor: 'neutral.800' })}>
+      <div
+        className={css({
+          width: 'container',
+          maxWidth: 'container',
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          padding: '8',
+        })}
       >
-                polynux <FaGithub className="inline" />
+        <div
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-around',
+            md: { flexDirection: 'row' },
+          })}
+        >
+          <Link className={css({ display: 'flex', alignItems: 'center' })} href="/">
+            <Image src="/logo.png" alt="Logo photo club haute lozère" width={128} height={77} />
+          </Link>
+          <div className={css({ marginLeft: '4', display: 'flex', flexDirection: 'column', alignItems: 'center' })}>
+            <span className={css({ color: 'neutral.300' })}>© 2023 Photo Club de Haute Lozère</span>
+            <span className={css({ color: 'neutral.300' })}>Tous droits réservés</span>
+          </div>
+          <div className={css({ marginLeft: '4', display: 'flex' })}>
+            <span className={css({ color: 'neutral.300' })}>
+              Développé par{' '}
+              <a href="https://github.com/polynux" target="_blank" rel="noreferrer">
+                polynux <FaGithub className={css({ display: 'inline' })} />
               </a>
             </span>
           </div>
         </div>
       </div>
     </footer>
-  );
+  )
 }
-

src/components/Header.tsx

@@ -1,33 +1,54 @@
-import Link from "next/link";
-import Image from "next/image";
+import { css } from '../../styled-system/css';
+
+import Link from 'next/link'
+import Image from 'next/image'
 
 export default function Header() {
   return (
-    <header className="flex w-full items-center justify-between bg-gray-800 p-8 text-white">
+    <header
+      className={css({
+        display: 'flex',
+        width: 'full',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: 'gray.800',
+        padding: '8',
+        color: '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">
+        <ul className={css({ display: 'flex', alignItems: 'center', gap: '2', marginRight: '4', marginLeft: '4' })}>
           <li>
-            <Link href="/le-club" className="font-poppins text-xl">
+            <Link href="/le-club" className={css({ fontSize: 'xl', lineHeight: 'xl' })}>
               Le club
             </Link>
           </li>
           <li>
-            <Link href="/galeries" className="font-poppins text-xl">
+            <Link href="/galeries" className={css({ fontSize: 'xl', lineHeight: 'xl' })}>
               Galeries
             </Link>
           </li>
           <li>
-            <Link href="/contact" className="font-poppins text-xl">
+            <Link href="/contact" className={css({ fontSize: 'xl', lineHeight: 'xl' })}>
               Contact
             </Link>
           </li>
           <li>
             <Link
               href="/espace-membres"
-              className="bg-white px-6 py-2 font-poppins text-xl text-stone-900"
+              className={css({
+                backgroundColor: 'white',
+                paddingLeft: '6',
+                paddingRight: '6',
+                paddingTop: '2',
+                paddingBottom: '2',
+                fontSize: 'xl',
+                lineHeight: 'xl',
+                color: 'stone.900',
+              })}
             >
               Espace membres
             </Link>
@@ -35,5 +56,5 @@ export default function Header() {
         </ul>
       </nav>
     </header>
-  );
+  )
 }

src/layouts/Home.tsx

@@ -1,13 +1,13 @@
-import Head from "next/head";
-import Header from "@/components/Header";
-import Footer from "@/components/Footer";
+import Head from 'next/head'
+import Header from '@/components/Header'
+import Footer from '@/components/Footer'
 
-export default function Layout({ children, title }: { children: React.ReactNode, title?: string }) {
-  const newTitle = title ? title + " | " : "";
+export default function Layout({ children, title }: { children: React.ReactNode; title?: string }) {
+  const newTitle = title ? title + ' | ' : ''
   return (
     <div>
       <Head>
-        <title>{newTitle + "Photo Club Haute Lozère"}</title>
+        <title>{newTitle + '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" />
@@ -33,6 +33,5 @@ export default function Layout({ children, title }: { children: React.ReactNode,
       <main>{children}</main>
       <Footer />
     </div>
-  );
+  )
 }
-

src/pages/le-club.tsx

@@ -1,66 +1,58 @@
-import Layout from "@/layouts/Home";
-import Image from "next/image";
+import { css } from "../../styled-system/css";
+
+import Layout from '@/layouts/Home'
+import Image from 'next/image'
 
 export default function LeClub() {
   return (
     <Layout title="Le club">
-      <div className="container mx-auto p-8">
-        <div className="flex flex-col gap-6">
-          <h1 className="text-4xl font-bold">Le club</h1>
-          <div className="flex flex-col gap-6">
-            <p className="text-xl">
-              Le club photo de la Haute Lozère a été créé en 1982 par un groupe
-              d’amateurs de photographie. Il a été reconnu d’utilité publique en
-              1987 et a obtenu le statut de club de la Fédération Française de
-              Photographie en 1992. Il compte aujourd’hui une centaine d’adhérents
-              et est affilié à la Fédération Française de Photographie.
+      <div
+        className={css({
+          width: 'container',
+          maxWidth: 'container',
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          padding: '8',
+        })}
+      >
+        <div className={css({ display: 'flex', flexDirection: 'column', gap: '6' })}>
+          <h1 className={css({ fontSize: '4xl', lineHeight: '4xl', fontWeight: 'bold' })}>Le club</h1>
+          <div className={css({ display: 'flex', flexDirection: 'column', gap: '6' })}>
+            <p className={css({ fontSize: 'xl', lineHeight: 'xl' })}>
+              Le club photo de la Haute Lozère a été créé en 1982 par un groupe d’amateurs de photographie. Il a été
+              reconnu d’utilité publique en 1987 et a obtenu le statut de club de la Fédération Française de
+              Photographie en 1992. Il compte aujourd’hui une centaine d’adhérents et est affilié à la Fédération
+              Française de Photographie.
             </p>
-            <p className="text-xl">
-              Le club propose à ses adhérents de partager en groupe la pratique de
-              la photographie, de l&apos;initiation à des techniques plus
-              avancées et en découvrir les multiples facettes.
+            <p className={css({ fontSize: 'xl', lineHeight: 'xl' })}>
+              Le club propose à ses adhérents de partager en groupe la pratique de la photographie, de l&apos;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 className={css({ fontSize: 'xl', lineHeight: '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}
-            />
+            <Image src={'/forum-eaee.png'} alt="Forum photo club haute lozère" width={740} height={320} />
           </div>
-          <div className="flex 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.
+          <div className={css({ display: 'flex', flexDirection: 'column', gap: '6' })}>
+            <Image src={'/132108978_o.png'} alt="Forum photo club haute lozère" width={740} height={320} />
+            <p className={css({ fontSize: 'xl', lineHeight: '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 className={css({ fontSize: 'xl', lineHeight: '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">
-              Le club organise également des expositions et des concours
-              photographiques.
+            <p className={css({ fontSize: 'xl', lineHeight: 'xl' })}>
+              Le club organise également des expositions et des concours photographiques.
             </p>
-            <p className="text-xl">
-              Le club est affilié à la Fédération Française de Photographie et
-              participe à ses concours nationaux.
+            <p className={css({ fontSize: 'xl', lineHeight: 'xl' })}>
+              Le club est affilié à la Fédération Française de Photographie et participe à ses concours nationaux.
             </p>
           </div>
         </div>
       </div>
     </Layout>
-  );
+  )
 }