feat(ui): upgrade to God-Tier Outfit font, premium dark mode, README SEO

Co-authored-by: tapiwamakandigona <tapiwa@user.github.com>

Author: Tapiwa

README.md

@@ -1,193 +1,68 @@
-# 💳 ZimPay - Modern Banking App
-
-[![Demo](https://img.shields.io/badge/Demo-Live-brightgreen)](https://tapiwamakandigona.github.io/zimpay/) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
-
-
-A sleek, modern banking simulation app built with React, TypeScript & Supabase. Experience real-time money transfers, beautiful UI themes, and secure authentication.
+<div align="center">
+  <img src="https://capsule-render.vercel.app/api?type=waving&color=gradient&height=200&section=header&text=ZimPay%20Banking&fontSize=50&animation=fadeIn&fontAlignY=38&desc=Modern%2C%20Real-Time%20Fintech%20App&descAlignY=51&descAlign=62" />
+</div>
 
-[![Live Demo](https://img.shields.io/badge/🚀_Live_Demo-Try_It_Now-brightgreen?style=for-the-badge)](https://tapiwamakandigona.github.io/zimpay/)
-[![GitHub](https://img.shields.io/badge/GitHub-Source_Code-black?style=for-the-badge&logo=github)](https://github.com/tapiwamakandigona/zimpay)
+<h1 align="center">ZimPay - Real-Time Banking Platform</h1>
 
-![React](https://img.shields.io/badge/React-61DAFB?style=flat&logo=react&logoColor=black)
-![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=flat&logo=typescript&logoColor=white)
-![Supabase](https://img.shields.io/badge/Supabase-3FCF8E?style=flat&logo=supabase&logoColor=white)
-![Vite](https://img.shields.io/badge/Vite-646CFF?style=flat&logo=vite&logoColor=white)
+<div align="center">
+  <p><strong>A sleek, modern banking simulation built with React, TypeScript, and Supabase. Features real-time money transfers, row-level security, and a beautiful glassmorphic UI.</strong></p>
+  
+  <p>
+    <a href="https://tapiwamakandigona.github.io/zimpay/"><img src="https://img.shields.io/badge/Live_Demo-0A66C2?style=for-the-badge&logo=googlechrome&logoColor=white" alt="Live Demo" /></a>
+    <img src="https://img.shields.io/github/languages/top/tapiwamakandigona/zimpay?style=for-the-badge&color=blue" alt="Top Language" />
+    <img src="https://img.shields.io/github/last-commit/tapiwamakandigona/zimpay?style=for-the-badge&color=green" alt="Last Commit" />
+  </p>
+</div>
 
 ---
 
-## ✨ Features
-
-### 💸 Banking Features
-- **Real-time Transactions** - Send money to other users instantly
-- **Balance Management** - Track your account balance in real-time
-- **Transaction History** - View all sent and received transactions
-- **User Search** - Find recipients by username or phone number
-
-### 🔐 Security & Authentication
-- **Email Verification** - Secure account creation with email confirmation
-- **Password Reset** - Forgot password? Reset via email link
-- **Secure Sessions** - "Keep me signed in" option for convenience
-- **Row Level Security** - Database-level protection for all data
-
-### 🎨 Design & UX
-- **Glassmorphism UI** - Modern, premium design aesthetic
-- **Dark/Light Themes** - Beautiful color schemes for any preference
-- **Mobile Responsive** - Seamless experience on all devices
-- **Smooth Animations** - Delightful micro-interactions throughout
-
-### 👤 Profile Management
-- **Edit Profile** - Update your name and phone number
-- **View Balance** - Always know your current balance
-- **Account Info** - See all your account details at a glance
-
----
+## ⚡ Architecture Overview
 
-## 🚀 Live Demo
+ZimPay demonstrates how to build a highly interactive, secure FinTech application using modern web technologies. It leverages **Supabase** for backend-as-a-service, utilizing PostgreSQL's Row Level Security (RLS) to ensure that users can only ever access their own financial data.
 
-**[Try ZimPay Now →](https://tapiwamakandigona.github.io/zimpay/)**
+## 💳 Core Features
 
-Create an account and explore all the features! Test sending money between accounts.
+| Feature | Implementation Details |
+|---------|------------------------|
+| **Real-Time Transfers** | Supabase real-time subscriptions instantly update balances |
+| **Secure Auth** | Integrated email verification and JWT session management |
+| **Row Level Security** | Database-enforced privacy (users cannot read others' balances) |
+| **Glassmorphism UI** | Premium CSS styling with dynamic dark mode and fluid transitions |
+| **Responsive Design** | Mobile-first dashboard layout optimized for all screen sizes |
 
 ---
 
-## 🛠️ Tech Stack
+## 🛠️ Technology Stack
 
-| Technology | Purpose |
-|------------|---------|
-| **React 18** | UI Components & State |
-| **TypeScript** | Type-safe development |
-| **Supabase** | Backend (Auth, Database, Realtime) |
-| **React Router v6** | Client-side routing |
-| **Vite** | Build tool & dev server |
-| **CSS3** | Styling with CSS Variables |
+```mermaid
+graph TD;
+    React[React Frontend] --> Supabase[Supabase Backend];
+    Supabase --> Auth[GoTrue Auth];
+    Supabase --> DB[(PostgreSQL UI)];
+    Supabase --> Realtime[WebSocket Stream];
+    React --> Vite[Vite Build System];
+    Vite --> GhPages[GitHub Pages Deploy];
+```
 
 ---
 
-## 📦 Installation
-
-### Prerequisites
-- Node.js 16+ and npm
-- A Supabase account ([supabase.com](https://supabase.com))
-
-### Setup Instructions
+## 🚀 Quick Start
 
 ```bash
-# 1. Clone the repository
 git clone https://github.com/tapiwamakandigona/zimpay.git
 cd zimpay
-
-# 2. Install dependencies
 npm install
 
-# 3. Set up environment variables
-# Copy the example environment file
+# Setup your Supabase keys
 cp .env.example .env.local
 
-# 4. Configure Supabase
-# Option A: Use the demo credentials (already in .env.example)
-# Option B: Create your own Supabase project:
-#   - Go to supabase.com and create a new project
-#   - Copy your project URL and anon key
-#   - Update .env.local with your credentials
-
-# 5. Start development server
 npm run dev
-
-# 6. Build for production
-npm run build
-
-# 7. Deploy to GitHub Pages
-npm run deploy
 ```
 
-### 🔐 Security Requirements
-
-> **IMPORTANT**: This project uses environment variables for sensitive credentials.
-
-- **Never commit `.env.local`** to version control (already in `.gitignore`)
-- **Database access requires authentication** - Row Level Security (RLS) is enabled
-- **Users can only access their own data** - profiles and transactions
-- See [`SECURITY_HOTFIX_INSTRUCTIONS.md`](SECURITY_HOTFIX_INSTRUCTIONS.md) for RLS policy details
-
-### Environment Variables
-
-Create a `.env.local` file in the project root:
-
-```env
-VITE_SUPABASE_URL=your_supabase_project_url
-VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
-```
-
-> **Note**: The `VITE_` prefix is required for Vite to expose these variables to your app.
-
----
-
-## 📁 Project Structure
-
-```
-src/
-├── components/        # Reusable UI components
-│   └── SendMoney.tsx  # Money transfer flow
-├── context/           # React Context providers
-│   ├── AuthContext    # Authentication state
-│   └── ThemeContext   # Theme management
-├── lib/               # Utilities & config
-│   └── supabase.ts    # Supabase client
-├── pages/             # Page components
-│   ├── Landing.tsx    # Welcome page
-│   ├── Login.tsx      # Authentication
-│   ├── SignUp.tsx     # Registration
-│   └── Dashboard.tsx  # Main app interface
-├── App.tsx            # Root component
-└── main.tsx           # Entry point
-```
-
----
-
-## 🔐 Database Schema
-
-### Profiles Table
-| Column | Type | Description |
-|--------|------|-------------|
-| id | uuid | User ID (from auth) |
-| email | text | User's email |
-| full_name | text | Display name |
-| username | text | Unique username |
-| phone_number | text | Phone number |
-| balance | numeric | Account balance |
-
-### Transactions Table
-| Column | Type | Description |
-|--------|------|-------------|
-| id | uuid | Transaction ID |
-| sender_id | uuid | Sender's user ID |
-| receiver_id | uuid | Recipient's user ID |
-| amount | numeric | Transfer amount |
-| description | text | Transaction note |
-| created_at | timestamp | When it occurred |
-
----
-
-## 👨‍💻 Author
-
-**Tapiwa Makandigona**
-
-- 🌐 Portfolio: [tapiwamakandigona.github.io/portfolio](https://tapiwamakandigona.github.io/portfolio)
-- 💻 GitHub: [@tapiwamakandigona](https://github.com/tapiwamakandigona)
-- 📧 Email: silentics.org@gmail.com
-
----
-
-## 📄 License
-
-This project is open source and available under the [MIT License](LICENSE).
-
 ---
 
 <div align="center">
-
-**[🚀 Try Demo](https://tapiwamakandigona.github.io/zimpay/) • [⭐ Star on GitHub](https://github.com/tapiwamakandigona/zimpay)**
-
-*Designed & Built with ❤️ by Tapiwa Makandigona*
-
+  <b>Built by <a href="https://github.com/tapiwamakandigona">Tapiwa Makandigona</a></b>
+  <br/>
+  <i>⭐ Star this repo if you find the real-time Supabase architecture helpful!</i>
 </div>

src/index.css

@@ -1,11 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
+
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Outfit', system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: #0b0c10;
+  background-image: radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.08), transparent 25%),
+    radial-gradient(circle at 85% 30%, rgba(168, 85, 247, 0.08), transparent 25%);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -18,6 +22,7 @@ a {
   color: #646cff;
   text-decoration: inherit;
 }
+
 a:hover {
   color: #535bf2;
 }
@@ -46,9 +51,11 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
+
 button:hover {
   border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
@@ -59,10 +66,12 @@ button:focus-visible {
     color: #213547;
     background-color: #ffffff;
   }
+
   a:hover {
     color: #747bff;
   }
+
   button {
     background-color: #f9f9f9;
   }
-}
+}