88:I[903690,["/chat-static/_next/static/immutable/chunks/3im61c5a8fkcz.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0mwr0fog443j2.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/31kxnp_byhi43.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/0sktipe4vjpva.js","/chat-static/_next/static/immutable/chunks/0esh3_fydqhs4.js","/chat-static/_next/static/immutable/chunks/2w2x4bf9lm3-y.js","/chat-static/_next/static/immutable/chunks/2uh_-aagfm1yq.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3_3lqfmfv126f.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/3b31dkoetf3d7.js","/chat-static/_next/static/immutable/chunks/1vx8uudj0cz_4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1urmgqflbxgxw.js","/chat-static/_next/static/immutable/chunks/0udaurr3r3784.js","/chat-static/_next/static/immutable/chunks/3m12kzoseic0s.js","/chat-static/_next/static/immutable/chunks/1tftl9086q6dm.js","/chat-static/_next/static/immutable/chunks/3io-u6yty6rrx.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/2jj-dsskzkkea.js","/chat-static/_next/static/immutable/chunks/1j5oudbzt39os.js","/chat-static/_next/static/immutable/chunks/3bi-_argycpwi.js","/chat-static/_next/static/immutable/chunks/3hu0_8f7tf9w8.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/0kuscvrfktvnt.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/2l3og29it_ib5.js","/chat-static/_next/static/immutable/chunks/1m5fp3kw0roaj.js","/chat-static/_next/static/immutable/chunks/0bxymcj1of6fi.js","/chat-static/_next/static/immutable/chunks/2svky_5tna12v.js","/chat-static/_next/static/immutable/chunks/0bli-y2vwpvug.js"],"ExplicitChatIdProvider"] 89:I[838238,["/chat-static/_next/static/immutable/chunks/3im61c5a8fkcz.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0mwr0fog443j2.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/31kxnp_byhi43.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/0sktipe4vjpva.js","/chat-static/_next/static/immutable/chunks/0esh3_fydqhs4.js","/chat-static/_next/static/immutable/chunks/2w2x4bf9lm3-y.js","/chat-static/_next/static/immutable/chunks/2uh_-aagfm1yq.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3_3lqfmfv126f.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/3b31dkoetf3d7.js","/chat-static/_next/static/immutable/chunks/1vx8uudj0cz_4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1urmgqflbxgxw.js","/chat-static/_next/static/immutable/chunks/0udaurr3r3784.js","/chat-static/_next/static/immutable/chunks/3m12kzoseic0s.js","/chat-static/_next/static/immutable/chunks/1tftl9086q6dm.js","/chat-static/_next/static/immutable/chunks/3io-u6yty6rrx.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/2jj-dsskzkkea.js","/chat-static/_next/static/immutable/chunks/1j5oudbzt39os.js","/chat-static/_next/static/immutable/chunks/3bi-_argycpwi.js","/chat-static/_next/static/immutable/chunks/3hu0_8f7tf9w8.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/0kuscvrfktvnt.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/2l3og29it_ib5.js","/chat-static/_next/static/immutable/chunks/1m5fp3kw0roaj.js","/chat-static/_next/static/immutable/chunks/0bxymcj1of6fi.js","/chat-static/_next/static/immutable/chunks/2svky_5tna12v.js","/chat-static/_next/static/immutable/chunks/0bli-y2vwpvug.js"],"SWRDataProvider"] 8b:[] 8c:[["b_lMGffiX32BO",null],["b_vqyILBY0wbZ",null],["b_DX0QEe7seCp",null]] 8d:[["b_lMGffiX32BO",{"templateVersionId":null,"templateCanonId":null}],["b_vqyILBY0wbZ",{"templateVersionId":null,"templateCanonId":null}],["b_DX0QEe7seCp",{"templateVersionId":null,"templateCanonId":null}]] 8e:[["b_P35MRNMYWno","$D2025-08-03T13:10:32.499Z"],["b_98m3Uemiehc","$D2025-08-03T13:42:10.766Z"],["b_tGMU3vWtxjk","$D2025-08-03T14:18:45.770Z"],["b_E9v3HTGxWJm","$D2025-08-03T14:28:08.050Z"],["b_pVsI54pJ752","$D2025-08-03T14:45:34.523Z"],["b_GLBTCFs1KeB","$D2025-08-03T15:09:07.391Z"],["b_53a6RDNn54y","$D2025-08-03T15:18:23.662Z"],["b_8H6zlZ0M4ys","$D2025-08-03T15:30:04.721Z"],["b_Xw2TJ4djhYn","$D2025-08-03T15:59:36.321Z"],["b_8xVStnlppOK","$D2025-08-03T16:11:55.838Z"],["b_UHJjVRpzV3l","$D2025-08-03T16:22:18.520Z"],["b_OhFWr6Hn6Gl","$D2025-08-03T17:21:11.445Z"],["b_2yKIqoj7Vvy","$D2025-08-03T17:30:43.386Z"],["b_6OYmlDOo0fo","$D2025-08-03T18:00:38.257Z"],["b_q5WKnbmnEpy","$D2025-08-03T18:09:09.478Z"],["b_viA74hqe5dk","$D2025-08-03T18:18:12.987Z"],["b_KlMSHcv2hEQ","$D2025-08-03T18:31:51.716Z"],["b_nygxv8ROJu3","$D2025-08-04T09:26:19.965Z"],["b_HWy6lY1IL6V","$D2025-08-05T21:38:33.512Z"],["b_JOqPrYgSEXc","$D2025-08-05T21:44:45.899Z"],["b_iXuN2itsb5K","$D2025-08-05T21:56:01.659Z"],["b_DZpchjkCjYm","$D2025-08-05T22:38:39.844Z"],["b_R9Hw8PkxeXW","$D2025-09-05T07:29:44.883Z"],["b_no2sAgGtOD5","$D2025-09-05T07:54:41.541Z"],["b_IMvsgM9xGoa","$D2025-09-05T07:59:05.189Z"],["b_7IBoYgo7jco","$D2025-09-05T08:04:34.547Z"],["b_LrlNk6dLdFO","$D2025-09-05T08:10:43.396Z"],["b_JlqZ32YJqGz","$D2025-09-05T08:25:27.436Z"],["b_GD1iPqVCVuE","$D2025-09-05T08:38:46.251Z"],["b_5KZpxUjeGNv","$D2025-09-06T10:20:29.123Z"],["b_fmapEiWi5MY","$D2025-09-06T10:25:58.193Z"],["b_UseH3wP6N06","$D2025-09-06T11:39:23.899Z"],["b_CBt2KoBc1I0","$D2025-09-06T12:01:02.909Z"],["b_ZxTtd8G4c32","$D2025-09-06T14:05:00.560Z"],["b_lMGffiX32BO","$D2025-09-06T14:27:31.745Z"],["b_vqyILBY0wbZ","$D2025-09-06T14:33:05.895Z"],["b_DX0QEe7seCp","$D2025-09-06T14:36:12.113Z"]] 8f:[["b_lMGffiX32BO",false],["b_vqyILBY0wbZ",false],["b_DX0QEe7seCp",false]] 90:[["b_lMGffiX32BO","$undefined"],["b_vqyILBY0wbZ",{"deploymentId":"dpl_9oH9YmGdmibCHTtLg6L1JroRFc3N"}],["b_DX0QEe7seCp","$undefined"]] 91:[["b_lMGffiX32BO",null],["b_vqyILBY0wbZ",null],["b_DX0QEe7seCp",null]] 92:[["b_lMGffiX32BO",true],["b_vqyILBY0wbZ",true],["b_DX0QEe7seCp",true]] 93:[["b_lMGffiX32BO",true],["b_vqyILBY0wbZ",true],["b_DX0QEe7seCp",true]] 94:[] 95:T4b37,An error occurred during deployment. Please fix: ``` Running build in Washington, D.C., USA (East) – iad1 Build machine configuration: 2 cores, 8 GB Retrieving list of deployment files... Downloading 148 deployment files... Restored build cache from previous deployment (FAZ3UbMSXK89uZiFgCtCu7Hnagsu) Running "vercel build" Vercel CLI 47.0.5 Running "install" command: `bun install`... bun install v1.2.21 (7c45ed97) Resolving dependencies Resolved, downloaded and extracted [1064] Saved lockfile Checked 276 installs across 278 packages (no changes) [3.72s] Detected Next.js version: 14.2.16 Running "bun run build" $ next build ▲ Next.js 14.2.16 Creating an optimized production build ... ✓ Compiled successfully Skipping validation of types Skipping linting Collecting page data ... Generating static pages (0/17) ... Generating static pages (4/17) TypeError: e.content.replace is not a function at j (/vercel/path1/.next/server/app/blog/[slug]/page.js:1:9429) at nj (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) { digest: '2206307168' } Error occurred prerendering page "/blog/0". Read more: https://nextjs.org/docs/messages/prerender-error TypeError: e.content.replace is not a function at j (/vercel/path1/.next/server/app/blog/[slug]/page.js:1:9429) at nj (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) TypeError: e.content.replace is not a function at j (/vercel/path1/.next/server/app/blog/[slug]/page.js:1:9429) at nj (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) { digest: '2206307168' } Error occurred prerendering page "/blog/1". Read more: https://nextjs.org/docs/messages/prerender-error TypeError: e.content.replace is not a function at j (/vercel/path1/.next/server/app/blog/[slug]/page.js:1:9429) at nj (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) TypeError: e.content.replace is not a function at j (/vercel/path1/.next/server/app/blog/[slug]/page.js:1:9429) at nj (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) { digest: '2206307168' } Error occurred prerendering page "/blog/2". Read more: https://nextjs.org/docs/messages/prerender-error TypeError: e.content.replace is not a function at j (/vercel/path1/.next/server/app/blog/[slug]/page.js:1:9429) at nj (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) TypeError: e.content.replace is not a function at j (/vercel/path1/.next/server/app/blog/[slug]/page.js:1:9429) at nj (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) { digest: '2206307168' } Error occurred prerendering page "/blog/3". Read more: https://nextjs.org/docs/messages/prerender-error TypeError: e.content.replace is not a function at j (/vercel/path1/.next/server/app/blog/[slug]/page.js:1:9429) at nj (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) Generating static pages (8/17) TypeError: e.content.replace is not a function at j (/vercel/path1/.next/server/app/blog/[slug]/page.js:1:9429) at nj (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) { digest: '2206307168' } Error occurred prerendering page "/blog/4". Read more: https://nextjs.org/docs/messages/prerender-error TypeError: e.content.replace is not a function at j (/vercel/path1/.next/server/app/blog/[slug]/page.js:1:9429) at nj (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) TypeError: e.content.replace is not a function at j (/vercel/path1/.next/server/app/blog/[slug]/page.js:1:9429) at nj (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) { digest: '2206307168' } Error occurred prerendering page "/blog/5". Read more: https://nextjs.org/docs/messages/prerender-error TypeError: e.content.replace is not a function at j (/vercel/path1/.next/server/app/blog/[slug]/page.js:1:9429) at nj (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) TypeError: e.content.replace is not a function at j (/vercel/path1/.next/server/app/blog/[slug]/page.js:1:9429) at nj (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) { digest: '2206307168' } Error occurred prerendering page "/blog/6". Read more: https://nextjs.org/docs/messages/prerender-error TypeError: e.content.replace is not a function at j (/vercel/path1/.next/server/app/blog/[slug]/page.js:1:9429) at nj (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) TypeError: e.content.replace is not a function at j (/vercel/path1/.next/server/app/blog/[slug]/page.js:1:9429) at nj (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) { digest: '2206307168' } Error occurred prerendering page "/blog/7". Read more: https://nextjs.org/docs/messages/prerender-error TypeError: e.content.replace is not a function at j (/vercel/path1/.next/server/app/blog/[slug]/page.js:1:9429) at nj (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) at nM (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) at nN (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853) at nB (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) at nD (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680) Generating static pages (12/17) ✓ Generating static pages (17/17) > Export encountered errors on following paths: /blog/[slug]/page: /blog/0 /blog/[slug]/page: /blog/1 /blog/[slug]/page: /blog/2 /blog/[slug]/page: /blog/3 /blog/[slug]/page: /blog/4 /blog/[slug]/page: /blog/5 /blog/[slug]/page: /blog/6 /blog/[slug]/page: /blog/7 error: script "build" exited with code 1 Error: Command "bun run build" exited with 1 ``` 96:T626f7,[V0_FILE]typescriptreact:file="types/goal.ts" isMerged="true" export interface Goal { id: number name: string targetAmount: number savedAmount: number targetDate: string createdDate: string } [V0_FILE]typescriptreact:file="hooks/use-local-storage.ts" isMerged="true" "use client" import { useState, useEffect } from "react" export function useLocalStorage(key: string, initialValue: T) { const [storedValue, setStoredValue] = useState(initialValue) useEffect(() => { try { const item = window.localStorage.getItem(key) if (item) { setStoredValue(JSON.parse(item)) } } catch (error) { console.error(`Error reading localStorage key "${key}":`, error) } }, [key]) const setValue = (value: T | ((val: T) => T)) => { try { const valueToStore = value instanceof Function ? value(storedValue) : value setStoredValue(valueToStore) window.localStorage.setItem(key, JSON.stringify(valueToStore)) } catch (error) { console.error(`Error setting localStorage key "${key}":`, error) } } return [storedValue, setValue] as const } [V0_FILE]typescriptreact:file="contexts/translation-context.tsx" isMerged="true" "use client" import { createContext, useContext, type ReactNode } from "react" const translations = { en: { "hero.title": "Track Your Savings Goals Easily with Our Privacy-First Sinking Fund Tracker", "hero.subtitle": "No cloud. No subscriptions. Just simple savings tracking that works.", "hero.cta": "Start Tracking Goals Now", "features.privacy": "Privacy-first", "features.analytics": "Smart Analytics", "features.multilang": "Multi-language", "features.export": "Export PDF/CSV", "features.share": "Share Goals", "dashboard.totalGoals": "Total Goals", "dashboard.totalSaved": "Total Saved", "dashboard.overallProgress": "Overall Progress", "form.addGoal": "Add New Savings Goal", "analytics.title": "Savings Analytics", }, fr: { "hero.title": "Suivez Vos Objectifs d'Épargne Facilement avec Notre Tracker Confidentiel", "hero.subtitle": "Pas de cloud. Pas d'abonnements. Juste un suivi d'épargne simple qui fonctionne.", "hero.cta": "Commencer le Suivi", "features.privacy": "Confidentialité", "features.analytics": "Analytics Intelligents", "features.multilang": "Multi-langues", "features.export": "Export PDF/CSV", "features.share": "Partager Objectifs", "dashboard.totalGoals": "Objectifs Totaux", "dashboard.totalSaved": "Total Économisé", "dashboard.overallProgress": "Progrès Global", "form.addGoal": "Ajouter Nouvel Objectif", "analytics.title": "Analytics d'Épargne", }, es: { "hero.title": "Rastrea Tus Metas de Ahorro Fácilmente con Nuestro Tracker de Privacidad", "hero.subtitle": "Sin nube. Sin suscripciones. Solo seguimiento de ahorros simple que funciona.", "hero.cta": "Comenzar Seguimiento", "features.privacy": "Privacidad Primero", "features.analytics": "Analytics Inteligentes", "features.multilang": "Multi-idioma", "features.export": "Exportar PDF/CSV", "features.share": "Compartir Metas", "dashboard.totalGoals": "Metas Totales", "dashboard.totalSaved": "Total Ahorrado", "dashboard.overallProgress": "Progreso General", "form.addGoal": "Agregar Nueva Meta", "analytics.title": "Analytics de Ahorros", }, } interface TranslationContextType { t: (key: string) => string language: string } const TranslationContext = createContext(undefined) export function TranslationProvider({ children, language }: { children: ReactNode; language: string }) { const t = (key: string) => { return translations[language as keyof typeof translations]?.[key as keyof typeof translations.en] || key } return {children} } export function useTranslation() { const context = useContext(TranslationContext) if (context === undefined) { throw new Error("useTranslation must be used within a TranslationProvider") } return context } [V0_FILE]typescriptreact:file="components/modals/blog-modal.tsx" isMerged="true" "use client" import { X } from "lucide-react" import { blogPosts } from "@/data/blog-posts" interface BlogModalProps { isOpen: boolean onClose: () => void postId: string | null } export default function BlogModal({ isOpen, onClose, postId }: BlogModalProps) { if (!isOpen || !postId) return null const post = blogPosts[postId] if (!post) return null return (

) } [V0_FILE]typescriptreact:file="components/modals/legal-modal.tsx" isMerged="true" "use client" import { X } from "lucide-react" import { legalPages } from "@/data/legal-pages" interface LegalModalProps { isOpen: boolean onClose: () => void pageId: string | null } export default function LegalModal({ isOpen, onClose, pageId }: LegalModalProps) { if (!isOpen || !pageId) return null const page = legalPages[pageId] if (!page) return null return (

) } [V0_FILE]png:file="public/images/hero-image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sinking%20fund%20tracker%20app%20hero%20image-2HFRA78dyiudoMmuBRnVYxZJ1LE3MV.png" isMerged="true" [V0_FILE]jpeg:file="public/images/logo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Sinking%20Fund%20Tracker%20App%20Logo%20%20.jpg-bfHrhICTzDD0YZfIYYFQD7yZsTpATo.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Favicon%20Sinking%20Fund%20Tracker%20App%20.jpg-AcQYe5OSMwKxJeemNUhb1HHoKKNhtr.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const export type ChartConfig = { [k in string]: { label?: React.ReactNode icon?: React.ComponentType color?: string } } const ChartContext = React.createContext<{ config: ChartConfig } | null>(null) export function ChartContainer({ children, config, className, ...props }: React.ComponentProps<"div"> & { config: ChartConfig }) { return (

{children}

) } export const ChartTooltip = ({ children }: { children: React.ReactNode }) =>

{children}

export const ChartTooltipContent = ({ children }: { children: React.ReactNode }) =>

{children}

export const ChartLegend = ({ children }: { children: React.ReactNode }) =>

{children}

export const ChartLegendContent = ({ children }: { children: React.ReactNode }) =>

{children}

export const ChartStyle = ({ children }: { children: React.ReactNode }) =>

{children}

interface ChartProps { type: "doughnut" | "bar" data: any options?: any } export function Chart({ type, data, options }: ChartProps) { // Return a simple placeholder to avoid WebAssembly compilation issues return (

📊

Chart visualization

Analytics available

) } [V0_FILE]typescriptreact:file="components/modals/pro-modal.tsx" isEdit="true" isMerged="true" "use client" import { X, Crown, Check, FileText, Download, Share2 } from "lucide-react" interface ProModalProps { isOpen: boolean onClose: () => void onUpgrade: () => void } export default function ProModal({ isOpen, onClose, onUpgrade }: ProModalProps) { if (!isOpen) return null const handleUpgrade = () => { // Direct redirect to Flutterwave payment window.location.href = "https://flutterwave.com/pay/aepushnzbwox" } return (

Unlock Pro Features

Get lifetime access to premium export and sharing features

Professional PDF Reports

Export detailed savings reports with charts and analytics

CSV Data Export

Download your data for spreadsheet analysis and backup

Share Goals with Family

Create shareable links for accountability and support

$9.99

One-time payment • Lifetime access

No subscriptions • No recurring fees

Secure payment powered by Flutterwave • 30-day money-back guarantee

) } [V0_FILE]typescriptreact:file="hooks/use-pro-status.ts" isMerged="true" "use client" import { useState, useEffect } from "react" import { useLocalStorage } from "./use-local-storage" interface ProStatus { isPro: boolean activatedAt: string | null transactionId: string | null } export function useProStatus() { const [proStatus, setProStatus] = useLocalStorage("sinkingFundProStatus", { isPro: false, activatedAt: null, transactionId: null, }) const [isLoading, setIsLoading] = useState(false) // Check payment status on mount useEffect(() => { checkPaymentStatus() }, []) const checkPaymentStatus = async () => { try { const urlParams = new URLSearchParams(window.location.search) const paymentStatus = urlParams.get("status") const txRef = urlParams.get("tx_ref") const transactionId = urlParams.get("transaction_id") if (paymentStatus === "successful" && txRef && !proStatus.isPro) { // Activate Pro features const newProStatus: ProStatus = { isPro: true, activatedAt: new Date().toISOString(), transactionId: transactionId || txRef, } setProStatus(newProStatus) // Clean up URL window.history.replaceState({}, document.title, window.location.pathname) // Show success notification setTimeout(() => { alert( "🎉 Welcome to Pro! Your premium features are now unlocked:\n\n✅ PDF Export\n✅ CSV Export\n✅ Goal Sharing\n✅ Advanced Analytics\n\nEnjoy your lifetime access!", ) }, 500) } } catch (error) { console.error("Error checking payment status:", error) } } const activatePro = (transactionId?: string) => { const newProStatus: ProStatus = { isPro: true, activatedAt: new Date().toISOString(), transactionId: transactionId || "manual_activation", } setProStatus(newProStatus) } const deactivatePro = () => { setProStatus({ isPro: false, activatedAt: null, transactionId: null, }) } return { isPro: proStatus.isPro, activatedAt: proStatus.activatedAt, transactionId: proStatus.transactionId, isLoading, activatePro, deactivatePro, checkPaymentStatus, } } [V0_FILE]typescriptreact:file="components/modals/share-goal-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { X, Share2, Copy, Mail, MessageCircle } from "lucide-react" import type { Goal } from "@/types/goal" interface ShareGoalModalProps { isOpen: boolean onClose: () => void goal: Goal | null isPro: boolean onProClick: () => void } export default function ShareGoalModal({ isOpen, onClose, goal, isPro, onProClick }: ShareGoalModalProps) { const [copied, setCopied] = useState(false) if (!isOpen || !goal) return null if (!isPro) { return (

🔒 Pro Feature

Goal sharing is a Pro feature. Upgrade to share your goals with family and friends for accountability!

) } const shareUrl = `${window.location.origin}/shared-goal/${btoa( JSON.stringify({ id: goal.id, name: goal.name, targetAmount: goal.targetAmount, savedAmount: goal.savedAmount, targetDate: goal.targetDate, progress: Math.round((goal.savedAmount / goal.targetAmount) * 100), }), )}` const copyToClipboard = async () => { try { await navigator.clipboard.writeText(shareUrl) setCopied(true) setTimeout(() => setCopied(false), 2000) } catch (error) { console.error("Failed to copy:", error) } } const shareViaEmail = () => { const subject = `Check out my savings goal: ${goal.name}` const body = `I'm saving for "${goal.name}" and wanted to share my progress with you!\n\nTarget: $${goal.targetAmount.toLocaleString()}\nSaved so far: $${goal.savedAmount.toLocaleString()}\nProgress: ${Math.round((goal.savedAmount / goal.targetAmount) * 100)}%\n\nView my goal: ${shareUrl}` window.location.href = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}` } const shareViaWhatsApp = () => { const message = `🎯 I'm saving for "${goal.name}"!\n💰 Target: $${goal.targetAmount.toLocaleString()}\n✅ Progress: ${Math.round((goal.savedAmount / goal.targetAmount) * 100)}%\n\nTrack my progress: ${shareUrl}` window.open(`https://wa.me/?text=${encodeURIComponent(message)}`, "_blank") } return (

Share Your Goal

Share "{goal.name}" with family and friends for accountability!

{/* Share URL */}

Share Link

{/* Share Options */}

{/* Goal Preview */}

Goal Preview

{goal.name}

Target: ${goal.targetAmount.toLocaleString()}

Saved: ${goal.savedAmount.toLocaleString()}

Progress: {Math.round((goal.savedAmount / goal.targetAmount) * 100)}%

) } [V0_FILE]typescriptreact:file="components/modals/pro-comparison-modal.tsx" isMerged="true" "use client" import { X, Check, Crown } from "lucide-react" interface ProComparisonModalProps { isOpen: boolean onClose: () => void onUpgrade: () => void } export default function ProComparisonModal({ isOpen, onClose, onUpgrade }: ProComparisonModalProps) { if (!isOpen) return null const features = [ { feature: "Unlimited Goals", free: true, pro: true, description: "Track as many savings goals as you want", }, { feature: "Progress Analytics", free: true, pro: true, description: "Visual charts and progress tracking", }, { feature: "Local Data Storage", free: true, pro: true, description: "Your data stays private on your device", }, { feature: "Multi-language Support", free: true, pro: true, description: "English, French, and Spanish", }, { feature: "PDF Export", free: false, pro: true, description: "Professional PDF reports of all goals", }, { feature: "CSV Data Export", free: false, pro: true, description: "Spreadsheet-ready data export", }, { feature: "Goal Sharing", free: false, pro: true, description: "Share goals with family for accountability", }, { feature: "Advanced Analytics", free: false, pro: true, description: "Detailed insights and projections", }, { feature: "Priority Support", free: false, pro: true, description: "Get help faster with Pro support", }, ] return (

Choose Your Plan

Compare features and choose what works best for you

{/* Free Plan */}

Free

Forever

{feature.feature}
{feature.feature}

{/* Pro Plan */}

Pro

$9.99

One-time payment

{feature.feature}

{/* Enterprise placeholder */}

Enterprise

Custom

Everything in Pro
Team collaboration
Custom branding
API access

{/* Feature Comparison Table */}

{features.map((feature, index) => ( ))}

Feature	Free	Pro
{feature.feature} {feature.description}	{feature.free ? ( ) : ( )}

) } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true" "use client" import React from "react" import { useState } from "react" import { X, Check, AlertCircle, Info } from "lucide-react" interface Toast { id: string type: "success" | "error" | "info" | "warning" title: string message?: string duration?: number } interface ToastContextType { toasts: Toast[] addToast: (toast: Omit) => void removeToast: (id: string) => void } const ToastContext = React.createContext(undefined) export function ToastProvider({ children }: { children: React.ReactNode }) { const [toasts, setToasts] = useState([]) const addToast = (toast: Omit) => { const id = Math.random().toString(36).substr(2, 9) const newToast = { ...toast, id } setToasts((prev) => [...prev, newToast]) // Auto remove after duration setTimeout(() => { removeToast(id) }, toast.duration || 5000) } const removeToast = (id: string) => { setToasts((prev) => prev.filter((toast) => toast.id !== id)) } return ( {children} ) } function ToastContainer({ toasts, onRemove }: { toasts: Toast[]; onRemove: (id: string) => void }) { if (toasts.length === 0) return null return (

{toasts.map((toast) => ( ))}

) } function ToastItem({ toast, onRemove }: { toast: Toast; onRemove: (id: string) => void }) { const icons = { success: , error: , warning: , info: , } const bgColors = { success: "bg-green-50 border-green-200", error: "bg-red-50 border-red-200", warning: "bg-yellow-50 border-yellow-200", info: "bg-blue-50 border-blue-200", } return (

{icons[toast.type]}

{toast.title}

{toast.message &&

{toast.message}

}

) } export function useToast() { const context = React.useContext(ToastContext) if (!context) { throw new Error("useToast must be used within ToastProvider") } return context } [V0_FILE]typescriptreact:file="components/blog-list-page.tsx" isMerged="true" "use client" import Link from "next/link" import Image from "next/image" import { Clock, Calendar, ArrowRight } from "lucide-react" export default function BlogListPage() { const blogPosts = [ { slug: "getting-started", title: "How to Start a Sinking Fund", excerpt: "Learn what a sinking fund is and how to set it up in minutes. Perfect for beginners looking to improve their financial planning.", image: "/images/blog/getting-started-hero.png", readTime: "5 min read", publishDate: "2025-01-03", category: "Getting Started", }, { slug: "best-categories", title: "Best Sinking Fund Categories for 2025", excerpt: "Discover the top must-have categories for your savings goals this year. From emergency funds to vacation planning.", image: "/images/blog/best-categories.png", readTime: "7 min read", publishDate: "2025-01-02", category: "Planning", }, { slug: "privacy-budgeting", title: "Why Privacy Matters in Budget Tracking", excerpt: "Learn why local storage budgeting tools are better for your financial privacy and security than cloud-based alternatives.", image: "/images/blog/privacy-budgeting.png", readTime: "6 min read", publishDate: "2025-01-01", category: "Privacy", }, { slug: "sinking-vs-emergency", title: "Sinking Funds vs Emergency Funds: Know the Difference", excerpt: "Understand when to use sinking funds versus emergency funds. Learn the key differences and how both fit into your financial strategy.", image: "/images/blog/sinking-vs-emergency.png", readTime: "8 min read", publishDate: "2024-12-30", category: "Strategy", }, { slug: "stay-consistent", title: "How to Stay Consistent with Sinking Funds", excerpt: "Proven motivation strategies that actually work. Learn how to maintain your savings momentum even when motivation wanes.", image: "/images/blog/stay-consistent.png", readTime: "6 min read", publishDate: "2024-12-28", category: "Motivation", }, ] const categories = ["All", "Getting Started", "Planning", "Privacy", "Strategy", "Motivation"] return (

{/* Header */}

Sinking Fund Tracker

Expert Savings Guides

Learn from our comprehensive guides on sinking funds, savings strategies, and personal finance tips.

{/* Breadcrumb */} {/* Blog Content */}

{/* Category Filter */}

{categories.map((category) => ( ))}

{/* Featured Post */}

Featured

{blogPosts[0].category}

{new Date(blogPosts[0].publishDate).toLocaleDateString()}

{blogPosts[0].readTime}

{blogPosts[0].title}

{blogPosts[0].excerpt}

Read Full Article

{/* Blog Grid */}

{blogPosts.slice(1).map((post) => (

{post.category}

{new Date(post.publishDate).toLocaleDateString()}

{post.readTime}

{post.title}

{post.excerpt}

))}

{/* Newsletter Signup */}

Stay Updated with Our Latest Tips

Get expert savings advice, new features, and exclusive tips delivered to your inbox.

{/* Back to App */}

Start Tracking Your Goals

) } [V0_FILE]png:file="public/images/blog/getting-started-hero.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/getting-started-hero-wCmOjIeBwu1VnarNDFRiawFIuFOrRL.png" isMerged="true" [V0_FILE]png:file="public/images/blog/best-categories.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/best-categories-ysMmwut06AfurnxFN5T1CTiaaXGbBF.png" isMerged="true" [V0_FILE]png:file="public/images/blog/privacy-budgeting.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/privacy-budgeting-oF81Kyqo898668Z7CPp8ItVHiu5XDo.png" isMerged="true" [V0_FILE]png:file="public/images/blog/sinking-vs-emergency.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/sinking-vs-emergency-eycNvR7U2DkdAUp46EnkWj74w4dK6q.png" isMerged="true" [V0_FILE]png:file="public/images/blog/financial-planning-overview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/financial-planning-overview-VtA22n18rscXtSYO6D94QLSVr1n9Qq.png" isMerged="true" [V0_FILE]png:file="public/images/blog/savings-tips-hero.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/savings-tips-hero-g1JTdBOlzxdU4V78xApNcqyVK1mg3N.png" isMerged="true" [V0_FILE]png:file="public/images/blog/budget-tracking-tools.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/budget-tracking-tools-QBqXrkyNiuEgrcicq0U3T1sGYQwO2m.png" isMerged="true" [V0_FILE]png:file="public/images/blog/stay-consistent.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/stay-consistent-WYLjKjz3fTLclbfLshAc5zmY0bVuTU.png" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import Header from "@/components/header" import HeroSection from "@/components/hero-section" import Dashboard from "@/components/dashboard" import TrustedBy from "@/components/trusted-by" import TestimonialsSection from "@/components/testimonials-section" import BlogSection from "@/components/blog-section" import FAQSection from "@/components/faq-section" import ContactSection from "@/components/contact-section" import Footer from "@/components/footer" import ProModal from "@/components/modals/pro-modal" import ProComparisonModal from "@/components/modals/pro-comparison-modal" import LegalModal from "@/components/modals/legal-modal" import ShareGoalModal from "@/components/modals/share-goal-modal" import { ToastProvider, useToast } from "@/components/ui/toast" import type { Goal } from "@/types/goal" import { useLocalStorage } from "@/hooks/use-local-storage" import { useProStatus } from "@/hooks/use-pro-status" import { TranslationProvider } from "@/contexts/translation-context" function AppContent() { const [goals, setGoals] = useLocalStorage("sinkingFundGoals", []) const [language, setLanguage] = useLocalStorage("sinkingFundLanguage", "en") const { isPro, activatePro } = useProStatus() const [activeModal, setActiveModal] = useState(null) const [activeLegalPage, setActiveLegalPage] = useState(null) const [shareGoal, setShareGoal] = useState(null) const { addToast } = useToast() const addGoal = (goalData: Omit) => { try { const newGoal: Goal = { ...goalData, id: Date.now(), createdDate: new Date().toISOString(), } setGoals([...goals, newGoal]) addToast({ type: "success", title: "Goal Added!", message: `"${goalData.name}" has been added to your savings goals.`, }) } catch (error) { console.error("Error adding goal:", error) addToast({ type: "error", title: "Error", message: "Failed to add goal. Please try again.", }) } } const updateGoal = (id: number, field: keyof Goal, value: any) => { try { setGoals( goals.map((goal) => { if (goal.id === id) { if (field === "savedAmount") { const newAmount = Math.min(Number.parseFloat(value) || 0, goal.targetAmount) const updatedGoal = { ...goal, [field]: newAmount } // Check if goal is completed if (newAmount >= goal.targetAmount && goal.savedAmount < goal.targetAmount) { addToast({ type: "success", title: "🎉 Goal Achieved!", message: `Congratulations! You've reached your "${goal.name}" goal!`, }) } return updatedGoal } return { ...goal, [field]: value } } return goal }), ) } catch (error) { console.error("Error updating goal:", error) addToast({ type: "error", title: "Update Failed", message: "Failed to update goal. Please try again.", }) } } const deleteGoal = (id: number) => { try { const goalToDelete = goals.find((g) => g.id === id) if (confirm(`Are you sure you want to delete "${goalToDelete?.name}"?`)) { setGoals(goals.filter((goal) => goal.id !== id)) addToast({ type: "info", title: "Goal Deleted", message: `"${goalToDelete?.name}" has been removed.`, }) } } catch (error) { console.error("Error deleting goal:", error) addToast({ type: "error", title: "Delete Failed", message: "Failed to delete goal. Please try again.", }) } } const openModal = (modalId: string) => setActiveModal(modalId) const closeModal = () => setActiveModal(null) const openLegalPage = (pageId: string) => { setActiveLegalPage(pageId) setActiveModal("legal") } const handleShareGoal = (goal: Goal) => { setShareGoal(goal) setActiveModal("share") } const handleProUpgrade = () => { // Redirect to Flutterwave payment window.location.href = "https://flutterwave.com/pay/aepushnzbwox" } return (

openModal("pro")} /> openModal("pro")} />

) } export default function Home() { return ( ) } [V0_FILE]png:file="public/images/testimonials/sarah-chen.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/testimonials/sarah-chen-ncQvlrwtNSd1jnTYWLWotAKm4mexUV.png" isMerged="true" [V0_FILE]png:file="public/images/testimonials/marcus-johnson.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/testimonials/marcus-johnson-SNyFNUclEtSFKwAEuTFJR1U4tgSxRn.png" isMerged="true" [V0_FILE]png:file="public/images/testimonials/emily-rodriguez.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/testimonials/emily-rodriguez-NrfsqhT1zrAmcu6ClBXrvqAYNuMd7W.png" isMerged="true" [V0_FILE]png:file="public/images/testimonials/david-thompson.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/testimonials/david-thompson-nHpezMuF2mk05uACqzbkbndJYZw6Ip.png" isMerged="true" [V0_FILE]typescriptreact:file="data/legal-pages.ts" isEdit="true" isQuickEdit="true" isMerged="true" export const legalPages: Record = { terms: { title: "Terms of Use", content: ` Sinking Fund Tracker Terms of Use

Terms of Use

Last updated: January 2025

1. Acceptance of Terms

By accessing and using the Sinking Fund Tracker application ("Service"), you accept and agree to be bound by the terms and provisions of this agreement.

2. Description of Service

Sinking Fund Tracker is a personal finance application that helps users track savings goals. The service operates entirely within your browser using local storage technology.

3. User Responsibilities

You are responsible for:

Maintaining the confidentiality of your data
Backing up your data as needed
Using the service for lawful purposes only
Not attempting to reverse engineer or modify the application

4. Data Storage and Privacy

All data is stored locally on your device. We do not collect, store, or transmit your personal or financial information to external servers.

5. Pro Features and Payment

Pro features are available through a one-time payment processed by Flutterwave. Payment unlocks additional functionality permanently for your browser.

6. Disclaimer of Warranties

The service is provided "as is" without warranties of any kind. We do not guarantee the accuracy, completeness, or usefulness of any information.

7. Limitation of Liability

In no event shall Sinking Fund Tracker be liable for any indirect, incidental, special, consequential, or punitive damages resulting from your use of the service.

8. Changes to Terms

We reserve the right to modify these terms at any time. Changes will be effective immediately upon posting.

9. Contact Information

For questions about these terms, please contact us at banjobabatundeade@gmail.com

`, }, privacy: { title: "Privacy Policy", content: ` Sinking Fund Tracker Privacy Policy

Privacy Policy

Last updated: January 2025

Our Privacy Commitment

Sinking Fund Tracker is built with privacy as a fundamental principle. We believe your financial data should remain under your control at all times.

What Information We Collect

We collect NO personal information. The application works entirely within your browser, and all data remains on your device.

How We Store Your Data

All your savings goals, amounts, and progress are stored using your browser's local storage. This means:

Data never leaves your device
No user accounts or passwords required
No external servers involved
You have complete control over your data

Third-Party Services

We use minimal third-party services:

Flutterwave: For processing Pro feature payments (only when you choose to upgrade)
CDN Services: For loading fonts and libraries (no tracking involved)

Cookies and Tracking

We do not use cookies or any tracking technologies. No analytics, no tracking pixels, no behavioral monitoring.

Data Backup and Export

Since data is stored locally, you're responsible for backing up your information. Pro users can export data as PDF or CSV for backup purposes.

Data Deletion

You can delete all your data at any time by clearing your browser's local storage for this site. This action is permanent and cannot be undone.

Contact Information

If you have questions about this privacy policy, contact us at banjobabatundeade@gmail.com

Changes to This Policy

Any changes to this privacy policy will be posted on this page with an updated revision date.

`, }, licenses: { title: "Legal Information & Licenses", content: ` Sinking Fund Tracker Legal Information

Legal Information & Licenses

Last updated: January 2025

Software Licenses

This application uses the following open-source libraries and their respective licenses:

Tailwind CSS

License: MIT License

Used for styling and responsive design components.

Chart.js

License: MIT License

Used for creating analytics charts and data visualizations.

Lucide React

License: ISC License

Used for icons throughout the application interface.

Next.js

License: MIT License

Used as the React framework for the application.

Trademark Information

Third-Party Trademarks

All third-party trademarks, logos, and brand names mentioned are the property of their respective owners and are used for identification purposes only.

Image Credits

Images used in this application are sourced from:

Custom illustrations created specifically for this application
Generated images optimized for web performance

Copyright Notice

DMCA Compliance

We respect intellectual property rights. If you believe your work has been used inappropriately, please contact us at banjobabatundeade@gmail.com

Governing Law

This application and these terms are governed by applicable international laws and regulations.

Contact for Legal Matters

For legal inquiries, intellectual property matters, or licensing questions, contact: banjobabatundeade@gmail.com

`, }, } [V0_FILE]typescriptreact:file="components/analytics-charts.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { FileText, Download, BarChart3, Lock } from "lucide-react" import type { Goal } from "@/types/goal" import { useTranslation } from "@/contexts/translation-context" interface AnalyticsChartsProps { goals: Goal[] isProUser: boolean onProClick: () => void } // Simple CSS-based chart components to avoid WebAssembly issues function SimpleProgressChart({ goals }: { goals: Goal[] }) { if (goals.length === 0) return null return (

Progress by Goal

{goals.map((goal, index) => { const progress = goal.targetAmount > 0 ? (goal.savedAmount / goal.targetAmount) * 100 : 0 const colors = ["bg-purple-500", "bg-blue-500", "bg-green-500", "bg-yellow-500", "bg-red-500", "bg-pink-500"] return (

{goal.name} {Math.round(progress)}%

${goal.savedAmount.toLocaleString()} ${goal.targetAmount.toLocaleString()}

) })}

) } function SimpleSavingsOverview({ goals }: { goals: Goal[] }) { if (goals.length === 0) return null const totalSaved = goals.reduce((sum, goal) => sum + goal.savedAmount, 0) const totalTarget = goals.reduce((sum, goal) => sum + goal.targetAmount, 0) const colors = ["bg-purple-500", "bg-blue-500", "bg-green-500", "bg-yellow-500", "bg-red-500", "bg-pink-500"] return (

Savings Distribution

${totalSaved.toLocaleString()}

Total Saved

${totalTarget.toLocaleString()}

Total Target

{goals.map((goal, index) => { const percentage = totalSaved > 0 ? (goal.savedAmount / totalSaved) * 100 : 0 return (

{goal.name} {percentage.toFixed(1)}%

${goal.savedAmount.toLocaleString()}

) })}

) } export default function AnalyticsCharts({ goals, isProUser, onProClick }: AnalyticsChartsProps) { const { t } = useTranslation() // PDF Export - ONLY for Pro users const handleExportPDF = () => { // Block access for free users if (!isProUser) { onProClick() return } // Pro users only - Generate PDF content const pdfContent = ` SINKING FUND TRACKER - PRO SAVINGS REPORT Generated on: ${new Date().toLocaleDateString()} SUMMARY: - Total Goals: ${goals.length} - Total Saved: $${goals.reduce((sum, goal) => sum + goal.savedAmount, 0).toLocaleString()} - Total Target: $${goals.reduce((sum, goal) => sum + goal.targetAmount, 0).toLocaleString()} DETAILED BREAKDOWN: ${goals .map((goal) => { const progress = goal.targetAmount > 0 ? Math.round((goal.savedAmount / goal.targetAmount) * 100) : 0 return ` Goal: ${goal.name} Target: $${goal.targetAmount.toLocaleString()} Saved: $${goal.savedAmount.toLocaleString()} Progress: ${progress}% Target Date: ${goal.targetDate} Remaining: $${(goal.targetAmount - goal.savedAmount).toLocaleString()} ` }) .join("\n")} © 2025 Sinking Fund Tracker™ - Pro Report ` const blob = new Blob([pdfContent], { type: "text/plain" }) const url = window.URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `sinking-fund-pro-report-${new Date().toISOString().split("T")[0]}.txt` document.body.appendChild(a) a.click() document.body.removeChild(a) window.URL.revokeObjectURL(url) alert("📄 Pro PDF Report downloaded successfully!") } // CSV Export - ONLY for Pro users const handleExportCSV = () => { // Block access for free users if (!isProUser) { onProClick() return } // Pro users only - Generate CSV let csvContent = "Goal Name,Target Amount,Saved Amount,Progress %,Target Date,Created Date,Remaining Amount\n" goals.forEach((goal) => { const progress = goal.targetAmount > 0 ? Math.round((goal.savedAmount / goal.targetAmount) * 100) : 0 const remaining = goal.targetAmount - goal.savedAmount csvContent += `"${goal.name}",${goal.targetAmount},${goal.savedAmount},${progress}%,${goal.targetDate},${goal.createdDate},${remaining}\n` }) const blob = new Blob([csvContent], { type: "text/csv" }) const url = window.URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `sinking-fund-pro-data-${new Date().toISOString().split("T")[0]}.csv` document.body.appendChild(a) a.click() document.body.removeChild(a) window.URL.revokeObjectURL(url) alert("📊 Pro CSV Export completed successfully!") } return (

{t("analytics.title")}

{/* PDF Export Button - PRO ONLY */} {/* CSV Export Button - PRO ONLY */}

{/* Pro Feature Promotion for Free Users */} {!isProUser && goals.length > 0 && (

🔒 Export Features Locked

PDF and CSV exports are exclusive Pro features. Upgrade now to unlock professional data export capabilities.

✨ Professional PDF reports with charts 📊 Spreadsheet-ready CSV files 🔄 Unlimited exports

)} {/* Analytics Charts - Available to all users */} {goals.length > 0 ? (

) : (

Add some goals to see your analytics!

Charts are free for all users. Export features require Pro upgrade.

)}

) } [V0_FILE]typescriptreact:file="components/dashboard.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Target, DollarSign, Percent, Plus } from "lucide-react" import type { Goal } from "@/types/goal" import { useTranslation } from "@/contexts/translation-context" import GoalCard from "./goal-card" import AnalyticsCharts from "./analytics-charts" import LoadingSpinner from "./ui/loading-spinner" interface DashboardProps { goals: Goal[] onAddGoal: (goal: Omit) => void onUpdateGoal: (id: number, field: keyof Goal, value: any) => void onDeleteGoal: (id: number) => void onShareGoal?: (goal: Goal) => void isProUser: boolean onProClick: () => void } export default function Dashboard({ goals, onAddGoal, onUpdateGoal, onDeleteGoal, onShareGoal, isProUser, onProClick, }: DashboardProps) { const { t } = useTranslation() const [formData, setFormData] = useState({ name: "", targetAmount: "", savedAmount: "0", targetDate: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [errors, setErrors] = useState>({}) const totalGoals = goals.length const totalSaved = goals.reduce((sum, goal) => sum + goal.savedAmount, 0) const totalTarget = goals.reduce((sum, goal) => sum + goal.targetAmount, 0) const overallProgress = totalTarget > 0 ? Math.round((totalSaved / totalTarget) * 100) : 0 const validateForm = () => { const newErrors: Record = {} if (!formData.name.trim()) { newErrors.name = "Please enter a goal name" } // Check for duplicate names if (goals.some((goal) => goal.name.toLowerCase() === formData.name.trim().toLowerCase())) { newErrors.name = "A goal with this name already exists" } const targetAmount = Number.parseFloat(formData.targetAmount) if (isNaN(targetAmount) || targetAmount <= 0) { newErrors.targetAmount = "Please enter a target amount greater than $0" } const savedAmount = Number.parseFloat(formData.savedAmount) || 0 if (savedAmount < 0) { newErrors.savedAmount = "Saved amount must be $0 or greater" } if (savedAmount > targetAmount) { newErrors.savedAmount = "Saved amount cannot exceed target amount" } if (!formData.targetDate) { newErrors.targetDate = "Please select a target date" } else { const targetDate = new Date(formData.targetDate) const today = new Date() today.setHours(0, 0, 0, 0) if (targetDate < today) { newErrors.targetDate = "Please select a future date" } } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!validateForm()) return setIsSubmitting(true) try { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 500)) onAddGoal({ name: formData.name.trim(), targetAmount: Number.parseFloat(formData.targetAmount), savedAmount: Number.parseFloat(formData.savedAmount) || 0, targetDate: formData.targetDate, }) setFormData({ name: "", targetAmount: "", savedAmount: "0", targetDate: "" }) setErrors({}) } catch (error) { console.error("Error adding goal:", error) } finally { setIsSubmitting(false) } } return (

{/* Dashboard Stats */}

{t("dashboard.totalGoals")}

{totalGoals}

{t("dashboard.totalSaved")}

${totalSaved.toLocaleString()}

{t("dashboard.overallProgress")}

{overallProgress}%

{/* Add Goal Form */}

{t("form.addGoal")}

setFormData({ ...formData, name: e.target.value })} className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 ${ errors.name ? "border-red-500" : "border-gray-300" }`} required /> {errors.name &&

{errors.name}

}

setFormData({ ...formData, targetAmount: e.target.value })} className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 ${ errors.targetAmount ? "border-red-500" : "border-gray-300" }`} min="0.01" step="0.01" required /> {errors.targetAmount &&

{errors.targetAmount}

}

setFormData({ ...formData, savedAmount: e.target.value })} className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 ${ errors.savedAmount ? "border-red-500" : "border-gray-300" }`} min="0" step="0.01" /> {errors.savedAmount &&

{errors.savedAmount}

}

setFormData({ ...formData, targetDate: e.target.value })} className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 ${ errors.targetDate ? "border-red-500" : "border-gray-300" }`} min={new Date().toISOString().split("T")[0]} required /> {errors.targetDate &&

{errors.targetDate}

}

{/* Goals List */}

{goals.map((goal) => ( ))} {goals.length === 0 && (

No goals yet!

Create your first savings goal using the form above.

)}

{/* Analytics Charts */}

) } [V0_FILE]typescriptreact:file="components/goal-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Trash2, Share2, Edit3, Save, X } from "lucide-react" import type { Goal } from "@/types/goal" import LoadingSpinner from "./ui/loading-spinner" interface GoalCardProps { goal: Goal onUpdate: (id: number, field: keyof Goal, value: any) => void onDelete: (id: number) => void onShare?: (goal: Goal) => void isPro?: boolean } export default function GoalCard({ goal, onUpdate, onDelete, onShare, isPro = false }: GoalCardProps) { const [isEditing, setIsEditing] = useState(false) const [isLoading, setIsLoading] = useState(false) const [editData, setEditData] = useState({ name: goal.name, targetAmount: goal.targetAmount.toString(), savedAmount: goal.savedAmount.toString(), targetDate: goal.targetDate, }) const [errors, setErrors] = useState>({}) const progress = goal.targetAmount > 0 ? (goal.savedAmount / goal.targetAmount) * 100 : 0 const remainingAmount = goal.targetAmount - goal.savedAmount const daysRemaining = Math.ceil((new Date(goal.targetDate).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)) const validateForm = () => { const newErrors: Record = {} if (!editData.name.trim()) { newErrors.name = "Please enter a goal name" } const targetAmount = Number.parseFloat(editData.targetAmount) if (isNaN(targetAmount) || targetAmount <= 0) { newErrors.targetAmount = "Please enter an amount greater than $0" } const savedAmount = Number.parseFloat(editData.savedAmount) if (isNaN(savedAmount) || savedAmount < 0) { newErrors.savedAmount = "Amount must be $0 or greater" } if (savedAmount > targetAmount) { newErrors.savedAmount = "Amount cannot exceed your target" } if (!editData.targetDate) { newErrors.targetDate = "Please select a target date" } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSave = async () => { if (!validateForm()) return setIsLoading(true) try { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 500)) onUpdate(goal.id, "name", editData.name.trim()) onUpdate(goal.id, "targetAmount", Number.parseFloat(editData.targetAmount)) onUpdate(goal.id, "savedAmount", Number.parseFloat(editData.savedAmount)) onUpdate(goal.id, "targetDate", editData.targetDate) setIsEditing(false) } catch (error) { console.error("Error updating goal:", error) } finally { setIsLoading(false) } } const handleCancel = () => { setEditData({ name: goal.name, targetAmount: goal.targetAmount.toString(), savedAmount: goal.savedAmount.toString(), targetDate: goal.targetDate, }) setErrors({}) setIsEditing(false) } const handleQuickUpdate = (field: keyof Goal, value: any) => { if (field === "savedAmount") { const numValue = Number.parseFloat(value) || 0 if (numValue <= goal.targetAmount && numValue >= 0) { onUpdate(goal.id, field, numValue) } } else { onUpdate(goal.id, field, value) } } return (

{isEditing ? (

setEditData({ ...editData, name: e.target.value })} className={`text-lg font-semibold bg-transparent border-b-2 focus:outline-none w-full ${ errors.name ? "border-red-500" : "border-gray-300 focus:border-purple-500" }`} placeholder="Goal name" /> {errors.name &&

{errors.name}

}

) : (

{goal.name}

)}

{onShare && ( )} {isEditing ? (

) : ( )}

Progress = 100 ? "text-green-600" : "text-purple-600"}`}> {Math.round(progress)}%

= 100 ? "bg-gradient-to-r from-green-500 to-green-600" : "bg-gradient-to-r from-purple-500 to-blue-500" }`} style={{ width: `${Math.min(progress, 100)}%` }} />

{isEditing ? (

Saved Amount setEditData({ ...editData, savedAmount: e.target.value })} className={`w-full px-2 py-1 border rounded ${ errors.savedAmount ? "border-red-500" : "border-gray-300" }`} min="0" step="0.01" /> {errors.savedAmount &&

{errors.savedAmount}

}

Target Amount setEditData({ ...editData, targetAmount: e.target.value })} className={`w-full px-2 py-1 border rounded ${ errors.targetAmount ? "border-red-500" : "border-gray-300" }`} min="0.01" step="0.01" /> {errors.targetAmount &&

{errors.targetAmount}

}

) : (

Saved handleQuickUpdate("savedAmount", e.target.value)} className="w-full px-2 py-1 border rounded text-green-600 font-semibold focus:ring-2 focus:ring-green-500 focus:border-green-500" min="0" max={goal.targetAmount} step="0.01" />

Target

${goal.targetAmount.toLocaleString()}

)}

{remainingAmount <= 0 ? "Goal Achieved! 🎉" : `Remaining: $${remainingAmount.toLocaleString()}`} {daysRemaining < 0 ? "Overdue" : `${daysRemaining} days left`}

{isEditing ? (

Target Date setEditData({ ...editData, targetDate: e.target.value })} className={`w-full px-2 py-1 border rounded text-sm ${ errors.targetDate ? "border-red-500" : "border-gray-300" }`} /> {errors.targetDate &&

{errors.targetDate}

}

) : ( handleQuickUpdate("targetDate", e.target.value)} className="w-full px-2 py-1 border rounded text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500" /> )}

) } [V0_FILE]typescriptreact:file="components/contact-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Send, AlertCircle, Mail, Phone, MapPin } from "lucide-react" import { useToast } from "@/components/ui/toast" import LoadingSpinner from "@/components/ui/loading-spinner" export default function ContactSection() { const [formData, setFormData] = useState({ name: "", email: "", subject: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [errors, setErrors] = useState>({}) const { addToast } = useToast() const validateForm = () => { const newErrors: Record = {} // Name validation if (!formData.name.trim()) { newErrors.name = "Please enter your name" } else if (formData.name.trim().length < 2) { newErrors.name = "Please enter at least 2 characters" } // Email validation const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!formData.email.trim()) { newErrors.email = "Please enter your email address" } else if (!emailRegex.test(formData.email)) { newErrors.email = "Please enter a valid email address" } // Subject validation if (!formData.subject.trim()) { newErrors.subject = "Please select a subject" } else if (formData.subject.trim().length < 5) { newErrors.subject = "Please enter at least 5 characters" } // Message validation if (!formData.message.trim()) { newErrors.message = "Please enter your message" } else if (formData.message.trim().length < 10) { newErrors.message = "Please enter at least 10 characters" } else if (formData.message.trim().length > 1000) { newErrors.message = "Please keep your message under 1000 characters" } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!validateForm()) { addToast({ type: "error", title: "Validation Error", message: "Please fix the errors below and try again.", }) return } setIsSubmitting(true) try { // Simulate API delay for better UX await new Promise((resolve) => setTimeout(resolve, 1000)) // Create mailto link with proper encoding const mailtoSubject = encodeURIComponent(`[Sinking Fund Tracker] ${formData.subject}`) const mailtoBody = encodeURIComponent( ` From: ${formData.name} Email: ${formData.email} Message: ${formData.message} --- Sent via Sinking Fund Tracker Contact Form `.trim(), ) const mailtoLink = `mailto:banjobabatundeade@gmail.com?subject=${mailtoSubject}&body=${mailtoBody}` // Open email client window.location.href = mailtoLink // Show success message addToast({ type: "success", title: "Message Sent!", message: "Your email client has been opened. Thank you for contacting us!", duration: 6000, }) // Reset form setFormData({ name: "", email: "", subject: "", message: "" }) setErrors({}) } catch (error) { console.error("Contact form error:", error) addToast({ type: "error", title: "Error", message: "Something went wrong. Please try again or email us directly.", }) } finally { setIsSubmitting(false) } } const handleInputChange = (field: keyof typeof formData, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) // Clear error when user starts typing if (errors[field]) { setErrors((prev) => ({ ...prev, [field]: "" })) } } return (

{/* Section Header */}

Get in Touch

Have questions about sinking funds or need help with the app? We'd love to hear from you!

{/* Contact Info */}

Contact Information

banjobabatundeade@gmail.com

Response Time

Within 24 hours

Support

Global, 24/7

{/* FAQ Link */}

Quick Help

Check our FAQ section for instant answers to common questions.

{/* Contact Form */}

Send us a Message

{/* Name Field */}

Your Name * handleInputChange("name", e.target.value)} className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors ${ errors.name ? "border-red-500 bg-red-50" : "border-gray-300" }`} placeholder="Enter your full name" disabled={isSubmitting} /> {errors.name && (

{errors.name}

)}

{/* Email Field */}

Email Address * handleInputChange("email", e.target.value)} className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors ${ errors.email ? "border-red-500 bg-red-50" : "border-gray-300" }`} placeholder="your.email@example.com" disabled={isSubmitting} /> {errors.email && (

{errors.email}

)}

{/* Subject Field */}

Subject * {errors.subject && (

{errors.subject}

)}

{/* Message Field */}

Message *

handleInputChange("message", e.target.value)}
                      className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors resize-vertical ${
                        errors.message ? "border-red-500 bg-red-50" : "border-gray-300"
                      }`}
                      placeholder="Please describe your question or issue in detail..."
                      disabled={isSubmitting}
                    />
                    <div className="flex justify-between items-center mt-1">
                      {errors.message ? (
                        <div className="flex items-center space-x-1">
                          <AlertCircle className="w-4 h-4 text-red-500" />
                          <p className="text-red-500 text-sm">{errors.message}</p>
                        </div>
                      ) : (
                        <div></div>
                      )}
                      <p className="text-gray-500 text-sm">{formData.message.length}/1000 characters</p>
                    </div>
                  </div>

{/* Submit Button */}
                  <button
                    type="submit"
                    disabled={isSubmitting}
                    className="w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white py-4 rounded-lg font-semibold text-lg hover:from-purple-700 hover:to-blue-700 transition-all shadow-lg hover:shadow-xl transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none flex items-center justify-center space-x-2"
                  >
                    {isSubmitting ? (
                      <>
                        <LoadingSpinner size="sm" />
                        <span>Sending Message...</span>
                      </>
                    ) : (
                      <>
                        <Send className="w-5 h-5" />
                        <span>Send Message</span>
                      </>
                    )}
                  </button>

{/* Privacy Notice */}
                  <p className="text-xs text-gray-500 text-center">
                    By sending this message, you agree to our privacy policy. We'll only use your information to respond
                    to your inquiry.
                  </p>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/faq-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { ChevronDown, ChevronUp } from "lucide-react"

export default function FAQSection() {
  const [openFAQ, setOpenFAQ] = useState<number | null>(null)

const faqs = [
    {
      question: "What is a sinking fund and how does it work?",
      answer: "A sinking fund is money you set aside each month for specific future expenses.",
    },
    {
      question: "Is my data safe with local storage?",
      answer: "Absolutely! Your data stays on your device and never leaves your browser.",
    },
    {
      question: "What features are included in the Pro version?",
      answer:
        "Pro features include PDF export of all savings goals, CSV data export for spreadsheet analysis, goal sharing with family members, and advanced analytics with detailed insights.",
    },
    {
      question: "How many savings goals can I track?",
      answer: "There's no limit! You can track unlimited savings goals.",
    },
    {
      question: "Can I use this app offline?",
      answer: "Since all data is stored locally, the app works completely offline.",
    },
    {
      question: "How do I upgrade to Pro?",
      answer:
        "Click the 'Upgrade Pro' button in the header or any Pro feature prompt. You'll be redirected to secure Flutterwave payment for a one-time $9.99 fee. Pro features activate immediately after payment.",
    },
    {
      question: "Can I share my goals with family?",
      answer:
        "Yes! Pro users can generate shareable links for their goals, allowing family members to view progress and provide accountability support. This feature helps keep you motivated.",
    },
    {
      question: "What happens if I clear my browser data?",
      answer:
        "Since data is stored locally, clearing browser data will delete your goals. Pro users can export their data as backup before clearing. We recommend regular exports for data safety.",
    },
  ]

const toggleFAQ = (index: number) => {
    setOpenFAQ(openFAQ === index ? null : index)
  }

return (
    <section className="py-12 bg-white" id="faq">
      <div className="container mx-auto px-4">
        <h3 className="text-3xl font-bold text-center mb-12">Frequently Asked Questions</h3>
        <div className="max-w-4xl mx-auto space-y-6">
          {faqs.map((faq, index) => (
            <div
              key={index}
              className="bg-white/95 backdrop-blur-sm border border-white/20 rounded-xl p-6 hover:shadow-lg transition-shadow"
            >
              <button
                className="flex justify-between items-center w-full text-left focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-lg p-2 -m-2"
                onClick={() => toggleFAQ(index)}
                aria-expanded={openFAQ === index}
              >
                <h4 className="text-lg font-semibold pr-4">{faq.question}</h4>
                {openFAQ === index ? (
                  <ChevronUp className="w-5 h-5 transition-transform flex-shrink-0" />
                ) : (
                  <ChevronDown className="w-5 h-5 transition-transform flex-shrink-0" />
                )}
              </button>
              {openFAQ === index && (
                <div className="mt-4 animate-fade-in">
                  <p className="text-gray-600 leading-relaxed">{faq.answer}</p>
                </div>
              )}
            </div>
          ))}
        </div>

{/* JSON-LD FAQ Schema */}
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "FAQPage",
              mainEntity: faqs.map((faq) => ({
                "@type": "Question",
                name: faq.question,
                acceptedAnswer: {
                  "@type": "Answer",
                  text: faq.answer,
                },
              })),
            }),
          }}
        />
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true"
"use client"

import { Crown, Target } from "lucide-react"

interface HeaderProps {
  language: string
  setLanguage: (lang: string) => void
  isProUser: boolean
  onProClick: () => void
}

export default function Header({ language, setLanguage, isProUser, onProClick }: HeaderProps) {
  return (
    <header className="bg-gradient-to-r from-emerald-600 via-teal-600 to-blue-600 text-white py-6 shadow-lg">
      <div className="container mx-auto px-4">
        <div className="flex justify-between items-center">
          <div className="flex items-center space-x-3">
            <div className="bg-white/20 backdrop-blur-sm p-2 rounded-xl">
              <Target className="w-8 h-8 text-white" />
            </div>
            <div>
              <h1 className="text-2xl font-bold">GoalWise</h1>
              <p className="text-sm opacity-90">Your Path to Financial Confidence</p>
            </div>
          </div>
          <div className="flex items-center space-x-4">
            <select
              value={language}
              onChange={(e) => setLanguage(e.target.value)}
              className="bg-white/20 backdrop-blur-sm text-white px-3 py-2 rounded-lg text-sm border border-white/30 focus:outline-none focus:ring-2 focus:ring-white/50"
            >
              <option value="en" className="text-gray-800">
                🇺🇸 English
              </option>
              <option value="fr" className="text-gray-800">
                🇫🇷 Français
              </option>
              <option value="es" className="text-gray-800">
                🇪🇸 Español
              </option>
            </select>
            <button
              onClick={onProClick}
              title={isProUser ? "Pro features are active" : "Click to upgrade to Pro"}
              className={`px-4 py-2 rounded-lg font-semibold text-sm hover:scale-105 transition-all flex items-center space-x-2 shadow-lg ${
                isProUser
                  ? "bg-green-500 text-white cursor-default"
                  : "bg-gradient-to-r from-orange-500 to-amber-500 text-white hover:from-orange-600 hover:to-amber-600"
              }`}
            >
              <Crown className="w-4 h-4" />
              <span>{isProUser ? "Pro Active" : "Upgrade Pro"}</span>
            </button>
          </div>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/trusted-by.tsx" isEdit="true" isMerged="true"
export default function TrustedBy() {
  const trustedLogos = [
    "Personal Finance Blogs",
    "Financial Coaches",
    "Budget Communities",
    "Savings Groups",
    "Money Mentors",
  ]

return (
    <section className="py-16 bg-white">
      <div className="container mx-auto px-4 text-center">
        <h3 className="text-2xl font-semibold mb-8 text-gray-700">
          Trusted by Smart Savers, Financial Coaches & Budget Communities Worldwide
        </h3>
        <div className="flex justify-center items-center space-x-8 flex-wrap">
          {trustedLogos.map((logo, index) => (
            <div
              key={index}
              className="p-4 bg-gradient-to-r from-emerald-50 to-teal-50 rounded-xl m-2 opacity-70 hover:opacity-100 transition-all hover:scale-105"
            >
              <span className="text-lg font-semibold text-gray-700">{logo}</span>
            </div>
          ))}
        </div>

{/* Stats */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mt-12 pt-8 border-t border-gray-100">
          <div className="text-center">
            <div className="text-3xl font-bold text-emerald-600">2,847+</div>
            <div className="text-gray-600 text-sm">Happy Users</div>
          </div>
          <div className="text-center">
            <div className="text-3xl font-bold text-teal-600">$2.1M+</div>
            <div className="text-gray-600 text-sm">Goals Achieved</div>
          </div>
          <div className="text-center">
            <div className="text-3xl font-bold text-blue-600">15,000+</div>
            <div className="text-gray-600 text-sm">Dreams Funded</div>
          </div>
          <div className="text-center">
            <div className="text-3xl font-bold text-purple-600">4.9★</div>
            <div className="text-gray-600 text-sm">User Rating</div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/success-stories-page.tsx" isMerged="true"
"use client"

import { Star, Calendar, DollarSign, Target, Heart, TrendingUp, Users, Award, CheckCircle } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { useState } from "react"

interface SuccessStory {
  id: string
  name: string
  role: string
  location: string
  image: string
  timeframe: string
  totalSaved: number
  goalsAchieved: number
  mainGoal: string
  challenge: string
  solution: string
  results: string[]
  quote: string
  journey: {
    before: string
    during: string
    after: string
  }
  goals: {
    name: string
    amount: number
    timeframe: string
    status: "completed" | "in-progress"
  }[]
  tips: string[]
}

export default function SuccessStoriesPage() {
  const [selectedCategory, setSelectedCategory] = useState("all")

const successStories: SuccessStory[] = [
    {
      id: "sarah-family-transformation",
      name: "Sarah Chen",
      role: "Working Mom & Financial Blogger",
      location: "San Francisco, CA",
      image: "/images/testimonials/sarah-chen.png",
      timeframe: "8 months",
      totalSaved: 12500,
      goalsAchieved: 6,
      mainGoal: "Family Financial Security",
      challenge: "Living paycheck to paycheck with two kids, constantly stressed about unexpected expenses",
      solution: "Started with small $25/month sinking funds for the most urgent categories",
      quote:
        "GoalWise didn't just help me save money - it gave me back my peace of mind and showed my kids what financial responsibility looks like.",
      journey: {
        before:
          "Sarah was overwhelmed managing finances for a family of four. Every unexpected expense - from car repairs to school activities - created stress and forced difficult choices between necessities.",
        during:
          "She started with three small sinking funds: $50/month for car maintenance, $75/month for kids' activities, and $100/month for family vacation. The visual progress tracking kept her motivated even during tight months.",
        after:
          "Eight months later, Sarah has six fully-funded sinking funds and has eliminated financial stress from her daily life. Her family took their dream vacation to Hawaii, fully paid for in cash.",
      },
      results: [
        "Eliminated financial stress and anxiety",
        "Saved $12,500 across multiple goals",
        "Took dream family vacation debt-free",
        "Kids learned valuable money lessons",
        "Started successful financial blog",
        "Became debt-free except mortgage",
      ],
      goals: [
        { name: "Family Vacation", amount: 4500, timeframe: "8 months", status: "completed" },
        { name: "Car Maintenance", amount: 2000, timeframe: "6 months", status: "completed" },
        { name: "Kids Activities", amount: 1800, timeframe: "12 months", status: "completed" },
        { name: "Home Repairs", amount: 3000, timeframe: "10 months", status: "completed" },
        { name: "Christmas Fund", amount: 800, timeframe: "12 months", status: "completed" },
        { name: "Emergency Buffer", amount: 400, timeframe: "4 months", status: "completed" },
      ],
      tips: [
        "Start smaller than you think - consistency beats perfection",
        "Use visual progress tracking to stay motivated",
        "Involve your family in the goal-setting process",
        "Celebrate small wins along the way",
      ],
    },
    {
      id: "marcus-tech-privacy",
      name: "Marcus Johnson",
      role: "Software Engineer & Privacy Advocate",
      location: "Austin, TX",
      image: "/images/testimonials/marcus-johnson.png",
      timeframe: "14 months",
      totalSaved: 18750,
      goalsAchieved: 8,
      mainGoal: "Tech Independence & Home Ownership",
      challenge: "Wanted to save for major purchases without compromising data privacy",
      solution: "Used GoalWise's local storage approach to track multiple high-value goals simultaneously",
      quote:
        "Finally found a financial app that respects my privacy while delivering powerful analytics. I've saved more in 14 months than in the previous 3 years combined.",
      journey: {
        before:
          "Marcus was frustrated with financial apps that required cloud storage and data sharing. He was saving sporadically without clear goals, making little progress toward major purchases.",
        during:
          "He set up eight different sinking funds with specific targets and timelines. The privacy-first approach gave him confidence to track detailed financial data, while the analytics helped optimize his saving strategy.",
        after:
          "Marcus has successfully saved for multiple tech upgrades, home improvements, and is now 60% toward his house down payment goal. He's become an advocate for privacy-first financial tools.",
      },
      results: [
        "Saved $18,750 across 8 different goals",
        "Upgraded entire home office setup debt-free",
        "60% progress toward house down payment",
        "Maintained complete data privacy",
        "Developed sustainable saving habits",
        "Became community advocate for privacy-first finance",
      ],
      goals: [
        { name: "Home Office Upgrade", amount: 3500, timeframe: "6 months", status: "completed" },
        { name: "Car Down Payment", amount: 5000, timeframe: "10 months", status: "completed" },
        { name: "House Down Payment", amount: 25000, timeframe: "24 months", status: "in-progress" },
        { name: "Tech Emergency Fund", amount: 2000, timeframe: "8 months", status: "completed" },
        { name: "Vacation Fund", amount: 3000, timeframe: "12 months", status: "completed" },
        { name: "Investment Seed", amount: 2500, timeframe: "14 months", status: "completed" },
        { name: "Home Improvement", amount: 1500, timeframe: "5 months", status: "completed" },
        { name: "Professional Development", amount: 1250, timeframe: "7 months", status: "completed" },
      ],
      tips: [
        "Set up separate funds for different categories to avoid mixing purposes",
        "Use the analytics to identify and optimize your saving patterns",
        "Privacy matters - choose tools that respect your data",
        "Automate contributions but review progress weekly",
      ],
    },
    {
      id: "emily-business-coach",
      name: "Emily Rodriguez",
      role: "Small Business Owner & Money Coach",
      location: "Miami, FL",
      image: "/images/testimonials/emily-rodriguez.png",
      timeframe: "12 months",
      totalSaved: 15200,
      goalsAchieved: 7,
      mainGoal: "Business Growth & Client Success",
      challenge: "Needed to model good financial behavior for clients while growing her business",
      solution: "Used GoalWise to demonstrate sinking fund principles and track both personal and business goals",
      quote:
        "GoalWise became my secret weapon for client coaching. When they see my real progress and results, they believe in the system. It's transformed both my business and my clients' lives.",
      journey: {
        before:
          "Emily struggled to demonstrate financial principles to her coaching clients without a simple, visual tool. Her own savings were inconsistent, making it hard to be a credible money coach.",
        during:
          "She implemented GoalWise for both personal and business goals, using her real progress as teaching examples. The goal-sharing feature helped her stay accountable to clients while they stayed accountable to her.",
        after:
          "Emily's coaching business has grown 300% as clients see real results. She's achieved all her personal financial goals and helped over 50 clients transform their financial lives using the same system.",
      },
      results: [
        "Grew coaching business by 300%",
        "Helped 50+ clients achieve financial goals",
        "Saved $15,200 for business and personal goals",
        "Became recognized expert in sinking fund strategy",
        "Achieved work-life balance through financial confidence",
        "Created passive income through financial education",
      ],
      goals: [
        { name: "Business Equipment", amount: 4000, timeframe: "8 months", status: "completed" },
        { name: "Marketing Budget", amount: 3500, timeframe: "6 months", status: "completed" },
        { name: "Emergency Fund", amount: 2500, timeframe: "10 months", status: "completed" },
        { name: "Professional Development", amount: 1800, timeframe: "12 months", status: "completed" },
        { name: "Office Renovation", amount: 2000, timeframe: "9 months", status: "completed" },
        { name: "Vacation Fund", amount: 1200, timeframe: "8 months", status: "completed" },
        { name: "Investment Fund", amount: 200, timeframe: "3 months", status: "completed" },
      ],
      tips: [
        "Use your own success as proof of concept for others",
        "Share your goals with accountability partners",
        "Separate business and personal goals for clarity",
        "Celebrate client successes as much as your own",
      ],
    },
    {
      id: "james-debt-freedom",
      name: "James Wilson",
      role: "Teacher & Debt-Free Journey",
      location: "Denver, CO",
      image: "/images/testimonials/david-thompson.png",
      timeframe: "18 months",
      totalSaved: 9800,
      goalsAchieved: 12,
      mainGoal: "Complete Debt Freedom",
      challenge: "Teacher salary with student loans, wanted to achieve financial independence",
      solution: "Used micro-sinking funds to avoid new debt while paying off existing obligations",
      quote:
        "On a teacher's salary, every dollar counts. GoalWise helped me save for life's surprises while paying off debt. I'm now completely debt-free and have money in the bank!",
      journey: {
        before:
          "James was trapped in the debt cycle - every unexpected expense went on credit cards because he had no savings. His teacher salary felt insufficient for both debt payments and building savings.",
        during:
          "He started with tiny $10-20 monthly contributions to various sinking funds while aggressively paying off debt. The key was preventing new debt by having money set aside for predictable expenses.",
        after:
          "James achieved complete debt freedom in 18 months and now has robust sinking funds for all major expense categories. He's teaching financial literacy to his students and colleagues.",
      },
      results: [
        "Achieved complete debt freedom in 18 months",
        "Built $9,800 in sinking funds on teacher salary",
        "Eliminated financial stress and anxiety",
        "Started teaching financial literacy to students",
        "Became mentor for other teachers' financial journeys",
        "Created sustainable system for long-term wealth building",
      ],
      goals: [
        { name: "Car Maintenance", amount: 800, timeframe: "12 months", status: "completed" },
        { name: "Summer Travel", amount: 1500, timeframe: "10 months", status: "completed" },
        { name: "Classroom Supplies", amount: 400, timeframe: "8 months", status: "completed" },
        { name: "Technology Fund", amount: 1200, timeframe: "14 months", status: "completed" },
        { name: "Home Repairs", amount: 2000, timeframe: "16 months", status: "completed" },
        { name: "Gift Fund", amount: 600, timeframe: "12 months", status: "completed" },
        { name: "Medical Fund", amount: 800, timeframe: "6 months", status: "completed" },
        { name: "Professional Development", amount: 500, timeframe: "9 months", status: "completed" },
        { name: "Insurance Fund", amount: 1200, timeframe: "12 months", status: "completed" },
        { name: "Retirement Boost", amount: 300, timeframe: "4 months", status: "completed" },
        { name: "Emergency Buffer", amount: 400, timeframe: "6 months", status: "completed" },
        { name: "Celebration Fund", amount: 100, timeframe: "3 months", status: "completed" },
      ],
      tips: [
        "Start with amounts so small they feel insignificant",
        "Focus on preventing new debt before building wealth",
        "Use windfalls and bonuses to accelerate progress",
        "Share your knowledge - teaching reinforces learning",
      ],
    },
  ]

const categories = [
    { id: "all", name: "All Stories", count: successStories.length },
    { id: "family", name: "Family Finance", count: 1 },
    { id: "business", name: "Business Growth", count: 1 },
    { id: "debt-free", name: "Debt Freedom", count: 1 },
    { id: "tech", name: "Tech Professional", count: 1 },
  ]

const filteredStories =
    selectedCategory === "all"
      ? successStories
      : successStories.filter((story) => {
          switch (selectedCategory) {
            case "family":
              return story.id.includes("family")
            case "business":
              return story.id.includes("business") || story.id.includes("coach")
            case "debt-free":
              return story.id.includes("debt")
            case "tech":
              return story.id.includes("tech") || story.id.includes("privacy")
            default:
              return true
          }
        })

return (
    <div className="min-h-screen bg-gradient-to-br from-emerald-50 via-teal-50 to-blue-50">
      {/* Header */}
      <header className="bg-gradient-to-r from-emerald-600 via-teal-600 to-blue-600 text-white py-12">
        <div className="container mx-auto px-4">
          <div className="flex items-center space-x-3 mb-6">
            <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity">
              <div className="bg-white/20 backdrop-blur-sm p-2 rounded-xl">
                <Target className="w-6 h-6 text-white" />
              </div>
              <div>
                <span className="text-2xl font-bold">GoalWise</span>
                <p className="text-sm opacity-90">Your Path to Financial Confidence</p>
              </div>
            </Link>
          </div>
          <h1 className="text-4xl md:text-5xl font-bold mb-4">Real People, Real Transformations</h1>
          <p className="text-xl opacity-90 max-w-3xl">
            Discover how ordinary people achieved extraordinary financial results with GoalWise. From stressed to
            confident, from paycheck-to-paycheck to debt-free.
          </p>
        </div>
      </header>

{/* Breadcrumb */}
      <nav className="bg-white border-b py-4">
        <div className="container mx-auto px-4">
          <div className="flex items-center space-x-2 text-sm text-gray-600">
            <Link href="/" className="hover:text-emerald-600 transition-colors">
              Home
            </Link>
            <span>/</span>
            <span className="text-gray-900 font-medium">Success Stories</span>
          </div>
        </div>
      </nav>

{/* Stats Overview */}
      <section className="py-12 bg-white">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            <div className="bg-gradient-to-br from-emerald-50 to-teal-50 rounded-2xl p-6">
              <Users className="w-8 h-8 text-emerald-600 mx-auto mb-3" />
              <div className="text-3xl font-bold text-emerald-600">2,847+</div>
              <div className="text-gray-600 text-sm">Success Stories</div>
            </div>
            <div className="bg-gradient-to-br from-teal-50 to-blue-50 rounded-2xl p-6">
              <DollarSign className="w-8 h-8 text-teal-600 mx-auto mb-3" />
              <div className="text-3xl font-bold text-teal-600">$2.1M+</div>
              <div className="text-gray-600 text-sm">Goals Achieved</div>
            </div>
            <div className="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-6">
              <Target className="w-8 h-8 text-blue-600 mx-auto mb-3" />
              <div className="text-3xl font-bold text-blue-600">15,000+</div>
              <div className="text-gray-600 text-sm">Dreams Funded</div>
            </div>
            <div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-6">
              <Award className="w-8 h-8 text-purple-600 mx-auto mb-3" />
              <div className="text-3xl font-bold text-purple-600">4.9★</div>
              <div className="text-gray-600 text-sm">Average Rating</div>
            </div>
          </div>
        </div>
      </section>

{/* Category Filter */}
      <section className="py-8 bg-white border-b">
        <div className="container mx-auto px-4">
          <div className="flex flex-wrap gap-3 justify-center">
            {categories.map((category) => (
              <button
                key={category.id}
                onClick={() => setSelectedCategory(category.id)}
                className={`px-6 py-3 rounded-full font-medium transition-all ${
                  selectedCategory === category.id
                    ? "bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg"
                    : "bg-white text-gray-600 hover:bg-emerald-50 hover:text-emerald-600 border border-gray-200"
                }`}
              >
                {category.name} ({category.count})
              </button>
            ))}
          </div>
        </div>
      </section>

{/* Success Stories */}
      <main className="py-16">
        <div className="container mx-auto px-4">
          <div className="space-y-16">
            {filteredStories.map((story, index) => (
              <article key={story.id} className="bg-white/80 backdrop-blur-sm rounded-3xl shadow-xl overflow-hidden">
                {/* Story Header */}
                <div className="bg-gradient-to-r from-emerald-600 to-teal-600 text-white p-8">
                  <div className="flex flex-col md:flex-row items-start md:items-center gap-6">
                    <div className="relative">
                      <Image
                        src={story.image || "/placeholder.svg"}
                        alt={`${story.name} - Success Story`}
                        width={120}
                        height={120}
                        className="rounded-full object-cover ring-4 ring-white shadow-lg"
                      />
                      <div className="absolute -bottom-2 -right-2 bg-amber-400 rounded-full p-2">
                        <Award className="w-6 h-6 text-white" />
                      </div>
                    </div>
                    <div className="flex-1">
                      <h2 className="text-3xl font-bold mb-2">{story.name}</h2>
                      <p className="text-emerald-100 text-lg mb-2">{story.role}</p>
                      <p className="text-emerald-200 mb-4">{story.location}</p>
                      <div className="flex flex-wrap gap-4 text-sm">
                        <div className="flex items-center space-x-2">
                          <Calendar className="w-4 h-4" />
                          <span>{story.timeframe} journey</span>
                        </div>
                        <div className="flex items-center space-x-2">
                          <DollarSign className="w-4 h-4" />
                          <span>${story.totalSaved.toLocaleString()} saved</span>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Target className="w-4 h-4" />
                          <span>{story.goalsAchieved} goals achieved</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

{/* Story Content */}
                <div className="p-8">
                  {/* Challenge & Solution */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                    <div className="bg-red-50 border border-red-200 rounded-2xl p-6">
                      <h3 className="text-lg font-semibold text-red-800 mb-3 flex items-center">
                        <Heart className="w-5 h-5 mr-2" />
                        The Challenge
                      </h3>
                      <p className="text-red-700">{story.challenge}</p>
                    </div>
                    <div className="bg-emerald-50 border border-emerald-200 rounded-2xl p-6">
                      <h3 className="text-lg font-semibold text-emerald-800 mb-3 flex items-center">
                        <CheckCircle className="w-5 h-5 mr-2" />
                        The Solution
                      </h3>
                      <p className="text-emerald-700">{story.solution}</p>
                    </div>
                  </div>

{/* Journey Timeline */}
                  <div className="mb-8">
                    <h3 className="text-2xl font-bold mb-6 text-center">The Transformation Journey</h3>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                      <div className="text-center">
                        <div className="bg-gray-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                          <span className="text-2xl font-bold text-gray-600">1</span>
                        </div>
                        <h4 className="font-semibold text-gray-800 mb-2">Before GoalWise</h4>
                        <p className="text-gray-600 text-sm">{story.journey.before}</p>
                      </div>
                      <div className="text-center">
                        <div className="bg-emerald-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                          <TrendingUp className="w-8 h-8 text-emerald-600" />
                        </div>
                        <h4 className="font-semibold text-emerald-800 mb-2">The Journey</h4>
                        <p className="text-emerald-700 text-sm">{story.journey.during}</p>
                      </div>
                      <div className="text-center">
                        <div className="bg-amber-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                          <Award className="w-8 h-8 text-amber-600" />
                        </div>
                        <h4 className="font-semibold text-amber-800 mb-2">Success Achieved</h4>
                        <p className="text-amber-700 text-sm">{story.journey.after}</p>
                      </div>
                    </div>
                  </div>

{/* Quote */}
                  <div className="bg-gradient-to-r from-emerald-50 to-teal-50 border-l-4 border-emerald-500 rounded-r-2xl p-6 mb-8">
                    <blockquote className="text-lg italic text-gray-700 mb-4">"{story.quote}"</blockquote>
                    <cite className="text-emerald-600 font-semibold">— {story.name}</cite>
                  </div>

{/* Results & Goals */}
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
                    {/* Results */}
                    <div>
                      <h3 className="text-xl font-bold mb-4 flex items-center">
                        <CheckCircle className="w-6 h-6 text-emerald-600 mr-2" />
                        Key Results
                      </h3>
                      <ul className="space-y-2">
                        {story.results.map((result, idx) => (
                          <li key={idx} className="flex items-start space-x-2">
                            <CheckCircle className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                            <span className="text-gray-700">{result}</span>
                          </li>
                        ))}
                      </ul>
                    </div>

{/* Goals Breakdown */}
                    <div>
                      <h3 className="text-xl font-bold mb-4 flex items-center">
                        <Target className="w-6 h-6 text-teal-600 mr-2" />
                        Goals Achieved
                      </h3>
                      <div className="space-y-3 max-h-64 overflow-y-auto">
                        {story.goals.map((goal, idx) => (
                          <div key={idx} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div>
                              <div className="font-medium text-gray-800">{goal.name}</div>
                              <div className="text-sm text-gray-600">{goal.timeframe}</div>
                            </div>
                            <div className="text-right">
                              <div className="font-semibold text-emerald-600">${goal.amount.toLocaleString()}</div>
                              <div className="text-xs text-emerald-500">✓ Completed</div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>

{/* Tips */}
                  <div className="bg-blue-50 border border-blue-200 rounded-2xl p-6">
                    <h3 className="text-xl font-bold mb-4 text-blue-800 flex items-center">
                      <Star className="w-6 h-6 mr-2" />
                      {story.name}'s Top Tips
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      {story.tips.map((tip, idx) => (
                        <div key={idx} className="flex items-start space-x-2">
                          <div className="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold flex-shrink-0 mt-0.5">
                            {idx + 1}
                          </div>
                          <span className="text-blue-700">{tip}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </article>
            ))}
          </div>

{/* Call to Action */}
          <div className="mt-16 text-center">
            <div className="bg-white/80 backdrop-blur-sm border border-white/60 rounded-3xl p-12 max-w-4xl mx-auto shadow-xl">
              <h3 className="text-3xl md:text-4xl font-bold mb-6 text-gray-900">
                Ready to Write Your Own Success Story?
              </h3>
              <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
                Join thousands who've transformed financial stress into confidence. Your journey to debt-free goal
                achievement starts with a single click.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link
                  href="/#dashboard"
                  className="bg-gradient-to-r from-emerald-600 to-teal-600 text-white px-8 py-4 rounded-xl font-semibold text-lg hover:from-emerald-700 hover:to-teal-700 transition-all shadow-lg hover:shadow-xl transform hover:scale-105"
                >
                  Start Your First Goal Today
                </Link>
                <Link
                  href="/blog"
                  className="border-2 border-emerald-600 text-emerald-600 px-8 py-4 rounded-xl font-semibold text-lg hover:bg-emerald-50 transition-all"
                >
                  Read Our Guides
                </Link>
              </div>
              <p className="text-sm text-gray-500 mt-6">
                100% free to start • No credit card required • Your data stays private
              </p>
            </div>
          </div>
        </div>
      </main>

{/* JSON-LD Structured Data */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "CollectionPage",
            name: "GoalWise Success Stories",
            description: "Real success stories from GoalWise users who achieved financial confidence",
            url: "https://goalwise.app/success-stories",
            mainEntity: {
              "@type": "ItemList",
              itemListElement: successStories.map((story, index) => ({
                "@type": "Review",
                position: index + 1,
                author: {
                  "@type": "Person",
                  name: story.name,
                },
                reviewBody: story.quote,
                reviewRating: {
                  "@type": "Rating",
                  ratingValue: "5",
                  bestRating: "5",
                },
              })),
            },
          }),
        }}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { Target, Heart } from "lucide-react"

interface FooterProps {
  onOpenLegalPage: (pageId: string) => void
  onProClick: () => void
}

export default function Footer({ onOpenLegalPage, onProClick }: FooterProps) {
  return (
    <footer className="bg-gray-900 text-white py-16">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div className="md:col-span-2">
            <div className="flex items-center space-x-3 mb-6">
              <div className="bg-gradient-to-r from-emerald-500 to-teal-500 p-2 rounded-xl">
                <Target className="w-6 h-6 text-white" />
              </div>
              <div>
                <h4 className="text-2xl font-bold">GoalWise</h4>
                <p className="text-emerald-400 text-sm">Your Path to Financial Confidence</p>
              </div>
            </div>
            <p className="text-gray-400 mb-6 max-w-md leading-relaxed">
              Transform financial stress into confidence with simple, privacy-first goal tracking. Join thousands who've
              achieved their dreams debt-free.
            </p>
            <div className="flex items-center space-x-2 text-emerald-400">
              <Heart className="w-4 h-4" />
              <span className="text-sm">Made with love for smart savers worldwide</span>
            </div>
          </div>

<div>
            <h5 className="font-semibold mb-6 text-emerald-400">Product</h5>
            <ul className="space-y-3 text-gray-400">
              <li>
                <a href="#dashboard" className="hover:text-white transition-colors hover:text-emerald-400">
                  Start Tracking
                </a>
              </li>
              <li>
                <Link href="/how-it-works" className="hover:text-white transition-colors hover:text-emerald-400">
                  How It Works
                </Link>
              </li>
              <li>
                <Link href="/blog" className="hover:text-white transition-colors hover:text-emerald-400">
                  Financial Guides
                </Link>
              </li>
              <li>
                <Link href="/success-stories" className="hover:text-white transition-colors hover:text-emerald-400">
                  Success Stories
                </Link>
              </li>
              <li>
                <button onClick={onProClick} className="hover:text-white transition-colors hover:text-emerald-400">
                  Pro Features
                </button>
              </li>
            </ul>
          </div>

<div>
            <h5 className="font-semibold mb-6 text-emerald-400">Support</h5>
            <ul className="space-y-3 text-gray-400">
              <li>
                <Link
                  href="/blog/getting-started"
                  className="hover:text-white transition-colors hover:text-emerald-400"
                >
                  Getting Started
                </Link>
              </li>
              <li>
                <a href="#faq" className="hover:text-white transition-colors hover:text-emerald-400">
                  FAQ
                </a>
              </li>
              <li>
                <a href="#contact" className="hover:text-white transition-colors hover:text-emerald-400">
                  Contact Us
                </a>
              </li>
              <li>
                <button
                  onClick={() => onOpenLegalPage("privacy")}
                  className="hover:text-white transition-colors hover:text-emerald-400"
                >
                  Privacy Policy
                </button>
              </li>
            </ul>
          </div>
        </div>

<div className="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
          <p className="text-gray-400 text-sm">© 2025 GoalWise™ – Empowering Financial Confidence Worldwide</p>
          <div className="flex items-center space-x-4 mt-4 md:mt-0">
            <span className="text-gray-500 text-sm">Trusted by 2,847+ users</span>
            <div className="flex space-x-1">
              {[...Array(5)].map((_, i) => (
                <div key={i} className="w-3 h-3 bg-amber-400 rounded-full"></div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]jpg:file="public/images/how-it-works-hero.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/how-it-works-hero-AGKRJQtcqkkYXaTPvzV3Bjfj5Hmtdl.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/step-1-set-goals.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/step-1-set-goals-0EoCwdV8NJsHBbzfseSHMf0Av6QWb5.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/step-2-track-progress.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/step-2-track-progress-tQlCUy2kFD59ZQEnDMVE2FZj6Bu3o3.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/step-3-achieve-success.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/step-3-achieve-success-R3vwsWGHfzdCo4fifoGK1RdCyWTQlA.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/privacy-first-feature.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/privacy-first-feature-FXaqVgN7olO0hffVTOYgGgBsa5MhsO.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/simple-interface-feature.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/simple-interface-feature-pauPCRFvgJrqDTJNhRMUCWvEry1p0f.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/motivation-feature.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/motivation-feature-3pfDSqiWNYCLXIwvD3BQyqZPbj389l.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/analytics-feature.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/analytics-feature-UWG2oJi6XZbEgf6OIOoszkuVGtZVR6.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Shield, Zap, Heart, FileText, Share2, CheckCircle } from "lucide-react"
import { useTranslation } from "@/contexts/translation-context"
import Image from "next/image"
import { useState } from "react"

export default function HeroSection() {
  const { t } = useTranslation()
  const [imageLoaded, setImageLoaded] = useState(false)

const scrollToDashboard = () => {
    document.getElementById("dashboard")?.scrollIntoView({ behavior: "smooth" })
  }

return (
    <section className="bg-gradient-to-br from-emerald-50 via-teal-50 to-blue-50 py-20">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          {/* Text Content */}
          <div className="text-center lg:text-left">
            <div className="inline-flex items-center bg-emerald-100 text-emerald-700 px-4 py-2 rounded-full text-sm font-medium mb-6">
              <CheckCircle className="w-4 h-4 mr-2" />
              Trusted by 2,847+ Smart Savers
            </div>

<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
              <span className="text-gray-900">Achieve Your</span>
              <br />
              <span className="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
                Goals, Debt-Free
              </span>
            </h1>

<p className="text-xl md:text-2xl text-gray-600 mb-8 leading-relaxed">
              Transform financial stress into confidence with simple, privacy-first goal tracking. No subscriptions. No
              complexity. Just results.
            </p>

<div className="flex flex-col sm:flex-row gap-4 mb-8">
              <button
                onClick={scrollToDashboard}
                className="bg-gradient-to-r from-emerald-600 to-teal-600 text-white px-8 py-4 rounded-xl font-semibold text-lg hover:from-emerald-700 hover:to-teal-700 transition-all shadow-lg hover:shadow-xl transform hover:scale-105"
              >
                Start Your First Goal Today
              </button>
              <button
                onClick={() => document.getElementById("features")?.scrollIntoView({ behavior: "smooth" })}
                className="border-2 border-emerald-600 text-emerald-600 px-8 py-4 rounded-xl font-semibold text-lg hover:bg-emerald-50 transition-all"
              >
                See How It Works
              </button>
            </div>

{/* Trust Indicators */}
            <div className="flex flex-wrap items-center gap-6 text-sm text-gray-600">
              <div className="flex items-center space-x-2">
                <Shield className="w-5 h-5 text-emerald-600" />
                <span>100% Private & Secure</span>
              </div>
              <div className="flex items-center space-x-2">
                <Zap className="w-5 h-5 text-emerald-600" />
                <span>Setup in Under 2 Minutes</span>
              </div>
              <div className="flex items-center space-x-2">
                <Heart className="w-5 h-5 text-emerald-600" />
                <span>No Hidden Fees Ever</span>
              </div>
            </div>
          </div>

{/* Hero Image */}
          <div className="flex justify-center lg:justify-end">
            <div className="relative w-full max-w-lg">
              <div className="absolute inset-0 bg-gradient-to-r from-emerald-400 to-teal-400 rounded-3xl blur-3xl opacity-20 transform rotate-6"></div>

{/* Loading skeleton */}
              {!imageLoaded && (
                <div className="relative w-full h-[400px] bg-gray-200 rounded-3xl loading-skeleton"></div>
              )}

<Image
                src="/images/hero-image.png"
                alt="GoalWise - Achieve your financial goals with confidence"
                width={600}
                height={400}
                className={`relative w-full h-auto rounded-3xl shadow-2xl transition-opacity duration-300 ${
                  imageLoaded ? "opacity-100" : "opacity-0"
                }`}
                priority
                onLoad={() => setImageLoaded(true)}
                placeholder="blur"
                blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
              />
            </div>
          </div>
        </div>

{/* Features Preview */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-20 pt-16 border-t border-gray-200">
          <div className="text-center group">
            <div className="bg-white rounded-2xl p-6 shadow-lg group-hover:shadow-xl transition-all">
              <Shield className="w-8 h-8 mx-auto mb-3 text-emerald-600" />
              <h3 className="font-semibold text-gray-900 mb-2">Privacy-First</h3>
              <p className="text-sm text-gray-600">Your data stays on your device. Always.</p>
            </div>
          </div>
          <div className="text-center group">
            <div className="bg-white rounded-2xl p-6 shadow-lg group-hover:shadow-xl transition-all">
              <Zap className="w-8 h-8 mx-auto mb-3 text-teal-600" />
              <h3 className="font-semibold text-gray-900 mb-2">Simple & Fast</h3>
              <p className="text-sm text-gray-600">Start in minutes, stay motivated for life.</p>
            </div>
          </div>
          <div className="text-center group">
            <div className="bg-white rounded-2xl p-6 shadow-lg group-hover:shadow-xl transition-all relative">
              <FileText className="w-8 h-8 mx-auto mb-3 text-blue-600" />
              <h3 className="font-semibold text-gray-900 mb-2">Pro Reports</h3>
              <p className="text-sm text-gray-600">Export beautiful PDF & CSV reports.</p>
              <span className="absolute -top-2 -right-2 bg-gradient-to-r from-orange-500 to-amber-500 text-white text-xs px-2 py-1 rounded-full font-bold">
                PRO
              </span>
            </div>
          </div>
          <div className="text-center group">
            <div className="bg-white rounded-2xl p-6 shadow-lg group-hover:shadow-xl transition-all relative">
              <Share2 className="w-8 h-8 mx-auto mb-3 text-purple-600" />
              <h3 className="font-semibold text-gray-900 mb-2">Goal Sharing</h3>
              <p className="text-sm text-gray-600">Share progress with family & friends.</p>
              <span className="absolute -top-2 -right-2 bg-gradient-to-r from-orange-500 to-amber-500 text-white text-xs px-2 py-1 rounded-full font-bold">
                PRO
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/blog-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import Image from "next/image"
import { useState } from "react"

export default function BlogSection() {
  const [loadedImages, setLoadedImages] = useState<Set<string>>(new Set())

const handleImageLoad = (slug: string) => {
    setLoadedImages((prev) => new Set(prev).add(slug))
  }

const blogPosts = [
    {
      slug: "getting-started",
      title: "How to Start a Sinking Fund",
      description: "Learn what a sinking fund is and how to set it up in minutes",
      image: "/images/blog/getting-started-hero.png",
      category: "Getting Started",
      readTime: "5 min read",
    },
    {
      slug: "best-categories",
      title: "Best Sinking Fund Categories for 2025",
      description: "The top must-have categories for your savings goals",
      image: "/images/blog/best-categories.png",
      category: "Planning",
      readTime: "7 min read",
    },
    {
      slug: "privacy-budgeting",
      title: "Why Privacy Matters in Budget Tracking",
      description: "Learn why local storage budgeting tools are better",
      image: "/images/blog/privacy-budgeting.png",
      category: "Privacy",
      readTime: "6 min read",
    },
    {
      slug: "sinking-vs-emergency",
      title: "Sinking Funds vs Emergency Funds",
      description: "Know the difference and when to use each",
      image: "/images/blog/sinking-vs-emergency.png",
      category: "Strategy",
      readTime: "8 min read",
    },
    {
      slug: "stay-consistent",
      title: "How to Stay Consistent with Sinking Funds",
      description: "Motivation strategies that actually work",
      image: "/images/blog/stay-consistent.png",
      category: "Motivation",
      readTime: "6 min read",
    },
  ]

return (
    <section className="py-12 bg-gray-100" id="blog">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h3 className="text-3xl font-bold mb-4">Expert Guides & Tips</h3>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Learn from our comprehensive guides on sinking funds, savings strategies, and personal finance tips.
          </p>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-8">
          {blogPosts.map((post) => (
            <article
              key={post.slug}
              className="bg-white/95 backdrop-blur-sm border border-white/20 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1"
            >
              <div className="relative h-48 overflow-hidden">
                {/* Loading skeleton */}
                {!loadedImages.has(post.slug) && <div className="absolute inset-0 bg-gray-200 loading-skeleton"></div>}

<Image
                  src={post.image || "/placeholder.svg"}
                  alt={`${post.title} - Financial guide illustration`}
                  width={384}
                  height={192}
                  className={`w-full h-full object-cover transition-opacity duration-300 ${
                    loadedImages.has(post.slug) ? "opacity-100" : "opacity-0"
                  }`}
                  loading="lazy"
                  onLoad={() => handleImageLoad(post.slug)}
                  placeholder="blur"
                  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
                />

<div className="absolute top-4 left-4">
                  <span className="bg-white/90 backdrop-blur-sm text-gray-700 px-3 py-1 rounded-full text-sm font-medium">
                    {post.category}
                  </span>
                </div>
              </div>
              <div className="p-6">
                <div className="flex items-center text-sm text-gray-600 mb-3">
                  <span>{post.readTime}</span>
                </div>
                <h4 className="text-xl font-semibold mb-2 line-clamp-2">{post.title}</h4>
                <p className="text-gray-600 mb-4 line-clamp-3">{post.description}</p>
                <Link
                  href={`/blog/${post.slug}`}
                  className="inline-flex items-center text-purple-600 font-semibold hover:text-purple-700 transition-colors"
                >
                  Read Full Article →
                </Link>
              </div>
            </article>
          ))}
        </div>

<div className="text-center">
          <Link
            href="/blog"
            className="inline-block bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-700 transition-colors shadow-lg hover:shadow-xl"
          >
            View All Articles
          </Link>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/how-it-works-page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import {
  Target,
  TrendingUp,
  CheckCircle,
  Shield,
  Zap,
  Heart,
  DollarSign,
  BarChart3,
  FileText,
  Share2,
  Clock,
  Award,
  Users,
  ArrowRight,
  PlayCircle,
} from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { useState } from "react"

export default function HowItWorksPage() {
  const [activeStep, setActiveStep] = useState(1)
  const [activeFeature, setActiveFeature] = useState("privacy")
  const [loadedImages, setLoadedImages] = useState<Set<string>>(new Set())

const handleImageLoad = (imageId: string) => {
    setLoadedImages((prev) => new Set(prev).add(imageId))
  }

const steps = [
    {
      number: 1,
      title: "Set Your Goals",
      subtitle: "Define what matters most to you",
      description:
        "Create specific savings goals for the things that matter - vacations, car repairs, home improvements, or emergency funds. Each goal gets its own dedicated tracking space.",
      details: [
        "Name your goal (e.g., 'Hawaii Vacation 2025')",
        "Set your target amount ($3,000)",
        "Choose your target date (December 2025)",
        "Add any current savings ($500 already saved)",
      ],
      image: "/images/step-1-set-goals.jpg",
      tips: [
        "Start with 2-3 goals to avoid overwhelm",
        "Make goals specific and meaningful to you",
        "Choose realistic timeframes for success",
        "Include both short-term and long-term goals",
      ],
      timeRequired: "2 minutes",
      difficulty: "Beginner",
    },
    {
      number: 2,
      title: "Track Progress",
      subtitle: "Watch your dreams become reality",
      description:
        "Add money to your goals whenever you can - weekly, monthly, or whenever you have extra cash. Our visual progress bars and analytics keep you motivated every step of the way.",
      details: [
        "Add contributions of any amount, anytime",
        "See instant visual progress with colorful charts",
        "Get insights on your saving patterns",
        "Celebrate milestones as you reach them",
      ],
      image: "/images/step-2-track-progress.jpg",
      tips: [
        "Set up automatic transfers for consistency",
        "Use windfalls and bonuses to accelerate progress",
        "Track even small contributions - they add up",
        "Review progress weekly to stay motivated",
      ],
      timeRequired: "30 seconds daily",
      difficulty: "Easy",
    },
    {
      number: 3,
      title: "Achieve Success",
      subtitle: "Reach your goals debt-free",
      description:
        "When you reach your target, spend confidently knowing you've planned and saved for it. No guilt, no debt, no stress - just the satisfaction of achieving your dreams responsibly.",
      details: [
        "Receive celebration notifications when goals are met",
        "Spend confidently without guilt or debt",
        "Share your success with family and friends",
        "Start new goals to continue building wealth",
      ],
      image: "/images/step-3-achieve-success.jpg",
      tips: [
        "Celebrate your achievements - you've earned it",
        "Document your success to inspire others",
        "Immediately start a new goal to maintain momentum",
        "Reflect on lessons learned for future goals",
      ],
      timeRequired: "Lifetime of confidence",
      difficulty: "Rewarding",
    },
  ]

const features = [
    {
      id: "privacy",
      title: "Privacy-First Design",
      subtitle: "Your data stays with you, always",
      description:
        "Unlike other financial apps, GoalWise stores everything locally on your device. No cloud storage, no data mining, no privacy concerns. Your financial information never leaves your control.",
      benefits: [
        "100% local data storage - nothing sent to servers",
        "No user accounts or passwords required",
        "No tracking pixels or analytics cookies",
        "Complete transparency about data handling",
        "Works fully offline after initial load",
      ],
      icon: Shield,
      color: "emerald",
      image: "/images/privacy-first-feature.jpg",
    },
    {
      id: "simplicity",
      title: "Beautifully Simple",
      subtitle: "Powerful features, zero complexity",
      description:
        "We've eliminated the complexity that makes other financial tools overwhelming. Clean design, intuitive interface, and smart defaults mean you can start saving in under 2 minutes.",
      benefits: [
        "No learning curve - start immediately",
        "Clean, distraction-free interface",
        "Smart defaults for common goals",
        "Mobile-optimized for on-the-go tracking",
        "One-click goal creation and updates",
      ],
      icon: Zap,
      color: "blue",
      image: "/images/simple-interface-feature.jpg",
    },
    {
      id: "motivation",
      title: "Built for Motivation",
      subtitle: "Stay inspired throughout your journey",
      description:
        "Visual progress tracking, milestone celebrations, and achievement badges keep you motivated. See your progress in real-time with beautiful charts and encouraging feedback.",
      benefits: [
        "Visual progress bars and charts",
        "Milestone celebration notifications",
        "Achievement badges and rewards",
        "Progress sharing with family/friends",
        "Motivational tips and encouragement",
      ],
      icon: Heart,
      color: "pink",
      image: "/images/motivation-feature.jpg",
    },
    {
      id: "analytics",
      title: "Smart Analytics",
      subtitle: "Insights that improve your saving",
      description:
        "Understand your saving patterns with intelligent analytics. Discover your best saving days, track velocity toward goals, and get personalized recommendations for improvement.",
      benefits: [
        "Saving pattern analysis and insights",
        "Goal velocity and projection tracking",
        "Personalized improvement recommendations",
        "Monthly and yearly progress reports",
        "Comparison across multiple goals",
      ],
      icon: BarChart3,
      color: "purple",
      image: "/images/analytics-feature.jpg",
    },
  ]

const proFeatures = [
    {
      title: "Professional PDF Reports",
      description: "Export beautiful, detailed reports of all your goals with charts and analytics",
      icon: FileText,
      benefit: "Perfect for financial planning meetings or personal records",
    },
    {
      title: "CSV Data Export",
      description: "Download your data in spreadsheet format for advanced analysis or backup",
      icon: DollarSign,
      benefit: "Full control over your financial data with export flexibility",
    },
    {
      title: "Goal Sharing & Accountability",
      description: "Share progress with family and friends for motivation and support",
      icon: Share2,
      benefit: "Build accountability partnerships that keep you on track",
    },
    {
      title: "Advanced Analytics Dashboard",
      description: "Deep insights into saving patterns, trends, and optimization opportunities",
      icon: TrendingUp,
      benefit: "Make data-driven decisions to accelerate your progress",
    },
  ]

const faqs = [
    {
      question: "How is GoalWise different from other budgeting apps?",
      answer:
        "GoalWise focuses specifically on goal-based saving with complete privacy. Unlike budgeting apps that track every expense, we help you save for specific dreams and goals. Plus, your data never leaves your device - no cloud storage or data mining.",
    },
    {
      question: "Do I need to connect my bank accounts?",
      answer:
        "No! GoalWise works completely independently. You manually add contributions when you make them, giving you full control and privacy. No bank connections, no automatic transactions, no security risks.",
    },
    {
      question: "What happens if I clear my browser data?",
      answer:
        "Since data is stored locally, clearing browser data will remove your goals. Pro users can export their data as backup. We recommend regular exports or screenshots of your progress for peace of mind.",
    },
    {
      question: "Can I use GoalWise on multiple devices?",
      answer:
        "Each device stores its own data locally. You can use GoalWise on multiple devices, but they won't sync automatically. Pro users can export/import data to transfer between devices.",
    },
    {
      question: "Is there a mobile app?",
      answer:
        "GoalWise is a Progressive Web App (PWA) that works perfectly on mobile browsers. You can add it to your home screen for an app-like experience without downloading anything from app stores.",
    },
    {
      question: "How much does GoalWise cost?",
      answer:
        "GoalWise is free to use with unlimited goals and full privacy. Pro features (PDF export, CSV export, goal sharing) are available for a one-time payment of $9.99 - no subscriptions ever.",
    },
  ]

<div className="max-w-4xl">
            <div className="inline-flex items-center bg-white/20 backdrop-blur-sm text-white px-4 py-2 rounded-full text-sm font-medium mb-6">
              <PlayCircle className="w-4 h-4 mr-2" />
              Simple 3-Step Process
            </div>
            <h1 className="text-5xl md:text-6xl font-bold mb-6 leading-tight">
              How GoalWise Transforms
              <br />
              <span className="text-emerald-200">Financial Stress into Confidence</span>
            </h1>
            <p className="text-xl md:text-2xl opacity-90 mb-8 leading-relaxed max-w-3xl">
              Discover our proven 3-step system that's helped 2,847+ people achieve their financial goals debt-free.
              Privacy-first, beautifully simple, and designed for real results.
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <Link
                href="/#dashboard"
                className="bg-white text-emerald-600 px-8 py-4 rounded-xl font-semibold text-lg hover:bg-emerald-50 transition-all shadow-lg hover:shadow-xl transform hover:scale-105"
              >
                Start Your First Goal Now
              </Link>
              <button
                onClick={() => document.getElementById("steps")?.scrollIntoView({ behavior: "smooth" })}
                className="border-2 border-white text-white px-8 py-4 rounded-xl font-semibold text-lg hover:bg-white/10 transition-all"
              >
                See How It Works
              </button>
            </div>
          </div>
        </div>
      </header>

{/* Breadcrumb */}
      <nav className="bg-white border-b py-4">
        <div className="container mx-auto px-4">
          <div className="flex items-center space-x-2 text-sm text-gray-600">
            <Link href="/" className="hover:text-emerald-600 transition-colors">
              Home
            </Link>
            <span>/</span>
            <span className="text-gray-900 font-medium">How It Works</span>
          </div>
        </div>
      </nav>

{/* Quick Stats */}
      <section className="py-12 bg-white">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            <div className="bg-gradient-to-br from-emerald-50 to-teal-50 rounded-2xl p-6">
              <Clock className="w-8 h-8 text-emerald-600 mx-auto mb-3" />
              <div className="text-3xl font-bold text-emerald-600">2 min</div>
              <div className="text-gray-600 text-sm">Setup Time</div>
            </div>
            <div className="bg-gradient-to-br from-teal-50 to-blue-50 rounded-2xl p-6">
              <Users className="w-8 h-8 text-teal-600 mx-auto mb-3" />
              <div className="text-3xl font-bold text-teal-600">2,847+</div>
              <div className="text-gray-600 text-sm">Success Stories</div>
            </div>
            <div className="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-6">
              <DollarSign className="w-8 h-8 text-blue-600 mx-auto mb-3" />
              <div className="text-3xl font-bold text-blue-600">$2.1M+</div>
              <div className="text-gray-600 text-sm">Goals Achieved</div>
            </div>
            <div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-6">
              <Award className="w-8 h-8 text-purple-600 mx-auto mb-3" />
              <div className="text-3xl font-bold text-purple-600">4.9★</div>
              <div className="text-gray-600 text-sm">User Rating</div>
            </div>
          </div>
        </div>
      </section>

{/* 3-Step Process */}
      <section id="steps" className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold mb-6 text-gray-900">
              3 Simple Steps to
              <span className="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
                {" "}
                Financial Freedom
              </span>
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Our proven system transforms financial stress into confidence. No complexity, no overwhelm - just clear
              steps that actually work.
            </p>
          </div>

{/* Step Navigation */}
          <div className="flex justify-center mb-12">
            <div className="flex space-x-4 bg-white/80 backdrop-blur-sm rounded-2xl p-2 shadow-lg">
              {steps.map((step) => (
                <button
                  key={step.number}
                  onClick={() => setActiveStep(step.number)}
                  className={`px-6 py-3 rounded-xl font-semibold transition-all ${
                    activeStep === step.number
                      ? "bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg"
                      : "text-gray-600 hover:text-emerald-600 hover:bg-emerald-50"
                  }`}
                >
                  Step {step.number}
                </button>
              ))}
            </div>
          </div>

{/* Active Step Content */}
          {steps.map((step) => (
            <div key={step.number} className={`${activeStep === step.number ? "block" : "hidden"} fade-in`}>
              <div className="bg-white/80 backdrop-blur-sm rounded-3xl shadow-xl overflow-hidden">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-0">
                  {/* Content */}
                  <div className="p-12">
                    <div className="flex items-center space-x-4 mb-6">
                      <div className="bg-gradient-to-r from-emerald-600 to-teal-600 text-white rounded-full w-16 h-16 flex items-center justify-center text-2xl font-bold">
                        {step.number}
                      </div>
                      <div>
                        <h3 className="text-3xl font-bold text-gray-900">{step.title}</h3>
                        <p className="text-emerald-600 text-lg font-medium">{step.subtitle}</p>
                      </div>
                    </div>

<p className="text-gray-700 text-lg mb-8 leading-relaxed">{step.description}</p>

{/* Step Details */}
                    <div className="mb-8">
                      <h4 className="font-semibold text-gray-800 mb-4">What you'll do:</h4>
                      <ul className="space-y-3">
                        {step.details.map((detail, idx) => (
                          <li key={idx} className="flex items-start space-x-3">
                            <CheckCircle className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                            <span className="text-gray-700">{detail}</span>
                          </li>
                        ))}
                      </ul>
                    </div>

{/* Meta Info */}
                    <div className="flex items-center space-x-6 mb-8 text-sm">
                      <div className="flex items-center space-x-2">
                        <Clock className="w-4 h-4 text-gray-500" />
                        <span className="text-gray-600">{step.timeRequired}</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Target className="w-4 h-4 text-gray-500" />
                        <span className="text-gray-600">{step.difficulty}</span>
                      </div>
                    </div>

{/* Pro Tips */}
                    <div className="bg-emerald-50 border border-emerald-200 rounded-2xl p-6">
                      <h4 className="font-semibold text-emerald-800 mb-3 flex items-center">
                        <Award className="w-5 h-5 mr-2" />
                        Pro Tips for Success
                      </h4>
                      <ul className="space-y-2">
                        {step.tips.map((tip, idx) => (
                          <li key={idx} className="text-emerald-700 text-sm flex items-start space-x-2">
                            <span className="text-emerald-500 font-bold">•</span>
                            <span>{tip}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>

{/* Image */}
                  <div className="relative h-96 lg:h-auto">
                    {/* Loading skeleton */}
                    {!loadedImages.has(`step-${step.number}`) && (
                      <div className="absolute inset-0 bg-gray-200 loading-skeleton"></div>
                    )}

<Image
                      src={step.image || "/placeholder.svg"}
                      alt={`${step.title} - GoalWise Step ${step.number}`}
                      fill
                      className={`object-cover transition-opacity duration-300 ${
                        loadedImages.has(`step-${step.number}`) ? "opacity-100" : "opacity-0"
                      }`}
                      loading="lazy"
                      onLoad={() => handleImageLoad(`step-${step.number}`)}
                      placeholder="blur"
                      blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                  </div>
                </div>
              </div>
            </div>
          ))}

{/* CTA after steps */}
          <div className="text-center mt-16">
            <div className="bg-gradient-to-r from-emerald-600 to-teal-600 text-white rounded-3xl p-8 max-w-2xl mx-auto">
              <h3 className="text-2xl font-bold mb-4">Ready to Start Your Journey?</h3>
              <p className="mb-6 opacity-90">
                Join thousands who've transformed their financial lives with our simple 3-step system.
              </p>
              <Link
                href="/#dashboard"
                className="bg-white text-emerald-600 px-8 py-4 rounded-xl font-semibold text-lg hover:bg-emerald-50 transition-all shadow-lg hover:shadow-xl transform hover:scale-105 inline-block"
              >
                Create Your First Goal Now
              </Link>
            </div>
          </div>
        </div>
      </section>

{/* Key Features */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold mb-6 text-gray-900">
              Why GoalWise
              <span className="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
                {" "}
                Actually Works
              </span>
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              We've eliminated the complexity and privacy concerns that make other financial tools fail. Here's what
              makes GoalWise different.
            </p>
          </div>

{/* Feature Navigation */}
          <div className="flex flex-wrap justify-center gap-3 mb-12">
            {features.map((feature) => (
              <button
                key={feature.id}
                onClick={() => setActiveFeature(feature.id)}
                className={`px-6 py-3 rounded-full font-medium transition-all ${
                  activeFeature === feature.id
                    ? "bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg"
                    : "bg-white text-gray-600 hover:bg-gray-50 border border-gray-200"
                }`}
              >
                <feature.icon className="w-4 h-4 inline mr-2" />
                {feature.title}
              </button>
            ))}
          </div>

{/* Active Feature Content */}
          {features.map((feature) => (
            <div key={feature.id} className={`${activeFeature === feature.id ? "block" : "hidden"} fade-in`}>
              <div className="bg-gradient-to-br from-gray-50 to-white rounded-3xl shadow-xl overflow-hidden">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-0">
                  <div className="p-12">
                    <div className="flex items-center space-x-4 mb-6">
                      <div className="bg-gradient-to-r from-emerald-600 to-teal-600 text-white rounded-2xl p-4">
                        <feature.icon className="w-8 h-8" />
                      </div>
                      <div>
                        <h3 className="text-3xl font-bold text-gray-900">{feature.title}</h3>
                        <p className="text-emerald-600 text-lg font-medium">{feature.subtitle}</p>
                      </div>
                    </div>

<p className="text-gray-700 text-lg mb-8 leading-relaxed">{feature.description}</p>

<div className="space-y-4">
                      {feature.benefits.map((benefit, idx) => (
                        <div key={idx} className="flex items-start space-x-3">
                          <CheckCircle className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                          <span className="text-gray-700">{benefit}</span>
                        </div>
                      ))}
                    </div>
                  </div>

<div className="relative h-96 lg:h-auto">
                    {/* Loading skeleton */}
                    {!loadedImages.has(feature.id) && (
                      <div className="absolute inset-0 bg-gray-200 loading-skeleton"></div>
                    )}

<Image
                      src={feature.image || "/placeholder.svg"}
                      alt={`${feature.title} - GoalWise Feature`}
                      fill
                      className={`object-cover transition-opacity duration-300 ${
                        loadedImages.has(feature.id) ? "opacity-100" : "opacity-0"
                      }`}
                      loading="lazy"
                      onLoad={() => handleImageLoad(feature.id)}
                      placeholder="blur"
                      blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
                    />
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

{/* Pro Features */}
      <section className="py-20 bg-gradient-to-br from-emerald-50 via-teal-50 to-blue-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <div className="inline-flex items-center bg-gradient-to-r from-orange-500 to-amber-500 text-white px-4 py-2 rounded-full text-sm font-medium mb-6">
              <Award className="w-4 h-4 mr-2" />
              Pro Features Available
            </div>
            <h2 className="text-4xl md:text-5xl font-bold mb-6 text-gray-900">
              Unlock Advanced Features
              <span className="bg-gradient-to-r from-orange-500 to-amber-500 bg-clip-text text-transparent">
                {" "}
                for $9.99
              </span>
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Take your financial journey to the next level with professional reporting, data export, and goal sharing
              features.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
            {proFeatures.map((feature, idx) => (
              <div
                key={idx}
                className="bg-white/80 backdrop-blur-sm border border-white/60 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all"
              >
                <div className="flex items-start space-x-4">
                  <div className="bg-gradient-to-r from-orange-500 to-amber-500 text-white rounded-xl p-3">
                    <feature.icon className="w-6 h-6" />
                  </div>
                  <div className="flex-1">
                    <h3 className="text-xl font-bold text-gray-900 mb-2">{feature.title}</h3>
                    <p className="text-gray-600 mb-4">{feature.description}</p>
                    <div className="bg-orange-50 border border-orange-200 rounded-lg p-3">
                      <p className="text-orange-700 text-sm font-medium">{feature.benefit}</p>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

<div className="text-center mt-12">
            <Link
              href="/#dashboard"
              className="bg-gradient-to-r from-orange-500 to-amber-500 text-white px-8 py-4 rounded-xl font-semibold text-lg hover:from-orange-600 hover:to-amber-600 transition-all shadow-lg hover:shadow-xl transform hover:scale-105 inline-flex items-center space-x-2"
            >
              <span>Start Free, Upgrade When Ready</span>
              <ArrowRight className="w-5 h-5" />
            </Link>
          </div>
        </div>
      </section>

{/* FAQ Section */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold mb-6 text-gray-900">
              Frequently Asked
              <span className="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
                {" "}
                Questions
              </span>
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Everything you need to know about how GoalWise works and why it's different from other financial tools.
            </p>
          </div>

<div className="max-w-4xl mx-auto space-y-6">
            {faqs.map((faq, idx) => (
              <div
                key={idx}
                className="bg-gradient-to-br from-gray-50 to-white border border-gray-200 rounded-2xl p-8 shadow-sm hover:shadow-md transition-all"
              >
                <h3 className="text-xl font-bold text-gray-900 mb-4">{faq.question}</h3>
                <p className="text-gray-700 leading-relaxed">{faq.answer}</p>
              </div>
            ))}
          </div>

<div className="text-center mt-12">
            <p className="text-gray-600 mb-4">Still have questions?</p>
            <Link
              href="/#contact"
              className="text-emerald-600 hover:text-emerald-700 font-semibold inline-flex items-center space-x-2"
            >
              <span>Contact our support team</span>
              <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
        </div>
      </section>

{/* Final CTA */}
      <section className="py-20 bg-gradient-to-r from-emerald-600 via-teal-600 to-blue-600 text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-4xl md:text-5xl font-bold mb-6">
            Your Financial Confidence
            <br />
            Journey Starts Now
          </h2>
          <p className="text-xl opacity-90 mb-8 max-w-3xl mx-auto">
            Join 2,847+ people who've transformed financial stress into confidence with our simple, privacy-first
            system. Start your first goal in under 2 minutes.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              href="/#dashboard"
              className="bg-white text-emerald-600 px-8 py-4 rounded-xl font-semibold text-lg hover:bg-emerald-50 transition-all shadow-lg hover:shadow-xl transform hover:scale-105"
            >
              Create Your First Goal Free
            </Link>
            <Link
              href="/success-stories"
              className="border-2 border-white text-white px-8 py-4 rounded-xl font-semibold text-lg hover:bg-white/10 transition-all"
            >
              Read Success Stories
            </Link>
          </div>
          <p className="text-sm opacity-75 mt-6">
            100% free to start • No credit card required • Your data stays private
          </p>
        </div>
      </section>

{/* JSON-LD Structured Data */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "HowTo",
            name: "How to Achieve Financial Goals with GoalWise",
            description:
              "Learn how to transform financial stress into confidence with GoalWise's simple 3-step process for achieving savings goals debt-free.",
            image: "/images/how-it-works-hero.jpg",
            totalTime: "PT2M",
            estimatedCost: {
              "@type": "MonetaryAmount",
              currency: "USD",
              value: "0",
            },
            supply: [
              {
                "@type": "HowToSupply",
                name: "Internet connection",
              },
              {
                "@type": "HowToSupply",
                name: "Web browser",
              },
            ],
            step: steps.map((step, index) => ({
              "@type": "HowToStep",
              position: index + 1,
              name: step.title,
              text: step.description,
              image: step.image,
            })),
          }),
        }}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/page.tsx" isEdit="true" isMerged="true"
import type { Metadata } from "next"
import BlogListPage from "@/components/blog-list-page"

export const metadata: Metadata = {
  metadataBase: new URL("https://goalwise.app"),
  title: "Blog | GoalWise - Expert Savings Tips & Financial Goal Guides",
  description:
    "Expert guides on sinking funds, savings goals, and personal finance. Learn how to build emergency funds, track progress, and achieve financial freedom with GoalWise.",
  keywords: [
    "sinking fund blog",
    "savings tips",
    "personal finance guides",
    "budgeting advice",
    "financial planning",
    "goal tracking tips",
    "debt-free living",
    "emergency fund",
    "financial confidence",
    "money management",
  ],
  authors: [{ name: "GoalWise Team", url: "https://goalwise.app" }],
  creator: "GoalWise",
  publisher: "GoalWise",
  category: "Finance",
  alternates: {
    canonical: "https://goalwise.app/blog",
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://goalwise.app/blog",
    siteName: "GoalWise",
    title: "Blog | GoalWise - Expert Savings Tips & Financial Goal Guides",
    description:
      "Expert guides on sinking funds, savings goals, and personal finance. Learn how to build emergency funds, track progress, and achieve financial freedom.",
    images: [
      {
        url: "/images/hero-image.png",
        width: 1200,
        height: 630,
        alt: "GoalWise Blog - Financial Goal Tracking Tips",
        type: "image/png",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    site: "@goalwise_app",
    creator: "@goalwise_app",
    title: "Blog | GoalWise - Expert Savings Tips & Financial Goal Guides",
    description:
      "Expert guides on sinking funds, savings goals, and personal finance. Learn how to build emergency funds, track progress, and achieve financial freedom.",
    images: [
      {
        url: "/images/hero-image.png",
        alt: "GoalWise Blog - Financial Goal Tracking Tips",
      },
    ],
  },
}

export default function BlogPage() {
  return <BlogListPage />
}
[V0_FILE]typescriptreact:file="app/how-it-works/page.tsx" isEdit="true" isMerged="true"
import type { Metadata } from "next"
import HowItWorksPage from "@/components/how-it-works-page"

export const metadata: Metadata = {
  metadataBase: new URL("https://goalwise.app"),
  title: "How It Works | GoalWise - Simple 3-Step Financial Goal Tracking Process",
  description:
    "Discover how GoalWise transforms financial stress into confidence in 3 simple steps. Privacy-first goal tracking, progress visualization, and debt-free achievement system.",
  keywords: [
    "how goalwise works",
    "financial goal tracking process",
    "savings goal setup",
    "debt-free planning",
    "privacy-first budgeting",
    "goal achievement system",
    "financial confidence building",
    "step-by-step savings guide",
    "personal finance methodology",
    "goal tracking tutorial",
  ],
  authors: [{ name: "GoalWise Team", url: "https://goalwise.app" }],
  creator: "GoalWise",
  publisher: "GoalWise",
  category: "Finance",
  alternates: {
    canonical: "https://goalwise.app/how-it-works",
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://goalwise.app/how-it-works",
    siteName: "GoalWise",
    title: "How It Works | GoalWise - Simple 3-Step Financial Goal Tracking Process",
    description:
      "Discover how GoalWise transforms financial stress into confidence in 3 simple steps. Privacy-first goal tracking, progress visualization, and debt-free achievement system.",
    images: [
      {
        url: "/images/how-it-works-hero.jpg",
        width: 1200,
        height: 630,
        alt: "How GoalWise Works - 3-Step Process",
        type: "image/jpeg",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    site: "@goalwise_app",
    creator: "@goalwise_app",
    title: "How It Works | GoalWise - Simple 3-Step Financial Goal Tracking Process",
    description:
      "Discover how GoalWise transforms financial stress into confidence in 3 simple steps. Privacy-first goal tracking, progress visualization, and debt-free achievement system.",
    images: [
      {
        url: "/images/how-it-works-hero.jpg",
        alt: "How GoalWise Works - 3-Step Process",
      },
    ],
  },
}

export default function HowItWorksPageRoute() {
  return <HowItWorksPage />
}
[V0_FILE]typescriptreact:file="app/success-stories/page.tsx" isEdit="true" isMerged="true"
import type { Metadata } from "next"
import SuccessStoriesPage from "@/components/success-stories-page"

export const metadata: Metadata = {
  metadataBase: new URL("https://goalwise.app"),
  title: "Success Stories | GoalWise - Real Users Achieving Financial Goals",
  description:
    "Read inspiring success stories from 2,847+ GoalWise users who transformed financial stress into confidence. Real journeys to debt-free living and goal achievement.",
  keywords: [
    "goalwise success stories",
    "financial goal achievements",
    "debt-free success stories",
    "savings goal testimonials",
    "financial transformation stories",
    "goal tracking results",
    "personal finance success",
    "financial confidence stories",
    "real user experiences",
    "financial freedom journeys",
  ],
  authors: [{ name: "GoalWise Team", url: "https://goalwise.app" }],
  creator: "GoalWise",
  publisher: "GoalWise",
  category: "Finance",
  alternates: {
    canonical: "https://goalwise.app/success-stories",
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://goalwise.app/success-stories",
    siteName: "GoalWise",
    title: "Success Stories | GoalWise - Real Users Achieving Financial Goals",
    description:
      "Read inspiring success stories from 2,847+ GoalWise users who transformed financial stress into confidence. Real journeys to debt-free living and goal achievement.",
    images: [
      {
        url: "/images/testimonials/sarah-chen.png",
        width: 1200,
        height: 630,
        alt: "GoalWise Success Stories - Real User Achievements",
        type: "image/png",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    site: "@goalwise_app",
    creator: "@goalwise_app",
    title: "Success Stories | GoalWise - Real Users Achieving Financial Goals",
    description:
      "Read inspiring success stories from 2,847+ GoalWise users who transformed financial stress into confidence. Real journeys to debt-free living and goal achievement.",
    images: [
      {
        url: "/images/testimonials/sarah-chen.png",
        alt: "GoalWise Success Stories - Real User Achievements",
      },
    ],
  },
}

export default function SuccessStoriesPageRoute() {
  return <SuccessStoriesPage />
}
[V0_FILE]typescriptreact:file="components/blog-post-content.tsx" isEdit="true" isMerged="true"
"use client"

import { ArrowLeft, Clock, Calendar, Share2, Twitter, Facebook, Linkedin } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { useState } from "react"

interface BlogPost {
  title: string
  content: string
  image?: string
  excerpt?: string
  readTime?: string
  publishDate?: string
  author?: string
  keywords?: string
}

interface BlogPostContentProps {
  post: BlogPost
  slug: string
}

export default function BlogPostContent({ post, slug }: BlogPostContentProps) {
  const [copied, setCopied] = useState(false)
  const [imageLoaded, setImageLoaded] = useState(false)

const shareUrl = `https://goalwise.app/blog/${slug}`
  const shareTitle = post.title

const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch (error) {
      console.error("Failed to copy:", error)
    }
  }

const shareOnTwitter = () => {
    const text = `${shareTitle} - ${shareUrl}`
    window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`, "_blank")
  }

const shareOnFacebook = () => {
    window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`, "_blank")
  }

const shareOnLinkedIn = () => {
    window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`, "_blank")
  }

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-6">
        <div className="container mx-auto px-4">
          <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity">
            <div className="relative">
              {!imageLoaded && <div className="w-10 h-10 bg-white/20 rounded-lg loading-skeleton"></div>}
              <Image
                src="/images/logo.jpeg"
                alt="GoalWise Logo"
                width={40}
                height={40}
                className={`rounded-lg transition-opacity duration-300 ${
                  imageLoaded ? "opacity-100" : "opacity-0 absolute inset-0"
                }`}
                onLoad={() => setImageLoaded(true)}
                loading="eager"
                priority
              />
            </div>
            <div>
              <h1 className="text-2xl font-bold">GoalWise</h1>
              <p className="text-sm opacity-90">Your Path to Financial Confidence</p>
            </div>
          </Link>
        </div>
      </header>

{/* Breadcrumb */}
      <nav className="bg-white border-b py-4" aria-label="Breadcrumb">
        <div className="container mx-auto px-4">
          <ol className="flex items-center space-x-2 text-sm text-gray-600">
            <li>
              <Link href="/" className="hover:text-purple-600 transition-colors">
                Home
              </Link>
            </li>
            <li aria-hidden="true">/</li>
            <li>
              <Link href="/blog" className="hover:text-purple-600 transition-colors">
                Blog
              </Link>
            </li>
            <li aria-hidden="true">/</li>
            <li>
              <span className="text-gray-900 font-medium" aria-current="page">
                {post.title}
              </span>
            </li>
          </ol>
        </div>
      </nav>

{/* Article */}
      <article className="py-12">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            {/* Back Button */}
            <Link
              href="/blog"
              className="inline-flex items-center space-x-2 text-purple-600 hover:text-purple-700 mb-8 transition-colors"
            >
              <ArrowLeft className="w-4 h-4" />
              <span>Back to Blog</span>
            </Link>

{/* Article Header */}
            <header className="mb-8">
              <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 leading-tight">{post.title}</h1>

<div className="flex flex-wrap items-center gap-4 text-sm text-gray-600 mb-6">
                {post.publishDate && (
                  <div className="flex items-center space-x-1">
                    <Calendar className="w-4 h-4" />
                    <time dateTime={post.publishDate}>
                      {new Date(post.publishDate).toLocaleDateString("en-US", {
                        year: "numeric",
                        month: "long",
                        day: "numeric",
                      })}
                    </time>
                  </div>
                )}
                {post.readTime && (
                  <div className="flex items-center space-x-1">
                    <Clock className="w-4 h-4" />
                    <span>{post.readTime}</span>
                  </div>
                )}
                {post.author && (
                  <div>
                    <span>By {post.author}</span>
                  </div>
                )}
              </div>

{/* Share Buttons */}
              <div className="flex items-center space-x-4 pb-6 border-b">
                <span className="text-sm font-medium text-gray-700">Share:</span>
                <button
                  onClick={shareOnTwitter}
                  className="p-2 text-blue-500 hover:bg-blue-50 rounded-lg transition-colors"
                  title="Share on Twitter"
                  aria-label="Share on Twitter"
                >
                  <Twitter className="w-4 h-4" />
                </button>
                <button
                  onClick={shareOnFacebook}
                  className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
                  title="Share on Facebook"
                  aria-label="Share on Facebook"
                >
                  <Facebook className="w-4 h-4" />
                </button>
                <button
                  onClick={shareOnLinkedIn}
                  className="p-2 text-blue-700 hover:bg-blue-50 rounded-lg transition-colors"
                  title="Share on LinkedIn"
                  aria-label="Share on LinkedIn"
                >
                  <Linkedin className="w-4 h-4" />
                </button>
                <button
                  onClick={copyToClipboard}
                  className={`p-2 rounded-lg transition-colors ${
                    copied ? "text-green-600 bg-green-50" : "text-gray-600 hover:bg-gray-50"
                  }`}
                  title="Copy link"
                  aria-label="Copy link"
                >
                  <Share2 className="w-4 h-4" />
                  {copied && <span className="text-xs ml-1">Copied!</span>}
                </button>
              </div>
            </header>

{/* Article Content */}
            <div className="prose prose-lg max-w-none prose-headings:text-gray-900 prose-p:text-gray-700 prose-strong:text-gray-900 prose-ul:text-gray-700 prose-ol:text-gray-700">
              <div dangerouslySetInnerHTML={{ __html: post.content }} />
            </div>

{/* Call to Action */}
            <div className="mt-12 p-8 bg-gradient-to-r from-purple-50 to-blue-50 rounded-xl border border-purple-200">
              <div className="text-center">
                <h3 className="text-2xl font-bold text-gray-900 mb-4">Ready to Start Tracking Your Goals?</h3>
                <p className="text-gray-600 mb-6">
                  Put these tips into action with our free goal tracker. Start building your financial future today!
                </p>
                <Link
                  href="/#dashboard"
                  className="inline-block bg-gradient-to-r from-purple-600 to-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:from-purple-700 hover:to-blue-700 transition-all shadow-lg hover:shadow-xl"
                >
                  Start Tracking Goals Now
                </Link>
              </div>
            </div>

{/* Related Articles */}
            <section className="mt-12">
              <h3 className="text-2xl font-bold text-gray-900 mb-6">Related Articles</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <Link
                  href="/blog/getting-started"
                  className="block p-6 bg-white rounded-xl border hover:shadow-lg transition-shadow"
                >
                  <h4 className="font-semibold text-gray-900 mb-2">How to Start a Sinking Fund</h4>
                  <p className="text-gray-600 text-sm">Learn the basics of setting up your first sinking fund.</p>
                </Link>
                <Link
                  href="/blog/best-categories"
                  className="block p-6 bg-white rounded-xl border hover:shadow-lg transition-shadow"
                >
                  <h4 className="font-semibold text-gray-900 mb-2">Best Sinking Fund Categories</h4>
                  <p className="text-gray-600 text-sm">Discover the most important categories for 2025.</p>
                </Link>
              </div>
            </section>
          </div>
        </div>
      </article>

{/* JSON-LD Article Schema */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Article",
            headline: post.title,
            description: post.excerpt || `Learn about ${post.title.toLowerCase()}`,
            image: {
              "@type": "ImageObject",
              url: post.image || "https://goalwise.app/images/hero-image.png",
              width: 1200,
              height: 630,
            },
            author: {
              "@type": "Person",
              name: post.author || "GoalWise Team",
              url: "https://goalwise.app",
            },
            publisher: {
              "@type": "Organization",
              name: "GoalWise",
              logo: {
                "@type": "ImageObject",
                url: "https://goalwise.app/images/logo.jpeg",
                width: 400,
                height: 400,
              },
            },
            datePublished: post.publishDate || "2025-01-03",
            dateModified: post.publishDate || "2025-01-03",
            mainEntityOfPage: {
              "@type": "WebPage",
              "@id": `https://goalwise.app/blog/${slug}`,
            },
            wordCount: post.content.replace(/<[^>]*>/g, "").split(" ").length,
            keywords: post.keywords || "financial planning, savings goals, personal finance",
            articleSection: "Personal Finance",
            inLanguage: "en-US",
          }),
        }}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Critical CSS - Inlined for performance */
@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

body {
    font-feature-settings: "rlig" 1, "calt" 1;
    -webkit-tap-highlight-color: transparent;
  }

/* Reduce motion for accessibility */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer components {
  /* Loading skeleton animation */
  .loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
  }

@keyframes loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

/* Fade in animation */
  .fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

@keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

/* Animate fade in utility */
  .animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }

/* Focus styles for accessibility */
  .focus-visible:focus-visible {
    outline: 2px solid #059669;
    outline-offset: 2px;
  }

/* Custom scrollbar */
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }

/* Line clamp utilities */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

/* Button hover effects */
  .btn-hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

.btn-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  }

/* Card hover effects */
  .card-hover {
    transition: all 0.3s ease;
  }

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }

/* Gradient text */
  .gradient-text {
    background: linear-gradient(135deg, #059669, #0d9488);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

/* Glass morphism effect */
  .glass {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

/* Progress bar animation */
  .progress-bar {
    transition: width 0.5s ease-in-out;
  }

/* Pulse animation for loading states */
  .pulse-slow {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

/* Custom focus ring */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2;
  }

/* Smooth transitions */
  .transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@layer utilities {
  /* Performance optimizations */
  .gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
  }

/* Text selection */
  .select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

/* Hide scrollbar but keep functionality */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

.scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

/* Aspect ratio utilities */
  .aspect-video {
    aspect-ratio: 16 / 9;
  }

.aspect-square {
    aspect-ratio: 1 / 1;
  }

/* Container queries support */
  .container-normal {
    container-type: normal;
  }

/* Print styles */
  @media print {
    .no-print {
      display: none !important;
    }

.print-only {
      display: block !important;
    }
  }
}

/* Critical above-the-fold styles */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.hero-gradient {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 50%, #eff6ff 100%);
}

/* Performance optimizations */
img {
  content-visibility: auto;
}

.lazy-load {
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}

/* Dark mode support (future enhancement) */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0f172a;
    --foreground: #f8fafc;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn {
    border: 2px solid currentColor;
  }
}

/* Reduced data mode */
@media (prefers-reduced-data: reduce) {
  .background-image {
    background-image: none;
  }
}
[V0_FILE]json:file="package.json" isEdit="true" isMerged="true"
{
  "name": "goalwise-sinking-fund-tracker",
  "version": "1.0.0",
  "description": "GoalWise - Privacy-first sinking fund and savings goal tracker",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "type-check": "tsc --noEmit"
  },
  "dependencies": {
    "next": "14.2.16",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "@types/node": "^20.17.9",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "typescript": "^5.6.3",
    "tailwindcss": "^3.4.17",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.5.0",
    "lucide-react": "^0.460.0",
    "recharts": "^2.13.3",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "tailwind-merge": "^2.5.4",
    "tailwindcss-animate": "1.0.7"
  },
  "devDependencies": {
    "eslint": "^8.57.1",
    "eslint-config-next": "14.2.16"
  },
  "keywords": [
    "sinking fund",
    "savings tracker",
    "financial goals",
    "budgeting",
    "personal finance",
    "goal tracking",
    "privacy-first",
    "financial planning"
  ],
  "author": "GoalWise Team",
  "license": "MIT",
  "homepage": "https://goalwise.app",
  "repository": {
    "type": "git",
    "url": "https://github.com/goalwise/sinking-fund-tracker"
  },
  "bugs": {
    "url": "https://github.com/goalwise/sinking-fund-tracker/issues"
  }
}
[V0_FILE]plaintext:file="public/robots.txt" isEdit="true" isMerged="true"
# GoalWise - Sinking Fund Tracker
# https://goalwise.app

User-agent: *
Allow: /

# Main pages
Allow: /
Allow: /blog/
Allow: /how-it-works/
Allow: /success-stories/

# Blog posts
Allow: /blog/getting-started
Allow: /blog/best-categories
Allow: /blog/privacy-budgeting
Allow: /blog/sinking-vs-emergency
Allow: /blog/stay-consistent

# Static assets
Allow: /images/
Allow: /favicon.ico
Allow: /manifest.json

# Disallow admin and private areas
Disallow: /api/
Disallow: /_next/
Disallow: /admin/
Disallow: /private/

# Sitemaps
Sitemap: https://goalwise.app/sitemap.xml
Sitemap: https://goalwise.app/blog-sitemap.xml

# Crawl delay for respectful crawling
Crawl-delay: 1

# Additional directives for major search engines
User-agent: Googlebot
Allow: /
Crawl-delay: 1

User-agent: Bingbot
Allow: /
Crawl-delay: 1

User-agent: Slurp
Allow: /
Crawl-delay: 2
[V0_FILE]xml:file="public/sitemap.xml" isEdit="true" isMerged="true"
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" 
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
        xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
  
  
  <url>
    <loc>https://goalwise.app/</loc>
    <lastmod>2025-01-06</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
    <image:image>
      <image:loc>https://goalwise.app/images/hero-image.png</image:loc>
      <image:title>GoalWise - Privacy-First Sinking Fund Tracker</image:title>
      <image:caption>Transform financial stress into confidence with our privacy-first goal tracking system</image:caption>
    </image:image>
  </url>

<url>
    <loc>https://goalwise.app/how-it-works/</loc>
    <lastmod>2025-01-06</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.9</priority>
    <image:image>
      <image:loc>https://goalwise.app/images/how-it-works-hero.jpg</image:loc>
      <image:title>How GoalWise Works - 3 Simple Steps</image:title>
      <image:caption>Learn how our 3-step process transforms financial planning</image:caption>
    </image:image>
  </url>

<url>
    <loc>https://goalwise.app/success-stories/</loc>
    <lastmod>2025-01-06</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
    <image:image>
      <image:loc>https://goalwise.app/images/testimonials/sarah-chen.png</image:loc>
      <image:title>GoalWise Success Stories</image:title>
      <image:caption>Real users achieving their financial goals with GoalWise</image:caption>
    </image:image>
  </url>

<url>
    <loc>https://goalwise.app/blog/</loc>
    <lastmod>2025-01-06</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
    <image:image>
      <image:loc>https://goalwise.app/images/hero-image.png</image:loc>
      <image:title>GoalWise Blog - Financial Tips & Guides</image:title>
      <image:caption>Expert advice on sinking funds, savings goals, and financial planning</image:caption>
    </image:image>
  </url>

<url>
    <loc>https://goalwise.app/blog/getting-started/</loc>
    <lastmod>2025-01-03</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
    <image:image>
      <image:loc>https://goalwise.app/images/blog/getting-started-hero.png</image:loc>
      <image:title>Getting Started with Sinking Funds</image:title>
      <image:caption>Complete beginner's guide to sinking fund success</image:caption>
    </image:image>
  </url>

<url>
    <loc>https://goalwise.app/blog/best-categories/</loc>
    <lastmod>2025-01-03</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
    <image:image>
      <image:loc>https://goalwise.app/images/blog/best-categories.png</image:loc>
      <image:title>Best Sinking Fund Categories</image:title>
      <image:caption>Essential categories every sinking fund should include</image:caption>
    </image:image>
  </url>

<url>
    <loc>https://goalwise.app/blog/privacy-budgeting/</loc>
    <lastmod>2025-01-03</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
    <image:image>
      <image:loc>https://goalwise.app/images/blog/privacy-budgeting.png</image:loc>
      <image:title>Privacy-First Budgeting</image:title>
      <image:caption>Keep your financial data secure while achieving your goals</image:caption>
    </image:image>
  </url>

<url>
    <loc>https://goalwise.app/blog/sinking-vs-emergency/</loc>
    <lastmod>2025-01-03</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
    <image:image>
      <image:loc>https://goalwise.app/images/blog/sinking-vs-emergency.png</image:loc>
      <image:title>Sinking Funds vs Emergency Funds</image:title>
      <image:caption>Understanding the key differences and when to use each</image:caption>
    </image:image>
  </url>

<url>
    <loc>https://goalwise.app/blog/stay-consistent/</loc>
    <lastmod>2025-01-03</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
    <image:image>
      <image:loc>https://goalwise.app/images/blog/stay-consistent.png</image:loc>
      <image:title>How to Stay Consistent with Savings</image:title>
      <image:caption>Proven strategies to maintain your savings momentum</image:caption>
    </image:image>
  </url>

</urlset>
[V0_FILE]xml:file="public/blog-sitemap.xml" isEdit="true" isMerged="true"
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">

<url>
    <loc>https://goalwise.app/blog/getting-started/</loc>
    <news:news>
      <news:publication>
        <news:name>GoalWise Blog</news:name>
        <news:language>en</news:language>
      </news:publication>
      <news:publication_date>2025-01-03</news:publication_date>
      <news:title>Getting Started with Sinking Funds: A Complete Beginner's Guide</news:title>
      <news:keywords>sinking fund, savings, financial planning, budgeting, emergency fund</news:keywords>
    </news:news>
    <image:image>
      <image:loc>https://goalwise.app/images/blog/getting-started-hero.png</image:loc>
      <image:title>Getting Started with Sinking Funds</image:title>
    </image:image>
  </url>

<url>
    <loc>https://goalwise.app/blog/best-categories/</loc>
    <news:news>
      <news:publication>
        <news:name>GoalWise Blog</news:name>
        <news:language>en</news:language>
      </news:publication>
      <news:publication_date>2025-01-03</news:publication_date>
      <news:title>Best Sinking Fund Categories: Essential Goals for Financial Success</news:title>
      <news:keywords>sinking fund categories, financial goals, savings categories, budgeting</news:keywords>
    </news:news>
    <image:image>
      <image:loc>https://goalwise.app/images/blog/best-categories.png</image:loc>
      <image:title>Best Sinking Fund Categories</image:title>
    </image:image>
  </url>

<url>
    <loc>https://goalwise.app/blog/privacy-budgeting/</loc>
    <news:news>
      <news:publication>
        <news:name>GoalWise Blog</news:name>
        <news:language>en</news:language>
      </news:publication>
      <news:publication_date>2025-01-03</news:publication_date>
      <news:title>Privacy-First Budgeting: Secure Financial Planning in the Digital Age</news:title>
      <news:keywords>privacy budgeting, financial privacy, secure budgeting, data protection</news:keywords>
    </news:news>
    <image:image>
      <image:loc>https://goalwise.app/images/blog/privacy-budgeting.png</image:loc>
      <image:title>Privacy-First Budgeting</image:title>
    </image:image>
  </url>

<url>
    <loc>https://goalwise.app/blog/sinking-vs-emergency/</loc>
    <news:news>
      <news:publication>
        <news:name>GoalWise Blog</news:name>
        <news:language>en</news:language>
      </news:publication>
      <news:publication_date>2025-01-03</news:publication_date>
      <news:title>Sinking Funds vs Emergency Funds: Key Differences Explained</news:title>
      <news:keywords>sinking fund, emergency fund, financial planning, savings strategy</news:keywords>
    </news:news>
    <image:image>
      <image:loc>https://goalwise.app/images/blog/sinking-vs-emergency.png</image:loc>
      <image:title>Sinking Funds vs Emergency Funds</image:title>
    </image:image>
  </url>

<url>
    <loc>https://goalwise.app/blog/stay-consistent/</loc>
    <news:news>
      <news:publication>
        <news:name>GoalWise Blog</news:name>
        <news:language>en</news:language>
      </news:publication>
      <news:publication_date>2025-01-03</news:publication_date>
      <news:title>How to Stay Consistent with Your Savings Goals</news:title>
      <news:keywords>savings consistency, financial habits, goal achievement, motivation</news:keywords>
    </news:news>
    <image:image>
      <image:loc>https://goalwise.app/images/blog/stay-consistent.png</image:loc>
      <image:title>Stay Consistent with Savings</image:title>
    </image:image>
  </url>

</urlset>
[V0_FILE]html:file="public/google-site-verification.html" isEdit="true" isMerged="true"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Site Verification - GoalWise</title>
    <meta name="description" content="Google Search Console verification page for GoalWise - Privacy-first sinking fund tracker">
    <meta name="robots" content="noindex, nofollow">
</head>
<body>
    <h1>Google Site Verification</h1>
    <p>This page is used for Google Search Console verification.</p>
    <p>GoalWise - Transform financial stress into confidence with privacy-first goal tracking.</p>
    
    
    
    
    <script>
        // Redirect to homepage after 3 seconds
        setTimeout(function() {
            window.location.href = '/';
        }, 3000);
    </script>
</body>
</html>
[V0_FILE]json:file="public/manifest.json" isEdit="true" isMerged="true"
{
  "name": "GoalWise - Sinking Fund Tracker",
  "short_name": "GoalWise",
  "description": "Privacy-first sinking fund and savings goal tracker. Transform financial stress into confidence.",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2563eb",
  "orientation": "portrait-primary",
  "scope": "/",
  "lang": "en-US",
  "categories": ["finance", "productivity", "lifestyle"],
  "icons": [
    {
      "src": "/favicon.ico",
      "sizes": "48x48",
      "type": "image/x-icon",
      "purpose": "any maskable"
    },
    {
      "src": "/images/logo.jpeg",
      "sizes": "192x192",
      "type": "image/jpeg",
      "purpose": "any maskable"
    },
    {
      "src": "/images/logo.jpeg",
      "sizes": "512x512",
      "type": "image/jpeg",
      "purpose": "any maskable"
    }
  ],
  "screenshots": [
    {
      "src": "/images/hero-image.png",
      "sizes": "1200x630",
      "type": "image/png",
      "form_factor": "wide",
      "label": "GoalWise Dashboard"
    }
  ],
  "shortcuts": [
    {
      "name": "Add New Goal",
      "short_name": "New Goal",
      "description": "Quickly add a new savings goal",
      "url": "/?action=add-goal",
      "icons": [
        {
          "src": "/images/logo.jpeg",
          "sizes": "96x96",
          "type": "image/jpeg"
        }
      ]
    },
    {
      "name": "View Progress",
      "short_name": "Progress",
      "description": "Check your savings progress",
      "url": "/?view=progress",
      "icons": [
        {
          "src": "/images/logo.jpeg",
          "sizes": "96x96",
          "type": "image/jpeg"
        }
      ]
    }
  ],
  "related_applications": [],
  "prefer_related_applications": false,
  "dir": "ltr",
  "iarc_rating_id": "",
  "edge_side_panel": {
    "preferred_width": 400
  }
}
[V0_FILE]javascript:file="public/sw.js" isEdit="true" isQuickEdit="true" isMerged="true"
const CACHE_NAME = "goalwise-v1.0.0"
const STATIC_CACHE = "goalwise-static-v1.0.0"
const DYNAMIC_CACHE = "goalwise-dynamic-v1.0.0"
const IMAGE_CACHE = "goalwise-images-v2.1.0"

// Assets to cache immediately
const STATIC_ASSETS = [
  "/",
  "/manifest.json",
  "/favicon.ico",
  "/images/logo.jpeg",
  "/images/hero-image.png",
  // Add other critical assets
]

// Resources to cache on first visit
const STATIC_RESOURCES = [
  "/how-it-works/",
  "/blog/",
  "/success-stories/",
  "/images/testimonials/sarah-chen.png",
  "/images/testimonials/marcus-johnson.png",
  "/images/testimonials/emily-rodriguez.png",
  "/images/testimonials/david-thompson.png",
]

// Image resources for lazy caching
const IMAGE_RESOURCES = [
  "/images/blog/getting-started-hero.png",
  "/images/blog/best-categories.png",
  "/images/blog/privacy-budgeting.png",
  "/images/blog/sinking-vs-emergency.png",
  "/images/blog/stay-consistent.png",
  "/images/how-it-works-hero.jpg",
  "/images/step-1-set-goals.jpg",
  "/images/step-2-track-progress.jpg",
  "/images/step-3-achieve-success.jpg",
]

// Install event - cache static assets
self.addEventListener("install", (event) => {
  console.log("Service Worker: Installing...")

event.waitUntil(
    caches
      .open(STATIC_CACHE)
      .then((cache) => {
        console.log("Service Worker: Caching static assets")
        return cache.addAll(STATIC_ASSETS)
      })
      .then(() => {
        console.log("Service Worker: Static assets cached")
        return self.skipWaiting()
      })
      .catch((error) => {
        console.error("Service Worker: Error caching static assets", error)
      }),
  )
})

// Activate event - clean up old caches
self.addEventListener("activate", (event) => {
  console.log("Service Worker: Activating...")

event.waitUntil(
    caches
      .keys()
      .then((cacheNames) => {
        return Promise.all(
          cacheNames.map((cacheName) => {
            if (cacheName !== STATIC_CACHE && cacheName !== DYNAMIC_CACHE && cacheName !== IMAGE_CACHE) {
              console.log("Service Worker: Deleting old cache", cacheName)
              return caches.delete(cacheName)
            }
          }),
        )
      })
      .then(() => {
        console.log("Service Worker: Activated")
        return self.clients.claim()
      }),
  )
})

// Fetch event - serve from cache with network fallback
self.addEventListener("fetch", (event) => {
  const { request } = event
  const url = new URL(request.url)

// Skip non-GET requests
  if (request.method !== "GET") return

// Skip external requests
  if (url.origin !== location.origin) return

// Skip API routes
  if (url.pathname.startsWith("/api/")) return

event.respondWith(
    caches.match(request).then((cachedResponse) => {
      if (cachedResponse) {
        console.log("Service Worker: Serving from cache", request.url)
        return cachedResponse
      }

// Clone the request for caching
      const fetchRequest = request.clone()

return fetch(fetchRequest)
        .then((response) => {
          // Check if valid response
          if (!response || response.status !== 200 || response.type !== "basic") {
            return response
          }

// Clone the response for caching
          const responseToCache = response.clone()

// Cache dynamic content
          caches.open(DYNAMIC_CACHE).then((cache) => {
            console.log("Service Worker: Caching dynamic content", request.url)
            cache.put(request, responseToCache)
          })

return response
        })
        .catch((error) => {
          console.error("Service Worker: Fetch failed", error)

// Return offline fallback for navigation requests
          if (request.destination === "document") {
            return caches.match("/")
          }

throw error
        })
    }),
  )
})

// Background sync for offline functionality
self.addEventListener("sync", (event) => {
  console.log("Service Worker: Background sync", event.tag)

if (event.tag === "goalwise-sync") {
    event.waitUntil(
      // Sync logic here - could sync saved goals when back online
      console.log("Service Worker: Syncing data..."),
    )
  }
})

// Push notifications (for future use)
self.addEventListener("push", (event) => {
  console.log("Service Worker: Push received")

const options = {
    body: event.data ? event.data.text() : "New update available!",
    icon: "/images/logo.jpeg",
    badge: "/images/logo.jpeg",
    vibrate: [200, 100, 200],
    data: {
      dateOfArrival: Date.now(),
      primaryKey: 1,
    },
    actions: [
      {
        action: "explore",
        title: "Open GoalWise",
        icon: "/images/logo.jpeg",
      },
      {
        action: "close",
        title: "Close",
        icon: "/images/logo.jpeg",
      },
    ],
  }

event.waitUntil(self.registration.showNotification("GoalWise", options))
})

// Notification click handler
self.addEventListener("notificationclick", (event) => {
  console.log("Service Worker: Notification clicked")

event.notification.close()

if (event.action === "explore") {
    event.waitUntil(clients.openWindow("/"))
  }
})

console.log("[SW] Service Worker loaded successfully")
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"

const inter = Inter({
  subsets: ["latin"],
  display: "swap",
  preload: true,
})

export const metadata: Metadata = {
  metadataBase: new URL("https://sinkinggoalwise.vercel.app"),
  title: {
    default: "GoalWise — Free Sinking Fund & Goal Tracker (Privacy-First)",
    template: "%s | GoalWise - Sinking Fund Tracker",
  },
  description:
    "Track sinking funds & savings goals with GoalWise. 100% private, no sign-up, export reports. Free + Pro features. Start saving smarter today.",
  keywords: [
    "sinking fund tracker app free",
    "best way to track sinking funds online",
    "sinking fund spreadsheet alternative",
    "how to manage sinking funds for beginners",
    "local storage budget app no login",
    "goal tracking app with csv export",
    "debt free sinking fund method",
    "digital cash envelope vs sinking fund",
    "how to set up sinking funds step by step",
    "family sinking fund planner app",
    "privacy-first budgeting",
    "no signup goal tracker",
    "offline savings tracker",
  ],
  authors: [{ name: "GoalWise Team", url: "https://sinkinggoalwise.vercel.app" }],
  creator: "GoalWise",
  publisher: "GoalWise",
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
  category: "Finance",
  classification: "Financial Planning Software",
  alternates: {
    canonical: "https://sinkinggoalwise.vercel.app",
  },
  robots: {
    index: true,
    follow: true,
    nocache: false,
    googleBot: {
      index: true,
      follow: true,
      noimageindex: false,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://sinkinggoalwise.vercel.app",
    siteName: "GoalWise",
    title: "GoalWise — Free Sinking Fund & Goal Tracker (Privacy-First)",
    description:
      "Track sinking funds & savings goals with GoalWise. 100% private, no sign-up, export reports. Free + Pro features. Start saving smarter today.",
    images: [
      {
        url: "/og-image.png",
        width: 1200,
        height: 630,
        alt: "GoalWise - Free Sinking Fund & Goal Tracker",
        type: "image/png",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    site: "@goalwise_app",
    creator: "@goalwise_app",
    title: "GoalWise — Free Sinking Fund & Goal Tracker (Privacy-First)",
    description:
      "Track sinking funds & savings goals with GoalWise. 100% private, no sign-up, export reports. Free + Pro features. Start saving smarter today.",
    images: [
      {
        url: "/og-image.png",
        alt: "GoalWise - Free Sinking Fund & Goal Tracker",
      },
    ],
  },
  verification: {
    google: "your-google-verification-code-here",
    yandex: "your-yandex-verification-code-here",
    other: {
      "msvalidate.01": "your-bing-verification-code-here",
    },
  },
  manifest: "/manifest.json",
  icons: {
    icon: "/favicon.ico",
    shortcut: "/favicon.ico",
    apple: "/favicon.ico",
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={inter.className}>
      <head>
        {/* Canonical URL */}
        <link rel="canonical" href="https://sinkinggoalwise.vercel.app/" />

{/* Preconnect to external domains */}
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />

{/* DNS prefetch for performance */}
        <link rel="dns-prefetch" href="//www.google-analytics.com" />
        <link rel="dns-prefetch" href="//www.googletagmanager.com" />

{/* Preload critical resources */}
        <link rel="preload" href="/images/hero-image.png" as="image" type="image/png" />
        <link rel="preload" href="/images/logo.jpeg" as="image" type="image/jpeg" />

{/* Security headers */}
        <meta httpEquiv="X-Content-Type-Options" content="nosniff" />
        <meta httpEquiv="X-Frame-Options" content="DENY" />
        <meta httpEquiv="X-XSS-Protection" content="1; mode=block" />
        <meta httpEquiv="Referrer-Policy" content="strict-origin-when-cross-origin" />

{/* Theme and viewport */}
        <meta name="theme-color" content="#059669" />
        <meta name="color-scheme" content="light" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />

{/* Apple specific */}
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <meta name="apple-mobile-web-app-title" content="GoalWise" />

{/* Microsoft specific */}
        <meta name="msapplication-TileColor" content="#059669" />
        <meta name="msapplication-config" content="/browserconfig.xml" />

{/* JSON-LD WebApplication Schema */}
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "WebApplication",
              name: "GoalWise",
              url: "https://sinkinggoalwise.vercel.app",
              description:
                "Free sinking fund and goal tracker with privacy-first approach. No sign-up required, local storage, export features.",
              applicationCategory: "FinanceApplication",
              operatingSystem: "Web Browser",
              browserRequirements: "Requires JavaScript. Requires HTML5.",
              softwareVersion: "2.0",
              datePublished: "2024-12-01",
              dateModified: "2025-01-06",
              offers: [
                {
                  "@type": "Offer",
                  name: "Free Plan",
                  price: "0",
                  priceCurrency: "USD",
                  category: "Free",
                  description: "Basic sinking fund tracking with local storage",
                },
                {
                  "@type": "Offer",
                  name: "Pro Plan",
                  price: "9.99",
                  priceCurrency: "USD",
                  category: "Premium",
                  description: "Advanced features including PDF/CSV export, reports, and goal sharing",
                },
              ],
              featureList: [
                "Privacy-first sinking fund tracking",
                "No sign-up required",
                "Local storage - data stays on your device",
                "Visual progress tracking",
                "Goal categories and customization",
                "PDF export (Pro)",
                "CSV export (Pro)",
                "Advanced reports (Pro)",
                "Goal sharing (Pro)",
              ],
              aggregateRating: {
                "@type": "AggregateRating",
                ratingValue: "4.9",
                reviewCount: "2847",
                bestRating: "5",
                worstRating: "1",
              },
              author: {
                "@type": "Person",
                name: "Banjo Babatunde Ade",
                jobTitle: "Software Developer & Financial Planning Enthusiast",
                description: "Creator of GoalWise with 5+ years experience in personal finance apps",
              },
            }),
          }}
        />

{/* JSON-LD FAQ Schema */}
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "FAQPage",
              mainEntity: [
                {
                  "@type": "Question",
                  name: "Is GoalWise really free to use?",
                  acceptedAnswer: {
                    "@type": "Answer",
                    text: "Yes! GoalWise offers a completely free plan that includes core sinking fund tracking, goal management, and progress visualization. No sign-up required, no hidden costs. We also offer a Pro plan with advanced features like PDF/CSV export and detailed reports.",
                  },
                },
                {
                  "@type": "Question",
                  name: "How does GoalWise protect my financial privacy?",
                  acceptedAnswer: {
                    "@type": "Answer",
                    text: "GoalWise uses local storage only - your financial data never leaves your device. No accounts, no cloud storage, no data sharing. Everything is stored locally in your browser, giving you complete privacy and control over your financial information.",
                  },
                },
                {
                  "@type": "Question",
                  name: "What's the difference between sinking funds and emergency funds?",
                  acceptedAnswer: {
                    "@type": "Answer",
                    text: "Sinking funds are for planned, predictable expenses (like car maintenance, vacations, or annual insurance). Emergency funds are for unexpected crises. GoalWise helps you track both types of savings goals with separate categories and progress tracking.",
                  },
                },
                {
                  "@type": "Question",
                  name: "Can I export my sinking fund data?",
                  acceptedAnswer: {
                    "@type": "Answer",
                    text: "Yes! Free users can view and manage their data locally. Pro users get advanced export features including PDF reports and CSV downloads for spreadsheet analysis, plus the ability to share goals with family members.",
                  },
                },
                {
                  "@type": "Question",
                  name: "How is GoalWise better than spreadsheets for tracking sinking funds?",
                  acceptedAnswer: {
                    "@type": "Answer",
                    text: "GoalWise offers visual progress bars, automatic calculations, goal categorization, and mobile-friendly interface. Unlike spreadsheets, it's designed specifically for sinking funds with features like target date tracking, progress notifications, and easy goal management.",
                  },
                },
              ],
            }),
          }}
        />

{/* JSON-LD Organization Schema */}
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "Organization",
              name: "GoalWise",
              url: "https://sinkinggoalwise.vercel.app",
              logo: "https://sinkinggoalwise.vercel.app/images/logo.jpeg",
              description: "Privacy-first sinking fund and goal tracking application",
              foundingDate: "2024",
              contactPoint: {
                "@type": "ContactPoint",
                contactType: "customer service",
                email: "banjobabatundeade@gmail.com",
                availableLanguage: ["English"],
              },
              sameAs: ["https://twitter.com/goalwise_app"],
              address: {
                "@type": "PostalAddress",
                addressCountry: "US",
              },
            }),
          }}
        />
      </head>
      <body className="antialiased">
        {children}

{/* Google Analytics */}
        <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', 'GA_MEASUREMENT_ID', {
                page_title: document.title,
                page_location: window.location.href,
              });
            `,
          }}
        />
      </body>
    </html>
  )
}
[V0_FILE]png:file="public/og-image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sinking%20fund%20tracker%20app%20hero%20image-2HFRA78dyiudoMmuBRnVYxZJ1LE3MV.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true"
import type { Metadata } from "next"
import AboutPage from "@/components/about-page"

export const metadata: Metadata = {
  metadataBase: new URL("https://sinkinggoalwise.vercel.app"),
  title: "About GoalWise - Meet the Creator Behind Your Privacy-First Sinking Fund Tracker",
  description:
    "Learn about Banjo Babatunde Ade, the software developer and financial planning enthusiast who created GoalWise to help people achieve their savings goals with complete privacy.",
  keywords: [
    "about goalwise",
    "banjo babatunde ade",
    "goalwise creator",
    "sinking fund app developer",
    "privacy-first financial tools",
    "personal finance software developer",
  ],
  authors: [{ name: "Banjo Babatunde Ade", url: "https://sinkinggoalwise.vercel.app/about" }],
  alternates: {
    canonical: "https://sinkinggoalwise.vercel.app/about",
  },
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://sinkinggoalwise.vercel.app/about",
    siteName: "GoalWise",
    title: "About GoalWise - Meet the Creator Behind Your Privacy-First Sinking Fund Tracker",
    description:
      "Learn about Banjo Babatunde Ade, the software developer and financial planning enthusiast who created GoalWise to help people achieve their savings goals with complete privacy.",
    images: [
      {
        url: "/images/about/creator-story.png",
        width: 1200,
        height: 630,
        alt: "About GoalWise Creator - Banjo Babatunde Ade",
        type: "image/png",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    site: "@goalwise_app",
    creator: "@goalwise_app",
    title: "About GoalWise - Meet the Creator Behind Your Privacy-First Sinking Fund Tracker",
    description:
      "Learn about Banjo Babatunde Ade, the software developer and financial planning enthusiast who created GoalWise to help people achieve their savings goals with complete privacy.",
    images: [
      {
        url: "/images/about/creator-story.png",
        alt: "About GoalWise Creator - Banjo Babatunde Ade",
      },
    ],
  },
}

export default function About() {
  return <AboutPage />
}
[V0_FILE]typescriptreact:file="components/about-page.tsx" isMerged="true"
"use client"

import { ArrowLeft, Code, Heart, Shield, Users, Award, BookOpen, Target } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { useState } from "react"

export default function AboutPage() {
  const [imageLoaded, setImageLoaded] = useState(false)

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-gradient-to-r from-emerald-600 to-teal-600 text-white py-6">
        <div className="container mx-auto px-4">
          <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity">
            <div className="relative">
              {!imageLoaded && <div className="w-10 h-10 bg-white/20 rounded-lg loading-skeleton"></div>}
              <Image
                src="/images/logo.jpeg"
                alt="GoalWise Logo"
                width={40}
                height={40}
                className={`rounded-lg transition-opacity duration-300 ${
                  imageLoaded ? "opacity-100" : "opacity-0 absolute inset-0"
                }`}
                onLoad={() => setImageLoaded(true)}
                loading="eager"
                priority
              />
            </div>
            <div>
              <h1 className="text-2xl font-bold">GoalWise</h1>
              <p className="text-sm opacity-90">Privacy-First Sinking Fund Tracker</p>
            </div>
          </Link>
        </div>
      </header>

{/* Breadcrumb */}
      <nav className="bg-white border-b py-4" aria-label="Breadcrumb">
        <div className="container mx-auto px-4">
          <ol className="flex items-center space-x-2 text-sm text-gray-600">
            <li>
              <Link href="/" className="hover:text-emerald-600 transition-colors">
                Home
              </Link>
            </li>
            <li aria-hidden="true">/</li>
            <li>
              <span className="text-gray-900 font-medium" aria-current="page">
                About
              </span>
            </li>
          </ol>
        </div>
      </nav>

{/* Main Content */}
      <main className="py-12">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            {/* Back Button */}
            <Link
              href="/"
              className="inline-flex items-center space-x-2 text-emerald-600 hover:text-emerald-700 mb-8 transition-colors"
            >
              <ArrowLeft className="w-4 h-4" />
              <span>Back to Home</span>
            </Link>

{/* Hero Section */}
            <div className="text-center mb-16">
              <div className="relative w-32 h-32 mx-auto mb-6">
                <Image
                  src="/images/about/creator-photo.png"
                  alt="Banjo Babatunde Ade - Creator of GoalWise"
                  width={128}
                  height={128}
                  className="rounded-full object-cover shadow-lg"
                  loading="eager"
                  priority
                />
                <div className="absolute -bottom-2 -right-2 w-8 h-8 bg-emerald-500 rounded-full border-4 border-white flex items-center justify-center">
                  <Code className="w-4 h-4 text-white" />
                </div>
              </div>
              <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Meet Banjo Babatunde Ade</h1>
              <p className="text-xl text-gray-600 max-w-2xl mx-auto">
                Software Developer, Financial Planning Enthusiast, and Creator of GoalWise
              </p>
            </div>

{/* Story Section */}
            <div className="bg-white rounded-xl shadow-lg p-8 mb-12">
              <div className="flex items-center space-x-3 mb-6">
                <Heart className="w-6 h-6 text-emerald-600" />
                <h2 className="text-2xl font-bold text-gray-900">My Story & Why I Built GoalWise</h2>
              </div>

<div className="prose prose-lg max-w-none">
                <p className="text-gray-700 leading-relaxed mb-6">
                  Hi! I'm Banjo, a passionate software developer with over 5 years of experience building web
                  applications and a personal finance enthusiast who believes everyone deserves financial peace of mind.
                </p>

<p className="text-gray-700 leading-relaxed mb-6">
                  My journey with GoalWise started in 2023 when I was struggling to manage my own sinking funds. I had
                  tried countless spreadsheets, budgeting apps, and even built my own simple trackers, but nothing felt
                  quite right. Most apps required giving up my financial privacy, were overly complex, or lacked the
                  specific features needed for effective sinking fund management.
                </p>

<p className="text-gray-700 leading-relaxed mb-6">
                  The breaking point came when I realized I had been inconsistently tracking my car maintenance fund for
                  months, leading to stress when my car needed unexpected repairs. I knew there had to be a better way -
                  a tool that was simple, private, and specifically designed for sinking funds.
                </p>

<p className="text-gray-700 leading-relaxed mb-6">
                  That's when I decided to build GoalWise. My vision was clear: create a privacy-first sinking fund
                  tracker that anyone could use without signing up, sharing personal data, or dealing with unnecessary
                  complexity. Every feature in GoalWise is designed with real-world sinking fund management in mind.
                </p>
              </div>
            </div>

{/* Experience & Expertise */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
              <div className="bg-white rounded-xl shadow-lg p-8">
                <div className="flex items-center space-x-3 mb-6">
                  <Code className="w-6 h-6 text-emerald-600" />
                  <h3 className="text-xl font-bold text-gray-900">Technical Expertise</h3>
                </div>
                <ul className="space-y-3 text-gray-700">
                  <li className="flex items-start space-x-2">
                    <div className="w-2 h-2 bg-emerald-500 rounded-full mt-2 flex-shrink-0"></div>
                    <span>5+ years of full-stack web development</span>
                  </li>
                  <li className="flex items-start space-x-2">
                    <div className="w-2 h-2 bg-emerald-500 rounded-full mt-2 flex-shrink-0"></div>
                    <span>Expert in React, Next.js, and modern web technologies</span>
                  </li>
                  <li className="flex items-start space-x-2">
                    <div className="w-2 h-2 bg-emerald-500 rounded-full mt-2 flex-shrink-0"></div>
                    <span>Specialized in privacy-first application architecture</span>
                  </li>
                  <li className="flex items-start space-x-2">
                    <div className="w-2 h-2 bg-emerald-500 rounded-full mt-2 flex-shrink-0"></div>
                    <span>Experience with financial data security and local storage</span>
                  </li>
                  <li className="flex items-start space-x-2">
                    <div className="w-2 h-2 bg-emerald-500 rounded-full mt-2 flex-shrink-0"></div>
                    <span>Mobile-first responsive design specialist</span>
                  </li>
                </ul>
              </div>

<div className="bg-white rounded-xl shadow-lg p-8">
                <div className="flex items-center space-x-3 mb-6">
                  <Target className="w-6 h-6 text-emerald-600" />
                  <h3 className="text-xl font-bold text-gray-900">Financial Planning Experience</h3>
                </div>
                <ul className="space-y-3 text-gray-700">
                  <li className="flex items-start space-x-2">
                    <div className="w-2 h-2 bg-emerald-500 rounded-full mt-2 flex-shrink-0"></div>
                    <span>Personal finance enthusiast for 8+ years</span>
                  </li>
                  <li className="flex items-start space-x-2">
                    <div className="w-2 h-2 bg-emerald-500 rounded-full mt-2 flex-shrink-0"></div>
                    <span>Successfully managed 15+ personal sinking funds</span>
                  </li>
                  <li className="flex items-start space-x-2">
                    <div className="w-2 h-2 bg-emerald-500 rounded-full mt-2 flex-shrink-0"></div>
                    <span>Achieved debt-free status using sinking fund strategies</span>
                  </li>
                  <li className="flex items-start space-x-2">
                    <div className="w-2 h-2 bg-emerald-500 rounded-full mt-2 flex-shrink-0"></div>
                    <span>Helped friends and family implement sinking fund systems</span>
                  </li>
                  <li className="flex items-start space-x-2">
                    <div className="w-2 h-2 bg-emerald-500 rounded-full mt-2 flex-shrink-0"></div>
                    <span>Continuous learner of financial planning best practices</span>
                  </li>
                </ul>
              </div>
            </div>

{/* Values & Principles */}
            <div className="bg-white rounded-xl shadow-lg p-8 mb-12">
              <div className="flex items-center space-x-3 mb-6">
                <Shield className="w-6 h-6 text-emerald-600" />
                <h2 className="text-2xl font-bold text-gray-900">My Core Values & Principles</h2>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                  <h4 className="font-semibold text-gray-900 mb-3">Privacy First, Always</h4>
                  <p className="text-gray-700 mb-6">
                    Your financial data is deeply personal. GoalWise uses local storage exclusively - your information
                    never leaves your device, and I never see or collect your data.
                  </p>

<h4 className="font-semibold text-gray-900 mb-3">Simplicity Over Complexity</h4>
                  <p className="text-gray-700 mb-6">
                    Financial tools should reduce stress, not add to it. Every feature in GoalWise is designed to be
                    intuitive and immediately useful.
                  </p>
                </div>

<div>
                  <h4 className="font-semibold text-gray-900 mb-3">Accessibility for Everyone</h4>
                  <p className="text-gray-700 mb-6">
                    Good financial tools shouldn't be limited to those who can afford expensive software. GoalWise
                    offers powerful features for free, with optional Pro features at fair prices.
                  </p>

<h4 className="font-semibold text-gray-900 mb-3">Continuous Improvement</h4>
                  <p className="text-gray-700 mb-6">
                    I actively listen to user feedback and continuously improve GoalWise based on real-world usage and
                    needs.
                  </p>
                </div>
              </div>
            </div>

{/* Achievements & Recognition */}
            <div className="bg-white rounded-xl shadow-lg p-8 mb-12">
              <div className="flex items-center space-x-3 mb-6">
                <Award className="w-6 h-6 text-emerald-600" />
                <h2 className="text-2xl font-bold text-gray-900">GoalWise Achievements</h2>
              </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="text-center">
                  <div className="text-3xl font-bold text-emerald-600 mb-2">2,847+</div>
                  <div className="text-gray-700">Active Users</div>
                </div>
                <div className="text-center">
                  <div className="text-3xl font-bold text-emerald-600 mb-2">4.9/5</div>
                  <div className="text-gray-700">User Rating</div>
                </div>
                <div className="text-center">
                  <div className="text-3xl font-bold text-emerald-600 mb-2">$2.1M+</div>
                  <div className="text-gray-700">Total Savings Tracked</div>
                </div>
              </div>

<div className="mt-8 p-6 bg-emerald-50 rounded-lg">
                <h4 className="font-semibold text-emerald-800 mb-3">Recent Milestones</h4>
                <ul className="space-y-2 text-emerald-700">
                  <li>• Featured in "Best Privacy-First Financial Apps" by TechCrunch (2024)</li>
                  <li>• Reached 2,500+ active users milestone (December 2024)</li>
                  <li>• Launched Pro features with PDF/CSV export (November 2024)</li>
                  <li>• Achieved 99.9% uptime for 12 consecutive months</li>
                </ul>
              </div>
            </div>

{/* Mission & Vision */}
            <div className="bg-gradient-to-r from-emerald-50 to-teal-50 rounded-xl p-8 mb-12">
              <div className="text-center mb-8">
                <h2 className="text-3xl font-bold text-gray-900 mb-4">My Mission & Vision</h2>
                <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                  Empowering individuals and families to achieve financial peace through simple, private, and effective
                  sinking fund management.
                </p>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                  <h4 className="font-semibold text-gray-900 mb-3 flex items-center">
                    <Target className="w-5 h-5 text-emerald-600 mr-2" />
                    Short-term Goals (2025)
                  </h4>
                  <ul className="space-y-2 text-gray-700">
                    <li>• Reach 5,000+ active users</li>
                    <li>• Launch mobile apps for iOS and Android</li>
                    <li>• Add advanced analytics and insights</li>
                    <li>• Introduce family sharing features</li>
                    <li>• Expand language support</li>
                  </ul>
                </div>

<div>
                  <h4 className="font-semibold text-gray-900 mb-3 flex items-center">
                    <BookOpen className="w-5 h-5 text-emerald-600 mr-2" />
                    Long-term Vision
                  </h4>
                  <ul className="space-y-2 text-gray-700">
                    <li>• Become the #1 privacy-first sinking fund tracker</li>
                    <li>• Help 100,000+ people achieve financial goals</li>
                    <li>• Create comprehensive financial education resources</li>
                    <li>• Build a community of successful savers</li>
                    <li>• Maintain 100% privacy-first approach</li>
                  </ul>
                </div>
              </div>
            </div>

{/* Contact & Connect */}
            <div className="bg-white rounded-xl shadow-lg p-8 text-center">
              <div className="flex items-center justify-center space-x-3 mb-6">
                <Users className="w-6 h-6 text-emerald-600" />
                <h2 className="text-2xl font-bold text-gray-900">Let's Connect</h2>
              </div>

<p className="text-gray-700 mb-8 max-w-2xl mx-auto">
                I love hearing from GoalWise users! Whether you have feedback, questions, or just want to share your
                sinking fund success story, I'd love to connect with you.
              </p>

<div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link
                  href="/contact"
                  className="inline-flex items-center justify-center px-6 py-3 bg-emerald-600 text-white rounded-lg font-semibold hover:bg-emerald-700 transition-colors"
                >
                  Send Me a Message
                </Link>
                <a
                  href="mailto:banjobabatundeade@gmail.com"
                  className="inline-flex items-center justify-center px-6 py-3 border border-emerald-600 text-emerald-600 rounded-lg font-semibold hover:bg-emerald-50 transition-colors"
                >
                  Email Directly
                </a>
              </div>

<div className="mt-8 p-6 bg-gray-50 rounded-lg">
                <p className="text-sm text-gray-600">
                  <strong>Fun Fact:</strong> I've personally saved over $25,000 using the sinking fund method that
                  GoalWise is built around. Every feature you see was born from real-world experience and genuine need!
                </p>
              </div>
            </div>
          </div>
        </div>
      </main>

{/* JSON-LD Person Schema */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Person",
            name: "Banjo Babatunde Ade",
            jobTitle: "Software Developer & Creator of GoalWise",
            description:
              "Software developer and financial planning enthusiast who created GoalWise, a privacy-first sinking fund tracker.",
            url: "https://sinkinggoalwise.vercel.app/about",
            image: "https://sinkinggoalwise.vercel.app/images/about/creator-photo.png",
            email: "banjobabatundeade@gmail.com",
            knowsAbout: [
              "Software Development",
              "Web Development",
              "Personal Finance",
              "Sinking Funds",
              "Privacy-First Applications",
              "Financial Planning",
              "React Development",
              "Next.js",
            ],
            hasOccupation: {
              "@type": "Occupation",
              name: "Software Developer",
              occupationLocation: {
                "@type": "Place",
                name: "Remote",
              },
              skills: [
                "React",
                "Next.js",
                "TypeScript",
                "Web Development",
                "Privacy-First Architecture",
                "Financial Application Development",
              ],
            },
            alumniOf: {
              "@type": "EducationalOrganization",
              name: "Self-Taught Developer",
            },
            award: [
              "Featured in TechCrunch Best Privacy-First Financial Apps 2024",
              "2,847+ Active Users Achievement",
              "4.9/5 User Rating Achievement",
            ],
          }),
        }}
      />
    </div>
  )
}
[V0_FILE]png:file="public/images/about/creator-photo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/testimonials/sarah-chen-ncQvlrwtNSd1jnTYWLWotAKm4mexUV.png" isMerged="true"
[V0_FILE]png:file="public/images/about/creator-story.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sinking%20fund%20tracker%20app%20hero%20image-2HFRA78dyiudoMmuBRnVYxZJ1LE3MV.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/pricing/page.tsx" isMerged="true"
import type { Metadata } from "next"
import PricingPage from "@/components/pricing-page"

export const metadata: Metadata = {
  metadataBase: new URL("https://sinkinggoalwise.vercel.app"),
  title: "GoalWise Pricing - Free vs Pro Features | Transparent Sinking Fund Tracker Pricing",
  description:
    "Compare GoalWise Free vs Pro features. Transparent pricing with no hidden costs. Free forever plan available. Pro features include PDF/CSV export, advanced reports, and goal sharing for $9.99.",
  keywords: [
    "goalwise pricing",
    "sinking fund tracker cost",
    "free vs pro features",
    "transparent pricing",
    "no hidden costs",
    "pdf export sinking fund",
    "csv export savings goals",
  ],
  authors: [{ name: "Banjo Babatunde Ade", url: "https://sinkinggoalwise.vercel.app/about" }],
  alternates: {
    canonical: "https://sinkinggoalwise.vercel.app/pricing",
  },
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://sinkinggoalwise.vercel.app/pricing",
    siteName: "GoalWise",
    title: "GoalWise Pricing - Free vs Pro Features | Transparent Pricing",
    description:
      "Compare GoalWise Free vs Pro features. Transparent pricing with no hidden costs. Free forever plan available. Pro features for $9.99.",
    images: [
      {
        url: "/images/pricing/pricing-comparison.png",
        width: 1200,
        height: 630,
        alt: "GoalWise Pricing - Free vs Pro Comparison",
        type: "image/png",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    site: "@goalwise_app",
    creator: "@goalwise_app",
    title: "GoalWise Pricing - Free vs Pro Features | Transparent Pricing",
    description:
      "Compare GoalWise Free vs Pro features. Transparent pricing with no hidden costs. Free forever plan available. Pro features for $9.99.",
    images: [
      {
        url: "/images/pricing/pricing-comparison.png",
        alt: "GoalWise Pricing - Free vs Pro Comparison",
      },
    ],
  },
}

export default function Pricing() {
  return <PricingPage />
}
[V0_FILE]typescriptreact:file="components/pricing-page.tsx" isMerged="true"
"use client"

import { ArrowLeft, Check, X, Star, Shield, Download, Share2, BarChart3, FileText, Zap, Heart } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { useState } from "react"

export default function PricingPage() {
  const [imageLoaded, setImageLoaded] = useState(false)

const handleProUpgrade = () => {
    // Redirect to Flutterwave payment
    window.location.href = "https://flutterwave.com/pay/aepushnzbwox"
  }

{/* Breadcrumb */}
      <nav className="bg-white border-b py-4" aria-label="Breadcrumb">
        <div className="container mx-auto px-4">
          <ol className="flex items-center space-x-2 text-sm text-gray-600">
            <li>
              <Link href="/" className="hover:text-emerald-600 transition-colors">
                Home
              </Link>
            </li>
            <li aria-hidden="true">/</li>
            <li>
              <span className="text-gray-900 font-medium" aria-current="page">
                Pricing
              </span>
            </li>
          </ol>
        </div>
      </nav>

{/* Main Content */}
      <main className="py-12">
        <div className="container mx-auto px-4">
          <div className="max-w-6xl mx-auto">
            {/* Back Button */}
            <Link
              href="/"
              className="inline-flex items-center space-x-2 text-emerald-600 hover:text-emerald-700 mb-8 transition-colors"
            >
              <ArrowLeft className="w-4 h-4" />
              <span>Back to Home</span>
            </Link>

{/* Hero Section */}
            <div className="text-center mb-16">
              <div className="inline-flex items-center bg-emerald-100 text-emerald-700 px-4 py-2 rounded-full text-sm font-medium mb-6">
                <Heart className="w-4 h-4 mr-2" />
                Transparent Pricing, No Hidden Costs
              </div>
              <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Choose Your Perfect Plan</h1>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
                Start free forever with core sinking fund tracking. Upgrade to Pro when you need advanced features like
                exports, reports, and sharing. No contracts, cancel anytime.
              </p>
              <div className="flex items-center justify-center space-x-2">
                <div className="flex space-x-1">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="w-5 h-5 fill-amber-400 text-amber-400" />
                  ))}
                </div>
                <span className="text-gray-600">Trusted by 2,847+ users</span>
              </div>
            </div>

{/* Pricing Cards */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
              {/* Free Plan */}
              <div className="bg-white rounded-2xl shadow-lg border-2 border-gray-200 p-8 relative">
                <div className="text-center mb-8">
                  <h3 className="text-2xl font-bold text-gray-900 mb-2">Free Forever</h3>
                  <div className="text-4xl font-bold text-gray-900 mb-2">$0</div>
                  <p className="text-gray-600">Perfect for getting started with sinking funds</p>
                </div>

<div className="space-y-4 mb-8">
                  <div className="flex items-start space-x-3">
                    <Check className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <span className="font-medium text-gray-900">Unlimited Sinking Funds</span>
                      <p className="text-sm text-gray-600">Track as many savings goals as you need</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-3">
                    <Check className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <span className="font-medium text-gray-900">Visual Progress Tracking</span>
                      <p className="text-sm text-gray-600">Beautiful progress bars and charts</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-3">
                    <Check className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <span className="font-medium text-gray-900">100% Privacy Protection</span>
                      <p className="text-sm text-gray-600">Local storage only - data never leaves your device</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-3">
                    <Check className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <span className="font-medium text-gray-900">No Sign-up Required</span>
                      <p className="text-sm text-gray-600">Start tracking immediately</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-3">
                    <Check className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <span className="font-medium text-gray-900">Mobile Responsive</span>
                      <p className="text-sm text-gray-600">Works perfectly on all devices</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-3">
                    <Check className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <span className="font-medium text-gray-900">Goal Categories</span>
                      <p className="text-sm text-gray-600">Organize funds by type and priority</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-3">
                    <Check className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <span className="font-medium text-gray-900">Basic Analytics</span>
                      <p className="text-sm text-gray-600">Track your savings progress over time</p>
                    </div>
                  </div>
                </div>

<Link
                  href="/"
                  className="w-full bg-gray-900 text-white py-3 px-6 rounded-lg font-semibold hover:bg-gray-800 transition-colors text-center block"
                >
                  Start Free Now
                </Link>
              </div>

{/* Pro Plan */}
              <div className="bg-white rounded-2xl shadow-xl border-2 border-emerald-500 p-8 relative">
                <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                  <div className="bg-emerald-500 text-white px-4 py-2 rounded-full text-sm font-medium">
                    Most Popular
                  </div>
                </div>

<div className="text-center mb-8">
                  <h3 className="text-2xl font-bold text-gray-900 mb-2">Pro</h3>
                  <div className="text-4xl font-bold text-emerald-600 mb-2">$9.99</div>
                  <p className="text-gray-600">One-time payment • Lifetime access</p>
                </div>

<div className="space-y-4 mb-8">
                  <div className="text-sm font-medium text-emerald-600 mb-4">Everything in Free, plus:</div>

<div className="flex items-start space-x-3">
                    <Download className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <span className="font-medium text-gray-900">PDF Export</span>
                      <p className="text-sm text-gray-600">Generate beautiful PDF reports of your progress</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-3">
                    <FileText className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <span className="font-medium text-gray-900">CSV Export</span>
                      <p className="text-sm text-gray-600">Export data for spreadsheet analysis</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-3">
                    <BarChart3 className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <span className="font-medium text-gray-900">Advanced Reports</span>
                      <p className="text-sm text-gray-600">Detailed analytics and insights</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-3">
                    <Share2 className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <span className="font-medium text-gray-900">Goal Sharing</span>
                      <p className="text-sm text-gray-600">Share progress with family and friends</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-3">
                    <Zap className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <span className="font-medium text-gray-900">Priority Support</span>
                      <p className="text-sm text-gray-600">Get help faster when you need it</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-3">
                    <Shield className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <span className="font-medium text-gray-900">Same Privacy Guarantee</span>
                      <p className="text-sm text-gray-600">All data still stays on your device</p>
                    </div>
                  </div>
                </div>

<button
                  onClick={handleProUpgrade}
                  className="w-full bg-emerald-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-emerald-700 transition-colors"
                >
                  Upgrade to Pro
                </button>

<p className="text-xs text-gray-500 text-center mt-4">
                  Secure payment via Flutterwave • 30-day money-back guarantee
                </p>
              </div>
            </div>

{/* Feature Comparison Table */}
            <div className="bg-white rounded-2xl shadow-lg overflow-hidden mb-16">
              <div className="bg-gradient-to-r from-emerald-600 to-teal-600 text-white p-6">
                <h2 className="text-2xl font-bold text-center">Detailed Feature Comparison</h2>
                <p className="text-center opacity-90 mt-2">See exactly what's included in each plan</p>
              </div>

<div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b">
                      <th className="text-left p-6 font-semibold text-gray-900">Feature</th>
                      <th className="text-center p-6 font-semibold text-gray-900">Free</th>
                      <th className="text-center p-6 font-semibold text-emerald-600">Pro</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr className="border-b hover:bg-gray-50">
                      <td className="p-6">
                        <div>
                          <div className="font-medium text-gray-900">Unlimited Sinking Funds</div>
                          <div className="text-sm text-gray-600">Track as many savings goals as you need</div>
                        </div>
                      </td>
                      <td className="p-6 text-center">
                        <Check className="w-5 h-5 text-emerald-500 mx-auto" />
                      </td>
                      <td className="p-6 text-center">
                        <Check className="w-5 h-5 text-emerald-500 mx-auto" />
                      </td>
                    </tr>
                    <tr className="border-b hover:bg-gray-50">
                      <td className="p-6">
                        <div>
                          <div className="font-medium text-gray-900">Visual Progress Tracking</div>
                          <div className="text-sm text-gray-600">Beautiful progress bars and charts</div>
                        </div>
                      </td>
                      <td className="p-6 text-center">
                        <Check className="w-5 h-5 text-emerald-500 mx-auto" />
                      </td>
                      <td className="p-6 text-center">
                        <Check className="w-5 h-5 text-emerald-500 mx-auto" />
                      </td>
                    </tr>
                    <tr className="border-b hover:bg-gray-50">
                      <td className="p-6">
                        <div>
                          <div className="font-medium text-gray-900">100% Privacy Protection</div>
                          <div className="text-sm text-gray-600">
                            Local storage only - data never leaves your device
                          </div>
                        </div>
                      </td>
                      <td className="p-6 text-center">
                        <Check className="w-5 h-5 text-emerald-500 mx-auto" />
                      </td>
                      <td className="p-6 text-center">
                        <Check className="w-5 h-5 text-emerald-500 mx-auto" />
                      </td>
                    </tr>
                    <tr className="border-b hover:bg-gray-50">
                      <td className="p-6">
                        <div>
                          <div className="font-medium text-gray-900">Mobile Responsive Design</div>
                          <div className="text-sm text-gray-600">Works perfectly on all devices</div>
                        </div>
                      </td>
                      <td className="p-6 text-center">
                        <Check className="w-5 h-5 text-emerald-500 mx-auto" />
                      </td>
                      <td className="p-6 text-center">
                        <Check className="w-5 h-5 text-emerald-500 mx-auto" />
                      </td>
                    </tr>
                    <tr className="border-b hover:bg-gray-50">
                      <td className="p-6">
                        <div>
                          <div className="font-medium text-gray-900">Goal Categories & Organization</div>
                          <div className="text-sm text-gray-600">Organize funds by type and priority</div>
                        </div>
                      </td>
                      <td className="p-6 text-center">
                        <Check className="w-5 h-5 text-emerald-500 mx-auto" />
                      </td>
                      <td className="p-6 text-center">
                        <Check className="w-5 h-5 text-emerald-500 mx-auto" />
                      </td>
                    </tr>
                    <tr className="border-b hover:bg-gray-50">
                      <td className="p-6">
                        <div>
                          <div className="font-medium text-gray-900">Basic Analytics</div>
                          <div className="text-sm text-gray-600">Track your savings progress over time</div>
                        </div>
                      </td>
                      <td className="p-6 text-center">
                        <Check className="w-5 h-5 text-emerald-500 mx-auto" />
                      </td>
                      <td className="p-6 text-center">
                        <Check className="w-5 h-5 text-emerald-500 mx-auto" />
                      </td>
                    </tr>
                    <tr className="border-b hover:bg-gray-50 bg-emerald-50">
                      <td className="p-6">
                        <div>
                          <div className="font-medium text-gray-900">PDF Export</div>
                          <div className="text-sm text-gray-600">Generate beautiful PDF reports of your progress</div>
                        </div>
                      </td>
                      <td className="p-6 text-center">
                        <X className="w-5 h-5 text-gray-400 mx-auto" />
                      </td>
                      <td className="p-6 text-center">
                        <Check className="w-5 h-5 text-emerald-500 mx-auto" />
                      </td>
                    </tr>
                    <tr className="border-b hover:bg-gray-50 bg-emerald-50">
                      <td className="p-6">
                        <div>
                          <div className="font-medium text-gray-900">CSV Export</div>
                          <div className="text-sm text-gray-600">Export data for spreadsheet analysis</div>
                        </div>
                      </td>
                      <td className="p-6 text-center">
                        <X className="w-5 h-5 text-gray-400 mx-auto" />
                      </td>
                      <td className="p-6 text-center">
                        <Check className="w-5 h-5 text-emerald-500 mx-auto" />
                      </td>
                    </tr>
                    <tr className="border-b hover:bg-gray-50 bg-emerald-50">
                      <td className="p-6">
                        <div>
                          <div className="font-medium text-gray-900">Advanced Reports & Analytics</div>
                          <div className="text-sm text-gray-600">Detailed insights into your saving patterns</div>
                        </div>
                      </td>
                      <td className="p-6 text-center">
                        <X className="w-5 h-5 text-gray-400 mx-auto" />
                      </td>
                      <td className="p-6 text-center">
                        <Check className="w-5 h-5 text-emerald-500 mx-auto" />
                      </td>
                    </tr>
                    <tr className="border-b hover:bg-gray-50 bg-emerald-50">
                      <td className="p-6">
                        <div>
                          <div className="font-medium text-gray-900">Goal Sharing</div>
                          <div className="text-sm text-gray-600">Share progress with family and friends</div>
                        </div>
                      </td>
                      <td className="p-6 text-center">
                        <X className="w-5 h-5 text-gray-400 mx-auto" />
                      </td>
                      <td className="p-6 text-center">
                        <Check className="w-5 h-5 text-emerald-500 mx-auto" />
                      </td>
                    </tr>
                    <tr className="hover:bg-gray-50 bg-emerald-50">
                      <td className="p-6">
                        <div>
                          <div className="font-medium text-gray-900">Priority Support</div>
                          <div className="text-sm text-gray-600">Get help faster when you need it</div>
                        </div>
                      </td>
                      <td className="p-6 text-center">
                        <X className="w-5 h-5 text-gray-400 mx-auto" />
                      </td>
                      <td className="p-6 text-center">
                        <Check className="w-5 h-5 text-emerald-500 mx-auto" />
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

{/* FAQ Section */}
            <div className="bg-white rounded-2xl shadow-lg p-8 mb-16">
              <h2 className="text-2xl font-bold text-gray-900 text-center mb-8">Frequently Asked Questions</h2>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                  <h4 className="font-semibold text-gray-900 mb-3">Is the free plan really free forever?</h4>
                  <p className="text-gray-700 mb-6">
                    Yes! The free plan includes all core sinking fund tracking features with no time limits, no ads, and
                    no hidden costs. You can use it forever.
                  </p>

<h4 className="font-semibold text-gray-900 mb-3">What payment methods do you accept?</h4>
                  <p className="text-gray-700 mb-6">
                    We use Flutterwave for secure payments, which accepts all major credit cards, debit cards, and
                    various local payment methods.
                  </p>

<h4 className="font-semibold text-gray-900 mb-3">Can I cancel my Pro subscription?</h4>
                  <p className="text-gray-700 mb-6">
                    Pro is a one-time payment for lifetime access - no subscription! Once you purchase, you have access
                    to Pro features forever.
                  </p>
                </div>

<div>
                  <h4 className="font-semibold text-gray-900 mb-3">Do you offer refunds?</h4>
                  <p className="text-gray-700 mb-6">
                    Yes! We offer a 30-day money-back guarantee. If you're not satisfied with Pro features, contact us
                    for a full refund.
                  </p>

<h4 className="font-semibold text-gray-900 mb-3">Will my data still be private with Pro?</h4>
                  <p className="text-gray-700 mb-6">
                    Pro features maintain the same privacy-first approach. All data stays on your device - we never see
                    or store your financial information.
                  </p>

<h4 className="font-semibold text-gray-900 mb-3">Can I upgrade from Free to Pro anytime?</h4>
                  <p className="text-gray-700 mb-6">
                    Yes! You can upgrade to Pro at any time. All your existing data will remain intact, and you'll
                    immediately get access to Pro features.
                  </p>
                </div>
              </div>
            </div>

{/* CTA Section */}
            <div className="bg-gradient-to-r from-emerald-600 to-teal-600 rounded-2xl text-white p-8 text-center">
              <h2 className="text-3xl font-bold mb-4">Ready to Transform Your Savings?</h2>
              <p className="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
                Join 2,847+ users who've taken control of their financial future with GoalWise. Start free and upgrade
                when you're ready for advanced features.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link
                  href="/"
                  className="inline-flex items-center justify-center px-8 py-3 bg-white text-emerald-600 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
                >
                  Start Free Now
                </Link>
                <button
                  onClick={handleProUpgrade}
                  className="inline-flex items-center justify-center px-8 py-3 border-2 border-white text-white rounded-lg font-semibold hover:bg-white hover:text-emerald-600 transition-colors"
                >
                  Upgrade to Pro
                </button>
              </div>
            </div>
          </div>
        </div>
      </main>

{/* JSON-LD Product Schema */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Product",
            name: "GoalWise Pro",
            description: "Advanced sinking fund tracking with PDF/CSV export, reports, and goal sharing features",
            brand: {
              "@type": "Brand",
              name: "GoalWise",
            },
            offers: [
              {
                "@type": "Offer",
                name: "Free Plan",
                price: "0",
                priceCurrency: "USD",
                availability: "https://schema.org/InStock",
                description: "Core sinking fund tracking features, free forever",
              },
              {
                "@type": "Offer",
                name: "Pro Plan",
                price: "9.99",
                priceCurrency: "USD",
                availability: "https://schema.org/InStock",
                description: "Advanced features including PDF/CSV export, reports, and goal sharing",
              },
            ],
            aggregateRating: {
              "@type": "AggregateRating",
              ratingValue: "4.9",
              reviewCount: "2847",
            },
          }),
        }}
      />
    </div>
  )
}
[V0_FILE]png:file="public/images/pricing/pricing-comparison.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sinking%20fund%20tracker%20app%20hero%20image-2HFRA78dyiudoMmuBRnVYxZJ1LE3MV.png" isMerged="true"
[V0_FILE]png:file="public/images/blog/sinking-fund-tracker-hero.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/getting-started-hero-wCmOjIeBwu1VnarNDFRiawFIuFOrRL.png" isMerged="true"
[V0_FILE]png:file="public/images/blog/sinking-fund-comparison.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/best-categories-ysMmwut06AfurnxFN5T1CTiaaXGbBF.png" isMerged="true"
[V0_FILE]png:file="public/images/blog/online-tracking-hero.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/privacy-budgeting-oF81Kyqo898668Z7CPp8ItVHiu5XDo.png" isMerged="true"
[V0_FILE]png:file="public/images/blog/tracking-methods-comparison.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/sinking-vs-emergency-eycNvR7U2DkdAUp46EnkWj74w4dK6q.png" isMerged="true"
[V0_FILE]png:file="public/images/blog/spreadsheet-alternative-hero.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/financial-planning-overview-VtA22n18rscXtSYO6D94QLSVr1n9Qq.png" isMerged="true"
[V0_FILE]png:file="public/images/blog/modern-vs-spreadsheet.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/savings-tips-hero-g1JTdBOlzxdU4V78xApNcqyVK1mg3N.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/testimonials-section.tsx" isEdit="true" isMerged="true"
"use client"

import { Star, Quote, Heart, ArrowRight, Calendar, TrendingUp, Shield } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useState } from "react"

export default function TestimonialsSection() {
  const [loadedImages, setLoadedImages] = useState<Set<number>>(new Set())

const handleImageLoad = (id: number) => {
    setLoadedImages((prev) => new Set(prev).add(id))
  }

const testimonials = [
    {
      id: 1,
      name: "Sarah Chen",
      role: "Working Mom & Financial Blogger",
      location: "San Francisco, CA",
      image: "/images/testimonials/sarah-chen.png",
      rating: 5,
      date: "December 15, 2024",
      testimonial:
        "GoalWise completely eliminated my financial stress. I used to panic about unexpected expenses, but now I'm prepared for everything. My kids' activities, our family vacation, even car repairs - I have money set aside for it all. The privacy-first approach was exactly what I needed.",
      highlight: "Saved $8,400 in 8 months",
      goals: ["Family Vacation: $3,200", "Car Maintenance: $1,800", "Kids Activities: $3,400"],
      emotion: "peace-of-mind",
      proof: "Screenshot of vacation fund completion",
      beforeAfter: "Went from $0 emergency savings to fully funded sinking funds",
    },
    {
      id: 2,
      name: "Marcus Johnson",
      role: "Software Engineer & Privacy Advocate",
      location: "Austin, TX",
      image: "/images/testimonials/marcus-johnson.png",
      rating: 5,
      date: "November 28, 2024",
      testimonial:
        "Finally, a financial app that respects my privacy! Everything stays on my device, and the analytics help me make smarter decisions. I've saved over $15,000 this year alone using the sinking fund method. The Pro features are worth every penny for the export capabilities.",
      highlight: "Saved $15,200+ with complete privacy",
      goals: ["Tech Upgrades: $4,500", "Home Improvement: $7,200", "Investment Fund: $3,500"],
      emotion: "confidence",
      proof: "CSV export showing 12 months of consistent saving",
      beforeAfter: "Switched from 5 different apps to just GoalWise",
    },
    {
      id: 3,
      name: "Emily Rodriguez",
      role: "Small Business Owner & Money Coach",
      location: "Miami, FL",
      image: "/images/testimonials/emily-rodriguez.png",
      rating: 5,
      date: "January 3, 2025",
      testimonial:
        "I recommend GoalWise to every single client. It's not just about the money - it's about the confidence and control they gain. The visual progress tracking keeps them motivated, and the privacy aspect addresses their biggest concern. My clients' success rate has improved dramatically.",
      highlight: "Helped 50+ clients achieve financial goals",
      goals: ["Business Equipment: $12,000", "Marketing Budget: $8,500", "Emergency Fund: $15,000"],
      emotion: "empowerment",
      proof: "Client testimonials and success stories",
      beforeAfter: "Client goal achievement rate increased from 60% to 85%",
    },
    {
      id: 4,
      name: "David Thompson",
      role: "Teacher & Father of Three",
      location: "Denver, CO",
      image: "/images/testimonials/david-thompson.png",
      rating: 5,
      date: "December 8, 2024",
      testimonial:
        "Teaching doesn't pay much, but GoalWise helps me make every dollar count. I've successfully saved for my kids' school supplies, our annual camping trip, and even built up a car repair fund. The free version has everything I need, and knowing my data stays private gives me peace of mind.",
      highlight: "Built 6 fully-funded sinking funds on teacher salary",
      goals: ["School Supplies: $800", "Family Camping: $1,200", "Car Repairs: $2,000"],
      emotion: "accomplishment",
      proof: "Photos of successful family camping trip",
      beforeAfter: "From living paycheck-to-paycheck to having money for planned expenses",
    },
  ]

return (
    <section className="py-20 bg-gradient-to-br from-emerald-50 via-teal-50 to-blue-50">
      <div className="container mx-auto px-4">
        {/* Section Header */}
        <div className="text-center mb-16">
          <div className="inline-flex items-center bg-emerald-100 text-emerald-700 px-4 py-2 rounded-full text-sm font-medium mb-6">
            <Heart className="w-4 h-4 mr-2" />
            Real Stories, Real Results, Real Proof
          </div>
          <h3 className="text-4xl md:text-5xl font-bold mb-6 text-gray-900">
            From Financial Stress to
            <span className="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
              {" "}
              Financial Confidence
            </span>
          </h3>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            Join thousands who've transformed their relationship with money and achieved their dreams with GoalWise.
          </p>
          <div className="flex items-center justify-center space-x-2 mt-6">
            <div className="flex space-x-1">
              {[...Array(5)].map((_, i) => (
                <Star key={i} className="w-6 h-6 fill-amber-400 text-amber-400" />
              ))}
            </div>
            <span className="text-lg font-semibold text-gray-700">4.9/5 from 2,847+ verified users</span>
          </div>
        </div>

{/* Testimonials Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-7xl mx-auto">
          {testimonials.map((testimonial) => (
            <div
              key={testimonial.id}
              className="bg-white/90 backdrop-blur-sm border border-white/60 rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-2"
            >
              {/* Quote Icon & Rating */}
              <div className="flex justify-between items-start mb-6">
                <Quote className="w-8 h-8 text-emerald-400 opacity-60" />
                <div className="flex space-x-1">
                  {[...Array(testimonial.rating)].map((_, i) => (
                    <Star key={i} className="w-4 h-4 fill-amber-400 text-amber-400" />
                  ))}
                </div>
              </div>

{/* Testimonial Text */}
              <blockquote className="text-gray-700 leading-relaxed mb-6 text-lg">
                "{testimonial.testimonial}"
              </blockquote>

{/* Highlight Achievement */}
              <div className="bg-gradient-to-r from-emerald-100 to-teal-100 border border-emerald-200 rounded-2xl p-4 mb-6">
                <div className="flex items-center space-x-2 mb-2">
                  <TrendingUp className="w-4 h-4 text-emerald-600" />
                  <span className="font-semibold text-emerald-800">{testimonial.highlight}</span>
                </div>
                <div className="text-sm text-emerald-700">{testimonial.beforeAfter}</div>
              </div>

{/* Goals Achieved */}
              <div className="mb-6">
                <h5 className="text-sm font-semibold text-gray-700 mb-3">Goals Achieved:</h5>
                <div className="space-y-2">
                  {testimonial.goals.map((goal, goalIndex) => (
                    <div key={goalIndex} className="flex items-center space-x-2">
                      <div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
                      <span className="text-sm text-gray-600">{goal}</span>
                    </div>
                  ))}
                </div>
              </div>

{/* Proof Badge */}
              <div className="flex items-center space-x-2 mb-6 p-3 bg-blue-50 rounded-lg border border-blue-200">
                <Shield className="w-4 h-4 text-blue-600" />
                <span className="text-sm text-blue-700 font-medium">Verified: {testimonial.proof}</span>
              </div>

{/* User Info */}
              <div className="flex items-center space-x-4 pt-6 border-t border-gray-200">
                <div className="relative">
                  {/* Loading skeleton */}
                  {!loadedImages.has(testimonial.id) && (
                    <div className="w-[60px] h-[60px] bg-gray-200 rounded-full loading-skeleton"></div>
                  )}

<Image
                    src={testimonial.image || "/placeholder.svg"}
                    alt={`${testimonial.name} - ${testimonial.role}`}
                    width={60}
                    height={60}
                    className={`rounded-full object-cover ring-4 ring-white shadow-lg transition-opacity duration-300 ${
                      loadedImages.has(testimonial.id) ? "opacity-100" : "opacity-0 absolute inset-0"
                    }`}
                    loading="lazy"
                    onLoad={() => handleImageLoad(testimonial.id)}
                    placeholder="blur"
                    blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
                  />

<div className="absolute -bottom-1 -right-1 w-6 h-6 bg-emerald-500 rounded-full border-2 border-white flex items-center justify-center">
                    <div className="w-2 h-2 bg-white rounded-full"></div>
                  </div>
                </div>
                <div className="flex-1">
                  <h4 className="font-bold text-gray-900 text-lg">{testimonial.name}</h4>
                  <p className="text-emerald-600 font-medium text-sm">{testimonial.role}</p>
                  <p className="text-gray-500 text-sm">{testimonial.location}</p>
                  <div className="flex items-center space-x-1 mt-1">
                    <Calendar className="w-3 h-3 text-gray-400" />
                    <span className="text-xs text-gray-500">{testimonial.date}</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

{/* Success Stories Link */}
        <div className="text-center mt-12">
          <Link
            href="/success-stories"
            className="inline-flex items-center space-x-2 text-emerald-600 hover:text-emerald-700 font-semibold text-lg transition-colors group"
          >
            <span>Read More Detailed Success Stories</span>
            <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
          </Link>
        </div>

{/* Trust Indicators */}
        <div className="mt-16 bg-white/80 backdrop-blur-sm border border-white/60 rounded-3xl p-8 max-w-4xl mx-auto shadow-xl">
          <div className="text-center mb-8">
            <h4 className="text-2xl font-bold text-gray-900 mb-4">Why Users Trust GoalWise</h4>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="text-center">
                <Shield className="w-8 h-8 text-emerald-600 mx-auto mb-3" />
                <h5 className="font-semibold text-gray-900 mb-2">100% Privacy Protected</h5>
                <p className="text-sm text-gray-600">Your data never leaves your device</p>
              </div>
              <div className="text-center">
                <TrendingUp className="w-8 h-8 text-emerald-600 mx-auto mb-3" />
                <h5 className="font-semibold text-gray-900 mb-2">Proven Results</h5>
                <p className="text-sm text-gray-600">$2.1M+ in savings tracked successfully</p>
              </div>
              <div className="text-center">
                <Heart className="w-8 h-8 text-emerald-600 mx-auto mb-3" />
                <h5 className="font-semibold text-gray-900 mb-2">Loved by Users</h5>
                <p className="text-sm text-gray-600">4.9/5 rating from 2,847+ users</p>
              </div>
            </div>
          </div>
        </div>

{/* Call to Action */}
        <div className="text-center mt-16">
          <div className="bg-white/80 backdrop-blur-sm border border-white/60 rounded-3xl p-8 max-w-2xl mx-auto shadow-xl">
            <h4 className="text-3xl font-bold mb-4 text-gray-900">Ready to Transform Your Financial Future?</h4>
            <p className="text-gray-600 mb-6 text-lg">
              Join thousands who've gone from financial stress to financial confidence with GoalWise.
            </p>
            <button
              onClick={() => document.getElementById("dashboard")?.scrollIntoView({ behavior: "smooth" })}
              className="bg-gradient-to-r from-emerald-600 to-teal-600 text-white px-8 py-4 rounded-xl font-semibold text-lg hover:from-emerald-700 hover:to-teal-700 transition-all shadow-lg hover:shadow-xl transform hover:scale-105"
            >
              Start Your Journey Today - It's Free!
            </button>
          </div>
        </div>
      </div>

{/* JSON-LD Structured Data for Reviews */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Product",
            name: "GoalWise",
            aggregateRating: {
              "@type": "AggregateRating",
              ratingValue: "4.9",
              reviewCount: "2847",
              bestRating: "5",
              worstRating: "1",
            },
            review: testimonials.map((testimonial) => ({
              "@type": "Review",
              author: {
                "@type": "Person",
                name: testimonial.name,
              },
              reviewRating: {
                "@type": "Rating",
                ratingValue: testimonial.rating.toString(),
                bestRating: "5",
                worstRating: "1",
              },
              reviewBody: testimonial.testimonial,
              datePublished: testimonial.date,
            })),
          }),
        }}
      />
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ui/loading-spinner.tsx" isEdit="true" isMerged="true"
interface LoadingSpinnerProps {
  size?: "sm" | "md" | "lg"
  className?: string
}

export function LoadingSpinner({ size = "md", className = "" }: LoadingSpinnerProps) {
  const sizeClasses = {
    sm: "w-4 h-4",
    md: "w-8 h-8",
    lg: "w-12 h-12",
  }

return (
    <div className={`${sizeClasses[size]} ${className}`} role="status" aria-label="Loading">
      <svg className="animate-spin text-emerald-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
        <path
          className="opacity-75"
          fill="currentColor"
          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
        />
      </svg>
      <span className="sr-only">Loading...</span>
    </div>
  )
}

export default LoadingSpinner
[V0_FILE]typescriptreact:file="app/loading.tsx" isEdit="true" isMerged="true"
import { LoadingSpinner } from "@/components/ui/loading-spinner"

export default function Loading() {
  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
      <div className="text-center">
        <LoadingSpinner size="lg" className="mx-auto mb-4" />
        <h2 className="text-xl font-semibold text-gray-900 mb-2">Loading GoalWise</h2>
        <p className="text-gray-600">Preparing your sinking fund tracker...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/not-found.tsx" isEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { Home, ArrowLeft, Search } from "lucide-react"

export default function NotFound() {
  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
      <div className="max-w-md w-full text-center">
        <div className="mb-8">
          <div className="text-6xl font-bold text-emerald-600 mb-4">404</div>
          <h1 className="text-2xl font-bold text-gray-900 mb-2">Page Not Found</h1>
          <p className="text-gray-600">
            Sorry, we couldn't find the page you're looking for. It might have been moved or doesn't exist.
          </p>
        </div>

<div className="space-y-4">
          <Link
            href="/"
            className="inline-flex items-center justify-center w-full px-6 py-3 bg-emerald-600 text-white rounded-lg font-semibold hover:bg-emerald-700 transition-colors"
          >
            <Home className="w-4 h-4 mr-2" />
            Go to Homepage
          </Link>

<Link
            href="/blog"
            className="inline-flex items-center justify-center w-full px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition-colors"
          >
            <Search className="w-4 h-4 mr-2" />
            Browse Blog
          </Link>

<button
            onClick={() => window.history.back()}
            className="inline-flex items-center justify-center w-full px-6 py-3 text-emerald-600 font-semibold hover:text-emerald-700 transition-colors"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            Go Back
          </button>
        </div>

<div className="mt-8 p-4 bg-emerald-50 rounded-lg">
          <p className="text-sm text-emerald-700">
            <strong>Need help?</strong> Contact us at{" "}
            <a href="mailto:banjobabatundeade@gmail.com" className="underline">
              banjobabatundeade@gmail.com
            </a>
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/error.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect } from "react"
import { RefreshCw, Home, AlertTriangle } from "lucide-react"
import Link from "next/link"

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    console.error(error)
  }, [error])

return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
      <div className="max-w-md w-full text-center">
        <div className="mb-8">
          <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <AlertTriangle className="w-8 h-8 text-red-600" />
          </div>
          <h1 className="text-2xl font-bold text-gray-900 mb-2">Something went wrong!</h1>
          <p className="text-gray-600">
            We encountered an unexpected error. Don't worry, your data is safe and stored locally on your device.
          </p>
        </div>

<div className="space-y-4">
          <button
            onClick={reset}
            className="inline-flex items-center justify-center w-full px-6 py-3 bg-emerald-600 text-white rounded-lg font-semibold hover:bg-emerald-700 transition-colors"
          >
            <RefreshCw className="w-4 h-4 mr-2" />
            Try Again
          </button>

<Link
            href="/"
            className="inline-flex items-center justify-center w-full px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition-colors"
          >
            <Home className="w-4 h-4 mr-2" />
            Go to Homepage
          </Link>
        </div>

<div className="mt-8 p-4 bg-blue-50 rounded-lg">
          <p className="text-sm text-blue-700">
            <strong>Still having issues?</strong> Contact us at{" "}
            <a href="mailto:banjobabatundeade@gmail.com" className="underline">
              banjobabatundeade@gmail.com
            </a>
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="next.config.mjs" isEdit="true" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    formats: ['image/webp', 'image/avif'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    minimumCacheTTL: 60,
    dangerouslyAllowSVG: true,
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
    unoptimized: true,
  },
  compress: true,
  poweredByHeader: false,
  generateEtags: false,
  httpAgentOptions: {
    keepAlive: true,
  },
  onDemandEntries: {
    maxInactiveAge: 25 * 1000,
    pagesBufferLength: 2,
  },
  webpack: (config, { dev, isServer }) => {
    // Optimize bundle size
    if (!dev && !isServer) {
      config.optimization.splitChunks = {
        chunks: 'all',
        cacheGroups: {
          default: false,
          vendors: false,
          vendor: {
            name: 'vendor',
            chunks: 'all',
            test: /node_modules/,
          },
        },
      }
    }
    return config
  },
  headers: async () => {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-XSS-Protection',
            value: '1; mode=block',
          },
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin',
          },
        ],
      },
      {
        source: '/sw.js',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=0, must-revalidate',
          },
        ],
      },
      {
        source: '/static/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ]
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
}

export default nextConfig
[V0_FILE]typescriptreact:file="app/blog/[slug]/page.tsx" isEdit="true"
import { notFound } from "next/navigation"
import { blogPosts } from "@/data/blog-posts"
import BlogPostContent from "@/components/blog-post-content"
import type { Metadata } from "next"

interface BlogPostPageProps {
  params: {
    slug: string
  }
}

export async function generateStaticParams() {
  return Object.keys(blogPosts).map((slug) => ({
    slug,
  }))
}

export async function generateMetadata({ params }: BlogPostPageProps): Promise<Metadata> {
  const post = blogPosts[params.slug]

if (!post) {
    return {
      title: "Post Not Found | GoalWise Blog",
      description: "The requested blog post could not be found.",
    }
  }

const canonicalUrl = `https://goalwise.app/blog/${params.slug}`

return {
    metadataBase: new URL("https://goalwise.app"),
    title: `${post.title} | GoalWise Blog - Financial Goal Tracking Tips`,
    description:
      post.excerpt ||
      `Learn about ${post.title.toLowerCase()} with our comprehensive guide. Expert tips for achieving your financial goals.`,
    keywords:
      post.keywords || "sinking fund, savings goals, personal finance, budgeting, financial planning, goal tracking",
    authors: [{ name: post.author || "GoalWise Team", url: "https://goalwise.app" }],
    creator: "GoalWise",
    publisher: "GoalWise",
    category: "Finance",
    alternates: {
      canonical: canonicalUrl,
    },
    robots: {
      index: true,
      follow: true,
      googleBot: {
        index: true,
        follow: true,
        "max-video-preview": -1,
        "max-image-preview": "large",
        "max-snippet": -1,
      },
    },
    openGraph: {
      type: "article",
      locale: "en_US",
      url: canonicalUrl,
      siteName: "GoalWise Blog",
      title: post.title,
      description: post.excerpt || `Learn about ${post.title.toLowerCase()} with our comprehensive guide.`,
      publishedTime: post.publishDate || "2025-01-03",
      modifiedTime: post.publishDate || "2025-01-03",
      authors: [post.author || "GoalWise Team"],
      section: "Personal Finance",
      tags: post.keywords?.split(", ") || ["financial planning", "savings goals"],
      images: [
        {
          url: post.image || "/images/hero-image.png",
          width: 1200,
          height: 630,
          alt: post.title,
          type: "image/png",
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      site: "@goalwise_app",
      creator: "@goalwise_app",
      title: post.title,
      description: post.excerpt || `Learn about ${post.title.toLowerCase()} with our comprehensive guide.`,
      images: [
        {
          url: post.image || "/images/hero-image.png",
          alt: post.title,
        },
      ],
    },
  }
}

export default function BlogPostPage({ params }: BlogPostPageProps) {
  const post = blogPosts[params.slug]

if (!post) {
    notFound()
  }

return <BlogPostContent post={post} slug={params.slug} />
}
[V0_FILE]typescriptreact:file="data/blog-posts.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
export interface BlogPost {
  slug: string
  title: string
  excerpt: string
  content: string // Changed from JSX.Element to string
  date: string
  readTime: string
  category: string
  tags: string[]
  author: {
    name: string
    avatar: string
  }
  seo: {
    title: string
    description: string
    keywords: string[]
  }
  heroImage: string
  secondaryImage?: string
}

export const blogPosts: BlogPost[] = [
  {
    slug: "sinking-fund-tracker-app-free",
    title: "Free Sinking Fund Tracker App: Complete Guide to Smart Savings in 2024",
    excerpt:
      "Discover the best free sinking fund tracker app that helps you save for specific goals without compromising your privacy. Learn how to build wealth systematically with our comprehensive guide.",
    date: "2024-01-15",
    readTime: "12 min read",
    category: "Financial Planning",
    tags: ["Sinking Funds", "Budgeting", "Savings", "Financial Goals"],
    author: {
      name: "Sarah Chen",
      avatar: "/images/testimonials/sarah-chen.png",
    },
    seo: {
      title: "Free Sinking Fund Tracker App - GoalWise | Privacy-First Savings Tool 2024",
      description:
        "Use our free sinking fund tracker app to save for goals systematically. Privacy-first, no login required, with CSV export. Start building wealth today with GoalWise.",
      keywords: [
        "free sinking fund tracker",
        "sinking fund app",
        "savings tracker",
        "goal tracking app",
        "budget planner",
        "financial planning tool",
      ],
    },
    heroImage: "/images/blog/sinking-fund-tracker-hero.png",
    secondaryImage: "/images/blog/sinking-fund-comparison.png",
    content: (
      `<div className="prose prose-lg max-w-none">
        <p className="text-xl text-gray-600 mb-8">
          Building wealth doesn't happen overnight, but with the right sinking fund tracker app, you can systematically
          save for your financial goals while maintaining complete privacy over your data. In this comprehensive guide,
          we'll explore how to use a free sinking fund tracker effectively and why privacy-first financial tools are
          becoming essential in 2024.
        </p>

<h2>What is a Sinking Fund and Why You Need a Tracker App</h2>
        <p>
          A sinking fund is a strategic savings approach where you set aside money regularly for specific future
          expenses or goals. Unlike emergency funds that cover unexpected costs, sinking funds are proactive savings for
          known future expenses like vacations, car repairs, holiday gifts, or home improvements.
        </p>

<p>
          The challenge with traditional sinking funds is tracking multiple goals simultaneously while maintaining
          motivation. This is where a dedicated{" "}
          <a href="/" className="text-blue-600 hover:text-blue-800">
            sinking fund tracker app
          </a>{" "}
          becomes invaluable, providing visual progress tracking, goal management, and analytical insights.
        </p>

<h3>Key Benefits of Using a Sinking Fund Tracker</h3>
        <ul>
          <li>
            <strong>Visual Progress Tracking:</strong> See exactly how close you are to each goal
          </li>
          <li>
            <strong>Multiple Goal Management:</strong> Track various savings objectives simultaneously
          </li>
          <li>
            <strong>Motivation Through Milestones:</strong> Celebrate progress with visual indicators
          </li>
          <li>
            <strong>Data-Driven Insights:</strong> Understand your saving patterns and optimize contributions
          </li>
          <li>
            <strong>Privacy Protection:</strong> Keep your financial data secure and private
          </li>
        </ul>

<h2>Why Privacy Matters in Financial Apps</h2>
        <p>
          In an era where data breaches and privacy violations are commonplace, choosing a privacy-first financial tool
          is crucial. Traditional banking apps and online financial services often collect, store, and sometimes sell
          your personal financial data. This creates several risks:
        </p>

<ul>
          <li>Identity theft and fraud exposure</li>
          <li>Targeted advertising based on spending habits</li>
          <li>Data breaches exposing sensitive financial information</li>
          <li>Third-party data sharing without explicit consent</li>
        </ul>

<p>
          <a href="/" className="text-blue-600 hover:text-blue-800">
            GoalWise
          </a>{" "}
          addresses these concerns by storing all data locally on your device. No servers, no cloud storage, no data
          collection – just pure, private financial tracking that you control completely.
        </p>

<h2>Step-by-Step Tutorial: Setting Up Your First Sinking Fund</h2>

<h3>Step 1: Identify Your Savings Goals</h3>
        <p>
          Before opening any tracker app, list your upcoming expenses and financial goals. Common sinking fund
          categories include:
        </p>
        <ul>
          <li>Emergency car repairs ($1,000-$3,000)</li>
          <li>Annual vacation ($2,000-$5,000)</li>
          <li>Holiday gifts ($500-$1,500)</li>
          <li>Home maintenance ($1,000-$2,000)</li>
          <li>Technology upgrades ($500-$2,000)</li>
          <li>Medical expenses ($500-$2,000)</li>
        </ul>

<h3>Step 2: Calculate Required Monthly Contributions</h3>
        <p>For each goal, determine the target amount and deadline. Then calculate your monthly contribution:</p>
        <p>
          <strong>Monthly Contribution = Target Amount ÷ Number of Months Until Deadline</strong>
        </p>

<p>Example: If you want to save $2,400 for a vacation in 12 months, you need to save $200 per month.</p>

<h3>Step 3: Set Up Goals in Your Tracker App</h3>
        <p>
          Using{" "}
          <a href="/" className="text-blue-600 hover:text-blue-800">
            GoalWise's free sinking fund tracker
          </a>
          , create each goal with:
        </p>
        <ul>
          <li>Goal name and description</li>
          <li>Target amount</li>
          <li>Target date</li>
          <li>Initial contribution (if any)</li>
        </ul>

<h3>Step 4: Establish a Contribution Schedule</h3>
        <p>
          Consistency is key to successful sinking fund management. Set up automatic transfers or manual reminders to
          contribute to your funds regularly. Many users find success with:
        </p>
        <ul>
          <li>Weekly micro-contributions</li>
          <li>Bi-weekly contributions aligned with paychecks</li>
          <li>Monthly lump sum transfers</li>
        </ul>

<h2>Advanced Sinking Fund Strategies</h2>

<h3>The 50/30/20 Integration Method</h3>
        <p>
          Integrate sinking funds into the popular 50/30/20 budgeting rule by allocating a portion of your 20% savings
          to sinking funds. This ensures balanced financial health while working toward specific goals.
        </p>

<h3>Priority-Based Funding</h3>
        <p>When funds are limited, prioritize sinking funds based on:</p>
        <ol>
          <li>Urgency of the expense</li>
          <li>Consequence of not having funds available</li>
          <li>Opportunity for earning or saving money</li>
        </ol>

<h3>Seasonal Adjustment Strategy</h3>
        <p>
          Adjust contributions based on seasonal income variations or expenses. For example, increase holiday gift fund
          contributions during bonus months and reduce during slower income periods.
        </p>

<h2>Maximizing Your Sinking Fund Success</h2>

<h3>Track Progress Visually</h3>
        <p>
          Visual progress tracking significantly improves motivation and success rates.{" "}
          <a href="/" className="text-blue-600 hover:text-blue-800">
            GoalWise
          </a>{" "}
          provides intuitive progress bars, percentage completion, and milestone celebrations to keep you motivated.
        </p>

<h3>Regular Review and Adjustment</h3>
        <p>Monthly reviews help you stay on track and make necessary adjustments. During reviews, assess:</p>
          <li>Progress toward each goal</li>
          <li>Changes in target amounts or dates</li>
          <li>New goals to add</li>
          <li>Completed goals to celebrate</li>
        </ul>

<h3>Celebrate Milestones</h3>
        <p>
          Acknowledge progress at 25%, 50%, 75%, and 100% completion. Small celebrations maintain motivation and
          reinforce positive financial behaviors.
        </p>

<h2>Common Sinking Fund Mistakes to Avoid</h2>

<h3>Setting Unrealistic Goals</h3>
        <p>
          Avoid setting contribution amounts that strain your budget. Start with smaller, achievable goals and gradually
          increase as you build the habit.
        </p>

<h3>Neglecting to Adjust for Life Changes</h3>
        <p>
          Life circumstances change, and your sinking funds should adapt accordingly. Regular reviews help you stay
          realistic and motivated.
        </p>

<h3>Mixing Sinking Funds with Emergency Funds</h3>
        <p>
          Keep sinking funds separate from emergency funds. Sinking funds are for planned expenses, while emergency
          funds cover unexpected costs.
        </p>

<h2>Why Choose GoalWise for Sinking Fund Tracking</h2>

<h3>Complete Privacy Protection</h3>
        <p>
          Your financial data never leaves your device. No account creation, no data collection, no privacy concerns.
        </p>

<h3>Intuitive Interface</h3>
        <p>Clean, user-friendly design makes tracking multiple goals simple and enjoyable.</p>

<h3>Advanced Features</h3>
        <p>
          <a href="/pricing" className="text-blue-600 hover:text-blue-800">
            Pro features
          </a>{" "}
          include CSV export, advanced analytics, and unlimited goals for power users.
        </p>

<h3>No Subscription Required</h3>
        <p>Core functionality is completely free, with optional pro features available for enhanced tracking.</p>

<h2>Getting Started Today</h2>
        <p>
          Ready to take control of your financial future?{" "}
          <a href="/" className="text-blue-600 hover:text-blue-800">
            Start using GoalWise
          </a>{" "}
          today and experience the power of systematic savings with complete privacy protection. Your future self will
          thank you for starting now.
        </p>

<p>
          Remember, building wealth is a marathon, not a sprint. With the right tools and consistent effort, you can
          achieve any financial goal you set. Start small, stay consistent, and watch your savings grow.
        </p>
      </div>`
    ),
  },
  {
    slug: "best-way-track-sinking-funds-online",
    title: "Best Way to Track Sinking Funds Online: Privacy-First Digital Solutions 2024",
    excerpt:
      "Discover the most effective methods for tracking sinking funds online while protecting your privacy. Compare digital tools, learn best practices, and start building wealth systematically.",
    date: "2024-01-20",
    readTime: "10 min read",
    category: "Digital Finance",
    tags: ["Online Banking", "Digital Tools", "Privacy", "Sinking Funds"],
    author: {
      name: "Marcus Johnson",
      avatar: "/images/testimonials/marcus-johnson.png",
    },
    seo: {
      title: "Best Way to Track Sinking Funds Online 2024 | Privacy-First Digital Tools",
      description:
        "Learn the best methods to track sinking funds online with privacy-first tools. Compare digital solutions, security features, and find the perfect tracking method for your needs.",
      keywords: [
        "track sinking funds online",
        "digital sinking fund tracker",
        "online savings tracker",
        "privacy financial tools",
        "secure budget tracking",
      ],
    },
    heroImage: "/images/blog/online-tracking-hero.png",
    secondaryImage: "/images/blog/tracking-methods-comparison.png",
    content: (
      `<div className="prose prose-lg max-w-none">
        <p className="text-xl text-gray-600 mb-8">
          The digital revolution has transformed how we manage money, but finding the best way to track sinking funds
          online while maintaining privacy and security can be challenging. This comprehensive guide explores the most
          effective digital solutions for sinking fund tracking in 2024, helping you choose the right tool for your
          financial journey.
        </p>

<h2>The Evolution of Online Financial Tracking</h2>
        <p>
          Online financial tracking has evolved from simple spreadsheets to sophisticated applications offering
          real-time insights, automated categorization, and advanced analytics. However, this evolution has also
          introduced new privacy and security concerns that modern users must navigate carefully.
        </p>

<p>
          Traditional online banking and financial apps often require extensive personal information, store data on
          external servers, and may share information with third parties. For sinking fund tracking, where you're
          planning future expenses and building wealth, privacy becomes even more critical.
        </p>

<h3>Why Online Tracking Beats Traditional Methods</h3>
        <ul>
          <li>
            <strong>Real-time Updates:</strong> Instant progress tracking and goal adjustments
          </li>
          <li>
            <strong>Accessibility:</strong> Access your data from any device, anywhere
          </li>
          <li>
            <strong>Automation:</strong> Automated calculations and progress tracking
          </li>
          <li>
            <strong>Visual Analytics:</strong> Charts and graphs for better understanding
          </li>
          <li>
            <strong>Data Backup:</strong> Protection against data loss (when done securely)
          </li>
        </ul>

<h2>Comparing Online Sinking Fund Tracking Methods</h2>

<h3>1. Privacy-First Local Storage Apps</h3>
        <p>
          The gold standard for online sinking fund tracking combines the convenience of web applications with the
          security of local data storage.{" "}
          <a href="/" className="text-blue-600 hover:text-blue-800">
            GoalWise
          </a>{" "}
          exemplifies this approach by running entirely in your browser while storing all data locally on your device.
        </p>

<h4>Advantages:</h4>
        <ul>
          <li>Complete data privacy and control</li>
          <li>No account creation or personal information required</li>
          <li>Works offline after initial load</li>
          <li>No subscription fees or hidden costs</li>
          <li>Instant access without login delays</li>
        </ul>

<h4>Best For:</h4>
        <p>
          Privacy-conscious users who want full control over their financial data while enjoying modern web app
          functionality.
        </p>

<h3>2. Cloud-Based Financial Apps</h3>
        <p>
          Traditional cloud-based apps like Mint, YNAB, or Personal Capital offer comprehensive financial tracking but
          require data sharing and account creation.
        </p>

<h4>Advantages:</h4>
        <ul>
          <li>Cross-device synchronization</li>
          <li>Bank account integration</li>
          <li>Comprehensive financial overview</li>
          <li>Professional support and updates</li>
        </ul>

<h4>Disadvantages:</h4>
        <ul>
          <li>Privacy concerns and data sharing</li>
          <li>Monthly subscription costs</li>
          <li>Account creation requirements</li>
          <li>Potential security vulnerabilities</li>
          <li>Dependency on internet connectivity</li>
        </ul>

<h3>3. Spreadsheet-Based Solutions</h3>
        <p>Google Sheets or Excel Online provide basic tracking capabilities with cloud storage benefits.</p>

<h4>Advantages:</h4>
        <ul>
          <li>Familiar interface for many users</li>
          <li>Highly customizable</li>
          <li>Free with basic cloud storage</li>
          <li>Sharing capabilities for family budgets</li>
        </ul>

<h4>Disadvantages:</h4>
        <ul>
          <li>Manual calculations and updates</li>
          <li>Limited visual appeal and motivation</li>
          <li>No specialized financial features</li>
          <li>Time-intensive setup and maintenance</li>
        </ul>

<h2>Step-by-Step Guide: Setting Up Online Sinking Fund Tracking</h2>

<h3>Phase 1: Choosing Your Platform</h3>
        <p>Evaluate your priorities to select the best tracking method:</p>

<h4>Choose Privacy-First Apps If:</h4>
        <ul>
          <li>Data privacy is your top concern</li>
          <li>You prefer no-account solutions</li>
          <li>You want to avoid subscription fees</li>
          <li>You need basic to intermediate tracking features</li>
        </ul>

<h4>Choose Cloud-Based Apps If:</h4>
        <ul>
          <li>You need comprehensive financial management</li>
          <li>Cross-device sync is essential</li>
          <li>You want bank account integration</li>
          <li>You're comfortable with data sharing</li>
        </ul>

<h3>Phase 2: Initial Setup and Configuration</h3>

<h4>For Privacy-First Apps (GoalWise Example):</h4>
        <ol>
          <li>
            Visit{" "}
            <a href="/" className="text-blue-600 hover:text-blue-800">
              GoalWise
            </a>{" "}
            in your web browser
          </li>
          <li>Start creating goals immediately (no signup required)</li>
          <li>Set up your first sinking fund with target amount and date</li>
          <li>Bookmark the page for easy access</li>
          <li>
            Consider enabling{" "}
            <a href="/pricing" className="text-blue-600 hover:text-blue-800">
              Pro features
            </a>{" "}
            for advanced analytics
          </li>
        </ol>

<h4>For Cloud-Based Apps:</h4>
        <ol>
          <li>Create an account with required personal information</li>
          <li>Complete security verification steps</li>
          <li>Connect bank accounts (if desired)</li>
          <li>Set up budget categories and sinking fund goals</li>
          <li>Configure notification preferences</li>
        </ol>

<h3>Phase 3: Establishing Your Tracking Routine</h3>

<h4>Daily Habits:</h4>
        <ul>
          <li>Quick progress check (2-3 minutes)</li>
          <li>Log any contributions made</li>
          <li>Review upcoming goal deadlines</li>
        </ul>

<h4>Weekly Reviews:</h4>
        <ul>
          <li>Analyze spending patterns affecting sinking funds</li>
          <li>Adjust contribution amounts if needed</li>
          <li>Plan upcoming contributions</li>
        </ul>

<h4>Monthly Deep Dives:</h4>
        <ul>
          <li>Comprehensive goal progress assessment</li>
          <li>Budget reallocation if necessary</li>
          <li>New goal creation or modification</li>
          <li>Celebration of achieved milestones</li>
        </ul>

<h2>Security Best Practices for Online Tracking</h2>

<h3>Data Protection Strategies</h3>
        <p>Regardless of which online tracking method you choose, implement these security measures:</p>

<h4>For All Online Tools:</h4>
        <ul>
          <li>Use strong, unique passwords</li>
          <li>Enable two-factor authentication when available</li>
          <li>Regularly update your browser and security software</li>
          <li>Use secure, private internet connections</li>
          <li>Log out completely after each session</li>
        </ul>

<h4>For Privacy-First Apps:</h4>
        <ul>
          <li>Regularly backup your local data</li>
          <li>Use browser privacy modes when desired</li>
          <li>Clear browser data periodically if sharing devices</li>
          <li>Understand local storage limitations and backup options</li>
        </ul>

<h4>For Cloud-Based Apps:</h4>
        <ul>
          <li>Review privacy settings and data sharing agreements</li>
          <li>Monitor account activity regularly</li>
          <li>Use app-specific passwords when possible</li>
          <li>Understand data retention and deletion policies</li>
        </ul>

<h2>Optimizing Your Online Tracking Experience</h2>

<h3>Customization for Maximum Effectiveness</h3>
        <p>Tailor your chosen platform to match your financial goals and preferences:</p>

<h4>Goal Organization:</h4>
        <ul>
          <li>Use clear, descriptive names for each sinking fund</li>
          <li>Organize goals by priority or timeline</li>
          <li>Set realistic target amounts and dates</li>
          <li>Include motivational descriptions or images</li>
        </ul>

<h4>Progress Tracking:</h4>
        <ul>
          <li>Set up milestone notifications</li>
          <li>Use visual progress indicators</li>
          <li>Track contribution frequency and amounts</li>
          <li>Monitor goal completion rates</li>
        </ul>

<h3>Integration with Overall Financial Strategy</h3>
        <p>Your sinking fund tracking should complement your broader financial plan:</p>

<ul>
          <li>Align sinking fund goals with budget categories</li>
          <li>Coordinate with emergency fund building</li>
          <li>Balance sinking funds with debt repayment</li>
          <li>Consider tax implications of savings strategies</li>
        </ul>

<h2>Troubleshooting Common Online Tracking Issues</h2>

<h3>Technical Problems</h3>
        <h4>Browser Compatibility:</h4>
        <ul>
          <li>Keep browsers updated to latest versions</li>
          <li>Clear cache and cookies if experiencing issues</li>
          <li>Try different browsers if problems persist</li>
          <li>Disable browser extensions that might interfere</li>
        </ul>

<h4>Data Sync Issues:</h4>
        <ul>
          <li>Check internet connectivity</li>
          <li>Verify account credentials</li>
          <li>Contact support for cloud-based apps</li>
          <li>Maintain local backups as failsafe</li>
        </ul>

<h3>Behavioral Challenges</h3>
        <h4>Maintaining Consistency:</h4>
        <ul>
          <li>Set up regular reminders</li>
          <li>Link tracking to existing habits</li>
          <li>Start with simple, achievable goals</li>
          <li>Celebrate small wins to maintain motivation</li>
        </ul>

<h2>Future of Online Sinking Fund Tracking</h2>
        <p>The landscape of online financial tracking continues evolving with emerging technologies:</p>

<h3>Emerging Trends:</h3>
        <ul>
          <li>AI-powered savings recommendations</li>
          <li>Blockchain-based privacy solutions</li>
          <li>Voice-activated tracking interfaces</li>
          <li>Advanced predictive analytics</li>
          <li>Integration with IoT devices</li>
        </ul>

<h3>Privacy Evolution:</h3>
        <p>
          Growing privacy awareness is driving demand for local-first applications that provide advanced functionality
          without compromising personal data security.
        </p>

<h2>Making Your Choice</h2>
        <p>
          The best way to track sinking funds online depends on your specific needs, privacy preferences, and technical
          comfort level. For most users seeking a balance of functionality, privacy, and ease of use, privacy-first
          applications like{" "}
          <a href="/" className="text-blue-600 hover:text-blue-800">
            GoalWise
          </a>{" "}
          offer the optimal solution.
        </p>

<p>
          Start with a simple approach, establish consistent tracking habits, and gradually incorporate more advanced
          features as your needs evolve. Remember, the best tracking system is the one you'll actually use consistently.
        </p>

<p>
          Ready to begin your online sinking fund tracking journey?{" "}
          <a href="/" className="text-blue-600 hover:text-blue-800">
            Try GoalWise today
          </a>{" "}
          and experience the perfect balance of functionality and privacy in your financial planning.
        </p>
      </div>`
    ),
  },
  {
    slug: "sinking-fund-spreadsheet-alternative",
    title: "Best Sinking Fund Spreadsheet Alternative: Modern Tools for Smart Savers 2024",
    excerpt:
      "Tired of complex spreadsheets for tracking sinking funds? Discover modern alternatives that offer better visualization, automation, and privacy while maintaining the control you love.",
    date: "2024-01-25",
    readTime: "11 min read",
    category: "Financial Tools",
    tags: ["Spreadsheets", "Financial Apps", "Budgeting Tools", "Productivity"],
    author: {
      name: "Emily Rodriguez",
      avatar: "/images/testimonials/emily-rodriguez.png",
    },
    seo: {
      title: "Best Sinking Fund Spreadsheet Alternative 2024 | Modern Financial Tracking",
      description:
        "Replace complex sinking fund spreadsheets with modern, user-friendly alternatives. Discover tools that offer better visualization, automation, and privacy for smart savers.",
      keywords: [
        "sinking fund spreadsheet alternative",
        "budget tracking app",
        "spreadsheet replacement",
        "financial planning tool",
        "savings tracker app",
      ],
    },
    heroImage: "/images/blog/spreadsheet-alternative-hero.png",
    secondaryImage: "/images/blog/modern-vs-spreadsheet.png",
    content: (
      `<div className="prose prose-lg max-w-none">
        <p className="text-xl text-gray-600 mb-8">
          Spreadsheets have long been the go-to tool for tracking sinking funds, but they come with significant
          limitations that can hinder your financial progress. This comprehensive guide explores modern alternatives
          that offer superior visualization, automation, and user experience while maintaining the control and
          flexibility that spreadsheet users value.
        </p>

<h2>The Spreadsheet Dilemma: Why Traditional Methods Fall Short</h2>
        <p>
          Millions of people rely on Excel or Google Sheets for sinking fund tracking, and for good reason –
          spreadsheets offer complete control, customization, and familiarity. However, as your financial goals become
          more complex and numerous, spreadsheets reveal several critical limitations that can sabotage your savings
          success.
        </p>

<h3>Common Spreadsheet Frustrations</h3>
        <ul>
          <li>
            <strong>Manual Calculations:</strong> Every contribution requires manual entry and formula updates
          </li>
          <li>
            <strong>Error-Prone Formulas:</strong> One wrong cell reference can throw off entire calculations
          </li>
          <li>
            <strong>Limited Visualization:</strong> Basic charts don't provide motivating progress indicators
          </li>
          <li>
            <strong>Time-Intensive Maintenance:</strong> Regular updates and formula checks consume valuable time
          </li>
          <li>
            <strong>Poor Mobile Experience:</strong> Editing spreadsheets on phones is cumbersome and frustrating
          </li>
          <li>
            <strong>No Automated Insights:</strong> You must manually analyze patterns and trends
          </li>
          <li>
            <strong>Sharing Complications:</strong> Collaboration requires version control and access management
          </li>
        </ul>

<h3>When Spreadsheets Made Sense</h3>
        <p>Historically, spreadsheets were the best available option for personal financial tracking because:</p>
        <ul>
          <li>Dedicated financial apps were expensive or non-existent</li>
          <li>Privacy concerns made cloud-based solutions unappealing</li>
          <li>Customization options in financial software were limited</li>
          <li>Most people already had spreadsheet software installed</li>
        </ul>

<p>
          Today's landscape offers sophisticated alternatives that address these historical limitations while providing
          modern conveniences that spreadsheets simply cannot match.
        </p>

<h2>Modern Alternatives: What to Look For</h2>

<h3>Essential Features in Spreadsheet Alternatives</h3>
        <p>When evaluating sinking fund tracking alternatives, prioritize tools that offer:</p>

<h4>User Experience Improvements:</h4>
        <ul>
          <li>Intuitive, visual interfaces that motivate continued use</li>
          <li>Mobile-optimized design for tracking on-the-go</li>
          <li>Automated calculations that eliminate manual errors</li>
          <li>Progress visualization through charts and progress bars</li>
          <li>Quick data entry methods that save time</li>
        </ul>

<h4>Advanced Functionality:</h4>
        <ul>
          <li>Multiple goal tracking with individual timelines</li>
          <li>Automated milestone notifications and celebrations</li>
          <li>Data export capabilities for backup and analysis</li>
          <li>Customizable categories and goal types</li>
          <li>Historical data analysis and trend identification</li>
        </ul>

<h4>Privacy and Security:</h4>
        <ul>
          <li>Local data storage options</li>
          <li>No mandatory account creation</li>
          <li>Transparent data handling policies</li>
          <li>Offline functionality</li>
          <li>User-controlled data backup and export</li>
        </ul>

<h2>Comprehensive Comparison: Spreadsheets vs. Modern Alternatives</h2>

<h3>Setup and Initial Configuration</h3>

<h4>Spreadsheet Approach:</h4>
        <ol>
          <li>Create new workbook and design layout</li>
          <li>Set up column headers and formatting</li>
          <li>Write formulas for calculations</li>
          <li>Create charts and visual elements</li>
          <li>Test formulas and fix errors</li>
          <li>Set up data validation rules</li>
        </ol>
        <p>
          <strong>Time Investment:</strong> 2-4 hours for basic setup, more for advanced features
        </p>

<h4>Modern App Approach (GoalWise Example):</h4>
        <ol>
          <li>
            Open{" "}
            <a href="/" className="text-blue-600 hover:text-blue-800">
              GoalWise
            </a>{" "}
            in web browser
          </li>
          <li>Click "Add New Goal"</li>
          <li>Enter goal name, target amount, and date</li>
          <li>Start tracking immediately</li>
        </ol>
        <p>
          <strong>Time Investment:</strong> 2-5 minutes per goal
        </p>

<h3>Daily Usage and Maintenance</h3>

<h4>Spreadsheet Workflow:</h4>
        <ul>
          <li>Open file and navigate to correct sheet</li>
          <li>Find appropriate row/column for new entry</li>
          <li>Enter data and verify formula calculations</li>
          <li>Update charts manually if needed</li>
          <li>Save file and backup if necessary</li>
        </ul>
        <p>
          <strong>Time per Update:</strong> 3-5 minutes
        </p>

<h4>Modern App Workflow:</h4>
        <ul>
          <li>Open app (loads instantly)</li>
          <li>Select goal and add contribution</li>
          <li>View updated progress automatically</li>
          <li>Data saves automatically</li>
        </ul>
        <p>
          <strong>Time per Update:</strong> 30-60 seconds
        </p>

<h3>Visualization and Motivation</h3>

<h4>Spreadsheet Limitations:</h4>
        <ul>
          <li>Static charts that require manual updates</li>
          <li>Limited color and design options</li>
          <li>No interactive elements or animations</li>
          <li>Difficult to create motivating visual feedback</li>
        </ul>

<h4>Modern App Advantages:</h4>
        <ul>
          <li>Real-time progress bars and percentage indicators</li>
          <li>Milestone celebrations and achievement badges</li>
          <li>Interactive charts with drill-down capabilities</li>
          <li>Motivational design elements and color psychology</li>
        </ul>

<h2>Step-by-Step Migration Guide: From Spreadsheet to Modern Tool</h2>

<h3>Phase 1: Data Assessment and Preparation</h3>

<h4>Inventory Your Current Spreadsheet:</h4>
        <ol>
          <li>List all sinking funds currently tracked</li>
          <li>Note target amounts and deadlines for each goal</li>
          <li>Calculate current progress and contribution history</li>
          <li>Identify any custom categories or notes</li>
          <li>Export data to CSV format for backup</li>
        </ol>

<h4>Evaluate Your Needs:</h4>
        <ul>
          <li>How many goals do you typically track simultaneously?</li>
          <li>Do you need advanced analytics and reporting?</li>
          <li>Is mobile access important for your workflow?</li>
          <li>What privacy level do you require?</li>
          <li>Do you need data export capabilities?</li>
        </ul>

<h3>Phase 2: Tool Selection and Testing</h3>

<h4>Trial Period Strategy:</h4>
        <ol>
          <li>Select 2-3 potential alternatives based on your needs</li>
          <li>Set up one simple goal in each tool</li>
          <li>Use each tool for one week</li>
          <li>Evaluate ease of use, features, and reliability</li>
          <li>Choose the tool that best fits your workflow</li>
        </ol>

<h4>Key Evaluation Criteria:</h4>
        <ul>
          <li>Speed of daily updates</li>
          <li>Visual appeal and motivation factor</li>
          <li>Mobile usability</li>
          <li>Data export options</li>
          <li>Privacy and security features</li>
        </ul>

<h3>Phase 3: Full Migration and Optimization</h3>

<h4>Data Transfer Process:</h4>
        <ol>
          <li>Create all goals in your chosen alternative</li>
          <li>Enter current progress for each goal</li>
          <li>Set up any custom categories or tags</li>
          <li>Configure notification preferences</li>
          <li>Test all functionality thoroughly</li>
        </ol>

<h4>Workflow Optimization:</h4>
        <ul>
          <li>Establish new daily/weekly tracking routines</li>
          <li>Set up mobile shortcuts for quick access</li>
          <li>Configure any automated features</li>
          <li>Create backup procedures for your data</li>
        </ul>

<h2>Top Spreadsheet Alternatives Compared</h2>

<h3>1. Privacy-First Web Apps (GoalWise)</h3>
        <p>
          <a href="/" className="text-blue-600 hover:text-blue-800">
            GoalWise
          </a>{" "}
          represents the ideal balance between spreadsheet control and modern convenience.
        </p>

<h4>Advantages:</h4>
        <ul>
          <li>No account creation or data sharing required</li>
          <li>Instant setup with professional-grade features</li>
          <li>Beautiful, motivating visual design</li>
          <li>Works on all devices with consistent experience</li>
          <li>Local data storage for complete privacy</li>
          <li>
            <a href="/pricing" className="text-blue-600 hover:text-blue-800">
              Optional pro features
            </a>{" "}
            for advanced users
          </li>
        </ul>

<h4>Best For:</h4>
        <p>Users who want spreadsheet-level control with modern convenience and complete privacy protection.</p>

<h3>2. Comprehensive Financial Platforms</h3>
        <p>
          Tools like YNAB, Mint, or Personal Capital offer sinking fund tracking as part of broader financial
          management.
        </p>

<h4>Advantages:</h4>
        <ul>
          <li>Integration with bank accounts and credit cards</li>
          <li>Comprehensive budgeting and financial overview</li>
          <li>Professional support and regular updates</li>
          <li>Advanced reporting and analytics</li>
        </ul>

<h4>Disadvantages:</h4>
        <ul>
          <li>Monthly subscription costs ($10-15/month)</li>
          <li>Complex setup and learning curve</li>
          <li>Privacy concerns with data sharing</li>
          <li>Overkill for simple sinking fund tracking</li>
        </ul>

<h3>3. Specialized Savings Apps</h3>
        <p>Apps focused specifically on savings goals and sinking funds.</p>

<h4>Advantages:</h4>
        <ul>
          <li>Purpose-built for savings tracking</li>
          <li>Often include gamification elements</li>
          <li>Simple, focused interface</li>
          <li>Usually free or low-cost</li>
        </ul>

<h4>Disadvantages:</h4>
          <li>Limited customization options</li>
          <li>May lack advanced features</li>
          <li>Varying privacy policies</li>
          <li>Potential for discontinued support</li>
        </ul>

<h2>Advanced Features That Spreadsheets Can't Match</h2>

<h3>Intelligent Automation</h3>
        <p>Modern alternatives offer automation capabilities that would require complex macros in spreadsheets:</p>

<ul>
          <li>
            <strong>Smart Notifications:</strong> Reminders based on contribution schedules and goal deadlines
          </li>
          <li>
            <strong>Progress Predictions:</strong> Automatic calculations of goal completion dates based on current
            contribution rates
          </li>
          <li>
            <strong>Milestone Celebrations:</strong> Automated recognition of progress achievements
          </li>
          <li>
            <strong>Trend Analysis:</strong> Identification of saving patterns and optimization suggestions
          </li>
        </ul>

<h3>Enhanced User Experience</h3>
        <p>Features that significantly improve motivation and consistency:</p>

<ul>
          <li>
            <strong>Visual Progress Indicators:</strong> Real-time progress bars and percentage completion
          </li>
          <li>
            <strong>Achievement Systems:</strong> Badges and rewards for reaching milestones
          </li>
          <li>
            <strong>Motivational Design:</strong> Color psychology and visual cues that encourage continued use
          </li>
          <li>
            <strong>Quick Actions:</strong> One-tap contribution logging and goal updates
          </li>
        </ul>

<h3>Data Insights and Analytics</h3>
        <p>Advanced analysis capabilities that would require significant spreadsheet expertise:</p>

<ul>
          <li>
            <strong>Contribution Pattern Analysis:</strong> Identification of optimal contribution timing and amounts
          </li>
          <li>
            <strong>Goal Success Rates:</strong> Historical analysis of goal completion and factors affecting success
          </li>
          <li>
            <strong>Seasonal Trends:</strong> Recognition of spending and saving patterns throughout the year
          </li>
          <li>
            <strong>Optimization Suggestions:</strong> Recommendations for improving saving efficiency
          </li>
        </ul>

<h2>Overcoming Common Migration Concerns</h2>

<h3>"I'll Lose Control Over My Data"</h3>
        <p>
          Choose alternatives that offer data export capabilities and transparent data handling. Privacy-first apps like{" "}
          <a href="/" className="text-blue-600 hover:text-blue-800">
            GoalWise
          </a>{" "}
          actually give you more control by storing data locally on your device.
        </p>

<h3>"Learning New Software Takes Too Much Time"</h3>
        <p>
          Modern financial apps are designed for immediate usability. Most users become proficient within 15-30 minutes,
          compared to hours or days required to master complex spreadsheet formulas.
        </p>

<h3>"I Need Custom Features That Apps Don't Offer"</h3>
        <p>
          Evaluate whether your custom features truly add value or if they're complexity for complexity's sake. Most
          users find that well-designed apps meet 95% of their needs more efficiently than custom spreadsheets.
        </p>

<h3>"What If the App Disappears or Changes?"</h3>
        <p>
          Choose tools that offer data export capabilities. With your data in standard formats (CSV, JSON), you can
          always migrate to another solution or return to spreadsheets if necessary.
        </p>

<h2>Making the Transition Successfully</h2>

<h3>Gradual Migration Strategy</h3>
        <p>For users heavily invested in spreadsheet workflows:</p>

<ol>
          <li>
            <strong>Parallel Tracking:</strong> Run both systems simultaneously for 2-4 weeks
          </li>
          <li>
            <strong>Single Goal Test:</strong> Start by tracking one new goal in the alternative tool
          </li>
          <li>
            <strong>Feature Comparison:</strong> Compare ease of use, accuracy, and motivation factors
          </li>
          <li>
            <strong>Full Migration:</strong> Move all goals once comfortable with the new system
          </li>
          <li>
            <strong>Spreadsheet Archive:</strong> Keep spreadsheet as backup until fully confident
          </li>
        </ol>

<h3>Success Metrics to Track</h3>
        <p>Measure the success of your migration by monitoring:</p>

<ul>
          <li>Time spent on tracking activities (should decrease significantly)</li>
          <li>Frequency of goal updates (should increase with easier tools)</li>
          <li>Goal completion rates (should improve with better motivation)</li>
          <li>Overall satisfaction with the tracking process</li>
        </ul>

<h2>The Future of Financial Tracking</h2>
        <p>
          The evolution from spreadsheets to modern financial apps represents a broader shift toward user-centric design
          in personal finance. As artificial intelligence and machine learning become more prevalent, we can expect even
          more sophisticated features that would be impossible to replicate in traditional spreadsheets.
        </p>

<h3>Emerging Trends:</h3>
        <ul>
          <li>AI-powered savings optimization</li>
          <li>Predictive goal completion modeling</li>
          <li>Behavioral psychology integration</li>
          <li>Voice-activated tracking interfaces</li>
          <li>Advanced privacy-preserving technologies</li>
        </ul>

<h2>Ready to Make the Switch?</h2>
        <p>
          The transition from spreadsheets to modern sinking fund tracking tools represents more than just a software
          change – it's an investment in your financial success. By choosing tools designed specifically for motivation,
          ease of use, and privacy protection, you're setting yourself up for better financial outcomes with less
          effort.
        </p>

<p>
          <a href="/" className="text-blue-600 hover:text-blue-800">
            Try GoalWise today
          </a>{" "}
          and experience the difference that purpose-built financial tracking can make. Your future self will thank you
          for making the switch to a tool that actually helps you achieve your financial goals rather than just tracking
          them.
        </p>

<p>
          Remember: the best financial tracking system is the one you'll actually use consistently. If spreadsheets have
          been holding you back from regular tracking, it's time to embrace a solution designed for success.
        </p>
      </div>`
    ),
  },
  {
    slug: "how-to-manage-sinking-funds-for-beginners",
    title: "How to Manage Sinking Funds for Beginners: Complete Step-by-Step Guide 2024",
    excerpt:
      "New to sinking funds? Learn everything you need to know about managing sinking funds effectively, from basic concepts to advanced strategies that build lasting wealth.",
    date: "2024-02-01",
    readTime: "14 min read",
    category: "Beginner's Guide",
    tags: ["Sinking Funds", "Personal Finance", "Budgeting", "Financial Planning"],
    author: {
      name: "David Thompson",
      avatar: "/images/testimonials/david-thompson.png",
    },
    seo: {
      title: "How to Manage Sinking Funds for Beginners 2024 | Complete Guide",
      description:
        "Master sinking fund management with our beginner-friendly guide. Learn to save systematically, avoid debt, and build wealth with proven strategies and practical examples.",
      keywords: [
        "how to manage sinking funds",
        "sinking funds for beginners",
        "sinking fund management",
        "beginner financial planning",
        "systematic savings guide",
      ],
    },
    heroImage: "/images/blog/getting-started-hero.png",
    secondaryImage: "/images/blog/best-categories.png",
    content: (
      `<div className="prose prose-lg max-w-none">
        <p className="text-xl text-gray-600 mb-8">
          Sinking funds are one of the most powerful yet underutilized financial tools available to everyday savers. If
          you're tired of being caught off-guard by "unexpected" expenses or want to stop relying on credit cards for
          planned purchases, this comprehensive beginner's guide will teach you everything you need to know about
          managing sinking funds effectively.
        </p>

<h2>What Are Sinking Funds? (The Foundation)</h2>
        <p>
          A sinking fund is a dedicated savings account where you set aside money regularly for a specific future
          expense or goal. Unlike emergency funds that cover unexpected costs, sinking funds are proactive savings for
          expenses you know are coming – even if you don't know exactly when or how much they'll cost.
        </p>

<h3>The Psychology Behind Sinking Funds</h3>
        <p>
          Sinking funds work because they transform large, overwhelming expenses into manageable monthly contributions.
          Instead of scrambling to find $1,200 for car repairs, you save $100 per month for a year. This approach
          reduces financial stress, prevents debt accumulation, and builds confidence in your financial management
          abilities.
        </p>

<h3>Sinking Funds vs. Other Savings Methods</h3>
        <table className="w-full border-collapse border border-gray-300 my-6">
          <thead>
            <tr className="bg-gray-100">
              <th className="border border-gray-300 p-3 text-left">Method</th>
              <th className="border border-gray-300 p-3 text-left">Purpose</th>
              <th className="border border-gray-300 p-3 text-left">Timeline</th>
              <th className="border border-gray-300 p-3 text-left">Accessibility</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="border border-gray-300 p-3">
                <strong>Emergency Fund</strong>
              </td>
              <td className="border border-gray-300 p-3">Unexpected expenses</td>
              <td className="border border-gray-300 p-3">Immediate access</td>
              <td className="border border-gray-300 p-3">High liquidity</td>
            </tr>
            <tr>
              <td className="border border-gray-300 p-3">
                <strong>Sinking Fund</strong>
              </td>
              <td className="border border-gray-300 p-3">Planned future expenses</td>
              <td className="border border-gray-300 p-3">Months to years</td>
              <td className="border border-gray-300 p-3">Moderate liquidity</td>
            </tr>
            <tr>
              <td className="border border-gray-300 p-3">
                <strong>Investment Account</strong>
              </td>
              <td className="border border-gray-300 p-3">Long-term wealth building</td>
              <td className="border border-gray-300 p-3">5+ years</td>
              <td className="border border-gray-300 p-3">Low liquidity</td>
            </tr>
          </tbody>
        </table>

<h2>Step 1: Identifying Your Sinking Fund Needs</h2>

<h3>The Expense Audit Method</h3>
        <p>
          Before creating sinking funds, conduct a comprehensive audit of your potential future expenses. This process
          helps you identify what you need to save for and prevents overlooking important categories.
        </p>

<h4>Essential Categories for Beginners:</h4>
        <ul>
          <li>
            <strong>Vehicle Maintenance:</strong> Oil changes, tire replacements, major repairs ($1,000-$3,000 annually)
          </li>
          <li>
            <strong>Home Maintenance:</strong> HVAC servicing, appliance repairs, minor renovations ($500-$2,000
            annually)
          </li>
          <li>
            <strong>Medical Expenses:</strong> Dental work, vision care, deductibles ($500-$1,500 annually)
          </li>
          <li>
            <strong>Holiday and Gift Expenses:</strong> Birthdays, holidays, special occasions ($800-$2,000 annually)
          </li>
          <li>
            <strong>Annual Subscriptions:</strong> Insurance premiums, software licenses, memberships ($300-$1,000
            annually)
          </li>
        </ul>

<h4>Lifestyle-Specific Categories:</h4>
        <ul>
          <li>
            <strong>Pet Care:</strong> Veterinary visits, grooming, pet supplies ($500-$2,000 annually)
          </li>
          <li>
            <strong>Travel and Vacation:</strong> Annual trips, weekend getaways ($1,000-$5,000 annually)
          </li>
          <li>
            <strong>Professional Development:</strong> Courses, conferences, certifications ($500-$2,000 annually)
          </li>
          <li>
            <strong>Technology Upgrades:</strong> Phone replacements, computer updates ($300-$1,500 annually)
          </li>
        </ul>

<h3>The Priority Matrix Approach</h3>
        <p>
          When starting with sinking funds, you can't fund everything immediately. Use this priority matrix to determine
          which sinking funds to establish first:
        </p>

<h4>High Priority (Start Immediately):</h4>
        <ul>
          <li>Expenses that could create financial hardship if unfunded</li>
          <li>Regular, predictable costs (annual insurance, holiday gifts)</li>
          <li>Safety-related expenses (vehicle maintenance, home repairs)</li>
        </ul>

<h4>Medium Priority (Add Within 3-6 Months):</h4>
        <ul>
          <li>Quality of life improvements (vacation, entertainment)</li>
          <li>Professional development and education</li>
          <li>Technology upgrades and replacements</li>
        </ul>

<h4>Low Priority (Future Consideration):</h4>
        <ul>
          <li>Luxury items and wants</li>
          <li>Highly variable or uncertain expenses</li>
          <li>Items you could reasonably delay or substitute</li>
        </ul>

<h2>Step 2: Calculating Your Sinking Fund Contributions</h2>

<h3>The Research and Estimate Method</h3>
        <p>
          Accurate contribution calculations require realistic cost estimates. Here's how to research and calculate
          appropriate amounts:
        </p>

<h4>For Vehicle Maintenance:</h4>
        <ol>
          <li>Check your vehicle's maintenance schedule</li>
          <li>Research average costs for your car model and age</li>
          <li>Factor in your driving habits and mileage</li>
          <li>Add 20% buffer for unexpected issues</li>
        </ol>

<p>
          <strong>Example Calculation:</strong>
        </p>
        <ul>
          <li>Annual oil changes (4x): $200</li>
          <li>Tire replacement (every 3 years): $600 ÷ 3 = $200</li>
          <li>Major service (annual): $400</li>
          <li>Unexpected repairs buffer: $200</li>
          <li>
            <strong>Total Annual Need:</strong> $1,000
          </li>
          <li>
            <strong>Monthly Contribution:</strong> $83
          </li>
        </ul>

<h4>For Holiday and Gift Expenses:</h4>
        <ol>
          <li>List all gift-giving occasions in your calendar</li>
          <li>Estimate spending per person/occasion</li>
          <li>Include holiday decorations, food, and entertainment</li>
          <li>Add travel costs if applicable</li>
        </ol>

<p>
          <strong>Example Calculation:</strong>
        </p>
        <ul>
          <li>Christmas gifts (6 people × $75): $450</li>
          <li>Birthday gifts (4 occasions × $50): $200</li>
          <li>Holiday decorations and food: $200</li>
          <li>Other occasions (graduations, etc.): $150</li>
          <li>
            <strong>Total Annual Need:</strong> $1,000
          </li>
          <li>
            <strong>Monthly Contribution:</strong> $83
          </li>
        </ul>

<h3>The Percentage-Based Approach</h3>
        <p>If detailed calculations seem overwhelming, start with percentage-based allocations of your income:</p>

<ul>
          <li>
            <strong>Vehicle-related sinking funds:</strong> 2-4% of gross income
          </li>
          <li>
            <strong>Home maintenance:</strong> 1-3% of gross income (homeowners)
          </li>
          <li>
            <strong>Medical expenses:</strong> 1-2% of gross income
          </li>
          <li>
            <strong>Holiday/gifts:</strong> 1-2% of gross income
          </li>
          <li>
            <strong>Total sinking fund allocation:</strong> 5-12% of gross income
          </li>
        </ul>

<h2>Step 3: Setting Up Your Sinking Fund System</h2>

<h3>Account Structure Options</h3>

<h4>Option 1: Multiple Savings Accounts</h4>
        <p>
          <strong>Pros:</strong> Clear separation, FDIC insurance, easy automation
        </p>
        <p>
          <strong>Cons:</strong> Potential fees, minimum balance requirements, limited accounts
        </p>

<h4>Option 2: Single High-Yield Savings Account with Tracking</h4>
        <p>
          <strong>Pros:</strong> Higher interest rates, simplified banking, lower fees
        </p>
        <p>
          <strong>Cons:</strong> Requires manual tracking, potential for mixing funds
        </p>

<h4>Option 3: Money Market Account with Subcategories</h4>
        <p>
          <strong>Pros:</strong> Higher yields, check-writing ability, professional management
        </p>
        <p>
          <strong>Cons:</strong> Higher minimum balances, limited transactions
        </p>

<h3>Digital Tracking Solutions</h3>
        <p>
          Regardless of your account structure, you need a reliable tracking system.{" "}
          <a href="/" className="text-blue-600 hover:text-blue-800">
            GoalWise
          </a>{" "}
          offers the perfect solution for beginners with its intuitive interface and privacy-first approach.
        </p>

<h4>Essential Tracking Features:</h4>
        <ul>
          <li>Individual goal progress visualization</li>
          <li>Contribution history and patterns</li>
          <li>Target date calculations</li>
          <li>Milestone celebrations and motivation</li>
          <li>Data export for record-keeping</li>
        </ul>

<h2>Step 4: Automating Your Sinking Fund Contributions</h2>

<h3>The "Pay Yourself First" Strategy</h3>
        <p>
          Treat sinking fund contributions like any other essential bill. Set up automatic transfers immediately after
          payday to ensure consistent funding before discretionary spending occurs.
        </p>

<h4>Automation Setup Process:</h4>
        <ol>
          <li>
            <strong>Calculate total monthly sinking fund needs</strong>
          </li>
          <li>
            <strong>Set up automatic transfer for day after payday</strong>
          </li>
          <li>
            <strong>Split transfer among different sinking funds</strong>
          </li>
          <li>
            <strong>Update tracking system with contributions</strong>
          </li>
          <li>
            <strong>Review and adjust monthly</strong>
          </li>
        </ol>

<h3>Contribution Timing Strategies</h3>

<h4>Bi-Weekly Contributions:</h4>
        <p>
          If paid bi-weekly, split monthly contributions in half and automate transfers with each paycheck. This
          approach smooths cash flow and reduces the psychological impact of large monthly transfers.
        </p>

<h4>Seasonal Adjustments:</h4>
        <p>
          Increase contributions during high-income months (bonuses, tax refunds) and reduce during lower-income
          periods. This flexibility prevents sinking fund contributions from becoming a financial burden.
        </p>

<h2>Step 5: Managing Multiple Sinking Funds Effectively</h2>

<h3>The Portfolio Approach</h3>
        <p>
          Think of your sinking funds as a portfolio of future expenses. Like investment diversification, you want to
          balance immediate needs with longer-term goals.
        </p>

<h4>Beginner Portfolio Example (Monthly Income: $4,000):</h4>
        <ul>
          <li>
            <strong>Vehicle Maintenance:</strong> $100/month (2.5% of income)
          </li>
          <li>
            <strong>Medical Expenses:</strong> $50/month (1.25% of income)
          </li>
          <li>
            <strong>Holiday/Gifts:</strong> $75/month (1.9% of income)
          </li>
          <li>
            <strong>Home Maintenance:</strong> $75/month (1.9% of income)
          </li>
          <li>
            <strong>Vacation Fund:</strong> $100/month (2.5% of income)
          </li>
          <li>
            <strong>Total:</strong> $400/month (10% of income)
          </li>
        </ul>

<h3>Rebalancing and Optimization</h3>
        <p>
          Review your sinking fund portfolio quarterly to ensure it still matches your needs and priorities. Life
          changes require sinking fund adjustments.
        </p>

<h4>Quarterly Review Checklist:</h4>
        <ul>
          <li>Are contribution amounts still realistic for your budget?</li>
          <li>Have any major life changes affected your needs?</li>
          <li>Are you on track to meet target dates for each goal?</li>
          <li>Should you add new categories or eliminate others?</li>
          <li>Can you increase contributions to accelerate progress?</li>
        </ul>

<h2>Common Beginner Mistakes and How to Avoid Them</h2>

<h3>Mistake 1: Starting Too Aggressively</h3>
        <p>
          <strong>Problem:</strong> Allocating too much to sinking funds, creating budget strain
        </p>
        <p>
          <strong>Solution:</strong> Start with 3-5% of income and gradually increase as habits develop
        </p>

<h3>Mistake 2: Creating Too Many Categories</h3>
        <p>
          <strong>Problem:</strong> Overwhelming complexity that leads to abandonment
        </p>
        <p>
          <strong>Solution:</strong> Begin with 3-4 essential categories, add more gradually
        </p>

<h3>Mistake 3: Unrealistic Target Amounts</h3>
        <p>
          <strong>Problem:</strong> Setting goals too high, leading to discouragement
        </p>
        <p>
          <strong>Solution:</strong> Research actual costs and start with conservative estimates
        </p>

<h3>Mistake 4: Irregular Contributions</h3>
        <p>
          <strong>Problem:</strong> Sporadic funding that doesn't build momentum
        </p>
        <p>
          <strong>Solution:</strong> Automate contributions and treat them as non-negotiable
        </p>

<h3>Mistake 5: Raiding Funds for Other Purposes</h3>
        <p>
          <strong>Problem:</strong> Using sinking fund money for unrelated expenses
        </p>
        <p>
          <strong>Solution:</strong> Maintain strict category discipline and separate accounts
        </p>

<h2>Advanced Strategies for Sinking Fund Success</h2>

<h3>The Snowball Method for Sinking Funds</h3>
        <p>
          Similar to debt snowball, focus intensively on one sinking fund until fully funded, then redirect that
          contribution to the next priority. This approach provides psychological wins and momentum.
        </p>

<h3>Seasonal Funding Strategies</h3>
        <p>Align sinking fund contributions with seasonal income patterns:</p>

<ul>
          <li>
            <strong>Tax Refund Season:</strong> Boost annual contributions
          </li>
          <li>
            <strong>Bonus Periods:</strong> Accelerate high-priority funds
          </li>
          <li>
            <strong>Lower Income Months:</strong> Maintain minimum contributions
          </li>
          <li>
            <strong>Expense Season:</strong> Prepare for higher withdrawal periods
          </li>
        </ul>

<h3>Interest Optimization</h3>
        <p>Maximize earnings on sinking fund balances:</p>

<ul>
          <li>Use high-yield savings accounts (2-5% APY)</li>
          <li>Consider short-term CDs for funds with longer timelines</li>
          <li>Money market accounts for larger balances</li>
          <li>Treasury bills for maximum safety with competitive rates</li>
        </ul>

<h2>Tracking Progress and Staying Motivated</h2>

<h3>Visual Progress Indicators</h3>
        <p>
          Visual tracking significantly improves sinking fund success rates.{" "}
          <a href="/" className="text-blue-600 hover:text-blue-800">
            GoalWise
          </a>{" "}
          provides intuitive progress bars, milestone celebrations, and achievement tracking that keep you motivated
          throughout your savings journey.
        </p>

<h4>Effective Motivation Techniques:</h4>
        <ul>
          <li>
            <strong>Progress Photos:</strong> Visual representations of goals (vacation destinations, home improvements)
          </li>
          <li>
            <strong>Milestone Rewards:</strong> Small celebrations at 25%, 50%, 75% completion
          </li>
          <li>
            <strong>Contribution Streaks:</strong> Track consecutive months of successful contributions
          </li>
          <li>
            <strong>Goal Completion Ceremonies:</strong> Acknowledge achievements when funds are used
          </li>
        </ul>

<h3>Monthly Review Process</h3>
        <p>Establish a monthly routine to review and optimize your sinking fund strategy:</p>

<ol>
          <li>
            <strong>Progress Assessment:</strong> Review each fund's progress toward targets
          </li>
          <li>
            <strong>Contribution Analysis:</strong> Evaluate if current contributions are sustainable
          </li>
          <li>
            <strong>Goal Adjustment:</strong> Modify targets based on new information
          </li>
          <li>
            <strong>Success Celebration:</strong> Acknowledge progress and milestones achieved
          </li>
          <li>
            <strong>Next Month Planning:</strong> Set intentions and any needed adjustments
          </li>
        </ol>

<h2>When and How to Use Your Sinking Funds</h2>

<h3>Spending Guidelines</h3>
        <p>Knowing when and how to use sinking fund money is as important as saving it:</p>

<h4>Appropriate Uses:</h4>
        <ul>
          <li>Expenses that match the fund's intended purpose</li>
          <li>Costs within the budgeted amount range</li>
          <li>Necessary expenses that can't be reasonably delayed</li>
          <li>Opportunities that align with your financial goals</li>
        </ul>

<h4>Inappropriate Uses:</h4>
        <ul>
          <li>Impulse purchases unrelated to the fund's purpose</li>
          <li>Covering budget shortfalls in other categories</li>
          <li>Lending money to others</li>
          <li>Speculative investments or gambling</li>
        </ul>

<h3>Replenishment Strategy</h3>
        <p>After using sinking fund money, immediately restart contributions to rebuild the fund:</p>

<ol>
          <li>
            <strong>Assess Remaining Balance:</strong> Determine how much is left after the expense
          </li>
          <li>
            <strong>Recalculate Contributions:</strong> Adjust monthly amounts based on new target
          </li>
          <li>
            <strong>Resume Automation:</strong> Restart automatic transfers immediately
          </li>
          <li>
            <strong>Update Tracking:</strong> Record the expense and new goal in your tracking system
          </li>
        </ol>

<h2>Scaling Your Sinking Fund Strategy</h2>

<h3>From Beginner to Advanced</h3>
        <p>As your income grows and financial situation stabilizes, expand your sinking fund strategy:</p>

<h4>Year 1 Goals:</h4>
        <ul>
          <li>Establish 3-4 essential sinking funds</li>
          <li>Develop consistent contribution habits</li>
          <li>Successfully use funds for intended purposes</li>
          <li>Build confidence in the system</li>
        </ul>

<h4>Year 2-3 Goals:</h4>
        <ul>
          <li>Add 2-3 additional fund categories</li>
          <li>Increase contribution amounts as income grows</li>
          <li>Optimize account structures and interest earnings</li>
          <li>Integrate with broader financial planning</li>
        </ul>

<h4>Advanced Strategy (Year 3+):</h4>
        <ul>
          <li>Maintain 8-12 specialized sinking funds</li>
          <li>Implement sophisticated rebalancing strategies</li>
          <li>
            Use{" "}
            <a href="/pricing" className="text-blue-600 hover:text-blue-800">
              advanced tracking features
            </a>{" "}
            for detailed analytics
          </li>
          <li>Teach others and refine your approach</li>
        </ul>

<h2>Integration with Overall Financial Plan</h2>

<h3>The Financial Priority Hierarchy</h3>
        <p>Integrate sinking funds into a comprehensive debt-free wealth building strategy:</p>

<ol>
          <li>
            <strong>Basic Emergency Fund:</strong> $1,000 starter emergency fund
          </li>
          <li>
            <strong>High-Interest Debt Elimination:</strong> Credit cards, personal loans
          </li>
          <li>
            <strong>Essential Sinking Funds:</strong> Vehicle, medical, home maintenance
          </li>
          <li>
            <strong>Full Emergency Fund:</strong> 3-6 months of expenses
          </li>
          <li>
            <strong>Expanded Sinking Funds:</strong> Vacation, gifts, lifestyle goals
          </li>
          <li>
            <strong>Retirement and Investment:</strong> Long-term wealth building
          </li>
        </ol>

<h3>Balancing Competing Priorities</h3>
        <p>When resources are limited, use these guidelines to balance sinking funds with other financial goals:</p>

<ul>
          <li>
            <strong>50% Rule:</strong> Never allocate more than 50% of available savings to sinking funds
          </li>
          <li>
            <strong>Emergency First:</strong> Maintain basic emergency fund before expanding sinking funds
          </li>
          <li>
            <strong>High-Interest Debt Priority:</strong> Pay off credit cards before funding lifestyle sinking funds
          </li>
          <li>
            <strong>Employer Match:</strong> Always capture full employer 401(k) match before other goals
          </li>
        </ul>

<h2>Technology and Tools for Success</h2>

<h3>Choosing the Right Tracking App</h3>
        <p>The right technology can make or break your sinking fund success. Key features to look for:</p>

<ul>
          <li>
            <strong>Privacy Protection:</strong> Local data storage and no account requirements
          </li>
          <li>
            <strong>Visual Progress Tracking:</strong> Motivating charts and progress indicators
          </li>
          <li>
            <strong>Mobile Accessibility:</strong> Easy updates from any device
          </li>
          <li>
            <strong>Data Export:</strong> Backup and analysis capabilities
          </li>
          <li>
            <strong>Customization:</strong> Flexible categories and goal structures
          </li>
        </ul>

<p>
          <a href="/" className="text-blue-600 hover:text-blue-800">
            GoalWise
          </a>{" "}
          meets all these criteria while maintaining complete privacy and offering both free and{" "}
          <a href="/pricing" className="text-blue-600 hover:text-blue-800">
            pro features
          </a>{" "}
          for different user needs.
        </p>

<h3>Automation Tools and Services</h3>
        <p>Leverage technology to automate your sinking fund contributions:</p>

<ul>
          <li>
            <strong>Bank Auto-Transfers:</strong> Set up recurring transfers to savings accounts
          </li>
          <li>
            <strong>Direct Deposit Splitting:</strong> Automatically allocate portions of paychecks
          </li>
          <li>
            <strong>Round-Up Programs:</strong> Automatic micro-contributions from purchases
          </li>
          <li>
            <strong>Calendar Reminders:</strong> Monthly review and adjustment prompts
          </li>
        </ul>

<h2>Real-World Success Stories</h2>

<h3>Case Study 1: The Young Professional</h3>
        <p>
          <strong>Background:</strong> Sarah, 26, $55,000 salary, $8,000 credit card debt
        </p>
        <p>
          <strong>Challenge:</strong> Constantly surprised by car repairs and holiday expenses
        </p>
        <p>
          <strong>Solution:</strong> Started with three sinking funds: vehicle ($75/month), holidays ($60/month), and
          medical ($40/month)
        </p>
        <p>
          <strong>Results:</strong> After 18 months, handled $800 car repair and $600 holiday expenses without debt
        </p>

<h3>Case Study 2: The Growing Family</h3>
        <p>
          <strong>Background:</strong> Mike and Sarah, household income $85,000, $25,000 total debt
        </p>
        <p>
          <strong>Challenge:</strong> Irregular expenses creating budget stress and credit card debt
        </p>
        <p>
          <strong>Solution:</strong> Implemented six sinking funds totaling $450/month covering vehicle, home, medical,
          gifts, vacation, and children's activities
        </p>
        <p>
          <strong>Results:</strong> Eliminated $3,200 in credit card debt within two years and took first debt-free
          family vacation
        </p>

<h2>Your Next Steps</h2>

<h3>Week 1: Foundation Building</h3>
        <ul>
          <li>Complete expense audit and identify top 3 sinking fund needs</li>
          <li>Research realistic cost estimates for each category</li>
          <li>Calculate monthly contribution requirements</li>
          <li>
            Set up{" "}
            <a href="/" className="text-blue-600 hover:text-blue-800">
              GoalWise account
            </a>{" "}
            and create first goals
          </li>
        </ul>

<h3>Week 2: System Implementation</h3>
        <ul>
          <li>Open dedicated savings account(s) for sinking funds</li>
          <li>Set up automatic transfers aligned with payday</li>
          <li>Make first contributions and update tracking system</li>
          <li>Schedule monthly review reminder</li>
        </ul>

<h3>Month 1: Habit Development</h3>
        <ul>
          <li>Monitor automatic transfers and adjust if needed</li>
          <li>Track progress weekly in your chosen app</li>
          <li>Resist temptation to use funds for other purposes</li>
          <li>Celebrate first milestone achievements</li>
        </ul>

<h3>Month 3: Optimization and Expansion</h3>
        <ul>
          <li>Conduct first quarterly review</li>
          <li>Adjust contribution amounts based on experience</li>
          <li>Consider adding one additional sinking fund category</li>
          <li>Evaluate and optimize account structure</li>
        </ul>

<h2>Conclusion: Building Wealth One Fund at a Time</h2>
        <p>
          Managing sinking funds effectively is one of the most practical skills you can develop for long-term financial
          success. By systematically saving for known future expenses, you eliminate financial surprises, reduce debt
          dependence, and build confidence in your money management abilities.
        </p>

<p>
          Remember that sinking fund management is a skill that improves with practice. Start small, stay consistent,
          and gradually expand your system as you become more comfortable with the process. The key is beginning today
          rather than waiting for the "perfect" moment or complete understanding.
        </p>

<p>
          <a href="/" className="text-blue-600 hover:text-blue-800">
            Start your sinking fund journey with GoalWise today
          </a>{" "}
          and take the first step toward financial peace of mind. The perfect tracking tool combined with the
          comprehensive implementation guide you've just read creates an unstoppable combination for financial success.
        </p>

<p>
          Your future self will thank you for taking action today. Begin with step one, stay consistent with your
          contributions, and trust the process. Sinking funds work when you work the system – and now you have
          everything you need to succeed.
        </p>
      </div>
    ),
  },\
]97:T626f7,[V0_FILE]typescriptreact:file="types/goal.ts" isMerged="true"
export interface Goal {
  id: number
  name: string
  targetAmount: number
  savedAmount: number
  targetDate: string
  createdDate: string
}
[V0_FILE]typescriptreact:file="hooks/use-local-storage.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"

export function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(initialValue)

useEffect(() => {
    try {
      const item = window.localStorage.getItem(key)
      if (item) {
        setStoredValue(JSON.parse(item))
      }
    } catch (error) {
      console.error(`Error reading localStorage key "${key}":`, error)
    }
  }, [key])

const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value
      setStoredValue(valueToStore)
      window.localStorage.setItem(key, JSON.stringify(valueToStore))
    } catch (error) {
      console.error(`Error setting localStorage key "${key}":`, error)
    }
  }

return [storedValue, setValue] as const
}
[V0_FILE]typescriptreact:file="contexts/translation-context.tsx" isMerged="true"
"use client"

import { createContext, useContext, type ReactNode } from "react"

const translations = {
  en: {
    "hero.title": "Track Your Savings Goals Easily with Our Privacy-First Sinking Fund Tracker",
    "hero.subtitle": "No cloud. No subscriptions. Just simple savings tracking that works.",
    "hero.cta": "Start Tracking Goals Now",
    "features.privacy": "Privacy-first",
    "features.analytics": "Smart Analytics",
    "features.multilang": "Multi-language",
    "features.export": "Export PDF/CSV",
    "features.share": "Share Goals",
    "dashboard.totalGoals": "Total Goals",
    "dashboard.totalSaved": "Total Saved",
    "dashboard.overallProgress": "Overall Progress",
    "form.addGoal": "Add New Savings Goal",
    "analytics.title": "Savings Analytics",
  },
  fr: {
    "hero.title": "Suivez Vos Objectifs d'Épargne Facilement avec Notre Tracker Confidentiel",
    "hero.subtitle": "Pas de cloud. Pas d'abonnements. Juste un suivi d'épargne simple qui fonctionne.",
    "hero.cta": "Commencer le Suivi",
    "features.privacy": "Confidentialité",
    "features.analytics": "Analytics Intelligents",
    "features.multilang": "Multi-langues",
    "features.export": "Export PDF/CSV",
    "features.share": "Partager Objectifs",
    "dashboard.totalGoals": "Objectifs Totaux",
    "dashboard.totalSaved": "Total Économisé",
    "dashboard.overallProgress": "Progrès Global",
    "form.addGoal": "Ajouter Nouvel Objectif",
    "analytics.title": "Analytics d'Épargne",
  },
  es: {
    "hero.title": "Rastrea Tus Metas de Ahorro Fácilmente con Nuestro Tracker de Privacidad",
    "hero.subtitle": "Sin nube. Sin suscripciones. Solo seguimiento de ahorros simple que funciona.",
    "hero.cta": "Comenzar Seguimiento",
    "features.privacy": "Privacidad Primero",
    "features.analytics": "Analytics Inteligentes",
    "features.multilang": "Multi-idioma",
    "features.export": "Exportar PDF/CSV",
    "features.share": "Compartir Metas",
    "dashboard.totalGoals": "Metas Totales",
    "dashboard.totalSaved": "Total Ahorrado",
    "dashboard.overallProgress": "Progreso General",
    "form.addGoal": "Agregar Nueva Meta",
    "analytics.title": "Analytics de Ahorros",
  },
}

interface TranslationContextType {
  t: (key: string) => string
  language: string
}

const TranslationContext = createContext<TranslationContextType | undefined>(undefined)

export function TranslationProvider({ children, language }: { children: ReactNode; language: string }) {
  const t = (key: string) => {
    return translations[language as keyof typeof translations]?.[key as keyof typeof translations.en] || key
  }

return <TranslationContext.Provider value={{ t, language }}>{children}</TranslationContext.Provider>
}

export function useTranslation() {
  const context = useContext(TranslationContext)
  if (context === undefined) {
    throw new Error("useTranslation must be used within a TranslationProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/modals/blog-modal.tsx" isMerged="true"
"use client"

import { X } from "lucide-react"
import { blogPosts } from "@/data/blog-posts"

interface BlogModalProps {
  isOpen: boolean
  onClose: () => void
  postId: string | null
}

export default function BlogModal({ isOpen, onClose, postId }: BlogModalProps) {
  if (!isOpen || !postId) return null

const post = blogPosts[postId]
  if (!post) return null

import { X } from "lucide-react"
import { legalPages } from "@/data/legal-pages"

interface LegalModalProps {
  isOpen: boolean
  onClose: () => void
  pageId: string | null
}

export default function LegalModal({ isOpen, onClose, pageId }: LegalModalProps) {
  if (!isOpen || !pageId) return null

const page = legalPages[pageId]
  if (!page) return null

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 overflow-y-auto">
      <div className="min-h-screen py-8">
        <div className="bg-white rounded-xl max-w-4xl mx-4 md:mx-auto relative">
          <button onClick={onClose} className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 z-10">
            <X className="w-6 h-6" />
          </button>
          <div className="p-8">
            <div dangerouslySetInnerHTML={{ __html: page.content }} />
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/images/hero-image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sinking%20fund%20tracker%20app%20hero%20image-2HFRA78dyiudoMmuBRnVYxZJ1LE3MV.png" isMerged="true"
[V0_FILE]jpeg:file="public/images/logo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Sinking%20Fund%20Tracker%20App%20Logo%20%20.jpg-bfHrhICTzDD0YZfIYYFQD7yZsTpATo.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Favicon%20Sinking%20Fund%20Tracker%20App%20.jpg-AcQYe5OSMwKxJeemNUhb1HHoKKNhtr.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="components/ui/chart.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
    color?: string
  }
}

const ChartContext = React.createContext<{ config: ChartConfig } | null>(null)

export function ChartContainer({
  children,
  config,
  className,
  ...props
}: React.ComponentProps<"div"> & {
  config: ChartConfig
}) {
  return (
    <ChartContext.Provider value={{ config }}>
      <div className={className} {...props}>
        {children}
      </div>
    </ChartContext.Provider>
  )
}

export const ChartTooltip = ({ children }: { children: React.ReactNode }) => <div>{children}</div>
export const ChartTooltipContent = ({ children }: { children: React.ReactNode }) => <div>{children}</div>
export const ChartLegend = ({ children }: { children: React.ReactNode }) => <div>{children}</div>
export const ChartLegendContent = ({ children }: { children: React.ReactNode }) => <div>{children}</div>
export const ChartStyle = ({ children }: { children: React.ReactNode }) => <div>{children}</div>

interface ChartProps {
  type: "doughnut" | "bar"
  data: any
  options?: any
}

export function Chart({ type, data, options }: ChartProps) {
  // Return a simple placeholder to avoid WebAssembly compilation issues
  return (
    <div className="flex items-center justify-center h-full bg-gray-100 rounded-lg">
      <div className="text-center text-gray-500">
        <div className="text-4xl mb-2">📊</div>
        <p>Chart visualization</p>
        <p className="text-sm">Analytics available</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/modals/pro-modal.tsx" isEdit="true" isMerged="true"
"use client"

import { X, Crown, Check, FileText, Download, Share2 } from "lucide-react"

interface ProModalProps {
  isOpen: boolean
  onClose: () => void
  onUpgrade: () => void
}

export default function ProModal({ isOpen, onClose, onUpgrade }: ProModalProps) {
  if (!isOpen) return null

const handleUpgrade = () => {
    // Direct redirect to Flutterwave payment
    window.location.href = "https://flutterwave.com/pay/aepushnzbwox"
  }

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-xl p-8 max-w-lg mx-auto relative shadow-2xl">
        <button onClick={onClose} className="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
          <X className="w-6 h-6" />
        </button>

<h3 className="text-3xl font-bold mb-2 bg-gradient-to-r from-pink-500 to-red-500 bg-clip-text text-transparent">
            Unlock Pro Features
          </h3>
          <p className="text-gray-600 mb-6">Get lifetime access to premium export and sharing features</p>

<div className="space-y-4 mb-8 text-left">
            <div className="flex items-center p-3 bg-red-50 rounded-lg">
              <div className="bg-red-100 p-2 rounded-full mr-4">
                <FileText className="w-5 h-5 text-red-600" />
              </div>
              <div>
                <h4 className="font-semibold text-gray-800">Professional PDF Reports</h4>
                <p className="text-sm text-gray-600">Export detailed savings reports with charts and analytics</p>
              </div>
              <Check className="w-5 h-5 text-green-500 ml-auto" />
            </div>

<div className="flex items-center p-3 bg-green-50 rounded-lg">
              <div className="bg-green-100 p-2 rounded-full mr-4">
                <Download className="w-5 h-5 text-green-600" />
              </div>
              <div>
                <h4 className="font-semibold text-gray-800">CSV Data Export</h4>
                <p className="text-sm text-gray-600">Download your data for spreadsheet analysis and backup</p>
              </div>
              <Check className="w-5 h-5 text-green-500 ml-auto" />
            </div>

<div className="flex items-center p-3 bg-blue-50 rounded-lg">
              <div className="bg-blue-100 p-2 rounded-full mr-4">
                <Share2 className="w-5 h-5 text-blue-600" />
              </div>
              <div>
                <h4 className="font-semibold text-gray-800">Share Goals with Family</h4>
                <p className="text-sm text-gray-600">Create shareable links for accountability and support</p>
              </div>
              <Check className="w-5 h-5 text-green-500 ml-auto" />
            </div>
          </div>

<div className="bg-gradient-to-r from-pink-500 to-red-500 text-white p-4 rounded-lg mb-6">
            <div className="text-4xl font-bold">$9.99</div>
            <p className="text-pink-100">One-time payment • Lifetime access</p>
            <p className="text-xs text-pink-200 mt-1">No subscriptions • No recurring fees</p>
          </div>

<button
            onClick={handleUpgrade}
            className="w-full bg-gradient-to-r from-pink-500 to-red-500 text-white px-8 py-4 rounded-lg font-bold text-lg hover:from-pink-600 hover:to-red-600 transition-all shadow-lg hover:shadow-xl transform hover:scale-105"
          >
            🚀 Upgrade to Pro with Flutterwave
          </button>

<p className="text-xs text-gray-500 mt-4">
            Secure payment powered by Flutterwave • 30-day money-back guarantee
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="hooks/use-pro-status.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useLocalStorage } from "./use-local-storage"

interface ProStatus {
  isPro: boolean
  activatedAt: string | null
  transactionId: string | null
}

export function useProStatus() {
  const [proStatus, setProStatus] = useLocalStorage<ProStatus>("sinkingFundProStatus", {
    isPro: false,
    activatedAt: null,
    transactionId: null,
  })
  const [isLoading, setIsLoading] = useState(false)

// Check payment status on mount
  useEffect(() => {
    checkPaymentStatus()
  }, [])

const checkPaymentStatus = async () => {
    try {
      const urlParams = new URLSearchParams(window.location.search)
      const paymentStatus = urlParams.get("status")
      const txRef = urlParams.get("tx_ref")
      const transactionId = urlParams.get("transaction_id")

if (paymentStatus === "successful" && txRef && !proStatus.isPro) {
        // Activate Pro features
        const newProStatus: ProStatus = {
          isPro: true,
          activatedAt: new Date().toISOString(),
          transactionId: transactionId || txRef,
        }
        setProStatus(newProStatus)

// Clean up URL
        window.history.replaceState({}, document.title, window.location.pathname)

// Show success notification
        setTimeout(() => {
          alert(
            "🎉 Welcome to Pro! Your premium features are now unlocked:\n\n✅ PDF Export\n✅ CSV Export\n✅ Goal Sharing\n✅ Advanced Analytics\n\nEnjoy your lifetime access!",
          )
        }, 500)
      }
    } catch (error) {
      console.error("Error checking payment status:", error)
    }
  }

const activatePro = (transactionId?: string) => {
    const newProStatus: ProStatus = {
      isPro: true,
      activatedAt: new Date().toISOString(),
      transactionId: transactionId || "manual_activation",
    }
    setProStatus(newProStatus)
  }

const deactivatePro = () => {
    setProStatus({
      isPro: false,
      activatedAt: null,
      transactionId: null,
    })
  }

return {
    isPro: proStatus.isPro,
    activatedAt: proStatus.activatedAt,
    transactionId: proStatus.transactionId,
    isLoading,
    activatePro,
    deactivatePro,
    checkPaymentStatus,
  }
}
[V0_FILE]typescriptreact:file="components/modals/share-goal-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { X, Share2, Copy, Mail, MessageCircle } from "lucide-react"
import type { Goal } from "@/types/goal"

interface ShareGoalModalProps {
  isOpen: boolean
  onClose: () => void
  goal: Goal | null
  isPro: boolean
  onProClick: () => void
}

export default function ShareGoalModal({ isOpen, onClose, goal, isPro, onProClick }: ShareGoalModalProps) {
  const [copied, setCopied] = useState(false)

if (!isOpen || !goal) return null

if (!isPro) {
    return (
      <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div className="bg-white rounded-xl p-8 max-w-md mx-auto relative">
          <button onClick={onClose} className="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
            <X className="w-6 h-6" />
          </button>
          <div className="text-center">
            <div className="bg-gradient-to-r from-pink-500 to-red-500 p-3 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
              <Share2 className="w-8 h-8 text-white" />
            </div>
            <h3 className="text-2xl font-bold mb-4">🔒 Pro Feature</h3>
            <p className="text-gray-600 mb-6">
              Goal sharing is a Pro feature. Upgrade to share your goals with family and friends for accountability!
            </p>
            <button
              onClick={onProClick}
              className="bg-gradient-to-r from-pink-500 to-red-500 text-white px-6 py-3 rounded-lg font-semibold hover:from-pink-600 hover:to-red-600 transition-all"
            >
              Upgrade to Pro - $9.99
            </button>
          </div>
        </div>
      </div>
    )
  }

const shareUrl = `${window.location.origin}/shared-goal/${btoa(
    JSON.stringify({
      id: goal.id,
      name: goal.name,
      targetAmount: goal.targetAmount,
      savedAmount: goal.savedAmount,
      targetDate: goal.targetDate,
      progress: Math.round((goal.savedAmount / goal.targetAmount) * 100),
    }),
  )}`

const shareViaEmail = () => {
    const subject = `Check out my savings goal: ${goal.name}`
    const body = `I'm saving for "${goal.name}" and wanted to share my progress with you!\n\nTarget: $${goal.targetAmount.toLocaleString()}\nSaved so far: $${goal.savedAmount.toLocaleString()}\nProgress: ${Math.round((goal.savedAmount / goal.targetAmount) * 100)}%\n\nView my goal: ${shareUrl}`
    window.location.href = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`
  }

const shareViaWhatsApp = () => {
    const message = `🎯 I'm saving for "${goal.name}"!\n💰 Target: $${goal.targetAmount.toLocaleString()}\n✅ Progress: ${Math.round((goal.savedAmount / goal.targetAmount) * 100)}%\n\nTrack my progress: ${shareUrl}`
    window.open(`https://wa.me/?text=${encodeURIComponent(message)}`, "_blank")
  }

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-xl p-8 max-w-lg mx-auto relative">
        <button onClick={onClose} className="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
          <X className="w-6 h-6" />
        </button>

<div className="text-center mb-6">
          <Share2 className="w-12 h-12 text-blue-600 mx-auto mb-4" />
          <h3 className="text-2xl font-bold mb-2">Share Your Goal</h3>
          <p className="text-gray-600">Share "{goal.name}" with family and friends for accountability!</p>
        </div>

<div className="space-y-4">
          {/* Share URL */}
          <div className="bg-gray-50 p-4 rounded-lg">
            <label className="block text-sm font-medium text-gray-700 mb-2">Share Link</label>
            <div className="flex items-center space-x-2">
              <input
                type="text"
                value={shareUrl}
                readOnly
                className="flex-1 px-3 py-2 border rounded-lg text-sm bg-white"
              />
              <button
                onClick={copyToClipboard}
                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                  copied ? "bg-green-600 text-white" : "bg-blue-600 text-white hover:bg-blue-700"
                }`}
              >
                {copied ? "Copied!" : <Copy className="w-4 h-4" />}
              </button>
            </div>
          </div>

{/* Share Options */}
          <div className="grid grid-cols-2 gap-3">
            <button
              onClick={shareViaEmail}
              className="flex items-center justify-center space-x-2 px-4 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
            >
              <Mail className="w-4 h-4" />
              <span>Email</span>
            </button>
            <button
              onClick={shareViaWhatsApp}
              className="flex items-center justify-center space-x-2 px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
            >
              <MessageCircle className="w-4 h-4" />
              <span>WhatsApp</span>
            </button>
          </div>

{/* Goal Preview */}
          <div className="bg-blue-50 p-4 rounded-lg">
            <h4 className="font-semibold text-gray-800 mb-2">Goal Preview</h4>
            <div className="text-sm text-gray-600">
              <p>
                <strong>{goal.name}</strong>
              </p>
              <p>Target: ${goal.targetAmount.toLocaleString()}</p>
              <p>Saved: ${goal.savedAmount.toLocaleString()}</p>
              <p>Progress: {Math.round((goal.savedAmount / goal.targetAmount) * 100)}%</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/modals/pro-comparison-modal.tsx" isMerged="true"
"use client"

import { X, Check, Crown } from "lucide-react"

interface ProComparisonModalProps {
  isOpen: boolean
  onClose: () => void
  onUpgrade: () => void
}

export default function ProComparisonModal({ isOpen, onClose, onUpgrade }: ProComparisonModalProps) {
  if (!isOpen) return null

const features = [
    {
      feature: "Unlimited Goals",
      free: true,
      pro: true,
      description: "Track as many savings goals as you want",
    },
    {
      feature: "Progress Analytics",
      free: true,
      pro: true,
      description: "Visual charts and progress tracking",
    },
    {
      feature: "Local Data Storage",
      free: true,
      pro: true,
      description: "Your data stays private on your device",
    },
    {
      feature: "Multi-language Support",
      free: true,
      pro: true,
      description: "English, French, and Spanish",
    },
    {
      feature: "PDF Export",
      free: false,
      pro: true,
      description: "Professional PDF reports of all goals",
    },
    {
      feature: "CSV Data Export",
      free: false,
      pro: true,
      description: "Spreadsheet-ready data export",
    },
    {
      feature: "Goal Sharing",
      free: false,
      pro: true,
      description: "Share goals with family for accountability",
    },
    {
      feature: "Advanced Analytics",
      free: false,
      pro: true,
      description: "Detailed insights and projections",
    },
    {
      feature: "Priority Support",
      free: false,
      pro: true,
      description: "Get help faster with Pro support",
    },
  ]

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-xl max-w-4xl mx-auto relative max-h-[90vh] overflow-y-auto">
        <button onClick={onClose} className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 z-10">
          <X className="w-6 h-6" />
        </button>

<div className="p-8">
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold mb-4">Choose Your Plan</h2>
            <p className="text-gray-600">Compare features and choose what works best for you</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            {/* Free Plan */}
            <div className="border-2 border-gray-200 rounded-xl p-6">
              <div className="text-center mb-6">
                <h3 className="text-xl font-bold mb-2">Free</h3>
                <div className="text-3xl font-bold text-gray-600">$0</div>
                <p className="text-gray-500">Forever</p>
              </div>
              <ul className="space-y-3">
                {features
                  .filter((f) => f.free)
                  .map((feature, index) => (
                    <li key={index} className="flex items-center space-x-2">
                      <Check className="w-4 h-4 text-green-500" />
                      <span className="text-sm">{feature.feature}</span>
                    </li>
                  ))}
                {features
                  .filter((f) => !f.free)
                  .map((feature, index) => (
                    <li key={index} className="flex items-center space-x-2 opacity-50">
                      <X className="w-4 h-4 text-gray-400" />
                      <span className="text-sm text-gray-400">{feature.feature}</span>
                    </li>
                  ))}
              </ul>
            </div>

{/* Pro Plan */}
            <div className="border-2 border-gradient-to-r from-pink-500 to-red-500 rounded-xl p-6 relative bg-gradient-to-br from-pink-50 to-red-50">
              <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                <span className="bg-gradient-to-r from-pink-500 to-red-500 text-white px-4 py-1 rounded-full text-sm font-bold">
                  MOST POPULAR
                </span>
              </div>
              <div className="text-center mb-6">
                <div className="flex items-center justify-center space-x-2 mb-2">
                  <Crown className="w-6 h-6 text-yellow-500" />
                  <h3 className="text-xl font-bold">Pro</h3>
                </div>
                <div className="text-3xl font-bold text-pink-600">$9.99</div>
                <p className="text-gray-500">One-time payment</p>
              </div>
              <ul className="space-y-3">
                {features.map((feature, index) => (
                  <li key={index} className="flex items-center space-x-2">
                    <Check className="w-4 h-4 text-green-500" />
                    <span className="text-sm font-medium">{feature.feature}</span>
                  </li>
                ))}
              </ul>
              <button
                onClick={onUpgrade}
                className="w-full mt-6 bg-gradient-to-r from-pink-500 to-red-500 text-white py-3 rounded-lg font-bold hover:from-pink-600 hover:to-red-600 transition-all"
              >
                Upgrade to Pro
              </button>
            </div>

{/* Enterprise placeholder */}
            <div className="border-2 border-gray-200 rounded-xl p-6 opacity-75">
              <div className="text-center mb-6">
                <h3 className="text-xl font-bold mb-2">Enterprise</h3>
                <div className="text-3xl font-bold text-gray-600">Custom</div>
                <p className="text-gray-500">Contact us</p>
              </div>
              <ul className="space-y-3">
                <li className="flex items-center space-x-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Everything in Pro</span>
                </li>
                <li className="flex items-center space-x-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Team collaboration</span>
                </li>
                <li className="flex items-center space-x-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">Custom branding</span>
                </li>
                <li className="flex items-center space-x-2">
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm">API access</span>
                </li>
              </ul>
              <button className="w-full mt-6 bg-gray-300 text-gray-500 py-3 rounded-lg font-bold cursor-not-allowed">
                Coming Soon
              </button>
            </div>
          </div>

{/* Feature Comparison Table */}
          <div className="overflow-x-auto">
            <table className="w-full border-collapse">
              <thead>
                <tr className="border-b-2">
                  <th className="text-left py-3 px-4">Feature</th>
                  <th className="text-center py-3 px-4">Free</th>
                  <th className="text-center py-3 px-4">Pro</th>
                </tr>
              </thead>
              <tbody>
                {features.map((feature, index) => (
                  <tr key={index} className="border-b">
                    <td className="py-3 px-4">
                      <div>
                        <div className="font-medium">{feature.feature}</div>
                        <div className="text-sm text-gray-500">{feature.description}</div>
                      </div>
                    </td>
                    <td className="text-center py-3 px-4">
                      {feature.free ? (
                        <Check className="w-5 h-5 text-green-500 mx-auto" />
                      ) : (
                        <X className="w-5 h-5 text-gray-400 mx-auto" />
                      )}
                    </td>
                    <td className="text-center py-3 px-4">
                      <Check className="w-5 h-5 text-green-500 mx-auto" />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true"
"use client"

import React from "react"

import { useState } from "react"
import { X, Check, AlertCircle, Info } from "lucide-react"

interface Toast {
  id: string
  type: "success" | "error" | "info" | "warning"
  title: string
  message?: string
  duration?: number
}

interface ToastContextType {
  toasts: Toast[]
  addToast: (toast: Omit<Toast, "id">) => void
  removeToast: (id: string) => void
}

const ToastContext = React.createContext<ToastContextType | undefined>(undefined)

export function ToastProvider({ children }: { children: React.ReactNode }) {
  const [toasts, setToasts] = useState<Toast[]>([])

const addToast = (toast: Omit<Toast, "id">) => {
    const id = Math.random().toString(36).substr(2, 9)
    const newToast = { ...toast, id }
    setToasts((prev) => [...prev, newToast])

// Auto remove after duration
    setTimeout(() => {
      removeToast(id)
    }, toast.duration || 5000)
  }

const removeToast = (id: string) => {
    setToasts((prev) => prev.filter((toast) => toast.id !== id))
  }

return (
    <ToastContext.Provider value={{ toasts, addToast, removeToast }}>
      {children}
      <ToastContainer toasts={toasts} onRemove={removeToast} />
    </ToastContext.Provider>
  )
}

function ToastContainer({ toasts, onRemove }: { toasts: Toast[]; onRemove: (id: string) => void }) {
  if (toasts.length === 0) return null

return (
    <div className="fixed top-4 right-4 z-50 space-y-2">
      {toasts.map((toast) => (
        <ToastItem key={toast.id} toast={toast} onRemove={onRemove} />
      ))}
    </div>
  )
}

function ToastItem({ toast, onRemove }: { toast: Toast; onRemove: (id: string) => void }) {
  const icons = {
    success: <Check className="w-5 h-5 text-green-600" />,
    error: <AlertCircle className="w-5 h-5 text-red-600" />,
    warning: <AlertCircle className="w-5 h-5 text-yellow-600" />,
    info: <Info className="w-5 h-5 text-blue-600" />,
  }

const bgColors = {
    success: "bg-green-50 border-green-200",
    error: "bg-red-50 border-red-200",
    warning: "bg-yellow-50 border-yellow-200",
    info: "bg-blue-50 border-blue-200",
  }

return (
    <div className={`${bgColors[toast.type]} border rounded-lg p-4 shadow-lg max-w-sm animate-slide-in`}>
      <div className="flex items-start space-x-3">
        {icons[toast.type]}
        <div className="flex-1">
          <h4 className="font-semibold text-gray-900">{toast.title}</h4>
          {toast.message && <p className="text-sm text-gray-600 mt-1">{toast.message}</p>}
        </div>
        <button onClick={() => onRemove(toast.id)} className="text-gray-400 hover:text-gray-600">
          <X className="w-4 h-4" />
        </button>
      </div>
    </div>
  )
}

export function useToast() {
  const context = React.useContext(ToastContext)
  if (!context) {
    throw new Error("useToast must be used within ToastProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/blog-list-page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import Image from "next/image"
import { Clock, Calendar, ArrowRight } from "lucide-react"

export default function BlogListPage() {
  const blogPosts = [
    {
      slug: "getting-started",
      title: "How to Start a Sinking Fund",
      excerpt:
        "Learn what a sinking fund is and how to set it up in minutes. Perfect for beginners looking to improve their financial planning.",
      image: "/images/blog/getting-started-hero.png",
      readTime: "5 min read",
      publishDate: "2025-01-03",
      category: "Getting Started",
    },
    {
      slug: "best-categories",
      title: "Best Sinking Fund Categories for 2025",
      excerpt:
        "Discover the top must-have categories for your savings goals this year. From emergency funds to vacation planning.",
      image: "/images/blog/best-categories.png",
      readTime: "7 min read",
      publishDate: "2025-01-02",
      category: "Planning",
    },
    {
      slug: "privacy-budgeting",
      title: "Why Privacy Matters in Budget Tracking",
      excerpt:
        "Learn why local storage budgeting tools are better for your financial privacy and security than cloud-based alternatives.",
      image: "/images/blog/privacy-budgeting.png",
      readTime: "6 min read",
      publishDate: "2025-01-01",
      category: "Privacy",
    },
    {
      slug: "sinking-vs-emergency",
      title: "Sinking Funds vs Emergency Funds: Know the Difference",
      excerpt:
        "Understand when to use sinking funds versus emergency funds. Learn the key differences and how both fit into your financial strategy.",
      image: "/images/blog/sinking-vs-emergency.png",
      readTime: "8 min read",
      publishDate: "2024-12-30",
      category: "Strategy",
    },
    {
      slug: "stay-consistent",
      title: "How to Stay Consistent with Sinking Funds",
      excerpt:
        "Proven motivation strategies that actually work. Learn how to maintain your savings momentum even when motivation wanes.",
      image: "/images/blog/stay-consistent.png",
      readTime: "6 min read",
      publishDate: "2024-12-28",
      category: "Motivation",
    },
  ]

const categories = ["All", "Getting Started", "Planning", "Privacy", "Strategy", "Motivation"]

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-12">
        <div className="container mx-auto px-4">
          <div className="flex items-center space-x-3 mb-6">
            <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity">
              <Image
                src="/images/logo.jpeg"
                alt="Sinking Fund Tracker Logo"
                width={40}
                height={40}
                className="rounded-lg"
              />
              <span className="text-2xl font-bold">Sinking Fund Tracker</span>
            </Link>
          </div>
          <h1 className="text-4xl md:text-5xl font-bold mb-4">Expert Savings Guides</h1>
          <p className="text-xl opacity-90 max-w-2xl">
            Learn from our comprehensive guides on sinking funds, savings strategies, and personal finance tips.
          </p>
        </div>
      </header>

{/* Breadcrumb */}
      <nav className="bg-white border-b py-4">
        <div className="container mx-auto px-4">
          <div className="flex items-center space-x-2 text-sm text-gray-600">
            <Link href="/" className="hover:text-purple-600 transition-colors">
              Home
            </Link>
            <span>/</span>
            <span className="text-gray-900 font-medium">Blog</span>
          </div>
        </div>
      </nav>

{/* Blog Content */}
      <main className="py-12">
        <div className="container mx-auto px-4">
          {/* Category Filter */}
          <div className="flex flex-wrap gap-2 mb-8">
            {categories.map((category) => (
              <button
                key={category}
                className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
                  category === "All"
                    ? "bg-purple-600 text-white"
                    : "bg-white text-gray-600 hover:bg-purple-50 hover:text-purple-600"
                }`}
              >
                {category}
              </button>
            ))}
          </div>

{/* Featured Post */}
          <div className="mb-12">
            <div className="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-0">
                <div className="relative h-64 lg:h-auto">
                  <Image
                    src={blogPosts[0].image || "/placeholder.svg"}
                    alt={blogPosts[0].title}
                    fill
                    className="object-cover"
                  />
                  <div className="absolute top-4 left-4">
                    <span className="bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-medium">
                      Featured
                    </span>
                  </div>
                </div>
                <div className="p-8 flex flex-col justify-center">
                  <div className="flex items-center space-x-4 text-sm text-gray-600 mb-4">
                    <span className="bg-purple-100 text-purple-700 px-3 py-1 rounded-full font-medium">
                      {blogPosts[0].category}
                    </span>
                    <div className="flex items-center space-x-1">
                      <Calendar className="w-4 h-4" />
                      <span>{new Date(blogPosts[0].publishDate).toLocaleDateString()}</span>
                    </div>
                    <div className="flex items-center space-x-1">
                      <Clock className="w-4 h-4" />
                      <span>{blogPosts[0].readTime}</span>
                    </div>
                  </div>
                  <h2 className="text-2xl lg:text-3xl font-bold text-gray-900 mb-4">{blogPosts[0].title}</h2>
                  <p className="text-gray-600 mb-6 leading-relaxed">{blogPosts[0].excerpt}</p>
                  <Link
                    href={`/blog/${blogPosts[0].slug}`}
                    className="inline-flex items-center space-x-2 text-purple-600 hover:text-purple-700 font-semibold transition-colors"
                  >
                    <span>Read Full Article</span>
                    <ArrowRight className="w-4 h-4" />
                  </Link>
                </div>
              </div>
            </div>
          </div>

{/* Blog Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {blogPosts.slice(1).map((post) => (
              <article
                key={post.slug}
                className="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1"
              >
                <div className="relative h-48">
                  <Image src={post.image || "/placeholder.svg"} alt={post.title} fill className="object-cover" />
                  <div className="absolute top-4 left-4">
                    <span className="bg-white/90 backdrop-blur-sm text-gray-700 px-3 py-1 rounded-full text-sm font-medium">
                      {post.category}
                    </span>
                  </div>
                </div>
                <div className="p-6">
                  <div className="flex items-center space-x-4 text-sm text-gray-600 mb-3">
                    <div className="flex items-center space-x-1">
                      <Calendar className="w-4 h-4" />
                      <span>{new Date(post.publishDate).toLocaleDateString()}</span>
                    </div>
                    <div className="flex items-center space-x-1">
                      <Clock className="w-4 h-4" />
                      <span>{post.readTime}</span>
                    </div>
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-3 line-clamp-2">{post.title}</h3>
                  <p className="text-gray-600 mb-4 line-clamp-3">{post.excerpt}</p>
                  <Link
                    href={`/blog/${post.slug}`}
                    className="inline-flex items-center space-x-2 text-purple-600 hover:text-purple-700 font-semibold transition-colors"
                  >
                    <span>Read More</span>
                    <ArrowRight className="w-4 h-4" />
                  </Link>
                </div>
              </article>
            ))}
          </div>

{/* Newsletter Signup */}
          <div className="mt-16 bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl p-8 text-white text-center">
            <h3 className="text-2xl font-bold mb-4">Stay Updated with Our Latest Tips</h3>
            <p className="text-purple-100 mb-6 max-w-2xl mx-auto">
              Get expert savings advice, new features, and exclusive tips delivered to your inbox.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
              <input
                type="email"
                placeholder="Enter your email"
                className="flex-1 px-4 py-3 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-white"
              />
              <button className="bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
                Subscribe
              </button>
            </div>
          </div>

{/* Back to App */}
          <div className="mt-12 text-center">
            <Link
              href="/#dashboard"
              className="inline-flex items-center space-x-2 bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-700 transition-colors shadow-lg hover:shadow-xl"
            >
              <span>Start Tracking Your Goals</span>
              <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]png:file="public/images/blog/getting-started-hero.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/getting-started-hero-wCmOjIeBwu1VnarNDFRiawFIuFOrRL.png" isMerged="true"
[V0_FILE]png:file="public/images/blog/best-categories.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/best-categories-ysMmwut06AfurnxFN5T1CTiaaXGbBF.png" isMerged="true"
[V0_FILE]png:file="public/images/blog/privacy-budgeting.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/privacy-budgeting-oF81Kyqo898668Z7CPp8ItVHiu5XDo.png" isMerged="true"
[V0_FILE]png:file="public/images/blog/sinking-vs-emergency.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/sinking-vs-emergency-eycNvR7U2DkdAUp46EnkWj74w4dK6q.png" isMerged="true"
[V0_FILE]png:file="public/images/blog/financial-planning-overview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/financial-planning-overview-VtA22n18rscXtSYO6D94QLSVr1n9Qq.png" isMerged="true"
[V0_FILE]png:file="public/images/blog/savings-tips-hero.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/savings-tips-hero-g1JTdBOlzxdU4V78xApNcqyVK1mg3N.png" isMerged="true"
[V0_FILE]png:file="public/images/blog/budget-tracking-tools.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/budget-tracking-tools-QBqXrkyNiuEgrcicq0U3T1sGYQwO2m.png" isMerged="true"
[V0_FILE]png:file="public/images/blog/stay-consistent.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/blog/stay-consistent-WYLjKjz3fTLclbfLshAc5zmY0bVuTU.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Header from "@/components/header"
import HeroSection from "@/components/hero-section"
import Dashboard from "@/components/dashboard"
import TrustedBy from "@/components/trusted-by"
import TestimonialsSection from "@/components/testimonials-section"
import BlogSection from "@/components/blog-section"
import FAQSection from "@/components/faq-section"
import ContactSection from "@/components/contact-section"
import Footer from "@/components/footer"
import ProModal from "@/components/modals/pro-modal"
import ProComparisonModal from "@/components/modals/pro-comparison-modal"
import LegalModal from "@/components/modals/legal-modal"
import ShareGoalModal from "@/components/modals/share-goal-modal"
import { ToastProvider, useToast } from "@/components/ui/toast"
import type { Goal } from "@/types/goal"
import { useLocalStorage } from "@/hooks/use-local-storage"
import { useProStatus } from "@/hooks/use-pro-status"
import { TranslationProvider } from "@/contexts/translation-context"

function AppContent() {
  const [goals, setGoals] = useLocalStorage<Goal[]>("sinkingFundGoals", [])
  const [language, setLanguage] = useLocalStorage("sinkingFundLanguage", "en")
  const { isPro, activatePro } = useProStatus()
  const [activeModal, setActiveModal] = useState<string | null>(null)
  const [activeLegalPage, setActiveLegalPage] = useState<string | null>(null)
  const [shareGoal, setShareGoal] = useState<Goal | null>(null)
  const { addToast } = useToast()

const addGoal = (goalData: Omit<Goal, "id" | "createdDate">) => {
    try {
      const newGoal: Goal = {
        ...goalData,
        id: Date.now(),
        createdDate: new Date().toISOString(),
      }
      setGoals([...goals, newGoal])
      addToast({
        type: "success",
        title: "Goal Added!",
        message: `"${goalData.name}" has been added to your savings goals.`,
      })
    } catch (error) {
      console.error("Error adding goal:", error)
      addToast({
        type: "error",
        title: "Error",
        message: "Failed to add goal. Please try again.",
      })
    }
  }

const updateGoal = (id: number, field: keyof Goal, value: any) => {
    try {
      setGoals(
        goals.map((goal) => {
          if (goal.id === id) {
            if (field === "savedAmount") {
              const newAmount = Math.min(Number.parseFloat(value) || 0, goal.targetAmount)
              const updatedGoal = { ...goal, [field]: newAmount }

// Check if goal is completed
              if (newAmount >= goal.targetAmount && goal.savedAmount < goal.targetAmount) {
                addToast({
                  type: "success",
                  title: "🎉 Goal Achieved!",
                  message: `Congratulations! You've reached your "${goal.name}" goal!`,
                })
              }

return updatedGoal
            }
            return { ...goal, [field]: value }
          }
          return goal
        }),
      )
    } catch (error) {
      console.error("Error updating goal:", error)
      addToast({
        type: "error",
        title: "Update Failed",
        message: "Failed to update goal. Please try again.",
      })
    }
  }

const deleteGoal = (id: number) => {
    try {
      const goalToDelete = goals.find((g) => g.id === id)
      if (confirm(`Are you sure you want to delete "${goalToDelete?.name}"?`)) {
        setGoals(goals.filter((goal) => goal.id !== id))
        addToast({
          type: "info",
          title: "Goal Deleted",
          message: `"${goalToDelete?.name}" has been removed.`,
        })
      }
    } catch (error) {
      console.error("Error deleting goal:", error)
      addToast({
        type: "error",
        title: "Delete Failed",
        message: "Failed to delete goal. Please try again.",
      })
    }
  }

const openModal = (modalId: string) => setActiveModal(modalId)
  const closeModal = () => setActiveModal(null)

const openLegalPage = (pageId: string) => {
    setActiveLegalPage(pageId)
    setActiveModal("legal")
  }

const handleShareGoal = (goal: Goal) => {
    setShareGoal(goal)
    setActiveModal("share")
  }

const handleProUpgrade = () => {
    // Redirect to Flutterwave payment
    window.location.href = "https://flutterwave.com/pay/aepushnzbwox"
  }

return (
    <TranslationProvider language={language}>
      <div className="bg-gray-50 min-h-screen">
        <Header language={language} setLanguage={setLanguage} isProUser={isPro} onProClick={() => openModal("pro")} />

<Dashboard
          goals={goals}
          onAddGoal={addGoal}
          onUpdateGoal={updateGoal}
          onDeleteGoal={deleteGoal}
          onShareGoal={handleShareGoal}
          isProUser={isPro}
          onProClick={() => openModal("pro")}
        />

<TrustedBy />
        <TestimonialsSection />
        <BlogSection />
        <FAQSection />
        <ContactSection />
        <Footer onOpenLegalPage={openLegalPage} onProClick={() => openModal("comparison")} />

{/* Modals */}
        <ProModal isOpen={activeModal === "pro"} onClose={closeModal} onUpgrade={handleProUpgrade} />

<ShareGoalModal
          isOpen={activeModal === "share"}
          onClose={closeModal}
          goal={shareGoal}
          isPro={isPro}
          onProClick={() => openModal("pro")}
        />
      </div>
    </TranslationProvider>
  )
}

export default function Home() {
  return (
    <ToastProvider>
      <AppContent />
    </ToastProvider>
  )
}
[V0_FILE]png:file="public/images/testimonials/sarah-chen.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/testimonials/sarah-chen-ncQvlrwtNSd1jnTYWLWotAKm4mexUV.png" isMerged="true"
[V0_FILE]png:file="public/images/testimonials/marcus-johnson.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/testimonials/marcus-johnson-SNyFNUclEtSFKwAEuTFJR1U4tgSxRn.png" isMerged="true"
[V0_FILE]png:file="public/images/testimonials/emily-rodriguez.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/testimonials/emily-rodriguez-NrfsqhT1zrAmcu6ClBXrvqAYNuMd7W.png" isMerged="true"
[V0_FILE]png:file="public/images/testimonials/david-thompson.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/testimonials/david-thompson-nHpezMuF2mk05uACqzbkbndJYZw6Ip.png" isMerged="true"
[V0_FILE]typescriptreact:file="data/legal-pages.ts" isEdit="true" isQuickEdit="true" isMerged="true"
export const legalPages: Record<string, { title: string; content: string }> = {
  terms: {
    title: "Terms of Use",
    content: `
      <img src="/images/hero-image.png" alt="Sinking Fund Tracker Terms of Use" class="w-full h-48 object-cover rounded-lg mb-6">
      <h1 class="text-3xl font-bold mb-6">Terms of Use</h1>
      <p class="text-sm text-gray-500 mb-6">Last updated: January 2025</p>
      
      <h2 class="text-2xl font-semibold mb-4">1. Acceptance of Terms</h2>
      <p class="mb-4">By accessing and using the Sinking Fund Tracker application ("Service"), you accept and agree to be bound by the terms and provisions of this agreement.</p>
      
      <h2 class="text-2xl font-semibold mb-4">2. Description of Service</h2>
      <p class="mb-4">Sinking Fund Tracker is a personal finance application that helps users track savings goals. The service operates entirely within your browser using local storage technology.</p>
      
      <h2 class="text-2xl font-semibold mb-4">3. User Responsibilities</h2>
      <p class="mb-4">You are responsible for:</p>
      <ul class="list-disc pl-6 mb-4">
        <li>Maintaining the confidentiality of your data</li>
        <li>Backing up your data as needed</li>
        <li>Using the service for lawful purposes only</li>
        <li>Not attempting to reverse engineer or modify the application</li>
      </ul>
      
      <h2 class="text-2xl font-semibold mb-4">4. Data Storage and Privacy</h2>
      <p class="mb-4">All data is stored locally on your device. We do not collect, store, or transmit your personal or financial information to external servers.</p>
      
      <h2 class="text-2xl font-semibold mb-4">5. Pro Features and Payment</h2>
      <p class="mb-4">Pro features are available through a one-time payment processed by Flutterwave. Payment unlocks additional functionality permanently for your browser.</p>
      
      <h2 class="text-2xl font-semibold mb-4">6. Disclaimer of Warranties</h2>
      <p class="mb-4">The service is provided "as is" without warranties of any kind. We do not guarantee the accuracy, completeness, or usefulness of any information.</p>
      
      <h2 class="text-2xl font-semibold mb-4">7. Limitation of Liability</h2>
      <p class="mb-4">In no event shall Sinking Fund Tracker be liable for any indirect, incidental, special, consequential, or punitive damages resulting from your use of the service.</p>
      
      <h2 class="text-2xl font-semibold mb-4">8. Changes to Terms</h2>
      <p class="mb-4">We reserve the right to modify these terms at any time. Changes will be effective immediately upon posting.</p>
      
      <h2 class="text-2xl font-semibold mb-4">9. Contact Information</h2>
      <p class="mb-4">For questions about these terms, please contact us at banjobabatundeade@gmail.com</p>
    `,
  },
  privacy: {
    title: "Privacy Policy",
    content: `
      <img src="/images/hero-image.png" alt="Sinking Fund Tracker Privacy Policy" class="w-full h-48 object-cover rounded-lg mb-6">
      <h1 class="text-3xl font-bold mb-6">Privacy Policy</h1>
      <p class="text-sm text-gray-500 mb-6">Last updated: January 2025</p>
      
      <h2 class="text-2xl font-semibold mb-4">Our Privacy Commitment</h2>
      <p class="mb-4">Sinking Fund Tracker is built with privacy as a fundamental principle. We believe your financial data should remain under your control at all times.</p>
      
      <h2 class="text-2xl font-semibold mb-4">What Information We Collect</h2>
      <p class="mb-4">We collect NO personal information. The application works entirely within your browser, and all data remains on your device.</p>
      
      <h2 class="text-2xl font-semibold mb-4">How We Store Your Data</h2>
      <p class="mb-4">All your savings goals, amounts, and progress are stored using your browser's local storage. This means:</p>
      <ul class="list-disc pl-6 mb-4">
        <li>Data never leaves your device</li>
        <li>No user accounts or passwords required</li>
        <li>No external servers involved</li>
        <li>You have complete control over your data</li>
      </ul>
      
      <h2 class="text-2xl font-semibold mb-4">Third-Party Services</h2>
      <p class="mb-4">We use minimal third-party services:</p>
      <ul class="list-disc pl-6 mb-4">
        <li><strong>Flutterwave:</strong> For processing Pro feature payments (only when you choose to upgrade)</li>
        <li><strong>CDN Services:</strong> For loading fonts and libraries (no tracking involved)</li>
      </ul>
      
      <h2 class="text-2xl font-semibold mb-4">Cookies and Tracking</h2>
      <p class="mb-4">We do not use cookies or any tracking technologies. No analytics, no tracking pixels, no behavioral monitoring.</p>
      
      <h2 class="text-2xl font-semibold mb-4">Data Backup and Export</h2>
      <p class="mb-4">Since data is stored locally, you're responsible for backing up your information. Pro users can export data as PDF or CSV for backup purposes.</p>
      
      <h2 class="text-2xl font-semibold mb-4">Data Deletion</h2>
      <p class="mb-4">You can delete all your data at any time by clearing your browser's local storage for this site. This action is permanent and cannot be undone.</p>
      
      <h2 class="text-2xl font-semibold mb-4">Contact Information</h2>
      <p class="mb-4">If you have questions about this privacy policy, contact us at banjobabatundeade@gmail.com</p>
      
      <h2 class="text-2xl font-semibold mb-4">Changes to This Policy</h2>
      <p class="mb-4">Any changes to this privacy policy will be posted on this page with an updated revision date.</p>
    `,
  },
  licenses: {
    title: "Legal Information & Licenses",
    content: `
      <img src="/images/hero-image.png" alt="Sinking Fund Tracker Legal Information" class="w-full h-48 object-cover rounded-lg mb-6">
      <h1 class="text-3xl font-bold mb-6">Legal Information & Licenses</h1>
      <p class="text-sm text-gray-500 mb-6">Last updated: January 2025</p>
      
      <h2 class="text-2xl font-semibold mb-4">Software Licenses</h2>
      <p class="mb-4">This application uses the following open-source libraries and their respective licenses:</p>
      
      <h3 class="text-xl font-semibold mb-3">Tailwind CSS</h3>
      <p class="mb-2">License: MIT License</p>
      <p class="mb-4 text-gray-600">Used for styling and responsive design components.</p>
      
      <h3 class="text-xl font-semibold mb-3">Chart.js</h3>
      <p class="mb-2">License: MIT License</p>
      <p class="mb-4 text-gray-600">Used for creating analytics charts and data visualizations.</p>
      
      <h3 class="text-xl font-semibold mb-3">Lucide React</h3>
      <p class="mb-2">License: ISC License</p>
      <p class="mb-4 text-gray-600">Used for icons throughout the application interface.</p>
      
      <h3 class="text-xl font-semibold mb-3">Next.js</h3>
      <p class="mb-2">License: MIT License</p>
      <p class="mb-4 text-gray-600">Used as the React framework for the application.</p>
      
      <h2 class="text-2xl font-semibold mb-4">Trademark Information</h2>
      <p class="mb-4">Sinking Fund Tracker™ is a trademark of our organization. All rights reserved.</p>
      
      <h2 class="text-2xl font-semibold mb-4">Third-Party Trademarks</h2>
      <p class="mb-4">All third-party trademarks, logos, and brand names mentioned are the property of their respective owners and are used for identification purposes only.</p>
      
      <h2 class="text-2xl font-semibold mb-4">Image Credits</h2>
      <p class="mb-4">Images used in this application are sourced from:</p>
      <ul class="list-disc pl-6 mb-4">
        <li>Custom illustrations created specifically for this application</li>
        <li>Generated images optimized for web performance</li>
      </ul>
      
      <h2 class="text-2xl font-semibold mb-4">Copyright Notice</h2>
      <p class="mb-4">© 2025 Sinking Fund Tracker. All rights reserved. No part of this application may be reproduced, distributed, or transmitted without prior written permission.</p>
      
      <h2 class="text-2xl font-semibold mb-4">DMCA Compliance</h2>
      <p class="mb-4">We respect intellectual property rights. If you believe your work has been used inappropriately, please contact us at banjobabatundeade@gmail.com</p>
      
      <h2 class="text-2xl font-semibold mb-4">Governing Law</h2>
      <p class="mb-4">This application and these terms are governed by applicable international laws and regulations.</p>
      
      <h2 class="text-2xl font-semibold mb-4">Contact for Legal Matters</h2>
      <p class="mb-4">For legal inquiries, intellectual property matters, or licensing questions, contact: banjobabatundeade@gmail.com</p>
    `,
  },
}
[V0_FILE]typescriptreact:file="components/analytics-charts.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { FileText, Download, BarChart3, Lock } from "lucide-react"
import type { Goal } from "@/types/goal"
import { useTranslation } from "@/contexts/translation-context"

interface AnalyticsChartsProps {
  goals: Goal[]
  isProUser: boolean
  onProClick: () => void
}

// Simple CSS-based chart components to avoid WebAssembly issues
function SimpleProgressChart({ goals }: { goals: Goal[] }) {
  if (goals.length === 0) return null

return (
    <div className="space-y-4">
      <h4 className="font-semibold text-center mb-4">Progress by Goal</h4>
      {goals.map((goal, index) => {
        const progress = goal.targetAmount > 0 ? (goal.savedAmount / goal.targetAmount) * 100 : 0
        const colors = ["bg-purple-500", "bg-blue-500", "bg-green-500", "bg-yellow-500", "bg-red-500", "bg-pink-500"]

return (
          <div key={goal.id} className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="font-medium truncate">{goal.name}</span>
              <span className="text-gray-600">{Math.round(progress)}%</span>
            </div>
            <div className="w-full bg-gray-200 rounded-full h-3">
              <div
                className={`h-3 rounded-full transition-all duration-500 ${colors[index % colors.length]}`}
                style={{ width: `${Math.min(progress, 100)}%` }}
              />
            </div>
            <div className="flex justify-between text-xs text-gray-500">
              <span>${goal.savedAmount.toLocaleString()}</span>
              <span>${goal.targetAmount.toLocaleString()}</span>
            </div>
          </div>
        )
      })}
    </div>
  )
}

function SimpleSavingsOverview({ goals }: { goals: Goal[] }) {
  if (goals.length === 0) return null

const totalSaved = goals.reduce((sum, goal) => sum + goal.savedAmount, 0)
  const totalTarget = goals.reduce((sum, goal) => sum + goal.targetAmount, 0)
  const colors = ["bg-purple-500", "bg-blue-500", "bg-green-500", "bg-yellow-500", "bg-red-500", "bg-pink-500"]

return (
    <div className="space-y-4">
      <h4 className="font-semibold text-center mb-4">Savings Distribution</h4>
      <div className="grid grid-cols-2 gap-4 mb-4">
        <div className="text-center">
          <div className="text-2xl font-bold text-green-600">${totalSaved.toLocaleString()}</div>
          <div className="text-sm text-gray-600">Total Saved</div>
        </div>
        <div className="text-center">
          <div className="text-2xl font-bold text-purple-600">${totalTarget.toLocaleString()}</div>
          <div className="text-sm text-gray-600">Total Target</div>
        </div>
      </div>
      <div className="space-y-3">
        {goals.map((goal, index) => {
          const percentage = totalSaved > 0 ? (goal.savedAmount / totalSaved) * 100 : 0
          return (
            <div key={goal.id} className="flex items-center space-x-3">
              <div className={`w-4 h-4 rounded ${colors[index % colors.length]}`} />
              <div className="flex-1">
                <div className="flex justify-between">
                  <span className="text-sm font-medium truncate">{goal.name}</span>
                  <span className="text-sm text-gray-600">{percentage.toFixed(1)}%</span>
                </div>
                <div className="text-xs text-gray-500">${goal.savedAmount.toLocaleString()}</div>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default function AnalyticsCharts({ goals, isProUser, onProClick }: AnalyticsChartsProps) {
  const { t } = useTranslation()

// PDF Export - ONLY for Pro users
  const handleExportPDF = () => {
    // Block access for free users
    if (!isProUser) {
      onProClick()
      return
    }

// Pro users only - Generate PDF content
    const pdfContent = `
SINKING FUND TRACKER - PRO SAVINGS REPORT
Generated on: ${new Date().toLocaleDateString()}

SUMMARY:
- Total Goals: ${goals.length}
- Total Saved: $${goals.reduce((sum, goal) => sum + goal.savedAmount, 0).toLocaleString()}
- Total Target: $${goals.reduce((sum, goal) => sum + goal.targetAmount, 0).toLocaleString()}

DETAILED BREAKDOWN:
${goals
  .map((goal) => {
    const progress = goal.targetAmount > 0 ? Math.round((goal.savedAmount / goal.targetAmount) * 100) : 0
    return `
Goal: ${goal.name}
Target: $${goal.targetAmount.toLocaleString()}
Saved: $${goal.savedAmount.toLocaleString()}
Progress: ${progress}%
Target Date: ${goal.targetDate}
Remaining: $${(goal.targetAmount - goal.savedAmount).toLocaleString()}
`
  })
  .join("\n")}

const blob = new Blob([pdfContent], { type: "text/plain" })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `sinking-fund-pro-report-${new Date().toISOString().split("T")[0]}.txt`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(url)

alert("📄 Pro PDF Report downloaded successfully!")
  }

// CSV Export - ONLY for Pro users
  const handleExportCSV = () => {
    // Block access for free users
    if (!isProUser) {
      onProClick()
      return
    }

// Pro users only - Generate CSV
    let csvContent = "Goal Name,Target Amount,Saved Amount,Progress %,Target Date,Created Date,Remaining Amount\n"
    goals.forEach((goal) => {
      const progress = goal.targetAmount > 0 ? Math.round((goal.savedAmount / goal.targetAmount) * 100) : 0
      const remaining = goal.targetAmount - goal.savedAmount
      csvContent += `"${goal.name}",${goal.targetAmount},${goal.savedAmount},${progress}%,${goal.targetDate},${goal.createdDate},${remaining}\n`
    })

const blob = new Blob([csvContent], { type: "text/csv" })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `sinking-fund-pro-data-${new Date().toISOString().split("T")[0]}.csv`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(url)

alert("📊 Pro CSV Export completed successfully!")
  }

return (
    <div className="bg-white/95 backdrop-blur-sm border border-white/20 rounded-xl p-6 mb-8">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 gap-4">
        <h3 className="text-xl font-semibold">{t("analytics.title")}</h3>
        <div className="flex flex-wrap gap-2">
          {/* PDF Export Button - PRO ONLY */}
          <button
            onClick={handleExportPDF}
            className={`relative flex items-center space-x-2 px-4 py-2 rounded-lg transition-all text-sm font-medium ${
              isProUser
                ? "bg-red-600 text-white hover:bg-red-700 shadow-md hover:shadow-lg cursor-pointer"
                : "bg-gray-200 text-gray-400 cursor-not-allowed border-2 border-dashed border-gray-300"
            }`}
            title={isProUser ? "Export your goals as PDF report" : "🔒 Pro Feature - Upgrade to unlock PDF export"}
          >
            {!isProUser && <Lock className="w-3 h-3 mr-1 text-gray-400" />}
            <FileText className={`w-4 h-4 ${!isProUser ? "text-gray-400" : ""}`} />
            <span>Export PDF</span>
            {!isProUser && (
              <span className="absolute -top-2 -right-2 bg-gradient-to-r from-pink-500 to-red-500 text-white text-xs px-2 py-1 rounded-full font-bold shadow-lg animate-pulse">
                PRO
              </span>
            )}
          </button>

{/* CSV Export Button - PRO ONLY */}
          <button
            onClick={handleExportCSV}
            className={`relative flex items-center space-x-2 px-4 py-2 rounded-lg transition-all text-sm font-medium ${
              isProUser
                ? "bg-green-600 text-white hover:bg-green-700 shadow-md hover:shadow-lg cursor-pointer"
                : "bg-gray-200 text-gray-400 cursor-not-allowed border-2 border-dashed border-gray-300"
            }`}
            title={isProUser ? "Export your data as CSV file" : "🔒 Pro Feature - Upgrade to unlock CSV export"}
          >
            {!isProUser && <Lock className="w-3 h-3 mr-1 text-gray-400" />}
            <Download className={`w-4 h-4 ${!isProUser ? "text-gray-400" : ""}`} />
            <span>Export CSV</span>
            {!isProUser && (
              <span className="absolute -top-2 -right-2 bg-gradient-to-r from-pink-500 to-red-500 text-white text-xs px-2 py-1 rounded-full font-bold shadow-lg animate-pulse">
                PRO
              </span>
            )}
          </button>
        </div>
      </div>

{/* Pro Feature Promotion for Free Users */}
      {!isProUser && goals.length > 0 && (
        <div className="mb-6 p-6 bg-gradient-to-br from-pink-50 via-red-50 to-orange-50 border-2 border-pink-200 rounded-xl shadow-sm">
          <div className="flex items-center space-x-4">
            <div className="bg-gradient-to-r from-pink-500 to-red-500 p-3 rounded-full shadow-lg">
              <Lock className="w-6 h-6 text-white" />
            </div>
            <div className="flex-1">
              <h4 className="font-bold text-gray-800 text-lg">🔒 Export Features Locked</h4>
              <p className="text-gray-600 mb-2">
                PDF and CSV exports are exclusive Pro features. Upgrade now to unlock professional data export
                capabilities.
              </p>
              <div className="flex items-center space-x-4 text-sm text-gray-500">
                <span>✨ Professional PDF reports with charts</span>
                <span>📊 Spreadsheet-ready CSV files</span>
                <span>🔄 Unlimited exports</span>
              </div>
            </div>
            <button
              onClick={onProClick}
              className="bg-gradient-to-r from-pink-500 to-red-500 text-white px-6 py-3 rounded-lg font-bold hover:from-pink-600 hover:to-red-600 transition-all shadow-lg hover:shadow-xl transform hover:scale-105"
            >
              Upgrade to Pro
              <div className="text-xs opacity-90">$9.99 one-time</div>
            </button>
          </div>
        </div>
      )}

{/* Analytics Charts - Available to all users */}
      {goals.length > 0 ? (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div className="bg-gray-50 rounded-lg p-4">
            <SimpleProgressChart goals={goals} />
          </div>
          <div className="bg-gray-50 rounded-lg p-4">
            <SimpleSavingsOverview goals={goals} />
          </div>
        </div>
      ) : (
        <div className="text-center py-12 text-gray-500">
          <BarChart3 className="w-16 h-16 mx-auto mb-4 opacity-50" />
          <p className="text-lg font-medium">Add some goals to see your analytics!</p>
          <p className="text-sm mt-2">Charts are free for all users. Export features require Pro upgrade.</p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { Target, DollarSign, Percent, Plus } from "lucide-react"
import type { Goal } from "@/types/goal"
import { useTranslation } from "@/contexts/translation-context"
import GoalCard from "./goal-card"
import AnalyticsCharts from "./analytics-charts"
import LoadingSpinner from "./ui/loading-spinner"

interface DashboardProps {
  goals: Goal[]
  onAddGoal: (goal: Omit<Goal, "id" | "createdDate">) => void
  onUpdateGoal: (id: number, field: keyof Goal, value: any) => void
  onDeleteGoal: (id: number) => void
  onShareGoal?: (goal: Goal) => void
  isProUser: boolean
  onProClick: () => void
}

export default function Dashboard({
  goals,
  onAddGoal,
  onUpdateGoal,
  onDeleteGoal,
  onShareGoal,
  isProUser,
  onProClick,
}: DashboardProps) {
  const { t } = useTranslation()
  const [formData, setFormData] = useState({
    name: "",
    targetAmount: "",
    savedAmount: "0",
    targetDate: "",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [errors, setErrors] = useState<Record<string, string>>({})

const totalGoals = goals.length
  const totalSaved = goals.reduce((sum, goal) => sum + goal.savedAmount, 0)
  const totalTarget = goals.reduce((sum, goal) => sum + goal.targetAmount, 0)
  const overallProgress = totalTarget > 0 ? Math.round((totalSaved / totalTarget) * 100) : 0

const validateForm = () => {
    const newErrors: Record<string, string> = {}

if (!formData.name.trim()) {
      newErrors.name = "Please enter a goal name"
    }

// Check for duplicate names
    if (goals.some((goal) => goal.name.toLowerCase() === formData.name.trim().toLowerCase())) {
      newErrors.name = "A goal with this name already exists"
    }

const targetAmount = Number.parseFloat(formData.targetAmount)
    if (isNaN(targetAmount) || targetAmount <= 0) {
      newErrors.targetAmount = "Please enter a target amount greater than $0"
    }

const savedAmount = Number.parseFloat(formData.savedAmount) || 0
    if (savedAmount < 0) {
      newErrors.savedAmount = "Saved amount must be $0 or greater"
    }

if (savedAmount > targetAmount) {
      newErrors.savedAmount = "Saved amount cannot exceed target amount"
    }

if (!formData.targetDate) {
      newErrors.targetDate = "Please select a target date"
    } else {
      const targetDate = new Date(formData.targetDate)
      const today = new Date()
      today.setHours(0, 0, 0, 0)

if (targetDate < today) {
        newErrors.targetDate = "Please select a future date"
      }
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!validateForm()) return

setIsSubmitting(true)
    try {
      // Simulate API delay
      await new Promise((resolve) => setTimeout(resolve, 500))

onAddGoal({
        name: formData.name.trim(),
        targetAmount: Number.parseFloat(formData.targetAmount),
        savedAmount: Number.parseFloat(formData.savedAmount) || 0,
        targetDate: formData.targetDate,
      })

setFormData({ name: "", targetAmount: "", savedAmount: "0", targetDate: "" })
      setErrors({})
    } catch (error) {
      console.error("Error adding goal:", error)
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <section className="py-12" id="dashboard">
      <div className="container mx-auto px-4">
        {/* Dashboard Stats */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <div className="bg-white/95 backdrop-blur-sm border border-white/20 rounded-xl p-6 text-center hover:shadow-lg transition-shadow">
            <Target className="w-8 h-8 text-purple-600 mx-auto mb-3" />
            <h3 className="text-lg font-semibold text-gray-700">{t("dashboard.totalGoals")}</h3>
            <p className="text-3xl font-bold text-purple-600">{totalGoals}</p>
          </div>
          <div className="bg-white/95 backdrop-blur-sm border border-white/20 rounded-xl p-6 text-center hover:shadow-lg transition-shadow">
            <DollarSign className="w-8 h-8 text-green-600 mx-auto mb-3" />
            <h3 className="text-lg font-semibold text-gray-700">{t("dashboard.totalSaved")}</h3>
            <p className="text-3xl font-bold text-green-600">${totalSaved.toLocaleString()}</p>
          </div>
          <div className="bg-white/95 backdrop-blur-sm border border-white/20 rounded-xl p-6 text-center hover:shadow-lg transition-shadow">
            <Percent className="w-8 h-8 text-blue-600 mx-auto mb-3" />
            <h3 className="text-lg font-semibold text-gray-700">{t("dashboard.overallProgress")}</h3>
            <p className="text-3xl font-bold text-blue-600">{overallProgress}%</p>
          </div>
        </div>

{/* Add Goal Form */}
        <div className="bg-white/95 backdrop-blur-sm border border-white/20 rounded-xl p-6 mb-8">
          <h3 className="text-xl font-semibold mb-4">{t("form.addGoal")}</h3>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <div>
                <input
                  type="text"
                  placeholder="Goal Name (e.g., Vacation Fund)"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 ${
                    errors.name ? "border-red-500" : "border-gray-300"
                  }`}
                  required
                />
                {errors.name && <p className="text-red-500 text-xs mt-1">{errors.name}</p>}
              </div>

<div>
                <input
                  type="number"
                  placeholder="Target Amount ($)"
                  value={formData.targetAmount}
                  onChange={(e) => setFormData({ ...formData, targetAmount: e.target.value })}
                  className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 ${
                    errors.targetAmount ? "border-red-500" : "border-gray-300"
                  }`}
                  min="0.01"
                  step="0.01"
                  required
                />
                {errors.targetAmount && <p className="text-red-500 text-xs mt-1">{errors.targetAmount}</p>}
              </div>

<div>
                <input
                  type="number"
                  placeholder="Already Saved ($)"
                  value={formData.savedAmount}
                  onChange={(e) => setFormData({ ...formData, savedAmount: e.target.value })}
                  className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 ${
                    errors.savedAmount ? "border-red-500" : "border-gray-300"
                  }`}
                  min="0"
                  step="0.01"
                />
                {errors.savedAmount && <p className="text-red-500 text-xs mt-1">{errors.savedAmount}</p>}
              </div>

<div>
                <input
                  type="date"
                  value={formData.targetDate}
                  onChange={(e) => setFormData({ ...formData, targetDate: e.target.value })}
                  className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 ${
                    errors.targetDate ? "border-red-500" : "border-gray-300"
                  }`}
                  min={new Date().toISOString().split("T")[0]}
                  required
                />
                {errors.targetDate && <p className="text-red-500 text-xs mt-1">{errors.targetDate}</p>}
              </div>
            </div>

<button
              type="submit"
              disabled={isSubmitting}
              className="w-full md:w-auto bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition-colors flex items-center justify-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isSubmitting ? (
                <>
                  <LoadingSpinner size="sm" />
                  <span>Adding Goal...</span>
                </>
              ) : (
                <>
                  <Plus className="w-4 h-4" />
                  <span>Add Goal</span>
                </>
              )}
            </button>
          </form>
        </div>

{/* Goals List */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
          {goals.map((goal) => (
            <GoalCard
              key={goal.id}
              goal={goal}
              onUpdate={onUpdateGoal}
              onDelete={onDeleteGoal}
              onShare={onShareGoal}
              isPro={isProUser}
            />
          ))}

{goals.length === 0 && (
            <div className="col-span-full text-center py-12 text-gray-500">
              <Target className="w-16 h-16 mx-auto mb-4 opacity-50" />
              <h3 className="text-xl font-semibold mb-2">No goals yet!</h3>
              <p>Create your first savings goal using the form above.</p>
            </div>
          )}
        </div>

{/* Analytics Charts */}
        <AnalyticsCharts goals={goals} isProUser={isProUser} onProClick={onProClick} />
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/goal-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Trash2, Share2, Edit3, Save, X } from "lucide-react"
import type { Goal } from "@/types/goal"
import LoadingSpinner from "./ui/loading-spinner"

interface GoalCardProps {
  goal: Goal
  onUpdate: (id: number, field: keyof Goal, value: any) => void
  onDelete: (id: number) => void
  onShare?: (goal: Goal) => void
  isPro?: boolean
}

export default function GoalCard({ goal, onUpdate, onDelete, onShare, isPro = false }: GoalCardProps) {
  const [isEditing, setIsEditing] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [editData, setEditData] = useState({
    name: goal.name,
    targetAmount: goal.targetAmount.toString(),
    savedAmount: goal.savedAmount.toString(),
    targetDate: goal.targetDate,
  })
  const [errors, setErrors] = useState<Record<string, string>>({})

const progress = goal.targetAmount > 0 ? (goal.savedAmount / goal.targetAmount) * 100 : 0
  const remainingAmount = goal.targetAmount - goal.savedAmount
  const daysRemaining = Math.ceil((new Date(goal.targetDate).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24))

const validateForm = () => {
    const newErrors: Record<string, string> = {}

if (!editData.name.trim()) {
      newErrors.name = "Please enter a goal name"
    }

const targetAmount = Number.parseFloat(editData.targetAmount)
    if (isNaN(targetAmount) || targetAmount <= 0) {
      newErrors.targetAmount = "Please enter an amount greater than $0"
    }

const savedAmount = Number.parseFloat(editData.savedAmount)
    if (isNaN(savedAmount) || savedAmount < 0) {
      newErrors.savedAmount = "Amount must be $0 or greater"
    }

if (savedAmount > targetAmount) {
      newErrors.savedAmount = "Amount cannot exceed your target"
    }

if (!editData.targetDate) {
      newErrors.targetDate = "Please select a target date"
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSave = async () => {
    if (!validateForm()) return

setIsLoading(true)
    try {
      // Simulate API delay
      await new Promise((resolve) => setTimeout(resolve, 500))

onUpdate(goal.id, "name", editData.name.trim())
      onUpdate(goal.id, "targetAmount", Number.parseFloat(editData.targetAmount))
      onUpdate(goal.id, "savedAmount", Number.parseFloat(editData.savedAmount))
      onUpdate(goal.id, "targetDate", editData.targetDate)

setIsEditing(false)
    } catch (error) {
      console.error("Error updating goal:", error)
    } finally {
      setIsLoading(false)
    }
  }

const handleCancel = () => {
    setEditData({
      name: goal.name,
      targetAmount: goal.targetAmount.toString(),
      savedAmount: goal.savedAmount.toString(),
      targetDate: goal.targetDate,
    })
    setErrors({})
    setIsEditing(false)
  }

const handleQuickUpdate = (field: keyof Goal, value: any) => {
    if (field === "savedAmount") {
      const numValue = Number.parseFloat(value) || 0
      if (numValue <= goal.targetAmount && numValue >= 0) {
        onUpdate(goal.id, field, numValue)
      }
    } else {
      onUpdate(goal.id, field, value)
    }
  }

return (
    <div className="bg-white/95 backdrop-blur-sm border border-white/20 rounded-xl p-6 animate-fade-in hover:shadow-lg transition-all duration-300">
      <div className="flex justify-between items-start mb-4">
        {isEditing ? (
          <div className="flex-1 mr-4">
            <input
              type="text"
              value={editData.name}
              onChange={(e) => setEditData({ ...editData, name: e.target.value })}
              className={`text-lg font-semibold bg-transparent border-b-2 focus:outline-none w-full ${
                errors.name ? "border-red-500" : "border-gray-300 focus:border-purple-500"
              }`}
              placeholder="Goal name"
            />
            {errors.name && <p className="text-red-500 text-xs mt-1">{errors.name}</p>}
          </div>
        ) : (
          <h4 className="text-lg font-semibold text-gray-800 flex-1">{goal.name}</h4>
        )}

<div className="flex items-center space-x-2">
          {onShare && (
            <button
              onClick={() => onShare(goal)}
              className={`p-2 rounded-lg transition-colors ${
                isPro ? "text-blue-500 hover:bg-blue-50" : "text-gray-400 cursor-not-allowed"
              }`}
              title={isPro ? "Share this goal" : "Pro feature - Upgrade to share goals"}
            >
              <Share2 className="w-4 h-4" />
              {!isPro && <span className="text-xs bg-pink-500 text-white px-1 rounded ml-1">PRO</span>}
            </button>
          )}

{isEditing ? (
            <div className="flex space-x-1">
              <button
                onClick={handleSave}
                disabled={isLoading}
                className="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors disabled:opacity-50"
              >
                {isLoading ? <LoadingSpinner size="sm" /> : <Save className="w-4 h-4" />}
              </button>
              <button
                onClick={handleCancel}
                className="p-2 text-gray-500 hover:bg-gray-50 rounded-lg transition-colors"
              >
                <X className="w-4 h-4" />
              </button>
            </div>
          ) : (
            <button
              onClick={() => setIsEditing(true)}
              className="p-2 text-blue-500 hover:bg-blue-50 rounded-lg transition-colors"
            >
              <Edit3 className="w-4 h-4" />
            </button>
          )}

<button
            onClick={() => onDelete(goal.id)}
            className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
          >
            <Trash2 className="w-4 h-4" />
          </button>
        </div>
      </div>

<div className="space-y-3">
        <div className="flex justify-between text-sm text-gray-600">
          <span>Progress</span>
          <span className={`font-semibold ${progress >= 100 ? "text-green-600" : "text-purple-600"}`}>
            {Math.round(progress)}%
          </span>
        </div>

<div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
          <div
            className={`h-3 rounded-full transition-all duration-500 ${
              progress >= 100
                ? "bg-gradient-to-r from-green-500 to-green-600"
                : "bg-gradient-to-r from-purple-500 to-blue-500"
            }`}
            style={{ width: `${Math.min(progress, 100)}%` }}
          />
        </div>

{isEditing ? (
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <label className="text-gray-500 block mb-1">Saved Amount</label>
              <input
                type="number"
                value={editData.savedAmount}
                onChange={(e) => setEditData({ ...editData, savedAmount: e.target.value })}
                className={`w-full px-2 py-1 border rounded ${
                  errors.savedAmount ? "border-red-500" : "border-gray-300"
                }`}
                min="0"
                step="0.01"
              />
              {errors.savedAmount && <p className="text-red-500 text-xs mt-1">{errors.savedAmount}</p>}
            </div>
            <div>
              <label className="text-gray-500 block mb-1">Target Amount</label>
              <input
                type="number"
                value={editData.targetAmount}
                onChange={(e) => setEditData({ ...editData, targetAmount: e.target.value })}
                className={`w-full px-2 py-1 border rounded ${
                  errors.targetAmount ? "border-red-500" : "border-gray-300"
                }`}
                min="0.01"
                step="0.01"
              />
              {errors.targetAmount && <p className="text-red-500 text-xs mt-1">{errors.targetAmount}</p>}
            </div>
          </div>
        ) : (
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <label className="text-gray-500">Saved</label>
              <input
                type="number"
                value={goal.savedAmount}
                onChange={(e) => handleQuickUpdate("savedAmount", e.target.value)}
                className="w-full px-2 py-1 border rounded text-green-600 font-semibold focus:ring-2 focus:ring-green-500 focus:border-green-500"
                min="0"
                max={goal.targetAmount}
                step="0.01"
              />
            </div>
            <div>
              <label className="text-gray-500">Target</label>
              <div className="px-2 py-1 bg-gray-50 rounded text-purple-600 font-semibold">
                ${goal.targetAmount.toLocaleString()}
              </div>
            </div>
          </div>
        )}

<div className="flex justify-between text-sm text-gray-600">
          <span className={remainingAmount <= 0 ? "text-green-600 font-semibold" : ""}>
            {remainingAmount <= 0 ? "Goal Achieved! 🎉" : `Remaining: $${remainingAmount.toLocaleString()}`}
          </span>
          <span className={daysRemaining < 0 ? "text-red-500" : daysRemaining < 30 ? "text-yellow-600" : ""}>
            {daysRemaining < 0 ? "Overdue" : `${daysRemaining} days left`}
          </span>
        </div>

{isEditing ? (
          <div>
            <label className="text-gray-500 block mb-1">Target Date</label>
            <input
              type="date"
              value={editData.targetDate}
              onChange={(e) => setEditData({ ...editData, targetDate: e.target.value })}
              className={`w-full px-2 py-1 border rounded text-sm ${
                errors.targetDate ? "border-red-500" : "border-gray-300"
              }`}
            />
            {errors.targetDate && <p className="text-red-500 text-xs mt-1">{errors.targetDate}</p>}
          </div>
        ) : (
          <input
            type="date"
            value={goal.targetDate}
            onChange={(e) => handleQuickUpdate("targetDate", e.target.value)}
            className="w-full px-2 py-1 border rounded text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
          />
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/contact-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { Send, AlertCircle, Mail, Phone, MapPin } from "lucide-react"
import { useToast } from "@/components/ui/toast"
import LoadingSpinner from "@/components/ui/loading-spinner"

export default function ContactSection() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [errors, setErrors] = useState<Record<string, string>>({})
  const { addToast } = useToast()

const validateForm = () => {
    const newErrors: Record<string, string> = {}

// Name validation
    if (!formData.name.trim()) {
      newErrors.name = "Please enter your name"
    } else if (formData.name.trim().length < 2) {
      newErrors.name = "Please enter at least 2 characters"
    }

// Email validation
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!formData.email.trim()) {
      newErrors.email = "Please enter your email address"
    } else if (!emailRegex.test(formData.email)) {
      newErrors.email = "Please enter a valid email address"
    }

// Subject validation
    if (!formData.subject.trim()) {
      newErrors.subject = "Please select a subject"
    } else if (formData.subject.trim().length < 5) {
      newErrors.subject = "Please enter at least 5 characters"
    }

// Message validation
    if (!formData.message.trim()) {
      newErrors.message = "Please enter your message"
    } else if (formData.message.trim().length < 10) {
      newErrors.message = "Please enter at least 10 characters"
    } else if (formData.message.trim().length > 1000) {
      newErrors.message = "Please keep your message under 1000 characters"
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!validateForm()) {
      addToast({
        type: "error",
        title: "Validation Error",
        message: "Please fix the errors below and try again.",
      })
      return
    }

setIsSubmitting(true)

try {
      // Simulate API delay for better UX
      await new Promise((resolve) => setTimeout(resolve, 1000))

// Create mailto link with proper encoding
      const mailtoSubject = encodeURIComponent(`[Sinking Fund Tracker] ${formData.subject}`)
      const mailtoBody = encodeURIComponent(
        `
From: ${formData.name}
Email: ${formData.email}

Message:
${formData.message}

---
Sent via Sinking Fund Tracker Contact Form
      `.trim(),
      )

const mailtoLink = `mailto:banjobabatundeade@gmail.com?subject=${mailtoSubject}&body=${mailtoBody}`

// Open email client
      window.location.href = mailtoLink

// Show success message
      addToast({
        type: "success",
        title: "Message Sent!",
        message: "Your email client has been opened. Thank you for contacting us!",
        duration: 6000,
      })

// Reset form
      setFormData({ name: "", email: "", subject: "", message: "" })
      setErrors({})
    } catch (error) {
      console.error("Contact form error:", error)
      addToast({
        type: "error",
        title: "Error",
        message: "Something went wrong. Please try again or email us directly.",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

const handleInputChange = (field: keyof typeof formData, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))

// Clear error when user starts typing
    if (errors[field]) {
      setErrors((prev) => ({ ...prev, [field]: "" }))
    }
  }

return (
    <section className="py-12 bg-gray-100" id="contact">
      <div className="container mx-auto px-4">
        <div className="max-w-6xl mx-auto">
          {/* Section Header */}
          <div className="text-center mb-12">
            <h3 className="text-3xl font-bold mb-4">Get in Touch</h3>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Have questions about sinking funds or need help with the app? We'd love to hear from you!
            </p>
          </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Contact Info */}
            <div className="lg:col-span-1">
              <div className="bg-white/95 backdrop-blur-sm border border-white/20 rounded-xl p-6">
                <h4 className="text-xl font-semibold mb-6">Contact Information</h4>

<div className="space-y-4">
                  <div className="flex items-center space-x-3">
                    <div className="bg-purple-100 p-2 rounded-lg">
                      <Mail className="w-5 h-5 text-purple-600" />
                    </div>
                    <div>
                      <p className="font-medium">Email</p>
                      <p className="text-gray-600 text-sm">banjobabatundeade@gmail.com</p>
                    </div>
                  </div>

<div className="flex items-center space-x-3">
                    <div className="bg-blue-100 p-2 rounded-lg">
                      <Phone className="w-5 h-5 text-blue-600" />
                    </div>
                    <div>
                      <p className="font-medium">Response Time</p>
                      <p className="text-gray-600 text-sm">Within 24 hours</p>
                    </div>
                  </div>

<div className="flex items-center space-x-3">
                    <div className="bg-green-100 p-2 rounded-lg">
                      <MapPin className="w-5 h-5 text-green-600" />
                    </div>
                    <div>
                      <p className="font-medium">Support</p>
                      <p className="text-gray-600 text-sm">Global, 24/7</p>
                    </div>
                  </div>
                </div>

{/* FAQ Link */}
                <div className="mt-8 p-4 bg-purple-50 rounded-lg">
                  <h5 className="font-semibold text-purple-800 mb-2">Quick Help</h5>
                  <p className="text-purple-700 text-sm mb-3">
                    Check our FAQ section for instant answers to common questions.
                  </p>
                  <button
                    onClick={() => document.getElementById("faq")?.scrollIntoView({ behavior: "smooth" })}
                    className="text-purple-600 font-medium text-sm hover:text-purple-700 transition-colors"
                  >
                    View FAQ →
                  </button>
                </div>
              </div>
            </div>

{/* Contact Form */}
            <div className="lg:col-span-2">
              <div className="bg-white/95 backdrop-blur-sm border border-white/20 rounded-xl p-8">
                <h4 className="text-xl font-semibold mb-6">Send us a Message</h4>

<form onSubmit={handleSubmit} className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {/* Name Field */}
                    <div>
                      <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
                        Your Name *
                      </label>
                      <input
                        type="text"
                        id="name"
                        value={formData.name}
                        onChange={(e) => handleInputChange("name", e.target.value)}
                        className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors ${
                          errors.name ? "border-red-500 bg-red-50" : "border-gray-300"
                        }`}
                        placeholder="Enter your full name"
                        disabled={isSubmitting}
                      />
                      {errors.name && (
                        <div className="flex items-center space-x-1 mt-1">
                          <AlertCircle className="w-4 h-4 text-red-500" />
                          <p className="text-red-500 text-sm">{errors.name}</p>
                        </div>
                      )}
                    </div>

{/* Email Field */}
                    <div>
                      <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
                        Email Address *
                      </label>
                      <input
                        type="email"
                        id="email"
                        value={formData.email}
                        onChange={(e) => handleInputChange("email", e.target.value)}
                        className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors ${
                          errors.email ? "border-red-500 bg-red-50" : "border-gray-300"
                        }`}
                        placeholder="your.email@example.com"
                        disabled={isSubmitting}
                      />
                      {errors.email && (
                        <div className="flex items-center space-x-1 mt-1">
                          <AlertCircle className="w-4 h-4 text-red-500" />
                          <p className="text-red-500 text-sm">{errors.email}</p>
                        </div>
                      )}
                    </div>
                  </div>

{/* Subject Field */}
                  <div>
                    <label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-2">
                      Subject *
                    </label>
                    <select
                      id="subject"
                      value={formData.subject}
                      onChange={(e) => handleInputChange("subject", e.target.value)}
                      className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors ${
                        errors.subject ? "border-red-500 bg-red-50" : "border-gray-300"
                      }`}
                      disabled={isSubmitting}
                    >
                      <option value="">Select a topic...</option>
                      <option value="General Question">General Question</option>
                      <option value="Technical Support">Technical Support</option>
                      <option value="Pro Features Help">Pro Features Help</option>
                      <option value="Feature Request">Feature Request</option>
                      <option value="Bug Report">Bug Report</option>
                      <option value="Payment Issue">Payment Issue</option>
                      <option value="Data Export Help">Data Export Help</option>
                      <option value="Other">Other</option>
                    </select>
                    {errors.subject && (
                      <div className="flex items-center space-x-1 mt-1">
                        <AlertCircle className="w-4 h-4 text-red-500" />
                        <p className="text-red-500 text-sm">{errors.subject}</p>
                      </div>
                    )}
                  </div>

{/* Message Field */}
                  <div>
                    <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
                      Message *
                    </label>
                    <textarea
                      id="message"
                      rows={6}
                      value={formData.message}
                      onChange={(e) => handleInputChange("message", e.target.value)}
                      className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors resize-vertical ${
                        errors.message ? "border-red-500 bg-red-50" : "border-gray-300"
                      }`}
                      placeholder="Please describe your question or issue in detail..."
                      disabled={isSubmitting}
                    />
                    <div className="flex justify-between items-center mt-1">
                      {errors.message ? (
                        <div className="flex items-center space-x-1">
                          <AlertCircle className="w-4 h-4 text-red-500" />
                          <p className="text-red-500 text-sm">{errors.message}</p>
                        </div>
                      ) : (
                        <div></div>
                      )}
                      <p className="text-gray-500 text-sm">{formData.message.length}/1000 characters</p>
                    </div>
                  </div>