feat: add styles to landing page

src/pages/LandingPage/LandingPage.module.css

@@ -1,3 +1,13 @@
 .landing-page {
   height: 100%;
+}
+
+.landing-texts {
+  margin: 30vh 0 4vh;
+}
+
+@media (max-width: 1000px) {
+  .landing-texts {
+    margin-top: 20vh;
+  }
 }

src/pages/LandingPage/LandingPage.tsx

@@ -1,11 +1,12 @@
-import './LandingPage.css'
+import { useNavigate } from 'react-router'
 import { XStack, YStack } from 'tamagui'
-import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
-import NimbusLogo from '../../components/Logos/NimbusLogo'
 import { NodeIcon } from '@status-im/icons'
 import { Button as StatusButton, Text } from '@status-im/components'
+
+import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar'
-import { useNavigate } from 'react-router'
+import NimbusLogo from '../../components/Logos/NimbusLogo'
+import styles from './LandingPage.module.css'
 
 const LandingPage = () => {
   const navigate = useNavigate()
@@ -17,11 +18,11 @@ const LandingPage = () => {
   return (
     <>
       <PageWrapperShadow rightImageSrc="./background-images/landing-page-bg.png" imgHeight="150%">
-        <YStack className="landing-page">
+        <YStack className={styles['landing-page']}>
           <XStack pt={'70px'}>
             <NimbusLogo />
           </XStack>
-          <YStack style={{ width: '100%', margin: '30vh 0 4vh' }} space={'16px'}>
+          <YStack className={styles['landing-texts']} space={'16px'}>
             <Text size={27} weight={'semibold'}>
               Light and performant clients, for all Ethereum validators.
             </Text>
@@ -30,7 +31,6 @@ const LandingPage = () => {
               you wish to run in a completely trustless and decentralized manner.
             </Text>
           </YStack>
-
           <XStack>
             <StatusButton icon={<NodeIcon size={20} />} onPress={getStartedHanlder}>
               Get Started