feat: apply success stubs to landing content (#33)

src/pages/landing/index.tsx

@@ -1,13 +1,9 @@
 import React, { FC } from 'react';
 import { Container, VStack } from '@chakra-ui/react';
-
-import {
-  BenefitsSection,
-  Footer,
-  HeroSection,
-  SocialProofSection,
-} from '../../components/landing';
+import LandingSuccess from '../../../stubs/json/landing/landing-success.json';
+import { BenefitsSection, Footer, HeroSection, SocialProofSection } from '../../components/landing';
 import { LandingThemeProvider } from '../../containers';
+import { isBenefitsSectionData, isSocialProofSectionData } from './types';
 
 const Page: FC = () => {
   return (
@@ -21,10 +17,19 @@ const Page: FC = () => {
         centerContent
       >
         <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
-          <HeroSection flexShrink={0} />
+          <HeroSection
+            data={LandingSuccess.body['hero-section']}
+            flexShrink={0}
+          />
           <VStack as='main' flexGrow={1}>
-            <BenefitsSection />
-            <SocialProofSection />
+            {LandingSuccess.body.sections.map(({ type, ...data }, i) => {
+              if (isBenefitsSectionData(type, data)) {
+                return <BenefitsSection key={i} data={data} />;
+              }
+              if (isSocialProofSectionData(type, data)) {
+                return <SocialProofSection key={i} data={data} />;
+              }
+            })}
           </VStack>
           <Footer />
         </VStack>

src/pages/landing/types.ts

@@ -0,0 +1,15 @@
+import LandingSuccess from "../../../stubs/json/landing/landing-success.json";
+import { BenefitsSectionProps, SocialProofSectionProps } from "../../components/landing";
+import { ArrElement } from "../../lib";
+
+type SectionsItemData = ArrElement<LandingSuccess['body']['sections']>;
+type SectionType = SectionsItemData['type'];
+type SectionData = Omit<SectionsItemData, 'type'>;
+
+export const isBenefitsSectionData = (type: SectionType, data: SectionData): data is BenefitsSectionProps['data'] => {
+  return type === 'benefits-section';
+};
+
+export const isSocialProofSectionData = (type: SectionType, data: SectionData): data is SocialProofSectionProps['data'] => {
+  return type === 'social-proof-section';
+};