Merge pull request #109 from smswithoutborders/dev

 update Landing, About, Projects, Partner, Footer UI and add Research section

Author: mildrette

README.md

@@ -49,3 +49,86 @@ In addition to React, we utilized the following packages to enhance functionalit
 - React Icons
 
 Feel free to explore and contribute to make SMS Without Borders even better!
+
+
+
+---------------------------------------------------------------------------------------------------------------------------------------------
+
+# Research & Publications Section – Integration Guide
+
+## Overview
+
+This adds a fully-featured **Research & Publications** page to the SMSWithoutBorders website that:
+
+- Displays all papers, white papers, and threads in a searchable, filterable grid
+- Lets non-developers **add new papers by only editing one JSON file** — no React code needed
+- Supports search by title, topic, author, or keyword
+- Supports filtering by type (whitepaper / research / thread), year, and topic tags
+- Links directly to PDFs (Google Drive, arXiv, etc.)
+
+---
+
+## Files Delivered
+
+```
+src/
+  data/
+    papers.json        
+  pages/
+    ResearchPage.jsx    
+```
+
+
+## How to add new papers (NO code needed)
+
+All papers live in **`src/data/papers.json`**. To add a new paper:
+
+1. Open `src/data/papers.json` in any text editor or directly on GitHub (click the file → pencil icon to edit)
+2. Copy this template and paste it before the last `]`:
+
+```json
+{
+  "id": "7",
+  "title": "Your Paper Title Here",
+  "authors": ["First Author", "Second Author"],
+  "abstract": "A short summary of the paper (2-4 sentences).",
+  "topics": ["Topic1", "Topic2", "Topic3"],
+  "type": "whitepaper",
+  "year": 2025,
+  "pdfUrl": "https://link-to-pdf-or-google-drive.com/...",
+  "thumbnail": null
+}
+```
+
+3. Save / commit the file
+4. The website will automatically show the new paper
+
+### Field reference
+
+| Field       | Required | Options / Notes                                                      |
+|-------------|----------|----------------------------------------------------------------------|
+| `id`        | Yes      | Unique string number (increment from last entry)                     |
+| `title`     | Yes      | Full paper title                                                      |
+| `authors`   | Yes      | Array of author name strings                                         |
+| `abstract`  | Yes      | 1–4 sentence summary shown on the card                               |
+| `topics`    | Yes      | Array of topic tags (used for filtering); use existing ones or new   |
+| `type`      | Yes      | `"whitepaper"`, `"research"`, or `"thread"`                          |
+| `year`      | Yes      | Publication year as a number, e.g. `2024`                            |
+| `pdfUrl`    | Yes      | Full URL to PDF, Google Drive view link, or arXiv. `""` = Coming Soon|
+| `thumbnail` | No       | Path to a cover image (optional, leave `null` if not used)           |
+
+---
+
+## Google Drive PDF links
+
+For Google Drive, use the **viewer link** format:
+```
+https://drive.google.com/file/d/FILE_ID/view
+```
+This opens an in-browser reader, which works perfectly with the "Read Paper" button.
+
+---
+
+## Want inline PDF reading (no leaving the site)?
+
+If you want papers to open in an embedded reader within the website instead of a new tab, we can add a modal with `react-pdf`. Let us know!

src/App.js

@@ -7,7 +7,8 @@ import PageNotFound from "./Pages/PageNotFound";
 import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
 import Privacy from "./Pages/Privacy";
 import Footer from "./Components/Footer";
-import ThreatModel from "./Pages/ThreatModel";
+import ResearchPage from "./Pages/ResearchPage";
+import PaperReader from "./Pages/PaperReader";
 
 const theme = createTheme();
 
@@ -22,7 +23,8 @@ function App() {
 						<Route path="/features" element={<FeaturesPage />} />
 						<Route path="*" element={<PageNotFound />} />
 						<Route path="/privacy-policy/" element={<Privacy />} />
-						<Route path="/threat-model" element={<ThreatModel />} />
+						<Route path="/research" element={<ResearchPage />} />
+						<Route path="/research/:id" element={<PaperReader />} />
 					</Routes>
 				</div>
 				<Footer />