sneijder.pe posted on insta.

NikeLayout

import Foundation
import SwiftUI

struct NikeShoppingView : View {
    var ballX: Int = 0
    var drag = DragGesture()
                .onEnded {
                    if $0.translation.width < -100 {
                        withAnimation {
        
                        }
                    }
                }
    var style = StrokeStyle(lineWidth: 20)
    
    init() {
        style.dash = [2]
    }
         
    
    var body: some View {
        GeometryReader { r in
            ScrollView(.vertical) {
                HStack {
                    Text("<").font(.Small)
                        .offset(x: -1 , y:-1).padding(3)
                        .cornerRadius(25)
                        .scaleEffect(y:-2)
                        .frame(width: 15,height: 15, alignment: .leading).padding(10)
                        .background(.gray.opacity(0.2)).mask(Circle())
                    VStack {
                        Image("nike").resizable().frame(width:100, height:50, alignment: .center)
                    }.frame(width: r.size.width - 140)
                    Image(systemName: "ellipsis")
                        .rotationEffect(.degrees(90))
                        .frame(width: 15,height: 15, alignment: .trailing).padding(10)
                        .background(.gray.opacity(0.2)).mask(Circle())
                }.frame(height: 80, alignment: .top).offset(x: -15, y:40).padding(.leading,30)
                
                HStack {
                    Image("shoe1").resizable().padding(10)
                        .background(.gray.opacity(0.2)).mask(Rectangle())
                        .icon().padding(.trailing, 20).padding(.leading, 10)
                    Image("shoe3").resizable().padding(10)
                        .background(.gray.opacity(0.2)).mask(Rectangle())
                        .icon().padding(.trailing, 20)
                    Image("shoe4").resizable().padding(10)
                        .background(.orange.opacity(0.2)).mask(Rectangle())
                        .icon()
                }.frame(height: 80).padding(.top, 30)
                VStack {
                    
                  
                    ZStack {
                        Image("shoe2").resizable().shadow(radius:9)
                            .frame(width: 200, height: 150).zIndex(2)
                        Circle().opacity(0.1)
                            .transformEffect(.init(scaleX: 1, y: -5))
                            .frame(width:30, height: 80)
                            .rotationEffect(.degrees(59)).offset(x:-50, y: 90).zIndex(1).shadow(color: .black, radius: 10)
                        Circle()
                        
                            .stroke(LinearGradient(colors: [.clear, .green], startPoint: .leading, endPoint: .trailing), style: style)
                            .opacity(0.2)
                            .transformEffect(.init(scaleX: 1, y: -5))
                            .frame(width:75, height:70)
                            .rotationEffect(.degrees(90))
                            .offset(x:-200, y: 60)
                        
                     
                        
                    }.offset(y:30)
                    
                    Image(systemName: "viewfinder")
                        .foregroundColor(.white)
                        .rotationEffect(.degrees(45))
                        .background(
                            ZStack {
                                Circle().fill(.orange).frame(width: 10, height: 10)
                                    .zIndex(12)
                                Circle()
                                    .fill(RadialGradient(colors: [
                                        .green.opacity(0.8)], center: .center, startRadius: 5.0, endRadius: 29.0 ))
                                    .frame(width:50, height: 50).zIndex(11)
                            }).offset(y:38)
                            
                    VStack {
                        Text("Kyrie Infinity").font(.Heading).frame(width: r.size.width, alignment: .leading).padding(.leading, 40).padding(.top,50)
                        Text("Basketball Shoes").font(.SubHeading).opacity(0.5).frame(width: r.size.width, alignment: .leading).padding(.leading, 40)
                        Text("The Kyrie Infinity provides a tight custom fit and enhanced responsiveness in the forefoot and traction up the side").font(.Copy)
                            .frame(width: r.size.width - 50, alignment: .leading).opacity(0.8)
                            .padding(.leading, 40)
                            .padding(.trailing, 40).padding(.top,10)
                        
                        HStack {
                            VStack {
                                Text("Price").frame(alignment: .leading).font(.Copy)
                                Text("$130").frame(alignment: .leading).font(.Heading)
                            }.frame(width: 200, alignment: .leading).offset(x:10, y:-20)
                            HStack {
                                Image(systemName: "bandage").resizable().offset(x:1)
                                    .rotationEffect(.degrees(0)).foregroundColor(.white)
                                    .frame(width: 40,height: 40, alignment: .trailing).padding(15)
                                    .background(.black.opacity(0.4)).mask(Circle())
                                    .background(.blue.opacity(0.9)).mask(Circle())
                                    .padding(10).shadow(radius: 5).offset(x:-20, y: -10)
                                Image(systemName: "bag").resizable().offset(x:1)
                                    .rotationEffect(.degrees(0)).foregroundColor(.white).shadow(radius: 3)
                                    .frame(width: 40,height: 40, alignment: .trailing).padding(15)
                                    .background(.gray.opacity(0.2)).mask(Circle()).offset(x:-20, y: -10)
                            }.frame(alignment: .trailing).offset(x: -5, y: -5).shadow(radius: 5)
                        }.frame(width: UIScreen.screenWidth , height:140, alignment: .bottom)
                    }.frame(width: UIScreen.screenWidth).padding(.top, 40)
                    
                }.frame(height: r.size.height - 160, alignment: .top)
            }//.background(Rectangle().fill(.white).cornerRadius(15).padding(20))
        }.standard().top().background(LinearGradient.whiteToGreen).backButton()
    }
}


struct NikeShopping: PreviewProvider {
    static var previews: some View {
        NikeShoppingView()
    }
}