Add Playwright configuration and initial tests for landing page

- Created playwright.config.ts for test configuration
- Added .last-run.json to store test run status
- Implemented landing.test.ts with tests for navbar visibility and navigation
- Removed unused server proxy configuration from vite.config.ts

app/routes/api/alpaca/account.ts

@@ -1,21 +1,42 @@
 import type { AlpacaAccount } from "../../../types";
+import Alpaca from "@alpacahq/alpaca-trade-api";
+
+const alpaca = new Alpaca({
+  keyId: process.env.ALPACA_API_KEY!,
+  secretKey: process.env.ALPACA_SECRET_KEY!,
+  baseUrl: process.env.ALPACA_BASE_URL || "https://paper-api.alpaca.markets",
+  retryOnError: false,
+});
 
-// Mock Alpaca account data – replace with actual API call
 async function fetchAlpacaAccount(): Promise<AlpacaAccount> {
-  return {
-    cash: 12345.67,
-    buying_power: 8000.0,
-    portfolio_value: 25000.0,
-  };
+  try {
+    console.log("Fetching Alpaca account with key:", process.env.ALPACA_API_KEY?.substring(0, 8) + "...");
+    const account = await alpaca.getAccount();
+    console.log("Alpaca account fetched successfully");
+    return {
+      cash: parseFloat(account.cash),
+      buying_power: parseFloat(account.buying_power),
+      portfolio_value: parseFloat(account.portfolio_value),
+    };
+  } catch (error) {
+    console.error("Alpaca API fetch error:", error);
+    return {
+      cash: 0,
+      buying_power: 0,
+      portfolio_value: 0,
+    };
+  }
 }
 
 export async function loader() {
   try {
     const account = await fetchAlpacaAccount();
     return Response.json(account);
-  } catch {
+  } catch (error) {
+    console.error("Alpaca API error:", error);
+    const message = error instanceof Error ? error.message : "Unknown error";
     return Response.json(
-      { error: "Failed to fetch account info" },
+      { error: `Failed to fetch account info: ${message}` },
       { status: 500 }
     );
   }

app/routes/home.tsx

@@ -1,21 +0,0 @@
-import type { Route } from "./+types/home";
-import { Welcome } from "../welcome/welcome";
-import AlpacaAccountInfo from "../components/AlpacaAccountInfo";
-
-export function meta({}: Route.MetaArgs) {
-  return [
-    { title: "New React Router App" },
-    { name: "description", content: "Welcome to React Router!" },
-  ];
-}
-
-export default function Home() {
-  return (
-    <>
-      <Welcome />
-      <div className="container mx-auto p-4 max-w-2xl">
-        <AlpacaAccountInfo />
-      </div>
-    </>
-  );
-}

app/routes/landing.tsx

@@ -0,0 +1,29 @@
+import { Link } from "react-router";
+import Navbar from "../components/Navbar";
+import AlpacaAccountInfo from "../components/AlpacaAccountInfo";
+
+export default function Landing() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
+      <Navbar />
+      {/* Hero Section */}
+      <section className="py-20">
+        <div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-8">
+          <div className="text-center mb-12">
+            <h1 className="text-4xl font-bold text-gray-900 mb-4">
+              Welcome to AITrader
+            </h1>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              Your AI-powered trading dashboard with real-time market insights and portfolio management.
+            </p>
+          </div>
+          
+          {/* Account Info Card */}
+          <div className="max-w-md mx-auto">
+            <AlpacaAccountInfo />
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

app/routes/stocks.tsx

@@ -1,9 +1,23 @@
 import StockViewer from "../components/StockViewer";
+import Navbar from "../components/Navbar";
 
 export default function Stocks() {
   return (
-    <main className="flex items-start justify-center pt-8 pb-4">
-      <StockViewer />
-    </main>
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
+      <Navbar />
+      <div className="py-20">
+        <div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-8">
+          <div className="text-center mb-12">
+            <h1 className="text-4xl font-bold text-gray-900 mb-4">
+              Stock Indicators
+            </h1>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              Analyze technical indicators for any stock symbol.
+            </p>
+          </div>
+          <StockViewer />
+        </div>
+      </div>
+    </div>
   );
 }