update cp section responsiveness

IIITKalyaniFOSC · Jul 6, 2024 · 3857e32 · 3857e32
1 parent d0202f6
commit 3857e32
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 21 deletions.
diff --git a/src/components/Cp/Cp.css b/src/components/Cp/Cp.css
@@ -7,48 +7,55 @@
 
   .slider-container {
     overflow: hidden;
-    width: 100%;
-    position: relative;
+    /* width: 200vw; */
+    /* position: relative; */
+    z-index: 1;
   }
 
   .slider {
     display: flex;
     overflow: hidden; 
+    white-space: nowrap;
   }
 
 .slider.slide-left {
     animation: slide-left 50s linear infinite;
   }
+
+  .slider.slide-left:hover {
+    animation-play-state: paused;
+  }
 
 .slider.slide-right {
     animation: slide-right 50s linear infinite;
   }
+
+  .slider.slide-right:hover {
+    animation-play-state: paused;
+  }
 
   @keyframes slide-left {
     0% {
-      transform: translateX(-100%);
+      transform: translateX(0);
     }
     100% {
-      transform: translateX(100%);
+      transform: translateX(-50%);
     }
   }
 
   @keyframes slide-right {
     0% {
-      transform: translateX(100%);
+      transform: translateX(-50%);
     }
     100% {
-      transform: translateX(-100%);
+      transform: translateX(0%);
     }
   }
 
   .slide {
-    flex: 0 0 auto;
-    width: 20%; 
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 0 10px; 
   }
 
   .slide-image {

diff --git a/src/components/Cp/Cp.jsx b/src/components/Cp/Cp.jsx
@@ -7,7 +7,15 @@ const topImages = [
   { src: "src/assets/images/cp/dev.svg", alt: "dev" },
   { src: "src/assets/images/cp/gian.svg", alt: "gian" },
   { src: "src/assets/images/cp/ieee.svg", alt: "ieee" },
-  { src: "src/assets/images/cp/gdsc.svg", alt: "gdsc" }
+  { src: "src/assets/images/cp/gdsc.svg", alt: "gdsc" },
+
+  // double for infinite loop
+  { src: "src/assets/images/cp/cj.svg", alt: "cj" },
+  { src: "src/assets/images/cp/cnhooghly.svg", alt: "cnhooghly" },
+  { src: "src/assets/images/cp/dev.svg", alt: "dev" },
+  { src: "src/assets/images/cp/gian.svg", alt: "gian" },
+  { src: "src/assets/images/cp/ieee.svg", alt: "ieee" },
+  { src: "src/assets/images/cp/gdsc.svg", alt: "gdsc" },
 ];
 
 const bottomImages = [
@@ -16,7 +24,15 @@ const bottomImages = [
   { src: "src/assets/images/cp/rc.svg", alt: "rc" },
   { src: "src/assets/images/cp/thc.svg", alt: "thc" },
   { src: "src/assets/images/cp/gdscm.svg", alt: "gdscm" },
-  { src: "src/assets/images/cp/vuchvilla.svg", alt: "vv" }
+  { src: "src/assets/images/cp/vuchvilla.svg", alt: "vv" },
+
+    // double for infinite loop
+  { src: "src/assets/images/cp/iei.svg", alt: "iei" },
+  { src: "src/assets/images/cp/iiitians.svg", alt: "iiitians" },
+  { src: "src/assets/images/cp/rc.svg", alt: "rc" },
+  { src: "src/assets/images/cp/thc.svg", alt: "thc" },
+  { src: "src/assets/images/cp/gdscm.svg", alt: "gdscm" },
+  { src: "src/assets/images/cp/vuchvilla.svg", alt: "vv" },
 ];
 
 const SimpleSlider = ({ images, direction }) => {
@@ -40,15 +56,15 @@ const SimpleSlider = ({ images, direction }) => {
   }, []);
 
   return (
-    <div className="slider-container">
+    <div className="slider-container w-screen relative m-0 p-0">
       <div
-        className={`slider ${direction === 'left' ? 'slide-left' : 'slide-right'}`}
+        className={`slider w-fit ${direction === 'left' ? 'slide-left' : 'slide-right'}`}
         style={{
           transform: `translateX(${direction === 'left' ? bgPosition.x * 2 : -bgPosition.x * 2}px)`
         }}
       >
         {images.map((image, index) => (
-          <div key={index} className="slide">
+          <div key={index} className="slide mx-4 sm:mx-10 w-[200px] sm:w-[30vw] md:w-[25vw] xl:w-[20vw]">
             <img
               src={image.src}
               alt={image.alt}
@@ -66,13 +82,13 @@ const SimpleSlider = ({ images, direction }) => {
 
 const Cp = () => {
   return (
-    <div className="sliders-wrapper">
-      <SimpleSlider images={topImages} direction="left" />
-      <div className="max-w-[1280px] md:mx-8 lg:mx-12 xl:mx-auto">
-        <h1 className='flex justify-center text-center mx-5 xl:mx-0 py-6 md:text-left text-2xl md:text-4xl xl:text-5xl text-[#9E9E9E]'>
+    <div className="sliders-wrapper gap-y-6 sm:gap-y-12">
+      <div className="w-full max-md:px-5 max-xl:px-10 xl:w-[1280px] self-center">
+        <h1 className='text-2xl md:text-4xl xl:text-5xl text-[#9E9E9E]'>
           $ sudo apt-get i&nbsp;<span className='text-white'>commun<span className='text-red'>1</span>ty partners</span>
         </h1>
       </div>
+      <SimpleSlider images={topImages} direction="left" />
       <SimpleSlider images={bottomImages} direction="right" />
 
     </div>

diff --git a/src/components/Faq/Faq.jsx b/src/components/Faq/Faq.jsx
@@ -57,14 +57,14 @@ const Faq = () => {
     <section id='faq' className='max-[768px]:pt-[60px] pt-[95px]'>
       <div className="relative w-screen flex items-start justify-center">
         <div className="relative z-10 text-left mx-4 md:mx-8 lg:mx-12 xl:mx-20 w-full max-w-[1280px]">
-          <h1 className="text-[#9E9E9E] text-3xl md:text-4xl xl:text-5xl m-0">
+          <h1 className="text-[#9E9E9E] text-2xl md:text-4xl xl:text-5xl m-0">
             $ ./<span id="heading-rules" className="text-white">FAQ</span>
           </h1>
           <div className="relative z-10 w-auto p-6 rounded-lg">
-            <div className="mt-4">
+            <div className="sm:mt-4">
               <div id="accordionFaq">
                 {faqData.map((faq, index) => (
-                  <div key={index} className="mb-4">
+                  <div key={index} className="mb-2 sm:mb-4">
                     <h1 className="text-white text-xl sm:text-2xl xl:text-3xl m-0 flex">
                       <button
                         onClick={() => handleToggle(index)}