BUDGET PLANNER

import { useState } from "react"; const EXCEL_GREEN = "#217346"; const EXCEL_GREEN_DARK = "#185a32"; const EXCEL_GREEN_ACCENT = "#27ae60"; function Logo({ size = "md" }: { size?: "sm" | "md" | "lg" }) { const sizes = { sm: "text-xl", md: "text-3xl", lg: "text-5xl md:text-6xl", }; return ( DIGIT YOUS ); } function StarRating({ count = 5 }: { count?: number }) { return (
{Array.from({ length: count }).map((_, i) => ( ))}
); } function CheckIcon() { return ( ); } export default function App() { const [email, setEmail] = useState(""); const [showModal, setShowModal] = useState(false); const [selectedPlan, setSelectedPlan] = useState(null); const handleBuy = (plan: string) => { setSelectedPlan(plan); setShowModal(true); }; const features = [ "Monthly & yearly budget tracking", "Automatic expense categorization", "Savings goal tracker", "Debt payoff calculator", "Income vs. expense charts", "Bill payment reminders", "Net worth calculator", "Printable & digital formats", ]; const testimonials = [ { name: "Sarah M.", role: "Freelance Designer", text: "DIGITYOUS completely changed how I manage my money. I saved $400 in the first month just by seeing where my cash was going!", avatar: "SM", }, { name: "James T.", role: "Small Business Owner", text: "The Excel-like layout feels so familiar but so much smarter. Best financial tool I've ever purchased.", avatar: "JT", }, { name: "Priya K.", role: "Graduate Student", text: "Finally a budget planner that doesn't confuse me. The automatic charts make tracking super easy.", avatar: "PK", }, ]; const plans = [ { name: "Starter", price: "$9", period: "/one-time", desc: "Perfect for individuals starting their financial journey", features: ["Monthly budget template", "Expense tracker", "Savings goal sheet", "Email support", "1 user license"], cta: "Buy Starter", highlight: false, }, { name: "Pro", price: "$19", period: "/one-time", desc: "The complete financial planning suite for serious savers", features: [ "Everything in Starter", "Yearly & 5-year planner", "Debt payoff calculator", "Net worth tracker", "Auto-fill formulas", "Priority support", "Free updates for life", ], cta: "Buy Pro – Best Value", highlight: true, }, { name: "Family", price: "$29", period: "/one-time", desc: "Manage the whole household budget together", features: [ "Everything in Pro", "Up to 5 user licenses", "Family budget dashboard", "Kid's allowance tracker", "Shared savings goals", "Dedicated support", ], cta: "Buy Family", highlight: false, }, ]; return (
{/* ─── NAVBAR ─── */} {/* ─── HERO ─── */}
{/* Background glow */}
{/* Grid lines */}
{/* Badge */}
Over 12,000 happy customers
{/* Headline */}


Your{" "} Smart Budget
Planner

Take control of your finances with our powerful, Excel-inspired digital budget planner. Track income, crush debt, and build savings — all in one beautifully designed template.

{/* CTA Buttons */}
{/* Hero Image */}
Budget Planner
{/* Trust badges */}
✓ Instant Digital Download
✓ Works with Excel & Google Sheets
✓ 30-Day Money Back Guarantee
{/* ─── FEATURES ─── */}

Why Choose DIGITYOUS

Everything You Need to{" "} Master Your Money

Designed with the power of Excel and the simplicity of a notebook — no accounting degree required.

{[ { icon: "📊", title: "Visual Charts", desc: "Automatic charts & graphs show your spending at a glance." }, { icon: "🎯", title: "Goal Tracker", desc: "Set savings goals and watch your progress grow every month." }, { icon: "💰", title: "Expense Categories", desc: "50+ pre-built categories to organize every dollar you spend." }, { icon: "🔒", title: "Private & Secure", desc: "Your data stays on your device. No subscriptions, no cloud." }, { icon: "📅", title: "Monthly Planning", desc: "12-month planner that resets automatically each new month." }, { icon: "💳", title: "Debt Payoff", desc: "Snowball & avalanche methods built right in." }, { icon: "📱", title: "Mobile Friendly", desc: "Works on phone, tablet, and desktop without any app install." }, { icon: "🔄", title: "Free Updates", desc: "Buy once, get all future improvements for free." }, ].map((f, i) => (
{f.icon}

{f.title}

{f.desc}

))}
{/* ─── PRODUCT SHOWCASE ─── */}
{/* Left: image */}
Budget Planner in action
{/* Floating stat card */}

$847

avg. saved in 3 months

{/* Right: content */}

What's Inside

The Complete Budget Planner System

Our planner isn't just a spreadsheet — it's a complete financial operating system. Built with the look and power of Excel, optimized for real people with real budgets.

    {features.map((f, i) => (
  • {f}
    • ))}
{/* ─── PRICING ─── */}

Simple Pricing

One-Time Payment,{" "} Lifetime Access

No subscriptions. No hidden fees. Pay once and own it forever.

{plans.map((plan) => (
{plan.highlight && (
⭐ Most Popular
)}

{plan.name}

{plan.desc}

{plan.price} {plan.period}
    {plan.features.map((f, i) => (
  • {f}
    • ))}
))}

🔒 Secure checkout via Shopify · 30-day money-back guarantee · Instant download

{/* ─── TESTIMONIALS ─── */}

Real Results

Over 12,000 People{" "} Love DIGITYOUS

{testimonials.map((t, i) => (

"{t.text}"

{t.avatar}

{t.name}

{t.role}

))}
{/* ─── FAQ ─── */}

FAQ

Got Questions?

{[ { q: "What format does the planner come in?", a: "The planner is available as an Excel (.xlsx) file and Google Sheets link. Both formats are included in your purchase." }, { q: "Do I need to know Excel to use it?", a: "Not at all! Our planner is designed for beginners. Just enter your numbers and everything is calculated automatically." }, { q: "Is this a monthly subscription?", a: "No! This is a one-time purchase. Pay once, own it forever, including all future updates." }, { q: "What if I'm not satisfied?", a: "We offer a 30-day no-questions-asked money-back guarantee. Your satisfaction is our priority." }, { q: "Can I use it on my phone?", a: "Yes! The Google Sheets version works perfectly on iOS and Android via the free Google Sheets app." }, ].map((item, i) => ( ))}
{/* ─── CTA BANNER ─── */}

Start Saving Money Today

Join 12,000+ people who already use DIGITYOUS to take control of their finances.

{/* Email capture */}
setEmail(e.target.value)} className="flex-1 px-5 py-3.5 rounded-xl text-white placeholder-green-300 bg-white/20 border border-white/30 focus:outline-none focus:border-white backdrop-blur-sm" />

No spam, ever. Unsubscribe anytime. 30-day money back guarantee.

{/* ─── FOOTER ─── */} {/* ─── PAYMENT MODAL ─── */} {showModal && (
setShowModal(false)} >
e.stopPropagation()} >

{selectedPlan} Plan

Secure checkout — powered by Shopify

{/* Simulated Shopify Payment UI */}
{/* Payment icons row */}
{["VISA", "MC", "AMEX", "PayPal", "Apple Pay"].map((brand) => ( {brand} ))}

🔒 Secured by Shopify · 256-bit SSL encryption

)}
); } function FAQItem({ q, a }: { q: string; a: string }) { const [open, setOpen] = useState(false); return (
setOpen(!open)} >

{q}

+
{open && (

{a}

)}
); }