[V0_FILE]sql:file="scripts/001_create_database_schema.sql" isMerged="true" -- Enable UUID extension CREATE EXTENSION IF NOT EXISTS "uuid-ossp"; -- Create profiles table for user company information CREATE TABLE IF NOT EXISTS public.profiles ( id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE, email TEXT NOT NULL, display_name TEXT NOT NULL, company_name TEXT NOT NULL UNIQUE, ticker_symbol TEXT NOT NULL UNIQUE, bio TEXT, industry TEXT, founded_date TIMESTAMP WITH TIME ZONE DEFAULT NOW(), avatar_url TEXT, banner_url TEXT, website TEXT, is_listed BOOLEAN DEFAULT false, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Create shares table to track issued shares CREATE TABLE IF NOT EXISTS public.shares ( id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), profile_id UUID NOT NULL REFERENCES public.profiles(id) ON DELETE CASCADE, total_shares BIGINT NOT NULL DEFAULT 1000000, available_shares BIGINT NOT NULL DEFAULT 1000000, share_price DECIMAL(10, 2) NOT NULL DEFAULT 10.00, market_cap DECIMAL(15, 2) GENERATED ALWAYS AS (total_shares * share_price) STORED, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), UNIQUE(profile_id) ); -- Create portfolios table to track user investments CREATE TABLE IF NOT EXISTS public.portfolios ( id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), user_id UUID NOT NULL REFERENCES public.profiles(id) ON DELETE CASCADE, company_id UUID NOT NULL REFERENCES public.profiles(id) ON DELETE CASCADE, shares_owned BIGINT NOT NULL DEFAULT 0, average_buy_price DECIMAL(10, 2) NOT NULL, total_invested DECIMAL(15, 2) NOT NULL DEFAULT 0, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), UNIQUE(user_id, company_id) ); -- Create transactions table for trade history CREATE TABLE IF NOT EXISTS public.transactions ( id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), buyer_id UUID NOT NULL REFERENCES public.profiles(id) ON DELETE CASCADE, seller_id UUID NOT NULL REFERENCES public.profiles(id) ON DELETE CASCADE, company_id UUID NOT NULL REFERENCES public.profiles(id) ON DELETE CASCADE, shares INTEGER NOT NULL, price_per_share DECIMAL(10, 2) NOT NULL, total_amount DECIMAL(15, 2) NOT NULL, transaction_type TEXT NOT NULL CHECK (transaction_type IN ('buy', 'sell', 'ipo')), status TEXT NOT NULL DEFAULT 'pending' CHECK (status IN ('pending', 'completed', 'failed', 'cancelled')), stripe_payment_intent_id TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Create wallet table for user balances CREATE TABLE IF NOT EXISTS public.wallets ( id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), user_id UUID NOT NULL REFERENCES public.profiles(id) ON DELETE CASCADE, balance DECIMAL(15, 2) NOT NULL DEFAULT 0, total_deposited DECIMAL(15, 2) NOT NULL DEFAULT 0, total_withdrawn DECIMAL(15, 2) NOT NULL DEFAULT 0, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), UNIQUE(user_id) ); -- Create price history table for charting CREATE TABLE IF NOT EXISTS public.price_history ( id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), company_id UUID NOT NULL REFERENCES public.profiles(id) ON DELETE CASCADE, price DECIMAL(10, 2) NOT NULL, volume INTEGER NOT NULL DEFAULT 0, recorded_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Create index for faster queries CREATE INDEX IF NOT EXISTS idx_profiles_ticker ON public.profiles(ticker_symbol); CREATE INDEX IF NOT EXISTS idx_profiles_listed ON public.profiles(is_listed); CREATE INDEX IF NOT EXISTS idx_transactions_buyer ON public.transactions(buyer_id); CREATE INDEX IF NOT EXISTS idx_transactions_seller ON public.transactions(seller_id); CREATE INDEX IF NOT EXISTS idx_transactions_company ON public.transactions(company_id); CREATE INDEX IF NOT EXISTS idx_portfolios_user ON public.portfolios(user_id); CREATE INDEX IF NOT EXISTS idx_portfolios_company ON public.portfolios(company_id); CREATE INDEX IF NOT EXISTS idx_price_history_company ON public.price_history(company_id); CREATE INDEX IF NOT EXISTS idx_price_history_time ON public.price_history(recorded_at); -- Enable Row Level Security ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY; ALTER TABLE public.shares ENABLE ROW LEVEL SECURITY; ALTER TABLE public.portfolios ENABLE ROW LEVEL SECURITY; ALTER TABLE public.transactions ENABLE ROW LEVEL SECURITY; ALTER TABLE public.wallets ENABLE ROW LEVEL SECURITY; ALTER TABLE public.price_history ENABLE ROW LEVEL SECURITY; -- RLS Policies for profiles CREATE POLICY "Profiles are viewable by everyone" ON public.profiles FOR SELECT USING (true); CREATE POLICY "Users can insert their own profile" ON public.profiles FOR INSERT WITH CHECK (auth.uid() = id); CREATE POLICY "Users can update their own profile" ON public.profiles FOR UPDATE USING (auth.uid() = id); -- RLS Policies for shares CREATE POLICY "Shares are viewable by everyone" ON public.shares FOR SELECT USING (true); CREATE POLICY "Users can create shares for their profile" ON public.shares FOR INSERT WITH CHECK (auth.uid() = profile_id); CREATE POLICY "Users can update their own shares" ON public.shares FOR UPDATE USING (auth.uid() = profile_id); -- RLS Policies for portfolios CREATE POLICY "Users can view their own portfolios" ON public.portfolios FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert their own portfolio entries" ON public.portfolios FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update their own portfolio entries" ON public.portfolios FOR UPDATE USING (auth.uid() = user_id); -- RLS Policies for transactions CREATE POLICY "Users can view their own transactions" ON public.transactions FOR SELECT USING (auth.uid() = buyer_id OR auth.uid() = seller_id OR auth.uid() = company_id); CREATE POLICY "Users can create transactions as buyer" ON public.transactions FOR INSERT WITH CHECK (auth.uid() = buyer_id); -- RLS Policies for wallets CREATE POLICY "Users can view their own wallet" ON public.wallets FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can create their own wallet" ON public.wallets FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update their own wallet" ON public.wallets FOR UPDATE USING (auth.uid() = user_id); -- RLS Policies for price_history CREATE POLICY "Price history is viewable by everyone" ON public.price_history FOR SELECT USING (true); -- Create trigger to automatically create profile, shares, and wallet on user signup CREATE OR REPLACE FUNCTION public.handle_new_user() RETURNS TRIGGER LANGUAGE plpgsql SECURITY DEFINER SET search_path = public AS $$ BEGIN -- Insert into profiles INSERT INTO public.profiles (id, email, display_name, company_name, ticker_symbol) VALUES ( new.id, new.email, COALESCE(new.raw_user_meta_data->>'display_name', split_part(new.email, '@', 1)), COALESCE(new.raw_user_meta_data->>'company_name', split_part(new.email, '@', 1) || ' Inc'), UPPER(COALESCE(new.raw_user_meta_data->>'ticker_symbol', LEFT(split_part(new.email, '@', 1), 4))) ); -- Insert into shares INSERT INTO public.shares (profile_id) VALUES (new.id); -- Insert into wallets with starting balance INSERT INTO public.wallets (user_id, balance, total_deposited) VALUES (new.id, 10000.00, 10000.00); RETURN new; END; $$; -- Create trigger DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users; CREATE TRIGGER on_auth_user_created AFTER INSERT ON auth.users FOR EACH ROW EXECUTE FUNCTION public.handle_new_user(); -- Create function to update profile updated_at timestamp CREATE OR REPLACE FUNCTION public.handle_updated_at() RETURNS TRIGGER LANGUAGE plpgsql AS $$ BEGIN NEW.updated_at = NOW(); RETURN NEW; END; $$; -- Create triggers for updated_at CREATE TRIGGER profiles_updated_at BEFORE UPDATE ON public.profiles FOR EACH ROW EXECUTE FUNCTION public.handle_updated_at(); CREATE TRIGGER shares_updated_at BEFORE UPDATE ON public.shares FOR EACH ROW EXECUTE FUNCTION public.handle_updated_at(); CREATE TRIGGER portfolios_updated_at BEFORE UPDATE ON public.portfolios FOR EACH ROW EXECUTE FUNCTION public.handle_updated_at(); CREATE TRIGGER wallets_updated_at BEFORE UPDATE ON public.wallets FOR EACH ROW EXECUTE FUNCTION public.handle_updated_at(); [V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export async function createClient() { const cookieStore = await cookies() return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // The "setAll" method was called from a Server Component. // This can be ignored if you have proxy refreshing // user sessions. } }, }, }) } [V0_FILE]typescript:file="lib/supabase/proxy.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { NextResponse, type NextRequest } from "next/server" export async function updateSession(request: NextRequest) { // Skip session refresh for auth pages to avoid "Load failed" errors // when Supabase auth endpoints are not yet reachable during SSR if (request.nextUrl.pathname.startsWith("/auth")) { return NextResponse.next({ request }) } let supabaseResponse = NextResponse.next({ request, }) const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return request.cookies.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value)) supabaseResponse = NextResponse.next({ request, }) cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options)) }, }, }, ) const { data: { user }, } = await supabase.auth.getUser() // Protect /dashboard, /trade, and /portfolio routes if ( (request.nextUrl.pathname.startsWith("/dashboard") || request.nextUrl.pathname.startsWith("/trade") || request.nextUrl.pathname.startsWith("/portfolio") || request.nextUrl.pathname.startsWith("/wallet")) && !user ) { const url = request.nextUrl.clone() url.pathname = "/auth/login" return NextResponse.redirect(url) } return supabaseResponse } [V0_FILE]typescript:file="proxy.ts" isMerged="true" import { updateSession } from "@/lib/supabase/proxy" import type { NextRequest } from "next/server" export async function middleware(request: NextRequest) { return await updateSession(request) } export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"], } [V0_FILE]typescript:file="lib/types.ts" isMerged="true" export interface Profile { id: string email: string display_name: string company_name: string ticker_symbol: string bio: string | null industry: string | null founded_date: string avatar_url: string | null banner_url: string | null website: string | null is_listed: boolean created_at: string updated_at: string } export interface Share { id: string profile_id: string total_shares: number available_shares: number share_price: number market_cap: number created_at: string updated_at: string } export interface Portfolio { id: string user_id: string company_id: string shares_owned: number average_buy_price: number total_invested: number created_at: string updated_at: string } export interface Transaction { id: string buyer_id: string seller_id: string company_id: string shares: number price_per_share: number total_amount: number transaction_type: "buy" | "sell" | "ipo" status: "pending" | "completed" | "failed" | "cancelled" stripe_payment_intent_id: string | null created_at: string } export interface Wallet { id: string user_id: string balance: number total_deposited: number total_withdrawn: number created_at: string updated_at: string } export interface PriceHistory { id: string company_id: string price: number volume: number recorded_at: string } export interface CompanyWithShares extends Profile { shares: Share } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "@supabase/ssr": "0.8.0", "server-only": "0.0.1", "stripe": "20.1.0", "@stripe/react-stripe-js": "5.4.1", "@stripe/stripe-js": "8.6.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/auth/error/page.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import Link from "next/link" import { AlertCircle } from "lucide-react" export default async function ErrorPage({ searchParams }: { searchParams: Promise<{ error: string }> }) { const params = await searchParams return (

Authentication Error {params?.error ? (

Error: {params.error}

) : (

An unexpected error occurred during authentication.

)}

) } [V0_FILE]typescriptreact:file="app/market/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/profile/[id]/page.tsx" isMerged="true" import { createClient } from "@/lib/supabase/server" import { notFound } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { TrendingUp, TrendingDown, Calendar, Globe, Building } from "lucide-react" import Link from "next/link" import type { CompanyWithShares } from "@/lib/types" export default async function ProfilePage({ params }: { params: Promise<{ id: string }> }) { const { id } = await params const supabase = await createClient() const { data: company } = await supabase .from("profiles") .select( ` *, shares (*) `, ) .eq("id", id) .single() if (!company) { notFound() } const companyWithShares = company as unknown as CompanyWithShares const priceChange = 5.2 const isPositive = priceChange > 0 return (

{/* Header */}

{companyWithShares.ticker_symbol[0]}

{companyWithShares.company_name}

{companyWithShares.ticker_symbol}

{companyWithShares.display_name}

{companyWithShares.industry && (

{companyWithShares.industry}

)} {companyWithShares.website && (

Website

)}

Founded {new Date(companyWithShares.founded_date).toLocaleDateString()}

{/* Price Info */}

Share Price

${companyWithShares.shares.share_price}

{isPositive ? : } {isPositive ? "+" : ""} {priceChange}%

Market Cap

${(companyWithShares.shares.market_cap / 1000000).toFixed(2)}M

Total Shares

{companyWithShares.shares.total_shares.toLocaleString()}

Available

{companyWithShares.shares.available_shares.toLocaleString()}

{/* Action Buttons */}

{/* About Section */} {companyWithShares.bio && ( About

{companyWithShares.bio}

)}

) } [V0_FILE]typescriptreact:file="app/trade/[ticker]/page.tsx" isMerged="true" import { createClient } from "@/lib/supabase/server" import { notFound, redirect } from "next/navigation" import { TradingInterface } from "@/components/trading-interface" import type { CompanyWithShares } from "@/lib/types" export default async function TradePage({ params }: { params: Promise<{ ticker: string }> }) { const { ticker } = await params const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } const { data: company } = await supabase .from("profiles") .select(`*, shares (*)`) .eq("ticker_symbol", ticker.toUpperCase()) .single() if (!company) { notFound() } const [{ data: wallet }, { data: gaugeScore }, { data: priceHistory }] = await Promise.all([ supabase.from("wallets").select("*").eq("user_id", user.id).single(), supabase.from("gauge_scores").select("*").eq("user_id", company.id).single(), supabase .from("price_history") .select("price, recorded_at") .eq("company_id", company.id) .order("recorded_at", { ascending: true }) .limit(60), ]) const companyWithShares = company as unknown as CompanyWithShares return (

) } [V0_FILE]typescriptreact:file="components/trading-interface.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Slider } from "@/components/ui/slider" import { GaugeScore, MiniGauge } from "@/components/gauge-score" import { TrendingUp, TrendingDown, AlertCircle, Loader2, ArrowUp, ArrowDown, BarChart3, Users, Zap, Shield, Wallet, Activity, Clock, Target, } from "lucide-react" import { executeTrade } from "@/app/actions/trading" import { useRouter } from "next/navigation" import type { CompanyWithShares } from "@/lib/types" import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts" interface TradingInterfaceProps { company: CompanyWithShares walletBalance: number userId: string gaugeScore?: { overall_score: number skills_score: number experience_score: number education_score: number network_score: number ambition_score: number } | null priceHistory?: { price: number; recorded_at: string }[] } const mockChartData = Array.from({ length: 30 }, (_, i) => { const base = 15 const noise = Math.sin(i * 0.5) * 3 + Math.random() * 2 return { day: `Day ${i + 1}`, price: Math.round((base + noise + i * 0.2) * 100) / 100, } }) type TradeMode = "long" | "short" type OrderType = "market" | "limit" export function TradingInterface({ company, walletBalance, userId, gaugeScore, priceHistory, }: TradingInterfaceProps) { const [shares, setShares] = useState(1) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const [success, setSuccess] = useState(false) const [tradeMode, setTradeMode] = useState("long") const [orderType, setOrderType] = useState("market") const [limitPrice, setLimitPrice] = useState("") const router = useRouter() const price = Number(company.shares.share_price) const effectivePrice = orderType === "limit" && limitPrice ? Number(limitPrice) : price const totalCost = shares * effectivePrice const canAfford = totalCost <= walletBalance const sharesAvailable = shares <= company.shares.available_shares const maxAffordable = Math.min( Math.floor(walletBalance / effectivePrice), company.shares.available_shares ) const chartData = priceHistory && priceHistory.length > 1 ? priceHistory.map((p) => ({ day: new Date(p.recorded_at).toLocaleDateString("en-US", { month: "short", day: "numeric" }), price: Number(p.price), })) : mockChartData const priceChange = chartData.length >= 2 ? chartData[chartData.length - 1].price - chartData[chartData.length - 2].price : 0 const priceChangePct = chartData.length >= 2 ? ((priceChange / chartData[chartData.length - 2].price) * 100) : 0 const gaugeMaxPrice = gaugeScore ? Math.round((5 + (gaugeScore.overall_score / 100) * 95) * 100) / 100 : null /* Short sell margin requirement (150% of position value) */ const shortMarginReq = tradeMode === "short" ? totalCost * 1.5 : 0 const canAffordShort = shortMarginReq <= walletBalance async function handleTrade() { const affordable = tradeMode === "long" ? canAfford : canAffordShort if (!affordable || !sharesAvailable || shares <= 0) return setIsLoading(true) setError(null) setSuccess(false) try { const result = await executeTrade({ companyId: company.id, shares, tradeType: "buy", userId, }) if (result.error) { setError(result.error) } else { setSuccess(true) setTimeout(() => { router.push("/portfolio") router.refresh() }, 1500) } } catch { setError("An unexpected error occurred") } finally { setIsLoading(false) } } return (

{/* Top Bar -- Company Header */}

{company.ticker_symbol[0]}

{company.company_name}

${company.ticker_symbol}

{company.industry || "Technology"} -- {company.bio ? company.bio.slice(0, 60) + "..." : "Human equity asset"}

${price.toFixed(2)} = 0 ? "text-emerald-600" : "text-rose-500"}`}> {priceChange >= 0 ? : } {Math.abs(priceChangePct).toFixed(2)}%

{/* Main Grid */}

{/* Left Column -- Chart + Stats */}

{/* Price Chart */}

Price History

{["1W", "1M", "3M", "ALL"].map((t) => ( ))}

`$${v}`} width={45} /> [`$${v.toFixed(2)}`, "Price"]} />

{/* Market Stats */}

{[ { label: "Market Cap", value: `$${(company.shares.market_cap / 1e6).toFixed(2)}M`, icon: BarChart3, color: "text-cyan-600", bg: "bg-cyan-50" }, { label: "Total Shares", value: company.shares.total_shares.toLocaleString(), icon: Users, color: "text-purple-600", bg: "bg-purple-50" }, { label: "Available", value: company.shares.available_shares.toLocaleString(), icon: Shield, color: "text-emerald-600", bg: "bg-emerald-50" }, { label: "GAUGE Cap", value: gaugeMaxPrice ? `$${gaugeMaxPrice}` : "N/A", icon: Zap, color: "text-pink-600", bg: "bg-pink-50" }, ].map((s, i) => (

{s.value}

{s.label}

))}

{/* GAUGE Breakdown */} {gaugeScore && (

GAUGE Assessment

{[ { label: "Skills", score: Math.round(gaugeScore.skills_score) }, { label: "Exp", score: Math.round(gaugeScore.experience_score) }, { label: "Edu", score: Math.round(gaugeScore.education_score) }, { label: "Net", score: Math.round(gaugeScore.network_score) }, { label: "Amb", score: Math.round(gaugeScore.ambition_score) }, ].map((d) => (

{d.label}

))}

Max listing price capped at ${gaugeMaxPrice} (100% of GAUGE value). Current price is {gaugeMaxPrice ? `${Math.round((price / gaugeMaxPrice) * 100)}%` : "N/A"} of cap.

)}

{/* Right Column -- Trading Panel */}

{/* Trade Mode Toggle */}

{/* Short sell info */} {tradeMode === "short" && (

Short Selling

You are betting the price will decrease. A 150% margin is required. Profit if price drops, loss if it rises. Max loss is unlimited.

)} {/* Order Type */}

Order Type

{/* Limit Price Input */} {orderType === "limit" && (

Limit Price ($) setLimitPrice(e.target.value)} className="border-border text-sm font-medium text-foreground" />

)} {/* Share Count */}

Number of Shares setShares(Math.max(1, Number(e.target.value)))} className="border-border text-lg font-bold text-foreground" /> setShares(v)} min={1} max={Math.max(1, maxAffordable)} step={1} className="py-2" />

1 share {maxAffordable.toLocaleString()} max

{/* Quick amounts */}

{[10, 50, 100, 500].map((n) => ( ))}

{/* Cost Breakdown */}

Price per share ${effectivePrice.toFixed(2)}

Quantity {shares.toLocaleString()}

{tradeMode === "short" && (

Margin (150%) ${shortMarginReq.toFixed(2)}

)}

{tradeMode === "long" ? "Total Cost" : "Margin Required"} ${tradeMode === "long" ? totalCost.toFixed(2) : shortMarginReq.toFixed(2)}

{/* Wallet */}

Available Balance

${walletBalance.toFixed(2)}

After trade: ${Math.max(0, walletBalance - (tradeMode === "long" ? totalCost : shortMarginReq)).toFixed(2)}

{/* Trade Mode Info */} {tradeMode === "long" && (

Long Position

You own the shares outright. Profit when the price increases. Hold as long as you want with no margin requirements.

)} {/* Errors / Warnings */} {error && (

{error}

)} {tradeMode === "long" && !canAfford && shares > 0 && !error && (

Insufficient funds. Add money to your wallet first.

)} {tradeMode === "short" && !canAffordShort && shares > 0 && !error && (

Insufficient margin. You need ${shortMarginReq.toFixed(2)} (150% of position).

)} {success && (

Trade executed! Redirecting to portfolio...

)} {/* Execute Button */}

) } [V0_FILE]typescript:file="app/actions/trading.ts" isMerged="true" "use server" import { createClient } from "@/lib/supabase/server" import { revalidatePath } from "next/cache" interface TradeParams { companyId: string shares: number tradeType: "buy" | "sell" userId: string } export async function executeTrade({ companyId, shares, tradeType, userId }: TradeParams) { const supabase = await createClient() try { // Get company shares info const { data: companyShares, error: sharesError } = await supabase .from("shares") .select("*") .eq("profile_id", companyId) .single() if (sharesError || !companyShares) { return { error: "Company not found" } } // Get user wallet const { data: wallet, error: walletError } = await supabase .from("wallets") .select("*") .eq("user_id", userId) .single() if (walletError || !wallet) { return { error: "Wallet not found" } } const totalCost = shares * Number(companyShares.share_price) if (tradeType === "buy") { // Check if user has enough balance if (wallet.balance < totalCost) { return { error: "Insufficient funds" } } // Check if enough shares available if (companyShares.available_shares < shares) { return { error: "Not enough shares available" } } // Deduct from wallet const { error: walletUpdateError } = await supabase .from("wallets") .update({ balance: wallet.balance - totalCost }) .eq("user_id", userId) if (walletUpdateError) { return { error: "Failed to update wallet" } } // Update shares availability const { error: sharesUpdateError } = await supabase .from("shares") .update({ available_shares: companyShares.available_shares - shares }) .eq("profile_id", companyId) if (sharesUpdateError) { // Rollback wallet update await supabase.from("wallets").update({ balance: wallet.balance }).eq("user_id", userId) return { error: "Failed to update shares" } } // Check if portfolio entry exists const { data: existingPortfolio } = await supabase .from("portfolios") .select("*") .eq("user_id", userId) .eq("company_id", companyId) .single() if (existingPortfolio) { // Update existing portfolio const newSharesOwned = existingPortfolio.shares_owned + shares const newTotalInvested = existingPortfolio.total_invested + totalCost const newAverageBuyPrice = newTotalInvested / newSharesOwned const { error: portfolioUpdateError } = await supabase .from("portfolios") .update({ shares_owned: newSharesOwned, total_invested: newTotalInvested, average_buy_price: newAverageBuyPrice, }) .eq("user_id", userId) .eq("company_id", companyId) if (portfolioUpdateError) { return { error: "Failed to update portfolio" } } } else { // Create new portfolio entry const { error: portfolioInsertError } = await supabase.from("portfolios").insert({ user_id: userId, company_id: companyId, shares_owned: shares, total_invested: totalCost, average_buy_price: Number(companyShares.share_price), }) if (portfolioInsertError) { return { error: "Failed to create portfolio entry" } } } // Record transaction await supabase.from("transactions").insert({ buyer_id: userId, seller_id: companyId, company_id: companyId, shares, price_per_share: Number(companyShares.share_price), total_amount: totalCost, transaction_type: "buy", status: "completed", }) revalidatePath("/portfolio") revalidatePath("/dashboard") revalidatePath(`/trade/${companyShares.profile_id}`) return { success: true } } return { error: "Invalid trade type" } } catch (error) { console.error("[v0] Trade execution error:", error) return { error: "An unexpected error occurred" } } } [V0_FILE]typescriptreact:file="components/portfolio-table.tsx" isMerged="true" "use client" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { TrendingUp, TrendingDown } from "lucide-react" import Link from "next/link" interface Holding { company: { id: string company_name: string ticker_symbol: string shares: Array<{ share_price: number }> } shares_owned: number average_buy_price: number total_invested: number currentValue: number gain: number gainPercentage: number } interface PortfolioTableProps { holdings: Holding[] } export function PortfolioTable({ holdings }: PortfolioTableProps) { return (

Company Shares Avg. Price Current Price Total Value Gain/Loss Actions {holdings.map((holding) => (

{holding.company.ticker_symbol[0]}

{holding.company.company_name}

{holding.company.ticker_symbol}

{holding.shares_owned.toLocaleString()} ${holding.average_buy_price.toFixed(2)} ${holding.company.shares[0].share_price} ${holding.currentValue.toFixed(2)}

= 0 ? "text-green-400" : "text-red-400"}`}> {holding.gain >= 0 ? : }

{holding.gain >= 0 ? "+" : ""}${Math.abs(holding.gain).toFixed(2)}

{holding.gain >= 0 ? "+" : ""} {holding.gainPercentage.toFixed(2)}%

))}

) } [V0_FILE]typescript:file="lib/stripe.ts" isMerged="true" import "server-only" import Stripe from "stripe" export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!) [V0_FILE]typescript:file="app/actions/stripe.ts" isMerged="true" "use server" import { stripe } from "@/lib/stripe" export async function createDepositSession(amount: number, userId: string) { try { const session = await stripe.checkout.sessions.create({ ui_mode: "embedded", redirect_on_completion: "never", line_items: [ { price_data: { currency: "usd", product_data: { name: "Wallet Deposit", description: "Add funds to your trading wallet", }, unit_amount: Math.round(amount * 100), }, quantity: 1, }, ], mode: "payment", metadata: { userId, type: "wallet_deposit", }, }) return { clientSecret: session.client_secret } } catch (error) { console.error("[v0] Stripe session creation error:", error) return { error: "Failed to create payment session" } } } export async function createWithdrawalSession(amount: number, userId: string) { try { // In a real app, you'd create a payout to the user's connected account // For now, we'll just handle this as a withdrawal request return { success: true } } catch (error) { console.error("[v0] Withdrawal error:", error) return { error: "Failed to process withdrawal" } } } [V0_FILE]typescriptreact:file="components/deposit-form.tsx" isMerged="true" "use client" import { useState, useCallback } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { createDepositSession } from "@/app/actions/stripe" import { EmbeddedCheckout, EmbeddedCheckoutProvider } from "@stripe/react-stripe-js" import { loadStripe } from "@stripe/stripe-js" import { AlertCircle, CheckCircle } from "lucide-react" const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!) interface DepositFormProps { userId: string } export function DepositForm({ userId }: DepositFormProps) { const [amount, setAmount] = useState("100") const [clientSecret, setClientSecret] = useState(null) const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const presetAmounts = [50, 100, 250, 500, 1000] const startDeposit = async () => { const depositAmount = Number.parseFloat(amount) if (isNaN(depositAmount) || depositAmount < 10) { setError("Minimum deposit is $10") return } if (depositAmount > 10000) { setError("Maximum deposit is $10,000") return } setIsLoading(true) setError(null) const result = await createDepositSession(depositAmount, userId) if (result.error) { setError(result.error) setIsLoading(false) } else if (result.clientSecret) { setClientSecret(result.clientSecret) setIsLoading(false) } } const fetchClientSecret = useCallback(async () => { if (clientSecret) return clientSecret return "" }, [clientSecret]) if (clientSecret) { return (

Test Mode

Use card number 4242 4242 4242 4242 with any future date and CVC to test deposits.

) } return (

Deposit Amount (USD) setAmount(e.target.value)} className="bg-slate-800/50 border-slate-700 text-white" />

Minimum $10, Maximum $10,000

{presetAmounts.map((preset) => ( ))}

{error && (

{error}

)}

Deposit Amount ${Number.parseFloat(amount || "0").toFixed(2)}

Processing Fee $0.00

Total ${Number.parseFloat(amount || "0").toFixed(2)}

Secure payment powered by Stripe. Your funds will be available immediately.

) } [V0_FILE]typescriptreact:file="app/api/webhooks/stripe/route.ts" isMerged="true" import { NextResponse } from "next/server" import { stripe } from "@/lib/stripe" import { createClient } from "@/lib/supabase/server" import type Stripe from "stripe" export async function POST(request: Request) { const body = await request.text() const signature = request.headers.get("stripe-signature") if (!signature) { return NextResponse.json({ error: "No signature" }, { status: 400 }) } let event: Stripe.Event try { event = stripe.webhooks.constructEvent(body, signature, process.env.STRIPE_WEBHOOK_SECRET!) } catch (err) { console.error("[v0] Webhook signature verification failed:", err) return NextResponse.json({ error: "Invalid signature" }, { status: 400 }) } if (event.type === "checkout.session.completed") { const session = event.data.object as Stripe.Checkout.Session const userId = session.metadata?.userId const type = session.metadata?.type if (type === "wallet_deposit" && userId) { const supabase = await createClient() const amount = (session.amount_total || 0) / 100 const { data: wallet } = await supabase.from("wallets").select("*").eq("user_id", userId).single() if (wallet) { await supabase .from("wallets") .update({ balance: wallet.balance + amount, total_deposited: wallet.total_deposited + amount, }) .eq("user_id", userId) } } } return NextResponse.json({ received: true }) } [V0_FILE]typescriptreact:file="app/dashboard/edit/page.tsx" isMerged="true" "use client" import type React from "react" import { createClient } from "@/lib/supabase/client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { useRouter } from "next/navigation" import { useState, useEffect } from "react" import { AlertCircle } from "lucide-react" import type { Profile } from "@/lib/types" export default function EditProfilePage() { const [profile, setProfile] = useState(null) const [displayName, setDisplayName] = useState("") const [companyName, setCompanyName] = useState("") const [bio, setBio] = useState("") const [industry, setIndustry] = useState("") const [website, setWebsite] = useState("") const [isListed, setIsListed] = useState(false) const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const [isFetching, setIsFetching] = useState(true) const router = useRouter() const supabase = createClient() useEffect(() => { const fetchProfile = async () => { const { data: { user }, } = await supabase.auth.getUser() if (!user) { router.push("/auth/login") return } const { data } = await supabase.from("profiles").select("*").eq("id", user.id).single() if (data) { setProfile(data as Profile) setDisplayName(data.display_name) setCompanyName(data.company_name) setBio(data.bio || "") setIndustry(data.industry || "") setWebsite(data.website || "") setIsListed(data.is_listed) } setIsFetching(false) } fetchProfile() }, [router, supabase]) const handleSave = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError(null) try { const { error: updateError } = await supabase .from("profiles") .update({ display_name: displayName, company_name: companyName, bio: bio || null, industry: industry || null, website: website || null, }) .eq("id", profile?.id) if (updateError) throw updateError router.push("/dashboard") router.refresh() } catch (err) { setError(err instanceof Error ? err.message : "An error occurred") } finally { setIsLoading(false) } } const handleListCompany = async () => { setIsLoading(true) setError(null) try { const { error: updateError } = await supabase.from("profiles").update({ is_listed: true }).eq("id", profile?.id) if (updateError) throw updateError setIsListed(true) router.push("/dashboard") router.refresh() } catch (err) { setError(err instanceof Error ? err.message : "An error occurred") } finally { setIsLoading(false) } } if (isFetching) { return (

) } return (

Edit Profile

Update your company information

Company Information

Display Name setDisplayName(e.target.value)} className="bg-slate-800/50 border-slate-700 text-white" required />

Company Name setCompanyName(e.target.value)} className="bg-slate-800/50 border-slate-700 text-white" required />

Industry setIndustry(e.target.value)} className="bg-slate-800/50 border-slate-700 text-white" placeholder="e.g., Technology, Healthcare, Finance" />

Website setWebsite(e.target.value)} className="bg-slate-800/50 border-slate-700 text-white" placeholder="https://example.com" />

Bio / About

setBio(e.target.value)}
                  className="bg-slate-800/50 border-slate-700 text-white min-h-32"
                  placeholder="Tell potential investors about yourself and your potential..."
                />
              </div>

{error && (
                <div className="p-3 bg-red-500/10 border border-red-500/50 rounded-lg flex items-start gap-2">
                  <AlertCircle className="h-4 w-4 text-red-400 mt-0.5 flex-shrink-0" />
                  <p className="text-sm text-red-400">{error}</p>
                </div>
              )}

<div className="flex gap-4">
                <Button type="submit" disabled={isLoading} className="flex-1 bg-indigo-600 hover:bg-indigo-700">
                  {isLoading ? "Saving..." : "Save Changes"}
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => router.push("/dashboard")}
                  className="border-slate-700 text-white hover:bg-slate-800 bg-transparent"
                >
                  Cancel
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>

{!isListed && (
          <Card className="bg-slate-900/50 border-slate-800 mt-6">
            <CardHeader>
              <CardTitle className="text-white">List Your Company</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-slate-400 mb-4">
                Ready to go public? List your company on The QUBE exchange and allow others to invest in your potential.
              </p>
              <Button onClick={handleListCompany} disabled={isLoading} className="bg-green-600 hover:bg-green-700">
                {isLoading ? "Listing..." : "List on Exchange"}
              </Button>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/list/page.tsx" isMerged="true"
"use client"

import { useEffect, useState, useTransition } from "react"
import { createClient } from "@/lib/supabase/client"
import { useRouter } from "next/navigation"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { GaugeScore } from "@/components/gauge-score"
import Image from "next/image"
import Link from "next/link"
import {
  Zap,
  ArrowRight,
  CheckCircle2,
  AlertTriangle,
  DollarSign,
  BarChart3,
  Shield,
  Loader2,
} from "lucide-react"

interface GaugeData {
  overall_score: number
  skills_score: number
  experience_score: number
  education_score: number
  network_score: number
  ambition_score: number
}

export default function ListYourselfPage() {
  const [gauge, setGauge] = useState<GaugeData | null>(null)
  const [profile, setProfile] = useState<any>(null)
  const [shares, setShares] = useState<any>(null)
  const [loading, setLoading] = useState(true)
  const [listed, setListed] = useState(false)
  const [listingPrice, setListingPrice] = useState(0)
  const [sharesToList, setSharesToList] = useState(500000)
  const [isPending, startTransition] = useTransition()
  const router = useRouter()

const maxPrice = gauge ? Math.round((5 + (gauge.overall_score / 100) * 95) * 100) / 100 : 10

useEffect(() => {
    async function load() {
      const supabase = createClient()
      const { data: { user } } = await supabase.auth.getUser()
      if (!user) { router.push("/auth/login"); return }

const [{ data: p }, { data: g }, { data: s }] = await Promise.all([
        supabase.from("profiles").select("*").eq("id", user.id).single(),
        supabase.from("gauge_scores").select("*").eq("user_id", user.id).single(),
        supabase.from("shares").select("*").eq("profile_id", user.id).single(),
      ])

setProfile(p)
      setGauge(g)
      setShares(s)
      if (g) setListingPrice(Math.round((5 + (g.overall_score / 100) * 95) * 100) / 100)
      if (p?.is_listed) setListed(true)
      setLoading(false)
    }
    load()
  }, [router])

async function handleList() {
    if (!profile || !gauge) return
    startTransition(async () => {
      const supabase = createClient()
      await supabase.from("profiles").update({ is_listed: true }).eq("id", profile.id)
      await supabase.from("shares").update({
        share_price: listingPrice,
        available_shares: sharesToList,
        market_cap: listingPrice * (shares?.total_shares || 1000000),
      }).eq("profile_id", profile.id)

await supabase.from("price_history").insert({
        company_id: profile.id,
        price: listingPrice,
        volume: 0,
      })

setListed(true)
    })
  }

if (loading) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-background">
        <Loader2 className="h-8 w-8 animate-spin text-cyan-500/60" />
      </div>
    )
  }

if (listed) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-background p-6">
        <Card className="max-w-lg border-border/60 shadow-lg">
          <CardContent className="flex flex-col items-center gap-6 p-10 text-center">
            <div className="flex h-20 w-20 items-center justify-center rounded-full bg-emerald-50">
              <CheckCircle2 className="h-10 w-10 text-emerald-500" />
            </div>
            <h1 className="text-2xl font-bold text-foreground">You Are Listed!</h1>
            <p className="text-sm leading-relaxed text-foreground/50">
              <span className="font-semibold text-foreground/80">{profile?.company_name}</span> (${profile?.ticker_symbol}) is now trading at <span className="font-semibold text-cyan-600">${listingPrice.toFixed(2)}</span> per share.
            </p>
            <div className="flex gap-3">
              <Button asChild className="rounded-full bg-gradient-to-r from-cyan-500 to-pink-500 text-sm font-semibold text-white">
                <Link href="/dashboard">Dashboard <ArrowRight className="ml-1.5 h-3.5 w-3.5" /></Link>
              </Button>
              <Button asChild variant="outline" className="rounded-full">
                <Link href={`/profile/${profile?.id}`}>View Profile</Link>
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

if (!gauge) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-background p-6">
        <Card className="max-w-lg border-border/60 shadow-lg">
          <CardContent className="flex flex-col items-center gap-6 p-10 text-center">
            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-amber-50">
              <AlertTriangle className="h-8 w-8 text-amber-500" />
            </div>
            <h1 className="text-xl font-bold text-foreground">GAUGE Assessment Required</h1>
            <p className="text-sm leading-relaxed text-foreground/50">
              You need to complete the GAUGE assessment before listing yourself. Your GAUGE score determines your maximum share price.
            </p>
            <Button asChild className="rounded-full bg-gradient-to-r from-cyan-500 to-pink-500 px-8 text-sm font-semibold text-white">
              <Link href="/dashboard/gauge">Take GAUGE Assessment <ArrowRight className="ml-1.5 h-3.5 w-3.5" /></Link>
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <div className="mx-auto max-w-4xl space-y-8 px-6 py-12">
        {/* Header */}
        <div className="text-center">
          <Image src="/images/wonkado-logo.png" alt="Wonkado" width={48} height={48} className="mx-auto mb-4 rounded-xl" />
          <h1 className="text-3xl font-bold text-foreground">List Yourself on the Exchange</h1>
          <p className="mt-2 text-sm text-foreground/45">Set your share price based on your GAUGE value and start trading</p>
        </div>

<div className="grid gap-8 lg:grid-cols-[1fr_320px]">
          {/* Listing Config */}
          <div className="space-y-6">
            {/* GAUGE Value Card */}
            <Card className="border-border/60 shadow-sm">
              <CardContent className="p-6">
                <div className="mb-4 flex items-center gap-2">
                  <Zap className="h-4 w-4 text-cyan-600" />
                  <h2 className="text-sm font-semibold text-foreground/70">Your GAUGE Value</h2>
                </div>
                <div className="flex items-center gap-6">
                  <GaugeScore score={Math.round(gauge.overall_score)} size={120} strokeWidth={8} />
                  <div className="space-y-2 text-sm">
                    <div className="flex items-center justify-between gap-12">
                      <span className="text-foreground/50">Max Share Price</span>
                      <span className="font-bold text-cyan-600">${maxPrice.toFixed(2)}</span>
                    </div>
                    <div className="flex items-center justify-between gap-12">
                      <span className="text-foreground/50">GAUGE Score</span>
                      <span className="font-semibold text-foreground/80">{Math.round(gauge.overall_score)}/100</span>
                    </div>
                    <p className="text-[11px] text-foreground/35">
                      Share price is capped at 100% of your GAUGE-derived value
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Price Slider */}
            <Card className="border-border/60 shadow-sm">
              <CardContent className="space-y-6 p-6">
                <div className="flex items-center gap-2">
                  <DollarSign className="h-4 w-4 text-emerald-500" />
                  <h2 className="text-sm font-semibold text-foreground/70">Set Your Share Price</h2>
                </div>

<div className="space-y-4">
                  <div className="flex items-end justify-between">
                    <div>
                      <Label className="text-xs text-foreground/50">Price per Share</Label>
                      <div className="mt-1 flex items-baseline gap-1">
                        <span className="text-3xl font-bold text-foreground">${listingPrice.toFixed(2)}</span>
                        <span className="text-xs text-foreground/35">/ share</span>
                      </div>
                    </div>
                    <div className="text-right">
                      <span className={`text-xs ${listingPrice === maxPrice ? "text-cyan-600" : "text-foreground/40"}`}>
                        {Math.round((listingPrice / maxPrice) * 100)}% of max
                      </span>
                    </div>
                  </div>

<Slider
                    value={[listingPrice]}
                    onValueChange={([v]) => setListingPrice(Math.round(v * 100) / 100)}
                    min={1}
                    max={maxPrice}
                    step={0.01}
                    className="py-4"
                  />

<div className="flex justify-between text-[10px] text-foreground/30">
                    <span>$1.00</span>
                    <span>${maxPrice.toFixed(2)}</span>
                  </div>
                </div>

<div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <BarChart3 className="h-4 w-4 text-purple-500" />
                    <h3 className="text-sm font-semibold text-foreground/70">Shares to List</h3>
                  </div>
                  <div className="flex items-center gap-3">
                    <Input
                      type="number"
                      value={sharesToList}
                      onChange={(e) => setSharesToList(Math.max(1000, Math.min(Number(e.target.value), shares?.total_shares || 1000000)))}
                      className="border-border text-foreground"
                    />
                    <span className="shrink-0 text-xs text-foreground/40">/ {(shares?.total_shares || 1000000).toLocaleString()}</span>
                  </div>
                  <Slider
                    value={[sharesToList]}
                    onValueChange={([v]) => setSharesToList(v)}
                    min={1000}
                    max={shares?.total_shares || 1000000}
                    step={1000}
                    className="py-2"
                  />
                </div>
              </CardContent>
            </Card>
          </div>

{/* Order Summary */}
          <div className="space-y-5">
            <Card className="sticky top-24 border-border/60 bg-gradient-to-b from-cyan-50/50 to-background shadow-lg">
              <CardContent className="space-y-5 p-6">
                <h3 className="flex items-center gap-2 text-sm font-semibold text-foreground/70">
                  <Shield className="h-4 w-4 text-cyan-600" /> Listing Summary
                </h3>
                <div className="space-y-3">
                  {[
                    { label: "Company", value: profile?.company_name || "N/A" },
                    { label: "Ticker", value: `$${profile?.ticker_symbol || "N/A"}` },
                    { label: "Share Price", value: `$${listingPrice.toFixed(2)}`, highlight: true },
                    { label: "Shares Listed", value: sharesToList.toLocaleString() },
                    { label: "Total Shares", value: (shares?.total_shares || 1000000).toLocaleString() },
                  ].map((r) => (
                    <div key={r.label} className="flex items-center justify-between text-sm">
                      <span className="text-foreground/50">{r.label}</span>
                      <span className={r.highlight ? "font-bold text-cyan-600" : "font-medium text-foreground/80"}>{r.value}</span>
                    </div>
                  ))}
                  <div className="border-t border-border pt-3">
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-semibold text-foreground/60">Market Cap</span>
                      <span className="text-lg font-bold text-foreground">
                        ${((listingPrice * (shares?.total_shares || 1000000)) / 1000000).toFixed(2)}M
                      </span>
                    </div>
                  </div>
                </div>

<Button
                  onClick={handleList}
                  disabled={isPending}
                  className="w-full rounded-xl bg-gradient-to-r from-cyan-500 to-pink-500 py-6 text-sm font-bold text-white shadow-lg shadow-cyan-500/15 transition-shadow hover:shadow-xl hover:shadow-cyan-500/25"
                >
                  {isPending ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Listing...</> : "List Yourself Now"}
                </Button>

<p className="text-center text-[10px] leading-relaxed text-foreground/30">
                  By listing, you allow others to invest in your potential. Share price is capped at 100% of your GAUGE value.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

/* ── Wonkado light palette: cyan + hot pink ── */
:root {
  --background: oklch(0.99 0 0);
  --foreground: oklch(0.13 0.02 260);
  --card: oklch(0.99 0 0);
  --card-foreground: oklch(0.13 0.02 260);
  --popover: oklch(0.99 0 0);
  --popover-foreground: oklch(0.13 0.02 260);

/* Cyan primary */
  --primary: oklch(0.60 0.18 195);
  --primary-foreground: oklch(1 0 0);

/* Hot pink secondary */
  --secondary: oklch(0.55 0.26 345);
  --secondary-foreground: oklch(1 0 0);

--muted: oklch(0.96 0.003 260);
  --muted-foreground: oklch(0.40 0.02 260);

/* Pink accent */
  --accent: oklch(0.55 0.26 345);
  --accent-foreground: oklch(1 0 0);

--destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.88 0.006 260);
  --input: oklch(0.88 0.006 260);
  --ring: oklch(0.60 0.18 195);

--chart-1: oklch(0.65 0.18 195);
  --chart-2: oklch(0.55 0.26 345);
  --chart-3: oklch(0.55 0.2 250);
  --chart-4: oklch(0.7 0.14 80);
  --chart-5: oklch(0.6 0.18 330);

--radius: 0.75rem;

--sidebar: oklch(0.97 0.003 230);
  --sidebar-foreground: oklch(0.15 0.01 230);
  --sidebar-primary: oklch(0.65 0.18 195);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.95 0.005 230);
  --sidebar-accent-foreground: oklch(0.15 0.01 230);
  --sidebar-border: oklch(0.9 0.005 230);
  --sidebar-ring: oklch(0.65 0.18 195);
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback", system-ui, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", monospace;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }

@keyframes gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
  }
  @keyframes float-slow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
  }
  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  @keyframes glow {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 180, 220, 0.15); }
    50% { box-shadow: 0 0 40px rgba(0, 180, 220, 0.25); }
  }
  @keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

.animate-gradient { background-size: 200% 200%; animation: gradient 4s ease infinite; }
  .animate-float { animation: float 5s ease-in-out infinite; }
  .animate-float-slow { animation: float-slow 7s ease-in-out infinite; }
  .animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; opacity: 0; }
  .animate-shimmer { animation: shimmer 3s linear infinite; }
  .animate-glow { animation: glow 2s ease-in-out infinite; }
  .animate-ticker { animation: ticker 30s linear infinite; }

.delay-100 { animation-delay: 0.1s; }
  .delay-200 { animation-delay: 0.2s; }
  .delay-300 { animation-delay: 0.3s; }
  .delay-400 { animation-delay: 0.4s; }
  .delay-500 { animation-delay: 0.5s; }
  .delay-600 { animation-delay: 0.6s; }
  .delay-700 { animation-delay: 0.7s; }

.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

.text-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

.card-elegant {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .card-elegant:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.08);
  }
}
[V0_FILE]jpg:file="public/futuristic-stock-market-digital-graph-holographic-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/futuristic-stock-market-digital-graph-holographic--yPkSYotcpepQmvJfhbGhagNg6Ipvqb.jpg" isMerged="true"
[V0_FILE]jpg:file="public/professional-person-presenting-their-portfolio-dig.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-person-presenting-their-portfolio-dig-MALtTx0BCFhUpeH6xLTRqRzK7aQhiH.jpg" isMerged="true"
[V0_FILE]jpg:file="public/stock-market-trading-chart-rising-prices-holograph.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/stock-market-trading-chart-rising-prices-holograph-jM4xx299BZ7i5BafQBatQgHVIZyyL2.jpg" isMerged="true"
[V0_FILE]jpg:file="public/money-investment-funding-growth-coins-digital-curr.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/money-investment-funding-growth-coins-digital-curr-KYRucXawfHaxkDXtUhVsCyvpaI60xk.jpg" isMerged="true"
[V0_FILE]jpg:file="public/analytics-dashboard-portfolio-performance-charts-g.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/analytics-dashboard-portfolio-performance-charts-g-KzYflZp4utDsUdMRbNjz0JpcaJoZOm.jpg" isMerged="true"
[V0_FILE]jpg:file="public/stock-market-holographic-display-with-rising-chart.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/stock-market-holographic-display-with-rising-chart-ltvt92E5xdGwQXadoImstXEZOpa9gd.jpg" isMerged="true"
[V0_FILE]jpg:file="public/professional-person-portrait-avatar-style-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-person-portrait-avatar-style--i0G9SyLDkeHU78x0lAZGNUxS1Oo92M.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/auth/sign-up-success/page.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import Image from "next/image"
import { CheckCircle, Mail, Rocket } from "lucide-react"

export default function SignUpSuccessPage() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
      <div className="w-full max-w-md">
        <div className="mb-8 text-center">
          <Image src="/images/wonkado-logo.png" alt="Wonkado" width={80} height={80} className="mx-auto mb-4" />
        </div>

<Card className="border-border/60 shadow-xl">
          <CardHeader className="text-center">
            <div className="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-cyan-500 to-emerald-500 shadow-lg shadow-cyan-500/20">
              <CheckCircle className="h-10 w-10 text-white" />
            </div>
            <CardTitle className="text-3xl bg-gradient-to-r from-cyan-600 to-pink-500 bg-clip-text text-transparent">
              Welcome to Wonkado!
            </CardTitle>
            <CardDescription className="text-foreground/50">Your account has been created</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6 text-center">
            <div className="rounded-xl border border-cyan-100 bg-cyan-50 p-4">
              <div className="mb-2 flex items-center justify-center gap-3">
                <Mail className="h-5 w-5 text-cyan-600" />
                <span className="font-semibold text-foreground/80">Check Your Email</span>
              </div>
              <p className="text-sm text-foreground/50">
                We've sent a confirmation link to your email. Click to activate your account and start trading.
              </p>
            </div>

<div className="rounded-xl border border-pink-100 bg-pink-50 p-4">
              <div className="mb-2 flex items-center justify-center gap-3">
                <Rocket className="h-5 w-5 text-pink-500" />
                <span className="font-semibold text-foreground/80">What's Next?</span>
              </div>
              <p className="text-sm text-foreground/50">
                Once verified, complete your GAUGE assessment, trade shares, and invest in talented individuals.
              </p>
            </div>

<Button asChild className="w-full rounded-xl bg-gradient-to-r from-cyan-500 to-pink-500 font-semibold text-white shadow-lg shadow-cyan-500/15">
              <Link href="/auth/login">Return to Sign In</Link>
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/portfolio/page.tsx" isEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { TrendingUp, TrendingDown, DollarSign, Activity, PieChart, ArrowUpRight, ArrowDownRight } from "lucide-react"
import { PortfolioTable } from "@/components/portfolio-table"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default async function PortfolioPage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

const { data: portfolios } = await supabase
    .from("portfolios")
    .select(`*, company:company_id (id, company_name, ticker_symbol, display_name, shares (share_price))`)
    .eq("user_id", user.id)

const { data: wallet } = await supabase.from("wallets").select("*").eq("user_id", user.id).single()

const { data: transactions } = await supabase
    .from("transactions")
    .select("*")
    .eq("buyer_id", user.id)
    .order("created_at", { ascending: false })
    .limit(10)

const portfolioItems =
    portfolios?.map((p: any) => ({
      ...p,
      currentValue: p.shares_owned * Number(p.company.shares[0]?.share_price || 0),
      gain: p.shares_owned * Number(p.company.shares[0]?.share_price || 0) - p.total_invested,
      gainPercentage:
        p.total_invested > 0
          ? ((p.shares_owned * Number(p.company.shares[0]?.share_price || 0) - p.total_invested) / p.total_invested) *
            100
          : 0,
    })) || []

const totalInvested = portfolioItems.reduce((sum: number, p: any) => sum + Number(p.total_invested), 0)
  const totalCurrentValue = portfolioItems.reduce((sum: number, p: any) => sum + p.currentValue, 0)
  const totalGain = totalCurrentValue - totalInvested
  const totalGainPercentage = totalInvested > 0 ? (totalGain / totalInvested) * 100 : 0

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-purple-950 to-slate-900 relative overflow-hidden">
      {/* Animated background elements */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-20 right-20 w-72 h-72 bg-purple-500/10 rounded-full blur-3xl" />
        <div className="absolute bottom-40 left-20 w-96 h-96 bg-pink-500/10 rounded-full blur-3xl" />
      </div>

<div className="container mx-auto px-4 py-8 relative z-10">
        <div className="mb-8">
          <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 bg-clip-text text-transparent mb-2">
            Portfolio
          </h1>
          <p className="text-slate-400">Track your investments and performance</p>
        </div>

{/* Portfolio Overview */}
        <div className="grid md:grid-cols-4 gap-6 mb-8">
          <Card className="bg-slate-900/50 backdrop-blur-xl border-purple-500/20 hover:border-pink-500/40 transition-all group">
            <CardHeader className="pb-2">
              <CardTitle className="text-sm text-slate-400 flex items-center gap-2">
                <div className="p-2 bg-gradient-to-br from-pink-500 to-purple-600 rounded-lg group-hover:scale-110 transition-transform">
                  <PieChart className="h-4 w-4 text-white" />
                </div>
                Total Value
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-3xl font-bold text-white">${totalCurrentValue.toFixed(2)}</div>
              <p className="text-xs text-slate-400 mt-1">Current portfolio value</p>
            </CardContent>
          </Card>

<Card className="bg-slate-900/50 backdrop-blur-xl border-purple-500/20 hover:border-pink-500/40 transition-all group">
            <CardHeader className="pb-2">
              <CardTitle className="text-sm text-slate-400 flex items-center gap-2">
                <div
                  className={`p-2 rounded-lg group-hover:scale-110 transition-transform ${totalGain >= 0 ? "bg-gradient-to-br from-green-400 to-emerald-600" : "bg-gradient-to-br from-red-400 to-rose-600"}`}
                >
                  {totalGain >= 0 ? (
                    <TrendingUp className="h-4 w-4 text-white" />
                  ) : (
                    <TrendingDown className="h-4 w-4 text-white" />
                  )}
                </div>
                Total Gain/Loss
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className={`text-3xl font-bold ${totalGain >= 0 ? "text-green-400" : "text-red-400"}`}>
                {totalGain >= 0 ? "+" : ""}${totalGain.toFixed(2)}
              </div>
              <p
                className={`text-xs mt-1 flex items-center gap-1 ${totalGain >= 0 ? "text-green-400" : "text-red-400"}`}
              >
                {totalGain >= 0 ? <ArrowUpRight className="h-3 w-3" /> : <ArrowDownRight className="h-3 w-3" />}
                {totalGain >= 0 ? "+" : ""}
                {totalGainPercentage.toFixed(2)}%
              </p>
            </CardContent>
          </Card>

{/* Holdings Table */}
        <Card className="bg-slate-900/50 backdrop-blur-xl border-purple-500/20 mb-8">
          <CardHeader>
            <div className="flex items-center justify-between">
              <CardTitle className="text-white">Your Holdings</CardTitle>
              <Button
                asChild
                className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 shadow-lg shadow-pink-500/30"
              >
                <Link href="/market">Browse Market</Link>
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            {portfolioItems.length > 0 ? (
              <PortfolioTable holdings={portfolioItems} />
            ) : (
              <div className="text-center py-12">
                <div className="w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-br from-pink-500/20 to-purple-500/20 flex items-center justify-center">
                  <PieChart className="h-10 w-10 text-pink-400" />
                </div>
                <p className="text-slate-400 mb-4">You haven't made any investments yet.</p>
                <Button
                  asChild
                  className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
                >
                  <Link href="/market">Explore Companies</Link>
                </Button>
              </div>
            )}
          </CardContent>
        </Card>

{/* Recent Transactions */}
        <Card className="bg-slate-900/50 backdrop-blur-xl border-purple-500/20">
          <CardHeader>
            <CardTitle className="text-white">Recent Transactions</CardTitle>
          </CardHeader>
          <CardContent>
            {transactions && transactions.length > 0 ? (
              <div className="space-y-3">
                {transactions.map((tx: any) => (
                  <div
                    key={tx.id}
                    className="flex items-center justify-between p-4 bg-slate-800/30 rounded-xl border border-purple-500/10 hover:border-pink-500/30 transition-all"
                  >
                    <div>
                      <div className="text-sm font-semibold text-white flex items-center gap-2">
                        {tx.transaction_type === "buy" ? (
                          <span className="px-2 py-0.5 text-xs rounded-full bg-green-500/20 text-green-400">BUY</span>
                        ) : (
                          <span className="px-2 py-0.5 text-xs rounded-full bg-red-500/20 text-red-400">SELL</span>
                        )}
                        {tx.shares} shares
                      </div>
                      <div className="text-xs text-slate-400 mt-1">{new Date(tx.created_at).toLocaleString()}</div>
                    </div>
                    <div className="text-right">
                      <div
                        className={`text-sm font-semibold ${tx.transaction_type === "buy" ? "text-green-400" : "text-red-400"}`}
                      >
                        ${tx.total_amount.toFixed(2)}
                      </div>
                      <div className="text-xs text-slate-400">${tx.price_per_share} per share</div>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-center py-8">
                <p className="text-slate-400">No transactions yet</p>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/wallet/page.tsx" isEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { DollarSign, ArrowDownToLine, ArrowUpFromLine, History, Sparkles, CreditCard } from "lucide-react"
import { DepositForm } from "@/components/deposit-form"
import { Button } from "@/components/ui/button"

export default async function WalletPage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

const { data: wallet } = await supabase.from("wallets").select("*").eq("user_id", user.id).single()

const { data: transactions } = await supabase
    .from("transactions")
    .select("*")
    .or(`buyer_id.eq.${user.id},seller_id.eq.${user.id}`)
    .order("created_at", { ascending: false })
    .limit(20)

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-purple-950 to-slate-900 relative overflow-hidden">
      {/* Animated background elements */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-20 left-20 w-72 h-72 bg-green-500/10 rounded-full blur-3xl" />
        <div className="absolute bottom-40 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl" />
      </div>

<div className="container mx-auto px-4 py-8 relative z-10">
        <div className="mb-8">
          <h1 className="text-4xl font-bold bg-gradient-to-r from-green-400 via-emerald-500 to-cyan-500 bg-clip-text text-transparent mb-2">
            Wallet
          </h1>
          <p className="text-slate-400">Manage your funds and transaction history</p>
        </div>

{/* Wallet Overview */}
        <div className="grid md:grid-cols-3 gap-6 mb-8">
          <Card className="bg-gradient-to-br from-green-500/20 to-emerald-500/20 backdrop-blur-xl border-green-500/30 hover:border-green-400/50 transition-all group">
            <CardHeader className="pb-2">
              <CardTitle className="text-sm text-slate-300 flex items-center gap-2">
                <div className="p-2 bg-gradient-to-br from-green-400 to-emerald-600 rounded-lg group-hover:scale-110 transition-transform shadow-lg shadow-green-500/30">
                  <DollarSign className="h-4 w-4 text-white" />
                </div>
                Current Balance
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-5xl font-bold text-white">${wallet?.balance?.toFixed(2) || "0.00"}</div>
              <p className="text-xs text-green-300 mt-2 flex items-center gap-1">
                <Sparkles className="h-3 w-3" />
                Available for trading
              </p>
            </CardContent>
          </Card>

<div className="grid lg:grid-cols-2 gap-6 mb-8">
          {/* Deposit Section */}
          <Card className="bg-slate-900/50 backdrop-blur-xl border-green-500/20">
            <CardHeader>
              <CardTitle className="text-white flex items-center gap-2">
                <div className="p-2 bg-gradient-to-br from-green-400 to-emerald-600 rounded-lg">
                  <CreditCard className="h-5 w-5 text-white" />
                </div>
                Deposit Funds
              </CardTitle>
            </CardHeader>
            <CardContent>
              <DepositForm userId={user.id} />
            </CardContent>
          </Card>

{/* Withdraw Section */}
          <Card className="bg-slate-900/50 backdrop-blur-xl border-purple-500/20">
            <CardHeader>
              <CardTitle className="text-white flex items-center gap-2">
                <div className="p-2 bg-gradient-to-br from-purple-500 to-blue-600 rounded-lg">
                  <ArrowUpFromLine className="h-5 w-5 text-white" />
                </div>
                Withdraw Funds
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-slate-400 mb-4">
                Withdraw funds from your wallet to your bank account. Available balance:
                <span className="text-green-400 font-semibold"> ${wallet?.balance?.toFixed(2) || "0.00"}</span>
              </p>
              <Button disabled className="w-full bg-slate-800/50 border border-purple-500/30 text-slate-400">
                Coming Soon
              </Button>
            </CardContent>
          </Card>
        </div>

{/* Transaction History */}
        <Card className="bg-slate-900/50 backdrop-blur-xl border-purple-500/20">
          <CardHeader>
            <CardTitle className="text-white flex items-center gap-2">
              <History className="h-5 w-5 text-pink-400" />
              Transaction History
            </CardTitle>
          </CardHeader>
          <CardContent>
            {transactions && transactions.length > 0 ? (
              <div className="space-y-2">
                {transactions.map((tx: any) => {
                  const isBuyer = tx.buyer_id === user.id
                  return (
                    <div
                      key={tx.id}
                      className="flex items-center justify-between p-4 bg-slate-800/30 rounded-xl border border-purple-500/10 hover:border-pink-500/30 transition-all"
                    >
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <span
                            className={`px-2 py-0.5 text-xs rounded-full ${tx.transaction_type === "buy" ? "bg-green-500/20 text-green-400" : "bg-red-500/20 text-red-400"}`}
                          >
                            {tx.transaction_type === "buy" ? "BUY" : "SELL"}
                          </span>
                          <span className="text-sm font-semibold text-white">{tx.shares} shares</span>
                        </div>
                        <div className="text-xs text-slate-400">{new Date(tx.created_at).toLocaleString()}</div>
                      </div>
                      <div className="text-right">
                        <div className={`text-sm font-semibold ${isBuyer ? "text-red-400" : "text-green-400"}`}>
                          {isBuyer ? "-" : "+"}${tx.total_amount.toFixed(2)}
                        </div>
                        <div className="text-xs text-slate-400">${tx.price_per_share} per share</div>
                      </div>
                    </div>
                  )
                })}
              </div>
            ) : (
              <div className="text-center py-12">
                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center">
                  <History className="h-8 w-8 text-purple-400" />
                </div>
                <p className="text-slate-400">No transactions yet</p>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/professional-asian-woman-headshot.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-asian-woman-headshot-zFG9gsNoahXxciNP8bIPtadp7teQY2.jpg" isMerged="true"
[V0_FILE]png:file="public/professional-black-man-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-black-man-headshot-E4e1EG670hVuPDd8RghBPidVAoKEzR.png" isMerged="true"
[V0_FILE]png:file="public/professional-latina-woman-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-latina-woman-headshot-1kbDgY3VfwUfms9wc1LQPo6vkxxwlw.png" isMerged="true"
[V0_FILE]jpg:file="public/modern-stock-trading-dashboard-with-colorful-chart.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-stock-trading-dashboard-with-colorful-chart-pFtYTz0DUHNMm4Z5vvUd3X7GwN3o5E.jpg" isMerged="true"
[V0_FILE]jpg:file="public/abstract-flowing-shapes-purple-pink.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-flowing-shapes-purple-pink-HUlSyGwlA6LeQRRjHlucUOzCyJd88x.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"
import { GaugeScore, MiniGauge } from "@/components/gauge-score"
import {
  Wallet,
  BarChart3,
  TrendingUp,
  Briefcase,
  Users,
  ArrowRight,
  Edit,
  Zap,
  DollarSign,
  CheckCircle2,
  Circle,
} from "lucide-react"
import type { Profile, Share, Wallet as WalletType } from "@/lib/types"

export default async function DashboardPage() {
  const supabase = await createClient()
  const { data: { user } } = await supabase.auth.getUser()
  if (!user) redirect("/auth/login")

const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()
  const { data: shares } = await supabase.from("shares").select("*").eq("profile_id", user.id).single()
  const { data: wallet } = await supabase.from("wallets").select("*").eq("user_id", user.id).single()
  const { data: gauge } = await supabase.from("gauge_scores").select("*").eq("user_id", user.id).single()
  const { data: portfolios } = await supabase
    .from("portfolios")
    .select("*, company:company_id (company_name, ticker_symbol)")
    .eq("user_id", user.id)

const userProfile = profile as Profile
  const userShares = shares as Share
  const userWallet = wallet as WalletType
  const portfolioValue = portfolios?.reduce((sum, p) => sum + Number(p.total_invested), 0) || 0

const hasGauge = !!gauge

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <div className="border-b border-border/60 bg-gradient-to-r from-background via-cyan-50/50 to-background">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-6">
          <div className="flex items-center gap-4">
            <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-cyan-500 to-pink-500 shadow-lg shadow-cyan-500/15">
              <span className="text-xl font-bold text-white">{userProfile?.display_name?.charAt(0) || "?"}</span>
            </div>
            <div>
              <h1 className="text-xl font-bold text-foreground">Welcome back, {userProfile?.display_name}</h1>
              <p className="text-xs text-foreground/40">
                {userProfile?.ticker_symbol ? `$${userProfile.ticker_symbol}` : "Not listed"} -- {userProfile?.company_name || "Set up your company"}
              </p>
            </div>
          </div>
          <Button asChild variant="outline" className="border-border text-foreground/60 hover:text-foreground">
            <Link href="/dashboard/edit"><Edit className="mr-2 h-3.5 w-3.5" /> Edit Profile</Link>
          </Button>
        </div>
      </div>

<div className="mx-auto max-w-6xl space-y-8 px-6 py-8">
        {/* GAUGE Hero */}
        {!hasGauge ? (
          <Card className="overflow-hidden border-border/60 bg-gradient-to-br from-cyan-50 via-background to-pink-50">
            <CardContent className="flex flex-col items-center gap-6 p-10 text-center">
              <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-cyan-100">
                <Zap className="h-8 w-8 text-cyan-600" />
              </div>
              <div>
                <h2 className="text-2xl font-bold text-foreground">Discover Your True Value</h2>
                <p className="mt-2 max-w-md text-sm text-foreground/50">
                  Complete the GAUGE assessment to get your personalized score. Your score determines your share price and trading potential.
                </p>
              </div>
              <Button asChild className="rounded-full bg-gradient-to-r from-cyan-500 to-pink-500 px-10 py-6 text-sm font-semibold text-white shadow-lg shadow-cyan-500/15">
                <Link href="/dashboard/gauge">
                  Take GAUGE Assessment <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </CardContent>
          </Card>
        ) : (
          <div className="grid gap-6 lg:grid-cols-[280px_1fr]">
            <Card className="flex flex-col items-center justify-center border-border/60 bg-gradient-to-b from-cyan-50/50 to-background p-8">
              <GaugeScore score={Math.round(gauge.overall_score)} size={200} strokeWidth={11} label="GAUGE Score" />
              <Button asChild variant="link" className="mt-4 text-xs text-cyan-600 hover:text-cyan-700">
                <Link href="/dashboard/gauge">Retake Assessment</Link>
              </Button>
            </Card>
            <div className="grid grid-cols-5 gap-3">
              {[
                { label: "Skills", score: Math.round(gauge.skills_score), icon: Zap, color: "text-cyan-600", bg: "from-cyan-50 to-cyan-25", glow: "shadow-cyan-100" },
                { label: "Experience", score: Math.round(gauge.experience_score), icon: Briefcase, color: "text-purple-600", bg: "from-purple-50 to-purple-25", glow: "shadow-purple-100" },
                { label: "Education", score: Math.round(gauge.education_score), icon: BarChart3, color: "text-blue-600", bg: "from-blue-50 to-blue-25", glow: "shadow-blue-100" },
                { label: "Network", score: Math.round(gauge.network_score), icon: Users, color: "text-amber-600", bg: "from-amber-50 to-amber-25", glow: "shadow-amber-100" },
                { label: "Ambition", score: Math.round(gauge.ambition_score), icon: TrendingUp, color: "text-pink-600", bg: "from-pink-50 to-pink-25", glow: "shadow-pink-100" },
              ].map(s => (
                <Card key={s.label} className={`border-border/60 bg-gradient-to-b ${s.bg} shadow-sm ${s.glow}`}>
                  <CardContent className="flex flex-col items-center gap-3 p-5">
                    <s.icon className={`h-5 w-5 ${s.color}`} />
                    <MiniGauge score={s.score} size={52} />
                    <span className="text-[10px] uppercase tracking-wider text-foreground/40">{s.label}</span>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        )}

{/* Stats row */}
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {[
            { label: "Wallet Balance", value: `$${userWallet?.balance?.toFixed(2) || "0.00"}`, sub: "Available to invest", icon: Wallet, color: "text-emerald-600", bg: "bg-emerald-50" },
            { label: "Portfolio Value", value: `$${portfolioValue.toFixed(2)}`, sub: `${portfolios?.length || 0} investments`, icon: BarChart3, color: "text-cyan-600", bg: "bg-cyan-50" },
            { label: "Share Price", value: `$${userShares?.share_price || "10.00"}`, sub: `MCap: $${((userShares?.market_cap || 10000000) / 1000000).toFixed(1)}M`, icon: TrendingUp, color: "text-purple-600", bg: "bg-purple-50" },
            { label: "Ticker", value: userProfile?.ticker_symbol ? `$${userProfile.ticker_symbol}` : "N/A", sub: userProfile?.company_name || "Not set", icon: Briefcase, color: "text-amber-600", bg: "bg-amber-50" },
          ].map((s, i) => (
            <Card key={i} className="border-border/60 shadow-sm">
              <CardContent className="p-5">
                <div className={`mb-3 flex h-9 w-9 items-center justify-center rounded-xl ${s.bg}`}>
                  <s.icon className={`h-4 w-4 ${s.color}`} />
                </div>
                <p className="text-xl font-bold text-foreground">{s.value}</p>
                <p className="text-xs text-foreground/50">{s.label}</p>
                <p className="mt-0.5 text-[11px] text-foreground/35">{s.sub}</p>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Quick actions */}
        <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4">
          {[
            { href: "/market", title: "Trade Console", desc: "Discover and invest in people", icon: TrendingUp, gradient: "from-cyan-500 to-blue-500" },
            { href: "/dashboard/list", title: "List Yourself", desc: "Set your share price from GAUGE", icon: Zap, gradient: "from-pink-500 to-rose-500" },
            { href: "/portfolio", title: "My Portfolio", desc: "Track your investments", icon: BarChart3, gradient: "from-purple-500 to-pink-500" },
            { href: "/wallet", title: "Add Funds", desc: "Deposit to your wallet", icon: DollarSign, gradient: "from-amber-500 to-orange-500" },
          ].map((a, i) => (
            <Link key={i} href={a.href} className="group">
              <Card className="border-border/60 shadow-sm transition-all duration-300 hover:border-border hover:shadow-md">
                <CardContent className="flex items-center gap-4 p-5">
                  <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br ${a.gradient} shadow-md transition-transform group-hover:scale-110`}>
                    <a.icon className="h-5 w-5 text-white" />
                  </div>
                  <div className="flex-1">
                    <h3 className="text-sm font-semibold text-foreground/80">{a.title}</h3>
                    <p className="text-xs text-foreground/40">{a.desc}</p>
                  </div>
                  <ArrowRight className="h-4 w-4 text-foreground/20 transition-all group-hover:translate-x-1 group-hover:text-foreground/50" />
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>

{/* Company status + Profile completion */}
        <div className="grid gap-6 lg:grid-cols-2">
          <Card className="border-border/60 shadow-sm">
            <CardContent className="p-6">
              <div className="mb-5 flex items-center justify-between">
                <h3 className="flex items-center gap-2 text-sm font-semibold text-foreground/70">
                  <Briefcase className="h-4 w-4 text-cyan-600" /> Company Status
                </h3>
                {!userProfile?.is_listed && (
                  <Button asChild size="sm" className="h-8 rounded-full bg-gradient-to-r from-cyan-500 to-pink-500 text-xs text-white">
                    <Link href="/dashboard/list">List Yourself</Link>
                  </Button>
                )}
              </div>
              <div className="space-y-3">
                <div className="flex items-center justify-between text-sm">
                  <span className="text-foreground/50">Status</span>
                  <Badge className={userProfile?.is_listed ? "border-emerald-200 bg-emerald-50 text-emerald-700" : "border-border bg-muted text-foreground/50"}>
                    {userProfile?.is_listed ? "Listed" : "Not Listed"}
                  </Badge>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-foreground/50">Total Shares</span>
                  <span className="font-medium text-foreground/70">{userShares?.total_shares?.toLocaleString() || "1,000,000"}</span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-foreground/50">Available</span>
                  <span className="font-medium text-foreground/70">{userShares?.available_shares?.toLocaleString() || "1,000,000"}</span>
                </div>
              </div>
            </CardContent>
          </Card>

<Card className="border-border/60 shadow-sm">
            <CardContent className="p-6">
              <h3 className="mb-5 flex items-center gap-2 text-sm font-semibold text-foreground/70">
                <Edit className="h-4 w-4 text-pink-500" /> Profile Completion
              </h3>
              <div className="space-y-3">
                {[
                  { label: "Bio", done: !!userProfile?.bio },
                  { label: "Industry", done: !!userProfile?.industry },
                  { label: "Website", done: !!userProfile?.website },
                  { label: "GAUGE Score", done: hasGauge },
                ].map((item, i) => (
                  <div key={i} className="flex items-center gap-3 text-sm">
                    {item.done
                      ? <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                      : <Circle className="h-4 w-4 text-foreground/15" />}
                    <span className={item.done ? "text-foreground/70" : "text-foreground/35"}>{item.label}</span>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/supabase/client.ts" isMerged="true"
import { createBrowserClient } from "@supabase/ssr"

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  )
}
[V0_FILE]jpg:file="public/stash-data-vault.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/stash-data-vault-G6cTlyBoMkvOkBiwoQRlKKJB05TwbG.jpg" isMerged="true"
[V0_FILE]jpg:file="public/life-bazaar-market.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/life-bazaar-market-2A8gj1FuIL6tSgJdtHYPElTiUD2qy4.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gauge-ai-agent.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gauge-ai-agent-zny5cSnHOmr7UbqLvUF10rhy79vQgI.jpg" isMerged="true"
[V0_FILE]jpg:file="public/hero-abstract-premium.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hero-abstract-premium-7vImucdE3192ECvCS2DYwtHbjtOi0V.jpg" isMerged="true"
[V0_FILE]jpg:file="public/architecture-layers.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/architecture-layers-Ikwifa2EDafAW6Dnr5Cq79shHAVaPJ.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"
import { Navigation } from "@/components/navigation"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Wonkado - Humane Stock Exchange | Powered by The QUBE",
  description:
    "Do you want to know your real value? The world's first platform to list yourself, invest in human potential, and discover your true worth.",
  generator: "v0.app",
  icons: {
    icon: [
      {
        url: "/icon-light-32x32.png",
        media: "(prefers-color-scheme: light)",
      },
      {
        url: "/icon-dark-32x32.png",
        media: "(prefers-color-scheme: dark)",
      },
      {
        url: "/icon.svg",
        type: "image/svg+xml",
      },
    ],
    apple: "/apple-icon.png",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className="font-sans antialiased bg-background">
        <Navigation />
        <main className="pt-16">{children}</main>
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]jpg:file="public/images/gauge-section.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/gauge-section-GfKqVrswxBuofPmQPxY2szxJQCv0q8.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/bazaar-section.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/bazaar-section-U8Sl1bGAEzlY2X4DpyYQN6BoxzvEia.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/stash-section.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/stash-section-2ZvGawrXYIaGXjN7vmsZxBwDj6SACe.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/hero-bg.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/hero-bg-hrz0zNdLB3KIT7ZLLLIYOsDCJCg71i.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/architecture-section.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/architecture-section-tIsS8hcXI3WlyLdhnFzUoabog8BD2B.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/auth-visual.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/auth-visual-BZRC1U0SCcFxEAG22V0RL4wDrIW6yk.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/market/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { CompanyCard } from "@/components/company-card"
import { Input } from "@/components/ui/input"
import { Search, TrendingUp, Users, DollarSign, Activity } from "lucide-react"
import type { CompanyWithShares } from "@/lib/types"
import { Button } from "@/components/ui/button"

export default async function MarketPage() {
  const supabase = await createClient()

const { data: companies } = await supabase
    .from("profiles")
    .select(`*, shares (*)`)
    .eq("is_listed", true)
    .order("created_at", { ascending: false })

const companiesWithShares = (companies || []) as unknown as CompanyWithShares[]

return (
    <div className="min-h-screen bg-background">
      {/* Hero */}
      <div className="border-b border-border/60">
        <div className="container mx-auto px-6 py-14">
          <div className="max-w-3xl">
            <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-700">
              <Activity className="h-3.5 w-3.5" />
              Live Market
            </div>
            <h1 className="text-4xl font-bold text-foreground md:text-5xl">
              Discover{" "}
              <span className="bg-gradient-to-r from-cyan-600 to-pink-500 bg-clip-text text-transparent">
                Talented Individuals
              </span>
            </h1>
            <p className="mt-4 text-lg font-light text-foreground/45">
              Browse the market and invest in people whose potential you believe in.
            </p>

<div className="mt-8 flex flex-wrap gap-8">
              {[
                { icon: Users, label: String(companiesWithShares.length), sub: "Listed", color: "text-cyan-600" },
                { icon: TrendingUp, label: "+12.5%", sub: "24h", color: "text-emerald-600" },
                { icon: DollarSign, label: "$2.4M", sub: "Volume", color: "text-amber-600" },
              ].map(({ icon: I, label, sub, color }) => (
                <div key={sub} className="flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-border/60 bg-muted/50">
                    <I className={`h-5 w-5 ${color}`} />
                  </div>
                  <div>
                    <p className="text-xl font-bold text-foreground">{label}</p>
                    <p className="text-[11px] text-foreground/35">{sub}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

{/* Search */}
      <div className="sticky top-16 z-40 border-b border-border/60 bg-background/80 backdrop-blur-2xl">
        <div className="container mx-auto px-6 py-4">
          <div className="flex gap-3">
            <div className="relative max-w-xl flex-1">
              <Search className="absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground/30" />
              <Input
                placeholder="Search by name, ticker, or industry..."
                className="h-11 border-border bg-background pl-11 text-sm text-foreground placeholder:text-foreground/30 focus:border-cyan-500/50 focus:ring-0"
              />
            </div>
            <Button variant="outline" className="h-11 border-border text-xs text-foreground/50 hover:text-foreground/70">
              Filters
            </Button>
          </div>
        </div>
      </div>

{/* Grid */}
      <div className="container mx-auto px-6 py-10">
        {companiesWithShares.length > 0 ? (
          <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
            {companiesWithShares.map((company) => (
              <CompanyCard key={company.id} company={company} />
            ))}
          </div>
        ) : (
          <div className="py-24 text-center">
            <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full border border-border/60 bg-muted/50">
              <Users className="h-10 w-10 text-foreground/25" />
            </div>
            <h3 className="text-xl font-bold text-foreground/70">No Companies Listed Yet</h3>
            <p className="mt-2 text-sm text-foreground/40">Be the first to list yourself on the exchange.</p>
            <Button asChild className="mt-6 rounded-full border-0 bg-gradient-to-r from-cyan-500 to-pink-500 px-8 text-sm font-semibold text-white">
              <a href="/dashboard/list">List Yourself Now</a>
            </Button>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/images/wonkado-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Vibrant%20Logo%20for%20Wokado%20Trading%20Platform-hD1lXEmdxm1XcHYmEeDenntu3sMLSm.png" isMerged="true"
[V0_FILE]sql:file="scripts/002_gauge_scores.sql" isMerged="true"
-- GAUGE scores table for AI-assessed value
CREATE TABLE IF NOT EXISTS gauge_scores (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL UNIQUE,
  overall_score NUMERIC(5,2) DEFAULT 0 CHECK (overall_score >= 0 AND overall_score <= 100),
  skills_score NUMERIC(5,2) DEFAULT 0 CHECK (skills_score >= 0 AND skills_score <= 100),
  experience_score NUMERIC(5,2) DEFAULT 0 CHECK (experience_score >= 0 AND experience_score <= 100),
  education_score NUMERIC(5,2) DEFAULT 0 CHECK (education_score >= 0 AND education_score <= 100),
  network_score NUMERIC(5,2) DEFAULT 0 CHECK (network_score >= 0 AND network_score <= 100),
  ambition_score NUMERIC(5,2) DEFAULT 0 CHECK (ambition_score >= 0 AND ambition_score <= 100),
  assessment_data JSONB DEFAULT '{}',
  completed_at TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- RLS policies
ALTER TABLE gauge_scores ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can view their own gauge scores" ON gauge_scores
  FOR SELECT USING (auth.uid() = user_id);

CREATE POLICY "Users can insert their own gauge scores" ON gauge_scores
  FOR INSERT WITH CHECK (auth.uid() = user_id);

CREATE POLICY "Users can update their own gauge scores" ON gauge_scores
  FOR UPDATE USING (auth.uid() = user_id);

CREATE POLICY "Anyone can view completed gauge scores" ON gauge_scores
  FOR SELECT USING (completed_at IS NOT NULL);
[V0_FILE]typescript:file="app/actions/gauge.ts" isMerged="true"
"use server"

import { createClient } from "@/lib/supabase/server"
import { revalidatePath } from "next/cache"

interface GaugeAssessment {
  skills: { primary: string; secondary: string[]; years: number; certifications: number }
  experience: { roles: number; industries: number; leadership: boolean; yearsTotal: number }
  education: { level: string; field: string; continuous: boolean; courses: number }
  network: { connections: number; mentors: number; communities: number; influence: string }
  ambition: { goals: string; timeline: string; commitment: string; vision: string }
}

function computeScore(assessment: GaugeAssessment) {
  // Skills: weighted by years, certifications, breadth
  const skillsRaw =
    Math.min(assessment.skills.years * 4, 30) +
    Math.min(assessment.skills.certifications * 5, 20) +
    Math.min(assessment.skills.secondary.length * 5, 25) +
    (assessment.skills.primary ? 25 : 0)
  const skills = Math.min(skillsRaw, 100)

// Experience: roles, industries, leadership
  const expRaw =
    Math.min(assessment.experience.roles * 8, 30) +
    Math.min(assessment.experience.industries * 10, 25) +
    (assessment.experience.leadership ? 20 : 0) +
    Math.min(assessment.experience.yearsTotal * 2.5, 25)
  const experience = Math.min(expRaw, 100)

// Education: level, continuous learning
  const eduLevels: Record<string, number> = { high_school: 20, bachelors: 40, masters: 60, phd: 80, self_taught: 35 }
  const eduRaw =
    (eduLevels[assessment.education.level] || 20) +
    (assessment.education.continuous ? 15 : 0) +
    Math.min(assessment.education.courses * 2, 20)
  const education = Math.min(eduRaw, 100)

// Network
  const influenceLevels: Record<string, number> = { low: 10, medium: 20, high: 35, thought_leader: 50 }
  const netRaw =
    Math.min(assessment.network.connections * 0.05, 20) +
    Math.min(assessment.network.mentors * 10, 20) +
    Math.min(assessment.network.communities * 5, 15) +
    (influenceLevels[assessment.network.influence] || 10)
  const network = Math.min(netRaw, 100)

// Ambition
  const commitLevels: Record<string, number> = { part_time: 20, full_time: 40, all_in: 60 }
  const ambRaw =
    (assessment.ambition.goals ? 25 : 0) +
    (assessment.ambition.timeline ? 15 : 0) +
    (commitLevels[assessment.ambition.commitment] || 20) +
    (assessment.ambition.vision ? 25 : 0)
  const ambition = Math.min(ambRaw, 100)

// Weighted overall
  const overall = skills * 0.25 + experience * 0.25 + education * 0.15 + network * 0.15 + ambition * 0.2

return {
    overall: Math.round(overall * 100) / 100,
    skills: Math.round(skills * 100) / 100,
    experience: Math.round(experience * 100) / 100,
    education: Math.round(education * 100) / 100,
    network: Math.round(network * 100) / 100,
    ambition: Math.round(ambition * 100) / 100,
  }
}

export async function submitGaugeAssessment(assessment: GaugeAssessment) {
  const supabase = await createClient()
  const { data: { user } } = await supabase.auth.getUser()
  if (!user) throw new Error("Not authenticated")

const scores = computeScore(assessment)

// Upsert gauge score
  const { error: gaugeError } = await supabase
    .from("gauge_scores")
    .upsert({
      user_id: user.id,
      overall_score: scores.overall,
      skills_score: scores.skills,
      experience_score: scores.experience,
      education_score: scores.education,
      network_score: scores.network,
      ambition_score: scores.ambition,
      assessment_data: assessment,
      completed_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
    }, { onConflict: "user_id" })

if (gaugeError) throw new Error(gaugeError.message)

// Update share price based on GAUGE score
  const newSharePrice = 5 + (scores.overall / 100) * 95 // $5 - $100 range
  const { data: shares } = await supabase
    .from("shares")
    .select("id, total_shares")
    .eq("user_id", user.id)
    .single()

if (shares) {
    await supabase
      .from("shares")
      .update({
        share_price: Math.round(newSharePrice * 100) / 100,
        market_cap: Math.round(newSharePrice * shares.total_shares * 100) / 100,
      })
      .eq("id", shares.id)

// Record price history
    await supabase.from("price_history").insert({
      share_id: shares.id,
      price: Math.round(newSharePrice * 100) / 100,
    })
  }

revalidatePath("/dashboard")
  revalidatePath("/market")
  return scores
}

export async function getGaugeScore(userId: string) {
  const supabase = await createClient()
  const { data } = await supabase
    .from("gauge_scores")
    .select("*")
    .eq("user_id", userId)
    .single()
  return data
}
[V0_FILE]typescriptreact:file="components/gauge-score.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"

interface GaugeScoreProps {
  score: number
  size?: number
  strokeWidth?: number
  label?: string
  animated?: boolean
}

export function GaugeScore({ score, size = 180, strokeWidth = 10, label, animated = true }: GaugeScoreProps) {
  const [displayed, setDisplayed] = useState(animated ? 0 : score)

useEffect(() => {
    if (!animated) { setDisplayed(score); return }
    let frame: number
    const start = performance.now()
    const duration = 1400
    const tick = (now: number) => {
      const t = Math.min((now - start) / duration, 1)
      const ease = 1 - Math.pow(1 - t, 3)
      setDisplayed(Math.round(ease * score))
      if (t < 1) frame = requestAnimationFrame(tick)
    }
    frame = requestAnimationFrame(tick)
    return () => cancelAnimationFrame(frame)
  }, [score, animated])

const r = (size - strokeWidth) / 2
  const c = Math.PI * 2 * r
  const arc = 0.75
  const dash = c * arc
  const gap = c * (1 - arc)
  const progress = (displayed / 100) * dash
  const rotation = 135

const color =
    displayed >= 75 ? "#0891b2" :
    displayed >= 50 ? "#9333ea" :
    displayed >= 25 ? "#d97706" :
    "#ef4444"

return (
    <div className="relative inline-flex items-center justify-center" style={{ width: size, height: size }}>
      <svg width={size} height={size} className="drop-shadow-sm">
        <circle
          cx={size / 2}
          cy={size / 2}
          r={r}
          fill="none"
          stroke="rgba(0,0,0,0.06)"
          strokeWidth={strokeWidth}
          strokeDasharray={`${dash} ${gap}`}
          strokeLinecap="round"
          transform={`rotate(${rotation} ${size / 2} ${size / 2})`}
        />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={r}
          fill="none"
          stroke={color}
          strokeWidth={strokeWidth}
          strokeDasharray={`${progress} ${c - progress}`}
          strokeLinecap="round"
          transform={`rotate(${rotation} ${size / 2} ${size / 2})`}
          style={{
            filter: `drop-shadow(0 0 6px ${color}40)`,
            transition: animated ? "none" : "stroke-dasharray .6s ease",
          }}
        />
      </svg>
      <div className="absolute inset-0 flex flex-col items-center justify-center">
        <span className="text-4xl font-bold tabular-nums text-foreground">{displayed}</span>
        {label && <span className="mt-0.5 text-[11px] uppercase tracking-widest text-foreground/40">{label}</span>}
      </div>
    </div>
  )
}

export function MiniGauge({ score, size = 48 }: { score: number; size?: number }) {
  const r = (size - 4) / 2
  const c = Math.PI * 2 * r
  const arc = 0.75
  const dash = c * arc
  const gap = c * (1 - arc)
  const progress = (score / 100) * dash
  const color = score >= 75 ? "#0891b2" : score >= 50 ? "#9333ea" : score >= 25 ? "#d97706" : "#ef4444"

return (
    <div className="relative inline-flex items-center justify-center" style={{ width: size, height: size }}>
      <svg width={size} height={size}>
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="rgba(0,0,0,0.06)" strokeWidth={4} strokeDasharray={`${dash} ${gap}`} strokeLinecap="round" transform={`rotate(135 ${size / 2} ${size / 2})`} />
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={color} strokeWidth={4} strokeDasharray={`${progress} ${c - progress}`} strokeLinecap="round" transform={`rotate(135 ${size / 2} ${size / 2})`} />
      </svg>
      <span className="absolute text-xs font-bold text-foreground">{score}</span>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/gauge/page.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent } from "@/components/ui/card"
import Image from "next/image"
import { submitGaugeAssessment } from "@/app/actions/gauge"
import { GaugeScore } from "@/components/gauge-score"
import {
  ArrowRight,
  ArrowLeft,
  Zap,
  Briefcase,
  GraduationCap,
  Users,
  Rocket,
  Loader2,
  Check,
} from "lucide-react"

const STEPS = [
  { key: "skills", label: "Skills", icon: Zap, desc: "Your core competencies" },
  { key: "experience", label: "Experience", icon: Briefcase, desc: "Professional track record" },
  { key: "education", label: "Education", icon: GraduationCap, desc: "Learning and growth" },
  { key: "network", label: "Network", icon: Users, desc: "Connections and influence" },
  { key: "ambition", label: "Ambition", icon: Rocket, desc: "Drive and vision" },
] as const

export default function GaugeAssessmentPage() {
  const router = useRouter()
  const [step, setStep] = useState(0)
  const [loading, setLoading] = useState(false)
  const [result, setResult] = useState<Record<string, number> | null>(null)

const [skills, setSkills] = useState({ primary: "", secondary: [] as string[], years: 0, certifications: 0 })
  const [experience, setExperience] = useState({ roles: 0, industries: 0, leadership: false, yearsTotal: 0 })
  const [education, setEducation] = useState({ level: "bachelors", field: "", continuous: false, courses: 0 })
  const [network, setNetwork] = useState({ connections: 0, mentors: 0, communities: 0, influence: "medium" })
  const [ambition, setAmbition] = useState({ goals: "", timeline: "1_3_years", commitment: "full_time", vision: "" })

const [secSkillInput, setSecSkillInput] = useState("")
  const addSecSkill = () => {
    if (secSkillInput.trim() && skills.secondary.length < 8) {
      setSkills({ ...skills, secondary: [...skills.secondary, secSkillInput.trim()] })
      setSecSkillInput("")
    }
  }

const handleSubmit = async () => {
    setLoading(true)
    try {
      const scores = await submitGaugeAssessment({ skills, experience, education, network, ambition })
      setResult(scores)
      setStep(5)
    } catch {
      /* noop */
    } finally {
      setLoading(false)
    }
  }

const inputCls = "h-11 border-border bg-background text-sm text-foreground placeholder:text-foreground/30 focus:border-cyan-500/50 focus:ring-0"
  const selectCls = "h-11 w-full rounded-lg border border-border bg-background px-3 text-sm text-foreground focus:border-cyan-500/50 focus:outline-none focus:ring-0 appearance-none"

return (
    <div className="min-h-screen bg-background">
      {/* Progress bar */}
      <div className="sticky top-16 z-30 border-b border-border/60 bg-background/80 backdrop-blur-xl">
        <div className="mx-auto flex max-w-3xl items-center gap-2 px-6 py-4">
          {STEPS.map((s, i) => (
            <button
              key={s.key}
              onClick={() => i < step && step < 5 && setStep(i)}
              className={`flex flex-1 items-center gap-2 rounded-lg px-3 py-2 text-xs font-medium transition-all ${
                i === step ? "bg-cyan-50 text-cyan-700" :
                i < step ? "text-foreground/60 hover:text-foreground/80" :
                "text-foreground/25"
              }`}
            >
              <div className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold ${
                i < step ? "bg-cyan-500 text-white" :
                i === step ? "border border-cyan-400 text-cyan-600" :
                "border border-foreground/15 text-foreground/25"
              }`}>
                {i < step ? <Check className="h-3 w-3" /> : i + 1}
              </div>
              <span className="hidden sm:inline">{s.label}</span>
            </button>
          ))}
        </div>
      </div>

<div className="mx-auto max-w-3xl px-6 py-12">
        {/* Header */}
        {step < 5 && (
          <div className="mb-10">
            <div className="mb-3 flex items-center gap-3">
              <Image src="/images/wonkado-logo.png" alt="Wonkado" width={32} height={32} />
              <span className="text-xs font-semibold uppercase tracking-widest text-cyan-600/60">GAUGE Assessment</span>
            </div>
            <h1 className="text-3xl font-bold text-foreground">{STEPS[step].desc}</h1>
            <p className="mt-2 text-sm text-foreground/45">Step {step + 1} of 5 -- Tell us about your {STEPS[step].label.toLowerCase()}</p>
          </div>
        )}

{/* Step 0: Skills */}
        {step === 0 && (
          <div className="space-y-6">
            <div className="space-y-1.5">
              <Label className="text-xs font-medium text-foreground/60">Primary Skill</Label>
              <Input placeholder="e.g. Machine Learning, Design, Finance" value={skills.primary} onChange={e => setSkills({ ...skills, primary: e.target.value })} className={inputCls} />
            </div>
            <div className="space-y-1.5">
              <Label className="text-xs font-medium text-foreground/60">Secondary Skills</Label>
              <div className="flex gap-2">
                <Input placeholder="Add a skill" value={secSkillInput} onChange={e => setSecSkillInput(e.target.value)} onKeyDown={e => e.key === "Enter" && (e.preventDefault(), addSecSkill())} className={`flex-1 ${inputCls}`} />
                <Button type="button" onClick={addSecSkill} variant="outline">Add</Button>
              </div>
              {skills.secondary.length > 0 && (
                <div className="flex flex-wrap gap-2 pt-2">
                  {skills.secondary.map((s, i) => (
                    <span key={i} className="rounded-full bg-cyan-50 px-3 py-1 text-xs text-cyan-700">
                      {s}
                      <button onClick={() => setSkills({ ...skills, secondary: skills.secondary.filter((_, j) => j !== i) })} className="ml-1.5 text-cyan-400 hover:text-cyan-600">×</button>
                    </span>
                  ))}
                </div>
              )}
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-1.5">
                <Label className="text-xs font-medium text-foreground/60">Years of Experience</Label>
                <Input type="number" min={0} max={50} value={skills.years || ""} onChange={e => setSkills({ ...skills, years: Number(e.target.value) })} className={inputCls} />
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs font-medium text-foreground/60">Certifications</Label>
                <Input type="number" min={0} max={50} value={skills.certifications || ""} onChange={e => setSkills({ ...skills, certifications: Number(e.target.value) })} className={inputCls} />
              </div>
            </div>
          </div>
        )}

{/* Step 1: Experience */}
        {step === 1 && (
          <div className="space-y-6">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-1.5">
                <Label className="text-xs font-medium text-foreground/60">Total Roles Held</Label>
                <Input type="number" min={0} value={experience.roles || ""} onChange={e => setExperience({ ...experience, roles: Number(e.target.value) })} className={inputCls} />
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs font-medium text-foreground/60">Industries Worked In</Label>
                <Input type="number" min={0} value={experience.industries || ""} onChange={e => setExperience({ ...experience, industries: Number(e.target.value) })} className={inputCls} />
              </div>
            </div>
            <div className="space-y-1.5">
              <Label className="text-xs font-medium text-foreground/60">Total Years of Experience</Label>
              <Input type="number" min={0} max={50} value={experience.yearsTotal || ""} onChange={e => setExperience({ ...experience, yearsTotal: Number(e.target.value) })} className={inputCls} />
            </div>
            <label className="flex cursor-pointer items-center gap-3 rounded-xl border border-border p-4 hover:bg-muted/50">
              <input type="checkbox" checked={experience.leadership} onChange={e => setExperience({ ...experience, leadership: e.target.checked })} className="h-4 w-4 rounded border-border bg-background text-cyan-500 focus:ring-0" />
              <div>
                <p className="text-sm text-foreground/80">Leadership experience</p>
                <p className="text-xs text-foreground/40">Have you managed teams or led projects?</p>
              </div>
            </label>
          </div>
        )}

{/* Step 2: Education */}
        {step === 2 && (
          <div className="space-y-6">
            <div className="space-y-1.5">
              <Label className="text-xs font-medium text-foreground/60">Highest Education Level</Label>
              <select value={education.level} onChange={e => setEducation({ ...education, level: e.target.value })} className={selectCls}>
                <option value="high_school">High School</option>
                <option value="self_taught">Self-Taught</option>
                <option value="bachelors">{"Bachelor's Degree"}</option>
                <option value="masters">{"Master's Degree"}</option>
                <option value="phd">PhD / Doctorate</option>
              </select>
            </div>
            <div className="space-y-1.5">
              <Label className="text-xs font-medium text-foreground/60">Field of Study</Label>
              <Input placeholder="e.g. Computer Science, Business" value={education.field} onChange={e => setEducation({ ...education, field: e.target.value })} className={inputCls} />
            </div>
            <div className="space-y-1.5">
              <Label className="text-xs font-medium text-foreground/60">Online Courses / Bootcamps Completed</Label>
              <Input type="number" min={0} value={education.courses || ""} onChange={e => setEducation({ ...education, courses: Number(e.target.value) })} className={inputCls} />
            </div>
            <label className="flex cursor-pointer items-center gap-3 rounded-xl border border-border p-4 hover:bg-muted/50">
              <input type="checkbox" checked={education.continuous} onChange={e => setEducation({ ...education, continuous: e.target.checked })} className="h-4 w-4 rounded border-border bg-background text-cyan-500 focus:ring-0" />
              <div>
                <p className="text-sm text-foreground/80">Continuous learner</p>
                <p className="text-xs text-foreground/40">Do you actively pursue new knowledge and skills?</p>
              </div>
            </label>
          </div>
        )}

{/* Step 3: Network */}
        {step === 3 && (
          <div className="space-y-6">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-1.5">
                <Label className="text-xs font-medium text-foreground/60">Professional Connections</Label>
                <Input type="number" min={0} value={network.connections || ""} onChange={e => setNetwork({ ...network, connections: Number(e.target.value) })} className={inputCls} />
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs font-medium text-foreground/60">Active Mentors</Label>
                <Input type="number" min={0} value={network.mentors || ""} onChange={e => setNetwork({ ...network, mentors: Number(e.target.value) })} className={inputCls} />
              </div>
            </div>
            <div className="space-y-1.5">
              <Label className="text-xs font-medium text-foreground/60">Communities / Groups</Label>
              <Input type="number" min={0} value={network.communities || ""} onChange={e => setNetwork({ ...network, communities: Number(e.target.value) })} className={inputCls} />
            </div>
            <div className="space-y-1.5">
              <Label className="text-xs font-medium text-foreground/60">Influence Level</Label>
              <select value={network.influence} onChange={e => setNetwork({ ...network, influence: e.target.value })} className={selectCls}>
                <option value="low">Low -- Small personal circle</option>
                <option value="medium">Medium -- Known in your field</option>
                <option value="high">High -- Recognized expert</option>
                <option value="thought_leader">Thought Leader -- Industry-wide influence</option>
              </select>
            </div>
          </div>
        )}

{/* Step 4: Ambition */}
        {step === 4 && (
          <div className="space-y-6">
            <div className="space-y-1.5">
              <Label className="text-xs font-medium text-foreground/60">What are your primary goals?</Label>
              <textarea value={ambition.goals} onChange={e => setAmbition({ ...ambition, goals: e.target.value })} placeholder="Describe what you're working toward..." rows={3} className={`${inputCls} h-auto w-full rounded-lg border p-3`} />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-1.5">
                <Label className="text-xs font-medium text-foreground/60">Timeline</Label>
                <select value={ambition.timeline} onChange={e => setAmbition({ ...ambition, timeline: e.target.value })} className={selectCls}>
                  <option value="under_1_year">Under 1 year</option>
                  <option value="1_3_years">1-3 years</option>
                  <option value="3_5_years">3-5 years</option>
                  <option value="5_plus">5+ years</option>
                </select>
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs font-medium text-foreground/60">Commitment Level</Label>
                <select value={ambition.commitment} onChange={e => setAmbition({ ...ambition, commitment: e.target.value })} className={selectCls}>
                  <option value="part_time">Part-Time</option>
                  <option value="full_time">Full-Time</option>
                  <option value="all_in">All-In</option>
                </select>
              </div>
            </div>
            <div className="space-y-1.5">
              <Label className="text-xs font-medium text-foreground/60">Your Vision</Label>
              <textarea value={ambition.vision} onChange={e => setAmbition({ ...ambition, vision: e.target.value })} placeholder="Where do you see yourself in 5 years?" rows={3} className={`${inputCls} h-auto w-full rounded-lg border p-3`} />
            </div>
          </div>
        )}

{/* Step 5: Results */}
        {step === 5 && result && (
          <div className="space-y-10 text-center">
            <div>
              <span className="text-xs font-semibold uppercase tracking-widest text-cyan-600/60">Your GAUGE Score</span>
              <h1 className="mt-2 text-3xl font-bold text-foreground">Assessment Complete</h1>
            </div>
            <div className="flex justify-center">
              <GaugeScore score={result.overall} size={220} strokeWidth={12} label="Overall" />
            </div>
            <div className="grid grid-cols-5 gap-3">
              {[
                { label: "Skills", score: result.skills, color: "from-cyan-50 to-cyan-50/50", text: "text-cyan-700" },
                { label: "Experience", score: result.experience, color: "from-purple-50 to-purple-50/50", text: "text-purple-700" },
                { label: "Education", score: result.education, color: "from-blue-50 to-blue-50/50", text: "text-blue-700" },
                { label: "Network", score: result.network, color: "from-amber-50 to-amber-50/50", text: "text-amber-700" },
                { label: "Ambition", score: result.ambition, color: "from-pink-50 to-pink-50/50", text: "text-pink-700" },
              ].map(s => (
                <Card key={s.label} className={`border-border/60 bg-gradient-to-b ${s.color}`}>
                  <CardContent className="flex flex-col items-center gap-2 p-4">
                    <span className={`text-2xl font-bold ${s.text}`}>{s.score}</span>
                    <span className="text-[10px] uppercase tracking-wider text-foreground/40">{s.label}</span>
                  </CardContent>
                </Card>
              ))}
            </div>
            <Button onClick={() => router.push("/dashboard")} className="rounded-full bg-gradient-to-r from-cyan-500 to-pink-500 px-10 py-6 text-sm font-semibold text-white">
              Go to Dashboard <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        )}

{/* Navigation */}
        {step < 5 && (
          <div className="mt-10 flex items-center justify-between">
            <Button
              variant="outline"
              onClick={() => setStep(Math.max(0, step - 1))}
              disabled={step === 0}
              className="disabled:opacity-30"
            >
              <ArrowLeft className="mr-2 h-4 w-4" /> Back
            </Button>

{step < 4 ? (
              <Button onClick={() => setStep(step + 1)} className="rounded-full bg-gradient-to-r from-cyan-500 to-pink-500 px-8 text-sm font-semibold text-white">
                Continue <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            ) : (
              <Button onClick={handleSubmit} disabled={loading} className="rounded-full bg-gradient-to-r from-cyan-500 to-pink-500 px-8 text-sm font-semibold text-white">
                {loading ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Analyzing...</> : <>Complete Assessment <Zap className="ml-2 h-4 w-4" /></>}
              </Button>
            )}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/images/founder-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/founder-2-T3L9lgNNNW1zNI91Z4evJB9u3ROQTh.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/founder-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/founder-1-koRb2euXBZIM3NnOydHMt46uZNigmj.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/navigation.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { createClient } from "@/lib/supabase/server"
import { LogOut, TrendingUp, Wallet, LayoutDashboard, Users, Zap } from "lucide-react"
import Image from "next/image"

export async function Navigation() {
  const supabase = await createClient()
  const {
    data: { user },
  } = await supabase.auth.getUser()

const handleSignOut = async () => {
    "use server"
    const supabase = await createClient()
    await supabase.auth.signOut()
  }

return (
    <nav className="fixed inset-x-0 top-0 z-50 border-b border-border/60 bg-background/80 backdrop-blur-2xl">
      <div className="container mx-auto px-6">
        <div className="flex h-16 items-center justify-between">
          <Link href="/" className="group flex items-center gap-3">
            <Image
              src="/images/wonkado-logo.png"
              alt="Wonkado"
              width={36}
              height={36}
              className="h-9 w-9 transition-transform duration-300 group-hover:scale-105"
            />
            <span className="text-sm font-bold tracking-tight text-foreground/80">WONKADO</span>
          </Link>

{user && (
            <div className="hidden items-center gap-0.5 md:flex">
              {[
                { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
                { href: "/dashboard/gauge", label: "GAUGE", icon: Zap },
                { href: "/market", label: "Market", icon: TrendingUp },
                { href: "/portfolio", label: "Portfolio", icon: Users },
                { href: "/wallet", label: "Wallet", icon: Wallet },
              ].map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  className="flex items-center gap-2 rounded-lg px-4 py-2 text-[11px] tracking-wide text-foreground/50 transition-all duration-300 hover:bg-foreground/[0.04] hover:text-foreground/80"
                >
                  <link.icon className="h-3.5 w-3.5" />
                  {link.label}
                </Link>
              ))}
            </div>
          )}

<div className="flex items-center gap-3">
            {!user && (
              <Link href="/founders" className="hidden text-[11px] tracking-wide text-foreground/40 transition-all hover:text-foreground/70 md:inline-block">
                Founders
              </Link>
            )}
            {user ? (
              <form action={handleSignOut}>
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-[11px] text-foreground/40 hover:bg-foreground/[0.04] hover:text-foreground/70"
                >
                  <LogOut className="mr-2 h-3.5 w-3.5" />
                  Sign Out
                </Button>
              </form>
            ) : (
              <>
                <Button
                  asChild
                  variant="ghost"
                  size="sm"
                  className="text-[11px] text-foreground/50 hover:bg-foreground/[0.04] hover:text-foreground/80"
                >
                  <Link href="/auth/login">Sign In</Link>
                </Button>
                <Button
                  asChild
                  size="sm"
                  className="rounded-full border-0 bg-gradient-to-r from-cyan-500 to-pink-500 px-5 text-[11px] font-semibold text-white shadow-md shadow-cyan-500/15"
                >
                  <Link href="/auth/sign-up">Get Started</Link>
                </Button>
              </>
            )}
          </div>
        </div>
      </div>
    </nav>
  )
}
[V0_FILE]jpg:file="public/images/qube-talent.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/qube-talent-ZsMHghHlfjhnUjsNFZTOCXvSNr8b4m.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/founders/page.tsx" isMerged="true"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { ArrowRight, Linkedin, Twitter, Globe, Target, Heart, Lightbulb, Shield } from "lucide-react"

const founders = [
  {
    name: "Pushpak Kypuram",
    role: "Co-Founder & CEO",
    image: "/images/founder-1.jpg",
    bio: "Visionary entrepreneur who conceived the idea of a human stock exchange. Pushpak believes every individual has untapped potential worth investing in. With a background in finance and technology, he set out to build a platform that democratizes personal investment and turns human potential into a tradeable asset.",
    quote: "Every person is a company of one. We just gave them a stock ticker.",
    linkedin: "#",
    twitter: "#",
  },
  {
    name: "Prashant Chandra",
    role: "Co-Founder & CTO",
    image: "/images/founder-2.jpg",
    bio: "The technical architect behind The QUBE's Architectural Wonderland. Prashant leads the engineering of GAUGE, LIFE BAZAAR, and STASH -- the three pillars that power the Wonkado ecosystem. His expertise in AI, distributed systems, and data privacy ensures the platform is both intelligent and secure.",
    quote: "Technology should reveal your value, not define it.",
    linkedin: "#",
    twitter: "#",
  },
]

const values = [
  {
    icon: Target,
    title: "Mission",
    desc: "To create the world's first marketplace where human potential is valued, traded, and invested in -- enabling anyone to raise capital based on who they are and who they can become.",
    color: "text-cyan-600",
    bg: "bg-cyan-50",
  },
  {
    icon: Heart,
    title: "Humanity First",
    desc: "We believe technology should serve people, not the other way around. Every feature we build is designed to empower individuals and foster genuine human connection.",
    color: "text-pink-500",
    bg: "bg-pink-50",
  },
  {
    icon: Lightbulb,
    title: "Innovation",
    desc: "GAUGE uses AI to assess real-world potential. LIFE BAZAAR creates a fair market. STASH keeps your data encrypted and in your control. This is finance reimagined.",
    color: "text-amber-600",
    bg: "bg-amber-50",
  },
  {
    icon: Shield,
    title: "Trust & Privacy",
    desc: "Your data is yours. STASH ensures all personal information is encrypted and user-owned. We never sell data -- we help you monetize your own potential on your own terms.",
    color: "text-purple-600",
    bg: "bg-purple-50",
  },
]

export default function FoundersPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Hero */}
      <section className="relative overflow-hidden border-b border-border/60">
        <div className="absolute inset-0 bg-gradient-to-b from-cyan-50/50 via-transparent to-transparent" />
        <div className="relative mx-auto max-w-5xl px-6 pb-20 pt-24 text-center">
          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-border bg-card px-4 py-1.5">
            <Image src="/images/wonkado-logo.png" alt="Wonkado" width={20} height={20} />
            <span className="text-xs font-medium text-foreground/50">The Founders</span>
          </div>
          <h1 className="text-balance text-4xl font-bold leading-tight text-foreground md:text-5xl">
            Building the Future of{" "}
            <span className="bg-gradient-to-r from-cyan-600 to-pink-500 bg-clip-text text-transparent">
              Human Investment
            </span>
          </h1>
          <p className="mx-auto mt-5 max-w-2xl text-pretty text-base leading-relaxed text-foreground/45">
            Wonkado was born from a simple but radical idea: what if you could invest in people the way you invest in companies? Meet the team making that vision a reality.
          </p>
        </div>
      </section>

{/* Founders */}
      <section className="mx-auto max-w-5xl px-6 py-20">
        <div className="space-y-16">
          {founders.map((f, i) => (
            <div key={f.name} className={`flex flex-col items-center gap-10 lg:flex-row ${i % 2 === 1 ? "lg:flex-row-reverse" : ""}`}>
              <div className="relative shrink-0">
                <div className="relative h-72 w-72 overflow-hidden rounded-3xl border border-border/60 shadow-xl">
                  <Image src={f.image} alt={f.name} fill className="object-cover" />
                  <div className="absolute inset-0 bg-gradient-to-t from-foreground/30 to-transparent" />
                </div>
              </div>
              <div className="flex-1 space-y-5">
                <div>
                  <h2 className="text-2xl font-bold text-foreground">{f.name}</h2>
                  <p className="mt-1 text-sm font-medium text-cyan-600">{f.role}</p>
                </div>
                <p className="text-sm leading-relaxed text-foreground/50">{f.bio}</p>
                <blockquote className="border-l-2 border-cyan-400 pl-4">
                  <p className="text-sm italic text-foreground/60">{`"${f.quote}"`}</p>
                </blockquote>
                <div className="flex gap-3">
                  {[
                    { href: f.linkedin, icon: Linkedin },
                    { href: f.twitter, icon: Twitter },
                    { href: "#", icon: Globe },
                  ].map(({ href, icon: Icon }, idx) => (
                    <a key={idx} href={href} className="flex h-9 w-9 items-center justify-center rounded-lg border border-border text-foreground/35 transition-colors hover:border-cyan-300 hover:text-cyan-600">
                      <Icon className="h-4 w-4" />
                    </a>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

{/* The QUBE Programs */}
      <section className="border-t border-border/60">
        <div className="mx-auto max-w-5xl px-6 py-20">
          <div className="mb-10 text-center">
            <p className="mb-2 text-[11px] font-bold uppercase tracking-[0.35em] text-cyan-600/60">The QUBE</p>
            <h2 className="text-3xl font-bold text-foreground">From Unseen to Unstoppable</h2>
            <p className="mx-auto mt-3 max-w-2xl text-sm leading-relaxed text-foreground/45">
              The QUBE is creating an alternative approach to talent skilling and hiring in the Gen AI space by
              empowering non-traditional talent pools.
            </p>
          </div>

<div className="grid gap-5 sm:grid-cols-2">
            <Card className="border-border/60 shadow-sm transition-all duration-300 hover:shadow-md">
              <CardContent className="p-6">
                <span className="mb-4 inline-block rounded-full border border-cyan-200 bg-cyan-50 px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-cyan-700">
                  Training
                </span>
                <h3 className="text-base font-semibold text-foreground/80">Industry-Centric AI Masterclass</h3>
                <p className="mt-2 text-xs leading-relaxed text-foreground/45">
                  Comprehensive AI & Data Analytics programmes designed specifically for industry needs, preparing the
                  next generation of talent for the Gen AI revolution.
                </p>
              </CardContent>
            </Card>
            <Card className="border-border/60 shadow-sm transition-all duration-300 hover:shadow-md">
              <CardContent className="p-6">
                <span className="mb-4 inline-block rounded-full border border-pink-200 bg-pink-50 px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-pink-700">
                  Recruitment
                </span>
                <h3 className="text-base font-semibold text-foreground/80">10 Unique Talent Pools</h3>
                <p className="mt-2 text-xs leading-relaxed text-foreground/45">
                  Recruitment and up-skilling from non-traditional talent pools, unlocking hidden potential in overlooked communities.
                </p>
              </CardContent>
            </Card>
          </div>

<div className="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-4">
            {[
              { val: "4.5M", lbl: "New Jobs by 2030" },
              { val: "400+", lbl: "AI Courses Available" },
              { val: "$120B", lbl: "Market Size by 2030" },
              { val: "10", lbl: "Talent Pools" },
            ].map((s) => (
              <div key={s.lbl} className="rounded-xl border border-border/60 bg-muted/40 p-4 text-center">
                <p className="text-xl font-bold text-foreground">{s.val}</p>
                <p className="mt-1 text-[10px] uppercase tracking-wider text-foreground/35">{s.lbl}</p>
              </div>
            ))}
          </div>

<div className="mt-8 text-center">
            <a
              href="https://www.theqube.world"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 text-xs text-cyan-600/60 transition-colors hover:text-cyan-600"
            >
              <Globe className="h-3.5 w-3.5" />
              Visit theqube.world
              <ArrowRight className="h-3 w-3" />
            </a>
          </div>
        </div>
      </section>

{/* Values */}
      <section className="border-t border-border/60 bg-gradient-to-b from-background to-cyan-50/30">
        <div className="mx-auto max-w-5xl px-6 py-20">
          <div className="mb-12 text-center">
            <h2 className="text-3xl font-bold text-foreground">What Drives Us</h2>
            <p className="mt-3 text-sm text-foreground/45">The principles behind Wonkado and the Humane Stock Exchange.</p>
          </div>
          <div className="grid gap-5 sm:grid-cols-2">
            {values.map(v => (
              <Card key={v.title} className="border-border/60 shadow-sm transition-all duration-300 hover:shadow-md">
                <CardContent className="p-6">
                  <div className={`mb-4 flex h-10 w-10 items-center justify-center rounded-xl ${v.bg}`}>
                    <v.icon className={`h-5 w-5 ${v.color}`} />
                  </div>
                  <h3 className="text-sm font-semibold text-foreground/80">{v.title}</h3>
                  <p className="mt-2 text-xs leading-relaxed text-foreground/45">{v.desc}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* CTA */}
      <section className="border-t border-border/60">
        <div className="mx-auto max-w-3xl px-6 py-20 text-center">
          <h2 className="text-2xl font-bold text-foreground">Ready to join the movement?</h2>
          <p className="mt-3 text-sm text-foreground/45">
            Be part of the revolution in human investment. List yourself, discover your GAUGE score, and start trading potential.
          </p>
          <div className="mt-8 flex justify-center gap-4">
            <Button asChild className="rounded-full bg-gradient-to-r from-cyan-500 to-pink-500 px-10 py-6 text-sm font-semibold text-white shadow-lg shadow-cyan-500/15">
              <Link href="/market">
                Trade <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
            <Button asChild variant="outline" className="rounded-full px-10 py-6 text-sm">
              <Link href="/auth/sign-up">Get Started</Link>
            </Button>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/company-card.tsx" isMerged="true"
import Link from "next/link"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { TrendingUp, TrendingDown } from "lucide-react"
import type { CompanyWithShares } from "@/lib/types"

interface CompanyCardProps {
  company: CompanyWithShares
}

export function CompanyCard({ company }: CompanyCardProps) {
  const priceChange = Math.random() * 20 - 10
  const isPositive = priceChange > 0

return (
    <Link href={`/trade/${company.ticker_symbol}`}>
      <Card className="group h-full cursor-pointer overflow-hidden border-border/60 bg-card shadow-sm transition-all duration-500 hover:border-border hover:shadow-md">
        <CardContent className="p-5">
          <div className="mb-4 flex items-start justify-between">
            <div className="flex items-center gap-3">
              <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-500 to-pink-500 shadow-md shadow-cyan-500/10">
                <span className="text-sm font-bold text-white">{company.ticker_symbol.slice(0, 2)}</span>
              </div>
              <div>
                <h3 className="text-sm font-semibold text-foreground/80 transition-colors group-hover:text-foreground">
                  {company.company_name}
                </h3>
                <p className="text-[11px] text-foreground/40">{company.display_name}</p>
              </div>
            </div>
            <Badge variant="secondary" className="font-mono text-[10px]">
              {company.ticker_symbol}
            </Badge>
          </div>

{company.industry && (
            <p className="mb-3 text-[11px] text-foreground/35">{company.industry}</p>
          )}

<div className="flex items-end justify-between border-t border-border/60 pt-4">
            <div>
              <p className="text-[10px] text-foreground/35">Share Price</p>
              <p className="text-xl font-bold text-foreground">${company.shares.share_price}</p>
            </div>
            <div className="text-right">
              <div
                className={`inline-flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-medium ${
                  isPositive ? "bg-emerald-50 text-emerald-600" : "bg-red-50 text-red-500"
                }`}
              >
                {isPositive ? <TrendingUp className="h-3.5 w-3.5" /> : <TrendingDown className="h-3.5 w-3.5" />}
                {isPositive ? "+" : ""}
                {priceChange.toFixed(2)}%
              </div>
              <p className="mt-1 text-[10px] text-foreground/30">
                MCap ${(company.shares.market_cap / 1000000).toFixed(1)}M
              </p>
            </div>
          </div>

<div className="mt-4 flex justify-center">
            <span className="rounded-full bg-gradient-to-r from-cyan-50 to-pink-50 px-4 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-cyan-600 opacity-0 transition-all duration-300 group-hover:opacity-100">
              Trade Now
            </span>
          </div>
        </CardContent>
      </Card>
    </Link>
  )
}
[V0_FILE]typescriptreact:file="app/auth/sign-up/page.tsx" isMerged="true"
"use client"

import type React from "react"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import Link from "next/link"
import Image from "next/image"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { ArrowRight, Mail, Lock, User, Check } from "lucide-react"

export default function SignUpPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [displayName, setDisplayName] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

const handleSignUp = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)
    if (password !== confirmPassword) { setError("Passwords do not match"); setIsLoading(false); return }
    if (password.length < 6) { setError("Password must be at least 6 characters"); setIsLoading(false); return }

const supabase = createClient()

let lastError: unknown = null
    for (let attempt = 0; attempt < 3; attempt++) {
      try {
        const { error: authError } = await supabase.auth.signUp({
          email,
          password,
          options: {
            emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/dashboard`,
            data: { display_name: displayName },
          },
        })
        if (authError) throw authError
        router.push("/auth/sign-up-success")
        return
      } catch (err: unknown) {
        lastError = err
        const msg = err instanceof Error ? err.message : ""
        if (msg === "Load failed" || msg === "Failed to fetch") {
          await new Promise((r) => setTimeout(r, 500 * (attempt + 1)))
          continue
        }
        break
      }
    }

setError(lastError instanceof Error ? lastError.message : "An error occurred")
    setIsLoading(false)
  }

const perks = [
    "Discover your true market value",
    "Let others invest in your potential",
    "Trade shares of talented individuals",
    "Track growth with real-time analytics",
  ]

const inputCls =
    "h-12 border-border bg-background pl-10 text-sm text-foreground placeholder:text-foreground/30 focus:border-cyan-500/50 focus:ring-0"

return (
    <div className="flex min-h-screen bg-background">
      {/* Left -- visual */}
      <div className="relative hidden items-center justify-center overflow-hidden bg-gradient-to-br from-cyan-500 to-pink-500 lg:flex lg:w-[45%]">
        <div className="absolute inset-0 bg-[url('/images/auth-visual.jpg')] bg-cover bg-center opacity-20 mix-blend-overlay" />
        <div className="relative z-10 max-w-sm px-12">
          <Image src="/images/wonkado-logo.png" alt="Wonkado" width={80} height={80} className="mb-8 drop-shadow-2xl" />
          <h2 className="text-3xl font-bold text-white">Start Trading Your Potential</h2>
          <p className="mt-3 text-sm text-white/70">
            Join thousands who have discovered their true market value on Wonkado.
          </p>
          <div className="mt-10 space-y-3">
            {perks.map((p, i) => (
              <div key={i} className="flex items-center gap-3 rounded-xl border border-white/20 bg-white/10 p-3.5 backdrop-blur-xl">
                <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-white/20">
                  <Check className="h-3.5 w-3.5 text-white" />
                </div>
                <span className="text-xs text-white/90">{p}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

{/* Right -- form */}
      <div className="flex w-full items-center justify-center overflow-y-auto px-6 py-12 lg:w-[55%]">
        <div className="w-full max-w-md space-y-7">
          <div className="lg:hidden">
            <Link href="/" className="inline-flex items-center gap-3">
              <Image src="/images/wonkado-logo.png" alt="Wonkado" width={40} height={40} className="h-10 w-10" />
              <span className="text-sm font-bold text-foreground/80">WONKADO</span>
            </Link>
          </div>

<div>
            <h1 className="text-2xl font-bold text-foreground">Create your account</h1>
            <p className="mt-1 text-sm text-foreground/50">Join the exchange and start trading.</p>
          </div>

<form onSubmit={handleSignUp} className="space-y-4">
            <div className="space-y-1.5">
              <Label className="text-xs font-medium text-foreground/60">Full Name</Label>
              <div className="relative">
                <User className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground/30" />
                <Input type="text" placeholder="John Doe" required value={displayName} onChange={(e) => setDisplayName(e.target.value)} className={inputCls} />
              </div>
            </div>

<div className="space-y-1.5">
              <Label className="text-xs font-medium text-foreground/60">Email</Label>
              <div className="relative">
                <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground/30" />
                <Input type="email" placeholder="you@example.com" required value={email} onChange={(e) => setEmail(e.target.value)} className={inputCls} />
              </div>
            </div>

<div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label className="text-xs font-medium text-foreground/60">Password</Label>
                <div className="relative">
                  <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground/30" />
                  <Input type="password" placeholder="Min 6 chars" required value={password} onChange={(e) => setPassword(e.target.value)} className={inputCls} />
                </div>
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs font-medium text-foreground/60">Confirm Password</Label>
                <div className="relative">
                  <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground/30" />
                  <Input type="password" placeholder="Confirm" required value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} className={inputCls} />
                </div>
              </div>
            </div>

{error && (
              <div className="rounded-lg border border-red-200 bg-red-50 p-3">
                <p className="text-xs text-red-600">{error}</p>
              </div>
            )}

<Button
              type="submit"
              disabled={isLoading}
              className="group h-12 w-full rounded-xl border-0 bg-gradient-to-r from-cyan-500 to-pink-500 text-sm font-semibold text-white shadow-lg shadow-cyan-500/20 transition-all hover:shadow-xl hover:shadow-cyan-500/30"
            >
              {isLoading ? "Creating account..." : (
                <>
                  Create Account
                  <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                </>
              )}
            </Button>
          </form>

<p className="text-center text-xs text-foreground/40">
            Already have an account?{" "}
            <Link href="/auth/login" className="font-medium text-cyan-600 hover:text-cyan-700">
              Sign in
            </Link>
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import Link from "next/link"
import Image from "next/image"
import { useState, useEffect, useRef, type ReactNode } from "react"
import {
  ArrowRight,
  Shield,
  Zap,
  Activity,
  Layers,
  Database,
  Brain,
  Cpu,
  Lock,
  Globe,
  ChevronDown,
  TrendingUp,
  Users,
  BarChart3,
  Fingerprint,
  Eye,
  Trash2,
} from "lucide-react"

/* ── helpers ─────────────────────────────────────────── */

function useInView(threshold = 0.2) {
  const ref = useRef<HTMLDivElement>(null)
  const [visible, setVisible] = useState(false)
  useEffect(() => {
    const el = ref.current
    if (!el) return
    const obs = new IntersectionObserver(([e]) => e.isIntersecting && setVisible(true), { threshold })
    obs.observe(el)
    return () => obs.disconnect()
  }, [threshold])
  return { ref, visible }
}

function Reveal({ children, className = "", delay = 0 }: { children: ReactNode; className?: string; delay?: number }) {
  const { ref, visible } = useInView()
  return (
    <div
      ref={ref}
      className={className}
      style={{
        opacity: visible ? 1 : 0,
        transform: visible ? "translateY(0)" : "translateY(32px)",
        transition: `opacity 0.8s cubic-bezier(.16,1,.3,1) ${delay}ms, transform 0.8s cubic-bezier(.16,1,.3,1) ${delay}ms`,
      }}
    >
      {children}
    </div>
  )
}

function Counter({ end, suffix = "", prefix = "" }: { end: number; suffix?: string; prefix?: string }) {
  const [n, setN] = useState(0)
  const ref = useRef<HTMLSpanElement>(null)
  const done = useRef(false)
  useEffect(() => {
    const el = ref.current
    if (!el) return
    const obs = new IntersectionObserver(
      ([e]) => {
        if (e.isIntersecting && !done.current) {
          done.current = true
          let s = 0
          const dur = 2200
          const tick = (ts: number) => {
            if (!s) s = ts
            const p = Math.min((ts - s) / dur, 1)
            setN(Math.floor((1 - Math.pow(1 - p, 4)) * end))
            if (p < 1) requestAnimationFrame(tick)
          }
          requestAnimationFrame(tick)
        }
      },
      { threshold: 0.5 },
    )
    obs.observe(el)
    return () => obs.disconnect()
  }, [end])
  return (
    <span ref={ref}>
      {prefix}
      {n.toLocaleString()}
      {suffix}
    </span>
  )
}

/* ── ticker data ─────────────────────────────────────── */
const tickers = [
  { sym: "SCHEN", price: "127.45", chg: "+12.3%" },
  { sym: "MJOHN", price: "89.20", chg: "+8.7%" },
  { sym: "ELROD", price: "234.80", chg: "+15.2%" },
  { sym: "KWANG", price: "156.30", chg: "+9.8%" },
  { sym: "TPATEL", price: "98.75", chg: "+6.4%" },
  { sym: "JSMITH", price: "145.60", chg: "+11.1%" },
  { sym: "ABROWN", price: "178.90", chg: "+7.2%" },
  { sym: "LWILSON", price: "312.45", chg: "+18.9%" },
]

/* ── architecture data ───────────────────────────────── */
const layers = [
  {
    title: "Ingestion Layer",
    sub: "A Whirlwind Tour of Data Entry Points",
    body: "The ingestion layer is like a data traffic conductor, expertly juggling streaming, batch processing, and API gateways to blend various data sources into the trading platform with flawless finesse.",
    Icon: Database,
    color: "#00D4FF",
  },
  {
    title: "Storage Layer",
    sub: "Data Repository Overview",
    body: "Utilises hot, warm, and cold storage solutions to efficiently manage and retrieve data, ensuring optimal performance and cost-effectiveness for our trading platform.",
    Icon: Layers,
    color: "#00B4D8",
  },
  {
    title: "AI / LLM Models",
    sub: "Brilliant Choices with Tech Magic",
    body: "Using cutting-edge generative AI and LLMs, we supercharge your trading game with insights as sharp as a wizard's hat and predictions as on-point as a fortune teller's crystal ball, all personalised just for you.",
    Icon: Brain,
    color: "#FF0080",
  },
  {
    title: "Processing & Analytics",
    sub: "Number Crunching & Performance Power-Ups",
    body: "Real-time analytics with Spark Streaming, batch processing for feature engineering, and an ML feature store keeping the model party consistent and groovy.",
    Icon: Cpu,
    color: "#FF4DA6",
  },
]

/* ── exchange floor types ────────────────────────────── */
const traders = [
  { name: "Sarah C.", ticker: "SCHEN", gauge: 87, img: "/images/professional-asian-woman-headshot.jpg" },
  { name: "Marcus J.", ticker: "MJOHN", gauge: 92, img: "/images/professional-black-man-headshot.png" },
  { name: "Elena R.", ticker: "ELROD", gauge: 78, img: "/images/professional-latina-woman-headshot.png" },
  { name: "Kim W.", ticker: "KWANG", gauge: 95, img: "/images/professional-asian-woman-headshot.jpg" },
  { name: "Tanvi P.", ticker: "TPATEL", gauge: 83, img: "/images/professional-latina-woman-headshot.png" },
  { name: "James S.", ticker: "JSMITH", gauge: 71, img: "/images/professional-black-man-headshot.png" },
]

const tradeEvents = [
  { buyer: "Alex M.", seller: "SCHEN", shares: 150, price: 12.74, type: "buy" as const },
  { buyer: "Priya K.", seller: "MJOHN", shares: 80, price: 8.92, type: "buy" as const },
  { buyer: "ELROD", seller: "David L.", shares: 200, price: 23.48, type: "sell" as const },
  { buyer: "Chen W.", seller: "KWANG", shares: 300, price: 15.63, type: "buy" as const },
  { buyer: "TPATEL", seller: "Mika T.", shares: 120, price: 9.87, type: "sell" as const },
  { buyer: "Jordan B.", seller: "JSMITH", shares: 250, price: 14.56, type: "buy" as const },
  { buyer: "Nina F.", seller: "SCHEN", shares: 175, price: 12.85, type: "buy" as const },
  { buyer: "MJOHN", seller: "Raj P.", shares: 90, price: 8.95, type: "sell" as const },
]

function LiveExchangeFloor() {
  const [activeTrades, setActiveTrades] = useState<number[]>([])
  const [feedIndex, setFeedIndex] = useState(0)
  const [particles, setParticles] = useState<{ id: number; x: number; y: number; dx: number; dy: number; color: string }[]>([])

/* rotate trade feed */
  useEffect(() => {
    const iv = setInterval(() => setFeedIndex((p) => (p + 1) % tradeEvents.length), 2200)
    return () => clearInterval(iv)
  }, [])

/* random trade "pulse" on traders */
  useEffect(() => {
    const iv = setInterval(() => {
      const idx = Math.floor(Math.random() * traders.length)
      setActiveTrades((p) => [...p, idx])
      setTimeout(() => setActiveTrades((p) => p.filter((i) => i !== idx)), 1800)
    }, 1400)
    return () => clearInterval(iv)
  }, [])

/* connection particles */
  useEffect(() => {
    let id = 0
    const iv = setInterval(() => {
      const colors = ["#00D4FF", "#FF0080", "#00D4FF", "#FF0080", "#FFD700"]
      setParticles((p) => [
        ...p.slice(-14),
        {
          id: id++,
          x: 10 + Math.random() * 80,
          y: 10 + Math.random() * 80,
          dx: (Math.random() - 0.5) * 40,
          dy: (Math.random() - 0.5) * 40,
          color: colors[Math.floor(Math.random() * colors.length)],
        },
      ])
    }, 600)
    return () => clearInterval(iv)
  }, [])

const visibleTrades = [
    tradeEvents[feedIndex % tradeEvents.length],
    tradeEvents[(feedIndex + 1) % tradeEvents.length],
    tradeEvents[(feedIndex + 2) % tradeEvents.length],
    tradeEvents[(feedIndex + 3) % tradeEvents.length],
  ]

return (
    <div className="relative">
      {/* live indicator */}
      <div className="mb-8 flex items-center justify-center gap-2">
        <span className="relative flex h-2.5 w-2.5">
          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
          <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-emerald-400" />
        </span>
        <span className="text-[11px] font-semibold uppercase tracking-[0.3em] text-emerald-400/80">Live Activity</span>
      </div>

<div className="grid gap-6 lg:grid-cols-5">
        {/* ── trader avatars ring ── */}
        <div className="relative col-span-3 flex min-h-[380px] items-center justify-center rounded-2xl border border-border/40 bg-muted/30">
          {/* particles */}
          {particles.map((pt) => (
            <div
              key={pt.id}
              className="absolute h-1 w-1 rounded-full"
              style={{
                left: `${pt.x}%`,
                top: `${pt.y}%`,
                background: pt.color,
                opacity: 0.4,
                boxShadow: `0 0 6px ${pt.color}`,
                transform: `translate(${pt.dx}px, ${pt.dy}px)`,
                transition: "transform 3s linear, opacity 3s ease-out",
              }}
            />
          ))}

{/* connection lines */}
          <svg className="pointer-events-none absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
            {traders.map((_, i) => {
              const a1 = (i / traders.length) * Math.PI * 2 - Math.PI / 2
              const a2 = ((i + 2) / traders.length) * Math.PI * 2 - Math.PI / 2
              const r = 38
              const cx = 50, cy = 50
              return (
                <line
                  key={i}
                  x1={`${cx + Math.cos(a1) * r}%`}
                  y1={`${cy + Math.sin(a1) * r}%`}
                  x2={`${cx + Math.cos(a2) * r}%`}
                  y2={`${cy + Math.sin(a2) * r}%`}
                  stroke={activeTrades.includes(i) ? "#00D4FF" : "rgba(0,0,0,0.06)"}
                  strokeWidth={activeTrades.includes(i) ? "1.5" : "0.5"}
                  strokeDasharray="6 6"
                  style={{ transition: "stroke 0.6s, stroke-width 0.6s" }}
                />
              )
            })}
          </svg>

{/* center pulse */}
          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
            <div className="flex h-16 w-16 items-center justify-center rounded-full border border-border/50 bg-background shadow-lg backdrop-blur-xl">
              <Image src="/images/wonkado-logo.png" alt="" width={32} height={32} />
            </div>
            <div className="absolute inset-0 animate-ping rounded-full border border-cyan-400/20" style={{ animationDuration: "3s" }} />
          </div>

{/* orbiting traders */}
          {traders.map((t, i) => {
            const angle = (i / traders.length) * 360
            const isActive = activeTrades.includes(i)
            return (
              <div
                key={t.ticker}
                className="absolute"
                style={{
                  left: "50%",
                  top: "50%",
                  transform: `rotate(${angle}deg) translateX(140px) rotate(-${angle}deg)`,
                }}
              >
                <div
                  className="flex flex-col items-center gap-1 transition-all duration-500"
                  style={{
                    transform: isActive ? "scale(1.15)" : "scale(1)",
                    filter: isActive ? "drop-shadow(0 0 12px rgba(0,212,255,0.5))" : "none",
                  }}
                >
                  <div className={`relative h-11 w-11 overflow-hidden rounded-full border-2 transition-colors duration-500 ${isActive ? "border-cyan-400" : "border-border"}`}>
                    <Image src={t.img} alt={t.name} fill className="object-cover" />
                    {isActive && (
                      <div className="absolute inset-0 animate-pulse bg-cyan-400/10" />
                    )}
                  </div>
                  <span className={`text-[9px] font-bold tracking-wider transition-colors duration-500 ${isActive ? "text-cyan-500" : "text-foreground/55"}`}>
                    {t.ticker}
                  </span>
                  {isActive && (
                    <span className="animate-fade-in-up rounded-full bg-emerald-400/20 px-2 py-0.5 text-[8px] font-bold text-emerald-400">
                      TRADING
                    </span>
                  )}
                </div>
              </div>
            )
          })}
        </div>

{/* ── live trade feed ── */}
        <div className="col-span-2 flex flex-col gap-3">
          <div className="rounded-2xl border border-border/40 bg-muted/30 p-5">
            <div className="mb-4 flex items-center justify-between">
              <h3 className="text-sm font-semibold text-foreground/70">Order Flow</h3>
              <span className="rounded-full bg-cyan-400/10 px-2.5 py-0.5 text-[9px] font-bold uppercase tracking-wider text-cyan-400/80">
                Live
              </span>
            </div>
            <div className="space-y-2">
              {visibleTrades.map((trade, i) => (
                <div
                  key={`${trade.buyer}-${trade.seller}-${i}`}
                  className="flex items-center gap-3 rounded-xl border border-border/30 bg-background p-3 transition-all duration-500"
                  style={{
                    opacity: i === 0 ? 1 : 0.7 - i * 0.15,
                    transform: `scale(${1 - i * 0.02})`,
                  }}
                >
                  <div className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${trade.type === "buy" ? "bg-emerald-400/10" : "bg-pink-400/10"}`}>
                    <TrendingUp className={`h-4 w-4 ${trade.type === "buy" ? "text-emerald-400" : "rotate-180 text-pink-400"}`} />
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-1.5">
                      <span className="text-[10px] font-semibold text-foreground/70">{trade.buyer}</span>
                      <ArrowRight className="h-2.5 w-2.5 text-foreground/20" />
                      <span className="text-[10px] font-bold text-cyan-600">{trade.seller}</span>
                    </div>
                    <p className="text-[9px] text-foreground/55">
                      {trade.shares} shares @ ${trade.price}
                    </p>
                  </div>
                  <span className={`text-xs font-bold ${trade.type === "buy" ? "text-emerald-400/80" : "text-pink-400/80"}`}>
                    ${(trade.shares * trade.price).toLocaleString(undefined, { maximumFractionDigits: 0 })}
                  </span>
                </div>
              ))}
            </div>
          </div>

{/* mini stats */}
          <div className="grid grid-cols-2 gap-3">
            <div className="rounded-xl border border-border/40 bg-muted/30 p-4 text-center">
              <p className="text-[10px] uppercase tracking-wider text-foreground/55">Trades Today</p>
              <p className="mt-1 text-2xl font-bold text-foreground">
                <Counter end={2847} />
              </p>
            </div>
            <div className="rounded-xl border border-border/40 bg-muted/30 p-4 text-center">
              <p className="text-[10px] uppercase tracking-wider text-foreground/55">Volume</p>
              <p className="mt-1 text-2xl font-bold text-emerald-600">
                $<Counter end={1200000} suffix="" />
              </p>
            </div>
          </div>

{/* new arrivals */}
          <div className="rounded-2xl border border-border/40 bg-muted/30 p-5">
            <h3 className="mb-3 text-sm font-semibold text-foreground/70">New Arrivals</h3>
            <div className="flex -space-x-2.5">
              {traders.slice(0, 5).map((t, i) => (
                <div
                  key={t.ticker}
                  className="relative h-9 w-9 overflow-hidden rounded-full border-2 border-background transition-transform duration-300 hover:z-10 hover:scale-125"
                  style={{ animationDelay: `${i * 200}ms` }}
                >
                  <Image src={t.img} alt={t.name} fill className="object-cover" />
                </div>
              ))}
              <div className="flex h-9 w-9 items-center justify-center rounded-full border-2 border-background bg-gradient-to-br from-cyan-400/20 to-pink-500/20 text-[10px] font-bold text-foreground/65">
                +1.5K
              </div>
            </div>
            <p className="mt-3 text-[10px] leading-relaxed text-foreground/55">
              <span className="font-semibold text-cyan-600">47 new listings</span> in the last 24 hours from across 12 countries
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}

/* ══════════════════════════════════════════════════════ */

export default function HomePage() {
  const [arch, setArch] = useState(0)
  const [mouse, setMouse] = useState({ x: 0.5, y: 0.5 })

useEffect(() => {
    const h = (e: MouseEvent) => setMouse({ x: e.clientX / innerWidth, y: e.clientY / innerHeight })
    addEventListener("mousemove", h)
    return () => removeEventListener("mousemove", h)
  }, [])

return (
    <div className="min-h-screen bg-background text-foreground selection:bg-cyan-400/30">
      {/* ── ambient orbs ── */}
      <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden">
        <div
          className="absolute h-[900px] w-[900px] rounded-full opacity-[0.06]"
          style={{
            background: "radial-gradient(circle,#0891b2,transparent 70%)",
            left: `${mouse.x * 25}%`,
            top: `${mouse.y * 25}%`,
            transition: "left 3s,top 3s",
          }}
        />
        <div
          className="absolute h-[700px] w-[700px] rounded-full opacity-[0.05]"
          style={{
            background: "radial-gradient(circle,#ec4899,transparent 70%)",
            right: `${mouse.x * 20}%`,
            bottom: `${mouse.y * 20}%`,
            transition: "right 4s,bottom 4s",
          }}
        />
      </div>

{/* ── live ticker ── */}
      <div className="relative z-10 border-b border-border/40 bg-muted/30">
        <div className="overflow-hidden py-2.5">
          <div className="flex animate-ticker gap-14 whitespace-nowrap">
            {[...tickers, ...tickers].map((t, i) => (
              <span key={i} className="inline-flex items-center gap-2 text-[11px] tracking-widest">
                <span className="font-semibold text-foreground/60">{t.sym}</span>
                <span className="text-foreground/55">${t.price}</span>
                <span className="font-medium text-emerald-600">{t.chg}</span>
              </span>
            ))}
          </div>
        </div>
      </div>

{/* ═══════════ HERO ═══════════ */}
      <section className="relative z-10 flex min-h-[100dvh] items-center justify-center">
        <div className="absolute inset-0">
          <Image src="/images/hero-bg.jpg" alt="" fill className="object-cover opacity-10" priority />
          <div className="absolute inset-0 bg-gradient-to-b from-background/50 via-background/30 to-background" />
        </div>

<p className="animate-fade-in-up delay-100 mb-5 text-[11px] font-medium uppercase tracking-[0.45em] text-foreground/55">
              Wonkado · Humane Stock Exchange
            </p>

<h1 className="animate-fade-in-up delay-200 text-balance text-5xl font-extrabold leading-[1.08] tracking-tight sm:text-6xl lg:text-7xl">
              <span className="text-foreground">Do you want to know</span>
              <br />
              <span className="bg-gradient-to-r from-cyan-400 via-cyan-300 to-pink-400 bg-clip-text text-transparent">
                your real value?
              </span>
            </h1>

<p className="animate-fade-in-up delay-300 mx-auto mt-8 max-w-xl text-lg font-light leading-relaxed text-foreground/65">
              The world{"'"}s first platform where you list yourself, let others invest in your potential,
              and discover what you{"'"}re truly worth.
            </p>

<div className="animate-fade-in-up delay-400 mt-12 flex flex-col gap-4 sm:flex-row sm:justify-center">
              <Button
                asChild
                size="lg"
                className="group rounded-full border-0 bg-gradient-to-r from-cyan-400 to-pink-500 px-10 py-7 text-sm font-semibold text-white shadow-[0_0_48px_rgba(0,212,255,.2)] transition-all duration-500 hover:shadow-[0_0_64px_rgba(0,212,255,.3)]"
              >
                <Link href="/market">
                  Exchange
                  <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                </Link>
              </Button>
              <Button
                asChild
                size="lg"
                className="rounded-full border border-border px-10 py-7 text-sm font-medium text-foreground/70 backdrop-blur-sm transition-all duration-500 hover:border-foreground/30 hover:bg-muted hover:text-foreground"
              >
                <Link href="/auth/sign-up">List Yourself</Link>
              </Button>
            </div>

<div className="animate-fade-in-up delay-500 mt-14 flex items-center justify-center gap-6 text-[11px] text-foreground/55">
              {[
                { icon: Shield, text: "Bank-level encryption" },
                { icon: Zap, text: "Real-time trading" },
                { icon: Globe, text: "No borders, no barriers" },
              ].map(({ icon: I, text }) => (
                <span key={text} className="inline-flex items-center gap-1.5">
                  <I className="h-3.5 w-3.5" />
                  {text}
                </span>
              ))}
            </div>
          </div>
        </div>

{/* ═══════════ GAUGE ═══════════ */}
      <section className="relative z-10 py-36">
        <div className="container mx-auto px-6">
          <div className="grid items-center gap-20 lg:grid-cols-2">
            <Reveal>
              <p className="mb-4 text-xl font-black uppercase tracking-[0.35em] text-cyan-500 md:text-2xl">GAUGE</p>
              <h2 className="text-balance text-4xl font-bold leading-tight text-foreground md:text-5xl">
                Get to Know Your{" "}
                <span className="bg-gradient-to-r from-cyan-500 to-cyan-400 bg-clip-text text-transparent">
                  Real Value
                </span>
              </h2>
              <p className="mt-6 text-lg font-light leading-relaxed text-foreground/65">
                Embark on a quest to uncover the true value of your potential. In this self-declaration model, each
                person can choose to spill their secrets or keep them close to the vest. Our Agent, a paragon of
                fairness, gets a thumbs-up from third-party verification to vouch for your worth.
              </p>
              <div className="mt-8 flex flex-wrap gap-2.5">
                {["Self-Declaration", "AI Verified", "Real-Time", "Fair Assessment"].map((t) => (
                  <span
                    key={t}
                    className="rounded-full border border-cyan-500/20 bg-cyan-500/10 px-4 py-1.5 text-xs font-medium text-cyan-600"
                  >
                    {t}
                  </span>
                ))}
              </div>
            </Reveal>

<Reveal delay={150}>
              <div className="group relative">
                <div className="absolute -inset-px rounded-3xl bg-gradient-to-br from-cyan-500/20 to-pink-500/20 opacity-0 blur-2xl transition-opacity duration-700 group-hover:opacity-100" />
                <div className="relative overflow-hidden rounded-3xl border border-border/50">
                  <Image
                    src="/images/gauge-section.jpg"
                    alt="GAUGE AI interface"
                    width={640}
                    height={480}
                    className="w-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent" />
                  <div className="absolute inset-x-6 bottom-6">
                    <div className="flex items-center gap-3 rounded-2xl border border-border/50 bg-background/80 p-4 backdrop-blur-xl">
                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-400 to-pink-500">
                        <Activity className="h-5 w-5 text-white" />
                      </div>
                      <div>
                        <p className="text-sm font-semibold text-foreground/80">GAUGE Score</p>
                        <p className="text-[11px] text-foreground/60">Third-party verified potential assessment</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

{/* ═══════════ STATS ═══════════ */}
      <section className="relative z-10 border-y border-border/40 py-20">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-2 gap-10 md:grid-cols-4">
            {[
              { val: 12, suf: "M+", lbl: "Total Volume", pre: "$" },
              { val: 1500, suf: "+", lbl: "Listed Individuals", pre: "" },
              { val: 47, suf: "", lbl: "Countries", pre: "" },
              { val: 99, suf: ".9%", lbl: "Uptime", pre: "" },
            ].map((s, i) => (
              <Reveal key={i} delay={i * 80}>
                <div className="text-center">
                  <p className="text-3xl font-bold text-foreground md:text-4xl">
                    <Counter end={s.val} suffix={s.suf} prefix={s.pre} />
                  </p>
                  <p className="mt-1 text-[10px] uppercase tracking-[0.25em] text-foreground/55">{s.lbl}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

{/* ═══════════ LIVE EXCHANGE FLOOR ═══════════ */}
      <section className="relative z-10 overflow-hidden py-32">
        <div className="container mx-auto px-6">
          <Reveal>
            <div className="mx-auto mb-16 max-w-2xl text-center">
              <p className="mb-3 text-[11px] font-bold uppercase tracking-[0.35em] text-cyan-400/80">Live Exchange</p>
              <h2 className="text-balance text-4xl font-bold leading-tight text-foreground md:text-5xl">
                People Are{" "}
                <span className="bg-gradient-to-r from-cyan-400 to-pink-400 bg-clip-text text-transparent">
                  Trading Now
                </span>
              </h2>
              <p className="mt-5 text-lg font-light leading-relaxed text-foreground/65">
                Watch the exchange come alive. Real people listing their potential and investing in one another.
              </p>
            </div>
          </Reveal>

{/* ═══════════ LIFE BAZAAR ═══════════ */}
      <section className="relative z-10 py-36">
        <div className="container mx-auto px-6">
          <div className="grid items-center gap-20 lg:grid-cols-2">
            <Reveal delay={150} className="order-2 lg:order-1">
              <div className="group relative">
                <div className="absolute -inset-px rounded-3xl bg-gradient-to-br from-pink-500/20 to-cyan-500/20 opacity-0 blur-2xl transition-opacity duration-700 group-hover:opacity-100" />
                <div className="relative overflow-hidden rounded-3xl border border-border/50">
                  <Image
                    src="/images/bazaar-section.jpg"
                    alt="Life Bazaar marketplace"
                    width={640}
                    height={480}
                    className="w-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent" />
                  <div className="absolute inset-x-6 bottom-6 grid grid-cols-3 gap-2.5">
                    {[
                      { icon: TrendingUp, label: "Exchange", sub: "Potential" },
                      { icon: Users, label: "Invest", sub: "In Others" },
                      { icon: BarChart3, label: "Profit", sub: "Fairly" },
                    ].map(({ icon: I, label, sub }) => (
                      <div
                        key={label}
                        className="rounded-xl border border-border/50 bg-background/80 p-3 text-center backdrop-blur-xl"
                      >
                        <I className="mx-auto mb-1 h-4 w-4 text-pink-500" />
                        <p className="text-xs font-semibold text-foreground/70">{label}</p>
                        <p className="text-[10px] text-foreground/55">{sub}</p>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </Reveal>

<Reveal className="order-1 lg:order-2">
              <p className="mb-3 text-[11px] font-bold uppercase tracking-[0.35em] text-pink-400/80">Life Bazaar</p>
              <h2 className="text-balance text-4xl font-bold leading-tight text-foreground md:text-5xl">
                List, Invest &{" "}
                <span className="bg-gradient-to-r from-pink-500 to-pink-400 bg-clip-text text-transparent">
                  Profit Fairly
                </span>
              </h2>
              <p className="mt-6 text-lg font-light leading-relaxed text-foreground/65">
                Welcome to the life bazaar, where you{"'"}re not just trading stocks -- you{"'"}re listing yourself as a
                hot commodity, securing funds for your epic life journey. Here, you can invest in others{"'"} futures or
                trade in quantified potential at market rates.
              </p>
              <p className="mt-4 text-lg font-light leading-relaxed text-foreground/65">
                For the first time ever, anyone, anywhere, can discover their true value without the hoops of HR, visas,
                or nationalities. It{"'"}s a whole new world of fair play and self-worth.
              </p>
              <div className="mt-8 flex flex-wrap gap-2.5">
                {["No Borders", "Fair Market Value", "Instant Settlement", "Global Access"].map((t) => (
                  <span
                    key={t}
                    className="rounded-full border border-pink-500/20 bg-pink-500/10 px-4 py-1.5 text-xs font-medium text-pink-600"
                  >
                    {t}
                  </span>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

{/* ═══════════ STASH ═══════════ */}
      <section className="relative z-10 py-36">
        <div className="container mx-auto px-6">
          <div className="grid items-center gap-20 lg:grid-cols-2">
            <Reveal>
              <p className="mb-3 text-[11px] font-bold uppercase tracking-[0.35em] text-amber-400/80">Stash</p>
              <h2 className="text-balance text-4xl font-bold leading-tight text-foreground md:text-5xl">
                You{"'"}re the Boss of{" "}
                <span className="bg-gradient-to-r from-amber-500 to-orange-500 bg-clip-text text-transparent">
                  Your Data
                </span>
              </h2>
              <p className="mt-6 text-lg font-light leading-relaxed text-foreground/65">
                We{"'"}ve got data locked up like Fort Knox. Our platform shakes hands with all kinds of data -- market,
                alternative, and user data -- creating a cocktail of insights for super smart trading decisions. You get
                to be the boss, hosting your data on your own device, only sharing encrypted nuggets with us.
              </p>
              <div className="mt-8 grid grid-cols-2 gap-3">
                {[
                  { icon: Lock, label: "Encrypted Storage" },
                  { icon: Fingerprint, label: "You Own It" },
                  { icon: Eye, label: "Self-Hosted" },
                  { icon: Trash2, label: "Instant Wipe" },
                ].map(({ icon: I, label }) => (
                  <div
                    key={label}
                    className="flex items-center gap-3 rounded-xl border border-border/40 bg-muted/30 p-3.5"
                  >
                    <I className="h-4 w-4 text-amber-500" />
                    <span className="text-sm text-foreground/55">{label}</span>
                  </div>
                ))}
              </div>
            </Reveal>

{/* ═══════════ ARCHITECTURE ═══════════ */}
      <section className="relative z-10 py-36">
        <div className="container mx-auto px-6">
          <Reveal>
            <div className="mx-auto mb-20 max-w-2xl text-center">
              <p className="mb-3 text-[11px] font-bold uppercase tracking-[0.35em] text-cyan-400/80">
                The Architectural Wonderland
              </p>
              <h2 className="text-balance text-4xl font-bold leading-tight text-foreground md:text-5xl">
                Built for{" "}
                <span className="bg-gradient-to-r from-cyan-500 to-pink-500 bg-clip-text text-transparent">
                  Scale & Security
                </span>
              </h2>
              <p className="mt-5 text-lg font-light text-foreground/65">
                A multi-layered architecture designed to handle millions of trades while keeping your data safe.
              </p>
            </div>
          </Reveal>

<div className="grid items-start gap-14 lg:grid-cols-2">
            <Reveal>
              <div className="space-y-2.5">
                {layers.map((l, i) => {
                  const active = arch === i
                  return (
                    <button
                      key={i}
                      onClick={() => setArch(i)}
                      className={`w-full rounded-2xl border p-5 text-left transition-all duration-500 ${
                        active
                          ? "border-border bg-muted/50 shadow-lg"
                          : "border-transparent hover:border-border/40 hover:bg-muted/30"
                      }`}
                    >
                      <div className="flex items-start gap-4">
                        <div
                          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-all duration-500"
                          style={{
                            background: active
                              ? `linear-gradient(135deg, ${l.color}, ${l.color}88)`
                              : "rgba(0,0,0,0.04)",
                          }}
                        >
                          <l.Icon className={`h-5 w-5 ${active ? "text-white" : "text-foreground/30"}`} />
                        </div>
                        <div className="min-w-0">
                            <h3 className={`font-semibold transition-colors ${active ? "text-foreground" : "text-foreground/60"}`}>
                            {l.title}
                          </h3>
                          <p
                            className="text-[11px] transition-colors"
                            style={{ color: active ? l.color : "rgba(0,0,0,0.25)" }}
                          >
                            {l.sub}
                          </p>
                        </div>
                      </div>
                      <div
                        className="overflow-hidden transition-all duration-500"
                        style={{
                          maxHeight: active ? 120 : 0,
                          opacity: active ? 1 : 0,
                          marginTop: active ? 16 : 0,
                        }}
                      >
                        <p className="pl-14 text-sm leading-relaxed text-foreground/65">{l.body}</p>
                      </div>
                    </button>
                  )
                })}
              </div>
            </Reveal>

<Reveal delay={150}>
              <div className="sticky top-28">
                <div className="group relative">
                  <div className="absolute -inset-px rounded-3xl bg-gradient-to-br from-cyan-500/20 to-pink-500/20 opacity-0 blur-2xl transition-opacity duration-700 group-hover:opacity-100" />
                  <div className="relative overflow-hidden rounded-3xl border border-border/50">
                    <Image
                      src="/images/architecture-section.jpg"
                      alt="Platform architecture"
                      width={640}
                      height={480}
                      className="w-full object-cover"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent" />
                    <div className="absolute inset-x-6 bottom-6 flex gap-1.5">
                      {layers.map((_, i) => (
                        <div
                          key={i}
                          className="h-1 flex-1 rounded-full transition-all duration-500"
                          style={{
                            background:
                              i === arch
                                ? `linear-gradient(90deg,${layers[arch].color},${layers[Math.min(arch + 1, 3)].color})`
                                : "rgba(0,0,0,0.08)",
                          }}
                        />
                      ))}
                    </div>
                  </div>
                </div>

<div className="mt-5 grid grid-cols-2 gap-2.5">
                  {["Real-Time Streaming", "Batch Processing", "Feature Engineering", "NLP & Embeddings"].map((f) => (
                    <div
                      key={f}
                      className="rounded-xl border border-border/40 bg-muted/30 px-4 py-3 text-center text-xs text-foreground/60"
                    >
                      {f}
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

{/* ═══════════ POWERED BY THE QUBE ═══════════ */}
      <section className="relative z-10 border-t border-border/40 py-36">
        <div className="container mx-auto px-6">
          <Reveal>
            <div className="mx-auto mb-16 max-w-2xl text-center">
              <div className="mx-auto mb-5 inline-flex items-center gap-2 rounded-full border border-border/50 bg-muted/40 px-4 py-1.5">
                <Image src="/images/wonkado-logo.png" alt="The QUBE" width={18} height={18} />
                <span className="text-[11px] font-medium tracking-wide text-foreground/65">Powered by The QUBE</span>
              </div>
              <h2 className="text-balance text-4xl font-bold leading-tight text-foreground md:text-5xl">
                From Unseen to{" "}
                <span className="bg-gradient-to-r from-cyan-400 to-pink-400 bg-clip-text text-transparent">
                  Unstoppable
                </span>
              </h2>
              <p className="mt-5 text-lg font-light leading-relaxed text-foreground/65">
                The QUBE is creating an alternative approach to talent skilling and hiring in the Gen AI space by
                empowering non-traditional talent pools across the globe.
              </p>
            </div>
          </Reveal>

<div className="grid items-center gap-16 lg:grid-cols-2">
            <Reveal>
              <div className="space-y-5">
                {[
                  {
                    tag: "Industry-Centric Training",
                    title: "AI & Data Analytics Masterclass",
                    desc: "Comprehensive programmes on AI & Data Analytics designed specifically for industry needs, preparing talent for the Gen AI revolution.",
                    color: "cyan",
                  },
                  {
                    tag: "Non-Traditional Recruitment",
                    title: "10 Unique Talent Pools",
                    desc: "Recruitment and up-skilling from non-traditional talent pools, unlocking hidden potential in overlooked communities worldwide.",
                    color: "pink",
                  },
                ].map((p) => (
                  <div
                    key={p.tag}
                    className="group rounded-2xl border border-border/40 bg-muted/20 p-6 transition-all duration-300 hover:border-border hover:bg-muted/40"
                  >
                    <span className={`mb-3 inline-block rounded-full border border-${p.color}-400/20 bg-${p.color}-400/[0.08] px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-${p.color}-400/80`}>
                      {p.tag}
                    </span>
                    <h3 className="text-lg font-semibold text-foreground/80">{p.title}</h3>
                    <p className="mt-2 text-sm leading-relaxed text-foreground/60">{p.desc}</p>
                  </div>
                ))}
              </div>
            </Reveal>

<Reveal delay={150}>
              <div className="group relative">
                <div className="absolute -inset-px rounded-3xl bg-gradient-to-br from-cyan-500/20 to-pink-500/20 opacity-0 blur-2xl transition-opacity duration-700 group-hover:opacity-100" />
                <div className="relative overflow-hidden rounded-3xl border border-border/50">
                  <Image
                    src="/images/qube-talent.jpg"
                    alt="The QUBE talent programs"
                    width={640}
                    height={480}
                    className="w-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-background via-background/30 to-transparent" />
                  <div className="absolute inset-x-6 bottom-6">
                    <div className="grid grid-cols-4 gap-2">
                      {[
                        { val: "4.5M", lbl: "Jobs by 2030" },
                        { val: "400+", lbl: "AI Courses" },
                        { val: "$120B", lbl: "Market Size" },
                        { val: "10", lbl: "Talent Pools" },
                      ].map((s) => (
                        <div key={s.lbl} className="rounded-xl border border-border/50 bg-background/80 p-2.5 text-center backdrop-blur-xl">
                          <p className="text-sm font-bold text-foreground/80">{s.val}</p>
                          <p className="text-[9px] text-foreground/55">{s.lbl}</p>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>

<div className="mt-5 flex items-center justify-center gap-6">
                {["GCCs", "Startups", "Enterprises"].map((t) => (
                  <div key={t} className="flex items-center gap-2">
                    <div className="h-1.5 w-1.5 rounded-full bg-cyan-400/40" />
                    <span className="text-[11px] text-foreground/55">Trusted by {t}</span>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

{/* ═══════════ CTA ═══════════ */}
      <section className="relative z-10 py-36">
        <div className="container mx-auto px-6">
          <Reveal>
            <div className="relative overflow-hidden rounded-[2rem] border border-border/50">
              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-pink-500/5 to-cyan-500/5" />
              <div className="absolute inset-0 bg-muted/60 backdrop-blur-sm" />

<div className="relative z-10 px-8 py-28 text-center md:px-20">
                <Image src="/images/wonkado-logo.png" alt="Wonkado" width={64} height={64} className="mx-auto mb-6 drop-shadow-2xl" />
                <p className="mb-4 text-[11px] font-bold uppercase tracking-[0.35em] text-foreground/55">
                  Wonkado
                </p>
                <h2 className="mx-auto max-w-xl text-balance text-4xl font-bold text-foreground md:text-6xl">
                  Reclaiming Your Worth
                </h2>
                <p className="mx-auto mt-6 max-w-lg text-lg font-light leading-relaxed text-foreground/65">
                  Join thousands who have already discovered their true market value. Your potential is worth more than
                  you think.
                </p>
                <div className="mt-12 flex flex-col justify-center gap-4 sm:flex-row">
                  <Button
                    asChild
                    size="lg"
                    className="group rounded-full border-0 bg-gradient-to-r from-cyan-400 to-pink-500 px-12 py-7 text-sm font-semibold text-white shadow-[0_0_48px_rgba(0,212,255,.2)] transition-all duration-500 hover:shadow-[0_0_64px_rgba(0,212,255,.3)]"
                  >
                    <Link href="/market">
                      Exchange
                      <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                    </Link>
                  </Button>
                  <Button
                    asChild
                    size="lg"
                    className="rounded-full border border-border px-12 py-7 text-sm text-foreground/70 transition-all duration-500 hover:border-foreground/30 hover:bg-muted hover:text-foreground/80"
                  >
                    <Link href="/auth/sign-up">List Yourself</Link>
                  </Button>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

{/* ═══════════ FOOTER ═══════════ */}
      <footer className="relative z-10 border-t border-white/[0.04] py-16">
        <div className="container mx-auto px-6">
          <div className="flex flex-col items-center justify-between gap-8 md:flex-row">
            <Link href="/" className="flex items-center gap-3">
              <Image src="/images/wonkado-logo.png" alt="Wonkado" width={44} height={44} className="h-11 w-11" />
              <div>
                <p className="text-base font-bold text-white/60">WONKADO</p>
                <p className="text-[10px] tracking-wider text-white/20">Humane Stock Exchange</p>
              </div>
            </Link>
            <div className="flex flex-wrap items-center justify-center gap-6 md:gap-8">
              {["Market", "Portfolio", "Dashboard", "Wallet", "Founders"].map((l) => (
                <Link
                  key={l}
                  href={`/${l.toLowerCase()}`}
                  className="text-xs text-white/25 transition-colors hover:text-white/50"
                >
                  {l}
                </Link>
              ))}
              <a href="https://www.theqube.world" target="_blank" rel="noopener noreferrer" className="text-xs text-cyan-400/40 transition-colors hover:text-cyan-400/70">
                theqube.world
              </a>
            </div>
            <div className="text-right">
              <p className="text-[10px] tracking-wider text-white/15">Powered by The QUBE</p>
              <p className="mt-0.5 text-[9px] text-white/10">From Unseen to Unstoppable</p>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/login/page.tsx"
"use client"

export default function LoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)

const supabase = createClient()

// Retry logic for transient "Load failed" errors in preview
    let lastError: unknown = null
    for (let attempt = 0; attempt < 3; attempt++) {
      try {
        const { error: authError } = await supabase.auth.signInWithPassword({ email, password })
        if (authError) throw authError
        router.push("/dashboard")
        return
      } catch (err: unknown) {
        lastError = err
        const msg = err instanceof Error ? err.message : ""
        if (msg === "Load failed" || msg === "Failed to fetch") {
          await new Promise((r) => setTimeout(r, 500 * (attempt + 1)))
          continue
        }
        break
      }
    }

setError(lastError instanceof Error ? lastError.message : "An error occurred")
    setIsLoading(false)
  }

const inputCls =
    "h-12 border-border bg-background pl-10 text-sm text-foreground placeholder:text-foreground/30 focus:border-cyan-500/50 focus:ring-0"

return (
    <div className="flex min-h-screen bg-background">
      {/* Left -- form */}
      <div className="flex w-full items-center justify-center px-6 py-12 lg:w-1/2">
        <div className="w-full max-w-sm space-y-8">
          <Link href="/" className="inline-flex items-center gap-3">
            <Image src="/images/wonkado-logo.png" alt="Wonkado" width={40} height={40} className="h-10 w-10" />
            <span className="text-sm font-bold text-foreground/80">WONKADO</span>
          </Link>

<div>
            <h1 className="text-2xl font-bold text-foreground">Welcome back</h1>
            <p className="mt-1 text-sm text-foreground/65">Sign in to your portfolio</p>
          </div>

<form onSubmit={handleLogin} className="space-y-5">
            <div className="space-y-2">
              <Label className="text-xs font-medium text-foreground/60">Email</Label>
              <div className="relative">
                <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground/30" />
                <Input type="email" placeholder="you@example.com" required value={email} onChange={(e) => setEmail(e.target.value)} className={inputCls} />
              </div>
            </div>
            <div className="space-y-2">
              <Label className="text-xs font-medium text-foreground/60">Password</Label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground/30" />
                <Input type="password" placeholder="Enter your password" required value={password} onChange={(e) => setPassword(e.target.value)} className={inputCls} />
              </div>
            </div>

{error && (
              <div className="rounded-lg border border-red-200 bg-red-50 p-3">
                <p className="text-xs text-red-600">{error}</p>
              </div>
            )}

<Button
              type="submit"
              disabled={isLoading}
              className="group h-12 w-full rounded-xl border-0 bg-gradient-to-r from-cyan-500 to-pink-500 text-sm font-semibold text-white shadow-lg shadow-cyan-500/20 transition-all hover:shadow-xl hover:shadow-cyan-500/30"
            >
              {isLoading ? "Signing in..." : (
                <>Sign In <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" /></>
              )}
            </Button>
          </form>

<p className="text-center text-xs text-foreground/60">
            {"Don't have an account? "}
            <Link href="/auth/sign-up" className="font-medium text-cyan-600 hover:text-cyan-700">Create account</Link>
          </p>
        </div>
      </div>

{/* Right -- visual */}
      <div className="relative hidden items-center justify-center overflow-hidden bg-gradient-to-br from-cyan-500 to-pink-500 lg:flex lg:w-1/2">
        <div className="absolute inset-0 bg-[url('/images/auth-visual.jpg')] bg-cover bg-center opacity-20 mix-blend-overlay" />
        <div className="relative z-10 max-w-sm px-12 text-center">
          <Image src="/images/wonkado-logo.png" alt="Wonkado" width={80} height={80} className="mx-auto mb-6 drop-shadow-2xl" />
          <h2 className="text-2xl font-bold text-white">Exchange Human Potential</h2>
          <p className="mt-3 text-sm text-white/70">
            Invest in talented individuals and grow together on the world{"'"}s first human stock exchange.
          </p>
        </div>
      </div>
    </div>
  )
}</article></body></html>