New UI for home page, Still need some polishing
This commit is contained in:
Chirag Chhatrala
parent
5b92ac2633
commit
eb6535e540
|
|
@ -4,12 +4,12 @@
|
||||||
<div class="flex items-center justify-between h-16">
|
<div class="flex items-center justify-between h-16">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<router-link :to="{ name: user ? 'home' : 'welcome' }" class="flex-shrink-0 font-bold flex items-center">
|
<router-link :to="{ name: user ? 'home' : 'welcome' }" class="flex-shrink-0 font-bold flex items-center">
|
||||||
<img :src="asset('img/logo.svg')" alt="notion tools logo" class="w-8 h-8">
|
<img :src="asset('img/logo.svg')" alt="notion tools logo" class="w-10 h-10">
|
||||||
<span
|
<span
|
||||||
class="ml-3 text-xl hidden sm:inline text-black dark:text-white"
|
class="ml-2 text-xl hidden sm:inline text-black dark:text-white"
|
||||||
>
|
>
|
||||||
{{ appName }}</span><span
|
{{ appName }}</span><span
|
||||||
class="ml-3 text-sm uppercase hidden sm:inline text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-blue-600"
|
class="bg-gray-100 font-semibold inline-block mb-4 ml-1 px-3 rounded-full text-black text-xs tracking-wider"
|
||||||
>Beta</span>
|
>Beta</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
<workspace-dropdown class="ml-6" />
|
<workspace-dropdown class="ml-6" />
|
||||||
|
|
@ -83,7 +83,7 @@
|
||||||
</dropdown>
|
</dropdown>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<router-link v-if="$route.name !== 'login'" :to="{ name: 'login' }"
|
<router-link v-if="$route.name !== 'login'" :to="{ name: 'login' }"
|
||||||
class="text-gray-400 hover:text-gray-800 dark:hover:text-white px-0 sm:px-3 py-2 rounded-md text-sm font-medium"
|
class="text-gray-900 hover:text-gray-800 dark:hover:text-white px-0 sm:px-3 py-2 rounded-md text-sm font-medium"
|
||||||
active-class="text-gray-800 dark:text-white"
|
active-class="text-gray-800 dark:text-white"
|
||||||
>
|
>
|
||||||
{{ $t('login') }}
|
{{ $t('login') }}
|
||||||
|
|
@ -92,17 +92,28 @@
|
||||||
class="text-gray-300 hover:text-gray-800 dark:hover:text-white pl-3 py-2 rounded-md text-sm font-medium"
|
class="text-gray-300 hover:text-gray-800 dark:hover:text-white pl-3 py-2 rounded-md text-sm font-medium"
|
||||||
active-class="text-gray-800 dark:text-white"
|
active-class="text-gray-800 dark:text-white"
|
||||||
>
|
>
|
||||||
<v-button v-track.nav_create_form_click>
|
<v-button v-track.nav_create_form_click :arrow="true">
|
||||||
Create Form
|
Create a form
|
||||||
</v-button>
|
</v-button>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
<a class="m-1.5" :href="githubUrl" target="_blank">
|
||||||
|
<button class="border btn duration-200 ease-in focus:outline-none focus:ring-2 focus:ring-gray-100 focus:ring-offset-2 focus:ring-offset-gray-50 font-semibold dark:bg-white p-2 rounded-full rounded-lg text-base text-center transition dark:text-white"
|
||||||
|
v-track.github_link_click
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="w-6 h-6" viewBox="0 0 256 250" version="1.1" preserveAspectRatio="xMidYMid">
|
||||||
|
<g>
|
||||||
|
<path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="#161614"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
<transition name="fade" mode="out-in">
|
<transition name="fade" mode="out-in">
|
||||||
<button v-if="darkModeEnabled" key="sun"
|
<button v-if="darkModeEnabled" key="sun"
|
||||||
class="p-1 text-sm text-gray-400 hover:text-gray-800 dark:hover:text-white cursor-pointer mt-1 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800"
|
class="border cursor-pointer p-2 rounded-full rounded-md text-sm dark:bg-white dark:text-black"
|
||||||
@click="toggleDarkMode"
|
@click="toggleDarkMode"
|
||||||
>
|
>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
||||||
|
|
@ -114,7 +125,7 @@
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button v-else key="moon"
|
<button v-else key="moon"
|
||||||
class="p-1 text-sm text-gray-400 hover:text-gray-800 dark:hover:text-white cursor-pointer mt-1 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800"
|
class="border cursor-pointer p-2 rounded-full rounded-md text-sm text-black"
|
||||||
@click="toggleDarkMode"
|
@click="toggleDarkMode"
|
||||||
>
|
>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
||||||
|
|
@ -152,6 +163,7 @@ export default {
|
||||||
}),
|
}),
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
githubUrl: () => window.config.links.github_url,
|
||||||
form () {
|
form () {
|
||||||
if (this.$route.name && this.$route.name.startsWith('forms.show_public')) {
|
if (this.$route.name && this.$route.name.startsWith('forms.show_public')) {
|
||||||
return this.$store.getters['open/forms/getBySlug'](this.$route.params.slug)
|
return this.$store.getters['open/forms/getBySlug'](this.$route.params.slug)
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,15 @@
|
||||||
<button :type="nativeType" :disabled="loading" :class="`py-${sizes['p-y']} px-${sizes['p-x']}
|
<button :type="nativeType" :disabled="loading" :class="`py-${sizes['p-y']} px-${sizes['p-x']}
|
||||||
bg-${color}-${colorShades['main']} hover:bg-${color}-${colorShades['hover']} focus:ring-${color}-${colorShades['ring']}
|
bg-${color}-${colorShades['main']} hover:bg-${color}-${colorShades['hover']} focus:ring-${color}-${colorShades['ring']}
|
||||||
focus:ring-offset-${color}-${colorShades['ring-offset']} text-${colorShades['text']}
|
focus:ring-offset-${color}-${colorShades['ring-offset']} text-${colorShades['text']}
|
||||||
transition ease-in duration-200 text-center text-${sizes['font']} font-semibold shadow-md focus:outline-none focus:ring-2
|
transition ease-in duration-200 text-center text-${sizes['font']} font-semibold focus:outline-none focus:ring-2
|
||||||
focus:ring-offset-2 rounded-lg`"
|
focus:ring-offset-2 border-2 border-${colorShades['border']} rounded-full `"
|
||||||
class="btn" @click="$emit('click',$event)"
|
class="btn" @click="$emit('click',$event)"
|
||||||
>
|
>
|
||||||
<template v-if="!loading">
|
<template v-if="!loading">
|
||||||
<slot />
|
<slot />
|
||||||
|
<svg v-if="arrow" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="float-right ml-2 w-6 h-6">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
|
||||||
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
<loader v-else class="h-6 w-6 text-white mx-auto" />
|
<loader v-else class="h-6 w-6 text-white mx-auto" />
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -20,7 +23,7 @@ export default {
|
||||||
props: {
|
props: {
|
||||||
color: {
|
color: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'nt-blue'
|
default: 'normal'
|
||||||
},
|
},
|
||||||
|
|
||||||
shade: {
|
shade: {
|
||||||
|
|
@ -41,6 +44,11 @@ export default {
|
||||||
loading: {
|
loading: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
|
||||||
|
arrow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -52,7 +60,8 @@ export default {
|
||||||
hover: 'light',
|
hover: 'light',
|
||||||
ring: 'light',
|
ring: 'light',
|
||||||
'ring-offset': 'lighter',
|
'ring-offset': 'lighter',
|
||||||
text: 'white'
|
text: 'white',
|
||||||
|
border: 'nt-blue'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (this.shade === 'lighter') {
|
if (this.shade === 'lighter') {
|
||||||
|
|
@ -61,7 +70,8 @@ export default {
|
||||||
hover: '300',
|
hover: '300',
|
||||||
ring: '100',
|
ring: '100',
|
||||||
'ring-offset': '50',
|
'ring-offset': '50',
|
||||||
text: 'gray-900'
|
text: 'gray-900',
|
||||||
|
border: 'nt-blue'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (this.shade === 'light') {
|
if (this.shade === 'light') {
|
||||||
|
|
@ -70,7 +80,8 @@ export default {
|
||||||
hover: '500',
|
hover: '500',
|
||||||
ring: '300',
|
ring: '300',
|
||||||
'ring-offset': '150',
|
'ring-offset': '150',
|
||||||
text: 'white'
|
text: 'white',
|
||||||
|
border: 'nt-blue'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
|
|
@ -78,7 +89,8 @@ export default {
|
||||||
hover: '700',
|
hover: '700',
|
||||||
ring: '500',
|
ring: '500',
|
||||||
'ring-offset': '200',
|
'ring-offset': '200',
|
||||||
text: 'white'
|
text: 'nt-blue',
|
||||||
|
border: 'nt-blue'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
sizes () {
|
sizes () {
|
||||||
|
|
|
||||||
|
|
@ -1,154 +1,29 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="w-full bg-gray-50 dark:bg-notion-dark p-10">
|
<div class="w-full bg-gray-50 dark:bg-notion-dark">
|
||||||
<div class="px-4 py-6 w-full md:max-w-3xl md:mx-auto md:px-24 lg:px-8">
|
<div class="grid md:grid-cols-3 my-10">
|
||||||
<div class="flex flex-wrap">
|
<div class="flex">
|
||||||
<div class="md:max-w-md lg:col-span-2 mr-2 pr-2">
|
<p class="text-sm text-gray-600 dark:text-gray-400 text-center w-full">
|
||||||
<a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
|
© Copyright 2022. All Rights Reserved
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex font-bold justify-center">
|
||||||
|
<a href="/" aria-label="Go home" title="Company">
|
||||||
<img :src="asset('img/logo.svg')" alt="notion tools logo" class="w-8 h-8 inline">
|
<img :src="asset('img/logo.svg')" alt="notion tools logo" class="w-8 h-8 inline">
|
||||||
<span class="ml-2 text-xl font-bold tracking-wide text-gray-800 dark:text-gray-200">OpnForm</span>
|
<span class="ml-2 text-xl font-bold tracking-wide text-gray-800 dark:text-gray-200">OpnForm</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-2 gap-5 row-gap-8 lg:col-span-4 md:grid-cols-3 mt-8 lg:mt-0">
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold tracking-wide text-gray-800 dark:text-gray-200">
|
|
||||||
Resources
|
|
||||||
</p>
|
|
||||||
<ul class="mt-2 space-y-2">
|
|
||||||
<!-- <li>-->
|
|
||||||
<!-- <router-link :to="{name:'pricing'}"-->
|
|
||||||
<!-- class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- Pricing-->
|
|
||||||
<!-- </router-link>-->
|
|
||||||
<!-- </li>-->
|
|
||||||
<li>
|
|
||||||
<router-link :to="{name:'templates'}"
|
|
||||||
class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
|
|
||||||
>
|
|
||||||
Templates
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a target="_blank" :href="helpUrl"
|
|
||||||
class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
|
|
||||||
>
|
|
||||||
Help
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<!-- <li>-->
|
|
||||||
<!-- <router-link :to="{name:'guides'}"-->
|
|
||||||
<!-- class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- Guides-->
|
|
||||||
<!-- </router-link>-->
|
|
||||||
<!-- </li>-->
|
|
||||||
<li>
|
|
||||||
<router-link :to="{name:'integrations'}"
|
|
||||||
class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
|
|
||||||
>
|
|
||||||
Integrations
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<!-- <li id="changelog" data-canny-changelog class="relative block">-->
|
|
||||||
<!-- <p id="changelog-trigger"-->
|
|
||||||
<!-- class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue cursor-pointer"-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- Product Updates-->
|
|
||||||
<!-- </p>-->
|
|
||||||
<!-- </li>-->
|
|
||||||
<li class="relative block">
|
|
||||||
<a target="_blank" :href="featureRequestsUrl"
|
|
||||||
class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
|
|
||||||
>
|
|
||||||
Feature Requests
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold tracking-wide text-gray-800 dark:text-gray-200">
|
|
||||||
Community
|
|
||||||
</p>
|
|
||||||
<ul class="mt-2 space-y-2">
|
|
||||||
<li>
|
|
||||||
<a target="_blank" :href="facebookGroupUrl"
|
|
||||||
class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
|
|
||||||
>Facebook
|
|
||||||
Group</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a target="_blank" :href="twitterUrl"
|
|
||||||
class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
|
|
||||||
>Twitter</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a target="_blank" :href="githubUrl"
|
|
||||||
class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
|
|
||||||
>GitHub</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a target="_blank" :href="forumUrl"
|
|
||||||
class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
|
|
||||||
>Forum</a>
|
|
||||||
</li>
|
|
||||||
<!-- <li>-->
|
|
||||||
<!-- <router-link :to="{name:'discount-community'}"-->
|
|
||||||
<!-- class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- Academic Discount-->
|
|
||||||
<!-- </router-link>-->
|
|
||||||
<!-- </li>-->
|
|
||||||
<!-- <li>-->
|
|
||||||
<!-- <router-link :to="{name:'discount-community'}"-->
|
|
||||||
<!-- class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- NGO Discount-->
|
|
||||||
<!-- </router-link>-->
|
|
||||||
<!-- </li>-->
|
|
||||||
<!-- <li>-->
|
|
||||||
<!-- <router-link :to="{name:'partners'}"-->
|
|
||||||
<!-- class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- Our Partners-->
|
|
||||||
<!-- </router-link>-->
|
|
||||||
<!-- </li>-->
|
|
||||||
<!-- <li>-->
|
|
||||||
<!-- <router-link :to="{name:'ambassadors'}"-->
|
|
||||||
<!-- class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- Notion Ambassadors-->
|
|
||||||
<!-- </router-link>-->
|
|
||||||
<!-- </li>-->
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="ml-auto">
|
|
||||||
<p class="font-semibold tracking-wide text-gray-800 dark:text-gray-200">
|
|
||||||
Legal
|
|
||||||
</p>
|
|
||||||
<ul class="mt-2 space-y-2">
|
|
||||||
<li>
|
|
||||||
<router-link :to="{name:'privacy-policy'}"
|
|
||||||
class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
|
|
||||||
>
|
|
||||||
Privacy Policy
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<router-link :to="{name:'terms-conditions'}"
|
|
||||||
class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
|
|
||||||
>
|
|
||||||
Terms & Conditions
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col justify-between pt-5 pb-10 border-t mt-4 sm:flex-row">
|
|
||||||
<p class="text-sm text-gray-600 dark:text-gray-400 text-center w-full">
|
|
||||||
© Copyright 2022 OpnForm. All rights reserved.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<ul class="flex">
|
||||||
|
<li class="mr-10">
|
||||||
|
<router-link :to="{name:'privacy-policy'}" class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue">
|
||||||
|
Privacy Policy
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="list-disc pl-3">
|
||||||
|
<router-link :to="{name:'terms-conditions'}" class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue">
|
||||||
|
Terms & Conditions
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,188 +1,205 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="features" class="px-4 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
|
<div id="features" class="px-4 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
|
||||||
<div v-if="!featuresOnly" :class="{'mb-10 md:mb-12':!featuresOnly }" class="max-w-xl md:mx-auto sm:text-center lg:max-w-2xl ">
|
<div v-if="!featuresOnly" :class="{'mb-10':!featuresOnly }" class="max-w-xl md:mx-auto sm:text-center lg:max-w-2xl ">
|
||||||
<div>
|
<h2 class="mb-6 font-sans text-4xl font-bold leading-none tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl md:mx-auto">
|
||||||
<p
|
The easiest way to create forms. <br/>
|
||||||
class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-nt-blue uppercase rounded-full bg-nt-blue-lighter"
|
And it's <span class="text-nt-blue">100% free!</span>
|
||||||
>
|
|
||||||
100% Free
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<h2
|
|
||||||
class="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl md:mx-auto"
|
|
||||||
>
|
|
||||||
<span class="relative inline-block">
|
|
||||||
<svg viewBox="0 0 52 24" fill="currentColor"
|
|
||||||
class="text-nt-blue-light absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block"
|
|
||||||
>
|
|
||||||
<defs>
|
|
||||||
<pattern id="27df4f81-c854-45de-942a-fe90f7a300f9" x="0" y="0" width=".135" height=".30">
|
|
||||||
<circle cx="1" cy="1" r=".7" />
|
|
||||||
</pattern>
|
|
||||||
</defs>
|
|
||||||
<rect fill="url(#27df4f81-c854-45de-942a-fe90f7a300f9)" width="52" height="24" />
|
|
||||||
</svg>
|
|
||||||
<span class="relative">The</span>
|
|
||||||
</span>
|
|
||||||
easiest way to create forms for free
|
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-base text-gray-700 dark:text-gray-300 md:text-lg">
|
<p class="text-base text-gray-700 dark:text-gray-300 md:text-lg">
|
||||||
You've been paying too much for too long. OpnForm is the first open-source form builder. Need a contact
|
Need a contact form? Doing a survey? Create a form in 3 minutes and start receiving submissions.
|
||||||
form? Doing a survey? Create a form in 3 minutes and start receiving submissions.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid max-w-screen-lg gap-8 row-gap-10 mx-auto md:grid-cols-2">
|
|
||||||
<div class="flex flex-col max-w-md sm:mx-auto sm:flex-row">
|
|
||||||
<div class="mr-4">
|
|
||||||
<div class="flex items-center justify-center w-12 h-12 mb-4 rounded-full bg-nt-blue-lighter">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-nt-blue" fill="none" viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h6 class="mb-3 text-xl font-bold leading-5">
|
|
||||||
Infinite Number of Fields
|
|
||||||
</h6>
|
|
||||||
<p class="mb-3 text-sm dark:text-gray-100 text-gray-900">
|
|
||||||
There are no limits on the number of input fields in your forms. Organize fields and decide which are required.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col max-w-md sm:mx-auto sm:flex-row">
|
|
||||||
<div class="mr-4">
|
|
||||||
<div class="flex items-center justify-center w-12 h-12 mb-4 rounded-full bg-nt-blue-lighter">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-nt-blue" fill="none" viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
||||||
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h6 class="mb-3 text-xl font-bold leading-5">
|
|
||||||
Infinite Number of Forms
|
|
||||||
</h6>
|
|
||||||
<p class="mb-3 text-sm dark:text-gray-100 text-gray-900">
|
|
||||||
You can create as many forms as you need. Forms everywhere, for everything!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col max-w-md sm:mx-auto sm:flex-row">
|
|
||||||
<div class="mr-4">
|
|
||||||
<div class="flex items-center justify-center w-12 h-12 mb-4 rounded-full bg-nt-blue-lighter">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-nt-blue" fill="none" viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h6 class="mb-3 text-xl font-bold leading-5">
|
|
||||||
Infinite Responses
|
|
||||||
</h6>
|
|
||||||
<p class="mb-3 text-sm dark:text-gray-100 text-gray-900">
|
|
||||||
All of you forms can have unlimited responses, no need to worry about quotas and other stressful metrics.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col max-w-md sm:mx-auto sm:flex-row">
|
|
||||||
<div class="mr-4">
|
|
||||||
<div class="flex items-center justify-center w-12 h-12 mb-4 rounded-full bg-nt-blue-lighter">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-nt-blue" fill="none" viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h6 class="mb-3 text-xl font-bold leading-5">
|
|
||||||
Notifications
|
|
||||||
</h6>
|
|
||||||
<p class="mb-3 text-sm dark:text-gray-100 text-gray-900">
|
|
||||||
Receive notifications directly in Slack or in your mailbox whenever your from has a new submission (if you want to).
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col max-w-md sm:mx-auto sm:flex-row">
|
|
||||||
<div class="mr-4">
|
|
||||||
<div class="flex items-center justify-center w-12 h-12 mb-4 rounded-full bg-nt-blue-lighter">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-nt-blue" fill="none" viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h6 class="mb-3 text-xl font-bold leading-5">
|
|
||||||
Integrate Anywhere
|
|
||||||
</h6>
|
|
||||||
<p class="mb-3 text-sm dark:text-gray-100 text-gray-900">
|
|
||||||
You can integrate your form anywhere: on your website, or even within a Notion Page.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col max-w-md sm:mx-auto sm:flex-row">
|
|
||||||
<div class="mr-4">
|
|
||||||
<div class="flex items-center justify-center w-12 h-12 mb-4 rounded-full bg-nt-blue-lighter">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-nt-blue" >
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.098 19.902a3.75 3.75 0 005.304 0l6.401-6.402M6.75 21A3.75 3.75 0 013 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 003.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008z" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
</div>
|
<div class="grid md:grid-cols-2">
|
||||||
</div>
|
<div class="mr-10">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
|
||||||
|
</svg>
|
||||||
|
<h4 class="my-5 text-4xl font-bold">1. Create</h4>
|
||||||
|
<p class="dark:text-white">
|
||||||
|
There are no limits on the number of input fields in your forms.
|
||||||
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<h6 class="mb-3 text-xl font-bold leading-5">
|
<div class="flex mt-4">
|
||||||
Customize Everything
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
|
||||||
</h6>
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||||
<p class="mb-3 text-sm dark:text-gray-100 text-gray-900">
|
</svg>
|
||||||
Change form themes, change texts, colors, add images, add custom thank you pages and much more.
|
Build a simple form in minutes.
|
||||||
</p>
|
</div>
|
||||||
|
<div class="flex mt-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||||
|
</svg>
|
||||||
|
No coding needed.
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col max-w-md sm:mx-auto sm:flex-row">
|
<div class="flex items-center justify-center relative w-full">
|
||||||
<div class="mr-4">
|
<img loading="lazy" class="block rounded-lg shadow-xl w-full"
|
||||||
<div class="flex items-center justify-center w-12 h-12 mb-4 rounded-full bg-nt-blue-lighter">
|
:src="asset('img/pages/welcome/product_cover.jpg')" alt="cover-product">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-nt-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h6 class="mb-3 text-xl font-bold leading-5">
|
|
||||||
File Uploads
|
|
||||||
</h6>
|
|
||||||
<p class="mb-3 text-sm dark:text-gray-100 text-gray-900">
|
|
||||||
Easily add file upload inputs to your forms. Uploaded files are securely stored for you. Up to 5mb!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col max-w-md sm:mx-auto sm:flex-row">
|
</div>
|
||||||
<div class="mr-4">
|
|
||||||
<div class="flex items-center justify-center w-12 h-12 mb-4 rounded-full bg-nt-blue-lighter">
|
<div class="grid md:grid-cols-2 mt-14">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-nt-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
<div class="flex items-center justify-center relative w-full">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
<img loading="lazy" class="block rounded-lg shadow-xl w-full"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
:src="asset('img/pages/welcome/product_cover.jpg')" alt="cover-product">
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
<div class="ml-10">
|
||||||
</div>
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" />
|
||||||
|
</svg>
|
||||||
|
<h4 class="my-5 text-4xl font-bold">2. Share</h4>
|
||||||
|
<p class="dark:text-white">
|
||||||
|
Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
|
||||||
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<h6 class="mb-3 text-xl font-bold leading-5">
|
<div class="flex mt-4">
|
||||||
Advanced features
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
|
||||||
</h6>
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||||
<p class="mb-3 text-sm dark:text-gray-100 text-gray-900">
|
</svg>
|
||||||
Form logic, URL pre-fill, hidden fields, unique submission id, form password, webhooks, custom code, closing date, etc. It's all there!
|
Embed into your website.
|
||||||
</p>
|
</div>
|
||||||
|
<div class="flex mt-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||||
|
</svg>
|
||||||
|
Launch in an email.
|
||||||
|
</div>
|
||||||
|
<div class="flex mt-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||||
|
</svg>
|
||||||
|
Or just share the link.
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 mt-14">
|
||||||
|
<div class="mr-10">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
|
||||||
|
</svg>
|
||||||
|
<h4 class="my-5 text-4xl font-bold">3. Get results</h4>
|
||||||
|
<p class="dark:text-white">
|
||||||
|
Exercitation veniam consequat sunt nostrud amet.
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<div class="flex mt-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||||
|
</svg>
|
||||||
|
See responses and completion rates.
|
||||||
|
</div>
|
||||||
|
<div class="flex mt-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||||
|
</svg>
|
||||||
|
Generate shareable reports.
|
||||||
|
</div>
|
||||||
|
<div class="flex mt-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||||
|
</svg>
|
||||||
|
Send data to your favourite tools for in-depth analysis.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-center relative w-full">
|
||||||
|
<img loading="lazy" class="block rounded-lg shadow-xl w-full"
|
||||||
|
:src="asset('img/pages/welcome/product_cover.jpg')" alt="cover-product">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 mt-20 mb-5">
|
||||||
|
<div class="mr-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
|
||||||
|
</svg>
|
||||||
|
<h3 class="my-3 font-bold">Notifications</h3>
|
||||||
|
<p>Receive notifications directly in Slack or in your mailbox whenever your from has a new submission (if you want to).</p>
|
||||||
|
</div>
|
||||||
|
<div class="mr-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
|
||||||
|
</svg>
|
||||||
|
<h3 class="my-3 font-bold">File Uploads</h3>
|
||||||
|
<p>Easily add file upload inputs to your forms. Uploaded files are securely stored for you. Up to 5mb!</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
<h3 class="my-3 font-bold">Customize Everything</h3>
|
||||||
|
<p>Change form themes, change texts, colors, add images, add custom thank you pages and much more.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-10 mb-5 text-center">
|
||||||
|
<h3 class="font-bold text-3xl">And many more features</h3>
|
||||||
|
<p class="w-full mt-2 mb-8">
|
||||||
|
OpnForm makes form building easy and comes with powerful features.
|
||||||
|
</p>
|
||||||
|
<div class="grid md:grid-cols-3 mt-10 mb-5">
|
||||||
|
<div class="flex font-bold my-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
|
||||||
|
</svg>
|
||||||
|
Form logic
|
||||||
|
</div>
|
||||||
|
<div class="flex font-bold my-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
|
||||||
|
</svg>
|
||||||
|
URL pre-fill
|
||||||
|
</div>
|
||||||
|
<div class="flex font-bold my-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
|
||||||
|
</svg>
|
||||||
|
Unique submission ID
|
||||||
|
</div>
|
||||||
|
<div class="flex font-bold my-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
|
||||||
|
</svg>
|
||||||
|
Hidden fields
|
||||||
|
</div>
|
||||||
|
<div class="flex font-bold my-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
|
||||||
|
</svg>
|
||||||
|
Form password
|
||||||
|
</div>
|
||||||
|
<div class="flex font-bold my-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
|
||||||
|
</svg>
|
||||||
|
Webhooks
|
||||||
|
</div>
|
||||||
|
<div class="flex font-bold my-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
|
||||||
|
</svg>
|
||||||
|
Custom code
|
||||||
|
</div>
|
||||||
|
<div class="flex font-bold my-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
|
||||||
|
</svg>
|
||||||
|
Closing date
|
||||||
|
</div>
|
||||||
|
<div class="flex font-bold my-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
|
||||||
|
</svg>
|
||||||
|
And much more...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="mt-6 flex flex-col">
|
<div class="flex flex-col">
|
||||||
<div class="w-full md:mx-auto flex flex-wrap pb-10 md:pb-20 md:pt-10 relative max-w-5xl">
|
<div class="w-full md:mx-auto flex flex-wrap pb-10 md:pb-20 md:pt-10 relative max-w-5xl">
|
||||||
<div
|
<div
|
||||||
class="flex flex-col justify-center w-full lg:w-1/2 text-center lg:text-left lg:pr-10 p-6 lg:p-10 relative z-10"
|
class="flex flex-col justify-center w-full text-center lg:pr-10 p-6 lg:p-10 relative z-10"
|
||||||
>
|
>
|
||||||
<h1 dusk="title" class="text-4xl lg:text-5xl">
|
<h1 dusk="title" class="text-4xl lg:text-5xl">
|
||||||
The Open-Source <br>
|
The Open-Source <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-blue-600">Form Builder</span><br>
|
||||||
<span
|
|
||||||
class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-blue-600"
|
|
||||||
>Form Builder</span><br>
|
|
||||||
</h1>
|
</h1>
|
||||||
<h3 class="mt-6 text-xl text-gray-500 dark:text-gray-400 max-w-xl mx-auto">
|
<h3 class="mt-6 text-xl text-gray-500 dark:text-gray-400 max-w-xl mx-auto">
|
||||||
Create beautiful forms and share them anywhere. It takes seconds, you don't need to know how to code
|
Create beautiful forms and share them anywhere. It takes seconds, you don't need to know how to code
|
||||||
|
|
@ -17,69 +14,83 @@
|
||||||
class="font-semibold"
|
class="font-semibold"
|
||||||
>it's free</span>.
|
>it's free</span>.
|
||||||
</h3>
|
</h3>
|
||||||
<div class="mt-6 flex justify-center lg:justify-start">
|
<div class="mt-6 flex justify-center">
|
||||||
<router-link class="mr-1" :to="{ name: 'register' }">
|
<router-link class="mr-1" :to="{ name: 'register' }">
|
||||||
<v-button v-track.welcome_create_form_click>
|
<v-button v-track.welcome_create_form_click :arrow="true" class="py-4" color="nt-blue">
|
||||||
Create an OpnForm for free
|
Create a form for FREE
|
||||||
</v-button>
|
</v-button>
|
||||||
</router-link>
|
</router-link>
|
||||||
<a class="ml-1" :href="githubUrl" target="_blank">
|
</div>
|
||||||
<v-button color="gray" shade="lighter" v-track.github_link_click>
|
<div class="justify-center flex mt-10">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="w-6 h-6 text-gray-600" viewBox="0 0 256 250" version="1.1" preserveAspectRatio="xMidYMid">
|
<div class="flex text-gray-400 mr-4">
|
||||||
<g>
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1">
|
||||||
<path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="#161614"/>
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||||
</g>
|
</svg>
|
||||||
</svg>
|
Unlimited forms
|
||||||
</v-button>
|
</div>
|
||||||
</a>
|
<div class="flex text-gray-400 mr-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||||
|
</svg>
|
||||||
|
Unlimited fields
|
||||||
|
</div>
|
||||||
|
<div class="flex text-gray-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||||
|
</svg>
|
||||||
|
Unlimited responses
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full lg:w-1/2 relative px-6 sm:px-10 lg:px-0 z-10 lg:pr-10 flex items-center justify-center">
|
<div class="w-full relative px-6 sm:px-10 lg:px-0 z-10 lg:pr-10 flex items-center justify-center">
|
||||||
<img loading="lazy" class="w-full shadow-xl rounded-lg block max-w-2xl lg:max-w-5xl"
|
<img loading="lazy" class="w-full shadow-xl rounded-lg block max-w-2xl lg:max-w-5xl"
|
||||||
:src="asset('img/pages/welcome/product_cover.jpg')" alt="cover-product">
|
:src="asset('img/pages/welcome/product_cover.jpg')" alt="cover-product">
|
||||||
</div>
|
</div>
|
||||||
<div class="z-0 absolute bottom-0 inset-x-0 z-0 w-full opacity-30 dark:opacity-70">
|
|
||||||
<img class="mx-auto" :src="asset('img/pages/welcome/homebackdrop.png')" alt="Backdrop decoration image">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bg-gray-50 dark:bg-notion-dark-light pb-8">
|
<div class="bg-gray-50 dark:bg-notion-dark-light pb-8">
|
||||||
<div class="w-full md:max-w-4xl md:mx-auto px-4 flex flex-wrap">
|
<div class="md:max-w-4xl md:mx-auto w-full">
|
||||||
<features class="pt-16 pb-8" />
|
<features class="pt-16 pb-8" />
|
||||||
<p class="text-center w-full mb-8 font-semibold">
|
|
||||||
And much more!
|
|
||||||
</p>
|
|
||||||
<p class="mt-4 text-center w-full">
|
|
||||||
<router-link :to="{ name: 'register' }">
|
|
||||||
<v-button v-track.welcome_create_form_click>
|
|
||||||
Create an OpnForm for free
|
|
||||||
</v-button>
|
|
||||||
</router-link>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-full dark:bg-notion-dark-light">
|
<div class="w-full bg-blue-700 p-28 text-center">
|
||||||
<div class="w-full bg-blue-500 p-10 relative">
|
<h4 class="font-bold text-4xl text-white">Take your forms to the next level</h4>
|
||||||
<div class="md:max-w-3xl md:mx-auto flex flex-wrap relative z-10">
|
<p class="text-gray-300 my-8">No trial. Generous, unlimited free plan.</p>
|
||||||
<div class="flex items-center">
|
<div class="mt-6 flex justify-center">
|
||||||
<div class="text-2xl font-bold">
|
<router-link class="mr-1" :to="{ name: 'register' }">
|
||||||
<h3 class="text-white">
|
<v-button v-track.welcome_create_form_click :arrow="true" class="py-4" color="nt-blue">
|
||||||
The contact form below is an <span class="text-gray-900">OpnForm</span>.
|
Create a form for FREE
|
||||||
It can be created for free and it uses open-source code!
|
</v-button>
|
||||||
</h3>
|
</router-link>
|
||||||
</div>
|
|
||||||
<img class="w-32 hidden md:block md:ml-6" loading="lazy" :src="asset('img/icons/sparks.png')" alt="contact-form">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full dark:bg-notion-dark">
|
<div class="flex justify-center mt-6">
|
||||||
<div class="md:max-w-3xl md:mx-auto px-4 flex flex-wrap pt-6">
|
<a target="_blank" href="" class="mr-4">
|
||||||
<iframe class="w-full" height="450px" src="https://opnform.com/forms/my-form" />
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="w-8 h-8 text-white" viewBox="0 0 256 250" version="1.1" preserveAspectRatio="xMidYMid">
|
||||||
</div>
|
<g>
|
||||||
|
<path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="#161614"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a target="_blank" href="" class="mr-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="w-8 h-8 text-white" viewBox="0 0 256 250" version="1.1" preserveAspectRatio="xMidYMid">
|
||||||
|
<g>
|
||||||
|
<path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="#161614"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a target="_blank" href="" class="mr-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="w-8 h-8 text-white" viewBox="0 0 256 250" version="1.1" preserveAspectRatio="xMidYMid">
|
||||||
|
<g>
|
||||||
|
<path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="#161614"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<open-form-footer class="dark:border-t border-t" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<open-form-footer class="dark:border-t border-t" />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -114,7 +125,6 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
githubUrl: () => window.config.links.github_url,
|
|
||||||
...mapGetters({
|
...mapGetters({
|
||||||
authenticated: 'auth/check'
|
authenticated: 'auth/check'
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue