SwiftUI.art | SwiftUI Landing Page Design Components Collection

Home
Components
SwiftUI Landing Page Designs

SwiftUI Landing Page Designs Create a strong first impression with our SwiftUI Landing Page components. Designed to be visually appealing and highly functional, these components ensure a great user experience. Upgrade to premium to access all advanced features and exclusive components.

Simple Landing Page

                                            
                                            
import SwiftUI                                                                                               

struct LandingPage: View {
    var body: some View {
        ZStack {
            // Background Image
            Image("clothing") // Replace with your actual background image name
                .resizable()
                .scaledToFill()
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .edgesIgnoringSafeArea(.all)
            
            // Content
            VStack {
                Spacer()
                
                // Logo
                Image(systemName: "pyramid")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .foregroundColor(.white)
                    .frame(width: 64)
                    .padding(.bottom, 8)
                
                Spacer()
                
                // Text
                Text("Find music you love.\nDiscover new artists.")
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                    .multilineTextAlignment(.center)
                    .padding(.horizontal, 32)
                    .padding(.bottom, 24)
                
                
                // Buttons
                VStack(spacing: 8) {
                    Button(action: {
                        // Action for Create an account button
                    }) {
                        Text("Create an account")
                            .font(.headline)
                            .padding()
                            .frame(width: 320) // Adjust the width as needed
                            .background(Color.orange)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                    }
                    
                    Button(action: {
                        // Action for I already have an account button
                    }) {
                        Text("I already have an account")
                            .font(.headline)
                            .padding()
                            .frame(width: 320) // Adjust the width as needed
                            .background(Color.white)
                            .foregroundColor(.black)
                            .cornerRadius(10)
                    }
                }
                
            }
            .padding()
        }
    }
}

#Preview {
    LandingPage()
}

Simple Landing Page

                                    
                                    
import SwiftUI                                                                                               

struct LandingPage: View {
    var body: some View {
        ZStack {
            // Background Image
            Image("clothing") // Replace with your actual background image name
                .resizable()
                .scaledToFill()
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .edgesIgnoringSafeArea(.all)
            
            // Content
            VStack {
                Spacer()
                
                // Logo
                Image(systemName: "pyramid")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .foregroundColor(.white)
                    .frame(width: 64)
                    .padding(.bottom, 8)
                
                Spacer()
                
                // Text
                Text("Find music you love.\nDiscover new artists.")
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                    .multilineTextAlignment(.center)
                    .padding(.horizontal, 32)
                    .padding(.bottom, 24)
                
                
                // Buttons
                VStack(spacing: 8) {
                    Button(action: {
                        // Action for Create an account button
                    }) {
                        Text("Create an account")
                            .font(.headline)
                            .padding()
                            .frame(width: 320) // Adjust the width as needed
                            .background(Color.orange)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                    }
                    
                    Button(action: {
                        // Action for I already have an account button
                    }) {
                        Text("I already have an account")
                            .font(.headline)
                            .padding()
                            .frame(width: 320) // Adjust the width as needed
                            .background(Color.white)
                            .foregroundColor(.black)
                            .cornerRadius(10)
                    }
                }
                
            }
            .padding()
        }
    }
}

#Preview {
    LandingPage()
}

Orange landing page

                                            
                                            
///                                                                              

import SwiftUI

struct LemonadeLandingPage: View {
    var body: some View {
        ZStack {
            // Background Image
            Image("buildingwhite")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)

            // Content
            VStack {
                Spacer().frame(height: 32)
                // Top Image and Logo
                VStack {
                    Text("Orange") // Replace with your actual logo image name
                        .padding(.top, 20)
                        .font(.custom("SnellRoundhand-Bold", size: 28))
                        .foregroundColor(.black.opacity(0.7))
                }
                
                // Title and Subtitle
                VStack {
                    Text("Take Orange\nFor A Spin!")
                        .font(.system(.title2, design: .serif))
                        .foregroundColor(.black)
                        .multilineTextAlignment(.center)
                        .padding(.top, 10)
                    
                    Button(action: {
                        // Action for Check our prices button
                    }) {
                        Text("CHECK OUR PRICES")
                            .font(.headline)
                            .padding()
                            .padding(.horizontal)
                            .background(Color.pink)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                    }
                    .padding(.top, 10)
                    
                    HStack {
                        Text("Already a member?")
                            .font(.subheadline)
                            .foregroundColor(.black)
                        Button(action: {
                            // Action for Sign In button
                        }) {
                            Text("Sign In")
                                .font(.subheadline)
                                .foregroundColor(.pink)
                                .bold()
                        }
                    }
                    .padding(.top, 6)
                }
                .padding(.horizontal, 32)
                
                Spacer()
            }
        }
    }
}

#Preview {
    LemonadeLandingPage()
}

Orange landing page

                                    
                                    
///                                                                              

import SwiftUI

struct LemonadeLandingPage: View {
    var body: some View {
        ZStack {
            // Background Image
            Image("buildingwhite")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)

            // Content
            VStack {
                Spacer().frame(height: 32)
                // Top Image and Logo
                VStack {
                    Text("Orange") // Replace with your actual logo image name
                        .padding(.top, 20)
                        .font(.custom("SnellRoundhand-Bold", size: 28))
                        .foregroundColor(.black.opacity(0.7))
                }
                
                // Title and Subtitle
                VStack {
                    Text("Take Orange\nFor A Spin!")
                        .font(.system(.title2, design: .serif))
                        .foregroundColor(.black)
                        .multilineTextAlignment(.center)
                        .padding(.top, 10)
                    
                    Button(action: {
                        // Action for Check our prices button
                    }) {
                        Text("CHECK OUR PRICES")
                            .font(.headline)
                            .padding()
                            .padding(.horizontal)
                            .background(Color.pink)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                    }
                    .padding(.top, 10)
                    
                    HStack {
                        Text("Already a member?")
                            .font(.subheadline)
                            .foregroundColor(.black)
                        Button(action: {
                            // Action for Sign In button
                        }) {
                            Text("Sign In")
                                .font(.subheadline)
                                .foregroundColor(.pink)
                                .bold()
                        }
                    }
                    .padding(.top, 6)
                }
                .padding(.horizontal, 32)
                
                Spacer()
            }
        }
    }
}

#Preview {
    LemonadeLandingPage()
}

Learn More About SwiftUI & iOS

Professional SwiftUI UI Kits: Top Resources The Evolution of iOS App Development: From UIKit to SwiftUI Creating Dynamic and Interactive User Interfaces with SwiftUI The Future of iOS App Design: An In-Depth Look at SwiftUI Creating Dynamic User Interfaces with SwiftUI Harnessing the Power of Animations in SwiftUI Exploring the Benefits of Using SwiftUI for iOS Development Exploring the Differences Between SwiftUI and Other Cross-Platform Development Tools Integrating SwiftUI with Other Apple Frameworks for Seamless App Development Debugging and Troubleshooting Your SwiftUI Code: Common Pitfalls and How to Fix Them Implementing Data Persistence in SwiftUI: Best Practices and Strategies Creating Custom UI Components with SwiftUI: A Step-by-Step Guide Exploring the Features of SwiftUI: A Comprehensive Guide Mastering SwiftUI: Tips and Tricks for Efficient Development The Benefits of Using SwiftUI in Xcode for iOS App Development The Role of Xcode in SwiftUI Development: Tips and Tools for Productivity Unleashing the Power of SwiftUI: Advanced Features and Techniques Integrating SwiftUI into Your Existing Development Workflow Designing Beautiful and Responsive Interfaces with SwiftUI How to Implement SwiftUI in Your Mobile App Design Process