diff --git a/frontend/messages/es.json b/frontend/messages/es.json index a976437..c0bab22 100644 --- a/frontend/messages/es.json +++ b/frontend/messages/es.json @@ -1,7 +1,7 @@ { "$schema": "https://inlang.com/schema/inlang-message-format", "accommodation_info": "Cómo llegar", - "about": "Sobre el evento", + "about": "El evento", "agenda": "Agenda", "an_error_has_occurred": "Ha ocurrido un error", "cancel": "Cancelar", @@ -48,10 +48,10 @@ "prices": "Precios", "privacy_policy": "Política de privacidad", "register": "Registro", - "registration": "Registro", + "registration": "Inscripción", "reset_password_sent": "Si tu correo está registrado, hemos enviado un mensaje con un enlace para establecer una contraseña nueva.", "send": "Enviar", - "speakers": "Invitados", + "speakers": "Invitadas", "streaming": "Streaming", "venue_info": "El lugar", "we_sent_an_email": "Te hemos enviado un correo a {email}", diff --git a/frontend/src/app.scss b/frontend/src/app.scss index abff0e7..98088ea 100644 --- a/frontend/src/app.scss +++ b/frontend/src/app.scss @@ -220,6 +220,7 @@ body { color: $color-primary; padding-left: 1.5rem !important; padding-right: 1.5rem !important; + white-space: nowrap; &:hover { background-color: #43b2dc !important; color: $color-white !important; @@ -228,7 +229,7 @@ body { img { max-height: 3rem; - transform: rotate(5deg); + transform: rotate(var(--logo-rotation, 5deg)); } &.brand { @@ -240,10 +241,12 @@ body { } .brand-home-label { + display: flex; + flex-direction: column; font-family: $font-family-primary; font-size: 1em; font-weight: 600; - line-height: inherit; + line-height: 1.05; color: inherit; white-space: nowrap; @@ -262,6 +265,7 @@ body { width: 100%; justify-content: flex-end; padding-right: 5rem; + gap: 0.25rem; } &-left { diff --git a/frontend/src/assets/images/calavera.svg b/frontend/src/assets/images/calavera.svg new file mode 100644 index 0000000..4b6d9d5 --- /dev/null +++ b/frontend/src/assets/images/calavera.svg @@ -0,0 +1,88 @@ + + + + +Created by potrace 1.15, written by Peter Selinger 2001-2017 + + + + + + + + + + + + + diff --git a/frontend/src/assets/images/camiseta.jpg b/frontend/src/assets/images/camiseta.jpg new file mode 100644 index 0000000..5bc5b54 Binary files /dev/null and b/frontend/src/assets/images/camiseta.jpg differ diff --git a/frontend/src/assets/images/timon.svg b/frontend/src/assets/images/timon.svg new file mode 100644 index 0000000..916186e --- /dev/null +++ b/frontend/src/assets/images/timon.svg @@ -0,0 +1,91 @@ + + + + +Created by potrace 1.15, written by Peter Selinger 2001-2017 + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/images/timon_png.png b/frontend/src/assets/images/timon_png.png new file mode 100644 index 0000000..8f2ea9e Binary files /dev/null and b/frontend/src/assets/images/timon_png.png differ diff --git a/frontend/src/lib/ActivityModal.svelte b/frontend/src/lib/ActivityModal.svelte index 22e84eb..0b5b333 100644 --- a/frontend/src/lib/ActivityModal.svelte +++ b/frontend/src/lib/ActivityModal.svelte @@ -1,78 +1,226 @@ - + {#if isOpen} + {/if} \ No newline at end of file + .activity-modal { + position: fixed; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + pointer-events: auto; + } + + .activity-modal__card { + position: relative; + overflow: hidden; + width: min(92vw, 760px); + border: 1px solid rgba(13, 59, 68, 0.16); + border-radius: 0.5rem; + box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.28); + } + + .activity-modal__card::before { + content: ''; + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 1; + height: 0.35rem; + background: linear-gradient(90deg, #0d3b44, #43b2dc, #8d627b); + } + + .activity-modal__head { + position: relative; + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 1.5rem; + padding: 2rem 4rem 1.4rem 2rem; + background: + linear-gradient(rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96)), + radial-gradient(circle at top right, rgba(67, 178, 220, 0.2), transparent 42%); + border-bottom: 1px solid rgba(13, 59, 68, 0.1); + } + + .activity-modal__title { + margin: 0; + font-size: 1.55rem; + line-height: 1.25; + color: #0d3b44; + flex-grow: initial; + flex-shrink: initial; + } + + .activity-modal__title::after { + content: ''; + display: block; + width: 4rem; + height: 2px; + margin-top: 0.75rem; + background: #43b2dc; + } + + .activity-modal__subtitle { + margin-top: 0.8rem; + margin-bottom: 0; + font-family: Lora, serif; + font-size: 1rem; + font-style: italic; + color: #0d3b44; + } + + .activity-modal__close { + position: absolute; + top: 1.5rem; + right: 1.5rem; + z-index: 2; + } + + .activity-modal__body { + padding: 1.8rem 2rem 2rem; + background: #ffffff; + } + + .activity-modal__content { + color: #0d3b44; + } + + .activity-modal__content :global(img) { + display: block; + width: min(100%, 34rem); + height: auto; + margin: 1rem auto; + border-radius: 0.35rem; + box-shadow: 0 1rem 2rem rgba(13, 59, 68, 0.16); + } + + .activity-modal__foot { + display: block; + padding: 1.15rem 2rem 1.35rem; + background: #0d3b44; + border-top: 0; + } + + .activity-modal__tags { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + } + + .activity-modal__tag { + display: inline-flex; + width: fit-content; + padding: 0.35rem 0.75rem; + font-size: 0.75rem; + font-weight: 700; + line-height: 1.2; + letter-spacing: 0.02em; + text-transform: uppercase; + } + + .activity-modal__tag--primary { + color: #ffffff; + background: #8d627b; + border-left: 4px solid #43b2dc; + } + + .activity-modal__tag--secondary { + color: #0d3b44; + background: #d1f0f9; + } + + @media screen and (max-width: 768px) { + .activity-modal { + padding: 0.75rem; + } + + .activity-modal__head { + padding: 1.6rem 3.75rem 1.2rem 1.25rem; + } + + .activity-modal__title { + font-size: 1.25rem; + } + + .activity-modal__body { + padding: 1.4rem 1.25rem 1.6rem; + } + + .activity-modal__foot { + padding: 1.15rem 1.25rem 1.35rem; + } + + .activity-modal__close { + top: 1.15rem; + right: 1.15rem; + display: block !important; + z-index: 10; + width: 32px; + height: 32px; + min-width: 32px; + min-height: 32px; + } + + .activity-modal__content :global(p:has(img)) { + display: flex; + flex-wrap: wrap; + gap: 1rem; + align-items: center; + justify-content: center; + } + + .activity-modal__content :global(p:has(img) img) { + width: min(100%, 17rem); + margin: 0; + } + } + diff --git a/frontend/src/lib/Footer.svelte b/frontend/src/lib/Footer.svelte index 74bb39d..6bc8bff 100644 --- a/frontend/src/lib/Footer.svelte +++ b/frontend/src/lib/Footer.svelte @@ -1,4 +1,5 @@ - - {#if isOpen} - - - {/if} - - \ No newline at end of file + import SvelteMarkdown from '@humanspeak/svelte-markdown'; + + let { isOpen, close, profile } = $props(); + + +{#if isOpen} + +{/if} + + diff --git a/frontend/src/lib/i18n.ts b/frontend/src/lib/i18n.ts index 6272c1f..e4aed4b 100644 --- a/frontend/src/lib/i18n.ts +++ b/frontend/src/lib/i18n.ts @@ -7,7 +7,7 @@ export const i18n = createI18n(runtime, { pathnames: { '/about-us': { en: '/about-us', - es: '/sobre-el-evento' + es: '/el-evento' }, '/accommodation-info': { en: '/accommodation-info', @@ -95,7 +95,7 @@ export const i18n = createI18n(runtime, { }, '/speakers': { en: '/speakers', - es: '/invitados' + es: '/invitadas' }, '/sponsors': { en: '/sponsors', @@ -115,7 +115,7 @@ export const i18n = createI18n(runtime, { }, '/price': { en: '/price', - es: '/precio' + es: '/precios' } } }); diff --git a/frontend/src/routes/+page.js b/frontend/src/routes/+page.js index 5c94d08..6c98c14 100644 --- a/frontend/src/routes/+page.js +++ b/frontend/src/routes/+page.js @@ -16,19 +16,26 @@ const sitePath = `/site?${encodeQuery({ populate: '*' })}`; +const registrationInfoPath = `/registration-info?${encodeQuery({ + populate: '*' +})}`; + /** @type {import('./$types').PageLoad} */ export async function load({ params }) { let data = {}; - const [homepageData, speakersData, siteData] = await Promise.all([ + const [homepageData, speakersData, siteData, registrationInfoData] = await Promise.all([ fetchSingle(homepagePath), fetchSingle(speakersPath), - fetchSingle(sitePath) + fetchSingle(sitePath), + fetchSingle(registrationInfoPath) ]); + data = { homepage: homepageData, speakers: speakersData, site: siteData, + registrationInfo: registrationInfoData }; return data; diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index 888ec27..1efd26f 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -122,7 +122,7 @@ FINISHED: 'finished' }; - const { homepage, speakers, site, ...settings } = data; + const { homepage, speakers, site, registrationInfo, ...settings } = data; const REGISTRATION = { HIDDEN: 'hidden', @@ -134,8 +134,31 @@ const eventStartDate = new Date('2026-09-24T00:00:00'); const today = new Date(); const daysUntilEvent = Math.max(0, Math.ceil((eventStartDate - today) / (1000 * 60 * 60 * 24))); - const eventStatus = settings.eventStatus ?? settings.event_status ?? EVENT_STATUS.HYPE; + const eventStatus = site?.eventStatus ?? site?.event_status ?? EVENT_STATUS.HYPE; + function plainStatusText(content, fallback) { + if (!content) return fallback; + + return content + .replace(/[#*_`>~-]/g, '') + .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') + .trim(); + } + + const registrationSoonText = plainStatusText( + registrationInfo?.content_soon, + 'Pronto abriremos las inscripciones' + ); + + const registrationOpenText = plainStatusText( + registrationInfo?.content_open, + '¡Inscripciones abiertas!' + ); + + const registrationFinishedText = plainStatusText( + registrationInfo?.content_finished, + 'Inscripciones finalizadas' + ); const heroImage = heroLosPuertosGrises; @@ -148,7 +171,7 @@
-

© Ted Nasmith - And Aragorn Came

+

© Ted Nasmith - Thus Came Aragorn

{#if homepage && homepage.title} @@ -183,14 +206,14 @@ class="button home-hero__button-primary home-hero__button-primary--disabled" aria-disabled="true" > - Pronto abriremos las inscripciones + {registrationSoonText} {:else if eventStatus === EVENT_STATUS.PUBLIC} - ¡Inscripciones abiertas! + {registrationOpenText} {:else if eventStatus === EVENT_STATUS.FINISHED} -

Inscripciones finalizadas

+

{registrationFinishedText}

{/if}
diff --git a/frontend/src/routes/code-of-conduct/+page.svelte b/frontend/src/routes/code-of-conduct/+page.svelte index 089d4df..520f38e 100644 --- a/frontend/src/routes/code-of-conduct/+page.svelte +++ b/frontend/src/routes/code-of-conduct/+page.svelte @@ -131,27 +131,20 @@ .charter-card__image { position: relative; - height: 11rem; overflow: hidden; border-radius: 1.15rem; - background: var(--bulma-dark, #123f46); + background: transparent; } .charter-card__image::after { - content: ''; - position: absolute; - inset: 0; - background: - linear-gradient(90deg, rgba(18, 63, 70, 0.2), transparent 45%), - linear-gradient(180deg, transparent 40%, rgba(18, 63, 70, 0.35)); - pointer-events: none; + display: none; } .charter-card__image img { display: block; width: 100%; - height: 100%; - object-fit: cover; + height: auto; + object-fit: contain; object-position: center; } @@ -247,7 +240,8 @@ } .charter-card__image { - height: 10rem; + height: auto; + aspect-ratio: auto; } .charter-card__credit { diff --git a/frontend/src/routes/gira-el-timon/+page.js b/frontend/src/routes/gira-el-timon/+page.js new file mode 100644 index 0000000..ce00bd5 --- /dev/null +++ b/frontend/src/routes/gira-el-timon/+page.js @@ -0,0 +1,13 @@ +import { fetchSingle } from '../../services/api'; + +/** @type {import('./$types').PageLoad} */ +export async function load() { + const pages = await fetchSingle('/simple-pages/?filters[path][$eq]=gira-el-timon'); + + return ( + pages?.[0] ?? { + title: 'Gira el timón', + content: '' + } + ); +} diff --git a/frontend/src/routes/gira-el-timon/+page.svelte b/frontend/src/routes/gira-el-timon/+page.svelte new file mode 100644 index 0000000..9132510 --- /dev/null +++ b/frontend/src/routes/gira-el-timon/+page.svelte @@ -0,0 +1,344 @@ + + +
+

{data.title}

+
+ +
+
+
+ {#if wheelContent.intro} +
+ +
+ {/if} + +
+ + +
+ + +
+ + + {#each prizes as prize, index} +
+ {prize.number} +
+ {/each} +
+
+
+
+
+
+ +{#if selectedPrize} + +{/if} + + diff --git a/frontend/src/routes/preinscripcion/+page.js b/frontend/src/routes/preinscripcion/+page.js index 3108198..127ceda 100644 --- a/frontend/src/routes/preinscripcion/+page.js +++ b/frontend/src/routes/preinscripcion/+page.js @@ -2,13 +2,13 @@ import { fetchSingle } from '../../services/api'; /** @type {import('./$types').PageLoad} */ export async function load({}) { - let data = {} + let data = {}; const [settingsEntry, siteEntry] = await Promise.all([ - fetchSingle("/setting"), - fetchSingle("/enrollment") - ]); - if (settingsEntry || siteEntry) { - data = {...settingsEntry, ...siteEntry} - } - return data; -} \ No newline at end of file + fetchSingle('/setting'), + fetchSingle('/enrollment') + ]); + if (settingsEntry || siteEntry) { + data = { ...settingsEntry, ...siteEntry }; + } + return data; +} diff --git a/frontend/src/routes/preinscripcion/+page.svelte b/frontend/src/routes/preinscripcion/+page.svelte index 2c51bab..74bed01 100644 --- a/frontend/src/routes/preinscripcion/+page.svelte +++ b/frontend/src/routes/preinscripcion/+page.svelte @@ -1,40 +1,49 @@

{data.title}

+
{#if data.content} - + {/if} + {#if data.enrollment_active && options.length > 0} -
- {#each options as optionObj_ (optionObj_.href)} +
+ {#each options as optionObj_ (optionObj_.href)}
- + {(optionObj_ as Option).label}
- {/each} -
+ {/each} +
{/if}
-
\ No newline at end of file + diff --git a/frontend/src/routes/price/+page.js b/frontend/src/routes/price/+page.js index 849163d..f6c0294 100644 --- a/frontend/src/routes/price/+page.js +++ b/frontend/src/routes/price/+page.js @@ -1,13 +1,31 @@ -import { fetchCollection } from '../../services/api'; +import { encodeQuery, fetchBasic, fetchCollection } from '../../services/api'; /** @type {import('./$types').PageLoad} */ export async function load({}) { - let data = {} - const priceEntries = await fetchCollection("/prices?populate=*"); - if (priceEntries) { - data = { - prices: priceEntries - }; - } - return data; -} \ No newline at end of file + const tshirtFrontImagePath = `/upload/files?${encodeQuery({ + filters: { + name: { + $eq: 'camiseta.jpg' + } + } + })}`; + + const tshirtBackImagePath = `/upload/files?${encodeQuery({ + filters: { + name: { + $eq: 'camiseta_trasera.jpg' + } + } + })}`; + + const [priceEntries, tshirtFrontImages, tshirtBackImages] = await Promise.all([ + fetchCollection('/prices?populate=*'), + fetchBasic(tshirtFrontImagePath), + fetchBasic(tshirtBackImagePath) + ]); + + return { + prices: priceEntries ?? [], + tshirtImages: [tshirtFrontImages?.[0], tshirtBackImages?.[0]].filter(Boolean) + }; +} diff --git a/frontend/src/routes/price/+page.svelte b/frontend/src/routes/price/+page.svelte index 38a6f9b..d079334 100644 --- a/frontend/src/routes/price/+page.svelte +++ b/frontend/src/routes/price/+page.svelte @@ -1,9 +1,13 @@
@@ -92,8 +145,6 @@

Habitaciones

- -
@@ -150,33 +201,59 @@

Inscripción premium

- -
{#each premiumPrices as priceObj} -
-
-
{priceObj.name}
- - {#if priceObj.description} -

{priceObj.description}

- {/if} -
- -
openTshirtModal(priceObj)} > - {#if isPricePending(priceObj.value)} - PRECIO POR DETERMINAR - {:else} - {priceObj.value} - {priceObj.currency} - {/if} -
-
+
+
{priceObj.name}
+ + {#if priceObj.description} +

{priceObj.description}

+ {/if} +
+ +
+ {#if isPricePending(priceObj.value)} + PRECIO POR DETERMINAR + {:else} + {priceObj.value} + {priceObj.currency} + {/if} +
+ + {:else} +
+
+
{priceObj.name}
+ + {#if priceObj.description} +

{priceObj.description}

+ {/if} +
+ +
+ {#if isPricePending(priceObj.value)} + PRECIO POR DETERMINAR + {:else} + {priceObj.value} + {priceObj.currency} + {/if} +
+
+ {/if} {/each}
@@ -185,10 +262,6 @@ \ No newline at end of file + .registration-status { + margin-bottom: 3rem; + } + + .registration-status__sign { + position: relative; + display: grid; + grid-template-columns: 6.5rem minmax(0, 1fr) 6.5rem; + align-items: center; + gap: 1rem; + max-width: min(100%, 52rem); + margin-right: auto; + margin-left: auto; + padding: 1rem; + background: + linear-gradient( + 90deg, + rgba(70, 38, 15, 0.28), + transparent 14%, + transparent 86%, + rgba(70, 38, 15, 0.28) + ), + repeating-linear-gradient( + 90deg, + #8a5a2b 0, + #8a5a2b 1.7rem, + #7a4b22 1.7rem, + #7a4b22 1.9rem, + #9b6a35 1.9rem, + #9b6a35 3.6rem + ); + border: 3px solid #4d2b13; + box-shadow: + inset 0 0 0 2px rgba(255, 226, 154, 0.22), + inset 0 0 1.8rem rgba(45, 22, 8, 0.5), + 0 1.1rem 2.4rem rgba(13, 59, 68, 0.24); + } + + .registration-status__sign::before, + .registration-status__sign::after { + content: ''; + position: absolute; + top: 0.75rem; + width: 0.7rem; + height: 0.7rem; + border-radius: 50%; + background: radial-gradient(circle, #f3d27a 0 28%, #6c3d1b 30% 100%); + box-shadow: + 0 0 0 2px rgba(45, 22, 8, 0.35), + 0 0.15rem 0.25rem rgba(0, 0, 0, 0.35); + } + + .registration-status__sign::before { + left: 0.75rem; + } + + .registration-status__sign::after { + right: 0.75rem; + } + + .registration-status__icon { + display: block; + width: 100%; + max-width: 4.8rem; + height: auto; + justify-self: center; + opacity: 0.92; + filter: brightness(0) invert(1) drop-shadow(0 0.25rem 0.25rem rgba(45, 22, 8, 0.45)); + } + + .registration-status__icon--left { + transform: rotate(-8deg); + } + + .registration-status__icon--right { + transform: rotate(8deg); + } + + .registration-status__buttons { + position: relative; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.9rem; + max-width: 100%; + padding: 1.15rem 1.4rem; + background: + linear-gradient(rgba(255, 244, 207, 0.92), rgba(255, 244, 207, 0.92)), + radial-gradient(circle at 20% 20%, rgba(176, 107, 45, 0.18), transparent 34%), + radial-gradient(circle at 80% 80%, rgba(13, 59, 68, 0.12), transparent 38%); + border: 2px solid rgba(77, 43, 19, 0.78); + box-shadow: + inset 0 0 0 3px rgba(255, 255, 255, 0.35), + 0 0.55rem 1rem rgba(45, 22, 8, 0.24); + } + + .registration-status__buttons::before, + .registration-status__buttons::after { + content: ''; + position: absolute; + right: 1rem; + left: 1rem; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(77, 43, 19, 0.5), transparent); + } + + .registration-status__buttons::before { + top: 0.55rem; + } + + .registration-status__buttons::after { + bottom: 0.55rem; + } + + .registration-status__button { + position: relative; + z-index: 1; + display: inline-flex; + align-items: center; + justify-content: center; + max-width: 100%; + height: auto; + min-height: auto; + padding: 1rem 2.1rem; + overflow: hidden; + border: 1px solid rgba(255, 244, 207, 0.72); + border-radius: 999px; + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 38%), + linear-gradient(180deg, #ffe6a3 0%, #d7b56d 54%, #a96b2b 100%); + color: #0d3b44; + font-family: var(--bulma-family-primary, inherit); + font-size: 1.1rem; + font-weight: 900; + line-height: 1.2; + text-align: center; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38); + white-space: normal; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.72), + inset 0 -0.25rem 0 rgba(77, 43, 19, 0.22), + 0 0.9rem 1.8rem rgba(45, 22, 8, 0.28); + transition: + transform 180ms ease, + box-shadow 180ms ease, + filter 180ms ease; + } + + .registration-status__button::before { + content: ''; + position: absolute; + inset: 0.28rem; + border: 1px solid rgba(77, 43, 19, 0.28); + border-radius: inherit; + pointer-events: none; + } + + .registration-status__button::after { + content: ''; + position: absolute; + top: -60%; + left: -35%; + width: 32%; + height: 220%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); + transform: rotate(18deg); + transition: left 260ms ease; + pointer-events: none; + } + + .registration-status__button:hover { + border-color: rgba(255, 244, 207, 0.9); + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 38%), + linear-gradient(180deg, #fff0bd 0%, #ddb96d 54%, #a96b2b 100%); + color: #0d3b44; + filter: brightness(1.03); + transform: translateY(-2px); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.8), + inset 0 -0.25rem 0 rgba(77, 43, 19, 0.24), + 0 1.1rem 2rem rgba(45, 22, 8, 0.34); + } + + .registration-status__button:hover::after { + left: 105%; + } + + .registration-status__button span { + display: inline-block; + margin-left: 0.35rem; + line-height: 1; + transition: transform 180ms ease; + } + + .registration-status__button:hover span { + transform: translateX(3px); + } + + .registration-status__button--disabled, + .registration-status__button--disabled:hover { + cursor: not-allowed; + border-color: rgba(255, 244, 207, 0.36); + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 38%), + linear-gradient(180deg, rgba(215, 181, 109, 0.52), rgba(169, 107, 43, 0.44)); + color: rgba(13, 59, 68, 0.62); + text-shadow: none; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.26), + inset 0 -0.2rem 0 rgba(77, 43, 19, 0.12), + 0 0.65rem 1.2rem rgba(45, 22, 8, 0.18); + filter: none; + transform: none; + } + + .registration-status__button--disabled::after { + display: none; + } + + .registration-status__button--disabled:hover span { + transform: none; + } + + .registration-status__message { + position: relative; + z-index: 1; + display: inline-flex; + align-items: center; + justify-content: center; + max-width: 100%; + margin: 0; + padding: 0.9rem 1.4rem; + border: 2px solid #4d2b13; + background: rgba(13, 59, 68, 0.88); + color: rgba(255, 244, 207, 0.96); + font-family: var(--bulma-family-primary, inherit); + font-weight: 700; + line-height: 1.25; + text-align: center; + white-space: normal; + box-shadow: + inset 0 0 0 2px rgba(255, 255, 255, 0.08), + 0 0.55rem 1rem rgba(45, 22, 8, 0.24); + } + + .registration-process__intro { + margin-bottom: 2rem; + } + + .registration-steps { + margin: 0; + padding: 0; + list-style: none; + } + + .registration-step { + position: relative; + display: grid; + grid-template-columns: auto minmax(0, 1fr); + gap: 1.1rem; + margin-bottom: 1.4rem; + } + + .registration-step:not(:last-child)::before { + content: ''; + position: absolute; + top: 3rem; + bottom: -1.4rem; + left: 1.35rem; + width: 0.35rem; + background: repeating-linear-gradient( + 180deg, + #b06b2d 0, + #b06b2d 0.45rem, + #d7b56d 0.45rem, + #d7b56d 0.9rem + ); + border-radius: 999px; + box-shadow: inset 0 0 0 1px rgba(13, 59, 68, 0.12); + } + + .registration-step__number { + position: relative; + z-index: 1; + display: inline-flex; + align-items: center; + justify-content: center; + width: 3rem; + height: 3rem; + border: 3px solid #b06b2d; + border-radius: 50%; + background: #ffffff; + color: #0d3b44; + font-family: var(--bulma-family-primary, inherit); + font-weight: 700; + box-shadow: + 0 0 0 0.35rem rgba(255, 255, 255, 0.95), + 0 0.5rem 1rem rgba(13, 59, 68, 0.12); + } + + .registration-step__content { + padding: 1rem 1.25rem; + border-left: 4px solid #43b2dc; + background: rgba(255, 255, 255, 0.72); + box-shadow: 0 0.6rem 1.4rem rgba(13, 59, 68, 0.08); + } + + .registration-step__content :global(p) { + margin: 0; + } + + @media screen and (max-width: 768px) { + .registration-status__sign { + grid-template-columns: 3.8rem minmax(0, 1fr) 3.8rem; + gap: 0.55rem; + padding: 0.7rem; + } + + .registration-status__buttons { + padding: 0.95rem 0.8rem; + } + + .registration-status__icon { + max-width: 3.1rem; + } + + .registration-status__button, + .registration-status__message { + width: 100%; + font-size: 0.95rem; + } + + .registration-step { + gap: 0.85rem; + } + + .registration-step__content { + padding: 0.9rem 1rem; + } + } + diff --git a/frontend/src/routes/speakers/+page.js b/frontend/src/routes/speakers/+page.js index 9ae4b9b..9319330 100644 --- a/frontend/src/routes/speakers/+page.js +++ b/frontend/src/routes/speakers/+page.js @@ -2,16 +2,18 @@ import { fetchSingle, fetchCollection } from '../../services/api'; /** @type {import('./$types').PageLoad} */ export async function load({}) { - let data = {} + let data = {}; const [speakersEntry, profileEntries] = await Promise.all([ - fetchSingle("/speakers"), - fetchCollection("/public-profiles?filters[$or][0][is_guest][$eq]=true&filters[$or][1][is_speaker][$eq]=true&populate=*&sort[0]=order:asc"), - ]); - if (speakersEntry || profileEntries) { - data = { - speakers: speakersEntry, - speaker_profiles: profileEntries, - }; - } - return data; + fetchSingle('/speakers'), + fetchCollection( + '/public-profiles?filters[$or][0][is_guest][$eq]=true&filters[$or][1][is_speaker][$eq]=true&populate=*&sort=order:asc' + ) + ]); + if (speakersEntry || profileEntries) { + data = { + speakers: speakersEntry, + speaker_profiles: profileEntries + }; + } + return data; } diff --git a/frontend/src/routes/speakers/+page.svelte b/frontend/src/routes/speakers/+page.svelte index e7ec233..59780a0 100644 --- a/frontend/src/routes/speakers/+page.svelte +++ b/frontend/src/routes/speakers/+page.svelte @@ -1,62 +1,157 @@

{data.speakers.title}

-
-
- {#if data.speakers.content} - - {/if} - -
- {#each data.speaker_profiles as speaker_profile, i} - -
-
-
- handleClick(speaker_profile)} src="{storage_url}{speaker_profile.photo.url}"/> -
-
- {#if speaker_profile.is_guest} -

Special guest

- {/if} - - -

{speaker_profile.fullname} - {#if speaker_profile.nickname} - "{speaker_profile.nickname}" - {/if} -

- - {#if speaker_profile.title} -

{speaker_profile.title}

- {/if} -
- -
-
- {/each} -
-
+
+
+ {#if data.speakers.content} + + {/if} + +
+ {#each data.speaker_profiles as speaker_profile, i} +
+
+
+ handleClick(speaker_profile)} + src="{storage_url}{speaker_profile.photo.url}" + alt={speaker_profile.fullname} + /> +
+ +
+ {#if speaker_profile.is_guest} +

Invitada principal

+ {/if} + +

+ {speaker_profile.fullname} + {#if speaker_profile.nickname} + "{speaker_profile.nickname}" + {/if} +

+ + {#if speaker_profile.title} +

{speaker_profile.title}

+ {/if} +
+
+
+ {/each} +
+
+
+ +