give me an enhanced prompt and development of a plarform called Wealth Hack with a domain wealthack.co.za it must have a landing page and people must then login to it when they clieck login the default page must be a landing page with mean index page dont start with login as and index. Basically the software is to help people with book keeping and it must also help them to file person and bsuiness returns include self employed who dont have irp5 they systemus offer 4 packages for personal and 4 packages for business with the explanation and chatbot that answer based on the content every report first package of 390(This package help users with financial advice and close loop holes of finances around budgeting and show users the income statement with our logo on top and on the footer is wealth hack a devision of CIX Connect(Pty)Ltd this is global setting on all, packages) can over view only but not downloading and the page of 590(thgis package is the same as the first but the difference is you can download the income statement, cashflow and balance sheet into pdf, you can share them to whatsapp, ask to be send via email ) over downloading other 2 will focus on budgeting and sars you will add their prices the website /platform will have separate access for the admin with all setting for editing the front and setting up banking details and smtp setting uploading the logo that is auto adjuted to meet system requirement the basic fundament of the system and goal is to help people with booking so it will show graphs that are UX/UI boostrap view with an Elegant taste of gradient mordenized theme users will have their own dashboard that they can select the style of colour. On the landing page it will have a menu of pages like a normal website yet a platform allso on the top bar slightly at the right corner not at the corner but close by will be a selection toggle for personal and business booth personal and business will open pages with thing like a tab when you select personal it will show a page targeted only for indiviiduals/Employees and Business will show a Business page for all owers/entrepreneurs or selft employed the colours must be the colours of the logo which is moderbn green plus modern blue that you chose where and it you going to put information boxes put a 8px border around them and at the bottom on the footer is Wealth Hack a Division of CiX Connect(Pty)Ltd all rights reseverd add: Create a concept prompt for the development of a phpscript that can help with bookeeping and send financial into a pdf it can help with personal and business financial management users can upload their bank statements it can generate cashflow, balance sheet and income statement. Based on the uploaded bank statement it will ask users about the uploaded statement more like it will interview you then you will enter the description or you can select on a combo box whether is groceries, entertainment, rental, mortgage, vehicle finance or transportation or school fees like everything standard will be there to select if is not there i can select other. The platform will have personal section and business yo cater self employers and employed aĺl functionalities that suited for self employed and employed. If you are self employed or own and employed you can enter your email everything will be locked with your email and if you are self employed or own a company you can have 2 profiles one for personal and the other for business and u can switch in between the different will be emails business will use different email from personal insude the platform you can click on the question that say do you own a business if no it will default to employed and if own it will start with questionaire of setup abusiness profile. But if u dont own a business now later you own it you can change on settings to add business profile. Both personal and business tax no will be needed on business reg no will be needed everything must comply with sars and cipc in south Africa and banks also if your bank statement is locked the functionality of password will be available in the system, Your Personal AI Bookkeeper
Browse filesWealthHack is more than just financial software - it's your dedicated financial partner, helping you understand, manage, and grow your wealth through intelligent insights and personalized guidance.
What We Do
Think of WealthHack as your own personal bookkeeper and financial advisor - available 24/7, powered by advanced AI, and tailored to South African financial needs.
Analyze Your Spending
Upload your bank statements and watch as our AI automatically categorizes every transaction, showing you exactly where your money goes each month - from groceries to entertainment.
Smart Budgeting
Based on your spending patterns, we create realistic budgets that actually work. We'll show you where you're overspending and suggest practical ways to save more each month.
Goal-Oriented Planning
Set financial goals - buying a house, saving for retirement, or planning a vacation. We'll create a personalized roadmap showing exactly how to achieve them.
Interactive Financial Insights
WealthHack doesn't just show you numbers - it talks to you about your finances
Smart Questions
Our AI asks you relevant questions about your spending habits:
"We noticed you spent R2,500 on takeaways last month. Would you like to set a budget?"
"Your grocery spending is 30% higher than average. Want tips to save?"
"You have R1,200 left over. Should we move it to savings?"
Goal Tracking
Set goals and get personalized action plans:
Save R50,000 for holiday: "Save R4,200/month for 12 months"
Emergency fund: "You need 6 months expenses = R72,000"
Debt payoff: "Pay R3,500/month to be debt-free in 18 months"
Stop Wasting Money
We identify where you're losing money without realizing it
Hidden Expenses
Forgotten Subscriptions
Gym memberships you don't use, streaming services you forgot about
Banking Fees
Unnecessary charges that could be avoided with account changes
Impulse Purchases
Small daily expenses that add up to thousands monthly
Late Payment Fees
Penalties that could be prevented with better planning
Money-Saving Insights
Better Alternatives
"Switch to Store A for groceries - save R800/month"
Bulk Buying Opportunities
"Buy in bulk and save 20% on household items"
Consolidation Tips
"Combine debts to save R450/month in interest"
Tax Deductions
"Claim R15,000 in tax deductions you're missing"
Choose Your Financial Journey
Select a package that matches your financial goals and get personalized assistance
Budget Master
Perfect for those who want to control spending and build better money habits
✓ Detailed spending analysis
✓ Custom budget creation
✓ Expense tracking alerts
MOST POPULAR
Wealth Builder
For serious savers working towards specific financial goals
✓ Everything in Budget Master
✓ Goal-oriented planning
✓ Investment insights
✓ SARS tax optimization
Business Pro
Complete financial management for entrepreneurs and business owners
✓ Everything in Wealth Builder
✓ Business plan drafting
✓ VAT & PAYE management
✓ Financial statements
View Subscription Plans
Why Choose WealthHack?
SARS-Compliant
All our reports and calculations comply with South African Revenue Service requirements. We stay updated with the latest tax laws and regulations.
Made for South Africans
Built specifically for South African banks, tax systems, and financial regulations. We understand the local market and your unique needs.
Ready to Transform Your Financial Life?
Join thousands of South Africans who are taking control of their finances with WealthHack
Get Started Today
© 2025 Wealth Hack. All rights reserved, Add Dashboard
Upload
Reports
Tax Filing
Activate
Payroll
Activate
Solutions
Admin
About Us
Website Home, Return to Home
Subscription Plans
Choose the plan that's right for you.
Refresh
Select Subscription Duration
1 Day
2 Weeks
1 Month
3 Months
Save 10%
6 Months
Save 15%
9 Months
Save 20%
12 Months
Save 25%
Personal Plans
Business Plans
Business Basic
R 220
Once-off for 1 Month
Billed once for the full period.
All Personal Basic features
10 statement uploads/month
Multi-user access (2 users)
Subscribe Now
Business Standard
R 450
Once-off for 1 Month
Billed once for the full period.
All Personal Standard features
VAT & PAYE tracking
Invoice matching
Subscribe Now
POPULAR
Business Premium
R 795
Once-off for 1 Month
Billed once for the full period.
All Personal Premium features
Full SARS-compliant reporting (ITR14, VAT201, EMP201)
Management accounts
Subscribe Now
Enterprise
R 1890
Once-off for 1 Month
Billed once for the full period.
Dedicated Business Tax Filing Module (ITR14)
AI prepares your Income Statement & Balance Sheet for SARS
Consolidates data from bank statements & invoices
Download a summary for easy capture on eFiling
Submission of IT Return
Dedicated accountant support for tax preparation
Subscribe Now
Payroll
R 2490
Once-off for 1 Month
Billed once for the full period.
Full SARS-Compliant Payslip Generation
Automated PAYE, UIF, and SDL calculations
Generates PDF payslips with company logo
UIF submission-ready reports
Employee self-service portal (coming soon)
Requires one-time company vetting
Verification Required
© 2025 WealthHack. All rights reserved.
Return to Top,# WealthHack — Complete System Documentation & Knowledge Base
## Executive Summary
- Project Name: WealthHack
- Domain: wealthhack.co.za
- Tagline: Your Personal AI Bookkeeper — built for South Africa
- Organization: Wealth Hack — a Division of CiX Connect (Pty) Ltd
What it does: WealthHack is a web-based bookkeeping and financial management platform that uses AI to parse bank statements (PDF, CSV, XLSX), automatically categorize transactions, and generate SARS-compliant financial reports for both personal and business users in South Africa.
## 1. Core Product Concept
### Vision
Democratize professional bookkeeping for South Africans by combining artificial intelligence with deep understanding of local tax regulations (SARS, CIPC, POPIA compliance).
### Target Users
- Personal Users: Individuals tracking personal finances, budgets, tax deductions
- Business Users: SMEs, freelancers, consul
- README.md +8 -5
- dashboard.html +372 -0
- index.html +436 -18
- login.html +117 -0
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: WealthHack - AI Bookkeeper Pro 🚀
|
| 3 |
+
colorFrom: purple
|
| 4 |
+
colorTo: yellow
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
dashboard.html
ADDED
|
@@ -0,0 +1,372 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Dashboard | WealthHack</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<style>
|
| 11 |
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
| 12 |
+
body {
|
| 13 |
+
font-family: 'Inter', sans-serif;
|
| 14 |
+
}
|
| 15 |
+
.gradient-bg {
|
| 16 |
+
background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
|
| 17 |
+
}
|
| 18 |
+
.sidebar {
|
| 19 |
+
transition: all 0.3s ease;
|
| 20 |
+
}
|
| 21 |
+
.card-hover:hover {
|
| 22 |
+
transform: translateY(-3px);
|
| 23 |
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
| 24 |
+
}
|
| 25 |
+
</style>
|
| 26 |
+
</head>
|
| 27 |
+
<body class="bg-gray-100">
|
| 28 |
+
<div class="flex h-screen overflow-hidden">
|
| 29 |
+
<!-- Sidebar -->
|
| 30 |
+
<div class="sidebar hidden md:flex md:flex-shrink-0">
|
| 31 |
+
<div class="flex flex-col w-64 bg-white border-r border-gray-200">
|
| 32 |
+
<div class="h-0 flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
|
| 33 |
+
<div class="flex items-center flex-shrink-0 px-4">
|
| 34 |
+
<div class="gradient-bg text-white p-2 rounded-lg">
|
| 35 |
+
<i data-feather="file-text" class="w-6 h-6"></i>
|
| 36 |
+
</div>
|
| 37 |
+
<span class="ml-3 text-xl font-bold text-gray-900">WealthHack</span>
|
| 38 |
+
</div>
|
| 39 |
+
<nav class="mt-5 flex-1 px-2 space-y-1">
|
| 40 |
+
<a href="#" class="bg-gray-100 text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">
|
| 41 |
+
<i data-feather="home" class="text-gray-500 mr-3 flex-shrink-0 h-6 w-6"></i>
|
| 42 |
+
Dashboard
|
| 43 |
+
</a>
|
| 44 |
+
<a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">
|
| 45 |
+
<i data-feather="upload" class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"></i>
|
| 46 |
+
Upload
|
| 47 |
+
</a>
|
| 48 |
+
<a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">
|
| 49 |
+
<i data-feather="file-text" class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"></i>
|
| 50 |
+
Reports
|
| 51 |
+
</a>
|
| 52 |
+
<a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">
|
| 53 |
+
<i data-feather="dollar-sign" class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"></i>
|
| 54 |
+
Tax Filing
|
| 55 |
+
</a>
|
| 56 |
+
<a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">
|
| 57 |
+
<i data-feather="users" class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"></i>
|
| 58 |
+
Payroll
|
| 59 |
+
</a>
|
| 60 |
+
<a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">
|
| 61 |
+
<i data-feather="settings" class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"></i>
|
| 62 |
+
Settings
|
| 63 |
+
</a>
|
| 64 |
+
</nav>
|
| 65 |
+
</div>
|
| 66 |
+
<div class="flex-shrink-0 flex border-t border-gray-200 p-4">
|
| 67 |
+
<div class="flex items-center">
|
| 68 |
+
<div>
|
| 69 |
+
<img class="inline-block h-9 w-9 rounded-full" src="http://static.photos/people/200x200/4" alt="">
|
| 70 |
+
</div>
|
| 71 |
+
<div class="ml-3">
|
| 72 |
+
<p class="text-sm font-medium text-gray-700">John Doe</p>
|
| 73 |
+
<p class="text-xs font-medium text-gray-500">Personal Profile</p>
|
| 74 |
+
</div>
|
| 75 |
+
</div>
|
| 76 |
+
</div>
|
| 77 |
+
</div>
|
| 78 |
+
</div>
|
| 79 |
+
|
| 80 |
+
<div class="flex flex-col w-0 flex-1 overflow-hidden">
|
| 81 |
+
<!-- Mobile top navigation -->
|
| 82 |
+
<div class="md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3">
|
| 83 |
+
<button class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-emerald-500">
|
| 84 |
+
<i data-feather="menu" class="w-6 h-6"></i>
|
| 85 |
+
</button>
|
| 86 |
+
</div>
|
| 87 |
+
|
| 88 |
+
<main class="flex-1 relative z-0 overflow-y-auto focus:outline-none">
|
| 89 |
+
<div class="py-6">
|
| 90 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
|
| 91 |
+
<div class="flex justify-between items-center">
|
| 92 |
+
<h1 class="text-2xl font-semibold text-gray-900">Dashboard</h1>
|
| 93 |
+
<div class="flex items-center space-x-4">
|
| 94 |
+
<div class="inline-flex rounded-md shadow">
|
| 95 |
+
<button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white gradient-bg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
|
| 96 |
+
Upload Statement
|
| 97 |
+
</button>
|
| 98 |
+
</div>
|
| 99 |
+
<div class="relative inline-block text-left">
|
| 100 |
+
<div>
|
| 101 |
+
<button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500" id="profile-menu" aria-expanded="false" aria-haspopup="true">
|
| 102 |
+
Personal
|
| 103 |
+
<i data-feather="chevron-down" class="-mr-1 ml-2 h-5 w-5"></i>
|
| 104 |
+
</button>
|
| 105 |
+
</div>
|
| 106 |
+
</div>
|
| 107 |
+
</div>
|
| 108 |
+
</div>
|
| 109 |
+
</div>
|
| 110 |
+
|
| 111 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 mt-8">
|
| 112 |
+
<!-- Stats -->
|
| 113 |
+
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
|
| 114 |
+
<div class="bg-white overflow-hidden shadow rounded-lg card-hover">
|
| 115 |
+
<div class="p-5">
|
| 116 |
+
<div class="flex items-center">
|
| 117 |
+
<div class="flex-shrink-0">
|
| 118 |
+
<div class="gradient-bg text-white p-3 rounded-lg">
|
| 119 |
+
<i data-feather="dollar-sign" class="w-6 h-6"></i>
|
| 120 |
+
</div>
|
| 121 |
+
</div>
|
| 122 |
+
<div class="ml-5 w-0 flex-1">
|
| 123 |
+
<dl>
|
| 124 |
+
<dt class="text-sm font-medium text-gray-500 truncate">
|
| 125 |
+
Total Income
|
| 126 |
+
</dt>
|
| 127 |
+
<dd>
|
| 128 |
+
<div class="text-lg font-medium text-gray-900">
|
| 129 |
+
R12,345
|
| 130 |
+
</div>
|
| 131 |
+
</dd>
|
| 132 |
+
</dl>
|
| 133 |
+
</div>
|
| 134 |
+
</div>
|
| 135 |
+
</div>
|
| 136 |
+
<div class="bg-gray-50 px-5 py-3">
|
| 137 |
+
<div class="text-sm">
|
| 138 |
+
<span class="font-medium text-emerald-600 hover:text-emerald-500">
|
| 139 |
+
View details
|
| 140 |
+
</span>
|
| 141 |
+
</div>
|
| 142 |
+
</div>
|
| 143 |
+
</div>
|
| 144 |
+
|
| 145 |
+
<div class="bg-white overflow-hidden shadow rounded-lg card-hover">
|
| 146 |
+
<div class="p-5">
|
| 147 |
+
<div class="flex items-center">
|
| 148 |
+
<div class="flex-shrink-0">
|
| 149 |
+
<div class="bg-red-500 text-white p-3 rounded-lg">
|
| 150 |
+
<i data-feather="trending-down" class="w-6 h-6"></i>
|
| 151 |
+
</div>
|
| 152 |
+
</div>
|
| 153 |
+
<div class="ml-5 w-0 flex-1">
|
| 154 |
+
<dl>
|
| 155 |
+
<dt class="text-sm font-medium text-gray-500 truncate">
|
| 156 |
+
Total Expenses
|
| 157 |
+
</dt>
|
| 158 |
+
<dd>
|
| 159 |
+
<div class="text-lg font-medium text-gray-900">
|
| 160 |
+
R8,765
|
| 161 |
+
</div>
|
| 162 |
+
</dd>
|
| 163 |
+
</dl>
|
| 164 |
+
</div>
|
| 165 |
+
</div>
|
| 166 |
+
</div>
|
| 167 |
+
<div class="bg-gray-50 px-5 py-3">
|
| 168 |
+
<div class="text-sm">
|
| 169 |
+
<span class="font-medium text-emerald-600 hover:text-emerald-500">
|
| 170 |
+
View details
|
| 171 |
+
</span>
|
| 172 |
+
</div>
|
| 173 |
+
</div>
|
| 174 |
+
</div>
|
| 175 |
+
|
| 176 |
+
<div class="bg-white overflow-hidden shadow rounded-lg card-hover">
|
| 177 |
+
<div class="p-5">
|
| 178 |
+
<div class="flex items-center">
|
| 179 |
+
<div class="flex-shrink-0">
|
| 180 |
+
<div class="bg-blue-500 text-white p-3 rounded-lg">
|
| 181 |
+
<i data-feather="activity" class="w-6 h-6"></i>
|
| 182 |
+
</div>
|
| 183 |
+
</div>
|
| 184 |
+
<div class="ml-5 w-0 flex-1">
|
| 185 |
+
<dl>
|
| 186 |
+
<dt class="text-sm font-medium text-gray-500 truncate">
|
| 187 |
+
Net Cashflow
|
| 188 |
+
</dt>
|
| 189 |
+
<dd>
|
| 190 |
+
<div class="text-lg font-medium text-gray-900">
|
| 191 |
+
R3,580
|
| 192 |
+
</div>
|
| 193 |
+
</dd>
|
| 194 |
+
</dl>
|
| 195 |
+
</div>
|
| 196 |
+
</div>
|
| 197 |
+
</div>
|
| 198 |
+
<div class="bg-gray-50 px-5 py-3">
|
| 199 |
+
<div class="text-sm">
|
| 200 |
+
<span class="font-medium text-emerald-600 hover:text-emerald-500">
|
| 201 |
+
View details
|
| 202 |
+
</span>
|
| 203 |
+
</div>
|
| 204 |
+
</div>
|
| 205 |
+
</div>
|
| 206 |
+
|
| 207 |
+
<div class="bg-white overflow-hidden shadow rounded-lg card-hover">
|
| 208 |
+
<div class="p-5">
|
| 209 |
+
<div class="flex items-center">
|
| 210 |
+
<div class="flex-shrink-0">
|
| 211 |
+
<div class="bg-purple-500 text-white p-3 rounded-lg">
|
| 212 |
+
<i data-feather="file-text" class="w-6 h-6"></i>
|
| 213 |
+
</div>
|
| 214 |
+
</div>
|
| 215 |
+
<div class="ml-5 w-0 flex-1">
|
| 216 |
+
<dl>
|
| 217 |
+
<dt class="text-sm font-medium text-gray-500 truncate">
|
| 218 |
+
Statements
|
| 219 |
+
</dt>
|
| 220 |
+
<dd>
|
| 221 |
+
<div class="text-lg font-medium text-gray-900">
|
| 222 |
+
5 parsed
|
| 223 |
+
</div>
|
| 224 |
+
</dd>
|
| 225 |
+
</dl>
|
| 226 |
+
</div>
|
| 227 |
+
</div>
|
| 228 |
+
</div>
|
| 229 |
+
<div class="bg-gray-50 px-5 py-3">
|
| 230 |
+
<div class="text-sm">
|
| 231 |
+
<span class="font-medium text-emerald-600 hover:text-emerald-500">
|
| 232 |
+
View all
|
| 233 |
+
</span>
|
| 234 |
+
</div>
|
| 235 |
+
</div>
|
| 236 |
+
</div>
|
| 237 |
+
</div>
|
| 238 |
+
|
| 239 |
+
<!-- Charts -->
|
| 240 |
+
<div class="mt-8 grid grid-cols-1 gap-5 lg:grid-cols-2">
|
| 241 |
+
<div class="bg-white overflow-hidden shadow rounded-lg">
|
| 242 |
+
<div class="px-4 py-5 sm:p-6">
|
| 243 |
+
<h3 class="text-lg leading-6 font-medium text-gray-900">Income vs Expenses</h3>
|
| 244 |
+
<div class="mt-2">
|
| 245 |
+
<img src="http://static.photos/technology/640x360/1" alt="Income vs Expenses Chart" class="w-full">
|
| 246 |
+
</div>
|
| 247 |
+
</div>
|
| 248 |
+
</div>
|
| 249 |
+
|
| 250 |
+
<div class="bg-white overflow-hidden shadow rounded-lg">
|
| 251 |
+
<div class="px-4 py-5 sm:p-6">
|
| 252 |
+
<h3 class="text-lg leading-6 font-medium text-gray-900">Expense Categories</h3>
|
| 253 |
+
<div class="mt-2">
|
| 254 |
+
<img src="http://static.photos/technology/640x360/2" alt="Expense Categories Chart" class="w-full">
|
| 255 |
+
</div>
|
| 256 |
+
</div>
|
| 257 |
+
</div>
|
| 258 |
+
</div>
|
| 259 |
+
|
| 260 |
+
<!-- Recent Transactions -->
|
| 261 |
+
<div class="mt-8">
|
| 262 |
+
<div class="sm:flex sm:items-center">
|
| 263 |
+
<div class="sm:flex-auto">
|
| 264 |
+
<h1 class="text-xl font-semibold text-gray-900">Recent Transactions</h1>
|
| 265 |
+
<p class="mt-2 text-sm text-gray-700">Your most recent financial activity</p>
|
| 266 |
+
</div>
|
| 267 |
+
<div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
|
| 268 |
+
<button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white gradient-bg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
|
| 269 |
+
View all transactions
|
| 270 |
+
</button>
|
| 271 |
+
</div>
|
| 272 |
+
</div>
|
| 273 |
+
<div class="mt-8 flex flex-col">
|
| 274 |
+
<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
| 275 |
+
<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
|
| 276 |
+
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
|
| 277 |
+
<table class="min-w-full divide-y divide-gray-300">
|
| 278 |
+
<thead class="bg-gray-50">
|
| 279 |
+
<tr>
|
| 280 |
+
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Date</th>
|
| 281 |
+
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Description</th>
|
| 282 |
+
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Category</th>
|
| 283 |
+
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Amount</th>
|
| 284 |
+
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
|
| 285 |
+
<span class="sr-only">Edit</span>
|
| 286 |
+
</th>
|
| 287 |
+
</tr>
|
| 288 |
+
</thead>
|
| 289 |
+
<tbody class="divide-y divide-gray-200 bg-white">
|
| 290 |
+
<tr>
|
| 291 |
+
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">15 Jan</td>
|
| 292 |
+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Pick n Pay - Groceries</td>
|
| 293 |
+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
| 294 |
+
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800">
|
| 295 |
+
Groceries
|
| 296 |
+
</span>
|
| 297 |
+
</td>
|
| 298 |
+
<td class="whitespace-nowrap px-3 py-4 text-sm text-red-600">-R456.78</td>
|
| 299 |
+
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
|
| 300 |
+
<a href="#" class="text-emerald-600 hover:text-emerald-900">Edit</a>
|
| 301 |
+
</td>
|
| 302 |
+
</tr>
|
| 303 |
+
<tr>
|
| 304 |
+
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">14 Jan</td>
|
| 305 |
+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Salary Deposit</td>
|
| 306 |
+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
| 307 |
+
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
| 308 |
+
Salary
|
| 309 |
+
</span>
|
| 310 |
+
</td>
|
| 311 |
+
<td class="whitespace-nowrap px-3 py-4 text-sm text-emerald-600">+R12,345.67</td>
|
| 312 |
+
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
|
| 313 |
+
<a href="#" class="text-emerald-600 hover:text-emerald-900">Edit</a>
|
| 314 |
+
</td>
|
| 315 |
+
</tr>
|
| 316 |
+
<tr>
|
| 317 |
+
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">13 Jan</td>
|
| 318 |
+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Discovery Health - Medical Aid</td>
|
| 319 |
+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
| 320 |
+
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
|
| 321 |
+
Medical
|
| 322 |
+
</span>
|
| 323 |
+
</td>
|
| 324 |
+
<td class="whitespace-nowrap px-3 py-4 text-sm text-red-600">-R1,234.56</td>
|
| 325 |
+
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
|
| 326 |
+
<a href="#" class="text-emerald-600 hover:text-emerald-900">Edit</a>
|
| 327 |
+
</td>
|
| 328 |
+
</tr>
|
| 329 |
+
<tr>
|
| 330 |
+
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">12 Jan</td>
|
| 331 |
+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Petrol - Shell</td>
|
| 332 |
+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
| 333 |
+
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
|
| 334 |
+
Transport
|
| 335 |
+
</span>
|
| 336 |
+
</td>
|
| 337 |
+
<td class="whitespace-nowrap px-3 py-4 text-sm text-red-600">-R567.89</td>
|
| 338 |
+
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
|
| 339 |
+
<a href="#" class="text-emerald-600 hover:text-emerald-900">Edit</a>
|
| 340 |
+
</td>
|
| 341 |
+
</tr>
|
| 342 |
+
<tr>
|
| 343 |
+
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">10 Jan</td>
|
| 344 |
+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Netflix Subscription</td>
|
| 345 |
+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
| 346 |
+
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">
|
| 347 |
+
Subscriptions
|
| 348 |
+
</span>
|
| 349 |
+
</td>
|
| 350 |
+
<td class="whitespace-nowrap px-3 py-4 text-sm text-red-600">-R159.00</td>
|
| 351 |
+
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
|
| 352 |
+
<a href="#" class="text-emerald-600 hover:text-emerald-900">Edit</a>
|
| 353 |
+
</td>
|
| 354 |
+
</tr>
|
| 355 |
+
</tbody>
|
| 356 |
+
</table>
|
| 357 |
+
</div>
|
| 358 |
+
</div>
|
| 359 |
+
</div>
|
| 360 |
+
</div>
|
| 361 |
+
</div>
|
| 362 |
+
</div>
|
| 363 |
+
</div>
|
| 364 |
+
</main>
|
| 365 |
+
</div>
|
| 366 |
+
</div>
|
| 367 |
+
|
| 368 |
+
<script>
|
| 369 |
+
feather.replace();
|
| 370 |
+
</script>
|
| 371 |
+
</body>
|
| 372 |
+
</html>
|
index.html
CHANGED
|
@@ -1,19 +1,437 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>WealthHack - Your AI Bookkeeping Assistant</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<style>
|
| 11 |
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
| 12 |
+
body {
|
| 13 |
+
font-family: 'Inter', sans-serif;
|
| 14 |
+
}
|
| 15 |
+
.gradient-bg {
|
| 16 |
+
background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
|
| 17 |
+
}
|
| 18 |
+
.info-card {
|
| 19 |
+
border: 8px solid;
|
| 20 |
+
transition: all 0.3s ease;
|
| 21 |
+
}
|
| 22 |
+
.info-card:hover {
|
| 23 |
+
transform: translateY(-5px);
|
| 24 |
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
| 25 |
+
}
|
| 26 |
+
</style>
|
| 27 |
+
</head>
|
| 28 |
+
<body class="bg-gray-50">
|
| 29 |
+
<!-- Navigation -->
|
| 30 |
+
<nav class="bg-white shadow-sm">
|
| 31 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 32 |
+
<div class="flex justify-between h-16">
|
| 33 |
+
<div class="flex items-center">
|
| 34 |
+
<div class="flex-shrink-0 flex items-center">
|
| 35 |
+
<div class="gradient-bg text-white p-2 rounded-lg">
|
| 36 |
+
<i data-feather="file-text" class="w-6 h-6"></i>
|
| 37 |
+
</div>
|
| 38 |
+
<span class="ml-3 text-xl font-bold text-gray-900">WealthHack</span>
|
| 39 |
+
</div>
|
| 40 |
+
<div class="hidden md:ml-6 md:flex md:space-x-8">
|
| 41 |
+
<a href="#" class="border-emerald-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
|
| 42 |
+
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Solutions</a>
|
| 43 |
+
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Pricing</a>
|
| 44 |
+
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
|
| 45 |
+
</div>
|
| 46 |
+
</div>
|
| 47 |
+
<div class="flex items-center">
|
| 48 |
+
<div class="flex-shrink-0 mr-4">
|
| 49 |
+
<div class="inline-flex rounded-md shadow">
|
| 50 |
+
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white gradient-bg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">Login</a>
|
| 51 |
+
</div>
|
| 52 |
+
</div>
|
| 53 |
+
<div class="hidden md:flex items-center">
|
| 54 |
+
<div class="inline-flex rounded-md shadow">
|
| 55 |
+
<a href="#" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">Personal</a>
|
| 56 |
+
<a href="#" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">Business</a>
|
| 57 |
+
</div>
|
| 58 |
+
</div>
|
| 59 |
+
</div>
|
| 60 |
+
</div>
|
| 61 |
+
</div>
|
| 62 |
+
</nav>
|
| 63 |
+
|
| 64 |
+
<!-- Hero Section -->
|
| 65 |
+
<div class="relative bg-white overflow-hidden">
|
| 66 |
+
<div class="max-w-7xl mx-auto">
|
| 67 |
+
<div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
|
| 68 |
+
<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
|
| 69 |
+
<div class="sm:text-center lg:text-left">
|
| 70 |
+
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
|
| 71 |
+
<span class="block">Your Personal</span>
|
| 72 |
+
<span class="block text-emerald-500">AI Bookkeeper</span>
|
| 73 |
+
</h1>
|
| 74 |
+
<p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
|
| 75 |
+
Built specifically for South Africans to simplify bookkeeping, budgeting, and tax compliance with AI-powered automation.
|
| 76 |
+
</p>
|
| 77 |
+
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
|
| 78 |
+
<div class="rounded-md shadow">
|
| 79 |
+
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white gradient-bg hover:opacity-90 md:py-4 md:text-lg md:px-10">
|
| 80 |
+
Get Started
|
| 81 |
+
</a>
|
| 82 |
+
</div>
|
| 83 |
+
<div class="mt-3 sm:mt-0 sm:ml-3">
|
| 84 |
+
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-emerald-700 bg-emerald-100 hover:bg-emerald-200 md:py-4 md:text-lg md:px-10">
|
| 85 |
+
Watch Demo
|
| 86 |
+
</a>
|
| 87 |
+
</div>
|
| 88 |
+
</div>
|
| 89 |
+
</div>
|
| 90 |
+
</main>
|
| 91 |
+
</div>
|
| 92 |
+
</div>
|
| 93 |
+
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
|
| 94 |
+
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="http://static.photos/finance/1200x630/42" alt="Financial dashboard">
|
| 95 |
+
</div>
|
| 96 |
+
</div>
|
| 97 |
+
|
| 98 |
+
<!-- Features Section -->
|
| 99 |
+
<div class="py-12 bg-white">
|
| 100 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 101 |
+
<div class="lg:text-center">
|
| 102 |
+
<h2 class="text-base text-emerald-600 font-semibold tracking-wide uppercase">Features</h2>
|
| 103 |
+
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
| 104 |
+
Smart financial management for everyone
|
| 105 |
+
</p>
|
| 106 |
+
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
|
| 107 |
+
Whether you're an individual or business owner, WealthHack has tools to transform your financial life.
|
| 108 |
+
</p>
|
| 109 |
+
</div>
|
| 110 |
+
|
| 111 |
+
<div class="mt-10">
|
| 112 |
+
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
|
| 113 |
+
<div class="info-card border-emerald-500 rounded-lg p-6">
|
| 114 |
+
<div class="flex">
|
| 115 |
+
<div class="flex-shrink-0">
|
| 116 |
+
<div class="gradient-bg text-white p-3 rounded-lg">
|
| 117 |
+
<i data-feather="upload" class="w-5 h-5"></i>
|
| 118 |
+
</div>
|
| 119 |
+
</div>
|
| 120 |
+
<div class="ml-4">
|
| 121 |
+
<h3 class="text-lg leading-6 font-medium text-gray-900">Bank Statement Analysis</h3>
|
| 122 |
+
<p class="mt-2 text-base text-gray-500">
|
| 123 |
+
Upload your statements and let our AI automatically categorize every transaction, showing you exactly where your money goes.
|
| 124 |
+
</p>
|
| 125 |
+
</div>
|
| 126 |
+
</div>
|
| 127 |
+
</div>
|
| 128 |
+
|
| 129 |
+
<div class="info-card border-blue-500 rounded-lg p-6">
|
| 130 |
+
<div class="flex">
|
| 131 |
+
<div class="flex-shrink-0">
|
| 132 |
+
<div class="bg-blue-500 text-white p-3 rounded-lg">
|
| 133 |
+
<i data-feather="pie-chart" class="w-5 h-5"></i>
|
| 134 |
+
</div>
|
| 135 |
+
</div>
|
| 136 |
+
<div class="ml-4">
|
| 137 |
+
<h3 class="text-lg leading-6 font-medium text-gray-900">Comprehensive Reports</h3>
|
| 138 |
+
<p class="mt-2 text-base text-gray-500">
|
| 139 |
+
Generate income statements, cashflow reports, and balance sheets with one click. Export to PDF or share with your accountant.
|
| 140 |
+
</p>
|
| 141 |
+
</div>
|
| 142 |
+
</div>
|
| 143 |
+
</div>
|
| 144 |
+
|
| 145 |
+
<div class="info-card border-emerald-500 rounded-lg p-6">
|
| 146 |
+
<div class="flex">
|
| 147 |
+
<div class="flex-shrink-0">
|
| 148 |
+
<div class="gradient-bg text-white p-3 rounded-lg">
|
| 149 |
+
<i data-feather="shield" class="w-5 h-5"></i>
|
| 150 |
+
</div>
|
| 151 |
+
</div>
|
| 152 |
+
<div class="ml-4">
|
| 153 |
+
<h3 class="text-lg leading-6 font-medium text-gray-900">SARS Compliance</h3>
|
| 154 |
+
<p class="mt-2 text-base text-gray-500">
|
| 155 |
+
All reports comply with South African tax requirements. Prepare your ITR14, VAT201, and EMP201 with confidence.
|
| 156 |
+
</p>
|
| 157 |
+
</div>
|
| 158 |
+
</div>
|
| 159 |
+
</div>
|
| 160 |
+
|
| 161 |
+
<div class="info-card border-blue-500 rounded-lg p-6">
|
| 162 |
+
<div class="flex">
|
| 163 |
+
<div class="flex-shrink-0">
|
| 164 |
+
<div class="bg-blue-500 text-white p-3 rounded-lg">
|
| 165 |
+
<i data-feather="message-square" class="w-5 h-5"></i>
|
| 166 |
+
</div>
|
| 167 |
+
</div>
|
| 168 |
+
<div class="ml-4">
|
| 169 |
+
<h3 class="text-lg leading-6 font-medium text-gray-900">Interactive AI Assistant</h3>
|
| 170 |
+
<p class="mt-2 text-base text-gray-500">
|
| 171 |
+
Get personalized financial insights and recommendations based on your spending patterns and financial goals.
|
| 172 |
+
</p>
|
| 173 |
+
</div>
|
| 174 |
+
</div>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
</div>
|
| 178 |
+
</div>
|
| 179 |
+
</div>
|
| 180 |
+
|
| 181 |
+
<!-- CTA Section -->
|
| 182 |
+
<div class="gradient-bg">
|
| 183 |
+
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
|
| 184 |
+
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
|
| 185 |
+
<span class="block">Ready to transform your finances?</span>
|
| 186 |
+
<span class="block">Start your free trial today.</span>
|
| 187 |
+
</h2>
|
| 188 |
+
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
|
| 189 |
+
<div class="inline-flex rounded-md shadow">
|
| 190 |
+
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-emerald-600 bg-white hover:bg-emerald-50">
|
| 191 |
+
Get started
|
| 192 |
+
</a>
|
| 193 |
+
</div>
|
| 194 |
+
<div class="ml-3 inline-flex rounded-md shadow">
|
| 195 |
+
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-emerald-600 bg-opacity-60 hover:bg-opacity-70">
|
| 196 |
+
Learn more
|
| 197 |
+
</a>
|
| 198 |
+
</div>
|
| 199 |
+
</div>
|
| 200 |
+
</div>
|
| 201 |
+
</div>
|
| 202 |
+
|
| 203 |
+
<!-- Testimonials -->
|
| 204 |
+
<div class="bg-gray-50 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
|
| 205 |
+
<div class="relative max-w-7xl mx-auto">
|
| 206 |
+
<div class="text-center">
|
| 207 |
+
<h2 class="text-3xl leading-9 tracking-tight font-extrabold text-gray-900 sm:text-4xl sm:leading-10">
|
| 208 |
+
Trusted by South Africans
|
| 209 |
+
</h2>
|
| 210 |
+
<p class="mt-3 max-w-2xl mx-auto text-xl leading-7 text-gray-500 sm:mt-4">
|
| 211 |
+
See what our users say about WealthHack
|
| 212 |
+
</p>
|
| 213 |
+
</div>
|
| 214 |
+
<div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
|
| 215 |
+
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
| 216 |
+
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
| 217 |
+
<div class="flex-1">
|
| 218 |
+
<p class="text-sm leading-5 font-medium text-emerald-600">
|
| 219 |
+
Personal User
|
| 220 |
+
</p>
|
| 221 |
+
<p class="mt-3 text-base leading-6 text-gray-500">
|
| 222 |
+
"WealthHack has saved me so much time on my personal finances. The AI categorization is scarily accurate!"
|
| 223 |
+
</p>
|
| 224 |
+
</div>
|
| 225 |
+
<div class="mt-6 flex items-center">
|
| 226 |
+
<div class="flex-shrink-0">
|
| 227 |
+
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="">
|
| 228 |
+
</div>
|
| 229 |
+
<div class="ml-3">
|
| 230 |
+
<p class="text-sm leading-5 font-medium text-gray-900">
|
| 231 |
+
Thabo M.
|
| 232 |
+
</p>
|
| 233 |
+
<p class="text-sm leading-5 text-gray-500">
|
| 234 |
+
Johannesburg
|
| 235 |
+
</p>
|
| 236 |
+
</div>
|
| 237 |
+
</div>
|
| 238 |
+
</div>
|
| 239 |
+
</div>
|
| 240 |
+
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
| 241 |
+
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
| 242 |
+
<div class="flex-1">
|
| 243 |
+
<p class="text-sm leading-5 font-medium text-emerald-600">
|
| 244 |
+
Small Business Owner
|
| 245 |
+
</p>
|
| 246 |
+
<p class="mt-3 text-base leading-6 text-gray-500">
|
| 247 |
+
"As a freelancer, I used to spend hours on bookkeeping. Now it's done automatically and SARS compliance is built-in."
|
| 248 |
+
</p>
|
| 249 |
+
</div>
|
| 250 |
+
<div class="mt-6 flex items-center">
|
| 251 |
+
<div class="flex-shrink-0">
|
| 252 |
+
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/2" alt="">
|
| 253 |
+
</div>
|
| 254 |
+
<div class="ml-3">
|
| 255 |
+
<p class="text-sm leading-5 font-medium text-gray-900">
|
| 256 |
+
Nomvula K.
|
| 257 |
+
</p>
|
| 258 |
+
<p class="text-sm leading-5 text-gray-500">
|
| 259 |
+
Cape Town
|
| 260 |
+
</p>
|
| 261 |
+
</div>
|
| 262 |
+
</div>
|
| 263 |
+
</div>
|
| 264 |
+
</div>
|
| 265 |
+
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
| 266 |
+
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
| 267 |
+
<div class="flex-1">
|
| 268 |
+
<p class="text-sm leading-5 font-medium text-emerald-600">
|
| 269 |
+
Accountant
|
| 270 |
+
</p>
|
| 271 |
+
<p class="mt-3 text-base leading-6 text-gray-500">
|
| 272 |
+
"I recommend WealthHack to all my clients. The reports are professional and save me hours of work."
|
| 273 |
+
</p>
|
| 274 |
+
</div>
|
| 275 |
+
<div class="mt-6 flex items-center">
|
| 276 |
+
<div class="flex-shrink-0">
|
| 277 |
+
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/3" alt="">
|
| 278 |
+
</div>
|
| 279 |
+
<div class="ml-3">
|
| 280 |
+
<p class="text-sm leading-5 font-medium text-gray-900">
|
| 281 |
+
David L.
|
| 282 |
+
</p>
|
| 283 |
+
<p class="text-sm leading-5 text-gray-500">
|
| 284 |
+
Durban
|
| 285 |
+
</p>
|
| 286 |
+
</div>
|
| 287 |
+
</div>
|
| 288 |
+
</div>
|
| 289 |
+
</div>
|
| 290 |
+
</div>
|
| 291 |
+
</div>
|
| 292 |
+
</div>
|
| 293 |
+
|
| 294 |
+
<!-- Footer -->
|
| 295 |
+
<footer class="bg-gray-800">
|
| 296 |
+
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
| 297 |
+
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
|
| 298 |
+
<div class="space-y-8 xl:col-span-1">
|
| 299 |
+
<div class="flex items-center">
|
| 300 |
+
<div class="gradient-bg text-white p-2 rounded-lg">
|
| 301 |
+
<i data-feather="file-text" class="w-6 h-6"></i>
|
| 302 |
+
</div>
|
| 303 |
+
<span class="ml-3 text-xl font-bold text-white">WealthHack</span>
|
| 304 |
+
</div>
|
| 305 |
+
<p class="text-gray-300 text-base">
|
| 306 |
+
Your personal AI bookkeeper, helping South Africans manage their finances with ease.
|
| 307 |
+
</p>
|
| 308 |
+
<div class="flex space-x-6">
|
| 309 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 310 |
+
<i data-feather="facebook" class="h-6 w-6"></i>
|
| 311 |
+
</a>
|
| 312 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 313 |
+
<i data-feather="twitter" class="h-6 w-6"></i>
|
| 314 |
+
</a>
|
| 315 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 316 |
+
<i data-feather="linkedin" class="h-6 w-6"></i>
|
| 317 |
+
</a>
|
| 318 |
+
</div>
|
| 319 |
+
</div>
|
| 320 |
+
<div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
|
| 321 |
+
<div class="md:grid md:grid-cols-2 md:gap-8">
|
| 322 |
+
<div>
|
| 323 |
+
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
|
| 324 |
+
Solutions
|
| 325 |
+
</h3>
|
| 326 |
+
<ul class="mt-4 space-y-4">
|
| 327 |
+
<li>
|
| 328 |
+
<a href="#" class="text-base text-gray-400 hover:text-white">
|
| 329 |
+
Personal Finance
|
| 330 |
+
</a>
|
| 331 |
+
</li>
|
| 332 |
+
<li>
|
| 333 |
+
<a href="#" class="text-base text-gray-400 hover:text-white">
|
| 334 |
+
Small Business
|
| 335 |
+
</a>
|
| 336 |
+
</li>
|
| 337 |
+
<li>
|
| 338 |
+
<a href="#" class="text-base text-gray-400 hover:text-white">
|
| 339 |
+
Tax Compliance
|
| 340 |
+
</a>
|
| 341 |
+
</li>
|
| 342 |
+
<li>
|
| 343 |
+
<a href="#" class="text-base text-gray-400 hover:text-white">
|
| 344 |
+
Payroll
|
| 345 |
+
</a>
|
| 346 |
+
</li>
|
| 347 |
+
</ul>
|
| 348 |
+
</div>
|
| 349 |
+
<div class="mt-12 md:mt-0">
|
| 350 |
+
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
|
| 351 |
+
Company
|
| 352 |
+
</h3>
|
| 353 |
+
<ul class="mt-4 space-y-4">
|
| 354 |
+
<li>
|
| 355 |
+
<a href="#" class="text-base text-gray-400 hover:text-white">
|
| 356 |
+
About
|
| 357 |
+
</a>
|
| 358 |
+
</li>
|
| 359 |
+
<li>
|
| 360 |
+
<a href="#" class="text-base text-gray-400 hover:text-white">
|
| 361 |
+
Blog
|
| 362 |
+
</a>
|
| 363 |
+
</li>
|
| 364 |
+
<li>
|
| 365 |
+
<a href="#" class="text-base text-gray-400 hover:text-white">
|
| 366 |
+
Careers
|
| 367 |
+
</a>
|
| 368 |
+
</li>
|
| 369 |
+
<li>
|
| 370 |
+
<a href="#" class="text-base text-gray-400 hover:text-white">
|
| 371 |
+
Contact
|
| 372 |
+
</a>
|
| 373 |
+
</li>
|
| 374 |
+
</ul>
|
| 375 |
+
</div>
|
| 376 |
+
</div>
|
| 377 |
+
<div class="md:grid md:grid-cols-2 md:gap-8">
|
| 378 |
+
<div>
|
| 379 |
+
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
|
| 380 |
+
Legal
|
| 381 |
+
</h3>
|
| 382 |
+
<ul class="mt-4 space-y-4">
|
| 383 |
+
<li>
|
| 384 |
+
<a href="#" class="text-base text-gray-400 hover:text-white">
|
| 385 |
+
Privacy
|
| 386 |
+
</a>
|
| 387 |
+
</li>
|
| 388 |
+
<li>
|
| 389 |
+
<a href="#" class="text-base text-gray-400 hover:text-white">
|
| 390 |
+
Terms
|
| 391 |
+
</a>
|
| 392 |
+
</li>
|
| 393 |
+
<li>
|
| 394 |
+
<a href="#" class="text-base text-gray-400 hover:text-white">
|
| 395 |
+
Compliance
|
| 396 |
+
</a>
|
| 397 |
+
</li>
|
| 398 |
+
</ul>
|
| 399 |
+
</div>
|
| 400 |
+
<div class="mt-12 md:mt-0">
|
| 401 |
+
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
|
| 402 |
+
Support
|
| 403 |
+
</h3>
|
| 404 |
+
<ul class="mt-4 space-y-4">
|
| 405 |
+
<li>
|
| 406 |
+
<a href="#" class="text-base text-gray-400 hover:text-white">
|
| 407 |
+
Help Center
|
| 408 |
+
</a>
|
| 409 |
+
</li>
|
| 410 |
+
<li>
|
| 411 |
+
<a href="#" class="text-base text-gray-400 hover:text-white">
|
| 412 |
+
Documentation
|
| 413 |
+
</a>
|
| 414 |
+
</li>
|
| 415 |
+
<li>
|
| 416 |
+
<a href="#" class="text-base text-gray-400 hover:text-white">
|
| 417 |
+
Community
|
| 418 |
+
</a>
|
| 419 |
+
</li>
|
| 420 |
+
</ul>
|
| 421 |
+
</div>
|
| 422 |
+
</div>
|
| 423 |
+
</div>
|
| 424 |
+
</div>
|
| 425 |
+
<div class="mt-12 border-t border-gray-700 pt-8">
|
| 426 |
+
<p class="text-base text-gray-400 text-center">
|
| 427 |
+
© 2025 Wealth Hack, a Division of CiX Connect (Pty) Ltd. All rights reserved.
|
| 428 |
+
</p>
|
| 429 |
+
</div>
|
| 430 |
+
</div>
|
| 431 |
+
</footer>
|
| 432 |
+
|
| 433 |
+
<script>
|
| 434 |
+
feather.replace();
|
| 435 |
+
</script>
|
| 436 |
+
</body>
|
| 437 |
</html>
|
login.html
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Login | WealthHack</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<style>
|
| 11 |
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
| 12 |
+
body {
|
| 13 |
+
font-family: 'Inter', sans-serif;
|
| 14 |
+
background-color: #f9fafb;
|
| 15 |
+
}
|
| 16 |
+
.gradient-bg {
|
| 17 |
+
background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
|
| 18 |
+
}
|
| 19 |
+
</style>
|
| 20 |
+
</head>
|
| 21 |
+
<body>
|
| 22 |
+
<div class="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
|
| 23 |
+
<div class="sm:mx-auto sm:w-full sm:max-w-md">
|
| 24 |
+
<div class="flex justify-center">
|
| 25 |
+
<div class="gradient-bg text-white p-3 rounded-lg">
|
| 26 |
+
<i data-feather="file-text" class="w-8 h-8"></i>
|
| 27 |
+
</div>
|
| 28 |
+
</div>
|
| 29 |
+
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
| 30 |
+
Sign in to your account
|
| 31 |
+
</h2>
|
| 32 |
+
<p class="mt-2 text-center text-sm text-gray-600">
|
| 33 |
+
Or <a href="#" class="font-medium text-emerald-600 hover:text-emerald-500">start your 14-day free trial</a>
|
| 34 |
+
</p>
|
| 35 |
+
</div>
|
| 36 |
+
|
| 37 |
+
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
| 38 |
+
<div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
|
| 39 |
+
<form class="space-y-6" action="#" method="POST">
|
| 40 |
+
<div>
|
| 41 |
+
<label for="email" class="block text-sm font-medium text-gray-700">
|
| 42 |
+
Email address
|
| 43 |
+
</label>
|
| 44 |
+
<div class="mt-1">
|
| 45 |
+
<input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
|
| 46 |
+
</div>
|
| 47 |
+
</div>
|
| 48 |
+
|
| 49 |
+
<div>
|
| 50 |
+
<label for="password" class="block text-sm font-medium text-gray-700">
|
| 51 |
+
Password
|
| 52 |
+
</label>
|
| 53 |
+
<div class="mt-1">
|
| 54 |
+
<input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
|
| 55 |
+
</div>
|
| 56 |
+
</div>
|
| 57 |
+
|
| 58 |
+
<div class="flex items-center justify-between">
|
| 59 |
+
<div class="flex items-center">
|
| 60 |
+
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300 rounded">
|
| 61 |
+
<label for="remember-me" class="ml-2 block text-sm text-gray-900">
|
| 62 |
+
Remember me
|
| 63 |
+
</label>
|
| 64 |
+
</div>
|
| 65 |
+
|
| 66 |
+
<div class="text-sm">
|
| 67 |
+
<a href="#" class="font-medium text-emerald-600 hover:text-emerald-500">
|
| 68 |
+
Forgot your password?
|
| 69 |
+
</a>
|
| 70 |
+
</div>
|
| 71 |
+
</div>
|
| 72 |
+
|
| 73 |
+
<div>
|
| 74 |
+
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white gradient-bg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
|
| 75 |
+
Sign in
|
| 76 |
+
</button>
|
| 77 |
+
</div>
|
| 78 |
+
</form>
|
| 79 |
+
|
| 80 |
+
<div class="mt-6">
|
| 81 |
+
<div class="relative">
|
| 82 |
+
<div class="absolute inset-0 flex items-center">
|
| 83 |
+
<div class="w-full border-t border-gray-300"></div>
|
| 84 |
+
</div>
|
| 85 |
+
<div class="relative flex justify-center text-sm">
|
| 86 |
+
<span class="px-2 bg-white text-gray-500">
|
| 87 |
+
Or continue with
|
| 88 |
+
</span>
|
| 89 |
+
</div>
|
| 90 |
+
</div>
|
| 91 |
+
|
| 92 |
+
<div class="mt-6 grid grid-cols-2 gap-3">
|
| 93 |
+
<div>
|
| 94 |
+
<a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
| 95 |
+
<i data-feather="facebook" class="w-5 h-5"></i>
|
| 96 |
+
</a>
|
| 97 |
+
</div>
|
| 98 |
+
|
| 99 |
+
<div>
|
| 100 |
+
<a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
| 101 |
+
<i data-feather="google" class="w-5 h-5"></i>
|
| 102 |
+
</a>
|
| 103 |
+
</div>
|
| 104 |
+
</div>
|
| 105 |
+
</div>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="mt-6 text-center text-sm text-gray-600">
|
| 108 |
+
Don't have an account? <a href="#" class="font-medium text-emerald-600 hover:text-emerald-500">Sign up</a>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
|
| 113 |
+
<script>
|
| 114 |
+
feather.replace();
|
| 115 |
+
</script>
|
| 116 |
+
</body>
|
| 117 |
+
</html>
|