feat(accueil): banderole carrousel des marques du groupe sous le héros
Wordmarks typographiques des 14 plateformes (Trouve·Ka + PRODUCTS) qui défilent en boucle, cliquables, pause au survol, prefers-reduced-motion respecté (défilement manuel). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2 changed files +108 −1
modified
src/app/globals.css
+45 −1
@@ -974,6 +974,45 @@ h4 { | ||
| 974 | 974 | } |
| 975 | 975 | } |
| 976 | 976 | |
| 977 | +/* ---------- Banderole des marques (carrousel défilant, accueil) ---------- */ | |
| 978 | + | |
| 979 | +.brands-marquee { | |
| 980 | + overflow: hidden; | |
| 981 | + border-top: 1px solid var(--line); | |
| 982 | + border-bottom: 1px solid var(--line); | |
| 983 | + padding: 15px 0; | |
| 984 | +} | |
| 985 | +.brands-track { | |
| 986 | + display: inline-flex; | |
| 987 | + white-space: nowrap; | |
| 988 | + animation: ticker 48s linear infinite; | |
| 989 | +} | |
| 990 | +.brands-marquee:hover .brands-track, | |
| 991 | +.brands-track:focus-within { | |
| 992 | + animation-play-state: paused; | |
| 993 | +} | |
| 994 | +.brands-item { | |
| 995 | + display: inline-flex; | |
| 996 | + align-items: baseline; | |
| 997 | + gap: 5px; | |
| 998 | + font-size: 24px; | |
| 999 | + font-weight: 700; | |
| 1000 | + letter-spacing: -0.04em; | |
| 1001 | + color: var(--ink); | |
| 1002 | + text-decoration: none; | |
| 1003 | + transition: color 0.15s ease; | |
| 1004 | +} | |
| 1005 | +.brands-item:hover { | |
| 1006 | + color: var(--green); | |
| 1007 | +} | |
| 1008 | +.brands-item::after { | |
| 1009 | + content: "◆"; | |
| 1010 | + align-self: center; | |
| 1011 | + margin: 0 28px; | |
| 1012 | + font-size: 8px; | |
| 1013 | + color: var(--ink-3); | |
| 1014 | +} | |
| 1015 | + | |
| 977 | 1016 | /* ---------- Tableau éditorial ---------- */ |
| 978 | 1017 | |
| 979 | 1018 | .src-wrap { |
@@ -1083,9 +1122,14 @@ h4 { | ||
| 1083 | 1122 | @media (prefers-reduced-motion: reduce) { |
| 1084 | 1123 | .ticker-inner, |
| 1085 | 1124 | .pulse-dot::after, |
| 1086 | − .fig-flow { | |
| 1125 | + .fig-flow, | |
| 1126 | + .brands-track { | |
| 1087 | 1127 | animation: none; |
| 1088 | 1128 | } |
| 1129 | + .brands-marquee { | |
| 1130 | + overflow-x: auto; | |
| 1131 | + -webkit-overflow-scrolling: touch; | |
| 1132 | + } | |
| 1089 | 1133 | .rise { |
| 1090 | 1134 | animation: none; |
| 1091 | 1135 | opacity: 1; |
modified
src/app/page.tsx
+63 −0
@@ -853,6 +853,66 @@ function SyncHealth({ m }: { m: LiveMetrics }) { | ||
| 853 | 853 | ); |
| 854 | 854 | } |
| 855 | 855 | |
| 856 | +/* ------------------------------------------------------------------ */ | |
| 857 | +/* Banderole des marques — carrousel défilant des wordmarks du groupe */ | |
| 858 | +/* ------------------------------------------------------------------ */ | |
| 859 | + | |
| 860 | +const MARQUEE_BRANDS = [ | |
| 861 | + { | |
| 862 | + left: "Trouve", | |
| 863 | + boxed: "Ka", | |
| 864 | + accent: "#b9cfee", | |
| 865 | + inkbox: "#141814", | |
| 866 | + url: "https://www.trouve-ka.com", | |
| 867 | + }, | |
| 868 | + ...PRODUCTS.map((p) => ({ | |
| 869 | + left: p.markLeft, | |
| 870 | + boxed: p.markBoxed, | |
| 871 | + accent: p.accent, | |
| 872 | + inkbox: p.inkbox, | |
| 873 | + url: p.url, | |
| 874 | + })), | |
| 875 | +]; | |
| 876 | + | |
| 877 | +function BrandMarqueeSeq({ hidden }: { hidden?: boolean }) { | |
| 878 | + return ( | |
| 879 | + <span className="inline-flex items-center" aria-hidden={hidden || undefined}> | |
| 880 | + {MARQUEE_BRANDS.map((b) => ( | |
| 881 | + <a | |
| 882 | + key={`${b.left}${b.boxed}`} | |
| 883 | + href={b.url} | |
| 884 | + target="_blank" | |
| 885 | + rel="noopener noreferrer" | |
| 886 | + tabIndex={hidden ? -1 : undefined} | |
| 887 | + className="brands-item gk-display" | |
| 888 | + > | |
| 889 | + {b.left} | |
| 890 | + <span | |
| 891 | + className="inline-block -rotate-2 rounded-[6px] px-[7px] pb-[2px]" | |
| 892 | + style={{ background: b.inkbox, color: b.accent }} | |
| 893 | + > | |
| 894 | + {b.boxed} | |
| 895 | + </span> | |
| 896 | + </a> | |
| 897 | + ))} | |
| 898 | + </span> | |
| 899 | + ); | |
| 900 | +} | |
| 901 | + | |
| 902 | +function BrandMarquee() { | |
| 903 | + return ( | |
| 904 | + <nav | |
| 905 | + aria-label="Les marques du Groupe KA" | |
| 906 | + className="bleed brands-marquee rise mt-12 sm:mt-16 [animation-delay:0.3s]" | |
| 907 | + > | |
| 908 | + <div className="brands-track"> | |
| 909 | + <BrandMarqueeSeq /> | |
| 910 | + <BrandMarqueeSeq hidden /> | |
| 911 | + </div> | |
| 912 | + </nav> | |
| 913 | + ); | |
| 914 | +} | |
| 915 | + | |
| 856 | 916 | export default async function Home() { |
| 857 | 917 | const m = await getLiveMetrics(); |
| 858 | 918 | const chips = liveChips(m); |
@@ -898,6 +958,9 @@ export default async function Home() { | ||
| 898 | 958 | </div> |
| 899 | 959 | </section> |
| 900 | 960 | |
| 961 | + {/* ================= Banderole des marques (carrousel) ================= */} | |
| 962 | + <BrandMarquee /> | |
| 963 | + | |
| 901 | 964 | {/* ================= Signes vitaux (bande pleine largeur) ================= */} |
| 902 | 965 | <VitalsBand m={m} /> |
| 903 | 966 | |
| 904 | 967 | |