Cash App Stocks

import SwiftUI

struct ContentView: View {
    
    @State private var startOffset: CGFloat = 280
    @State private var endOffset: CGFloat = 0

    var body: some View {
        
        // Main View
        VStack {
            
            // Top Bar
            HStack {
                Text("Investing")
                    .fontWeight(.semibold)
                    .font(.title)
                    .foregroundColor(.black)
                Spacer()
                Image(systemName: "magnifyingglass")
                    .font(Font.title.weight(.medium))
                    .foregroundColor(offPurple)
                    .padding()
                Image("profile")
                    .resizable()
                    .frame(width: 50, height: 50)
            }
            
            // Segmented Picker
            ZStack(alignment: .leading) {
                RoundedRectangle(cornerRadius: 25)
                    .foregroundColor(.white)
                    .frame(width: 150, height: 46)
                    .offset(x: 2, y: 0)
                HStack(spacing: 100) {
                    Text("Stocks")
                        .padding()
                        .font(Font.subheadline.weight(.semibold))
                        .foregroundColor(offPurple)
                    Text("Bitcoin")
                        .padding()
                        .font(Font.subheadline.weight(.semibold))
                        .foregroundColor(offGray1)
                }
                .frame(width: 330, height: 50)
            }
            .background(offWhite1)
            .clipShape(RoundedRectangle(cornerRadius: 25))
            
            // Investing Text
            VStack {
                Text("Investing for Everybody").bold()
                    .font(.largeTitle)
                    .multilineTextAlignment(.center)
                Text("Start investing in your favorite companies with as little as $1")
                     .padding(EdgeInsets(top: 5, leading: 20, bottom: 5, trailing: 20))
                    .font(.subheadline)
                    .foregroundColor(offGray2)
                    .multilineTextAlignment(.center)
            }
            .padding()
            
            // Cards
            HStack(spacing: 10) {
                    CardView(color: .black, icon: "applelogo", iconColor: .white)
                    CardView(color: Color(#colorLiteral(red: 0.01176470588, green: 0.6784313725, blue: 0.9019607843, alpha: 1)), icon: "network", iconColor: .white)
                    CardView(color: .red, icon: "target", iconColor: .white)
                    CardView(color: Color(#colorLiteral(red: 0.02352941176, green: 0.4901960784, blue: 0.7725490196, alpha: 1)), icon: "rays", iconColor: .yellow)
                    CardView(color: .black, icon: "applelogo", iconColor: .white)
                    CardView(color: Color(#colorLiteral(red: 0.01176470588, green: 0.6784313725, blue: 0.9019607843, alpha: 1)), icon: "network", iconColor: .white)
                    CardView(color: .red, icon: "target", iconColor: .white)
                    CardView(color: Color(#colorLiteral(red: 0.02352941176, green: 0.4901960784, blue: 0.7725490196, alpha: 1)), icon: "rays", iconColor: .yellow)
            }
            .padding(EdgeInsets(top: 200, leading: 0, bottom: 0, trailing: 0))
            .position(x: startOffset)
            .onAppear { withAnimation(.linear(duration: 10)) { self.startOffset = endOffset } }
            
            // Discover Button
            VStack {
                Button(action: {}) {
                    Text("Discover a Stock")
                }
                .font(Font.headline.weight(.bold))
                .frame(width: 300, height: 45)
                .foregroundColor(.white)
                .background(offPurple)
                .cornerRadius(25)
            }
            .padding(EdgeInsets(top: 0, leading: 0, bottom: 50, trailing: 0))
            
        }
        .padding()
        
    }
}

struct AppView: View {
    
    init() {
        UITabBar.appearance().barTintColor = UIColor(offWhite1)
        UITabBar.appearance().layer.borderWidth = 0.0
        UITabBar.appearance().clipsToBounds = true
        UITabBar.appearance().unselectedItemTintColor = UIColor.lightGray
    }
    
    var body: some View {
        TabView(selection: .constant(4)) {
            ContentView()
                .tabItem {
                    Image(systemName: "house")
                    Text("")
                }
                .tag(1)
            ContentView()
                .tabItem {
                    Image(systemName: "creditcard")
                    Text("")
                }
                .tag(2)
            ContentView()
                .tabItem {
                    Image(systemName: "dollarsign.circle")
                    Text("")
                }
                .tag(3)
            ContentView()
                .tabItem {
                    Image(systemName: "arrow.up.right")
                    Text("")
                }
                .tag(4)
            ContentView()
                .tabItem {
                    Image(systemName: "timer")
                    Text("")
                }
                .tag(5)
        }
        .accentColor(.black)
    }
    
}

struct CardView: View {
    let color: Color
    let icon: String
    let iconColor: Color
    
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 22, style: .continuous)
                .frame(width: 100, height: 150)
                .foregroundColor(color)
            Image(systemName: icon)
                .foregroundColor(iconColor)
                .font(.largeTitle)
                .offset(x: -20.0, y: -45)
        }
     
    }
}

let offWhite1 = Color(#colorLiteral(red: 0.9803921569, green: 0.9764705882, blue: 0.9764705882, alpha: 1))//FAF9F9
let offWhite2 = Color(#colorLiteral(red: 1, green: 0.9960784314, blue: 1, alpha: 1))//FFFEFF
let offGray1 = Color(#colorLiteral(red: 0.4, green: 0.4, blue: 0.4, alpha: 1))//666666
let offGray2 = Color(#colorLiteral(red: 0.4235294118, green: 0.4235294118, blue: 0.4196078431, alpha: 1))//6C6C6B
let offPurple = Color(#colorLiteral(red: 0.5607843137, green: 0.07450980392, blue: 0.9960784314, alpha: 1))//8F13FE

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        AppView()
    }
}