feat: new creative ice library screen (#160)

src/assets/images/index.ts

@@ -100,6 +100,7 @@ export const Images = {
     more: require('./share/more.png'),
     sms: require('./share/sms.png'),
     shareProviders: require('./share/share_providers.png'),
+    shareProviders2: require('./share/share_providers2.png'),
   },
   social: {
     tiktok: require('./social/tiktok.png'),
@@ -108,4 +109,33 @@ export const Images = {
     facebook: require('./social/facebook.png'),
     instagram: require('./social/instagram.png'),
   },
+  creativeLibrary: {
+    getStarted: require('./creative_library/get_started.png'),
+    getStartedCarousel: {
+      '01': require('./creative_library/get_started_carousel/01.png'),
+      '02': require('./creative_library/get_started_carousel/02.png'),
+      '03': require('./creative_library/get_started_carousel/03.png'),
+      join: require('./creative_library/get_started_carousel/join.png'),
+      invite: require('./creative_library/get_started_carousel/invite.png'),
+      earn: require('./creative_library/get_started_carousel/earn.png'),
+    },
+    carousel: {
+      iceBackground: require('./creative_library/carousel/ice_background.png'),
+      ellipseBackground: require('./creative_library/carousel/ellipse_background.png'),
+      videosIcon: require('./creative_library/carousel/videos_icon.png'),
+      imagesIcon: require('./creative_library/carousel/images_icon.png'),
+      browserIcon: require('./creative_library/carousel/browser_icon.png'),
+    },
+    socialSection: {
+      blogs: require('./creative_library/social_section/blogs.png'),
+    },
+    promoSection: {
+      webPromo: require('./creative_library/promo_section/web_promo.png'),
+      mobilePromo: require('./creative_library/promo_section/mobile_promo.png'),
+    },
+    practicesSection: {
+      goodPractices: require('./creative_library/practices_section/good_practices.png'),
+      badPractices: require('./creative_library/practices_section/bad_practices.png'),
+    },
+  },
 } as const;

src/assets/svg/CheckMarkIcon.tsx

@@ -0,0 +1,37 @@
+// SPDX-License-Identifier: ice License 1.0
+
+import {COLORS} from '@constants/colors';
+import * as React from 'react';
+import Svg, {ClipPath, Defs, G, Path, Rect, SvgProps} from 'react-native-svg';
+import {rem} from 'rn-units';
+
+export const CheckMarkIcon = ({
+  color = COLORS.shamrock,
+  ...props
+}: SvgProps) => (
+  <Svg
+    width={rem(12)}
+    height={rem(13)}
+    viewBox={'0 0 12 13'}
+    fill="none"
+    {...props}>
+    <G clipPath={'url(#clip0_17120_99382)'}>
+      <Path
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+        fill={color}
+        d="M10.773 3.05553C10.9136 3.19618 10.9926 3.38691 10.9926 3.58578C10.9926 3.78466 10.9136 3.97539 10.773 4.11603L5.15151 9.73753C5.07722 9.81184 4.98902 9.87078 4.89195 9.911C4.79488 9.95121 4.69084 9.97191 4.58576 9.97191C4.48069 9.97191 4.37665 9.95121 4.27957 9.911C4.1825 9.87078 4.0943 9.81184 4.02001 9.73753L1.22701 6.94503C1.15538 6.87585 1.09824 6.79309 1.05894 6.70159C1.01963 6.61008 0.998941 6.51167 0.998075 6.41208C0.99721 6.3125 1.01619 6.21374 1.0539 6.12157C1.09161 6.0294 1.1473 5.94566 1.21772 5.87524C1.28814 5.80482 1.37188 5.74913 1.46405 5.71142C1.55622 5.67371 1.65498 5.65473 1.75456 5.6556C1.85415 5.65646 1.95256 5.67715 2.04407 5.71646C2.13557 5.75576 2.21833 5.8129 2.28751 5.88453L4.58551 8.18253L9.71201 3.05553C9.78166 2.98584 9.86436 2.93055 9.95539 2.89283C10.0464 2.85511 10.144 2.83569 10.2425 2.83569C10.341 2.83569 10.4386 2.85511 10.5296 2.89283C10.6207 2.93055 10.7034 2.98584 10.773 3.05553Z"
+      />
+    </G>
+    <Defs>
+      <ClipPath id={'url(#clip0_17120_99382)'}>
+        <Rect
+          width={rem(12)}
+          height={rem(12)}
+          fill={COLORS.white}
+          transform={'translate(0 0.5)'}
+        />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);

src/assets/svg/NoSymbolIcon.tsx

@@ -0,0 +1,37 @@
+// SPDX-License-Identifier: ice License 1.0
+
+import {COLORS} from '@constants/colors';
+import * as React from 'react';
+import Svg, {ClipPath, Defs, G, Path, Rect, SvgProps} from 'react-native-svg';
+import {rem} from 'rn-units';
+
+export const NoSymbolIcon = ({
+  color = COLORS.attention,
+  ...props
+}: SvgProps) => (
+  <Svg
+    width={rem(12)}
+    height={rem(13)}
+    viewBox={'0 0 12 13'}
+    fill="none"
+    {...props}>
+    <G clipPath={'url(#clip0_17120_99403)'}>
+      <Path
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+        fill={color}
+        d="M2.97383 2.67761L9.8219 9.52568C10.5641 8.58845 10.936 7.41117 10.8669 6.21766C10.7978 5.02416 10.2926 3.89765 9.44721 3.0523C8.60186 2.20695 7.47536 1.70171 6.28185 1.63263C5.08834 1.56355 3.91106 1.93544 2.97383 2.67761ZM9.02617 10.3214L2.1781 3.47334C1.43593 4.41058 1.06403 5.58786 1.13312 6.78136C1.2022 7.97487 1.70744 9.10138 2.55279 9.94672C3.39814 10.7921 4.52465 11.2973 5.71815 11.3664C6.91166 11.4355 8.08894 11.0636 9.02617 10.3214ZM1.75736 2.25687C2.31451 1.69972 2.97595 1.25776 3.7039 0.956235C4.43185 0.654706 5.21207 0.499512 6 0.499512C6.78793 0.499512 7.56815 0.654706 8.2961 0.956235C9.02405 1.25776 9.68549 1.69972 10.2426 2.25687C10.7998 2.81402 11.2417 3.47546 11.5433 4.20341C11.8448 4.93136 12 5.71158 12 6.49951C12 7.28744 11.8448 8.06766 11.5433 8.79561C11.2417 9.52357 10.7998 10.185 10.2426 10.7422C9.11742 11.8674 7.5913 12.4995 6 12.4995C4.4087 12.4995 2.88258 11.8674 1.75736 10.7422C0.632141 9.61693 1.18561e-08 8.09081 0 6.49951C-1.18561e-08 4.90821 0.632141 3.38209 1.75736 2.25687Z"
+      />
+    </G>
+    <Defs>
+      <ClipPath id={'url(#clip0_17120_99403)'}>
+        <Rect
+          width={rem(12)}
+          height={rem(12)}
+          fill={COLORS.white}
+          transform={'translate(0 0.5)'}
+        />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);

src/constants/colors.ts

@@ -51,5 +51,6 @@ export const COLORS = {
   completed: '#B0DEC8',
   koromiko: '#FFBE6C',
   neonCarrot: '#FEA43A',
+  sunshineGold: '#FFC444',
   danube: '#5c7cd4',
 };

src/constants/links.ts

@@ -23,6 +23,7 @@ export const LINKS = {
   TELEGRAM_PROFILE_URL: 'https://t.me/iceblockchain',
   CHANGELOG: 'https://ice.io/changelog',
   ICE_FAQ: 'https://ice.io/faq',
+  ICE_HOMEPAGE: 'https://ice.io',
   BETA_TESTING: 'https://ice.io/beta-testing',
   FACEBOOK_APP: `fb://profile/${ENV.FACEBOOK_PAGE_ID}`,
   FACEBOOK_WEB: 'https://facebook.com/ice.blockchain',
@@ -35,4 +36,15 @@ export const LINKS = {
   TIKTOK_WEB: 'https://www.tiktok.com/@ice.blockchain',
   APP_UPDATE: 'https://ice.io/app-update',
   GITHUB_WEB: 'https://github.com/ice-blockchain',
+  HOW_TO_BOOTS_EARNINGS: 'https://ice.io/how-to-boost-your-earnings',
+  WEB_WIDGET:
+    'https://github.com/ice-blockchain/community-assets/tree/master/website-widget',
+  ANDROID_WIDGET:
+    'https://github.com/ice-blockchain/community-assets/tree/master/android-widget',
+  REACT_NATIVE_WIDGET:
+    'https://github.com/ice-blockchain/community-assets/tree/master/react-native-widget',
+  ICE_ASSETS:
+    'https://www.figma.com/community/file/1256148399031329897/ice-Community-Assets',
+  ICE_VIDEOS:
+    'https://drive.google.com/drive/u/1/folders/1E_3zVZzs2vqUNgUd05qfi6cJ_axjlvQU',
 };

src/navigation/Main.tsx

@@ -18,6 +18,7 @@ import {
 } from '@react-navigation/bottom-tabs';
 import {NavigatorScreenParams} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {CreativeIceLibrary} from '@screens/CreativeIceLibrary';
 import {BalanceHistory} from '@screens/HomeFlow/BalanceHistory';
 import {Home} from '@screens/HomeFlow/Home';
 import {
@@ -101,6 +102,7 @@ export type MainStackParamList = {
     descriptionOffset?: number;
   };
   Staking: undefined;
+  CreativeIceLibrary: undefined;
   ImageView: {
     imageRef: RefObject<Image | Animated.Image>;
     uri: string;
@@ -361,6 +363,10 @@ export function MainNavigator() {
         component={DateSelect}
       />
       <MainStack.Screen name="Staking" component={Staking} />
+      <MainStack.Screen
+        name="CreativeIceLibrary"
+        component={CreativeIceLibrary}
+      />
       <MainStack.Screen
         name="InviteFriend"
         component={InviteFriend}

src/screens/CreativeIceLibrary/components/CarouselSection/index.tsx

@@ -0,0 +1,128 @@
+// SPDX-License-Identifier: ice License 1.0
+
+import {Touchable} from '@components/Touchable';
+import {COLORS} from '@constants/colors';
+import {LINKS} from '@constants/links';
+import {SCREEN_SIDE_OFFSET} from '@constants/styles';
+import {Images} from '@images';
+import {t} from '@translations/i18n';
+import {openLinkWithInAppBrowser} from '@utils/device';
+import {font} from '@utils/styles';
+import React, {useCallback} from 'react';
+import {Image, ImageRequireSource, StyleSheet, Text, View} from 'react-native';
+import {FlatList} from 'react-native-gesture-handler';
+import {rem} from 'rn-units';
+
+type DataType = {
+  topRightBackgroundImage: ImageRequireSource;
+  backgroundColor: string;
+  title: string;
+  description: string;
+  actionText: string;
+  actionLink: string;
+  icon: React.ReactElement;
+};
+
+const data: DataType[] = [
+  {
+    topRightBackgroundImage: Images.creativeLibrary.carousel.iceBackground,
+    backgroundColor: COLORS.primaryDark,
+    title: t('creative_library.carousel.01.title'),
+    description: t('creative_library.carousel.01.description'),
+    actionText: t('creative_library.carousel.01.action'),
+    actionLink: LINKS.ICE_VIDEOS,
+    icon: <Image source={Images.creativeLibrary.carousel.videosIcon} />,
+  },
+  {
+    topRightBackgroundImage: Images.creativeLibrary.carousel.ellipseBackground,
+    backgroundColor: COLORS.primaryLight,
+    title: t('creative_library.carousel.02.title'),
+    description: t('creative_library.carousel.02.description'),
+    actionText: t('creative_library.carousel.02.action'),
+    actionLink: LINKS.ICE_ASSETS,
+    icon: <Image source={Images.creativeLibrary.carousel.imagesIcon} />,
+  },
+  {
+    topRightBackgroundImage: Images.creativeLibrary.carousel.iceBackground,
+    backgroundColor: COLORS.primaryDark,
+    title: t('creative_library.carousel.03.title'),
+    description: t('creative_library.carousel.03.description'),
+    actionText: t('creative_library.carousel.03.action'),
+    actionLink: LINKS.WEB_WIDGET,
+    icon: <Image source={Images.creativeLibrary.carousel.videosIcon} />,
+  },
+];
+
+export function CarouselSection() {
+  const renderItem = useCallback(({item}: {item: DataType}) => {
+    return (
+      <View
+        key={item.title}
+        style={[styles.itemContainer, {backgroundColor: item.backgroundColor}]}>
+        <Image
+          source={item.topRightBackgroundImage}
+          style={styles.topRightBackgroundImage}
+        />
+        {item.icon}
+        <Text style={styles.title}>{item.title}</Text>
+        <Text style={styles.description}>{item.description}</Text>
+        <Touchable
+          style={styles.action}
+          onPress={() => {
+            openLinkWithInAppBrowser({url: item.actionLink});
+          }}>
+          <Text style={styles.actionText}>{item.actionText}</Text>
+        </Touchable>
+      </View>
+    );
+  }, []);
+  return (
+    <FlatList
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+      data={data}
+      renderItem={renderItem}
+    />
+  );
+}
+
+const GAP = rem(12);
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: rem(30),
+  },
+  contentContainer: {
+    paddingLeft: SCREEN_SIDE_OFFSET,
+    paddingRight: SCREEN_SIDE_OFFSET - GAP,
+  },
+  topRightBackgroundImage: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    borderTopRightRadius: rem(16),
+  },
+  itemContainer: {
+    padding: rem(12),
+    borderRadius: rem(16),
+    width: rem(260),
+    marginRight: GAP,
+  },
+  title: {
+    paddingTop: rem(8),
+    ...font(16, 20, 'bold', 'white'),
+  },
+  description: {
+    paddingTop: rem(14),
+    ...font(14, null, 'regular', 'white'),
+  },
+  action: {
+    paddingTop: rem(14),
+  },
+  actionText: {
+    ...font(14, null, 'regular', 'shamrock'),
+    textDecorationLine: 'underline',
+  },
+});

src/screens/CreativeIceLibrary/components/GetStartedSection/components/GetStartedButton/index.tsx

@@ -0,0 +1,65 @@
+// SPDX-License-Identifier: ice License 1.0
+
+import {Touchable} from '@components/Touchable';
+import {COLORS} from '@constants/colors';
+import {SCREEN_SIDE_OFFSET} from '@constants/styles';
+import {BackButtonIcon} from '@svg/BackButtonIcon';
+import {t} from '@translations/i18n';
+import {font} from '@utils/styles';
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import {rem} from 'rn-units';
+
+type Props = {
+  onGetStarted: () => void;
+};
+
+export function GetStartedButton({onGetStarted}: Props) {
+  return (
+    <Touchable style={styles.container} onPress={onGetStarted}>
+      <Text style={styles.text}>
+        {t('creative_library.get_started.get_started')}
+      </Text>
+      <View style={styles.iconContainer}>
+        <BackButtonIcon
+          color={COLORS.white}
+          width={rem(10)}
+          style={styles.icon}
+        />
+      </View>
+    </Touchable>
+  );
+}
+
+const ICON_CONTAINER_SIZE = rem(22);
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'flex-start',
+    marginTop: rem(16),
+    paddingVertical: rem(8),
+    paddingLeft: rem(16),
+    paddingRight: rem(6),
+    borderWidth: rem(1.2),
+    borderRadius: rem(40),
+    borderColor: COLORS.primaryLight,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: SCREEN_SIDE_OFFSET,
+  },
+  text: {
+    ...font(16, 19, 'semibold', 'primaryLight'),
+  },
+  iconContainer: {
+    width: ICON_CONTAINER_SIZE,
+    height: ICON_CONTAINER_SIZE,
+    borderRadius: ICON_CONTAINER_SIZE / 2,
+    backgroundColor: COLORS.primaryLight,
+    marginLeft: rem(16),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon: {
+    transform: [{rotate: '180deg'}],
+  },
+});