From 615fa5cda273b44d08a8358c6d6aa1f2f597d015 Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Mon, 18 Sep 2023 16:13:47 +0200
Subject: [PATCH] Copywriting changes

---
 resources/js/components/Navbar.vue            |  17 --
 .../components/pages/pricing/PricingTable.vue |   6 +-
 resources/js/pages/ai-form-builder.vue        |  13 +-
 resources/js/pages/welcome.vue                | 152 +++++++++++-------
 4 files changed, 101 insertions(+), 87 deletions(-)

diff --git a/resources/js/components/Navbar.vue b/resources/js/components/Navbar.vue
index f6d5b57..d3a325e 100644
--- a/resources/js/components/Navbar.vue
+++ b/resources/js/components/Navbar.vue
@@ -113,23 +113,6 @@
                 </div>
               </div>
             </div>
-            <div>
-              <a class="m-1.5" :href="githubUrl" target="_blank">
-                <button
-                  class="duration-200 text-gray-600 hover:text-blue-600 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" fill="currentColor">
-                    <g>
-                      <path fill="currentColor"
-                        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"
-                        />
-                    </g>
-                  </svg>
-                </button>
-              </a>
-            </div>
           </div>
         </div>
       </div>
diff --git a/resources/js/components/pages/pricing/PricingTable.vue b/resources/js/components/pages/pricing/PricingTable.vue
index 964124c..cb6d8f4 100644
--- a/resources/js/components/pages/pricing/PricingTable.vue
+++ b/resources/js/components/pages/pricing/PricingTable.vue
@@ -10,7 +10,7 @@
         <div class="max-w-5xl mx-auto bg-white shadow-xl rounded-3xl ring-1 ring-gray-200 lg:flex isolate">
           <div class="p-8 sm:p-8 lg:flex-auto">
             <h3 v-if="homePage" class="text-3xl font-semibold tracking-tight text-gray-950">
-              Check out our 
+              Check out our
               <span class="ml-2 text-nt-blue">
                 <svg class="inline w-10 h-10" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <g opacity="0.12">
@@ -47,8 +47,8 @@
             </ul>
           </div>
 
-          <div class="p-2 -mt-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
-            <div class="py-10 text-center rounded-2xl bg-gray-50 ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-12">
+          <div class="p-2 -mt-2 flex-col lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
+            <div class="grow h-full py-10 text-center rounded-2xl bg-gray-50 ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-12">
               <div class="max-w-xs px-8 mx-auto space-y-6">
                 <div class="flex items-center justify-center mb-10">
                   <monthly-yearly-selector v-model="isYearly" />
diff --git a/resources/js/pages/ai-form-builder.vue b/resources/js/pages/ai-form-builder.vue
index daf70c1..3040194 100644
--- a/resources/js/pages/ai-form-builder.vue
+++ b/resources/js/pages/ai-form-builder.vue
@@ -28,12 +28,13 @@
           </div>
 
           <div class="max-w-6xl mx-auto mt-12 sm:mt-16">
-            <video class="rounded-lg sm:rounded-xl lg:rounded-2xl ring-1 ring-gray-200 shadow-lg shadow-blue-600/10" controls autoplay loop>
-              <source :src="asset('video/opnform-ai.mp4')" type="video/mp4">
-              This browser does not display the video tag.
-            </video>
-<!--            <img class="rounded-lg sm:rounded-xl lg:rounded-2xl ring-1 ring-gray-200 shadow-lg shadow-blue-600/10"-->
-<!--              :src="asset('img/pages/ai_form_builder/hero-mockup.png')" alt="">-->
+            <div
+              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">
+              <video class="rounded-md ring-1 ring-gray-200 shadow-xl shadow-blue-600/10 ring-blue-900/10" controls autoplay loop muted>
+                <source :src="asset('video/opnform-ai.mp4')" type="video/mp4">
+                This browser does not display the video tag.
+              </video>
+            </div>
           </div>
 
           <div
diff --git a/resources/js/pages/welcome.vue b/resources/js/pages/welcome.vue
index 4999971..38a7587 100644
--- a/resources/js/pages/welcome.vue
+++ b/resources/js/pages/welcome.vue
@@ -1,62 +1,85 @@
 <template>
   <div>
     <section class="bg-gradient-to-b relative from-white to-gray-100 py-12 sm:py-16 lg:py-20 xl:py-24">
-        <div class="absolute inset-0">
-          <img class="w-full h-full object-cover object-top" :src="asset('img/pages/ai_form_builder/background-pattern.svg')" alt="">
+      <div class="absolute inset-0">
+        <img class="w-full h-full object-cover object-top"
+             :src="asset('img/pages/ai_form_builder/background-pattern.svg')" alt="">
+      </div>
+
+      <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative -mb-32 md:-mb-52 lg:-mb-72">
+        <div class="flex justify-center mb-5">
+          <div
+            class="relative flex items-center shadow-sm bg-white gap-x-4 rounded-full px-4 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
+            <span class="font-semibold text-gray-500">We're Open-Source</span><span class="h-4 w-px bg-gray-900/10"
+                                                                                    aria-hidden="true"></span>
+            <a
+              target="_blank" class="flex items-center gap-x-1 hover:no-underline" href="https://github.com/jhumanj/opnform">
+              <span class="absolute inset-0" aria-hidden="true"></span>
+              Star us on GitHub
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                   stroke="currentColor" aria-hidden="true" class="-mr-2 h-5 w-5 text-gray-400">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
+              </svg>
+            </a></div>
         </div>
+        <div class="max-w-4xl mx-auto text-center">
+          <h1 class="text-4xl sm:text-5xl lg:text-6xl font-semibold text-gray-900 tracking-tight">
+            Build
+            <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-blue-400">beautiful forms</span>
+            <br>
+            in seconds
+          </h1>
+          <p class="mt-4 sm:mt-5 text-base leading-7 sm:text-xl sm:leading-9 font-medium text-gray-500">
+            Create beautiful forms and share them anywhere. It super fast, you don't need to know how to code. Get
+            started
+            <span class="font-semibold">for free</span>!
+          </p>
 
-        <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="max-w-4xl mx-auto text-center">
-            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-semibold text-gray-900 tracking-tight">
-              The open-source
-              <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-blue-400">form builder</span>
-            </h1>
-            <p class="mt-4 sm:mt-5 text-base leading-7 sm:text-xl sm:leading-9 font-medium text-gray-500">
-              Create beautiful forms and share them anywhere. It takes seconds, you don't need to know how to code. Get started
-              <span class="font-bold">for free</span>!
-            </p>
+          <div class="mt-8 flex justify-center">
+            <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'forms.create.guest' }" :arrow="true">
+              Create a form for FREE
+            </v-button>
+            <v-button v-else class="mr-1" :to="{ name: 'forms.create' }" :arrow="true">
+              Create a form for FREE
+            </v-button>
+          </div>
 
-            <div class="mt-8 flex justify-center">
-              <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'forms.create.guest' }" :arrow="true">
-                Create a form for FREE
-              </v-button>
-              <v-button v-else class="mr-1" :to="{ name: 'forms.create' }" :arrow="true">
-                Create a form for FREE
-              </v-button>
+          <div class="justify-center flex gap-2 mt-10">
+            <div class="flex items-center text-gray-400 text-sm">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                   stroke="currentColor" class="w-4 h-4 mr-1 ticks">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
+              </svg>
+              <span>Unlimited forms</span>
             </div>
-
-            <div class="justify-center flex gap-2 mt-10">
-              <div class="flex items-center text-gray-400 text-sm">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                     stroke="currentColor" class="w-4 h-4 mr-1 ticks">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
-                </svg>
-                <span>Unlimited forms</span>
-              </div>
-              <div class="flex items-center text-gray-400 text-sm">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                     stroke="currentColor" class="w-4 h-4 mr-1 ticks">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
-                </svg>
-                <span>
+            <div class="flex items-center text-gray-400 text-sm">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                   stroke="currentColor" class="w-4 h-4 mr-1 ticks">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
+              </svg>
+              <span>
                   Unlimited fields
                 </span>
-              </div>
-              <div class="flex text-gray-400 text-sm">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                     stroke="currentColor" class="w-4 h-4 mr-1 ticks">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
-                </svg>
-                <span>Unlimited responses</span>
-              </div>
+            </div>
+            <div class="flex text-gray-400 text-sm">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                   stroke="currentColor" class="w-4 h-4 mr-1 ticks">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
+              </svg>
+              <span>Unlimited responses</span>
             </div>
           </div>
+        </div>
 
-          <div class="w-full mt-8 relative px-6 mx-auto max-w-4xl sm:px-10 lg:px-0 z-10 flex items-center justify-center">
-            <img loading="lazy" class="w-full shadow-2xl rounded-xl block max-w-2xl lg:max-w-5xl"
-                 :src="asset('img/pages/welcome/product-cover.jpg')" alt="cover-product">
+        <div
+          class="w-full mt-12 relative px-6 mx-auto max-w-4xl sm:px-10 lg:px-0 z-10 flex items-center justify-center">
+          <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="asset('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>
     </section>
 
     <div class="flex flex-col bg-gray-50 dark:bg-notion-dark">
@@ -66,21 +89,21 @@
         </div>
       </div>
 
-      <ai-feature class="bg-white -mb-56" />
+      <ai-feature class="bg-white -mb-56"/>
 
-      <more-features class="pt-56" />
+      <more-features class="pt-56"/>
 
-      <pricing-table v-if="paidPlansEnabled" class="pb-20" :home-page="true" />
+      <pricing-table v-if="paidPlansEnabled" class="pb-20" :home-page="true"/>
 
-<!--      <div class="pt-20 pb-5 text-center bg-white dark:bg-notion-dark-light">-->
-<!--        <h3 class="font-semibold text-3xl">See what people are saying</h3>-->
-<!--        <p class="w-full mt-2 mb-8">-->
-<!--          These are the stories of our customers who have joined us with great pleasure when using this crazy feature.-->
-<!--        </p>-->
-<!--        <testimonials/>-->
-<!--      </div>-->
+      <!--      <div class="pt-20 pb-5 text-center bg-white dark:bg-notion-dark-light">-->
+      <!--        <h3 class="font-semibold text-3xl">See what people are saying</h3>-->
+      <!--        <p class="w-full mt-2 mb-8">-->
+      <!--          These are the stories of our customers who have joined us with great pleasure when using this crazy feature.-->
+      <!--        </p>-->
+      <!--        <testimonials/>-->
+      <!--      </div>-->
 
-      <templates-slider />
+      <templates-slider/>
 
       <div class="w-full bg-blue-900 p-12 md:p-24 text-center">
         <h4 class="font-semibold text-3xl text-white">Take your forms to the next level</h4>
@@ -93,24 +116,31 @@
         <div class="flex justify-center mt-6">
           <a target="_blank" :href="configLinks.twitter" class="mr-4">
             <svg class="w-6 h-6 text-white" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M7.55016 19.7502C16.6045 19.7502 21.5583 12.2469 21.5583 5.74211C21.5583 5.53117 21.5536 5.31554 21.5442 5.1046C22.5079 4.40771 23.3395 3.5445 24 2.55554C23.1025 2.95484 22.1496 3.21563 21.1739 3.32898C22.2013 2.71315 22.9705 1.74572 23.3391 0.606011C22.3726 1.1788 21.3156 1.58286 20.2134 1.80085C19.4708 1.01181 18.489 0.48936 17.4197 0.314295C16.3504 0.13923 15.2532 0.321295 14.2977 0.832341C13.3423 1.34339 12.5818 2.15495 12.1338 3.14156C11.6859 4.12816 11.5754 5.23486 11.8195 6.29054C9.86249 6.19233 7.94794 5.68395 6.19998 4.79834C4.45203 3.91274 2.90969 2.66968 1.67297 1.14976C1.0444 2.23349 0.852057 3.51589 1.13503 4.73634C1.418 5.95678 2.15506 7.02369 3.19641 7.72023C2.41463 7.69541 1.64998 7.48492 0.965625 7.10617V7.1671C0.964925 8.30439 1.3581 9.40683 2.07831 10.287C2.79852 11.1672 3.80132 11.7708 4.91625 11.9952C4.19206 12.1934 3.43198 12.2222 2.69484 12.0796C3.00945 13.0577 3.62157 13.9131 4.44577 14.5266C5.26997 15.14 6.26512 15.4808 7.29234 15.5015C5.54842 16.8714 3.39417 17.6144 1.17656 17.6109C0.783287 17.6103 0.390399 17.5861 0 17.5387C2.25286 18.984 4.87353 19.7516 7.55016 19.7502Z" fill="currentColor"/>
+              <path
+                d="M7.55016 19.7502C16.6045 19.7502 21.5583 12.2469 21.5583 5.74211C21.5583 5.53117 21.5536 5.31554 21.5442 5.1046C22.5079 4.40771 23.3395 3.5445 24 2.55554C23.1025 2.95484 22.1496 3.21563 21.1739 3.32898C22.2013 2.71315 22.9705 1.74572 23.3391 0.606011C22.3726 1.1788 21.3156 1.58286 20.2134 1.80085C19.4708 1.01181 18.489 0.48936 17.4197 0.314295C16.3504 0.13923 15.2532 0.321295 14.2977 0.832341C13.3423 1.34339 12.5818 2.15495 12.1338 3.14156C11.6859 4.12816 11.5754 5.23486 11.8195 6.29054C9.86249 6.19233 7.94794 5.68395 6.19998 4.79834C4.45203 3.91274 2.90969 2.66968 1.67297 1.14976C1.0444 2.23349 0.852057 3.51589 1.13503 4.73634C1.418 5.95678 2.15506 7.02369 3.19641 7.72023C2.41463 7.69541 1.64998 7.48492 0.965625 7.10617V7.1671C0.964925 8.30439 1.3581 9.40683 2.07831 10.287C2.79852 11.1672 3.80132 11.7708 4.91625 11.9952C4.19206 12.1934 3.43198 12.2222 2.69484 12.0796C3.00945 13.0577 3.62157 13.9131 4.44577 14.5266C5.26997 15.14 6.26512 15.4808 7.29234 15.5015C5.54842 16.8714 3.39417 17.6144 1.17656 17.6109C0.783287 17.6103 0.390399 17.5861 0 17.5387C2.25286 18.984 4.87353 19.7516 7.55016 19.7502Z"
+                fill="currentColor"/>
             </svg>
           </a>
           <a target="_blank" :href="configLinks.facebook_group" class="mr-4">
             <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 17.9895 4.3882 22.954 10.125 23.8542V15.4688H7.07812V12H10.125V9.35625C10.125 6.34875 11.9166 4.6875 14.6576 4.6875C15.9701 4.6875 17.3438 4.92188 17.3438 4.92188V7.875H15.8306C14.34 7.875 13.875 8.80008 13.875 9.75V12H17.2031L16.6711 15.4688H13.875V23.8542C19.6118 22.954 24 17.9895 24 12Z" fill="currentColor"/>
+              <path
+                d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 17.9895 4.3882 22.954 10.125 23.8542V15.4688H7.07812V12H10.125V9.35625C10.125 6.34875 11.9166 4.6875 14.6576 4.6875C15.9701 4.6875 17.3438 4.92188 17.3438 4.92188V7.875H15.8306C14.34 7.875 13.875 8.80008 13.875 9.75V12H17.2031L16.6711 15.4688H13.875V23.8542C19.6118 22.954 24 17.9895 24 12Z"
+                fill="currentColor"/>
             </svg>
           </a>
           <a target="_blank" :href="configLinks.github_url" class="mr-4">
             <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.3724 0 0 5.3808 0 12.0204C0 17.3304 3.438 21.8364 8.2068 23.4252C8.8068 23.5356 9.0252 23.1648 9.0252 22.8456C9.0252 22.5612 9.0156 21.804 9.0096 20.802C5.6712 21.528 4.9668 19.1904 4.9668 19.1904C4.422 17.8008 3.6348 17.4312 3.6348 17.4312C2.5452 16.6872 3.7176 16.7016 3.7176 16.7016C4.9212 16.7856 5.5548 17.94 5.5548 17.94C6.6252 19.776 8.364 19.2456 9.0468 18.9384C9.1572 18.162 9.4668 17.6328 9.81 17.3328C7.146 17.0292 4.344 15.9972 4.344 11.3916C4.344 10.08 4.812 9.006 5.5788 8.166C5.4552 7.8624 5.0436 6.6396 5.6964 4.986C5.6964 4.986 6.7044 4.662 8.9964 6.2172C9.97532 5.95022 10.9853 5.81423 12 5.8128C13.02 5.8176 14.046 5.9508 15.0048 6.2172C17.2956 4.662 18.3012 4.9848 18.3012 4.9848C18.9564 6.6396 18.5436 7.8624 18.4212 8.166C19.1892 9.006 19.6548 10.08 19.6548 11.3916C19.6548 16.0092 16.848 17.0256 14.1756 17.3232C14.6064 17.694 14.9892 18.4272 14.9892 19.5492C14.9892 21.1548 14.9748 22.452 14.9748 22.8456C14.9748 23.1672 15.1908 23.5416 15.8004 23.424C18.19 22.6225 20.2672 21.0904 21.7386 19.0441C23.2099 16.9977 24.001 14.5408 24 12.0204C24 5.3808 18.6264 0 12 0Z" fill="currentColor"/>
+              <path fill-rule="evenodd" clip-rule="evenodd"
+                    d="M12 0C5.3724 0 0 5.3808 0 12.0204C0 17.3304 3.438 21.8364 8.2068 23.4252C8.8068 23.5356 9.0252 23.1648 9.0252 22.8456C9.0252 22.5612 9.0156 21.804 9.0096 20.802C5.6712 21.528 4.9668 19.1904 4.9668 19.1904C4.422 17.8008 3.6348 17.4312 3.6348 17.4312C2.5452 16.6872 3.7176 16.7016 3.7176 16.7016C4.9212 16.7856 5.5548 17.94 5.5548 17.94C6.6252 19.776 8.364 19.2456 9.0468 18.9384C9.1572 18.162 9.4668 17.6328 9.81 17.3328C7.146 17.0292 4.344 15.9972 4.344 11.3916C4.344 10.08 4.812 9.006 5.5788 8.166C5.4552 7.8624 5.0436 6.6396 5.6964 4.986C5.6964 4.986 6.7044 4.662 8.9964 6.2172C9.97532 5.95022 10.9853 5.81423 12 5.8128C13.02 5.8176 14.046 5.9508 15.0048 6.2172C17.2956 4.662 18.3012 4.9848 18.3012 4.9848C18.9564 6.6396 18.5436 7.8624 18.4212 8.166C19.1892 9.006 19.6548 10.08 19.6548 11.3916C19.6548 16.0092 16.848 17.0256 14.1756 17.3232C14.6064 17.694 14.9892 18.4272 14.9892 19.5492C14.9892 21.1548 14.9748 22.452 14.9748 22.8456C14.9748 23.1672 15.1908 23.5416 15.8004 23.424C18.19 22.6225 20.2672 21.0904 21.7386 19.0441C23.2099 16.9977 24.001 14.5408 24 12.0204C24 5.3808 18.6264 0 12 0Z"
+                    fill="currentColor"/>
             </svg>
           </a>
         </div>
 
         <p class="mt-12 text-white text-lg">The form below is an OpnForm, give it a try !</p>
         <div class="md:max-w-5xl md:mx-auto w-full bg-white rounded-md mt-6 p-4 shadow-lg">
-          <iframe class="mt-4" style="border:none;width:100%;" height="470px" src="https://opnform.com/forms/opnform-contact"></iframe>
+          <iframe class="mt-4" style="border:none;width:100%;" height="470px"
+                  src="https://opnform.com/forms/opnform-contact"></iframe>
         </div>
       </div>
 
@@ -174,7 +204,7 @@ export default {
 }
 
 .ticks {
-  color:#2563eb;
+  color: #2563eb;
 }
 
 @screen md {