Landing page, design system, Supabase backend, hero video, Navbar/Footer

.gitignore

@@ -7,6 +7,7 @@ node_modules
 .env.production.local
 
 build
+frontend/dist
 
 npm-debug.log*
 yarn-debug.log*

DESIGN_SYSTEM.md

@@ -0,0 +1,174 @@
+# Design System
+
+Derived from the Nutold-style reference: clean, professional agency aesthetic with strong contrast and a vibrant accent.
+
+---
+
+## 1. Color Palette
+
+### Primary
+
+| Token | Hex | Usage |
+|-------|-----|--------|
+| **Background (light)** | `#FDFCF9` | Header, hero, main content areas |
+| **Background (dark)** | `#1A3B49` | Mission/statement blocks, footer, partner sections |
+| **Accent** | `#FF7A3D` | Primary CTA buttons, star ratings, key highlights |
+
+### Text
+
+| Token | Hex | Usage |
+|-------|-----|--------|
+| **Primary text** | `#1E3A4A` | Main headings, important copy |
+| **Secondary text** | `#4A6572` | Body text, nav links, descriptions |
+| **Text on dark** | `#FFFFFF` | Headlines and copy on dark backgrounds |
+| **Muted** | `#6B7C85` | Captions, subtle labels |
+
+### UI
+
+| Token | Hex | Usage |
+|-------|-----|--------|
+| **Border / divider** | `#E2E8EB` | Cards, sections, subtle separation |
+| **Surface (cards)** | `#FFFFFF` | Cards on light background |
+| **Hover overlay** | `rgba(0,0,0,0.04)` | Interactive surfaces |
+
+---
+
+## 2. Typography
+
+### Font stack
+
+```css
+font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+```
+
+Optional display/headline font for stronger character (e.g. Clash Display, Satoshi, or similar).
+
+### Scale
+
+| Name | Size | Weight | Line height | Use case |
+|------|------|--------|-------------|----------|
+| **Display** | 60–80px | 700–800 | 1.05–1.1 | Hero headline (all caps) |
+| **H1** | 36–48px | 700 | 1.1 | Page titles |
+| **H2** | 24–32px | 600 | 1.2 | Section titles, agency/subhead |
+| **H3** | 20–24px | 600 | 1.3 | Card titles, subsections |
+| **Body** | 16–18px | 400 | 1.5–1.6 | Paragraphs, descriptions |
+| **Small** | 14px | 400 | 1.5 | Captions, labels, meta |
+| **Nav / Button** | 16px | 500 | 1.4 | Navigation links, button text |
+
+### Conventions
+
+- **Hero headline:** All caps, bold (700–800), primary text color, very large (60–80px).
+- **Section headlines:** Sentence case or title case, semi-bold (600), primary text color.
+- **Body:** Regular (400), secondary text color, comfortable line height.
+- **Buttons:** Medium to semi-bold (500–600), white on accent or primary text on outline.
+
+---
+
+## 3. Spacing & Layout
+
+### Scale (rem)
+
+| Token | Value | Use |
+|-------|--------|-----|
+| `space-1` | 0.25rem (4px) | Tight inline gaps |
+| `space-2` | 0.5rem (8px) | Icon–text, small gaps |
+| `space-3` | 0.75rem (12px) | Form fields, list items |
+| `space-4` | 1rem (16px) | Default gap |
+| `space-6` | 1.5rem (24px) | Between related blocks |
+| `space-8` | 2rem (32px) | Section padding (mobile) |
+| `space-12` | 3rem (48px) | Section padding (desktop) |
+| `space-16` | 4rem (64px) | Large section padding |
+| `space-20` | 5rem (80px) | Hero/section vertical rhythm |
+
+### Layout
+
+- **Content width:** Max-width ~1280px (e.g. `max-w-7xl`), centered, with horizontal padding 1rem–1.5rem.
+- **Sections:** Generous vertical padding (e.g. 5rem–6rem on desktop, 3rem on mobile).
+- **Grids:** Use CSS Grid or flexbox; project/showcase sections can use overlapping, dynamic grids with clear alignment.
+
+---
+
+## 4. Components
+
+### Header / Navigation
+
+- **Height:** ~64px (4rem).
+- **Background:** Light background (`#FDFCF9`) or transparent over hero; solid when scrolled.
+- **Logo:** Wordmark + small icon; primary text color (or white on dark).
+- **Nav links:** Medium weight (500), secondary text color, 16px; hover: primary text or underline.
+- **Primary CTA button:**
+  - Background: Accent (`#FF7A3D`).
+  - Text: White, 16–18px, medium/semi-bold.
+  - Padding: ~12px 24px.
+  - Border-radius: 8–12px (rounded rectangle).
+  - Optional: arrow or chevron icon.
+
+### Buttons
+
+**Primary (accent)**
+
+- Background: `#FF7A3D`
+- Text: white, 16px, medium/semi-bold
+- Padding: 12px 24px
+- Border-radius: 8–12px
+- Hover: Slightly lighter/darker for feedback
+
+**Secondary (outline)**
+
+- Border: 2px solid primary or secondary text
+- Background: transparent
+- Text: primary text color
+- Same padding and radius as primary
+
+### Hero section
+
+- **Background:** Light (`#FDFCF9`) or full-bleed image/video with overlay.
+- **Headline:** Display size, all caps, primary text color, bold.
+- **Supporting text:** H2 or body, secondary text color.
+- **Optional:** Rating/badge (e.g. stars in accent color, score).
+- **CTA:** Primary button + optional secondary.
+
+### Project / content cards
+
+- **Background:** White or light surface.
+- **Border:** 1px `#E2E8EB` or subtle shadow.
+- **Border-radius:** 12–16px.
+- **Padding:** 1.5rem–2rem.
+- **Overlapping grid:** Slight rotation (e.g. 2–5°) and layering for depth where appropriate.
+
+### Mission / statement block (dark section)
+
+- **Background:** `#1A3B49`.
+- **Text:** White, large (e.g. 24–32px), semi-bold or bold, centered or left-aligned.
+- **Full-width:** Edge-to-edge; inner content can be max-width centered.
+- **Padding:** 4rem–5rem vertical.
+
+### Footer / partner logos
+
+- **Background:** Same dark teal `#1A3B49`.
+- **Logos:** White or light gray, horizontal row, even spacing.
+- **Links/legal:** Small text, muted or white at reduced opacity.
+
+---
+
+## 5. Imagery & Visual Style
+
+- **Mockups:** High-quality UI/device mockups; optional slight 3D perspective or rotation.
+- **Photography:** Clean, modern; avoid cluttered imagery.
+- **Icons:** Simple, clear (e.g. arrow for CTA, stars for ratings); match stroke weight (1.5–2px).
+- **Shadows:** Subtle (e.g. `0 4px 20px rgba(0,0,0,0.08)`) for cards; avoid heavy drop shadows.
+
+---
+
+## 6. Accessibility
+
+- Ensure contrast ratios: at least 4.5:1 for body text, 3:1 for large text and UI components.
+- Primary text `#1E3A4A` on `#FDFCF9` and white on `#1A3B49` meet WCAG AA for normal text.
+- Accent `#FF7A3D`: use for non-text (buttons, icons) or pair with white text; avoid long body text on accent.
+- Focus states: visible outline or ring (e.g. 2px offset) for keyboard navigation.
+
+---
+
+## 7. CSS Custom Properties (implementation)
+
+See `frontend/src/design-system/theme.css` for tokens as CSS variables so components can reference this system directly.

README.md

@@ -1,13 +1,151 @@
-# Final Project
+# Connect Africa
 
-Replace this readme with your own information about your project.
+A LinkedIn-style investment platform connecting global investors with African entrepreneurs and verified service providers.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+## What it does
 
-## The problem
+**Value proposition:** Reduce deal friction and increase trust in cross-border African investments through structured listings, verification workflows, and controlled communication.
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+**User roles:**
+
+- **Investors** — discover ventures, filter by country/sector/stage, manage watchlists, request introductions
+- **Entrepreneurs** — create project listings, upload documents, receive investor interest
+- **Service providers** — subscribe for visibility, capture leads, earn verification badges
+
+## Tech stack
+
+| Layer      | Technologies |
+|-----------|--------------|
+| **Frontend** | React 18, Vite, Tailwind CSS v4, Framer Motion, React Router, Lucide React |
+| **Backend**  | Node.js, Express, Babel (ES modules) |
+| **Database / Auth** | Supabase (client in backend), Mongoose (MongoDB) |
+| **Planned** | Stripe, WhatsApp Business API, AI assistance |
+
+## Project structure
+
+```
+project-final/
+├── backend/                 # Express API
+│   ├── lib/
+│   │   └── supabase.js      # Supabase client (auth, DB, storage)
+│   ├── server.js            # App entry, CORS, routes
+│   └── .env                 # SUPABASE_*, MONGO_*, PORT (not committed)
+├── frontend/                # React SPA (Vite)
+│   ├── public/
+│   │   └── videos/           # Add hero-video.mp4 here (optional)
+│   ├── src/
+│   │   ├── design-system/
+│   │   │   └── theme.css     # CSS variables (design tokens)
+│   │   ├── components/
+│   │   │   ├── layout/       # Navbar, Footer
+│   │   │   └── landing/      # Hero, HowItWorks, Testimonials, etc.
+│   │   ├── pages/            # LandingPage, Investor, …
+│   │   ├── App.jsx           # React Router routes
+│   │   ├── main.jsx
+│   │   └── index.css
+│   └── index.html
+├── DESIGN_SYSTEM.md          # Design system (colors, typography, components)
+├── Build_Guide.md            # Full app build spec (schema, flows, pages)
+├── package.json              # Root scripts: postinstall, dev:backend, dev:frontend
+└── README.md                 # This file
+```
+
+## Prerequisites
+
+- **Node.js** (v18 or v20 LTS recommended)
+- **npm**
+
+## Installation
+
+From the project root:
+
+```bash
+npm install
+```
+
+This runs `postinstall` and installs dependencies for both `backend` and `frontend`.
+
+## Environment variables (backend)
+
+Create `backend/.env` (the file is gitignored). Example:
+
+```env
+# Supabase
+SUPABASE_URL=https://your-project.supabase.co
+SUPABASE_ANON_KEY=your_anon_key
+# Optional: for admin operations (bypass RLS)
+# SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
+
+# Optional: direct Postgres (migrations, tools)
+# SUPABASE_DB_URL=postgresql://...
+
+# Server
+PORT=8080
+
+# MongoDB (optional; defaults to mongodb://localhost/final-project)
+# MONGO_URL=mongodb://localhost/final-project
+```
+
+The Supabase client is created in `backend/lib/supabase.js`; import `supabase` in your routes for auth, database, and storage.
+
+## Running the project
+
+### Backend (Express)
+
+From **project root**:
+
+```bash
+npm run dev:backend
+```
+
+Or from `backend/`:
+
+```bash
+cd backend && npm run dev
+```
+
+Server runs at **http://localhost:8080** (or the port in `PORT`).
+
+### Frontend (React + Vite)
+
+From **project root**:
+
+```bash
+npm run dev:frontend
+```
+
+Or from `frontend/`:
+
+```bash
+cd frontend && npm run dev
+```
+
+Then open the URL shown (e.g. **http://localhost:5173**).
+
+### Run both
+
+Use two terminals: one for `npm run dev:backend`, one for `npm run dev:frontend`.
+
+## Frontend overview
+
+- **Landing page (`/`)** — Hero with role CTAs (Investor, Entrepreneur, Service Provider), How it works, Why Connect Africa, platform stats, testimonials, footer. Navbar is transparent over the hero and solid on scroll.
+- **Investor page (`/investor`)** — Placeholder page; linked from the “I’m an Investor” button on the landing page.
+- **Design system** — Colors, typography, and spacing are documented in `DESIGN_SYSTEM.md`. Tokens are available as CSS variables in `frontend/src/design-system/theme.css` (e.g. `--ds-bg-light`, `--ds-accent`, `--ds-text-primary`).
+- **Hero video** — Optional: add `frontend/public/videos/hero-video.mp4` for the hero background; otherwise a gradient fallback is used.
+
+## Root scripts
+
+| Script           | Command                    | Description                          |
+|------------------|----------------------------|--------------------------------------|
+| `postinstall`    | (runs on `npm install`)    | Installs backend + frontend deps     |
+| `dev:backend`    | `npm run dev:backend`      | Start backend dev server             |
+| `dev:frontend`   | `npm run dev:frontend`    | Start frontend dev server            |
+
+## Documentation
+
+- **Build_Guide.md** — Full application spec: Supabase schema, auth flows, Stripe, pages, API routes, deployment, and step-by-step build order.
+- **DESIGN_SYSTEM.md** — Design system derived from the reference: palette, type scale, components, spacing, and accessibility notes.
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+Deploy the backend and frontend to your chosen hosts and add the live URL here so others can try the app.

backend/lib/supabase.js

@@ -0,0 +1,17 @@
+import { createClient } from "@supabase/supabase-js";
+
+const supabaseUrl = process.env.SUPABASE_URL;
+const supabaseKey =
+  process.env.SUPABASE_SERVICE_ROLE_KEY || process.env.SUPABASE_ANON_KEY;
+
+if (!supabaseUrl || !supabaseKey) {
+  throw new Error(
+    "Missing SUPABASE_URL or Supabase key (SUPABASE_SERVICE_ROLE_KEY or SUPABASE_ANON_KEY)"
+  );
+}
+
+/**
+ * Supabase client for backend use.
+ * Use SUPABASE_SERVICE_ROLE_KEY for admin operations (bypass RLS); use SUPABASE_ANON_KEY for user-scoped access.
+ */
+export const supabase = createClient(supabaseUrl, supabaseKey);

backend/package.json

@@ -12,9 +12,11 @@
     "@babel/core": "^7.17.9",
     "@babel/node": "^7.16.8",
     "@babel/preset-env": "^7.16.11",
+    "@supabase/supabase-js": "^2.97.0",
     "cors": "^2.8.5",
+    "dotenv": "^17.3.1",
     "express": "^4.17.3",
     "mongoose": "^8.4.0",
     "nodemon": "^3.0.1"
   }
-}
+}

backend/server.js

@@ -1,6 +1,8 @@
+import "dotenv/config";
 import express from "express";
 import cors from "cors";
 import mongoose from "mongoose";
+import { supabase } from "./lib/supabase.js";
 
 const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/final-project";
 mongoose.connect(mongoUrl);
@@ -16,6 +18,8 @@ app.get("/", (req, res) => {
   res.send("Hello Technigo!");
 });
 
+// Supabase client is available as `supabase` for auth, database, and storage in your routes.
+
 // Start the server
 app.listen(port, () => {
   console.log(`Server running on http://localhost:${port}`);