use emptyplaceholder for gated message

src/app/(main)/websites/[websiteId]/replays/ReplaysPage.tsx

@@ -1,11 +1,12 @@
 'use client';
 import { SessionModal } from '@/app/(main)/websites/[websiteId]/sessions/SessionModal';
 import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
+import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
 import { Panel } from '@/components/common/Panel';
 import { useMessages, useSubscription, useWebsite } from '@/components/hooks';
 import { Video } from '@/components/icons';
 import { getItem, setItem } from '@/lib/storage';
-import { Button, Column, Icon, Tab, TabList, TabPanel, Tabs, Text } from '@umami/react-zen';
+import { Button, Column, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen';
 import { type Key, useState } from 'react';
 import { ReplayModal } from './ReplayModal';
 import { ReplaysDataTable } from './ReplaysDataTable';
@@ -28,18 +29,18 @@ export function ReplaysPage({ websiteId }: { websiteId: string }) {
     return (
       <Column gap="3">
         <Panel>
-          <Column gap="4" alignItems="center" padding="10">
-            <Icon size="xl">
-              <Video />
-            </Icon>
-            <Text className="py-4">{t(messages.upgradeRequired, { plan: 'Business' })}</Text>
+          <EmptyPlaceholder
+            icon={<Video />}
+            title={t(messages.upgradeRequired, { plan: 'Business' })}
+            description="Watch real user sessions to see exactly how visitors interact with your site."
+          >
             <Button
               variant="primary"
               onPress={() => window.open(`${process.env.cloudUrl}/settings/billing`, '_blank')}
             >
               {t(labels.upgrade)}
             </Button>
-          </Column>
+          </EmptyPlaceholder>
         </Panel>
       </Column>
     );

src/app/(main)/websites/[websiteId]/settings/WebsiteReplaySettings.tsx

@@ -7,11 +7,12 @@ import {
   Select,
   Slider,
   Switch,
-  Text,
   TextField,
 } from '@umami/react-zen';
 import { useState } from 'react';
+import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
 import { useMessages, useSubscription, useUpdateQuery, useWebsite } from '@/components/hooks';
+import { Video } from '@/components/icons';
 
 interface ReplayConfig {
   sampleRate?: number;
@@ -81,12 +82,18 @@ export function WebsiteReplaySettings({ websiteId }: { websiteId: string }) {
     return (
       <Column gap="4">
         <Label>{t(labels.replays)}</Label>
-        <Column gap="4" alignItems="center" padding="10">
-          <Text>{t(messages.upgradeRequired, { plan: 'Business' })}</Text>
-          <Button variant="primary" onPress={() => window.open(`${process.env.cloudUrl}/settings/billing`, '_blank')}>
+        <EmptyPlaceholder
+          icon={<Video />}
+          title={t(messages.upgradeRequired, { plan: 'Business' })}
+          description="Watch real user sessions to see exactly how visitors interact with your site."
+        >
+          <Button
+            variant="primary"
+            onPress={() => window.open(`${process.env.cloudUrl}/settings/billing`, '_blank')}
+          >
             {t(labels.upgrade)}
           </Button>
-        </Column>
+        </EmptyPlaceholder>
       </Column>
     );
   }