<template>
	<section class="relative">
        <div class="container mx-auto px-4">
          <div class="items-center flex flex-wrap">
            <div class="w-full md:w-4/12 ml-auto mr-auto px-4">
              <img alt="..." class="max-w-full rounded-lg shadow-lg" :src="require(`@/assets/img/landing/clinic/kids.jpg`)"/>
            </div>
            <div class="w-full md:w-7/12 ml-auto mr-auto px-4">
              <div class="md:pr-12">
                <div class="text-pink-medium p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full">
                  <i class="fas fa-rocket text-xl"></i>
                </div>
                <h3 class="text-xl font-semibold">Babies & Kids get Acupuncture for:</h3>
                <ul class="list-none mt-6">
                  <li class="py-2" v-for="item in treatments" :key="item.id">
                    <div class="flex items-center">
                      <div><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-medium mr-3"><i :class="item.fontawesome"></i></span></div>
                      <div><h4 class="text-dark-grey">{{ item.name }}</h4></div>
                    </div>
                  </li>
                </ul>
				        <img alt="..." class="max-w-full rounded-lg shadow-lg" :src="require(`@/assets/img/landing/clinic/wart1.jpg`)"/>
              </div>
            </div>
          </div>
        </div>
      </section>
</template>

<script>
import AOS from "aos";

export default {
  name: "BabiesKidsAcupuncture",
  data() {
    return {
		treatments: [
			{ id: '0', name: 'HEADACHE', fontawesome: 'fas fa-fingerprint'},
			{ id: '1', name: 'COLIC', fontawesome: 'fab fa-html5' },
			{ id: '2', name: 'COUGH', fontawesome: 'far fa-paper-plane' },
			{ id: '3', name: 'ECZEMA', fontawesome: 'fas fa-fingerprint' },
			{ id: '4', name: 'WARTS', fontawesome: 'fab fa-html5' },
			{ id: '5', name: 'STOP PAIN', fontawesome: 'far fa-paper-plane' },
			{ id: '6', name: 'DIARRHEA', fontawesome: 'fas fa-fingerprint' },

			{ id: '7', name: 'COSTIPATION', fontawesome: 'fab fa-html5' },
			{ id: '8', name: 'EAR INFECTION', fontawesome: 'far fa-paper-plane' },
			{ id: '9', name: 'FREQUNET COLDS', fontawesome: 'far fa-paper-plane' },
			{ id: '10', name: 'BOOSTS IMMUNITY', fontawesome: 'far fa-paper-plane' },
			{ id: '11', name: 'ALLERGIES AND ASTHMA', fontawesome: 'far fa-paper-plane' },
			{ id: '12', name: 'REDUCES STRESS AND ANXIETY', fontawesome: 'far fa-paper-plane' },
			{ id: '13', name: 'PROMOTES HEALTHY DIGESTIVE FUNCTION', fontawesome: 'far fa-paper-plane' },
		],
    }
  },
  mounted() {
	AOS.init();
  },
  components: {
  },
};
</script>
