Login Screen

struct LoginView: View {
    
    @Environment(\.colorScheme) var colorScheme
    
    var body: some View {
        GeometryReader { geo in
        ZStack(alignment: .bottom){
            
            //background Image
                Image("IMG_1027_Original")
                    .resizable()
                    .offset(y: -100)
                    .aspectRatio (contentMode: .fill)
                    .frame(width: geo.size.width, height: geo.size.height)
            }
            
            //Gradient Masking
            .mask{
                Rectangle()
                    .fill(LinearGradient(
                        colors: [.gray, .gray, .gray, .gray, .gray.opacity(1.0), .gray.opacity(0.7), .gray.opacity(0.3), .clear, .clear
                                ],
                        startPoint: .top,
                        endPoint: .bottom))
            }
            .ignoresSafeArea()
            
            VStack(alignment: .leading){
                Spacer()
                //Tagline
                Text("Discover New York City! Beyond Limits!")
                    .font(.title).bold()
                
                // Sign Up with Apple button
                Button(action: {
                    // Handle Sign Up with Apple action
                }) {
                    HStack {
                        Image(systemName: "applelogo")
                            .foregroundColor(buttonTextColor)
                        Text("Sign in with Apple")
                            .foregroundColor(buttonTextColor)
                    }
                    .frame(width: geo.size.width - 80)
                    .padding()
                    .background(buttonBackgroundColor)
                    .cornerRadius(5)
                }
                .clipShape(.capsule)
                .padding(.top,  10)
                
                Button(action: {
                    // Handle Sign Up with Apple action
                }) {
                    HStack {
                        Text("Other Options")
                            .foregroundColor(buttonTextColor)
                    }
                    .frame(width: geo.size.width - 80)
                    .padding()
                    .background(buttonBackgroundColor)
                    .cornerRadius(5)
                }
                .clipShape(.capsule)
                .padding(.top,  10)
                
            }
            .frame(maxWidth: geo.size.width, alignment: .leading)
            .padding(20)
        }
    }
    
    var buttonBackgroundColor: Color {
            colorScheme == .dark ? .white : .black
        }
        
        var buttonTextColor: Color {
            colorScheme == .dark ? .black : .white
        }
}