97:I[903690,["/chat-static/_next/static/chunks/1hm3q0j7vx_jl.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/30cg74pivru03.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2ir1-mfl-mxun.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3139m71i45f_m.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1d27q4_h4it5w.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/10df6ghephwfh.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/45cgj0o2dd5ka.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1vo2s82fx-91j.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2b7mx-6g-n-p-.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0n2vqkuu3m7mv.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/151itv_w2dl-d.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1pzl0qjyusfha.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1ilnu97ogkb5i.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0wkini5l9f_9s.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1zvm-f33paz4c.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/43emq6v2fv13u.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/02rh369i5mh-5.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1e1jj32nu3059.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/054nyoml5t8yc.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0tmnhs5rj_pj7.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/130lebo2db7jj.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/311y33ni2zbzy.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0b2jr5pl--hcz.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3h4dxz6j9vrb9.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/22hg1dv7sryga.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2ak79vkcuz1ia.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2usqk7ipgup_t.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1qvyjk5p58sle.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3sty0m_bj1zjd.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/296n5x9xr-_1t.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3361kc_6h0dgd.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1hqlktk7lfas0.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0xushjtk7v84v.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2gyta6jpl0xuw.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3lly9te_pqku4.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2x0r6v1gm-sbg.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0ri2k1_yh_pol.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1nep_-vv8ldmi.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0ws07icczx8x9.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q"],"ExplicitChatIdProvider"] 98:I[838238,["/chat-static/_next/static/chunks/1hm3q0j7vx_jl.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/30cg74pivru03.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2ir1-mfl-mxun.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3139m71i45f_m.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1d27q4_h4it5w.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/10df6ghephwfh.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/45cgj0o2dd5ka.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1vo2s82fx-91j.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2b7mx-6g-n-p-.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0n2vqkuu3m7mv.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/151itv_w2dl-d.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1pzl0qjyusfha.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1ilnu97ogkb5i.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0wkini5l9f_9s.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1zvm-f33paz4c.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/43emq6v2fv13u.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/02rh369i5mh-5.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1e1jj32nu3059.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/054nyoml5t8yc.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0tmnhs5rj_pj7.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/130lebo2db7jj.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/311y33ni2zbzy.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0b2jr5pl--hcz.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3h4dxz6j9vrb9.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/22hg1dv7sryga.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2ak79vkcuz1ia.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2usqk7ipgup_t.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1qvyjk5p58sle.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3sty0m_bj1zjd.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/296n5x9xr-_1t.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3361kc_6h0dgd.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1hqlktk7lfas0.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0xushjtk7v84v.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2gyta6jpl0xuw.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3lly9te_pqku4.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2x0r6v1gm-sbg.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0ri2k1_yh_pol.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1nep_-vv8ldmi.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0ws07icczx8x9.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q"],"SWRDataProvider"] 9a:[] 9b:[["b_8XgW0Rbiyqv",null],["b_3jYC9IOJ7vZ",null],["b_Tpen6De4IOS",null],["b_cb32OYeyqT6",null],["b_XUAIuJL4ZWC",null]] 9c:[["b_8XgW0Rbiyqv",{"templateVersionId":null,"templateCanonId":null}],["b_3jYC9IOJ7vZ",{"templateVersionId":null,"templateCanonId":null}],["b_Tpen6De4IOS",{"templateVersionId":null,"templateCanonId":null}],["b_cb32OYeyqT6",{"templateVersionId":null,"templateCanonId":null}],["b_XUAIuJL4ZWC",{"templateVersionId":null,"templateCanonId":null}]] 9d:[["b_8XgW0Rbiyqv","$D2025-08-14T19:58:02.685Z"],["b_3jYC9IOJ7vZ","$D2025-08-14T19:59:21.689Z"],["b_Tpen6De4IOS","$D2025-08-14T20:01:18.198Z"],["b_cb32OYeyqT6","$D2025-08-14T20:02:52.361Z"],["b_XUAIuJL4ZWC","$D2025-08-14T20:05:16.034Z"]] 9e:[["b_8XgW0Rbiyqv",false],["b_3jYC9IOJ7vZ",false],["b_Tpen6De4IOS",false],["b_cb32OYeyqT6",false],["b_XUAIuJL4ZWC",false]] 9f:[["b_8XgW0Rbiyqv","$undefined"],["b_3jYC9IOJ7vZ","$undefined"],["b_Tpen6De4IOS","$undefined"],["b_cb32OYeyqT6","$undefined"],["b_XUAIuJL4ZWC",{"deploymentId":"dpl_FgCqwEtovowFQepQXoYymSvibw1A"}]] a0:[["b_8XgW0Rbiyqv",null],["b_3jYC9IOJ7vZ",null],["b_Tpen6De4IOS",null],["b_cb32OYeyqT6",null],["b_XUAIuJL4ZWC",null]] a1:[["b_8XgW0Rbiyqv",true],["b_3jYC9IOJ7vZ",true],["b_Tpen6De4IOS",true],["b_cb32OYeyqT6",true],["b_XUAIuJL4ZWC",true]] a2:[["b_8XgW0Rbiyqv",true],["b_3jYC9IOJ7vZ",true],["b_Tpen6De4IOS",true],["b_cb32OYeyqT6",true],["b_XUAIuJL4ZWC",true]] a3:[] a4:T2619e,[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color palette to emerald green theme for trust and professionalism */ --background: oklch(1 0 0); /* Pure white */ --foreground: oklch(0.35 0 0); /* Dark gray #475569 */ --card: oklch(0.97 0 0); /* Light gray #f1f5f9 */ --card-foreground: oklch(0.35 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.35 0 0); --primary: oklch(0.45 0.15 160); /* Emerald #059669 */ --primary-foreground: oklch(1 0 0); --secondary: oklch(0.55 0.12 160); /* Bright emerald #10b981 */ --secondary-foreground: oklch(1 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.45 0 0); --accent: oklch(0.55 0.12 160); /* Bright emerald accent */ --accent-foreground: oklch(1 0 0); --destructive: oklch(0.55 0.22 35); /* Orange for destructive actions */ --destructive-foreground: oklch(1 0 0); --border: oklch(0.92 0 0); --input: oklch(0.98 0 0); --ring: oklch(0.45 0.15 160 / 0.5); --chart-1: oklch(0.45 0.15 160); --chart-2: oklch(0.55 0.12 160); --chart-3: oklch(0.55 0.22 35); --chart-4: oklch(0.45 0 0); --chart-5: oklch(0.65 0.18 45); --radius: 0.5rem; --sidebar: oklch(0.97 0 0); --sidebar-foreground: oklch(0.35 0 0); --sidebar-primary: oklch(0.45 0.15 160); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.55 0.12 160); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.92 0 0); --sidebar-ring: oklch(0.45 0.15 160 / 0.5); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.55 0.12 160); --primary-foreground: oklch(0.145 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.55 0.12 160); --accent-foreground: oklch(0.145 0 0); --destructive: oklch(0.55 0.22 35); --destructive-foreground: oklch(1 0 0); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.55 0.12 160 / 0.5); --chart-1: oklch(0.55 0.12 160); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.55 0.12 160); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.55 0.12 160 / 0.5); } @theme inline { --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); /* Added font family variables for Playfair Display and Source Sans Pro */ --font-sans: var(--font-source-sans); --font-serif: var(--font-playfair); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground font-sans; } /* Added typography hierarchy for headings using serif font */ h1, h2, h3, h4, h5, h6 { @apply font-serif font-bold; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Playfair_Display, Source_Sans_3 } from "next/font/google" import "./globals.css" const playfair = Playfair_Display({ subsets: ["latin"], display: "swap", variable: "--font-playfair", }) const sourceSans = Source_Sans_3({ subsets: ["latin"], display: "swap", variable: "--font-source-sans", }) export const metadata: Metadata = { title: "TaskBR - Ganhe Dinheiro com Tarefas", description: "Plataforma brasileira para ganhar dinheiro completando tarefas ou contratando serviços", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Search, Plus, Star, MapPin, Clock, DollarSign } from "lucide-react" export default function HomePage() { return (

{/* Header */}

TaskBR

{/* Hero Section */}

Ganhe Dinheiro com Suas Habilidades

Conecte-se com pessoas que precisam de serviços ou encontre tarefas para completar. Uma plataforma segura e confiável para brasileiros.

{/* Stats */}

1.2k+

Tarefas Completadas

500+

Usuários Ativos

4.8★

Avaliação Média

{/* Featured Tasks */}

Tarefas em Destaque

Oportunidades disponíveis agora

{/* Task Card 1 */}

Design

R$ 150

por projeto

Criar Logo para Startup Preciso de um logo moderno e profissional para minha nova empresa de tecnologia.

São Paulo, SP

3 dias

João Silva

4.9

{/* Task Card 2 */}

Redação

R$ 80

por artigo

Artigos para Blog Busco redator para criar conteúdo sobre marketing digital e empreendedorismo.

Remoto

1 semana

Maria Santos

4.7

{/* Task Card 3 */}

Programação

R$ 300

por projeto

Site Responsivo Desenvolvimento de landing page responsiva para empresa de consultoria.

Rio de Janeiro, RJ

5 dias

Carlos Lima

5.0

{/* How It Works */}

Como Funciona

Simples, seguro e eficiente

1. Poste sua Tarefa

Descreva o que precisa e defina o valor que está disposto a pagar.

2. Receba Propostas

Profissionais qualificados enviarão suas propostas para sua tarefa.

3. Escolha e Avalie

Selecione o melhor profissional e avalie o trabalho concluído.

{/* Footer */}

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/tarefas/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Search, Filter, MapPin, Clock, Star, DollarSign } from "lucide-react" import Link from "next/link" const tasks = [ { id: 1, title: "Criar Logo para Startup", description: "Preciso de um logo moderno e profissional para minha nova empresa de tecnologia.", category: "Design", price: 150, location: "São Paulo, SP", deadline: "3 dias", client: "João Silva", rating: 4.9, proposals: 12, }, { id: 2, title: "Artigos para Blog", description: "Busco redator para criar conteúdo sobre marketing digital e empreendedorismo.", category: "Redação", price: 80, location: "Remoto", deadline: "1 semana", client: "Maria Santos", rating: 4.7, proposals: 8, }, { id: 3, title: "Site Responsivo", description: "Desenvolvimento de landing page responsiva para empresa de consultoria.", category: "Programação", price: 300, location: "Rio de Janeiro, RJ", deadline: "5 dias", client: "Carlos Lima", rating: 5.0, proposals: 15, }, { id: 4, title: "Tradução de Documentos", description: "Tradução de documentos técnicos do inglês para o português.", category: "Tradução", price: 120, location: "Remoto", deadline: "2 dias", client: "Ana Costa", rating: 4.8, proposals: 6, }, { id: 5, title: "Edição de Vídeo", description: "Edição de vídeos promocionais para redes sociais.", category: "Vídeo", price: 200, location: "Belo Horizonte, MG", deadline: "1 semana", client: "Pedro Oliveira", rating: 4.6, proposals: 10, }, { id: 6, title: "Consultoria em Marketing", description: "Consultoria para estratégia de marketing digital para e-commerce.", category: "Marketing", price: 400, location: "Remoto", deadline: "2 semanas", client: "Lucia Ferreira", rating: 4.9, proposals: 20, }, ] export default function TasksPage() { return (

{/* Header */}

TaskBR

{/* Page Header */}

Encontrar Tarefas

Descubra oportunidades para ganhar dinheiro com suas habilidades

{/* Filters */}

{tasks.length} tarefas encontradas

{/* Tasks Grid */}

{tasks.map((task) => (

{task.category}

R$ {task.price}

por projeto

{task.title} {task.description}

{task.location}

{task.deadline}

{task.client}

{task.rating}

{task.proposals} propostas

))}

{/* Load More */}

) } [V0_FILE]typescriptreact:file="app/tarefas/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/tarefas/[id]/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { MapPin, Clock, Star, DollarSign, Users, Calendar, CheckCircle } from "lucide-react" import Link from "next/link" // Mock data - in a real app this would come from a database const taskData = { id: 1, title: "Criar Logo para Startup", description: `Estou lançando uma nova startup de tecnologia focada em soluções de inteligência artificial para pequenas empresas. Preciso de um logo profissional e moderno que transmita inovação, confiança e tecnologia. O logo deve ser: - Moderno e minimalista - Funcionar bem em diferentes tamanhos - Ter versões colorida e monocromática - Incluir variações horizontal e vertical Entregáveis: - Arquivos em alta resolução (PNG, JPG, SVG) - Manual de identidade visual básico - Mockups de aplicação Prazo: 3 dias a partir da contratação.`, category: "Design", price: 150, location: "São Paulo, SP", deadline: "3 dias", postedDate: "2 dias atrás", client: { name: "João Silva", rating: 4.9, reviews: 47, tasksPosted: 12, memberSince: "Janeiro 2023", }, proposals: 12, skills: ["Logo Design", "Identidade Visual", "Adobe Illustrator", "Branding"], status: "open", } const proposals = [ { id: 1, freelancer: "Ana Designer", rating: 4.8, reviews: 23, price: 140, deliveryTime: "2 dias", proposal: "Olá! Sou especialista em criação de logos e identidade visual. Tenho mais de 5 anos de experiência...", }, { id: 2, freelancer: "Carlos Creative", rating: 4.9, reviews: 31, price: 160, deliveryTime: "3 dias", proposal: "Oi João! Adorei seu projeto. Já criei logos para várias startups de tecnologia...", }, { id: 3, freelancer: "Maria Brands", rating: 5.0, reviews: 18, price: 150, deliveryTime: "2 dias", proposal: "Perfeito! Tenho experiência específica com startups de IA. Posso criar algo único...", }, ] export default function TaskDetailPage({ params }: { params: { id: string } }) { return (

{/* Header */}

TaskBR

{/* Breadcrumb */}

Tarefas / {taskData.title}

{/* Main Content */}

{taskData.category} Aberta

{taskData.title}

{taskData.location}

Prazo: {taskData.deadline}

Postado {taskData.postedDate}

R$ {taskData.price}

por projeto

Descrição do Projeto

{taskData.description}

Habilidades Necessárias

{taskData.skills.map((skill) => ( {skill} ))}

{/* Proposals Section */} Propostas ({proposals.length}) Profissionais interessados neste projeto

{proposals.map((proposal) => (

{proposal.freelancer.charAt(0)}

{proposal.freelancer}

{proposal.rating}

({proposal.reviews} avaliações)

R$ {proposal.price}

em {proposal.deliveryTime}

{proposal.proposal}

))}

{/* Sidebar */}

{/* Client Info */} Sobre o Cliente

{taskData.client.name.charAt(0)}

{taskData.client.name}

{taskData.client.rating} ({taskData.client.reviews} avaliações)

Tarefas postadas: {taskData.client.tasksPosted}

Membro desde: {taskData.client.memberSince}

{/* Project Stats */} Estatísticas do Projeto

Propostas: {taskData.proposals}

Postado: {taskData.postedDate}

Status: Aberta

) } [V0_FILE]typescriptreact:file="app/postar/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { DollarSign, Plus, FileText, MapPin } from "lucide-react" import Link from "next/link" export default function PostTaskPage() { return (

{/* Header */}

TaskBR

{/* Page Header */}

Postar uma Nova Tarefa

Descreva seu projeto e encontre o profissional ideal para realizá-lo

{/* Main Form */}

{/* Basic Information */} Informações Básicas Conte-nos sobre seu projeto

Título da Tarefa *

Seja claro e específico sobre o que você precisa

Categoria *

Descrição Detalhada *

<p className="text-sm text-muted-foreground mt-1">
                      Quanto mais detalhes, melhores propostas você receberá
                    </p>
                  </div>

<div>
                    <Label htmlFor="skills">Habilidades Necessárias</Label>
                    <Input id="skills" placeholder="Ex: Photoshop, Illustrator, Logo Design" className="mt-1" />
                    <p className="text-sm text-muted-foreground mt-1">Separe as habilidades por vírgula</p>
                  </div>
                </CardContent>
              </Card>

{/* Project Details */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <MapPin className="w-5 h-5" />
                    Detalhes do Projeto
                  </CardTitle>
                  <CardDescription>Localização, prazo e orçamento</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="location">Localização</Label>
                      <Select>
                        <SelectTrigger className="mt-1">
                          <SelectValue placeholder="Selecione a localização" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="remoto">Remoto</SelectItem>
                          <SelectItem value="sp">São Paulo, SP</SelectItem>
                          <SelectItem value="rj">Rio de Janeiro, RJ</SelectItem>
                          <SelectItem value="mg">Belo Horizonte, MG</SelectItem>
                          <SelectItem value="rs">Porto Alegre, RS</SelectItem>
                          <SelectItem value="pr">Curitiba, PR</SelectItem>
                          <SelectItem value="outros">Outros</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div>
                      <Label htmlFor="deadline">Prazo *</Label>
                      <Select required>
                        <SelectTrigger className="mt-1">
                          <SelectValue placeholder="Quando você precisa?" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="1-day">1 dia</SelectItem>
                          <SelectItem value="2-3-days">2-3 dias</SelectItem>
                          <SelectItem value="1-week">1 semana</SelectItem>
                          <SelectItem value="2-weeks">2 semanas</SelectItem>
                          <SelectItem value="1-month">1 mês</SelectItem>
                          <SelectItem value="flexible">Flexível</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

<div>
                    <Label htmlFor="budget">Orçamento *</Label>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-1">
                      <div>
                        <Select required>
                          <SelectTrigger>
                            <SelectValue placeholder="Tipo de orçamento" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="fixed">Preço Fixo</SelectItem>
                            <SelectItem value="hourly">Por Hora</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="relative">
                        <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground">
                          R$
                        </span>
                        <Input placeholder="0,00" className="pl-8" required />
                      </div>
                    </div>
                    <p className="text-sm text-muted-foreground mt-1">
                      Defina um orçamento justo baseado na complexidade do projeto
                    </p>
                  </div>
                </CardContent>
              </Card>

{/* Additional Options */}
              <Card>
                <CardHeader>
                  <CardTitle>Opções Adicionais</CardTitle>
                  <CardDescription>Configurações extras para seu projeto</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center space-x-2">
                    <Checkbox id="featured" />
                    <Label htmlFor="featured" className="text-sm">
                      Destacar minha tarefa (+R$ 10)
                    </Label>
                  </div>

<div className="flex items-center space-x-2">
                    <Checkbox id="urgent" />
                    <Label htmlFor="urgent" className="text-sm">
                      Marcar como urgente (+R$ 5)
                    </Label>
                  </div>

<div className="flex items-center space-x-2">
                    <Checkbox id="nda" />
                    <Label htmlFor="nda" className="text-sm">
                      Exigir acordo de confidencialidade (NDA)
                    </Label>
                  </div>
                </CardContent>
              </Card>

{/* Submit Button */}
              <div className="flex gap-4">
                <Button type="submit" size="lg" className="flex-1">
                  <Plus className="w-5 h-5 mr-2" />
                  Publicar Tarefa
                </Button>
                <Button type="button" variant="outline" size="lg">
                  Salvar Rascunho
                </Button>
              </div>
            </form>
          </div>

{/* Sidebar */}
          <div>
            {/* Tips Card */}
            <Card className="mb-6">
              <CardHeader>
                <CardTitle>Dicas para uma Boa Tarefa</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3 text-sm">
                <div className="flex items-start gap-2">
                  <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0"></div>
                  <p>Seja específico sobre o que você precisa</p>
                </div>
                <div className="flex items-start gap-2">
                  <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0"></div>
                  <p>Inclua exemplos ou referências quando possível</p>
                </div>
                <div className="flex items-start gap-2">
                  <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0"></div>
                  <p>Defina um orçamento realista</p>
                </div>
                <div className="flex items-start gap-2">
                  <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0"></div>
                  <p>Seja claro sobre prazos e entregáveis</p>
                </div>
              </CardContent>
            </Card>

{/* Pricing Card */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <DollarSign className="w-5 h-5" />
                  Custos da Plataforma
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3 text-sm">
                <div className="flex justify-between">
                  <span>Taxa de publicação:</span>
                  <span className="font-medium text-green-600">Grátis</span>
                </div>
                <div className="flex justify-between">
                  <span>Taxa de sucesso:</span>
                  <span className="font-medium">5% do valor</span>
                </div>
                <div className="flex justify-between">
                  <span>Destaque (opcional):</span>
                  <span className="font-medium">R$ 10</span>
                </div>
                <div className="flex justify-between">
                  <span>Urgente (opcional):</span>
                  <span className="font-medium">R$ 5</span>
                </div>
                <div className="border-t pt-2 mt-2">
                  <div className="flex justify-between font-medium">
                    <span>Total estimado:</span>
                    <span>R$ 0</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/task-card.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { MapPin, Clock, Star } from "lucide-react"
import Link from "next/link"

interface TaskCardProps {
  id: number
  title: string
  description: string
  category: string
  price: number
  location: string
  deadline: string
  client: string
  rating: number
  proposals: number
}

export function TaskCard({
  id,
  title,
  description,
  category,
  price,
  location,
  deadline,
  client,
  rating,
  proposals,
}: TaskCardProps) {
  return (
    <Card className="hover:shadow-lg transition-shadow">
      <CardHeader>
        <div className="flex items-start justify-between">
          <Badge variant="secondary" className="mb-2">
            {category}
          </Badge>
          <div className="text-right">
            <div className="text-2xl font-bold text-primary">R$ {price}</div>
            <div className="text-sm text-muted-foreground">por projeto</div>
          </div>
        </div>
        <CardTitle className="text-xl">{title}</CardTitle>
        <CardDescription className="line-clamp-2">{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex items-center gap-4 text-sm text-muted-foreground mb-4">
          <div className="flex items-center gap-1">
            <MapPin className="w-4 h-4" />
            {location}
          </div>
          <div className="flex items-center gap-1">
            <Clock className="w-4 h-4" />
            {deadline}
          </div>
        </div>

<div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-muted rounded-full"></div>
            <div>
              <div className="font-medium text-sm">{client}</div>
              <div className="flex items-center gap-1">
                <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                <span className="text-xs text-muted-foreground">{rating}</span>
              </div>
            </div>
          </div>
          <div className="text-sm text-muted-foreground">{proposals} propostas</div>
        </div>

<Link href={`/tarefas/${id}`}>
          <Button className="w-full">Ver Detalhes</Button>
        </Link>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Progress } from "@/components/ui/progress"
import {
  DollarSign,
  TrendingUp,
  Clock,
  CheckCircle,
  Star,
  Eye,
  MessageSquare,
  Calendar,
  BarChart3,
  FileText,
  Users,
} from "lucide-react"
import Link from "next/link"

// Mock data - in a real app this would come from a database
const userStats = {
  totalEarnings: 2450,
  monthlyEarnings: 680,
  completedTasks: 23,
  activeProposals: 5,
  rating: 4.8,
  profileViews: 127,
}

const recentTasks = [
  {
    id: 1,
    title: "Logo para Startup",
    status: "completed",
    price: 150,
    client: "João Silva",
    completedDate: "2 dias atrás",
  },
  {
    id: 2,
    title: "Artigos para Blog",
    status: "in-progress",
    price: 80,
    client: "Maria Santos",
    deadline: "3 dias",
  },
  {
    id: 3,
    title: "Site Responsivo",
    status: "pending",
    price: 300,
    client: "Carlos Lima",
    proposalDate: "1 dia atrás",
  },
]

const myPostedTasks = [
  {
    id: 4,
    title: "Edição de Vídeo Promocional",
    status: "open",
    price: 200,
    proposals: 8,
    views: 45,
    postedDate: "3 dias atrás",
  },
  {
    id: 5,
    title: "Tradução de Manual",
    status: "in-progress",
    price: 120,
    freelancer: "Ana Translator",
    startDate: "1 semana atrás",
  },
]

const notifications = [
  {
    id: 1,
    type: "proposal",
    message: "Nova proposta recebida para 'Logo para Startup'",
    time: "2 horas atrás",
    unread: true,
  },
  {
    id: 2,
    type: "payment",
    message: "Pagamento de R$ 150 foi processado",
    time: "1 dia atrás",
    unread: false,
  },
  {
    id: 3,
    type: "review",
    message: "João Silva deixou uma avaliação 5 estrelas",
    time: "2 dias atrás",
    unread: false,
  },
]

export default function DashboardPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                <DollarSign className="w-5 h-5 text-primary-foreground" />
              </div>
              <h1 className="text-2xl font-serif font-bold text-primary">TaskBR</h1>
            </Link>

<nav className="hidden md:flex items-center gap-6">
              <Link href="/dashboard" className="text-primary font-medium">
                Dashboard
              </Link>
              <Link href="/tarefas" className="text-foreground hover:text-primary transition-colors">
                Encontrar Tarefas
              </Link>
              <Link href="/postar" className="text-foreground hover:text-primary transition-colors">
                Postar Tarefa
              </Link>
            </nav>

<div className="flex items-center gap-3">
              <Button variant="outline" size="sm">
                Perfil
              </Button>
              <Avatar>
                <AvatarFallback>U</AvatarFallback>
              </Avatar>
            </div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        {/* Welcome Section */}
        <div className="mb-8">
          <h2 className="text-3xl font-serif font-bold mb-2">Bem-vindo de volta!</h2>
          <p className="text-muted-foreground">Aqui está um resumo da sua atividade recente</p>
        </div>

{/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Ganhos Totais</CardTitle>
              <DollarSign className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-primary">R$ {userStats.totalEarnings.toLocaleString()}</div>
              <p className="text-xs text-muted-foreground">+12% em relação ao mês passado</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Este Mês</CardTitle>
              <TrendingUp className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-primary">R$ {userStats.monthlyEarnings}</div>
              <p className="text-xs text-muted-foreground">Meta: R$ 1.000</p>
              <Progress value={68} className="mt-2" />
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Tarefas Concluídas</CardTitle>
              <CheckCircle className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{userStats.completedTasks}</div>
              <p className="text-xs text-muted-foreground">Taxa de sucesso: 95%</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Avaliação</CardTitle>
              <Star className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold flex items-center gap-1">
                {userStats.rating}
                <Star className="h-5 w-5 fill-yellow-400 text-yellow-400" />
              </div>
              <p className="text-xs text-muted-foreground">Baseado em 47 avaliações</p>
            </CardContent>
          </Card>
        </div>

{/* Main Content */}
        <Tabs defaultValue="overview" className="space-y-6">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="overview">Visão Geral</TabsTrigger>
            <TabsTrigger value="my-work">Meu Trabalho</TabsTrigger>
            <TabsTrigger value="my-tasks">Minhas Tarefas</TabsTrigger>
            <TabsTrigger value="analytics">Análises</TabsTrigger>
          </TabsList>

{/* Overview Tab */}
          <TabsContent value="overview" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Recent Activity */}
              <Card>
                <CardHeader>
                  <CardTitle>Atividade Recente</CardTitle>
                  <CardDescription>Suas últimas tarefas e propostas</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {recentTasks.map((task) => (
                      <div key={task.id} className="flex items-center justify-between p-3 border rounded-lg">
                        <div className="flex-1">
                          <div className="font-medium">{task.title}</div>
                          <div className="text-sm text-muted-foreground">Cliente: {task.client}</div>
                        </div>
                        <div className="text-right">
                          <Badge
                            variant={
                              task.status === "completed"
                                ? "default"
                                : task.status === "in-progress"
                                  ? "secondary"
                                  : "outline"
                            }
                          >
                            {task.status === "completed"
                              ? "Concluída"
                              : task.status === "in-progress"
                                ? "Em Andamento"
                                : "Pendente"}
                          </Badge>
                          <div className="text-sm font-medium text-primary mt-1">R$ {task.price}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                  <Button variant="outline" className="w-full mt-4 bg-transparent">
                    Ver Todas
                  </Button>
                </CardContent>
              </Card>

{/* Notifications */}
              <Card>
                <CardHeader>
                  <CardTitle>Notificações</CardTitle>
                  <CardDescription>Atualizações importantes</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {notifications.map((notification) => (
                      <div
                        key={notification.id}
                        className={`p-3 border rounded-lg ${notification.unread ? "bg-primary/5 border-primary/20" : ""}`}
                      >
                        <div className="flex items-start gap-3">
                          <div className="flex-shrink-0 mt-1">
                            {notification.type === "proposal" && <FileText className="w-4 h-4 text-blue-500" />}
                            {notification.type === "payment" && <DollarSign className="w-4 h-4 text-green-500" />}
                            {notification.type === "review" && <Star className="w-4 h-4 text-yellow-500" />}
                          </div>
                          <div className="flex-1">
                            <p className="text-sm">{notification.message}</p>
                            <p className="text-xs text-muted-foreground mt-1">{notification.time}</p>
                          </div>
                          {notification.unread && <div className="w-2 h-2 bg-primary rounded-full"></div>}
                        </div>
                      </div>
                    ))}
                  </div>
                  <Button variant="outline" className="w-full mt-4 bg-transparent">
                    Ver Todas as Notificações
                  </Button>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

{/* My Work Tab */}
          <TabsContent value="my-work" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Propostas e Trabalhos</CardTitle>
                <CardDescription>Gerencie suas propostas enviadas e trabalhos em andamento</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {recentTasks.map((task) => (
                    <div key={task.id} className="border rounded-lg p-4">
                      <div className="flex items-start justify-between mb-3">
                        <div>
                          <h4 className="font-medium">{task.title}</h4>
                          <p className="text-sm text-muted-foreground">Cliente: {task.client}</p>
                        </div>
                        <div className="text-right">
                          <div className="text-lg font-bold text-primary">R$ {task.price}</div>
                          <Badge
                            variant={
                              task.status === "completed"
                                ? "default"
                                : task.status === "in-progress"
                                  ? "secondary"
                                  : "outline"
                            }
                          >
                            {task.status === "completed"
                              ? "Concluída"
                              : task.status === "in-progress"
                                ? "Em Andamento"
                                : "Pendente"}
                          </Badge>
                        </div>
                      </div>

<div className="flex items-center gap-4 text-sm text-muted-foreground mb-3">
                        {task.status === "completed" && (
                          <div className="flex items-center gap-1">
                            <CheckCircle className="w-4 h-4" />
                            Concluída {task.completedDate}
                          </div>
                        )}
                        {task.status === "in-progress" && (
                          <div className="flex items-center gap-1">
                            <Clock className="w-4 h-4" />
                            Prazo: {task.deadline}
                          </div>
                        )}
                        {task.status === "pending" && (
                          <div className="flex items-center gap-1">
                            <Calendar className="w-4 h-4" />
                            Proposta enviada {task.proposalDate}
                          </div>
                        )}
                      </div>

<div className="flex gap-2">
                        <Button size="sm" variant="outline">
                          Ver Detalhes
                        </Button>
                        {task.status === "in-progress" && <Button size="sm">Entregar Trabalho</Button>}
                        {task.status === "pending" && (
                          <Button size="sm" variant="outline">
                            Editar Proposta
                          </Button>
                        )}
                        <Button size="sm" variant="outline">
                          <MessageSquare className="w-4 h-4 mr-1" />
                          Chat
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

{/* My Tasks Tab */}
          <TabsContent value="my-tasks" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Tarefas que Postei</CardTitle>
                <CardDescription>Gerencie as tarefas que você publicou</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {myPostedTasks.map((task) => (
                    <div key={task.id} className="border rounded-lg p-4">
                      <div className="flex items-start justify-between mb-3">
                        <div>
                          <h4 className="font-medium">{task.title}</h4>
                          {task.freelancer && (
                            <p className="text-sm text-muted-foreground">Freelancer: {task.freelancer}</p>
                          )}
                        </div>
                        <div className="text-right">
                          <div className="text-lg font-bold text-primary">R$ {task.price}</div>
                          <Badge variant={task.status === "open" ? "secondary" : "default"}>
                            {task.status === "open" ? "Aberta" : "Em Andamento"}
                          </Badge>
                        </div>
                      </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-3 text-sm">
                        {task.status === "open" && (
                          <>
                            <div className="flex items-center gap-1 text-muted-foreground">
                              <Users className="w-4 h-4" />
                              {task.proposals} propostas
                            </div>
                            <div className="flex items-center gap-1 text-muted-foreground">
                              <Eye className="w-4 h-4" />
                              {task.views} visualizações
                            </div>
                            <div className="flex items-center gap-1 text-muted-foreground">
                              <Calendar className="w-4 h-4" />
                              Postada {task.postedDate}
                            </div>
                          </>
                        )}
                        {task.status === "in-progress" && (
                          <div className="flex items-center gap-1 text-muted-foreground">
                            <Clock className="w-4 h-4" />
                            Iniciada {task.startDate}
                          </div>
                        )}
                      </div>

<div className="flex gap-2">
                        <Button size="sm" variant="outline">
                          Ver Detalhes
                        </Button>
                        {task.status === "open" && (
                          <>
                            <Button size="sm">Ver Propostas ({task.proposals})</Button>
                            <Button size="sm" variant="outline">
                              Editar
                            </Button>
                          </>
                        )}
                        {task.status === "in-progress" && (
                          <Button size="sm" variant="outline">
                            <MessageSquare className="w-4 h-4 mr-1" />
                            Chat com Freelancer
                          </Button>
                        )}
                      </div>
                    </div>
                  ))}
                </div>

<div className="text-center mt-6">
                  <Link href="/postar">
                    <Button>
                      <FileText className="w-4 h-4 mr-2" />
                      Postar Nova Tarefa
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

{/* Analytics Tab */}
          <TabsContent value="analytics" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <BarChart3 className="w-5 h-5" />
                    Ganhos por Mês
                  </CardTitle>
                  <CardDescription>Evolução dos seus ganhos nos últimos 6 meses</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {[
                      { month: "Jan", amount: 420 },
                      { month: "Fev", amount: 380 },
                      { month: "Mar", amount: 520 },
                      { month: "Abr", amount: 610 },
                      { month: "Mai", amount: 580 },
                      { month: "Jun", amount: 680 },
                    ].map((data) => (
                      <div key={data.month} className="flex items-center justify-between">
                        <span className="text-sm font-medium">{data.month}</span>
                        <div className="flex items-center gap-2 flex-1 mx-4">
                          <Progress value={(data.amount / 700) * 100} className="flex-1" />
                          <span className="text-sm font-medium text-primary">R$ {data.amount}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Estatísticas do Perfil</CardTitle>
                  <CardDescription>Performance e engajamento</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span className="text-sm">Visualizações do perfil</span>
                    <span className="font-medium">{userStats.profileViews}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm">Taxa de resposta</span>
                    <span className="font-medium">95%</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm">Tempo médio de entrega</span>
                    <span className="font-medium">2.3 dias</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm">Propostas aceitas</span>
                    <span className="font-medium">68%</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm">Clientes recorrentes</span>
                    <span className="font-medium">12</span>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/dashboard-stats.tsx" isMerged="true"
import type React from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"

interface StatsCardProps {
  title: string
  value: string | number
  description?: string
  icon: React.ReactNode
  progress?: number
}

export function StatsCard({ title, value, description, icon, progress }: StatsCardProps) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium">{title}</CardTitle>
        {icon}
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold text-primary">{value}</div>
        {description && <p className="text-xs text-muted-foreground">{description}</p>}
        {progress !== undefined && <Progress value={progress} className="mt-2" />}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/activity-feed.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

interface ActivityItem {
  id: number
  title: string
  client: string
  status: "completed" | "in-progress" | "pending"
  price: number
  date?: string
  deadline?: string
}

interface ActivityFeedProps {
  items: ActivityItem[]
  title: string
  description: string
}

export function ActivityFeed({ items, title, description }: ActivityFeedProps) {
  const getStatusBadge = (status: string) => {
    switch (status) {
      case "completed":
        return <Badge variant="default">Concluída</Badge>
      case "in-progress":
        return <Badge variant="secondary">Em Andamento</Badge>
      case "pending":
        return <Badge variant="outline">Pendente</Badge>
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {items.map((item) => (
            <div key={item.id} className="flex items-center justify-between p-3 border rounded-lg">
              <div className="flex-1">
                <div className="font-medium">{item.title}</div>
                <div className="text-sm text-muted-foreground">Cliente: {item.client}</div>
              </div>
              <div className="text-right">
                {getStatusBadge(item.status)}
                <div className="text-sm font-medium text-primary mt-1">R$ {item.price}</div>
              </div>
            </div>
          ))}
        </div>
        <Button variant="outline" className="w-full mt-4 bg-transparent">
          Ver Todas
        </Button>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/perfil/[id]/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  DollarSign,
  Star,
  MapPin,
  Calendar,
  CheckCircle,
  MessageSquare,
  Heart,
  Share2,
  Award,
  Briefcase,
  Clock,
} from "lucide-react"
import Link from "next/link"

// Mock data - in a real app this would come from a database
const profileData = {
  id: 1,
  name: "Ana Silva",
  title: "Designer Gráfica & Especialista em Branding",
  location: "São Paulo, SP",
  memberSince: "Janeiro 2023",
  rating: 4.9,
  reviews: 47,
  completedJobs: 89,
  responseTime: "2 horas",
  bio: "Sou uma designer gráfica apaixonada com mais de 5 anos de experiência em criação de identidades visuais, logos e materiais de marketing. Especializo-me em ajudar startups e pequenas empresas a construir uma presença visual forte e memorável.",
  skills: [
    "Logo Design",
    "Identidade Visual",
    "Adobe Illustrator",
    "Adobe Photoshop",
    "Branding",
    "Design de Embalagem",
    "UI/UX Design",
    "Figma",
  ],
  languages: ["Português (Nativo)", "Inglês (Fluente)", "Espanhol (Intermediário)"],
  hourlyRate: 45,
  availability: "Disponível",
}

const portfolio = [
  {
    id: 1,
    title: "Logo e Identidade Visual - TechStart",
    category: "Branding",
    image: "/modern-tech-startup-logo.png",
    description: "Criação completa de identidade visual para startup de tecnologia",
  },
  {
    id: 2,
    title: "Redesign de App Mobile",
    category: "UI/UX",
    image: "/mobile-app-interface.png",
    description: "Redesign completo de interface para aplicativo de delivery",
  },
  {
    id: 3,
    title: "Embalagem para Produto Orgânico",
    category: "Design de Embalagem",
    image: "/placeholder-juqpm.png",
    description: "Design de embalagem sustentável para linha de produtos orgânicos",
  },
  {
    id: 4,
    title: "Website Corporativo",
    category: "Web Design",
    image: "/corporate-website-design.png",
    description: "Design e desenvolvimento de website para consultoria empresarial",
  },
]

const recentWork = [
  {
    id: 1,
    title: "Logo para E-commerce",
    client: "João Oliveira",
    rating: 5,
    price: 180,
    completedDate: "1 semana atrás",
    review: "Trabalho excepcional! Ana entendeu perfeitamente nossa visão e entregou um logo incrível.",
  },
  {
    id: 2,
    title: "Identidade Visual Completa",
    client: "Maria Santos",
    rating: 5,
    price: 350,
    completedDate: "2 semanas atrás",
    review: "Profissional muito talentosa e dedicada. Superou nossas expectativas!",
  },
  {
    id: 3,
    title: "Design de Apresentação",
    client: "Carlos Lima",
    rating: 4,
    price: 120,
    completedDate: "3 semanas atrás",
    review: "Ótimo trabalho, entrega rápida e comunicação excelente.",
  },
]

const reviews = [
  {
    id: 1,
    client: "Pedro Costa",
    rating: 5,
    date: "2 dias atrás",
    project: "Logo para Restaurante",
    review:
      "Ana é uma profissional excepcional! Criou um logo perfeito para meu restaurante, capturando exatamente a essência que eu queria transmitir. Comunicação excelente e entrega no prazo.",
  },
  {
    id: 2,
    client: "Lucia Ferreira",
    rating: 5,
    date: "1 semana atrás",
    project: "Identidade Visual para Clínica",
    review:
      "Trabalho impecável! Ana desenvolveu uma identidade visual completa para nossa clínica médica. Muito profissional, criativa e atenciosa aos detalhes.",
  },
  {
    id: 3,
    client: "Roberto Silva",
    rating: 4,
    date: "2 semanas atrás",
    project: "Design de Embalagem",
    review: "Ótima experiência trabalhando com a Ana. O design da embalagem ficou lindo e funcional. Recomendo!",
  },
]

export default function ProfilePage({ params }: { params: { id: string } }) {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                <DollarSign className="w-5 h-5 text-primary-foreground" />
              </div>
              <h1 className="text-2xl font-serif font-bold text-primary">TaskBR</h1>
            </Link>

<nav className="hidden md:flex items-center gap-6">
              <Link href="/tarefas" className="text-foreground hover:text-primary transition-colors">
                Encontrar Tarefas
              </Link>
              <Link href="/postar" className="text-foreground hover:text-primary transition-colors">
                Postar Tarefa
              </Link>
            </nav>

<div className="flex items-center gap-3">
              <Button variant="outline">Entrar</Button>
              <Button>Cadastrar</Button>
            </div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        {/* Profile Header */}
        <Card className="mb-8">
          <CardContent className="pt-6">
            <div className="flex flex-col md:flex-row gap-6">
              <div className="flex flex-col items-center md:items-start">
                <Avatar className="w-32 h-32 mb-4">
                  <AvatarFallback className="text-3xl">{profileData.name.charAt(0)}</AvatarFallback>
                </Avatar>
                <Badge variant="secondary" className="mb-2">
                  {profileData.availability}
                </Badge>
              </div>

<div className="flex-1">
                <div className="flex flex-col md:flex-row md:items-start md:justify-between mb-4">
                  <div>
                    <h1 className="text-3xl font-serif font-bold mb-2">{profileData.name}</h1>
                    <p className="text-xl text-muted-foreground mb-3">{profileData.title}</p>
                    <div className="flex items-center gap-4 text-sm text-muted-foreground mb-4">
                      <div className="flex items-center gap-1">
                        <MapPin className="w-4 h-4" />
                        {profileData.location}
                      </div>
                      <div className="flex items-center gap-1">
                        <Calendar className="w-4 h-4" />
                        Membro desde {profileData.memberSince}
                      </div>
                    </div>
                  </div>

<div className="flex gap-2">
                    <Button>
                      <MessageSquare className="w-4 h-4 mr-2" />
                      Enviar Mensagem
                    </Button>
                    <Button variant="outline">
                      <Heart className="w-4 h-4 mr-2" />
                      Favoritar
                    </Button>
                    <Button variant="outline" size="icon">
                      <Share2 className="w-4 h-4" />
                    </Button>
                  </div>
                </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                  <div className="text-center">
                    <div className="flex items-center justify-center gap-1 mb-1">
                      <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                      <span className="text-2xl font-bold">{profileData.rating}</span>
                    </div>
                    <div className="text-sm text-muted-foreground">{profileData.reviews} avaliações</div>
                  </div>
                  <div className="text-center">
                    <div className="flex items-center justify-center gap-1 mb-1">
                      <CheckCircle className="w-4 h-4 text-green-500" />
                      <span className="text-2xl font-bold">{profileData.completedJobs}</span>
                    </div>
                    <div className="text-sm text-muted-foreground">trabalhos concluídos</div>
                  </div>
                  <div className="text-center">
                    <div className="flex items-center justify-center gap-1 mb-1">
                      <Clock className="w-4 h-4 text-blue-500" />
                      <span className="text-2xl font-bold">{profileData.responseTime}</span>
                    </div>
                    <div className="text-sm text-muted-foreground">tempo de resposta</div>
                  </div>
                  <div className="text-center">
                    <div className="flex items-center justify-center gap-1 mb-1">
                      <DollarSign className="w-4 h-4 text-primary" />
                      <span className="text-2xl font-bold">R$ {profileData.hourlyRate}</span>
                    </div>
                    <div className="text-sm text-muted-foreground">por hora</div>
                  </div>
                </div>

<p className="text-foreground leading-relaxed">{profileData.bio}</p>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Main Content */}
        <Tabs defaultValue="portfolio" className="space-y-6">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="portfolio">Portfólio</TabsTrigger>
            <TabsTrigger value="reviews">Avaliações</TabsTrigger>
            <TabsTrigger value="skills">Habilidades</TabsTrigger>
            <TabsTrigger value="work-history">Histórico</TabsTrigger>
          </TabsList>

{/* Portfolio Tab */}
          <TabsContent value="portfolio" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {portfolio.map((item) => (
                <Card key={item.id} className="overflow-hidden hover:shadow-lg transition-shadow">
                  <div className="aspect-video overflow-hidden">
                    <img
                      src={item.image || "/placeholder.svg"}
                      alt={item.title}
                      className="w-full h-full object-cover hover:scale-105 transition-transform"
                    />
                  </div>
                  <CardHeader>
                    <div className="flex items-start justify-between">
                      <Badge variant="outline" className="mb-2">
                        {item.category}
                      </Badge>
                    </div>
                    <CardTitle className="text-lg">{item.title}</CardTitle>
                    <CardDescription>{item.description}</CardDescription>
                  </CardHeader>
                </Card>
              ))}
            </div>
          </TabsContent>

{/* Reviews Tab */}
          <TabsContent value="reviews" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <div className="lg:col-span-1">
                <Card>
                  <CardHeader>
                    <CardTitle>Resumo das Avaliações</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-center mb-6">
                      <div className="text-4xl font-bold text-primary mb-2">{profileData.rating}</div>
                      <div className="flex items-center justify-center gap-1 mb-2">
                        {[1, 2, 3, 4, 5].map((star) => (
                          <Star
                            key={star}
                            className={`w-5 h-5 ${
                              star <= Math.floor(profileData.rating)
                                ? "fill-yellow-400 text-yellow-400"
                                : "text-gray-300"
                            }`}
                          />
                        ))}
                      </div>
                      <div className="text-sm text-muted-foreground">{profileData.reviews} avaliações</div>
                    </div>

<div className="space-y-2">
                      {[5, 4, 3, 2, 1].map((stars) => (
                        <div key={stars} className="flex items-center gap-2">
                          <span className="text-sm w-8">{stars}★</span>
                          <div className="flex-1 bg-muted rounded-full h-2">
                            <div
                              className="bg-yellow-400 h-2 rounded-full"
                              style={{
                                width: `${stars === 5 ? 85 : stars === 4 ? 12 : stars === 3 ? 2 : stars === 2 ? 1 : 0}%`,
                              }}
                            ></div>
                          </div>
                          <span className="text-sm text-muted-foreground w-8">
                            {stars === 5 ? 40 : stars === 4 ? 6 : stars === 3 ? 1 : 0}
                          </span>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </div>

<div className="lg:col-span-2">
                <div className="space-y-4">
                  {reviews.map((review) => (
                    <Card key={review.id}>
                      <CardContent className="pt-6">
                        <div className="flex items-start justify-between mb-4">
                          <div className="flex items-center gap-3">
                            <Avatar>
                              <AvatarFallback>{review.client.charAt(0)}</AvatarFallback>
                            </Avatar>
                            <div>
                              <div className="font-medium">{review.client}</div>
                              <div className="text-sm text-muted-foreground">{review.project}</div>
                            </div>
                          </div>
                          <div className="text-right">
                            <div className="flex items-center gap-1 mb-1">
                              {[1, 2, 3, 4, 5].map((star) => (
                                <Star
                                  key={star}
                                  className={`w-4 h-4 ${
                                    star <= review.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"
                                  }`}
                                />
                              ))}
                            </div>
                            <div className="text-sm text-muted-foreground">{review.date}</div>
                          </div>
                        </div>
                        <p className="text-foreground leading-relaxed">{review.review}</p>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </div>
            </div>
          </TabsContent>

{/* Skills Tab */}
          <TabsContent value="skills" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Award className="w-5 h-5" />
                    Habilidades Principais
                  </CardTitle>
                  <CardDescription>Especialidades e ferramentas que domino</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex flex-wrap gap-2">
                    {profileData.skills.map((skill) => (
                      <Badge key={skill} variant="secondary" className="text-sm">
                        {skill}
                      </Badge>
                    ))}
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Idiomas</CardTitle>
                  <CardDescription>Línguas que falo</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {profileData.languages.map((language) => (
                      <div key={language} className="flex items-center justify-between">
                        <span>{language}</span>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>

<Card>
              <CardHeader>
                <CardTitle>Certificações e Conquistas</CardTitle>
                <CardDescription>Reconhecimentos e certificados profissionais</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="flex items-center gap-3 p-3 border rounded-lg">
                    <Award className="w-8 h-8 text-yellow-500" />
                    <div>
                      <div className="font-medium">Top Rated Freelancer</div>
                      <div className="text-sm text-muted-foreground">TaskBR - 2024</div>
                    </div>
                  </div>
                  <div className="flex items-center gap-3 p-3 border rounded-lg">
                    <Award className="w-8 h-8 text-blue-500" />
                    <div>
                      <div className="font-medium">Adobe Certified Expert</div>
                      <div className="text-sm text-muted-foreground">Illustrator & Photoshop</div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

{/* Work History Tab */}
          <TabsContent value="work-history" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Briefcase className="w-5 h-5" />
                  Trabalhos Recentes
                </CardTitle>
                <CardDescription>Projetos concluídos nos últimos meses</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {recentWork.map((work) => (
                    <div key={work.id} className="border rounded-lg p-4">
                      <div className="flex items-start justify-between mb-3">
                        <div>
                          <h4 className="font-medium">{work.title}</h4>
                          <p className="text-sm text-muted-foreground">Cliente: {work.client}</p>
                        </div>
                        <div className="text-right">
                          <div className="text-lg font-bold text-primary">R$ {work.price}</div>
                          <div className="flex items-center gap-1">
                            {[1, 2, 3, 4, 5].map((star) => (
                              <Star
                                key={star}
                                className={`w-3 h-3 ${
                                  star <= work.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"
                                }`}
                              />
                            ))}
                          </div>
                        </div>
                      </div>
                      <p className="text-sm text-muted-foreground mb-2">Concluído {work.completedDate}</p>
                      <p className="text-foreground italic">"{work.review}"</p>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/perfil/editar/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { DollarSign, Upload, X, Plus, User, Briefcase, Award, Camera } from "lucide-react"
import Link from "next/link"

export default function EditProfilePage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                <DollarSign className="w-5 h-5 text-primary-foreground" />
              </div>
              <h1 className="text-2xl font-serif font-bold text-primary">TaskBR</h1>
            </Link>

<nav className="hidden md:flex items-center gap-6">
              <Link href="/dashboard" className="text-foreground hover:text-primary transition-colors">
                Dashboard
              </Link>
              <Link href="/tarefas" className="text-foreground hover:text-primary transition-colors">
                Encontrar Tarefas
              </Link>
            </nav>

<div className="flex items-center gap-3">
              <Link href="/perfil/1">
                <Button variant="outline">Ver Perfil</Button>
              </Link>
              <Avatar>
                <AvatarFallback>U</AvatarFallback>
              </Avatar>
            </div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8 max-w-4xl">
        {/* Page Header */}
        <div className="mb-8">
          <h2 className="text-3xl font-serif font-bold mb-2">Editar Perfil</h2>
          <p className="text-muted-foreground">Mantenha suas informações atualizadas para atrair mais clientes</p>
        </div>

<form className="space-y-8">
          {/* Basic Information */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <User className="w-5 h-5" />
                Informações Básicas
              </CardTitle>
              <CardDescription>Suas informações pessoais e profissionais</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* Profile Photo */}
              <div className="flex items-center gap-6">
                <Avatar className="w-24 h-24">
                  <AvatarFallback className="text-2xl">AS</AvatarFallback>
                </Avatar>
                <div>
                  <Button variant="outline" className="mb-2 bg-transparent">
                    <Camera className="w-4 h-4 mr-2" />
                    Alterar Foto
                  </Button>
                  <p className="text-sm text-muted-foreground">JPG, PNG ou GIF. Máximo 5MB.</p>
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="name">Nome Completo *</Label>
                  <Input id="name" defaultValue="Ana Silva" className="mt-1" required />
                </div>
                <div>
                  <Label htmlFor="title">Título Profissional *</Label>
                  <Input
                    id="title"
                    defaultValue="Designer Gráfica & Especialista em Branding"
                    className="mt-1"
                    required
                  />
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="location">Localização</Label>
                  <Select defaultValue="sp">
                    <SelectTrigger className="mt-1">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="sp">São Paulo, SP</SelectItem>
                      <SelectItem value="rj">Rio de Janeiro, RJ</SelectItem>
                      <SelectItem value="mg">Belo Horizonte, MG</SelectItem>
                      <SelectItem value="rs">Porto Alegre, RS</SelectItem>
                      <SelectItem value="pr">Curitiba, PR</SelectItem>
                      <SelectItem value="outros">Outros</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label htmlFor="hourly-rate">Taxa por Hora (R$)</Label>
                  <Input id="hourly-rate" type="number" defaultValue="45" className="mt-1" />
                </div>
              </div>

<div>
                <Label htmlFor="bio">Biografia *</Label>
                <Textarea
                  id="bio"
                  defaultValue="Sou uma designer gráfica apaixonada com mais de 5 anos de experiência em criação de identidades visuais, logos e materiais de marketing. Especializo-me em ajudar startups e pequenas empresas a construir uma presença visual forte e memorável."
                  className="mt-1 min-h-32"
                  required
                />
                <p className="text-sm text-muted-foreground mt-1">
                  Descreva sua experiência, especialidades e o que te diferencia
                </p>
              </div>
            </CardContent>
          </Card>

{/* Skills & Expertise */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Award className="w-5 h-5" />
                Habilidades e Especialidades
              </CardTitle>
              <CardDescription>Adicione suas principais habilidades e ferramentas</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <Label>Habilidades Principais</Label>
                <div className="flex flex-wrap gap-2 mt-2 mb-3">
                  {[
                    "Logo Design",
                    "Identidade Visual",
                    "Adobe Illustrator",
                    "Adobe Photoshop",
                    "Branding",
                    "Design de Embalagem",
                    "UI/UX Design",
                    "Figma",
                  ].map((skill) => (
                    <Badge key={skill} variant="secondary" className="flex items-center gap-1">
                      {skill}
                      <X className="w-3 h-3 cursor-pointer hover:text-destructive" />
                    </Badge>
                  ))}
                </div>
                <div className="flex gap-2">
                  <Input placeholder="Adicionar nova habilidade" className="flex-1" />
                  <Button type="button" variant="outline">
                    <Plus className="w-4 h-4" />
                  </Button>
                </div>
              </div>

<div>
                <Label htmlFor="category">Categoria Principal</Label>
                <Select defaultValue="design">
                  <SelectTrigger className="mt-1">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="design">Design</SelectItem>
                    <SelectItem value="programacao">Programação</SelectItem>
                    <SelectItem value="redacao">Redação</SelectItem>
                    <SelectItem value="traducao">Tradução</SelectItem>
                    <SelectItem value="video">Vídeo</SelectItem>
                    <SelectItem value="marketing">Marketing</SelectItem>
                    <SelectItem value="consultoria">Consultoria</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div>
                <Label>Idiomas</Label>
                <div className="space-y-2 mt-2">
                  <div className="flex items-center gap-2">
                    <Input defaultValue="Português" className="flex-1" />
                    <Select defaultValue="nativo">
                      <SelectTrigger className="w-32">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="nativo">Nativo</SelectItem>
                        <SelectItem value="fluente">Fluente</SelectItem>
                        <SelectItem value="intermediario">Intermediário</SelectItem>
                        <SelectItem value="basico">Básico</SelectItem>
                      </SelectContent>
                    </Select>
                    <Button type="button" variant="outline" size="icon">
                      <X className="w-4 h-4" />
                    </Button>
                  </div>
                  <div className="flex items-center gap-2">
                    <Input defaultValue="Inglês" className="flex-1" />
                    <Select defaultValue="fluente">
                      <SelectTrigger className="w-32">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="nativo">Nativo</SelectItem>
                        <SelectItem value="fluente">Fluente</SelectItem>
                        <SelectItem value="intermediario">Intermediário</SelectItem>
                        <SelectItem value="basico">Básico</SelectItem>
                      </SelectContent>
                    </Select>
                    <Button type="button" variant="outline" size="icon">
                      <X className="w-4 h-4" />
                    </Button>
                  </div>
                  <Button type="button" variant="outline" className="w-full bg-transparent">
                    <Plus className="w-4 h-4 mr-2" />
                    Adicionar Idioma
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Portfolio */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Briefcase className="w-5 h-5" />
                Portfólio
              </CardTitle>
              <CardDescription>Mostre seus melhores trabalhos</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
                {[1, 2, 3, 4].map((item) => (
                  <div key={item} className="relative group">
                    <div className="aspect-video bg-muted rounded-lg overflow-hidden">
                      <img
                        src={`/portfolio-item-showcase.png?height=200&width=300&query=portfolio item ${item}`}
                        alt={`Portfolio item ${item}`}
                        className="w-full h-full object-cover"
                      />
                    </div>
                    <Button
                      type="button"
                      variant="destructive"
                      size="icon"
                      className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
                    >
                      <X className="w-4 h-4" />
                    </Button>
                  </div>
                ))}
              </div>

<div className="border-2 border-dashed border-muted-foreground/25 rounded-lg p-8 text-center">
                <Upload className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
                <p className="text-muted-foreground mb-2">Arraste e solte suas imagens aqui</p>
                <p className="text-sm text-muted-foreground mb-4">ou</p>
                <Button type="button" variant="outline">
                  Selecionar Arquivos
                </Button>
                <p className="text-xs text-muted-foreground mt-2">PNG, JPG, GIF até 10MB cada</p>
              </div>
            </CardContent>
          </Card>

{/* Availability & Preferences */}
          <Card>
            <CardHeader>
              <CardTitle>Disponibilidade e Preferências</CardTitle>
              <CardDescription>Configure sua disponibilidade e preferências de trabalho</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="availability">Status de Disponibilidade</Label>
                  <Select defaultValue="available">
                    <SelectTrigger className="mt-1">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="available">Disponível</SelectItem>
                      <SelectItem value="busy">Ocupado</SelectItem>
                      <SelectItem value="unavailable">Indisponível</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label htmlFor="response-time">Tempo de Resposta Médio</Label>
                  <Select defaultValue="2-hours">
                    <SelectTrigger className="mt-1">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="1-hour">1 hora</SelectItem>
                      <SelectItem value="2-hours">2 horas</SelectItem>
                      <SelectItem value="4-hours">4 horas</SelectItem>
                      <SelectItem value="1-day">1 dia</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div>
                <Label htmlFor="work-preferences">Preferências de Trabalho</Label>
                <Textarea
                  id="work-preferences"
                  placeholder="Ex: Prefiro projetos de longo prazo, trabalho melhor com briefings detalhados, disponível para reuniões por videochamada..."
                  className="mt-1"
                />
              </div>
            </CardContent>
          </Card>

{/* Action Buttons */}
          <div className="flex gap-4">
            <Button type="submit" size="lg" className="flex-1">
              Salvar Alterações
            </Button>
            <Button type="button" variant="outline" size="lg">
              Cancelar
            </Button>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/profile-card.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Star, MapPin, CheckCircle } from "lucide-react"
import Link from "next/link"

interface ProfileCardProps {
  id: number
  name: string
  title: string
  location: string
  rating: number
  reviews: number
  completedJobs: number
  hourlyRate: number
  skills: string[]
  availability: "available" | "busy" | "unavailable"
}

export function ProfileCard({
  id,
  name,
  title,
  location,
  rating,
  reviews,
  completedJobs,
  hourlyRate,
  skills,
  availability,
}: ProfileCardProps) {
  const getAvailabilityBadge = () => {
    switch (availability) {
      case "available":
        return <Badge variant="secondary">Disponível</Badge>
      case "busy":
        return <Badge variant="outline">Ocupado</Badge>
      case "unavailable":
        return <Badge variant="destructive">Indisponível</Badge>
    }
  }

return (
    <Card className="hover:shadow-lg transition-shadow">
      <CardContent className="pt-6">
        <div className="flex items-start gap-4 mb-4">
          <Avatar className="w-16 h-16">
            <AvatarFallback className="text-lg">{name.charAt(0)}</AvatarFallback>
          </Avatar>
          <div className="flex-1">
            <div className="flex items-start justify-between mb-2">
              <div>
                <h3 className="font-serif font-bold text-lg">{name}</h3>
                <p className="text-muted-foreground text-sm">{title}</p>
              </div>
              {getAvailabilityBadge()}
            </div>
            <div className="flex items-center gap-4 text-sm text-muted-foreground mb-3">
              <div className="flex items-center gap-1">
                <MapPin className="w-3 h-3" />
                {location}
              </div>
              <div className="flex items-center gap-1">
                <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                {rating} ({reviews})
              </div>
              <div className="flex items-center gap-1">
                <CheckCircle className="w-3 h-3 text-green-500" />
                {completedJobs} trabalhos
              </div>
            </div>
          </div>
        </div>

<div className="flex flex-wrap gap-1 mb-4">
          {skills.slice(0, 4).map((skill) => (
            <Badge key={skill} variant="outline" className="text-xs">
              {skill}
            </Badge>
          ))}
          {skills.length > 4 && (
            <Badge variant="outline" className="text-xs">
              +{skills.length - 4}
            </Badge>
          )}
        </div>

<div className="flex items-center justify-between">
          <div className="text-lg font-bold text-primary">R$ {hourlyRate}/hora</div>
          <Link href={`/perfil/${id}`}>
            <Button size="sm">Ver Perfil</Button>
          </Link>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]png:file="public/modern-tech-startup-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-tech-startup-logo-9Z8X1uawIDdZDDwx7CdQBF4OxXmxax.png" isMerged="true"
[V0_FILE]png:file="public/mobile-app-interface.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mobile-app-interface-2bpxKMiIwjcKLSEVDWDLBXZyhfAKOk.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-juqpm.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/corporate-website-design.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/corporate-website-design-muGHu0fxiquFN0SeqVpfusfgTYDmWR.png" isMerged="true"
[V0_FILE]png:file="public/portfolio-item-showcase.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/portfolio-item-showcase-j8qOXV3D3jAoISdjiepNcnWmgNFXpe.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/avaliar/[taskId]/page.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Separator } from "@/components/ui/separator"
import { Star, DollarSign, CheckCircle } from "lucide-react"
import Link from "next/link"
import { useState } from "react"

// Mock data - in a real app this would come from a database
const taskData = {
  id: 1,
  title: "Criar Logo para Startup",
  description: "Logo moderno e profissional para empresa de tecnologia",
  price: 150,
  completedDate: "2 dias atrás",
  freelancer: {
    name: "Ana Silva",
    rating: 4.8,
    completedJobs: 89,
  },
  client: {
    name: "João Oliveira",
    rating: 4.9,
    tasksPosted: 12,
  },
  deliverables: [
    "Logo em alta resolução (PNG, SVG)",
    "Variações colorida e monocromática",
    "Manual de identidade visual",
    "Mockups de aplicação",
  ],
}

export default function ReviewPage({ params }: { params: { taskId: string } }) {
  const [rating, setRating] = useState(0)
  const [hoverRating, setHoverRating] = useState(0)

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                <DollarSign className="w-5 h-5 text-primary-foreground" />
              </div>
              <h1 className="text-2xl font-serif font-bold text-primary">TaskBR</h1>
            </Link>

<div className="flex items-center gap-3">
              <Button variant="outline">Perfil</Button>
              <Avatar>
                <AvatarFallback>U</AvatarFallback>
              </Avatar>
            </div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8 max-w-4xl">
        {/* Page Header */}
        <div className="text-center mb-8">
          <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <CheckCircle className="w-8 h-8 text-green-600" />
          </div>
          <h2 className="text-3xl font-serif font-bold mb-2">Trabalho Concluído!</h2>
          <p className="text-muted-foreground">Avalie sua experiência para ajudar outros usuários</p>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Review Form */}
          <div className="lg:col-span-2">
            <Card>
              <CardHeader>
                <CardTitle>Avaliar Freelancer</CardTitle>
                <CardDescription>Compartilhe sua experiência trabalhando com Ana Silva</CardDescription>
              </CardHeader>
              <CardContent>
                <form className="space-y-6">
                  {/* Overall Rating */}
                  <div>
                    <Label className="text-base font-medium">Avaliação Geral *</Label>
                    <div className="flex items-center gap-2 mt-2 mb-2">
                      {[1, 2, 3, 4, 5].map((star) => (
                        <button
                          key={star}
                          type="button"
                          className="focus:outline-none"
                          onMouseEnter={() => setHoverRating(star)}
                          onMouseLeave={() => setHoverRating(0)}
                          onClick={() => setRating(star)}
                        >
                          <Star
                            className={`w-8 h-8 transition-colors ${
                              star <= (hoverRating || rating)
                                ? "fill-yellow-400 text-yellow-400"
                                : "text-gray-300 hover:text-yellow-300"
                            }`}
                          />
                        </button>
                      ))}
                    </div>
                    <p className="text-sm text-muted-foreground">
                      {rating === 0 && "Clique nas estrelas para avaliar"}
                      {rating === 1 && "Muito insatisfeito"}
                      {rating === 2 && "Insatisfeito"}
                      {rating === 3 && "Neutro"}
                      {rating === 4 && "Satisfeito"}
                      {rating === 5 && "Muito satisfeito"}
                    </p>
                  </div>

{/* Detailed Ratings */}
                  <div className="space-y-4">
                    <h4 className="font-medium">Avaliações Específicas</h4>

{[
                      { label: "Qualidade do Trabalho", key: "quality" },
                      { label: "Comunicação", key: "communication" },
                      { label: "Cumprimento de Prazos", key: "deadlines" },
                      { label: "Profissionalismo", key: "professionalism" },
                    ].map((item) => (
                      <div key={item.key} className="flex items-center justify-between">
                        <span className="text-sm font-medium">{item.label}</span>
                        <div className="flex items-center gap-1">
                          {[1, 2, 3, 4, 5].map((star) => (
                            <Star key={star} className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>

{/* Written Review */}
                  <div>
                    <Label htmlFor="review">Comentário *</Label>
                    <Textarea
                      id="review"
                      placeholder="Descreva sua experiência trabalhando com Ana. O que ela fez bem? Como foi a comunicação? Você recomendaria para outros?"
                      className="mt-2 min-h-32"
                      required
                    />
                    <p className="text-sm text-muted-foreground mt-1">
                      Seja específico e construtivo. Sua avaliação ajuda outros usuários.
                    </p>
                  </div>

{/* Recommendation */}
                  <div>
                    <Label className="text-base font-medium">Você recomendaria Ana Silva?</Label>
                    <div className="flex gap-4 mt-2">
                      <label className="flex items-center gap-2 cursor-pointer">
                        <input type="radio" name="recommend" value="yes" className="text-primary" />
                        <span className="text-sm">Sim, recomendo</span>
                      </label>
                      <label className="flex items-center gap-2 cursor-pointer">
                        <input type="radio" name="recommend" value="no" className="text-primary" />
                        <span className="text-sm">Não recomendo</span>
                      </label>
                    </div>
                  </div>

{/* Submit Buttons */}
                  <div className="flex gap-4 pt-4">
                    <Button type="submit" className="flex-1">
                      Enviar Avaliação
                    </Button>
                    <Button type="button" variant="outline">
                      Pular por Agora
                    </Button>
                  </div>
                </form>
              </CardContent>
            </Card>
          </div>

{/* Sidebar */}
          <div className="space-y-6">
            {/* Task Summary */}
            <Card>
              <CardHeader>
                <CardTitle>Resumo do Trabalho</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div>
                    <h4 className="font-medium mb-2">{taskData.title}</h4>
                    <p className="text-sm text-muted-foreground">{taskData.description}</p>
                  </div>

<div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">Valor pago:</span>
                    <span className="font-medium text-primary">R$ {taskData.price}</span>
                  </div>

<div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">Concluído:</span>
                    <span className="font-medium">{taskData.completedDate}</span>
                  </div>

<div>
                    <h5 className="font-medium mb-2">Entregáveis:</h5>
                    <ul className="space-y-1">
                      {taskData.deliverables.map((item, index) => (
                        <li key={index} className="text-sm text-muted-foreground flex items-center gap-2">
                          <CheckCircle className="w-3 h-3 text-green-500" />
                          {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Freelancer Info */}
            <Card>
              <CardHeader>
                <CardTitle>Sobre o Freelancer</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-3 mb-4">
                  <Avatar className="w-12 h-12">
                    <AvatarFallback>{taskData.freelancer.name.charAt(0)}</AvatarFallback>
                  </Avatar>
                  <div>
                    <div className="font-medium">{taskData.freelancer.name}</div>
                    <div className="flex items-center gap-1 text-sm text-muted-foreground">
                      <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                      {taskData.freelancer.rating} avaliação
                    </div>
                  </div>
                </div>

<div className="text-sm text-muted-foreground">
                  {taskData.freelancer.completedJobs} trabalhos concluídos
                </div>

<Link href={`/perfil/${taskData.freelancer.name}`}>
                  <Button variant="outline" className="w-full mt-4 bg-transparent">
                    Ver Perfil Completo
                  </Button>
                </Link>
              </CardContent>
            </Card>

{/* Tips */}
            <Card>
              <CardHeader>
                <CardTitle>Dicas para Avaliar</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3 text-sm">
                <div className="flex items-start gap-2">
                  <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0"></div>
                  <p>Seja honesto e construtivo</p>
                </div>
                <div className="flex items-start gap-2">
                  <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0"></div>
                  <p>Mencione pontos específicos do trabalho</p>
                </div>
                <div className="flex items-start gap-2">
                  <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0"></div>
                  <p>Avalie a comunicação e profissionalismo</p>
                </div>
                <div className="flex items-start gap-2">
                  <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0"></div>
                  <p>Sua avaliação ajuda outros usuários</p>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/avaliacoes/page.tsx"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Star, DollarSign, Search, Filter, Calendar, MessageSquare, Flag } from "lucide-react"
import Link from "next/link"

// Mock data - in a real app this would come from a database
const receivedReviews = [
  {
    id: 1,
    client: "João Oliveira",
    project: "Logo para Startup",
    rating: 5,
    date: "2 dias atrás",
    review:
      "Ana é uma profissional excepcional! Criou um logo perfeito para minha startup, capturando exatamente a essência que eu queria transmitir. Comunicação excelente e entrega no prazo.",
    helpful: 12,
    response: null,
  },
  {
    id: 2,
    client: "Maria Santos",
    project: "Identidade Visual para Clínica",
    rating: 5,
    date: "1 semana atrás",
    review:
      "Trabalho impecável! Ana desenvolveu uma identidade visual completa para nossa clínica médica. Muito profissional, criativa e atenciosa aos detalhes.",
    helpful: 8,
    response:
      "Muito obrigada, Maria! Foi um prazer trabalhar no projeto da clínica. Fico feliz que tenha gostado do resultado final.",
  },
  {
    id: 3,
    client: "Carlos Lima",
    project: "Design de Embalagem",
    rating: 4,
    date: "2 semanas atrás",
    review:
      "Ótima experiência trabalhando com a Ana. O design da embalagem ficou lindo e funcional. Pequenos ajustes foram necessários, mas ela foi muito receptiva ao feedback.",
    helpful: 5,
    response: null,
  },
]

const givenReviews = [
  {
    id: 1,
    freelancer: "Pedro Designer",
    project: "Website Corporativo",
    rating: 4,
    date: "1 semana atrás",
    review: "Bom trabalho no desenvolvimento do website. Entrega no prazo e boa comunicação durante o projeto.",
  },
  {
    id: 2,
    freelancer: "Lucia Redatora",
    project: "Artigos para Blog",
    rating: 5,
    date: "3 semanas atrás",
    review:
      "Excelente redatora! Os artigos ficaram muito bem escritos e dentro do tom que solicitei. Recomendo para outros projetos de conteúdo.",
  },
]

export default function ReviewsPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                <DollarSign className="w-5 h-5 text-primary-foreground" />
              </div>
              <h1 className="text-2xl font-serif font-bold text-primary">TaskBR</h1>
            </Link>

<nav className="hidden md:flex items-center gap-6">
              <Link href="/dashboard" className="text-foreground hover:text-primary transition-colors">
                Dashboard
              </Link>
              <Link href="/avaliacoes" className="text-primary font-medium">
                Avaliações
              </Link>
              <Link href="/tarefas" className="text-foreground hover:text-primary transition-colors">
                Encontrar Tarefas
              </Link>
            </nav>

<div className="container mx-auto px-4 py-8">
        {/* Page Header */}
        <div className="mb-8">
          <h2 className="text-3xl font-serif font-bold mb-2">Minhas Avaliações</h2>
          <p className="text-muted-foreground">Gerencie as avaliações que você recebeu e deu</p>
        </div>

{/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Avaliação Média</CardTitle>
              <Star className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-primary flex items-center gap-1">
                4.8
                <Star className="h-5 w-5 fill-yellow-400 text-yellow-400" />
              </div>
              <p className="text-xs text-muted-foreground">Baseado em 47 avaliações</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Avaliações Recebidas</CardTitle>
              <MessageSquare className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">47</div>
              <p className="text-xs text-muted-foreground">+3 este mês</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Avaliações Dadas</CardTitle>
              <Star className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">23</div>
              <p className="text-xs text-muted-foreground">Taxa de resposta: 85%</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Recomendações</CardTitle>
              <Badge className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-green-600">94%</div>
              <p className="text-xs text-muted-foreground">Clientes que recomendam</p>
            </CardContent>
          </Card>
        </div>

{/* Main Content */}
        <Tabs defaultValue="received" className="space-y-6">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="received">Avaliações Recebidas</TabsTrigger>
            <TabsTrigger value="given">Avaliações Dadas</TabsTrigger>
          </TabsList>

{/* Received Reviews Tab */}
          <TabsContent value="received" className="space-y-6">
            {/* Filters */}
            <Card>
              <CardContent className="pt-6">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                    <Input placeholder="Buscar avaliações..." className="pl-10" />
                  </div>

<Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Classificação" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">Todas</SelectItem>
                      <SelectItem value="5">5 estrelas</SelectItem>
                      <SelectItem value="4">4 estrelas</SelectItem>
                      <SelectItem value="3">3 estrelas</SelectItem>
                      <SelectItem value="2">2 estrelas</SelectItem>
                      <SelectItem value="1">1 estrela</SelectItem>
                    </SelectContent>
                  </Select>

<Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Período" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">Todos</SelectItem>
                      <SelectItem value="week">Última semana</SelectItem>
                      <SelectItem value="month">Último mês</SelectItem>
                      <SelectItem value="quarter">Últimos 3 meses</SelectItem>
                      <SelectItem value="year">Último ano</SelectItem>
                    </SelectContent>
                  </Select>

<Button variant="outline">
                    <Filter className="w-4 h-4 mr-2" />
                    Mais Filtros
                  </Button>
                </div>
              </CardContent>
            </Card>

{/* Reviews List */}
            <div className="space-y-4">
              {receivedReviews.map((review) => (
                <Card key={review.id}>
                  <CardContent className="pt-6">
                    <div className="flex items-start justify-between mb-4">
                      <div className="flex items-center gap-3">
                        <Avatar>
                          <AvatarFallback>{review.client.charAt(0)}</AvatarFallback>
                        </Avatar>
                        <div>
                          <div className="font-medium">{review.client}</div>
                          <div className="text-sm text-muted-foreground">{review.project}</div>
                        </div>
                      </div>
                      <div className="text-right">
                        <div className="flex items-center gap-1 mb-1">
                          {[1, 2, 3, 4, 5].map((star) => (
                            <Star
                              key={star}
                              className={`w-4 h-4 ${
                                star <= review.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"
                              }`}
                            />
                          ))}
                        </div>
                        <div className="text-sm text-muted-foreground flex items-center gap-1">
                          <Calendar className="w-3 h-3" />
                          {review.date}
                        </div>
                      </div>
                    </div>

<p className="text-foreground leading-relaxed mb-4">{review.review}</p>

{review.response && (
                      <div className="bg-muted/50 rounded-lg p-4 mb-4">
                        <div className="flex items-center gap-2 mb-2">
                          <Avatar className="w-6 h-6">
                            <AvatarFallback className="text-xs">EU</AvatarFallback>
                          </Avatar>
                          <span className="text-sm font-medium">Sua resposta:</span>
                        </div>
                        <p className="text-sm text-muted-foreground">{review.response}</p>
                      </div>
                    )}

<div className="flex items-center justify-between">
                      <div className="flex items-center gap-4 text-sm text-muted-foreground">
                        <span>{review.helpful} pessoas acharam útil</span>
                      </div>
                      <div className="flex gap-2">
                        {!review.response && (
                          <Button size="sm" variant="outline">
                            <MessageSquare className="w-4 h-4 mr-1" />
                            Responder
                          </Button>
                        )}
                        <Button size="sm" variant="outline">
                          <Flag className="w-4 h-4 mr-1" />
                          Reportar
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

{/* Given Reviews Tab */}
          <TabsContent value="given" className="space-y-6">
            <div className="space-y-4">
              {givenReviews.map((review) => (
                <Card key={review.id}>
                  <CardContent className="pt-6">
                    <div className="flex items-start justify-between mb-4">
                      <div className="flex items-center gap-3">
                        <Avatar>
                          <AvatarFallback>{review.freelancer.charAt(0)}</AvatarFallback>
                        </Avatar>
                        <div>
                          <div className="font-medium">{review.freelancer}</div>
                          <div className="text-sm text-muted-foreground">{review.project}</div>
                        </div>
                      </div>
                      <div className="text-right">
                        <div className="flex items-center gap-1 mb-1">
                          {[1, 2, 3, 4, 5].map((star) => (
                            <Star
                              key={star}
                              className={`w-4 h-4 ${
                                star <= review.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"
                              }`}
                            />
                          ))}
                        </div>
                        <div className="text-sm text-muted-foreground flex items-center gap-1">
                          <Calendar className="w-3 h-3" />
                          {review.date}
                        </div>
                      </div>
                    </div>

<p className="text-foreground leading-relaxed mb-4">{review.review}</p>

<div className="flex justify-end">
                      <Button size="sm" variant="outline">
                        Editar Avaliação
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>

{givenReviews.length === 0 && (
              <Card>
                <CardContent className="pt-6 text-center">
                  <div className="text-muted-foreground mb-4">
                    <Star className="w-12 h-12 mx-auto mb-2 text-muted-foreground/50" />
                    <p>Você ainda não deu nenhuma avaliação</p>
                  </div>
                  <Link href="/dashboard">
                    <Button>Ver Trabalhos Concluídos</Button>
                  </Link>
                </CardContent>
              </Card>
            )}
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/rating-stars.tsx"
"use client"

import { Star } from "lucide-react"
import { useState } from "react"

interface RatingStarsProps {
  rating: number
  onRatingChange?: (rating: number) => void
  readonly?: boolean
  size?: "sm" | "md" | "lg"
  showValue?: boolean
}

export function RatingStars({
  rating,
  onRatingChange,
  readonly = false,
  size = "md",
  showValue = false,
}: RatingStarsProps) {
  const [hoverRating, setHoverRating] = useState(0)

const sizeClasses = {
    sm: "w-4 h-4",
    md: "w-5 h-5",
    lg: "w-6 h-6",
  }

const handleClick = (value: number) => {
    if (!readonly && onRatingChange) {
      onRatingChange(value)
    }
  }

const handleMouseEnter = (value: number) => {
    if (!readonly) {
      setHoverRating(value)
    }
  }

const handleMouseLeave = () => {
    if (!readonly) {
      setHoverRating(0)
    }
  }

return (
    <div className="flex items-center gap-1">
      {[1, 2, 3, 4, 5].map((star) => (
        <button
          key={star}
          type="button"
          className={`${readonly ? "cursor-default" : "cursor-pointer focus:outline-none"}`}
          onClick={() => handleClick(star)}
          onMouseEnter={() => handleMouseEnter(star)}
          onMouseLeave={handleMouseLeave}
          disabled={readonly}
        >
          <Star
            className={`${sizeClasses[size]} transition-colors ${
              star <= (hoverRating || rating)
                ? "fill-yellow-400 text-yellow-400"
                : readonly
                  ? "text-gray-300"
                  : "text-gray-300 hover:text-yellow-300"
            }`}
          />
        </button>
      ))}
      {showValue && <span className="ml-2 text-sm font-medium">{rating.toFixed(1)}</span>}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/review-card.tsx"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { RatingStars } from "./rating-stars"
import { Calendar, MessageSquare, Flag } from "lucide-react"

interface ReviewCardProps {
  id: number
  reviewer: string
  project: string
  rating: number
  date: string
  review: string
  helpful?: number
  response?: string
  onRespond?: () => void
  onReport?: () => void
  showActions?: boolean
}

export function ReviewCard({
  id,
  reviewer,
  project,
  rating,
  date,
  review,
  helpful,
  response,
  onRespond,
  onReport,
  showActions = true,
}: ReviewCardProps) {
  return (
    <Card>
      <CardContent className="pt-6">
        <div className="flex items-start justify-between mb-4">
          <div className="flex items-center gap-3">
            <Avatar>
              <AvatarFallback>{reviewer.charAt(0)}</AvatarFallback>
            </Avatar>
            <div>
              <div className="font-medium">{reviewer}</div>
              <div className="text-sm text-muted-foreground">{project}</div>
            </div>
          </div>
          <div className="text-right">
            <RatingStars rating={rating} readonly size="sm" />
            <div className="text-sm text-muted-foreground flex items-center gap-1 mt-1">
              <Calendar className="w-3 h-3" />
              {date}
            </div>
          </div>
        </div>

<p className="text-foreground leading-relaxed mb-4">{review}</p>

{response && (
          <div className="bg-muted/50 rounded-lg p-4 mb-4">
            <div className="flex items-center gap-2 mb-2">
              <Avatar className="w-6 h-6">
                <AvatarFallback className="text-xs">EU</AvatarFallback>
              </Avatar>
              <span className="text-sm font-medium">Sua resposta:</span>
            </div>
            <p className="text-sm text-muted-foreground">{response}</p>
          </div>
        )}

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

:root {
  /* Updated color palette to emerald green theme for trust and professionalism */
  --background: oklch(1 0 0); /* Pure white */
  --foreground: oklch(0.35 0 0); /* Dark gray #475569 */
  --card: oklch(0.97 0 0); /* Light gray #f1f5f9 */
  --card-foreground: oklch(0.35 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.35 0 0);
  --primary: oklch(0.45 0.15 160); /* Emerald #059669 */
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.55 0.12 160); /* Bright emerald #10b981 */
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.45 0 0);
  --accent: oklch(0.55 0.12 160); /* Bright emerald accent */
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.55 0.22 35); /* Orange for destructive actions */
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.92 0 0);
  --input: oklch(0.98 0 0);
  --ring: oklch(0.45 0.15 160 / 0.5);
  --chart-1: oklch(0.45 0.15 160);
  --chart-2: oklch(0.55 0.12 160);
  --chart-3: oklch(0.55 0.22 35);
  --chart-4: oklch(0.45 0 0);
  --chart-5: oklch(0.65 0.18 45);
  --radius: 0.5rem;
  --sidebar: oklch(0.97 0 0);
  --sidebar-foreground: oklch(0.35 0 0);
  --sidebar-primary: oklch(0.45 0.15 160);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.55 0.12 160);
  --sidebar-accent-foreground: oklch(1 0 0);
  --sidebar-border: oklch(0.92 0 0);
  --sidebar-ring: oklch(0.45 0.15 160 / 0.5);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.55 0.12 160);
  --primary-foreground: oklch(0.145 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.55 0.12 160);
  --accent-foreground: oklch(0.145 0 0);
  --destructive: oklch(0.55 0.22 35);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.55 0.12 160 / 0.5);
  --chart-1: oklch(0.55 0.12 160);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.55 0.12 160);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.55 0.12 160 / 0.5);
}

@theme inline {
  --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);
  /* Added font family variables for Playfair Display and Source Sans Pro */
  --font-sans: var(--font-source-sans);
  --font-serif: var(--font-playfair);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-sans;
  }
  /* Added typography hierarchy for headings using serif font */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-serif font-bold;
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Playfair_Display, Source_Sans_3 } from "next/font/google"
import "./globals.css"

const playfair = Playfair_Display({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-playfair",
})

const sourceSans = Source_Sans_3({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-source-sans",
})

export const metadata: Metadata = {
  title: "TaskBR - Ganhe Dinheiro com Tarefas",
  description: "Plataforma brasileira para ganhar dinheiro completando tarefas ou contratando serviços",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="pt-BR" className={`${playfair.variable} ${sourceSans.variable} antialiased`}>
      <body>{children}</body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Search, Plus, Star, MapPin, Clock, DollarSign } from "lucide-react"

export default function HomePage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                <DollarSign className="w-5 h-5 text-primary-foreground" />
              </div>
              <h1 className="text-2xl font-serif font-bold text-primary">TaskBR</h1>
            </div>

<nav className="hidden md:flex items-center gap-6">
              <a href="#" className="text-foreground hover:text-primary transition-colors">
                Encontrar Tarefas
              </a>
              <a href="#" className="text-foreground hover:text-primary transition-colors">
                Postar Tarefa
              </a>
              <a href="#" className="text-foreground hover:text-primary transition-colors">
                Como Funciona
              </a>
            </nav>

{/* Hero Section */}
      <section className="py-16 px-4">
        <div className="container mx-auto text-center max-w-4xl">
          <h2 className="text-4xl md:text-6xl font-serif font-bold mb-6 text-foreground">
            Ganhe Dinheiro com <span className="text-primary">Suas Habilidades</span>
          </h2>
          <p className="text-xl text-muted-foreground mb-8 leading-relaxed">
            Conecte-se com pessoas que precisam de serviços ou encontre tarefas para completar. Uma plataforma segura e
            confiável para brasileiros.
          </p>

<div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
            <Button size="lg" className="text-lg px-8">
              <Plus className="w-5 h-5 mr-2" />
              Postar uma Tarefa
            </Button>
            <Button size="lg" variant="outline" className="text-lg px-8 bg-transparent">
              <Search className="w-5 h-5 mr-2" />
              Encontrar Trabalho
            </Button>
          </div>

{/* Stats */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-2xl mx-auto">
            <div className="text-center">
              <div className="text-3xl font-bold text-primary mb-2">1.2k+</div>
              <div className="text-muted-foreground">Tarefas Completadas</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-primary mb-2">500+</div>
              <div className="text-muted-foreground">Usuários Ativos</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-primary mb-2">4.8★</div>
              <div className="text-muted-foreground">Avaliação Média</div>
            </div>
          </div>
        </div>
      </section>

{/* Featured Tasks */}
      <section className="py-16 px-4 bg-muted/30">
        <div className="container mx-auto">
          <div className="text-center mb-12">
            <h3 className="text-3xl font-serif font-bold mb-4">Tarefas em Destaque</h3>
            <p className="text-muted-foreground text-lg">Oportunidades disponíveis agora</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
            {/* Task Card 1 */}
            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="flex items-start justify-between">
                  <Badge variant="secondary" className="mb-2">
                    Design
                  </Badge>
                  <div className="text-right">
                    <div className="text-2xl font-bold text-primary">R$ 150</div>
                    <div className="text-sm text-muted-foreground">por projeto</div>
                  </div>
                </div>
                <CardTitle className="text-xl">Criar Logo para Startup</CardTitle>
                <CardDescription>
                  Preciso de um logo moderno e profissional para minha nova empresa de tecnologia.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-4 text-sm text-muted-foreground mb-4">
                  <div className="flex items-center gap-1">
                    <MapPin className="w-4 h-4" />
                    São Paulo, SP
                  </div>
                  <div className="flex items-center gap-1">
                    <Clock className="w-4 h-4" />3 dias
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div className="w-8 h-8 bg-muted rounded-full"></div>
                    <div>
                      <div className="font-medium text-sm">João Silva</div>
                      <div className="flex items-center gap-1">
                        <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                        <span className="text-xs text-muted-foreground">4.9</span>
                      </div>
                    </div>
                  </div>
                  <Button size="sm">Ver Detalhes</Button>
                </div>
              </CardContent>
            </Card>

{/* Task Card 2 */}
            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="flex items-start justify-between">
                  <Badge variant="secondary" className="mb-2">
                    Redação
                  </Badge>
                  <div className="text-right">
                    <div className="text-2xl font-bold text-primary">R$ 80</div>
                    <div className="text-sm text-muted-foreground">por artigo</div>
                  </div>
                </div>
                <CardTitle className="text-xl">Artigos para Blog</CardTitle>
                <CardDescription>
                  Busco redator para criar conteúdo sobre marketing digital e empreendedorismo.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-4 text-sm text-muted-foreground mb-4">
                  <div className="flex items-center gap-1">
                    <MapPin className="w-4 h-4" />
                    Remoto
                  </div>
                  <div className="flex items-center gap-1">
                    <Clock className="w-4 h-4" />1 semana
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div className="w-8 h-8 bg-muted rounded-full"></div>
                    <div>
                      <div className="font-medium text-sm">Maria Santos</div>
                      <div className="flex items-center gap-1">
                        <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                        <span className="text-xs text-muted-foreground">4.7</span>
                      </div>
                    </div>
                  </div>
                  <Button size="sm">Ver Detalhes</Button>
                </div>
              </CardContent>
            </Card>

{/* Task Card 3 */}
            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="flex items-start justify-between">
                  <Badge variant="secondary" className="mb-2">
                    Programação
                  </Badge>
                  <div className="text-right">
                    <div className="text-2xl font-bold text-primary">R$ 300</div>
                    <div className="text-sm text-muted-foreground">por projeto</div>
                  </div>
                </div>
                <CardTitle className="text-xl">Site Responsivo</CardTitle>
                <CardDescription>
                  Desenvolvimento de landing page responsiva para empresa de consultoria.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-4 text-sm text-muted-foreground mb-4">
                  <div className="flex items-center gap-1">
                    <MapPin className="w-4 h-4" />
                    Rio de Janeiro, RJ
                  </div>
                  <div className="flex items-center gap-1">
                    <Clock className="w-4 h-4" />5 dias
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div className="w-8 h-8 bg-muted rounded-full"></div>
                    <div>
                      <div className="font-medium text-sm">Carlos Lima</div>
                      <div className="flex items-center gap-1">
                        <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                        <span className="text-xs text-muted-foreground">5.0</span>
                      </div>
                    </div>
                  </div>
                  <Button size="sm">Ver Detalhes</Button>
                </div>
              </CardContent>
            </Card>
          </div>

<div className="text-center mt-12">
            <Button variant="outline" size="lg">
              Ver Todas as Tarefas
            </Button>
          </div>
        </div>
      </section>

{/* How It Works */}
      <section className="py-16 px-4">
        <div className="container mx-auto">
          <div className="text-center mb-12">
            <h3 className="text-3xl font-serif font-bold mb-4">Como Funciona</h3>
            <p className="text-muted-foreground text-lg">Simples, seguro e eficiente</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            <div className="text-center">
              <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <Plus className="w-8 h-8 text-primary" />
              </div>
              <h4 className="text-xl font-serif font-bold mb-2">1. Poste sua Tarefa</h4>
              <p className="text-muted-foreground">
                Descreva o que precisa e defina o valor que está disposto a pagar.
              </p>
            </div>

<div className="text-center">
              <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <Search className="w-8 h-8 text-primary" />
              </div>
              <h4 className="text-xl font-serif font-bold mb-2">2. Receba Propostas</h4>
              <p className="text-muted-foreground">
                Profissionais qualificados enviarão suas propostas para sua tarefa.
              </p>
            </div>

<div className="text-center">
              <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <Star className="w-8 h-8 text-primary" />
              </div>
              <h4 className="text-xl font-serif font-bold mb-2">3. Escolha e Avalie</h4>
              <p className="text-muted-foreground">Selecione o melhor profissional e avalie o trabalho concluído.</p>
            </div>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-card border-t py-12 px-4">
        <div className="container mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <div className="flex items-center gap-2 mb-4">
                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                  <DollarSign className="w-5 h-5 text-primary-foreground" />
                </div>
                <h1 className="text-xl font-serif font-bold text-primary">TaskBR</h1>
              </div>
              <p className="text-muted-foreground">
                A plataforma brasileira para conectar pessoas e oportunidades de trabalho.
              </p>
            </div>

<div>
              <h5 className="font-serif font-bold mb-4">Para Clientes</h5>
              <ul className="space-y-2 text-muted-foreground">
                <li>
                  <a href="#" className="hover:text-primary transition-colors">
                    Postar Tarefa
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-primary transition-colors">
                    Encontrar Profissionais
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-primary transition-colors">
                    Como Funciona
                  </a>
                </li>
              </ul>
            </div>

<div>
              <h5 className="font-serif font-bold mb-4">Para Profissionais</h5>
              <ul className="space-y-2 text-muted-foreground">
                <li>
                  <a href="#" className="hover:text-primary transition-colors">
                    Encontrar Trabalho
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-primary transition-colors">
                    Criar Perfil
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-primary transition-colors">
                    Dicas de Sucesso
                  </a>
                </li>
              </ul>
            </div>

<div>
              <h5 className="font-serif font-bold mb-4">Suporte</h5>
              <ul className="space-y-2 text-muted-foreground">
                <li>
                  <a href="#" className="hover:text-primary transition-colors">
                    Central de Ajuda
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-primary transition-colors">
                    Contato
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-primary transition-colors">
                    Termos de Uso
                  </a>
                </li>
              </ul>
            </div>
          </div>

<div className="border-t mt-8 pt-8 text-center text-muted-foreground">
            <p>© 2024 TaskBR. Todos os direitos reservados.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/tarefas/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, Filter, MapPin, Clock, Star, DollarSign } from "lucide-react"
import Link from "next/link"

const tasks = [
  {
    id: 1,
    title: "Criar Logo para Startup",
    description: "Preciso de um logo moderno e profissional para minha nova empresa de tecnologia.",
    category: "Design",
    price: 150,
    location: "São Paulo, SP",
    deadline: "3 dias",
    client: "João Silva",
    rating: 4.9,
    proposals: 12,
  },
  {
    id: 2,
    title: "Artigos para Blog",
    description: "Busco redator para criar conteúdo sobre marketing digital e empreendedorismo.",
    category: "Redação",
    price: 80,
    location: "Remoto",
    deadline: "1 semana",
    client: "Maria Santos",
    rating: 4.7,
    proposals: 8,
  },
  {
    id: 3,
    title: "Site Responsivo",
    description: "Desenvolvimento de landing page responsiva para empresa de consultoria.",
    category: "Programação",
    price: 300,
    location: "Rio de Janeiro, RJ",
    deadline: "5 dias",
    client: "Carlos Lima",
    rating: 5.0,
    proposals: 15,
  },
  {
    id: 4,
    title: "Tradução de Documentos",
    description: "Tradução de documentos técnicos do inglês para o português.",
    category: "Tradução",
    price: 120,
    location: "Remoto",
    deadline: "2 dias",
    client: "Ana Costa",
    rating: 4.8,
    proposals: 6,
  },
  {
    id: 5,
    title: "Edição de Vídeo",
    description: "Edição de vídeos promocionais para redes sociais.",
    category: "Vídeo",
    price: 200,
    location: "Belo Horizonte, MG",
    deadline: "1 semana",
    client: "Pedro Oliveira",
    rating: 4.6,
    proposals: 10,
  },
  {
    id: 6,
    title: "Consultoria em Marketing",
    description: "Consultoria para estratégia de marketing digital para e-commerce.",
    category: "Marketing",
    price: 400,
    location: "Remoto",
    deadline: "2 semanas",
    client: "Lucia Ferreira",
    rating: 4.9,
    proposals: 20,
  },
]

export default function TasksPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                <DollarSign className="w-5 h-5 text-primary-foreground" />
              </div>
              <h1 className="text-2xl font-serif font-bold text-primary">TaskBR</h1>
            </Link>

<nav className="hidden md:flex items-center gap-6">
              <Link href="/tarefas" className="text-primary font-medium">
                Encontrar Tarefas
              </Link>
              <Link href="/postar" className="text-foreground hover:text-primary transition-colors">
                Postar Tarefa
              </Link>
              <Link href="/" className="text-foreground hover:text-primary transition-colors">
                Como Funciona
              </Link>
            </nav>

<div className="container mx-auto px-4 py-8">
        {/* Page Header */}
        <div className="mb-8">
          <h2 className="text-3xl font-serif font-bold mb-2">Encontrar Tarefas</h2>
          <p className="text-muted-foreground">Descubra oportunidades para ganhar dinheiro com suas habilidades</p>
        </div>

{/* Filters */}
        <div className="bg-card rounded-lg p-6 mb-8">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
              <Input placeholder="Buscar tarefas..." className="pl-10" />
            </div>

<Select>
              <SelectTrigger>
                <SelectValue placeholder="Categoria" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todas as Categorias</SelectItem>
                <SelectItem value="design">Design</SelectItem>
                <SelectItem value="programacao">Programação</SelectItem>
                <SelectItem value="redacao">Redação</SelectItem>
                <SelectItem value="traducao">Tradução</SelectItem>
                <SelectItem value="video">Vídeo</SelectItem>
                <SelectItem value="marketing">Marketing</SelectItem>
              </SelectContent>
            </Select>

<Select>
              <SelectTrigger>
                <SelectValue placeholder="Localização" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todas as Localizações</SelectItem>
                <SelectItem value="remoto">Remoto</SelectItem>
                <SelectItem value="sp">São Paulo</SelectItem>
                <SelectItem value="rj">Rio de Janeiro</SelectItem>
                <SelectItem value="mg">Minas Gerais</SelectItem>
              </SelectContent>
            </Select>

<Select>
              <SelectTrigger>
                <SelectValue placeholder="Faixa de Preço" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todos os Preços</SelectItem>
                <SelectItem value="0-100">R$ 0 - R$ 100</SelectItem>
                <SelectItem value="100-200">R$ 100 - R$ 200</SelectItem>
                <SelectItem value="200-500">R$ 200 - R$ 500</SelectItem>
                <SelectItem value="500+">R$ 500+</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="flex items-center justify-between mt-4">
            <div className="text-sm text-muted-foreground">{tasks.length} tarefas encontradas</div>
            <Button variant="outline" size="sm">
              <Filter className="w-4 h-4 mr-2" />
              Mais Filtros
            </Button>
          </div>
        </div>

{/* Tasks Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {tasks.map((task) => (
            <Card key={task.id} className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="flex items-start justify-between">
                  <Badge variant="secondary" className="mb-2">
                    {task.category}
                  </Badge>
                  <div className="text-right">
                    <div className="text-2xl font-bold text-primary">R$ {task.price}</div>
                    <div className="text-sm text-muted-foreground">por projeto</div>
                  </div>
                </div>
                <CardTitle className="text-xl">{task.title}</CardTitle>
                <CardDescription className="line-clamp-2">{task.description}</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-4 text-sm text-muted-foreground mb-4">
                  <div className="flex items-center gap-1">
                    <MapPin className="w-4 h-4" />
                    {task.location}
                  </div>
                  <div className="flex items-center gap-1">
                    <Clock className="w-4 h-4" />
                    {task.deadline}
                  </div>
                </div>

<div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-2">
                    <div className="w-8 h-8 bg-muted rounded-full"></div>
                    <div>
                      <div className="font-medium text-sm">{task.client}</div>
                      <div className="flex items-center gap-1">
                        <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                        <span className="text-xs text-muted-foreground">{task.rating}</span>
                      </div>
                    </div>
                  </div>
                  <div className="text-sm text-muted-foreground">{task.proposals} propostas</div>
                </div>

<Link href={`/tarefas/${task.id}`}>
                  <Button className="w-full">Ver Detalhes</Button>
                </Link>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Load More */}
        <div className="text-center mt-12">
          <Button variant="outline" size="lg">
            Carregar Mais Tarefas
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tarefas/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/tarefas/[id]/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { MapPin, Clock, Star, DollarSign, Users, Calendar, CheckCircle } from "lucide-react"
import Link from "next/link"

// Mock data - in a real app this would come from a database
const taskData = {
  id: 1,
  title: "Criar Logo para Startup",
  description: `Estou lançando uma nova startup de tecnologia focada em soluções de inteligência artificial para pequenas empresas. Preciso de um logo profissional e moderno que transmita inovação, confiança e tecnologia.

O logo deve ser:
- Moderno e minimalista
- Funcionar bem em diferentes tamanhos
- Ter versões colorida e monocromática
- Incluir variações horizontal e vertical

Entregáveis:
- Arquivos em alta resolução (PNG, JPG, SVG)
- Manual de identidade visual básico
- Mockups de aplicação

Prazo: 3 dias a partir da contratação.`,
  category: "Design",
  price: 150,
  location: "São Paulo, SP",
  deadline: "3 dias",
  postedDate: "2 dias atrás",
  client: {
    name: "João Silva",
    rating: 4.9,
    reviews: 47,
    tasksPosted: 12,
    memberSince: "Janeiro 2023",
  },
  proposals: 12,
  skills: ["Logo Design", "Identidade Visual", "Adobe Illustrator", "Branding"],
  status: "open",
}

const proposals = [
  {
    id: 1,
    freelancer: "Ana Designer",
    rating: 4.8,
    reviews: 23,
    price: 140,
    deliveryTime: "2 dias",
    proposal: "Olá! Sou especialista em criação de logos e identidade visual. Tenho mais de 5 anos de experiência...",
  },
  {
    id: 2,
    freelancer: "Carlos Creative",
    rating: 4.9,
    reviews: 31,
    price: 160,
    deliveryTime: "3 dias",
    proposal: "Oi João! Adorei seu projeto. Já criei logos para várias startups de tecnologia...",
  },
  {
    id: 3,
    freelancer: "Maria Brands",
    rating: 5.0,
    reviews: 18,
    price: 150,
    deliveryTime: "2 dias",
    proposal: "Perfeito! Tenho experiência específica com startups de IA. Posso criar algo único...",
  },
]

export default function TaskDetailPage({ params }: { params: { id: string } }) {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                <DollarSign className="w-5 h-5 text-primary-foreground" />
              </div>
              <h1 className="text-2xl font-serif font-bold text-primary">TaskBR</h1>
            </Link>

<div className="container mx-auto px-4 py-8">
        {/* Breadcrumb */}
        <div className="mb-6">
          <Link href="/tarefas" className="text-muted-foreground hover:text-primary">
            Tarefas
          </Link>
          <span className="text-muted-foreground mx-2">/</span>
          <span className="text-foreground">{taskData.title}</span>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Main Content */}
          <div className="lg:col-span-2">
            <Card>
              <CardHeader>
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-3">
                      <Badge variant="secondary">{taskData.category}</Badge>
                      <Badge variant="outline" className="text-green-600 border-green-600">
                        <CheckCircle className="w-3 h-3 mr-1" />
                        Aberta
                      </Badge>
                    </div>
                    <CardTitle className="text-2xl mb-2">{taskData.title}</CardTitle>
                    <div className="flex items-center gap-4 text-sm text-muted-foreground">
                      <div className="flex items-center gap-1">
                        <MapPin className="w-4 h-4" />
                        {taskData.location}
                      </div>
                      <div className="flex items-center gap-1">
                        <Clock className="w-4 h-4" />
                        Prazo: {taskData.deadline}
                      </div>
                      <div className="flex items-center gap-1">
                        <Calendar className="w-4 h-4" />
                        Postado {taskData.postedDate}
                      </div>
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-3xl font-bold text-primary">R$ {taskData.price}</div>
                    <div className="text-sm text-muted-foreground">por projeto</div>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="prose max-w-none">
                  <h4 className="font-serif font-bold mb-3">Descrição do Projeto</h4>
                  <div className="whitespace-pre-line text-foreground leading-relaxed">{taskData.description}</div>
                </div>

<div>
                  <h4 className="font-serif font-bold mb-3">Habilidades Necessárias</h4>
                  <div className="flex flex-wrap gap-2">
                    {taskData.skills.map((skill) => (
                      <Badge key={skill} variant="outline">
                        {skill}
                      </Badge>
                    ))}
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Proposals Section */}
            <Card className="mt-6">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Users className="w-5 h-5" />
                  Propostas ({proposals.length})
                </CardTitle>
                <CardDescription>Profissionais interessados neste projeto</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-6">
                  {proposals.map((proposal) => (
                    <div key={proposal.id} className="border rounded-lg p-4">
                      <div className="flex items-start justify-between mb-3">
                        <div className="flex items-center gap-3">
                          <Avatar>
                            <AvatarFallback>{proposal.freelancer.charAt(0)}</AvatarFallback>
                          </Avatar>
                          <div>
                            <div className="font-medium">{proposal.freelancer}</div>
                            <div className="flex items-center gap-2 text-sm text-muted-foreground">
                              <div className="flex items-center gap-1">
                                <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                                {proposal.rating}
                              </div>
                              <span>({proposal.reviews} avaliações)</span>
                            </div>
                          </div>
                        </div>
                        <div className="text-right">
                          <div className="text-xl font-bold text-primary">R$ {proposal.price}</div>
                          <div className="text-sm text-muted-foreground">em {proposal.deliveryTime}</div>
                        </div>
                      </div>
                      <p className="text-foreground mb-3">{proposal.proposal}</p>
                      <div className="flex gap-2">
                        <Button size="sm">Ver Perfil</Button>
                        <Button size="sm" variant="outline">
                          Enviar Mensagem
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

{/* Sidebar */}
          <div>
            {/* Client Info */}
            <Card className="mb-6">
              <CardHeader>
                <CardTitle>Sobre o Cliente</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-3 mb-4">
                  <Avatar className="w-12 h-12">
                    <AvatarFallback className="text-lg">{taskData.client.name.charAt(0)}</AvatarFallback>
                  </Avatar>
                  <div>
                    <div className="font-medium">{taskData.client.name}</div>
                    <div className="flex items-center gap-1 text-sm text-muted-foreground">
                      <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                      {taskData.client.rating} ({taskData.client.reviews} avaliações)
                    </div>
                  </div>
                </div>

<div className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Tarefas postadas:</span>
                    <span className="font-medium">{taskData.client.tasksPosted}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Membro desde:</span>
                    <span className="font-medium">{taskData.client.memberSince}</span>
                  </div>
                </div>

<Button className="w-full mt-4">Enviar Proposta</Button>
              </CardContent>
            </Card>

{/* Project Stats */}
            <Card>
              <CardHeader>
                <CardTitle>Estatísticas do Projeto</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Propostas:</span>
                    <span className="font-medium">{taskData.proposals}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Visualizações:</span>
                    <span className="font-medium">127</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Postado:</span>
                    <span className="font-medium">{taskData.postedDate}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Status:</span>
                    <Badge variant="outline" className="text-green-600 border-green-600">
                      Aberta
                    </Badge>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/postar/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { DollarSign, Plus, FileText, MapPin } from "lucide-react"
import Link from "next/link"

export default function PostTaskPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                <DollarSign className="w-5 h-5 text-primary-foreground" />
              </div>
              <h1 className="text-2xl font-serif font-bold text-primary">TaskBR</h1>
            </Link>

<nav className="hidden md:flex items-center gap-6">
              <Link href="/tarefas" className="text-foreground hover:text-primary transition-colors">
                Encontrar Tarefas
              </Link>
              <Link href="/postar" className="text-primary font-medium">
                Postar Tarefa
              </Link>
            </nav>

<div className="container mx-auto px-4 py-8 max-w-4xl">
        {/* Page Header */}
        <div className="text-center mb-8">
          <h2 className="text-3xl font-serif font-bold mb-2">Postar uma Nova Tarefa</h2>
          <p className="text-muted-foreground">Descreva seu projeto e encontre o profissional ideal para realizá-lo</p>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Main Form */}
          <div className="lg:col-span-2">
            <form className="space-y-6">
              {/* Basic Information */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <FileText className="w-5 h-5" />
                    Informações Básicas
                  </CardTitle>
                  <CardDescription>Conte-nos sobre seu projeto</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <Label htmlFor="title">Título da Tarefa *</Label>
                    <Input id="title" placeholder="Ex: Criar logo para minha empresa" className="mt-1" required />
                    <p className="text-sm text-muted-foreground mt-1">
                      Seja claro e específico sobre o que você precisa
                    </p>
                  </div>

<div>
                    <Label htmlFor="category">Categoria *</Label>
                    <Select required>
                      <SelectTrigger className="mt-1">
                        <SelectValue placeholder="Selecione uma categoria" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="design">Design</SelectItem>
                        <SelectItem value="programacao">Programação</SelectItem>
                        <SelectItem value="redacao">Redação</SelectItem>
                        <SelectItem value="traducao">Tradução</SelectItem>
                        <SelectItem value="video">Vídeo</SelectItem>
                        <SelectItem value="marketing">Marketing</SelectItem>
                        <SelectItem value="consultoria">Consultoria</SelectItem>
                        <SelectItem value="outros">Outros</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div>
                    <Label htmlFor="description">Descrição Detalhada *</Label>
                    <Textarea
                      id="description"
                      placeholder="Descreva seu projeto em detalhes. Inclua objetivos, requisitos, entregáveis esperados..."
                      className="mt-1 min-h-32"
                      required
                    />
                    <p className="text-sm text-muted-foreground mt-1">
                      Quanto mais detalhes, melhores propostas você receberá
                    </p>
                  </div>