diff --git a/www/src/components/HomePage.astro b/www/src/components/HomePage.astro index 849907e..8980bca 100644 --- a/www/src/components/HomePage.astro +++ b/www/src/components/HomePage.astro @@ -17,7 +17,8 @@ interface Props { lang?: string } const { lang = 'en' } = Astro.props; const es = lang === 'es'; const entry = await getEntry('pages', es ? 'es/index' : 'en/index'); -const { title, description, canonical, sections = [] } = entry!.data; +if (!entry) throw new Error(`[HomePage] Content entry not found for lang="${lang}". If running in dev, restart the dev server to rebuild the content layer cache.`); +const { title, description, canonical, sections = [] } = entry.data; --- {(sections as HomeSection[]).map((section) => { diff --git a/www/src/components/VideoCard.astro b/www/src/components/VideoCard.astro new file mode 100644 index 0000000..b38a207 --- /dev/null +++ b/www/src/components/VideoCard.astro @@ -0,0 +1,51 @@ +--- +interface Props { + image: string; + alt: string; + videoUrl: string; + videoTitle: string; +} +const { image, alt, videoUrl, videoTitle } = Astro.props; +--- + + +
+ +
+ +
+
+ + + diff --git a/www/src/components/home/HomeBenefits.astro b/www/src/components/home/HomeBenefits.astro index 9c7c05d..18a552b 100644 --- a/www/src/components/home/HomeBenefits.astro +++ b/www/src/components/home/HomeBenefits.astro @@ -1,5 +1,6 @@ --- import type { BenefitsSection } from '../../types/home-sections'; +import VideoCard from '../VideoCard.astro'; interface Props { section: BenefitsSection } const { section } = Astro.props; --- @@ -10,9 +11,11 @@ const { section } = Astro.props;

{section.subheading}

- - {section.videoImageAlt} - ▶ - + diff --git a/www/src/content/pages/en/index.md b/www/src/content/pages/en/index.md index e7127e6..6c0e191 100644 --- a/www/src/content/pages/en/index.md +++ b/www/src/content/pages/en/index.md @@ -50,7 +50,8 @@ sections: - Individualized Results - Sensory-Friendly Rooms - Convenient and Affordable - videoHref: /tour + videoUrl: "https://www.youtube-nocookie.com/embed/EczPH1jx9mc?si=beestOCaO4tL7Re6" + videoTitle: AIA Learner Journey videoImage: learner-journey.webp videoImageAlt: Learner journey for children with autism video diff --git a/www/src/content/pages/es/index.md b/www/src/content/pages/es/index.md index a345bea..6da76bc 100644 --- a/www/src/content/pages/es/index.md +++ b/www/src/content/pages/es/index.md @@ -50,7 +50,8 @@ sections: - Resultados individualizados - Salas sensoriales - Conveniente y asequible - videoHref: /tour + videoUrl: "https://www.youtube-nocookie.com/embed/EczPH1jx9mc?si=beestOCaO4tL7Re6" + videoTitle: AIA Learner Journey videoImage: learner-journey.webp videoImageAlt: Video del recorrido del estudiante diff --git a/www/src/styles/components.css b/www/src/styles/components.css index bf7797a..b41737e 100644 --- a/www/src/styles/components.css +++ b/www/src/styles/components.css @@ -105,9 +105,18 @@ .source-list li > p { margin-block: 0; } .two-column-list { columns: 2; } .benefit-grid { grid-template-columns: 1.1fr .9fr; } -.video-card { display: block; position: relative; } +.video-card { background: none; border: none; cursor: pointer; display: block; padding: 0; position: relative; } .video-card img { width: 100%; } -.video-card span { align-items: center; background: var(--color-accent); border-radius: 50%; color: white; display: flex; height: 64px; justify-content: center; left: calc(50% - 32px); position: absolute; top: calc(50% - 32px); width: 64px; } +.video-card span { align-items: center; background: var(--color-accent); border-radius: 50%; color: white; display: flex; height: 64px; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 64px; z-index: 1; } +.video-card::before, .video-card::after { animation-duration: 3s; animation-iteration-count: infinite; animation-name: video-ripple; animation-timing-function: cubic-bezier(.65, 0, .34, 1); border: 8px solid var(--color-accent); border-radius: 50%; content: ""; height: 64px; left: 50%; opacity: 0; position: absolute; top: 50%; width: 64px; } +.video-card::before { animation-delay: .5s; } +@keyframes video-ripple { 0% { opacity: 1; transform: translate(-50%, -50%) scale3d(.75, .75, 1); } to { opacity: 0; transform: translate(-50%, -50%) scale3d(1.5, 1.5, 1); } } +.video-dialog { background: none; border: none; box-sizing: border-box; max-width: min(90vw, 900px); padding: 1rem 1rem 0 0; width: 100%; } +.video-dialog::backdrop { background: rgba(0, 0, 0, .85); } +.video-dialog-inner { position: relative; } +.video-dialog-frame { aspect-ratio: 16 / 9; width: 100%; } +.video-dialog-frame iframe { border: none; height: 100%; width: 100%; } +.video-dialog-close { background: white; border: none; border-radius: 50%; cursor: pointer; font-size: 1rem; height: 2rem; line-height: 2rem; position: absolute; right: -1rem; top: -1rem; width: 2rem; } .skills-section { background: var(--color-primary); color: white; padding-block: 4rem; text-align: center; } .skills-section h2 { color: white; } .skills-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; } diff --git a/www/src/types/home-sections.ts b/www/src/types/home-sections.ts index b4fc346..b858e38 100644 --- a/www/src/types/home-sections.ts +++ b/www/src/types/home-sections.ts @@ -26,7 +26,8 @@ export interface BenefitsSection { heading: string; subheading: string; items: string[]; - videoHref: string; + videoUrl: string; + videoTitle: string; videoImage: string; videoImageAlt: string; }