V3 update

components/FeatureShowcase.tsx

@@ -4,11 +4,12 @@ import { SizedBox } from './SizedBox'
 import { useWindowSize } from 'react-use'
 import { getPixelValue, theme } from '../styles/theme'
 import { useParallax } from 'react-scroll-parallax'
+import { AutoplayVideo } from './Video'
 
 export type FeatureShowcaseProps = {
   title: string
   description: string
-  imageSrc: string
+  videoSrc: string
   iconSrc: string
   imageOnRight?: boolean
 }
@@ -36,7 +37,7 @@ export function FeatureShowcase(props: FeatureShowcaseProps) {
         </TextSection>
         <SizedBox width={30} height={30} />
         <ImageSection>
-          <Image alt={props.title} src={props.imageSrc} />
+          <Video src={props.videoSrc} />
         </ImageSection>
       </Container>
     )
@@ -46,7 +47,7 @@ export function FeatureShowcase(props: FeatureShowcaseProps) {
     <Container ref={backgroundParallax.ref}>
       <Background />
       <ImageSection>
-        <Image alt={props.title} src={props.imageSrc} />
+        <Video src={props.videoSrc} />
       </ImageSection>
       <SizedBox width={30} />
       <TextSection>
@@ -94,13 +95,14 @@ const Description = styled.p`
 
 const ImageSection = styled.div`
   flex: 2;
+  overflow: hidden;
 `
 
 const TextSection = styled.div`
   flex: 1;
 `
 
-const Image = styled.img`
+const Video = styled(AutoplayVideo)`
   width: 100%;
 `
 

components/Navigation.tsx

@@ -8,6 +8,7 @@ import { ExternalLink } from './ExternalLink'
 
 // TODO: Enable when those sites are updated
 const showBlogLink = false
+const showDocsLink = false
 
 function Navigation() {
   return (
@@ -20,9 +21,11 @@ function Navigation() {
         </Link>
       </LeftSide>
       <RightSide>
-        <ExternalLink href='https://docs.flowser.dev' noUnderline>
-          Docs
-        </ExternalLink>
+        {showDocsLink && (
+          <ExternalLink href='https://docs.flowser.dev' noUnderline>
+            Docs
+          </ExternalLink>
+        )}
         {showBlogLink && (
           <>
             <SizedBox width={theme.spacing.md} />

components/Section.tsx

@@ -14,8 +14,8 @@ export function Section(props: LandingSectionProps) {
     translateY: [10, 0]
   })
   const headerParallax = useParallax<HTMLDivElement>({
-    translateY: [100, -50],
-    opacity: [-0.2, 1.2]
+    translateY: [20, -10],
+    opacity: [0.4, 1.5]
   })
   return (
     <Container ref={containerParallax.ref}>

components/Video.tsx

@@ -0,0 +1,27 @@
+import styled from '@emotion/styled'
+import React, { LegacyRef } from 'react'
+
+type AutoplayVideoProps = React.VideoHTMLAttributes<HTMLVideoElement> & {
+  src: string
+  videoRef?: LegacyRef<HTMLVideoElement>
+}
+
+export function AutoplayVideo(props: AutoplayVideoProps) {
+  const { src, videoRef, ...videoProps } = props
+  return (
+    <Container
+      ref={videoRef}
+      muted={true}
+      autoPlay={true}
+      loop={true}
+      {...videoProps}
+    >
+      <source src={src} type='video/mp4' />
+    </Container>
+  )
+}
+
+const Container = styled.video`
+  border-radius: ${(props) => props.theme.radius.md};
+  object-fit: cover;
+`

layouts/Main.tsx

@@ -7,7 +7,7 @@ type Props = {
   children: ReactElement | ReactElement[]
 }
 
-function MainLayout({ children }: Props) {
+export function MainLayout({ children }: Props) {
   return (
     <Root>
       <Background src='/images/background.png' />
@@ -46,5 +46,3 @@ const Content = styled.div`
     padding: 0 ${(props) => props.theme.spacing.md};
   }
 `
-
-export default MainLayout

pages/404.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Page404 as Page404Component } from 'components'
-import MainLayout from '../layouts/Main'
+import { MainLayout } from '../layouts/Main'
 
 function Page404() {
   return (

pages/_error.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { PageMeta } from '../components/PageMeta'
 
 import styles from '../components/styles.module.css'
-import MainLayout from '../layouts/Main'
+import { MainLayout } from '../layouts/Main'
 
 export default ({ statusCode }) => {
   return (

pages/download.tsx

@@ -0,0 +1,118 @@
+import { MainLayout } from '../layouts/Main'
+import { useGithub } from '../lib/use-github'
+import React, { useEffect, useState } from 'react'
+import { getPlatformName, OsPlatformName } from '../lib/utils'
+import { ExternalLink } from '../components/ExternalLink'
+import { SizedBox } from '../components/SizedBox'
+import { theme } from '../styles/theme'
+import { InlineCode } from '../components/InlineCode'
+import { PrimaryLink } from '../components/PrimaryLink'
+import styled from '@emotion/styled'
+
+function Download() {
+  return (
+    <MainLayout>
+      <Title>Download Flowser desktop app</Title>
+
+      <SizedBox height={theme.spacing.lg} />
+
+      <DownloadOptions />
+    </MainLayout>
+  )
+}
+
+const Title = styled.h1`
+  color: ${(props) => props.theme.color.light};
+  font-size: ${(props) => props.theme.fontSize.lg};
+  font-weight: normal;
+  text-align: center;
+`
+
+function DownloadOptions() {
+  const { latestRelease, winAsset, macArmAsset, macX64Asset } = useGithub()
+  const [platform, setPlatform] = useState<OsPlatformName>('MacOS')
+
+  useEffect(() => {
+    setPlatform(getPlatformName())
+  }, [])
+
+  if (platform === 'Linux') {
+    return (
+      <div>
+        <Notice>🚧 Linux is currently not yet supported. 🚧</Notice>
+        <Notice>
+          If you would benefit from adding Linux support, tell us here:{' '}
+          <ExternalLink href='https://github.com/onflowser/flowser/discussions/142'>
+            github.com/onflowser/flowser/discussions/142
+          </ExternalLink>
+        </Notice>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <InstallMethod>
+        Run with Flow CLI
+        <SizedBox height={theme.spacing.sm} />
+        <InlineCode>flow flowser</InlineCode>
+      </InstallMethod>
+
+      <SizedBox height={theme.spacing.md} />
+      <OrText>or</OrText>
+      <SizedBox height={theme.spacing.md} />
+
+      <InstallMethod>
+        Download directly
+        <SizedBox height={theme.spacing.sm} />
+        {platform === 'Windows' ? (
+          <PrimaryLink href={winAsset?.browser_download_url} download>
+            Download for Windows
+          </PrimaryLink>
+        ) : (
+          <div style={{ display: 'flex' }}>
+            <PrimaryLink href={macArmAsset?.browser_download_url} download>
+              Download for Apple Silicon
+            </PrimaryLink>
+            <SizedBox width={10} />
+            <PrimaryLink href={macX64Asset?.browser_download_url} download>
+              Download for Apple Intel
+            </PrimaryLink>
+          </div>
+        )}
+        <SizedBox height={theme.spacing.md} />
+        <ReleaseLink href={latestRelease?.url}>
+          {latestRelease?.tagName ?? '-'}
+        </ReleaseLink>
+      </InstallMethod>
+    </div>
+  )
+}
+
+const Description = styled.p`
+  color: ${(props) => props.theme.color.grey};
+  font-size: ${(props) => props.theme.fontSize.md};
+  line-height: ${(props) => props.theme.lineHeight.lg};
+`
+
+const Notice = styled(Description)`
+  color: ${(props) => props.theme.color.light};
+`
+
+const InstallMethod = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: ${(props) => props.theme.color.light};
+`
+
+const OrText = styled.div`
+  text-align: center;
+  color: ${(props) => props.theme.color.grey};
+`
+
+const ReleaseLink = styled(ExternalLink)`
+  color: ${(props) => props.theme.color.grey} !important;
+`
+
+export default Download