<template>
	<section class="relative pt-16 pb-32 flex content-center items-center justify-center">
		<div class="container mx-auto px-1 lg:px-4">
			<div class="flex flex-wrap justify-end text-center">
				<Breadcrumbs :currentPage="currentRouteName" />
			</div>
          	<div class="flex flex-wrap justify-center text-center mb-12 pt-8">
				<div class="w-full lg:w-6/12 px-4">
					<h2 class="text-4xl font-semibold">ABOUT US</h2>
					<p class="text-lg leading-relaxed m-4 text-medium-grey">
						intimacy
					</p>
				</div>
			</div>
			<div class="flex flex-wrap items-center mt-16">
				<div class="w-full md:w-5/12 px-4 mr-auto ml-auto">
					<div class="text-medium-grey p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-light-grey">
						<i class="fas fa-user-friends text-xl"></i>
					</div>
					<h3 class="text-3xl mb-2 font-semibold leading-normal">
						Kang Son, L.Ac.
					</h3>
					<p class="text-lg font-light leading-relaxed mt-4 mb-4 text-medium-grey">
						<ol class="relative border-l border-light-grey dark:border-medium-grey">                  
							<li class="mb-10 ml-4">
								<div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
								<time class="mb-1 text-sm font-normal leading-none text-medium-grey dark:text-gray-500">1996 ~ 2002</time>
								<!-- <h3 class="text-lg font-semibold text-dark-grey dark:text-white">Application UI code in Tailwind CSS</h3> -->
								<p class="text-base font-normal text-gray-500 dark:text-medium-grey">Changwon National University in South Korea.</p>
								<p class="mb-4 text-base font-normal text-gray-500 dark:text-medium-grey">Bachelor of Oriental Philosophy.</p>
								<!-- <a href="#" class="inline-flex items-center py-2 px-4 text-sm font-medium text-dark-grey bg-white rounded-lg border border-light-grey hover:bg-light-grey hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-dark-grey dark:text-medium-grey dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700">Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></a> -->
							</li>
							<li class="mb-10 ml-4">
								<div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
								<time class="mb-1 text-sm font-normal leading-none text-medium-grey dark:text-gray-500">2003 ~ 2007</time>
								<!-- <h3 class="text-lg font-semibold text-dark-grey dark:text-white">Marketing UI design in Figma</h3> -->
								<p class="text-base font-normal text-gray-500 dark:text-medium-grey">Dongguk University Los Angeles (DULA).</p>
								<p class="text-base font-normal text-gray-500 dark:text-medium-grey">The Master of Science in Oriental Medicine Degree.</p>
							</li>
							<li class="ml-4">
								<div class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
								<time class="mb-1 text-sm font-normal leading-none text-medium-grey dark:text-gray-500">March 2008</time>
								<h3 class="text-lg font-semibold text-dark-grey dark:text-white">Licenses : Ac 12370</h3>
								<p class="text-base font-normal text-gray-500 dark:text-medium-grey">Licensed as an Acupuncturist in the State of California.</p>
							</li>
						</ol>
					</p>
					<!-- <p class="text-lg font-light leading-relaxed mt-0 mb-4 text-medium-grey">
						The kit comes with three pre-built pages to help you get started
						faster. You can change the text and images and you're good to
						go. Just make sure you enable them first via JavaScript.
					</p>
					<a href="https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/presentation" class="font-bold text-gray-800 mt-8">Check Tailwind Starter Kit!</a> -->
				</div>
				<div class="w-full md:w-5/12 px-4 mr-auto ml-auto">
					<div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-pink-medium">
						<img :src="require(`@/assets/img/landing/aboutus/image1.png`)" class="md:w-32 lg:w-48 rounded-t-lg"/>
						<blockquote class="relative p-8 mb-4 bg-pink-medium">
							<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height: 95px; top: -94px;">
								<polygon points="-30,95 583,95 583,65" class="text-pink-medium fill-current"></polygon>
							</svg>
							<h4 class="text-xl font-bold text-white">Top Notch Services</h4>
							<p class="text-md font-light mt-2 text-white">
								KANG SON is the practitioner of MEDIHAND, a Traditional Oriental Medicine clinic. He started his practice in 2006. MEDIHAND Clinic is a general TOM practice employing the methods of Acupuncture, Cosmetic Acupuncture, Weight loss, herbal medicine, western nutritional supplements and dietary recommendations As a primary health care practitioner, Kang son provides medical services to many patients spanning a wide variety of conditions. Additionally, his specialty is in Chronic Cancer Pain Management and he also treats patients with an ancient yet precise form of Medical Astrology for which he received special training.
							</p>
						</blockquote>
					</div>
				</div>
			</div>
		</div>
	</section>

	<section class="pt-20 pb-32">
        <div class="container mx-auto px-4">
			<div class="flex flex-wrap justify-center mb-24">
				<div class="w-full lg:w-10/12 px-4">
					<h2 class="text-4xl font-semibold text-center">ACCOMPLISHMENTS</h2>
					<p class="text-lg leading-relaxed m-4 text-medium-grey">
						<div class="p-5 mb-4 bg-gray-50 rounded-lg border border-light-grey dark:bg-dark-grey dark:border-medium-grey">
							<time class="text-lg font-semibold text-dark-grey dark:text-white">2009 ~ Present</time>
							<ol class="mt-3 divide-y divider-light-grey dark:divider-medium-grey">
								<li>
									<div class="p-3 text-medium-grey dark:text-medium-grey">
										<div class="text-base font-normal">
											<span class="font-medium text-dark-grey dark:text-white">Private practice, Acupuncturist and Herbalist MEDIHAND ACUPUNCTURE, INC. 9519 Telegraph Rd., # A Pico Rivera CA 90660</span>
										</div>
										<!-- <div class="text-sm font-normal">"I wanted to share a webinar zeroheight."</div> -->
										<!-- <span class="inline-flex items-center text-xs font-normal text-gray-500 dark:text-medium-grey">
											<svg aria-hidden="true" class="mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clip-rule="evenodd"></path></svg>
											Public
										</span>  -->
									</div>
								</li>
							</ol>
						</div>
						<div class="p-5 bg-gray-50 rounded-lg border border-light-grey dark:bg-dark-grey dark:border-medium-grey">
							<time class="text-lg font-semibold text-dark-grey dark:text-white">2013</time>
							<ol class="mt-3 divide-y divider-light-grey dark:divider-medium-grey">
								<li>
									<div class="p-3 text-medium-grey dark:text-medium-grey">
										<div class="text-base font-normal">
											<span class="font-medium text-dark-grey dark:text-white">Navolato in the Sinaloa of Mexico</span>
										</div>
									</div>
								</li>
								<li>
									<div class="mb-4 p-3 text-medium-grey dark:text-medium-grey">
										<div class="text-base font-normal"><span class="font-medium text-dark-grey dark:text-white">Medical Acupuncture Services in Mexico</span></div>
									</div>
								</li>
							</ol>
							<div class="container mx-auto px-4">
								<div class="items-center flex flex-wrap">
									<div class="w-full ml-auto mr-auto px-4">
										<img alt="..." class="max-w-full rounded-lg shadow-lg" :src="require(`@/assets/img/landing/aboutus/mexico.png`)"/>
									</div>
								</div>
							</div>
						</div>
						<div class="p-5 mb-4 bg-gray-50 rounded-lg border border-light-grey dark:bg-dark-grey dark:border-medium-grey">
							<time class="text-lg font-semibold text-dark-grey dark:text-white">2008</time>
							<ol class="mt-3 divide-y divider-light-grey dark:divider-medium-grey">
								<li>
									<div class="p-3 text-medium-grey dark:text-medium-grey">
										<div class="text-base font-normal"><span class="font-medium text-dark-grey dark:text-white">Private practice, Acupuncturist and Herbalist St. Theresa Acupuncture Clinic Group, Norwalk Branch 13821 San Antonio Ave. Norwalk, CA 90650</span></div>
									</div>
								</li>
							</ol>
						</div>
						<div class="p-5 bg-gray-50 rounded-lg border border-light-grey dark:bg-dark-grey dark:border-medium-grey">
							<time class="text-lg font-semibold text-dark-grey dark:text-white">2008.07.14 ~ 07.23</time>
							<ol class="mt-3 divide-y divider-light-grey dark:divider-medium-grey">
								<li>
									<div class="mb-4 p-3 text-medium-grey dark:text-medium-grey">
										<div class="text-base font-normal"><span class="font-medium text-dark-grey dark:text-white">2008 LA Festival of World Taekwondo Team Medical Services.</span></div>
									</div>
								</li>
							</ol>
							<div class="container mx-auto px-4">
								<div class="items-center flex flex-wrap">
									<div class="w-full ml-auto mr-auto px-4">
										<img alt="..." class="max-w-full rounded-lg shadow-lg" :src="require(`@/assets/img/landing/aboutus/appreciation2.jpg`)"/>
									</div>
								</div>
							</div>
						</div>
						<div class="p-5 mb-4 bg-gray-50 rounded-lg border border-light-grey dark:bg-dark-grey dark:border-medium-grey">
							<time class="text-lg font-semibold text-dark-grey dark:text-white">2007</time>
							<ol class="mt-3 divide-y divider-light-grey dark:divider-medium-grey">
								<li>
									<div class="p-3 text-medium-grey dark:text-medium-grey">
										<div class="text-base font-normal"><span class="font-medium text-dark-grey dark:text-white">Best Intern Award, Dongguk University Los Angeles (DULA) 2007 Summer Quarter.</span></div>
									</div>
								</li>
							</ol>
						</div>
						<div class="p-5 mb-4 bg-gray-50 rounded-lg border border-light-grey dark:bg-dark-grey dark:border-medium-grey">
							<time class="text-lg font-semibold text-dark-grey dark:text-white">2007 ~ 2012</time>
							<ol class="mt-3 divide-y divider-light-grey dark:divider-medium-grey">
								<li>
									<div class="p-3 text-medium-grey dark:text-medium-grey">
										<div class="text-base font-normal"><span class="font-medium text-dark-grey dark:text-white">Low-income (Hispanic community) Medical Acupuncture Services At Downey, Norwalk.</span></div>
									</div>
								</li>
							</ol>
						</div>
					</p>
				</div>
        	</div>
    	</div>
	</section>
</template>

<script>
import UserService from "@/services/user.service";
import Breadcrumbs from "@/components/utils/Breadcrumbs.vue";
import AOS from "aos";
import { mapState } from "vuex";

export default {
  name: "AboutUs",
  data() {
    return {
	  content: "",
    };
  },
//   computed: {
//     ...mapState(["isRTL"]),
//   },
  mounted() {
	AOS.init();
	this.$nextTick(function () {
		window.scrollTo(0, 0);
		// this.$refs.target?.scrollIntoView();
	});
    UserService.getPublicContent().then(
      (response) => {
        this.content = response.data;
      },
      (error) => {
        this.content =
          (error.response &&
            error.response.data &&
            error.response.data.message) ||
          error.message ||
          error.toString();
      }
	);
  },
  methods: {
  },
  components: {
	Breadcrumbs
  },
  computed: {
    ...mapState(["isRTL", "isAbsolute"]),

    currentRouteName() {
      	return this.$route.path.substring(1);
    },
  },

};
</script>
