Merge pull request #36 from ainafi/main

retour en photo
WhyNotLinuxMG · May 30, 2024 · 8e3153b · 8e3153b
2 parents 21ce8de + 8fec895
commit 8e3153b
Show file tree

Hide file tree

Showing 22 changed files with 406 additions and 66 deletions.
diff --git a/index.html b/index.html
@@ -4,6 +4,17 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="./logo-wnl.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+  rel="stylesheet"
+  type="text/css"
+  charset="UTF-8"
+  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
+/>
+<link
+  rel="stylesheet"
+  type="text/css"
+  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
+/>
     <title>WNL</title>
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,10 +20,13 @@
     "react-countup": "^6.5.3",
     "react-date-countdown-timer": "^1.1.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
+    "react-slick": "^0.30.2",
     "swiper": "^11.1.2",
     "to-regex-range": "^5.0.1"
   },
   "devDependencies": {
+    "@types/node": "^20.12.13",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^4.2.1",

diff --git a/src/App.jsx b/src/App.jsx
@@ -8,10 +8,8 @@ import './styles/App.css'
 
 import CountDownDay from './scenes/CountDownDay'
 import OrganizersPartners from './scenes/OrganizersPartners'
-import Stat from './scenes/Stat'
 
-import Challenges from './scenes/Challenges'
-import CountDownDay from './scenes/CountDownDay'
+
 import Footer from './scenes/Footer'
 import GetTicket from './scenes/GetTicket'
 import Photos from './scenes/Photos'
@@ -32,13 +30,11 @@ const App = () => {
           <Stande/>
           <Statistiques/>
           <Comptetion/>
-          <Stat/>
-          <Challenges/>
           <Photos/>
           <Questions/>
+        </div>     
           <GetTicket/>
           <Footer/>
-        </div>     
 
       </div>
     </>

diff --git a/src/assets/images/binary.png b/src/assets/images/binary.png
diff --git a/src/assets/images/foire.png b/src/assets/images/foire.png
diff --git a/src/assets/images/qr.png b/src/assets/images/qr.png
diff --git a/src/assets/images/retour-1.png b/src/assets/images/retour-1.png
diff --git a/src/assets/images/retour-2.png b/src/assets/images/retour-2.png
diff --git a/src/assets/images/retour-3.png b/src/assets/images/retour-3.png
diff --git a/src/components/AccordionItem.jsx b/src/components/AccordionItem.jsx
@@ -0,0 +1,42 @@
+// src/components/Accordion.js
+import React, { useState } from 'react';
+import { AccordionContent } from '../utils';
+import { MdOutlineKeyboardArrowUp } from "react-icons/md";
+import { MdOutlineKeyboardArrowDown } from "react-icons/md";
+const AccordionItem = ({ title, children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="border-b ml-8 max-w-4xl">
+      <button
+        className="w-full text-left p-4  focus:outline-none"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <div className="flex justify-between items-center">
+          <span className={`${isOpen ? "text-bruning":"text-white"} font-DMMono text-[18px] md:text-[28px] `}>{title}</span>
+          <span>{isOpen ? <MdOutlineKeyboardArrowUp color='white' width="200px" />: <MdOutlineKeyboardArrowDown color='white' />}</span>
+        </div>
+      </button>
+      {isOpen && (
+        <div className="p-4 text-white font-DMMono text-[14px] md:text-[20px]">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const Accordion = () => {
+  return (
+    <div className=" mx-auto my-8  rounded-lg overflow-hidden shadow-lg">
+        {AccordionContent.map((accordion)=>(
+             <AccordionItem  key={accordion.id} title={accordion.title}>
+                <p className='text-white '>{accordion.description}</p>
+            </AccordionItem>
+        ))}
+
+    </div>
+  );
+};
+
+export default Accordion;
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -4,16 +4,31 @@ import Vector from '../assets/images/Vector.png'
 const Button = ({content}) => {
   return (
     <>
-        <motion.a
-          whileHover={{ scale: 1.1 }}
-          whileTap={{ scale: 0.9 }}
-          target='_blank' href='http://[email protected] '
-          className='flex w-[300px] border border-raven  rounded-md items-center justify-center p-2   '>
-            <a className='text-white capitalize mr-6 font-DMMono text-nowrap hover:text-bruning' >{content}</a>
-            <img className='object-contain' src={Vector} alt="" />
-        </motion.a>
+       <motion.button
+        whileHover={{ scale: 1.1 }}
+        whileTap={{ scale: 0.9 }}
+        className="bg-transparent border border-white font-DMMono rounded-md mb-3 w-full max-w-xs h-14 flex items-center justify-center px-4 py-2 sm:w-auto"
+        aria-label="Get a ticket"
+    >
+      <span className="text-sm md:text-xl mb-0 text-white">{content}</span>
+      <svg
+        className="ml-2 inline-block"
+        width="24"
+        height="14"
+        viewBox="0 0 24 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M16 0.288086C16 1.03009 16.733 2.13809 17.475 3.06809C18.429 4.26809 19.569 5.31509 20.876 6.11409C21.856 6.71309 23.044 7.28809 24 7.28809M24 7.28809C23.044 7.28809 21.855 7.86309 20.876 8.46209C19.569 9.26209 18.429 10.3091 17.475 11.5071C16.733 12.4381 16 13.5481 16 14.2881M24 7.28809H0"
+          stroke="#fff"
+          strokeWidth="1.66667"
+        />
+      </svg>
+    </motion.button>
     </>
   )
 }
 
-export default Button
+export default Button
+
diff --git a/src/components/GetTicketButton.jsx b/src/components/GetTicketButton.jsx
@@ -1,12 +1,30 @@
+import React from 'react';
+import { motion } from 'framer-motion';
 function GetTicketButton() {
   return (
-    <button className="px-8 py-4 bg-white self-stretch sm:self-center font-[DMMono] rounded-md">
-        <span className="text-[15px] md:text-xl">Obtenir un billet</span>
-        <svg className="ms-4 inline" width="24" height="14" viewBox="0 0 24 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M16 0.288086C16 1.03009 16.733 2.13809 17.475 3.06809C18.429 4.26809 19.569 5.31509 20.876 6.11409C21.856 6.71309 23.044 7.28809 24 7.28809M24 7.28809C23.044 7.28809 21.855 7.86309 20.876 8.46209C19.569 9.26209 18.429 10.3091 17.475 11.5071C16.733 12.4381 16 13.5481 16 14.2881M24 7.28809H0" stroke="#020F13" strokeWidth="1.66667" />
-        </svg>
-    </button>
-  )
+    <motion.button
+        whileHover={{ scale: 1.1 }}
+        whileTap={{ scale: 0.9 }}
+      className="bg-white font-DMMono rounded-md mb-3 w-full max-w-xs h-14 flex items-center justify-center px-4 py-2 sm:w-auto mr-5"
+      aria-label="Get a ticket"
+    >
+      <span className="text-sm md:text-xl mb-0">Obtenir un billet</span>
+      <svg
+        className="ml-2 inline-block"
+        width="24"
+        height="14"
+        viewBox="0 0 24 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M16 0.288086C16 1.03009 16.733 2.13809 17.475 3.06809C18.429 4.26809 19.569 5.31509 20.876 6.11409C21.856 6.71309 23.044 7.28809 24 7.28809M24 7.28809C23.044 7.28809 21.855 7.86309 20.876 8.46209C19.569 9.26209 18.429 10.3091 17.475 11.5071C16.733 12.4381 16 13.5481 16 14.2881M24 7.28809H0"
+          stroke="#020F13"
+          strokeWidth="1.66667"
+        />
+      </svg>
+    </motion.button>
+  );
 }
 
-export default GetTicketButton
+export default GetTicketButton;