Display Item Page and Each Item upon click

src/components/Button/TertiaryButton.js

@@ -6,14 +6,15 @@ const TertiaryButton = ({ children }) => <StyledButton>{children}</StyledButton>
 
 const StyledButton = styled.button`
   display: flex;
-  border: 2px solid blue;
+  border: 2px solid black;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: 1rem 7rem;
   border-radius: 2rem;
+  font-size: 1.5rem;
   background-color: transparent;
-  color: blue; /* Set the default text color */
+  color: black; /* Set the default text color */
   cursor: pointer;
   transition: background-color 0.3s, color 0.3s;
 

src/components/Card/DisplayCartCard.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { FaFacebook, FaTwitter, FaInstagram } from 'react-icons/fa';
+import { Link } from 'react-router-dom';
+
+const DisplayCartCard = ({ imageName, name, shortNote }) => (
+  <Container to="/u/dashboard/item-details">
+    <Image src={require(`../asset/${imageName}.jpg`).default} alt={name} />
+    <Content>
+      <Name>{name}</Name>
+      <Note>{shortNote}</Note>
+      <Icons>
+        <IconLink href="#" target="_blank">
+          <FaFacebook />
+        </IconLink>
+        <IconLink href="#" target="_blank">
+          <FaTwitter />
+        </IconLink>
+        <IconLink href="#" target="_blank">
+          <FaInstagram />
+        </IconLink>
+      </Icons>
+    </Content>
+  </Container>
+);
+
+DisplayCartCard.propTypes = {
+  imageName: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  shortNote: PropTypes.string.isRequired,
+};
+
+const Container = styled(Link)`
+  display: flex;
+  flex-direction: column;
+  text-decoration: none;
+  width: 300px;
+//   border: 1px solid #ccc;
+  border-radius: 8px;
+  overflow: hidden;
+//   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+`;
+
+const Image = styled.img`
+  width: 100%;
+  height: 200px;
+  border: 1px solid blue;
+  border-radius: 50%;
+  margin-top: 1rem;
+  object-fit: cover;
+`;
+
+const Content = styled.div`
+  padding: 16px;
+  align-items: center;
+  text-align: center;
+`;
+
+const Name = styled.h2`
+  font-size: 1.5rem;
+  margin-bottom: 8px;
+`;
+
+const Note = styled.p`
+  font-size: 1rem;
+  margin-bottom: 16px;
+`;
+
+const Icons = styled.div`
+  display: flex;
+  gap: 15px;
+  margin-left: 5rem;
+`;
+
+const IconLink = styled.a`
+  color: #333;
+  font-size: 1.5rem;
+`;
+
+export default DisplayCartCard;

src/components/Card/DisplayItemCard.js

@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { FaCog, FaArrowRight, FaSyncAlt } from 'react-icons/fa';
+
+const DisplayItemCard = ({ name, imgSrc, amount, description }) => {
+  const [rotation, setRotation] = useState(0);
+
+  const handleRotate = () => {
+    setRotation((prevRotation) => (prevRotation + 90) % 360);
+  };
+  return (
+    <Container>
+        <Image>
+          <Image1 src={imgSrc} alt={name} rotation={rotation} />
+          <RotateButton onClick={handleRotate}>
+            <FaSyncAlt />
+          </RotateButton>
+        </Image>
+        <Content>
+        <Name>{name}</Name>
+        <Description>
+            {description}
+        </Description>
+        <Table>
+            <TableRow color="#ccc">
+            <TableData>Finance Fee</TableData>
+            <TableData>{amount}</TableData>
+            </TableRow>
+            <TableRow color="#fff">
+            <TableData>Opton to purchase fee</TableData>
+            <TableData>{amount}</TableData>
+            </TableRow>
+            <TableRow color="#ccc">
+            <TableData>Total amount payable</TableData>
+            <TableData>{amount}</TableData>
+            </TableRow>
+            <TableRow color="#fff">
+            <TableData>Duration</TableData>
+            <TableData>{amount}</TableData>
+            </TableRow>
+        </Table>
+        <BoldText>
+            5.9% APR Representative
+        </BoldText>
+        <ColorWheel>
+            DISCOVER MORE MODEL
+        </ColorWheel>
+        <ConfigureButton>
+            <SettingIcon>
+            <FaCog />
+            </SettingIcon>
+            Configure
+            <ArrowIcon>
+            <FaArrowRight />
+            </ArrowIcon>
+        </ConfigureButton>
+        </Content>
+    </Container>
+)};
+
+DisplayItemCard.propTypes = {
+  name: PropTypes.string.isRequired,
+  amount: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  imgSrc: PropTypes.string.isRequired,
+};
+
+const Container = styled.div`
+//   border: 1px solid #ccc;
+  display: flex;
+  border-radius: 8px;
+  text-align: right;
+//   margin-right: -20rem;
+//   width: 40%;
+  overflow: hidden;
+//   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+`;
+
+const Image = styled.div`
+  border: 1px solid blue;
+  width: 40rem;
+  margin-right: 2rem;
+  postion: relative;
+`;
+
+const Image1 = styled.img`
+  border: 1px solid blue;
+  width: 40rem;
+  margin-right: 2rem;
+  transform: rotate(${(props) => props.rotation}deg);
+  transition: transform 0.5s ease;
+`;
+
+const RotateButton = styled.button`
+  position: absolute;
+  bottom: 1rem;
+  right: 55rem;
+  background-color: #fff;
+  border: none;
+  border-radius: 50%;
+  padding: 0.5rem;
+  cursor: pointer;
+`;
+
+const Content = styled.div`
+  padding: 4rem 2rem;
+`;
+
+const Name = styled.h2`
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+`;
+
+const Description = styled.p`
+  font-size: 1rem;
+  margin-bottom: 1rem;
+`;
+
+const Table = styled.table`
+  width: 100%;
+  margin-bottom: 2rem;
+  margin-top: 3rem;
+`;
+
+const TableRow = styled.tr`
+  background-color: ${(props) => props.color};
+`;
+
+const TableData = styled.td`
+  padding: 1rem;
+  text-align: center;
+`;
+
+const BoldText = styled.div`
+  font-weight: bolder;
+  margin-bottom: 2rem;
+  margin-right: 10rem;
+`;
+
+const ColorWheel = styled.div`
+  /* Add styles for the color wheel */
+  margin-bottom: 5rem;
+`;
+
+const ConfigureButton = styled.button`
+  background-color: green;
+  color: #fff;
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  margin-left: 15rem;
+  border: none;
+  border-radius: 5rem;
+  cursor: pointer;
+`;
+
+const SettingIcon = styled.span`
+  margin-right: 8px;
+`;
+
+const ArrowIcon = styled.span`
+  margin-left: 8px;
+  margin-top: 2px;
+`;
+
+export default DisplayItemCard;

src/components/Link/Link.js

@@ -21,12 +21,11 @@ export const ButtonLink = styled(RouterLink)`
   font-weight: 500;
 `;
 
-export const NavBoxItem = ({ icon, path, children }) => (
+export const NavBoxItem = ({ path, children }) => (
   <NavigationBoxLink
     className={(navData) => (navData.isActive ? 'active' : '')}
     to={path}
   >
-    {icon}
     {children}
   </NavigationBoxLink>
 );

src/layout/UsersDashboard/UsersDashboardLayout.js

@@ -29,9 +29,8 @@ const Container = styled.div`
   grid-template-columns: 18rem auto;
   height: 100vh;
   width: 100vw;
-  /* border: 2px solid red; */
   overflow: scroll;
-  background-color: #FFD700;
+  background-color: white;
 `;
 
 const Section = styled.section`

src/layout/UsersDashboard/sideNav/Nav.js

@@ -31,10 +31,9 @@ const Container = styled.nav`
   padding: 2.69rem 2rem 3.75rem 2rem;
   display: flex;
   background-color: white;
-
   flex-direction: column;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
   gap: 3.8rem;
-//   position: fixed;
   top: 0;
 
   & > a > div {

src/pages/LandingPage/Home/Home.js

@@ -3,46 +3,41 @@ import styled from '@emotion/styled';
 import Img from '../../../components/Img/Img';
 import AuthNav from '../../../layout/LandingPage/nav/AuthNav';
 
+import bicycleImage from '../../../../src/components/asset/bicycle.jpg'
+
 const Home = () => (
   <Container>
-    <BigText>
-      <Image>
-        <Img src="/static/img/bicycle.jpg" alt='Bicycle'/>
-      </Image>
-      <Paragraph>THE NEW VESPA TRIDENT</Paragraph>
-      <Auth>
-        <AuthNav />
-      </Auth>
-    </BigText>
+    <Image>
+      <img src={bicycleImage} alt='Bicycle'/>
+    </Image>
+    <Paragraph>THE NEW VESPA TRIDENT</Paragraph>
+    <Auth>
+      <AuthNav />
+    </Auth>
   </Container>
 )
 
 export default Home;
 
 const Container = styled.div`
-  background-color: #FFD700;
-  border: 1px solid #FFD700;
-`;
-
-const BigText = styled.div`
-  margin-left: 30rem;
-  margin-top: 20rem;
-  margin-bottom: 3rem;
+  width: 100%;
 `;
 
 const Paragraph = styled.p`
   font-size: 3rem;
-  margin-top: -3rem;
+  margin-top: -40rem;
+  margin-left: 25rem;
+  color: green;
 `;
 
 const Image = styled.div`
-  width: 50%;
+  // width: 100%;
+
+  img {
+    width: 100%;
+  }
 `;
 
 const Auth = styled.div`
-  margin-top: 1rem;
-  margin-left: -29rem;
-  margin-bottom: 7.2rem;
-  border: 1px solid #FFD700;
-  padding-left: -20rem;
+  margin-left: -10rem;
 `;