feat: add signature to mobile landing

ucsddesignco · Jun 2, 2024 · d3f1d2a · d3f1d2a
1 parent bf01516
commit d3f1d2a
Show file tree

Hide file tree

Showing 13 changed files with 71 additions and 62 deletions.
diff --git a/src/app/assets/icons/cart.svg b/src/app/assets/icons/cart.svg
diff --git a/src/app/components/Fruits/Fruits.scss b/src/app/components/Fruits/Fruits.scss
@@ -1,9 +1,9 @@
-svg {
-  display: none;
-}
 .fruit-container {
+  svg {
+    display: none;
+  }
   width: calc(80dvw - 190px);
-  height: 60dvh;
+  height: min(60dvh, 350px);
   width: calc(100% - 2 * $main-padding-mobile-inline - 20vw);
   margin-inline: auto;
   //   border: 2px solid red;

diff --git a/src/app/components/Fruits/Fruits.tsx b/src/app/components/Fruits/Fruits.tsx
@@ -599,7 +599,7 @@ export default function Fruits() {
     Matter.Events.on(engine, 'beforeUpdate', limitMaxSpeed);
 
     let barriers = [ground, leftWall, rightWall];
-    Events.on(mouseConstraint, 'startdrag', event => {
+    Events.on(mouseConstraint, 'startdrag', (event: any) => {
       const body = event.body;
 
       // Store the original inertia of the body
@@ -615,7 +615,7 @@ export default function Fruits() {
       }
     });
 
-    Events.on(mouseConstraint, 'enddrag', event => {
+    Events.on(mouseConstraint, 'enddrag', (event: any) => {
       const body = event.body;
 
       // Reset the inertia back to its original value

diff --git a/src/app/components/Navbar/Navbar.scss b/src/app/components/Navbar/Navbar.scss
@@ -175,7 +175,7 @@ nav {
       margin-bottom: clamp(15px, calc(10px + 1.2vw), 40px);
     }
 
-    &:hover {
+    &:is(:hover, :focus-visible) {
       background-color: #fcfcfc;
       color: #212121;
     }

diff --git a/src/app/components/Navbar/Navbar.tsx b/src/app/components/Navbar/Navbar.tsx
@@ -7,6 +7,7 @@ import FocusTrap from 'focus-trap-react';
 import { useHandleHamburger } from './hooks/useHandleHamburger';
 import { useHandleScroll } from './hooks/useHandleScroll';
 import Signature from '../Signature/Signature';
+import CartIcon from '@/assets/icons/cart.svg';
 
 type NavbarProps = {
   pageRefs: {
@@ -108,6 +109,7 @@ export default function Navbar({ pageRefs }: NavbarProps) {
             {/* <ApplyNow navContainerRef={navContainerRef} /> */}
             {/* <FutureUpgrader/> */}
             <Signature
+              hideMobile={true}
               navContainerRef={navContainerRef}
               hoveringCart={hoveringCart}
             />
@@ -120,40 +122,7 @@ export default function Navbar({ pageRefs }: NavbarProps) {
                 setHoveringCart(false);
               }}
             >
-              <svg
-                className="svg-cart"
-                xmlns="http://www.w3.org/2000/svg"
-                width="44"
-                height="25"
-                viewBox="0 0 44 25"
-                fill="none"
-              >
-                <path
-                  d="M1.5 1.57288H42L37.4949 23.3151H6.08701L1.5 1.57288Z"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                />
-                <path
-                  d="M4.5 15.5729L39.5 15.5729"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                />
-                <path
-                  d="M3.5 8.57288H40.5"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                />
-                <path
-                  d="M28.5 1.57288L27.5 23.0729"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                />
-                <path
-                  d="M15.5 1.57288L16.5 23.0729"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                />
-              </svg>
+              <CartIcon className="svg-cart" />
               <p>ADD ME TO CART</p>
             </a>
 

diff --git a/src/app/components/Navbar/hooks/useHandleScroll.ts b/src/app/components/Navbar/hooks/useHandleScroll.ts
@@ -28,14 +28,6 @@ export const useHandleScroll = ({
     const themesElement = themesRef.current;
     const faqElement = faqRef.current;
     const applyElement = applyRef.current;
-    console.log(
-      mainElement,
-      landingElement,
-      overviewElement,
-      themesElement,
-      faqElement,
-      applyElement
-    );
 
     /**
      * Sets the current page
@@ -59,7 +51,6 @@ export const useHandleScroll = ({
       applyElement
     ];
     const handleScroll = () => {
-      console.log('test');
       const scrollPosition = mainElement.scrollTop || 0;
 
       pagesList.forEach((page, index) => {

diff --git a/src/app/components/Signature/Signature.scss b/src/app/components/Signature/Signature.scss
@@ -1,8 +1,11 @@
 .signature {
-  display: none;
+  display: flex;
+  .hide-mobile {
+    display: none;
 
-  @media (min-width: $mobile-breakpoint) {
-    display: flex;
+    @media (min-width: $mobile-breakpoint) {
+      isplay: flex;
+    }
   }
 
   position: relative;
@@ -28,7 +31,6 @@
       width: 100%;
       height: 1px;
       background-color: #bababa;
-      z-index: -1;
     }
   }
 }
diff --git a/src/app/components/Signature/Signature.tsx b/src/app/components/Signature/Signature.tsx
@@ -8,6 +8,7 @@ import { handleHandwritingAnimation } from './util/handleHandwritingAnimation';
 type SignatureProps = {
   hoveringCart: boolean;
   navContainerRef: RefObject<HTMLDivElement>;
+  hideMobile: boolean;
 };
 
 const APPLY_CONFIG = {
@@ -27,7 +28,8 @@ const FUTURE_CONFIG = {
 
 export default function Signature({
   hoveringCart,
-  navContainerRef
+  navContainerRef,
+  hideMobile
 }: SignatureProps) {
   const xElementRef = useRef<HTMLSpanElement>(null);
   const applySVGRef = useRef<SVGSVGElement>(null);
@@ -52,7 +54,7 @@ export default function Signature({
   }, [hoveringCart, navContainerRef]);
 
   return (
-    <div className="signature">
+    <div className={`signature ${hideMobile ? 'hide-mobile' : ''}`}>
       <div className="signature-container">
         <span ref={xElementRef}>X</span>
         <div className="line" />

diff --git a/src/app/components/Signature/util/handleHandwritingAnimation.ts b/src/app/components/Signature/util/handleHandwritingAnimation.ts
@@ -22,6 +22,8 @@ export const handleHandwritingAnimation = ({
   const applyContainer = svgRef.current;
   const navContainer = navContainerRef.current;
   const xElement = xElementRef.current;
+  console.log('WEEEE');
+  console.log(applyContainer, navContainer, xElement);
   if (!applyContainer || !navContainer || !xElement) return;
   const navFullWidth = parseFloat(window.getComputedStyle(navContainer).width);
   const navPadding = parseFloat(

diff --git a/src/app/opengraph-image.png b/src/app/opengraph-image.png
diff --git a/src/app/pages/Landing/Landing.scss b/src/app/pages/Landing/Landing.scss
@@ -1,4 +1,5 @@
 #landing {
+  height: 100dvh;
   h1,
   h3 {
     text-transform: uppercase;
@@ -23,6 +24,20 @@
     display: none;
   }
 
+  .landing-signature-container {
+    height: 80px;
+    margin-block: 1rem;
+    margin-inline: auto;
+    width: 80%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+
+    @media (min-width: $mobile-breakpoint) {
+      display: none;
+    }
+  }
+
   .add-me-to-cart {
     margin-inline: auto;
     width: 80%;
@@ -38,7 +53,12 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    gap: clamp(12px, 1vw, 22px);
+    gap: clamp(16px, 1vw, 22px);
+
+    &:is(:hover, :focus-visible) {
+      background-color: #fcfcfc;
+      color: #212121;
+    }
   }
 
   @media (min-width: $tablet-breakpoint) {

diff --git a/src/app/pages/Landing/Landing.tsx b/src/app/pages/Landing/Landing.tsx
@@ -1,15 +1,20 @@
+'use client';
 import Sticker from '@/components/Sticker/Sticker';
 import './Landing.scss';
 import Fruits from '@/components/Fruits/Fruits';
 import { PageRef } from '@/page';
 import DcoSticker from '@/assets/stickers/dco-sticker.svg';
 import Impact from '@/assets/stickers/impact.svg';
+import CartIcon from '@/assets/icons/cart.svg';
+import Signature from '@/components/Signature/Signature';
+import { useRef } from 'react';
 
 type LandingProps = {
   landingRef: PageRef;
 };
 
 export default function Landing({ landingRef }: LandingProps) {
+  const signatureContainerRef = useRef<HTMLDivElement>(null);
   return (
     <section ref={landingRef} id="landing">
       <Sticker
@@ -24,13 +29,25 @@ export default function Landing({ landingRef }: LandingProps) {
         style={{ left: '10px', top: '55%' }}
         hideMobile
       />
+      <div className="mobile-header">
+        <h1>up-grade 2024</h1>
+        <p>UCSD Design Co</p>
+        <p>San Diego, CA</p>
+        <h3>July 1st to September 6th</h3>
+      </div>
       <p className="breadcrumb">.01 / Home</p>
+
       <Fruits />
-      {/* <Signature
-        navContainerRef={navContainerRef}
-        hoveringCart={hoveringCart}
-      /> */}
+
+      <div ref={signatureContainerRef} className="landing-signature-container">
+        <Signature
+          hideMobile={false}
+          navContainerRef={signatureContainerRef}
+          hoveringCart={false}
+        />
+      </div>
       <a className="add-me-to-cart">
+        <CartIcon className="svg-cart" />
         <p>ADD ME TO CART</p>
       </a>
     </section>

diff --git a/src/app/pages/Overview/Overview.scss b/src/app/pages/Overview/Overview.scss
@@ -1,5 +1,4 @@
 #overview {
-  margin-top: 120px;
   overflow: hidden;
   // Account for additional padding for theme page to allow squash to be visible
   padding-bottom: calc(2 * $main-padding-mobile-block);