Changed icons, added links and removed theme.

packages/web/components/templates/landing/LandingFooter.tsx

@@ -2,6 +2,7 @@ import { OmnivoreNameLogo } from '../../elements/images/OmnivoreNameLogo';
 import Link from 'next/link'
 import Image from 'next/image'
 import { Box, HStack } from '../../elements/LayoutPrimitives';
+import { GithubLogo, DiscordLogo, TwitterLogo } from 'phosphor-react'
 
 const containerStyles = {
   padding: '5vw',
@@ -86,23 +87,23 @@ export function LandingFooter(): JSX.Element {
         <Box css={titleStyles}>Everything you read. Safe, organized, and easy to share.</Box>
         <HStack distribution='between' css={socialsContainerStyles}>
           <Box style={socialIconContainerStyles}>
-            <Link passHref href="#">
+            <Link passHref href="https://twitter.com/OmnivoreApp">
               <a>
-                <Image src='/static/media/twitter.png' width={32} height={32} alt='twitter'/>
+                <TwitterLogo width={32} height={32} color='white' />
               </a>
             </Link>
           </Box>
           <Box style={socialIconContainerStyles}>
-            <Link passHref href="#">
+            <Link passHref href="https://github.com/omnivore-app/omnivore">
               <a>
-                <Image src='/static/media/github.png' width={32} height={32} alt='github'/>
+                <GithubLogo width={32} height={32} color='white' />
               </a>
             </Link>
           </Box>
           <Box style={socialIconContainerStyles}>
-            <Link passHref href="#">
+            <Link passHref href="https://discord.gg/h2z5rppzz9">
               <a>
-                <Image src='/static/media/discord.png' width={32} height={32} alt='discord'/>
+                <DiscordLogo width={32} height={32} color='white' />
               </a>
             </Link>
           </Box>
@@ -112,19 +113,19 @@ export function LandingFooter(): JSX.Element {
       <Box css={sectionTwo}>
         <Box css={{height: 215}}>
           <Box style={{marginBottom: 5, ...imageStyles}}>
-            <Link passHref href="#">
+            <Link passHref href="https://omnivore.app/install/ios">
               <a>
                 <Image src='/static/media/appStoreBadge.png' alt='app-store' width={190} height={60} layout='intrinsic'/>
               </a>
             </Link>
           </Box>
-          <Box style={imageStyles}>
+          {/* <Box style={imageStyles}>
             <Link passHref href="#">
               <a>
                 <Image src='/static/media/googlePlayBadge.png' alt='app-store' width={190} height={60} layout='intrinsic'/>
               </a>
             </Link>
-          </Box>
+          </Box> */}
         </Box>
         <Box css={contactStyles}>
           Contact

packages/web/components/templates/landing/LandingHeader.tsx

@@ -1,6 +1,5 @@
 import Link from 'next/link'
 import { Box, SpanBox } from '../../elements/LayoutPrimitives'
-import { theme } from '../../tokens/stitches.config'
 import { OmnivoreNameLogo } from '../../elements/images/OmnivoreNameLogo'
 
 const containerStyles = {
@@ -36,7 +35,7 @@ const textStyles = {
 export function LandingHeader(): JSX.Element {
   return (
     <Box css={containerStyles}>
-      <OmnivoreNameLogo color={theme.colors.omnivoreGray.toString()} href='/login' />
+      <OmnivoreNameLogo color={'#3D3D3D'} href='/login' />
       <Box css={linkStyles}>
         <Box>
           <Link passHref href="/login">

packages/web/components/templates/landing/LandingSection.tsx

@@ -15,7 +15,7 @@ const MainContainer = styled(HStack, {
 
 const titleTextStyles = {
   fontWeight: '700',
-  color: '$omnivoreGray',
+  color: '#3D3D3D',
   lineHeight: '53px',
   '@mdDown': {
     fontSize: 24,
@@ -29,7 +29,7 @@ const titleTextStyles = {
 }
 
 const descriptionTextStyles = {
-  color: '$omnivoreLightGray',
+  color: 'rgb(125, 125, 125)',
 }
 
 const iconContainerStyles = {

packages/web/components/templates/landing/LandingSectionsContainer.tsx

@@ -1,14 +1,16 @@
+import Link from 'next/link'
 import { VStack, Box, SpanBox } from '../../elements/LayoutPrimitives'
 import { CurvedUnderlineIcon } from '../../elements/images/CurvedUnderlineIcon'
 import { Button } from '../../elements/Button'
 import { MagnifyingGlass, Palette, MegaphoneSimple, Binoculars, ArrowRight } from 'phosphor-react'
 import { LandingSection } from './LandingSection'
-import { theme } from '../../tokens/stitches.config'
 
 const buttonStyles = {
   display: 'flex',
   borderRadius: 4,
   px: 30,
+  background: 'rgb(255, 210, 52)',
+  color: '#3D3D3D'
 }
 
 const arrowStyles = {
@@ -19,9 +21,11 @@ const arrowStyles = {
 export function GetStartedButton(): JSX.Element {
   return (
     <Button style='ctaDarkYellow' css={buttonStyles}>
-      <Box>
-        Get Started
-      </Box>
+      <Link passHref href='/login'>
+        <a style={{textDecoration: 'none', color: '#3D3D3D'}}>
+          Get Started
+        </a>
+      </Link>
       <ArrowRight size={18} style={arrowStyles} color='white' fontWeight='700' />
     </Button>
   )
@@ -49,7 +53,7 @@ const titleStyles = {
   fontSize: '24',
   textAlign: 'center',
   lineHeight: '36px',
-  color: '$omnivoreOrange',
+  color: '#FF9B3E',
   '@mdDown': {
     fontSize: 16,
     letterSpacing: '0.02em'
@@ -95,7 +99,7 @@ const callToActionStyles = {
 }
 
 const callToActionText = {
-  color: '$omnivoreGray',
+  color: '#3D3D3D',
   fontWeight: '700',
   fontSize: 64,
   lineHeight: '70px',
@@ -123,7 +127,7 @@ export function LandingSectionsContainer({
   hideThird = false,
   hideFourth = false,
 }: LandingSectionsContainerProps): JSX.Element {
-  const iconColor = theme.colors.omnivoreCtaYellow.toString()
+  const iconColor = 'rgb(255, 210, 52)'
   return (
     <VStack alignment='center' distribution='start' css={containerStyles}>
       <VStack distribution='center'>