Worked on Products Single page - made changes + added links, created …

…sections

src/pages/ProductSingle/ProductSingle.jsx

@@ -2,6 +2,8 @@ import { lazy } from 'react';
 import { Link } from "react-router-dom";
 const Header = lazy(() => import("@components/Header/Header"));
 import BgProduct from "@images/products/project1-detailed.png";
+import AppStoreLogo from "@images/download-apple-store.png";
+import PlayStoreLogo from "@images/download-google-play.png";
 import './_productSingle.scss';
 
 const ProductSingle = () => {
@@ -37,8 +39,44 @@ const ProductSingle = () => {
  <img src={BgProduct} alt="product image" />
  </div>
 
- {/* Product details start */}
- {/* Product details end */}
+ {/* Product items start */}
+ <div className='product-item'>
+ <div className='container'>
+ <div className='product-item__wrapper'>
+ <div className='product-item__side'>
+ <div className='product-item__info-block'>
+ <p className='product-item__headText'>Industry</p>
+ <span className='product-item__val'>Fintech</span>
+ </div>
+
+ <div className='product-item__info-block'>
+ <p className='product-item__headText'>Supported devices</p>
+ <span className='product-item__val'>Web, iPhone, iPad, Android</span>
+ </div>
+
+ <div className='product-item__info-block'>
+ <p className='product-item__headText'>Available on</p>
+ <span className='product-item__val'>
+ <a href="https://google.com" target='_blank'>
+ <img src={AppStoreLogo} width='150' alt="app store logo" />
+ </a>
+ <a href="https://google.com" target='_blank'>
+ <img src={PlayStoreLogo} width='150' height='50' alt="play store logo" />
+ </a>
+ </span>
+ </div>
+ </div>
+ <div className='product-item__side'>
+ <h3 className='product-item__clientTitle'>About the client</h3>
+ <div className='product-item__clientDescrWrapper'>
+ <span className='product-item__clientSubtext'>Aurox is a leading crypto software ecosystem founded in 2017.</span>
+ <p className='product-item__clientDescr'>The company offers traders, investors, and institutions a suite of tools that facilitate DeFi trading. Its flagship solution, a web-based cryptocurrency trading terminal, helps users make educated trading decisions by predicting market movement with 80% accuracy.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ {/* Product items end */}
  </section>
  </>
  )

src/pages/ProductSingle/_productSingle.scss

@@ -53,4 +53,66 @@
  width: 100%;
  height: 500px;
  object-fit: cover;
+}
+
+// Product items start
+.product-item {
+ margin-top: 70px;
+}
+
+.product-item__info-block {
+ width: 340px;
+}
+
+.product-item__headText {
+ margin: 0;
+ margin-bottom: 2px;
+
+ font-size: 14px;
+ color: #1614138f;
+ font-weight: 500;
+}
+
+.product-item__val {
+ display: block;
+ margin-bottom: 24px;
+
+ font-size: 16px;
+ font-weight: 500;
+ color: #000;
+}
+
+.product-item__wrapper {
+ display: flex;
+ justify-content: space-between;
+}
+
+.product-item__info-block:nth-child(3) img {
+ margin-top: 10px;
+ margin-right: 5px;
+}
+
+.product-item__clientTitle {
+ margin: 0;
+
+ font-size: 56px;
+ color: #161413;
+}
+
+.product-item__clientDescrWrapper {
+ width: 800px;
+}
+
+.product-item__clientSubtext {
+ display: block;
+ margin-bottom: 20px;
+
+ font-size: 20px;
+ font-weight: 500;
+ color: #000;
+}
+
+.product-item__clientDescr {
+ font-size: 18px;
+ color: #423b38;
 }