Question: Here is the code for my contentView for my Trading card app. Is their any design ideas that can make it look for appealing? The

Here is the code for my contentView for my Trading card app. Is their any design ideas that can make it look for appealing? The picture is what it looks like during the preview. import SwiftUI
struct ContentView: View {
@State private var isDark = false // State variable to toggle between light and dark purple
var body: some View {
NavigationView {
VStack {
HStack {
Spacer()// Add spacer to move trophy icon to the right
NavigationLink(destination: AchievementBoard()){
Image(systemName: "trophy")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 25, height: 25)
.foregroundColor(.yellow)
.padding()
}
}
Text("Select what card game you would like to edit?")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.white)
.shadow(color: .black, radius: 2, x: 0, y: 2)
.padding(.bottom, 20)
.multilineTextAlignment(.center)// Center-align the text
Spacer()
NavigationLink(destination: PokemonCollectionView()){
SectionButton(title: "Pokemon", color: .red)
}
.buttonStyle(PlainButtonStyle())
NavigationLink(destination: MagicCollectionView()){
SectionButton(title: "Magic", color: .blue)
}
.buttonStyle(PlainButtonStyle())
NavigationLink(destination: SportsCollectionView()){
SectionButton(title: "Sports", color: .green)
}
.buttonStyle(PlainButtonStyle())
Spacer()
}
.background(LinearGradient(gradient: Gradient(colors: [Color.purple.opacity(isDark ?0.5 : 0.1), Color.purple.opacity(isDark ?0.8 : 0.5)]), startPoint: .top, endPoint: .bottom))// Animated gradient background
.animation(Animation.easeInOut(duration: 2).repeatForever())// Continuous animation
.onAppear {
self.isDark.toggle()// Toggle the state variable to trigger animation
}
.navigationBarTitle("Boundless Archive", displayMode: .inline)
.font(.title)
.fontWeight(.bold)
}
.navigationViewStyle(StackNavigationViewStyle())// Use StackNavigationViewStyle to prevent navigation bar from appearing on iPad
}
}
struct SectionButton: View {
var title: String
var color: Color
var body: some View {
Text(title)
.font(.title)
.fontWeight(.bold)
.foregroundColor(.white)
.shadow(color: .black, radius: 2, x: 0, y: 2)
.padding()
.frame(maxWidth: .infinity)
.background(color)
.cornerRadius(15)
.shadow(color: Color.black.opacity(0.3), radius: 5, x: 0, y: 5)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Here is the code for my contentView for my

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Finance Questions!