Market UI (simple layout)

src/app/globals.css

@@ -48,6 +48,9 @@
   --radius-2xl: calc(var(--radius) + 8px);
   --radius-3xl: calc(var(--radius) + 12px);
   --radius-4xl: calc(var(--radius) + 16px);
+
+  --color-bullish: var(--bullish);
+  --color-bearish: var(--bearish);
 }
 
 :root {
@@ -106,6 +109,12 @@
 
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.6 0.12 285);
+  
+  /* Bullish - vibrant SOL mint */
+  --bullish: oklch(0.72 0.18 165);
+  
+  /* Bearish - destructive/coral red */
+  --bearish: oklch(0.62 0.2 30);
 }
 
 @layer base {

src/app/market/components/MarketSidebar.tsx

@@ -0,0 +1,25 @@
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export default function MarketSidebar() {
+  return (
+    <div className="h-full w-sm px-3 flex flex-col">
+      <div className="flex h-16"></div>
+      <Tabs defaultValue="buy">
+        <TabsList className="w-full">
+          <TabsTrigger
+            value="buy"
+            className="bg-bullish/30 data-[state=active]:bg-bullish data-[state=active]:text-accent-foreground"
+          >
+            Buy
+          </TabsTrigger>
+          <TabsTrigger
+            value="sell"
+            className="bg-bearish/30 data-[state=active]:bg-bearish data-[state=active]:text-accent-foreground"
+          >
+            Sell
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </div>
+  );
+}

src/app/market/page.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import Navbar from "@/components/layout/Navbar";
+import Statusbar from "@/components/layout/Statusbar";
+import MarketSidebar from "./components/MarketSidebar";
+
+export default function Market() {
+  return (
+    <main className="w-full h-full">
+      <Navbar />
+      <section className="w-full h-full flex flex-row">
+        <div className="w-full h-svh border-r border-border"></div>
+        <MarketSidebar />
+      </section>
+      {/* <Statusbar /> */}
+    </main>
+  );
+}