WelcomeScreen.js

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ImageBackground,
  Image,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

const WelcomeScreen = ({ navigation }) => {
  return (
    <ImageBackground
      source={{
        uri: 'https://img.freepik.com/free-vector/abstract-background-vertical-with-colorful-shape_361591-4290.jpg?w=360',
      }}
      style={styles.background}
    >
      <LinearGradient
        colors={['rgba(0,0,0,0.7)', 'rgba(0,0,0,0.9)']}
        style={styles.overlay}
      >
        <View style={styles.branding}>
          <Image
            source={{
              uri: 'https://i.postimg.cc/QCkSBkvW/favpng-agritech-logo-product-agriculture-business.png',
            }}
            style={styles.logo}
          />
          <Text style={styles.brandTitle}>AgriTech</Text>
          <Text style={styles.brandTagline}>
            Enabling AI-powered precision farming
          </Text>
        </View>

        <TouchableOpacity
          style={styles.button}
          onPress={() => navigation.navigate('Auth')}
        >
          <LinearGradient
            colors={['#4CAF50', '#2E7D32']}
            style={styles.buttonGradient}
          >
            <Text style={styles.buttonText}>Get Started</Text>
          </LinearGradient>
        </TouchableOpacity>
      </LinearGradient>
      <View style={styles.footer}>
          <Text style={styles.footerText}>© 2024 AgriTech. All Rights Reserved.</Text>
          <Text style={styles.footerDeveloper}>Developed by Prranith</Text>
        </View>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  background: {
    flex: 1,
    resizeMode: 'cover',
  },
  overlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  branding: {
    alignItems: 'center',
    marginBottom: 50,
  },
  logo: {
    width: 100,
    height: 100,
    resizeMode: 'contain',
    marginBottom: 20,
  },
  brandTitle: {
    fontSize: 40,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 10,
    textShadowColor: '#000',
    textShadowOffset: { width: 2, height: 2 },
    textShadowRadius: 8,
  },
  brandTagline: {
    fontSize: 16,
    color: '#87CEEB',
    fontStyle: 'italic',
    textAlign: 'center',
    marginBottom: 30,
  },
  button: {
    width: '80%',
    borderRadius: 25,
    overflow: 'hidden',
  },
  buttonGradient: {
    paddingVertical: 15,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
    textTransform: 'uppercase',
  },
  footer: {
    position: 'absolute',
    bottom: 60,
    alignItems: 'center',
    marginLeft:50
  },
  footerText: {
    color: 'darkgrey',
    fontSize: 14,
    fontWeight:"bold",
    marginBottom: 5,
  },
  footerDeveloper: {
    color: 'grey',
    fontSize: 14,
    fontWeight: 'thin',
    fontStyle: 'italic',
  },
});

export default WelcomeScreen;