reza added some fucking page

master
Reza_ashrafi 3 years ago
parent c882324bd0
commit 333d31e343
  1. 3
      ios/Podfile
  2. 25
      ios/Podfile.lock
  3. 72
      package-lock.json
  4. 2
      package.json
  5. BIN
      src/assets/video.mp4
  6. 23
      src/components/Video.js
  7. BIN
      src/screens/Home/assets/ar.png
  8. BIN
      src/screens/Home/assets/bookFeatureIcon.png
  9. BIN
      src/screens/Home/assets/packageFeatureIcon.png
  10. BIN
      src/screens/Home/assets/qr.png
  11. BIN
      src/screens/Home/assets/responsive-bg.png
  12. BIN
      src/screens/Home/assets/testFeatureIcon.png
  13. BIN
      src/screens/Home/assets/videoFeatureIcon.png
  14. 47
      src/screens/Home/components/Box.js
  15. 92
      src/screens/Home/components/Features.js
  16. 57
      src/screens/Home/components/Header.js
  17. 61
      src/screens/Home/components/Responsive.js
  18. 89
      src/screens/Home/components/Scroll.js
  19. 59
      src/screens/Home/index.js
  20. 33
      yarn.lock

@ -3,6 +3,9 @@ require_relative '../node_modules/@react-native-community/cli-platform-ios/nativ
platform :ios, '11.0'
pod 'react-native-video/VideoCaching', :path => '../node_modules/react-native-video/react-native-video.podspec'
pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'
install! 'cocoapods', :disable_input_output_paths => true
permissions_path = '../node_modules/react-native-permissions/ios'

@ -1,7 +1,10 @@
PODS:
- boost (1.76.0)
- BVLinearGradient (2.5.6):
- React
- CocoaAsyncSocket (7.6.5)
- DoubleConversion (1.1.6)
- DVAssetLoaderDelegate (0.3.3)
- FBLazyVector (0.66.0)
- FBReactNativeSpec (0.66.0):
- RCT-Folly (= 2021.06.28.00-v2)
@ -286,6 +289,13 @@ PODS:
- React-Core
- react-native-safe-area-context (3.3.2):
- React-Core
- react-native-video/Video (5.2.0):
- React-Core
- react-native-video/VideoCaching (5.2.0):
- DVAssetLoaderDelegate (~> 0.3.1)
- React-Core
- react-native-video/Video
- SPTPersistentCache (~> 1.1.0)
- React-perflogger (0.66.0)
- React-RCTActionSheet (0.66.0):
- React-Core/RCTActionSheetHeaders (= 0.66.0)
@ -362,12 +372,14 @@ PODS:
- React-RCTImage
- RNVectorIcons (8.1.0):
- React-Core
- SPTPersistentCache (1.1.0)
- Yoga (1.14.0)
- YogaKit (1.18.1):
- Yoga (~> 1.14)
DEPENDENCIES:
- boost (from `../node_modules/react-native/third-party-podspecs/boost.podspec`)
- BVLinearGradient (from `../node_modules/react-native-linear-gradient`)
- DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
- FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
- FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`)
@ -411,6 +423,7 @@ DEPENDENCIES:
- react-native-camera (from `../node_modules/react-native-camera`)
- react-native-restart (from `../node_modules/react-native-restart`)
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
- react-native-video/VideoCaching (from `../node_modules/react-native-video/react-native-video.podspec`)
- React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
- React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
- React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@ -433,6 +446,7 @@ DEPENDENCIES:
SPEC REPOS:
trunk:
- CocoaAsyncSocket
- DVAssetLoaderDelegate
- Flipper
- Flipper-Boost-iOSX
- Flipper-DoubleConversion
@ -445,11 +459,14 @@ SPEC REPOS:
- fmt
- libevent
- OpenSSL-Universal
- SPTPersistentCache
- YogaKit
EXTERNAL SOURCES:
boost:
:podspec: "../node_modules/react-native/third-party-podspecs/boost.podspec"
BVLinearGradient:
:path: "../node_modules/react-native-linear-gradient"
DoubleConversion:
:podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
FBLazyVector:
@ -490,6 +507,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native-restart"
react-native-safe-area-context:
:path: "../node_modules/react-native-safe-area-context"
react-native-video:
:path: "../node_modules/react-native-video/react-native-video.podspec"
React-perflogger:
:path: "../node_modules/react-native/ReactCommon/reactperflogger"
React-RCTActionSheet:
@ -529,8 +548,10 @@ EXTERNAL SOURCES:
SPEC CHECKSUMS:
boost: a7c83b31436843459a1961bfd74b96033dc77234
BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
DVAssetLoaderDelegate: 0caec20e4e08b8560b691131539e9180024d4bce
FBLazyVector: 6816ca39e1cc8beffd2a96783f518296789d1c48
FBReactNativeSpec: 3b1e86618e902743fde35b40cf9ebd100fd655b7
Flipper: 30e8eeeed6abdc98edaf32af0cda2f198be4b733
@ -562,6 +583,7 @@ SPEC CHECKSUMS:
react-native-camera: 3eae183c1d111103963f3dd913b65d01aef8110f
react-native-restart: 733a51ad137f15b0f8dc34c4082e55af7da00979
react-native-safe-area-context: 584dc04881deb49474363f3be89e4ca0e854c057
react-native-video: a4c2635d0802f983594b7057e1bce8f442f0ad28
React-perflogger: 1f554c2b684e2f484f9edcdfdaeedab039fbaca8
React-RCTActionSheet: 610d5a5d71ab4808734782c8bca6a12ec3563672
React-RCTAnimation: ec6ed97370ace32724c253f29f0586cafcab8126
@ -579,9 +601,10 @@ SPEC CHECKSUMS:
RNPermissions: 4b54095940aea8c03fa3e6c92d4ac3647b31ed4e
RNScreens: 6e1ea5787989f92b0671049b808aef64fa1ef98c
RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
SPTPersistentCache: df36ea46762d7cf026502bbb86a8b79d0080dff4
Yoga: c11abbf5809216c91fcd62f5571078b83d9b6720
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
PODFILE CHECKSUM: e55ea82ad3c285f70b72f1f6397d523c03649710
PODFILE CHECKSUM: 8f8e2fb6d0c245d037fd4a19edfed1aa27be1bc6
COCOAPODS: 1.11.2

72
package-lock.json generated

@ -20,6 +20,7 @@
"react-native-awesome-alerts": "^1.5.2",
"react-native-camera": "^4.2.1",
"react-native-device-info": "^8.4.5",
"react-native-linear-gradient": "^2.5.6",
"react-native-paper": "^4.9.2",
"react-native-permissions": "^3.1.0",
"react-native-qrcode-scanner": "^1.5.4",
@ -29,6 +30,7 @@
"react-native-select-dropdown": "^1.2.0",
"react-native-swiper-flatlist": "^3.0.15",
"react-native-vector-icons": "^8.1.0",
"react-native-video": "^5.2.0",
"react-redux": "^7.2.5",
"redux": "^4.1.1",
"redux-logger": "^3.0.6",
@ -4345,6 +4347,11 @@
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.893.tgz",
"integrity": "sha512-ChtwF7qB03INq1SyMpue08wc6cve+ktj2UC/Y7se9vB+JryfzziJeYwsgb8jLaCA5GMkHCdn5M62PfSMWhifZg=="
},
"node_modules/eme-encryption-scheme-polyfill": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.0.3.tgz",
"integrity": "sha512-44CNFMsqzHdKHrzWxlS7xZ8KUHn5XutBqpmCuWzNIynmAyFInHrrD3ozv/RvK9ZhgV6QY6Easx8EWAmxteNodg=="
},
"node_modules/emittery": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
@ -7851,6 +7858,11 @@
"node": ">=4.0"
}
},
"node_modules/keymirror": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/keymirror/-/keymirror-0.1.1.tgz",
"integrity": "sha1-kYiJ6hP40KQufFVyUO7nE63JXDU="
},
"node_modules/kind-of": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@ -10178,6 +10190,14 @@
"react-native": ">=0.42.0"
}
},
"node_modules/react-native-linear-gradient": {
"version": "2.5.6",
"resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.5.6.tgz",
"integrity": "sha512-HDwEaXcQIuXXCV70O+bK1rizFong3wj+5Q/jSyifKFLg0VWF95xh8XQgfzXwtq0NggL9vNjPKXa016KuFu+VFg==",
"peerDependencies": {
"react-native": ">=0.55"
}
},
"node_modules/react-native-paper": {
"version": "4.9.2",
"resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.9.2.tgz",
@ -10355,6 +10375,16 @@
"node": ">=10"
}
},
"node_modules/react-native-video": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-native-video/-/react-native-video-5.2.0.tgz",
"integrity": "sha512-5SK1lxyzrCkZF+WuxUxLR1Pt65E0rsWB1w1GrGxSLdC9zWYBumcmuHl+wPJ7UQvznjaH2Ze7uU1R3arejI7+WQ==",
"dependencies": {
"keymirror": "^0.1.1",
"prop-types": "^15.7.2",
"shaka-player": "^2.5.9"
}
},
"node_modules/react-native/node_modules/@jest/types": {
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
@ -11188,6 +11218,14 @@
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
},
"node_modules/shaka-player": {
"version": "2.5.23",
"resolved": "https://registry.npmjs.org/shaka-player/-/shaka-player-2.5.23.tgz",
"integrity": "sha512-3MC9k0OXJGw8AZ4n/ZNCZS2yDxx+3as5KgH6Tx4Q5TRboTBBCu6dYPI5vp1DxKeyU12MBN1Zcbs7AKzXv2EnCg==",
"dependencies": {
"eme-encryption-scheme-polyfill": "^2.0.1"
}
},
"node_modules/shallow-clone": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
@ -15984,6 +16022,11 @@
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.893.tgz",
"integrity": "sha512-ChtwF7qB03INq1SyMpue08wc6cve+ktj2UC/Y7se9vB+JryfzziJeYwsgb8jLaCA5GMkHCdn5M62PfSMWhifZg=="
},
"eme-encryption-scheme-polyfill": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.0.3.tgz",
"integrity": "sha512-44CNFMsqzHdKHrzWxlS7xZ8KUHn5XutBqpmCuWzNIynmAyFInHrrD3ozv/RvK9ZhgV6QY6Easx8EWAmxteNodg=="
},
"emittery": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
@ -18641,6 +18684,11 @@
"object.assign": "^4.1.2"
}
},
"keymirror": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/keymirror/-/keymirror-0.1.1.tgz",
"integrity": "sha1-kYiJ6hP40KQufFVyUO7nE63JXDU="
},
"kind-of": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@ -20566,6 +20614,12 @@
"integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==",
"requires": {}
},
"react-native-linear-gradient": {
"version": "2.5.6",
"resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.5.6.tgz",
"integrity": "sha512-HDwEaXcQIuXXCV70O+bK1rizFong3wj+5Q/jSyifKFLg0VWF95xh8XQgfzXwtq0NggL9vNjPKXa016KuFu+VFg==",
"requires": {}
},
"react-native-paper": {
"version": "4.9.2",
"resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.9.2.tgz",
@ -20692,6 +20746,16 @@
}
}
},
"react-native-video": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-native-video/-/react-native-video-5.2.0.tgz",
"integrity": "sha512-5SK1lxyzrCkZF+WuxUxLR1Pt65E0rsWB1w1GrGxSLdC9zWYBumcmuHl+wPJ7UQvznjaH2Ze7uU1R3arejI7+WQ==",
"requires": {
"keymirror": "^0.1.1",
"prop-types": "^15.7.2",
"shaka-player": "^2.5.9"
}
},
"react-redux": {
"version": "7.2.5",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.5.tgz",
@ -21270,6 +21334,14 @@
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
},
"shaka-player": {
"version": "2.5.23",
"resolved": "https://registry.npmjs.org/shaka-player/-/shaka-player-2.5.23.tgz",
"integrity": "sha512-3MC9k0OXJGw8AZ4n/ZNCZS2yDxx+3as5KgH6Tx4Q5TRboTBBCu6dYPI5vp1DxKeyU12MBN1Zcbs7AKzXv2EnCg==",
"requires": {
"eme-encryption-scheme-polyfill": "^2.0.1"
}
},
"shallow-clone": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",

@ -22,6 +22,7 @@
"react-native-awesome-alerts": "^1.5.2",
"react-native-camera": "^4.2.1",
"react-native-device-info": "^8.4.5",
"react-native-linear-gradient": "^2.5.6",
"react-native-paper": "^4.9.2",
"react-native-permissions": "^3.1.0",
"react-native-qrcode-scanner": "^1.5.4",
@ -31,6 +32,7 @@
"react-native-select-dropdown": "^1.2.0",
"react-native-swiper-flatlist": "^3.0.15",
"react-native-vector-icons": "^8.1.0",
"react-native-video": "^5.2.0",
"react-redux": "^7.2.5",
"redux": "^4.1.1",
"redux-logger": "^3.0.6",

Binary file not shown.

@ -0,0 +1,23 @@
import {StyleSheet} from 'react-native';
import Video from 'react-native-video';
import file from '../assets/video.mp4';
// Within your render function, assuming you have a file called
// "background.mp4" in your project. You can include multiple videos
// on a single screen if you like.
import React from 'react';
export default function CustomVideo() {
return (
<Video
source={file} // Can be a URL or a local file.
ref={ref => {
this.player = ref;
}} // Store reference
onBuffer={this.onBuffer} // Callback when remote video is buffering
onError={this.videoError} // Callback when video cannot be loaded
style={{width: '100%', height: '100%', borderRadius : 10}}
controls
/>
);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 780 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 800 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 956 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 853 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 591 B

@ -0,0 +1,47 @@
import React from 'react';
import {View, Text, Dimensions, Image, TouchableOpacity} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import {connect} from 'react-redux';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default function Box({
borderColor,
backgroundColor,
title,
text,
icon,
titleColor,
textColor,
}) {
return (
<TouchableOpacity
style={[
tw.style('w-full flex flex-row justify-between rounded-md p-3 mt-6'),
{
borderWidth: 1,
borderColor: borderColor,
backgroundColor: backgroundColor,
},
]}>
<Image source={icon} style={{width: 30, height: 30, margin : 4}} />
<View style={tw.style('flex flex-col items-start flex-1 ml-2')}>
<Text
style={[
tw.style('fontt-bold mb-1'),
{fontSize: width / 28, color: titleColor},
]}>
{title}
</Text>
<Text
style={[
tw.style('font-light text-left'),
{fontSize: width / 34, color: textColor},
]}>
{text}
</Text>
</View>
</TouchableOpacity>
);
}

@ -0,0 +1,92 @@
import React from 'react';
import {View, Text, Image, Dimensions} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import {connect} from 'react-redux';
import bookFeatureIcon from '../assets/bookFeatureIcon.png';
import packageFeatureIcon from '../assets/packageFeatureIcon.png';
import testFeatureIcon from '../assets/testFeatureIcon.png';
import videoFeatureIcon from '../assets/videoFeatureIcon.png';
const width = Dimensions.get('window').width;
function Features({features}) {
return (
<View style={tw.style('w-full flex flex-row flex-wrap px-4')}>
{features.map((feature, index) => (
<Feature feature={feature} key={index} />
))}
</View>
);
}
const Feature = ({feature}) => {
return (
<View style={tw.style('flex flex-col w-1/2 items-start mb-5 pr-4')}>
<View
style={[
tw.style('rounded-md flex justify-center items-center'),
{
backgroundColor: feature.backgroundColor,
width: width / 7 + 10,
height: width / 7 + 10,
},
]}>
<Image source={feature.icon} style={[{width: 40, height: 35}]} />
</View>
<Text
style={[
tw.style('font-semibold mt-3'),
{color: feature.color, fontSize: width / 29},
]}>
{feature.title}
</Text>
<Text
style={[
tw.style('font-light mt-1 text-left'),
{color: '#333333', fontSize: width / 36},
]}>
{feature.text}
</Text>
</View>
);
};
const mapStateToProps = state => ({
// features: state.publicApi.home?.features,
});
export default connect(mapStateToProps, {})(Features);
Features.defaultProps = {
features: [
{
icon: bookFeatureIcon,
backgroundColor: '#FFFDC4',
color: '#C0C700',
title: 'کتابهای تعاملی',
text: 'قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نماید',
},
{
icon: videoFeatureIcon,
backgroundColor: '#A1DDFF',
color: '#196EC0',
title: '',
title: 'ویدئوهای مربوط به هر درس',
text: 'انتخاب رنگ در حوزه طراحی کار بسیار عجیبی است و کاربران همه روزه با آن دسته پنجه نرم می کنند',
},
{
icon: testFeatureIcon,
backgroundColor: '#C4FFF7',
color: '#06A38E',
title: 'آزمون ',
text: 'این پلتفرم می تواند تاریخ جشن تولد خود شما، دوستان شما و حتی خانواده شما را به شما یادآوری نمایید',
},
{
icon: packageFeatureIcon,
backgroundColor: '#FFC4EB',
color: '#930362',
title: 'پکیج های آموزشی ',
text: 'همه پایه های تحصیلی باید توسط کاربران انتخاب شود تا به آنها اینکار را یادآوری نماید',
},
],
};

@ -0,0 +1,57 @@
import React from 'react';
import {View, Text, Dimensions} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import tw from 'tailwind-react-native-classnames';
import {connect} from 'react-redux';
import Video from '../../../components/Video';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default function Header() {
return (
<View
style={[tw.style('w-full px-2 relative'), {marginBottom: height / 6.5}]}>
<LinearGradient
start={{x: 0.0, y: 0.0}}
end={{x: 1.0, y: 1.0}}
locations={[0, 0.5, 0.9, 1]}
colors={['#93B0FF35', '#B7C7F285', '#43CFE335', '#E2ECE995']}
style={[
tw.style('w-full rounded-md flex justify-center items-center'),
{height: height / 2.7},
]}>
<Text
style={[
tw.style('font-bold text-center'),
{
fontSize: width / 20,
color: '#08345F',
transform: [{translateY: -40}],
},
]}>
{'یادگیری با طعم لذت' +
'\n' +
'از اول تا یازدهم در کنارتونیم' +
'\n' +
'یادگیری جذاب و تعاملی'}
</Text>
</LinearGradient>
<View
style={[
tw.style(
'w-full overflow-hidden rounded-md absolute bottom-0 left-0 px-2',
),
{
height: height / 3.5,
transform: [
{translateY: height / 8.4},
{translateX: -8},
],
},
]}>
<Video />
</View>
</View>
);
}

@ -0,0 +1,61 @@
import React from 'react';
import {View, Text, Dimensions, ImageBackground} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import {connect} from 'react-redux';
import bgImage from '../assets/responsive-bg.png';
import _ from 'lodash';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default function Resposive({}) {
return (
<View style={tw.style('w-full px-4')}>
<ImageBackground
source={bgImage}
resizeMode="cover"
style={tw.style('w-full flex-1 flex flex-col items-center mt-5 pb-10')}>
<Text
style={[
tw.style('font-bold text-center'),
{fontSize: width / 25, color: '#08345F'},
]}>
{_.join(
[
'از طریق موبایل یا کامپیوتر میتونی',
'به محتوای دیجیتال کتابها به راحتی',
' دسترسی داشته باشی',
],
'\n',
)}
</Text>
<View style={[tw.style('relative w-full mt-3'), {height: height / 3}]}>
<View
style={[
tw.style('rounded-md absolute right-0 bottom-0'),
{
minWidth: '85%',
height: height / 3.5,
backgroundColor: '#E3E3E3',
},
]}></View>
<View
style={[
tw.style('rounded-md absolute bottom-0 left-0'),
{minWidth: '20%', height: height / 5, backgroundColor: '#EEEEEE'},
]}></View>
</View>
<View style={[tw.style('flex flex-row justify-center')]}>
<Text
style={[
tw.style('font-semibold text-center px-2 mt-3'),
{fontSize: width / 28, color: '#08345F'},
]}>
هر نفسی که فرو می بریم، مرگی را که مدام به ما دست اندازی میکند پس
میزند... در نهایت این مرگ است که{' '}
</Text>
</View>
</ImageBackground>
</View>
);
}

@ -0,0 +1,89 @@
import React from 'react';
import {
View,
Image,
Dimensions,
ScrollView,
TouchableOpacity,
} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import {connect} from 'react-redux';
import olum1Image from '../assets/olum1.png';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
function Scroll({products}) {
return (
<ScrollView horizontal={true}>
<View
style={[
tw.style('w-full flex flex-col flex-wrap pl-3 justify-between mt-3'),
{height: height / 2.7},
]}>
{products.map((product, index) => (
<Product
product={product}
key={index}
index={Number(index)}
/>
))}
</View>
</ScrollView>
);
}
const Product = ({product, index, navigation}) => {
return (
<TouchableOpacity
style={[
tw.style('rounded-md mx-1 overflow-hidden rounded-md'),
{
width: index === 0 ? height / 4.5 : height / 9,
height: index === 0 ? '100%' : '48%',
},
]}
onPress={() => navigation.navigate('Product')}
>
<Image
source={product.imageUrl}
style={{width: '100%', height: '100%'}}
/>
</TouchableOpacity>
);
};
const mapStateToProps = state => ({
// features: state.publicApi.home?.features,
});
export default connect(mapStateToProps, {})(Scroll);
Scroll.defaultProps = {
products: [
{
imageUrl: olum1Image,
},
{
imageUrl: olum1Image,
},
{
imageUrl: olum1Image,
},
{
imageUrl: olum1Image,
},
{
imageUrl: olum1Image,
},
{
imageUrl: olum1Image,
},
{
imageUrl: olum1Image,
},
{
imageUrl: olum1Image,
},
],
};

@ -1,14 +1,50 @@
import React from "react";
import { View, StyleSheet, Dimensions, ScrollView } from "react-native";
import React from 'react';
import {View, StyleSheet, Dimensions, ScrollView} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import Features from './components/Features';
import Scroll from './components/Scroll';
import Header from './components/Header';
import Box from './components/Box';
import Responsive from './components/Responsive';
import qrIcon from './assets/qr.png';
import arIcon from './assets/ar.png';
// Within your render function
function Home(props) {
return (
<ScrollView contentContainerStyle={styles.contentContainerStyle} style={styles.container}>
<View style={tw.style('w-full h-screen flex flex-col items-center justify-center')}>
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={styles.container}>
<View
style={tw.style(
'w-full h-screen flex flex-col items-center justify-center',
)}>
<Header />
<Features />
<Scroll />
<View style={tw.style('w-full px-4')}>
<Box
backgroundColor="#E6F2FF"
textColor="#00366B"
titleColor="#1072DC"
borderColor="#196EC044"
text="با استفاده از این تکنولوژی شما پس از نصب اپلیکیشن ما و گرفتن گوشیتون روی محتوای ویدئویی کتاب فیلم رو داخل گوشیتون ببینید"
title="استفاده از تکنولوژی واقعیت افزوده"
icon={arIcon}
/>
<Box
backgroundColor="#E9FFE6"
textColor="#0B5900"
titleColor="#118A00"
borderColor="#118A0044"
title="محتوای قابل دریافت باحال و جذاب"
text="تقریبا بالا گوشه هر صفحه از کتاب ما یک کد
کیو آر براتون گذاشتیم که با اسکن کد شما میتونید محتویات ضمیمه شده اون رو ببینید"
icon={qrIcon}
/>
</View>
<Responsive />
</View>
</ScrollView>
);
@ -17,15 +53,16 @@ function Home(props) {
// Later on in your styles..
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 50
paddingBottom: 50,
},
container: {
width: Dimensions.get("window").width,
backgroundColor: "white",
flexDirection: "column",
width: Dimensions.get('window').width,
backgroundColor: 'white',
flexDirection: 'column',
paddingVertical: 5,
paddingHorizontal : 5
}
paddingHorizontal: 0,
direction: 'rtl',
},
});
export default Home;

@ -2766,6 +2766,11 @@
"resolved" "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.893.tgz"
"version" "1.3.893"
"eme-encryption-scheme-polyfill@^2.0.1":
"integrity" "sha512-44CNFMsqzHdKHrzWxlS7xZ8KUHn5XutBqpmCuWzNIynmAyFInHrrD3ozv/RvK9ZhgV6QY6Easx8EWAmxteNodg=="
"resolved" "https://registry.npmjs.org/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.0.3.tgz"
"version" "2.0.3"
"emittery@^0.8.1":
"integrity" "sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg=="
"resolved" "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz"
@ -4789,6 +4794,11 @@
"array-includes" "^3.1.3"
"object.assign" "^4.1.2"
"keymirror@^0.1.1":
"integrity" "sha1-kYiJ6hP40KQufFVyUO7nE63JXDU="
"resolved" "https://registry.npmjs.org/keymirror/-/keymirror-0.1.1.tgz"
"version" "0.1.1"
"kind-of@^3.0.2":
"integrity" "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ="
"resolved" "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz"
@ -6149,6 +6159,11 @@
"resolved" "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz"
"version" "1.3.1"
"react-native-linear-gradient@^2.5.6":
"integrity" "sha512-HDwEaXcQIuXXCV70O+bK1rizFong3wj+5Q/jSyifKFLg0VWF95xh8XQgfzXwtq0NggL9vNjPKXa016KuFu+VFg=="
"resolved" "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.5.6.tgz"
"version" "2.5.6"
"react-native-paper@^4.9.2":
"integrity" "sha512-J7FRsd0YblQawtuj9I46F//apZHadsCKk6jWpc6njFTYdgUeCdkR8KgEto7cp2WxbcGNELx7KGwPQ4zAgX746A=="
"resolved" "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.9.2.tgz"
@ -6218,7 +6233,16 @@
"prop-types" "^15.7.2"
"yargs" "^16.1.1"
"react-native@*", "react-native@^0.0.0-0 || ^0.60.6 || ^0.61.5 || ^0.62.2 || ^0.63.2 || ^0.64.0 || ^0.65.0 || ^0.66.0 || 1000.0.0", "react-native@>=0.42.0", "react-native@>=0.59", "react-native@>=0.59.0", "react-native@>=0.60.0", "react-native@>=0.63.0", "react-native@>=0.63.3", "react-native@0.66.0":
"react-native-video@^5.2.0":
"integrity" "sha512-5SK1lxyzrCkZF+WuxUxLR1Pt65E0rsWB1w1GrGxSLdC9zWYBumcmuHl+wPJ7UQvznjaH2Ze7uU1R3arejI7+WQ=="
"resolved" "https://registry.npmjs.org/react-native-video/-/react-native-video-5.2.0.tgz"
"version" "5.2.0"
dependencies:
"keymirror" "^0.1.1"
"prop-types" "^15.7.2"
"shaka-player" "^2.5.9"
"react-native@*", "react-native@^0.0.0-0 || ^0.60.6 || ^0.61.5 || ^0.62.2 || ^0.63.2 || ^0.64.0 || ^0.65.0 || ^0.66.0 || 1000.0.0", "react-native@>=0.42.0", "react-native@>=0.55", "react-native@>=0.59", "react-native@>=0.59.0", "react-native@>=0.60.0", "react-native@>=0.63.0", "react-native@>=0.63.3", "react-native@0.66.0":
"integrity" "sha512-m26TKwzsfHVdZ1hDG+7mZ4M4ftxFFZrhtiT0OXuwfBzmNtB3xhsJtYszPeizw33c9YNp8rvehKT3c4ldDCW6kA=="
"resolved" "https://registry.npmjs.org/react-native/-/react-native-0.66.0.tgz"
"version" "0.66.0"
@ -6715,6 +6739,13 @@
"resolved" "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz"
"version" "1.1.1"
"shaka-player@^2.5.9":
"integrity" "sha512-3MC9k0OXJGw8AZ4n/ZNCZS2yDxx+3as5KgH6Tx4Q5TRboTBBCu6dYPI5vp1DxKeyU12MBN1Zcbs7AKzXv2EnCg=="
"resolved" "https://registry.npmjs.org/shaka-player/-/shaka-player-2.5.23.tgz"
"version" "2.5.23"
dependencies:
"eme-encryption-scheme-polyfill" "^2.0.1"
"shallow-clone@^3.0.0":
"integrity" "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA=="
"resolved" "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz"

Loading…
Cancel
Save