feat: New landing page, blocked NSFW for social command, and unallowed words check for AI's response.

Dockerfile

···
 ARG VITE_BOT_API_URL
 ARG VITE_STATUS_API_KEY
 ARG VITE_FRONTEND_URL
+ARG STATUS_API_KEY
 
 ENV SOURCE_COMMIT=${SOURCE_COMMIT}
 ENV NODE_ENV=production
 ENV VITE_BOT_API_URL=${VITE_BOT_API_URL}
 ENV VITE_STATUS_API_KEY=${VITE_STATUS_API_KEY}
 ENV VITE_FRONTEND_URL=${VITE_FRONTEND_URL}
+ENV STATUS_API_KEY=${STATUS_API_KEY}
 
 WORKDIR /app
 
···
 ENV SOURCE_COMMIT=${SOURCE_COMMIT}
 ENV NODE_ENV=production
 ENV VITE_BOT_API_URL=${VITE_BOT_API_URL}
-ENV STATUS_API_KEY=${VITE_STATUS_API_KEY}
+ENV STATUS_API_KEY=${STATUS_API_KEY}
 ENV VITE_STATUS_API_KEY=${STATUS_API_KEY}
 ENV VITE_FRONTEND_URL=${VITE_FRONTEND_URL}
 

src/commands/utilities/ai.ts

···
     const prompt = interaction.options.getString('prompt')!;
     commandLogger.logFromInteraction(
       interaction,
-      `prompt: "${prompt.substring(0, 50)}${prompt.length > 50 ? '...' : ''}"`,
+      `AI command executed - prompt content hidden for privacy`,
     );
 
     const invokerId = getInvokerId(interaction);
···
     const aiResponse = await makeAIRequest(config, conversation);
     if (!aiResponse) return;
 
+    const { getUnallowedWordCategory } = await import('@/utils/validation');
+    const category = getUnallowedWordCategory(aiResponse.content);
+    if (category) {
+      logger.warn(`AI response contained unallowed words in category: ${category}`);
+      await interaction.editReply(
+        'Sorry, I cannot provide that response as it contains prohibited content. Please try a different prompt.',
+      );
+      return;
+    }
+
     const updatedConversation = [
       ...conversation.filter((msg) => msg.role !== 'system'),
       { role: 'assistant', content: aiResponse.content },
···
   }
 
   fullResponse += aiResponse.content;
+
+  const { getUnallowedWordCategory } = await import('@/utils/validation');
+  const category = getUnallowedWordCategory(fullResponse);
+  if (category) {
+    logger.warn(`AI response contained unallowed words in category: ${category}`);
+    await interaction.editReply(
+      'Sorry, I cannot provide that response as it contains prohibited content. Please try a different prompt.',
+    );
+    return;
+  }
 
   const urlProcessedResponse = processUrls(fullResponse);
   const chunks = splitResponseIntoChunks(urlProcessedResponse);

src/events/messageCreate.ts

···
     logger.info(isDM ? 'Processing DM message...' : 'Processing mention in server...');
 
     try {
-      logger.debug(`${isDM ? 'DM' : 'Message'} received (${message.content.length} characters)`);
+      logger.debug(
+        `${isDM ? 'DM' : 'Message'} received (${message.content.length} characters) - content hidden for privacy`,
+      );
 
       const conversationKey = getConversationKey(message);
       const conversation = conversations.get(conversationKey) || [];
···
 
       aiResponse.content = processUrls(aiResponse.content);
       aiResponse.content = aiResponse.content.replace(/@(everyone|here)/gi, '@\u200b$1');
+
+      const { getUnallowedWordCategory } = await import('@/utils/validation');
+      const category = getUnallowedWordCategory(aiResponse.content);
+      if (category) {
+        logger.warn(`AI response contained unallowed words in category: ${category}`);
+        await message.reply({
+          content:
+            'Sorry, I cannot provide that response as it contains prohibited content. Please try a different prompt.',
+          allowedMentions: { parse: ['users'] as const },
+        });
+        return;
+      }
 
       await this.sendResponse(message, aiResponse);
 

src/handlers/initialzeCommands.ts

···
 import * as config from '@/config';
 import BotClient, { srcDir } from '@/services/Client';
 import { SlashCommandProps, RemindCommandProps } from '@/types/command';
+import logger from '@/utils/logger';
 import { REST, Routes, SlashCommandBuilder, ContextMenuCommandBuilder } from 'discord.js';
 import { readdirSync } from 'fs';
 import path from 'path';
···
 }
 
 export default async (c: BotClient) => {
-  console.log('Processing commands...');
+  logger.info('Processing commands...');
   const cmdDir = path.join(srcDir, 'commands');
   const cmdCat = readdirSync(cmdDir);
   const commands: (SlashCommandBuilder | ContextMenuCommandBuilder)[] = [];
···
   try {
     const rest = new REST({ version: '10' }).setToken(config.TOKEN!);
     await rest.put(Routes.applicationCommands(config.CLIENT_ID!), { body: commands });
-    console.log('✅ All commands registered successfully');
+    logger.info('All commands registered successfully');
   } catch (error) {
-    console.error('Error on deploying commands:', error);
-    console.log('Bot will continue running with existing commands');
+    logger.error('Error on deploying commands:', error);
+    logger.info('Bot will continue running with existing commands');
   }
 };

src/index.ts

···
 import apiKeysRoutes from './routes/apiKeys';
 import remindersRoutes from './routes/reminders';
 import { resetOldStrikes } from './utils/userStrikes';
+import logger from './utils/logger';
 
 config();
 
 process.on('uncaughtException', (err) => {
-  console.error('Uncaught Exception:', err);
+  logger.error('Uncaught Exception:', err);
   process.exit(1);
 });
 process.on('unhandledRejection', (reason, promise) => {
-  console.error('🔥 Unhandled Rejection at:', promise);
-  console.error('📄 Reason:', reason);
+  logger.error('🔥 Unhandled Rejection at:', promise);
+  logger.error('📄 Reason:', reason);
 });
 
 const app = e();
···
 
 setInterval(
   () => {
-    resetOldStrikes().catch(console.error);
+    resetOldStrikes().catch(logger.error);
   },
   60 * 60 * 1000,
 );
 
 app.listen(PORT, () => {
-  console.log('Aethel is live on', `http://localhost:${PORT}`);
+  logger.debug('Aethel is live on', `http://localhost:${PORT}`);
 });

src/services/Client.ts

···
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';
+import logger from '@/utils/logger';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
···
   }
 
   private async setupLocalization() {
-    console.log('Loading localization files...');
+    logger.info('Loading localization files...');
     const localesDir = path.join(srcDir, '..', 'locales');
 
     try {
···
           const data = await promises.readFile(localeFile, { encoding: 'utf8' });
           const localeKey = locale.split('.')[0];
           this.t.set(localeKey, JSON.parse(data));
-          console.log(`Loaded locale: ${localeKey}`);
+          logger.debug(`Loaded locale: ${localeKey}`);
         } catch (error) {
-          console.error(`Failed to load locale file ${locale}:`, error);
+          logger.error(`Failed to load locale file ${locale}:`, error);
         }
       });
 
       await Promise.all(localePromises);
-      console.log(`Loaded ${this.t.size} locale(s)`);
+      logger.info(`Loaded ${this.t.size} locale(s)`);
     } catch (error) {
-      console.error('Failed to read locales directory:', error);
+      logger.error('Failed to read locales directory:', error);
       throw new Error('Failed to initialize localization');
     }
   }

src/services/social/SocialMediaManager.ts

···
     subscription: SocialMediaSubscription,
   ): Promise<void> {
     try {
+      if (this.isNSFWPost(post)) {
+        logger.warn(
+          `Skipping NSFW ${post.platform} post from ${post.author} in guild ${subscription.guildId}`,
+        );
+        return;
+      }
+
+      const guild = this.client.guilds.cache.get(subscription.guildId);
+      if (!guild) {
+        console.warn(
+          `Bot is not in guild ${subscription.guildId}. Skipping notification for ${post.platform} post.`,
+        );
+        return;
+      }
+
       const channel = await this.client.channels.fetch(subscription.channelId);
+      if (!channel) {
+        console.warn(
+          `Channel ${subscription.channelId} not found. Bot may not have access. Skipping notification.`,
+        );
+        return;
+      }
+
       if (!this.isTextBasedAndSendable(channel)) {
         console.error(
-          `Channel ${subscription.channelId} not found or not text-capable. Skipping notification.`,
+          `Channel ${subscription.channelId} is not text-capable. Skipping notification.`,
+        );
+        return;
+      }
+
+      const isGuildChannel = 'guild' in channel && channel.guild !== null;
+      if (isGuildChannel && channel.guild.id !== subscription.guildId) {
+        console.warn(
+          `Channel ${subscription.channelId} does not belong to guild ${subscription.guildId}. Skipping notification.`,
         );
         return;
       }
 
       const embed = this.createEmbed(post);
       await channel.send({ embeds: [embed] });
+      console.info(
+        `Successfully sent notification for ${post.platform} post in guild ${subscription.guildId}`,
+      );
     } catch (error) {
       console.error('Error sending notification:', error);
     }
   }
 
+  private isNSFWPost(post: SocialMediaPost): boolean {
+    const nsfwTags = ['#nsfw', '#adult', '#18+', '#porn', '#xxx', '#nudity', '#sensitive'];
+    const lowerText = post.text?.toLowerCase() || '';
+
+    if (nsfwTags.some((tag) => lowerText.includes(tag))) {
+      logger.debug(`Post from ${post.author} contains NSFW tag in text`);
+      return true;
+    }
+
+    if (post.platform === 'fediverse' && post.sensitive === true) {
+      logger.debug(`Fediverse post from ${post.author} is marked as sensitive`);
+      return true;
+    }
+
+    if (
+      post.platform === 'bluesky' &&
+      post.labels &&
+      post.labels.some((label) =>
+        ['nsfw', 'sexual', 'nudity', 'porn', 'explicit'].includes(label.val),
+      )
+    ) {
+      logger.debug(
+        `Bluesky post from ${post.author} has NSFW content label: ${post.labels.map((l) => l.val).join(', ')}`,
+      );
+      return true;
+    }
+
+    if (post.platform === 'fediverse' && post.spoiler_text && post.spoiler_text.length > 0) {
+      const spoilerText = post.spoiler_text.toLowerCase();
+      if (
+        nsfwTags.some((tag) => spoilerText.includes(tag.replace('#', ''))) ||
+        spoilerText.includes('nsfw') ||
+        spoilerText.includes('adult') ||
+        spoilerText.includes('18+')
+      ) {
+        logger.debug(
+          `Fediverse post from ${post.author} has NSFW content warning: ${post.spoiler_text}`,
+        );
+        return true;
+      }
+    }
+
+    return false;
+  }
+
   private createEmbed(post: SocialMediaPost): EmbedBuilder {
     const authorIcon = post.authorAvatarUrl ?? this.getPlatformIcon(post.platform);
     const authorName =
···
   private isRunning = false;
   private inProgress = false;
   private pollInterval: NodeJS.Timeout | null = null;
-  private readonly POLL_INTERVAL_MS = 60 * 1000;
+  private readonly POLL_INTERVAL_MS = 30 * 1000;
 
   constructor(
     private readonly client: Client,
···
 
   private async safeCheckForUpdates(): Promise<void> {
     if (!this.isRunning || this.inProgress) {
+      logger.debug('Poll already in progress, skipping...');
       return;
     }
     this.inProgress = true;
     try {
-      await this.checkForUpdates();
+      const updates = await this.socialService.checkForUpdates();
+      if (updates.length > 0) {
+        logger.info(`Found ${updates.length} new social media posts`);
+        await Promise.allSettled(
+          updates.map(({ post, subscription }) =>
+            this.notificationService.sendNotification(post, subscription),
+          ),
+        );
+      }
     } catch (error) {
-      logger.error('Error during guarded social media check:', error);
+      logger.error('Error during polling:', error);
     } finally {
       this.inProgress = false;
     }

src/services/social/SocialMediaService.ts

···
     for (const sub of subscriptions) {
       try {
         const fetcher = this.fetchers.get(sub.platform as SocialPlatform);
-        if (!fetcher) continue;
+        if (!fetcher) {
+          console.warn(`No fetcher found for platform: ${sub.platform}`);
+          continue;
+        }
 
         const latestPost = await fetcher.fetchLatestPost(sub.accountHandle);
-        if (latestPost) {
-          if (!sub.lastPostTimestamp) {
-            await this.updateLastPost(sub.id, latestPost.uri, latestPost.timestamp);
-            continue;
-          }
+        if (!latestPost) {
+          console.debug(`No posts found for ${sub.platform} account ${sub.accountHandle}`);
+          continue;
+        }
 
-          if (this.isNewerPost(latestPost, sub)) {
-            await this.updateLastPost(sub.id, latestPost.uri, latestPost.timestamp);
-            newPosts.push({
-              post: latestPost,
-              subscription: sub,
-            });
-          }
+        const normalizedUri = this.normalizeUri(latestPost.uri);
+
+        if (!sub.lastPostTimestamp) {
+          await this.updateLastPost(sub.id, normalizedUri, latestPost.timestamp);
+          continue;
+        }
+
+        if (this.isNewerPostWithLogging(latestPost, sub, normalizedUri)) {
+          await this.updateLastPost(sub.id, normalizedUri, latestPost.timestamp);
+          newPosts.push({
+            post: { ...latestPost, uri: normalizedUri },
+            subscription: sub,
+          });
         }
       } catch (error) {
         console.error(
···
     return post.uri !== subscription.lastPostUri;
   }
 
+  private isNewerPostWithLogging(
+    post: SocialMediaPost,
+    subscription: SocialMediaSubscription,
+    normalizedUri: string,
+  ): boolean {
+    if (!subscription.lastPostTimestamp) return false;
+
+    const isNewer =
+      post.timestamp > subscription.lastPostTimestamp ||
+      (post.timestamp.getTime() === subscription.lastPostTimestamp?.getTime() &&
+        normalizedUri !== subscription.lastPostUri);
+
+    return isNewer;
+  }
+
+  private normalizeUri(uri: string): string {
+    return uri.trim().toLowerCase();
+  }
+
+  public async debugSubscription(
+    guildId: string,
+    platform: SocialPlatform,
+    accountHandle: string,
+  ): Promise<{
+    subscription: SocialMediaSubscription | null;
+    latestPost: SocialMediaPost | null;
+    wouldAnnounce: boolean;
+    reason: string;
+  }> {
+    const normalizedHandle = this.normalizeAccountHandle(platform, accountHandle);
+    const result = await this.pool.query(
+      `SELECT * FROM server_social_subscriptions WHERE guild_id = $1 AND platform = $2::social_platform AND account_handle = $3`,
+      [guildId, platform, normalizedHandle],
+    );
+
+    if (result.rows.length === 0) {
+      return {
+        subscription: null,
+        latestPost: null,
+        wouldAnnounce: false,
+        reason: 'No subscription found',
+      };
+    }
+
+    const subscription = this.mapDbToSubscription(result.rows[0]);
+    const fetcher = this.fetchers.get(platform);
+
+    if (!fetcher) {
+      return {
+        subscription,
+        latestPost: null,
+        wouldAnnounce: false,
+        reason: 'No fetcher available',
+      };
+    }
+
+    try {
+      const latestPost = await fetcher.fetchLatestPost(accountHandle);
+      if (!latestPost) {
+        return {
+          subscription,
+          latestPost: null,
+          wouldAnnounce: false,
+          reason: 'No posts found',
+        };
+      }
+
+      const normalizedUri = this.normalizeUri(latestPost.uri);
+      const wouldAnnounce = this.isNewerPostWithLogging(latestPost, subscription, normalizedUri);
+
+      return {
+        subscription,
+        latestPost,
+        wouldAnnounce,
+        reason: wouldAnnounce ? 'New post detected' : 'Post already announced',
+      };
+    } catch (error) {
+      return {
+        subscription,
+        latestPost: null,
+        wouldAnnounce: false,
+        reason: `Error fetching post: ${error}`,
+      };
+    }
+  }
+
   private mapDbToSubscription(row: {
     id: number;
     guild_id: string;
···
   private normalizeAccountHandle(platform: SocialPlatform, handle: string): string {
     let h = handle.trim();
     if (platform === 'bluesky') {
+      if (h.startsWith('did:')) {
+        return h;
+      }
       h = h.startsWith('@') ? h.slice(1) : h;
       h = h.toLowerCase();
       if (!h.includes('.')) {

src/services/social/fetchers/UnifiedFetcher.ts

···
       alt: string;
     }>;
   };
+  labels?: Array<{
+    src: string;
+    uri: string;
+    val: string;
+    cts?: string;
+  }>;
 }
 
 interface BlueskyFeedItem {
···
     const createdAt = post.record?.createdAt ?? new Date().toISOString();
     const author = post.author?.handle ?? 'unknown';
 
+    const postUri = post.uri;
+
     return {
-      uri: post.uri,
+      uri: postUri,
       text,
       author,
       timestamp: new Date(createdAt),
···
       mediaUrls: mediaUrls.length > 0 ? mediaUrls : undefined,
       authorAvatarUrl,
       authorDisplayName,
+      labels: post.labels,
     };
   }
 
···
       mediaUrls: mediaUrls.length > 0 ? mediaUrls : undefined,
       authorAvatarUrl: post.account.avatar,
       authorDisplayName: post.account.display_name,
+      sensitive: post.sensitive,
+      spoiler_text: post.spoiler_text,
     };
   }
 }

src/types/social.ts

···
   mediaUrls?: string[];
   authorAvatarUrl?: string;
   authorDisplayName?: string;
+  sensitive?: boolean;
+  spoiler_text?: string;
+  labels?: Array<{ val: string; src?: string }>;
 }
 
 export interface SocialMediaFetcher {

web/src/components/ThemeToggle.tsx

···
   return (
     <button
       onClick={toggleTheme}
-      className={`p-2 rounded-lg transition-all duration-200 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${
+      className={`p-3 rounded-full transition-all duration-200 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${
         isDarkMode
           ? 'bg-gray-800/80 hover:bg-gray-700/80 text-yellow-400'
           : 'bg-white/80 hover:bg-gray-100/80 text-gray-700'
       } ${className}`}
       aria-label={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
     >
-      {isDarkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+      {isDarkMode ? <Sun className="w-6 h-6" /> : <Moon className="w-6 h-6" />}
     </button>
   );
 }

web/src/index.css

···
   background: var(--gradient-dark);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+  .blur-3xl, .backdrop-blur {
+    backdrop-filter: none !important;
+    filter: none !important;
+  }
+}
+
 .btn {
-  @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+  @apply inline-flex items-center justify-center font-semibold rounded-full px-6 py-3 transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-lg hover:shadow-xl;
 }
 
-.btn-primary {
-  @apply bg-blue-600 text-white hover:bg-blue-700;
+.btn-discord {
+  @apply bg-[#5865F2] hover:bg-[#4752c4] text-white hover:-translate-y-0.5 focus:ring-[#5865F2];
 }
 
-.btn-secondary {
-  @apply bg-gray-200 text-gray-900 hover:bg-gray-300 border border-gray-300;
+.btn-glass {
+  @apply bg-white/80 dark:bg-gray-800/80 backdrop-blur hover:bg-white dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 hover:-translate-y-0.5 focus:ring-gray-200 dark:focus:ring-gray-600;
 }
 
-.btn-danger {
-  @apply bg-red-600 text-white hover:bg-red-700;
+.btn-accent {
+  @apply bg-pink-500 hover:bg-pink-600 text-white hover:-translate-y-0.5 focus:ring-pink-500;
 }
 
-.btn-success {
-  @apply bg-green-600 text-white hover:bg-green-700;
+.feature-card {
+  @apply relative rounded-2xl p-6 bg-white/80 dark:bg-gray-800/60 backdrop-blur ring-1 ring-gray-900/10 dark:ring-white/10 shadow-sm hover:shadow-xl transition-all hover:-translate-y-1 hover:ring-pink-300/30;
 }
 
-.card {
-  @apply bg-white/80 dark:bg-gray-800/80 rounded-lg border border-gray-200 dark:border-gray-700 shadow-lg;
+.badge {
+  @apply px-3 py-1 rounded-full bg-white/70 dark:bg-white/5 text-gray-700 dark:text-gray-300 ring-1 ring-gray-900/5 dark:ring-white/10 text-xs;
 }
 
 .input {

web/src/pages/LandingPage.tsx

···
   FaceSmileIcon,
   BellAlertIcon,
   PhotoIcon,
-  SparklesIcon,
   SwatchIcon,
   CheckCircleIcon,
   UserIcon,
-  ClockIcon,
   QuestionMarkCircleIcon,
   AcademicCapIcon,
 } from '@heroicons/react/24/outline';
···
 import { Link } from 'react-router-dom';
 import ThemeToggle from '../components/ThemeToggle';
 
+const features = [
+  {
+    icon: ChatBubbleLeftRightIcon,
+    title: 'AI Chat',
+    description: 'Instant answers with /ai — ask and get quick, helpful responses.',
+  },
+  {
+    icon: BookOpenIcon,
+    title: 'Wikipedia',
+    description: 'Use /wiki to pull answers right from Wikipedia.',
+  },
+  { icon: CloudIcon, title: 'Weather', description: 'Forecasts for any city via /weather.' },
+  {
+    icon: FaceSmileIcon,
+    title: 'Fun',
+    description: 'Lighten the mood with /joke, or ask the mystical /8ball.',
+  },
+  {
+    icon: BellAlertIcon,
+    title: 'Reminders',
+    description:
+      'Set reminders for important messages using /remind or in Right Click -> Apps -> Remind Me',
+  },
+  {
+    icon: PhotoIcon,
+    title: 'Media Goodies',
+    description: 'Cute pet pics with /dog and /cat, and media downloads via /cobalt.',
+  },
+  {
+    icon: AcademicCapIcon,
+    title: 'Games',
+    description: 'Start a multiplayer trivia session with /trivia.',
+  },
+  {
+    icon: CheckCircleIcon,
+    title: 'Productivity',
+    description: 'Manage tasks with /todo and keep yourself busy.',
+  },
+  {
+    icon: UserIcon,
+    title: 'Utilities',
+    description: 'Look up domains with /whois, check what time it is on any city with /time.',
+  },
+  {
+    icon: QuestionMarkCircleIcon,
+    title: 'Discover',
+    description: 'Use /help to see everything Aethel can do.',
+  },
+  {
+    icon: SwatchIcon,
+    title: 'Constantly evolving',
+    description: 'We release new updates almost every day.',
+  },
+];
+
 export default function Home() {
   return (
-    <div className="min-h-screen p-8 relative transition-colors duration-300">
-      <div className="absolute top-4 right-4 flex items-center space-x-3 z-10">
-        <ThemeToggle />
-        <a
-          href="https://github.com/Aethel-Labs/aethel"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="p-3 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 text-black dark:text-white rounded-full transition-all transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-lg hover:shadow-xl"
-          aria-label="View on GitHub"
-        >
-          <svg
-            className="w-6 h-6"
-            fill="currentColor"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
+    <div className="min-h-screen relative overflow-hidden bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-black transition-colors duration-300">
+      <a
+        href="#main-content"
+        className="sr-only focus:absolute focus:not-sr-only focus:top-3 focus:left-3 focus:bg-white dark:focus:bg-gray-900 focus:text-gray-900 dark:focus:text-gray-100 focus:px-4 focus:py-2 focus:rounded-md focus:shadow"
+      >
+        Skip to content
+      </a>
+
+      <div className="pointer-events-none absolute -top-32 -right-32 h-96 w-96 rounded-full blur-xl md:blur-3xl opacity-30 bg-gradient-to-tr from-pink-400 to-purple-500 dark:opacity-20" />
+      <div className="pointer-events-none absolute -bottom-32 -left-32 h-[28rem] w-[28rem] rounded-full blur-xl md:blur-3xl opacity-30 bg-gradient-to-tr from-indigo-400 to-sky-500 dark:opacity-20" />
+
+      <header className="absolute top-4 right-4 z-10">
+        <div className="flex items-center space-x-3">
+          <ThemeToggle />
+          <a
+            href="https://github.com/Aethel-Labs/aethel"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="p-3 bg-white/80 dark:bg-gray-800/80 backdrop-blur hover:bg-white dark:hover:bg-gray-700 text-black dark:text-white rounded-full transition-all transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-lg hover:shadow-xl"
+            aria-label="View on GitHub"
           >
-            <path
-              fillRule="evenodd"
-              d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-              clipRule="evenodd"
-            />
-          </svg>
-        </a>
-      </div>
-      <main className="max-w-4xl mx-auto">
-        <div className="text-center mb-16 pt-8">
+            <svg
+              className="w-6 h-6"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                fillRule="evenodd"
+                d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </a>
+        </div>
+      </header>
+
+      <main
+        id="main-content"
+        className="relative max-w-6xl mx-auto px-6 sm:px-8 pt-24 pb-20"
+      >
+        <section className="text-center">
           <img
             src="/bot_icon.png"
             alt="Aethel Bot Logo"
-            className="mx-auto mb-8 rounded-2xl w-40 h-40 object-contain"
+            className="mx-auto mb-8 w-28 h-28 md:w-36 md:h-36 rounded-2xl object-contain shadow-xl ring-1 ring-black/5 dark:ring-white/10"
             style={{ imageRendering: 'auto' }}
+            width={256}
+            height={256}
+            loading="eager"
+            decoding="async"
           />
-          <h1 className="text-4xl md:text-6xl font-bold mb-4 text-gray-800 dark:text-gray-100">
+          <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight mb-4 text-gray-900 dark:text-gray-100">
             Aethel
           </h1>
-          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8">
-            A useful and multipurpose bot for Discord
+          <p className="max-w-2xl mx-auto text-lg md:text-xl text-gray-600 dark:text-gray-300 leading-relaxed">
+            An amazing, feature-rich open-source Discord bot with useful and fun commands to have a
+            good time with friends.{' '}
           </p>
-          <div className="flex flex-wrap justify-center gap-4">
+          <div className="mt-8 flex flex-wrap justify-center gap-3 md:gap-4">
             <a
-              href="https://discord.com/oauth2/authorize?client_id=1371031984230371369"
-              className="bg-[#5865F2] hover:bg-[#4752c4] text-white font-bold py-3 px-8 rounded-full inline-flex items-center space-x-2 transition-all transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#5865F2] shadow-lg hover:shadow-xl"
+              href="https://discord.com/oauth2/authorize?client_id=1371031984230371369&scope=bot%20applications.commands"
+              className="btn btn-discord"
               target="_blank"
               rel="noopener noreferrer"
             >
···
             </a>
             <Link
               to="/status"
-              className="bg-white/90 dark:bg-gray-800/90 hover:bg-white dark:hover:bg-gray-700 text-gray-800 dark:text-gray-100 font-bold py-3 px-8 rounded-full inline-flex items-center space-x-2 transition-all transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 dark:focus:ring-gray-600 shadow-lg hover:shadow-xl"
+              className="btn btn-glass"
             >
               <span>View Status</span>
             </Link>
             <Link
               to="/login"
-              className="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full inline-flex items-center space-x-2 transition-all transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 shadow-lg hover:shadow-xl"
+              className="btn btn-accent"
             >
               <span>Dashboard</span>
             </Link>
           </div>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <div className="command-card group">
-            <ChatBubbleLeftRightIcon className="w-8 h-8 text-pink-500 mb-3 group-hover:scale-110 transition-transform" />
-            <h3 className="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">/ai</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Chat with AI, ask questions, get answers!
-            </p>
-          </div>
-
-          <div className="command-card group">
-            <BookOpenIcon className="w-8 h-8 text-pink-500 mb-3 group-hover:scale-110 transition-transform" />
-            <h3 className="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">/wiki</h3>
-            <p className="text-gray-600 dark:text-gray-300">Get answers directly from Wikipedia</p>
-          </div>
-
-          <div className="command-card group">
-            <CloudIcon className="w-8 h-8 text-pink-500 mb-3 group-hover:scale-110 transition-transform" />
-            <h3 className="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">
-              /weather
-            </h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Get the weather forecast for any city
-            </p>
-          </div>
-
-          <div className="command-card group">
-            <FaceSmileIcon className="w-8 h-8 text-pink-500 mb-3 group-hover:scale-110 transition-transform" />
-            <h3 className="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">/joke</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Get a random joke and bright up your day
-            </p>
-          </div>
-
-          <div className="command-card group">
-            <BellAlertIcon className="w-8 h-8 text-pink-500 mb-3 group-hover:scale-110 transition-transform" />
-            <h3 className="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">/remind</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Set a reminder for a message or something important, supports message interactions
-            </p>
-          </div>
-
-          <div className="command-card group">
-            <PhotoIcon className="w-8 h-8 text-pink-500 mb-3 group-hover:scale-110 transition-transform" />
-            <h3 className="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">
-              /dog & /cat
-            </h3>
-            <p className="text-gray-600 dark:text-gray-300">Get random cute pet images</p>
-          </div>
-
-          <div className="command-card group">
-            <SparklesIcon className="w-8 h-8 text-pink-500 mb-3 group-hover:scale-110 transition-transform" />
-            <h3 className="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">/8ball</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Ask the magic 8ball a question and get a mysterious answer
-            </p>
-          </div>
-
-          <div className="command-card group">
-            <AcademicCapIcon className="w-8 h-8 text-pink-500 mb-3 group-hover:scale-110 transition-transform" />
-            <h3 className="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">/trivia</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Start a multiplayer trivia game with friends
-            </p>
-          </div>
-
-          <div className="command-card group">
-            <SwatchIcon className="w-8 h-8 text-pink-500 mb-3 group-hover:scale-110 transition-transform" />
-            <h3 className="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">/cobalt</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Download videos and media from various platforms using Cobalt
-            </p>
+          <div className="mt-6 flex flex-wrap justify-center gap-2 text-xs md:text-sm">
+            <span className="badge">Open Source</span>
+            <span className="badge">Privacy Friendly</span>
+            <span className="badge">AI features</span>
           </div>
+        </section>
 
-          <div className="command-card group">
-            <CheckCircleIcon className="w-8 h-8 text-pink-500 mb-3 group-hover:scale-110 transition-transform" />
-            <h3 className="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">/todo</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Create and manage your todo list and tasks
-            </p>
-          </div>
-
-          <div className="command-card group">
-            <UserIcon className="w-8 h-8 text-pink-500 mb-3 group-hover:scale-110 transition-transform" />
-            <h3 className="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">/whois</h3>
-            <p className="text-gray-600 dark:text-gray-300">Get domain and IP information</p>
+        <section className="mt-16 md:mt-20">
+          <h2 className="text-center text-2xl md:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8">
+            What you can do with Aethel
+          </h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {features.map(({ icon: Icon, title, description }) => (
+              <div
+                key={title}
+                className="feature-card group"
+              >
+                <Icon className="w-8 h-8 text-pink-500 mb-3 group-hover:scale-110 transition-transform" />
+                <h3 className="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">
+                  {title}
+                </h3>
+                <p className="text-gray-600 dark:text-gray-300">{description}</p>
+              </div>
+            ))}
           </div>
-
-          <div className="command-card group">
-            <ClockIcon className="w-8 h-8 text-pink-500 mb-3 group-hover:scale-110 transition-transform" />
-            <h3 className="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">/time</h3>
-            <p className="text-gray-600 dark:text-gray-300">Get the current time for any cities</p>
-          </div>
-
-          <div className="command-card group">
-            <QuestionMarkCircleIcon className="w-8 h-8 text-pink-500 mb-3 group-hover:scale-110 transition-transform" />
-            <h3 className="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">/help</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Show all available commands and their usage
-            </p>
-          </div>
-        </div>
+        </section>
 
         <div className="mt-16 text-center">
-          <p className="text-gray-600 dark:text-gray-300 mb-4">
-            You might use this bot in DMs and servers that allow external applications!
+          <p className="text-gray-600 dark:text-gray-300 mb-2">
+            Use Aethel in DMs or servers that allow external applications.
           </p>
         </div>
       </main>
 
-      <footer className="mt-16 text-center text-gray-500 dark:text-gray-400 pb-8">
+      <footer className="relative border-t border-gray-200/70 dark:border-white/10 bg-white/60 dark:bg-gray-900/40 backdrop-blur py-10 text-center text-gray-600 dark:text-gray-300">
         <div className="flex flex-wrap justify-center gap-6 mb-6">
           <Link
             to="/legal/privacy"
···
             Terms of Service
           </Link>
         </div>
-
         <div className="mb-4">
           <p className="text-xs text-gray-600 dark:text-gray-400 mb-2">Powered by</p>
           <a
···
             <img
               src="/royale_logo.svg"
               alt="Royale Hosting"
-              className="h-6 mx-auto dark:hidden"
+              className="h-8 mx-auto dark:hidden object-contain"
+              width={160}
+              height={32}
+              loading="lazy"
+              decoding="async"
             />
             <img
               src="/royale_logo_dark.svg"
               alt="Royale Hosting"
-              className="h-6 mx-auto hidden dark:block"
+              className="h-8 mx-auto hidden dark:block object-contain"
+              width={160}
+              height={32}
+              loading="lazy"
+              decoding="async"
             />
           </a>
         </div>
-
-        <p className="hover:text-pink-500 transition-colors text-gray-600 dark:text-gray-300">
-          Made with ♥ by scanash and the Aethel Labs community
+        <p className="hover:text-pink-500 transition-colors">
+          Made with ♥ by scanash and the Aethel Labs contributors
         </p>
       </footer>
     </div>