{/* 2 COL GRID @largerScreen */}
);
};
+TestimonialSection.propTypes = {
+ testimonials: PropTypes.array.isRequired,
+};
+
export default TestimonialSection;
diff --git a/src/components/nav-bar/NavBar.jsx b/src/components/nav-bar/NavBar.jsx
index 87645080..b59f1938 100644
--- a/src/components/nav-bar/NavBar.jsx
+++ b/src/components/nav-bar/NavBar.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-bind */
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { useLocalization } from 'gatsby-theme-i18n';
diff --git a/src/components/seo/Seo.jsx b/src/components/seo/Seo.jsx
index 2da87d75..2e7d607d 100644
--- a/src/components/seo/Seo.jsx
+++ b/src/components/seo/Seo.jsx
@@ -23,13 +23,8 @@ const SEO = ({ title, description, image }) => {
const intl = useIntl();
const { pathname } = useLocation();
const { site } = useStaticQuery(query);
- const {
- defaultTitle,
- titleTemplate,
- defaultDescription,
- siteUrl,
- defaultImage,
- } = site.siteMetadata;
+ const { defaultTitle, titleTemplate, defaultDescription, siteUrl, defaultImage } =
+ site.siteMetadata;
const seo = {
title: title ? intl.formatMessage({ id: title }) : defaultTitle,
diff --git a/src/components/text/AppKnockoutText.jsx b/src/components/text/AppKnockoutText.jsx
index 81a8ac2a..98f8af2d 100644
--- a/src/components/text/AppKnockoutText.jsx
+++ b/src/components/text/AppKnockoutText.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
function AppKnockoutText({ children, className }) {
return (
{children}
diff --git a/src/css/components/_accordion.scss b/src/css/components/_accordion.scss
index 88cc7657..70870629 100644
--- a/src/css/components/_accordion.scss
+++ b/src/css/components/_accordion.scss
@@ -1,9 +1,9 @@
.accordion-heading {
- @apply .text-2xl font-bold .py-5 text-left leading-tight tracking-tight;
+ @apply text-2xl font-bold py-5 text-left leading-tight tracking-tight;
}
.accordion-text-content {
- @apply .text-2xl leading-tight font-light;
+ @apply text-2xl leading-tight font-light;
transition: height .8s ease-in-out;
overflow: hidden;
}
diff --git a/src/css/components/_buttons.scss b/src/css/components/_buttons.scss
index 84cb05a1..1724a95c 100644
--- a/src/css/components/_buttons.scss
+++ b/src/css/components/_buttons.scss
@@ -1,55 +1,55 @@
// different types of buttons
.button {
- @apply .rounded-lg;
+ @apply rounded-lg;
&:not(.button-gradient) {
&:not([class*='p-']) {
- @apply .px-3 .py-1;
+ @apply px-3 py-1;
}
}
&.button-theme-light {
- @apply .text-hubblr-turquoise;
+ @apply text-hubblr-turquoise;
&:not(.button-gradient) {
- @apply .bg-white;
+ @apply bg-white;
@extend .animate-bg-brand-gray-light;
}
&.button-gradient > .button-content-container {
- @apply .bg-white;
+ @apply bg-white;
@include animate-bg;
}
&:hover {
&.button-gradient > .button-content-container {
- @apply .bg-brand-gray-light;
+ @apply bg-brand-gray-light;
}
}
}
&.button-theme-dark {
- @apply .text-white;
+ @apply text-white;
&:not(.button-gradient) {
- @apply .bg-brand-gray-darkest;
+ @apply bg-brand-gray-darkest;
@extend .animate-bg-brand-gray-darkest;
}
&.button-gradient > .button-content-container {
- @apply .bg-brand-gray-darkest;
+ @apply bg-brand-gray-darkest;
@include animate-bg;
}
&:hover {
&.button-gradient > .button-content-container {
- @apply .bg-black;
+ @apply bg-black;
}
}
}
&.button-theme-transparent {
- @apply .text-white;
+ @apply text-white;
&:not(.button-gradient) {
@extend .animate-bg-brand-gray-darkest;
@@ -61,7 +61,7 @@
&:hover {
&.button-gradient > .button-content-container {
- @apply .bg-black;
+ @apply bg-black;
}
}
}
@@ -69,8 +69,8 @@
.round-button {
&:not([class*='p-']) {
- @apply .px-3 .py-3;
+ @apply px-3 py-3;
}
- @apply .rounded-full;
+ @apply rounded-full;
}
diff --git a/src/css/components/hamburgers/_base.scss b/src/css/components/hamburgers/_base.scss
index 72630679..c3ac0820 100644
--- a/src/css/components/hamburgers/_base.scss
+++ b/src/css/components/hamburgers/_base.scss
@@ -55,7 +55,7 @@
.hamburger-inner {
display: block;
top: 50%;
- margin-top: $hamburger-layer-height / -2;
+ margin-top: calc($hamburger-layer-height / -2);
&,
&::before,
diff --git a/src/css/components/hamburgers/types/_elastic-r.scss b/src/css/components/hamburgers/types/_elastic-r.scss
index 367c0191..057eb1ca 100644
--- a/src/css/components/hamburgers/types/_elastic-r.scss
+++ b/src/css/components/hamburgers/types/_elastic-r.scss
@@ -4,7 +4,7 @@
*/
.hamburger--elastic-r {
.hamburger-inner {
- top: $hamburger-layer-height / 2;
+ top: calc($hamburger-layer-height / 2);
transition-duration: 0.275s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
diff --git a/src/css/components/hamburgers/types/_elastic.scss b/src/css/components/hamburgers/types/_elastic.scss
index ef06a718..59b94958 100644
--- a/src/css/components/hamburgers/types/_elastic.scss
+++ b/src/css/components/hamburgers/types/_elastic.scss
@@ -4,7 +4,7 @@
*/
.hamburger--elastic {
.hamburger-inner {
- top: $hamburger-layer-height / 2;
+ top: calc($hamburger-layer-height / 2);
transition-duration: 0.275s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
diff --git a/src/css/components/hamburgers/types/_slider-r.scss b/src/css/components/hamburgers/types/_slider-r.scss
index ff3cb532..b63877cb 100644
--- a/src/css/components/hamburgers/types/_slider-r.scss
+++ b/src/css/components/hamburgers/types/_slider-r.scss
@@ -4,7 +4,7 @@
*/
.hamburger--slider-r {
.hamburger-inner {
- top: $hamburger-layer-height / 2;
+ top: calc($hamburger-layer-height / 2);
&::before {
top: $hamburger-layer-height + $hamburger-layer-spacing;
@@ -25,7 +25,7 @@
transform: translate3d(0, $y-offset, 0) rotate(-45deg);
&::before {
- transform: rotate(45deg) translate3d($hamburger-layer-width / 7, $hamburger-layer-spacing * -1, 0);
+ transform: rotate(45deg) translate3d(calc($hamburger-layer-width / 7), $hamburger-layer-spacing * -1, 0);
opacity: 0;
}
diff --git a/src/css/components/hamburgers/types/_slider.scss b/src/css/components/hamburgers/types/_slider.scss
index 2ba9cc28..9a175b47 100644
--- a/src/css/components/hamburgers/types/_slider.scss
+++ b/src/css/components/hamburgers/types/_slider.scss
@@ -4,7 +4,7 @@
*/
.hamburger--slider {
.hamburger-inner {
- top: $hamburger-layer-height / 2;
+ top: calc($hamburger-layer-height / 2);
&::before {
top: $hamburger-layer-height + $hamburger-layer-spacing;
@@ -25,7 +25,7 @@
transform: translate3d(0, $y-offset, 0) rotate(45deg);
&::before {
- transform: rotate(-45deg) translate3d($hamburger-layer-width / -7, $hamburger-layer-spacing * -1, 0);
+ transform: rotate(-45deg) translate3d(calc($hamburger-layer-width / -7), $hamburger-layer-spacing * -1, 0);
opacity: 0;
}
diff --git a/src/css/components/hamburgers/types/_spring.scss b/src/css/components/hamburgers/types/_spring.scss
index cdf77d99..f01bb0da 100644
--- a/src/css/components/hamburgers/types/_spring.scss
+++ b/src/css/components/hamburgers/types/_spring.scss
@@ -4,7 +4,7 @@
*/
.hamburger--spring {
.hamburger-inner {
- top: $hamburger-layer-height / 2;
+ top: calc($hamburger-layer-height / 2);
transition: background-color 0s 0.13s linear;
&::before {
diff --git a/src/css/globals/_animations.scss b/src/css/globals/_animations.scss
index e2cf2acf..7906051f 100644
--- a/src/css/globals/_animations.scss
+++ b/src/css/globals/_animations.scss
@@ -19,13 +19,13 @@
.animate-bg-brand-gray-light {
@include animate-bg;
&:hover {
- @apply .bg-brand-gray-light;
+ @apply bg-brand-gray-light;
}
}
.animate-bg-brand-gray-darkest {
@include animate-bg;
&:hover {
- @apply .bg-brand-gray-darkest;
+ @apply bg-brand-gray-darkest;
}
}
diff --git a/src/css/style.scss b/src/css/style.scss
index 8d659dfb..7149f572 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -12,51 +12,51 @@
@layer base {
h1 {
- @apply .font-black .font-sans .text-xl;
+ @apply font-black font-sans text-xl;
}
h2 {
- @apply .font-black .font-sans .text-xl;
+ @apply font-black font-sans text-xl;
}
h3 {
- @apply .font-black .font-sans .text-xl;
+ @apply font-black font-sans text-xl;
}
p {
- @apply .font-mono;
+ @apply font-mono;
}
.secondary-title {
- @apply .font-black .font-sans .text-lg;
+ @apply font-black font-sans text-lg;
}
.secondary-subtitle {
- @apply .font-light .font-sans .text-base;
+ @apply font-light font-sans text-base;
}
.h1 {
- @apply .font-black .font-sans .text-xl;
+ @apply font-black font-sans text-xl;
}
.borderless-link-black {
- @apply .font-black .font-sans .text-xl .bg-clip-text .text-transparent .bg-gradient-to-r .from-hubblr-blue .to-hubblr-green;
+ @apply font-black font-sans text-xl bg-clip-text text-transparent bg-gradient-to-r from-hubblr-blue to-hubblr-green;
a {
- @apply .font-black .font-sans .text-xl .bg-clip-text .text-transparent .bg-gradient-to-r .from-hubblr-blue .to-hubblr-green;
+ @apply font-black font-sans text-xl bg-clip-text text-transparent bg-gradient-to-r from-hubblr-blue to-hubblr-green;
@screen lg {
- @apply .text-3xl;
+ @apply text-3xl;
}
}
}
.swimmingunderline {
padding-bottom: 3px;
- background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%);
- background-position: 0 100%;
- background-repeat: repeat-x;
- background-size: 3px 3px;
- color: #000;
- text-decoration: none;
+ background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%);
+ background-position: 0 100%;
+ background-repeat: repeat-x;
+ background-size: 3px 3px;
+ color: #000;
+ text-decoration: none;
}
.swimmingunderline:hover {
diff --git a/src/css/text-page-styles.scss b/src/css/text-page-styles.scss
index e8782924..41dbb5ea 100644
--- a/src/css/text-page-styles.scss
+++ b/src/css/text-page-styles.scss
@@ -1,52 +1,52 @@
.text-content {
* {
- @apply .text-sm;
+ @apply text-sm;
}
@screen lg {
* {
- @apply .text-base;
+ @apply text-base;
}
}
h1 {
- @apply .text-2xl .mb-5;
+ @apply text-2xl mb-5;
}
@screen lg {
h1 {
- @apply .text-4xl .mb-8;
+ @apply text-4xl mb-8;
}
}
h2 {
- @apply .text-xl .mb-3;
+ @apply text-xl mb-3;
}
@screen lg {
h2 {
- @apply .text-2xl .mt-6 .mb-4;
+ @apply text-2xl mt-6 mb-4;
}
}
h3 {
- @apply .text-xl .mb-3;
+ @apply text-xl mb-3;
}
@screen lg {
h3 {
- @apply .text-2xl .mt-6 .mb-4;
+ @apply text-2xl mt-6 mb-4;
}
}
p, ul {
- @apply .mb-3;
+ @apply mb-3;
}
ul {
list-style-type: disc;
list-style-position: inside;
- @apply .px-4;
+ @apply px-4;
}
a {
- @apply .underline;
+ @apply underline;
}
}
diff --git a/src/images/simonHagedorn/simon_hagedorn.jpeg b/src/images/simonHagedorn/simon_hagedorn.jpeg
new file mode 100644
index 00000000..f6e34576
Binary files /dev/null and b/src/images/simonHagedorn/simon_hagedorn.jpeg differ
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 92d00fd2..52734225 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,4 +1,6 @@
import React from 'react';
+import { graphql } from 'gatsby';
+import PropTypes from 'prop-types';
import MainPageDarkLayout from '../components/layouts/MainPageDarkLayout';
import IntroductionSection from '../components/index/page-sections/IntroductionSection';
import IntroductionSectionContent from '../components/index/page-sections/IntroductionSectionContent';
@@ -8,8 +10,37 @@ import NavBarContactButton from '../components/nav-bar/NavBarContactButton';
import CallToActionSection from '../components/index/page-sections/CallToActionSection';
import ServiceSection from '../components/index/page-sections/ServiceSection';
import StartupSection from '../components/index/page-sections/StartupSection';
+import TestimonialSection from '../components/index/page-sections/TestimonialSection';
-function IndexPage() {
+export const query = graphql`
+ query allContentfulCustomerTestimonial($locale: String) {
+ allContentfulCustomerTestimonial(filter: { node_locale: { eq: $locale } }) {
+ edges {
+ node {
+ id
+ name
+ jobRole
+ testimonial {
+ testimonial
+ }
+ profileImage {
+ file {
+ url
+ }
+ }
+ logo {
+ file {
+ url
+ }
+ }
+ }
+ }
+ }
+ }
+`;
+
+// eslint-disable-next-line react/prop-types
+function IndexPage({ data }) {
return (
-