Update Landing page with new design

smswithoutborders · Apr 29, 2024 · a9b8ef0 · a9b8ef0
1 parent 238d212
commit a9b8ef0
Show file tree

Hide file tree

Showing 10 changed files with 193 additions and 96 deletions.
diff --git a/public/nerd1.png b/public/nerd1.png
diff --git a/public/nerd2.png b/public/nerd2.png
diff --git a/src/App.css b/src/App.css
@@ -35,3 +35,70 @@ a:hover {
 button:hover {
 	background-color: #383939 !important;
 }
+
+.loader-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100vh;
+}
+
+.loader {
+	display: inline-block;
+	position: relative;
+	width: 80px;
+	height: 80px;
+}
+
+.loader-inner {
+	vertical-align: top;
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background: #333;
+}
+
+.loader-inner:nth-child(1) {
+	animation: loader-animation 0.8s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+
+.loader-inner:nth-child(2) {
+	animation: loader-animation 0.8s cubic-bezier(0.165, 0.84, 0.44, 1.02) 0.125s infinite;
+}
+
+.loader-inner:nth-child(3) {
+	animation: loader-animation 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.25s infinite;
+}
+
+.loader-inner:nth-child(4) {
+	animation: loader-animation 0.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.375s infinite;
+}
+
+.loader-inner:nth-child(5) {
+	animation: loader-animation 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s infinite;
+}
+
+.loader-inner:nth-child(6) {
+	animation: loader-animation 0.8s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.625s infinite;
+}
+
+.loader-inner:nth-child(7) {
+	animation: loader-animation 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.75s infinite;
+}
+
+.loader-inner:nth-child(8) {
+	animation: loader-animation 0.8s cubic-bezier(0.93, 0.095, 0.88, 0.26) 0.875s infinite;
+}
+
+@keyframes loader-animation {
+	0% {
+		transform: scale(1);
+	}
+	20% {
+		transform: scale(0.3);
+	}
+	40% {
+		transform: scale(1);
+	}
+}
diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,5 @@
 import "./App.css";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
@@ -10,9 +10,19 @@ import Help from "./Pages/Help";
 import PageNotFound from "./Pages/PageNotFound";
 import Download from "./Pages/Download";
 import MobileNav from "./Components/MobileNav";
+import Loader from "./Components/Loader";
 
 const App = () => {
 	const [darkMode, setDarkMode] = useState(true);
+	const [isLoading, setIsLoading] = useState(true);
+
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setIsLoading(false);
+		}, 3000); // Change the duration as needed
+
+		return () => clearTimeout(timer);
+	}, []);
 
 	const toggleDarkMode = () => {
 		setDarkMode((prevMode) => !prevMode);
@@ -27,17 +37,21 @@ const App = () => {
 	return (
 		<ThemeProvider theme={theme}>
 			<CssBaseline />
-			<Router>
-				<Nav darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
-				<MobileNav darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
-				<Routes>
-					<Route path="/" element={<Landing />} />
-					<Route path="/help" element={<Help />} />
-					<Route path="/download" element={<Download />} />
-					<Route path="*" element={<PageNotFound />} />
-				</Routes>
-				<Footer />
-			</Router>
+			{isLoading ? (
+				<Loader />
+			) : (
+				<Router>
+					<Nav darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
+					<MobileNav darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
+					<Routes>
+						<Route path="/" element={<Landing />} />
+						<Route path="/help" element={<Help />} />
+						<Route path="/download" element={<Download />} />
+						<Route path="*" element={<PageNotFound />} />
+					</Routes>
+					<Footer />
+				</Router>
+			)}
 		</ThemeProvider>
 	);
 };

diff --git a/src/Components/FAQs.js b/src/Components/FAQs.js
@@ -34,14 +34,12 @@ export default function Faqs() {
 					id="panel1-header"
 				>
 					<Typography variant="body1" sx={{ fontWeight: 700 }}>
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+						Is RelaySMS same as SMSWithoutBorders?
 					</Typography>
 				</AccordionSummary>
 				<AccordionDetails>
 					<Typography>
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim purus eu nunc
-						ullamcorper, vel convallis ante tincidunt. Vivamus lacinia, lacus nec tristique
-						bibendum, velit libero consequat purus, ut finibus ex lectus eget nisi. Nulla facilisi.
+						RelaySMS is one of the biggest tools provided by SMSWithoutBorders
 					</Typography>
 				</AccordionDetails>
 			</Accordion>
@@ -52,36 +50,23 @@ export default function Faqs() {
 					id="panel2-header"
 				>
 					<Typography variant="body1" sx={{ fontWeight: 700 }}>
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+						Is RelaySMS free?
 					</Typography>
 				</AccordionSummary>
 				<AccordionDetails>
 					<Typography>
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim purus eu nunc
-						ullamcorper, vel convallis ante tincidunt. Vivamus lacinia, lacus nec tristique
-						bibendum, velit libero consequat purus, ut finibus ex lectus eget nisi. Nulla facilisi.
+						Yes you can get RelaySMS app for free{" "}
+						<span style={{ color: "skyblue" }}>
+							{" "}
+							<a href="/download" target="_blank">
+								download here
+							</a>
+						</span>
+						, even our code base is open source
 					</Typography>
 				</AccordionDetails>
 			</Accordion>
 			{/*  */}
-			<Accordion>
-				<AccordionSummary
-					expandIcon={<ExpandMoreIcon />}
-					aria-controls="panel2-content"
-					id="panel2-header"
-				>
-					<Typography variant="body1" sx={{ fontWeight: 700 }}>
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-					</Typography>
-				</AccordionSummary>
-				<AccordionDetails>
-					<Typography>
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim purus eu nunc
-						ullamcorper, vel convallis ante tincidunt. Vivamus lacinia, lacus nec tristique
-						bibendum, velit libero consequat purus, ut finibus ex lectus eget nisi. Nulla facilisi.
-					</Typography>
-				</AccordionDetails>
-			</Accordion>
 		</Box>
 	);
 }
diff --git a/src/Components/Loader.js b/src/Components/Loader.js
@@ -0,0 +1,20 @@
+import React from "react";
+import "../App.css";
+const Loader = () => {
+	return (
+		<div className="loader-container">
+			<div className="loader">
+				<div className="loader-inner"></div>
+				<div className="loader-inner"></div>
+				<div className="loader-inner"></div>
+				<div className="loader-inner"></div>
+				<div className="loader-inner"></div>
+				<div className="loader-inner"></div>
+				<div className="loader-inner"></div>
+				<div className="loader-inner"></div>
+			</div>
+		</div>
+	);
+};
+
+export default Loader;
diff --git a/src/Components/MobileNav.js b/src/Components/MobileNav.js
@@ -33,7 +33,7 @@ function MobileNav({ darkMode, toggleDarkMode }) {
 			>
 				<Box display="flex">
 					<Typography variant="body1" sx={{ fontWeight: 600, px: 2 }}>
-						Deku SMS
+						RelaySMS
 					</Typography>
 				</Box>{" "}
 				<Toolbar disableGutters>
@@ -67,14 +67,34 @@ function MobileNav({ darkMode, toggleDarkMode }) {
 							}}
 						>
 							<MenuItem onClick={handleCloseNavMenu}>
-								<Typography textAlign="center">Help</Typography>
+								<Typography
+									textAlign="center"
+									component="a"
+									href="https://smswithoutborders.github.io/docs/tutorials/getting-started/"
+									target="_blank"
+									rel="noreferrer noopener"
+								>
+									Help
+								</Typography>
 							</MenuItem>
 
-							<MenuItem onClick={handleCloseNavMenu}>
-								<Typography textAlign="center">Documentations</Typography>
+							<MenuItem
+								onClick={handleCloseNavMenu}
+								component="a"
+								href="https://github.com/smswithoutborders/"
+								target="_blank"
+								rel="noreferrer noopener"
+							>
+								<Typography textAlign="center">Developers</Typography>
 							</MenuItem>
 
-							<MenuItem onClick={handleCloseNavMenu}>
+							<MenuItem
+								onClick={handleCloseNavMenu}
+								component="a"
+								href="https://blog.smswithoutborders.com/"
+								target="_blank"
+								rel="noreferrer noopener"
+							>
 								<Typography textAlign="center">Blogs</Typography>
 							</MenuItem>
 

diff --git a/src/Components/Nav.js b/src/Components/Nav.js
@@ -31,21 +31,25 @@ export default function Nav({ darkMode, toggleDarkMode }) {
 					>
 						<a href="/">
 							<Typography sx={{ mx: 4 }} textAlign={"center"}>
-								Overview
+								Home
 							</Typography>
 						</a>
-						<a href="/help">
+						<a
+							href="https://smswithoutborders.github.io/docs/tutorials/getting-started/"
+							target="_blank"
+							rel="noreferrer noopener"
+						>
 							<Typography sx={{ mx: 4 }} textAlign={"center"}>
 								Help
 							</Typography>
 						</a>
 						<a href="https://developers.smswithoutborders.com/" target="_blank" rel="noreferrer">
-							<Typography sx={{ mr: 4 }} textAlign={"center"}>
-								Documentations
+							<Typography sx={{ mx: 4 }} textAlign={"center"}>
+								Developers
 							</Typography>
 						</a>
 						<a href="https://blog.smswithoutborders.com/" target="_blank" rel="noreferrer">
-							<Typography sx={{ mr: 4 }} textAlign={"center"}>
+							<Typography sx={{ mx: 4 }} textAlign={"center"}>
 								Blog
 							</Typography>
 						</a>