529 lines
27 KiB
Vue
529 lines
27 KiB
Vue
<template>
|
||
<div class="flex-1">
|
||
<!-- START HERO -->
|
||
<section class="bg-gradient-to-b relative from-white to-gray-100 py-12 sm:py-16 lg:py-20 xl:py-24">
|
||
<div class="absolute inset-0">
|
||
<img class="w-full h-full object-cover object-top" :src="`${useRuntimeConfig().public.appUrl}/img/pages/ai_form_builder/background-pattern.svg`" alt=""/>
|
||
|
||
</div>
|
||
|
||
<div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative">
|
||
<div class="max-w-4xl mx-auto text-center">
|
||
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-semibold text-gray-900 tracking-tight">
|
||
Say goodbye to tedious form building with OpnForm's new <span
|
||
class="bg-clip-text text-transparent bg-gradient-to-r lg:block from-blue-600 to-blue-400">AI-powered
|
||
feature!</span>
|
||
</h1>
|
||
<p class="mt-4 sm:mt-5 text-base leading-7 sm:text-xl sm:leading-9 font-medium text-gray-500">
|
||
Easily generate a fully working form in seconds with just a simple description.
|
||
</p>
|
||
|
||
<div class="mt-8 flex justify-center">
|
||
<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="max-w-6xl mx-auto mt-12 sm:mt-16">
|
||
<div
|
||
class="-m-2 rounded-xl bg-blue-900/5 p-2 backdrop-blur-sm ring-1 ring-inset ring-blue-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
|
||
<video class="rounded-md ring-1 ring-gray-200 shadow-xl shadow-blue-600/10 ring-blue-900/10" controls autoplay loop muted>
|
||
<source :src="`${useRuntimeConfig().public.appUrl}/video/opnform-ai.mp4`" type="video/mp4">
|
||
|
||
This browser does not display the video tag.
|
||
</video>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="grid lg:grid-cols-3 grid-cols-1 sm:max-w-lg lg:max-w-5xl sm:mx-auto gap-8 sm:gap-10 mt-12 sm:mt-16">
|
||
<div class="flex items-start gap-4">
|
||
<NuxtImg class="w-12 h-12 shrink-0" :src="`${useRuntimeConfig().public.appUrl}/img/pages/ai_form_builder/icon-fast.svg`" alt=""/>
|
||
|
||
<div>
|
||
<p class="text-md font-semibold text-gray-900">
|
||
Faster than Ever
|
||
</p>
|
||
<p class="text-base font-medium text-gray-500 mt-2">
|
||
Save time and effort by generating a form in seconds
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start gap-4">
|
||
<NuxtImg class="w-12 h-12 shrink-0" :src="`${useRuntimeConfig().public.appUrl}/img/pages/ai_form_builder/icon-customization.svg`" alt=""/>
|
||
|
||
<div>
|
||
<p class="text-md font-semibold text-gray-900">
|
||
Customizations
|
||
</p>
|
||
<p class="text-base font-medium text-gray-500 mt-2">
|
||
Customize your form to your exact specifications
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start gap-4">
|
||
<NuxtImg class="w-12 h-12 shrink-0" :src="`${useRuntimeConfig().public.appUrl}/img/pages/ai_form_builder/icon-browser.svg`" alt=""/>
|
||
|
||
<div>
|
||
<p class="text-md font-semibold text-gray-900">
|
||
No Coding Knowledge Required
|
||
</p>
|
||
<p class="text-base font-medium text-gray-500 mt-2">
|
||
No coding knowledge required and it's completely free to use
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- END HERO -->
|
||
|
||
<!-- START HOW IT WORKS -->
|
||
<section class="bg-white py-12 sm:py-16 lg:py-20 xl:py-24">
|
||
<div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||
<div class="text-center max-w-3xl mx-auto">
|
||
<h2 class="text-sm font-semibold text-blue-600">
|
||
How Does It Work?
|
||
</h2>
|
||
<p
|
||
class="text-3xl mt-4 sm:text-4xl lg:text-5xl font-semibold text-gray-900 tracking-tight lg:leading-tight">
|
||
Save hours in just a few clicks
|
||
</p>
|
||
<p class="text-gray-500 text-base leading-7 sm:text-lg sm:leading-8 font-medium mt-4">
|
||
Building forms has never been easier
|
||
</p>
|
||
</div>
|
||
|
||
<div
|
||
class="space-y-16 text-center lg:text-left sm:max-w-md sm:mx-auto lg:max-w-none lg:space-y-20 xl:space-y-24 mt-8 sm:mt-12 lg:mt-16">
|
||
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 lg:gap-12">
|
||
<NuxtImg class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm"
|
||
:src="`${useRuntimeConfig().public.appUrl}/img/pages/ai_form_builder/step-1.svg`" alt=""/>
|
||
|
||
|
||
<div
|
||
class="w-16 h-16 rounded-full bg-blue-50 border-2 border-blue-200 hidden xl:inline-flex items-center justify-center text-blue-600 text-2xl font-semibold leading-none">
|
||
1
|
||
</div>
|
||
|
||
<div class="lg:flex-1 lg:shrink-0">
|
||
<NuxtImg class="w-auto h-16 hidden lg:block" :src="`${useRuntimeConfig().public.appUrl}/img/pages/ai_form_builder/icon-create.svg`" alt=""/>
|
||
|
||
<h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 lg:mt-8">
|
||
Building forms made easy
|
||
</h3>
|
||
<p class="text-base font-medium leading-7 sm:text-lg sm:leading-8 text-gray-500 mt-4">
|
||
OpnForm's easy-to-use online form creator lets you create a beautiful web form in no time. Whether you
|
||
need to create
|
||
contact forms and registration forms for a landing page or an online order form for your business, you
|
||
will no longer
|
||
need to spend hours working on forms.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 lg:gap-12">
|
||
<NuxtImg
|
||
class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm lg:order-3"
|
||
:src="`${useRuntimeConfig().public.appUrl}/img/pages/ai_form_builder/step-2.svg`" alt=""/>
|
||
<div
|
||
class="w-16 h-16 lg:order-2 rounded-full bg-blue-50 border-2 border-blue-200 hidden xl:inline-flex items-center justify-center text-blue-600 text-2xl font-semibold leading-none">
|
||
2
|
||
</div>
|
||
|
||
<div class="lg:flex-1 lg:shrink-0 lg:order-1">
|
||
<NuxtImg class="w-auto h-16 hidden lg:block" :src="`${useRuntimeConfig().public.appUrl}/img/pages/ai_form_builder/icon-customization.svg`" alt=""/>
|
||
|
||
<h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 lg:mt-8">
|
||
Customized forms work wonders
|
||
</h3>
|
||
<p class="text-base font-medium leading-7 sm:text-lg sm:leading-8 text-gray-500 mt-4">
|
||
Did you know that good-looking forms are more likely to convert more responses than ordinary ones? On
|
||
OpnForm, you can
|
||
customize your form design to the tiniest detail and match your brand image with your forms.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 lg:gap-12">
|
||
<NuxtImg class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm"
|
||
:src="`${useRuntimeConfig().public.appUrl}/img/pages/ai_form_builder/step-3.svg`" alt=""/>
|
||
<div
|
||
class="w-16 h-16 rounded-full bg-blue-50 border-2 border-blue-200 hidden xl:inline-flex items-center justify-center text-blue-600 text-2xl font-semibold leading-none">
|
||
3
|
||
</div>
|
||
|
||
<div class="lg:flex-1 lg:shrink-0">
|
||
<NuxtImg class="w-auto h-16 hidden lg:block" :src="`${useRuntimeConfig().public.appUrl}/img/pages/ai_form_builder/icon-share.svg`" alt=""/>
|
||
|
||
<h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 lg:mt-8">
|
||
Share your forms anywhere
|
||
</h3>
|
||
<p class="text-base font-medium leading-7 sm:text-lg sm:leading-8 text-gray-500 mt-4">
|
||
You can share your forms anywhere using their unique weblink or embed them on your landing pages
|
||
seamlessly.
|
||
Furthermore, you can adjust your form’s privacy settings in order to reach the targeted audience and
|
||
prevent others from
|
||
viewing your form.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- END HOW IT WORKS -->
|
||
|
||
<!-- START EXAMPLES -->
|
||
<!-- <section class="bg-gray-50 py-12 sm:py-16 lg:py-20 xl:py-24">-->
|
||
<!-- <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">-->
|
||
<!-- <div class="text-center max-w-3xl mx-auto">-->
|
||
<!-- <h2 class="text-sm font-semibold text-blue-600">-->
|
||
<!-- Examples-->
|
||
<!-- </h2>-->
|
||
<!-- <p-->
|
||
<!-- class="text-3xl mt-4 sm:text-4xl lg:text-5xl font-semibold text-gray-900 tracking-tight lg:leading-tight">-->
|
||
<!-- What our user has created-->
|
||
<!-- </p>-->
|
||
<!-- <p class="text-gray-500 text-base leading-7 sm:text-lg sm:leading-8 font-medium mt-4">-->
|
||
<!-- Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis-->
|
||
<!-- enim velit-->
|
||
<!-- mollit.-->
|
||
<!-- </p>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-8 sm:mt-12 lg:mt-16">-->
|
||
<!-- <div-->
|
||
<!-- class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
|
||
<!-- <NuxtImg class="w-full" :src="`${useRuntimeConfig().public.appUrl}/img/pages/ai_form_builder/examples-placeholder.png` alt=""/>
|
||
-->
|
||
<!-- <div class="px-4 py-5 sm:p-6">-->
|
||
<!-- <h3 class="text-lg font-semibold text-gray-900">-->
|
||
<!-- Example 1-->
|
||
<!-- </h3>-->
|
||
<!-- <p class="text-base font-medium text-gray-500 mt-2 line-clamp-2">-->
|
||
<!-- Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor-->
|
||
<!-- </p>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div-->
|
||
<!-- class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
|
||
<!-- <NuxtImg class="w-full" :src="`${useRuntimeConfig().public.appUrl}/img/pages/ai_form_builder/examples-placeholder.png`" alt=""/>
|
||
-->
|
||
<!-- <div class="px-4 py-5 sm:p-6">-->
|
||
<!-- <h3 class="text-lg font-semibold text-gray-900">-->
|
||
<!-- Example 2-->
|
||
<!-- </h3>-->
|
||
<!-- <p class="text-base font-medium text-gray-500 mt-2 line-clamp-2">-->
|
||
<!-- Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor-->
|
||
<!-- </p>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div-->
|
||
<!-- class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
|
||
<!-- <NuxtImg class="w-full" :src="`${useRuntimeConfig().public.appUrl}/img/pages/ai_form_builder/examples-placeholder.png`" alt=""/>
|
||
-->
|
||
<!-- <div class="px-4 py-5 sm:p-6">-->
|
||
<!-- <h3 class="text-lg font-semibold text-gray-900">-->
|
||
<!-- Example 3-->
|
||
<!-- </h3>-->
|
||
<!-- <p class="text-base font-medium text-gray-500 mt-2 line-clamp-2">-->
|
||
<!-- Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor-->
|
||
<!-- </p>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div-->
|
||
<!-- class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
|
||
<!-- <NuxtImg class="w-full" :src="`${useRuntimeConfig().public.appUrl}/img/pages/ai_form_builder/examples-placeholder.png`" alt=""/>
|
||
-->
|
||
<!-- <div class="px-4 py-5 sm:p-6">-->
|
||
<!-- <h3 class="text-lg font-semibold text-gray-900">-->
|
||
<!-- Example 4-->
|
||
<!-- </h3>-->
|
||
<!-- <p class="text-base font-medium text-gray-500 mt-2 line-clamp-2">-->
|
||
<!-- Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor-->
|
||
<!-- </p>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
|
||
<!--<!– <hr class="mt-12 border-gray-200 sm:mt-16">–>-->
|
||
|
||
<!--<!– <div class="max-w-2xl mx-auto mt-12 text-center sm:mt-16">–>-->
|
||
<!--<!– <h4 class="text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl lg:text-4xl">–>-->
|
||
<!--<!– Ready to level-up?–>-->
|
||
<!--<!– </h4>–>-->
|
||
<!--<!– <p class="mt-4 text-base leading-7 sm:text-xl sm:leading-9 font-medium text-gray-500">–>-->
|
||
<!--<!– Save time and effortlessly create forms with OpnForm–>-->
|
||
<!--<!– </p>–>-->
|
||
|
||
<!--<!– <div class="mt-8 flex justify-center">–>-->
|
||
<!--<!– <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>–>-->
|
||
|
||
<!--<!– <ul–>-->
|
||
<!--<!– class="flex mt-8 sm:mt-12 text-sm font-medium text-gray-900 items-center justify-center flex-wrap gap-x-6 gap-y-4">–>-->
|
||
<!--<!– <li class="flex items-center gap-2">–>-->
|
||
<!--<!– <svg aria-hidden="true" class="h-5 w-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 design skills required–>-->
|
||
<!--<!– </li>–>-->
|
||
|
||
<!--<!– <li class="flex items-center gap-2">–>-->
|
||
<!--<!– <svg aria-hidden="true" class="h-5 w-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>–>-->
|
||
<!--<!– Setup in minutes–>-->
|
||
<!--<!– </li>–>-->
|
||
|
||
<!--<!– <li class="flex items-center gap-2">–>-->
|
||
<!--<!– <svg aria-hidden="true" class="h-5 w-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>–>-->
|
||
<!--<!– It's free–>-->
|
||
<!--<!– </li>–>-->
|
||
<!--<!– </ul>–>-->
|
||
<!--<!– </div>–>-->
|
||
<!-- </div>-->
|
||
<!-- </section>-->
|
||
<!-- END EXAMPLES -->
|
||
|
||
<!-- START TESTIMONIALS -->
|
||
<!-- <section class="bg-white py-12 sm:py-16 lg:py-20 xl:py-24">-->
|
||
<!-- <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">-->
|
||
<!-- <div class="text-center max-w-3xl mx-auto">-->
|
||
<!-- <h2 class="text-sm font-semibold text-blue-600">-->
|
||
<!-- Customer Testimonials-->
|
||
<!-- </h2>-->
|
||
<!-- <p-->
|
||
<!-- class="text-3xl mt-4 sm:text-4xl lg:text-5xl font-semibold text-gray-900 tracking-tight lg:leading-tight">-->
|
||
<!-- See what people are saying-->
|
||
<!-- </p>-->
|
||
<!-- <p class="text-gray-500 text-base leading-7 sm:text-lg sm:leading-8 font-medium mt-4">-->
|
||
<!-- These are the stories of our customers who have joined us with great pleasure when using this crazy-->
|
||
<!-- feature.-->
|
||
<!-- </p>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </section>-->
|
||
<!-- END TESTIMONIALS -->
|
||
|
||
<!-- START FAQS -->
|
||
<!-- <section class="bg-white py-12 sm:py-16 lg:py-20 xl:py-24 border-t border-gray-200">-->
|
||
<!-- <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">-->
|
||
<!-- <div class="text-center max-w-3xl mx-auto">-->
|
||
<!-- <h2 class="text-3xl sm:text-4xl lg:text-5xl font-semibold text-gray-900 tracking-tight lg:leading-tight">-->
|
||
<!-- Frequently Asked Questions-->
|
||
<!-- </h2>-->
|
||
<!-- <p class="text-gray-500 text-base leading-7 sm:text-lg sm:leading-8 font-medium mt-4">-->
|
||
<!-- We've compiled a list of the most common questions we get asked.-->
|
||
<!-- </p>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div class="mt-12 sm:mt-16 lg:mt-20">-->
|
||
<!-- <dl class="gap-y-12 grid grid-cols-1 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-16 lg:gap-x-10">-->
|
||
<!-- <div>-->
|
||
<!-- <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
|
||
<!-- What's the best thing about Switzerland?-->
|
||
<!-- </dt>-->
|
||
<!-- <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
|
||
<!-- I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit.-->
|
||
<!-- Quas cupiditate-->
|
||
<!-- laboriosam fugiat.-->
|
||
<!-- </dd>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div>-->
|
||
<!-- <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
|
||
<!-- How do you make holy water?-->
|
||
<!-- </dt>-->
|
||
<!-- <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
|
||
<!-- You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam aut-->
|
||
<!-- tempora vitae odio-->
|
||
<!-- inventore fuga aliquam nostrum quod porro. Delectus quia facere id sequi expedita natus.-->
|
||
<!-- </dd>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div>-->
|
||
<!-- <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
|
||
<!-- What do you call someone with no body and no nose?-->
|
||
<!-- </dt>-->
|
||
<!-- <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
|
||
<!-- Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, voluptas ipsa quia-->
|
||
<!-- excepturi, quibusdam-->
|
||
<!-- natus exercitationem sapiente tempore labore voluptatem.-->
|
||
<!-- </dd>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div>-->
|
||
<!-- <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
|
||
<!-- Why do you never see elephants hiding in trees?-->
|
||
<!-- </dt>-->
|
||
<!-- <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
|
||
<!-- Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas-->
|
||
<!-- cupiditate laboriosam-->
|
||
<!-- fugiat.-->
|
||
<!-- </dd>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div>-->
|
||
<!-- <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
|
||
<!-- Why can't you hear a pterodactyl go to the bathroom?-->
|
||
<!-- </dt>-->
|
||
<!-- <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
|
||
<!-- Because the pee is silent. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quas-->
|
||
<!-- voluptatibus ex culpa-->
|
||
<!-- ipsum, aspernatur blanditiis fugiat ullam magnam suscipit deserunt illum natus facilis atque vero-->
|
||
<!-- consequatur! Quisquam,-->
|
||
<!-- debitis error.-->
|
||
<!-- </dd>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div>-->
|
||
<!-- <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
|
||
<!-- Why did the invisible man turn down the job offer?-->
|
||
<!-- </dt>-->
|
||
<!-- <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
|
||
<!-- He couldn't see himself doing it. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet-->
|
||
<!-- perspiciatis-->
|
||
<!-- officiis corrupti tenetur. Temporibus ut voluptatibus, perferendis sed unde rerum deserunt eius.-->
|
||
<!-- </dd>-->
|
||
<!-- </div>-->
|
||
<!-- </dl>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </section>-->
|
||
<!-- END FAQS -->
|
||
|
||
<!-- START CTA -->
|
||
<section class="bg-gradient-to-b from-gray-100 to-white py-12 sm:py-16 lg:pt-20 xl:pt-24">
|
||
<div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||
<div class="flex items-center justify-center gap-8">
|
||
<NuxtImg class="w-auto h-12" :src="`${useRuntimeConfig().public.appUrl}/img/pages/ai_form_builder/icon-email-input.svg`" alt=""/>
|
||
|
||
<NuxtImg class="w-auto h-12" :src="`${useRuntimeConfig().public.appUrl}/img/pages/ai_form_builder/icon-radio-buttons.svg`" alt=""/>
|
||
|
||
<NuxtImg class="w-auto h-12" :src="`${useRuntimeConfig().public.appUrl}/img/pages/ai_form_builder/icon-textarea.svg`" alt=""/>
|
||
|
||
</div>
|
||
|
||
<div class="text-center max-w-3xl mx-auto mt-8 sm:mt-12">
|
||
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-semibold text-gray-900 tracking-tight lg:leading-tight">
|
||
Create beautiful forms and share them anywhere
|
||
</h2>
|
||
<p class="mt-4 sm:mt-5 text-base leading-7 sm:text-xl sm:leading-9 font-medium text-gray-500">
|
||
It takes seconds, you don't need to know how to code and <span class="text-blue-600">it's free</span>.
|
||
</p>
|
||
|
||
<div class="mt-8 flex justify-center">
|
||
<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>
|
||
|
||
<ul
|
||
class="flex mt-8 sm:mt-12 text-sm font-medium text-gray-900 items-center justify-center flex-wrap gap-x-6 gap-y-4">
|
||
<li class="flex items-center gap-2">
|
||
<svg aria-hidden="true" class="h-5 w-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 design skills required
|
||
</li>
|
||
|
||
<li class="flex items-center gap-2">
|
||
<svg aria-hidden="true" class="h-5 w-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>
|
||
Setup in minutes
|
||
</li>
|
||
|
||
<li class="flex items-center gap-2">
|
||
<svg aria-hidden="true" class="h-5 w-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>
|
||
Free plan available
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- END CTA -->
|
||
|
||
<open-form-footer class="dark:border-t border-t"/>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
import { useAuthStore } from '../stores/auth'
|
||
|
||
const authStore = useAuthStore()
|
||
|
||
useOpnSeoMeta({
|
||
title: 'Free AI form builder',
|
||
description: 'Transform your ideas into fully functional forms with OpnForm AI Builder – quick, accurate, and tailored to fit any requirement.'
|
||
})
|
||
defineRouteRules({
|
||
swr: 3600
|
||
})
|
||
|
||
let authenticated = computed(() => authStore.check)
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
.customer-logo-container {
|
||
max-width: 130px;
|
||
width: 100%;
|
||
}
|
||
|
||
.ticks {
|
||
color:#2563eb;
|
||
}
|
||
|
||
@screen md {
|
||
#macbook-video {
|
||
position: absolute;
|
||
max-width: 84.8% !important;
|
||
right: 0px;
|
||
top: 6.8%;
|
||
}
|
||
}
|
||
</style>
|