keep homepage simpler

onejs · Jan 27, 2025 · f9f509a · f9f509a
1 parent 3d9f57f
commit f9f509a
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 68 deletions.
diff --git a/apps/onestack.dev/app/index.tsx b/apps/onestack.dev/app/index.tsx
@@ -125,14 +125,23 @@ export default function HomePage() {
 
         <View theme="yellow" gap="$4" pt="$6">
           <PrettyTextBigger>
-            One aims to make cross-platform React&nbsp;Native as performant and simple as possible.
+            One aims to make cross-platform React&nbsp;Native as performant and simple as possible
+            by letting sync engines like{' '}
+            <Link target="_blank" href="https://zero.rocicorp.dev/">
+              Zero
+            </Link>{' '}
+            do the hard work.
             <br />
             <br />
-            We made{' '}
+            One takes{' '}
             <Link style={{ color: 'var(--color11)' }} href="/docs/faq#why-vite">
               Vite
+            </Link>
+            ,{' '}
+            <Link target="_blank" href="https://vxrn.dev">
+              makes it serve
             </Link>{' '}
-            able to <a href="https://vxrn.dev">serve</a> React Native, then&nbsp;added{' '}
+            React Native, then adds{' '}
             <Link style={{ color: 'var(--color11)' }} href="/docs/routing">
               file-system routing
             </Link>
@@ -152,7 +161,11 @@ export default function HomePage() {
             <Link style={{ color: 'var(--color11)' }} href="/docs/">
               CLI
             </Link>
-            , <a href="https://hono.dev">Hono</a>, and{' '}
+            ,{' '}
+            <Link target="_blank" href="https://hono.dev">
+              Hono
+            </Link>
+            , and a bit{' '}
             <Link style={{ color: 'var(--color11)' }} href="/docs/features">
               more
             </Link>
@@ -171,47 +184,9 @@ export default function HomePage() {
             <Video />
 
             <InfoBoxes />
-
-            <View
-              id="zero"
-              contain="paint layout"
-              className="tinted"
-              br="$10"
-              px="$5"
-              py="$10"
-              mx={'$-5'}
-              gap="$5"
-              $gtSm={{ px: '$9', py: '$8', pb: '$5', mx: '$0' }}
-            >
-              <PrettyTextBiggest $md={{ size: '$10' }} $sm={{ size: '$9' }}>
-                Keeping things simple
-              </PrettyTextBiggest>
-
-              <PrettyTextBigger>
-                Native apps feel better and are easier to write thanks to using client-side
-                databases with sync engines. But to date no JavaScript library has cracked the
-                combination of lightweight, full-featured, easy to host, and feature-rich.
-              </PrettyTextBigger>
-
-              <PrettyTextBigger>
-                We think the time has come for the web to build more responsive experiences with
-                great sync engines, and it doesn't hurt that it makes our framework simpler, apps
-                better, and even our code nicer, at once.
-              </PrettyTextBigger>
-
-              <PrettyTextBigger>
-                We're building primitives to make that work, starting with{' '}
-                <a href="https://zerosync.dev">Zero</a>, who we are working with to create One.{' '}
-                <View tag="span" dsp="inline-flex" m={-2} mr={5} $sm={{ scale: 0.9, y: 5 }}>
-                  <OneBall size={0.7} />
-                </View>
-              </PrettyTextBigger>
-
-              <Spacer />
-            </View>
           </YStack>
 
-          <Spacer />
+          {/* <Spacer /> */}
 
           {/* <EmailSignup />
 
@@ -222,7 +197,6 @@ export default function HomePage() {
               <XStack
                 tag="a"
                 className="text-underline-none"
-                my="$6"
                 gap="$6"
                 ai="center"
                 jc="center"
@@ -260,7 +234,7 @@ export default function HomePage() {
                   </PrettyText>
 
                   <PrettyText o={0.8} cur="inherit" maw={400}>
-                    Check out our small sample app to see a One iOS app in motion. On Testflight.
+                    See a sample app on Testflight.
                   </PrettyText>
                 </YStack>
               </XStack>
@@ -275,8 +249,6 @@ export default function HomePage() {
 
           <Team />
 
-          <Separator my="$8" />
-
           <Footer />
         </View>
       </ContainerSm>

diff --git a/apps/onestack.dev/components/Community.tsx b/apps/onestack.dev/components/Community.tsx
@@ -1,13 +1,15 @@
-import { XStack, YStack } from 'tamagui'
+import { VisuallyHidden, XStack, YStack } from 'tamagui'
 import { SocialLinksRow } from '~/features/site/SocialLinksRow'
 import { PrettyText } from './typography'
 
 export const Community = () => {
   return (
     <YStack group containerType="normal" gap="$8" my="$4">
-      <PrettyText fontFamily="$mono" fontSize="$7" lineHeight="$7" color="$color" ta="center">
-        Community
-      </PrettyText>
+      <VisuallyHidden>
+        <PrettyText fontFamily="$mono" fontSize="$7" lineHeight="$7" color="$color" ta="center">
+          Community
+        </PrettyText>
+      </VisuallyHidden>
 
       <XStack gap="$8" als="center" $xs={{ fd: 'column', ai: 'center', jc: 'center' }}>
         <SocialLinksRow large />

diff --git a/apps/onestack.dev/components/Team.tsx b/apps/onestack.dev/components/Team.tsx
@@ -5,14 +5,11 @@ import { PrettyText } from './typography'
 export const Team = () => {
   return (
     <YStack group containerType="normal" gap="$8" my="$4">
-      <PrettyText fontFamily="$mono" fontSize="$7" lineHeight="$7" color="$color" ta="center">
-        Team
-      </PrettyText>
-
       <PrettyText maw={500} als="center">
-        Hello. We're the creators of <Link href="https://tamagui.dev">Tamagui</Link>. We built One
-        out of our experience at <Link href="https://app.uniswap.org">Uniswap</Link> and creating{' '}
-        <Link href="https://tamagui.dev/takeout">Takeout</Link>.
+        We built One out of our experience building cross-platform apps with{' '}
+        <Link href="https://tamagui.dev">Tamagui</Link>{' '}
+        <Link href="https://tamagui.dev/takeout">Takeout</Link>, and at{' '}
+        <Link href="https://app.uniswap.org">Uniswap</Link>.
       </PrettyText>
 
       {/* <View

diff --git a/apps/onestack.dev/features/site/Link.tsx b/apps/onestack.dev/features/site/Link.tsx
@@ -18,6 +18,11 @@ export const Link = ({ href, replace, asChild, ...props }: LinkProps) => {
       color="inherit"
       fontSize="inherit"
       lineHeight="inherit"
+      textDecorationColor="$color04"
+      hoverStyle={{
+        color: '$color12',
+        textDecorationColor: '$color12',
+      }}
       {...props}
       {...(linkProps as any)}
     />

diff --git a/apps/onestack.dev/features/site/SocialLinksRow.tsx b/apps/onestack.dev/features/site/SocialLinksRow.tsx
@@ -39,23 +39,15 @@ export const SocialLinksRow = ({ large }: { large?: boolean }) => {
         </Container>
       </HoverableLink>
 
-      <HoverableLink
-        target="_blank"
-        href="https://github.com/onejs/one"
-        aria-label="GitHub"
-      >
+      <HoverableLink target="_blank" href="https://github.com/onejs/one" aria-label="GitHub">
         <Container miw={large ? 60 : 45} y={-1}>
           <GithubIcon width={28 * scale} height={28 * scale} aria-hidden="true" />
           <SubTitle dsp={large ? 'flex' : 'none'}>Github</SubTitle>
         </Container>
       </HoverableLink>
 
       <View dsp={large ? 'flex' : 'none'} $group-card-gtXs={{ dsp: 'inline-flex' }}>
-        <HoverableLink
-          target="_blank"
-          href="https://discord.gg/YpUKRqaFtm"
-          aria-label="Discord"
-        >
+        <HoverableLink target="_blank" href="https://discord.gg/YpUKRqaFtm" aria-label="Discord">
           <Container miw={large ? 60 : 45}>
             <DiscordIcon width={25 * scale} height={25 * scale} aria-hidden="true" />
             <SubTitle dsp={large ? 'flex' : 'none'}>Discord</SubTitle>
@@ -88,6 +80,7 @@ const HoverableLink = (props: SizableTextProps & LinkProps) => {
       px="$3"
       o={0.66}
       hoverStyle={{ o: 1 }}
+      textDecorationColor="transparent"
       ai="center"
       jc="center"
       dsp="inline-flex"