village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

NuxtImg Migration (#279) 

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
formsdev 2024-01-05 16:11:49 +05:30 committed by GitHub
parent 8b92f24094
commit 27ece34226
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 67 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/forms/ImageInput.vue
View File

@ -22,7 +22,7 @@
</div> </div>
<div v-else class="h-6 text-gray-600 dark:text-gray-400 flex"> <div v-else class="h-6 text-gray-600 dark:text-gray-400 flex">
<div class="flex-grow"> <div class="flex-grow">
<img :src="currentUrl" class="h-6 rounded shadow-md"> <NuxtImg :src="currentUrl" class="h-6 rounded shadow-md"/>
</div> </div>
<a href="#" class="hover:text-nt-blue flex" @click.prevent="clearUrl"> <a href="#" class="hover:text-nt-blue flex" @click.prevent="clearUrl">
<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"

2
client/components/forms/components/UploadedFile.vue
View File

@ -4,7 +4,7 @@
:title="file.file.name" :title="file.file.name"
> >
<div v-if="file.src && !isImageHide" class="h-20 overflow-hidden flex"> <div v-if="file.src && !isImageHide" class="h-20 overflow-hidden flex">
<img class="block object-cover object-center w-full" :src="file.src" @error="isImageHide=true"> <NuxtImg class="block object-cover object-center w-full" :src="file.src" @error="isImageHide=true"/>
</div> </div>
<div v-else class="h-20 flex items-center justify-center"> <div v-else class="h-20 flex items-center justify-center">
<svg class="w-10 h-10 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" <svg class="w-10 h-10 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"

10
client/components/global/Navbar.vue
View File

@ -5,12 +5,8 @@
<div class="flex items-center"> <div class="flex items-center">
<NuxtLink :to="{ name: user ? 'home' : 'index' }" <NuxtLink :to="{ name: user ? 'home' : 'index' }"
class="flex-shrink-0 font-semibold hover:no-underline flex items-center"> class="flex-shrink-0 font-semibold hover:no-underline flex items-center">
<img src="/img/logo.svg" alt="notion tools logo" class="w-8 h-8"> <NuxtImg src="/img/logo.svg" alt="notion tools logo" class="w-8 h-8"/>
<span class="ml-2 text-md hidden sm:inline text-black dark:text-white">OpnForm</span>
<span
class="ml-2 text-md hidden sm:inline text-black dark:text-white"
>
OpnForm</span>
</NuxtLink> </NuxtLink>
<workspace-dropdown class="ml-6"/> <workspace-dropdown class="ml-6"/>
</div> </div>
@ -57,7 +53,7 @@
class="flex items-center justify-center w-full rounded-md px-4 py-2 text-sm text-gray-700 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500" class="flex items-center justify-center w-full rounded-md px-4 py-2 text-sm text-gray-700 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500"
dusk="nav-dropdown-button" @click.stop="toggle()" dusk="nav-dropdown-button" @click.stop="toggle()"
> >
<img :src="user.photo_url" class="rounded-full w-6 h-6"> <NuxtImg :src="user.photo_url" class="rounded-full w-6 h-6"/>
<p class="ml-2 hidden sm:inline"> <p class="ml-2 hidden sm:inline">
{{ user.name }} {{ user.name }}
</p> </p>

8
client/components/global/WorkspaceDropdown.vue
View File

@ -6,10 +6,10 @@
<template v-if="workspace" #trigger="{toggle}"> <template v-if="workspace" #trigger="{toggle}">
<div class="flex items-center cursor group" role="button" @click.stop="toggle()"> <div class="flex items-center cursor group" role="button" @click.stop="toggle()">
<div class="rounded-full h-8 8"> <div class="rounded-full h-8 8">
<img v-if="isUrl(workspace.icon)" <NuxtImg v-if="isUrl(workspace.icon)"
:src="workspace.icon" :src="workspace.icon"
:alt="workspace.name + ' icon'" class="flex-shrink-0 h-8 w-8 rounded-full shadow" :alt="workspace.name + ' icon'" class="flex-shrink-0 h-8 w-8 rounded-full shadow"
> />
<div v-else class="rounded-full pt-2 text-xs truncate bg-nt-blue-lighter h-8 w-8 text-center shadow" <div v-else class="rounded-full pt-2 text-xs truncate bg-nt-blue-lighter h-8 w-8 text-center shadow"
v-text="workspace.icon" v-text="workspace.icon"
/> />
@ -26,10 +26,10 @@
:class="{'bg-blue-100 dark:bg-blue-900':workspace.id === worksp.id}" @click.prevent="switchWorkspace(worksp)" :class="{'bg-blue-100 dark:bg-blue-900':workspace.id === worksp.id}" @click.prevent="switchWorkspace(worksp)"
> >
<div class="rounded-full h-8 w-8 flex-shrink-0" role="button"> <div class="rounded-full h-8 w-8 flex-shrink-0" role="button">
<img v-if="isUrl(worksp.icon)" <NuxtImg v-if="isUrl(worksp.icon)"
:src="worksp.icon" :src="worksp.icon"
:alt="worksp.name + ' icon'" class="flex-shrink-0 h-8 w-8 rounded-full shadow" :alt="worksp.name + ' icon'" class="flex-shrink-0 h-8 w-8 rounded-full shadow"
> />
<div v-else class="rounded-full flex-shrink-0 pt-1 text-xs truncate bg-nt-blue-lighter h-8 w-8 text-center shadow" <div v-else class="rounded-full flex-shrink-0 pt-1 text-xs truncate bg-nt-blue-lighter h-8 w-8 text-center shadow"
v-text="worksp.icon" v-text="worksp.icon"
/> />

2
client/components/open/forms/OpenFormField.vue
View File

@ -71,7 +71,7 @@
<div v-if="!field.image_block" class="p-4 border border-dashed"> <div v-if="!field.image_block" class="p-4 border border-dashed">
Open <b>{{ field.name }}'s</b> block settings to upload image. Open <b>{{ field.name }}'s</b> block settings to upload image.
</div> </div>
<img v-else :alt="field.name" :src="field.image_block" class="max-w-full"> <NuxtImg v-else :alt="field.name" :src="field.image_block" class="max-w-full"/>
</div> </div>
</template> </template>
</div> </div>

4
client/components/open/forms/components/FormStats.vue
View File

@ -13,10 +13,10 @@
</p> </p>
</div> </div>
</div> </div>
<img src="/img/pages/forms/blurred_graph.png" <NuxtImg src="/img/pages/forms/blurred_graph.png"
alt="Sample Graph" alt="Sample Graph"
class="mx-auto filter blur-md z-0" class="mx-auto filter blur-md z-0"
> />
</div> </div>
<Loader v-else-if="isLoading" class="h-6 w-6 text-nt-blue mx-auto" /> <Loader v-else-if="isLoading" class="h-6 w-6 text-nt-blue mx-auto" />

6
client/components/open/forms/components/form-components/FormEditorPreview.vue
View File

@ -16,16 +16,16 @@
<div id="cover-picture" <div id="cover-picture"
class="max-h-56 rounded-t-lg w-full overflow-hidden flex items-center justify-center" class="max-h-56 rounded-t-lg w-full overflow-hidden flex items-center justify-center"
> >
<img alt="Cover Picture" :src="coverPictureSrc(form.cover_picture)" class="w-full"> <NuxtImg alt="Cover Picture" :src="coverPictureSrc(form.cover_picture)" class="w-full"/>
</div> </div>
</div> </div>
<div v-if="form.logo_picture" class="w-full mx-auto p-5 relative" <div v-if="form.logo_picture" class="w-full mx-auto p-5 relative"
:class="{'pt-20':!form.cover_picture, 'max-w-lg': form && (form.width === 'centered')}" :class="{'pt-20':!form.cover_picture, 'max-w-lg': form && (form.width === 'centered')}"
> >
<img alt="Logo Picture" :src="coverPictureSrc(form.logo_picture)" <NuxtImg alt="Logo Picture" :src="coverPictureSrc(form.logo_picture)"
:class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}" :class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
class="w-20 h-20 object-contain absolute left-5 transition-all" class="w-20 h-20 object-contain absolute left-5 transition-all"
> />
</div> </div>
</div> </div>
</transition> </transition>

2
client/components/open/tables/components/OpenFile.vue
View File

@ -8,7 +8,7 @@
rel="nofollow" rel="nofollow"
> >
<div v-if="isImage(file.file_url)" class="w-8 h-8"> <div v-if="isImage(file.file_url)" class="w-8 h-8">
<img class="object-cover h-full w-full rounded" :src="file.file_url"> <NuxtImg class="object-cover h-full w-full rounded" :src="file.file_url"/>
</div> </div>
<span v-else <span v-else
class="py-1 px-2" class="py-1 px-2"

3
client/components/pages/OpenFormFooter.vue
View File

@ -8,8 +8,7 @@
</div> </div>
<div class="flex justify-center mt-5 md:mt-0"> <div class="flex justify-center mt-5 md:mt-0">
<NuxtLink :to="{ name: user ? 'home' : 'index' }" class="flex-shrink-0 font-semibold flex items-center"> <NuxtLink :to="{ name: user ? 'home' : 'index' }" class="flex-shrink-0 font-semibold flex items-center">
<img src="/img/logo.svg" alt="notion tools logo" class="w-10 h-10"> <NuxtImg src="/img/logo.svg" alt="notion tools logo" class="w-10 h-10"/>
<span class="ml-2 text-xl text-black dark:text-white"> <span class="ml-2 text-xl text-black dark:text-white">
OpnForm OpnForm
</span> </span>

2
client/components/pages/forms/show/FormQrCode.vue
View File

@ -3,7 +3,7 @@
<h3 class="font-semibold text-xl">QR Code</h3> <h3 class="font-semibold text-xl">QR Code</h3>
<p>Scan the QR code to open the form (Right click to copy the image)</p> <p>Scan the QR code to open the form (Right click to copy the image)</p>
<div class="flex items-center"> <div class="flex items-center">
<img v-if="QrUrl" :src="QrUrl" class="m-auto" /> <NuxtImg v-if="QrUrl" :src="QrUrl" class="m-auto" />
</div> </div>
</div> </div>
</template> </template>

4
client/components/pages/templates/SingleTemplate.vue
View File

@ -17,9 +17,9 @@
</div> </div>
<div class="aspect-[4/3] rounded-lg shadow-sm overflow-hidden"> <div class="aspect-[4/3] rounded-lg shadow-sm overflow-hidden">
<img class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full" <NuxtImg class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full"
:src="template.image_url" alt="" :src="template.image_url" alt=""
> />
</div> </div>
<p <p
class="text-lg font-semibold leading-tight tracking-tight text-gray-900 mt-4 group-hover:text-blue-500 transition-all duration-150" class="text-lg font-semibold leading-tight tracking-tight text-gray-900 mt-4 group-hover:text-blue-500 transition-all duration-150"

7
client/components/pages/welcome/AiFeature.vue
View File

@ -5,8 +5,7 @@
<div <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"> 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"> <div class="absolute inset-0">
<img class="object-cover object-top w-full h-full" src="/img/pages/ai_form_builder/background-pattern-ai.svg" alt=""> <NuxtImg class="object-cover object-top w-full h-full" src="/img/pages/ai_form_builder/background-pattern-ai.svg" alt=""/>
</div> </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"> <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">
@ -78,8 +77,8 @@
<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"> 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" <NuxtImg class="rounded-t-2xl ring-1 ring-blue-100 lg:rounded-tr-none"
src="/img/pages/ai_form_builder/ai-feature-illustration.svg" alt="App screenshot"> src="/img/pages/ai_form_builder/ai-feature-illustration.svg" alt="App screenshot"/>
</div> </div>
</div> </div>

4
client/components/pages/welcome/Features.vue
View File

@ -84,8 +84,8 @@
</div> </div>
<div class="w-full md:w-1/2 lg:w-7/12 flex items-center justify-center relative w-full" <div class="w-full md:w-1/2 lg:w-7/12 flex items-center justify-center relative w-full"
:class="{'md:pr-8':index%2==1, 'md:pl-8':index%2==0}"> :class="{'md:pr-8':index%2==1, 'md:pl-8':index%2==0}">
<img loading="lazy" class="block rounded-2xl w-full" <NuxtImg loading="lazy" class="block rounded-2xl w-full"
:src="step.img" alt="cover-product"> :src="step.img" alt="cover-product"/>
</div> </div>
</div> </div>

4
client/components/vendor/appsumo/AppSumoBilling.vue vendored
View File

@ -1,9 +1,9 @@
<template> <template>
<div v-if="user.active_license" class="border p-5 shadow-md rounded-md"> <div v-if="user.active_license" class="border p-5 shadow-md rounded-md">
<div class="w-auto flex flex-col items-center"> <div class="w-auto flex flex-col items-center">
<img src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px]" alt="AppSumo"> <NuxtImg src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px]" alt="AppSumo"/>
<img src="/img/appsumo/as-Select-dark.png" class="max-w-[150px]" alt="AppSumo"> <NuxtImg src="/img/appsumo/as-Select-dark.png" class="max-w-[150px]" alt="AppSumo"/>
</div> </div>
<p class="mt-6"> <p class="mt-6">

8
client/components/vendor/appsumo/AppSumoRegister.vue vendored
View File

@ -1,8 +1,8 @@
<template> <template>
<div v-if="hasValidLicense" class="p-6 bg-white border shadow-md rounded-md"> <div v-if="hasValidLicense" class="p-6 bg-white border shadow-md rounded-md">
<img src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px] mx-auto" alt="AppSumo"> <NuxtImg src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px] mx-auto" alt="AppSumo"/>
<img src="/img/appsumo/as-Select-dark.png" class="max-w-[300px] mx-auto" alt="AppSumo"> <NuxtImg src="/img/appsumo/as-Select-dark.png" class="max-w-[300px] mx-auto" alt="AppSumo"/>
<p class="mt-6"> <p class="mt-6">
<span class="text-green-500">We found your AppSumo Lifetime deal license!</span> Just complete the registration form to finalize the activation of <span class="text-green-500">We found your AppSumo Lifetime deal license!</span> Just complete the registration form to finalize the activation of
@ -10,9 +10,9 @@
</p> </p>
</div> </div>
<div v-else-if="hasLicenseError" class="p-6 bg-white border border-red-500 shadow-md rounded-md"> <div v-else-if="hasLicenseError" class="p-6 bg-white border border-red-500 shadow-md rounded-md">
<img src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px] mx-auto" alt="AppSumo"> <NuxtImg src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px] mx-auto" alt="AppSumo"/>
<img src="/img/appsumo/as-Select-dark.png" class="max-w-[300px] mx-auto" alt="AppSumo"> <NuxtImg src="/img/appsumo/as-Select-dark.png" class="max-w-[300px] mx-auto" alt="AppSumo"/>
<p class="mt-6"> <p class="mt-6">
<span class="text-red-600">Invalid AppSumo license</span>. The license was probably already attached to an OpnForm account. Please contact support. <span class="text-red-600">Invalid AppSumo license</span>. The license was probably already attached to an OpnForm account. Please contact support.

2
client/error.vue
View File

@ -2,7 +2,7 @@
<NuxtLayout> <NuxtLayout>
<div class="flex mt-6"> <div class="flex mt-6">
<div class="w-full md:w-2/3 md:mx-auto md:max-w-md"> <div class="w-full md:w-2/3 md:mx-auto md:max-w-md">
<img alt="Nice plant as we have nothing else to show!" src="/img/icons/plant.png" class="w-56 mb-5"> <NuxtImg alt="Nice plant as we have nothing else to show!" src="/img/icons/plant.png" class="w-56 mb-5"/>
<h1 class="mb-4 font-semibold text-3xl text-gray-900"> <h1 class="mb-4 font-semibold text-3xl text-gray-900">
Page Not Found Page Not Found

1
client/nuxt.config.ts
View File

@ -15,6 +15,7 @@ export default defineNuxtConfig({
'@vueuse/motion/nuxt', '@vueuse/motion/nuxt',
'nuxt3-notifications', 'nuxt3-notifications',
'nuxt-simple-sitemap', 'nuxt-simple-sitemap',
'@nuxt/image'
// ... opnformConfig.sentry_dsn ? ['@nuxtjs/sentry'] : [], // ... opnformConfig.sentry_dsn ? ['@nuxtjs/sentry'] : [],
], ],
build: { build: {

1
client/package.json
View File

@ -22,6 +22,7 @@
}, },
"dependencies": { "dependencies": {
"@hcaptcha/vue3-hcaptcha": "^1.3.0", "@hcaptcha/vue3-hcaptcha": "^1.3.0",
"@nuxt/image": "^1.1.0",
"@nuxtjs/sentry": "^8.0.6", "@nuxtjs/sentry": "^8.0.6",
"@pinia/nuxt": "^0.5.1", "@pinia/nuxt": "^0.5.1",
"@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/aspect-ratio": "^0.4.2",

44
client/pages/ai-form-builder.vue
View File

@ -3,7 +3,7 @@
<!-- START HERO --> <!-- 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"> <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"> <div class="absolute inset-0">
<img class="w-full h-full object-cover object-top" src="/img/pages/ai_form_builder/background-pattern.svg" alt=""> <NuxtImg class="w-full h-full object-cover object-top" src="/img/pages/ai_form_builder/background-pattern.svg" alt=""/>
</div> </div>
@ -42,7 +42,7 @@
<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"> 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"> <div class="flex items-start gap-4">
<img class="w-12 h-12 shrink-0" src="/img/pages/ai_form_builder/icon-fast.svg" alt=""> <NuxtImg class="w-12 h-12 shrink-0" src="/img/pages/ai_form_builder/icon-fast.svg" alt=""/>
<div> <div>
<p class="text-md font-semibold text-gray-900"> <p class="text-md font-semibold text-gray-900">
@ -55,7 +55,7 @@
</div> </div>
<div class="flex items-start gap-4"> <div class="flex items-start gap-4">
<img class="w-12 h-12 shrink-0" src="/img/pages/ai_form_builder/icon-customization.svg" alt=""> <NuxtImg class="w-12 h-12 shrink-0" src="/img/pages/ai_form_builder/icon-customization.svg" alt=""/>
<div> <div>
<p class="text-md font-semibold text-gray-900"> <p class="text-md font-semibold text-gray-900">
@ -68,7 +68,7 @@
</div> </div>
<div class="flex items-start gap-4"> <div class="flex items-start gap-4">
<img class="w-12 h-12 shrink-0" src="/img/pages/ai_form_builder/icon-browser.svg" alt=""> <NuxtImg class="w-12 h-12 shrink-0" src="/img/pages/ai_form_builder/icon-browser.svg" alt=""/>
<div> <div>
<p class="text-md font-semibold text-gray-900"> <p class="text-md font-semibold text-gray-900">
@ -103,8 +103,8 @@
<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"> 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"> <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" <NuxtImg class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm"
src="/img/pages/ai_form_builder/step-1.svg" alt=""> src="/img/pages/ai_form_builder/step-1.svg" alt=""/>
<div <div
@ -113,7 +113,7 @@
</div> </div>
<div class="lg:flex-1 lg:shrink-0"> <div class="lg:flex-1 lg:shrink-0">
<img class="w-auto h-16 hidden lg:block" src="/img/pages/ai_form_builder/icon-create.svg" alt=""> <NuxtImg class="w-auto h-16 hidden lg:block" src="/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"> <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 lg:mt-8">
Building forms made easy Building forms made easy
@ -129,18 +129,16 @@
</div> </div>
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 lg:gap-12"> <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 lg:gap-12">
<img <NuxtImg
class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm lg:order-3" 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="/img/pages/ai_form_builder/step-2.svg" alt=""> src="/img/pages/ai_form_builder/step-2.svg" alt=""/>
<div <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"> 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 2
</div> </div>
<div class="lg:flex-1 lg:shrink-0 lg:order-1"> <div class="lg:flex-1 lg:shrink-0 lg:order-1">
<img class="w-auto h-16 hidden lg:block" src="/img/pages/ai_form_builder/icon-customization.svg" alt=""> <NuxtImg class="w-auto h-16 hidden lg:block" src="/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"> <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 lg:mt-8">
Customized forms work wonders Customized forms work wonders
@ -154,17 +152,15 @@
</div> </div>
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 lg:gap-12"> <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" <NuxtImg class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm"
src="/img/pages/ai_form_builder/step-3.svg" alt=""> src="/img/pages/ai_form_builder/step-3.svg" alt=""/>
<div <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"> 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 3
</div> </div>
<div class="lg:flex-1 lg:shrink-0"> <div class="lg:flex-1 lg:shrink-0">
<img class="w-auto h-16 hidden lg:block" src="/img/pages/ai_form_builder/icon-share.svg" alt=""> <NuxtImg class="w-auto h-16 hidden lg:block" src="/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"> <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 lg:mt-8">
Share your forms anywhere Share your forms anywhere
@ -204,7 +200,7 @@
<!-- <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="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-8 sm:mt-12 lg:mt-16">-->
<!-- <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">--> <!-- 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="/img/pages/ai_form_builder/examples-placeholder.png" alt=""> <!-- <NuxtImg class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
--> -->
<!-- <div class="px-4 py-5 sm:p-6">--> <!-- <div class="px-4 py-5 sm:p-6">-->
<!-- <h3 class="text-lg font-semibold text-gray-900">--> <!-- <h3 class="text-lg font-semibold text-gray-900">-->
@ -218,7 +214,7 @@
<!-- <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">--> <!-- 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="/img/pages/ai_form_builder/examples-placeholder.png" alt=""> <!-- <NuxtImg class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
--> -->
<!-- <div class="px-4 py-5 sm:p-6">--> <!-- <div class="px-4 py-5 sm:p-6">-->
<!-- <h3 class="text-lg font-semibold text-gray-900">--> <!-- <h3 class="text-lg font-semibold text-gray-900">-->
@ -232,7 +228,7 @@
<!-- <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">--> <!-- 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="/img/pages/ai_form_builder/examples-placeholder.png" alt=""> <!-- <NuxtImg class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
--> -->
<!-- <div class="px-4 py-5 sm:p-6">--> <!-- <div class="px-4 py-5 sm:p-6">-->
<!-- <h3 class="text-lg font-semibold text-gray-900">--> <!-- <h3 class="text-lg font-semibold text-gray-900">-->
@ -246,7 +242,7 @@
<!-- <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">--> <!-- 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="/img/pages/ai_form_builder/examples-placeholder.png" alt=""> <!-- <NuxtImg class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
--> -->
<!-- <div class="px-4 py-5 sm:p-6">--> <!-- <div class="px-4 py-5 sm:p-6">-->
<!-- <h3 class="text-lg font-semibold text-gray-900">--> <!-- <h3 class="text-lg font-semibold text-gray-900">-->
@ -426,11 +422,11 @@
<section class="bg-gradient-to-b from-gray-100 to-white py-12 sm:py-16 lg:pt-20 xl:pt-24"> <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="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
<div class="flex items-center justify-center gap-8"> <div class="flex items-center justify-center gap-8">
<img class="w-auto h-12" src="/img/pages/ai_form_builder/icon-email-input.svg" alt=""> <NuxtImg class="w-auto h-12" src="/img/pages/ai_form_builder/icon-email-input.svg" alt=""/>
<img class="w-auto h-12" src="/img/pages/ai_form_builder/icon-radio-buttons.svg" alt=""> <NuxtImg class="w-auto h-12" src="/img/pages/ai_form_builder/icon-radio-buttons.svg" alt=""/>
<img class="w-auto h-12" src="/img/pages/ai_form_builder/icon-textarea.svg" alt=""> <NuxtImg class="w-auto h-12" src="/img/pages/ai_form_builder/icon-textarea.svg" alt=""/>
</div> </div>

6
client/pages/forms/[slug]/index.vue
View File

@ -3,16 +3,16 @@
<div v-if="form && !isIframe && (form.logo_picture || form.cover_picture)"> <div v-if="form && !isIframe && (form.logo_picture || form.cover_picture)">
<div v-if="form.cover_picture"> <div v-if="form.cover_picture">
<div id="cover-picture" class="max-h-56 w-full overflow-hidden flex items-center justify-center"> <div id="cover-picture" class="max-h-56 w-full overflow-hidden flex items-center justify-center">
<img alt="Form Cover Picture" :src="form.cover_picture" class="w-full"> <NuxtImg alt="Form Cover Picture" :src="form.cover_picture" class="w-full"/>
</div> </div>
</div> </div>
<div v-if="form.logo_picture" class="w-full p-5 relative mx-auto" <div v-if="form.logo_picture" class="w-full p-5 relative mx-auto"
:class="{'pt-20':!form.cover_picture, 'md:w-3/5 lg:w-1/2 md:max-w-2xl': form.width === 'centered', 'max-w-7xl': (form.width === 'full' && !isIframe) }" :class="{'pt-20':!form.cover_picture, 'md:w-3/5 lg:w-1/2 md:max-w-2xl': form.width === 'centered', 'max-w-7xl': (form.width === 'full' && !isIframe) }"
> >
<img alt="Logo Picture" :src="form.logo_picture" <NuxtImg alt="Logo Picture" :src="form.logo_picture"
:class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}" :class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
class="w-20 h-20 object-contain absolute left-5 transition-all" class="w-20 h-20 object-contain absolute left-5 transition-all"
> />
</div> </div>
</div> </div>
<div class="w-full mx-auto px-4" <div class="w-full mx-auto px-4"

4
client/pages/home.vue
View File

@ -40,9 +40,9 @@
</div> </div>
</div> </div>
<div v-if="!formsLoading && enrichedForms.length === 0" class="flex flex-wrap justify-center max-w-4xl"> <div v-if="!formsLoading && enrichedForms.length === 0" class="flex flex-wrap justify-center max-w-4xl">
<img loading="lazy" class="w-56" <NuxtImg loading="lazy" class="w-56"
src="/img/pages/forms/search_notfound.png" alt="search-not-found" src="/img/pages/forms/search_notfound.png" alt="search-not-found"
> />
<h3 class="w-full mt-4 text-center text-gray-900 font-semibold"> <h3 class="w-full mt-4 text-center text-gray-900 font-semibold">
No forms found No forms found

8
client/pages/index.vue
View File

@ -2,9 +2,9 @@
<div> <div>
<section class="bg-gradient-to-b relative from-white to-gray-100 py-8 sm:py-16 "> <section class="bg-gradient-to-b relative from-white to-gray-100 py-8 sm:py-16 ">
<div class="absolute inset-0"> <div class="absolute inset-0">
<img class="w-full h-full object-cover object-top" <NuxtImg class="w-full h-full object-cover object-top"
src="/img/pages/ai_form_builder/background-pattern.svg" alt="" src="/img/pages/ai_form_builder/background-pattern.svg" alt=""
> />
</div> </div>
<div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative -mb-32 md:-mb-52 lg:-mb-72"> <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative -mb-32 md:-mb-52 lg:-mb-72">
@ -88,9 +88,9 @@
<div <div
class="-m-2 rounded-xl bg-blue-900/5 p-2 backdrop-blur-sm ring-1 ring-inset ring-blue-900/10 lg:-m-4 lg:rounded-2xl lg:p-4" class="-m-2 rounded-xl bg-blue-900/5 p-2 backdrop-blur-sm ring-1 ring-inset ring-blue-900/10 lg:-m-4 lg:rounded-2xl lg:p-4"
> >
<img src="/img/pages/welcome/product-cover.jpg" <NuxtImg src="/img/pages/welcome/product-cover.jpg"
alt="Product screenshot" loading="lazy" class="rounded-md shadow-2xl ring-1 ring-gray-900/10" alt="Product screenshot" loading="lazy" class="rounded-md shadow-2xl ring-1 ring-gray-900/10"
> />
</div> </div>
</div> </div>
</div> </div>

4
client/pages/settings/workspace.vue
View File

@ -25,9 +25,9 @@
<div v-else-if="workspace"> <div v-else-if="workspace">
<div class="mt-4 flex group bg-white items-center"> <div class="mt-4 flex group bg-white items-center">
<div class="flex space-x-4 flex-grow items-center"> <div class="flex space-x-4 flex-grow items-center">
<img v-if="isUrl(workspace.icon)" :src="workspace.icon" :alt="workspace.name + ' icon'" <NuxtImg v-if="isUrl(workspace.icon)" :src="workspace.icon" :alt="workspace.name + ' icon'"
class="rounded-full h-12 w-12" class="rounded-full h-12 w-12"
> />
<div v-else class="rounded-2xl bg-gray-100 h-12 w-12 text-2xl pt-2 text-center overflow-hidden" <div v-else class="rounded-2xl bg-gray-100 h-12 w-12 text-2xl pt-2 text-center overflow-hidden"
v-text="workspace.icon" v-text="workspace.icon"
/> />

4
client/pages/templates/[slug].vue
View File

@ -33,9 +33,9 @@
<div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl"> <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
<div class="flex flex-col items-center justify-center max-w-4xl gap-8 mx-auto md:gap-12 md:flex-row"> <div class="flex flex-col items-center justify-center max-w-4xl gap-8 mx-auto md:gap-12 md:flex-row">
<div class="aspect-[4/3] shrink-0 rounded-lg shadow-sm overflow-hidden group max-w-xs"> <div class="aspect-[4/3] shrink-0 rounded-lg shadow-sm overflow-hidden group max-w-xs">
<img class="object-cover w-full h-full transition-all duration-200 group-hover:scale-110" <NuxtImg class="object-cover w-full h-full transition-all duration-200 group-hover:scale-110"
:src="template.image_url" alt="Template cover image" :src="template.image_url" alt="Template cover image"
> />
</div> </div>
<div class="flex-1 text-center md:text-left relative"> <div class="flex-1 text-center md:text-left relative">