Preview

public/locales/en/translation.json

@@ -18,7 +18,8 @@
 		"Branding": "Branding",
 		"Overview": "System Overview",
 		"Changelog": "Changelog",
-		"About": "About"
+		"About": "About",
+		"Resources": "Resources"
 	},
 	"Alert": {
 		"message": "You can now make RelaySMS your default SMS app on Android!",
@@ -519,6 +520,26 @@
 			"cta": "Learn all about routing numbers"
 		}
 	},
+	"Resources": {
+		"Title": "Resources",
+		"Description": "Download guides and materials to help you get the most out of RelaySMS.",
+		"Preview": "Preview",
+		"Download": "Download",
+		"Items": {
+			"EnglishTrainingGuide": {
+				"Title": "Training Guide (English)",
+				"Description": "A complete walkthrough of RelaySMS features and setup, in English."
+			},
+			"FrenchTrainingGuide": {
+				"Title": "Training Guide (French)",
+				"Description": "A complete walkthrough of RelaySMS features and setup, in French."
+			},
+			"RoutingNumberGuide": {
+				"Title": "Routing Number Guide",
+				"Description": "Step-by-step instructions for setting up and sharing a routing number."
+			}
+		}
+	},
 	"AppFeatures": {
 		"Features": {
 			"OfflineMessaging": "Offline messaging via SMS",

public/locales/es/translation.json

@@ -18,7 +18,8 @@
 		"Branding": "Marca",
 		"Overview": "Descripción general del sistema",
 		"Changelog": "Registro de cambios",
-		"About": "Acerca de"
+		"About": "Acerca de",
+		"Resources": "Recursos"
 	},
 	"Alert": {
 		"message": "¡Ahora puedes convertir RelaySMS en tu aplicación de SMS predeterminada en Android!",
@@ -519,6 +520,26 @@
 			"cta": "Conoce todo sobre los números de enrutamiento"
 		}
 	},
+	"Resources": {
+		"Title": "Recursos",
+		"Description": "Descarga guías y materiales para aprovechar al máximo RelaySMS.",
+		"Preview": "Vista previa",
+		"Download": "Descargar",
+		"Items": {
+			"EnglishTrainingGuide": {
+				"Title": "Guía de capacitación (inglés)",
+				"Description": "Un recorrido completo por las funciones y la configuración de RelaySMS, en inglés."
+			},
+			"FrenchTrainingGuide": {
+				"Title": "Guía de capacitación (francés)",
+				"Description": "Un recorrido completo por las funciones y la configuración de RelaySMS, en francés."
+			},
+			"RoutingNumberGuide": {
+				"Title": "Guía del número de enrutamiento",
+				"Description": "Instrucciones paso a paso para configurar y compartir un número de enrutamiento."
+			}
+		}
+	},
 	"AppFeatures": {
 		"Features": {
 			"OfflineMessaging": "Mensajería offline por SMS",

public/locales/fa/translation.json

@@ -18,7 +18,8 @@
 		"Branding": "برندینگ",
 		"Overview": "نمای کلی سیستم",
 		"Changelog": "تغییرات",
-		"About": "درباره ما"
+		"About": "درباره ما",
+		"Resources": "منابع"
 	},
 	"Alert": {
 		"message": "اکنون می‌توانید RelaySMS را به‌عنوان برنامه پیامک پیش‌فرض خود در اندروید تنظیم کنید!",
@@ -519,6 +520,26 @@
 			"cta": "همه چیز درباره شماره‌های مسیریابی را بدانید"
 		}
 	},
+	"Resources": {
+		"Title": "منابع",
+		"Description": "راهنماها و مطالبی را دانلود کنید تا بیشترین بهره را از RelaySMS ببرید.",
+		"Preview": "پیش‌نمایش",
+		"Download": "دانلود",
+		"Items": {
+			"EnglishTrainingGuide": {
+				"Title": "راهنمای آموزشی (انگلیسی)",
+				"Description": "مروری کامل بر ویژگی‌ها و راه‌اندازی RelaySMS، به زبان انگلیسی."
+			},
+			"FrenchTrainingGuide": {
+				"Title": "راهنمای آموزشی (فرانسوی)",
+				"Description": "مروری کامل بر ویژگی‌ها و راه‌اندازی RelaySMS، به زبان فرانسوی."
+			},
+			"RoutingNumberGuide": {
+				"Title": "راهنمای شماره مسیریابی",
+				"Description": "دستورالعمل‌های گام‌به‌گام برای راه‌اندازی و اشتراک‌گذاری شماره مسیریابی."
+			}
+		}
+	},
 	"AppFeatures": {
 		"Features": {
 			"OfflineMessaging": "پیام‌رسانی آفلاین از طریق SMS",

public/locales/fr/translation.json

@@ -18,7 +18,8 @@
 		"Branding": "Identité visuelle",
 		"Overview": "Vue d’ensemble du système",
 		"Changelog": "Journal des modifications",
-		"About": "À propos"
+		"About": "À propos",
+		"Resources": "Ressources"
 	},
 	"Alert": {
 		"message": "Vous pouvez désormais utiliser RelaySMS comme application SMS par défaut sur Android !",
@@ -519,6 +520,26 @@
 			"cta": "Tout savoir sur les numéros de routage"
 		}
 	},
+	"Resources": {
+		"Title": "Ressources",
+		"Description": "Téléchargez des guides et des documents pour tirer le meilleur parti de RelaySMS.",
+		"Preview": "Aperçu",
+		"Download": "Télécharger",
+		"Items": {
+			"EnglishTrainingGuide": {
+				"Title": "Guide de formation (anglais)",
+				"Description": "Un tour complet des fonctionnalités et de la configuration de RelaySMS, en anglais."
+			},
+			"FrenchTrainingGuide": {
+				"Title": "Guide de formation (français)",
+				"Description": "Un tour complet des fonctionnalités et de la configuration de RelaySMS, en français."
+			},
+			"RoutingNumberGuide": {
+				"Title": "Guide du numéro de routage",
+				"Description": "Instructions étape par étape pour configurer et partager un numéro de routage."
+			}
+		}
+	},
 	"AppFeatures": {
 		"Features": {
 			"OfflineMessaging": "Messagerie hors ligne via SMS",

src/App.js

@@ -11,6 +11,7 @@ import Navbar from "./Components/Navbar";
 import Overview from "./Pages/Overview";
 import Contributing from "./Pages/Contributing";
 import About from "./Pages/About";
+import Resources from "./Pages/Resources";
 import NewsletterSubscribed from "./Pages/NewsletterSubscribed";
 import NewsletterConfirmationError from "./Pages/NewsletterConfirmationError";
 import NewsletterUnsubscribed from "./Pages/NewsletterUnsubscribed";
@@ -44,6 +45,7 @@ const App = () => {
 				<Route path="/branding" element={<Branding />} />
 				<Route path="/system-overview" element={<Overview />} />
 				<Route path="/contributing" element={<Contributing />} />
+				<Route path="/resources" element={<Resources />} />
 				<Route path={NEWSLETTER_ROUTES.subscribed} element={<NewsletterSubscribed />} />
 				<Route
 					path={NEWSLETTER_ROUTES.confirmationError}

src/Components/Navbar.js

@@ -66,6 +66,7 @@ export default function Navigation() {
 			href: "https://docs.smswithoutborders.com/",
 			external: true
 		},
+		{ label: t("Nav.Resources", "Resources"), to: "/resources" },
 		{ label: t("Nav.Contact"), to: "/contact" }
 	];
 

src/Components/NewsletterForm.js

@@ -146,7 +146,7 @@ const NewsletterForm = ({
 					<Stack
 						direction={{ xs: "column", sm: stacked ? "column" : "row" }}
 						spacing={1}
-						sx={{ width: "100%" }}
+						sx={{ width: "100%", justifyContent: centered ? "center" : "flex-start" }}
 					>
 						<TextField
 							type="email"

src/Pages/Contact.js

@@ -2,11 +2,10 @@ import React from "react";
 import { Box, Typography, Button, useTheme } from "@mui/material";
 import { FaGithub, FaXTwitter, FaEnvelope, FaTelegram } from "react-icons/fa6";
 import { useTranslation } from "react-i18next";
-
+import NewsletterForm from "../Components/NewsletterForm";
 
 const TELEGRAM_URL = "https://t.me/+IPYp6q06dWsyZjY0";
 
-
 const Contact = () => {
 	const { t, i18n } = useTranslation();
 	const theme = useTheme();
@@ -68,8 +67,7 @@ const Contact = () => {
 					color: "#000",
 					maxWidth: "1200px",
 					mx: "auto",
-					pt: { xs: "120px", md: "140px" },
-
+					pt: { xs: "120px", md: "140px" }
 				}}
 			>
 				<Typography
@@ -161,6 +159,25 @@ const Contact = () => {
 					))}
 				</Box>
 			</Box>
+			{/* ── Mailing List ── */}
+			<Box
+				sx={{
+					mt: { xs: 6, md: 2 },
+					mx: { xs: 3, md: 6 },
+					mb: { xs: 6, md: 10 },
+					borderRadius: 4,
+					py: { xs: 6, md: 8 },
+					px: { xs: 3, md: 8 },
+					textAlign: "center",
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					gap: 3
+				}}
+			>
+				<NewsletterForm showHeading={true} align="center" sx={{ width: "100%", maxWidth: 800 }} />
+			</Box>
+
 			{/* ── Join the Community ── */}
 			<Box
 				sx={{
@@ -200,11 +217,6 @@ const Contact = () => {
 				>
 					{t("Blog.communityDescription")}
 				</Typography>
-				{/* <NewsletterForm
-								showHeading={false}
-								align="center"
-								sx={{ width: "100%", maxWidth: 620 }}
-							/> */}
 				<Button
 					component="a"
 					href={TELEGRAM_URL}