MEP CFP API Con 2026

pwa/app/(con)/[locale]/con/2026/call-for-papers/components/Informations.tsx

@@ -0,0 +1,56 @@
+"use client";
+import { useContext } from "react";
+import { LanguageContext } from "contexts/con/LanguageContext";
+import SectionTitle from "components/con/common/typography/SectionTitle";
+import Button from "components/con/common/Button";
+import SectionSubTitle from "components/con/common/typography/SectionSubtitle";
+
+const Arrow = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    className="stroke-blue size-8"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+    />
+  </svg>
+);
+
+export default function Informations() {
+  const { t } = useContext(LanguageContext);
+  return (
+    <div className="after:h-1/3 after:absolute after:w-full after:bg-grey after:bottom-0 after:left-0 relative">
+      <div className="container flex flex-col items-center py-12 relative z-10">
+        <SectionTitle h1 dark lined>
+          <strong>{t("2026.cfp.title")}</strong>
+        </SectionTitle>
+        <SectionSubTitle dark>{t("2026.cfp.subtitle")}</SectionSubTitle>
+        <div className="bg-white border-t-8 border-t-blue shadow-xl text-center p-8 dotted-corner corner-bottom mx-auto w-full max-w-4xl flex flex-col gap-8 items-center">
+          <span className="font-bold text-blue leading-tight font-title text-xl uppercase lined-center lined-blue relative">
+            {t("2026.cfp.informations")}
+          </span>
+          <ul className="flex flex-col gap-8 text-left text-lg">
+            {[1, 2, 3, 4, 5, 6].map((index) => (
+              <li key={index} className="flex flex-row gap-2">
+                <Arrow />
+                <p className="flex-1">{t(`2026.cfp.point_${index}`)}</p>
+              </li>
+            ))}
+          </ul>
+          <Button
+            size="large"
+            external
+            to="https://conference-hall.io/api-platform-conference-2026-lille-and-online"
+          >
+            {t("2026.cfp.button_subscribe")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

pwa/app/(con)/[locale]/con/2026/call-for-papers/components/Package.tsx

@@ -0,0 +1,37 @@
+"use client";
+import { useContext } from "react";
+import { LanguageContext } from "contexts/con/LanguageContext";
+import SectionTitle from "components/con/common/typography/SectionTitle";
+
+export default function Package() {
+  const { t } = useContext(LanguageContext);
+  return (
+    <div className="container max-w-6xl text-center">
+      <SectionTitle small dark lined>
+        <strong>{t("2026.cfp.package.title")}</strong>
+      </SectionTitle>
+      <div className="flex flex-col lg:flex-row items-center lg:items-start gap-12 lg:gap-0 text-left">
+        <div className="translate-y-12 relative z-10 w-4/5 lg:w-1/2 max-w-md before:absolute before:w-full before:h-full before:bg-blue before:-translate-x-3 before:-translate-y-3 before:left-0 before:top-0">
+          <img
+            src="/images/con/2026/cfp/speaker-gift.jpg"
+            className="relative w-full"
+            alt=""
+          />
+        </div>
+        <div className="bg-white max-w-xl p-8 flex-1 pt-20 lg:pt-8 lg:pl-20 -translate-y-12 lg:-translate-y-0 lg:-translate-x-12">
+          <div className="font-bold text-blue leading-tight font-title text-xl uppercase lined-left lined-blue relative">
+            {t("2026.cfp.package.subtitle")}
+          </div>
+          <ul className="mb-30 text-left flex flex-col gap-3 mt-8">
+            {[1, 2, 3, 4, 5, 6].map((index) => (
+              <li key={index} className="flex items-baseline">
+                <span className="text-blue icon-circle-chevron-right mr-2" />
+                {t(`2026.cfp.package.point_${index}`)}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}

pwa/app/(con)/[locale]/con/2026/call-for-papers/components/Subject.tsx

@@ -0,0 +1,65 @@
+"use client";
+import { useContext } from "react";
+import { LanguageContext } from "contexts/con/LanguageContext";
+import SectionTitle from "components/con/common/typography/SectionTitle";
+import Button from "components/con/common/Button";
+import SectionSubTitle from "components/con/common/typography/SectionSubtitle";
+
+export default function Informations() {
+  const { t, getLocaleDictionary } = useContext(LanguageContext);
+  const categories = getLocaleDictionary?.()[2026].cfp.subject.categories || [];
+  return (
+    <div className="bg-grey pb-12 relative z-20">
+      <div className="container flex flex-col items-center">
+        <SectionTitle small lined>
+          <strong>{t("2026.cfp.subject.title")}</strong>
+        </SectionTitle>
+        <SectionSubTitle>{t("2026.cfp.subject.subtitle")}</SectionSubTitle>
+        <div className="flex flex-wrap justify-center gap-8 md:gap-3">
+          {categories.map((c) => {
+            return (
+              <div
+                key={c.icon}
+                className="flex flex-col md:flex-row text-center md:text-left md:odd:translate-x-4 md:even:-translate-x-4 md:odd:rotate-2 md:even:-rotate-1  md:even:flex-row-reverse gap-4 md:gap-12 items-center bg-white w-full max-w-3xl p-8 shadow-floating"
+              >
+                <div className="rounded-full bg-white size-28 md:size-40 relative flex items-center justify-center">
+                  <img
+                    src={`/images/con/2026/cfp/${c.icon}.png`}
+                    className="rounded-full"
+                    alt=""
+                  />
+                  <div className="size-[110%] absolute max-w-none bg-circle bg-no-repeat left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+                </div>
+                <div className="flex-1">
+                  <p className="font-title text-lg text-blue font-extrabold mb-4 uppercase">
+                    {c.title}
+                  </p>
+                  <div className="text-left flex flex-col gap-2">
+                    {c.points.map((p, i) => (
+                      <div key={i} className="flex flex-row items-baseline">
+                        <span className="text-blue icon-circle-chevron-right mr-2" />
+                        <p
+                          dangerouslySetInnerHTML={{
+                            __html: p,
+                          }}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        <Button
+          className="mt-12"
+          size="large"
+          external
+          to="https://conference-hall.io/api-platform-conference-2026-lille-and-online"
+        >
+          {t("2026.cfp.subject.button_subscribe")}
+        </Button>
+      </div>
+    </div>
+  );
+}

pwa/app/(con)/[locale]/con/2026/call-for-papers/components/Techno.tsx

@@ -0,0 +1,23 @@
+"use client";
+import { useContext } from "react";
+import { LanguageContext } from "contexts/con/LanguageContext";
+import SectionTitle from "components/con/common/typography/SectionTitle";
+import { Logos } from "./logos";
+
+export default function Technos() {
+  const { t } = useContext(LanguageContext);
+  return (
+    <div className="container pt-12 flex flex-col items-center pb-44">
+      <SectionTitle small dark lined>
+        <strong>{t("2026.cfp.techno.title")}</strong>
+      </SectionTitle>
+      <div className="relative w-full h-16 my-4">
+        <div className="absolute max-w-none w-max left-0 top-0 flex gap-4 flex-row h-20 animate-defile">
+          <Logos />
+          <Logos />
+          <Logos />
+        </div>
+      </div>
+    </div>
+  );
+}

pwa/app/(con)/[locale]/con/2026/call-for-papers/components/logos.tsx

@@ -0,0 +1,16 @@
+export function Logos() {
+  return (
+    <>
+      <img src="/images/con/2025/cfp/api-platform.png" alt="" />
+      <img src="/images/con/2025/cfp/caddy.png" alt="" />
+      <img src="/images/con/2025/cfp/elastic.png" alt="" />
+      <img src="/images/con/2025/cfp/frankenphp.png" alt="" />
+      <img src="/images/con/2025/cfp/JS.png" alt="" />
+      <img src="/images/con/2025/cfp/laravel.png" alt="" />
+      <img src="/images/con/2025/cfp/php.png" alt="" />
+      <img src="/images/con/2025/cfp/rabbitmq.png" alt="" />
+      <img src="/images/con/2025/cfp/react-admin.png" alt="" />
+      <img src="/images/con/2025/cfp/xdebug.png" alt="" />
+    </>
+  );
+}

pwa/app/(con)/[locale]/con/2026/call-for-papers/page.tsx

@@ -0,0 +1,47 @@
+import { Locale, i18n } from "i18n/i18n-config";
+import { Metadata } from "next";
+import Package from "./components/Package";
+import Informations from "./components/Informations";
+import Subject from "./components/Subject";
+import Technos from "./components/Techno";
+
+type Props = {
+  params: { locale: Locale };
+};
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const locale = params.locale || i18n.defaultLocale;
+  const dictionary = await import(`i18n/meta/${locale}.json`);
+
+  return {
+    title: {
+      absolute: dictionary["call-for-papers"].title,
+      template: `%s - API Platform Conference 2026`,
+    },
+    description: dictionary["call-for-papers"].description,
+    openGraph: {
+      title: `${dictionary["call-for-papers"].title} - API Platform Conference`,
+      description: dictionary["call-for-papers"].description,
+    },
+    twitter: {
+      title: `${dictionary["call-for-papers"].title} - API Platform Conference`,
+      description: dictionary["call-for-papers"].description,
+    },
+    alternates: {
+      languages: {
+        en: locale === "en" ? undefined : "/con/2026/call-for-papers",
+        fr: locale === "fr" ? undefined : "/fr/con/2026/call-for-papers",
+      },
+    },
+  };
+}
+
+export default async function Page({ params }: { params: { locale: Locale } }) {
+  return (
+    <div>
+      <Informations />
+      <Subject />
+      <Package />
+      <Technos />
+    </div>
+  );
+}

pwa/app/(con)/[locale]/con/2026/components/HomePage.tsx

@@ -5,13 +5,13 @@ import SectionTitle from "components/con/common/typography/SectionTitle";
 import SectionSubTitle from "components/con/common/typography/SectionSubtitle";
 import Venue from "components/con/home/Venue";
 import Image from "next/image";
+import Wave from "components/con/common/Wave";
 import Partners from "components/con/home/Partners";
 import LookingSponsorCard from "components/con/home/LookingSponsorCard";
 import { Partner, Speaker } from "types/con";
 import { useContext } from "react";
 import { LanguageContext } from "contexts/con/LanguageContext";
 import Section from "components/con/home/Section";
-import Cover from "components/con/home/Cover";
 import PictureGallery from "components/con/common/PictureGallery";
 import AfterMovie from "../../2025/components/AfterMovie";
 
@@ -25,15 +25,34 @@ const HomePage = ({ speakers, partners, images }: HomePageProps) => {
   const { t, Translate, locale } = useContext(LanguageContext);
   return (
     <>
-      <Cover
-        date={t("2026.date")}
-        baseline={t("2026.baseline")}
-        button={
-          <Button className="pink" to={`/${locale}/con/2025/review`}>
-            {t("review.button")}
-          </Button>
-        }
-      />
+      <Section
+        className="flex flex-col text-white text-center justify-center items-center min-h-screen w-full relative overflow-hidden pt-12 pb-12"
+        section="home"
+      >
+        <div className="container relative z-10 flex flex-col items-center w-full md:flex-row md:gap-8">
+          <div className="w-4/5 my-6 md:mt-0 md:w-1/2 xl:w-[60%] relative">
+            <img
+              src="/images/con/2026/logo.svg"
+              alt="Logo API Platform Conference 2026"
+              className="scale-110 translate-y-[10%]"
+            />
+          </div>
+          <div className="flex-1 flex flex-col items-center md:items-start">
+            <p className="flex-1 text-lg md:text-xl font-extrabold pb-6 lg:text-3xl md:text-left">
+              {t("2026.baseline")}
+            </p>
+            <div className="flex gap-2">
+              <Button
+                className="pink"
+                to={`/${locale}/con/2025/call-for-papers`}
+              >
+                {t("2026.cfp.button")}
+              </Button>
+            </div>
+          </div>
+        </div>
+        <Wave className="absolute opacity-30 z-0 bottom-0 h-[60vh] left-1/2 top-[68%] -translate-y-1/2" />
+      </Section>
       <Section
         section="lastYear"
         className="bg-white z-10 relative pb-10 overflow-y-clip"
@@ -116,10 +135,8 @@ const HomePage = ({ speakers, partners, images }: HomePageProps) => {
                 edition: "2026",
                 link: (
                   <a
-                    href="mailto:events@les-tilleuls.coop"
+                    href={`/${locale}/con/2026/call-for-papers`}
                     className="link"
-                    target="_blank"
-                    rel="noreferrer nooepener"
                   >
                     {t("2026.our_speakers.subtitle_link")}
                   </a>

pwa/data/con/2026/footer.ts

@@ -15,6 +15,10 @@ const footer = [
   {
     title: "footer.the_event.title",
     links: [
+      {
+        title: "footer.the_event.links.cfp",
+        link: "/{{locale}}/con/2026/call-for-papers",
+      },
       {
         title: "footer.the_event.links.venue",
         link: "/{{locale}}/con/2026/#venue",

pwa/data/con/2026/nav.ts

@@ -7,8 +7,8 @@ const nav = {
       mobileOnly: true,
     },
     {
-      to: "/{{locale}}/con/editions",
-      text: "nav.links.previous_editions",
+      to: "/{{locale}}/con/2025/call-for-papers",
+      text: "nav.links.call_for_papers",
     },
     {
       to: "/{{locale}}/con/2025/review",