fix ui and add pwa

src/app/page.tsx

@@ -1,13 +1,90 @@
+import { Home as HomeIcon, Settings, Calendar, BarChart3, Leaf } from 'lucide-react'
+import Link from 'next/link'
+
 export default function Home() {
+  const menuItems = [
+    {
+      title: 'انتخاب دستگاه',
+      description: 'اتصال به دستگاه گلخانه',
+      href: '/devices',
+      icon: Settings,
+      color: 'from-blue-500 to-blue-600',
+      iconColor: 'text-blue-500'
+    },
+    {
+      title: 'تقویم',
+      description: 'مشاهده داده‌های ماهانه',
+      href: '/calendar?deviceId=1',
+      icon: Calendar,
+      color: 'from-green-500 to-green-600',
+      iconColor: 'text-green-500'
+    },
+    {
+      title: 'جزئیات روز',
+      description: 'داده‌های روزانه',
+      href: '/day-details?deviceId=1&year=1403&month=1',
+      icon: BarChart3,
+      color: 'from-purple-500 to-purple-600',
+      iconColor: 'text-purple-500'
+    },
+    {
+      title: 'داده‌های تله‌متری',
+      description: 'مشاهده داده‌های لحظه‌ای',
+      href: '/telemetry?deviceId=1',
+      icon: Leaf,
+      color: 'from-orange-500 to-orange-600',
+      iconColor: 'text-orange-500'
+    }
+  ]
+
   return (
-    <main className="p-6">
-      <h1 className="text-2xl mb-4">GreenHome</h1>
-      <ul className="list-disc pl-5 space-y-2">
-        <li><a className="text-green-700 underline" href="/devices">انتخاب دستگاه</a></li>
-        <li><a className="text-green-700 underline" href="/calendar?deviceId=1">Calendar (انتخاب ماه)</a></li>
-        <li><a className="text-green-700 underline" href="/day_details?deviceId=1&year=1403&month=1">Day Details نمونه</a></li>
-        <li><a className="text-green-700 underline" href="/month_select?deviceId=1">Month Select/Telemetry</a></li>
-      </ul>
+    <main className="min-h-screen p-4 md:p-8">
+      <div className="max-w-6xl mx-auto">
+        {/* Header */}
+        <div className="text-center mb-12 mt-8">
+          <div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl shadow-lg mb-4">
+            <HomeIcon className="w-10 h-10 text-white" />
+          </div>
+          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-3">GreenHome</h1>
+          <p className="text-lg text-gray-600">مدیریت هوشمند گلخانه</p>
+        </div>
+
+        {/* Menu Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {menuItems.map((item) => {
+            const Icon = item.icon
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className="group relative bg-white rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100"
+              >
+                <div className="p-6">
+                  <div className="flex items-start gap-4">
+                    <div className={`flex-shrink-0 w-14 h-14 rounded-xl bg-gradient-to-br ${item.color} flex items-center justify-center shadow-md group-hover:scale-110 transition-transform duration-300`}>
+                      <Icon className="w-7 h-7 text-white" />
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-xl font-semibold text-gray-900 mb-1 group-hover:text-green-600 transition-colors">
+                        {item.title}
+                      </h3>
+                      <p className="text-sm text-gray-500">{item.description}</p>
+                    </div>
+                  </div>
+                </div>
+                <div className={`absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r ${item.color} transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300`} />
+              </Link>
+            )
+          })}
+        </div>
+
+        {/* Footer Info */}
+        <div className="mt-12 text-center">
+          <p className="text-sm text-gray-500">
+            سیستم مدیریت و مانیتورینگ گلخانه هوشمند
+          </p>
+        </div>
+      </div>
     </main>
   )
 }