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

wix-style-react

export const _structure = `
<MarketingPageLayout
  content={
    <StorybookComponents.Stack height="400px">
      <StorybookComponents.Placeholder>Content</StorybookComponents.Placeholder>
    </StorybookComponents.Stack>
  }
  image={<Image height="400px" />}
  footer={
    <StorybookComponents.Stack height="100px">
      <StorybookComponents.Placeholder>Footer</StorybookComponents.Placeholder>
    </StorybookComponents.Stack>
  }
/>;
`;

export const _content = `
<MarketingPageLayout
  content={
    <MarketingPageLayoutContent
      overline="Overline"
      title="Title"
      subtitle="Subtitle"
      content="Content"
      actions={<Button size="large">Action</Button>}
    />
  }
  image={<Image />}
/>;
`;

export const _padding = `
<StorybookComponents.Stack flexDirection="column">
  <Card>
    <MarketingPageLayout
      horizontalSize="large"
      verticalSize="large"
      image={<Image />}
      content={
        <MarketingPageLayoutContent
          size="large"
          title="Large title"
          content={
            <Text size="medium">
              <ul>
                <li>Large content item one</li>
                <li>Large content item two</li>
                <li>Large content item three</li>
              </ul>
            </Text>
          }
          actions={<Button size="large">Large Action</Button>}
        />
      }
    />
  </Card>
  <Card>
    <MarketingPageLayout
      horizontalSize="medium"
      verticalSize="medium"
      image={<Image />}
      content={
        <MarketingPageLayoutContent
          size="medium"
          title="Medium title"
          content={
            <Text size="small">
              <ul>
                <li>Medium content item one</li>
                <li>Medium content item two</li>
                <li>Medium content item three</li>
              </ul>
            </Text>
          }
          actions={<Button size="medium">Medium Action</Button>}
        />
      }
    />
  </Card>
</StorybookComponents.Stack>;
`;

export const _fullSizeImage = `
<Card>
  <MarketingPageLayout
    content={
      <MarketingPageLayoutContent
        overline="Overline"
        title="Title"
        content={
          <Text>
            <ul>
              <li>Bullet item 1</li>
              <li>Bullet item 2</li>
              <li>Bullet item 3</li>
            </ul>
          </Text>
        }
        actions={<Button size="large">Action</Button>}
      />
    }
    image={<Image />}
    removeImageHorizontalPadding
    removeImageVerticalPadding
  />
</Card>;
`;

export const _listInAFooter = `
<Card>
  <MarketingPageLayout
    content={
      <Box height="612px" verticalAlign="middle">
        <MarketingPageLayoutContent
          title="Reach the Right Shoppers on Facebook & Instagram"
          subtitle="Get set up and Wix’s AI will take care of the rest"
          content={
            <Text>
              <ul>
                <li>Show your ad to the people most likely to buy</li>
                <li>Test your ad non-stop to see what’s working </li>
                <li>Optimize your budget to get you the best results </li>
              </ul>
            </Text>
          }
          actions={
            <Box gap="12px">
              <Button size="medium">Start Now</Button>
              <Button priority="secondary" prefixIcon={<Icons.PlayFilled />}>
                Get to Know Wix's AI
              </Button>
            </Box>
          }
        />
      </Box>
    }
    image={<Image src="MarketingIllustration2.png" />}
    footer={
      <TestimonialList
        testimonials={[
          {
            id: '0001',
            avatar: <Avatar name="Guy in glasses" size="size60" />,
            text: 'I love it! It helped me to increase the sales.',
            authorName: 'John Smith',
          },
          {
            id: '0002',
            avatar: <Avatar name="Person with a hat" size="size60" />,
            text: 'Amazing! It is simple to use, I had no struggle to setup.',
            authorName: 'Templeton Peck',
          },
          {
            id: '0003',
            avatar: <Avatar name="Smiling lady" size="size60" />,
            text: 'A perfect tool for creating ad campaigns that sell.',
            authorName: 'Bosco B.A.',
          },
        ]}
      />
    }
  />
</Card>;
`;

export const _extendedImage = `
<Card>
  <MarketingPageLayout
    removeImageHorizontalPadding
    removeImageVerticalPadding
    content={
      <Box height="840px" verticalAlign="middle">
        <MarketingPageLayoutContent
          title="Streamline your workflow with Ascend business tools"
          content="Simplify the way you track leads, bill clients* and manage your projects. Unlock email marketing, workflows and automations when you reach Pioneer level."
          actions={<Button>Check Your Level</Button>}
        />
      </Box>
    }
    image={<Image borderRadius={0} src="MarketingIllustration3.png" />}
  />
</Card>;
`;