<Flexbox flexDirection="column" alignItems="center" justifyContent="center"
  bg="primary-50"       
  p="md"                      
  borderRadius={10}
  style.aspectRatio={16/12}
>
  {/* Top Row: Star Rating and App Logo */}
  <Flexbox justifyContent="space-between" alignItems="center">
    {/* Star rating (5 stars) */}
    <Flexbox alignItems="center">
      <Icon icon="star" color="#FFC107" /> 
      <Icon icon="star" color="#FFC107" />
      <Icon icon="star" color="#FFC107" />
      <Icon icon="star" color="#FFC107" />
      <Icon icon="star" color="#FFC107" /> 
    </Flexbox>
  </Flexbox>

  {/* Testimonial text */}
  <Text mt="md" fontSize="2xl" fontWeight="bold" color="gray-950" textAlign="center">
    {data.testimonial.title}
  </Text>
  <Flexbox>
    <Icon size={16} color="gray-300" icon="fontisto:quote-a-right" />
    <Text mx="2xs" mt={3} mb={3} color="gray-900" fontStyle="italic" fontSize="lg" textAlign="center">
      {data.testimonial.content}
    </Text>
    <Icon size={16} color="gray-300" icon="fontisto:quote-a-left" />
  </Flexbox>

  {/* Bottom Row: User Avatar and Name */}
  <Flexbox justifyContent="center" alignItems="center" mt="md">
    <Image 
      src={data.testimonial.user.image || `https://ui-avatars.com/api/?size=512&name=${data.testimonial.user.name}`}
      size={40}
      borderRadius={50}
    />
    <Box ml="sm">
        <Text 
        fontWeight="Bold"          
        color="primary-900"     
        >
        {data.testimonial.user.name}
        </Text>
        <Text >
        {data.testimonial.user.description}
        </Text>
    </Box>
  </Flexbox>
</Box>

{
  "testimonials": [
    {
      "id": "1",
      "title": "That was AWESOME",
      "content": "This is a collapsible block, which can expand and collapse.",
      "user": {
        "name": "John Doe",
        "description": "CEO. ABC inc"
      }
    },
    {
      "id": "2",
      "title": "What is that?",
      "content": "This is a collapsible block, which can expand and collapse.",
      "user": {
        "name": "John Doe",
        "description": "CEO. ABC inc"
      }
    },
    {
      "id": "3",
      "title": "What are the accepted payment methods?",
      "content": "This is a collapsible block, which can expand and collapse.",
      "user": {
        "name": "John Doe",
        "description": "CEO. ABC inc"
      }
    }
  ]
}