feat: add contact form section and update main layout configuration

This commit is contained in:
Esteban 2026-05-17 08:29:42 -05:00
parent 714d9d96cc
commit 669eb84734
3 changed files with 36 additions and 28 deletions

View File

@ -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>

View File

@ -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">
<Icon icon="ph:youtube-logo-thin" class="text-3xl" />
<a href="https://t.me/CentroRPJ" target="_blank">
<Icon icon="ph:telegram-logo-thin" class="text-3xl hover:text-[#D4C7A1] transition-all hover:transform hover:scale-115" />
</a>
</li>
</ul>

View File

@ -1,6 +1,5 @@
---
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";
@ -9,19 +8,15 @@ import "@fontsource/poppins/700.css";
import "@fontsource-variable/kameron";
import ShareSticky from "../components/ShareSticky.vue";
import { routeTranslations } from "../i18n";
const {
title,
description,
image,
url,
date
} = Astro.props;
const { title, description, image, url, date } = Astro.props;
const currentLocale = Astro.currentLocale ?? 'es';
const direction = currentLocale === 'he' ? 'rtl' : 'ltr';
const currentLocale = Astro.currentLocale ?? "es";
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 && (
<ShareSticky client:only url={Astro.url.href} />
)}
{isNewsPage && <ShareSticky client:only url={Astro.url.href} />}
<slot />
<Footer />
</body>
</html>