Add screenshot showcases to ACP marketing page

Replace 6-card feature grid with alternating image/text showcase sections
for ML Analytics, Admin Dashboard, Ban Appeal, and Server Browser features.
Cropped screenshots from the live admin panel paired with bullet-point
descriptions for each feature.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

website/resources/ts/Pages/Marketing/BattlefieldAcp.vue

@@ -1,13 +1,19 @@
 <script lang="ts" setup>
 import MarketingLayout from '@/Layouts/MarketingLayout.vue'
 import SectionHeader from '@/Components/Marketing/SectionHeader.vue'
+import mlAnalyticsImg from '@images/acp/ml-analytics.jpg'
+import adminDashboardImg from '@images/acp/admin-dashboard.jpg'
+import banAppealImg from '@images/acp/ban-appeal.jpg'
+import serverBrowserImg from '@images/acp/server-browser.jpg'
 
 defineOptions({ layout: MarketingLayout })
 
-interface Feature {
+interface ShowcaseFeature {
   icon: string
   title: string
   description: string
+  bullets: string[]
+  image: string
 }
 
 interface ExtraFeature {
@@ -27,40 +33,64 @@ interface Plugin {
   description: string
 }
 
-const keyFeatures: Feature[] = [
+const showcaseFeatures: ShowcaseFeature[] = [
   {
     icon: 'tabler-brain',
     title: 'ML Analytics Dashboard',
-    description: 'Cheat detection with flagged cheater lists, chat toxicity leaderboards, player cluster analysis, session anomaly detection, ban predictions with probability scores, and server health monitoring with trend charts.',
+    description: 'Machine learning-powered analytics for proactive server management.',
-  },
+    bullets: [
-  {
+      'Cheat detection with flagged cheater lists and risk scores',
-    icon: 'tabler-terminal',
+      'Chat toxicity leaderboards with severity scoring',
-    title: 'Live RCON Scoreboard',
+      'Player cluster analysis and session anomaly detection',
-    description: 'Real-time player scoreboard via RCON with instant admin actions — kill, kick, ban, yell, say, nuke, team switch, punish, forgive, and mute. No ProCon layer required.',
+      'Ban predictions with probability scores',
-  },
+      'Server health monitoring with trend charts',
-  {
+    ],
-    icon: 'tabler-gavel',
+    image: mlAnalyticsImg,
-    title: 'Ban Appeal System',
-    description: 'Public 4-step wizard — Find Ban, Verify identity via Battlelog clan tags, Submit Appeal with file attachments up to 2 GB, and Track Status with unique tracking codes. Discord webhook notifications for every event.',
   },
   {
     icon: 'tabler-layout-dashboard',
     title: 'Admin Dashboard',
-    description: 'Live player counts, population history charts, kick reason analytics, players by country, event logger with real-time feed, online admin roster, latest bans, and reported player tracking.',
+    description: 'Comprehensive real-time overview of all your Battlefield servers.',
+    bullets: [
+      'Live player counts and population history charts',
+      'Kick reason analytics and players-by-country breakdown',
+      'Real-time event logger and admin activity feed',
+      'Online admin roster and latest bans list',
+      'Reported player tracking and moderation tools',
+    ],
+    image: adminDashboardImg,
   },
   {
-    icon: 'tabler-camera',
+    icon: 'tabler-gavel',
-    title: 'PunkBuster Screenshots',
+    title: 'Ban Appeal System',
-    description: 'S3 storage with automatic FTP sync from game servers. Thumbnail grid viewer with OCR metadata extraction, pagination, and search for reviewing player screenshots.',
+    description: 'Public self-service portal for players to appeal bans.',
+    bullets: [
+      '4-step wizard: Find Ban, Verify, Submit Appeal, Track Status',
+      'No account required — Battlelog clan tag verification',
+      'File attachments up to 2 GB including video evidence',
+      'Unique tracking codes and threaded discussions',
+      'Discord webhook notifications for every appeal event',
+    ],
+    image: banAppealImg,
   },
   {
     icon: 'tabler-world',
     title: 'Public Server Browser',
-    description: 'Live server overview with player counts and current maps, population history graphs (24h/3d/7d), leaderboards ranked by score/kills/K-D/HSR%/SPM/KPM, player search, and detailed player profiles.',
+    description: 'Live server overview with rich player statistics and profiles.',
+    bullets: [
+      'Server list with player counts, maps, and game modes',
+      'Population history graphs (24h / 3d / 7d timeframes)',
+      'Leaderboards: score, kills, K/D, HSR%, SPM, KPM, playtime',
+      'Detailed player profiles with weapons, vehicles, and dogtags',
+      'Player search across all connected servers',
+    ],
+    image: serverBrowserImg,
   },
 ]
 
 const moreFeatures: ExtraFeature[] = [
+  { icon: 'tabler-terminal', title: 'Live RCON', description: 'Real-time scoreboard with admin actions — kill, kick, ban, nuke, move' },
+  { icon: 'tabler-camera', title: 'PB Screenshots', description: 'S3 storage, FTP sync, OCR metadata, thumbnail grid viewer' },
   { icon: 'tabler-fingerprint', title: 'Passkey Auth', description: 'Fingerprint, face recognition, or security key login' },
   { icon: 'tabler-activity-heartbeat', title: 'System Health', description: 'Real-time PHP, DB, cache, queue, and ML monitoring' },
   { icon: 'tabler-moon-stars', title: 'Dark & Light', description: 'Full theme support with dark mode default' },
@@ -70,9 +100,7 @@ const moreFeatures: ExtraFeature[] = [
   { icon: 'tabler-message-dots', title: 'Chat Logs', description: 'Full chat history with search and filtering' },
   { icon: 'tabler-star', title: 'Reputation System', description: 'Player reputation tracking with infraction points' },
   { icon: 'tabler-chart-line', title: 'Population Trends', description: 'Historical player activity and growth charts' },
-  { icon: 'tabler-map', title: 'Stats Dashboard', description: 'Players by country, kick reasons, and server analytics' },
   { icon: 'tabler-users-group', title: 'Admin Roster', description: 'Online admin tracking and role management' },
-  { icon: 'tabler-flag', title: 'Player Reports', description: 'Track and manage player reports from your community' },
 ]
 
 const plugins: Plugin[] = [
@@ -193,7 +221,7 @@ const supportedGames: Game[] = [
       </VRow>
     </VContainer>
 
-    <!-- Key Features -->
+    <!-- Feature Showcase -->
     <div class="section-alt-bg marketing-section">
       <VContainer>
         <SectionHeader
@@ -204,19 +232,30 @@ const supportedGames: Game[] = [
           subtitle="Everything you need to run, monitor, and moderate your Battlefield servers."
         />
 
-        <VRow>
+        <div v-for="(feature, index) in showcaseFeatures" :key="feature.title" :class="{ 'mt-12': index > 0 }">
-          <VCol v-for="(feature, index) in keyFeatures" :key="feature.title" cols="12" sm="6" md="4">
+          <VRow align="center">
-            <VCard variant="outlined" :class="['h-100 feature-card-hover', `fade-in-up stagger-delay-${index + 1}`]">
+            <VCol cols="12" md="7" :order-md="index % 2 === 0 ? 1 : 2">
-              <VCardText class="pa-5">
+              <VCard variant="outlined" class="overflow-hidden feature-card-hover">
-                <VAvatar color="info" variant="tonal" size="48" class="mb-3">
+                <img :src="feature.image" :alt="feature.title" class="d-block" style="width: 100%; height: auto; border-radius: 4px;" />
-                  <VIcon :icon="feature.icon" size="24" />
+              </VCard>
-                </VAvatar>
+            </VCol>
-                <h3 class="text-subtitle-1 font-weight-bold mb-2">{{ feature.title }}</h3>
+            <VCol cols="12" md="5" :order-md="index % 2 === 0 ? 2 : 1">
-                <p class="text-body-2 text-medium-emphasis mb-0">{{ feature.description }}</p>
+              <VAvatar color="info" variant="tonal" size="48" class="mb-3">
-              </VCardText>
+                <VIcon :icon="feature.icon" size="24" />
-            </VCard>
+              </VAvatar>
-          </VCol>
+              <h3 class="text-h5 font-weight-bold mb-2">{{ feature.title }}</h3>
-        </VRow>
+              <p class="text-body-1 text-medium-emphasis mb-4">{{ feature.description }}</p>
+              <VList density="compact" class="pa-0 bg-transparent">
+                <VListItem v-for="bullet in feature.bullets" :key="bullet" class="px-0 py-1">
+                  <template #prepend>
+                    <VIcon icon="tabler-circle-check" color="info" size="18" class="me-2" />
+                  </template>
+                  <VListItemTitle class="text-body-2" style="white-space: normal;">{{ bullet }}</VListItemTitle>
+                </VListItem>
+              </VList>
+            </VCol>
+          </VRow>
+        </div>
       </VContainer>
     </div>