68 lines
2.2 KiB

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',
)}>
<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>
);
}
// Later on in your styles..
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 50,
},
container: {
width: Dimensions.get('window').width,
backgroundColor: 'white',
flexDirection: 'column',
paddingVertical: 5,
paddingHorizontal: 0,
direction: 'rtl',
},
});
export default Home;