Merge pull request #9 from atlp-rwanda/ft-create-landing-page-187862829

[#187862829] ft-create-landing-page

.gitignore

@@ -7,7 +7,7 @@
 /coverage
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store

package.json

@@ -19,6 +19,7 @@
     "react-icons": "^5.2.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.24.0",
+    "react-spinners": "^0.14.1",
     "sass": "^1.77.6",
     "save-dev": "0.0.1-security"
   },

src/components/layout/Footer.tsx

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

src/components/layout/Header.tsx

@@ -9,6 +9,7 @@ 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 { NavLink } from "react-router-dom";
 
 import "../../styles/Header.scss";
 
@@ -109,28 +110,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>
@@ -141,23 +142,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,134 @@
+/* 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 '../../styles/index.scss';
+
+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">
+            <div className="text-container">
+              <p>Men's Shoes</p>
+              <button>View &gt;</button>
+            </div>
+          </div>
+          <div className="phones">
+            <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">
+            <div className="text-container">
+              <p>Women's Shoes</p>
+              <button>View &gt;</button>
+            </div>
+          </div>
+          <div className="accessories">
+            <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,63 @@
+/* eslint-disable */
+import React, { useState, useRef } from 'react';
+import { CiHeart } from "react-icons/ci";
+import { PiShoppingCartThin } from "react-icons/pi";
+import '../../styles/index.scss';
+
+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;