From 8ed4f0f97993a1f421dafbd87df3a3bfb6c72b36 Mon Sep 17 00:00:00 2001
From: F4ilji <f4ilj@yandex.ru>
Date: Wed, 23 Apr 2025 10:57:52 +0500
Subject: [PATCH] cosmetic changes

---
 .../Client/Additional-educations/Show.vue     | 47 ++++++++++++-------
 .../builder/formBuilder/FormBuilder.vue       | 31 ++++++------
 2 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/resources/js/Pages/Client/Additional-educations/Show.vue b/resources/js/Pages/Client/Additional-educations/Show.vue
index 63e8780..6fc12be 100644
--- a/resources/js/Pages/Client/Additional-educations/Show.vue
+++ b/resources/js/Pages/Client/Additional-educations/Show.vue
@@ -76,7 +76,7 @@ export default {
     <BasicPageContainer>
       <div class="space-y-3">
         <BackButton link="client.additionalEducation.index" title="Все программы"/>
-        <AdditionalProgramItemBreadcrumbs :breadcrumbs="breadcrumbs" :additional-education-title="additionalEducation.data.title" />
+        <AdditionalProgramItemBreadcrumbs class="pb-4" :breadcrumbs="breadcrumbs" :additional-education-title="additionalEducation.data.title" />
         <ProgramTitle :header="additionalEducation.data.title" class="text-center" />
       </div>
 
@@ -181,30 +181,41 @@ export default {
     <BasicFooter />
   </BasicPageWrapper>
 
-
-
   <div class="fixed bottom-0 end-0 z-60 sm:max-w-xl w-full mx-auto p-6">
-    <!-- Card -->
-    <div class="p-4 bg-white border border-gray-200 rounded-xl shadow-2xs dark:bg-neutral-900 dark:border-neutral-800">
-      <div class="flex flex-col sm:flex-row sm:items-center gap-y-3 sm:gap-y-0 sm:gap-x-5">
-        <div class="grow">
-          <h2 class="text-gray-500 dark:text-neutral-500">
-            Оставить заявку на курс <span class="font-semibold text-gray-800 dark:text-neutral-200">{{ additionalEducation.data.title }}</span>
-          </h2>
-        </div>
-        <div class="inline-flex gap-x-2">
-          <div>
-            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"  aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-vertically-centered-scrollable-modal" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
-              Записаться
-            </button>
+    <div class="hs-accordion-group">
+      <div class="hs-accordion border-gray-200 active bg-white border rounded-xl" id="hs-active-bordered-heading-two">
+        <button class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex justify-between items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-8 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none rounded-xl" aria-expanded="true" aria-controls="hs-basic-active-bordered-collapse-two">
+          Запишитесь на консультацию по курсу
+          <svg class="hs-accordion-active:hidden block size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M5 12h14"></path>
+            <path d="M12 5v14"></path>
+          </svg>
+          <svg class="hs-accordion-active:block hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M5 12h14"></path>
+          </svg>
+        </button>
+        <div id="hs-basic-active-bordered-collapse-two" class="hs-accordion-content w-full overflow-hidden transition-[height] rounded-xl duration-300" role="region" aria-labelledby="hs-active-bordered-heading-two">
+          <div class="px-8 pb-4 pt-0 bg-white rounded-xl shadow-2xs">
+            <div class="flex rounded-xl">
+              <div class="grow rounded-xl">
+                <p class="mt-2 text-sm text-gray-600 dark:text-neutral-400">
+                  Заполните форму обратной связи и с вами свяжется специалист центра дополнительного образования
+                </p>
+                <div class="mt-5 inline-flex gap-x-2">
+                  <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-vertically-centered-scrollable-modal" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
+                    Записаться
+                  </button>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
-    <!-- End Card -->
   </div>
 
-  <div id="hs-vertically-centered-scrollable-modal" class="hs-overlay hidden size-full fixed top-0 start-0 z-[1000000] overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-vertically-centered-scrollable-modal-label">
+
+  <div v-if="form" id="hs-vertically-centered-scrollable-modal" class="hs-overlay hidden size-full fixed top-0 start-0 z-[1000000] overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-vertically-centered-scrollable-modal-label">
     <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-3xl sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
       <div class="w-full max-h-full overflow-hidden flex flex-col bg-white border border-gray-200 shadow-2xs rounded-xl pointer-events-auto dark:bg-neutral-800 dark:border-neutral-700 dark:shadow-neutral-700/70">
         <div class="flex justify-between items-center py-3 px-4 border-gray-200 dark:border-neutral-700">
diff --git a/resources/js/componentss/shared/builder/formBuilder/FormBuilder.vue b/resources/js/componentss/shared/builder/formBuilder/FormBuilder.vue
index 76b1af0..e997c93 100644
--- a/resources/js/componentss/shared/builder/formBuilder/FormBuilder.vue
+++ b/resources/js/componentss/shared/builder/formBuilder/FormBuilder.vue
@@ -1,25 +1,24 @@
 <template>
-  <div v-if="success" class="bg-teal-50 border-t-2 border-teal-500 rounded-lg p-4 dark:bg-teal-800/30" role="alert" tabindex="-1" aria-labelledby="hs-bordered-success-style-label">
-    <div class="flex">
-      <div class="shrink-0">
-        <span class="inline-flex justify-center items-center size-8 rounded-full border-4 border-teal-100 bg-teal-200 text-teal-800 dark:border-teal-900 dark:bg-teal-800 dark:text-teal-400">
-          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
-            <path d="m9 12 2 2 4-4"></path>
+  <div v-if="success" class="relative flex flex-col bg-white shadow-lg rounded-xl dark:bg-neutral-900">
+    <div class="pb-10 px-5 text-center overflow-y-auto">
+      <!-- Icon -->
+      <span class="mb-4 inline-flex justify-center items-center size-11 rounded-full border-4 border-green-50 bg-green-100 text-green-500 dark:bg-green-700 dark:border-green-600 dark:text-green-100">
+          <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+            <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
           </svg>
         </span>
-      </div>
-      <div class="ms-3">
-        <h3 id="hs-bordered-success-style-label" class="text-gray-800 font-semibold dark:text-white">
-          Успешно отправлено!
-        </h3>
-        <p class="text-sm text-gray-700 dark:text-neutral-400">
-          {{ message }}
-        </p>
-      </div>
+      <!-- End Icon -->
+
+      <h3 id="hs-task-created-alert-label" class="mb-8 text-xl font-bold text-gray-800 dark:text-neutral-200">
+        Успех!
+      </h3>
+      <p class="text-gray-500 dark:text-neutral-500">
+        {{ message }}
+      </p>
     </div>
   </div>
 
+
   <div v-else>
     <div class="max-w-[85rem] py-5 sm:px-6 lg:px-8 lg:py-7 mx-auto">
       <div class="mx-auto max-w-2xl">