> = {
+ dashboard: 1,
+ login: 1,
+ sidebar: 3,
+};
+
+export interface PlacementStatus {
+ count: number;
+ capacity?: number;
+ takenUntil?: string;
+}
+
+// When full, a place frees up once enough bookings end to drop below capacity.
+export function placementStatus(sponsors: Sponsor[], slot: SponsorSlot): PlacementStatus {
+ const booked = sponsorsForSlot(sponsors, slot);
+ const capacity = SLOT_CAPACITY[slot];
+ if (!capacity || booked.length < capacity) return { count: booked.length, capacity };
+ const ends = booked.map((s) => s.until).sort((a, b) => Date.parse(a) - Date.parse(b));
+ return { count: booked.length, capacity, takenUntil: ends[booked.length - capacity] };
+}
diff --git a/frontend/src/pages/api-docs/endpoints.ts b/frontend/src/pages/api-docs/endpoints.ts
index de9663585..a6150e0c1 100644
--- a/frontend/src/pages/api-docs/endpoints.ts
+++ b/frontend/src/pages/api-docs/endpoints.ts
@@ -236,6 +236,13 @@ export const sections: readonly Section[] = [
'Mint a CSRF token for the current session. The SPA replays it in the X-CSRF-Token header on unsafe requests. Bearer-token callers can skip this — the middleware short-circuits CSRF for authenticated API requests.',
response: '{\n "success": true,\n "obj": "csrf-token-string"\n}',
},
+ {
+ method: 'GET',
+ path: '/sponsors',
+ summary:
+ 'Public. Active paid sponsor placements read from the project sponsors.json (cached for 1h); expired entries are dropped. Logos are proxied by the panel at /sponsors/logo/{name}. Used by the login page and panel sponsor slots.',
+ responseSchema: 'SponsorList',
+ },
{
method: 'POST',
path: '/getTwoFactorEnable',
diff --git a/frontend/src/pages/index/IndexPage.tsx b/frontend/src/pages/index/IndexPage.tsx
index c53ffda27..9c434a3ba 100644
--- a/frontend/src/pages/index/IndexPage.tsx
+++ b/frontend/src/pages/index/IndexPage.tsx
@@ -22,6 +22,7 @@ import { useStatusQuery } from '@/api/queries/useStatusQuery';
import { useMediaQuery } from '@/hooks/useMediaQuery';
import AppSidebar from '@/layouts/AppSidebar';
import { LazyMount } from '@/components/utility';
+import SponsorSlot from '@/components/sponsor/SponsorSlot';
import { setMessageInstance } from '@/utils/messageBus';
import OverviewActionBar from './OverviewActionBar';
import VitalTile from './VitalTile';
@@ -213,6 +214,8 @@ export default function IndexPage() {
onOpenVersionSwitch={() => setVersionOpen(true)}
/>
+
+
{health && (
diff --git a/frontend/src/pages/login/LoginPage.css b/frontend/src/pages/login/LoginPage.css
index 2a72af26a..ecbaad847 100644
--- a/frontend/src/pages/login/LoginPage.css
+++ b/frontend/src/pages/login/LoginPage.css
@@ -411,3 +411,7 @@
.submit-row {
margin-bottom: 0;
}
+
+.login-sponsor {
+ margin-top: 20px;
+}
diff --git a/frontend/src/pages/login/LoginPage.tsx b/frontend/src/pages/login/LoginPage.tsx
index 59f8360aa..ac5510ad3 100644
--- a/frontend/src/pages/login/LoginPage.tsx
+++ b/frontend/src/pages/login/LoginPage.tsx
@@ -26,6 +26,7 @@ import { FormProvider, useForm } from 'react-hook-form';
import { HttpUtil, LanguageManager } from '@/utils';
import { FormField, rhfZodValidate } from '@/components/form/rhf';
import { setMessageInstance } from '@/utils/messageBus';
+import SponsorSlot from '@/components/sponsor/SponsorSlot';
import { pauseAnimationsUntilLeave, useTheme } from '@/hooks/useTheme';
import { LoginFormSchema, TwoFactorCodeSchema, type LoginFormValues } from '@/schemas/login';
import './LoginPage.css';
@@ -247,6 +248,7 @@ export default function LoginPage() {
+
)}
diff --git a/frontend/src/pages/sponsors/SponsorsPage.css b/frontend/src/pages/sponsors/SponsorsPage.css
new file mode 100644
index 000000000..81d26b5a8
--- /dev/null
+++ b/frontend/src/pages/sponsors/SponsorsPage.css
@@ -0,0 +1,142 @@
+.sponsors-page .ant-layout,
+.sponsors-page .ant-layout-content,
+.sponsors-page .content-shell {
+ background: transparent;
+}
+
+.sponsors-page .content-area {
+ padding: 24px;
+}
+
+.sponsors-inner {
+ max-width: 1200px;
+}
+
+.sponsors-header {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ margin-bottom: 24px;
+}
+
+.sponsors-page .sponsors-title {
+ margin: 0 0 4px;
+}
+
+.sponsors-title-icon {
+ color: #faad14;
+}
+
+.sponsors-page .sponsors-section-title {
+ margin: 32px 0 12px;
+ color: var(--ant-color-text-secondary);
+ font-weight: 600;
+ letter-spacing: 0.3px;
+}
+
+.sponsors-yourbrand {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ height: 100%;
+ min-height: 170px;
+ padding: 16px;
+ border: 1.5px dashed var(--ant-color-border);
+ border-radius: var(--ant-border-radius-lg, 8px);
+ background: transparent;
+}
+
+.sponsors-yourbrand.is-large {
+ align-items: center;
+ min-height: 0;
+ padding: 40px 24px;
+ text-align: center;
+ background: var(--bg-card, transparent);
+}
+
+.sponsors-yourbrand-icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 56px;
+ height: 56px;
+ border-radius: 8px;
+ font-size: 22px;
+ color: var(--ant-color-primary);
+ background: var(--ant-color-primary-bg);
+}
+
+.sponsors-yourbrand-title {
+ font-weight: 600;
+ font-size: 15px;
+ color: var(--ant-color-text);
+}
+
+.sponsors-yourbrand-text {
+ max-width: 420px;
+ margin-bottom: 4px;
+ font-size: 13px;
+ color: var(--ant-color-text-secondary);
+}
+
+.sponsors-yourbrand:not(.is-large) .ant-btn {
+ margin-top: auto;
+}
+
+.sponsors-placement {
+ display: flex;
+ gap: 12px;
+ height: 100%;
+ padding: 14px 16px;
+ border: 1px solid var(--ant-color-border-secondary);
+ border-radius: var(--ant-border-radius-lg, 8px);
+ background: var(--bg-card, transparent);
+}
+
+.sponsors-placement-icon {
+ display: inline-flex;
+ flex: 0 0 auto;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ height: 36px;
+ border-radius: 8px;
+ font-size: 17px;
+ color: var(--ant-color-primary);
+ background: var(--ant-color-primary-bg);
+}
+
+.sponsors-placement-title {
+ font-weight: 600;
+ color: var(--ant-color-text);
+}
+
+.sponsors-placement-body {
+ min-width: 0;
+}
+
+.sponsors-placement-status {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px;
+ margin-top: 8px;
+}
+
+.sponsors-placement-status .ant-tag {
+ margin: 0;
+}
+
+.sponsors-placement-desc {
+ font-size: 13px;
+ color: var(--ant-color-text-secondary);
+}
+
+@media (max-width: 768px) {
+ .sponsors-page .content-area {
+ padding: 12px;
+ padding-top: 64px;
+ }
+}
diff --git a/frontend/src/pages/sponsors/SponsorsPage.tsx b/frontend/src/pages/sponsors/SponsorsPage.tsx
new file mode 100644
index 000000000..bbf0a67cb
--- /dev/null
+++ b/frontend/src/pages/sponsors/SponsorsPage.tsx
@@ -0,0 +1,176 @@
+import { useMemo } from 'react';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Col, ConfigProvider, Layout, Row, Spin, Tag, Typography } from 'antd';
+import {
+ CrownOutlined,
+ DashboardOutlined,
+ LoginOutlined,
+ MenuUnfoldOutlined,
+ PlusOutlined,
+} from '@ant-design/icons';
+
+import { useTheme } from '@/hooks/useTheme';
+import AppSidebar from '@/layouts/AppSidebar';
+import { useSponsorsQuery } from '@/api/queries/useSponsorsQuery';
+import SponsorCard from '@/components/sponsor/SponsorCard';
+import { IntlUtil } from '@/utils';
+import { useDatepicker } from '@/hooks/useDatepicker';
+import { placementStatus, sponsorsForSlot, type SponsorSlot } from '@/lib/sponsors';
+import './SponsorsPage.css';
+
+function BecomeButton({ contact, block }: { contact?: string; block?: boolean }) {
+ const { t } = useTranslation();
+ if (!contact) return null;
+ return (
+ }
+ href={contact}
+ target="_blank"
+ rel="noopener noreferrer"
+ block={block}
+ >
+ {t('pages.sponsors.become')}
+
+ );
+}
+
+function YourBrandCard({ contact, large }: { contact?: string; large?: boolean }) {
+ const { t } = useTranslation();
+ return (
+
+
+
+
+
{t('pages.sponsors.yourBrand')}
+
{t('pages.sponsors.yourBrandText')}
+
+
+
+
+
+ {t('pages.sponsors.title')}
+
+ {t('pages.sponsors.intro')}
+
+
+
+
+
+ {sponsors.length === 0 ? (
+ fetched &&
+ ) : (
+
+ {sponsors.map((sponsor) => (
+
+
+
+ ))}
+ {data.contact && (
+
+
+
+ )}
+
+ )}
+
+
+
+ {t('pages.sponsors.placements')}
+
+
+ {placements.map((p) => {
+ const status = placementStatus(data.sponsors, p.slot);
+ return (
+
+
+
{p.icon}
+
+
{p.title}
+
{p.desc}
+
+ {status.takenUntil ? (
+
+ {t('pages.sponsors.takenUntil', {
+ date: IntlUtil.formatDate(status.takenUntil, datepicker),
+ })}
+
+ ) : (
+ {t('pages.sponsors.available')}
+ )}
+ {status.count > 0 && !status.takenUntil && (
+
+ {t('pages.sponsors.activeCount', {
+ count:
+ status.capacity && status.capacity > 1
+ ? `${status.count}/${status.capacity}`
+ : status.count,
+ })}
+
+ )}
+
+
+
+