feat: small text modifications on customer page

.node-version

@@ -0,0 +1 @@
+20

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:12 AS build
+FROM node:20 AS build
 WORKDIR /app
 COPY package*.json ./
 RUN yarn

gatsby-config.js

@@ -26,10 +26,7 @@ module.exports = {
 				path: `${__dirname}/src/images`,
 			},
 		},
-		`gatsby-transformer-sharp`,
-		`gatsby-plugin-sharp`,
 		{
-			// TODO: Figure out exactly what this does
 			resolve: `gatsby-plugin-manifest`,
 			options: {
 				name: `gatsby-starter-default`,
@@ -41,7 +38,6 @@ module.exports = {
 				icon: `src/images/etimofavicon.png`, // This path is relative to the root of the site.
 			},
 		},
-		`gatsby-plugin-react-helmet`,
 		`gatsby-plugin-remove-serviceworker`,
 		`gatsby-plugin-styled-components`,
 		`gatsby-plugin-sitemap`,
@@ -61,16 +57,10 @@ module.exports = {
 				},
 			},
 		},
-		{
-			resolve: 'gatsby-plugin-google-analytics',
-			options: {
-				trackingId: 'UA-47276360-1',
-				head: true,
-			},
-		},
 		`gatsby-plugin-netlify-cms`,
 		'gatsby-plugin-ts-checker',
-		// ! Add gatsby-plugin-google-analytics
-		// TODO: Maybe add gatsby-plugin-sitemap for better search-engine results
+		`gatsby-plugin-image`,
+		`gatsby-plugin-sharp`,
+		`gatsby-transformer-sharp`,
 	],
 };

package.json

@@ -1,63 +1,66 @@
 {
 	"name": "@etimo/homepage",
 	"private": true,
-	"description": "Etimos homapage, a Gatsby site.",
+	"description": "Etimos homepage, a Gatsby site.",
 	"version": "0.1.0",
 	"author": "Lukas Lindqvist <[email protected]>",
+	"engines": {
+		"node": ">=20.0.0"
+	},
 	"dependencies": {
-		"@fortawesome/fontawesome-svg-core": "^1.2.28",
-		"@fortawesome/free-brands-svg-icons": "^5.13.0",
-		"@fortawesome/free-solid-svg-icons": "^5.13.0",
-		"@fortawesome/react-fontawesome": "^0.1.9",
-		"@material-ui/core": "^4.9.11",
-		"@material-ui/icons": "^4.9.1",
-		"@n8tb1t/use-scroll-position": "^1.0.43",
-		"babel-plugin-styled-components": "^1.10.2",
-		"framer-motion": "^1.10.3",
-		"gatsby": "^2.25.0",
-		"gatsby-cli": "^2.11.8",
-		"gatsby-image": "^2.3.2",
+		"@fortawesome/fontawesome-svg-core": "^6.4.2",
+		"@fortawesome/free-brands-svg-icons": "^6.4.2",
+		"@fortawesome/free-solid-svg-icons": "^6.4.2",
+		"@fortawesome/react-fontawesome": "^0.2.0",
+		"@material-ui/core": "^4.12.4",
+		"@material-ui/icons": "^4.11.3",
+		"@n8tb1t/use-scroll-position": "^2.0.3",
+		"babel-plugin-styled-components": "^2.1.4",
+		"framer-motion": "^10.16.5",
+		"gatsby": "^5.12.9",
+		"gatsby-cli": "^5.12.4",
 		"gatsby-plugin-google-analytics": "^2.4.0",
-		"gatsby-plugin-manifest": "^2.3.3",
-		"gatsby-plugin-netlify-cms": "^4.9.0",
-		"gatsby-plugin-postcss": "^2.2.3",
-		"gatsby-plugin-react-helmet": "^3.2.2",
-		"gatsby-plugin-react-svg": "^3.0.0",
+		"gatsby-plugin-image": "^3.12.3",
+		"gatsby-plugin-manifest": "^5.12.3",
+		"gatsby-plugin-netlify-cms": "^7.12.0",
+		"gatsby-plugin-postcss": "^6.12.0",
+		"gatsby-plugin-react-svg": "^3.3.0",
 		"gatsby-plugin-remove-serviceworker": "^1.0.0",
-		"gatsby-plugin-sharp": "^2.5.4",
-		"gatsby-plugin-sitemap": "^2.5.0",
-		"gatsby-plugin-styled-components": "^3.3.4",
-		"gatsby-plugin-ts-checker": "^1.1.0",
-		"gatsby-plugin-typescript": "^2.3.1",
+		"gatsby-plugin-sharp": "^5.12.3",
+		"gatsby-plugin-sitemap": "^6.12.3",
+		"gatsby-plugin-styled-components": "^6.12.0",
 		"gatsby-plugin-web-font-loader": "^1.0.4",
-		"gatsby-source-filesystem": "^2.2.2",
-		"gatsby-transformer-sharp": "^2.4.4",
+		"gatsby-source-filesystem": "^5.12.1",
+		"gatsby-transformer-sharp": "^5.12.3",
 		"global": "^4.4.0",
-		"netlify-cms-app": "^2.14.14",
-		"prop-types": "^15.7.2",
-		"react": "^16.13.1",
+		"netlify-cms-app": "^2.15.72",
+		"prop-types": "^15.8.1",
+		"react": "^18.2.0",
 		"react-animations": "^1.0.0",
-		"react-dom": "^16.13.1",
-		"react-helmet": "^6.0.0",
-		"react-intersection-observer": "^8.26.1",
-		"react-pose": "^4.0.8",
+		"react-dom": "^18.2.0",
+		"react-intersection-observer": "^9.5.3",
+		"react-pose": "^4.0.10",
 		"react-pose-text": "^3.1.0",
 		"react-reveal": "^1.2.2",
-		"react-scroll": "^1.7.14",
-		"react-use": "^14.1.1",
-		"styled-components": "^5.1.1",
-		"twin.macro": "^1.4.1"
+		"react-scroll": "^1.9.0",
+		"react-use": "^17.4.0",
+		"sharp": "^0.32.6",
+		"styled-components": "^6.1.1",
+		"twin.macro": "^3.4.0"
 	},
 	"devDependencies": {
-		"@types/node": "^13.11.1",
-		"@types/react": "^16.9.34",
-		"@types/react-dom": "^16.9.6",
-		"@types/react-helmet": "^5.0.15",
+		"@types/node": "^20.9.0",
+		"@types/react": "^18.2.37",
+		"@types/react-dom": "^18.2.15",
 		"@types/react-scroll": "^1.8.10",
-		"@types/styled-components": "^5.1.0",
+		"@types/styled-components": "^5.1.30",
+		"autoprefixer": "^10.4.16",
+		"gatsby-plugin-ts-checker": "^1.1.0",
+		"gatsby-plugin-typescript": "^5.12.1",
+		"postcss": "^8.4.31",
 		"prettier": "^2.0.4",
-		"tailwindcss": "^1.3.4",
-		"typescript": "^3.8.3"
+		"tailwindcss": "^3.3.5",
+		"typescript": "^5.2.2"
 	},
 	"keywords": [
 		"gatsby"

src/animations/FadeIn.tsx

@@ -1,28 +1,18 @@
 import { motion } from 'framer-motion';
 import React, { useEffect, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
-import styled from 'styled-components';
-import Box, { BoxProps } from '../elements/Box';
 
 type FadeInDirection = 'left' | 'right';
 
-type StyleProps = {
-	full?: boolean;
-};
-
 type Props = {
 	children: React.ReactNode;
 	direction: FadeInDirection;
-} & StyleProps;
-
-const MotionBox = motion.custom(styled(Box)<StyleProps>`
-	height: ${({ full }) => full && '100%'};
-	width: ${({ full }) => full && '100%'};
-`);
+	className?: string;
+};
 
-export default ({ full, children, direction, ...props }: Props & BoxProps) => {
+export default ({ children, direction, ...props }: Props) => {
 	const [entered, setEntered] = useState(false);
-	const [ref, inView] = useInView();
+	const [ref, inView] = useInView({ triggerOnce: true });
 	const xDir = direction === 'left' ? '-20%' : '20%';
 
 	useEffect(() => {
@@ -32,8 +22,8 @@ export default ({ full, children, direction, ...props }: Props & BoxProps) => {
 	}, [inView, entered]);
 
 	return (
-		<MotionBox
-			full={full}
+		<motion.div
+			className="h-full w-full"
 			{...props}
 			ref={ref}
 			animate={entered ? 'enter' : 'exit'}
@@ -47,6 +37,6 @@ export default ({ full, children, direction, ...props }: Props & BoxProps) => {
 			}}
 		>
 			{children}
-		</MotionBox>
+		</motion.div>
 	);
 };

src/animations/FadeInOld.js

@@ -5,15 +5,15 @@ import posed from 'react-pose';
 const FadeInAnimation = ({ children, delay, duration, ...props }) => {
 	const FadeIn = posed.div({
 		hidden: {
-			opacity: 0
+			opacity: 0,
 		},
 		visible: {
 			opacity: 1,
 			delay,
 			transition: {
-				duration
-			}
-		}
+				duration,
+			},
+		},
 	});
 
 	return (
@@ -25,13 +25,13 @@ const FadeInAnimation = ({ children, delay, duration, ...props }) => {
 
 FadeInAnimation.defaultProps = {
 	delay: 0,
-	duration: 1000
+	duration: 1000,
 };
 
 FadeInAnimation.propTypes = {
 	children: propTypes.element.isRequired,
 	delay: propTypes.number,
-	duration: propTypes.number
+	duration: propTypes.number,
 };
 
 export default FadeInAnimation;

src/animations/FloatInDir.tsx

@@ -12,7 +12,7 @@ type Props = {
 };
 
 export default ({ children, direction, delay, ...props }: Props) => {
-	const [ref, inView] = useInView();
+	const [ref, inView] = useInView({ triggerOnce: true });
 
 	let xDir = '0',
 		yDir = '0';

src/animations/FloatUp.tsx

@@ -10,12 +10,12 @@ type Props = {
 };
 
 export default ({ children, className, ...props }: Props) => {
-	const [ref, inView] = useInView();
+	const [ref, inView] = useInView({ triggerOnce: true });
 	const [_, width] = useViewportSize();
 
 	return (
 		<motion.div
-			className={className + ' overflow-hidden'}
+			className={className ?? '' + ' overflow-hidden'}
 			{...props}
 			ref={ref}
 			initial={{

src/components/About.tsx

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import tw from 'twin.macro';
 import FadeIn from '../animations/FadeIn';
 import Caption from '../elements/Caption';
-import H2 from '../elements/H2';
 import P from '../elements/P';
 import Span from '../elements/Span';
 import { sizes } from '../helpers';
@@ -33,12 +32,12 @@ const About = () => {
 		<Section style={{ backgroundColor: '#FFFFFF' }}>
 			<div className="flex container flex-col md:flex-row px-8 lg:px-32">
 				<div className="md:w-1/2">
-					<FadeIn direction="left" flex flexDirection="column">
+					<FadeIn direction="left" className="flex flex-col">
 						<Caption className="text-center lg:text-left">
 							Välkommen till Etimo!
 						</Caption>
 						<EmphasizedH2>
-							<Span secondary>Passion</Span> för teknik, <br />
+							<Span>Passion</Span> för teknik, <br />
 							kundvärde och <br />
 							samhällsnytta
 						</EmphasizedH2>

src/components/Career/Apply.tsx

@@ -44,7 +44,7 @@ const Apply = (props: Props) => {
 					<P>{variant.text}</P>
 					<P>
 						{variant.emailText}{' '}
-						<Span secondary>
+						<Span>
 							<a href={`mailto:${variant.email}`} target="_blank">
 								{variant.email}
 							</a>

src/components/Career/WhoAreYou.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { FadeIn, FloatUp } from '../../animations';
-import { AnimatedH2, Caption, DashedP, H3, P, Span } from '../../elements';
+import { AnimatedH2, Caption, H3, P, Span } from '../../elements';
 import Section from '../Section';
+import DashedP from '../DashedP';
 
 const thriveTexts = [
 	'Du har en stark vilja att ständigt lära mer och utvecklas i din yrkesroll',
@@ -25,7 +26,7 @@ const WhoAreYou = () => {
 				</FloatUp>
 				<div className="flex flex-col md:flex-row justify-center">
 					<AnimatedH2 direction="left">
-						Är <Span secondary>du</Span> vår&nbsp;
+						Är <Span>du</Span> vår&nbsp;
 					</AnimatedH2>
 					<AnimatedH2 direction="right">nästa kollega?</AnimatedH2>
 				</div>

src/components/Career/WorkingHere.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { FloatUp } from '../../animations';
-import { Caption, DashedP, H2, Span } from '../../elements';
+import { Caption, H2, Span } from '../../elements';
 import Section from '../Section';
+import DashedP from '../DashedP';
 
 const bulletPoints = [
 	'Du är vår viktigaste resurs och du väljer själv dina uppdrag, har möjlighet att påverka vilka kunder du vill jobba med och har ansvar och förtroende för hur din vardag ser ut',
@@ -24,17 +25,15 @@ const WorkingHere = () => {
 						<Caption>Jobbet</Caption>
 						<H2 className="mb-4 md:mb-6 mt-2 md:mt-4">
 							Att jobba på <br />
-							<Span secondary>Etimo</Span>
+							<Span>Etimo</Span>
 						</H2>
 					</FloatUp>
 				</div>
 				<div className="w-11/12 md:w-2/3 mx-auto overflow-hidden">
 					{bulletPoints.map((bulletText) => {
 						return (
-							<FloatUp>
-								<DashedP className="mt-2" key={bulletText}>
-									{bulletText}
-								</DashedP>
+							<FloatUp key={bulletText}>
+								<DashedP className="mt-2">{bulletText}</DashedP>
 							</FloatUp>
 						);
 					})}

src/components/Carousel.tsx

@@ -38,7 +38,7 @@ const Carousel = ({ items }: Props) => {
 	useInterval(() => setPage((page + 1) % items.length), 12000);
 
 	return (
-		<AnimatePresence exitBeforeEnter initial={false}>
+		<AnimatePresence mode="wait" initial={false}>
 			<Item
 				key={page}
 				variants={variants}