feat: add contact form section and update main layout configuration

src/components/section/FooterSection.astro

@@ -19,19 +19,29 @@ const isHebrew = Astro.currentLocale === "he";
     <h4
       class="text-lg text-center font-bold uppercase"
       set:html={tl("footer.title")}
-    />
+    >
+    </h4>
     <h2
       class="text-2xl lg:text-5xl text-center font-bold font-secondary my-8"
       set:html={tl("footer.subtitle")}
-    />
+    >
+    </h2>
 
     <div class="px-12 lg:px-4 lg:w-2/5 mx-auto">
-      <p class="text-lg font-light mb-10" set:html={tl("footer.text")} />
+      <p class="text-lg font-light mb-10" set:html={tl("footer.text")}></p>
-
+      <p class="text-lg font-regular">
+        {tl("footer.email")}
+        <a
+          class="font-light hover:text-[#D4C7A1] transition-all hover:underline hover:underline-offset-4"
+          href="mailto:developer@centrodelreinodepazyjusticia.com"
+          >developer@centrodelreinodepazyjusticia.com</a
+        >
+      </p>
       <p
         class="text-lg font-light mb-10 break-words"
         set:html={tl("footer.text2")}
-      />
+      >
+      </p>
 
       <FormContact client:load locale={Astro.currentLocale} />
     </div>

src/components/section/FormContact.vue

@@ -98,25 +98,31 @@ const handleSubmit = async (e) => {
       <ul class="flex flex-row gap-2">
         <li class="border-r pr-2">
           <a href="https://x.com/CRPazYJusticia" target="_blank">
-            <Icon icon="ph:x-logo-thin" class="text-3xl" />
+            <Icon icon="ph:x-logo-thin" class="text-3xl hover:text-[#D4C7A1] transition-all hover:transform hover:scale-115" />
           </a>
         </li>
 
         <li class="border-r pr-2">
           <a href="https://www.instagram.com/centrodelreinodepazyjusticia/" target="_blank">
-            <Icon icon="ph:instagram-logo-thin" class="text-3xl" />
+            <Icon icon="ph:instagram-logo-thin" class="text-3xl hover:text-[#D4C7A1] transition-all hover:transform hover:scale-115" />
           </a>
         </li>
 
         <li class="border-r pr-2">
           <a href="https://www.facebook.com/Centrodelreinodepazyjusticia" target="_blank">
-            <Icon icon="ph:facebook-logo-thin" class="text-3xl" />
+            <Icon icon="ph:facebook-logo-thin" class="text-3xl hover:text-[#D4C7A1] transition-all hover:transform hover:scale-115" />
+          </a>
+        </li>
+
+        <li class="border-r pr-2">
+          <a href="https://www.youtube.com/@CentrodelReinodePazyJusticia" target="_blank">
+            <Icon icon="ph:youtube-logo-thin" class="text-3xl hover:text-[#D4C7A1] transition-all hover:transform hover:scale-115" />
           </a>
         </li>
 
         <li>
-          <a href="https://www.youtube.com/@CentrodelReinodePazyJusticia" target="_blank">
+          <a href="https://t.me/CentroRPJ" target="_blank">
-            <Icon icon="ph:youtube-logo-thin" class="text-3xl" />
+            <Icon icon="ph:telegram-logo-thin" class="text-3xl hover:text-[#D4C7A1] transition-all hover:transform hover:scale-115" />
           </a>
         </li>
       </ul>

src/layouts/MainLayout.astro

@@ -1,27 +1,22 @@
 ---
 import BaseHead from "../components/BaseHead.astro";
-import Footer from "../components/Footer.astro";
 import "../styles/global.css";
 import "@fontsource/poppins/100.css";
 import "@fontsource/poppins/400.css";
 import "@fontsource/poppins/500.css";
 import "@fontsource/poppins/700.css";
 import "@fontsource-variable/kameron";
-import ShareSticky from "../components/ShareSticky.vue"; 
+import ShareSticky from "../components/ShareSticky.vue";
 import { routeTranslations } from "../i18n";
-const {
+const { title, description, image, url, date } = Astro.props;
-  title,
-  description,
-  image,
-  url,
-  date
-} = Astro.props;
 
-const currentLocale = Astro.currentLocale ?? 'es';
+const currentLocale = Astro.currentLocale ?? "es";
-const direction = currentLocale === 'he' ? 'rtl' : 'ltr';
+const direction = currentLocale === "he" ? "rtl" : "ltr";
 
 const newsSegments = Object.values(routeTranslations.news);
-const isNewsPage = newsSegments.some(segment => Astro.url.pathname.includes(`/${segment}/`));
+const isNewsPage = newsSegments.some((segment) =>
+  Astro.url.pathname.includes(`/${segment}/`)
+);
 ---
 
 <html lang={currentLocale} dir={direction} class="scroll-smooth">
@@ -33,18 +28,15 @@ const isNewsPage = newsSegments.some(segment => Astro.url.pathname.includes(`/${
     date={date}
   />
   <script>
-    document.addEventListener('contextmenu', (event) => {
+    document.addEventListener("contextmenu", (event) => {
       const target = event.target as HTMLElement;
-      if (target.tagName === 'IMG') {
+      if (target.tagName === "IMG") {
         event.preventDefault();
       }
     });
   </script>
   <body class="font-primary">
-    {isNewsPage && (
+    {isNewsPage && <ShareSticky client:only url={Astro.url.href} />}
-      <ShareSticky client:only url={Astro.url.href} />
-    )}
     <slot />
-    <Footer />
   </body>
 </html>