Update UI components and styles for improved functionality and aesthetics

- Changed accent color variables in index.css for better visual consistency.
- Added a new voicebox logo to the Sidebar component for branding enhancement.
- Refactored AudioPlayer to utilize CSS variables for wave and progress colors, improving theme adaptability.
- Adjusted HistoryTable column widths for better layout and readability.
- Enhanced ProfileCard layout with improved button positioning and styling.
- Updated button styles to use accent colors for better visual coherence.
- Improved CircleButton styling for consistent appearance across the application.

landing/src/app/page.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import Link from 'next/link';
-import { Github, Zap, Cpu, Cloud, Shield, Code } from 'lucide-react';
+import { Cloud, Code, Cpu, Github, Shield, Zap } from 'lucide-react';
+import Image from 'next/image';
+import { AppleIcon, LinuxIcon, WindowsIcon } from '@/components/PlatformIcons';
 import { Button } from '@/components/ui/button';
 import { Hero } from '@/components/ui/hero';
 import { Section, SectionTitle } from '@/components/ui/section';
-import { Card, CardContent } from '@/components/ui/card';
-import { FeatureCard } from '@/components/ui/feature-card';
-import { GITHUB_REPO, DOWNLOAD_LINKS } from '@/lib/constants';
-import { AppleIcon, WindowsIcon, LinuxIcon } from '@/components/PlatformIcons';
+import { DOWNLOAD_LINKS, GITHUB_REPO } from '@/lib/constants';
+import { FeatureCard } from '../components/ui/feature-card';
 
 export default function Home() {
   const features = [
@@ -53,9 +52,19 @@ export default function Home() {
       {/* Hero Section */}
       <Hero
         title="voicebox"
-        description="Professional voice cloning powered by Qwen3-TTS. Create natural-sounding speech from text with near-perfect voice replication."
+        description="Open source voice cloning powered by Qwen3-TTS. Create natural-sounding speech from text with near-perfect voice replication."
         actions={
           <div className="space-y-4 w-full lg:w-auto">
+            <div className="w-full max-w-2xl mb-6">
+              <Image
+                src="/App.webp"
+                alt="Voicebox Application Screenshot"
+                width={1920}
+                height={1080}
+                className="w-full h-auto rounded-lg border border-border shadow-lg"
+                priority
+              />
+            </div>
             <div>
               <h2 className="text-2xl sm:text-3xl font-bold mb-1">Download</h2>
               <p className="text-sm text-muted-foreground">Choose your platform</p>

landing/src/components/ui/hero.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { ReactNode } from 'react';
-import { cn } from '@/lib/utils';
 import Image from 'next/image';
+import type { ReactNode } from 'react';
+import { cn } from '@/lib/utils';
 
 interface HeroProps {
   title: ReactNode;
@@ -21,7 +21,7 @@ export function Hero({ title, description, actions, className, showLogo = true }
           {showLogo && (
             <div className="flex lg:justify-start justify-center mb-6">
               <Image
-                src="/voicebox-logo.png"
+                src="/voicebox-logo-2.png"
                 alt="Voicebox Logo"
                 width={1024}
                 height={1024}