Merge main to staging (#50)

* Add first section of new landing page (#1)

* Add the pillars section (#3)

* Move cover section to new component

* Fix imports

* Add three pillars section

* Use classnames package

* Move header to new component

* Remove duplicate footer css import

* Make photo credits glow on hover

* Change photo credit on-hover transition timing

* Add logo and animations to header (#4)

* Move cover section to new component

* Fix imports

* Add three pillars section

* Use classnames package

* Move header to new component

* Remove duplicate footer css import

* Make photo credits glow on hover

* Change photo credit on-hover transition timing

* Update header

* Recalculate header layout on resize

* ci(Mergify): configuration update (#8)

Signed-off-by: Keith Manaloto <keithliamm@gmail.com>

* Make PillarsSection vertical position-agnostic (#9)

* Add the imagine section (#10)

* Make PillarsSection vertical position-agnostic

* Add imagine section

* Fix image fade

* Combine css properties

* Remove unused css

* Fix background image transition

* Reset background image scale on every photo

* Hide elements when part of section leaves viewport

* Fix scaling issue when section leaves viewport

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Use CSSTransition package in pillars section (#11)

* Make PillarsSection vertical position-agnostic

* Add imagine section

* Fix image fade

* Combine css properties

* Remove unused css

* Fix background image transition

* Reset background image scale on every photo

* Hide elements when part of section leaves viewport

* Fix scaling issue when section leaves viewport

* Use CSSTransition package in pillars section

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Hide pillars section when scrolled past (#12)

* Make PillarsSection vertical position-agnostic

* Add imagine section

* Fix image fade

* Combine css properties

* Remove unused css

* Fix background image transition

* Reset background image scale on every photo

* Hide elements when part of section leaves viewport

* Fix scaling issue when section leaves viewport

* Use CSSTransition package in pillars section

* Hide pillars section when scrolled past

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Reduce motion in header transitions (#13)

* Use CSSTransition package in header

* Add fade transition to static header

* Show header earlier

* Use SCSS instead of CSS (#14)

* Add linters (#15)

* Add linters

* Add eslintcache to gitignore

* Fix stylelint issue

* Address styelint errors

* Address eslint errors

* Fix dependencies issue (#16)

* Fix eslint issue

* Remove style linter

* Revert "Remove style linter"

This reverts commit d2b5f10.

* Fix stylelint issue

* Use SASS color variables (#17)

* Use SASS color variables

* Fix SASS variable imports

* Use SASS spacing variables (#18)

* Use SASS typography variables (#19)

* Use SASS spacing variables

* Use SASS typography variables

* Fix incorrect imports

* Add quote section to landing page (#20)

* Use SASS spacing variables

* Use SASS typography variables

* Fix incorrect imports

* Add quote section to landing page

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Use measure hook (#21)

* Use SASS spacing variables

* Use SASS typography variables

* Fix incorrect imports

* Add quote section to landing page

* Use measure hook

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Warn on no-unused-vars instead of error (#26)

* Make text with wing icon reusable (#23)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Add the team section (#24)

* Make text with wing icon reusable

* Add initial layout

* Stop subtracting header height from section

* Fix incorrect header spacing

* Speed up card transition

* Fix cards autoplay

* Fix autoplay restarting on scroll

* Update markdown styles

* Divide section parts into components

* FIx incorrect destructuring

* Add missing keys

* Destructure swiper object

* Fix missing member cards

* Move team data to new file

* Remove bulk exports to avoid variable name conflicts

* Disable right card nav button when at end of list

* Remove unnecessary forwardRef in Header component

* Move configurable site data to data directory (#25)

* Make text with wing icon reusable

* Add initial layout

* Stop subtracting header height from section

* Fix incorrect header spacing

* Speed up card transition

* Fix cards autoplay

* Fix autoplay restarting on scroll

* Update markdown styles

* Divide section parts into components

* FIx incorrect destructuring

* Add missing keys

* Destructure swiper object

* Fix missing member cards

* Move team data to new file

* Remove bulk exports to avoid variable name conflicts

* Move topics data to new file

* Move imagine section data to new file

* Disable right card nav button when at end of list

* Remove unnecessary forwardRef in Header component

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Update header buttons (#28)

* Link meet our team button to appropriate section

* Remove unnecessary logging

* Link logo button to cover section

* Fix logo padding

* Backport staging to main (#29)

* Add first section of new landing page (#1) (#2)

* Merge main to staging (#6)

* Add first section of new landing page (#1)

* Add the pillars section (#3)

* Move cover section to new component

* Fix imports

* Add three pillars section

* Use classnames package

* Move header to new component

* Remove duplicate footer css import

* Make photo credits glow on hover

* Change photo credit on-hover transition timing

* Add logo and animations to header (#4)

* Move cover section to new component

* Fix imports

* Add three pillars section

* Use classnames package

* Move header to new component

* Remove duplicate footer css import

* Make photo credits glow on hover

* Change photo credit on-hover transition timing

* Update header

* Recalculate header layout on resize

* Resolve conflicts (#7)

* Add first section of new landing page (#1)

* Add the pillars section (#3)

* Move cover section to new component

* Fix imports

* Add three pillars section

* Use classnames package

* Move header to new component

* Remove duplicate footer css import

* Make photo credits glow on hover

* Change photo credit on-hover transition timing

* Add logo and animations to header (#4)

* Move cover section to new component

* Fix imports

* Add three pillars section

* Use classnames package

* Move header to new component

* Remove duplicate footer css import

* Make photo credits glow on hover

* Change photo credit on-hover transition timing

* Update header

* Recalculate header layout on resize

* Remove unused css

* Merge main to staging (#22)

* Add first section of new landing page (#1)

* Add the pillars section (#3)

* Move cover section to new component

* Fix imports

* Add three pillars section

* Use classnames package

* Move header to new component

* Remove duplicate footer css import

* Make photo credits glow on hover

* Change photo credit on-hover transition timing

* Add logo and animations to header (#4)

* Move cover section to new component

* Fix imports

* Add three pillars section

* Use classnames package

* Move header to new component

* Remove duplicate footer css import

* Make photo credits glow on hover

* Change photo credit on-hover transition timing

* Update header

* Recalculate header layout on resize

* ci(Mergify): configuration update (#8)

Signed-off-by: Keith Manaloto <keithliamm@gmail.com>

* Make PillarsSection vertical position-agnostic (#9)

* Add the imagine section (#10)

* Make PillarsSection vertical position-agnostic

* Add imagine section

* Fix image fade

* Combine css properties

* Remove unused css

* Fix background image transition

* Reset background image scale on every photo

* Hide elements when part of section leaves viewport

* Fix scaling issue when section leaves viewport

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Use CSSTransition package in pillars section (#11)

* Make PillarsSection vertical position-agnostic

* Add imagine section

* Fix image fade

* Combine css properties

* Remove unused css

* Fix background image transition

* Reset background image scale on every photo

* Hide elements when part of section leaves viewport

* Fix scaling issue when section leaves viewport

* Use CSSTransition package in pillars section

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Hide pillars section when scrolled past (#12)

* Make PillarsSection vertical position-agnostic

* Add imagine section

* Fix image fade

* Combine css properties

* Remove unused css

* Fix background image transition

* Reset background image scale on every photo

* Hide elements when part of section leaves viewport

* Fix scaling issue when section leaves viewport

* Use CSSTransition package in pillars section

* Hide pillars section when scrolled past

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Reduce motion in header transitions (#13)

* Use CSSTransition package in header

* Add fade transition to static header

* Show header earlier

* Use SCSS instead of CSS (#14)

* Add linters (#15)

* Add linters

* Add eslintcache to gitignore

* Fix stylelint issue

* Address styelint errors

* Address eslint errors

* Fix dependencies issue (#16)

* Fix eslint issue

* Remove style linter

* Revert "Remove style linter"

This reverts commit d2b5f10.

* Fix stylelint issue

* Use SASS color variables (#17)

* Use SASS color variables

* Fix SASS variable imports

* Use SASS spacing variables (#18)

* Use SASS typography variables (#19)

* Use SASS spacing variables

* Use SASS typography variables

* Fix incorrect imports

* Add quote section to landing page (#20)

* Use SASS spacing variables

* Use SASS typography variables

* Fix incorrect imports

* Add quote section to landing page

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Use measure hook (#21)

* Use SASS spacing variables

* Use SASS typography variables

* Fix incorrect imports

* Add quote section to landing page

* Use measure hook

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Merge main to staging (#27)

* Add first section of new landing page (#1)

* Add the pillars section (#3)

* Move cover section to new component

* Fix imports

* Add three pillars section

* Use classnames package

* Move header to new component

* Remove duplicate footer css import

* Make photo credits glow on hover

* Change photo credit on-hover transition timing

* Add logo and animations to header (#4)

* Move cover section to new component

* Fix imports

* Add three pillars section

* Use classnames package

* Move header to new component

* Remove duplicate footer css import

* Make photo credits glow on hover

* Change photo credit on-hover transition timing

* Update header

* Recalculate header layout on resize

* ci(Mergify): configuration update (#8)

Signed-off-by: Keith Manaloto <keithliamm@gmail.com>

* Make PillarsSection vertical position-agnostic (#9)

* Add the imagine section (#10)

* Make PillarsSection vertical position-agnostic

* Add imagine section

* Fix image fade

* Combine css properties

* Remove unused css

* Fix background image transition

* Reset background image scale on every photo

* Hide elements when part of section leaves viewport

* Fix scaling issue when section leaves viewport

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Use CSSTransition package in pillars section (#11)

* Make PillarsSection vertical position-agnostic

* Add imagine section

* Fix image fade

* Combine css properties

* Remove unused css

* Fix background image transition

* Reset background image scale on every photo

* Hide elements when part of section leaves viewport

* Fix scaling issue when section leaves viewport

* Use CSSTransition package in pillars section

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Hide pillars section when scrolled past (#12)

* Make PillarsSection vertical position-agnostic

* Add imagine section

* Fix image fade

* Combine css properties

* Remove unused css

* Fix background image transition

* Reset background image scale on every photo

* Hide elements when part of section leaves viewport

* Fix scaling issue when section leaves viewport

* Use CSSTransition package in pillars section

* Hide pillars section when scrolled past

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Reduce motion in header transitions (#13)

* Use CSSTransition package in header

* Add fade transition to static header

* Show header earlier

* Use SCSS instead of CSS (#14)

* Add linters (#15)

* Add linters

* Add eslintcache to gitignore

* Fix stylelint issue

* Address styelint errors

* Address eslint errors

* Fix dependencies issue (#16)

* Fix eslint issue

* Remove style linter

* Revert "Remove style linter"

This reverts commit d2b5f10.

* Fix stylelint issue

* Use SASS color variables (#17)

* Use SASS color variables

* Fix SASS variable imports

* Use SASS spacing variables (#18)

* Use SASS typography variables (#19)

* Use SASS spacing variables

* Use SASS typography variables

* Fix incorrect imports

* Add quote section to landing page (#20)

* Use SASS spacing variables

* Use SASS typography variables

* Fix incorrect imports

* Add quote section to landing page

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Use measure hook (#21)

* Use SASS spacing variables

* Use SASS typography variables

* Fix incorrect imports

* Add quote section to landing page

* Use measure hook

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Warn on no-unused-vars instead of error (#26)

* Make text with wing icon reusable (#23)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Add the team section (#24)

* Make text with wing icon reusable

* Add initial layout

* Stop subtracting header height from section

* Fix incorrect header spacing

* Speed up card transition

* Fix cards autoplay

* Fix autoplay restarting on scroll

* Update markdown styles

* Divide section parts into components

* FIx incorrect destructuring

* Add missing keys

* Destructure swiper object

* Fix missing member cards

* Move team data to new file

* Remove bulk exports to avoid variable name conflicts

* Disable right card nav button when at end of list

* Remove unnecessary forwardRef in Header component

* Move configurable site data to data directory (#25)

* Make text with wing icon reusable

* Add initial layout

* Stop subtracting header height from section

* Fix incorrect header spacing

* Speed up card transition

* Fix cards autoplay

* Fix autoplay restarting on scroll

* Update markdown styles

* Divide section parts into components

* FIx incorrect destructuring

* Add missing keys

* Destructure swiper object

* Fix missing member cards

* Move team data to new file

* Remove bulk exports to avoid variable name conflicts

* Move topics data to new file

* Move imagine section data to new file

* Disable right card nav button when at end of list

* Remove unnecessary forwardRef in Header component

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Update header buttons (#28)

* Link meet our team button to appropriate section

* Remove unnecessary logging

* Link logo button to cover section

* Fix logo padding

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Add the "Get Involved" section (#30)

* Add the Downloads section (#31)

* Add the "Get Involved" section

* Add the Downloads section

* Use smaller logo in asset preview

* Fix photo credit not appearing in Pillars section (#32)

* Fix photo credit not appearing in Pillars section

* Revert "Fix photo credit not appearing in Pillars section"

This reverts commit 3591e6b.

* Fix photo credit not appearing in Pillars section

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Add missing photo credit in Team section (#33)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Move social media links data to data directory (#34)

* Add the "Get Involved" section

* Add the Downloads section

* Use smaller logo in asset preview

* Move social media links data to new file

* Add keys

* Fix footer

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Update footer design (#35)

* Add the "Get Involved" section

* Add the Downloads section

* Use smaller logo in asset preview

* Move social media links data to new file

* Add keys

* Update footer

* Fix footer

* Move footer out of content div

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Change social media button from hover to glow (#36)

* Add the "Get Involved" section

* Add the Downloads section

* Use smaller logo in asset preview

* Move social media links data to new file

* Add keys

* Update footer

* Change social media buttons' hover animation to glow

* Fix footer

* Move footer out of content div

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Use `font-weight` SASS variables (#37)

* Add the "Get Involved" section

* Add the Downloads section

* Use smaller logo in asset preview

* Move social media links data to new file

* Add keys

* Update footer

* Change social media buttons' hover animation to glow

* Use font-weight sass variables

* Fix footer

* Move footer out of content div

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Remove shadows from downloads preview images (#38)

* Remove shadows from downloads preview images

* Move downloads preview assets to new folder

* Fix broken layout on page refresh (#39)

* Fix broken layout on page refresh

* Remove unnecessary use of useScroll hook in GetInvolvedSection and QuoteSection

* Remove unused import

* Remove unnecessary use of useScroll hook in TeamSection

* Fix autoplay triggering on page refresh

* Add fix for react-stickynode not appearing on page reload

* Refactor photoIndex computation

* Reduce imagine section image scale up velocity

* Fix photo index overflow in pillars and imagine sections

* Refactor topic index computation

* Update photo credit links (#40)

* Fix broken layout on page refresh

* Remove unnecessary use of useScroll hook in GetInvolvedSection and QuoteSection

* Remove unused import

* Remove unnecessary use of useScroll hook in TeamSection

* Fix autoplay triggering on page refresh

* Add fix for react-stickynode not appearing on page reload

* Update photo credit links

* Refactor photoIndex computation

* Reduce imagine section image scale up velocity

* Fix photo index overflow in pillars and imagine sections

* Refactor topic index computation

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* Make landing page responsive (#43)

* Make landing page responsive

* Fix header flicker on toggle

* Add drop shadow to header

* Implement auto-close for menu

* Use consistent css transition property declaration

* Use inline style prefixer

* Fix glow animation for safari

* Fix image background scaling for safari

* Fix download preview images sizing for safari

* Fix download preview images scaling on hover for safari

* Update team cards content and design (#44)

* Make landing page responsive

* Fix header flicker on toggle

* Add drop shadow to header

* Implement auto-close for menu

* Use consistent css transition property declaration

* Use inline style prefixer

* Fix glow animation for safari

* Fix image background scaling for safari

* Fix download preview images sizing for safari

* Fix download preview images scaling on hover for safari

* Update team cards content and design

* Stop autoplay on card scroll

* Put cards behind member list

* Add BA logo as background of member list

* Lengthen card width for large screens

* Put next and previous card buttons over cards

* Loop card navigation buttons

* Put BA logo behind member list

* Apply frosted glass effect to member list

* Hide member list logo background for smaller screens

* Fix card footer padding

* Fix topic and photo index overflow in Pillars and Imagine sections (#45)

* Fix topic and photo index overflow in Pillars and Imagine sections

* Update wording in Cover section (#46)

* Update wording in Cover section

* Add functionality to scroll indicator button in Cover section (#47)

* Add functionality to scroll indicator button in Cover section

* Add missing bracket in SCSS (#48)

* Fix unbalances SCSS brackets (#49)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

package.json

@@ -3,8 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@benestudioco/react-scrollfade": "^1.0.2",
     "classnames": "^2.3.1",
-    "markdown-to-jsx": "^7.1.5",
+    "inline-style-prefixer": "^6.0.1",
     "merge-refs": "^1.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

public/index.html

@@ -27,7 +27,7 @@
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@200;400;600;800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@200;400;600;700;800&display=swap" rel="stylesheet">
 
     <title>Báyung Ángeles</title>
   </head>

src/components/Header.js

@@ -1,8 +1,13 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useScroll, useDimensions } from 'react-viewport-utils';
 import { CSSTransition, SwitchTransition } from 'react-transition-group';
 import classNames from 'classnames';
-import wingGold from '../assets/images/wing-gold.svg';
+import WingText from './WingText';
+
+import menuIcon from '../assets/images/menu-icon.svg';
+import closeIcon from '../assets/images/close-icon.svg';
+
+const MENU_AUTO_CLOSE_TIMEOUT = 8000;
 
 const HEADER_TYPES = {
   FIXED: 'fixed',
@@ -14,9 +19,8 @@ const scrollOptions = { behavior: 'smooth' };
 
 const Header = ({ coverSectionRef, teamSectionRef }) => {
   const scroll = useScroll();
-  const dimensions = useDimensions();
+  const { height: viewportHeight } = useDimensions();
 
-  const viewportHeight = dimensions.height;
   const fixedHeaderAppear = viewportHeight * 0.4 <= scroll.y;
   const headerType = fixedHeaderAppear ? FIXED : ABSOLUTE;
 
@@ -34,33 +38,120 @@ const Header = ({ coverSectionRef, teamSectionRef }) => {
         timeout={750}
       >
         {headerType === ABSOLUTE ? (
-          <header>
-            <NavigationLinks onMeetOurTeamClick={handleMeetOurTeamClick} />
-          </header>
+          <PlainHeader onMeetOurTeamClick={handleMeetOurTeamClick} />
         ) : (
-          <header className="fixed-header">
-            <button className="logo" type="button" onClick={handleLogoClick}>
-              Báyung{' '}
-              <span>
-                Ángeles
-                <img src={wingGold} alt="wing" />
-              </span>
-            </button>
-            <NavigationLinks onMeetOurTeamClick={handleMeetOurTeamClick} />
-          </header>
+          <FixedHeader onLogoClick={handleLogoClick} onMeetOurTeamClick={handleMeetOurTeamClick} />
         )}
       </CSSTransition>
     </SwitchTransition>
   );
 };
 
-const NavigationLinks = ({ onMeetOurTeamClick }) => (
-  <nav className="nav-links">
-    <button type="button" onClick={onMeetOurTeamClick}>
-      Meet Our Team
+const PlainHeader = ({ onMeetOurTeamClick }) => {
+  const { width: viewportWidth } = useDimensions();
+
+  return (
+    <header>
+      <NavigationLinks
+        onMeetOurTeamClick={onMeetOurTeamClick}
+        shortenOurTeamNavText={viewportWidth <= 400}
+      />
+    </header>
+  );
+};
+
+const FixedHeader = ({ onLogoClick, onMeetOurTeamClick }) => {
+  const menuAutoCloseTimer = useRef();
+  const [openMenu, setOpenMenu] = useState(false);
+  const { width: viewportWidth } = useDimensions();
+  const useMenu = viewportWidth <= 450;
+  const showCompleteLogo = viewportWidth > 660;
+
+  const stopMenuAutoCloseTimer = () => {
+    if (menuAutoCloseTimer.current) {
+      clearTimeout(menuAutoCloseTimer.current);
+      menuAutoCloseTimer.current = null;
+    }
+  };
+
+  const startMenuAutoCloseTimer = () => {
+    stopMenuAutoCloseTimer();
+    menuAutoCloseTimer.current = setTimeout(() => setOpenMenu(false), MENU_AUTO_CLOSE_TIMEOUT);
+  };
+
+  useEffect(() => stopMenuAutoCloseTimer, []);
+
+  const handleMenuClick = () => {
+    if (openMenu) stopMenuAutoCloseTimer();
+    else startMenuAutoCloseTimer();
+
+    setOpenMenu(!openMenu);
+  };
+
+  if (useMenu) {
+    return (
+      <header className="fixed-header mobile-header">
+        <div className="mobile-header-options">
+          <button className="menu-btn" onClick={handleMenuClick} type="button">
+            <SwitchTransition mode="out-in">
+              <CSSTransition key={openMenu} classNames="fade" timeout={150}>
+                {openMenu ? (
+                  <img src={closeIcon} alt="Menu toggle" />
+                ) : (
+                  <img src={menuIcon} alt="Menu toggle" />
+                )}
+              </CSSTransition>
+            </SwitchTransition>
+          </button>
+          <Logo completeLogo onClick={onLogoClick} />
+        </div>
+        <CSSTransition in={openMenu} classNames="scale-y" unmountOnExit timeout={750}>
+          <NavigationLinks
+            className="mobile-nav-links"
+            buttonsClassname="mobile-nav-link"
+            onMeetOurTeamClick={onMeetOurTeamClick}
+          />
+        </CSSTransition>
+      </header>
+    );
+  }
+
+  return (
+    <header className="fixed-header">
+      <Logo completeLogo={showCompleteLogo} onClick={onLogoClick} />
+      <NavigationLinks onMeetOurTeamClick={onMeetOurTeamClick} />
+    </header>
+  );
+};
+
+const Logo = ({ completeLogo, onClick }) => (
+  <button className="logo" type="button" onClick={onClick}>
+    {completeLogo ? (
+      <>
+        Báyung <WingText text="Ángeles" wingPosition="start" />
+      </>
+    ) : (
+      <WingText className="winged-single" text="Á" wingPosition="start" />
+    )}
+  </button>
+);
+
+const NavigationLinks = ({
+  className,
+  buttonsClassname,
+  onMeetOurTeamClick,
+  shortenOurTeamNavText,
+}) => (
+  <nav className={classNames('nav-links', className)}>
+    <button className={classNames(buttonsClassname)} type="button" onClick={onMeetOurTeamClick}>
+      {shortenOurTeamNavText ? 'Our Team' : 'Meet Our Team'}
+    </button>
+    <button className={classNames(buttonsClassname)} type="button">
+      Get Involved
+    </button>
+    <button className={classNames(buttonsClassname)} type="button">
+      Contact Us
     </button>
-    <button type="button">Get Involved</button>
-    <button type="button">Contact Us</button>
   </nav>
 );
 

src/components/PhotoCredit.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 const PhotoCredit = ({ className, title, name, link }) => (
   <a className={classNames('photo-credit', className)} href={link}>
-    {title} © {name}
+    <span>{title}</span> <span>© {name}</span>
   </a>
 );
 

src/components/WingText.js

@@ -3,10 +3,14 @@ import classNames from 'classnames';
 
 import wingGold from '../assets/images/wing-gold.svg';
 
-const WingText = ({ className, text }) => (
+const WingText = ({
+  className,
+  text,
+  wingPosition, // 'start' or 'end'
+}) => (
   <span className={classNames('wing-text', className)}>
     {text}
-    <img src={wingGold} alt="wing" />
+    <img className={wingPosition} src={wingGold} alt="wing" />
   </span>
 );
 

src/data/downloadsSection.js

@@ -11,8 +11,9 @@ export const previewAssets = [
     name: 'Car Sticker',
     link: '',
     style: {
-      top: '17px',
-      height: '217px',
+      top: '5.4%',
+      height: '68.7%',
+      width: '60.6%',
     },
   },
   {
@@ -21,38 +22,42 @@ export const previewAssets = [
     link: '',
     style: {
       top: '0',
-      right: '59px',
-      width: '171px',
+      right: '14.9%',
+      height: '50.9%',
+      width: '43.2%',
     },
   },
   {
     image: baIllustrationAnimated,
     name: 'Báyung Ángeles Illustration',
     link: '',
     style: {
-      top: '139px',
-      left: '37px',
-      height: '122px',
+      top: '44%',
+      left: '9.3%',
+      height: '38.6%',
+      width: '30.8%',
     },
   },
   {
     image: baLogo,
     name: 'Báyung Ángeles Logo',
     link: '',
     style: {
-      top: '89px',
-      left: '145px',
-      height: '137px',
+      top: '28.2%',
+      left: '36.6%',
+      height: '43.4%',
+      width: '39.9%',
     },
   },
   {
     image: fbFrame,
     name: 'Facebook Frame',
     link: '',
     style: {
-      top: '120px',
+      top: '38%',
       right: '0',
-      height: '155px',
+      height: '49.1%',
+      width: '39.1%',
     },
   },
   {
@@ -61,8 +66,9 @@ export const previewAssets = [
     link: '',
     style: {
       bottom: '0',
-      left: '101px',
-      width: '183px',
+      left: '25.5%',
+      height: '29.7%',
+      width: '46.2%',
     },
   },
 ];

src/data/pillars.js

@@ -1,17 +1,15 @@
 export const topics = [
   {
     title: 'Mission',
-    descriptionLine1: 'Our mission is to lead Angeles City in honesty,',
-    descriptionLine2: 'trust, compassion, and good governance.',
+    description:
+      'Our mission is to lead Angeles City in honesty, trust, compassion, and good governance.',
   },
   {
     title: 'Vision',
-    descriptionLine1: 'We see a future where Angeles City is',
-    descriptionLine2: 'the best city in the Philippines.',
+    description: 'We see a future where Angeles City is the best city in the Philippines.',
   },
   {
     title: 'Core Values',
-    descriptionLine1: 'Truth. Compassion. Innovation.',
-    descriptionLine2: 'Cooperation. Leadership.',
+    description: 'Truth. Compassion. Innovation. Cooperation. Leadership.',
   },
 ];