Personal Finance Blog Homepage

Create a trustworthy, modern homepage for "Penny Wise" — a personal finance blog helping millennials and Gen Z build wealth through practical, jargon-free money advice. The design should feel clean, confident, and approachable — not stuffy or intimidating. Think Ramit Sethi meets a lifestyle blog. Target audience: 25-40 year olds who want to manage money better but find most finance content overwhelming.

1. NAVIGATION BAR
- Logo: "Penny Wise" in a friendly serif typeface with a small upward-trending line icon integrated into the "W"
- Links: Budgeting, Investing, Debt, Earning More, Tools, About
- Right side: search icon + "Subscribe" CTA button (solid #059669 emerald-600, white text, pill shape)
- White background with subtle bottom border (#E5E7EB), sticky on scroll
- Mobile: logo + search icon + hamburger

2. HERO SECTION
- Split layout: left 55% content, right 45% illustration
- Headline: "Money Advice That Actually Makes Sense" in bold serif, 52px, #111827
- Subheadline: "No jargon. No shame. Just clear, honest guides to help you earn more, spend smarter, and build real wealth." in 18px, #6B7280
- CTA: "Start With Our Most Popular Guide →" (solid #059669) linking to a featured post
- Right side: friendly flat illustration of a person relaxing on a couch with floating icons (piggy bank, chart going up, coffee cup, laptop) — warm, approachable tone
- Below hero: thin trust bar — "Featured in: NerdWallet · Business Insider · The New York Times · Refinery29" in gray logos

3. FEATURED ARTICLE (large card)
- Full-width card with image left (40%) and content right (60%)
- Category badge: "INVESTING" in emerald-600 on emerald-50 background
- Title: "How to Start Investing With $100: A Complete Beginner's Guide" in bold, 28px
- Excerpt: "You don't need thousands of dollars to start investing. Here's the exact step-by-step process I used, including which accounts to open and which to skip."
- Author: avatar (40px) + "By Sarah Mitchell · March 8, 2026 · 12 min read"
- "Read Article →" link in emerald-600
- Card: white background, 16px border-radius, subtle shadow

4. CONTENT CATEGORY PILLARS
- Headline: "What Are You Working On?"
- 4 pillar cards in a row (stacks 2x2 on tablet, single column mobile):
  - 💰 Budgeting — "Get control of where your money goes" — "23 guides" — light green gradient top border
  - 📈 Investing — "Grow your wealth with confidence" — "18 guides" — light blue gradient top border
  - 💳 Paying Off Debt — "Strategic plans to become debt-free" — "15 guides" — light amber gradient top border
  - 🚀 Earning More — "Side hustles, salary negotiation, freelancing" — "21 guides" — light purple gradient top border
- Each card: icon, category name (bold, 20px), one-line description, guide count, colored top border (4px), white background, hover: slight lift + shadow increase
- Click navigates to category archive page

5. LATEST ARTICLES GRID
- Headline: "Latest Articles"
- 6 article cards in 3x2 grid:
  - "The 50/30/20 Budget Rule Is Outdated — Try This Instead" — Budgeting — 8 min read — thumbnail of spreadsheet on phone
  - "I Paid Off $47,000 in Student Loans in 18 Months — Here's My Exact Strategy" — Debt — 15 min read — thumbnail of celebration
  - "5 High-Yield Savings Accounts Actually Worth Opening in 2026" — Budgeting — 6 min read — thumbnail of bank comparison
  - "Roth IRA vs Traditional IRA: Which One Wins? (We Did the Math)" — Investing — 10 min read — thumbnail of comparison chart
  - "How I Turned a $200/Month Side Hustle Into a $4,000/Month Business" — Earning More — 12 min read — thumbnail of home workspace
  - "The Only 3 Credit Cards You Need (and When to Use Each)" — Budgeting — 7 min read — thumbnail of cards on table
- Each card: thumbnail image (aspect 16:9, 12px border-radius top), category badge, title (bold, 18px), read time, hover: image slight zoom
- "View All Articles →" button below (outline emerald-600)

6. BUDGET CALCULATOR WIDGET
- Headline: "Quick Budget Check"
- Subtext: "Enter your monthly take-home pay to see a recommended budget split."
- Interactive widget on light #F0FDF4 (green-50) background:
  - Input: "Monthly take-home pay" — large text input with "$" prefix — placeholder: "$4,500"
  - On input, display animated donut chart with 3 segments:
    - Needs (50%): housing, food, transportation, insurance — #059669 (emerald)
    - Wants (30%): dining out, entertainment, subscriptions — #3B82F6 (blue)
    - Savings (20%): emergency fund, investments, debt payoff — #8B5CF6 (purple)
  - Dollar amounts shown next to each segment label (e.g., "Needs: $2,250")
  - Below chart: "Want a custom budget plan? Read our full budgeting guide →"
- Card: white inner card, 16px border-radius, padded 32px, centered
- Mobile: chart stacks below input, smaller donut

7. EMAIL SIGNUP SECTION
- Full-width section, #111827 (near black) background, white text
- Headline: "Get Smarter With Money Every Week" in 36px bold
- Subtext: "Join 28,000+ readers getting one actionable money tip every Tuesday morning. No spam, no fluff, unsubscribe anytime."
- Form: email input (large, white background, rounded) + "Subscribe Free" button (solid #059669, right-aligned or below on mobile)
- Below form: "What you'll get: budget templates, investment breakdowns, deal alerts, and the occasional money meme."
- Social proof: "★★★★★ 'The only newsletter I actually open every week.' — Reddit r/personalfinance"

8. POPULAR TOOLS & RESOURCES
- Headline: "Free Tools & Templates"
- 3 resource cards side by side:
  - 📊 "Monthly Budget Spreadsheet" — "Plug in your numbers, see where your money goes. Google Sheets template." — "Download Free →"
  - 🧮 "Debt Payoff Calculator" — "Snowball vs avalanche comparison. See your debt-free date." — "Try It →"
  - 📋 "Net Worth Tracker" — "Track your assets and liabilities over time. Update monthly in 5 minutes." — "Download Free →"
- Each card: emoji icon, tool name (bold), description, CTA link in emerald-600
- Light gray background section (#F9FAFB)

9. ABOUT THE AUTHOR
- Split layout: left 40% photo, right 60% text
- Circular photo (160px) of the author — friendly, approachable headshot
- "Hi, I'm Sarah" in bold, 28px
- Bio: "I'm a former financial analyst who got tired of watching friends stress about money because no one taught them the basics. I started Penny Wise in 2022 to share what I wish someone had told me at 25. Today, over 500,000 readers trust this blog for honest, practical money advice."
- Credentials: "CFA® Charterholder · Former JP Morgan analyst · Featured in NYT, Business Insider, NerdWallet"
- "Read My Story →" link in emerald-600

10. FOOTER
- 4 columns on #111827 background, white/gray text:
  - Topics: Budgeting, Investing, Debt Payoff, Earning More, Credit Cards, Banking
  - Tools: Budget Spreadsheet, Debt Calculator, Net Worth Tracker, Investment Quiz
  - Company: About, Contact, Advertise, Privacy Policy, Editorial Guidelines
  - Follow: Newsletter, Twitter/X, Instagram, YouTube, TikTok, RSS Feed
- Bottom bar: "© 2026 Penny Wise. All content is for informational purposes only and should not be considered financial advice. Consult a licensed financial professional for personal guidance."
- Affiliate disclosure link: "How We Make Money"

DESIGN SYSTEM
- Primary: #059669 (emerald-600) for CTAs, links, and accents
- Secondary: #111827 (near-black) for hero text and dark sections
- Body text: #374151 (gray-700) on white backgrounds
- Accent: #F0FDF4 (green-50) for highlighted sections and badges
- Alternating sections: white and #F9FAFB (gray-50)
- Typography: Lora or Merriweather (serif) for headlines — authoritative but warm. Inter for body — clean and readable
- Cards: 12-16px border-radius, subtle shadows, generous 24-32px internal padding
- Tone: friendly, trustworthy, no stock-photo-of-piggy-bank clichés — use illustrations and real-looking photos

RESPONSIVE BEHAVIOR
- Mobile-first. Hero stacks to text-above-illustration, heading drops to 36px.
- Category pillars stack to 2x2 grid on tablet, single column on mobile
- Article grid becomes 1-column stack on mobile with horizontal card layout (image left, text right)
- Budget calculator: donut chart stacks below input, sized to 200px
- Email signup: input and button stack vertically
- About section stacks photo above text, centered
- Footer collapses to accordion on mobile. All touch targets minimum 44px