feat: create Partnership component and styles

2026-04-13 22:15:20 +07:00
parent 8592f68918
commit ad68b7d8c4
22 changed files with 299 additions and 1510 deletions
--- a/app/partnership/partnership.css
+++ b/app/partnership/partnership.css
@@ -0,0 +1,91 @@
+/* ============================================
+   Partnership Page — Scoped CSS
+   ============================================ */
+
+/* ---------- Grid ---------- */
+.partnership-page .grid-bento {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 1.5rem;
+}
+
+/* ---------- Bento item ---------- */
+.partnership-page .bento-item {
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+}
+
+/* Card xanh đậm override bento-item */
+.partnership-page .ps-highlight-card {
+  background-color: #1a365d !important;
+  border-color: #1a365d !important;
+}
+
+/* ---------- Typography — thay thế h1/h2/h3 ---------- */
+.partnership-page .ps-heading,
+#collaborate-cta .ps-heading {
+  font-size: clamp(2.5rem, 5vw, 4.5rem);
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.partnership-page .ps-subheading,
+#collaborate-cta .ps-subheading {
+  font-size: clamp(1.75rem, 3vw, 2.25rem);
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.partnership-page .ps-form-title,
+#collaborate-cta .ps-form-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+/* ---------- Color tokens ---------- */
+
+.partnership-page .bg-brand-blue,
+#collaborate-cta .bg-brand-blue       { background-color: #1b254b; }
+
+.partnership-page .text-brand-blue,
+#collaborate-cta .text-brand-blue     { color: #1b254b; }
+
+.partnership-page .bg-brand-accent,
+#collaborate-cta .bg-brand-accent     { background-color: #3b82f6; }
+
+.partnership-page .text-brand-accent,
+#collaborate-cta .text-brand-accent   { color: #3b82f6; }
+
+.partnership-page .bg-brand-light,
+#collaborate-cta .bg-brand-light      { background-color: #f8fbff; }
+
+.partnership-page .text-brand-light,
+#collaborate-cta .text-brand-light    { color: #f8fbff; }
+
+.partnership-page .bg-brand-hover,
+#collaborate-cta .bg-brand-hover      { background-color: #2d3a8c; }
+
+.partnership-page .hover\:bg-brand-hover:hover,
+#collaborate-cta .hover\:bg-brand-hover:hover { background-color: #2d3a8c; }
+
+.partnership-page .text-ui-muted,
+#collaborate-cta .text-ui-muted       { color: #6b7280; }
+
+.partnership-page .text-ui-text,
+#collaborate-cta .text-ui-text        { color: #111827; }
+
+.partnership-page .border-ui-border,
+#collaborate-cta .border-ui-border    { border-color: #e5e7eb; }
+
+.partnership-page .bg-ui-bg,
+#collaborate-cta .bg-ui-bg            { background-color: #f9fafb; }
+
+.partnership-page .hover\:shadow-md:hover {
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+/* Explore Directory button */
+.partnership-page .ps-explore-btn:hover {
+  box-shadow: 0 8px 20px rgb(0 0 0 / 0.15);
+}