<template>
  <section class="py-24 px-4 text-center">
    <h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">
      {{ main.title }}
    </h2>
    <p class="text-gray-600">{{ main.description }}</p>
    <div class="flex flex-wrap items-center -mx-8 mt-12 mb-2">
      <div
        class="lg:w-1/3 px-6 mb-2"
        v-for="(section, index) in sections"
        :key="index"
      >
        <g-image
          class="mx-auto mb-8"
          :src="section.svg.src"
          :alt="section.title"
        />
        <h3 class="text-2xl mb-4 font-semibold font-heading">
          <!-- <span
            class="inline-flex items-center justify-center h-12 w-12 mr-2 border rounded-full"
            >{{ index + 1 }}</span
          > -->
          <span>{{ section.title }}</span>
        </h3>
        <div class="text-gray-700" v-html="section.content"></div>
      </div>
    </div>
    <div>
      <!-- <a
        v-if="main.button"
        class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 rounded shadow rounded-full"
        :href="main.link"
        >{{ main.button }}</a
      > -->

       <a
              v-if="main.link.includes('http')"
              target="_blank"
              :href="main.link"
              class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 rounded shadow rounded-full"
              >{{ main.button }}</a
            >
            <g-link
              v-else
              :href="main.link"
              class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 rounded shadow rounded-full"
              >{{ main.button }}</g-link
            >
    </div>
  </section>
</template>

<script>
export default {
  props: ["main", "sections"],
};
</script>