From 6456859e9e6046c321fd628a07aba2a7e496f94f Mon Sep 17 00:00:00 2001 From: BlackAngelTVdev Date: Thu, 28 May 2026 21:36:13 +0200 Subject: [PATCH] feat(contact): redesign contact page --- p/assets/styles/contact.css | 193 ++++++++++++++++++++++++++++++++++++ p/contact/index.html | 114 ++++++++++++++++----- 2 files changed, 281 insertions(+), 26 deletions(-) create mode 100644 p/assets/styles/contact.css diff --git a/p/assets/styles/contact.css b/p/assets/styles/contact.css new file mode 100644 index 0000000..e0048da --- /dev/null +++ b/p/assets/styles/contact.css @@ -0,0 +1,193 @@ +@import "./var.css"; + +.contact-page { + display: grid; + gap: 1.25rem; +} + +.contact-hero { + display: grid; + grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr); + gap: 1.25rem; + padding: clamp(1.25rem, 3vw, 2rem); + border-radius: 1.25rem; + background: + radial-gradient(circle at top right, rgba(125, 211, 252, 0.18), transparent 32%), + linear-gradient(180deg, rgba(11, 19, 36, 0.92), rgba(8, 16, 29, 0.96)); + border: 1px solid rgba(148, 163, 184, 0.16); + box-shadow: var(--shadow); +} + +.contact-hero-copy, +.contact-hero-card, +.contact-card, +.contact-panel { + position: relative; +} + +.contact-hero-copy h1 { + margin: 0 0 0.75rem; + font-family: "Georgia", "Palatino Linotype", serif; + font-size: clamp(2.3rem, 5vw, 4rem); + line-height: 0.98; + letter-spacing: -0.02em; +} + +.contact-hero-copy .lead { + max-width: 62ch; + margin-bottom: 1.25rem; +} + +.contact-hero-card { + align-self: stretch; + padding: 1.25rem; + border-radius: 1rem; + background: rgba(15, 23, 42, 0.72); + border: 1px solid rgba(125, 211, 252, 0.16); + display: grid; + align-content: center; + gap: 0.75rem; +} + +.contact-hero-label, +.contact-kicker { + margin: 0; + color: var(--accent); + font-size: 0.82rem; + letter-spacing: 0.12em; + text-transform: uppercase; + font-weight: 700; +} + +.contact-hero-card strong { + font-size: clamp(1.2rem, 2vw, 1.55rem); + color: var(--text); +} + +.contact-hero-card p, +.contact-help, +.contact-card p, +.contact-panel p, +.contact-panel li { + color: var(--muted); + line-height: 1.7; +} + +.contact-grid { + display: grid; + grid-template-columns: minmax(0, 1.6fr) minmax(290px, 0.9fr); + gap: 1.25rem; + align-items: start; +} + +.contact-main, +.contact-sidebar { + display: grid; + gap: 1rem; +} + +.contact-main h2 { + margin: 0; + font-family: "Georgia", "Palatino Linotype", serif; + font-size: clamp(1.5rem, 2.8vw, 2rem); +} + +.contact-methods { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1rem; +} + +.contact-card, +.contact-panel { + padding: 1.1rem; + border-radius: 1rem; + border: 1px solid rgba(148, 163, 184, 0.16); + background: rgba(255, 255, 255, 0.03); + box-shadow: 0 16px 30px rgba(2, 6, 23, 0.22); +} + +.contact-card h3, +.contact-panel h2 { + margin: 0.25rem 0 0.65rem; + color: var(--text); + font-family: "Georgia", "Palatino Linotype", serif; + font-size: 1.2rem; +} + +.contact-card a, +.contact-inline-links a { + color: var(--text); +} + +.contact-link { + display: inline-flex; + margin-top: 0.5rem; + color: var(--accent); + text-decoration: none; + font-weight: 700; +} + +.contact-link:hover { + text-decoration: underline; +} + +.contact-checklist, +.contact-steps { + margin: 0.75rem 0 0; + padding-left: 1.15rem; + display: grid; + gap: 0.45rem; +} + +.contact-inline-links { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; +} + +.contact-inline-links a { + text-decoration: none; + padding: 0.45rem 0.7rem; + border-radius: 999px; + background: rgba(125, 211, 252, 0.08); + border: 1px solid rgba(125, 211, 252, 0.18); +} + +.contact-inline-links a:hover { + background: rgba(125, 211, 252, 0.14); +} + +.contact-panel-soft { + background: rgba(255, 255, 255, 0.02); +} + +.contact-quick-links { + display: grid; + gap: 0.7rem; + margin: 1rem 0 0.85rem; +} + +.contact-help { + margin: 0; +} + +@media (max-width: 980px) { + .contact-hero, + .contact-grid, + .contact-methods { + grid-template-columns: 1fr; + } +} + +@media (max-width: 700px) { + .contact-page { + gap: 1rem; + } + + .contact-hero, + .contact-card, + .contact-panel { + border-radius: 0.9rem; + } +} \ No newline at end of file diff --git a/p/contact/index.html b/p/contact/index.html index 900c01b..f6017bd 100644 --- a/p/contact/index.html +++ b/p/contact/index.html @@ -3,36 +3,98 @@ - FWS Linux - Contact - + + Contact - FWS Linux + + +
-
-

Contact

-

Tu veux nous joindre ?

-

- Cette page centralise les moyens de contact et les liens utiles pour écrire, appeler, ou retrouver le projet ailleurs. -

-
- Envoyer un mail - Retour à l'accueil -
-
+
+
+
+

Contact

+

Parle-nous de ton besoin, on te répond vite.

+

+ Pour une question technique, une idée d'amélioration ou un retour sur la distribution, utilise le canal le plus simple pour toi. +

+
+ Envoyer un mail + Voir les téléchargements +
+
-
-
-

Email

-

contact@fwslinux.fr pour les demandes générales et les retours rapides.

-
-
-

Téléphone

-

+33 0 00 00 00 00 pour les appels ou le support direct.

-
-
-

Réseaux

-

Le footer te donne aussi les liens vers GitHub, Instagram et LinkedIn.

-
+ +
+ +
+
+

Moyens de contact

+ +
+ + +
+

Support projet

+

Dis-nous ce que tu veux faire

+

Installation, compatibilité, environnement de bureau ou packaging: précise ton contexte pour qu’on puisse aller droit au but.

+
    +
  • Version utilisée
    • +
  • Matériel concerné
    • +
  • Étape où le souci apparaît
    • +
+
+ +
+

Réseaux

+

Suivre le projet

+

Tu peux aussi retrouver FWS Linux sur les pages liées au projet et dans le footer du site.

+
+ GitHub + Instagram + LinkedIn +
+
+
+
+ + +