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

jackbouncy7 · Oct 20, 2024 · 08fe738 · 08fe738
1 parent 6c410fc
commit 08fe738
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 11 deletions.
diff --git a/public/assets/images/products/project2.png b/public/assets/images/products/project2.png
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -1,4 +1,4 @@
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import React, { useState, useEffect } from 'react';
 import Logo from "@images/logo-white.svg";
 import LogoDarkHeader from "@images/logo-dark.svg";
@@ -8,6 +8,8 @@ const Header = () => {
  const [scrolled, setScrolled] = useState(false);
  const [isOpen, setOpen] = useState(false);
 
+ const location = useLocation();
+
  const handleScroll = () => {
  const offset = window.scrollY;
  if(offset > 10) {
@@ -25,15 +27,17 @@ const Header = () => {
  }, []);
 
  const headerClasses = scrolled ? 'header-area scrolled' : 'header-area';
+ const isProductsPage = location.pathname === '/products';
+ const switchHeader = isProductsPage ? 'header-area switched' : '';
 
  return (
- <header className={headerClasses}>
+ <header className={switchHeader || headerClasses }>
  <div className="container">
  <div className="row">
  <div className="col-lg-12">
  <nav className="main-nav">
  <Link to="/" className="logo">
- <img src={scrolled ? LogoDarkHeader : Logo} className="light-logo" alt="Beapp" />
+ <img src={switchHeader || scrolled ? LogoDarkHeader : Logo} className="light-logo" alt="Beapp" />
  <img
  src={LogoDarkHeader}
  className="dark-logo"
@@ -42,22 +46,22 @@ const Header = () => {
  </Link>
  <ul className="nav">
  <li>
- <Link style={{ color: scrolled ? '#3B566E' : 'white' }} to='/'>HOME</Link>
+ <Link style={{ color: switchHeader || scrolled ? '#3B566E' : 'white' }} to='/'>HOME</Link>
  </li>
  <li>
- <Link style={{ color: scrolled ? '#3B566E' : 'white' }} to="/products">PRODUCTS</Link>
+ <Link style={{ color: switchHeader || scrolled ? '#3B566E' : 'white' }} to="/products">PRODUCTS</Link>
  </li>
  <li>
- <Link style={{ color: scrolled ? '#3B566E' : 'white' }} to='/aboutus'>ABOUT US</Link>
+ <Link style={{ color: switchHeader || scrolled ? '#3B566E' : 'white' }} to='/aboutus'>ABOUT US</Link>
  </li>
  <li>
- <Link style={{ color: scrolled ? '#3B566E' : 'white' }} to="/services">SERVICES</Link>
+ <Link style={{ color: switchHeader || scrolled ? '#3B566E' : 'white' }} to="/services">SERVICES</Link>
  </li>
  {/* <li> */}
  {/* <a style={{ color: scrolled ? '#3B566E' : 'white' }} href="blog.html">BLOG</a> */}
  {/* </li> */}
  <li>
- <Link style={{ border: scrolled ? '1px solid #4886FF' : '1px solid white', color: scrolled ? '#4886FF' : 'white' }} to="/contact" className="btn-nav-line">
+ <Link style={{ border: switchHeader || scrolled ? '1px solid #4886FF' : '1px solid white', color: switchHeader || scrolled ? '#4886FF' : 'white' }} to="/contact" className="btn-nav-line">
  CONTACT
  </Link>
  </li>

diff --git a/src/components/Header/_header.scss b/src/components/Header/_header.scss
@@ -22,6 +22,12 @@ header
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
+
+.header-area.switched {
+ background-color: white;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
 .header-area .main-nav .logo {
  float: left;
  // margin-top: 30px;

diff --git a/src/pages/Home/_home.scss b/src/pages/Home/_home.scss
@@ -227,7 +227,7 @@ home
  float: left;
  width: 68px;
  min-height: 150px;
- background: url('../../../public/assets/images/features-bg.svg') center bottom no-repeat;
+ background: url('/assets/images/features-bg.svg') center bottom no-repeat;
 }
 .features li .count span {
  display: block;

diff --git a/src/pages/Products/Products.jsx b/src/pages/Products/Products.jsx
@@ -23,6 +23,20 @@ const Products = () => {
  </div>
  </div>
  </Link>
+
+ <Link to='/'>
+ <div className='products__box'>
+ <div className='products__content'>
+ <h3 className='products__title--content'>FDA-compliant software for stroke patients with telemedicine features to facilitate remote care</h3>
+ <span className='products__devices'>IOS & Android, Web</span>
+ <span className='products__category'>Healthcare</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
@@ -5,11 +5,16 @@
  margin-top: 70px;
  height: 568px;
 
- background-image: url('../../../public/assets/images/products/project1.png'); 
+ background-image: url('/assets/images/products/project1.png'); 
  background-position: right;
  background-size: cover;
  background-color: #161413;
  border-radius: 32px;
+ transition: opacity 0.1s ease-out;
+
+ &:hover {
+ opacity: 0.97;
+ }
 
  &:hover .products__link {
  color: #cecbca;
@@ -21,7 +26,7 @@
 }
 
 .products__content {
- width: 550px;
+ width: 600px;
  padding: 40px;
 }
 
@@ -55,4 +60,43 @@
  &:hover {
  color: #cecbca;
  }
+}
+
+// MEDIA
+@media only screen and (max-width: 991px) {
+ .products__title {
+ font-size: 60px;
+ }
+
+ .products__content {
+ width: 100%;
+ border-radius: 32px;
+ background: rgba(22,20,19,.698);
+ }
+}
+
+@media only screen and (max-width: 500px) {
+ .products__box {
+ margin-top: 40px;
+ }
+
+ .products__title {
+ font-size: 40px;
+ }
+
+ .products__content {
+ padding: 15px;
+ }
+
+ .products__title--content {
+ font-size: 25px;
+ }
+}
+
+@media only screen and (max-width: 350px) {
+ .products__content span {
+ width: fit-content;
+ display: block;
+ margin-bottom: 10px;
+ }
 }