From 5ff745ffd7969628c3e12c1d27843614af9fb1e8 Mon Sep 17 00:00:00 2001
From: jackbouncy7 <otaboevamadina@gmail.com>
Date: Sun, 20 Oct 2024 12:18:28 +0500
Subject: [PATCH] Made changes to Products page, changed structure

---
 src/pages/Products/Products.jsx   | 18 ++++++++--
 src/pages/Products/_products.scss | 57 ++++++++++++++++++++++++++++++-
 2 files changed, 72 insertions(+), 3 deletions(-)

diff --git a/src/pages/Products/Products.jsx b/src/pages/Products/Products.jsx
index 93a97f1..bf2a64c 100644
--- a/src/pages/Products/Products.jsx
+++ b/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>
 		</>
diff --git a/src/pages/Products/_products.scss b/src/pages/Products/_products.scss
index 0ad453f..e823138 100644
--- a/src/pages/Products/_products.scss
+++ b/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;
+	}
 }
\ No newline at end of file