feat: customer stories (#228)

* feat: customer stories draft

* chore: update work at etimo items

* chore: design improvements

src/components/CustomerTestimonials.tsx

@@ -0,0 +1,44 @@
+import { Link } from 'gatsby';
+import React from 'react';
+import { FloatUp } from '../animations';
+import { AnimatedH2, Caption, P, Span } from '../elements';
+import { HighlightButton } from './Button';
+import Section from './Section';
+import Testimonials from './Testimonials';
+
+type Props = {
+	link: boolean;
+	sectionHeight: number;
+};
+
+export default ({ sectionHeight, link }: Props) => {
+	return (
+		<Section sectionHeight={sectionHeight} style={{ backgroundColor: 'white' }}>
+			<div className="container mx-auto xl:px-12">
+				<div className="flex flex-col mb-8">
+					<FloatUp>
+						<Caption className="text-center">Sagt om oss</Caption>
+					</FloatUp>
+					<div className="flex flex-row justify-center">
+						<AnimatedH2 direction="left">Hur vi hjälpt</AnimatedH2>
+						<AnimatedH2 direction="right">
+							&nbsp;våra <Span> kunder</Span>
+						</AnimatedH2>
+					</div>
+
+					<Testimonials />
+
+					{link && (
+						<div className="flex mx-auto mt-6 md:mt-10 lg:mt-12 xl:mt-20">
+							<HighlightButton>
+								<Link to="/tjanster">
+									<P>Mer om våra tjänster</P>
+								</Link>
+							</HighlightButton>
+						</div>
+					)}
+				</div>
+			</div>
+		</Section>
+	);
+};

src/components/Employees/ThePeople.tsx

@@ -126,7 +126,7 @@ const ThePeople = ({ sectionHeight }: Props) => {
 	];
 
 	return (
-		<Section sectionHeight={sectionHeight} style={{ backgroundColor: 'white' }}>
+		<Section sectionHeight={sectionHeight}>
 			<div className="container mx-auto xl:px-12 lg:h-full lg:overflow-hidden">
 				<div className="flex flex-col mb-8 lg:h-95 lg:max-h-95 lg:justify-center lg:items-center">
 					<FloatUp>

src/components/Testimonials.tsx

@@ -0,0 +1,126 @@
+import React, { useState, useRef } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import styled from 'styled-components';
+import tw from 'twin.macro';
+import { useInterval } from '../hooks';
+import { flushSync } from 'react-dom';
+
+const items = [
+	{
+		text: 'Etimo hjälpte oss med att ta fram strategier för att dela information mellan våra produkter med syfte att öka intern effektivitet. De skapade även en arkitekturell strategi för att stötta nästa generation av digitala tjänster parallellt med att driva rekryteringen av den engineering manager som nu driver moderniseringen mot mål.',
+		name: 'Emma Rudenstam',
+		company: 'Causey & Westling',
+		role: 'Vice VD & Partner',
+	},
+];
+
+const createVariants = (direction: 'left' | 'right') => ({
+	initial: {
+		x: direction === 'left' ? 200 : -200,
+		opacity: 0,
+		zIndex: 0,
+	},
+	active: {
+		x: 0,
+		opacity: 1,
+		zIndex: 1,
+	},
+	exit: {
+		x: direction === 'left' ? -200 : 200,
+		opacity: 0,
+		zIndex: 0,
+		duration: 0.5,
+	},
+});
+
+const TestimonialItem = styled(motion.div)`
+	${tw`font-mont text-lg p-4 mx-auto h-full m-10`}
+`;
+
+const TestimonialsContainer = styled.div`
+	${tw`w-full max-w-lg md:max-w-2xl lg:max-w-4xl mx-auto text-center`}
+`;
+
+const TestimonialDetails = styled.div`
+	${tw`mt-4 text-sm text-gray-600`}
+`;
+
+const Testimonials = () => {
+	const [item, setItem] = useState(0);
+	const [swipeDirection, setSwipeDirection] = useState<'left' | 'right'>(
+		'left'
+	);
+	const startX = useRef(0);
+	const endX = useRef(0);
+
+	useInterval(() => {
+		setSwipeDirection('left');
+		setItem((item + 1) % items.length);
+	}, 12000);
+
+	const handleTouchStart = (e: React.TouchEvent) =>
+		(startX.current = e.touches[0].clientX);
+
+	const handleTouchMove = (e: React.TouchEvent) =>
+		(endX.current = e.touches[0].clientX);
+
+	const handleTouchEnd = () => {
+		const swipeDistance = startX.current - endX.current;
+
+		if (swipeDistance > 50) {
+			flushSync(() => setSwipeDirection('left'));
+			setItem((previtem) => (previtem + 1) % items.length);
+		} else if (swipeDistance < -50) {
+			flushSync(() => setSwipeDirection('right'));
+			setItem((previtem) => (previtem - 1 + items.length) % items.length);
+		}
+	};
+
+	return (
+		<TestimonialsContainer
+			onTouchStart={handleTouchStart}
+			onTouchMove={handleTouchMove}
+			onTouchEnd={handleTouchEnd}
+		>
+			<AnimatePresence mode="wait" initial={false}>
+				<TestimonialItem
+					key={item}
+					variants={createVariants(swipeDirection)}
+					initial="initial"
+					animate="active"
+					exit="exit"
+				>
+					<p className="italic">"{items[item].text}"</p>
+
+					<TestimonialDetails>
+						<p>
+							{items[item].name} - {items[item].role}
+						</p>
+						<strong>
+							<p>{items[item].company}</p>
+						</strong>
+					</TestimonialDetails>
+				</TestimonialItem>
+			</AnimatePresence>
+
+			{/* <div className="flex justify-center mt-4 space-x-2">
+				{items.map((_, index) => (
+					<div
+						key={index}
+						className={`w-3 h-3 rounded-full cursor-pointer ${
+							index === item ? 'bg-cyan' : 'bg-gray-400'
+						}`}
+						onClick={() => {
+							setSwipeDirection(index > item ? 'left' : 'right');
+							setTimeout(() => {
+								setItem(index);
+							}, 0);
+						}}
+					></div>
+				))}
+			</div> */}
+		</TestimonialsContainer>
+	);
+};
+
+export default Testimonials;

src/components/WorkAtEtimo.tsx

@@ -28,10 +28,10 @@ const workItems = [
 	'10% av din tid är kompetensutveckling',
 	'Du har en personlig mentor',
 	'Du har tydlig karriärväg i en organisation med platt hierarki och transparens',
-	'Du har möjlighet till delägarskap (bolaget ägs till 100% av seniora medarbetare)',
-	'Du jobbar ibland inhouse och ibland ute hos kund',
-	'Fredagar jobbar vi alla från kontoret (och många av oss spelar VR i vår VR-studio)',
-	'Vi jobbar utifrån våra värdeord som är kompetens, öppenhet och samhällsnytta',
+	'Du har möjlighet till delägarskap då bolaget ägs till 100% av seniora medarbetare',
+	'Du arbetar ibland inhouse och ibland ute hos kund',
+	'På fredagar arbetar vi alla från kontoret och utmanar varandra i Mario Kart',
+	'Vi arbetar utifrån våra värdeord som är kompetens, öppenhet och samhällsnytta',
 ];
 type Props = {
 	sectionHeight: number;
@@ -48,7 +48,7 @@ const WorkAtEtimo = ({ sectionHeight }: Props) => {
 	`);
 
 	return (
-		<Section sectionHeight={sectionHeight}>
+		<Section sectionHeight={sectionHeight} style={{ backgroundColor: 'white' }}>
 			<div className="container xl:px-24 lg:max-h-95">
 				<div className="flex flex-col xl:pl-12 lg:flex-row items-center lg:justify-center">
 					<div className="w-4/5 sm:w-3/4 lg:w-3/5 lg:mr-2 xl:mr-4 mb-2 lg:mb-0">

src/pages/index.tsx

@@ -9,6 +9,7 @@ import { sizes } from '../helpers';
 import { useSectionHeight, useViewportSize } from '../hooks';
 import Customers from '../components/Customers';
 import { OurServicesSectionWithLink } from '../components/OurServices/OurServicesSectionWithLink';
+import CustomerTestimonials from '../components/CustomerTestimonials';
 
 const IndexPage = () => {
 	const [height, width] = useViewportSize();
@@ -43,11 +44,16 @@ const IndexPage = () => {
 		},
 		{
 			index: 3,
+			name: 'Sagt om oss',
+			height: sectionWithoutHeaderHeightLarge ?? height,
+		},
+		{
+			index: 4,
 			name: 'Om oss',
 			height: sectionWithoutHeaderHeight ?? height,
 		},
 		{
-			index: 4,
+			index: 5,
 			name: 'Karriär',
 			height: sectionWithoutHeaderHeight ?? height,
 		},
@@ -65,6 +71,11 @@ const IndexPage = () => {
 
 			<Customers link sectionHeight={sectionWithoutHeaderHeight ?? height} />
 
+			<CustomerTestimonials
+				link
+				sectionHeight={sectionWithoutHeaderHeight ?? height}
+			/>
+
 			<ThePeople sectionHeight={sectionWithoutHeaderHeight ?? height} />
 
 			<WorkAtEtimo sectionHeight={sectionWithoutHeaderHeight ?? height} />