Merge pull request #38 from Ntsoa2112/FixHot

chore: Update background color and margins in various components

src/components/AccordionItem.jsx

@@ -1,19 +1,18 @@
 // src/components/Accordion.js
-import React, { useState } from 'react';
+import { useState } from 'react';
+import { MdOutlineKeyboardArrowDown, MdOutlineKeyboardArrowUp } from "react-icons/md";
 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">
+    <div className="border-b border-gray-700 max-w-4xl md:mx-6">
       <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 className={`${isOpen ? "text-bruning":"text-white"} font-DMMono text-[18px] md:text-[22px] `}>{title}</span>
           <span>{isOpen ? <MdOutlineKeyboardArrowUp color='white' width="200px" />: <MdOutlineKeyboardArrowDown color='white' />}</span>
         </div>
       </button>

src/components/ButtonFill.jsx

@@ -1,6 +1,5 @@
 const ButtonFill = ({ content }) => {
   return (
-
     <div className='border border-yellow text-white  p-1 rounded-full w-[230px] text-center flex items-center justify-evenly font-DMMono mt-5 mb-5'>
       <p>WNL 2.0 </p>
       <div className='bg-yellow w-[5px] h-[5px] rounded-full'></div>

src/components/Conference.jsx

@@ -3,7 +3,7 @@ import ListConference from './ListConference'
 
 const Conference = ({conferences}) => {
   return (
-    <div className='pt-6 mt-6 '>
+    <div className='pt-6 mt-6 md:mx-8'>
         <ButtonFill content="Conference"/>
         <h2 className='font-kontes text-[38px] md:text-[58px] text-white pb-[5rem] pl-3 md:pl-0'>Huit <span className='text-yellow' >conferences</span> passionnantes.</h2>
         <div 

src/components/Stats.jsx

@@ -1,16 +1,15 @@
-import React from 'react';
 import Linux from "../assets/images/linux.png";
 import Shape from "../assets/images/shape.png";
 import { statistique } from '../utils';
 import StatsDetail from './StatsDetail';
 
 const Stats = () => {
   return (
-    <div className='mt-8 relative hidden md:flex'>
-      <img src={Shape} className='relative w-full' alt="" />
-      <div className='absolute inset-0 flex flex-col md:flex-row items-center justify-center'>
-        <img className='w-[120px] md:w-[200px] lg:w-[300px] xl:w-[416px] ml-4 mb-4 md:mb-0' src={Linux} alt="" />
-        <div className='flex flex-wrap items-center justify-center ml-4'>
+    <div className='mt-8 relative flex flex-col md:flex-row items-center justify-center'>
+      <img src={Shape} className='hidden md:block w-full h-auto' alt="" />
+      <div className='md:absolute inset-0 flex flex-col md:flex-row items-center justify-center'>
+        <img className='hidden md:block w-[120px] sm:w-[150px] md:w-[200px] lg:w-[300px] xl:w-[416px] mb-4 md:mb-0' src={Linux} alt="" />
+        <div className='grid grid-rows-2 grid-flow-col gap-4 '>
           {statistique.map((item) => (
             <StatsDetail key={item.id} {...item} />
           ))}
@@ -20,4 +19,4 @@ const Stats = () => {
   );
 }
 
-export default Stats;
+export default Stats;

src/components/StatsDetail.jsx

@@ -1,13 +1,14 @@
-import React from 'react';
 import CountUp from 'react-countup';
 
 const StatsDetail = ({ number, text }) => {
   return (
-    <div className='text-white text-center m-2'>
-      <h3 className='font-kontes text-[20px] sm:text-[30px] md:text-[40px] lg:text-[50px] xl:text-[60px]'>
+    <div className='text-white text-center'>
+      <h3 className='font-kontes text-[30px] md:text-[40px] lg:text-[50px]'>
         <CountUp end={number} duration={4} /><span className='font-sans'>+</span>
       </h3>
-      <p className='w-full sm:w-[150px] md:w-[200px] lg:w-[250px] xl:w-[300px]'>{text}</p>
+      <p className='w-full text-[16px]  lg:text-[20px]'>
+        {text}
+      </p>
     </div>
   );
 }

src/page/Comptetion.jsx

@@ -1,15 +1,15 @@
     import React from 'react'
-    import ButtonFill from '../components/ButtonFill'
-    import Button from '../components/Button'
-    import CompetitionTag from '../components/CompetitionTag'
-    import { comptetionList } from '../utils'
+import Button from '../components/Button'
+import ButtonFill from '../components/ButtonFill'
+import CompetitionTag from '../components/CompetitionTag'
+import { comptetionList } from '../utils'
     const Comptetion = () => {
     return (
-        <section className='bg-background p-3 md:p-0'> 
-            <div className='max-w-[1700px] mx-auto pt-5'>
+        <section className='bg-background p-3 md:p-0 '> 
+            <div className='max-w-[1700px] px-2 md:mx-4 md:px-12'>
                 <ButtonFill content="competion"/>
                 <div className='md:flex md:justify-between mb-5  '>
-                    <h2 className='font-kontes  text-white text text-[38px] md:text-[58px] '>DIfferents challenges a relever pour <span className='text-raven'>rendre cet evenement fun</span></h2> 
+                    <h2 className='font-kontes md:w-3/4 text-white text-[28px] md:text-[58px] '>Differents challenges a relever pour <span className='text-raven'>rendre cet evenement fun</span></h2> 
                     <p className='text-white font-DMMono text-[14px] md:text-[20px] md:w-[30%]'>Les consignes seront publiés sur la page. Suivez-nous régulièrement pour ne rien rater.</p>
                 </div>
 

src/page/Stande.jsx

@@ -6,10 +6,10 @@ import { stand } from '../utils';
 
 const Stande = () => {
   return (
-    <section className='bg-background p-3 md:p-8'>
+    <section className='bg-background p-3 md:p-8 md:mx-8'>
       <div className='max-w-[1700px] mx-auto pt-5'>
         <ButtonFill content="stand" />
-        <h2 className='font-kontes text-white text-[28px] md:text-[48px] pt-5 pb-5 pl-2'>
+        <h2 className='font-kontes text-white text-[28px] md:text-[48px]  pb-5 pl-2'>
           Demarquez vous avec un <span className='text-yellow'>stand</span> à votre image.
         </h2>
         <div className='ml-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 justify-center'>

src/page/Statistiques.jsx

@@ -1,9 +1,8 @@
-import React from 'react'
 import ButtonFill from '../components/ButtonFill'
 import Stats from '../components/Stats'
 const Statistiques = () => {
   return (
-    <section className='bg-background p-3 md:p-0' >
+    <section className='bg-background p-3 md:p-0 mx-4 md:mx-8' >
         <div className='max-w-[1700px] mx-auto pt-9'>
             <ButtonFill content="statistique"/>
             <h2 className='font-kontes capitalize text-yellow  text-[38px] md:text-[48px] '>Les chiffres cles <span className='text-white'>de l’edition precedente.</span></h2>   

src/scenes/Conference.jsx

@@ -1,6 +1,6 @@
 import ButtonFill from "../components/ButtonFill"
-import { conferenceImage } from '../utils'
 import ListConference from "../components/ListConference"
+import { conferenceImage } from '../utils'
 
 const Conference = () => {
   return (

src/scenes/GetTicket.jsx

@@ -1,9 +1,9 @@
+import Binary from "../assets/images/binary.png"
 import ButtonFill from "../components/ButtonFill"
 import GetTicketButton from "../components/GetTicketButton"
-import Binary from "../assets/images/binary.png"
 function GetTicket() {
   return (
-    <div className="flex flex-col items-center text-center px-14 py-56  gradientBg relative">
+    <div className="flex flex-col items-center text-center px-14 py-12 md:py-20  gradientBg relative">
       <ButtonFill content="22 Juin 2024"></ButtonFill>
       <h2 className="text-[38px] sm:text-[56px] md:text-[98px] text-white font-kontes">
         Ne ratez pas cet <span className="text-raven">évènement</span>

src/scenes/Home.jsx

@@ -1,17 +1,17 @@
-import Nav from "../components/nav";
-import ButtonFill from "../components/ButtonFill";
+import Qr from "../assets/images/qr.png";
 import Button from "../components/Button";
+import ButtonFill from "../components/ButtonFill";
 import GetTicketButton from "../components/GetTicketButton";
-import Qr from "../assets/images/qr.png";
+import Nav from "../components/nav";
 
 const Home = () => {
   return (
     <div className="top-section">
-      <div className="mx-6">
+      <div className="mx-12">
         <div className="max-w-[1600px] mx-auto">
           <div className="flex flex-col justify-between items-center md:items-stretch">
             <Nav />
-            <div className=" max-w-7xl">
+            <div className="max-w-7xl mx-12">
               <div className="pt-28 flex flex-col md:items-end md:justify-between">
                 {/* for mobile device  */}
                 <div className="w-full md:w-1/2 md:hidden">
@@ -36,7 +36,7 @@ const Home = () => {
                 <div className="w-full  hidden md:flex">
                   <div className="flex  justify-center flex-col ">
                     <ButtonFill content="22 juin 2024" />
-                    <h2 className="font-kontes text-white text-[42px] md:text-[90px] max-w-2xl">
+                    <h2 className="font-kontes text-white text-[42px] md:text-[74px] max-w-2xl">
                       Empowering Communities  Through {" "}
                       <span className="text-raven">Open Source.</span>
                     </h2>

src/scenes/Questions.jsx

@@ -3,15 +3,15 @@ import Foire from "../assets/images/foire.png"
 import Accordion from '../components/AccordionItem'
 const Questions = () => {
   return (
-    <div className='mt-20 mb-9'>
+    <div className='mt-20 mb-9 mx-8 px-4'>
       <div className='flex flex-col items-center justify-center'>
         <h2 className='text-[32px] md:text-[58px] text-white font-kontes uppercase '>Foire aux <span className='text-yellow'>Questions</span></h2>
       </div>
       <div className='flex items-start justify-between'>
-          <img className='hidden md:flex md:w-[500px]' src={Foire} alt="" />
-            <div>
-              <Accordion/>
-            </div>
+          <img className='hidden md:flex md:w-[450px]' src={Foire} alt="" />
+          <div>
+            <Accordion/>
+          </div>
       </div>
     </div>
   )

src/styles/App.css

@@ -1,6 +1,6 @@
 .top-section {
     background: #0057a8;
-    background: linear-gradient(207deg, #0057a8 0%, rgba(2,20,29,1) 100%);
+    background: linear-gradient(207deg, #04315c 0%, rgb(1, 15, 22) 100%);
 }