change responsive home #57

Merged
esteban merged 1 commits from main into staging 2026-07-29 01:57:29 +00:00
8 changed files with 103 additions and 58 deletions
Showing only changes of commit 98e9a7652e - Show all commits

4
.env
View File

@ -23,6 +23,10 @@ DATABASE_URL="file:./dev.db"
N8N_WEBHOOK_URL="https://flows2.carpa.com/webhook/news-summary" N8N_WEBHOOK_URL="https://flows2.carpa.com/webhook/news-summary"
N8N_API_KEY="sk_live_JwjpTdZrLVvijCKuWylWZbUuhBm6zPDH" N8N_API_KEY="sk_live_JwjpTdZrLVvijCKuWylWZbUuhBm6zPDH"
# Cloudflare Email Sending
CLOUDFLARE_API_TOKEN=cfut_8Y0Tcwiv3v0K1LDK9QSvc3BjlU1lZFs1zikACgTw33977b37
CLOUDFLARE_ACCOUNT_ID=3e689750123db91e81d3542d2930a907
# Cloudflare Turnstile — public key (visible in frontend) # Cloudflare Turnstile — public key (visible in frontend)
TURNSTILE_SITE_KEY=0x4AAAAAAD9IYWC6HPflpneO TURNSTILE_SITE_KEY=0x4AAAAAAD9IYWC6HPflpneO

1
.gitignore vendored
View File

@ -29,3 +29,4 @@ prisma/dev.db
# opencode - agentes y scripts locales (no subir a producción) # opencode - agentes y scripts locales (no subir a producción)
opencode/ opencode/
.opencode/ .opencode/
.env

32
public/admin/index.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TinaCMS</title>
</head>
<!-- if development -->
<script type="module">
import RefreshRuntime from 'http://localhost:4001/@react-refresh'
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>
<script type="module" src="http://localhost:4001/@vite/client"></script>
<script>
function handleLoadError() {
// Assets have failed to load
document.getElementById('root').innerHTML = '<style type="text/css"> #no-assets-placeholder body { font-family: sans-serif; font-size: 16px; line-height: 1.4; color: #333; background-color: #f5f5f5; } #no-assets-placeholder { max-width: 600px; margin: 0 auto; padding: 40px; text-align: center; background-color: #fff; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); } #no-assets-placeholder h1 { font-size: 24px; margin-bottom: 20px; } #no-assets-placeholder p { margin-bottom: 10px; } #no-assets-placeholder a { color: #0077cc; text-decoration: none; } #no-assets-placeholder a:hover { text-decoration: underline; } </style> <div id="no-assets-placeholder"> <h1>Failed loading TinaCMS assets</h1> <p> Your TinaCMS configuration may be misconfigured, and we could not load the assets for this page. </p> <p> Please visit <a href="https://tina.io/docs/r/FAQ/#13-how-do-i-resolve-failed-loading-tinacms-assets-error">this doc</a> for help. </p> </div> </div>';
}
</script>
<script
type="module"
src="http://localhost:4001/src/main.tsx"
onerror="handleLoadError()"
></script>
<body class="tina-tailwind">
<div id="root"></div>
</body>
</html>

View File

@ -13,7 +13,7 @@ const tl = createTranslator(Astro.currentLocale);
<div class="h-screen pb-20 max-h-[700px] sm:max-h-[900px] md:max-h-[1080px] container bg-[url(/img/DRJBP-1.webp)] bg-no-repeat bg-contain bg-bottom mx-auto mt-16"> <div class="h-screen pb-20 max-h-[700px] sm:max-h-[900px] md:max-h-[1080px] container bg-[url(/img/DRJBP-1.webp)] bg-no-repeat bg-contain bg-bottom mx-auto mt-16">
<div class="grid md:grid-cols-2 h-full px-6"> <div class="grid md:grid-cols-2 h-full px-6">
<div class="gap-8 md:flex flex-col justify-end"> <div class="gap-8 md:flex flex-col justify-end mt-14 md:mt-0">
<img <img
src="/img/logo-metalico.webp" src="/img/logo-metalico.webp"
alt="Logo Metalico" alt="Logo Metalico"

View File

@ -27,11 +27,19 @@ locationArray.filter(Boolean).join(', ');
--- ---
<div class="bg-[#EBE5D0] text-[#003421] p-10"> <div class="bg-[#EBE5D0] text-[#003421] p-10">
<Icon name="ph:arrow-circle-down-thin" class="text-8xl mb-8" /> <div class="flex md:flex-col items-center content-center md:items-baseline">
<p class="font-light md:text-2xl text-lg md:mb-8 mb-3"> <Icon name="ph:arrow-circle-down-thin" class="md:text-8xl text-7xl mb-0 md:mb-8" />
{locationArray.filter(Boolean).join(', ')}<br /> {nicedate ? (
({nicedate}): <p class="font-light md:text-2xl text-lg ml-2 md:ml-0 md:mb-8 mb-3">
</p> {locationArray.filter(Boolean).join(', ')}<br />
({nicedate}):
</p>
) : (
<p class="font-light md:text-2xl text-lg md:mb-8 mb-3">
{locationArray.filter(Boolean).join(', ')}:
</p>
)}
</div>
<h3 class="md:text-2xl text-lg mb-4 font-bold md:mb-8 hover:underline"><a href={`/${locale}/${getLocalizedRoute(routeKey, locale)}/${data.id}`}>{data.data.title}</a></h3> <h3 class="md:text-2xl text-lg mb-4 font-bold md:mb-8 hover:underline"><a href={`/${locale}/${getLocalizedRoute(routeKey, locale)}/${data.id}`}>{data.data.title}</a></h3>
<div class="overflow-hidden"> <div class="overflow-hidden">

View File

@ -7,23 +7,23 @@ const tl = createTranslator(Astro.currentLocale);
const { props } = Astro.props; const { props } = Astro.props;
--- ---
<div class="container mx-auto"> <div class="container mx-auto">
<div class="grid md:grid-cols-2 min-h-100"> <div class="grid md:grid-cols-2 min-w-0">
<div class="bg-[#EBE5D0] p-12 md:p-24 grid lg:grid-cols-2"> <div class="bg-[#EBE5D0] p-6 md:p-12 lg:p-24 grid lg:grid-cols-2 min-w-0">
<div class="leftcol flex justify-between flex-col min-h-full"> <div class="flex flex-col justify-between min-h-full break-all">
<h2 class="text-5xl font-secondary text-tertiary font-bold">{tl("values.justice.title")}</h2> <h2 class="text-5xl font-secondary text-tertiary font-bold">{tl("values.justice.title")}</h2>
<p class="text-lg text-tertiary">{tl("values.justice.text")}</p> <p class="text-lg text-tertiary break-words">{tl("values.justice.text")}</p>
</div> </div>
<div class="rightcol flex justify-end align-bottom min-h-full "> <div class="flex items-end justify-end min-h-full">
<Icon name="icon_justice_1" class="text-9xl text-tertiary self-end" /> <Icon name="icon_justice_1" class="text-6xl md:text-9xl text-tertiary" />
</div> </div>
</div> </div>
<div class="bg-tertiary p-12 md:p-24 grid lg:grid-cols-2"> <div class="bg-tertiary p-6 md:p-12 lg:p-24 grid lg:grid-cols-2 min-w-0">
<div class="leftcol flex justify-between flex-col min-h-full"> <div class="flex flex-col justify-between min-h-full min-w-0 max-w-full">
<h2 class="text-5xl font-secondary font-bold text-[#CBA16A]">{tl("values.integrity.title")}</h2> <h2 class="text-5xl font-secondary font-bold text-[#CBA16A] break-all">{tl("values.integrity.title")}</h2>
<p class="text-[#CBA16A] text-lg">{tl("values.integrity.text")}</p> <p class="text-[#CBA16A] text-lg break-words">{tl("values.integrity.text")}</p>
</div> </div>
<div class="rightcol flex justify-end align-bottom min-h-full "> <div class="flex items-end justify-end min-h-full min-w-0 max-w-full">
<Icon name="icon_justice_2" class="text-[#EBE5D0] text-9xl self-end" /> <Icon name="icon_justice_2" class="text-[#EBE5D0] text-6xl md:text-9xl max-w-full h-auto" />
</div> </div>
</div> </div>
</div> </div>

View File

@ -92,6 +92,34 @@ const handleSubmit = async (e) => {
</fieldset> </fieldset>
<!-- Submit -->
<button
type="submit"
:disabled="isLoading"
class="bg-[#003421] px-6 py-2 text-sm cursor-pointer transition duration-300"
:class="[
isLoading ? 'opacity-70 cursor-not-allowed' : 'hover:bg-[#EBE5D0] hover:text-[#003421]',
isError ? 'bg-red-600 text-white' : ''
]"
>
<span v-if="isLoading" class="flex items-center gap-2">
<span class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
Enviando...
</span>
<span v-else-if="isSuccess">
Enviado
</span>
<span v-else-if="isError">
Error
</span>
<span v-else>
{{ tl("footer.form.button") }}
</span>
</button>
<div class="flex flex-row justify-between items-center mt-4"> <div class="flex flex-row justify-between items-center mt-4">
<!-- Social Icons --> <!-- Social Icons -->
@ -127,34 +155,6 @@ const handleSubmit = async (e) => {
</li> </li>
</ul> </ul>
<!-- Submit -->
<button
type="submit"
:disabled="isLoading"
class="bg-[#003421] px-6 py-2 text-sm cursor-pointer transition duration-300"
:class="[
isLoading ? 'opacity-70 cursor-not-allowed' : 'hover:bg-[#EBE5D0] hover:text-[#003421]',
isError ? 'bg-red-600 text-white' : ''
]"
>
<span v-if="isLoading" class="flex items-center gap-2">
<span class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
Enviando...
</span>
<span v-else-if="isSuccess">
Enviado
</span>
<span v-else-if="isError">
Error
</span>
<span v-else>
{{ tl("footer.form.button") }}
</span>
</button>
</div> </div>
</form> </form>
</template> </template>

View File

@ -10,37 +10,37 @@ const tl = createTranslator(Astro.currentLocale);
<h2 class="text-3xl lg:text-5xl text-center font-bold font-secondary my-8 text-[#003421]">{tl("formation.title")}</h2> <h2 class="text-3xl lg:text-5xl text-center font-bold font-secondary my-8 text-[#003421]">{tl("formation.title")}</h2>
<p class="text-lg w-2/3 mx-auto mb-20 text-[#003421] text-justify" set:html={tl("formation.text")}></p> <p class="text-lg w-2/3 mx-auto mb-20 text-[#003421] text-justify" set:html={tl("formation.text")}></p>
<div class="grid xl:grid-cols-3 text-[#003421] gap-20"> <div class="grid xl:grid-cols-3 text-[#003421] md:gap-20 gap-10 md:p-0 p-5">
<div class="bg-[#EBE5D0] p-12 relative pb-40"> <div class="bg-[#EBE5D0] p-12 relative pb-32 md:pb-52">
<Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12 text-[#003421]" /> <Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12 text-[#003421]" />
<h4 class="text-[#003421] text-2xl mb-12">{tl("formation.area.title")}</h4> <h4 class="text-[#003421] text-2xl mb-12">{tl("formation.area.title")}</h4>
<ul class="text-lg list-disc font-normal list-inside leading-8" set:html={tl("formation.area.text")}></ul> <ul class="text-lg list-disc font-normal list-inside leading-8" set:html={tl("formation.area.text")}></ul>
<div class="bottom-12 right-12 absolute"> <div class="bottom-8 right-8 md:bottom-12 md:right-12 absolute">
<Icon name="icon_formation_1" class="text-8xl text-[#003421]" /> <Icon name="icon_formation_1" class="text-8xl md:text-9xl text-[#003421]" />
</div> </div>
</div> </div>
<div class="bg-[#EBE5D0] text-[#003421] p-12 relative pb-40"> <div class="bg-[#EBE5D0] p-12 relative pb-32 md:pb-52">
<Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12 text-[#003421]" /> <Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12 text-[#003421]" />
<h4 class="text-[#003421] text-2xl mb-12">{tl("formation.consulting.title")}</h4> <h4 class="text-[#003421] text-2xl mb-12">{tl("formation.consulting.title")}</h4>
<p class="text-lg font-normal">{tl("formation.consulting.text")}</p> <p class="text-lg font-normal">{tl("formation.consulting.text")}</p>
<div class="bottom-12 right-12 absolute"> <div class="bottom-8 right-8 md:bottom-12 md:right-12 absolute">
<Icon name="icon_formation_2" class="text-8xl" /> <Icon name="icon_formation_2" class="text-8xl md:text-9xl text-[#003421]" />
</div> </div>
</div> </div>
<div class="bg-[#EBE5D0] text-[#003421] p-12 relative pb-40"> <div class="bg-[#EBE5D0] p-12 relative pb-32 md:pb-52">
<Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12 text-[#003421]" /> <Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12 text-[#003421]" />
<h4 class="text-[#003421] text-2xl mb-12" set:html={tl("formation.action.title")}></h4> <h4 class="text-[#003421] text-2xl mb-12" set:html={tl("formation.action.title")}></h4>
<p class="text-lg font-normal" set:html={tl("formation.action.text")}></p> <p class="text-lg font-normal" set:html={tl("formation.action.text")}></p>
<div class="bottom-12 right-12 absolute"> <div class="bottom-8 right-8 md:bottom-12 md:right-12 absolute">
<Icon name="icon_formation_3" class="text-8xl" /> <Icon name="icon_formation_3" class="text-8xl md:text-9xl text-[#003421]" />
</div> </div>
</div> </div>
</div> </div>