Create new Flutter app

The prompt requests the creation of a new app with a neumorphic design, similar to a household account book, using Flutter.

src/pages/Index.tsx

@@ -1,12 +1,111 @@
-// Update this page (the content is just a fallback if you fail to update the page)
+
+import React from 'react';
+import NavBar from '@/components/NavBar';
+import BudgetCard from '@/components/BudgetCard';
+import TransactionCard, { Transaction } from '@/components/TransactionCard';
+import AddTransactionButton from '@/components/AddTransactionButton';
+import { Wallet, TrendingUp, Bell } from 'lucide-react';
 
 const Index = () => {
+  // Sample data - in a real app, this would come from a data source
+  const transactions: Transaction[] = [
+    { 
+      id: '1', 
+      title: '식료품 구매', 
+      amount: 25000, 
+      date: '오늘, 12:30 PM', 
+      category: 'shopping',
+      type: 'expense' 
+    },
+    { 
+      id: '2', 
+      title: '주유소', 
+      amount: 50000, 
+      date: '어제, 3:45 PM', 
+      category: 'transportation',
+      type: 'expense' 
+    },
+    { 
+      id: '3', 
+      title: '월급', 
+      amount: 2500000, 
+      date: '2일전, 9:00 AM', 
+      category: 'income',
+      type: 'income' 
+    },
+  ];
+
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
-        <p className="text-xl text-gray-600">Start building your amazing project here!</p>
+    <div className="min-h-screen bg-neuro-background pb-24">
+      <div className="max-w-md mx-auto px-6">
+        {/* Header */}
+        <header className="py-8">
+          <div className="flex justify-between items-center">
+            <div>
+              <h1 className="text-2xl font-bold neuro-text">반갑습니다</h1>
+              <p className="text-gray-500">오늘의 재정 현황</p>
+            </div>
+            <button className="neuro-flat p-2.5 rounded-full">
+              <Bell size={20} className="text-gray-600" />
+            </button>
+          </div>
+        </header>
+
+        {/* Balance Card */}
+        <div className="neuro-card mb-6 overflow-hidden">
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-2">
+              <Wallet className="text-neuro-accent" size={20} />
+              <h2 className="font-semibold">총 잔액</h2>
+            </div>
+            <TrendingUp className="text-neuro-income" size={20} />
+          </div>
+          
+          <p className="text-3xl font-bold tracking-tight mb-1">
+            ₩2,580,000
+          </p>
+          <p className="text-neuro-income text-sm font-medium">
+            지난 달보다 12% 증가
+          </p>
+        </div>
+
+        {/* Budget Progress */}
+        <h2 className="text-lg font-semibold mb-3 mt-8">예산 현황</h2>
+        <div className="grid gap-4 mb-8">
+          <BudgetCard
+            title="이번 달 총 예산"
+            current={850000}
+            total={1500000}
+          />
+          <BudgetCard
+            title="식비"
+            current={240000}
+            total={400000}
+            color="neuro-accent-light"
+          />
+          <BudgetCard
+            title="교통비"
+            current={190000}
+            total={200000}
+            color="neuro-expense"
+          />
+        </div>
+
+        {/* Recent Transactions */}
+        <h2 className="text-lg font-semibold mb-3">최근 거래</h2>
+        <div className="grid gap-3 mb-6">
+          {transactions.map(transaction => (
+            <TransactionCard key={transaction.id} transaction={transaction} />
+          ))}
+        </div>
+        
+        <div className="flex justify-center mb-6">
+          <button className="text-neuro-accent font-medium">모든 거래 보기</button>
+        </div>
       </div>
+
+      <AddTransactionButton />
+      <NavBar />
     </div>
   );
 };