2021_day1_order_onboarding.swift

//
//  ContentView.swift
//  Day1
//
//  Created by Amos Gyamfi on 1.1.2021.
//

import SwiftUI

struct ContentView: View {
    @State private var moveDashPhase = false
    
    var body: some View {
        
        VStack {
            
            Image("logo")
            
            ZStack {
                Circle()
                    .frame(width: 332, height: 332)
                    .foregroundColor(Color(#colorLiteral(red: 0, green: 0, blue: 0.368627451, alpha: 1)))
                
                VStack(spacing: 50) {
                    Image(systemName: "house.fill")
                        .font(.system(size: 104))
                    
                    Text("Order Now")
                }
                
                Path { path in
                           path.move(to: CGPoint(x: 20, y: 1))
                           path.addLine(to: CGPoint(x: 11.357323, y: 1))
                           path.addCurve(to: CGPoint(x: 1, y: 11.357323), control1: CGPoint(x: 5.637131, y: 1), control2: CGPoint(x: 1, y: 5.637131))
                           path.addCurve(to: CGPoint(x: 1, y: 11.357323), control1: CGPoint(x: 1, y: 11.357323), control2: CGPoint(x: 1, y: 11.357323))
                           path.addCurve(to: CGPoint(x: 1, y: 11.357323), control1: CGPoint(x: 1, y: 11.357323), control2: CGPoint(x: 1, y: 11.357323))
                           path.addCurve(to: CGPoint(x: 11.357323, y: 21.714645), control1: CGPoint(x: 1, y: 17.077515), control2: CGPoint(x: 5.637131, y: 21.714645))
                           path.addLine(to: CGPoint(x: 108.688263, y: 21.714645))
                           path.addCurve(to: CGPoint(x: 124.786148, y: 37.812531), control1: CGPoint(x: 117.57888, y: 21.714645), control2: CGPoint(x: 124.786148, y: 28.921913))
                           path.addCurve(to: CGPoint(x: 124.786148, y: 37.812531), control1: CGPoint(x: 124.786148, y: 37.812531), control2: CGPoint(x: 124.786148, y: 37.812531))
                           path.addCurve(to: CGPoint(x: 124.786148, y: 37.812531), control1: CGPoint(x: 124.786148, y: 37.812531), control2: CGPoint(x: 124.786148, y: 37.812531))
                           path.addCurve(to: CGPoint(x: 108.688263, y: 53.910416), control1: CGPoint(x: 124.786148, y: 46.703148), control2: CGPoint(x: 117.57888, y: 53.910416))
                           path.addLine(to: CGPoint(x: 29.018867, y: 53.910416))
                           path.addCurve(to: CGPoint(x: 15.58194, y: 67.347351), control1: CGPoint(x: 21.597857, y: 53.910423), control2: CGPoint(x: 15.58194, y: 59.926342))
                           path.addCurve(to: CGPoint(x: 15.58194, y: 67.347351), control1: CGPoint(x: 15.58194, y: 67.347351), control2: CGPoint(x: 15.58194, y: 67.347351))
                           path.addCurve(to: CGPoint(x: 15.58194, y: 67.347351), control1: CGPoint(x: 15.58194, y: 67.347351), control2: CGPoint(x: 15.58194, y: 67.347351))
                           path.addCurve(to: CGPoint(x: 29.018862, y: 80.784286), control1: CGPoint(x: 15.58194, y: 74.768356), control2: CGPoint(x: 21.597855, y: 80.784271))
                           path.addLine(to: CGPoint(x: 56.84201, y: 80.784286))
                           path.addLine(to: CGPoint(x: 56.84201, y: 80.784286))
                }.stroke(style: StrokeStyle(lineWidth: 2, lineCap: .round, lineJoin: .round,  dash: [7, 7], dashPhase: moveDashPhase ? 33 : -33))
                .offset(x: 146, y: 318)
                .animation(Animation.linear(duration: 30).repeatForever(autoreverses: false).speed(5))
                .onAppear(){
                    moveDashPhase.toggle()
                }
            }
            
            VStack {
                Text("All your favorites")
                    .font(.system(size: 22))
                Text("Order from the best local restaurasnts")
                    .foregroundColor(Color(#colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)))
            }.padding()
           
           
            
            
            HStack {
                Circle()
                    .frame(width: 9, height: 9)
                ForEach(0 ..< 4) { item in
                    Circle()
                        .frame(width: 9, height: 9)
                        .foregroundColor(Color(#colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)))
                }
            }  // Indicators
            
            HStack(spacing: 30) {
                RoundedRectangle(cornerRadius: 4)
                    .stroke()
                    .frame(width: 160, height: 48, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .overlay(Text("Sign In"))
                
                RoundedRectangle(cornerRadius: 4)
                    .frame(width: 160, height: 48, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .foregroundColor(Color(#colorLiteral(red: 0, green: 0, blue: 0.368627451, alpha: 1)))
                    .overlay(Text("Get Started"))
            }.padding()
            
        } // Container for all views
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .preferredColorScheme(/*@START_MENU_TOKEN@*/.dark/*@END_MENU_TOKEN@*/)
    }
}