Container

import { Container, Box, Text } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Box backgroundColor="2" p={4}>
      <Container>
        <Box p={4} backgroundColor="1" borderRadius="lg">
          <Text as="h2" size="xl" weight="bold">
            Centered Content
          </Text>
          <Box marginBottom={2} />
          <Text color="secondary">
            This content is wrapped in a Container component, which centers it 
            and constrains its maximum width. The container also provides 
            responsive padding on the sides.
          </Text>
        </Box>
      </Container>
    </Box>
  );
}

import { Container, Box, Text, Flex } from '@beauginbey/vanilla-components';

export default function App() {
  const sizes = [
    { size: '1', label: 'Size 1', maxWidth: '640px' },
    { size: '2', label: 'Size 2', maxWidth: '768px' },
    { size: '3', label: 'Size 3', maxWidth: '1024px' },
    { size: '4', label: 'Size 4', maxWidth: '1280px' },
  ];

  return (
    <Flex direction="column" gap={4}>
      {sizes.map(({ size, label, maxWidth }) => (
        <Box key={size} backgroundColor="2" p={4}>
          <Container size={size}>
            <Box p={4} backgroundColor="1" borderRadius="lg">
              <Text weight="semibold">
                {label} ({maxWidth})
              </Text>
            </Box>
          </Container>
        </Box>
      ))}
    </Flex>
  );
}

import { Container, Box, Text, Flex } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Flex direction="column" gap={4}>
      <Box backgroundColor="2" p={4}>
        <Container size="2" align="left">
          <Box p={4} backgroundColor="1" borderRadius="lg">
            <Text weight="semibold">Left Aligned</Text>
          </Box>
        </Container>
      </Box>
      
      <Box backgroundColor="2" p={4}>
        <Container size="2" align="center">
          <Box p={4} backgroundColor="1" borderRadius="lg">
            <Text weight="semibold">Center Aligned (default)</Text>
          </Box>
        </Container>
      </Box>
      
      <Box backgroundColor="2" p={4}>
        <Container size="2" align="right">
          <Box p={4} backgroundColor="1" borderRadius="lg">
            <Text weight="semibold">Right Aligned</Text>
          </Box>
        </Container>
      </Box>
    </Flex>
  );
}

import { Container, Box, Text, Flex, Button } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Container size="2">
      {/* Hero Section */}
      <Box py={8}>
        <Text as="h1" size="4xl" weight="bold" align="center">
          Welcome to Our App
        </Text>
        <Box marginBottom={4} />
        <Text size="lg" color="secondary" align="center">
          Build amazing experiences with our design system
        </Text>
        <Box marginBottom={6} />
        <Flex gap={3} justify="center">
          <Button variant="solid">Get Started</Button>
          <Button variant="outline">Learn More</Button>
        </Flex>
      </Box>

      {/* Content Section */}
      <Box py={8}>
        <Text as="h2" size="2xl" weight="bold">
          Features
        </Text>
        <Box marginBottom={4} />
        <Flex direction="column" gap={4}>
          <Box p={4} backgroundColor="2" borderRadius="lg">
            <Text weight="semibold">Responsive Design</Text>
            <Box marginBottom={2} />
            <Text size="sm" color="secondary">
              Automatically adjusts to different screen sizes
            </Text>
          </Box>
          <Box p={4} backgroundColor="2" borderRadius="lg">
            <Text weight="semibold">Consistent Spacing</Text>
            <Box marginBottom={2} />
            <Text size="sm" color="secondary">
              Maintains proper padding across all breakpoints
            </Text>
          </Box>
        </Flex>
      </Box>
    </Container>
  );
}

import { Container, Box, Text, Flex } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Box backgroundColor="2" py={6}>
      <Container size="4">
        <Text as="h1" size="3xl" weight="bold" align="center">
          Dashboard
        </Text>
        <Box marginBottom={6} />
        
        <Flex gap={4} direction={{ mobile: 'column', tablet: 'row' }}>
          <Box>
            <Container size="1">
              <Box p={4} backgroundColor="1" borderRadius="lg">
                <Text weight="semibold">Sidebar</Text>
                <Box marginBottom={2} />
                <Text size="sm" color="secondary">
                  Nested container with smaller size
                </Text>
              </Box>
            </Container>
          </Box>
          
          <Box>
            <Container size="2">
              <Box p={4} backgroundColor="1" borderRadius="lg">
                <Text weight="semibold">Main Content</Text>
                <Box marginBottom={2} />
                <Text size="sm" color="secondary">
                  Another nested container for the main content area
                </Text>
              </Box>
            </Container>
          </Box>
        </Flex>
      </Container>
    </Box>
  );
}