AI Landing Page (#125)
* AI Landing Page * Fix primary * fix ai feature page * set create form link on ai pages * WIP * replace video intro --------- Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Chirag Chhatrala
GitHub
@@ -15,7 +15,11 @@
|
||||
<workspace-dropdown class="ml-6"/>
|
||||
</div>
|
||||
<div class="hidden md:block ml-auto relative">
|
||||
<router-link :to="{name:'templates'}"
|
||||
<router-link :to="{name:'aiformbuilder'}" v-if="$route.name !== 'aiformbuilder'"
|
||||
class="text-sm text-gray-600 dark:text-white hidden lg:inline hover:text-gray-800 cursor-pointer mt-1 mr-8">
|
||||
AI Form Builder
|
||||
</router-link>
|
||||
<router-link :to="{name:'templates'}" v-if="$route.name !== 'templates'"
|
||||
class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1 mr-8">
|
||||
Templates
|
||||
</router-link>
|
||||
|
||||
99
resources/js/components/pages/welcome/AiFeature.vue
Normal file
99
resources/js/components/pages/welcome/AiFeature.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<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>
|
||||
523
resources/js/pages/ai-form-builder.vue
Normal file
523
resources/js/pages/ai-form-builder.vue
Normal file
@@ -0,0 +1,523 @@
|
||||
<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="asset('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">
|
||||
<video class="rounded-lg sm:rounded-xl lg:rounded-2xl ring-1 ring-gray-200 shadow-lg shadow-blue-600/10" controls autoplay loop>
|
||||
<source :src="asset('video/opnform-ai.mp4')" type="video/mp4">
|
||||
This browser does not display the video tag.
|
||||
</video>
|
||||
<!-- <img class="rounded-lg sm:rounded-xl lg:rounded-2xl ring-1 ring-gray-200 shadow-lg shadow-blue-600/10"-->
|
||||
<!-- :src="asset('img/pages/ai_form_builder/hero-mockup.png')" alt="">-->
|
||||
</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">
|
||||
<img class="w-12 h-12 shrink-0" :src="asset('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">
|
||||
<img class="w-12 h-12 shrink-0" :src="asset('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">
|
||||
<img class="w-12 h-12 shrink-0" :src="asset('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">
|
||||
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint
|
||||
</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">
|
||||
<img class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm"
|
||||
:src="asset('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">
|
||||
<img class="w-auto h-16 hidden lg:block" :src="asset('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">
|
||||
<img
|
||||
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="asset('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">
|
||||
<img class="w-auto h-16 hidden lg:block" :src="asset('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">
|
||||
<img class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm"
|
||||
:src="asset('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">
|
||||
<img class="w-auto h-16 hidden lg:block" :src="asset('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">-->
|
||||
<!-- <img class="w-full" :src="asset('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">-->
|
||||
<!-- <img class="w-full" :src="asset('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">-->
|
||||
<!-- <img class="w-full" :src="asset('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">-->
|
||||
<!-- <img class="w-full" :src="asset('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">
|
||||
<img class="w-auto h-12" :src="asset('img/pages/ai_form_builder/icon-email-input.svg')" alt="">
|
||||
<img class="w-auto h-12" :src="asset('img/pages/ai_form_builder/icon-radio-buttons.svg')" alt="">
|
||||
<img class="w-auto h-12" :src="asset('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>
|
||||
import {mapGetters} from 'vuex'
|
||||
import OpenFormFooter from '../components/pages/OpenFormFooter.vue'
|
||||
import SeoMeta from '../mixins/seo-meta.js'
|
||||
|
||||
export default {
|
||||
components: {OpenFormFooter},
|
||||
layout: 'default',
|
||||
mixins: [SeoMeta],
|
||||
data: () => ({
|
||||
title: window.config.appName,
|
||||
metaTitle: 'AI form builder for free',
|
||||
}),
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {},
|
||||
|
||||
computed: {
|
||||
...mapGetters({
|
||||
authenticated: 'auth/check'
|
||||
}),
|
||||
configLinks: () => window.config.links
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@@ -62,7 +62,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<more-features />
|
||||
<ai-feature class="bg-white -mb-56" />
|
||||
|
||||
<more-features class="pt-56" />
|
||||
|
||||
<!-- <div class="pt-20 pb-5 text-center bg-white dark:bg-notion-dark-light">-->
|
||||
<!-- <h3 class="font-semibold text-3xl">See what people are saying</h3>-->
|
||||
@@ -114,12 +116,13 @@
|
||||
import {mapGetters} from 'vuex'
|
||||
import Features from '~/components/pages/welcome/Features.vue'
|
||||
import MoreFeatures from '~/components/pages/welcome/MoreFeatures.vue'
|
||||
import AiFeature from '~/components/pages/welcome/AiFeature.vue'
|
||||
import OpenFormFooter from '../components/pages/OpenFormFooter.vue'
|
||||
import Testimonials from '../components/pages/welcome/Testimonials.vue'
|
||||
import SeoMeta from '../mixins/seo-meta.js'
|
||||
|
||||
export default {
|
||||
components: {Testimonials, OpenFormFooter, Features, MoreFeatures},
|
||||
components: {Testimonials, OpenFormFooter, Features, MoreFeatures, AiFeature},
|
||||
|
||||
layout: 'default',
|
||||
|
||||
|
||||
1
resources/js/router/routes.js
vendored
1
resources/js/router/routes.js
vendored
@@ -61,6 +61,7 @@ export default [
|
||||
|
||||
// Guest Routes
|
||||
{ path: '/', name: 'welcome', component: page('welcome.vue') },
|
||||
{ path: '/ai-form-builder', name: 'aiformbuilder', component: page('ai-form-builder.vue') },
|
||||
{ path: '/integrations', name: 'integrations', component: page('integrations.vue') },
|
||||
{ path: '/forms/:slug', name: 'forms.show_public', component: page('forms/show-public.vue') },
|
||||
|
||||
|
||||
Reference in New Issue
Block a user