matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Julien Nahum
2022-09-20 21:59:52 +02:00
commit f8e6cd4dd6
479 changed files with 77078 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
resources/js/components/pages/OpenFormFooter.vue Normal file
View File

@@ -0,0 +1,183 @@
<template>
<div class="w-full bg-gray-50 dark:bg-notion-dark p-10">
<div class="px-4 py-6 w-full md:max-w-3xl md:mx-auto md:px-24 lg:px-8">
<div class="flex flex-wrap">
<div class="md:max-w-md lg:col-span-2 mr-2 pr-2">
<a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
<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>
</a>
</div>
<div class="grid grid-cols-2 gap-5 row-gap-8 lg:col-span-4 md:grid-cols-3">
<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>
<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>-->
<!-- <router-link :to="{name:'discount-community'}"-->
<!-- class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"-->
<!-- >-->
<!-- Student 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"-->
<!-- >-->
<!-- 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>
</div>
</template>
<script>
export default {
data: () => ({}),
computed: {
helpUrl: () => window.config.links.help_url,
changelogUrl: () => window.config.links.changelog_url,
facebookGroupUrl: () => window.config.links.facebook_group,
twitterUrl: () => window.config.links.twitter,
featureRequestsUrl: () => window.config.links.feature_requests
},
mounted () {
this.loadCannyChangelog()
},
methods: {
loadCannyChangelog () {
this.$loadScript('https://canny.io/sdk.js')
.then(() => {
window.Canny('initChangelog', {
appID: '6267ca97f968c052891e7f8b',
position: 'top',
align: 'left'
})
})
}
}
}
</script>
<style>
.Canny_Badge {
background-color: #3B82F6 !important;
top: 5px !important;
right: 12px !important;
}
</style>

55
resources/js/components/pages/StopImpersonation.vue Normal file
View File

@@ -0,0 +1,55 @@
<template>
<transition name="fade">
<button v-if="isImpersonating"
class="cursor-pointer group hover:bg-blue-50 text-gray-600 py-2 px-5 fixed bottom-0 left-0 rounded-tr-md bg-white border-t border-r"
@click="reverseImpersonation"
>
<template v-if="!loading">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 -mt-1 group-hover:text-blue-500 inline text-gray-400"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
/>
</svg>
Stop Impersonation
</template>
<template v-else>
<div class="px-6">
<loader class="h-4 w-4 inline" />
</div>
</template>
</button>
</transition>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data: () => ({
loading: false
}),
computed: {
...mapGetters({
isImpersonating: 'auth/isImpersonating'
})
},
mounted () {
},
methods: {
reverseImpersonation () {
this.loading = true
this.$store.dispatch('auth/stopImpersonating')
.then(() => {
this.$store.commit('open/workspaces/set', [])
this.$router.push({ name: 'settings.admin' })
this.loading = false
})
}
}
}
</script>

102
resources/js/components/pages/forms/NewFeatures.vue Normal file
View File

@@ -0,0 +1,102 @@
<template>
<div id="new-features"
class="w-full bg-gray-50 dark:bg-gray-800 border rounded-lg mt-4"
>
<div class="border-b">
<div v-track.new_in_notionforms_click
class="relative flex items-center cursor-pointer hover:bg-gray-100 p-4" role="button"
@click.prevent="showNewFeatures=!showNewFeatures"
>
<div class="text-gray-700 dark:text-gray-300 pr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round"
d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
/>
</svg>
</div>
<div>
<p class="text-gray-700 dark:text-gray-300 font-semibold">
New in OpnForm
</p>
<p class="text-sm text-gray-700 dark:text-gray-300">
Click here to see our new features
</p>
</div>
</div>
<v-transition>
<ul v-if="showNewFeatures" class="list-disc list-inside border-t pt-2 p-4">
<li v-for="changelog in changelogEntries" :key="changelog.id" v-track.new_feature_click class="text-sm">
<a :href="changelog.url" target="_blank" class="text-gray-700 dark:text-gray-300">{{ changelog.title }}</a>
</li>
<li v-track.new_feature_read_more_click class="text-sm">
<a class="text-gray-700 dark:text-gray-300" :href="changelogLink" target="_blank">Read more</a>
</li>
</ul>
</v-transition>
</div>
<div class="relative flex items-center cursor-pointer hover:bg-gray-100 p-4">
<a v-track.feature_request_click="{user_has_forms:user.has_forms}" :href="requestFeatureLink"
class="absolute inset-0" target="_blank"
/>
<div class="text-gray-700 dark:text-gray-300 pr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round"
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
/>
</svg>
</div>
<div>
<p class="text-gray-700 dark:text-gray-300 font-semibold">
An idea for a new feature?
</p>
<p class="text-sm text-gray-700 dark:text-gray-300">
Click here to request a new feature
</p>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
import VTransition from '../../common/transitions/VTransition'
export default {
components: { VTransition },
props: {},
data: () => ({
changelogEntries: [],
showNewFeatures: false
}),
mounted () {
this.loadChangelogEntries()
},
computed: {
...mapGetters({
user: 'auth/user'
}),
requestFeatureLink () {
return window.config.links.feature_requests
},
changelogLink () {
return window.config.links.changelog_url
}
},
methods: {
loadChangelogEntries () {
axios.get('/api/content/changelog/entries').then(response => {
this.changelogEntries = response.data.splice(0, 3)
})
}
}
}
</script>

78
resources/js/components/pages/forms/UrlFormPrefillModal.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<modal :show="show" @close="$emit('close')">
<div id="form-prefill-url-content" ref="content" class="px-4">
<h2 class="text-nt-blue text-3xl font-bold mb-4 flex items-center">
<span>Url Form Prefill</span>
<pro-tag class="ml-4 pb-3" />
</h2>
<p>
Create dynamic links when sharing your form (whether it's embedded or not), that allows you to prefill
your form fields. You can use this to personalize the form when sending it to multiple contacts for instance.
</p>
<h3 class="mt-6 border-t text-xl font-semibold mb-4 pt-6">
How does it work?
</h3>
<p>
Complete your form below and fill only the fields you want to prefill. You can even leave the required fields empty.
</p>
<div class="rounded-lg p-5 bg-gray-100 dark:bg-gray-900 mt-4">
<open-form v-if="form" :theme="theme" :loading="false" :show-hidden="true" :form="form" :fields="form.properties" @submit="generateUrl">
<template #submit-btn="{submitForm}">
<v-button class="mt-2 px-8 mx-1" @click.prevent="submitForm">
Generate Pre-filled URL
</v-button>
</template>
</open-form>
</div>
<template v-if="prefillFormData">
<h3 class="mt-6 text-xl font-semibold mb-4 pt-6">
Your Prefill url
</h3>
<form-url-prefill :form="form" :form-data="prefillFormData" />
</template>
<div class="flex justify-end mt-4">
<v-button color="gray" shade="light" @click="$emit('close')">Close</v-button>
</div>
</div>
</modal>
</template>
<script>
import FormUrlPrefill from '../../open/forms/components/FormUrlPrefill'
import ProTag from '../../common/ProTag'
import OpenForm from '../../open/forms/OpenForm'
import { themes } from '~/config/form-themes'
export default {
name: 'UrlFormPrefillModal',
components: { FormUrlPrefill, ProTag, OpenForm },
props: {
show: { type: Boolean, required: true },
form: { type: Object, required: true }
},
data: () => ({
prefillFormData: null,
theme: themes.default
}),
computed: {},
methods: {
generateUrl (formData, onFailure) {
this.prefillFormData = formData
this.$nextTick().then(() => {
this.$refs.content.parentElement.parentElement.parentElement.scrollTop = (this.$refs.content.offsetHeight - this.$refs.content.parentElement.parentElement.parentElement.offsetHeight + 50)
})
}
}
}
</script>

202
resources/js/components/pages/welcome/Features.vue Normal file
View File

@@ -0,0 +1,202 @@
<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 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>
<p
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"
>
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>
<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
form? Doing a survey? Create a form in 3 minutes and start receiving submissions.
</p>
</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>
<div>
<h6 class="mb-3 text-xl font-bold leading-5">
Customize Everything
</h6>
<p class="mb-3 text-sm dark:text-gray-100 text-gray-900">
Change form themes, change texts, colors, add images, add custom thank you pages and much more.
</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" 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 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" stroke-width="2">
<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" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
</div>
<div>
<h6 class="mb-3 text-xl font-bold leading-5">
Advanced features
</h6>
<p class="mb-3 text-sm dark:text-gray-100 text-gray-900">
Form logic, URL pre-fill, hidden fields, unique submission id, form password, webhooks, custom code, closing date, etc. It's all there!
</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
featuresOnly: {
type: Boolean,
default: false
}
},
data: () => ({}),
methods: {}
}
</script>

45
resources/js/components/pages/welcome/Testimonials.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<iframe v-if="!isDarkMode" id="testimonialto-carousel-all-notionforms"
loading="lazy"
src="https://embed.testimonial.to/carousel/all/notionforms?theme=light&autoplay=on&showmore=on&one-row=on&same-height=off"
frameBorder="0" scrolling="no" width="100%"
/>
<iframe v-else id="testimonialto-carousel-all-notionforms" src="https://embed.testimonial.to/carousel/all/notionforms?theme=dark&autoplay=on&showmore=on&one-row=on&same-height=off" frameborder="0" scrolling="no" width="100%" />
</template>
<script>
export default {
props: {
featuresOnly: {
type: Boolean,
default: false
}
},
data: () => ({}),
computed: {
isDarkMode () {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
}
},
mounted () {
this.loadScript()
},
methods: {
loadScript () {
const script = document.createElement('script')
script.setAttribute('src', 'https://testimonial.to/js/iframeResizer.min.js')
document.head.appendChild(script)
script.addEventListener('load', function () {
window.iFrameResize({
log: false,
checkOrigin: false
}, '#testimonialto-carousel-all-notionforms')
})
}
}
}
</script>