[#187862829] ft-create-landing-page

.gitignore

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

package.json

@@ -16,6 +16,7 @@
     "mini-css-extract-plugin": "^2.9.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.24.0",
     "sass": "^1.77.6",

src/App.tsx

@@ -9,4 +9,4 @@ const App: React.FC = () => (
   </Router>
 );
 
-export default App;
+export default App;

src/components/product/Product.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable */
+import React, { useState, useEffect } from 'react';
+import { CiHeart } from "react-icons/ci";
+import { PiShoppingCartThin } from "react-icons/pi";
+import '../../styles/ProductComponent.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);
+  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">
+        <div className="product-add">
+          <div className="icon-container"><CiHeart className="icon" /></div>
+          <div className="icon-container"><PiShoppingCartThin 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">{description}</p>
+      </div>
+    </div>
+  );
+};
+
+export default Product;

src/components/sample/Sample.tsx

@@ -0,0 +1,111 @@
+/* eslint-disable */
+import React, { useState } 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/Sample.scss';
+
+const images = [
+  '/middle.png',
+  '/shoe2.jpeg',
+  '/shoe3.jpeg'
+];
+
+const Sample: React.FC = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handleLeftClick = () => {
+    setCurrentIndex((prevIndex) => (prevIndex === 0 ? images.length - 1 : prevIndex - 1));
+  };
+
+  const handleRightClick = () => {
+    setCurrentIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1));
+  };
+
+  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/index.tsx

@@ -10,4 +10,4 @@ root.render(
   <Provider store={store}>
     <App />
   </Provider>
-);
+);

src/pages/LandingPage.tsx

@@ -1,29 +1,52 @@
+/* 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 { LiaLongArrowAltRightSolid } from "react-icons/lia";
 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 = [
+    "/shoe1.jpeg",
+    "/shoe2.jpeg",
+    "/shoe3.jpeg",
+    "/shoe4.jpeg",
+  ];
 
   return (
-    <>
+    <div className="landing-page">
       <Header />
-      <div className="landingPage">
-        <h1>
-          {welcomeMessage.message}
-        </h1>
+      <Sample />
+      <div className="landing-container">
+        <div className="head">
+          <h1>Today's Deal</h1>
+          <p>View all <LiaLongArrowAltRightSolid className="icon" /></p>
+        </div>
+        <div className="product-list">
+          {Array(8).fill(null).map((_, index) => (
+            <Product
+              key={index}
+              images={productImages}
+              name='HY-ENERGY Badminton Shoes
+              For Men'
+              price="$20.0"
+              stock={10}
+              description={`Lorem ipsum dolor sit amet 
+              consectetur adipisicing elit. Maxime 
+              mollitia, molestiae quas vel sint 
+              commodi repudiandae consequuntur 
+              voluptatum laborum numquam blanditiis 
+              harum quisquam eius sed odit fugiat iusto 
+              fuga praesentium optio.`}
+              discount={-10}
+            />
+          ))}
+        </div>
       </div>
       <Footer />
-    </>
+    </div>
   );
 };
 

src/router.tsx

@@ -18,4 +18,4 @@ const AppRouter: React.FC = () => {
   );
 };
 
-export default AppRouter;
+export default AppRouter;

src/styles/LandingPage.scss

@@ -1,12 +1,36 @@
-$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; 
+  .landing-container {
+    padding: 30px 20px 40px 50px;
+
+    .head {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      h1 {
+        font-size: 36px;
+      }
+
+      p {
+        display: flex;
+        align-items: center;
+        margin-right: 20px;
+        font-size: 25px;
+        color: #ff6d18;
+        .icon {
+          font-size: 40px;
+        }
+      }
+    }
+
+    .product-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+      gap: 17px;
+    }
   }
 }