Update Home page with industrial design and new feature showcase

- Clean, professional layout with gradient hero section
- Real-time system statistics (models, assistants, templates)
- Updated quick actions for all 4 main features (Playground, Models, Assistants, Community)
- Core features highlight with modern icons
- Simplified getting started flow
- Remove outdated content and focus on essential functionality

frontend/src/pages/Home.tsx

@@ -1,230 +1,245 @@
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
+import { useState, useEffect } from 'react'
+import { Card, CardContent } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
-
+import { Badge } from '@/components/ui/badge'
 import { 
-  Brain, 
   MessageSquare, 
   BookOpen, 
+  Bot, 
+  Users,
+  ArrowRight,
   Zap,
   Shield,
   Cpu,
-  ArrowRight
+  Brain
 } from 'lucide-react'
-import { Link } from 'react-router-dom'
 
-const features = [
-  {
-    icon: Brain,
-    title: "Local AI Models",
-    description: "Run powerful language models locally on your machine with full privacy control.",
-    color: "text-blue-500"
-  },
-  {
-    icon: MessageSquare,
-    title: "Interactive Chat",
-    description: "Playground interface for testing prompts and exploring model capabilities.",
-    color: "text-green-500"
-  },
-  {
-    icon: Shield,
-    title: "Privacy First",
-    description: "Your data never leaves your machine. Complete privacy and security guaranteed.",
-    color: "text-purple-500"
-  },
-  {
-    icon: Zap,
-    title: "High Performance",
-    description: "Optimized for speed with model caching and efficient resource management.",
-    color: "text-yellow-500"
+export function Home() {
+  const [stats, setStats] = useState({
+    models: 0,
+    assistants: 0,
+    isOnline: false
+  })
+
+  useEffect(() => {
+    loadStats()
+    checkSystemStatus()
+  }, [])
+
+  const loadStats = () => {
+    try {
+      const assistants = JSON.parse(localStorage.getItem('savedAssistants') || '[]')
+      setStats(prev => ({ ...prev, assistants: assistants.length }))
+    } catch (error) {
+      console.error('Failed to load stats:', error)
+    }
   }
-]
 
-const quickActions = [
-  {
-    title: "Start Chatting",
-    description: "Jump into the playground and start experimenting",
-    href: "/playground",
-    icon: MessageSquare,
-    primary: true
-  },
-  {
-    title: "Browse Models",
-    description: "Explore available models and their capabilities",
-    href: "/models",
-    icon: BookOpen,
-    primary: false
-  },
-  {
-    title: "View Settings",
-    description: "Configure your application preferences",
-    href: "/settings",
-    icon: Cpu,
-    primary: false
+  const checkSystemStatus = async () => {
+    try {
+      const baseUrl = `${window.location.protocol}//${window.location.host}`
+      const res = await fetch(`${baseUrl}/models`)
+      if (res.ok) {
+        const data = await res.json()
+        setStats(prev => ({ 
+          ...prev, 
+          models: data.models?.length || 0,
+          isOnline: true 
+        }))
+      }
+    } catch (error) {
+      console.error('System check failed:', error)
+      setStats(prev => ({ ...prev, isOnline: false }))
+    }
   }
-]
 
-export function Home() {
+  const quickActions = [
+    {
+      title: 'Start Chatting',
+      description: 'Begin conversations with AI models',
+      icon: MessageSquare,
+      href: '/playground',
+      color: 'bg-blue-600',
+      primary: true
+    },
+    {
+      title: 'Browse Models',
+      description: 'Manage and load AI models',
+      icon: BookOpen,
+      href: '/models',
+      color: 'bg-green-600',
+      primary: false
+    },
+    {
+      title: 'My Assistants',
+      description: 'Custom AI assistant configurations',
+      icon: Bot,
+      href: '/assistants',
+      color: 'bg-purple-600',
+      primary: false
+    },
+    {
+      title: 'Community',
+      description: 'Discover and share templates',
+      icon: Users,
+      href: '/community',
+      color: 'bg-orange-600',
+      primary: false
+    }
+  ]
+
+  const features = [
+    {
+      icon: Shield,
+      title: 'Privacy First',
+      description: 'Local processing with complete data control'
+    },
+    {
+      icon: Zap,
+      title: 'High Performance',
+      description: 'Optimized for speed and efficiency'
+    },
+    {
+      icon: Cpu,
+      title: 'Local & Cloud',
+      description: 'Run models locally or access cloud APIs'
+    },
+    {
+      icon: Brain,
+      title: 'Advanced Models',
+      description: 'Support for latest AI capabilities'
+    }
+  ]
+
   return (
     <div className="min-h-screen bg-background">
-      <div className="container mx-auto px-4 py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-12">
-          <div className="flex items-center justify-center mb-4">
-            <div className="w-16 h-16 bg-primary rounded-2xl flex items-center justify-center">
-              <Brain className="h-8 w-8 text-primary-foreground" />
+      {/* Hero Section */}
+      <div className="bg-gradient-to-br from-blue-50 to-indigo-100 border-b">
+        <div className="max-w-6xl mx-auto px-6 py-16">
+          <div className="text-center space-y-6">
+            <div className="flex items-center justify-center gap-2 mb-4">
+              <div className="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center">
+                <Brain className="h-7 w-7 text-white" />
+              </div>
+              <div className="flex items-center gap-2">
+                <h1 className="text-4xl font-bold text-gray-900">Edge LLM</h1>
+                <Badge variant={stats.isOnline ? "default" : "secondary"} className="text-xs">
+                  {stats.isOnline ? 'Online' : 'Offline'}
+                </Badge>
+              </div>
             </div>
-          </div>
-          <h1 className="text-4xl font-bold mb-4">Edge LLM</h1>
-          <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
-            Your local AI companion. Run powerful language models on your own hardware with complete privacy and control.
-          </p>
-          <div className="flex items-center justify-center gap-4">
-            <Link to="/playground">
-              <Button size="lg">
-                <MessageSquare className="h-5 w-5 mr-2" />
+            
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+              Professional AI platform for local and cloud language models. 
+              Complete privacy, advanced features, industrial-grade performance.
+            </p>
+            
+            <div className="flex items-center justify-center gap-4 pt-4">
+              <Button size="lg" onClick={() => window.location.href = '/playground'} className="flex items-center gap-2">
+                <MessageSquare className="h-5 w-5" />
                 Start Chatting
+                <ArrowRight className="h-4 w-4" />
               </Button>
-            </Link>
-            <Link to="/models">
-              <Button variant="outline" size="lg">
+              
+              <Button size="lg" variant="outline" onClick={() => window.location.href = '/models'}>
                 <BookOpen className="h-5 w-5 mr-2" />
                 Browse Models
               </Button>
-            </Link>
+            </div>
           </div>
         </div>
+      </div>
 
-        {/* Features Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
-          {features.map((feature, index) => (
-            <Card key={index} className="text-center">
-              <CardContent className="pt-6">
-                <feature.icon className={`h-12 w-12 mx-auto mb-4 ${feature.color}`} />
-                <h3 className="font-semibold mb-2">{feature.title}</h3>
-                <p className="text-sm text-muted-foreground">{feature.description}</p>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-
+      <div className="max-w-6xl mx-auto px-6 py-12 space-y-12">
+        
         {/* Quick Actions */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
-          {quickActions.map((action, index) => (
-            <Card key={index} className="hover:shadow-lg transition-shadow">
-              <CardContent className="pt-6">
-                <div className="flex items-center gap-3 mb-3">
-                  <action.icon className="h-6 w-6 text-primary" />
-                  <h3 className="font-semibold">{action.title}</h3>
-                </div>
-                <p className="text-sm text-muted-foreground mb-4">{action.description}</p>
-                <Link to={action.href}>
-                  <Button 
-                    variant={action.primary ? "default" : "outline"} 
-                    className="w-full"
-                  >
-                    Get Started
-                    <ArrowRight className="h-4 w-4 ml-2" />
-                  </Button>
-                </Link>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-
-        {/* Getting Started */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-          <Card>
-            <CardHeader>
-              <CardTitle>Getting Started</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                <div className="space-y-2">
-                  <div className="flex items-center gap-2">
-                    <div className="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center text-sm font-medium">
-                      1
-                    </div>
-                    <h4 className="font-medium">Browse Available Models</h4>
+        <section>
+          <h2 className="text-2xl font-semibold mb-6 text-center">Quick Actions</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {quickActions.map((action) => (
+              <Card 
+                key={action.title}
+                className={`hover:shadow-lg transition-all duration-200 cursor-pointer hover:-translate-y-1 ${
+                  action.primary ? 'ring-2 ring-blue-200' : ''
+                }`}
+                onClick={() => window.location.href = action.href}
+              >
+                <CardContent className="p-6 text-center space-y-4">
+                  <div className={`w-12 h-12 ${action.color} rounded-lg flex items-center justify-center mx-auto`}>
+                    <action.icon className="h-6 w-6 text-white" />
                   </div>
-                  <p className="text-sm text-muted-foreground pl-8">
-                    Check out our model catalog to see what's available for your use case.
-                  </p>
-                </div>
-                
-                <div className="space-y-2">
-                  <div className="flex items-center gap-2">
-                    <div className="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center text-sm font-medium">
-                      2
-                    </div>
-                    <h4 className="font-medium">Load a Model</h4>
+                  <div>
+                    <h3 className="font-semibold text-lg">{action.title}</h3>
+                    <p className="text-sm text-gray-600 mt-1">{action.description}</p>
                   </div>
-                  <p className="text-sm text-muted-foreground pl-8">
-                    Select and load a model that fits your hardware and requirements.
-                  </p>
-                </div>
-                
-                <div className="space-y-2">
-                  <div className="flex items-center gap-2">
-                    <div className="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center text-sm font-medium">
-                      3
-                    </div>
-                    <h4 className="font-medium">Start Chatting</h4>
-                  </div>
-                  <p className="text-sm text-muted-foreground pl-8">
-                    Go to the playground and start experimenting with prompts.
-                  </p>
-                </div>
-              </div>
-              
-              <div className="pt-4 border-t">
-                <Link to="/playground">
-                  <Button className="w-full md:w-auto">
-                    <MessageSquare className="h-4 w-4 mr-2" />
-                    Open Playground
-                  </Button>
-                </Link>
-              </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </section>
+
+        {/* System Status */}
+        <section className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <Card>
+            <CardContent className="p-6 text-center">
+              <div className="text-3xl font-bold text-blue-600 mb-2">{stats.models}</div>
+              <div className="text-sm text-gray-600">Available Models</div>
             </CardContent>
           </Card>
-
-          {/* Status */}
+          
           <Card>
-            <CardHeader>
-              <CardTitle>System Status</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                <div className="flex items-center justify-between">
-                  <span className="text-sm">Backend Status</span>
-                  <span className="inline-flex items-center gap-1 text-sm text-green-600">
-                    <div className="w-2 h-2 bg-green-600 rounded-full"></div>
-                    Online
-                  </span>
-                </div>
-                
-                <div className="flex items-center justify-between">
-                  <span className="text-sm">Models Loaded</span>
-                  <span className="text-sm font-medium">Ready</span>
-                </div>
-                
-                <div className="flex items-center justify-between">
-                  <span className="text-sm">Memory Usage</span>
-                  <span className="text-sm font-medium">Optimized</span>
-                </div>
-              </div>
-              
-              <div className="pt-4 border-t">
-                <Link to="/settings">
-                  <Button variant="outline" className="w-full md:w-auto">
-                    <Cpu className="h-4 w-4 mr-2" />
-                    View Settings
-                  </Button>
-                </Link>
-              </div>
+            <CardContent className="p-6 text-center">
+              <div className="text-3xl font-bold text-purple-600 mb-2">{stats.assistants}</div>
+              <div className="text-sm text-gray-600">My Assistants</div>
             </CardContent>
           </Card>
-        </div>
+          
+          <Card>
+            <CardContent className="p-6 text-center">
+              <div className="text-3xl font-bold text-green-600 mb-2">5</div>
+              <div className="text-sm text-gray-600">Community Templates</div>
+            </CardContent>
+          </Card>
+        </section>
+
+        {/* Core Features */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6 text-center">Core Features</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {features.map((feature) => (
+              <Card key={feature.title} className="text-center">
+                <CardContent className="p-6 space-y-4">
+                  <div className="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mx-auto">
+                    <feature.icon className="h-6 w-6 text-gray-700" />
+                  </div>
+                  <div>
+                    <h3 className="font-semibold">{feature.title}</h3>
+                    <p className="text-sm text-gray-600 mt-1">{feature.description}</p>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </section>
+
+        {/* Get Started */}
+        <section className="text-center bg-gray-50 rounded-2xl p-8">
+          <h2 className="text-2xl font-semibold mb-4">Ready to Get Started?</h2>
+          <p className="text-gray-600 mb-6 max-w-2xl mx-auto">
+            Choose your preferred way to begin. Load models for local processing or start chatting with cloud APIs immediately.
+          </p>
+          <div className="flex items-center justify-center gap-4">
+            <Button onClick={() => window.location.href = '/playground'}>
+              <MessageSquare className="h-4 w-4 mr-2" />
+              Open Playground
+            </Button>
+            <Button variant="outline" onClick={() => window.location.href = '/assistants'}>
+              <Bot className="h-4 w-4 mr-2" />
+              Create Assistant
+            </Button>
+          </div>
+        </section>
       </div>
     </div>
   )
-}
+}