Merge branch 'develop' of github.com:atlp-rwanda/e-commerce-ninjas-fe…

… into ft-user-signup-187584865

src/App.scss

@@ -1,4 +1,5 @@
 @import './styles/Colors.scss';
+@import './styles/Sample.scss';
 @import './styles/style.scss';
 @import './styles/signup.scss';
 @import './styles/LandingPage.scss';
@@ -12,3 +13,4 @@
 @import './styles/SellerHeader.scss';
 @import './styles/SideBar.scss';
 @import './styles/Header.scss';
+@import "./styles/Product.scss";

src/components/categories/Categories.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable */
-
 import React from "react";
-import "../../styles/Categories.scss";
-
+import leftButton from '../../../public/assets/left-bottom.png';
+import middle from '../../../public/assets/middle.png';
+import rightButton from '../../../public/assets/right-bottom.png';
+import rightTop from '../../../public/assets/right-top.png';
 function Categories() {
   return (
     <div className="categories__container">
@@ -20,7 +21,7 @@ function Categories() {
         </div>
         <div className="categories__box categories__box__2">
           <img
-            src="left-bottom.png"
+            src={leftButton}
             alt="Product image"
             className="categories__img"
           />
@@ -31,7 +32,7 @@ function Categories() {
         </div>
         <div className="categories__box categories__box__3">
           <img
-            src="middle.png"
+            src={middle}
             alt="Product image"
             className="categories__img"
           />
@@ -51,7 +52,7 @@ function Categories() {
         </div>
         <div className="categories__box categories__box__4">
           <img
-            src="right-top.png"
+            src={rightTop}
             alt="Product image"
             className="categories__img"
           />
@@ -64,7 +65,7 @@ function Categories() {
         </div>
         <div className="categories__box categories__box__5">
           <img
-            src="right-bottom.png"
+            src={rightButton}
             alt="Product image"
             className="categories__img"
           />

src/components/layout/Footer.tsx

@@ -180,4 +180,4 @@ function Footer() {
     </footer>
   );
 }
-export default Footer;
+export default Footer;

src/components/layout/Header.tsx

@@ -9,7 +9,8 @@ import { IoCartOutline } from "react-icons/io5";
 import { IoLogOutSharp } from "react-icons/io5";
 import { FaUserClock } from "react-icons/fa6";
 import { FaChevronDown } from "react-icons/fa";
-import Logo from "../../../public/images/logo.png";
+import { NavLink } from "react-router-dom";
+import Logo from "../../../public/assets/images/logo.png";
 
 import SearchInput from "../inputs/SearchInput";
 
@@ -108,28 +109,28 @@ function Header() {
               <div className="order__dropdown">
                 <ul className="order__list">
                   <li>
-                    <a href="#" className="order__link">
+                    <NavLink to="/my-orders" className="order__link">
                       <FaBuildingCircleCheck className="order__icon" />
                       <span className="order__text">My Orders</span>
-                    </a>
+                    </NavLink>
                   </li>
                   <li>
-                    <a href="#" className="order__link">
+                    <NavLink to="/wishlist" className="order__link">
                       <FaBuildingCircleCheck className="order__icon" />
                       <span className="order__text">WishList</span>
-                    </a>
+                    </NavLink>
                   </li>
                   <li>
-                    <a href="#" className="order__link">
+                    <NavLink to="/profile-settings" className="order__link">
                       <FaUserClock className="order__icon" />
                       <span className="order__text">Profile Settings</span>
-                    </a>
+                    </NavLink>
                   </li>
                   <li>
-                    <a href="#" className="order__link">
+                    <NavLink to="/login" className="order__link">
                       <IoLogOutSharp className="order__icon" />
                       <span className="order__text">Login</span>
-                    </a>
+                    </NavLink>
                   </li>
                 </ul>
               </div>
@@ -140,23 +141,35 @@ function Header() {
           <div className="header__nav">
             <nav>
               <ul>
-                <li>
-                  <a href="#">Home</a>
+                <li className="nav__item">
+                  <NavLink to="/" className={({ isActive }) => (isActive ? 'active' : '')}>
+                    Home
+                  </NavLink>
                 </li>
-                <li>
-                  <a href="#">Shops</a>
+                <li className="nav__item">
+                  <NavLink to="/shops" className={({ isActive }) => (isActive ? 'active' : '')}>
+                    Shops
+                  </NavLink>
                 </li>
-                <li>
-                  <a href="#">Products</a>
+                <li className="nav__item">
+                  <NavLink to="/products" className={({ isActive }) => (isActive ? 'active' : '')}>
+                    Products
+                  </NavLink>
                 </li>
-                <li>
-                  <a href="#">Services</a>
+                <li className="nav__item">
+                  <NavLink to="/services" className={({ isActive }) => (isActive ? 'active' : '')}>
+                    Services
+                  </NavLink>
                 </li>
-                <li>
-                  <a href="#">Contact-Us</a>
+                <li className="nav__item">
+                  <NavLink to="/contact-us" className={({ isActive }) => (isActive ? 'active' : '')}>
+                    Contact-Us
+                  </NavLink>
                 </li>
-                <li>
-                  <a href="#">About-us</a>
+                <li className="nav__item">
+                  <NavLink to="/about-us" className={({ isActive }) => (isActive ? 'active' : '')}>
+                    About-us
+                  </NavLink>
                 </li>
               </ul>
             </nav>

src/components/layout/Sample.tsx

@@ -0,0 +1,140 @@
+/* eslint-disable */
+import React, { useState, useEffect, useRef } from 'react';
+import { TfiHeadphoneAlt } from "react-icons/tfi";
+import { VscWorkspaceTrusted } from "react-icons/vsc";
+import { LiaShippingFastSolid } from "react-icons/lia";
+import { FaHandHoldingUsd } from "react-icons/fa";
+import { GoDotFill } from "react-icons/go";
+import { FaChevronCircleLeft, FaChevronCircleRight } from "react-icons/fa";
+import leftTop from "../../../public/assets/images/left-top.png";
+import rightTop from "../../../public/assets/images/right-top.png";
+import leftBottom from "../../../public/assets/images/left-bottom.png";
+import rightBottom from "../../../public/assets/images/right-bottom.png";
+const images = [
+  '/assets/middle.png',
+  '/assets/shoe2.jpeg',
+  '/assets/shoe3.jpeg'
+];
+
+const Sample: React.FC = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleLeftClick = () => {
+    setCurrentIndex((prevIndex) => (prevIndex === 0 ? images.length - 1 : prevIndex - 1));
+  };
+
+  const handleRightClick = () => {
+    setCurrentIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1));
+  };
+
+  const startImageChangeInterval = () => {
+    intervalRef.current = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+    }, 5000);
+  };
+
+  useEffect(() => {
+    startImageChangeInterval();
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      startImageChangeInterval();
+    }
+  }, [currentIndex]);
+
+  return (
+    <div>
+      <div className="sampleImages1">
+        <div className="sample1">
+          <div className="menShoe">
+            <img src={leftTop} alt="" />
+            <div className="text-container">
+              <p>Men's Shoes</p>
+              <button>View &gt;</button>
+            </div>
+          </div>
+          <div className="phones">
+            <img src={leftBottom} alt="" />
+            <div className="text-container">
+              <p>Phones</p>
+              <button>View &gt;</button>
+            </div>
+          </div>
+        </div>
+        <div className="sample2" style={{ backgroundImage: `url(${images[currentIndex]})` }}>
+          <div className="arrow left" onClick={handleLeftClick}>
+            <FaChevronCircleLeft className="icon-arrow" />
+          </div>
+          <div className="arrow right" onClick={handleRightClick}>
+            <FaChevronCircleRight className="icon-arrow" />
+          </div>
+          <div className="dots">
+            {images.map((_, index) => (
+              <GoDotFill
+                key={index}
+                className="icon-dots"
+                style={{ color: currentIndex === index ? '#ff6d18' : '#fff' }}
+              />
+            ))}
+          </div>
+        </div>
+        <div className="sample3">
+          <div className="womenShoe">
+            <img src={rightTop} alt="" />
+            <div className="text-container">
+              <p>Women's Shoes</p>
+              <button>View &gt;</button>
+            </div>
+          </div>
+          <div className="accessories">
+            <img src={rightBottom} alt="" />
+            <div className="text-container">
+              <p>Accessories</p>
+              <button>View &gt;</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="trust-container">
+        <div className="trust">
+          <TfiHeadphoneAlt className="icon" />
+          <div className="name">
+            <h2>Responsive</h2>
+            <p>Customer service available 24/7</p>
+          </div>
+        </div>
+        <div className="trust">
+          <VscWorkspaceTrusted className="icon" />
+          <div className="name">
+            <h2>Secure</h2>
+            <p>Certified marketplace since 2024</p>
+          </div>
+        </div>
+        <div className="trust">
+          <LiaShippingFastSolid className="icon" />
+          <div className="name">
+            <h2>Shipping</h2>
+            <p>Free, fast, and reliable worldwide</p>
+          </div>
+        </div>
+        <div className="trust">
+          <FaHandHoldingUsd className="icon" />
+          <div className="name">
+            <h2>Transparent</h2>
+            <p>Free return policy</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Sample;

src/components/product/Product.tsx

@@ -0,0 +1,61 @@
+/* eslint-disable */
+import React, { useState, useRef } from 'react';
+import { CiHeart } from "react-icons/ci";
+import { PiShoppingCartThin } from "react-icons/pi";
+interface ProductProps {
+  images: string[];
+  name: string;
+  price: string;
+  stock: number;
+  description: string;
+  discount: number;
+}
+
+const Product: React.FC<ProductProps> = ({ images, name, price, stock, description, discount }) => {
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleMouseEnter = () => {
+    intervalRef.current = setInterval(() => {
+      setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
+    }, 2000);
+  };
+
+  const handleMouseLeave = () => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    setCurrentImageIndex(0);
+  };
+
+  const truncateDescription = (desc: string, length: number) => {
+    return desc.length > length ? `${desc.substring(0, length)}...` : desc;
+  };
+
+  return (
+    <div className="product">
+      <div
+        className="product-image-container"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <span className="discount-badge">{discount}%</span>
+        <img src={images[currentImageIndex]} alt="Product" className="product-image" />
+      </div>
+      <div className="product-info">
+        <div className="product-add">
+          <div className="icon-container"><PiShoppingCartThin className="icon" /></div>
+          <div className="icon-container"><CiHeart className="icon" /></div>
+        </div>
+        <div className="product-name">{name}</div>
+        <div className="product-details">
+          <p className="product-price">{price}</p>
+          <p className="product-stock"><span className="stock">Stock:</span>{stock}</p>
+        </div>
+        <p className="product-description">{truncateDescription(description, 20)}</p>
+      </div>
+    </div>
+  );
+};
+
+export default Product;

src/pages/EmailVerifying.tsx

@@ -2,7 +2,7 @@
 import React, { useEffect } from 'react'
 import { Meta } from '../components/Meta'
 import { useNavigate } from 'react-router-dom';
-import newMessage from "../../public/images/new-message.png"
+import newMessage from "../../public/assets/images/new-message.png"
 import { useAppSelector } from '../store/store'
 export const EmailVerifying = () => {
     const navigate = useNavigate();