More components

.eslintrc.js

@@ -25,7 +25,6 @@ module.exports = {
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react/recommended',
-    'plugin:jsx-a11y/recommended',
     'plugin:@next/next/recommended',
   ],
   rules: {
@@ -85,6 +84,8 @@ module.exports = {
     'react/jsx-uses-react': 'off',
     'react/react-in-jsx-scope': 'off',
     'react/self-closing-comp': 'warn',
+    'react/no-unknown-property': 'off',
+    'react/no-unescaped-entities': 'off',
   },
   overrides: [
     {

.gitignore

@@ -192,3 +192,7 @@ bower_components
 
 ### Install artifacts ###
 package-lock.json
+
+### Local development artifacts ###
+src/components/alvarez
+

global.d.ts

@@ -0,0 +1,5 @@
+interface CtfGqlPropsInterface {
+  id: string;
+  locale: string;
+  preview: boolean;
+}

package.json

@@ -33,21 +33,24 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@contentful/live-preview": "^2.2.1",
     "@contentful/rich-text-react-renderer": "^15.12.1",
     "@contentful/rich-text-types": "^15.12.1",
-    "@contentful/live-preview": "^2.2.1",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@mui/icons-material": "^5.10.9",
     "@mui/material": "^5.10.9",
     "@mui/styles": "^5.10.9",
     "@next/bundle-analyzer": "^12.3.0",
+    "@splidejs/react-splide": "^0.7.12",
+    "@splidejs/splide": "^4.1.4",
     "@svgr/webpack": "^6.3.1",
     "@tanstack/react-query": "^4.3.9",
     "clsx": "^1.2.1",
     "dotenv": "^16.0.1",
     "graphql": "^16.5.0",
     "intersection-observer": "^0.12.2",
+    "jquery": "^3.7.1",
     "lodash": "^4.17.21",
     "next": "12.3.1",
     "next-compose-plugins": "^2.2.1",

src/components/features/alvarez-marsal-value-props/am-value-props.tsx

@@ -0,0 +1,46 @@
+export default function AMValueProps() {
+  return (
+    <>
+      <div
+        className="how-help-client-top"
+        style={{ boxSizing: 'border-box', color: 'rgb(255, 255, 255)' }}
+      >
+        <div
+          className="how-help-client-title"
+          style={{
+            boxSizing: 'border-box',
+            lineHeight: 1,
+            textTransform: 'capitalize',
+            fontWeight: 300,
+            borderBottom: '2px solid rgb(188, 188, 188)',
+            fontSize: '45px',
+            paddingBottom: '20px',
+          }}
+        >
+          How we help our clients
+        </div>
+      </div>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+html {
+  box-sizing: border-box;
+  width: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0px;
+  padding: 0px;
+  overflow-x: hidden;
+  background-color: rgb(238, 238, 238);
+  font-family: "Helvetica Neue LT Std Cn", Helvetica, Arial, sans-serif;
+}
+`,
+        }}
+      />
+    </>
+  );
+}

src/components/features/ctf-components/ctf-am-hero/__generated/am-hero.generated.ts

@@ -0,0 +1,60 @@
+import * as Types from '../../../../../lib/__generated/graphql.types';
+
+import { useQuery, UseQueryOptions } from '@tanstack/react-query';
+import { customFetcher } from '@src/lib/fetchConfig';
+export type AmHeroFieldsFragment = { __typename: 'AmHero', headerCopy?: string | null, subHeaderCopy?: string | null, ctaCopy?: string | null, ctaTargetLink?: string | null, sys: { __typename?: 'Sys', id: string }, backgroundImage?: { __typename?: 'Asset', fileName?: string | null, url?: string | null } | null };
+
+export type CtfAmHeroQueryVariables = Types.Exact<{
+  id: Types.Scalars['String'];
+  locale?: Types.InputMaybe<Types.Scalars['String']>;
+  preview?: Types.InputMaybe<Types.Scalars['Boolean']>;
+}>;
+
+
+export type CtfAmHeroQuery = {
+  __typename?: 'Query', amHero?: (
+    { __typename?: 'AmHero' }
+    & AmHeroFieldsFragment
+  ) | null
+};
+
+export const AmHeroFieldsFragmentDoc = `
+    fragment AmHeroFields on AmHero {
+  __typename
+  sys {
+    id
+  }
+  headerCopy
+  subHeaderCopy
+  ctaCopy
+  ctaTargetLink
+  backgroundImage {
+    fileName
+    url
+  }
+}
+    `;
+export const CtfAmHeroDocument = `
+    query CtfAmHero($id: String!, $locale: String, $preview: Boolean) {
+  amHero(id: $id, locale: $locale, preview: $preview) {
+    ...AmHeroFields
+  }
+}
+    ${AmHeroFieldsFragmentDoc}`;
+export const useCtfAmHeroQuery = <
+  TData = CtfAmHeroQuery,
+  TError = unknown
+>(
+  variables: CtfAmHeroQueryVariables,
+  options?: UseQueryOptions<CtfAmHeroQuery, TError, TData>
+) =>
+  useQuery<CtfAmHeroQuery, TError, TData>(
+    ['CtfAmHero', variables],
+    customFetcher<CtfAmHeroQuery, CtfAmHeroQueryVariables>(CtfAmHeroDocument, variables),
+    options
+  );
+
+useCtfAmHeroQuery.getKey = (variables: CtfAmHeroQueryVariables) => ['CtfAmHero', variables];
+;
+
+useCtfAmHeroQuery.fetcher = (variables: CtfAmHeroQueryVariables, options?: RequestInit['headers']) => customFetcher<CtfAmHeroQuery, CtfAmHeroQueryVariables>(CtfAmHeroDocument, variables, options);

src/components/features/ctf-components/ctf-am-hero/__generated/ctf-am-hero.generated.ts

@@ -0,0 +1,58 @@
+import * as Types from '../../../../../lib/__generated/graphql.types';
+
+import { useQuery, UseQueryOptions } from '@tanstack/react-query';
+import { customFetcher } from '@src/lib/fetchConfig';
+export type AmHeroFieldsFragment = { __typename: 'AmHero', headerCopy?: string | null, subHeaderCopy?: string | null, ctaCopy?: string | null, ctaTargetLink?: string | null, sys: { __typename?: 'Sys', id: string }, backgroundImage?: { __typename?: 'Asset', fileName?: string | null, url?: string | null } | null };
+
+export type CtfAmHeroQueryVariables = Types.Exact<{
+  id: Types.Scalars['String'];
+  locale?: Types.InputMaybe<Types.Scalars['String']>;
+  preview?: Types.InputMaybe<Types.Scalars['Boolean']>;
+}>;
+
+
+export type CtfAmHeroQuery = { __typename?: 'Query', amHero?: (
+    { __typename?: 'AmHero' }
+    & AmHeroFieldsFragment
+  ) | null };
+
+export const AmHeroFieldsFragmentDoc = `
+    fragment AmHeroFields on AmHero {
+  __typename
+  sys {
+    id
+  }
+  headerCopy
+  subHeaderCopy
+  ctaCopy
+  ctaTargetLink
+  backgroundImage {
+    fileName
+    url
+  }
+}
+    `;
+export const CtfAmHeroDocument = `
+    query CtfAmHero($id: String!, $locale: String, $preview: Boolean) {
+  amHero(id: $id, locale: $locale, preview: $preview) {
+    ...AmHeroFields
+  }
+}
+    ${AmHeroFieldsFragmentDoc}`;
+export const useCtfAmHeroQuery = <
+      TData = CtfAmHeroQuery,
+      TError = unknown
+    >(
+      variables: CtfAmHeroQueryVariables,
+      options?: UseQueryOptions<CtfAmHeroQuery, TError, TData>
+    ) =>
+    useQuery<CtfAmHeroQuery, TError, TData>(
+      ['CtfAmHero', variables],
+      customFetcher<CtfAmHeroQuery, CtfAmHeroQueryVariables>(CtfAmHeroDocument, variables),
+      options
+    );
+
+useCtfAmHeroQuery.getKey = (variables: CtfAmHeroQueryVariables) => ['CtfAmHero', variables];
+;
+
+useCtfAmHeroQuery.fetcher = (variables: CtfAmHeroQueryVariables, options?: RequestInit['headers']) => customFetcher<CtfAmHeroQuery, CtfAmHeroQueryVariables>(CtfAmHeroDocument, variables, options);

src/components/features/ctf-components/ctf-am-hero/ctf-am-hero-gql.tsx

@@ -0,0 +1,26 @@
+import { useContentfulLiveUpdates } from '@contentful/live-preview/react';
+import React from 'react';
+
+import { useCtfAmHeroQuery } from './__generated/am-hero.generated';
+import { AmHero } from './ctf-am-hero';
+
+interface CtfHeroGqlPropsInterface {
+  id: string;
+  locale: string;
+  preview: boolean;
+}
+
+export const CtfAmHeroGql = (props: CtfHeroGqlPropsInterface) => {
+  const { id, locale, preview } = props;
+  const { data, isLoading } = useCtfAmHeroQuery({
+    id,
+    locale,
+    preview,
+  });
+
+  const amHero = useContentfulLiveUpdates(data?.amHero);
+
+  if (!amHero || isLoading) return null;
+
+  return <AmHero {...amHero} />;
+};

src/components/features/ctf-components/ctf-am-hero/ctf-am-hero.graphql

@@ -0,0 +1,20 @@
+fragment AmHeroFields on AmHero {
+  __typename
+  sys {
+    id
+  }
+  headerCopy
+  subHeaderCopy
+  ctaCopy
+  ctaTargetLink
+	backgroundImage{
+    fileName,
+    url
+  }
+}
+
+query CtfAmHero($id: String!, $locale: String, $preview: Boolean) {
+  amHero(id: $id, locale: $locale, preview: $preview) {
+    ...AmHeroFields
+  }
+}