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

NuxtImg Migration (#279)

Browse Source 
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
24 changed files with 67 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@
<!-- START HERO -->
<section class="bg-gradient-to-b relative from-white to-gray-100 py-12 sm:py-16 lg:py-20 xl:py-24">
<div class="absolute inset-0">
<img class="w-full h-full object-cover object-top" src="/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>
@@ -42,7 +42,7 @@
<div
class="grid lg:grid-cols-3 grid-cols-1 sm:max-w-lg lg:max-w-5xl sm:mx-auto gap-8 sm:gap-10 mt-12 sm:mt-16">
<div class="flex items-start gap-4">
<img class="w-12 h-12 shrink-0" src="/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>
<p class="text-md font-semibold text-gray-900">
@@ -55,7 +55,7 @@
</div>
<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>
<p class="text-md font-semibold text-gray-900">
@@ -68,7 +68,7 @@
</div>
<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>
<p class="text-md font-semibold text-gray-900">
@@ -103,8 +103,8 @@
<div
class="space-y-16 text-center lg:text-left sm:max-w-md sm:mx-auto lg:max-w-none lg:space-y-20 xl:space-y-24 mt-8 sm:mt-12 lg:mt-16">
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 lg:gap-12">
<img class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm"
src="/img/pages/ai_form_builder/step-1.svg" alt="">
<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=""/>
<div
@@ -113,7 +113,7 @@
</div>
<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">
Building forms made easy
@@ -129,18 +129,16 @@
</div>
<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"
src="/img/pages/ai_form_builder/step-2.svg" alt="">
src="/img/pages/ai_form_builder/step-2.svg" alt=""/>
<div
class="w-16 h-16 lg:order-2 rounded-full bg-blue-50 border-2 border-blue-200 hidden xl:inline-flex items-center justify-center text-blue-600 text-2xl font-semibold leading-none">
2
</div>
<div class="lg:flex-1 lg:shrink-0 lg:order-1">
<img class="w-auto h-16 hidden lg:block" src="/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">
Customized forms work wonders
@@ -154,17 +152,15 @@
</div>
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 lg:gap-12">
<img class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm"
src="/img/pages/ai_form_builder/step-3.svg" alt="">
<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=""/>
<div
class="w-16 h-16 rounded-full bg-blue-50 border-2 border-blue-200 hidden xl:inline-flex items-center justify-center text-blue-600 text-2xl font-semibold leading-none">
3
</div>
<div class="lg:flex-1 lg:shrink-0">
<img class="w-auto h-16 hidden lg:block" src="/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">
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="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">-->
<!-- <h3 class="text-lg font-semibold text-gray-900">-->
@@ -218,7 +214,7 @@
<!-- <div-->
<!-- class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
<!-- <img class="w-full" src="/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">-->
<!-- <h3 class="text-lg font-semibold text-gray-900">-->
@@ -232,7 +228,7 @@
<!-- <div-->
<!-- class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
<!-- <img class="w-full" src="/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">-->
<!-- <h3 class="text-lg font-semibold text-gray-900">-->
@@ -246,7 +242,7 @@
<!-- <div-->
<!-- class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
<!-- <img class="w-full" src="/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">-->
<!-- <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">
<div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
<div class="flex items-center justify-center gap-8">
<img class="w-auto h-12" src="/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>

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.cover_picture">
<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 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) }"
>
<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="w-20 h-20 object-contain absolute left-5 transition-all"
>
/>
</div>
</div>
<div class="w-full mx-auto px-4"

4
client/pages/home.vue
View File

@@ -40,9 +40,9 @@
</div>
</div>
<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"
>
/>
<h3 class="w-full mt-4 text-center text-gray-900 font-semibold">
No forms found

8
client/pages/index.vue
View File

@@ -2,9 +2,9 @@
<div>
<section class="bg-gradient-to-b relative from-white to-gray-100 py-8 sm:py-16 ">
<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=""
>
/>
</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">
@@ -88,9 +88,9 @@
<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"
>
<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"
>
/>
</div>
</div>
</div>

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

@@ -25,9 +25,9 @@
<div v-else-if="workspace">
<div class="mt-4 flex group bg-white 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"
>
/>
<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"
/>

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="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">
<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"
>
/>
</div>
<div class="flex-1 text-center md:text-left relative">