feat: add CFP page

pwa/app/(con)/[locale]/con/2025/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("2025.cfp.title")}</strong>
+        </SectionTitle>
+        <SectionSubTitle dark>{t("2025.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("2025.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(`2025.cfp.point_${index}`)}</p>
+              </li>
+            ))}
+          </ul>
+          <Button
+            size="large"
+            external
+            to="https://forms.gle/kNpkFsEZshYnfJST6"
+          >
+            {t("2025.cfp.button_subscribe")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

pwa/app/(con)/[locale]/con/2025/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("2025.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/2025/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("2025.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(`2025.cfp.package.point_${index}`)}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}

pwa/app/(con)/[locale]/con/2025/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?.()[2025].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("2025.cfp.subject.title")}</strong>
+        </SectionTitle>
+        <SectionSubTitle>{t("2025.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/2025/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://forms.gle/kNpkFsEZshYnfJST6"
+        >
+          {t("2025.cfp.subject.button_subscribe")}
+        </Button>
+      </div>
+    </div>
+  );
+}

pwa/app/(con)/[locale]/con/2025/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("2025.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/2025/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/2025/call-for-papers/page.tsx

@@ -0,0 +1,38 @@
+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[2025].title,
+      template: `%s - API Platform Conference 2025`,
+    },
+    alternates: {
+      languages: {
+        en: locale === "en" ? undefined : "/con/2025",
+        fr: locale === "fr" ? undefined : "/fr/con/2024",
+      },
+    },
+  };
+}
+
+export default async function Page({ params }: { params: { locale: Locale } }) {
+  return (
+    <div>
+      <Informations />
+      <Subject />
+      <Package />
+      <Technos />
+    </div>
+  );
+}

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

@@ -144,10 +144,8 @@ const HomePage = ({ speakers, partners, images }: HomePageProps) => {
                 edition: "2025",
                 link: (
                   <a
-                    href="https://forms.gle/kNpkFsEZshYnfJST6"
+                    href={`/${locale}/con/2025/call-for-papers`}
                     className="link"
-                    target="_blank"
-                    rel="noreferrer nooepener"
                   >
                     {t("2025.our_speakers.subtitle_link")}
                   </a>
@@ -164,8 +162,11 @@ const HomePage = ({ speakers, partners, images }: HomePageProps) => {
               {t("speakers.see_all")}
             </Button>
           ) : null}
-          <Button className="mx-auto my-7" to={`/${locale}/con/2024/speakers`}>
-            {t("2025.our_speakers.see_2024")}
+          <Button
+            className="mx-auto my-7"
+            to={`/${locale}/con/2025/call-for-papers`}
+          >
+            {t("2025.our_speakers.cfp")}
           </Button>
         </div>
       </Section>

pwa/components/con/common/typography/SectionTitle/index.tsx

@@ -39,10 +39,10 @@ export default function SectionTitle({
       ) : (
         <h2
           className={classnames(
-            "absolute select-none z-0 w-full left-1/2 bottom-16 -translate-x-1/2 scale-[2] text-6xl",
+            "absolute select-none z-0 w-full left-1/2 bottom-16 -translate-x-1/2 scale-[2]",
             dark ? "text-pink/20 opacity-80" : "text-blue/10",
             small
-              ? "text-4xl md:text-5xl/snug"
+              ? "text-4xl/snug md:text-5xl/snug"
               : "text-5xl/snug md:text-6xl/snug"
           )}
         >

pwa/components/con/layout/ContactCard.tsx

@@ -55,8 +55,8 @@ export default function ContactCard() {
             </p>
             <div className="social__list white">
               <ContactIcon
-                url="https://mastodon.online/@cooptilleuls"
-                icon="mastodon"
+                url="https://bsky.app/profile/les-tilleuls.coop"
+                icon="bluesky"
               />
               <ContactIcon
                 url="https://twitter.com/ApiPlatform"
@@ -66,6 +66,10 @@ export default function ContactCard() {
                 url="https://fr.linkedin.com/company/les-tilleuls-coop"
                 icon="linkedin"
               />
+              <ContactIcon
+                url="https://mastodon.online/@cooptilleuls"
+                icon="mastodon"
+              />
             </div>
           </div>
         </div>

pwa/components/con/layout/Footer.tsx

@@ -70,22 +70,22 @@ export default function Footer({
                 {t("follow_us")}
               </span>
               <a
-                href="https://mastodon.online/@cooptilleuls"
+                href="https://twitter.com/ApiPlatform"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="transition-all hover:text-blue"
               >
-                <i className="icon-mastodon mr-2" />
-                <span>Mastodon</span>
+                <i className="icon-twitter mr-2" />
+                <span>Twitter</span>
               </a>
               <a
-                href="https://twitter.com/ApiPlatform"
+                href="https://bsky.app/profile/api-platform.com"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="transition-all hover:text-blue"
               >
-                <i className="icon-twitter mr-2" />
-                <span>Twitter</span>
+                <i className="icon-mastodon mr-2" />
+                <span>Bluesky</span>
               </a>
               <a
                 href="https://fr.linkedin.com/company/les-tilleuls-coop"
@@ -96,6 +96,15 @@ export default function Footer({
                 <i className="icon-linkedin mr-2" />
                 <span>LinkedIn</span>
               </a>
+              <a
+                href="https://mastodon.online/@cooptilleuls"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="transition-all hover:text-blue"
+              >
+                <i className="icon-mastodon mr-2" />
+                <span>Mastodon</span>
+              </a>
             </div>
           ) : null}
         </div>

pwa/components/icons/social.tsx

@@ -19,11 +19,30 @@ export function Github({ className }: IconProps) {
 export function Twitter({ className }: IconProps) {
   return (
     <svg
-      viewBox="0 0 20 20"
       className={classNames("fill-current", className)}
-      aria-hidden="true"
+      id="Calque_1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 300.1 271"
+    >
+      <path
+        d="m237.1,0h46l-101,115,118,156h-92.6l-72.5-94.8-83,94.8H6l107-123L0,0h94.9l65.5,86.6L237.1,0Zm-16.1,244h25.5L81.5,26h-27.4l166.9,218Z"
+        strokeWidth="0"
+      />
+    </svg>
+  );
+}
+
+export function Bluesky({ className }: IconProps) {
+  return (
+    <svg
+      className={classNames("fill-current", className)}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 580 510.68"
     >
-      <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0 0 20 3.92a8.19 8.19 0 0 1-2.357.646 4.118 4.118 0 0 0 1.804-2.27 8.224 8.224 0 0 1-2.605.996 4.107 4.107 0 0 0-6.993 3.743 11.65 11.65 0 0 1-8.457-4.287 4.106 4.106 0 0 0 1.27 5.477A4.073 4.073 0 0 1 .8 7.713v.052a4.105 4.105 0 0 0 3.292 4.022 4.095 4.095 0 0 1-1.853.07 4.108 4.108 0 0 0 3.834 2.85A8.233 8.233 0 0 1 0 16.407a11.615 11.615 0 0 0 6.29 1.84"></path>
+      <path
+        d="m125.72,34.38c66.5,49.92,138.02,151.14,164.28,205.46,26.26-54.32,97.78-155.54,164.28-205.46,47.98-36.02,125.72-63.89,125.72,24.79,0,17.71-10.16,148.79-16.11,170.07-20.7,73.98-96.14,92.85-163.25,81.43,117.3,19.96,147.14,86.09,82.7,152.22-122.39,125.59-175.91-31.51-189.63-71.77-2.51-7.38-3.69-10.83-3.71-7.9-.02-2.94-1.19.52-3.71,7.9-13.71,40.26-67.23,197.36-189.63,71.77-64.44-66.13-34.6-132.26,82.7-152.22-67.11,11.42-142.55-7.45-163.25-81.43C10.15,207.96,0,76.88,0,59.17,0-29.52,77.74-1.65,125.72,34.38h0Z"
+        strokeWidth="0"
+      />
     </svg>
   );
 }