import { ProjetsGrid } from '../components/ProjetsGrid.jsx'
import { PROJETS_ECOSYSTEM_DOCKER, PROJETS_MAIN } from '../data/projets.js'

export function Projets() {
  return (
    <div className="page page--stack-only page--projets">
      <div className="content-stack" aria-label="Contenu principal">
        <section
          className="content-stack__panel content-stack__panel--padded"
          aria-label="Liste des projets"
        >
          <ProjetsGrid projects={PROJETS_MAIN} />
        </section>
        <section
          className="content-stack__panel content-stack__panel--padded content-stack__panel--docker-ecosystem"
          aria-label="Ecosystem Docker"
        >
          <h2 className="projets-section__title">Ecosystem Docker</h2>
          <ProjetsGrid projects={PROJETS_ECOSYSTEM_DOCKER} />
        </section>
      </div>
    </div>
  )
}
