Made changes to Products page, changed structure

src/pages/Products/Products.jsx

@@ -1,4 +1,5 @@
-import { lazy } from 'react';
+import { lazy } from 'react'; 
+import { Link } from "react-router-dom";
 const Header = lazy(() => import("@components/Header/Header"));
 import './_products.scss';
 
@@ -8,7 +9,20 @@ const Products = () => {
  <Header/>
  <section className='section products'>
  <div className='container'>
- <h2 className='products-title'>Featured case studies!</h2>
+ <h2 className='products__title'>Featured case studies</h2>
+ <Link to='/'>
+ <div className='products__box'>
+ <div className='products__content'>
+ <h3 className='products__title--content'>Web 3.0 crypto wallet makes a decentralized experience secure for 5 million users</h3>
+ <span className='products__devices'>IOS & Android, Web</span>
+ <span className='products__category'>Finance</span>
+ <span className='products__country'>US</span>
+ <div className='products__button-link'>
+ <Link className='products__link' to='/'>Explore more <i className="fa fa-arrow-right"></i> </Link>
+ </div>
+ </div>
+ </div>
+ </Link>
  </div>
  </section>
  </>

src/pages/Products/_products.scss

@@ -1,3 +1,58 @@
-.products-title {
+.products__box {
+ display: flex;
+ align-items: end;
+ width: 100%;
+ margin-top: 70px;
+ height: 568px;
+
+ background-image: url('../../../public/assets/images/products/project1.png'); 
+ background-position: right;
+ background-size: cover;
+ background-color: #161413;
+ border-radius: 32px;
+
+ &:hover .products__link {
+ color: #cecbca;
+ }
+}
+
+.products__title {
  font-size: 70px;
+}
+
+.products__content {
+ width: 550px;
+ padding: 40px;
+}
+
+.products__title--content {
+ font-size: 32px;
+ color: #fff;
+}
+
+.products__content span {
+ margin-right: 10px;
+ padding: 4px 12px;
+
+ font-size: 14px;
+ border-radius: 14px;
+ font-weight: 600;
+ color: #161413;
+ background-color: #fff;
+}
+
+.products__button-link {
+ margin-top: 50px;
+}
+
+.products__link {
+ padding: 8px 0px;
+
+ font-size: 17px;
+ font-weight: 600px;
+ transition: all 0.3s ease;
+ color: #fff;
+ &:hover {
+ color: #cecbca;
+ }
 }