Merge pull request #85 from WhyNotLinuxMG/SponsorPopup

Add sponsor popup

src/components/SponsorPopup.jsx

@@ -0,0 +1,21 @@
+const SponsorPopup = ({ isOpen, onClose }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="bg-gray-800 text-whiteSmoke p-6 rounded shadow-lg w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl">
+        <p className="my-4">Vous êtes intéressé à devenir sponsor de l'événement Why Not Linux pour la prochaine édition ?</p>
+        <p className="my-4">Rejoignez-nous en envoyant un message à notre page Facebook (liens vers notre page facebook) ou à l'email suivant : [email protected].</p>
+        <p className="my-4">Nous espérons vous compter parmi nous pour cet événement dédié à Linux et à l'open source.</p>
+        <button
+          onClick={onClose}
+          className="bg-slate-950 text-white px-4 py-2 rounded hover:bg-gray-700"
+        >
+          Fermer
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SponsorPopup;

src/page/Hero.jsx

@@ -1,12 +1,23 @@
+import { useEffect, useState } from "react";
 import QR from "../assets/images/qr_code.png";
-import ButtonFill from "../components/ButtonFill";
 import Button from "../components/Button";
+import ButtonFill from "../components/ButtonFill";
 import GetTicketButton from "../components/GetTicketButton";
-import { useEffect, useState } from "react";
+import SponsorPopup from "../components/SponsorPopup";
 
 const Hero = ({ setIsPop, isPop }) => {
   const [isAnimating, setIsAnimating] = useState(false);
 
+  const [isSponsorOpen, setIsSponsorOpen] = useState(false);
+
+  const openSponsorOpen = () => {
+    setIsSponsorOpen(true);
+  };
+
+  const closeSponsorOpen = () => {
+    setIsSponsorOpen(false);
+  };
+
   useEffect(() => {
     // Lancer l'animation après que le composant est monté
     setIsAnimating(true);
@@ -41,10 +52,11 @@ const Hero = ({ setIsPop, isPop }) => {
             </p>
             <div className="mt-3 flex flex-col justify-center items-center  space-y-2 md:items-start md:justify-start md:flex-row md:space-y-0 md:space-x-3 mb-5">
               <GetTicketButton setIsPop={setIsPop} isPop={isPop} />
-              <Button content="Devenir sponsor" />
+              <div onClick={() => openSponsorOpen()}>
+                <Button content="Devenir sponsor" />
+              </div>
             </div>
           </div>
-
           <div className="hidden lg:mt-0 lg:col-span-5 lg:inline-flex items-end justify-end ">
             <img
               src={QR}
@@ -54,8 +66,9 @@ const Hero = ({ setIsPop, isPop }) => {
             />
           </div>
         </div>
+
       </div>
-
+      <SponsorPopup isOpen={isSponsorOpen} onClose={closeSponsorOpen} />
       <div className="max-w-7xl mx-12 md:hidden">
         <div className="pt-28 flex flex-col md:items-end md:justify-between">
           {/* for mobile device  */}
@@ -73,7 +86,9 @@ const Hero = ({ setIsPop, isPop }) => {
               </p>
               <div className="mt-3 flex flex-col justify-center items-center  space-y-2 md:items-start md:justify-start md:flex-row md:space-y-0 md:space-x-3 mb-5">
                 <GetTicketButton setIsPop={setIsPop} isPop={isPop} />
-                <Button content="Devenir sponsor" />
+                <div onClick={() => openSponsorOpen()}>
+                  <Button content="Devenir sponsor" />
+                </div>
               </div>
             </div>
           </div>