fiveq-website-2026/src/pages/[...lang]/index.astro

---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { Icon } from 'astro-icon/components';
import { getCopy, hrefFor, langStaticPaths, resolveLang } from '../../i18n';

export function getStaticPaths() {
  return langStaticPaths();
}

const locale = resolveLang(Astro.params.lang);
const L = getCopy(locale);
---

<BaseLayout
  title={L.home.metaTitle}
  description={L.home.metaDescription}
  currentSegment=""
  lang={locale}
>
  <section class="hero index-hero">
    <div class="container hero-split">
      <div class="hero-split-text">
        <h1 class="hero-title">{L.home.heroTitle}</h1>
        <p class="hero-subtitle">{L.home.heroSubtitle}</p>
      </div>
    </div>
  </section>

  <section class="section compact">
    <div class="container">
      <div class="section-head">
        <h2 class="section-title">{L.home.advantagesTitle}</h2>
      </div>
      <div class="bento-grid">
        <div class="index-left-right feature-card">
          <div class="bento-hero">
            <div class="art-panel photo" style="height:100%">
              <img src="/images/index-left.webp" alt={L.home.bentoAlt} loading="eager" fetchpriority="high" decoding="async" />
            </div>
          </div>
          <div class="bento-side soft">
            <h3>{L.home.authorityTitle}</h3>
            <p>{L.home.authorityBody}</p>
          </div>
        </div>

        <div class="bento-row">
          <article class="feature-card soft card-with-thumb">
            <div class="card-thumb">
              <img
                src="/images/sketch/f1b84ab9a9a9c47ffa390d0bea93ab79d019625c.webp"
                alt=""
                loading="lazy"
                decoding="async"
              />
            </div>
            <h3>{L.home.aiTitle}</h3>
            <p>{L.home.aiBody}</p>
          </article>
          <article class="feature-card soft card-with-thumb">
            <div class="card-thumb">
              <img
                src="/images/sketch/efa4288e0fad73637720bfd9ac094a67a39ed465.webp"
                alt=""
                loading="lazy"
                decoding="async"
              />
            </div>
            <h3>{L.home.personalTitle}</h3>
            <p>{L.home.personalBody}</p>
          </article>
          <article class="feature-card soft card-with-thumb">
            <div class="card-thumb">
              <img
                src="/images/sketch/bcc2546bb5ac5489aaf0a6cd2501e09da4de3570.webp"
                alt=""
                loading="lazy"
                decoding="async"
              />
            </div>
            <h3>{L.home.communityTitle}</h3>
            <p>{L.home.communityBody}</p>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="section compact">
    <div class="container">
      <div class="section-head">
        <h2 class="section-title">{L.home.conceptsTitle}</h2>
      </div>
      <div class="grid-three">
        <article class="info-card">
          <div class="info-card-title">
            <Icon name="lucide:book-text" />
            <span>{L.home.hskTitle}</span>
          </div>
          <p>{L.home.hskBody}</p>
        </article>
        <article class="info-card">
          <div class="info-card-title">
            <Icon name="lucide:message-square-text" />
            <span>{L.home.skillsTitle}</span>
          </div>
          <p>{L.home.skillsBody}</p>
        </article>
        <article class="info-card">
          <div class="info-card-title">
            <Icon name="lucide:user-round-check" />
            <span>{L.home.boostTitle}</span>
          </div>
          <p>{L.home.boostBody}</p>
        </article>
      </div>
      <div class="hero-actions">
        <a class="btn btn-outline" href={hrefFor(locale, 'curriculum')}>{L.home.ctaCurriculum}</a>
      </div>
    </div>
  </section>

  <section class="section" id="download">
    <div class="container grid-two">
      <article class="feature-card showcase-card">
        <div class="showcase-hero">
          <div class="showcase-title">{L.home.facultyHighlightTitle}</div>
          <img src="/images/teacher.webp" alt={L.home.teacherImgAlt} loading="lazy" decoding="async" />
        </div>
        <div class="showcase-body">
          <p>{L.home.facultyHighlightBody}</p>
          <div class="card-action">
            <a class="btn btn-outline" href={hrefFor(locale, 'faculty')}>{L.home.ctaFaculty}</a>
          </div>
        </div>
      </article>
      <article class="feature-card showcase-card">
        <div class="showcase-hero">
          <div class="showcase-title">{L.home.experienceTitle}</div>
          <img src="/images/study.webp" alt={L.home.studyImgAlt} loading="lazy" decoding="async" />
        </div>
        <div class="showcase-body">
          <p>{L.home.experienceBody}</p>
          <div class="card-action">
            <a class="btn btn-outline" href="#download">{L.home.ctaStart}</a>
          </div>
        </div>
      </article>
    </div>
  </section>
</BaseLayout>