From ae18e91f523d2608a699fdd9550909d8691026c5 Mon Sep 17 00:00:00 2001
From: Yana <yanok87@users.noreply.github.com>
Date: Mon, 4 Nov 2024 14:58:36 +0700
Subject: [PATCH] add mobile styles

---
 documentation/docs/components/landing-page.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/documentation/docs/components/landing-page.tsx b/documentation/docs/components/landing-page.tsx
index 514441105d..02b23d9575 100644
--- a/documentation/docs/components/landing-page.tsx
+++ b/documentation/docs/components/landing-page.tsx
@@ -86,17 +86,24 @@ export const LandingPage = () => {
             }}
           >
             <Link href={square.href} target="_blank" rel="noopener noreferrer">
-              <Box display={"flex"} gap={{ xs: 3, xl: 4 }} height={"100%"}>
+              <Box
+                display={"flex"}
+                gap={{ xs: 3, xl: 4 }}
+                height={"100%"}
+                flexDirection={{ xs: "column", sm: "row" }}
+                alignItems={{ xs: "center" }}
+              >
                 <Image
                   src={square.icon}
                   alt={square.text}
-                  width={isDesktop ? 180 : isTablet ? 140 : 180}
+                  width={isDesktop ? 180 : isTablet ? 120 : 180}
                   height={isDesktop ? 134 : isTablet ? 90 : 134}
                 />
                 <Box
                   display={"flex"}
                   flexDirection={"column"}
                   justifyContent={"space-between"}
+                  alignItems={{ xs: "center", sm: "flex-start" }}
                   flexGrow={1}
                   height={"100%"}
                 >
@@ -106,6 +113,7 @@ export const LandingPage = () => {
 
                   <Typography
                     variant="body1"
+                    textAlign={{ xs: "center", sm: "left" }}
                     sx={{
                       color: "#909195",
                       display: {