import React from 'react'
import {View,Text,StyleSheet,Image, TouchableOpacity} from 'react-native'


export default function AboutPage(){
  const APimage = 'https://storage.googleapis.com/sparta-image.appspot.com/lecture/about.png'
  return (
<View style={styles.container}>
       <Text style={styles.title}>HI! 스파르타코딩 앱개발반에 오신것을 환영합니다!</Text>
     
       <View style={styles.textContainer}>
           <Image style={styles.centerImage} source={{uri:APimage}}
           resizeMode={"cover"}/>
           <Text style={styles.middletext}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
           <Text style={styles.subtext}>꼭 완주하셔서 꼭 여러분 것으로 만들어 가시길 바랍니다</Text>
           <TouchableOpacity style={styles.instaButton}>
               <Text style={styles.instaButtonText}>인스타계정</Text>
           </TouchableOpacity>
        </View>
</View>    
);
}


const styles = StyleSheet.create({
    container: {
      flex:1,
      backgroundColor: `#0000ff`,
      alignItems:"center"
    },
    title: {
      fontSize: 30,
      fontWeight: "700"
      color:"#fff",
      paddingLeft:30,
      paddingTop:100,
      paddingRight:30
    },
    textcontainer: {
      width:300,
      height:500,
      backgroundColor:"#fff",
      marginTop:50,
      borderRadius:30,
      justifyContent:"center",
      alignItems:"center"
    },  
    centerImage: {
      width:150,
      height:150,
      borderRadius:30
    },
    middletext: {
      textAlign:"center",
      fontSize:20,
      fontWeight:"700",
      paddingLeft:22,
      paddingRight:22
    },
    subtext: {
      textAlign:"center",
      fontSize:15,
      fontWeight:"700",
      padding:22
    },
    instaButton: {
      backgroundColor:"orange",
      padding:20,
      borderRadius:15
  },
    instaButtonText: {
      color:"#fff",
      fontSize:15,
      fontWeight:"700"
},
});