partner logo issue fixed

Tulip-Tech · Dec 9, 2024 · 753ee5e · 753ee5e
1 parent ae83be4
commit 753ee5e
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 8 deletions.
diff --git a/src/components/FormPageHeader/index.tsx b/src/components/FormPageHeader/index.tsx
@@ -5,7 +5,12 @@ import Link from '../Link/Link';
 
 import styles from './FormHeader.module.scss';
 
+import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint';
+
 const FormPageHeader: React.FC = () => {
+  const breakpoint = useBreakpoint();
+
+  const isDesktop = breakpoint > Breakpoint.md;
   return (
     <div className={styles.header}>
       <div className={styles.logoContainer}>
@@ -20,9 +25,28 @@ const FormPageHeader: React.FC = () => {
         <Link to="/book-player-highlights" className={styles.link}>
           BOOK PLAYER HIGHLIGHTS
         </Link>
+
         {/* <a className={styles.link} href="https://shop.gameinframe.com/">
           SHOP
         </a> */}
+        {isDesktop && (
+          <div style={{ position: 'relative' }}>
+            <a
+              href="https://saltathletic.com/"
+              target="_blank"
+              rel="noreferrer"
+              style={{
+                marginBottom: '-35px',
+                paddingLeft: '35px',
+                position: 'absolute',
+                right: '-240px',
+                top: '0',
+              }}
+            >
+              <img className={styles.logo} width={100} height={100} alt="logo" src={'/images/Salt_Logo-18.png'} style={{ marginTop: '-15px' }} />
+            </a>
+          </div>
+        )}
       </div>
       {/* <div>
       <button className={styles.loginbtn}>Log In</button>

diff --git a/src/components/LandingPageCarousel/LandingPageCarousel.module.scss b/src/components/LandingPageCarousel/LandingPageCarousel.module.scss
@@ -7,7 +7,7 @@
   z-index: variables.$view-z-index;
   display: block !important;
   height: 100%;
-  padding: 13% 51% 0% 11%;
+  padding: 13% 51% 14% 11%;
   text-align: left;
   // background: linear-gradient(90deg, #001835 0%, rgba(0, 24, 53, 0) 76.9%);
   @include responsive.mobile-only() {

diff --git a/src/components/LandingPageCarousel/index.tsx b/src/components/LandingPageCarousel/index.tsx
@@ -1,15 +1,19 @@
+import { useInView } from 'framer-motion';
 import React, { useRef } from 'react';
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
-import { useInView } from 'framer-motion';
 
-import Button from '../Button/Button';
 import LandingPageHeader from '../LandingPageHeader';
 
 import styles from './LandingPageCarousel.module.scss';
 
+import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint';
+
 const LandingPageCarousel: React.FC = () => {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true });
+  const breakpoint = useBreakpoint();
+
+  const isMobile = breakpoint <= Breakpoint.md;
 
   return (
     <div>
@@ -40,11 +44,14 @@ const LandingPageCarousel: React.FC = () => {
             </div>
           </span>
         </section>
-        <div style={{ display: 'flex', justifyContent: 'center', paddingBottom: '8%' }}>
-          <a href="https://saltathletic.com/" target="_blank" rel="noreferrer">
-            <img className={styles.logo} width={120} height={120} alt="logo" src={'/images/Salt_Logo-18.png'} />
-          </a>
-        </div>
+
+        {isMobile && (
+          <div style={{ display: 'flex', justifyContent: 'center', paddingBottom: '8%' }}>
+            <a href="https://saltathletic.com/" target="_blank" rel="noreferrer">
+              <img className={styles.logo} width={120} height={120} alt="logo" src={'/images/Salt_Logo-18.png'} />
+            </a>
+          </div>
+        )}
       </div>
     </div>
   );

diff --git a/src/components/LandingPageHeader/index.tsx b/src/components/LandingPageHeader/index.tsx
@@ -5,7 +5,13 @@ import Link from '../Link/Link';
 
 import styles from './LandingPageHeader.module.scss';
 
+import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint';
+
 const LandingPageHeader: React.FC = () => {
+  const breakpoint = useBreakpoint();
+
+  const isDesktop = breakpoint > Breakpoint.md;
+
   return (
     <div className={styles.header}>
       <div className={styles.logoContainer}>
@@ -23,7 +29,27 @@ const LandingPageHeader: React.FC = () => {
         {/* <a className={styles.link} href="https://shop.gameinframe.com/">
                 SHOP
             </a> */}
+
+        {isDesktop && (
+          <div style={{ position: 'relative' }}>
+            <a
+              href="https://saltathletic.com/"
+              target="_blank"
+              rel="noreferrer"
+              style={{
+                marginBottom: '-35px',
+                paddingLeft: '35px',
+                position: 'absolute',
+                right: '-240px',
+                top: '0',
+              }}
+            >
+              <img className={styles.logo} width={100} height={100} alt="logo" src={'/images/Salt_Logo-18.png'} style={{ marginTop: '-15px' }} />
+            </a>
+          </div>
+        )}
       </div>
+
       {/* <div>
       <button className={styles.loginbtn}>Log In</button>
     </div> */}