Section

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

export default function App() {
  return (
    <div>
      <Section>
        <Container>
          <Text as="h2" size="2xl" weight="bold">
            About Us
          </Text>
          <Box marginBottom={3} />
          <Text color="secondary">
            This is a section with default padding. Sections help organize 
            content into meaningful groups while maintaining consistent spacing.
          </Text>
        </Container>
      </Section>

      <Section backgroundColor="2">
        <Container>
          <Text as="h2" size="2xl" weight="bold">
            Our Services
          </Text>
          <Box marginBottom={3} />
          <Text color="secondary">
            Sections can have different background colors to create visual separation.
          </Text>
        </Container>
      </Section>
    </div>
  );
}

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

export default function App() {
  const sizes = [
    { size: '1', label: 'Small' },
    { size: '2', label: 'Medium' },
    { size: '3', label: 'Large' },
    { size: '4', label: 'Extra Large' }
  ];

  return (
    <Box>
      {sizes.map((item, index) => (
        <Section 
          key={item.size} 
          size={item.size}
          backgroundColor={index % 2 === 0 ? 1 : 2}
        >
          <Container>
            <Text weight="semibold">
              {item.label} Section (size {item.size})
            </Text>
            <Text size="sm" color="secondary">
              This section has size {item.size} padding
            </Text>
          </Container>
        </Section>
      ))}
    </Box>
  );
}

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

export default function App() {
  return (
    <div>
      {/* Hero Section */}
      <Section size="4" backgroundColor="2">
        <Container>
          <Box>
            <Text as="h1" size="4xl" weight="bold" align="center">
              Build Better Products
            </Text>
            <Box marginBottom={4} />
            <Text size="lg" color="secondary" align="center">
              Create amazing user experiences with our comprehensive design system
            </Text>
            <Box marginBottom={6} />
            <Flex gap={3} justify="center">
              <Button variant="solid" size="lg">Get Started</Button>
              <Button variant="outline" size="lg">View Examples</Button>
            </Flex>
          </Box>
        </Container>
      </Section>

      {/* Features Section */}
      <Section>
        <Container>
          <Text as="h2" size="3xl" weight="bold" align="center">
            Key Features
          </Text>
          <Box mb={6} />
          <Grid columns={{ mobile: '1', tablet: '3' }} gap={4}>
            <Box p={6} backgroundColor="2" borderRadius="lg">
              <Text size="lg" weight="semibold" align="center">Fast</Text>
              <Box marginBottom={2} />
              <Text size="sm" color="secondary" align="center">
                Lightning-fast performance with zero runtime CSS
              </Text>
            </Box>
            <Box p={6} backgroundColor="2" borderRadius="lg">
              <Text size="lg" weight="semibold" align="center">Accessible</Text>
              <Box marginBottom={2} />
              <Text size="sm" color="secondary" align="center">
                Built with accessibility in mind from the ground up
              </Text>
            </Box>
            <Box p={6} backgroundColor="2" borderRadius="lg">
              <Text size="lg" weight="semibold" align="center">Responsive</Text>
              <Box marginBottom={2} />
              <Text size="sm" color="secondary" align="center">
                Mobile-first design that works on any device
              </Text>
            </Box>
          </Grid>
        </Container>
      </Section>

      {/* CTA Section */}
      <Section size="3" backgroundColor="9" style={{ color: 'white' }}>
        <Container>
          <Box>
            <Text as="h2" size="3xl" weight="bold" align="center">
              Ready to Get Started?
            </Text>
            <Box marginBottom={4} />
            <Text size="lg" align="center" style={{ opacity: 0.9 }}>
              Join thousands of developers building with our design system
            </Text>
            <Box marginBottom={6} />
            <Flex justify="center">
              <Button variant="solid" size="lg" style={{ backgroundColor: 'white', color: 'var(--gray-12)' }}>
                Start Building
              </Button>
            </Flex>
          </Box>
        </Container>
      </Section>
    </div>
  );
}

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

export default function App() {
  const sections = [
    { title: 'Introduction', content: 'Start with a brief overview of your topic.' },
    { title: 'Main Points', content: 'Discuss the key points in detail.' },
    { title: 'Examples', content: 'Provide concrete examples to illustrate your points.' },
    { title: 'Conclusion', content: 'Summarize and provide next steps.' },
  ];

  return (
    <Box>
      {sections.map((section, index) => (
        <Section 
          key={section.title}
          backgroundColor={index % 2 === 0 ? 1 : 2}
        >
          <Container size="2">
            <Text as="h2" size="2xl" weight="bold">
              {section.title}
            </Text>
            <Box marginBottom={3} />
            <Text color="secondary">
              {section.content}
            </Text>
          </Container>
        </Section>
      ))}
    </Box>
  );
}

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

export default function App() {
  return (
    <Box>
      <Section py={12} backgroundColor="2">
        <Container>
          <Text as="h2" size="3xl" weight="bold" align="center">
            Custom Vertical Padding
          </Text>
          <Box marginBottom={3} />
          <Text color="secondary" align="center">
            This section has extra vertical padding (py={12})
          </Text>
        </Container>
      </Section>

      <Section px={8} py={6}>
        <Container>
          <Text as="h2" size="2xl" weight="bold">
            Custom Horizontal Padding
          </Text>
          <Box marginBottom={3} />
          <Text color="secondary">
            This section has custom horizontal and vertical padding
          </Text>
        </Container>
      </Section>
    </Box>
  );
}

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

export default function App() {
  return (
    <Box>
      <Section 
        size={{ mobile: '1', tablet: '2', desktop: '4' }}
        backgroundColor="2"
      >
        <Container>
          <Text as="h2" size="2xl" weight="bold">
            Responsive Section
          </Text>
          <Box marginBottom={3} />
          <Text color="secondary">
            This section has different padding on mobile (small), 
            tablet (medium), and desktop (extra large).
          </Text>
        </Container>
      </Section>
    </Box>
  );
}