Merge pull request #45 from ppokrovskii/how-it-works-v2-again

landing/src/components/Carousel/Carousel.css

@@ -0,0 +1,41 @@
+/* Carousel.css */
+.slick-list {
+    overflow: visible !important; /* Make the overflow visible */
+  }
+
+  .slick-slide {
+    transition: opacity 0.5s;
+  }
+
+  .slick-slide:not(.slick-active) {
+    opacity: 0.2;
+  }
+
+  .slick-slide.slick-current,
+  .slick-slide.slick-active {
+    opacity: 1;
+  }
+
+  /* Custom arrow styles */
+.slick-prev,
+.slick-next {
+  /* width: 40px;
+  height: 40px;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 20px; */
+  z-index: 3; /* Ensure arrows are above the slides */
+}
+
+.slick-prev {
+  left: calc(5vw); /* Adjust distance from center */
+}
+
+.slick-next {
+  right: calc(5vw); /* Adjust distance from center */
+}
+

landing/src/components/Carousel/Carousel.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import Slider from 'react-slick';
+import "slick-carousel/slick/slick.css"; 
+import "slick-carousel/slick/slick-theme.css";
+import styles from './Carousel.module.css';
+import './Carousel.css';  // for styles from react-slick library
+
+const Carousel = ({ items }) => {
+  const settings = {
+    dots: true,
+    infinite: false,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    centerMode: true,
+    centerPadding: '15%', // Adjusted to show part of the next and previous slides
+    nextArrow: <SampleNextArrow />,
+    prevArrow: <SamplePrevArrow />,
+  };
+
+  return (
+    <div className={styles.carouselContainer}>
+      <Slider {...settings}>
+        {items.map((item, index) => (
+          <div key={index}>
+            <img src={item.image} alt={item.text} className={styles.carouselImage} />
+            <p className={styles.carouselText}>{item.text}</p>
+          </div>
+        ))}
+      </Slider>
+    </div>
+  );
+};
+
+const SampleNextArrow = (props) => {
+  const { className, style, onClick } = props;
+  return (
+    <div
+      className={`${className} ${styles.arrow} ${styles.arrowNext}`}
+      style={{ ...style, display: 'block' }}
+      onClick={onClick}
+    >
+      &gt;
+    </div>
+  );
+};
+
+const SamplePrevArrow = (props) => {
+  const { className, style, onClick } = props;
+  return (
+    <div
+      className={`${className} ${styles.arrow} ${styles.arrowPrev}`}
+      style={{ ...style, display: 'block' }}
+      onClick={onClick}
+    >
+      &lt;
+    </div>
+  );
+};
+
+export default Carousel;

landing/src/components/Carousel/Carousel.module.css

@@ -0,0 +1,41 @@
+/* Carousel.module.css */
+.carouselContainer {
+    width: 100%;
+  }
+
+  .carouselImage {
+    width: 45vw;
+    border-radius: 15px;
+    object-fit: contain; /* Maintain aspect ratio */
+    margin: 0 auto;
+    transition: opacity 0.5s;
+  }
+
+  .carouselText {
+    margin-top: 10px;
+    font-size: 16px;
+    text-align: center;
+  }
+
+  /* Add gradient transparency on the edges */
+.carouselContainer::before,
+.carouselContainer::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 20%; /* Adjust the width to your preference */
+  z-index: 2;
+  pointer-events: none;
+}
+
+.carouselContainer::before {
+  left: 0;
+  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+}
+
+.carouselContainer::after {
+  right: 0;
+  background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+}
+

landing/src/components/Sections/HowItWorksV2/HowItWorksV2.jsx

@@ -0,0 +1,33 @@
+// import React, { useState } from 'react';
+// import styles from './HowItWorksV2.module.css';
+import Carousel from '../../Carousel/Carousel';
+import ProjectImg1 from '../../../assets/img/projects/rmp_design1.png';
+import ProjectImg2 from '../../../assets/img/projects/rmp_design2.png';
+import ProjectImg3 from '../../../assets/img/projects/rmp_design3.png';
+
+const HowItWorksV2 = () => {
+  // const [activeImage, setActiveImage] = useState(null);
+
+  const items = [
+    {
+      image: ProjectImg1,
+      text: 'Upload Your Files'
+    },
+    {
+      image: ProjectImg2,
+      text: 'Match CVs to Job Descriptions'
+    },
+    {
+      image: ProjectImg3,
+      text: 'Match Job Descriptions to CVs'
+    }
+  ];
+
+  return (
+    <div id="projects">
+      <Carousel items={items} />
+    </div>
+  );
+}
+
+export default HowItWorksV2;

landing/src/components/Sections/HowItWorksV2/HowItWorksV2.module.css

@@ -0,0 +1,150 @@
+.howitworks {
+  text-align: center;
+  padding: 20px;
+  /* background: linear-gradient(to top left, rgba(186, 118, 227, 0.5), rgba(243, 189, 248, 0.5), rgba(243, 255, 166, 0.5)); */
+  /* min-height: 100vh; Ensures the gradient covers the full height of the viewport */
+}
+
+.cards {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.card {
+  width: 30%;
+  margin: 10px;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  transition: transform 0.3s;
+  background: white;
+}
+
+.card img {
+  width: 100%;
+  cursor: pointer;
+  transition: transform 0.3s;
+}
+
+.card:hover {
+  transform: scale(1.05);
+}
+
+.card h3 {
+  margin-top: 10px;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.largeImage {
+  position: relative;
+  width: 80%;
+  max-width: 800px;
+}
+
+.largeImage img {
+  width: 100%;
+}
+
+.closeButton,
+.prevButton,
+.nextButton {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(0, 0, 0, 0.2);
+  border: none;
+  border-radius: 0.3rem;
+  color: white;
+  cursor: pointer;
+  z-index: 1001;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background 0.3s, transform 0.3s;
+  opacity: 0;
+}
+
+.largeImage:hover .closeButton,
+.largeImage:hover .prevButton,
+.largeImage:hover .nextButton {
+  opacity: 1;
+}
+
+.closeButton {
+  right: 10px;
+  top: 10px;
+  font-size: 1.5em;
+  transform: none;
+}
+
+.prevButton {
+  left: 10px;
+  font-size: 2em;
+}
+
+.nextButton {
+  right: 10px;
+  font-size: 2em;
+}
+
+.closeButton:hover,
+.prevButton:hover,
+.nextButton:hover {
+  background: rgba(0, 0, 0, 0.5);
+  /* transform: scale(1.1); */
+}
+
+/* Responsive styles */
+@media (max-width: 768px) {
+  .cards {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .card {
+    width: 80%;
+    margin: 10px 0;
+  }
+
+  .largeImage {
+    width: 90%;
+  }
+
+  .closeButton,
+  .prevButton,
+  .nextButton {
+    /* font-size: 1.5em; */
+    opacity: 1; /* Always visible on mobile */
+  }
+}
+
+@media (max-width: 480px) {
+  .card {
+    width: 100%;
+    margin: 10px 0;
+  }
+
+  .largeImage {
+    width: 100%;
+  }
+
+  .closeButton,
+  .prevButton,
+  .nextButton {
+    /* font-size: 1.2em; */
+    opacity: 1; /* Always visible on mobile */
+  }
+}

landing/src/components/Sections/Projects.jsx

@@ -7,7 +7,7 @@ import FullButton from "../Buttons/FullButton";
 import ProjectImg1 from "../../assets/img/projects/rmp_design1.png";
 import ProjectImg2 from "../../assets/img/projects/rmp_design2.png";
 import ProjectImg3 from "../../assets/img/projects/rmp_design2.png";
-import HowItWorks from "./HowItWorks/HowItWorks";
+import HowItWorksV2 from "./HowItWorksV2/HowItWorksV2";
 // import ProjectImg4 from "../../assets/img/projects/4.png";
 // import ProjectImg5 from "../../assets/img/projects/5.png";
 // import ProjectImg6 from "../../assets/img/projects/6.png";
@@ -25,7 +25,7 @@ export default function Projects({handleOpenContactForm}) {
           labore et dolore magna aliquyam erat, sed diam voluptua. */}
         </p>
       </HeaderInfo>
-      <HowItWorks/>
+      <HowItWorksV2/>
     </div>
       {/* <div className="lightBg">
         <div className="container">