<LinearGradient colors={["#ffff0022", "#ffff0022", "#0000ff00"]} start={{x:0, y:0}} end={{x:0, y:1}} >
    <Flexbox flexDirection="column" alignItems="center" p={20} gap="md">
      {/* Product Image */}
      <Image
        width={300}
        aspectRatio={1}
        src={data.product.images[0].src}
        borderRadius={10}
        resizeMode="cover"
      />
      
      {/* Product Title */}
      <Text
        textAlign="center"
        fontSize={24}
        fontWeight="bold"
        color="primary-900"
      >
        {data.product.title}
      </Text>
      
      {/* Product Price */}
      <Text
        textAlign="center"
        fontWeight="bold"
        fontSize={20}
        color="primary-700"
      >
        <Money money={data.product.variants[0].price} />
      </Text>
      
      {/* Product Description */}
      <Text
        textAlign="center"
        fontSize={16}
        color="gray-900"
      >
        {data.product.description}
      </Text>
      
      {/* CTA Buttons */}
      <Flexbox flexDirection="row" justifyContent="center" gap={10}>
        <Button icon="evilicons:cart" variant="outlined" size="lg" action={data.product.actions.addToCart}>
          Add to cart
        </Button>
      </Flexbox>
      
    </Flexbox>
</LinearGradient>

{
  "title": "Countdown to 2026",
  "subtitle": "A colorful, animated countdown — numbers slide in from the bottom as they update.",
  "targetDate": "2026-01-01T00:00:00",
  "showLabels": true
}