diff --git a/FLOWS.md b/FLOWS.md index ebe027986..65db52c2a 100644 --- a/FLOWS.md +++ b/FLOWS.md @@ -1,4 +1,4 @@ -# Pi Demo App Flows +# smajpihub App Flows - [Authentication](#authentication) - [`Pi.authenticate()`](#1-obtain-user-data-with-piauthenticate-sdk-method) diff --git a/README.md b/README.md index 8139c251f..b8eca66ee 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ It aims to show you how to use Pi Platform API on the backend side and Pi SDK on It is composed of two major parts: -- **frontend**: a single-page frontend app (built with React and Vite) +- **frontend**: frontend app (built with React and Vite) - **backend**: a backend app (a very simple JSON API built with Express and Mongo) ## Initial Development diff --git a/SMAJ_ECOSYSTEM_White_Paper v2.0.oxps b/SMAJ_ECOSYSTEM_White_Paper v2.0.oxps new file mode 100644 index 000000000..5de6d30d6 Binary files /dev/null and b/SMAJ_ECOSYSTEM_White_Paper v2.0.oxps differ diff --git a/SMAJ_ECOSYSTEM_White_Paper v2.0.pdf b/SMAJ_ECOSYSTEM_White_Paper v2.0.pdf new file mode 100644 index 000000000..38299f31a Binary files /dev/null and b/SMAJ_ECOSYSTEM_White_Paper v2.0.pdf differ diff --git a/TODO.md b/TODO.md new file mode 100644 index 000000000..20b7ac7a9 --- /dev/null +++ b/TODO.md @@ -0,0 +1,56 @@ +# Frontend Conversion TODO Tracker + +## Current Phase: Phase 3 - Style System Migration (Starting) + +### Phase 1: Home Page Baseline +- [x] Keep current Pi brand color palette and core layout structure in React homepage. +- [x] Port core homepage sections (hero, services preview, highlights, trust). +- [x] Replace all remaining placeholder links with real React routes. +- [ ] Add responsive QA checklist for mobile, tablet, and desktop. + +### Phase 2: App Shell and Routing +- [x] Create route map from legacy HTML pages to React routes. +- [x] Add shared layout component for header/footer/nav. +- [x] Add 404 page and safe redirects for old URLs. +- [x] Define route-level code splitting for large sections. + +### Phase 3: Style System Migration +- [x] Extract design tokens (colors, spacing, radius, shadows) from legacy CSS. +- [x] Extract design tokens (colors, spacing, radius, shadows) from legacy CSS. +- [x] Move repeated styles into reusable React-friendly CSS modules or styled components. (HomePage.module.css + HomePage.tsx migrated, design-tokens.css injected) +- [x] Keep visual parity first, then clean up duplicated CSS. +- [x] Build a reusable section/card/button component set. (Button.tsx + ProductCard.module.css) + +**Phase 3 complete! Next: Phase 4 - Convert community, developers, partners pages.** +- [ ] Build a reusable section/card/button component set. + +**Next step: Create design-tokens.css for CSS vars, migrate more pages/components (Phase 3 #3).** +- [ ] Move repeated styles into reusable React-friendly CSS modules or styled components. +- [ ] Keep visual parity first, then clean up duplicated CSS. +- [ ] Build a reusable section/card/button component set. + +### Phase 4: Content/Page Conversion +- [x] Convert about, services, how-it-works, pricing, faq, and contact. +- [ ] Convert community, developers, partners, and legal pages. +- [ ] Convert blog listing and blog post templates into typed content models. +- [ ] Convert dashboard-related static pages into authenticated React views. + +### Phase 5: Behavior and JS Logic +- [ ] Port shared menu and interaction logic from vanilla JS into React hooks/components. +- [ ] Port page-specific scripts (faq, community, portfolio, etc.) with typed state. +- [ ] Remove direct DOM mutation patterns and replace with React state flow. +- [ ] Add event tracking hooks for key CTA clicks. + +### Phase 6: Pi Demo Integration +- [ ] Wire Pi auth flow and wallet-aware session state. +- [ ] Connect storefront and engagement tasks to backend APIs. +- [ ] Add typed API client layer and request error handling. +- [ ] Add loading/empty/error states across all data views. + +### Phase 7: Quality and Release +- [ ] Add unit tests for core components and route guards. +- [ ] Add integration tests for critical user flows. +- [ ] Run Lighthouse and performance pass on homepage + top routes. +- [ ] Prepare release checklist and deployment notes for Pi Demo frontend. + +**Next step: Extract design tokens from legacy CSS (Phase 3 #1).** diff --git a/backend/README.md b/backend/README.md index 1ccc2d1e2..61a980c5e 100644 --- a/backend/README.md +++ b/backend/README.md @@ -1,4 +1,4 @@ -# Pi Demo App - Backend +# smajpihub App - Backend An Express API server with MongoDB for storing user data and session details. diff --git a/doc/deployment.md b/doc/deployment.md index 249abb70c..68aa3c6d6 100644 --- a/doc/deployment.md +++ b/doc/deployment.md @@ -42,11 +42,11 @@ chmod +x /usr/local/bin/docker-compose Obtain a domain name and set up 2 DNS records pointing to your server. One will be used for the frontend app, and one will be used for the backend app. -Here is an example, assuming your domain name is mydemoapp.com and your server IP is 123.123.123.123. +Here is an example, assuming your domain name is smajpihub.com and your server IP is 123.123.123.123. ```DNS -A mydemoapp.com 123.123.123.123 -A backend.mydemoapp.com 123.123.123.123 +A smajpihub.com 123.123.123.123 +A backend.smajpihub.com 123.123.123.123 ``` ### 3. Register your app on the developer portal diff --git a/frontend/FRONTEND_CONVERSION_TODO.md b/frontend/FRONTEND_CONVERSION_TODO.md new file mode 100644 index 000000000..5e6b8d390 --- /dev/null +++ b/frontend/FRONTEND_CONVERSION_TODO.md @@ -0,0 +1,56 @@ +# SMAJ PI HUB Frontend Conversion TODO + +Goal: convert `smajpihub-convert-to-pi-net-docs` into the Vite React + TypeScript frontend, starting with homepage-first delivery. + +## Phase 1: Home Page Baseline + +- [x] Keep current Pi brand color palette and core layout structure in React homepage. +- [x] Port core homepage sections (`hero`, `services preview`, `highlights`, `trust`). +- [x] Replace all remaining placeholder links with real React routes. +- [ ] Add responsive QA checklist for mobile, tablet, and desktop. + +## Phase 2: App Shell and Routing + +- [x] Create route map from legacy HTML pages to React routes. +- [x] Add shared layout component for header/footer/nav. +- [x] Add 404 page and safe redirects for old URLs. +- [ ] Define route-level code splitting for large sections. + +## Phase 3: Style System Migration + +- [ ] Extract design tokens (colors, spacing, radius, shadows) from legacy CSS. +- [ ] Move repeated styles into reusable React-friendly CSS modules or styled components. +- [ ] Keep visual parity first, then clean up duplicated CSS. +- [ ] Build a reusable section/card/button component set. + +## Phase 4: Content/Page Conversion + +- [x] Convert `about`, `services`, `how-it-works`, `pricing`, `faq`, and `contact`. +- [ ] Convert `community`, `developers`, `partners`, and legal pages. +- [ ] Convert blog listing and blog post templates into typed content models. +- [ ] Convert dashboard-related static pages into authenticated React views. + +## Phase 5: Behavior and JS Logic + +- [x] Port shared menu and interaction logic from vanilla JS into React hooks/components. +- [ ] Port page-specific scripts (`faq`, `community`, `portfolio`, etc.) with typed state. +- [ ] Remove direct DOM mutation patterns and replace with React state flow. +- [ ] Add event tracking hooks for key CTA clicks. + +## Phase 6: Pi Demo Integration + +- [x] Wire Pi auth flow and wallet-aware session state. (Header implementation complete) +- [x] Implement redirect/modal logic for `onIncompletePaymentFound` in Header. +- [x] Add visual "Active" route indicators to the Mobile Navigation drawer. +- [x] Add a User Profile dropdown menu (Logout/Profile) for authenticated users. +- [x] Add loading states for the Login/Session check transition. +- [ ] Connect storefront and engagement tasks to backend APIs. +- [ ] Add typed API client layer and request error handling. +- [ ] Add loading/empty/error states across all data views. + +## Phase 7: Quality and Release + +- [ ] Add unit tests for core components and route guards. +- [ ] Add integration tests for critical user flows. +- [ ] Run Lighthouse and performance pass on homepage + top routes. +- [ ] Prepare release checklist and deployment notes for Pi Demo frontend. diff --git a/frontend/Header.module.css b/frontend/Header.module.css new file mode 100644 index 000000000..21d6a24e6 --- /dev/null +++ b/frontend/Header.module.css @@ -0,0 +1,194 @@ +.header { + position: sticky; + top: 0; + z-index: 1000; + background-color: #ffffff; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); + padding: 0.75rem 1.5rem; +} + +.headerInner { + max-width: 1280px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; +} + +.logo { + height: 42px; + display: block; +} + +.desktopNav { + display: none; +} + +.headerActions { + display: flex; + align-items: center; + gap: 1rem; +} + +.piLoginBtn { + background-color: #673ab7; /* Pi Purple */ + color: #fff; + border: none; + padding: 0.6rem 1.2rem; + border-radius: 50px; + font-weight: 600; + cursor: pointer; + display: flex; + align-items: center; + gap: 0.5rem; + transition: transform 0.2s, background-color 0.2s; +} + +.piLoginBtn:hover { + background-color: #512da8; + transform: translateY(-1px); +} + +.userContainer { + position: relative; +} + +.userInfo { + display: flex; + align-items: center; + gap: 0.5rem; + color: #673ab7; + font-weight: 600; + cursor: pointer; + padding: 0.5rem; + border-radius: 8px; + transition: background-color 0.2s; +} + +.userInfo:hover { + background-color: #f3e5f5; +} + +.userDropdown { + position: absolute; + top: 100%; + right: 0; + background: #fff; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + border-radius: 8px; + padding: 0.5rem 0; + min-width: 150px; + display: flex; + flex-direction: column; + z-index: 1010; +} + +.userDropdown a, .userDropdown button { + padding: 0.75rem 1rem; + text-decoration: none; + color: #333; + background: none; + border: none; + text-align: left; + font-size: 0.9rem; + cursor: pointer; + width: 100%; +} + +.userDropdown a:hover, .userDropdown button:hover { + background-color: #f5f5f5; + color: #673ab7; +} + +.loader { + width: 24px; + height: 24px; + border: 3px solid #f3f3f3; + border-top: 3px solid #673ab7; + border-radius: 50%; + animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.menuToggle { + background: none; + border: none; + font-size: 1.8rem; + cursor: pointer; + color: #333; + display: flex; + align-items: center; +} + +@media (min-width: 1024px) { + .desktopNav { + display: flex; + gap: 1.5rem; + } + .desktopNav a { + text-decoration: none; + color: #555; + font-weight: 500; + transition: color 0.2s; + } + .desktopNav a:hover, .desktopNav :global(.active) { + color: #673ab7; + } + .menuToggle { + display: none; + } +} + +/* Mobile Drawer */ +.menuOverlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.4); + z-index: 1001; +} + +.mobileNav { + position: fixed; + top: 0; + right: -280px; + width: 280px; + height: 100%; + background: #fff; + z-index: 1002; + transition: right 0.3s ease; + padding: 3rem 2rem; +} + +.mobileNavOpen { + right: 0; +} + +.mobileNavLinks { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.mobileNavLinks a { + text-decoration: none; + color: #333; + font-size: 1.1rem; + font-weight: 500; + padding: 0.5rem 0; + border-left: 3px solid transparent; + padding-left: 1rem; + transition: all 0.2s; +} + +.mobileNavLinks a:global(.active) { + color: #673ab7; + border-left-color: #673ab7; + background: linear-gradient(90deg, #f3e5f5 0%, transparent 100%); +} \ No newline at end of file diff --git a/frontend/Header.tsx b/frontend/Header.tsx new file mode 100644 index 000000000..6d100b484 --- /dev/null +++ b/frontend/Header.tsx @@ -0,0 +1,155 @@ +import React, { useState, useEffect } from 'react'; +import { NavLink, Link } from 'react-router-dom'; +import axios from 'axios'; +import AccountCircleIcon from '@mui/icons-material/AccountCircle'; +import BoltIcon from '@mui/icons-material/Bolt'; +import MenuIcon from '@mui/icons-material/Menu'; +import CloseIcon from '@mui/icons-material/Close'; +import styles from './Header.module.css'; + +const Header: React.FC = () => { + const [isMenuOpen, setIsMenuOpen] = useState(false); + const [isUserMenuOpen, setIsUserMenuOpen] = useState(false); + const [user, setUser] = useState<{ username: string } | null>(null); + const [isLoading, setIsLoading] = useState(true); + + const toggleMenu = () => setIsMenuOpen(!isMenuOpen); + const toggleUserMenu = () => setIsUserMenuOpen(!isUserMenuOpen); + const closeMenu = () => { + setIsMenuOpen(false); + setIsUserMenuOpen(false); + }; + + // Check for existing session on mount + useEffect(() => { + const checkSession = async () => { + try { + const response = await axios.get(`${import.meta.env.VITE_BACKEND_URL}/user`, { withCredentials: true }); + if (response.data?.user) { + setUser(response.data.user); + } + } catch (err) { + // No active session found or backend unreachable + } finally { + setIsLoading(false); + } + }; + checkSession(); + }, []); + + const onIncompletePaymentFound = async (payment: any) => { + console.log('Incomplete payment found:', payment); + try { + await axios.post( + `${import.meta.env.VITE_BACKEND_URL}/incomplete`, + { payment }, + { withCredentials: true } + ); + } catch (err) { + console.error('Failed to handle incomplete payment:', err); + } + }; + + const handlePiLogin = async () => { + try { + const scopes = ['username', 'payments']; + + const authResponse = await window.Pi.authenticate(scopes, onIncompletePaymentFound); + + await axios.post( + `${import.meta.env.VITE_BACKEND_URL}/signin`, + { auth: authResponse }, + { withCredentials: true } + ); + setUser(authResponse.user); + console.log('Pi Auth Success:', authResponse); + } catch (err) { + console.error('Pi Authentication failed:', err); + } + }; + + const handleLogout = async () => { + try { + await axios.post(`${import.meta.env.VITE_BACKEND_URL}/logout`, {}, { withCredentials: true }); + setUser(null); + closeMenu(); + } catch (err) { + console.error('Logout failed:', err); + } + }; + + return ( +
+
+ + SMAJ PI HUB Logo + + + {/* Desktop Navigation */} + + +
+ {isLoading ? ( +
+ ) : user ? ( +
+
+ + {user.username} +
+ + {isUserMenuOpen && ( +
+ My Profile + +
+ )} +
+ ) : ( + + )} + + {/* Hamburger Menu Toggle */} + +
+
+ + {/* Mobile Menu Overlay */} + {isMenuOpen &&
} + + {/* Mobile Navigation Drawer */} + +
+ ); +}; + +export default Header; \ No newline at end of file diff --git a/frontend/README.md b/frontend/README.md index 4301641d1..d545d4526 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,6 +1,6 @@ -# Pi Demo App - Frontend +# smajpihub - Frontend -A React + TypeScript frontend for the Pi Demo App, built with Vite. +A React + TypeScript frontend for the smajpihub, built with Vite. ## Getting Started diff --git a/frontend/public/docs/SMAJ_ECOSYSTEM_White_Paper_v2.0.pdf b/frontend/public/docs/SMAJ_ECOSYSTEM_White_Paper_v2.0.pdf new file mode 100644 index 000000000..38299f31a Binary files /dev/null and b/frontend/public/docs/SMAJ_ECOSYSTEM_White_Paper_v2.0.pdf differ diff --git a/frontend/public/logo.png b/frontend/public/logo.png new file mode 100644 index 000000000..3344deabf Binary files /dev/null and b/frontend/public/logo.png differ diff --git a/frontend/public/smaj-hero.png b/frontend/public/smaj-hero.png new file mode 100644 index 000000000..dec26b99a Binary files /dev/null and b/frontend/public/smaj-hero.png differ diff --git a/frontend/public/smaj_ecosystem_logo.png b/frontend/public/smaj_ecosystem_logo.png new file mode 100644 index 000000000..80b12fb77 Binary files /dev/null and b/frontend/public/smaj_ecosystem_logo.png differ diff --git a/frontend/public/smaj_ecosystem_logo_skele.png b/frontend/public/smaj_ecosystem_logo_skele.png new file mode 100644 index 000000000..944ecdfaf Binary files /dev/null and b/frontend/public/smaj_ecosystem_logo_skele.png differ diff --git a/frontend/src/Router.tsx b/frontend/src/Router.tsx index b711729a6..c11bcdc69 100644 --- a/frontend/src/Router.tsx +++ b/frontend/src/Router.tsx @@ -1,16 +1,93 @@ import { createBrowserRouter } from "react-router-dom"; -import Shop from "./pages/Shop"; +import HomePage from "./pages/HomePage"; import EngagementTasksPage from "./pages/EngagementTasksPage.tsx"; +import NotFoundPage from "./pages/NotFoundPage.tsx"; +import GenericPage from "./pages/GenericPage.tsx"; +import AboutPage from "./pages/AboutPage.tsx"; +import ServicesPage from "./pages/ServicesPage.tsx"; +import HowItWorksPage from "./pages/HowItWorksPage.tsx"; +import PricingPage from "./pages/PricingPage.tsx"; +import FaqPage from "./pages/FaqPage.tsx"; +import ContactPage from "./pages/ContactPage.tsx"; +import WhitePaperPage from "./pages/WhitePaperPage.tsx"; export const router = createBrowserRouter([ { path: "/", - element: , + element: , + }, + { + path: "/about", + element: , + }, + { + path: "/services", + element: , + }, + { + path: "/white-paper", + element: , + }, + { + path: "/how-it-works", + element: , + }, + { + path: "/pricing", + element: , + }, + { + path: "/faq", + element: , + }, + { + path: "/contact", + element: , + }, + { + path: "/affiliate", + element: , + }, + { + path: "/collaborate", + element: , + }, + { + path: "/partners", + element: , + }, + { + path: "/community", + element: , + }, + { + path: "/developers", + element: , + }, + { + path: "/privacy", + element: , + }, + { + path: "/terms", + element: , + }, + { + path: "/cookies", + element: , + }, + { + path: "/report-abuse", + element: , }, { path: "/engagement-tasks", element: , }, + { + path: "*", + element: , + }, ]); export default router; diff --git a/frontend/src/components/Button.module.css b/frontend/src/components/Button.module.css new file mode 100644 index 000000000..838874091 --- /dev/null +++ b/frontend/src/components/Button.module.css @@ -0,0 +1,61 @@ +/* Button.module.css - Reusable button using design tokens */ + +:local(.button) { + border: none; + border-radius: var(--radius-pill); + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-sm); + text-decoration: none; + font-family: inherit; +} + +:local(.button--primary) { + background: linear-gradient(135deg, var(--color-primary), #5f2bd6); + color: white; +} + +:local(.button--secondary) { + background: transparent; + color: var(--color-primary); + border: 2px solid var(--color-primary); +} + +:local(.button--gold) { + background: linear-gradient(135deg, var(--color-gold), var(--color-goldLight)); + color: black; +} + +:local(.button--sm) { + padding: var(--space-sm) var(--space-lg); + font-size: 0.875rem; +} + +:local(.button--md) { + padding: var(--space-md) var(--space-2xl); + font-size: 1rem; +} + +:local(.button--lg) { + padding: var(--space-xl) var(--space-3xl); + font-size: 1.125rem; +} + +:local(.button--fullWidth) { + width: 100%; +} + +:local(.button:hover:not(:disabled)) { + transform: translateY(-2px); + box-shadow: var(--shadow-glow); +} + +:local(.button:disabled) { + opacity: 0.6; + cursor: not-allowed; + transform: none; +} diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx new file mode 100644 index 000000000..fdf0a2ce6 --- /dev/null +++ b/frontend/src/components/Button.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import './Button.module.css'; // Ensure module is imported + +interface ButtonProps extends React.ButtonHTMLAttributes { + variant?: 'primary' | 'secondary' | 'gold'; + size?: 'sm' | 'md' | 'lg'; + fullWidth?: boolean; + children: React.ReactNode; +} + +const Button: React.FC = ({ + variant = 'primary', + size = 'md', + fullWidth = false, + className = '', + children, + ...props +}) => { + return ( + + ); +}; + +export default Button; + diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx new file mode 100644 index 000000000..9211f0009 --- /dev/null +++ b/frontend/src/components/Footer.tsx @@ -0,0 +1,42 @@ +import { Link } from "react-router-dom"; + +const Footer = () => { + return ( +
+
+
+

SMAJ PI HUB

+

Built for Pi wallet access, with SMAJ Token utility expanding across the ecosystem.

+
+
+

Platform

+ Home + About + Services + White Paper + Pricing + FAQ + Contact +
+
+

Programs

+ Affiliate Program + Collaborate With Us + Partners + Community + Developers +
+
+

Legal

+ Privacy Policy + Terms & Conditions + Cookie Policy + Report Abuse +
+
+

© 2026 SMAJ PI HUB. All rights reserved.

+
+ ); +}; + +export default Footer; diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index c9b608d6d..660952450 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -1,51 +1,47 @@ -import type { CSSProperties } from "react"; -import type { User } from "../types/pi.ts"; +import { NavLink } from "react-router-dom"; +import { useAuthContext } from "../contexts/AuthContext"; -interface HeaderProps { - onSignIn: () => void; - onSignOut: () => void; - onSendTestNotification: () => void; - user: User | null; - isLoading?: boolean; -} +const Header = () => { + const { user, isAuthenticated, signIn, signOut, isLoading } = useAuthContext(); -const headerStyle: CSSProperties = { - padding: 8, - backgroundColor: "gray", - color: "white", - width: "100%", - display: "flex", - alignItems: "center", - justifyContent: "space-between", -}; - -const userSectionStyle: CSSProperties = { - display: "flex", - alignItems: "center", - gap: 8, -}; - -const Header = ({ user, onSignIn, onSignOut, onSendTestNotification, isLoading }: HeaderProps) => { return ( -
-
Pi Bakery
- -
- {user ? ( - <> - @{user.username} - +
+ ) : ( + - {user.roles.includes("core_team") && ( - - )} - - ) : ( - - )} + )} +
); diff --git a/frontend/src/components/ProductCard.module.css b/frontend/src/components/ProductCard.module.css new file mode 100644 index 000000000..9abab5b40 --- /dev/null +++ b/frontend/src/components/ProductCard.module.css @@ -0,0 +1,88 @@ +/* ProductCard.module.css - Migrated from inline styles using design tokens */ + +:local(.container) { + margin: var(--space-xl); + padding-bottom: var(--space-xl); + border-bottom: 1px solid var(--color-gray-med); + border-radius: var(--radius-md); + background: var(--color-light-bg); + box-shadow: var(--shadow-card); + transition: box-shadow 0.25s ease; +} + +:local(.container:hover) { + box-shadow: var(--shadow-hover); +} + +:local(.contentRow) { + display: flex; + flex-direction: row; + margin-bottom: var(--space-md); + gap: var(--space-sm); +} + +:local(.imageWrapper) { + width: 33%; + margin-right: var(--space-sm); +} + +:local(.image) { + width: 100%; + height: 120px; + object-fit: cover; + border-radius: var(--radius-md); +} + +:local(.info) { + width: 66%; + padding: var(--space-md) 0; +} + +:local(.info) h3 { + margin: 0 0 var(--space-xs) 0; + color: var(--color-gray-dark); + font-size: 1.1rem; +} + +:local(.info) p { + margin: 0; + color: var(--color-gray-med); + font-size: 0.9rem; + line-height: 1.4; +} + +:local(.priceSection) { + text-align: center; + margin-bottom: var(--space-md); + padding-top: var(--space-md); + border-top: 1px solid var(--color-border-light); +} + +:local(.price) { + font-size: 1.3rem; + font-weight: bold; + color: var(--color-gold); +} + +:local(.buyButton) { + background: linear-gradient(135deg, var(--color-primary), var(--color-primaryDark)); + color: white; + border: none; + border-radius: var(--radius-pill); + padding: var(--space-md) var(--space-2xl); + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + margin-top: var(--space-sm); + min-width: 100px; +} + +:local(.buyButton:hover:not(:disabled)) { + transform: translateY(-2px); + box-shadow: var(--shadow-glow); +} + +:local(.buyButton:disabled) { + opacity: 0.6; + cursor: not-allowed; +} diff --git a/frontend/src/components/ProductCard.tsx b/frontend/src/components/ProductCard.tsx index 7dfdfb745..45316921f 100644 --- a/frontend/src/components/ProductCard.tsx +++ b/frontend/src/components/ProductCard.tsx @@ -1,4 +1,4 @@ -import type { CSSProperties } from "react"; +import styles from './ProductCard.module.css'; interface ProductCardProps { name: string; @@ -9,54 +9,25 @@ interface ProductCardProps { disabled?: boolean; } -const containerStyle: CSSProperties = { - margin: 16, - paddingBottom: 16, - borderBottom: "1px solid gray", -}; - -const contentRowStyle: CSSProperties = { - display: "flex", - flexDirection: "row", - marginBottom: 8, -}; - -const imageWrapperStyle: CSSProperties = { - width: "33%", - marginRight: 8, -}; -const imageStyle: CSSProperties = { - width: "100%", - objectFit: "cover", -}; - -const infoStyle: CSSProperties = { - width: "66%", -}; - -const priceSectionStyle: CSSProperties = { - textAlign: "center", - marginBottom: 8, -}; const ProductCard = ({ name, description, price, pictureURL, onClickBuy, disabled }: ProductCardProps) => { return ( -
-
-
- {name} +
+
+
+ {name}
-
+

{name}

{description}

-
- {price} Test-Ï€
-
diff --git a/frontend/src/contexts/AuthContext.tsx b/frontend/src/contexts/AuthContext.tsx new file mode 100644 index 000000000..7a52bdbfe --- /dev/null +++ b/frontend/src/contexts/AuthContext.tsx @@ -0,0 +1,46 @@ +import { createContext, useContext, type ReactNode } from "react"; +import { useAuth } from "../hooks/useAuth"; + +interface AuthContextType { + user: ReturnType["user"]; + isAuthenticated: boolean; + showSignIn: boolean; + signIn: () => Promise; + signOut: () => Promise; + closeSignIn: () => void; + requireAuth: () => void; + isLoading: boolean; +} + +const AuthContext = createContext(null); + +interface AuthProviderProps { + children: ReactNode; +} + +export const AuthProvider = ({ children }: AuthProviderProps) => { + const auth = useAuth(); + + return ( + + {children} + + ); +}; + +export const useAuthContext = () => { + const context = useContext(AuthContext); + if (!context) { + throw new Error("useAuthContext must be used within AuthProvider"); + } + return context; +}; diff --git a/frontend/src/design-tokens.css b/frontend/src/design-tokens.css new file mode 100644 index 000000000..8b82262a7 --- /dev/null +++ b/frontend/src/design-tokens.css @@ -0,0 +1,39 @@ +:root { + /* Colors from design-tokens.ts */ + --color-primary: #7d3cff; + --color-gold: #f5c400; + --color-dark-bg: #0b0f1a; + --color-light-bg: #ffffff; + --color-gray-dark: #131b31; + --color-gray-med: #4b5368; + --color-gray-light: #d4d8e4; + --color-border-light: #e6eaf5; + --color-pill-bg: #f0e9ff; + + /* Spacing */ + --space-xs: 4px; + --space-sm: 8px; + --space-md: 12px; + --space-lg: 16px; + --space-xl: 20px; + --space-2xl: 24px; + --space-3xl: 30px; + --space-4xl: 32px; + --space-5xl: 40px; + --space-hero: 72px; + + /* Radius */ + --radius-sm: 6px; + --radius-md: 12px; + --radius-lg: 14px; + --radius-xl: 16px; + --radius-pill: 30px; + --radius-full: 50px; + --radius-circle: 999px; + + /* Shadows */ + --shadow-card: 0 12px 28px rgba(17, 22, 39, 0.07); + --shadow-hover: 0 12px 30px rgba(17, 22, 39, 0.09); + --shadow-dark: 0 20px 45px rgba(0, 0, 0, 0.35); + --shadow-glow: 0 0 15px #7d3cff; +} diff --git a/frontend/src/design-tokens.ts b/frontend/src/design-tokens.ts new file mode 100644 index 000000000..9cd07eb51 --- /dev/null +++ b/frontend/src/design-tokens.ts @@ -0,0 +1,88 @@ +/** + * Design tokens extracted from legacy CSS (main.css, homepage.css). + * Organized as CSS custom properties for easy use in Tailwind, CSS modules, or inline styles. + * Usage: import and apply via style={{ '--primary': colors.primary } as React.CSSProperties} + */ + +export const colors = { + primary: '#7d3cff', // Main purple (buttons, accents, icons) + primaryDark: '#5f2bd6', + gold: '#f5c400', // CTA gradient start + goldLight: '#ffdd55', // CTA gradient end + darkBg: '#0b0f1a', // Hero/dark sections + darkCard: '#111', // Cards in dark mode + lightBg: '#ffffff', // Main backgrounds + lightCard: '#fff', // Light cards + grayDark: '#131b31', // Headings + grayMed: '#4b5368', // Body text + grayLight: '#d4d8e4', // Secondary text + borderLight: '#e6eaf5', // Borders + pillBg: '#f0e9ff', // Purple pills +} as const; + +export const spacing = { + xs: '4px', + sm: '8px', + md: '12px', + lg: '16px', + xl: '20px', + '2xl': '24px', + '3xl': '30px', + '4xl': '32px', + '5xl': '40px', + hero: '72px', +} as const; + +export const radius = { + sm: '6px', + md: '12px', + lg: '14px', + xl: '16px', + pill: '30px', + full: '50px', + circle: '999px', +} as const; + +export const shadows = { + card: '0 12px 28px rgba(17, 22, 39, 0.07)', + hover: '0 12px 30px rgba(17, 22, 39, 0.09)', + dark: '0 20px 45px rgba(0, 0, 0, 0.35)', + glow: '0 0 15px #7d3cff', +} as const; + +export const typography = { + hero: 'clamp(34px, 5vw, 56px)', + section: 'clamp(28px, 4vw, 40px)', + cardTitle: '20px', + body: '15px-17px', +} as const; + +// CSS variables string for global :root injection +export const cssVariables = ` + :root { + /* Colors */ + --color-primary: ${colors.primary}; + --color-gold: ${colors.gold}; + --color-dark-bg: ${colors.darkBg}; + --color-light-bg: ${colors.lightBg}; + --color-gray-dark: ${colors.grayDark}; + --color-gray-med: ${colors.grayMed}; + --color-text-light: ${colors.grayLight}; + + /* Spacing */ + --space-xs: ${spacing.xs}; + --space-md: ${spacing.md}; + --space-xl: ${spacing.xl}; + --space-3xl: ${spacing['3xl']}; + + /* Radius */ + --radius-md: ${radius.md}; + --radius-xl: ${radius.xl}; + --radius-circle: ${radius.circle}; + + /* Shadows */ + --shadow-card: ${shadows.card}; + --shadow-hover: ${shadows.hover}; + } +` as const; + diff --git a/frontend/src/index.css b/frontend/src/index.css index 22a9c9520..10093e697 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,5 +1,8 @@ body { font-family: sans-serif; + margin: 0; + color: #1f1734; + background: #f7f5fd; } h1, h2, h3 { @@ -15,3 +18,421 @@ h4, h5, h6 { *, *::before, *::after { box-sizing: border-box; } + +.home-page { + max-width: 1120px; + margin: 0 auto; + padding: 24px 16px 48px; +} + +.smaj-header { + position: sticky; + top: 0; + z-index: 20; + background: #ffffff; + border-bottom: 1px solid #e8e2fb; +} + +.smaj-header-inner { + max-width: 1120px; + margin: 0 auto; + padding: 10px 16px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; +} + +.smaj-logo-link { + display: inline-flex; + align-items: center; +} + +.smaj-logo { + width: 44px; + height: 44px; + object-fit: contain; +} + +.smaj-nav { + display: flex; + align-items: center; + gap: 14px; + flex-wrap: wrap; +} + +.smaj-nav a { + text-decoration: none; + color: #3f2a7f; + font-size: 14px; + font-weight: 600; +} + +.home-hero { + margin-top: 16px; + background: linear-gradient(135deg, #ffffff, #f1ebff); + border: 1px solid #e6dcff; + border-radius: 12px; + padding: 24px; +} + +.home-hero-grid { + display: grid; + grid-template-columns: 1.2fr 1fr; + gap: 20px; + align-items: center; +} + +.home-kicker { + display: inline-block; + font-size: 12px; + font-weight: 700; + letter-spacing: 0.08em; + color: #6b3fe6; + margin-bottom: 10px; +} + +.home-hero h1 { + margin-bottom: 12px; + font-size: clamp(28px, 4.2vw, 44px); + line-height: 1.1; +} + +.home-hero p { + margin: 0; + color: #4b3f68; +} + +.home-hero-cta { + display: flex; + gap: 10px; + margin: 18px 0; + flex-wrap: wrap; +} + +.home-hero-cta a { + text-decoration: none; + display: inline-flex; + align-items: center; + justify-content: center; + border: 0; + border-radius: 8px; + padding: 10px 14px; + font-weight: 700; + cursor: pointer; +} + +.home-hero-cta a:first-child { + background: #6b3fe6; + color: #fff; +} + +.home-hero-cta a:last-child { + background: #efe8ff; + color: #3f2a7f; +} + +.home-proof { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 12px; +} + +.home-proof div { + background: #ffffff; + border: 1px solid #e3d8ff; + border-radius: 8px; + padding: 10px; + display: flex; + flex-direction: column; + gap: 4px; +} + +.home-proof span { + color: #665a82; + font-size: 13px; +} + +.home-hero-card { + margin: 0; + background: #ffffff; + border: 1px solid #e3d8ff; + border-radius: 10px; + overflow: hidden; +} + +.home-hero-card img { + width: 100%; + height: 230px; + object-fit: cover; + display: block; +} + +.home-hero-card div { + padding: 14px; +} + +.content-hero-grid { + display: grid; + grid-template-columns: 1.2fr 1fr; + gap: 16px; + align-items: start; +} + +.content-panel { + background: #ffffff; + border: 1px solid #e3d8ff; + border-radius: 10px; + padding: 14px; +} + +.content-panel ul { + margin: 0; + padding-left: 18px; + color: #5d4f80; +} + +.home-section { + margin-top: 24px; + background: #ffffff; + border: 1px solid #ece5ff; + border-radius: 12px; + padding: 22px; +} + +.home-section-head p { + margin-top: 0; + color: #665a82; +} + +.home-service-grid, +.home-highlight-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 12px; +} + +.home-trust-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 12px; +} + +.home-service-card, +.home-highlight-card { + border: 1px solid #e5dcff; + border-radius: 8px; + padding: 14px; + background: #fbf9ff; +} + +.home-trust-card { + border: 1px solid #e5dcff; + border-radius: 8px; + padding: 14px; + background: #fbf9ff; +} + +.home-service-card h3, +.home-highlight-card h3 { + margin-bottom: 8px; +} + +.home-trust-card h3 { + margin-bottom: 8px; +} + +.home-service-card p, +.home-highlight-card p { + margin: 0; + color: #5d4f80; +} + +.home-trust-card p { + margin: 0; + color: #5d4f80; +} + +.content-step-grid, +.price-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 12px; +} + +.status-chip { + display: inline-block; + margin-top: 10px; + font-size: 12px; + font-weight: 700; + color: #3f2a7f; + background: #efe8ff; + padding: 5px 8px; + border-radius: 999px; +} + +.wp-list { + margin: 0; + padding-left: 18px; + color: #5d4f80; + display: grid; + gap: 6px; +} + +.wp-modules-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 12px; +} + +.wp-roadmap-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 12px; +} + +.plan-price { + font-weight: 700; + color: #3f2a7f; +} + +.faq-list { + display: grid; + gap: 10px; +} + +.faq-item { + border: 1px solid #e5dcff; + border-radius: 8px; + background: #fbf9ff; + padding: 10px 12px; +} + +.faq-item summary { + cursor: pointer; + font-weight: 700; +} + +.faq-item p { + color: #5d4f80; +} + +.contact-grid { + display: grid; + grid-template-columns: 1.4fr 1fr; + gap: 14px; +} + +.contact-form { + display: grid; + gap: 8px; +} + +.contact-form input, +.contact-form textarea { + width: 100%; + border: 1px solid #d8ccfb; + border-radius: 8px; + padding: 10px; +} + +.contact-form button { + border: 0; + border-radius: 8px; + padding: 10px 14px; + background: #6b3fe6; + color: #fff; + font-weight: 700; + cursor: pointer; +} + +.smaj-footer { + background: #221740; + color: #d9d1f5; + padding: 30px 16px 18px; +} + +.smaj-footer-grid { + max-width: 1120px; + margin: 0 auto; + display: grid; + grid-template-columns: 1.2fr repeat(3, 1fr); + gap: 18px; +} + +.smaj-footer h4 { + margin: 0 0 10px; + color: #ffffff; +} + +.smaj-footer p { + margin: 0; +} + +.smaj-footer a { + display: block; + color: #d9d1f5; + text-decoration: none; + margin: 0 0 8px; + font-size: 14px; +} + +.smaj-copyright { + max-width: 1120px; + margin: 20px auto 0; + padding-top: 12px; + border-top: 1px solid #3a2d61; + color: #b9abdf; + font-size: 13px; +} + +@media (max-width: 900px) { + .smaj-header-inner { + flex-direction: column; + align-items: flex-start; + } + + .smaj-nav { + width: 100%; + } + + .home-hero-grid { + grid-template-columns: 1fr; + } + + .content-hero-grid, + .contact-grid { + grid-template-columns: 1fr; + } + + .home-service-grid, + .home-highlight-grid, + .home-trust-grid, + .content-step-grid, + .price-grid, + .wp-modules-grid, + .wp-roadmap-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .smaj-footer-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 640px) { + .home-proof, + .home-service-grid, + .home-highlight-grid, + .home-trust-grid, + .content-step-grid, + .price-grid, + .wp-modules-grid, + .wp-roadmap-grid { + grid-template-columns: 1fr; + } + + .smaj-footer-grid { + grid-template-columns: 1fr; + } +} diff --git a/frontend/src/layouts/AppLayout.tsx b/frontend/src/layouts/AppLayout.tsx new file mode 100644 index 000000000..fb6a5c248 --- /dev/null +++ b/frontend/src/layouts/AppLayout.tsx @@ -0,0 +1,20 @@ +import type { ReactNode } from "react"; +import Header from "../components/Header"; +import Footer from "../components/Footer"; + +type AppLayoutProps = { + children: ReactNode; + showFooter?: boolean; +}; + +const AppLayout = ({ children, showFooter = true }: AppLayoutProps) => { + return ( + <> +
+ {children} + {showFooter ?
: null} + + ); +}; + +export default AppLayout; diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index bef5202a3..681f2d901 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,10 +1,14 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' +import './design-tokens.css' // Global design tokens import App from './App.tsx' +import { AuthProvider } from './contexts/AuthContext' createRoot(document.getElementById('root')!).render( - + + + , ) diff --git a/frontend/src/pages/AboutPage.tsx b/frontend/src/pages/AboutPage.tsx new file mode 100644 index 000000000..b98c6f397 --- /dev/null +++ b/frontend/src/pages/AboutPage.tsx @@ -0,0 +1,56 @@ +import AppLayout from "../layouts/AppLayout"; + +const AboutPage = () => { + return ( + +
+
+
+
+ ABOUT SMAJ PI HUB +

One Ecosystem. Real Pi Utility. Global Opportunity.

+

+ SMAJ PI HUB is a Pi-powered ecosystem where users connect once and access essential services including + jobs, education, health, transport, housing, and charity. +

+
+ +
+
+ +
+
+
+

Mission

+

+ Create real economic utility for Pi by building a trusted platform where users and providers transact + and grow together. +

+
+
+

Vision

+

+ Empower a borderless ecosystem where anyone can use their skills and services to generate sustainable + opportunity. +

+
+
+

Trust

+

Ensure secure transactions, transparent process, and reliable standards across every service flow.

+
+
+
+
+ + ); +}; + +export default AboutPage; diff --git a/frontend/src/pages/ContactPage.tsx b/frontend/src/pages/ContactPage.tsx new file mode 100644 index 000000000..3861c227c --- /dev/null +++ b/frontend/src/pages/ContactPage.tsx @@ -0,0 +1,46 @@ +import { useState } from "react"; +import type { FormEvent } from "react"; +import AppLayout from "../layouts/AppLayout"; + +const ContactPage = () => { + const [message, setMessage] = useState(""); + + const handleSubmit = (event: FormEvent) => { + event.preventDefault(); + setMessage("Thanks. Your message has been recorded for the support team."); + }; + + return ( + +
+
+ GET IN TOUCH +

Contact SMAJ PI HUB

+

Ask a question or share feedback and we will reply quickly.

+
+ +
+
+

Send a Message

+ + + + + + +
+ + + + + +
+

Our Partners

+

Coming soon: see the global partners collaborating with SMAJ PI HUB.

+
+
+ +

Amazon

+
+
+ +

Ali Baba

+
+
+ +

ALi Express

+
+
+ +

Partner Name

+
+
+
+ + + + + + + + + + + + + + + + + diff --git a/smajpihub-convert-to-pi-net-docs/pages/community.html b/smajpihub-convert-to-pi-net-docs/pages/community.html new file mode 100644 index 000000000..0d03cd7fb --- /dev/null +++ b/smajpihub-convert-to-pi-net-docs/pages/community.html @@ -0,0 +1,300 @@ + + + + + + Community - SMAJ PI HUB + + + + + + + + +
+
+ + + + + + + +
+
+ +
+
+
+
+ GLOBAL PIONEER NETWORK +

Build, Learn, and Grow with the SMAJ PI HUB Community

+

+ Join discussions, discover real Pi utility updates, and collaborate with pioneers, merchants, + developers, and contributors from across the ecosystem. +

+
+ Join Community + Read Updates +
+
+
30K+Global Members
+
120+Weekly Threads
+
24/7Peer Support
+
+
+
+ SMAJ PI HUB global community +
+
+
+ +
+
+
+

Explore Conversations

+

Filter trending threads by category and follow what matters most to you.

+
+
+ + + + + + +
+
+
+ +
+
+
+

Latest Threads

+ Start a thread +
+
+
+

How SMAJ PI HUB makes multi-project access easier for daily users

+

Discussion on unified wallet flow, reduced friction, and connected project navigation.

+
+ Product Team + 87 + 35 replies +
+
+ + + +
+
+ +
+

Trusted marketplace checklist for Pi buyers and sellers

+

Members share proof-of-delivery practices and rating standards for safer transactions.

+
+ Merchant Hub + 64 + 22 replies +
+
+ + + +
+
+ +
+

Wallet safety thread: verification steps every pioneer should follow

+

Security-focused discussion around wallet hygiene, account recovery, and payment confirmation.

+
+ Security Desk + 102 + 41 replies +
+
+ + + +
+
+ +
+

New user onboarding guide: from first visit to first Pi transaction

+

Step-by-step tutorial references and onboarding improvements suggested by the community.

+
+ Onboarding Squad + 58 + 18 replies +
+
+ + + +
+
+ +
+

Regional ambassador thread: local growth ideas and outreach plans

+

Community leaders coordinate local meetups, education, and collaboration opportunities.

+
+ Ambassador Circle + 49 + 27 replies +
+
+ + + +
+
+ +
+

Roadmap ideas: which service module should launch next in the hub

+

Voting and feedback thread for upcoming modules and practical use-case priorities.

+
+ Roadmap Forum + 73 + 30 replies +
+
+ + + +
+
+
+
+
+ +
+
+
+

Featured Members

+

Contributors helping the ecosystem grow through trust and real collaboration.

+
+
+
+ Featured member Ayaht +

Ayaht Rahman

+

Community Growth Lead

+
+
+ Featured member Adam +

Adam Noor

+

Marketplace Moderator

+
+
+ Featured member Umerr +

Umerr Khan

+

Education Contributor

+
+
+ Featured member Aisha +

Aisha Ali

+

Support Mentor

+
+
+
+
+ +
+
+
+

Have a Question or Idea for the Ecosystem?

+

Share it with the SMAJ PI HUB community and get feedback from members and contributors.

+
+
+ Post Your Idea + Visit Developers +
+
+
+
+ + + + + + + + + + + + + diff --git a/smajpihub-convert-to-pi-net-docs/pages/contact.html b/smajpihub-convert-to-pi-net-docs/pages/contact.html new file mode 100644 index 000000000..a1958a8b0 --- /dev/null +++ b/smajpihub-convert-to-pi-net-docs/pages/contact.html @@ -0,0 +1,172 @@ + + + + + + Contact - SMAJ PI HUB + + + + + + + + + + +
+
+ + + + + + + +
+
+ +
+
+
+ GET IN TOUCH +

Contact SMAJ PI HUB

+

Ask a question or share feedback and we will reply quickly.

+
+
+ +
+
+

Send a Message

+

Fill out this form and we will respond within 24 hours.

+
+
+
+ + +
+
+ + +
+
+ +
+ + +
+ + +

+
+
+ + +
+
+ + + + + + + + + + + + + diff --git a/smajpihub-convert-to-pi-net-docs/pages/developers.html b/smajpihub-convert-to-pi-net-docs/pages/developers.html new file mode 100644 index 000000000..864150b2f --- /dev/null +++ b/smajpihub-convert-to-pi-net-docs/pages/developers.html @@ -0,0 +1,226 @@ + + + + + + Developers - SMAJ PI HUB + + + + + + + + +
+
+ + + + + + + +
+
+ +
+
+
+
+ SMAJ PI HUB BUILDERS +

Developer Hub for Pi-Powered Products and Integrations

+

+ Build and connect modules into the SMAJ PI HUB ecosystem using shared wallet flow, + trust standards, and service-first architecture patterns. +

+
+ Join as Developer + Ask in Community +
+
+
+ SMAJ PI HUB developer platform +
+
+
+ +
+
+
+

Build with a Clear Integration Model

+

Core building blocks that keep every module consistent and trusted.

+
+
+
+ +

Wallet-Connected Identity

+

Use a shared identity layer so users sign in once and move smoothly across services.

+
+
+ +

Trust and Verification

+

Include provider ratings, proof-of-delivery, and security checks in each module flow.

+
+
+ +

Interoperable Services

+

Expose consistent data structures for requests, payments, status, and completion records.

+
+
+ +

Growth Analytics

+

Track usage patterns and conversion touchpoints to improve user outcomes over time.

+
+
+
+
+ +
+
+
+

Cross-Platform Access Flow

+

How your project can plug into SMAJ PI HUB with minimal friction.

+
+
+
1 Register your project and define service endpoints.
+
2 Connect wallet-auth and shared user profile hooks.
+
3 Map order or request lifecycle to hub status events.
+
4 Publish module card for discovery inside the ecosystem.
+
5 Monitor quality signals and optimize trust performance.
+
+
+
+ +
+
+
+

Developer Resource Areas

+

Frontend placeholders for docs, tools, and support access.

+
+
+
+

API and SDK Overview

+

Authentication flow, transaction callbacks, status webhooks, and module registration docs.

+ Open Documentation +
+
+

Sandbox Environment

+

Test wallet connect, request lifecycle, and service publishing before production release.

+ Open Sandbox +
+
+

Code Samples

+

Starter templates for marketplace, service booking, and delivery verification interfaces.

+ View Examples +
+
+

Support Channels

+

Get implementation help through community Q&A and direct partner onboarding sessions.

+ Get Support +
+
+
+
+ +
+
+
+

Ready to Connect Your Project to SMAJ PI HUB?

+

Start the integration process and make your platform accessible from one ecosystem entry point.

+
+
+ Request Integration + View Partnerships +
+
+
+
+ + + + + + + + + + + + diff --git a/smajpihub-convert-to-pi-net-docs/pages/faq.html b/smajpihub-convert-to-pi-net-docs/pages/faq.html new file mode 100644 index 000000000..61e152b25 --- /dev/null +++ b/smajpihub-convert-to-pi-net-docs/pages/faq.html @@ -0,0 +1,219 @@ + + + + + + FAQ - SMAJ PI HUB + + + + + + + + + + +
+
+ + + + + + + +
+
+ +
+
+
+ HELP CENTER +

Frequently Asked Questions

+

Quick answers to help you start, explore services, and get support.

+
+
+ +
+ + +
+
+

Getting Started

+
+ +

SMAJ PI HUB is one place to access services, shops, and community tools.

+
+
+ +

Anyone can join to find services or offer them to others.

+
+
+ +
+

Connect your wallet, then explore services that match your needs.

+ Connect Wallet +
+
+
+ +
+

Services

+
+ +
+

Browse jobs, education, health, transport, and more in one hub.

+ Explore Services +
+
+
+ +

Providers get paid after a service is completed and confirmed.

+
+
+ +

Yes, your dashboard keeps all activity in one place.

+
+
+ +
+

Wallet & Token

+
+ +
+

Click Connect Wallet in the header to link once.

+ Connect Wallet +
+
+
+ +
+

Pi powers the current wallet flow, while the white paper defines SMAJ Token as the ecosystem utility asset for payments, staking, governance, loyalty, and fee discounts.

+ View SMAJ Token +
+
+
+ +

Payments only complete after you confirm the service.

+
+
+ +
+

Support

+
+ +
+

Send a message and the team will respond quickly.

+ Contact Support +
+
+
+ +

Yes, reach out and we will guide you through next steps.

+
+
+ +
+

Need more help?

+

Send your question directly and get support from the SMAJ PI HUB team.

+ Contact Support +
+
+
+
+ + + + + + + + + + + + + diff --git a/smajpihub-convert-to-pi-net-docs/pages/help-center.html b/smajpihub-convert-to-pi-net-docs/pages/help-center.html new file mode 100644 index 000000000..599c90031 --- /dev/null +++ b/smajpihub-convert-to-pi-net-docs/pages/help-center.html @@ -0,0 +1,209 @@ + + + + + + Help-Center - SMAJ PI HUB + + + + + + + + + + + + + + +
+
+ + + + + + + +
+
+ + + +
+
+

Help Center

+

All you need to know about SMAJ PI HUB. Click or hover on any section to get detailed information.

+
+
+ Help Center Illustration +
+
+ + +
+

Explore Topics

+
+
+ +

Wallet & Payments

+

Hover to see details

+
+

Learn how to connect your Pi wallet, deposit Pi, make payments, track transactions, and withdraw + securely. Trusted SMAJ PI HUB escrow ensures safe fund transfers.

+
+
+ +
+ +

Services & Marketplace

+

Hover to see details

+
+

Understand how to buy and sell digital services globally. Post gigs, hire freelancers, and + explore categories like Web Development, Crypto, Marketing, Design, and more.

+
+
+ +
+ +

Account & Dashboard

+

Hover to see details

+
+

Manage your profile, customize settings, switch between light and dark modes, view your + dashboard, track your progress, and monitor activities for clients or providers.

+
+
+ +
+ +

Security & Privacy

+

Hover to see details

+
+

Learn about our security policies, data protection, two-factor authentication, privacy measures, + and how SMAJ PI HUB keeps your information safe at all times.

+
+
+ +
+ +

Support & Contact

+

Hover to see details

+
+

Find ways to contact our support team, report abuse, or submit queries. Access all communication + channels including social media, email, and direct chat.

+
+
+ +
+ +

About SMAJ PI HUB

+

Hover to see details

+
+

Learn about our mission, vision, team, and history. SMAJ PI HUB is a multi-service platform where + pioneers can buy, sell, hire freelancers, and connect globally.

+
+
+
+
+ + +
+
+

Need Further Assistance?

+

Contact SMAJ PI HUB support or explore our resources for more information.

+ Contact Support + Join the Community +
+
+ + + + + + + + + + + + + + + + diff --git a/smajpihub-convert-to-pi-net-docs/pages/how-it-works.html b/smajpihub-convert-to-pi-net-docs/pages/how-it-works.html new file mode 100644 index 000000000..813466fd1 --- /dev/null +++ b/smajpihub-convert-to-pi-net-docs/pages/how-it-works.html @@ -0,0 +1,228 @@ + + + + + + How It Works - SMAJ PI HUB + + + + + + + + + + +
+
+ + + + + + + +
+
+ +
+
+
+
+ SMAJ PI HUB PROCESS +

How It Works in 4 Simple Steps

+

+ Connect once, explore what you need, use services with Pi, and support the community along the way. +

+
+ Explore Services + Open Dashboard +
+
+ +
+

Quick Journey

+
    +
  1. Connect Wallet: Link your Pi wallet in one step.
    2. +
  2. Explore Services: Pick the service that fits your need.
    3. +
  3. Use Services: Order, book, or hire with Pi.
    4. +
  4. Contribute/Support: Rate, share, or donate to grow the hub.
    5. +
+
+
+
+ +
+
+

Your 4-Step Journey

+

Simple, clear, and the same across every platform.

+
+
+
+ 01 + +

Connect Wallet

+

Connect your Pi wallet once to unlock the hub.

+

Button: Connect Wallet

+
+
+ 02 + +

Explore Services

+

Browse services and choose what you need.

+

Button: Explore Services

+
+
+ 03 + +

Use Services

+

Place an order or booking and pay with Pi.

+

Button: Start Service

+
+
+ 04 + +

Contribute/Support

+

Rate your experience or support a cause.

+

Button: Support Community

+
+
+
+ +
+
+
+

For Everyone

+

Clear guidance whether you are using services or offering them.

+
+ +
+
+

For Buyers

+

Find what you need, pay with Pi, and confirm when it�s done.

+
+ +
+

For Providers

+

List your service, serve customers, and grow your reputation.

+
+
+
+
+ +
+
+

Where Users Find Everything

+
+
+
+

Home

+

Get the big picture in seconds.

+
+
+

Services

+

Jump straight to the service you want.

+
+
+

Dashboard

+

Track activity and manage everything in one place.

+
+
+
+ +
+
+

Start Your Pi Workflow Today

+

Join SMAJ PI HUB and use one unified process across all connected services.

+ Start Now +
+
+
+ + + + + + + + + + + + diff --git a/smajpihub-convert-to-pi-net-docs/pages/partners.html b/smajpihub-convert-to-pi-net-docs/pages/partners.html new file mode 100644 index 000000000..596fdc71c --- /dev/null +++ b/smajpihub-convert-to-pi-net-docs/pages/partners.html @@ -0,0 +1,167 @@ + + + + + + Partners - SMAJ PI HUB + + + + + + + + + + + + + + +
+
+ + + + + + + +
+
+ + + + +
+

Our Trusted Partners

+

Global pioneers joining SMAJ PI HUB. Partners will be listed here soon.

+
+ + +
+ +
+
+ Alibaba placeholder logo +
+

Coming Soon

+

Partner details will appear here once available.

+ Become a Partner +
+ +
+
+ AliExpress placeholder logo +
+

Coming Soon

+

Partner details will appear here once available.

+ Become a Partner +
+ +
+
+ Amazon placeholder logo +
+

Coming Soon

+

Partner details will appear here once available.

+ Become a Partner +
+ +
+
+

Coming Soon

+

Partner details will appear here once available.

+ Become a Partner +
+
+ + + + + + + + + + + + + + + + diff --git a/smajpihub-convert-to-pi-net-docs/pages/portfolio.html b/smajpihub-convert-to-pi-net-docs/pages/portfolio.html new file mode 100644 index 000000000..b1d08db7e --- /dev/null +++ b/smajpihub-convert-to-pi-net-docs/pages/portfolio.html @@ -0,0 +1,296 @@ + + + + + + Portfolio - SMAJ PI HUB + + + + + + + + +
+
+ + + + + + + +
+
+ +
+
+
+
+ SMAJ PI HUB PORTFOLIO +

Real Projects Delivered Across the Pi Ecosystem

+

+ Explore selected work from SMAJ PI HUB services including web builds, visual design, + crypto utility solutions, and growth campaigns for ecosystem partners. +

+
+ Explore Services + Start a Project +
+
+
+ SMAJ PI HUB portfolio showcase +
+
+
+ +
+
+
+

Browse by Category

+

Filter projects to quickly find the type of work you need.

+
+
+ + + + + +
+
+
+ +
+
+
+
+ E-commerce website project +
+

Web Development

+

Pi-Powered Marketplace Website

+

Responsive storefront and order flow optimized for trust-first Pi transactions.

+
+
+

Completion: 95%

+
+
+ + +
+
+
+ +
+ Branding and design project +
+

Graphic Design

+

Brand System and Visual Kit

+

Modern brand identity, social templates, and campaign visuals for Pi businesses.

+
+
+

Completion: 92%

+
+
+ + +
+
+
+ +
+ Crypto service integration project +
+

Crypto Services

+

Wallet-Connected Checkout Module

+

Integrated identity and payment confirmation flow for secure Pi service access.

+
+
+

Completion: 90%

+
+
+ + +
+
+
+ +
+ Digital campaign management project +
+

Digital Marketing

+

Growth Campaign for Service Launch

+

Multi-channel launch campaign that improved user onboarding and retention quality.

+
+
+

Completion: 88%

+
+
+ + +
+
+
+ +
+ Dashboard and service portal project +
+

Web Development

+

Unified Client Dashboard Interface

+

Service tracking dashboard with clear milestone progress and delivery states.

+
+
+

Completion: 94%

+
+
+ + +
+
+
+ +
+ Marketplace utility project +
+

Crypto Services

+

Escrow and Delivery Proof Workflow

+

Secure purchase logic with transparent order status and resolution checkpoints.

+
+
+

Completion: 91%

+
+
+ + +
+
+
+
+
+
+ +
+
+
+ +

0+

+

Projects Completed

+
+
+ +

0+

+

Clients Served

+
+
+ +

0 Pi

+

Revenue Processed

+
+
+ +

0%

+

Client Satisfaction

+
+
+
+ +
+
+
+

Need a Project Like This for Your Business?

+

Work with SMAJ PI HUB and launch your next service with trusted Pi-native execution.

+
+
+ Hire Team + View Pricing +
+
+
+
+ + + + + + + + + + + + + diff --git a/smajpihub-convert-to-pi-net-docs/pages/pricing.html b/smajpihub-convert-to-pi-net-docs/pages/pricing.html new file mode 100644 index 000000000..6fcf7a8a9 --- /dev/null +++ b/smajpihub-convert-to-pi-net-docs/pages/pricing.html @@ -0,0 +1,242 @@ + + + + + + Pricing - SMAJ PI HUB + + + + + + + + + + +
+
+ + + + + + + +
+
+ +
+
+
+
+ SMAJ PI HUB PLANS +

Simple Pricing That Fits Your Journey

+

+ Start free, upgrade when ready, and keep everything easy. +

+
+ Explore Services + Open Dashboard +
+
+ + +
+
+ +
+
+

Choose the Right Plan

+

Short, clear plans for new users and growing teams.

+
+ +
+
+

Free

+

0 Pi

+

~ $0

+
    +
  • Try the hub with no cost
    • +
  • Browse all service categories
    • +
  • Get updates and helpful tips
    • +
  • Create a simple profile
    • +
+ Get Started +
+ +
+

Starter

+

0.0000318 Pi

+

~ $10

+
    +
  • Use popular services more often
    • +
  • Handle more monthly requests
    • +
  • Track orders with confidence
    • +
  • Get reliable support
    • +
+ Connect & Begin +
+ +
+ Most Popular +

Pro

+

0.0000636 Pi

+

~ $20

+
    +
  • Get faster service access
    • +
  • Enjoy quicker response times
    • +
  • Stand out with a boosted profile
    • +
  • Receive priority help
    • +
+ Upgrade Now +
+ +
+

Premium

+

0.000159 Pi

+

~ $50

+
    +
  • Support teams with shared access
    • +
  • Handle high monthly activity
    • +
  • Get dedicated guidance
    • +
  • Set up custom workflows
    • +
+ Choose Plan +
+
+
+ +
+
+
+

What You Unlock by Plan

+
+
+
+

Free

+

Explore the hub and try core services at no cost.

+
+
+

Starter

+

Get more access and smoother service use each month.

+
+
+

Pro

+

Priority help and the AI assistant for faster choices.

+
+
+

Premium

+

Team support plus advanced tools and the AI assistant.

+
+
+
+
+ +
+
+

Start Building with Pi Today

+

Join SMAJ PI HUB and unlock all-in-one platform access with the plan that fits your journey.

+
+ Connect Wallet + Open Dashboard +
+
+
+
+ + + + + + + + + + + + diff --git a/smajpihub-convert-to-pi-net-docs/pages/service-detail.html b/smajpihub-convert-to-pi-net-docs/pages/service-detail.html new file mode 100644 index 000000000..510c78cf7 --- /dev/null +++ b/smajpihub-convert-to-pi-net-docs/pages/service-detail.html @@ -0,0 +1,218 @@ + + + + + + Service Detail - SMAJ PI HUB + + + + + + + + + + + + + + +
+
+ + + + + + + +
+
+ + + +
+ + +
+
+ Website Development Service +
+ +
+

Website Development

+

+ Professional website development for businesses. We offer HTML5, CSS3, JavaScript, WordPress, and e-commerce + solutions. +

+ +
+ + + + + + (45 Reviews) +
+ +
+ + +
+ +
+ + +
+ +
+ Delivery Time: 3-5 days +
+ +
+ Revisions: Unlimited +
+ +
+ Category: Web Development +
+
+
+ + +
+

What You Get

+
    +
  • Fully responsive website
    • +
  • Modern design with UI/UX focus
    • +
  • SEO friendly & optimized
    • +
  • Cross-browser compatibility
    • +
  • Pi payment integration ready
    • +
+
+ + +
+

Customer Reviews

+
+ +

John Doe

+

Excellent service! Fast delivery and great communication.

+
+ + + + + +
+
+
+ +

Jane Smith

+

Highly professional developer. Will hire again for future projects.

+
+ + + + + +
+
+
+ +
+ + + + + + + + + + + + + + + + diff --git a/smajpihub-convert-to-pi-net-docs/pages/service.html b/smajpihub-convert-to-pi-net-docs/pages/service.html new file mode 100644 index 000000000..ac68de806 --- /dev/null +++ b/smajpihub-convert-to-pi-net-docs/pages/service.html @@ -0,0 +1,275 @@ + + + + + + Services - SMAJ PI HUB Ecosystem + + + + + + + + + + + +
+
+ + + + + + + +
+
+ +
+
+
+
+ ALL-IN-ONE PI SERVICE HUB +

Access Every SMAJ Platform From One Place

+

+ SMAJ PI HUB connects your wallet once and unlocks all ecosystem projects including e-commerce, + digital services, delivery, and upcoming tools. +

+
+ Open Unified Dashboard + Browse Platforms +
+
+ + +
+
+ +
+
+

How SMAJ PI HUB Connects All Projects

+
+
+
+ +

1. Connect Wallet Once

+

User signs in with Pi wallet inside SMAJ PI HUB.

+
+
+ +

2. Unified Identity

+

Hub keeps one user identity across all connected services.

+
+
+ +

3. Platform Handshake

+

Each platform receives a secure hub access token placeholder.

+
+
+ +

4. Seamless Usage

+

Users open Store, Services, Delivery, and more without repeated wallet connections.

+
+
+
+ +
+
+
+

Platform Directory

+

Choose where to go. Each card shows what users can do and where they will land.

+
+
+
+

SMAJ STORE

+

Shop everyday products through the current Pi wallet flow while broader SMAJ Token utility expands across + the ecosystem.

Ready NowShop Now +
+
+

SMAJ PI JOBS

+

Find jobs or gigs that match your skills and goals.

Coming + SoonFind Jobs +
+
+

SMAJ PI HEALTH

+

Book care and talk to a doctor when you need help.

Coming + SoonBook Care +
+
+

SMAJ PI EDU

+

Learn new skills with short courses and trusted mentors.

Coming + SoonStart Learning +
+
+

SMAJ PI TRANSPORT

+

Get reliable rides and transport services near you.

Coming + SoonBook a Ride +
+
+

SMAJ PI AGRO

+

Buy farm supplies or sell produce with ease.

Coming + SoonGet Started +
+
+

SMAJ PI ENERGY

+

Pay utility bills and manage energy needs in one place.

Coming + SoonPay Bills +
+
+

SMAJ PI CHARITY

+

Support real causes and see where your help goes.

Coming + SoonDonate +
+
+

SMAJ PI HOUSING

+

Browse homes, rentals, and stays that fit your budget.

Coming + SoonFind Housing +
+
+

SMAJ PI EVENTS

+

Discover events and get tickets in seconds.

Coming + SoonGet Tickets +
+
+

SMAJ PI SWAP

+

Exchange assets with trusted people in your community.

Coming + SoonSwap Now +
+
+

SMAJ FOOD DELIVERY

+

Order meals fast and get them delivered to your door.

Coming + SoonOrder Now +
+
+
+
+ +
+
+

Where Users Can Find Everything

+
+
+
+

Everything in One Place

+

SMAJ PI HUB brings all connected platforms and services together in a single, easy-to-navigate ecosystem. +

+
+
+

Inside SMAJ PI HUB

+

Use this Services page as the ecosystem directory. Each card launches a connected platform.

+
+
+

Main Entry Points

+

Use Home for an overview, Services to explore available platforms, and Dashboard to manage your activity in + one unified account.

+
+
+

Cross-Platform Goal

+

One wallet connection, one identity, one user journey across every SMAJ project.

+
+
+
+
+ + + + + + + + + + + diff --git a/smajpihub-convert-to-pi-net-docs/pages/token.html b/smajpihub-convert-to-pi-net-docs/pages/token.html new file mode 100644 index 000000000..073dd325d --- /dev/null +++ b/smajpihub-convert-to-pi-net-docs/pages/token.html @@ -0,0 +1,301 @@ + + + + + + SMAJ Token - SMAJ PI HUB + + + + + + + + + + +
+
+ + + + + + + +
+
+ +
+
+
+
+ SMAJ TOKEN +

The Utility Layer For The SMAJ Ecosystem

+

Pi stays as the payment rail while SMAJ Token powers rewards, governance, staking, loyalty/cashback, and GCV-linked service discounts.

+

+ Based on the February 2026 white paper, SMAJ Token is the economic engine + for non-payment utility across the SMAJ Ecosystem. Every service accepts Pi for payments, + while SMAJ is reserved for incentive mechanics, governance participation, and + discounts that stay anchored to Pi's real utility GCV rate (1 Pi = $314,159). +

+
+ View Tokenomics + Back To White Paper +
+
+ + +
+
+ +
+
+ Utility +

What The Token Is Meant To Do

+
+
+
+ +

Payments (Pi)

+

All marketplace activity, bookings, fees, and connected transactions remain denominated in Pi, reinforcing Pi as the payment rail across the SMAJ Ecosystem.

+
+
+ +

Staking

+

Stake tokens to access passive reward programs and deeper alignment with the long-term growth of the ecosystem.

+
+
+ +

Fee Discounts

+

Reduce selected service costs and platform fees by redeeming SMAJ against Pi-linked GCV pricing, keeping discounts consistent with Pi’s real utility value (1 Pi = $314,159).

+
+
+ +

Loyalty Rewards

+

Support cashback, rewards, and retention programs for repeat users, merchants, and contributors.

+
+
+ +

Governance

+

Give token holders a role in governance decisions around ecosystem priorities and future expansion.

+
+
+ +

Ecosystem Alignment

+

Provide one shared economic layer across commerce, services, community tools, and platform growth.

+
+
+

+ Idea: Keep SMAJ Token as the SMAJ ecosystem token and explore a shared Pi/GCV oracle so every service can tap into transparent pricing, reinforcing trust while ensuring SMAJ rewards stay tied to Pi’s real utility price. +

+
+ +
+
+
+ Tokenomics +

Allocation Overview

+
+
+
+ + + + + + + + + + + + + + + +
CategoryAllocationVesting
Team & Advisors15%24 months
Ecosystem Development30%36 months
Marketing & Partnerships10%18 months
Reserve Fund20%Locked
Community Rewards25%Ongoing
+
+ +
+

Allocation Mix

+
+
Team & Advisors15%
+
Ecosystem Development30%
+
Marketing & Partnerships10%
+
Reserve Fund20%
+
Community Rewards25%
+
+
+
+
+
+ +
+
+
+
+ Vesting +

Release Discipline

+
+

+ The white paper frames vesting as a control mechanism to support long-term alignment, + reduce immediate supply pressure, and keep development resources tied to ecosystem progress. +

+
    +
  • Shorter release horizon for public sale distribution
    • +
  • Longer release schedules for internal and ecosystem allocations
    • +
  • Locked reserve intended for strategic protection
    • +
  • Ongoing community allocation for rewards and growth loops
    • +
+
+ +
+
+ Staking +

Participation Through Commitment

+
+

+ Staking is described as part of the token utility model, intended to reward long-term + holders and strengthen ecosystem participation rather than pure speculation. +

+
    +
  • Passive rewards for eligible participants
    • +
  • Potential signal of commitment for ecosystem contributors
    • +
  • Stronger alignment between token holders and platform growth
    • +
  • Foundation for incentive programs across connected modules
    • +
+
+
+
+ +
+
+
+ Governance +

Community Decision Rights

+
+
+
+

Voting Utility

+

Token holders are intended to participate in governance decisions affecting ecosystem direction and priorities.

+
+
+

Ecosystem Input

+

Governance can support a structured voice for users, partners, and aligned community members.

+
+
+

Long-Term Incentives

+

Governance rights reinforce utility by linking ownership of the token to influence over ecosystem evolution.

+
+
+
+
+ +
+
+
+
+ Important Note +

Scope Of This Page

+
+

+ This page summarizes token details from the February 2026 white paper. It is informational + only and should not be treated as financial, investment, or legal advice. +

+
+
+ Contact The Team + Read Full Ecosystem Summary +
+
+
+
+ + + + + + + + + + + diff --git a/smajpihub-convert-to-pi-net-docs/pages/white-paper.html b/smajpihub-convert-to-pi-net-docs/pages/white-paper.html new file mode 100644 index 000000000..4951b9caf --- /dev/null +++ b/smajpihub-convert-to-pi-net-docs/pages/white-paper.html @@ -0,0 +1,451 @@ + + + + + + SMAJ Ecosystem White Paper - SMAJ PI HUB + + + + + + + + + + +
+
+ + + + + + + +
+
+ +
+
+
+
+ SMAJ ECOSYSTEM WHITE PAPER +

A Unified Digital Ecosystem Connecting Services, Commerce, and Innovation

+

Version 1.0, published February 2026 by SMAJ PI HUB.

+

+ The SMAJ Ecosystem is a unified digital infrastructure designed to connect users, + businesses, and developers through one wallet login, one verified identity, and one + intelligent ecosystem spanning commerce, work, learning, healthcare, transport, and more. +

+
+ Explore Platforms + View Roadmap +
+
+ + +
+
+ +
+
+ Executive Summary +

What SMAJ Is Building

+
+
+
+ +

One Access Point

+

SMAJ PI HUB is the central gateway for users, partners, and developers across the ecosystem.

+
+
+ +

One Wallet Flow

+

A single wallet connection is intended to support transactions and access across all connected services.

+
+
+ +

One Verified Identity

+

Verified digital identity is positioned as the trust layer for access, reputation, and secure transactions.

+
+
+ +

AI Guidance

+

AI is planned to support recommendations, fraud monitoring, matching, and decision support.

+
+
+
+ +
+
+
+
+ Problem Statement +

Why The Ecosystem Exists

+
+
+
    +
  1. Digital services are fragmented across too many separate apps and accounts.
    2. +
  2. Users repeatedly create identities, logins, and payment flows for similar tasks.
    3. +
  3. Many digital currencies still lack broad, real-world utility.
    4. +
  4. Trust issues persist across vendors, freelancers, service providers, and marketplaces.
    5. +
  5. Small enterprises often lack shared infrastructure to scale online operations.
    6. +
+
+
+
+
+ Mission And Vision +

Strategic Direction

+
+
+

Mission

+

+ Build a secure, AI-powered blockchain ecosystem that connects essential digital services + and empowers individuals and businesses through unified infrastructure. +

+

Vision

+

+ Become a leading multi-service digital ecosystem powered by Pi, blockchain, and + intelligent automation. +

+
+
+
+
+ +
+
+ Core Infrastructure +

SMAJ PI HUB

+
+
+
+

Single Wallet Login

+

One wallet for user access and transactions across connected SMAJ platforms.

+
+
+

Unified Dashboard

+

A central interface for discovering services, tracking activity, and managing ecosystem participation.

+
+
+

AI-Guided Navigation

+

Personalized recommendations, task suggestions, and support workflows embedded in the user journey.

+
+
+

Verified Digital Identity

+

Blockchain-based identity and verification intended to improve trust, safety, and accountability.

+
+
+
+ +
+
+
+ Ecosystem Modules +

The 13 Integrated Platforms

+
+
+
1. SMAJ STORE

Blockchain-based e-commerce marketplace with vendor verification, escrow, and crypto payments.

+
2. SMAJ FOOD DELIVERY

Direct-to-customer food delivery with verified restaurants, tracking, and loyalty rewards.

+
3. SMAJ PI JOBS

Freelance and jobs platform with secure payments, verified profiles, and smart contract support.

+
4. SMAJ PI HEALTH

Telemedicine, health records, and access to verified healthcare providers.

+
5. SMAJ PI EDU

Decentralized learning with verified courses, certifications, and AI-guided learning paths.

+
6. SMAJ PI TRANSPORT

Transport and delivery coordination with route optimization, verified drivers, and crypto payments.

+
7. SMAJ PI AGRO

Marketplace connecting farmers, buyers, and suppliers with transparent pricing and transactions.

+
8. SMAJ PI ENERGY

Unified utility payment flow for electricity, water, and gas with usage tracking.

+
9. SMAJ PI CHARITY

Traceable donation infrastructure for verified NGOs and impact reporting.

+
10. SMAJ PI HOUSING

Verified housing and property marketplace with anti-fraud protections and escrow deposits.

+
11. SMAJ PI EVENTS

Event discovery, ticketing, and organizer verification with NFT-based ticket potential.

+
12. SMAJ PI SWAP

Second-hand and peer-to-peer exchange platform supporting circular economy behavior.

+
13. SMAJ TOKEN

The native asset powering rewards, governance, staking, loyalty/cashback, and service fee discounts tied to Pi's real utility GCV rate; Pi remains the payment currency across the ecosystem.

+
+
+
+ +
+
+
+
+ Token Utility +

SMAJ Token

+
+

Payments across the SMAJ ecosystem continue to run on Pi, while SMAJ Token is reserved for:

+
    +
  • Staking for passive rewards
    • +
  • Governance voting rights
    • +
  • Loyalty and cashback programs
    • +
  • Service fee discounts anchored to Pi's utility GCV price (1 PI = $314,159) so SMAJ value stays tied to real-world utility.
    • +
+

Idea: Position SMAJ Token as the SMAJ ecosystem token and explore a shared GCV oracle so every service can tap into transparent pricing, reinforcing trust while enabling users to redeem perks at a consistent Pi-referenced rate.

+ Open Token Page +
+ +
+
+ AI Integration +

Intelligent Layer

+
+
    +
  • Personalized recommendations for users and vendors
    • +
  • Fraud detection and anomaly monitoring
    • +
  • Assistants for freelancers, farmers, and students
    • +
  • Predictive analytics for business insights
    • +
+
+ +
+
+ Trust System +

Verification Model

+
+
    +
  • Vendors and merchants
    • +
  • Freelancers and professionals
    • +
  • Doctors and healthcare providers
    • +
  • Drivers, landlords, and event organizers
    • +
+
+
+
+ +
+
+
+ Trust And Verification +

How The Ecosystem Builds Credibility

+
+ +
+
+

Vendors And Merchants

+

Verification is intended to reduce fake sellers, improve accountability, and strengthen confidence in marketplace transactions.

+
+
+

Freelancers And Professionals

+

Identity-backed profiles help buyers and clients evaluate who they are hiring inside jobs and service modules.

+
+
+

Doctors And Healthcare Providers

+

Healthcare access depends on trust, so provider verification is positioned as a key safety layer for SMAJ PI HEALTH.

+
+
+

Drivers And Transport Operators

+

Transport verification supports safety, service quality, and traceability in delivery and mobility use cases.

+
+
+

Property Owners And Event Organizers

+

Identity checks help reduce rental scams, fake listings, ticket fraud, and organizer impersonation.

+
+
+ +
+
+ 01 +

Submit Details

+

Users or providers submit profile information and the documents required for their role.

+
+
+ 02 +

Review And Approval

+

The SMAJ verification process reviews identity and business information before approval.

+
+
+ 03 +

Verified Status

+

Approved accounts receive a visible verified badge to help users identify trusted participants.

+
+
+ 04 +

Transparent Record

+

The white paper positions verification records as part of a blockchain-backed trust system.

+
+
+ +
+

Trust is the foundation of the SMAJ Ecosystem. Verification is meant to improve safety, reduce fraud, and create a more reliable digital economy for every user.

+
+
+
+ +
+
+
+ Technology Architecture +

Technology And AI Architecture

+
+
+
+

Wallet-Based Authentication

+

Secure entry through a Pi wallet connection, shared session flow, and ecosystem-wide access control.

+
+
+

Identity And Verification Layer

+

Verified digital identity, role checks, and trust signals are designed to support safer transactions across modules.

+
+
+

Modular Service Layer

+

Each ecosystem platform operates as a service module while remaining connected to one account, wallet, and trust model.

+
+
+

Cross-Platform Experience

+

Web, mobile, and dashboard interfaces are intended to preserve one connected user journey across all services.

+
+
+

Blockchain Compatibility

+

Positioned for Pi Network support while leaving room for broader interoperability and token-linked ecosystem operations.

+
+
+

Developer And API Layer

+

Shared integration patterns are intended to help new modules plug into wallet flow, identity, and service orchestration.

+
+
+ +
+ AI Architecture +

How Intelligence Fits Into The Stack

+
+
+
+

AI Navigation Layer

+

Recommendation systems guide users toward relevant services, vendors, jobs, and workflows.

+
+
+

Fraud And Risk Monitoring

+

AI is positioned to flag anomalies, suspicious behavior, and trust-risk events across platform activity.

+
+
+

Matching And Workflow Support

+

Matching models can assist with jobs, services, learning paths, and other role-based ecosystem interactions.

+
+
+

Predictive Insights

+

Analytics models can support pricing signals, operational planning, and ecosystem-level business intelligence.

+
+
+
+
+ +
+
+ Roadmap +

Phased Rollout

+
+
+
Q1-Q2 2026

Phase 1

Core infrastructure launch with SMAJ PI HUB and SMAJ STORE.

+
Q3 2026

Phase 2

Jobs and marketplace expansion.

+
Q4 2026

Phase 3

Health, education, and housing integration.

+
Q1 2027

Phase 4

AI system expansion across the ecosystem.

+
Q2 2027

Phase 5

Token utility expansion and broader adoption.

+
Q3-Q4 2027

Phase 6

Global scaling and strategic partnerships.

+
+
+ +
+
+
+
+ Disclaimer +

Important Note

+
+

+ This page summarizes the SMAJ Ecosystem White Paper for informational purposes. It does + not constitute financial, investment, or legal advice, and token participation should be + evaluated independently. +

+
+ Contact The Team +
+
+
+ + + + + + + + + + + diff --git a/smajpihub-convert-to-pi-net-docs/read_files.js b/smajpihub-convert-to-pi-net-docs/read_files.js new file mode 100644 index 000000000..0519ecba6 --- /dev/null +++ b/smajpihub-convert-to-pi-net-docs/read_files.js @@ -0,0 +1 @@ + \ No newline at end of file