diff --git a/package.json b/package.json
index 8e5ec20..1cee3f1 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
 		"react-material-ui-carousel": "^3.4.2",
 		"react-router-dom": "^6.22.3",
 		"react-scripts": "5.0.1",
+		"react-scroll": "^1.9.0",
 		"web-vitals": "^2.1.0"
 	},
 	"scripts": {
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index d89f974..c78f57f 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -1,6 +1,7 @@
 {
 	"Landing": {
-		"landingh1": "Keep talking with RelaySMS",
+		"landingh1a": "Keep",
+		"landingh1": " Talking with RelaySMS",
 		"landingh2": "Send Emails, Posts, and Messages securely via SMS.",
 		"Android": "Android App",
 		"Desktop": "Desktop App"
diff --git a/public/locales/fa/translation.json b/public/locales/fa/translation.json
index 789f6cf..04ca546 100644
--- a/public/locales/fa/translation.json
+++ b/public/locales/fa/translation.json
@@ -1,6 +1,7 @@
 {
 	"Landing": {
-		"landingh1": "به ارتباط با RelaySMS ادامه دهید",
+		"landingh1a": "ادامه دهید ",
+		"landingh1": "به ارتباط با RelaySMS",
 		"landingh2": "ارسال ایمیل‌ها، پست‌ها و پیام‌ها به صورت امن از طریق پیامک.",
 		"Android": "اپلیکیشن اندروید",
 		"Desktop": "اپلیکیشن دسکتاپ"
diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
index 083c7d1..d978586 100644
--- a/public/locales/fr/translation.json
+++ b/public/locales/fr/translation.json
@@ -1,6 +1,7 @@
 {
 	"Landing": {
-		"landingh1": "Continuez à parler avec RelaySMS",
+		"landingh1a": "Continuez",
+		"landingh1": " à parler avec RelaySMS",
 		"landingh2": "Envoyez des e-mails, des publications et des messages en toute sécurité via SMS.",
 		"Android": "Application Android",
 		"Desktop": "Application de bureau"
diff --git a/src/Components/Hero.js b/src/Components/Hero.js
new file mode 100644
index 0000000..b05c4a6
--- /dev/null
+++ b/src/Components/Hero.js
@@ -0,0 +1,240 @@
+import React from "react";
+import Image from "next/image";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import { Link as ScrollLink } from "react-scroll";
+import { StyledButton } from "@/components/styled-button";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+
+const exps = [
+	{
+		label: "Students",
+		value: "10K+"
+	},
+	{
+		label: "Quality Course",
+		value: "20+"
+	},
+	{
+		label: "Experience Mentors",
+		value: "10+"
+	}
+];
+
+const ExpItem = ({ item }) => {
+	const { value, label } = item;
+	return (
+		<Box sx={{ textAlign: "center", mb: { xs: 1, md: 0 } }}>
+			<Typography
+				sx={{
+					color: "secondary.main",
+					mb: { xs: 1, md: 2 },
+					fontSize: { xs: 34, md: 44 },
+					fontWeight: "bold"
+				}}
+			>
+				{value}
+			</Typography>
+			<Typography color="text.secondary" variant="h5">
+				{label}
+			</Typography>
+		</Box>
+	);
+};
+
+const Landing = () => {
+	return (
+		<Box
+			id="hero"
+			sx={{
+				backgroundColor: "background.paper",
+				position: "relative",
+				pt: 4,
+				pb: { xs: 8, md: 10 }
+			}}
+		>
+			<Container maxWidth="lg">
+				<Grid container spacing={0} sx={{ flexDirection: { xs: "column", md: "unset" } }}>
+					<Grid item xs={12} md={7}>
+						<Box
+							sx={{
+								textAlign: { xs: "center", md: "left" },
+								height: "100%",
+								display: "flex",
+								flexDirection: "column",
+								justifyContent: "center"
+							}}
+						>
+							<Box sx={{ mb: 3 }}>
+								<Typography
+									component="h2"
+									sx={{
+										position: "relative",
+										fontSize: { xs: 40, md: 72 },
+										letterSpacing: 1.5,
+										fontWeight: "bold",
+										lineHeight: 1.3
+									}}
+								>
+									<Typography
+										component="mark"
+										sx={{
+											position: "relative",
+											color: "primary.main",
+											fontSize: "inherit",
+											fontWeight: "inherit",
+											backgroundColor: "unset"
+										}}
+									>
+										Improve{" "}
+										<Box
+											sx={{
+												position: "absolute",
+												top: { xs: 24, md: 34 },
+												left: 2,
+												transform: "rotate(3deg)",
+												"& img": { width: { xs: 146, md: 210 }, height: "auto" }
+											}}
+										>
+											<img src="/images/headline-curve.svg" alt="Headline curve" />
+										</Box>
+									</Typography>
+									your{" "}
+									<Typography
+										component="span"
+										sx={{
+											fontSize: "inherit",
+											fontWeight: "inherit",
+											position: "relative",
+											"& svg": {
+												position: "absolute",
+												top: -16,
+												right: -21,
+												width: { xs: 22, md: 30 },
+												height: "auto"
+											}
+										}}
+									>
+										Skill
+										<svg version="1.1" viewBox="0 0 3183 3072">
+											<g id="Layer_x0020_1">
+												<path
+													fill="#127C71"
+													d="M2600 224c0,0 0,0 0,0 236,198 259,562 52,809 -254,303 -1849,2089 -2221,1776 -301,-190 917,-1964 1363,-2496 207,-247 570,-287 806,-89z"
+												/>
+												<path
+													fill="#127C71"
+													d="M3166 2190c0,0 0,0 0,0 64,210 -58,443 -270,516 -260,90 -1848,585 -1948,252 -104,-230 1262,-860 1718,-1018 212,-73 437,39 500,250z"
+												/>
+												<path
+													fill="#127C71"
+													d="M566 3c0,0 0,0 0,0 -219,-26 -427,134 -462,356 -44,271 -255,1921 90,1962 245,62 628,-1392 704,-1869 36,-221 -114,-424 -332,-449z"
+												/>
+											</g>
+										</svg>
+									</Typography>{" "}
+									<br />
+									with Different Way
+								</Typography>
+							</Box>
+							<Box sx={{ mb: 4, width: { xs: "100%", md: "70%" } }}>
+								<Typography sx={{ color: "text.secondary", lineHeight: 1.6 }}>
+									{
+										"Let's take an online course to improve your skills in a different way, you can set your own study time according to your learning speed. So you san study comfortable and absorb tge material easily."
+									}
+								</Typography>
+							</Box>
+							<Box sx={{ "& button": { mr: 2 } }}>
+								<ScrollLink to="popular-course" spy={true} smooth={true} offset={0} duration={350}>
+									<StyledButton color="primary" size="large" variant="contained">
+										Get Started
+									</StyledButton>
+								</ScrollLink>
+								<ScrollLink to="video-section" spy={true} smooth={true} offset={0} duration={350}>
+									<StyledButton
+										color="primary"
+										size="large"
+										variant="outlined"
+										startIcon={<PlayArrowIcon />}
+									>
+										Watch Video
+									</StyledButton>
+								</ScrollLink>
+							</Box>
+						</Box>
+					</Grid>
+					<Grid item xs={12} md={5} sx={{ position: "relative" }}>
+						{/* Sertificate badge */}
+						<Box
+							sx={{
+								position: "absolute",
+								bottom: 30,
+								left: { xs: 0, md: -150 },
+								boxShadow: 1,
+								borderRadius: 3,
+								px: 2,
+								py: 1.4,
+								zIndex: 1,
+								backgroundColor: "background.paper",
+								display: "flex",
+								alignItems: "flex-start",
+								width: 280
+							}}
+						>
+							<Box
+								sx={{
+									boxShadow: 1,
+									borderRadius: "50%",
+									width: 44,
+									height: 44,
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									mr: 2,
+									"& img": { width: "32px !important", height: "auto" }
+								}}
+							>
+								<Image
+									src="/images/certificate.png"
+									alt="Certificate icon"
+									width={50}
+									height={50}
+									quality={97}
+								/>
+							</Box>
+							<Box>
+								<Typography
+									component="h6"
+									sx={{ color: "secondary.main", fontSize: "1.1rem", fontWeight: 700, mb: 0.5 }}
+								>
+									Certificate
+								</Typography>
+								<Typography variant="subtitle1" sx={{ color: "text.secondary", lineHeight: 1.3 }}>
+									There are certificates for all courses.
+								</Typography>
+							</Box>
+						</Box>
+						<Box sx={{ lineHeight: 0 }}>
+							<Image src="/images/home-hero.jpg" width={775} height={787} alt="Hero img" />
+						</Box>
+					</Grid>
+				</Grid>
+
+				{/* Experience */}
+				<Box sx={{ boxShadow: 2, py: 4, px: 7, borderRadius: 4 }}>
+					<Grid container spacing={2}>
+						{exps.map((item) => (
+							<Grid key={item.value} item xs={12} md={4}>
+								<ExpItem item={item} />
+							</Grid>
+						))}
+					</Grid>
+				</Box>
+			</Container>
+		</Box>
+	);
+};
+
+export default Landing;
diff --git a/src/Pages/Landing.js b/src/Pages/Landing.js
index 4219882..49bb6f0 100644
--- a/src/Pages/Landing.js
+++ b/src/Pages/Landing.js
@@ -1,14 +1,14 @@
 import React from "react";
 import { Box, Grid, Typography, Button, Card, CardMedia, Avatar, Paper } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { FaCircleArrowRight } from "react-icons/fa6";
+import { FaArrowCircleRight, FaDownload } from "react-icons/fa";
 import CardContent from "@mui/material/CardContent";
-import Faqs from "../Components/FAQs";
+import Faqs from "../Components/FAQs.js";
 import { AnimatePresence, motion, useScroll } from "framer-motion";
-import { useTheme } from "@mui/material/styles";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { FaDownload } from "react-icons/fa";
 import Carousel from "react-material-ui-carousel";
+import Container from "@mui/material/Container";
+import { Link as ScrollLink } from "react-scroll";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import "../i18n.js";
 
 export default function Landing() {
@@ -42,369 +42,435 @@ export default function Landing() {
 	for (let i = 0; i < items.length; i += 2) {
 		pairs.push(items.slice(i, i + 2));
 	}
-	const theme = useTheme();
-	const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
 	const isRTL = i18n.language === "fa";
 
 	return (
 		<>
-			<Box dir={isRTL ? "rtl" : "ltr"}>
+			<Box
+				dir={isRTL ? "rtl" : "ltr"}
+				sx={{
+					backgroundColor: "background.paper",
+					position: "relative",
+					pt: 4,
+					pb: { xs: 8, md: 10 }
+				}}
+			>
 				<motion.div className="progress-bar" style={{ scaleX: scrollYProgress }} />
+
+				{/*  */}
 				{/* Banner Page */}
-				<Grid
-					container
-					style={{ maxWidth: "1400px", margin: "0 auto", padding: "40px 20px" }}
-					spacing={3}
-				>
-					<AnimatePresence
-						transition={{
-							ease: "linear",
-							duration: 2,
-							x: { duration: 1 }
-						}}
-					>
-						<Grid
-							item
-							md={6}
-							sm={12}
-							xs={12}
-							style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}
-							sx={{
-								order: { xs: 2, sm: 2, md: 1 }
+				<Container maxWidth="lg">
+					<Grid container spacing={0} sx={{ flexDirection: { xs: "column", md: "unset" } }}>
+						<AnimatePresence
+							transition={{
+								ease: "linear",
+								duration: 2,
+								x: { duration: 1 }
 							}}
-						>
-							<img
-								src="/nerd1.png"
-								alt="Illustration"
-								style={{ width: "100%", maxWidth: "70%", height: "auto" }}
-							/>
-						</Grid>
-					</AnimatePresence>
-
-					<Grid
-						item
-						md={6}
-						sm={12}
-						xs={12}
-						style={{ display: "block", justifyContent: "center" }}
-						sx={{
-							order: { xs: 1, sm: 1, md: 2 }
-						}}
-					>
-						{!isMobile && (
-							<img
-								src="/logo.png"
-								alt="Logo"
-								style={{ width: "100%", maxWidth: "10%", height: "auto", marginBottom: "20px" }}
-							/>
-						)}
-						<Typography variant="h3" sx={{ fontWeight: 700, mb: { xs: 3, md: 2 } }}>
-							{t("Landing.landingh1")}
-						</Typography>
-						<Typography variant="h5" sx={{ mb: 3 }}>
-							{t("Landing.landingh2")}
-						</Typography>
-						<div style={{ display: "flex", marginBottom: 3 }}>
-							<Button
-								size="large"
-								component="a"
-								href="/download"
-								variant="contained"
-								startIcon={
-									<img
-										src="./playstore.svg"
-										alt="playstore"
-										style={{ height: "25px", marginRight: "10px" }}
-									/>
-								}
-								sx={{
-									px: { xs: 4, md: 5 },
-									mr: { xs: 2, md: 3 },
-									bgcolor: "black",
-									color: "whitesmoke",
-									textTransform: "none"
-								}}
-							>
-								{t("Landing.Android")}
-							</Button>
+						></AnimatePresence>
 
-							<Button
-								size="large"
-								component="a"
-								href="/download"
-								variant="contained"
-								startIcon={<FaDownload />}
+						<Grid item xs={12} md={7}>
+							<Box
 								sx={{
-									px: { xs: 4, md: 5 },
-									bgcolor: "black",
-									color: "whitesmoke",
-									textTransform: "none"
-								}}
-							>
-								{t("Landing.Desktop")}
-							</Button>
-						</div>
-					</Grid>
-				</Grid>
-
-				{/* How it works */}
-				<Box textAlign="center" sx={{ pt: { md: 10, xs: 7 }, px: { md: 30, xs: 3 }, mb: 0 }}>
-					<Typography variant="h4" sx={{ fontWeight: 700, fontSize: { xs: "25px", md: "33px" } }}>
-						{t("Howitworks.HowItWorks")}
-					</Typography>
-
-					{/* How it works sections */}
-					<Grid container spacing={4} justifyContent="center" sx={{ mt: 4 }}>
-						<Grid item xs={12} sm={6}>
-							<DemoPaper
-								variant="elevation"
-								sx={{
-									height: { xs: 300, md: 340 },
+									textAlign: { xs: "center", md: "left" },
+									height: "100%",
 									display: "flex",
 									flexDirection: "column",
-									justifyContent: "space-between",
-									maxWidth: { xs: 345, md: "none" },
-									margin: "auto",
-									boxShadow: 3,
-									borderRadius: 2
+									justifyContent: "center"
 								}}
 							>
-								<CardMedia
-									component="img"
-									height="140"
-									image="/permission.png"
-									alt="permission"
-									sx={{ objectFit: "cover", borderRadius: "2px 2px 0 0" }}
-								/>
-								<Typography variant="body1" sx={{ p: 2 }}>
-									{t("Howitworks.HowItWorksA")}
-								</Typography>
-							</DemoPaper>
+								<Box sx={{ mb: 3 }}>
+									<Typography
+										component="h2"
+										sx={{
+											position: "relative",
+											fontSize: { xs: 40, md: 72 },
+											letterSpacing: 1.5,
+											fontWeight: "bold",
+											lineHeight: 1.3
+										}}
+									>
+										<Typography
+											component="mark"
+											sx={{
+												position: "relative",
+												color: "primary.main",
+												fontSize: "inherit",
+												fontWeight: "inherit",
+												backgroundColor: "unset"
+											}}
+										>
+											{t("Landing.landingh1a")}
+											<Box
+												sx={{
+													position: "absolute",
+													top: { xs: 24, md: 34 },
+													left: 2,
+													transform: "rotate(3deg)",
+													"& img": { width: { xs: 146, md: 210 }, height: "auto" }
+												}}
+											></Box>
+										</Typography>
+										{t("Landing.landingh1")}
+									</Typography>
+								</Box>
+								<Box sx={{ mb: 4, width: { xs: "100%", md: "70%" } }}>
+									<Typography sx={{ color: "text.secondary", lineHeight: 1.6 }}>
+										{t("Landing.landingh2")}
+									</Typography>
+								</Box>
+								<Box sx={{ "& button": { mr: 2 } }}>
+									<ScrollLink to="popular-course" spy smooth offset={0} duration={350}>
+										<Button
+											color="primary"
+											size="large"
+											variant="contained"
+											startIcon={<FaDownload />}
+										>
+											{t("Landing.Android")}
+										</Button>
+									</ScrollLink>
+									<ScrollLink to="video-section" spy smooth offset={0} duration={350}>
+										<Button
+											color="primary"
+											size="large"
+											variant="outlined"
+											startIcon={<PlayArrowIcon />}
+										>
+											{t("Landing.Desktop")}
+										</Button>
+									</ScrollLink>
+								</Box>
+							</Box>
 						</Grid>
 
-						<Grid item xs={12} sm={6}>
-							<DemoPaper
-								variant="elevation"
+						<Grid item xs={12} md={5} sx={{ position: "relative" }}>
+							{/* image badge */}
+							<Box
 								sx={{
-									height: { xs: 300, md: 340 },
+									position: "absolute",
+									bottom: 30,
+									left: { xs: 0, md: -150 },
+									boxShadow: 1,
+									borderRadius: 3,
+									px: 2,
+									py: 1.4,
+									zIndex: 1,
+									backgroundColor: "background.paper",
 									display: "flex",
-									flexDirection: "column",
-									justifyContent: "space-between",
-									maxWidth: { xs: 345, md: "none" },
-									margin: "auto",
-									boxShadow: 3,
-									borderRadius: 2
+									alignItems: "flex-start",
+									width: 280
 								}}
 							>
-								<CardMedia
-									component="img"
-									height="140"
-									image="/composeMessage.png"
-									alt="compose message"
-									sx={{ objectFit: "cover", borderRadius: "2px 2px 0 0" }}
+								<Box
+									sx={{
+										boxShadow: 1,
+										borderRadius: "50%",
+										width: 40,
+										height: 40,
+										display: "flex",
+										alignItems: "center",
+										justifyContent: "center",
+										mr: 2,
+										"& img": { width: "32px !important", height: "auto" }
+									}}
+								>
+									<img
+										src="/logo.png"
+										alt="logo"
+										style={{ width: "100%", maxWidth: "70%", height: "auto" }}
+									/>
+								</Box>
+								<Box>
+									<Typography
+										component="h6"
+										sx={{ color: "secondary.main", fontSize: "1.1rem", fontWeight: 700, mb: 0.5 }}
+									>
+										RelaySMS
+									</Typography>
+								</Box>
+							</Box>
+							<Box sx={{ lineHeight: 0 }}>
+								<img
+									src="/nerd1.png"
+									alt="Illustration"
+									style={{ width: "100%", maxWidth: "90%", height: "auto" }}
 								/>
-								<Typography variant="body1" sx={{ p: 2 }}>
-									{t("Howitworks.HowItWorksB")}
-								</Typography>
-							</DemoPaper>
+							</Box>
 						</Grid>
+					</Grid>
+					{/* end of Hero section */}
 
-						<Grid item xs={12} sm={6}>
-							<DemoPaper
-								variant="elevation"
-								sx={{
-									height: { xs: 300, md: 340 },
-									display: "flex",
-									flexDirection: "column",
-									justifyContent: "space-between",
-									maxWidth: { xs: 345, md: "none" },
-									margin: "auto",
-									boxShadow: 3,
-									borderRadius: 2
-								}}
-							>
-								<CardMedia
-									component="img"
-									height="140"
-									image="/Online-world.png"
-									alt="online world"
-									sx={{ objectFit: "cover", borderRadius: "2px 2px 0 0" }}
-								/>
-								<Typography variant="body1" sx={{ p: 2 }}>
-									{t("Howitworks.HowItWorksC")}
-								</Typography>
-							</DemoPaper>
-						</Grid>
+					{/* How it works */}
+					<Box textAlign="center" sx={{ pt: { md: 10, xs: 7 }, px: { md: 30, xs: 3 }, mb: 0 }}>
+						<Typography variant="h4" sx={{ fontWeight: 700, fontSize: { xs: "25px", md: "33px" } }}>
+							{t("Howitworks.HowItWorks")}
+						</Typography>
 
-						<Grid item xs={12} sm={6}>
-							<DemoPaper
-								variant="elevation"
-								sx={{
-									height: { xs: 300, md: 340 },
-									display: "flex",
-									flexDirection: "column",
-									justifyContent: "space-between",
-									maxWidth: { xs: 345, md: "none" },
-									margin: "auto",
-									boxShadow: 3,
-									borderRadius: 2
-								}}
-							>
-								<CardMedia
-									component="img"
-									height="140"
-									image="/recievedNotification.png"
-									alt="received notification"
-									sx={{ objectFit: "cover", borderRadius: "2px 2px 0 0" }}
-								/>
-								<Typography variant="body1" sx={{ p: 2 }}>
-									{t("Howitworks.HowItWorksD")}
-								</Typography>
-							</DemoPaper>
-						</Grid>
+						{/* How it works sections */}
+						<Grid container spacing={4} justifyContent="center" sx={{ mt: 4 }}>
+							<Grid item xs={12} sm={6}>
+								<motion.div initial="hidden">
+									<DemoPaper
+										variant="elevation"
+										sx={{
+											height: { xs: 300, md: 340 },
+											display: "flex",
+											flexDirection: "column",
+											justifyContent: "space-between",
+											maxWidth: { xs: 345, md: "none" },
+											margin: "auto",
+											boxShadow: 3,
+											borderRadius: 2
+										}}
+									>
+										<CardMedia
+											component="img"
+											height="140"
+											image="/permission.png"
+											alt="permission"
+											sx={{ objectFit: "cover", borderRadius: "2px 2px 0 0" }}
+										/>
+										<Typography variant="body1" sx={{ p: 2 }}>
+											{t("Howitworks.HowItWorksA")}
+										</Typography>
+									</DemoPaper>
+								</motion.div>
+							</Grid>
 
-						{/* Getting Started Button */}
-						<Grid item xs={12}>
-							<Box textAlign="center" sx={{ p: 2 }}>
-								<a
-									href="https://smswithoutborders.github.io/docs/tutorials/getting-started/"
-									target="_blank"
-									rel="noreferrer noopener"
-									style={{ textDecoration: "none" }}
-								>
-									<Typography
-										variant="body1"
+							<Grid item xs={12} sm={6}>
+								<motion.div initial="hidden">
+									<DemoPaper
+										variant="elevation"
 										sx={{
-											p: 4,
-											textDecoration: "underline",
-											fontWeight: "bold",
-											color: "primary.main",
-											display: "inline-flex",
-											alignItems: "center",
-											fontSize: { xs: "20px", md: "24px" },
-											"&:hover": {
-												color: "secondary.main",
-												textDecoration: "none",
-												transform: "scale(1.05)"
-											},
-											transition: "transform 0.2s ease-in-out"
+											height: { xs: 300, md: 340 },
+											display: "flex",
+											flexDirection: "column",
+											justifyContent: "space-between",
+											maxWidth: { xs: 345, md: "none" },
+											margin: "auto",
+											boxShadow: 3,
+											borderRadius: 2
 										}}
 									>
-										{t("Howitworks.GettingStartedButton")}{" "}
-										<FaCircleArrowRight
-											size="20px"
-											style={{ marginLeft: "8px", rotate: "-30deg" }}
+										<CardMedia
+											component="img"
+											height="140"
+											image="/composeMessage.png"
+											alt="compose message"
+											sx={{ objectFit: "cover", borderRadius: "2px 2px 0 0" }}
 										/>
-									</Typography>
-								</a>
-							</Box>
-						</Grid>
-					</Grid>
-				</Box>
-				{/* Relay Map */}
-				<Box sx={{ bgcolor: "white", px: { md: 20, sm: 10, xs: 3 } }}>
-					<Grid container rowSpacing={4} sx={{ py: { md: 10, xs: 10 } }}>
-						<Grid item md={5} my="auto">
-							<Typography
-								variant="h3"
-								sx={{
-									fontWeight: 700,
-									fontSize: { md: "48px", xs: "33px" },
-									color: "black"
-								}}
-							>
-								{t("Map.RelaySMSMap")}
-							</Typography>
-						</Grid>
-						<Grid item md={7} sx={{ justifyContent: "center", display: "flex", mx: "auto" }}>
-							<Box component="img" src="/map.png" sx={{ width: "100%", borderRadius: "20px" }} />
+										<Typography variant="body1" sx={{ p: 2 }}>
+											{t("Howitworks.HowItWorksB")}
+										</Typography>
+									</DemoPaper>
+								</motion.div>
+							</Grid>
+
+							<Grid item xs={12} sm={6}>
+								<motion.div initial="hidden">
+									<DemoPaper
+										variant="elevation"
+										sx={{
+											height: { xs: 300, md: 340 },
+											display: "flex",
+											flexDirection: "column",
+											justifyContent: "space-between",
+											maxWidth: { xs: 345, md: "none" },
+											margin: "auto",
+											boxShadow: 3,
+											borderRadius: 2
+										}}
+									>
+										<CardMedia
+											component="img"
+											height="140"
+											image="/Online-world.png"
+											alt="online world"
+											sx={{ objectFit: "cover", borderRadius: "2px 2px 0 0" }}
+										/>
+										<Typography variant="body1" sx={{ p: 2 }}>
+											{t("Howitworks.HowItWorksC")}
+										</Typography>
+									</DemoPaper>
+								</motion.div>
+							</Grid>
+
+							<Grid item xs={12} sm={6}>
+								<motion.div initial="hidden">
+									<DemoPaper
+										variant="elevation"
+										sx={{
+											height: { xs: 300, md: 340 },
+											display: "flex",
+											flexDirection: "column",
+											justifyContent: "space-between",
+											maxWidth: { xs: 345, md: "none" },
+											margin: "auto",
+											boxShadow: 3,
+											borderRadius: 2
+										}}
+									>
+										<CardMedia
+											component="img"
+											height="140"
+											image="/recievedNotification.png"
+											alt="received notification"
+											sx={{ objectFit: "cover", borderRadius: "2px 2px 0 0" }}
+										/>
+										<Typography variant="body1" sx={{ p: 2 }}>
+											{t("Howitworks.HowItWorksD")}
+										</Typography>
+									</DemoPaper>
+								</motion.div>
+							</Grid>
+
+							{/* Getting Started Button */}
+							<Grid item xs={12}>
+								<motion.div initial="hidden">
+									<Box textAlign="center" sx={{ p: 2 }}>
+										<a
+											href="https://smswithoutborders.github.io/docs/tutorials/getting-started/"
+											target="_blank"
+											rel="noreferrer noopener"
+											style={{ textDecoration: "none" }}
+										>
+											<Typography
+												variant="body1"
+												sx={{
+													p: 4,
+													textDecoration: "underline",
+													fontWeight: "bold",
+													color: "primary.main",
+													display: "inline-flex",
+													alignItems: "center",
+													fontSize: { xs: "20px", md: "24px" },
+													"&:hover": {
+														color: "secondary.main",
+														textDecoration: "none",
+														transform: "scale(1.05)"
+													},
+													transition: "transform 0.2s ease-in-out"
+												}}
+											>
+												{t("Howitworks.GettingStartedButton")}{" "}
+												<FaArrowCircleRight
+													size="20px"
+													style={{ marginLeft: "8px", rotate: "-30deg" }}
+												/>
+											</Typography>
+										</a>
+									</Box>
+								</motion.div>
+							</Grid>
 						</Grid>
-					</Grid>
-				</Box>
+					</Box>
 
-				{/* What's New Blog */}
-				<Box sx={{ p: { md: 3, xs: 2 } }}>
-					<Grid
-						container
-						rowSpacing={4}
-						columnSpacing={4}
-						sx={{ px: { md: 13, sm: 10, xs: 2 }, my: { md: 2, xs: 1 }, pb: 4 }}
-					>
-						<Grid item md={12} xs={12}>
-							<Typography textAlign={"center"} variant="h5" sx={{ fontWeight: 700, py: 2 }}>
-								{t("Blog.WhatsNew")}
-							</Typography>
+					{/* Relay Map */}
+					<Box sx={{ bgcolor: "white", px: { md: 20, sm: 10, xs: 3 } }}>
+						<Grid container rowSpacing={4} sx={{ py: { md: 10, xs: 10 } }}>
+							<Grid item md={5} my="auto">
+								<Typography
+									variant="h3"
+									sx={{
+										fontWeight: 700,
+										fontSize: { md: "48px", xs: "33px" },
+										color: "black"
+									}}
+								>
+									{t("Map.RelaySMSMap")}
+								</Typography>
+							</Grid>
+							<Grid item md={7} sx={{ justifyContent: "center", display: "flex", mx: "auto" }}>
+								<Box component="img" src="/map.png" sx={{ width: "100%", borderRadius: "20px" }} />
+							</Grid>
 						</Grid>
+					</Box>
 
-						<Grid item xs={12}>
-							<Carousel
-								NextIcon={<Button>Next</Button>} // Custom Next button
-								PrevIcon={<Button>Prev</Button>} // Custom Prev button
-							>
-								{pairs.map((pair, index) => (
-									<Box key={index}>
-										<Grid container spacing={2} justifyContent="center">
-											{pair.map((item, idx) => (
-												<Grid item md={6} sm={6} xs={12} key={idx}>
-													<Card sx={{ maxWidth: { xs: "100%", sm: "400px" }, mx: "auto" }}>
-														<CardMedia
-															component="img"
-															height="200"
-															image={item.image}
-															alt={item.title}
-															sx={{ objectFit: "cover", width: "100%" }}
-														/>
-														<CardContent>
-															<Typography
-																gutterBottom
-																variant="h5"
-																component="div"
-																sx={{ fontSize: { xs: "1.25rem", md: "1.5rem" } }}
-															>
-																{item.title}
-															</Typography>
-															<Typography variant="body2" color="text.secondary">
-																{item.description}
-																<a
-																	style={{ color: "#8AC1EE" }}
-																	href={item.link}
-																	target="_blank"
-																	rel="noreferrer"
+					{/* What's New Blog */}
+					<Box sx={{ p: { md: 3, xs: 2 } }}>
+						<Grid
+							container
+							rowSpacing={4}
+							columnSpacing={4}
+							sx={{ px: { md: 13, sm: 10, xs: 2 }, my: { md: 2, xs: 1 }, pb: 4 }}
+						>
+							<Grid item md={12} xs={12}>
+								<Typography textAlign={"center"} variant="h5" sx={{ fontWeight: 700, py: 2 }}>
+									{t("Blog.WhatsNew")}
+								</Typography>
+							</Grid>
+
+							<Grid item xs={12}>
+								<Carousel
+									NextIcon={<Button>Next</Button>} // Custom Next button
+									PrevIcon={<Button>Prev</Button>} // Custom Prev button
+								>
+									{pairs.map((pair, index) => (
+										<Box key={index}>
+											<Grid container spacing={2} justifyContent="center">
+												{pair.map((item, idx) => (
+													<Grid item md={6} sm={6} xs={12} key={idx}>
+														<Card sx={{ maxWidth: { xs: "100%", sm: "400px" }, mx: "auto" }}>
+															<CardMedia
+																component="img"
+																height="200"
+																image={item.image}
+																alt={item.title}
+																sx={{ objectFit: "cover", width: "100%" }}
+															/>
+															<CardContent>
+																<Typography
+																	gutterBottom
+																	variant="h5"
+																	component="div"
+																	sx={{ fontSize: { xs: "1.25rem", md: "1.5rem" } }}
 																>
-																	<br />
-																	{t("Blog.ReadMore")}
-																</a>
-															</Typography>
-														</CardContent>
-														<Box sx={{ display: "flex", alignItems: "center", px: 2, pb: 2 }}>
-															<Avatar>{item.avatar}</Avatar>
-															<Typography variant="body2" sx={{ p: 1 }}>
-																{item.author}
-															</Typography>
-														</Box>
-													</Card>
-												</Grid>
-											))}
-										</Grid>
-									</Box>
-								))}
-							</Carousel>
+																	{item.title}
+																</Typography>
+																<Typography variant="body2" color="text.secondary">
+																	{item.description}
+																	<a
+																		style={{ color: "#8AC1EE" }}
+																		href={item.link}
+																		target="_blank"
+																		rel="noreferrer"
+																	>
+																		<br />
+																		{t("Blog.ReadMore")}
+																	</a>
+																</Typography>
+															</CardContent>
+															<Box sx={{ display: "flex", alignItems: "center", px: 2, pb: 2 }}>
+																<Avatar>{item.avatar}</Avatar>
+																<Typography variant="body2" sx={{ p: 1 }}>
+																	{item.author}
+																</Typography>
+															</Box>
+														</Card>
+													</Grid>
+												))}
+											</Grid>
+										</Box>
+									))}
+								</Carousel>
+							</Grid>
 						</Grid>
-					</Grid>
-				</Box>
-				{/* FAQ */}
-				<Box
-					sx={{
-						bgcolor: "white",
-						color: "black",
-						px: { md: 15, sm: 10, xs: 3 },
-						mb: { md: 0, xs: 4 },
-						mt: { md: 4, xs: 1 }
-					}}
-				>
-					<Faqs />
-				</Box>
+					</Box>
+					{/* FAQ */}
+					<Box
+						sx={{
+							bgcolor: "white",
+							color: "black",
+							px: { md: 15, sm: 10, xs: 3 },
+							mb: { md: 0, xs: 4 },
+							mt: { md: 4, xs: 1 }
+						}}
+					>
+						<Faqs />
+					</Box>
+				</Container>
 			</Box>
 		</>
 	);
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
deleted file mode 100644
index d89f974..0000000
--- a/src/locales/en/translation.json
+++ /dev/null
@@ -1,64 +0,0 @@
-{
-	"Landing": {
-		"landingh1": "Keep talking with RelaySMS",
-		"landingh2": "Send Emails, Posts, and Messages securely via SMS.",
-		"Android": "Android App",
-		"Desktop": "Desktop App"
-	},
-	"Nav": {
-		"Home": "Home",
-		"help": "Help",
-		"github": "GitHub",
-		"Blog": "Blog"
-	},
-	"Howitworks": {
-		"HowItWorks": "How it works",
-		"HowItWorksA": "Authorize RelaySMS to send emails, posts, or messages on your behalf",
-		"HowItWorksB": "Compose your email, post, or message, and it will be automatically sent using your default SMS app.",
-		"HowItWorksC": "Your content reaches RelaySMS access points and is published on your behalf.",
-		"HowItWorksD": "Receive a response via SMS indicating success or failure.",
-		"GettingStartedButton": "Get Started"
-	},
-	"Map": {
-		"RelaySMSMap": "RelaySMS is actively used in over 60 countries."
-	},
-	"Blog": {
-		"WhatsNew": "Whats New on RelaySMS?",
-		"Resilience": "Resilience Of Gateway Clients In Smswithoutborders",
-		"ResilienceD": "Gateway Client in SMSWithoutBorders is key in routing messages from SMS to online platforms. The Gateway Client listens for messages and routes them to the Gateway server, which publishes ...",
-		"ReliabilityD": "Gateway Client in SMSWithoutBorders is key in routing messages from SMS to online platforms. The Gateway Client listens for messages and routes them to the Gateway server, which publishes ...",
-		"Reliability": "Reliability Of Gateway Clients In Smswithoutborders",
-		"ReadMore": "Read More"
-	},
-	"FAQ": {
-		"FAQ": "FAQ",
-		"FAQ1": "Is RelaySMS available on my device?",
-		"faq1": "RelaySMS is currently available for Android. We are working on expanding compatibility to other platforms.",
-		"FAQ2": "How do I send an offline message? ",
-		"faq2": "Choose the platform you want to send the message to and compose your message within the app. Our Help Center also offers resources and tutorials on how to send messages through the app",
-		"FAQ3": "Are there any limitations on offline messages? ",
-		"faq3": "There are no limits on the size and number of messages you can send with the app.",
-		"FAQ4": "I'm having trouble logging in to my account. What should I do?  ",
-		"faq4": "Our Help Center offers resources and tutorials on logging in to your account and If you can't find a solution, you can reach out to our support team at <1>smswithoutborders</1>",
-		"FAQ5": "I'm experiencing technical difficulties with the app. How can I get help? ",
-		"faq5": "Our Help Center offers resources and troubleshooting guides. You can also reach out to our support team on social media at [link to X handle] or by visiting our website."
-	},
-	"Footer": {
-		"RelaySMS": "RelaySMS",
-		"footerbody2": "The customer is very important, the customer will be followed by the customer. But now, the best thing is pure football or valley before valley.",
-		"footerHeader1": "Quick links",
-		"footerquick1": "Blog",
-		"footerquick3": "Documentation",
-		"footerquick4": "Privacy Policy",
-		"footerHeader2": "Socials",
-		"footersocial1": "Github",
-		"footersocial2": "FaceBook",
-		"footersocial3": " X",
-		"footersocial4": "Mail",
-		"footerHeader3": "Download",
-		"footerdownload1": "Andriod",
-		"footerdownload2": "iOS",
-		"footerdownload3": "Linux",
-		"footerdownload4": "Windows"
-	}
-}
diff --git a/src/locales/fa/translation.json b/src/locales/fa/translation.json
deleted file mode 100644
index 789f6cf..0000000
--- a/src/locales/fa/translation.json
+++ /dev/null
@@ -1,64 +0,0 @@
-{
-	"Landing": {
-		"landingh1": "به ارتباط با RelaySMS ادامه دهید",
-		"landingh2": "ارسال ایمیل‌ها، پست‌ها و پیام‌ها به صورت امن از طریق پیامک.",
-		"Android": "اپلیکیشن اندروید",
-		"Desktop": "اپلیکیشن دسکتاپ"
-	},
-	"Nav": {
-		"Home": "خانه",
-		"help": "راهنما",
-		"github": "گیت‌هاب",
-		"Blog": "بلاگ"
-	},
-	"Howitworks": {
-		"HowItWorks": "چگونگی کار",
-		"HowItWorksA": "اجازه دهید RelaySMS برای ارسال ایمیل، پست یا پیام به جای شما ارسال شود",
-		"HowItWorksB": "ایمیل، پست یا پیام خود را تنظیم کنید و به طور خودکار از طریق برنامه پیش‌فرض پیامک شما ارسال می‌شود.",
-		"HowItWorksC": "محتوای شما به نقاط دسترسی RelaySMS می‌رسد و به نمایندگی شما منتشر می‌شود.",
-		"HowItWorksD": "پاسخی از طریق پیامک دریافت کنید که موفقیت یا عدم موفقیت را نشان می‌دهد.",
-		"GettingStartedButton": "شروع کنید"
-	},
-	"Map": {
-		"RelaySMSMap": "RelaySMS فعال در بیش از ۶۰ کشور است."
-	},
-	"Blog": {
-		"WhatsNew": "چه خبر درباره RelaySMS؟",
-		"Resilience": "استحکام مشتریان در Smswithoutborders",
-		"ResilienceD": "مشتری در SMSWithoutBorders در مسیریابی پیام‌ها از SMS به پلتفرم‌های آنلاین کلیدی است. مشتری گیتوی پیام‌ها را گوش می‌دهد و آن‌ها را به سرور گیتوی می‌فرستد که ...",
-		"ReliabilityD": "مشتری گیتوی در SMSWithoutBorders در مسیریابی پیام‌ها از SMS به پلتفرم‌های آنلاین کلیدی است. مشتری گیتوی پیام‌ها را گوش می‌دهد و آن‌ها را به سرور گیتوی می‌فرستد که ...",
-		"Reliability": "اعتماد‌پذیری مشتریان در Smswithoutborders",
-		"ReadMore": "بیشتر بخوانید"
-	},
-	"FAQ": {
-		"FAQ": "سوالات متداول",
-		"FAQ1": "آیا RelaySMS روی دستگاه من موجود است؟",
-		"faq1": "RelaySMS در حال حاضر برای اندروید در دسترس است. ما در حال گسترش سازگاری به سایر پلتفرم‌ها هستیم.",
-		"FAQ2": "چگونه یک پیام آفلاین ارسال کنم؟",
-		"faq2": "پلتفرمی را که می‌خواهید پیام را به آن ارسال کنید انتخاب کنید و پیام خود را درون برنامه بنویسید. مرکز راهنمایی ما نیز منابع و آموزش‌هایی در مورد چگونگی ارسال پیام‌ها از طریق برنامه ارائه می‌دهد.",
-		"FAQ3": "آیا محدودیتی برای پیام‌های آفلاین وجود دارد؟",
-		"faq3": "هیچ محدودیتی در اندازه و تعداد پیام‌هایی که می‌توانید با برنامه ارسال کنید وجود ندارد.",
-		"FAQ4": "در ورود به حساب خود مشکل دارم. چه باید بکنم؟",
-		"faq4": "مرکز راهنمایی ما منابع و آموزش‌هایی برای ورود به حساب شما ارائه می‌دهد. اگر نتوانستید راه‌حلی پیدا کنید، می‌توانید با تیم پشتیبانی ما در <1>smswithoutborders</1> تماس بگیرید.",
-		"FAQ5": "در استفاده از برنامه با مشکلات فنی مواجه هستم. چگونه می‌توانم کمک بگیرم؟",
-		"faq5": "مرکز راهنمایی ما منابع و راهنمایی‌های عیب‌یابی ارائه می‌دهد. همچنین می‌توانید با تیم پشتیبانی ما در شبکه‌های اجتماعی به [لینک به حساب X] یا با مراجعه به وب‌سایت ما تماس بگیرید."
-	},
-	"Footer": {
-		"ReadMore": "بیشتر بخوانید",
-		"footerbody2": "مشتری بسیار مهم است، مشتری توسط مشتری دنبال می شود. اما اکنون بهترین چیز فوتبال خالص یا دره قبل از دره است.",
-		"footerHeader1": "لینک های سریع",
-		"footerquick1": "وبلاگ",
-		"footerquick3": "مستندات",
-		"footerquick4": "سیاست حفظ حریم خصوصی",
-		"footerHeader2": "اجتماعی",
-		"footersocial1": "گیتهاب",
-		"footersocial2": "فیس بوک",
-		"footersocial3": " X",
-		"footersocial4": "پست",
-		"footerHeader3": "دانلود",
-		"footerdownload1": "اندریود",
-		"footerdownload2": "iOS",
-		"footerdownload3": "Linux",
-		"footerdownload4": "پنجره ها"
-	}
-}
diff --git a/src/locales/fr/translation.json b/src/locales/fr/translation.json
deleted file mode 100644
index 083c7d1..0000000
--- a/src/locales/fr/translation.json
+++ /dev/null
@@ -1,64 +0,0 @@
-{
-	"Landing": {
-		"landingh1": "Continuez à parler avec RelaySMS",
-		"landingh2": "Envoyez des e-mails, des publications et des messages en toute sécurité via SMS.",
-		"Android": "Application Android",
-		"Desktop": "Application de bureau"
-	},
-	"Nav": {
-		"Home": "Accueil",
-		"help": "Aide",
-		"github": "GitHub",
-		"Blog": "Blog"
-	},
-	"Howitworks": {
-		"HowItWorks": "Comment ça marche",
-		"HowItWorksA": "Autorisez RelaySMS à envoyer des e-mails, des publications ou des messages en votre nom",
-		"HowItWorksB": "Rédigez votre e-mail, publication ou message, et il sera automatiquement envoyé en utilisant votre application SMS par défaut.",
-		"HowItWorksC": "Votre contenu atteint les points d'accès RelaySMS et est publié en votre nom.",
-		"HowItWorksD": "Recevez une réponse par SMS indiquant le succès ou l'échec.",
-		"GettingStartedButton": "Commencer"
-	},
-	"Map": {
-		"RelaySMSMap": "RelaySMS est utilisé activement dans plus de 60 pays."
-	},
-	"Blog": {
-		"WhatsNew": "Quoi de neuf sur RelaySMS ?",
-		"Resilience": "Résilience des clients Gateway dans SMSWithoutBorders",
-		"ResilienceD": "Le client Gateway dans SMSWithoutBorders est essentiel pour acheminer les messages des SMS vers les plateformes en ligne. Le client Gateway écoute les messages et les achemine vers le serveur Gateway, qui publie ...",
-		"ReliabilityD": "Le client Gateway dans SMSWithoutBorders est essentiel pour acheminer les messages des SMS vers les plateformes en ligne. Le client Gateway écoute les messages et les achemine vers le serveur Gateway, qui publie ...",
-		"Reliability": "Fiabilité des clients Gateway dans SMSWithoutBorders",
-		"ReadMore": "Lire la suite"
-	},
-	"FAQ": {
-		"FAQ": "FAQ",
-		"FAQ1": "RelaySMS est-il disponible sur mon appareil ?",
-		"faq1": "RelaySMS est actuellement disponible pour Android. Nous travaillons à étendre la compatibilité à d'autres plateformes.",
-		"FAQ2": "Comment envoyer un message hors ligne ?",
-		"faq2": "Choisissez la plateforme à laquelle vous souhaitez envoyer le message et rédigez votre message dans l'application. Notre centre d'aide propose également des ressources et des tutoriels sur l'envoi de messages via l'application.",
-		"FAQ3": "Y a-t-il des limitations sur les messages hors ligne ?",
-		"faq3": "Il n'y a pas de limites sur la taille et le nombre de messages que vous pouvez envoyer avec l'application.",
-		"FAQ4": "J'ai des problèmes pour me connecter à mon compte. Que dois-je faire ?",
-		"faq4": "Notre centre d'aide propose des ressources et des tutoriels sur la connexion à votre compte. Si vous ne trouvez pas de solution, vous pouvez contacter notre équipe de support à <1>smswithoutborders</1>.",
-		"FAQ5": "Je rencontre des difficultés techniques avec l'application. Comment puis-je obtenir de l'aide ?",
-		"faq5": "Notre centre d'aide propose des ressources et des guides de dépannage. Vous pouvez également contacter notre équipe de support sur les réseaux sociaux via [lien vers le compte X] ou en visitant notre site web."
-	},
-	"Footer": {
-		"RelaySMS": "RelaySMS",
-		"footerbody2": "Le client est très important, le client sera suivi par le client. Mais maintenant, la meilleure chose est le football pur ou la vallée avant la vallée.",
-		"footerHeader1": "Liens rapides",
-		"footerquick1": "Blog",
-		"footerquick3": "Documentation",
-		"footerquick4": "Politique de confidentialité",
-		"footerHeader2": "Réseaux sociaux",
-		"footersocial1": "Github",
-		"footersocial2": "Facebook",
-		"footersocial3": "X",
-		"footersocial4": "Mail",
-		"footerHeader3": "Télécharger",
-		"footerdownload1": "Android",
-		"footerdownload2": "iOS",
-		"footerdownload3": "Linux",
-		"footerdownload4": "Windows"
-	}
-}
diff --git a/yarn.lock b/yarn.lock
index e9a777e..c4360ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7858,6 +7858,11 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -9610,7 +9615,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -9888,6 +9893,14 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-scroll@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/react-scroll/-/react-scroll-1.9.0.tgz#2984006e184afd0e4018f837d127edf5fa8f152c"
+  integrity sha512-mamNcaX9Ng+JeSbBu97nWwRhYvL2oba+xR2GxvyXsbDeGP+gkYIKZ+aDMMj/n20TbV9SCWm/H7nyuNTSiXA6yA==
+  dependencies:
+    lodash.throttle "^4.1.1"
+    prop-types "^15.7.2"
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"