Updates onboarding pg and menu and begins destinations screen

assets/config/now.json

@@ -2039,7 +2039,7 @@
       "setIdx": 0,
       "setId": 2,
       "iconIdx": 97
-    }
+    },
   ],
   "height": 1024,
   "metadata": { "name": "icomoon" },

components/Card.js

@@ -51,7 +51,8 @@ class Card extends React.Component {
                 <Block flex center>
                   <Text
                     style={{ fontFamily: 'montserrat-regular' }}
-                    size={32}
+                    size={14}
+                    style={styles.cardDetails}
                     color={nowTheme.COLORS.BLACK}
                   >
                     {item.subtitle}
@@ -60,6 +61,58 @@ class Card extends React.Component {
               ) : (
                   <Block />
                 )}
+              {item.popularity ? (
+                <Block flex>
+                  <Text
+                    style={styles.cardDetails}
+                    size={14}
+                    color={nowTheme.COLORS.BLACK}
+                  >
+                    Popularity: {item.popularity}
+                  </Text>
+                </Block>
+              ) : (
+                  <Block />
+                )}
+              {item.cost ? (
+                <Block flex>
+                  <Text
+                    style={styles.cardDetails}
+                    size={14}
+                    color={nowTheme.COLORS.BLACK}
+                  >
+                    Wallet damage: {item.cost}
+                  </Text>
+                </Block>
+              ) : (
+                  <Block />
+                )}
+              {item.bestSeason ? (
+                <Block flex>
+                  <Text
+                    style={styles.cardDetails}
+                    size={14}
+                    color={nowTheme.COLORS.BLACK}
+                  >
+                    Season: {item.bestSeason}
+                  </Text>
+                </Block>
+              ) : (
+                  <Block />
+                )}
+              {item.skillLevel ? (
+                <Block flex>
+                  <Text
+                    style={styles.cardDetails}
+                    size={14}
+                    color={nowTheme.COLORS.BLACK}
+                  >
+                    Skill level: {item.skillLevel}
+                  </Text>
+                </Block>
+              ) : (
+                  <Block />
+                )}
               {item.description ? (
                 <Block flex center>
                   <Text
@@ -126,8 +179,10 @@ const styles = StyleSheet.create({
   },
   cardTitle: {
     paddingHorizontal: 9,
-    paddingTop: 7,
-    paddingBottom: 15
+    fontWeight: 'bold'
+  },
+  cardDetails: {
+    paddingHorizontal: 9,
   },
   cardDescription: {
     padding: theme.SIZES.BASE / 2

components/DrawerItem.js

@@ -20,6 +20,36 @@ class DrawerItem extends React.Component {
             style={{ opacity: 0.5 }}
           />
         );
+      case "Surf Buddies":
+        return (
+          <Icon
+            name="user-run2x"
+            family="NowExtra"
+            size={18}
+            color={focused ? nowTheme.COLORS.PRIMARY : "white"}
+            style={{ opacity: 0.5 }}
+          />
+        );
+      case "Your Trips":
+        return (
+          <Icon
+            name="calendar-602x"
+            family="NowExtra"
+            size={18}
+            color={focused ? nowTheme.COLORS.PRIMARY : "white"}
+            style={{ opacity: 0.5 }}
+          />
+        );
+      case "Destinations":
+        return (
+          <Icon
+            name="world2x"
+            family="NowExtra"
+            size={18}
+            color={focused ? nowTheme.COLORS.PRIMARY : "white"}
+            style={{ opacity: 0.5 }}
+          />
+        );
       case "Components":
         return (
           <Icon

constants/Images.js

@@ -1,10 +1,12 @@
 // local imgs
-const Onboarding = require('../assets/imgs/getPro-bg-1.png');
+// const Onboarding = require('../assets/imgs/getPro-bg-1.png');
+const Onboarding = require('../assets/imgs/surf-background.png');
 const Logo = require('../assets/imgs/now-logo.png');
 const ProfileBackground = require('../assets/imgs/bg5.png');
 const RegisterBackground = require('../assets/imgs/register-bg.png');
 const Pro = require('../assets/imgs/bg.png');
 const NowLogo = require('../assets/imgs/now-logo.png');
+const SurfNomadLogo = require('../assets/imgs/surf-nomad-logo.png');
 const iOSLogo = require('../assets/imgs/ios.png');
 const androidLogo = require('../assets/imgs/android.png');
 const ProfilePicture = require('../assets/imgs/profile-img.jpg');
@@ -35,6 +37,7 @@ export default {
   Pro,
   Products,
   NowLogo: NowLogo,
+  SurfNomadLogo: SurfNomadLogo,
   iOSLogo,
   androidLogo,
   CreativeTimLogo,

constants/destinations.js

@@ -0,0 +1,56 @@
+export default [
+  {
+    title: 'Bali',
+    image: require("../assets/imgs/project13.jpg"),
+    // subtitle: 'Indonesia',
+    bestSeason: 'Nov-Mar',
+    cost: '$',
+    popularity: 'Zood out',
+    description: '',
+    skillLevel: 'All',
+    cta: 'Read more',
+    horizontal: true
+  },
+  {
+    title: 'Taghazout',
+    image: require("../assets/imgs/taghazoutThumbnail.png"),
+    subtitle: '',
+    description: '',
+    cta: 'Read more',
+    horizontal: true
+  },
+  {
+    title: 'Maui',
+    image: require("../assets/imgs/MauiThumbnail.jpeg"),
+    subtitle: '',
+    description: '',
+    cta: 'Read more',
+    horizontal: true
+  },
+  {
+    title: 'Santa Teresa',
+    image: require("../assets/imgs/SantaTeresaThumbnail.jpeg"),
+    bestSeason: 'Jan-Apr',
+    cost: '$$',
+    popularity: 'Moderate',
+    description: '',
+    skillLevel: 'All',
+    subtitle: '',
+    description: '',
+    cta: 'Read more',
+    horizontal: true
+  },
+  {
+    title: 'San Diego',
+    image: require("../assets/imgs/SanDiegoSkyline.jpg"),
+    subtitle: '',
+    bestSeason: 'Nov-Mar',
+    cost: '$$$',
+    popularity: 'Moderate',
+    description: '',
+    skillLevel: 'All',
+    description: '',
+    cta: 'Read more',
+    horizontal: true
+  },
+];

navigation/Menu.js

@@ -26,10 +26,13 @@ function CustomDrawerContent({
 }) {
   const insets = useSafeArea();
   const screens = [
+    "Destinations",
+    "Surf Buddies",
+    "Your Trips",
+    "Profile",
     "Home",
     "Components",
     "Articles",
-    "Profile",
     "Account",
   ];
   return (
@@ -38,7 +41,7 @@ function CustomDrawerContent({
       forceInset={{ top: "always", horizontal: "never" }}
     >
       <Block style={styles.header}>
-        <Image style={styles.logo} source={Images.Logo} />
+        <Image style={styles.logo} source={Images.SurfNomadLogo} />
         <Block right style={styles.headerIcon}>
           <Icon
             name="align-left-22x"

navigation/Screens.js

@@ -11,6 +11,7 @@ import Profile from '../screens/Profile';
 import Register from '../screens/Register';
 import Components from '../screens/Components';
 import Articles from '../screens/Articles';
+import Destinations from '../screens/Destinations';
 import Onboarding from '../screens/Onboarding';
 import SettingsScreen from '../screens/Settings';
 // drawer
@@ -35,6 +36,17 @@ function ComponentsStack(props) {
   );
 }
 
+function DestinationsStack(props) {
+  return (
+    <Stack.Navigator initialRouteName="Destinations" mode="card" headerMode="screen">
+      <Stack.Screen name="Destinations" component={Destinations} options={{
+        header:({ navigation, scene }) => (<Header title="Destinations" navigation={navigation} scene={scene} />),
+        backgroundColor: "#FFFFFF"
+      }}/>
+    </Stack.Navigator>
+  );
+}
+
 function ArticlesStack(props) {
   return (
     <Stack.Navigator initialRouteName="Articles" mode="card" headerMode="screen">
@@ -178,8 +190,9 @@ function AppStack(props) {
           fontWeight: "normal"
         }
       }}
-      initialRouteName="Home"
+      initialRouteName="Destinations"
     >
+      <Drawer.Screen name="Destinations" component={DestinationsStack} />
       <Drawer.Screen name="Home" component={HomeStack} />
       <Drawer.Screen name="Components" component={ComponentsStack} />
       <Drawer.Screen name="Articles" component={ArticlesStack} />

screens/Destinations.js

@@ -0,0 +1,77 @@
+import React from "react";
+import { StyleSheet, Dimensions, ScrollView, Keyboard } from "react-native";
+import { Block, theme, Text } from "galio-framework";
+
+import { Card, Button } from "../components";
+import articles from "../constants/articles";
+import destinations from "../constants/destinations";
+import Input from '../components/Input';
+import Icon from '../components/Icon';
+
+const { width } = Dimensions.get("screen");
+
+class Home extends React.Component {
+  renderArticles = () => {
+    return (
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles.destinations}
+      >
+        <Block flex>
+        <Card item={destinations[0]} horizontal />
+          <Block flex row>
+            <Card
+              item={destinations[1]}
+              style={{ marginRight: theme.SIZES.BASE }}
+            />
+            <Card item={destinations[2]} />
+          </Block>
+          <Card item={destinations[3]} horizontal />
+          <Card item={destinations[4]} full />
+        </Block>
+      </ScrollView>
+    );
+  };
+
+  render() {
+    return (
+      <Block flex center style={styles.home}>
+        <Block center width="80%">
+          {this.renderSearch()}
+        </Block>
+        {this.renderArticles()}
+      </Block>
+    );
+  }
+  renderSearch = () => {
+    const { navigation } = this.props;
+    return (
+      <Input
+        right
+        color="black"
+        style={styles.search}
+        placeholder="Where to?"
+        placeholderTextColor={'#8898AA'}
+        // onFocus={() => {Keyboard.dismiss(); navigation.navigate('Pro')}}
+        iconContent={
+          <Icon size={16} color={theme.COLORS.MUTED} name="zoom-bold2x" family="NowExtra" />
+        }
+      />
+    );
+  };
+}
+
+const styles = StyleSheet.create({
+  home: {
+    width: width
+  },
+  destinations: {
+    width: width - theme.SIZES.BASE * 2,
+    paddingVertical: theme.SIZES.BASE,
+    paddingHorizontal: 2,
+    fontFamily: 'montserrat-regular'
+
+  }
+});
+
+export default Home;