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

wix-style-react

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

export const _size = `
<StorybookComponents.Stack>
  <StorybookComponents.Stack width="100%">
    <MarketingPageLayoutContent
      overline="Large overline"
      title="Large title"
      subtitle="Large subtitle"
      content="Large content"
      actions={<Button size="large">Large Action</Button>}
    />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack width="100%">
    <MarketingPageLayoutContent
      size="medium"
      overline="Medium overline"
      title="Medium title"
      subtitle="Medium subtitle"
      content="Medium content"
      actions={<Button size="medium">Medium Action</Button>}
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
`;

export const _bulletList = `
<MarketingPageLayoutContent
  overline="Coming Soon"
  title="Create a Branded Client Experience"
  content={
    <Text>
      <ul>
        <li>Brand your dashboard with a custom logo</li>
        <li>Remove Wix ads and promotions</li>
        <li>Promote your business when sharing in-progress work</li>
        <li>Customize your client’s dashboard</li>
      </ul>
    </Text>
  }
  actions={
    <Layout>
      <Cell>
        <Button size="large">Contact Us</Button>
        <Box inline marginLeft="12px">
          <TextButton>Learn More</TextButton>
        </Box>
      </Cell>
      <Cell>
        <Text size="tiny" secondary>
          Custom branding is free for Partners who have reached the Icon and
          Legend level. Have less than 2000 points? Purchase custom branding for
          $200/month.
        </Text>
      </Cell>
    </Layout>
  }
/>;
`;

export const _marketingPage = `
<Card>
  <MarketingPageLayout
    horizontalSize="medium"
    verticalSize="medium"
    content={
      <Box verticalAlign="middle" height="360px">
        <MarketingPageLayoutContent
          size="medium"
          title="Earn revenue share on your client sites"
          content="Once you reach Legend level, you can earn 20% revenue share on select Premium Plans you sell to clients."
          actions={<Button size="medium">Check Your Level</Button>}
        />
      </Box>
    }
    image={
      <Image src="marketingPageLayout.png" />
    }
  />
</Card>;
`;