From 00b7918ee8513b75f28149d657d09741ce85254c Mon Sep 17 00:00:00 2001
From: hejsaga <sagaswahn@hotmail.com>
Date: Tue, 15 Oct 2024 16:26:46 +0200
Subject: [PATCH] feat: customer stories (#228)

* feat: customer stories draft

* chore: update work at etimo items

* chore: design improvements
---
 src/components/CustomerTestimonials.tsx |  44 +++++++++
 src/components/Employees/ThePeople.tsx  |   2 +-
 src/components/Testimonials.tsx         | 126 ++++++++++++++++++++++++
 src/components/WorkAtEtimo.tsx          |  10 +-
 src/pages/index.tsx                     |  13 ++-
 5 files changed, 188 insertions(+), 7 deletions(-)
 create mode 100644 src/components/CustomerTestimonials.tsx
 create mode 100644 src/components/Testimonials.tsx

diff --git a/src/components/CustomerTestimonials.tsx b/src/components/CustomerTestimonials.tsx
new file mode 100644
index 0000000..797a2ea
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/src/components/Employees/ThePeople.tsx b/src/components/Employees/ThePeople.tsx
index ca15ae3..7b9fe32 100644
--- a/src/components/Employees/ThePeople.tsx
+++ b/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>
diff --git a/src/components/Testimonials.tsx b/src/components/Testimonials.tsx
new file mode 100644
index 0000000..dec6f6c
--- /dev/null
+++ b/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;
diff --git a/src/components/WorkAtEtimo.tsx b/src/components/WorkAtEtimo.tsx
index ae8d0f7..26aa137 100644
--- a/src/components/WorkAtEtimo.tsx
+++ b/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">
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a07e3c5..172f952 100644
--- a/src/pages/index.tsx
+++ b/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} />