Cover Header

// Cover Header · syxUI · https://syxui.dev/components/hdr-cover
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

// Cover / hero header - image with overlay title
struct HeaderCover: View {
    var body: some View {
        ZStack(alignment: .bottomLeading) {
            Image("photo_travel").resizable().scaledToFill().frame(width: 350, height: 200).clipped()
            LinearGradient(colors: [.clear, .black.opacity(0.65)], startPoint: .center, endPoint: .bottom).frame(width: 350, height: 200)
            VStack(alignment: .leading, spacing: 4) {
                Text("DESTINATIONS").font(.system(size: 11, weight: .bold)).foregroundStyle(.white.opacity(0.85)).tracking(1)
                Text("Greek Islands").font(.system(size: 26, weight: .bold)).foregroundStyle(.white)
            }.padding(16)
            HStack {
                Image(systemName: "chevron.left").font(.system(size: 16, weight: .semibold)).foregroundStyle(.white).padding(9).background(.black.opacity(0.3), in: Circle())
                Spacer()
                Image(systemName: "heart").font(.system(size: 16, weight: .semibold)).foregroundStyle(.white).padding(9).background(.black.opacity(0.3), in: Circle())
            }.padding(12).frame(width: 350, height: 200, alignment: .top)
        }
        .frame(width: 350, height: 200).clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
    }
}