@oasisomniverse/react 1.0.0 → 1.1.0

package/README.md

@@ -1,69 +1,84 @@
-# WEB4 OASIS API React Component Library
+# @oasisomniverse/react — OASIS React UI Component Library
 
-This is the WEB4 OASIS React UI Components Library that can be used to pick n mix into other React sites who wish to integrate into the WEB4 OASIS API. It is also the main OASIS Portal site and example site of how to build a UI on the WEB4 OASIS API.
+The React UI component library for the [OASIS Platform](https://oasisomniverse.one). 126 components covering avatar SSO, karma, NFTs, quests, map, seeds, messaging, OApps, providers and more — ready to drop into any React or Next.js project.
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+[![npm](https://img.shields.io/npm/v/@oasisomniverse/react)](https://www.npmjs.com/package/@oasisomniverse/react)
+[![Live Demo](https://img.shields.io/badge/demo-live-brightgreen)](https://react.oportal.oasisomniverse.one)
 
-## Documentation
+## Install
 
-- [React Style Guide](Docs/react_style_guide.md) - Coding standards and CSS naming conventions for contributing components
-- [React Install Guide](Docs/react_style_guide_install.md) - Step-by-step installation and setup instructions
-- [Contributing Guide](Docs/smart_commits.md) - How to contribute using smart commits
-
-## Project Structure
-```
-├── react-app 
-│   ├── public
-│   │   └── index.html
-│   ├── src
-|   |   ├── assets
-|   |   |   ├── images
-|   |   |   ├── scss
-|   |   ├── components 
-|   |   |   ├── common
-|   |   |   |   ├── sidebar
-|   |   |   ├── popups
-│   │   └── index.js
+```bash
+npm install @oasisomniverse/react
 ```
 
-All of the files are stored in react-app folder.
-
-- `index.html` is the main html file
-- `assets` folder contains all assets files for each component like images and css/scss files.
-- `components` folder contains different components used in the app.
-- `components/common` folder contains different components tha are common like sidebar, navbar etc.
-- `components/popups` folder contains different popup components.
-- `index.js` is the main javaScript file needed for the react-app.
-
-## CSS Syntax rules
-Please follow these rules so that the other CSS classes does not gets messed up.
-
-For example if you create a component called `Login.js` It's outer most tag element should have a class of `login` and the child elements of login should have a class name started with `login-`
+## Basic Usage
 
-The CSS file should be named `Login.css` and should be stored under the `CSS` folder.
+```jsx
+import { Login, AvatarConnect, KarmaToast } from '@oasisomniverse/react';
 
-## How to run the app
+const App = () => (
+  <div>
+    <Login apiUrl="https://api.web4.oasisomniverse.one" onSuccess={(avatar) => console.log(avatar)} />
+    <AvatarConnect />
+    <KarmaToast message="+10 karma earned" value={10} />
+  </div>
+);
 
-First make sure you are in the react-app folder. Then run this command
-
-```
-npm i
+export default App;
 ```
-This will install all the third-part components used in the project
 
-After this run the following command to open the project in dev mode
-```
-npm start
+## Component List
+
+All 126 components are grouped below. Every component is also available in vanilla JS, Angular, Vue, Svelte and Next.js at full parity — see the [OASIS Web Component Library](https://oportal.oasisomniverse.one) for the full matrix.
+
+| Group | Components |
+|---|---|
+| **Auth & Identity** | AcceptInvite, AvatarConnect, ForgotPassword, Login, ResetPassword, SearchAvatar, SearchAvatars, SendInvite, Signup, VerifyEmail |
+| **Avatar** | AvatarProfile, AvatarWallet, EditAvatar, SearchProfiles, ViewAchievements, ViewAvatar, ViewAvatarKarma, ViewLeagues, ViewOrganizations, ViewTournaments |
+| **Data Screen** | ActivityPub, AddData, EOSIO, Ethereum, Holochain, IPFS, LoadData, ManageData, MongoDB, Neo4j, OffChainManagement, SearchData, Solana, Solid, SQLite, ThreeFold |
+| **Eggs** | Eggs, ManageEggs, SearchEggs, ViewEggs |
+| **Game** | Game |
+| **Karma** | KarmaPanel, KarmaToast, SearchKarma, ViewKarma, VoteKarma |
+| **Map** | Add2DObjectToMap, Add3DObjectToMap, AddQuestToMap, DownloadMap, ManageMap, Map, PlotRouteOnMap, SearchMap, ViewGlobal3DMap, ViewHalonsOnMap, ViewOAppOnMap, ViewQuestOnMap |
+| **Messages** | MenuMessage, Message, MessageContacts, Messaging |
+| **Mission** | ManageMission, Mission, SearchMission, ViewMission |
+| **NFT** | ContactPopupNFT, ManageNFT, NFT, PurchaseNFT, PurchaseVirtualLandNFT, SearchNFT, ViewNFT |
+| **OApp** | CreateOApp, DeployOApp, DownloadOApp, EditOApp, InstallOApp, LaunchOApp, ManageOApp, OApp, SearchOApp |
+| **Providers** | CompareProviderSpeeds, CrossChainManagement, ManageAutoFailover, ManageAutoReplication, ManageLoadBalancing, ManageProviders, ProviderDropdown, Providers, SearchProviders, SeedsProvider, ViewProviderStats, ViewProviders |
+| **Quest** | ManageQuest, Quest, SearchQuest, ViewQuest |
+| **Seeds** | DonateSeeds, ManageSeeds, PayWithSeeds, RewardSeeds, SearchSeeds, Seeds, ViewSeeds |
+| **Common UI** | ComingSoon, Confirmation, Contact, HyperDrive, NavBar, ONET, ONODE, OasisModal, Settings, SideNav, StarField, Wallet |
+
+## Dark Space Design System
+
+The OASIS component library ships with the **Dark Space** design system — a deep-space aesthetic built for the OASIS Omniverse:
+
+- **Background**: near-black (#0a0d14) with subtle nebula gradients
+- **Primary accent**: electric cyan (#00c8ff)
+- **Typography**: [Orbitron](https://fonts.google.com/specimen/Orbitron) for headings, [Rajdhani](https://fonts.google.com/specimen/Rajdhani) for body text
+- **Text**: always bright (#e0f0ff / #fff) — never dim or faded
+- **Borders**: translucent cyan (`rgba(0,200,255,0.2)`)
+- **Cards**: glassy dark panels with backdrop-filter blur
+
+Override the CSS custom properties to theme components for your own OAPP:
+
+```css
+:root {
+  --oasis-bg: #0a0d14;
+  --oasis-accent: #00c8ff;
+  --oasis-text: #e0f0ff;
+  --oasis-border: rgba(0, 200, 255, 0.2);
+}
 ```
 
-## API Configuration
+## Live Demo
 
-The app uses a single shared API base URL defined in `src/config/api.js`.
+**[react.oportal.oasisomniverse.one](https://react.oportal.oasisomniverse.one)** — the React OPORTAL running all 126 components live.
 
-By default it points to `https://api.oasisweb4.one/api`, but you can override it by setting:
-
-```bash
-REACT_APP_API_URL=https://your-api-host/api
-```
+## Links
 
-This lets you switch environments without changing every request in the codebase.
+- [GitHub](https://github.com/NextGenSoftwareUK/OASIS-React-UI-Component-Library)
+- [npm](https://www.npmjs.com/package/@oasisomniverse/react)
+- [OASIS API Docs](https://oasis-web4.gitbook.io/oasis-web4-docs/)
+- [Developer Portal](https://oportal.oasisomniverse.one)
+- [OASIS Platform](https://oasisomniverse.one)

package/package.json

@@ -1,72 +1,72 @@
-{
-  "name": "@oasisomniverse/react",
-  "version": "1.0.0",
-  "description": "OASIS Omniverse React UI components",
-  "keywords": ["oasis", "omniverse", "react", "components"],
-  "author": "NextGenSoftware",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/NextGenSoftwareUK/OASIS-React-UI-Component-Library.git"
-  },
-  "main": "src/components/index.js",
-  "module": "src/components/index.js",
-  "exports": {
-    ".": "./src/components/index.js",
-    "./components/*": "./src/components/*.jsx"
-  },
-  "files": ["src/components"],
-  "dependencies": {
-    "@devexpress/dx-react-core": "^2.7.6",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "ag-grid-community": "^26.0.0",
-    "ag-grid-react": "^26.0.0",
-    "axios": "^0.21.1",
-    "bootstrap": "^4.6.0",
-    "font-awesome": "^4.7.0",
-    "formik": "^2.2.9",
-    "oasis-api": "^0.0.3",
-    "react": "^19.2.7",
-    "react-bootstrap": "^1.6.3",
-    "react-dom": "^19.2.7",
-    "react-dual-listbox": "^2.2.0",
-    "react-loader-spinner": "^4.0.0",
-    "react-router-dom": "^5.2.1",
-    "react-slide-toggle": "^0.3.5",
-    "react-toastify": "^8.0.3",
-    "web-vitals": "^1.1.2",
-    "yup": "^0.32.9"
-  },
-  "scripts": {
-    "start": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "engines": {
-    "node": "22.x"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@vitejs/plugin-react": "^4.3.4",
-    "sass": "^1.100.0",
-    "vite": "^6.3.5"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@oasisomniverse/react",
+  "version": "1.1.0",
+  "description": "OASIS Omniverse React UI components",
+  "keywords": ["oasis", "omniverse", "react", "components"],
+  "author": "NextGenSoftware",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NextGenSoftwareUK/OASIS-React-UI-Component-Library.git"
+  },
+  "main": "src/components/index.js",
+  "module": "src/components/index.js",
+  "exports": {
+    ".": "./src/components/index.js",
+    "./components/*": "./src/components/*.jsx"
+  },
+  "files": ["src/components"],
+  "dependencies": {
+    "@devexpress/dx-react-core": "^2.7.6",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "ag-grid-community": "^26.0.0",
+    "ag-grid-react": "^26.0.0",
+    "axios": "^0.21.1",
+    "bootstrap": "^4.6.0",
+    "font-awesome": "^4.7.0",
+    "formik": "^2.2.9",
+    "oasis-api": "^0.0.3",
+    "react": "^19.2.7",
+    "react-bootstrap": "^1.6.3",
+    "react-dom": "^19.2.7",
+    "react-dual-listbox": "^2.2.0",
+    "react-loader-spinner": "^4.0.0",
+    "react-router-dom": "^5.2.1",
+    "react-slide-toggle": "^0.3.5",
+    "react-toastify": "^8.0.3",
+    "web-vitals": "^1.1.2",
+    "yup": "^0.32.9"
+  },
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "engines": {
+    "node": "22.x"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "sass": "^1.100.0",
+    "vite": "^6.3.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/common/AvatarConnect.jsx

@@ -1,89 +1,89 @@
-import React, { useState, useCallback } from 'react';
-import OasisModal from './OasisModal';
-
-const API_URL = 'https://api.web4.oasisomniverse.one';
-const SESSION_KEY = 'oasis_session';
-
-function loadSession() {
-  try { return JSON.parse(sessionStorage.getItem(SESSION_KEY)); } catch { return null; }
-}
-
-export default function AvatarConnect({ onLogin, onLogout, sessionKey = SESSION_KEY, apiUrl = API_URL }) {
-  const [session, setSession] = useState(loadSession);
-  const [open, setOpen] = useState(false);
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [showPwd, setShowPwd] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-
-  const doLogin = useCallback(async () => {
-    if (!username || !password) { setError('Please fill in all fields.'); return; }
-    setLoading(true); setError('');
-    try {
-      const { OASISClient } = await import('@oasisomniverse/web4-api');
-      const oasis = new OASISClient({ baseUrl: apiUrl });
-      const result = await oasis.auth.login({ username, password });
-      const karma = await oasis.karma.getKarmaForAvatar({ avatarId: result.avatarId });
-      const sess = { avatarId: result.avatarId, username, karma: karma.total ?? 0 };
-      sessionStorage.setItem(sessionKey, JSON.stringify(sess));
-      setSession(sess); setOpen(false);
-      onLogin?.(sess);
-    } catch (e) {
-      setError(e?.message ?? 'Login failed. Please check your credentials.');
-    } finally {
-      setLoading(false);
-    }
-  }, [username, password, apiUrl, sessionKey, onLogin]);
-
-  const doLogout = useCallback(() => {
-    sessionStorage.removeItem(sessionKey);
-    setSession(null);
-    onLogout?.();
-  }, [sessionKey, onLogout]);
-
-  if (session) {
-    return (
-      <div style={{ display:'flex', alignItems:'center', gap:10, background:'rgba(0,200,255,.08)', border:'1px solid rgba(0,200,255,.2)', borderRadius:999, padding:'6px 14px 6px 10px', fontSize:13 }}>
-        <span style={{ fontSize:18 }}>👤</span>
-        <span style={{ color:'#fff', fontWeight:600 }}>{session.username}</span>
-        <span style={{ color:'#00c8ff', fontFamily:"'Orbitron',sans-serif", fontSize:11 }}>⚡ {session.karma ?? 0}</span>
-        <button onClick={doLogout} style={{ background:'none', border:'1px solid rgba(255,100,100,.3)', color:'#ff8080', borderRadius:6, fontSize:11, padding:'3px 8px', cursor:'pointer', marginLeft:4 }}>Logout</button>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <button onClick={() => setOpen(true)} style={{ background:'linear-gradient(135deg,#00c8ff,#0080ff)', border:'none', borderRadius:8, color:'#fff', fontFamily:"'Orbitron',sans-serif", fontSize:12, fontWeight:700, letterSpacing:'.08em', padding:'9px 18px', cursor:'pointer' }}>
-        Beam In
-      </button>
-
-      <OasisModal open={open} onClose={() => setOpen(false)} title="Beam In">
-        <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
-          {error && <div style={{ background:'rgba(255,80,80,.12)', border:'1px solid rgba(255,80,80,.3)', color:'#ff6b6b', borderRadius:8, padding:'10px 14px', fontSize:13 }}>{error}</div>}
-          <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
-            <label style={{ fontSize:11, fontWeight:600, letterSpacing:'.06em', color:'#7a9bbf', textTransform:'uppercase' }}>Username</label>
-            <input value={username} onChange={e => setUsername(e.target.value)} type="text" placeholder="yourusername" autoComplete="username"
-              style={{ background:'rgba(255,255,255,.05)', border:'1px solid rgba(0,200,255,.2)', borderRadius:8, padding:'10px 14px', color:'#fff', fontSize:14, outline:'none' }} />
-          </div>
-          <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
-            <label style={{ fontSize:11, fontWeight:600, letterSpacing:'.06em', color:'#7a9bbf', textTransform:'uppercase' }}>Password</label>
-            <div style={{ position:'relative' }}>
-              <input value={password} onChange={e => setPassword(e.target.value)} type={showPwd ? 'text' : 'password'} placeholder="••••••••" autoComplete="current-password"
-                onKeyDown={e => e.key === 'Enter' && doLogin()}
-                style={{ width:'100%', background:'rgba(255,255,255,.05)', border:'1px solid rgba(0,200,255,.2)', borderRadius:8, padding:'10px 44px 10px 14px', color:'#fff', fontSize:14, outline:'none', boxSizing:'border-box' }} />
-              <button onClick={() => setShowPwd(v => !v)} type="button" style={{ position:'absolute', right:10, top:'50%', transform:'translateY(-50%)', background:'none', border:'none', cursor:'pointer', fontSize:16, padding:0, lineHeight:1 }}>
-                {showPwd ? '🙈' : '👁️'}
-              </button>
-            </div>
-          </div>
-          <button onClick={doLogin} disabled={loading}
-            style={{ background:'linear-gradient(135deg,#00c8ff,#0080ff)', border:'none', borderRadius:8, color:'#fff', fontFamily:"'Orbitron',sans-serif", fontSize:13, fontWeight:700, letterSpacing:'.08em', padding:12, cursor:'pointer', opacity: loading ? .5 : 1 }}>
-            {loading ? 'Connecting…' : 'Beam In'}
-          </button>
-        </div>
-      </OasisModal>
-    </>
-  );
-}
+import React, { useState, useCallback } from 'react';
+import OasisModal from './OasisModal';
+
+const API_URL = 'https://api.web4.oasisomniverse.one';
+const SESSION_KEY = 'oasis_session';
+
+function loadSession() {
+  try { return JSON.parse(sessionStorage.getItem(SESSION_KEY)); } catch { return null; }
+}
+
+export default function AvatarConnect({ onLogin, onLogout, sessionKey = SESSION_KEY, apiUrl = API_URL }) {
+  const [session, setSession] = useState(loadSession);
+  const [open, setOpen] = useState(false);
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPwd, setShowPwd] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const doLogin = useCallback(async () => {
+    if (!username || !password) { setError('Please fill in all fields.'); return; }
+    setLoading(true); setError('');
+    try {
+      const { OASISClient } = await import('@oasisomniverse/web4-api');
+      const oasis = new OASISClient({ baseUrl: apiUrl });
+      const result = await oasis.auth.login({ username, password });
+      const karma = await oasis.karma.getKarmaForAvatar({ avatarId: result.avatarId });
+      const sess = { avatarId: result.avatarId, username, karma: karma.total ?? 0 };
+      sessionStorage.setItem(sessionKey, JSON.stringify(sess));
+      setSession(sess); setOpen(false);
+      onLogin?.(sess);
+    } catch (e) {
+      setError(e?.message ?? 'Login failed. Please check your credentials.');
+    } finally {
+      setLoading(false);
+    }
+  }, [username, password, apiUrl, sessionKey, onLogin]);
+
+  const doLogout = useCallback(() => {
+    sessionStorage.removeItem(sessionKey);
+    setSession(null);
+    onLogout?.();
+  }, [sessionKey, onLogout]);
+
+  if (session) {
+    return (
+      <div style={{ display:'flex', alignItems:'center', gap:10, background:'rgba(0,200,255,.08)', border:'1px solid rgba(0,200,255,.2)', borderRadius:999, padding:'6px 14px 6px 10px', fontSize:13 }}>
+        <span style={{ fontSize:18 }}>👤</span>
+        <span style={{ color:'#fff', fontWeight:600 }}>{session.username}</span>
+        <span style={{ color:'#00c8ff', fontFamily:"'Orbitron',sans-serif", fontSize:11 }}>⚡ {session.karma ?? 0}</span>
+        <button onClick={doLogout} style={{ background:'none', border:'1px solid rgba(255,100,100,.3)', color:'#ff8080', borderRadius:6, fontSize:11, padding:'3px 8px', cursor:'pointer', marginLeft:4 }}>Logout</button>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <button onClick={() => setOpen(true)} style={{ background:'linear-gradient(135deg,#00c8ff,#0080ff)', border:'none', borderRadius:8, color:'#fff', fontFamily:"'Orbitron',sans-serif", fontSize:12, fontWeight:700, letterSpacing:'.08em', padding:'9px 18px', cursor:'pointer' }}>
+        Beam In
+      </button>
+
+      <OasisModal open={open} onClose={() => setOpen(false)} title="Beam In">
+        <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
+          {error && <div style={{ background:'rgba(255,80,80,.12)', border:'1px solid rgba(255,80,80,.3)', color:'#ff6b6b', borderRadius:8, padding:'10px 14px', fontSize:13 }}>{error}</div>}
+          <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
+            <label style={{ fontSize:11, fontWeight:600, letterSpacing:'.06em', color:'#7a9bbf', textTransform:'uppercase' }}>Username</label>
+            <input value={username} onChange={e => setUsername(e.target.value)} type="text" placeholder="yourusername" autoComplete="username"
+              style={{ background:'rgba(255,255,255,.05)', border:'1px solid rgba(0,200,255,.2)', borderRadius:8, padding:'10px 14px', color:'#fff', fontSize:14, outline:'none' }} />
+          </div>
+          <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
+            <label style={{ fontSize:11, fontWeight:600, letterSpacing:'.06em', color:'#7a9bbf', textTransform:'uppercase' }}>Password</label>
+            <div style={{ position:'relative' }}>
+              <input value={password} onChange={e => setPassword(e.target.value)} type={showPwd ? 'text' : 'password'} placeholder="••••••••" autoComplete="current-password"
+                onKeyDown={e => e.key === 'Enter' && doLogin()}
+                style={{ width:'100%', background:'rgba(255,255,255,.05)', border:'1px solid rgba(0,200,255,.2)', borderRadius:8, padding:'10px 44px 10px 14px', color:'#fff', fontSize:14, outline:'none', boxSizing:'border-box' }} />
+              <button onClick={() => setShowPwd(v => !v)} type="button" style={{ position:'absolute', right:10, top:'50%', transform:'translateY(-50%)', background:'none', border:'none', cursor:'pointer', fontSize:16, padding:0, lineHeight:1 }}>
+                {showPwd ? '🙈' : '👁️'}
+              </button>
+            </div>
+          </div>
+          <button onClick={doLogin} disabled={loading}
+            style={{ background:'linear-gradient(135deg,#00c8ff,#0080ff)', border:'none', borderRadius:8, color:'#fff', fontFamily:"'Orbitron',sans-serif", fontSize:13, fontWeight:700, letterSpacing:'.08em', padding:12, cursor:'pointer', opacity: loading ? .5 : 1 }}>
+            {loading ? 'Connecting…' : 'Beam In'}
+          </button>
+        </div>
+      </OasisModal>
+    </>
+  );
+}

package/src/components/common/Contact.jsx

@@ -1,60 +1,60 @@
-import { useState } from 'react';
-
-const s = {
-  shell: { display: 'flex', flexDirection: 'column', gap: 18 },
-  header: { textAlign: 'center' },
-  title: { fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' },
-  sub: { fontSize: 13, color: '#7a9bbf', margin: 0 },
-  error: { background: 'rgba(255,80,80,.12)', border: '1px solid rgba(255,80,80,.3)', color: '#ff6b6b', borderRadius: 8, padding: '10px 14px', fontSize: 13 },
-  success: { background: 'rgba(72,220,130,.12)', border: '1px solid rgba(72,220,130,.3)', color: '#48dc82', borderRadius: 8, padding: '10px 14px', fontSize: 13 },
-  grid2: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 },
-  field: { display: 'flex', flexDirection: 'column', gap: 6 },
-  label: { fontSize: 12, fontWeight: 600, letterSpacing: '.06em', color: '#7a9bbf', textTransform: 'uppercase' },
-  input: { width: '100%', background: 'rgba(255,255,255,.05)', border: '1px solid rgba(0,200,255,.2)', borderRadius: 8, padding: '10px 14px', color: '#fff', fontSize: 14, outline: 'none', boxSizing: 'border-box', fontFamily: 'inherit' },
-  textarea: { width: '100%', background: 'rgba(255,255,255,.05)', border: '1px solid rgba(0,200,255,.2)', borderRadius: 8, padding: '10px 14px', color: '#fff', fontSize: 14, outline: 'none', boxSizing: 'border-box', fontFamily: 'inherit', resize: 'vertical', minHeight: 100 },
-  btn: { background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 8, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 13, fontWeight: 700, letterSpacing: '.08em', padding: 12, cursor: 'pointer' },
-  btnDisabled: { opacity: .5, cursor: 'not-allowed' },
-};
-
-export function Contact() {
-  const [fields, setFields] = useState({ firstName: '', lastName: '', email: '', subject: '', message: '' });
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-  const [sent, setSent] = useState(false);
-
-  function set(k) { return e => setFields(f => ({ ...f, [k]: e.target.value })); }
-
-  async function submit() {
-    if (!fields.email || !fields.message) { setError('Please fill in your email and message.'); return; }
-    setLoading(true); setError('');
-    try {
-      await fetch('https://formsubmit.co/ajax/davidellams@hotmail.com', {
-        method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
-        body: JSON.stringify(fields),
-      });
-      setSent(true);
-    } catch (e) { setError(e?.message ?? 'Send failed. Please try again.'); }
-    finally { setLoading(false); }
-  }
-
-  return (
-    <div style={s.shell}>
-      <div style={s.header}><h2 style={s.title}>Contact Us</h2><p style={s.sub}>Get in touch with the OASIS team.</p></div>
-      {sent ? (
-        <div style={s.success}>✅ Message sent! We'll be in touch soon.</div>
-      ) : (
-        <>
-          {error && <div style={s.error}>{error}</div>}
-          <div style={s.grid2}>
-            <div style={s.field}><label style={s.label}>First Name</label><input style={s.input} value={fields.firstName} onChange={set('firstName')} placeholder="John" /></div>
-            <div style={s.field}><label style={s.label}>Last Name</label><input style={s.input} value={fields.lastName} onChange={set('lastName')} placeholder="Doe" /></div>
-          </div>
-          <div style={s.field}><label style={s.label}>Email</label><input style={s.input} type="email" value={fields.email} onChange={set('email')} placeholder="name@example.com" /></div>
-          <div style={s.field}><label style={s.label}>Subject</label><input style={s.input} value={fields.subject} onChange={set('subject')} placeholder="How can we help?" /></div>
-          <div style={s.field}><label style={s.label}>Message</label><textarea style={s.textarea} value={fields.message} onChange={set('message')} placeholder="Your message…" rows={4} /></div>
-          <button style={{ ...s.btn, ...(loading ? s.btnDisabled : {}) }} disabled={loading} onClick={submit}>{loading ? 'Sending…' : 'Send Message'}</button>
-        </>
-      )}
-    </div>
-  );
-}
+import { useState } from 'react';
+
+const s = {
+  shell: { display: 'flex', flexDirection: 'column', gap: 18 },
+  header: { textAlign: 'center' },
+  title: { fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' },
+  sub: { fontSize: 13, color: '#7a9bbf', margin: 0 },
+  error: { background: 'rgba(255,80,80,.12)', border: '1px solid rgba(255,80,80,.3)', color: '#ff6b6b', borderRadius: 8, padding: '10px 14px', fontSize: 13 },
+  success: { background: 'rgba(72,220,130,.12)', border: '1px solid rgba(72,220,130,.3)', color: '#48dc82', borderRadius: 8, padding: '10px 14px', fontSize: 13 },
+  grid2: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 },
+  field: { display: 'flex', flexDirection: 'column', gap: 6 },
+  label: { fontSize: 12, fontWeight: 600, letterSpacing: '.06em', color: '#7a9bbf', textTransform: 'uppercase' },
+  input: { width: '100%', background: 'rgba(255,255,255,.05)', border: '1px solid rgba(0,200,255,.2)', borderRadius: 8, padding: '10px 14px', color: '#fff', fontSize: 14, outline: 'none', boxSizing: 'border-box', fontFamily: 'inherit' },
+  textarea: { width: '100%', background: 'rgba(255,255,255,.05)', border: '1px solid rgba(0,200,255,.2)', borderRadius: 8, padding: '10px 14px', color: '#fff', fontSize: 14, outline: 'none', boxSizing: 'border-box', fontFamily: 'inherit', resize: 'vertical', minHeight: 100 },
+  btn: { background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 8, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 13, fontWeight: 700, letterSpacing: '.08em', padding: 12, cursor: 'pointer' },
+  btnDisabled: { opacity: .5, cursor: 'not-allowed' },
+};
+
+export function Contact() {
+  const [fields, setFields] = useState({ firstName: '', lastName: '', email: '', subject: '', message: '' });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [sent, setSent] = useState(false);
+
+  function set(k) { return e => setFields(f => ({ ...f, [k]: e.target.value })); }
+
+  async function submit() {
+    if (!fields.email || !fields.message) { setError('Please fill in your email and message.'); return; }
+    setLoading(true); setError('');
+    try {
+      await fetch('https://formsubmit.co/ajax/davidellams@hotmail.com', {
+        method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+        body: JSON.stringify(fields),
+      });
+      setSent(true);
+    } catch (e) { setError(e?.message ?? 'Send failed. Please try again.'); }
+    finally { setLoading(false); }
+  }
+
+  return (
+    <div style={s.shell}>
+      <div style={s.header}><h2 style={s.title}>Contact Us</h2><p style={s.sub}>Get in touch with the OASIS team.</p></div>
+      {sent ? (
+        <div style={s.success}>✅ Message sent! We'll be in touch soon.</div>
+      ) : (
+        <>
+          {error && <div style={s.error}>{error}</div>}
+          <div style={s.grid2}>
+            <div style={s.field}><label style={s.label}>First Name</label><input style={s.input} value={fields.firstName} onChange={set('firstName')} placeholder="John" /></div>
+            <div style={s.field}><label style={s.label}>Last Name</label><input style={s.input} value={fields.lastName} onChange={set('lastName')} placeholder="Doe" /></div>
+          </div>
+          <div style={s.field}><label style={s.label}>Email</label><input style={s.input} type="email" value={fields.email} onChange={set('email')} placeholder="name@example.com" /></div>
+          <div style={s.field}><label style={s.label}>Subject</label><input style={s.input} value={fields.subject} onChange={set('subject')} placeholder="How can we help?" /></div>
+          <div style={s.field}><label style={s.label}>Message</label><textarea style={s.textarea} value={fields.message} onChange={set('message')} placeholder="Your message…" rows={4} /></div>
+          <button style={{ ...s.btn, ...(loading ? s.btnDisabled : {}) }} disabled={loading} onClick={submit}>{loading ? 'Sending…' : 'Send Message'}</button>
+        </>
+      )}
+    </div>
+  );
+}