Improve overall user interface and fix reported functionality problems
Fixes dark mode toggle, landing page layout, dashboard structure, and removes unused imports. Replit-Commit-Author: Agent Replit-Commit-Session-Id: d7e7c4e8-20cb-41c4-9d0e-79f48938fede Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/9777c70b-fc38-4831-8d6b-78dfffe041b0/d4eed189-5f49-4ca5-967b-42e14b879685.jpg
This commit is contained in:
ghaddaditw
@@ -75,15 +75,10 @@ export default function DashboardPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
|
||||
<div className="dashboard-grid">
|
||||
{/* Sidebar */}
|
||||
<Sidebar className="hidden md:block" />
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 p-6 overflow-auto">
|
||||
<div className="flex min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||
<Sidebar className="w-64 border-r" />
|
||||
<div className="flex-1 overflow-auto">
|
||||
<div className="p-6">
|
||||
<div className="max-w-7xl mx-auto space-y-6">
|
||||
|
||||
{/* Welcome Header */}
|
||||
@@ -265,11 +260,11 @@ export default function DashboardPage() {
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Global Voice Indicator */}
|
||||
<VoiceIndicator showControls />
|
||||
<VoiceIndicator />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,8 @@
|
||||
import { useLocation } from "wouter";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { useVoice } from "@/hooks/useVoice";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { aiService } from "@/services/aiService";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import DailyJoke from "@/components/ai/DailyJoke";
|
||||
import VoiceIndicator from "@/components/voice/VoiceIndicator";
|
||||
import Header from "@/components/layout/Header";
|
||||
@@ -14,22 +10,16 @@ import { useTheme } from "@/context/ThemeContext";
|
||||
import {
|
||||
Mic,
|
||||
Volume2,
|
||||
Shield,
|
||||
Brain,
|
||||
CheckCircle,
|
||||
DollarSign,
|
||||
Calendar,
|
||||
Play,
|
||||
ArrowRight,
|
||||
Zap
|
||||
ArrowRight
|
||||
} from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
const [, setLocation] = useLocation();
|
||||
const { user } = useAuth();
|
||||
const { isListening, startListening, stopListening, isSupported } = useVoice();
|
||||
const { theme } = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
// Redirect to dashboard if already authenticated
|
||||
if (user) {
|
||||
@@ -54,279 +44,118 @@ export default function LandingPage() {
|
||||
<Header />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main className="relative py-20 lg:py-32 overflow-hidden">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%236366f1%22%20fill-opacity%3D%220.05%22%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%222%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-50"></div>
|
||||
<main className="relative py-12 lg:py-20 overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center space-y-8">
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Main Hero Content */}
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-4xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight">
|
||||
Your Personal
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
|
||||
{" "}Productivity Assistant
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{/* Left Column: Content */}
|
||||
<div className="space-y-8">
|
||||
{/* Daily Joke Display */}
|
||||
<DailyJoke />
|
||||
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-4xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight">
|
||||
{t('landing.heroTitle')}
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-secondary-600">
|
||||
{" "}MenAssist
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-slate-600 dark:text-slate-300 leading-relaxed">
|
||||
{t('landing.heroSubtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Key Features */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Card className="border-slate-200 dark:border-slate-700">
|
||||
<CardContent className="p-4">
|
||||
<div className="w-8 h-8 bg-primary-100 dark:bg-primary-900/50 rounded-lg flex items-center justify-center mb-3">
|
||||
<Calendar className="w-5 h-5 text-primary-600 dark:text-primary-400" />
|
||||
</div>
|
||||
<h4 className="font-semibold text-slate-900 dark:text-white text-sm">{t('landing.taskManagement')}</h4>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-400 mt-1">{t('landing.taskManagementDesc')}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-slate-200 dark:border-slate-700">
|
||||
<CardContent className="p-4">
|
||||
<div className="w-8 h-8 bg-emerald-100 dark:bg-emerald-900/50 rounded-lg flex items-center justify-center mb-3">
|
||||
<DollarSign className="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
|
||||
</div>
|
||||
<h4 className="font-semibold text-slate-900 dark:text-white text-sm">{t('landing.financialTracking')}</h4>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-400 mt-1">{t('landing.financialTrackingDesc')}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Button
|
||||
onClick={handleGetStarted}
|
||||
className="flex-1 bg-primary-600 hover:bg-primary-700 text-white px-8 py-4 text-lg font-semibold shadow-lg hover:shadow-xl transition-all"
|
||||
>
|
||||
{t('landing.startFreeTrial')}
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setLocation("/demo")}
|
||||
className="px-8 py-4 text-lg font-semibold border-slate-300 dark:border-slate-600 hover:border-primary-300 dark:hover:border-primary-500"
|
||||
>
|
||||
<Play className="w-5 h-5 mr-2" />
|
||||
{t('landing.viewDemo')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Voice Demo */}
|
||||
<div className="lg:pl-8">
|
||||
<Card className="shadow-2xl border-slate-200 dark:border-slate-700">
|
||||
<CardContent className="p-8">
|
||||
<div className="text-center space-y-6">
|
||||
<h3 className="text-xl font-semibold text-slate-900 dark:text-white">{t('landing.tryVoiceCommands')}</h3>
|
||||
|
||||
{/* Voice Visualizer */}
|
||||
<div className="flex justify-center">
|
||||
<div className="relative">
|
||||
<Button
|
||||
onClick={handleVoiceDemo}
|
||||
disabled={!isSupported}
|
||||
className={`w-24 h-24 rounded-full bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 text-white border-0 ${
|
||||
isListening ? 'animate-pulse scale-110' : ''
|
||||
}`}
|
||||
>
|
||||
<Mic className="w-12 h-12" />
|
||||
</Button>
|
||||
{isListening && (
|
||||
<div className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full animate-pulse" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<Button
|
||||
onClick={handleVoiceDemo}
|
||||
disabled={!isSupported}
|
||||
className="w-full bg-secondary-600 hover:bg-secondary-700 text-white font-medium"
|
||||
>
|
||||
<Mic className="w-4 h-4 mr-2" />
|
||||
{isListening ? t('landing.stopListening') : t('landing.startVoiceDemo')}
|
||||
</Button>
|
||||
|
||||
<div className="text-sm text-slate-600 dark:text-slate-400 space-y-1">
|
||||
<p className="font-medium">{t('landing.trySaying')}</p>
|
||||
<Card className="bg-slate-50 dark:bg-slate-900 border-slate-200 dark:border-slate-700">
|
||||
<CardContent className="p-3 text-left space-y-1">
|
||||
<p>"{t('landing.createTaskExample')}"</p>
|
||||
<p>"{t('landing.addExpenseExample')}"</p>
|
||||
<p>"{t('landing.showScheduleExample')}"</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="py-20 bg-white dark:bg-slate-800 mt-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-slate-900 dark:text-white mb-4">
|
||||
{t('landing.completeOfflineVoiceAI')}
|
||||
</h2>
|
||||
<p className="text-xl text-slate-600 dark:text-slate-300 max-w-3xl mx-auto">
|
||||
{t('landing.enterpriseGradeDesc')}
|
||||
<p className="text-xl text-slate-600 dark:text-slate-300 leading-relaxed max-w-3xl mx-auto">
|
||||
Streamline your tasks, manage finances, and boost productivity with AI-powered assistance and voice control.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{/* Local AI Processing */}
|
||||
<Card className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600">
|
||||
<CardContent className="p-8">
|
||||
<div className="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-xl flex items-center justify-center mb-4">
|
||||
<Brain className="w-6 h-6 text-primary-600 dark:text-primary-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">{t('landing.localAIModels')}</h3>
|
||||
<p className="text-slate-600 dark:text-slate-300 mb-4">
|
||||
{t('landing.localAIDesc')}
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.baseModelsIncluded')}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.swappableArchitecture')}</span>
|
||||
</div>
|
||||
{/* Daily Joke in a prominent card */}
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<DailyJoke />
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={handleGetStarted}
|
||||
className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-8 py-3 text-lg font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all"
|
||||
>
|
||||
Get Started
|
||||
<ArrowRight className="ml-2 w-5 h-5" />
|
||||
</Button>
|
||||
|
||||
{isSupported && (
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
onClick={handleVoiceDemo}
|
||||
className="border-2 border-blue-300 dark:border-blue-700 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 px-8 py-3 text-lg font-semibold rounded-xl transition-all"
|
||||
>
|
||||
{isListening ? (
|
||||
<>
|
||||
<Volume2 className="w-5 h-5 mr-2 animate-pulse" />
|
||||
Listening...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Mic className="w-5 h-5 mr-2" />
|
||||
Try Voice Demo
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Features Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto mt-16">
|
||||
<Card className="border-slate-200 dark:border-slate-700 hover:shadow-lg transition-shadow">
|
||||
<CardContent className="p-6 text-center">
|
||||
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center mb-4 mx-auto">
|
||||
<Calendar className="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-slate-900 dark:text-white mb-2">Task Management</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">Organize and track your daily tasks efficiently with smart prioritization</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Voice Task Management */}
|
||||
<Card className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600">
|
||||
<CardContent className="p-8">
|
||||
<div className="w-12 h-12 bg-secondary-100 dark:bg-secondary-900 rounded-xl flex items-center justify-center mb-4">
|
||||
<Calendar className="w-6 h-6 text-secondary-600 dark:text-secondary-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">{t('landing.voiceTaskCreation')}</h3>
|
||||
<p className="text-slate-600 dark:text-slate-300 mb-4">
|
||||
{t('landing.voiceTaskCreationDesc')}
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.naturalLanguageProcessing')}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.smartDateExtraction')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Financial Voice Entry */}
|
||||
<Card className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600">
|
||||
<CardContent className="p-8">
|
||||
<div className="w-12 h-12 bg-emerald-100 dark:bg-emerald-900 rounded-xl flex items-center justify-center mb-4">
|
||||
<Card className="border-slate-200 dark:border-slate-700 hover:shadow-lg transition-shadow">
|
||||
<CardContent className="p-6 text-center">
|
||||
<div className="w-12 h-12 bg-emerald-100 dark:bg-emerald-900/50 rounded-lg flex items-center justify-center mb-4 mx-auto">
|
||||
<DollarSign className="w-6 h-6 text-emerald-600 dark:text-emerald-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">{t('landing.voiceFinancialTracking')}</h3>
|
||||
<p className="text-slate-600 dark:text-slate-300 mb-4">
|
||||
{t('landing.voiceFinancialDesc')}
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.autoCategorization')}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.receiptOCR')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="font-semibold text-slate-900 dark:text-white mb-2">Financial Tracking</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">Monitor your expenses and achieve your financial goals with insights</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Privacy & Security */}
|
||||
<Card className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600">
|
||||
<CardContent className="p-8">
|
||||
<div className="w-12 h-12 bg-red-100 dark:bg-red-900 rounded-xl flex items-center justify-center mb-4">
|
||||
<Shield className="w-6 h-6 text-red-600 dark:text-red-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">{t('landing.completePrivacy')}</h3>
|
||||
<p className="text-slate-600 dark:text-slate-300 mb-4">
|
||||
{t('landing.completePrivacyDesc')}
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.onPremiseDeployment')}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.encryptedStorage')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Real-time Processing */}
|
||||
<Card className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600">
|
||||
<CardContent className="p-8">
|
||||
<div className="w-12 h-12 bg-amber-100 dark:bg-amber-900 rounded-xl flex items-center justify-center mb-4">
|
||||
<Zap className="w-6 h-6 text-amber-600 dark:text-amber-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">{t('landing.realTimeProcessing')}</h3>
|
||||
<p className="text-slate-600 dark:text-slate-300 mb-4">
|
||||
{t('landing.realTimeProcessingDesc')}
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.subSecondResponse')}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.continuousListening')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Multi-user Support */}
|
||||
<Card className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600">
|
||||
<CardContent className="p-8">
|
||||
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center mb-4">
|
||||
<Volume2 className="w-6 h-6 text-purple-600 dark:text-purple-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">{t('landing.multiTierAccess')}</h3>
|
||||
<p className="text-slate-600 dark:text-slate-300 mb-4">
|
||||
{t('landing.multiTierDesc')}
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.progressiveOnboarding')}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">{t('landing.featureBasedPermissions')}</span>
|
||||
</div>
|
||||
<Card className="border-slate-200 dark:border-slate-700 hover:shadow-lg transition-shadow">
|
||||
<CardContent className="p-6 text-center">
|
||||
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center mb-4 mx-auto">
|
||||
<Brain className="w-6 h-6 text-purple-600 dark:text-purple-400" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-slate-900 dark:text-white mb-2">AI Assistant</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">Get intelligent suggestions and automation powered by advanced AI</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Voice Control Section */}
|
||||
<div className="mt-20 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-slate-800 dark:to-slate-700 rounded-2xl p-8">
|
||||
<div className="text-center space-y-4">
|
||||
<div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center mx-auto">
|
||||
<Mic className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white">Voice-Powered Control</h2>
|
||||
<p className="text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">
|
||||
Control your productivity suite with natural voice commands. Create tasks, check finances, and navigate the app hands-free.
|
||||
</p>
|
||||
{isSupported ? (
|
||||
<p className="text-sm text-green-600 dark:text-green-400 font-medium">
|
||||
✓ Voice control supported on your device
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm text-orange-600 dark:text-orange-400">
|
||||
Voice control requires a modern browser with microphone access
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Voice Status Indicator */}
|
||||
|
||||
@@ -243,7 +243,20 @@ export default function SettingsPage() {
|
||||
Switch between light and dark themes
|
||||
</p>
|
||||
</div>
|
||||
<Switch />
|
||||
<Switch
|
||||
checked={theme === 'dark'}
|
||||
onCheckedChange={toggleTheme}
|
||||
/>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Language</Label>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
Choose your preferred language
|
||||
</p>
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user