Product display

This is a landing block for a restaurant website. It features a title, a short descriptive text, a 'Book a table' button, and a link to the restaurant's menu.

<Flexbox p="lg" flexDirection="column" alignItems="center" justifyContent="center">
  <Text fontWeight="Bold" fontSize="3xl" textAlign="center" mb="md">
    {data.product.title}
  </Text>
  <Box width={250}>
    <LinearGradient 
      colors={['#FF6A00', '#EE0979']} 
      start={{ x: 0, y: 0 }} 
      end={{ x: 1, y: 1 }}
      style.borderRadius={500}
      style.padding={10}
    >
      <Image 
        src={data.product.images[0].src} 
        width="100%" 
        aspectRatio={1}
        resizeMode="cover" 
        borderRadius={500}
        boxShadow="md"
      />
    </LinearGradient>
  </Box>
  <Text 
    fontSize="xl" 
    textAlign="center" 
    color="gray-900"
    mt="md"
    mx="lg"
    numberOfLines={2}
  >
    {data.product.description}
  </Text>
  
  <Text color="primary" fontWeight="Bold" fontSize="3xl" mt="2xs">
    <Money money={data.product.variants[0].price} />
  </Text>

  <Button  icon="material-community-icons:cart-plus"
    variant="outlined" 
    size="lg" 
    action={data.product.actions.addToCart} 
    mt="2xs"
  >
    Add to Cart
  </Button>
</Flexbox>