Tweak the home page

react-navigation · Dec 4, 2024 · 3ce61b8 · 3ce61b8
1 parent 256ae25
commit 3ce61b8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 13 deletions.
diff --git a/src/pages/home/Splash/index.js b/src/pages/home/Splash/index.js
@@ -5,32 +5,29 @@ import React from 'react';
 import SplashLeftIllustration from './SplashLeftIllustration';
 import SplashRightIllustration from './SplashRightIllustration';
 import styles from './styles.module.css';
-import Spiro from '/img/spiro_header.svg';
 
 export default function Splash() {
   return (
     <section className={styles.wrapper}>
       <div className={styles.container}>
         <SplashLeftIllustration />
         <div className={styles.main}>
-          <div className={styles.spiroContainer}>
-            <Spiro />
-          </div>
           <div className={styles.mainContent}>
             <h1 className={styles.mainText}>React Navigation</h1>
             <h3 className={styles.subText}>
-              Routing and navigation for Expo and React Native apps.
+              Routing and navigation for React Native and Web apps.
             </h3>
             <div className={styles.buttonContainer}>
               <Link
                 to={useBaseUrl('/docs/getting-started')}
-                className={styles.button}
+                className={`${styles.button} ${styles.buttonPrimary}`}
               >
                 Read Docs
               </Link>
               <a
+                target="_blank"
                 href="https://github.com/react-navigation/react-navigation/tree/main/example"
-                className={`${styles.button} ${styles.buttonPrimary}`}
+                className={`${styles.button}`}
               >
                 Try It
               </a>

diff --git a/src/pages/home/Splash/styles.module.css b/src/pages/home/Splash/styles.module.css
@@ -48,12 +48,6 @@
   border-bottom-right-radius: 0.5rem;
 }
 
-.spiroContainer {
-  color: var(--ifm-home-color-background-secondary);
-  position: absolute;
-  z-index: 0;
-}
-
 .mainContent {
   position: relative;
 }
@@ -62,12 +56,14 @@
   font-size: 4.375rem;
   color: var(--ifm-home-color-text);
   font-weight: 900;
+  margin-bottom: 0;
 }
 
 .subText {
   font-size: 1.5rem;
   color: var(--ifm-home-color-text);
   font-weight: 600;
+  margin-top: 0;
 }
 
 .buttonContainer {