feat: test landing page render (#85)

src/components/landing/BenefitsSection/BenefitsSection.tsx

@@ -9,12 +9,12 @@ import { BenefitsSectionProps } from './types';
 import { iconsMap } from './helper';
 
 export const BenefitsSection: FC<BenefitsSectionProps> = ({
-  data: { heading, description, list } = {},
+  data: { heading, description, list } = {}, ...props
 }) => {
   const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
 
   return (
-    <PageSection>
+    <PageSection {...props}>
       <VStack w='full' spacing={2}>
         <Heading as='h2'>{t(heading)}</Heading>
         <Text>{t(description)}</Text>

src/components/landing/Footer/Copyright/Copyright.tsx

@@ -5,7 +5,9 @@ import { Text } from '@chakra-ui/react';
 const currentYear = new Date().getFullYear();
 
 export const Copyright: FC = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.landing.footer'
+  });
 
-  return <Text color='whiteAlpha.500'>{t('dry-wash.landing.footer.copyright', { currentYear })}</Text>;
+  return <Text color='whiteAlpha.500'>{t('copyright', { currentYear })}</Text>;
 };

src/components/landing/Footer/Footer.tsx

@@ -7,7 +7,7 @@ import { SiteLogo, PageSection } from '../';
 
 import { Copyright } from './Copyright';
 
-export const Footer: FC = () => {
+export const Footer: FC = (props) => {
   const { t } = useTranslation('~', {
     keyPrefix: 'dry-wash.landing.footer.links',
   });
@@ -15,11 +15,17 @@ export const Footer: FC = () => {
   const listData = [
     { to: '#', label: t('privacy-policy') },
     { to: '#', label: t('service-terms') },
-    { to: '#', label: t('faq')  },
+    { to: '#', label: t('faq') },
   ];
 
   return (
-    <PageSection as='footer' py={5} bg='gray.700' color='white'>
+    <PageSection
+      as='footer'
+      py={5}
+      bg='gray.700'
+      color='white'
+      {...props}
+    >
       <SiteLogo />
       <Copyright />
       <List spacing={2}>

src/components/landing/HeroSection/HeroSection.tsx

@@ -10,11 +10,18 @@ import { HeroSectionProps } from './types';
 export const HeroSection: FC<HeroSectionProps> = ({
   data: { headline, description, video } = {},
   flexShrink,
+  ...props
 }) => {
   const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
 
   return (
-    <Box flexShrink={flexShrink} as='header' pos='relative' zIndex={0}>
+    <Box
+      flexShrink={flexShrink}
+      as='header'
+      pos='relative'
+      zIndex={0}
+      {...props}
+    >
       <Box
         as='video'
         src={`${__webpack_public_path__}/remote-assets/${video}`}

src/components/landing/SiteLogo/SiteLogo.tsx

@@ -5,9 +5,9 @@ import { Image } from '@chakra-ui/react';
 import { LogoSvg } from '../../../assets/icons';
 
 export const SiteLogo: FC = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
 
-  return <Image src={LogoSvg} alt={t('~:dry-wash.landing.site-logo')} w={40} />;
+  return <Image src={LogoSvg} alt={t('site-logo')} w={40} />;
 };
 
 // todo: replace Image by SVG React component

src/components/landing/SocialProofSection/SocialProofSection.tsx

@@ -9,11 +9,12 @@ import { SocialProofSectionProps } from './types';
 
 export const SocialProofSection: FC<SocialProofSectionProps> = ({
   data: { heading } = {},
+  ...props
 }) => {
   const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
 
   return (
-    <PageSection>
+    <PageSection {...props}>
       <Heading as='h2'>{t(heading)}</Heading>
       <ReviewsSlider />
       <HStack w='full' justify='flex-end'>