feat(error-pages): port thank-you Webflow + validation 404

src/pages/thank-you.module.css

@@ -0,0 +1,398 @@
+/*
+ * Thank-you page styles
+ * Mirrors the Webflow `.link-in-bio` layout.
+ * Colors reuse the same tokens already defined in src/components/landing/styles/shared.module.css
+ * so the look matches the rest of the site.
+ */
+
+.page {
+  --color-black: #040114;
+  --color-gray-1: #070417;
+  --color-gray-2: #1b1a25;
+  --color-gray-3: #242328;
+  --color-gray-4: #e1e0e9;
+  --color-white: #ffffff;
+  --color-primary-rp: #d35f5f;
+  --color-darker-primary: #bd5454;
+  --color-border-doc: #444950;
+
+  background-color: var(--color-black);
+  color: var(--color-gray-4);
+  font-size: 18px;
+  line-height: 1.5em;
+  min-height: 100vh;
+  padding: 50px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Halo radial dégradé derrière la card (linear 180° + blur,
+ * comme Webflow .utility-page-content-decoration). */
+.decoration {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 500px;
+  height: 50%;
+  background-image: linear-gradient(180deg, var(--color-primary-rp) 40%, #a561a3);
+  filter: blur(150px);
+  opacity: 0.5;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.card {
+  z-index: 22;
+  border: 1px solid var(--color-gray-3);
+  border-radius: 20px;
+  background-color: var(--color-gray-1);
+  text-align: center;
+  flex-direction: column;
+  width: 100%;
+  max-width: 650px;
+  padding: 60px;
+  display: flex;
+  position: relative;
+}
+
+.logoWrap {
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 30px;
+  margin-left: auto;
+  margin-right: auto;
+  text-decoration: none;
+  display: flex;
+}
+
+.logo {
+  height: 70px;
+  width: auto;
+}
+
+.title {
+  color: var(--color-gray-4);
+  font-size: 18px;
+  line-height: 1.5em;
+  margin: 0 0 32px;
+}
+
+.description {
+  color: var(--color-gray-4);
+  margin: 0 0 10px;
+}
+
+.buttonRow {
+  grid-column-gap: 15px;
+  grid-row-gap: 15px;
+  flex-direction: column;
+  padding-top: 20px;
+  padding-bottom: 0;
+  display: flex;
+}
+
+.btnPrimary {
+  display: inline-block;
+  border: 1px solid var(--color-darker-primary);
+  border-radius: 50px;
+  background-color: var(--color-darker-primary);
+  color: #fff;
+  text-align: center;
+  padding: 20px 28px 18px;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.1em;
+  text-decoration: none;
+  transition: border-color 0.3s, background-color 0.3s, transform 0.3s, color 0.3s;
+}
+
+.btnPrimary:hover {
+  text-decoration: none;
+  color: #fff;
+  border-color: var(--color-darker-primary);
+  background-color: var(--color-darker-primary);
+  transform: translate3d(0, -3px, 0.01px);
+}
+
+.btnSecondary {
+  display: inline-block;
+  border: 1px solid var(--color-darker-primary);
+  border-radius: 50px;
+  background-color: transparent;
+  color: var(--color-white);
+  text-align: center;
+  padding: 20px 28px 18px;
+  font-size: 18px;
+  line-height: 1.1em;
+  text-decoration: none;
+  transition: border-color 0.3s, transform 0.3s, background-color 0.3s, color 0.3s;
+}
+
+.btnSecondary:hover {
+  text-decoration: none;
+  color: #fff;
+  border-color: var(--color-darker-primary);
+  background-color: var(--color-darker-primary);
+  transform: translate3d(0, -3px, 0.01px);
+}
+
+/* Server card */
+
+.centerServer {
+  margin: 0 auto 30px;
+}
+
+.clientServer {
+  grid-column-gap: 30px;
+  grid-row-gap: 30px;
+  border: 1px solid var(--color-border-doc);
+  border-radius: 0.8rem;
+  background-color: var(--color-gray-3);
+  width: auto;
+  min-width: 275px;
+  padding: 30px;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  transition: border-color 0.3s;
+}
+
+.clientServer:hover {
+  border-color: var(--color-primary-rp);
+  text-decoration: none;
+}
+
+.avatarInfo {
+  grid-column-gap: 15px;
+  grid-row-gap: 15px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  line-height: 1.5em;
+  text-align: left;
+}
+
+.avatar {
+  object-fit: cover;
+  border-radius: 50%;
+  flex: none;
+  width: 50px;
+  height: 50px;
+}
+
+.serverInfos {
+  grid-column-gap: 6px;
+  grid-row-gap: 6px;
+  flex-flow: column;
+  justify-content: center;
+  align-items: flex-start;
+  display: flex;
+}
+
+.serverNameRow {
+  justify-content: flex-start;
+  align-items: center;
+  display: flex;
+}
+
+.serverName {
+  color: var(--color-white);
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.serverBadge {
+  margin-left: 10px;
+}
+
+.serverMembers {
+  color: var(--color-gray-4);
+  font-size: 14px;
+}
+
+/* Permission warning */
+
+.permissionWarning {
+  padding: 15px;
+  border-radius: 8px;
+  text-align: center;
+  max-width: 600px;
+  margin: 20px auto;
+  padding-bottom: 1px;
+  color: var(--color-white);
+}
+
+.success {
+  background: #003100;
+}
+
+.adminWarning {
+  background: #193c47;
+}
+
+.missingPermissions {
+  background: #4d3800;
+}
+
+.permissionList {
+  list-style-type: none;
+  padding: 0;
+  margin-top: 10px;
+}
+
+.permissionList li {
+  margin: 5px 0;
+}
+
+.permissionList code {
+  background-color: rgba(255, 255, 255, 0.08);
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.95em;
+}
+
+/* Footer (langue + réseaux sociaux) */
+
+.footerThank {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column-gap: 16px;
+  grid-row-gap: 16px;
+  justify-content: center;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.langDropdown {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.langTrigger {
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  padding: 1.15px 12px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.langTrigger::after {
+  content: '';
+  display: inline-block;
+  position: relative;
+  top: 3px;
+  margin-left: 0.3em;
+  transform: translateY(-50%);
+  border-style: solid;
+  border-width: 0.4em 0.4em 0;
+  border-color: currentColor transparent transparent;
+}
+
+.langTrigger:hover {
+  color: var(--color-primary-rp);
+}
+
+.iconLanguage {
+  display: inline-block;
+  margin-right: 5px;
+  transform: translateY(4px);
+}
+
+.currentLanguage {
+  font-family: var(--ifm-font-family-base, inherit);
+}
+
+.langDropdownList {
+  position: absolute;
+  inset: auto auto 30px auto;
+  display: none;
+  flex-direction: column;
+  min-width: 10rem;
+  padding: 0.5rem;
+  border-radius: 10px;
+  background-color: var(--color-gray-2);
+  text-align: left;
+  z-index: 30;
+}
+
+.langDropdown:hover .langDropdownList,
+.langDropdown:focus-within .langDropdownList {
+  display: flex;
+}
+
+.langDropdownItem {
+  color: var(--color-gray-4);
+  margin-top: 0.2rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  text-decoration: none;
+  border-radius: 5px;
+}
+
+.langDropdownItem:hover {
+  background-color: var(--color-gray-3);
+  color: var(--color-gray-4);
+  text-decoration: none;
+}
+
+.langDropdownItemCurrent {
+  background-color: var(--color-gray-3);
+  color: var(--color-primary-rp);
+}
+
+.socialWrap {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+  margin: 0;
+}
+
+.socialLink {
+  display: block;
+  color: var(--color-white);
+  transition: transform 0.3s ease-in-out;
+}
+
+.socialLink:hover {
+  transform: translateY(-3px);
+}
+
+.socialIcon {
+  width: 18px;
+  height: 18px;
+  display: block;
+}
+
+@media screen and (max-width: 767px) {
+  .card {
+    padding: 40px 24px;
+  }
+  .title {
+    font-size: 18px;
+    margin-bottom: 40px;
+  }
+  .btnPrimary,
+  .btnSecondary {
+    padding: 20px 26px 16px;
+    font-size: 16px;
+  }
+  .footerThank {
+    grid-template-columns: 1fr;
+    grid-row-gap: 20px;
+  }
+  .decoration {
+    width: 100%;
+    max-width: 400px;
+  }
+}