opnform/resources/js/components/pages/welcome/AiFeature.vue

<template>
    <div class="py-8">
      <section>
        <div class="mx-auto max-w-7xl isolate sm:px-6 lg:px-8">
          <div
            class="relative px-4 pt-16 overflow-hidden bg-blue-100 ring-blue-100 ring-1 sm:shadow-lg isolate sm:rounded-2xl sm:px-16 md:pt-20 lg:flex lg:gap-x-20 lg:px-16 lg:pt-0 sm:shadow-gray-600/10">
            <div class="absolute inset-0">
              <img class="object-cover object-top w-full h-full" :src="asset('img/pages/ai_form_builder/background-pattern-ai.svg')" alt="">
            </div>

            <div class="relative max-w-md mx-auto text-center xl:max-w-lg lg:mx-0 lg:flex-auto lg:py-16 lg:text-left">
              <span
                class="bg-white text-xs font-semibold inline-flex items-center shadow-sm ring-blue-200 ring-1 text-blue-600 px-2.5 py-1.5 rounded-full">
                <svg aria-hidden="true" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                  fill="currentColor">
                  <path fill-rule="evenodd"
                    d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
                    clip-rule="evenodd" />
                </svg>
                Introducing OpnForm AI
              </span>

              <h2 class="mt-6 text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl lg:text-4xl">
                Say goodbye to tedious form building with OpnForm's new <span
                  class="text-transparent bg-clip-text bg-gradient-to-r lg:block from-blue-600 to-blue-300">AI-powered
                  feature!</span>
              </h2>
              <p class="mt-4 text-base font-medium leading-7 text-gray-500 sm:text-lg sm:leading-8">
                Easily generate a fully working form in seconds with just a simple description.
              </p>

              <ul
                class="flex flex-wrap items-center justify-center gap-4 mt-6 text-sm font-medium text-gray-900 lg:justify-start sm:mt-8">
                <li class="flex items-center gap-2">
                  <svg aria-hidden="true" class="w-5 h-5 text-gray-400 shrink-0" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd"
                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                      clip-rule="evenodd" />
                  </svg>
                  Create form in minutes
                </li>

                <li class="flex items-center gap-2">
                  <svg aria-hidden="true" class="w-5 h-5 text-gray-400 shrink-0" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd"
                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                      clip-rule="evenodd" />
                  </svg>
                  Customizations
                </li>

                <li class="flex items-center gap-2">
                  <svg aria-hidden="true" class="w-5 h-5 text-gray-400 shrink-0" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd"
                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                      clip-rule="evenodd" />
                  </svg>
                  No-coding required
                </li>
              </ul>

              <div class="mt-6 sm:mt-8 flex">
                <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'forms.create.guest' }" :arrow="true">
                  Get started for free
                </v-button>
                <v-button v-else class="mr-1" :to="{ name: 'forms.create' }" :arrow="true">
                  Get started for free
                </v-button>
              </div>
            </div>

            <div
              class="relative px-6 mx-auto mt-8 lg:px-0 sm:mt-12 lg:bottom-0 lg:right-0 lg:absolute lg:max-w-md xl:max-w-none">
              <img class="rounded-t-2xl ring-1 ring-blue-100 lg:rounded-tr-none"
              :src="asset('img/pages/ai_form_builder/ai-feature-illustration.svg')" alt="App screenshot">
            </div>
          </div>
        </div>
      </section>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
    props: {},
    data: () => ({}),
    computed: {
      ...mapGetters({
        authenticated: 'auth/check'
      }),
    },
    methods: {}
}
</script>