Merge pull request #40 from Ntsoa2112/FixHot

chore: Update Conference component layout and styles
WhyNotLinuxMG · May 30, 2024 · ea1e9af · ea1e9af
2 parents 4d170ae + 033a548
commit ea1e9af
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 8 deletions.
diff --git a/src/components/Conference.jsx b/src/components/Conference.jsx
@@ -6,9 +6,7 @@ const Conference = ({conferences}) => {
     <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 
-
-        className='grid lg:grid-cols-4 md:grid-cols-3 items-center  flex-wrap justify-center relative'>
+        <div className='grid lg:grid-cols-4 md:grid-cols-3 items-center  flex-wrap justify-center relative'>
               {conferences.map((item)=>(
                 <ListConference  key={item.id} {...item}/>
               ))}

diff --git a/src/components/ListConference.jsx b/src/components/ListConference.jsx
@@ -8,8 +8,10 @@ const ListConference = ({image,content,hours}) => {
         transition={{duration:.6, ease:'easeIn'}}
         viewport={{ once: true }}
         className='relative m-5'>
-      <img className='' src={image}  alt="" />
-      <div className="absolute inset-0 bg-gradient-to-t from-black opacity-50 w-full"></div>
+      <div className="relative rounded-3xl overflow-hidden w-full">
+        <img className="w-full" src={image} alt="Example Image" />
+        <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-85"></div>
+      </div>
       <div className='text-white absolute bottom-3 left-9   '>
         <h4 className='font-DMMono text-[22px] font-semibold pb-5'>{content}</h4>
         <p className='font-medium text-raven'>{hours}</p>

diff --git a/src/components/PhotoSlider.jsx b/src/components/PhotoSlider.jsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import Slider from "react-slick";
 import { photo } from '../utils';
 
@@ -68,7 +67,7 @@ const PhotoSlider = () => {
     return (
         <div className='mt-5'>
             <div className="slider-container overflow-hidden">
-                <Slider {...settings}>
+                <Slider {...settings} className="pb-4">
                     {photo.map((item) => (
                         <div key={item.id} className='pl-5'>
                             <img className='pb-2' src={item.img} alt="" />

diff --git a/src/page/Comptetion.jsx b/src/page/Comptetion.jsx
@@ -1,4 +1,3 @@
-    import React from 'react'
 import Button from '../components/Button'
 import ButtonFill from '../components/ButtonFill'
 import CompetitionTag from '../components/CompetitionTag'