Adjust UI

- make signin green also in home page - adjust clippath background of all section - adjust review arrow to green, hover effect and grey effect
nuuxcode · Dec 17, 2023 · 9208914 · 9208914
1 parent 5795d74
commit 9208914
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 13 deletions.
diff --git a/frontend/src/components/header/header.component.tsx b/frontend/src/components/header/header.component.tsx
@@ -107,7 +107,7 @@ const Header: React.FC = () => {
             <Link to="/login">
               <Button
                 colorScheme="teal"
-                variant={location.pathname === '/login' ? 'solid' : 'outline'}
+                variant={location.pathname === '/login' || location.pathname === '/' ? 'solid' : 'outline'}
                 size={{ base: "sm", md: "md" }}
               >
                 Signin

diff --git a/frontend/src/components/home/bikes/swiperBikes.component.tsx b/frontend/src/components/home/bikes/swiperBikes.component.tsx
@@ -53,11 +53,11 @@ const SwiperBikes = () => {
       gap={4}
     >
       <Box
-        className="absolute w-2/5 h-full top-0 right-0 bg-teal-50"
-        clipPath={"circle(62.2% at 80% 13%)"}
+        className="absolute w-3/5 h-full top-0 right-0 bg-teal-100 opacity-25"
+        clipPath={"circle(60% at 80% 13%)"}
       />
       <Box
-        className="absolute w-1/6 h-full bottom-1 left-1 bg-teal-50"
+        className="absolute w-1/6 h-full bottom-1 left-1 bg-teal-100 opacity-25"
         clipPath={"circle(25% at 54% 74%)"}
       />
 

diff --git a/frontend/src/components/home/howToRent/howToRent.component.tsx b/frontend/src/components/home/howToRent/howToRent.component.tsx
@@ -1,4 +1,4 @@
-import { Center, Flex, Heading, Text } from "@chakra-ui/react";
+import { Center, Flex, Heading, Box, Text } from "@chakra-ui/react";
 import React from "react";
 import { Reveal } from "../../motion/reveal.component";
 import {
@@ -54,8 +54,21 @@ const HowToRent: React.FC = () => {
       gap={6}
       py={"30px"}
       minHeight={"80vh"}
+      className="relative"
     >
       <Center flexDirection={"column"} gap={4}>
+        <Box
+          className="absolute w-full h-full top-0 left-0 bg-teal-100 opacity-25 -z-10"
+          clipPath={"circle(30.2% at 10% 50%)"}
+        />
+        <Box
+          className="absolute w-full h-full top-0 left-0 bg-teal-100 opacity-25 -z-10"
+          clipPath={"circle(30.2% at 50% 10%)"}
+        />
+        <Box
+          className="absolute w-full h-full top-0 left-0 bg-teal-100 opacity-25 -z-10"
+          clipPath={"circle(20.2% at 90% 5%)"}
+        />
         <Reveal>
           <Heading
             as="h3"

diff --git a/frontend/src/components/home/reviews/swiperReviews.component.tsx b/frontend/src/components/home/reviews/swiperReviews.component.tsx
@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { Heading, Box, Center, Text, Flex } from "@chakra-ui/react";
 import { Reveal } from "../../motion/reveal.component";
 import CardReview from "./cardReview.component";
@@ -15,6 +15,7 @@ import "../../../index.css";
 
 const SwiperReviews = () => {
   const swiperRef = useRef<SwiperCore>();
+  const [activeSlideIndex, setActiveSlideIndex] = useState(0);
 
   const reviews = [
     {
@@ -65,11 +66,11 @@ const SwiperReviews = () => {
       className="relative md:flex-row flex-col items-center justify-end gap-4"
     >
       <Box
-        className="absolute w-3/6 h-full top-1 right-1 bg-teal-50"
+        className="absolute w-3/6 h-full top-1 right-1 bg-teal-100 opacity-25"
         clipPath={"polygon(100% 0, 41% 0, 100% 89%)"}
       />
       <Box
-        className="absolute w-2/5 h-full top-0 left-0 bg-teal-50"
+        className="absolute w-2/5 h-full top-0 left-0 bg-teal-100 opacity-25"
         clipPath={"circle(62.2% at 13% 80%)"}
       />
 
@@ -92,7 +93,7 @@ const SwiperReviews = () => {
         </Reveal>
         <Reveal>
           <Text className="text-gray-500 sm:text-base text-sm font-medium sm:text-start text-center">
-          Discovering the Joy of Riding with BikeHub
+            Discovering the Joy of Riding with BikeHub
           </Text>
         </Reveal>
         <Flex gap={3} alignSelf={{ base: "center", md: "start" }} zIndex={99}>
@@ -102,20 +103,31 @@ const SwiperReviews = () => {
               swiperRef.current?.slidePrev();
             }}
           >
-            <HiArrowLeft size={28} color={`teal`} />
+            <HiArrowLeft
+              className={`cursor-pointer font-bold transform hover:scale-125 transition-transform ${activeSlideIndex === 0 ? 'text-gray-500' : 'text-green-500'}`}
+              size={28}
+            />
           </div>
           <div
             className="cursor-pointer"
-            onClick={() => swiperRef.current?.slideNext()}
+            onClick={() => {
+              swiperRef.current?.slideNext();
+            }}
           >
-            <HiArrowRight size={28} color={"teal"} />
+            <HiArrowRight
+              className={`cursor-pointer font-bold transform hover:scale-125 transition-transform ${activeSlideIndex === reviews.length - 1 ? 'text-gray-500' : 'text-green-500'}`}
+              size={28}
+            />
           </div>
         </Flex>
       </Center>
       <Box className="sm:w-2/3  w-11/12">
         <Swiper
           slidesPerView={1}
           spaceBetween={18}
+          onSlideChange={(swiper) => {
+            setActiveSlideIndex(swiper.activeIndex);
+          }}
           onBeforeInit={(swiper) => {
             swiperRef.current = swiper;
           }}

diff --git a/frontend/src/components/home/whyChoose/whyChoose.component.tsx b/frontend/src/components/home/whyChoose/whyChoose.component.tsx
@@ -97,7 +97,7 @@ const WhyChoose = () => {
     //   height="90vh"
     >
       <Box
-        className="absolute w-2/5 h-full top-1 right-12 bg-teal-50 -z-10"
+        className="absolute w-2/5 h-full top-1 right-12 bg-teal-100 -z-10 opacity-25"
         clipPath={"polygon(30% 0%, 100% 0%, 70% 100%, 0% 100%)"}
       />
       <Reveal>