Merge pull request #9 from nuuxcode/ayoub

Add HowToRent component to home page

frontend/src/components/home/howToRent/cardSteps.component.tsx

@@ -0,0 +1,61 @@
+import { useRef, useEffect } from "react";
+import { Center, Heading, Text } from "@chakra-ui/react";
+import { IconType } from "react-icons";
+import arrow from "../../../assets/images/arrow.webp";
+import { motion, useAnimation, useInView } from "framer-motion";
+
+type Props = {
+  Icon: IconType;
+  title: string;
+  text: string;
+  after?: boolean;
+  delay?: number;
+};
+
+const CardSteps = ({ Icon, title, text, after, delay = 0.5 }: Props) => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+
+  const mainControls = useAnimation();
+
+  useEffect(() => {
+    if (isInView) {
+      mainControls.start("visible");
+    }
+  }, [isInView]);
+
+  return (
+    <motion.div
+      ref={ref}
+      className="flex flex-col justify-center items-center gap-4"
+      variants={{
+        hidden: { opacity: 0, x: 150 },
+        visible: { opacity: 1, x: 0 },
+      }}
+      initial="hidden"
+      animate={mainControls}
+      transition={{ duration: 1, delay: delay }}
+    >
+      <Center
+        className="w-20 h-20 relative text-teal-500  bg-gray-100 shadow-xl rounded-lg cursor-pointer hover:shadow-teal-300 hover:text-white hover:bg-gradient-to-t from-teal-400 to-teal-600 ease-out hover:ease-in transition duration-300"
+        _after={{
+          content: `${after ? "url(" + arrow + ")" : '""'}`,
+          display: "block",
+          position: "absolute",
+          left: "100px",
+          top: "15px",
+        }}
+      >
+        <Icon className=" w-9 h-9" />
+      </Center>
+      <Heading as="h2" size="md" fontWeight={"semibold"}>
+        {title}
+      </Heading>
+      <Text className="w-4/5 text-center text-gray-600 font-medium">
+        {text}
+      </Text>
+    </motion.div>
+  );
+};
+
+export default CardSteps;

frontend/src/components/home/howToRent/howToRent.component.tsx

@@ -0,0 +1,96 @@
+import { Center, Flex, Heading, Text } from "@chakra-ui/react";
+import React from "react";
+import { Reveal } from "../../motion/reveal.component";
+import {
+  FaMagnifyingGlassLocation,
+  FaMapLocationDot,
+  FaRoute,
+} from "react-icons/fa6";
+
+import { MdOutlineElectricBike } from "react-icons/md";
+import CardSteps from "./cardSteps.component";
+
+const HowToRent: React.FC = () => {
+  const dataSteps = [
+    {
+      icon: FaMagnifyingGlassLocation,
+      title: "Location",
+      text: "Pick the location and the needed rent date.",
+      after: true,
+      delay: 1,
+      id: 1,
+    },
+    {
+      icon: MdOutlineElectricBike,
+      title: "Choose A Bike",
+      text: "Select a bicycle using our catalogues.",
+      after: true,
+      delay: 2,
+      id: 2,
+    },
+    {
+      icon: FaRoute,
+      title: "Enjoy Your Ride",
+      text: "Explore new sights and places with comfort.",
+      after: true,
+      delay: 3,
+      id: 3,
+    },
+    {
+      icon: FaMapLocationDot,
+      title: "Return The Bike",
+      text: "Leave the bike at one of our offices.",
+      after: false,
+      delay: 4,
+      id: 4,
+    },
+  ];
+  return (
+    <Flex
+      justifyContent={"space-around"}
+      alignItems={"center"}
+      flexDirection={"column"}
+      gap={6}
+      py={"30px"}
+      height={"85vh"}
+    >
+      <Center flexDirection={"column"} gap={4}>
+        <Reveal>
+          <Heading as="h3" size="md" className="capitalize">
+            How to rent
+          </Heading>
+        </Reveal>
+        <Reveal>
+          <Heading as="h1" size="3xl" className="py-4" color={"orange.500"}>
+            Simple and easy steps to rent
+          </Heading>
+        </Reveal>
+        <Reveal>
+          <Text className="text-md font-medium text-gray-500">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam,
+            eos maxime?
+          </Text>
+        </Reveal>
+        <Reveal>
+          <Text className="text-md font-medium text-gray-500">
+            Ab id ullam quis consequuntur nesciunt blanditiis.
+          </Text>
+        </Reveal>
+      </Center>
+      <Flex>
+        {dataSteps.map(({ icon, title, text, id, after, delay }) => (
+          <CardSteps
+            key={id}
+            Icon={icon}
+            title={title}
+            text={text}
+            after={after}
+            delay={delay}
+          />
+        ))}
+      </Flex>
+    </Flex>
+  );
+};
+
+export default HowToRent;

frontend/src/components/home/landingSwiper/cardSlider.component.tsx

@@ -49,7 +49,7 @@ const CardSlider = ({
            bg-cover bg-center"
         ></Box> */}
       <motion.p
-        className="text-teal-500 text-lg font-bold  px-2 z-10 rounded-lg mb-4"
+        className="text-teal-500 text-lg font-bold  px-2 z-10 mb-4"
         variants={{
           hidden: { opacity: 0, y: 75 },
           visible: { opacity: 1, y: 0 },

frontend/src/components/home/landingSwiper/landingSwiper.component.tsx

@@ -30,15 +30,15 @@ const LandingSwiper = () => {
       sousTitle: "Starting from 15$ per day",
       text1: "lorem ipsum dolor sit amet consectetur adipisicing elit.",
       text2: "lorem ipsum dolor sit amet consectetur adipisicing elit.",
-      id: 1,
+      id: 2,
     },
     {
       img: bannerImage3,
       title: "favorite rentals service",
       sousTitle: "Starting from 3$ per hour",
       text1: "lorem ipsum dolor sit amet consectetur adipisicing elit.",
       text2: "lorem ipsum dolor sit amet consectetur adipisicing elit.",
-      id: 1,
+      id: 3,
     },
   ];
   return (
@@ -54,8 +54,8 @@ const LandingSwiper = () => {
         modules={[Autoplay]}
         className="mySwiper"
       >
-        {data.map(({ img, text1, text2, title, sousTitle }) => (
-          <SwiperSlide>
+        {data.map(({ img, text1, text2, title, sousTitle, id }) => (
+          <SwiperSlide key={id}>
             {({ isActive }) =>
               isActive && (
                 <CardSlider

frontend/src/components/motion/reveal.component.tsx

@@ -0,0 +1,48 @@
+import React, { useRef, useEffect } from "react";
+import { motion, useAnimation, useInView } from "framer-motion";
+
+interface Props {
+  children: React.ReactNode;
+  width?: string;
+  delay?: number;
+}
+
+export const Reveal = ({ children, width = "fit", delay = 0.5 }: Props) => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+
+  const mainControls = useAnimation();
+  const slideControls = useAnimation();
+
+  useEffect(() => {
+    if (isInView) {
+      mainControls.start("visible");
+      slideControls.start("visible");
+    }
+  }, [isInView]);
+  return (
+    <div ref={ref} className={`relative w-${width} overflow-hidden`}>
+      <motion.div
+        variants={{
+          hidden: { opacity: 0, y: 75 },
+          visible: { opacity: 1, y: 0 },
+        }}
+        initial="hidden"
+        animate={mainControls}
+        transition={{ duration: 1, delay: delay }}
+      >
+        {children}
+      </motion.div>
+      <motion.div
+        className="absolute top-4 left-0 bottom-4 right-0 bg-gradient-to-r from-teal-500 to-teal-700 z-20"
+        variants={{
+          hidden: { left: 0 },
+          visible: { left: "100%" },
+        }}
+        initial="hidden"
+        animate={slideControls}
+        transition={{ duration: 0.75, ease: "easeIn" }}
+      />
+    </div>
+  );
+};

frontend/src/pages/home.page.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 import LandingSwiper from "../components/home/landingSwiper/landingSwiper.component";
+import HowToRent from "../components/home/howToRent/howToRent.component";
 
 const HomePage: React.FC = () => {
   return (
     <>
       <LandingSwiper />
+      <HowToRent />
     </>
   );
 };