-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
62 lines (45 loc) · 1.82 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import { StatusBar } from 'expo-status-bar';
import { Text, View, ImageBackground, TouchableOpacity } from 'react-native';
import {useFonts, Roboto_400Regular, Roboto_700Bold} from '@expo-google-fonts/roboto'
import {BaiJamjuree_700Bold} from '@expo-google-fonts/bai-jamjuree';
import blurBg from './src/assets/bg-blur.png';
import Stripes from './src/assets/stripes.svg';
import NLWLogo from './src/assets/nlw-spacetime-logo.svg';
import { styled } from 'nativewind';
const StyledStripes = styled(Stripes);
export default function App() {
const [hasLoadedFonts] = useFonts({
Roboto_400Regular,
Roboto_700Bold,
BaiJamjuree_700Bold,
})
if(!hasLoadedFonts) {
return null
}
return (
<ImageBackground
source={blurBg}
className="flex-1 relative items-center bg-gray-900 px-8 py-10"
imageStyle={{position: 'absolute', left:'-100%'}}
>
<StyledStripes className='absolute left-2'/>
<View className='flex-1 items-center justify-center gap-6'>
<NLWLogo/>
<View className='space-y-2'>
<Text className='text-center font-title text-2xl leading-tight text-gray-50'>Sua cápsula do tempo</Text>
<Text className='text-center font-body text-base leading-relaxed text-gray-100'>Colecione momentos marcantes da sua jornada e compartilhe (se quiser) com o mundo!</Text>
</View>
<TouchableOpacity
className='rounded-full bg-green-500 px-5 py-3'
activeOpacity={0.7}
>
<Text className='font-alt text-sm uppercase text-black'>
Cadastrar Lembrança
</Text>
</TouchableOpacity>
</View>
<Text className='text-center font-body text-sm text-gray-200 leading-relaxed'>Feito por Matt-duraes</Text>
<StatusBar style="auto" translucent/>
</ImageBackground>
);
}