wix-style-react/src/MarketingPageLayout/docs/MarketingPageLayout.demo.js

wix-style-react

import React from 'react';
import { StorybookComponents } from 'wix-storybook-utils/StorybookComponents';

import MarketingPageLayout from '..';
import MarketingPageLayoutContent from '../../MarketingPageLayoutContent';
import Text from '../../Text';
import Button from '../../Button';
import Image from '../../Image';
import Card from '../../Card';

export default () => (
  <Card>
    <MarketingPageLayout
      content={
        <StorybookComponents.Stack height="612px" alignItems="center">
          <MarketingPageLayoutContent
            size="medium"
            title="Promote Your Business on Google Search & Maps"
            subtitle="Bring in local traffic using Google My Business."
            content={
              <Text>
                <ul>
                  <li>
                    Give potential customers your business info at a glance
                  </li>
                  <li>Ensure customers can easily get in touch</li>
                  <li>
                    Create & manage your Business Profile right from your site's
                    dashboard
                  </li>
                </ul>
              </Text>
            }
            actions={<Button size="medium">Start Now</Button>}
          />
        </StorybookComponents.Stack>
      }
      image={<Image src="MarketingIllustration4.png" />}
    />
  </Card>
);