Codespace scaling robo

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)

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

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).**

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.
 

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

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.

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%);
+}