## Feature Examples

### Simple Usage
- description: A simple example with compact preview
- example:
```jsx
<AnnouncementModalLayout
  illustration={'generic_post.svg'}
  title="Import Posts From WordPress"
  primaryButtonText="Start Now"
  linkText="Learn More"
  onCloseButtonClick={() => {}}
>
  <Text>
    Your public posts, images and videos will be copied and added to your Wix
    blog. Your site and current posts won't be affected.
  </Text>
</AnnouncementModalLayout>;
```

### Secondary Button Example
- description: With a Secondary Button action instead of the link.
- example:
```jsx
<AnnouncementModalLayout
  illustration={'generic_post.svg'}
  title="Import Posts From WordPress"
  primaryButtonText="Start Now"
  secondaryButtonText="Skip"
  onCloseButtonClick={() => {}}
>
  <Text>
    Your public posts, images and videos will be copied and added to your Wix
    blog. Your site and current posts won't be affected.
  </Text>
</AnnouncementModalLayout>;
```

### No Illustration Example
- description: 
- example:
```jsx
<AnnouncementModalLayout
  title="All Your Info In One Place"
  primaryButtonText="Leave"
  linkText="Learn More"
  onCloseButtonClick={() => {}}
>
  <Text>
    Meet your brand new General Info page.
    <br />
    We brought all your business information together here.
  </Text>
  <Box
    backgroundColor="grey"
    width="444px"
    height="210px"
    marginTop="18px"
    borderRadius="4px"
  />
</AnnouncementModalLayout>;
```

### Footnote Example
- description: The basic example with the addition of a footnote
- example:
```jsx
<AnnouncementModalLayout
  illustration={'generic_post.svg'}
  primaryButtonText="Start Now"
  linkText="Learn More"
  title="Import Posts From WordPress"
  onCloseButtonClick={() => {}}
  footnote={
    <Text size="small">
      By sending an invite, you agree to the <a>Wix Terms of Use</a>
    </Text>
  }
>
  <Text>
    Your public posts, images and videos will be copied and added to your Wix
    blog. Your site and current posts won't be affected.
  </Text>
</AnnouncementModalLayout>;
```

### Skin Example
- description: The basic example with a premium skin
- example:
```jsx
<AnnouncementModalLayout
  skin="premium"
  illustration={'generic_upgrade.svg'}
  title="Start Accepting Online Payments"
  primaryButtonText="Upgrade"
  linkText="Learn More"
  onCloseButtonClick={() => {}}
>
  <Text>
    Upgrade your site with a business and ecommerce premium plan to start
    accepting payments.
  </Text>
</AnnouncementModalLayout>;
```

### Help Button Example
- description: The basic example with a help button shown
- example:
```jsx
<AnnouncementModalLayout
  illustration={'generic_post.svg'}
  title="Import Posts From WordPress"
  primaryButtonText="Start Now"
  linkText="Learn More"
  onCloseButtonClick={() => {}}
  onHelpButtonClick={() => {}}
>
  <Text>
    Your public posts, images and videos will be copied and added to your Wix
    blog. Your site and current posts won't be affected.
  </Text>
</AnnouncementModalLayout>;
```

## Developer Examples

### Mobile usage
- description: On mobile, `AnnouncementModalLayout` should transform to `FullScreenModalLayout` for promotions. For smaller, less intrusive promotions you can use `Drawer` as well _To see the change, toggle 'Enable mobile support' in the top bar of Storybook._
- example:
```jsx
() => {
  const [isLargeOpen, setIsLargeOpen] = React.useState(false);
  const [isSmallOpen, setIsSmallOpen] = React.useState(false);
  const { mobile } = React.useContext(WixDesignSystemContext);

  const title = 'Introducing AI Assistant';
  const subtitle =
    'Boost your productivity with smart suggestions powered by AI. Get instant answers, generate content, and automate repetitive tasks - all without leaving your workflow.';
  const illustration = (
    <Image src="generic_post.svg" width="120" height="120" />
  );

  return (
    <Box padding="20px" gap="SP2">
      <Button onClick={() => setIsLargeOpen(true)}>Large example</Button>
      <Button onClick={() => setIsSmallOpen(true)}>Small example</Button>

      {/* Large — AnnouncementModalLayout on desktop, FullScreenModalLayout on mobile */}
      {mobile ? (
        <Modal
          isOpen={isLargeOpen}
          onRequestClose={() => setIsLargeOpen(false)}
          screen="mobile"
        >
          <FullScreenModalLayout>
            <FullScreenModalLayout.Header
              startNode={
                <CloseButton
                  skin="dark"
                  size="large"
                  onClick={() => setIsLargeOpen(false)}
                />
              }
            >
              <Text size="small" weight="normal">
                {title}
              </Text>
            </FullScreenModalLayout.Header>
            <FullScreenModalLayout.Content padding>
              <Box direction="vertical" gap="SP4" align="center">
                {illustration}
                <Text>{subtitle}</Text>
              </Box>
            </FullScreenModalLayout.Content>
            <FullScreenModalLayout.Footer>
              <Box width="100%" direction="vertical" gap="SP2" align="center">
                <Button onClick={() => setIsLargeOpen(false)} fullWidth>
                  Try it now
                </Button>
                <TextButton onClick={() => {}}>Learn more</TextButton>
              </Box>
            </FullScreenModalLayout.Footer>
          </FullScreenModalLayout>
        </Modal>
      ) : (
        <Modal
          isOpen={isLargeOpen}
          onRequestClose={() => setIsLargeOpen(false)}
          shouldCloseOnOverlayClick
        >
          <AnnouncementModalLayout
            title={title}
            illustration={illustration}
            primaryButtonText="Try it now"
            primaryButtonOnClick={() => setIsLargeOpen(false)}
            linkText="Learn more"
            linkOnClick={() => {}}
            onCloseButtonClick={() => setIsLargeOpen(false)}
          >
            <Text>{subtitle}</Text>
          </AnnouncementModalLayout>
        </Modal>
      )}

      {/* Small — AnnouncementModalLayout on desktop, Drawer on mobile */}
      {mobile ? (
        <Drawer open={isSmallOpen} onClose={() => setIsSmallOpen(false)}>
          <Box direction="vertical" gap="SP4" padding="SP5">
            <Box align="space-between" verticalAlign="middle">
              <Text weight="bold">{title}</Text>
            </Box>
            <Text>{subtitle}</Text>
            <Box direction="vertical" gap="SP2">
              <Button onClick={() => setIsSmallOpen(false)} fullWidth>
                Try it now
              </Button>
              <Box align="center">
                <TextButton onClick={() => {}}>Learn more</TextButton>
              </Box>
            </Box>
          </Box>
        </Drawer>
      ) : (
        <Modal
          isOpen={isSmallOpen}
          onRequestClose={() => setIsSmallOpen(false)}
          shouldCloseOnOverlayClick
        >
          <AnnouncementModalLayout
            title={title}
            primaryButtonText="Try it now"
            primaryButtonOnClick={() => setIsSmallOpen(false)}
            linkText="Learn more"
            linkOnClick={() => {}}
            onCloseButtonClick={() => setIsSmallOpen(false)}
          >
            <Text>{subtitle}</Text>
          </AnnouncementModalLayout>
        </Modal>
      )}
    </Box>
  );
};
```

## Common Use Case Examples

### Promotions
- description: Use `AnnouncementModalLayout` for Premium feature promotion
- example:
```jsx
() => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Box padding="20px">
      <Button onClick={() => setIsOpen(true)}>Open Premium Modal</Button>
      <Modal isOpen={isOpen} onRequestClose={() => setIsOpen(false)}>
        <AnnouncementModalLayout
          skin="premium"
          illustration={'generic_upgrade.svg'}
          title="Unlock Premium Features"
          subtitle="Take your business to the next level with advanced tools
  and insights."
          primaryButtonText="Upgrade Now"
          primaryButtonOnClick={() => setIsOpen(false)}
          secondaryButtonText="Maybe later"
          secondaryButtonOnClick={() => setIsOpen(false)}
          linkText="Learn More"
          linkOnClick={() => setIsOpen(false)}
          onCloseButtonClick={() => setIsOpen(false)}
        />
      </Modal>
    </Box>
  );
};
```