<Stack style={{ width: 300, height: 200 }}>
  <Positioned top={10} left={10}>
    <span>Top Left</span>
  </Positioned>
  
  <Positioned bottom={10} right={10}>
    <span>Bottom Right</span>
  </Positioned>
</Stack>

<Stack style={{ width: 400, height: 300 }}>
  {/* Top-left */}
  <Positioned top={20} left={20}>
    <span>Top Left</span>
  </Positioned>
  
  {/* Top-right */}
  <Positioned top={20} right={20}>
    <span>Top Right</span>
  </Positioned>
  
  {/* Bottom-left */}
  <Positioned bottom={20} left={20}>
    <span>Bottom Left</span>
  </Positioned>
  
  {/* Bottom-right */}
  <Positioned bottom={20} right={20}>
    <span>Bottom Right</span>
  </Positioned>
</Stack>

<Stack style={{ width: 600, height: 400 }}>
  {/* Full width at top */}
  <Positioned top={0} left={0} right={0}>
    <Container
      height={60}
      decoration={{ color: '#3b82f6' }}
    />
  </Positioned>
  
  {/* Full width at bottom */}
  <Positioned bottom={0} left={0} right={0}>
    <Container
      height={60}
      decoration={{ color: '#10b981' }}
    />
  </Positioned>
</Stack>

<Stack style={{ width: 500, height: 350 }}>
  <Positioned
    top="50%"
    left="50%"
    width={200}
    height={100}
    style={{ transform: 'translate(-50%, -50%)' }}
  >
    <Container 
      decoration={{ 
        color: '#eb1660',
        borderRadius: 8 
      }}
    >
      <Centre>Centered Box</Centre>
    </Container>
  </Positioned>
</Stack>

<Stack style={{ width: '100%', height: 400 }}>
  {/* 80% width footer */}
  <Positioned bottom={0} left="10%" right="10%">
    <Container
      height={80}
      decoration={{ color: 'rgba(0, 0, 0, 0.8)' }}
    />
  </Positioned>
</Stack>

<Stack style={{ width: 800, height: 600 }}>
  <img src="/eg-bg.jpg" alt="Hero" />
  
  <Positioned top={0} left={0} right={0}>
    <Container
      paddingVertical={24}
      paddingHorizontal={32}
      decoration={{
        gradient: {
          colors: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.8)'],
          begin: 'topCenter',
          end: 'bottomCenter',
        },
      }}
    >
      <Column spacing={8}>
        <h2 style={{ color: 'white', margin: 0 }}>Title</h2>
        <p style={{ color: 'rgba(255, 255, 255, 0.9)' }}>Description</p>
      </Column>
    </Container>
  </Positioned>
</Stack>

<Stack style={{ width: 300, height: 200 }}>
  <Container
    padding={200}
    decoration={{
      image: { image: '/eg-bg.jpg', fit: 'cover' }
    }}
  />
  
  <Positioned top={12} right={12}>
    <Container
      paddingHorizontal={12}
      paddingVertical={6}
      decoration={{
        color: '#ef4444',
        borderRadius: 6,
      }}
    >
      <span style={{ color: 'white', fontWeight: 700, fontSize: '0.875rem' }}>
        NEW
      </span>
    </Container>
  </Positioned>
</Stack>

<Stack style={{ width: '100%', minHeight: '100vh' }}>
  <div>Your page content</div>
  
  <Positioned bottom={24} right={24}>
    <Container
      width={56}
      height={56}
      decoration={{
        color: '#eb1660',
        shape: BoxShape.circle,
        boxShadow: [{
          color: 'rgba(235, 22, 96, 0.3)',
          offset: { dx: 0, dy: 8 },
          blurRadius: 16,
        }],
      }}
      style={{ cursor: 'pointer' }}
    >
      <Centre>
        <span style={{ color: 'white', fontSize: '2em' }}>+</span>
      </Centre>
    </Container>
  </Positioned>
</Stack>

<Stack style={{ width: 400, height: 300 }}>
  <Container decoration={{ color: '#f3f4f6' }}>
    {/* Modal content */}
  </Container>
  
  <Positioned top={12} right={12}>
    <Container
      width={32}
      height={32}
      decoration={{ shape: BoxShape.circle }}
      style={{ cursor: 'pointer' }}
    >
      <Centre>✕</Centre>
    </Container>
  </Positioned>
</Stack>