[#187862829] ft-create-landing-page

.gitignore

@@ -4,7 +4,7 @@
 .pnp.js
 
 # testing
-/coverage
+/dist
 
 # production
 /build

src/components/product/Product.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable */
+import React, { useState, useEffect } from 'react';
+import '../../styles/ProductComponent.scss';
+
+interface ProductProps {
+  images: string[];
+  price: string;
+  description: string;
+  discount: number;
+  addToCart: string;
+  addToWishList: string;
+}
+
+const Product: React.FC<ProductProps> = ({ images, price, description, discount, addToCart, addToWishList }) => {
+  const [ currentImageIndex, setCurrentImageIndex ] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentImageIndex((prevIndex) => {
+        if (prevIndex === images.length - 1) {
+          return 0;
+        } 
+        return prevIndex + 1;
+      });
+    }, 5000);
+    return () => clearInterval(interval);
+  }, [images.length]);
+  return (
+    <div className="product">
+      <div className="product-image-container">
+        <span className="discount-badge">{discount}%</span>
+        <img src={images[currentImageIndex]} alt="Product" className="product-image" />
+      </div>
+      <div className="product-info">
+        <p className="product-price">{price}</p>
+        <p className="product-description">{description}</p>
+        <p className="product-add">{addToCart}</p>
+        <p className="product-add">{addToWishList}</p>
+      </div>
+    </div>
+  );
+};
+
+export default Product;

src/components/sample/Sample.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable */
+import React from 'react';
+import '../../styles/Sample.scss';
+
+const Sample: React.FC = () => {
+  return (
+    <div className="sampleImages1">
+        <div className="sample1">
+          <div className="menShoe">
+          <div>
+          <p>Men's Shoes</p>
+          <button>View &gt;</button>
+          </div>
+          </div>
+          <div className="phones">
+          <div>
+          <p>Phones</p>
+          <button>View &gt;</button>
+          </div>
+          </div>
+        </div>
+        <div className="sample2">
+
+        </div>
+        <div className="sample3">
+          <div className="womenShoe">
+          <div>
+          <p>Women's Shoes</p>
+          <button>View &gt;</button>
+          </div>
+          </div>
+          <div className="accessories">
+          <div>
+          <p>Accessories</p>
+          <button>View &gt;</button>
+          </div>
+          </div>
+        </div>
+    </div>
+  );
+};
+
+export default Sample;

src/pages/LandingPage.tsx

@@ -1,29 +1,45 @@
+/* eslint-disable */
 import React, { useEffect } from 'react';
-import { useAppDispatch, useAppSelector } from '../store/store';
-import { loadWelcomeMessage } from '../store/features/welcomeSlice';
-import { IWelcomeMessage } from '../utils/types/store';
+import Product from '../components/product/Product';
+import Sample from '../components/sample/Sample';
 import Header from '../components/layout/Header';
 import Footer from '../components/layout/Footer';
 import '../styles/LandingPage.scss';
 
 const LandingPage: React.FC = () => {
-  const dispatch = useAppDispatch();
-  const welcomeMessage: IWelcomeMessage = useAppSelector((state) => state.initialMessage.welcomeMessage);
-
-  useEffect(() => {
-    dispatch(loadWelcomeMessage());
-  }, [dispatch]);
+  const productImages = [
+        "/productImage1.png",    
+        "/productImage2.jpg",    
+        "/productImage3.jpg",    
+        "/productImage4.jpeg",  
+      ];
 
   return (
-    <>
+    <div className="landing-page">
       <Header />
-      <div className="landingPage">
-        <h1>
-          {welcomeMessage.message}
-        </h1>
+      <Sample />
+      <div className="search-results">
+        <h1>Today's Deal</h1>
+        <div className="product-list">
+          {Array(10).fill(null).map((_, index) => (
+            <Product
+              key={index}
+              images={productImages}
+              price="18,500 Rwf"
+              description={`Chain Cloud Bag 
+              Retro Underarm Bag 2020 New Soft 
+              Fold bag Designer Female Dumpling 
+              Bag Cowhide Leather Clutch handbag.`}
+              discount={-8.5}
+              addToCart="Add to Cart"
+              addToWishList="Add to Wishlist"
+            />
+          ))}
+        </div>
+        <button className="view-more-button">View more</button>
       </div>
       <Footer />
-    </>
+    </div>
   );
 };
 

src/styles/LandingPage.scss

@@ -1,12 +1,33 @@
-$primary-color: #FF6D18;
+@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
 
-.landingPage {
-  background: $primary-color;
-  color: white; 
-  padding: 20px;
+.landing-page {
+  font-family: "Averia Serif Libre", serif;
+  font-style: normal;
 
-  h1 {
-    font-size: 2em;
-    margin-bottom: 10px; 
+  .search-results {
+    padding: 20px;
+
+    h1 {
+      margin-bottom: 20px;
+      font-size: 36px;
+    }
+
+    .product-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: 13px;
+    }
+
+    .view-more-button {
+      margin: 40px auto;
+      display: block;
+      font-size: 28px;
+      padding: 10px 20px;
+      border: none;
+      background-color: #ff6d18;
+      color: white;
+      cursor: pointer;
+      border-radius: 10px;
+    }
   }
 }

src/styles/ProductComponent.scss

@@ -0,0 +1,59 @@
+* {
+  margin: 0;
+}
+
+.product {
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  overflow: hidden;
+  width: 200px;
+  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.3);
+  height: 300px;
+
+  .product-image-container {
+    position: relative;
+
+    .discount-badge {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: #FF6D18;
+      color: white;
+      padding: 5px;
+      border-top-left-radius: 10px;
+      border-bottom-right-radius: 20px;
+      font-size: 14px;
+      font-weight: bold;
+    }
+
+    .product-image {
+      width: 100%;
+      height: 161px;
+    }
+  }
+
+  .product-info {
+    padding: 0px 5px 10px 5px;
+    background-color: #F6F6F6;
+
+    .product-price {
+      padding: 10px 0px 0px 0px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #FF6D18;
+    }
+
+    .product-add {
+      padding: 4px 0px 0px 0px;
+      font-size: 14px;
+      font-weight: bold;
+      color: #FF6D18;
+    }
+
+    .product-description {
+      padding: 4px 0px 0px 0px;
+      font-size: 12px;
+      color: #000000;
+    }
+  }
+}

src/styles/Sample.scss

@@ -0,0 +1,87 @@
+.sampleImages1 {
+  display: flex;
+  width: 100%;
+  color: white;
+  background-color: #d9d9d9;
+  z-index: -1;
+  gap: 10px;
+  height: 195px;
+
+  .sample1, .sample3 {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    width: 30%;
+    z-index: 100;
+    gap: 10px;
+  }
+
+  .sample2 {
+    flex: 1;
+    background-image: url('../../public/middle.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 30%;
+    z-index: 100;
+  }
+
+  .menShoe, .phones, .womenShoe, .accessories {
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: -1;
+    padding-top: 20px;
+    height: 50%;
+
+    p {
+      font-size: 14px;
+    }
+
+    button {
+      border: none;
+      font-size: 16px;
+      padding: 5px 20px;
+      border-radius: 40px;
+      margin-bottom: 10px;
+    }
+  }
+
+  .menShoe {
+    background-image: url('../../public/left-top.png');
+    padding-left: 30px;
+
+    button {
+      color: #9180ff;
+    }
+  }
+
+  .phones {
+    background-image: url('../../public/left-bottom.png');
+    padding-left: 30px;
+
+    button {
+      color: #4da0fc;
+    }
+  }
+
+  .womenShoe {
+    background-image: url('../../public/right-top.png');
+    padding-left: 65%;
+    padding-right: 30px;
+
+    button {
+      color: #ff6d18;
+    }
+  }
+
+  .accessories {
+    background-image: url('../../public/right-bottom.png');
+    padding-left: 65%;
+    padding-right: 30px;
+
+    button {
+      color: #8a869d;
+    }
+  }
+}