Promo Banner with Custom Gradient

import SwiftUI

struct UseBannerPromoWCustomColorGradient: View {
    
    var body: some View {
        BannerPromoWCustomColorGradient(title: "Component Suggestions", subtitle: "Choose from 100+ components to start design and development of your next app faster.", bannerCTA: "Explore components", bannerBgLight: "FFEEBB", bannerBgDark: "AA6D28")
            .padding()
    }
}

#Preview {
    UseBannerPromoWCustomColorGradient()
}

extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 3: // RGB (12-bit)
            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
        case 6: // RGB (24-bit)
            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: // ARGB (32-bit)
            (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            (a, r, g, b) = (255, 0, 0, 0)
        }

        self.init(.sRGB, red: Double(r) / 255, green: Double(g) / 255, blue:  Double(b) / 255, opacity: Double(a) / 255)
    }
}

struct BannerPromoWCustomColorGradient: View {
    @Environment(\\.colorScheme) private var scheme
    
    let title: String
    let subtitle: String
    let bannerCTA: String
    let bannerBgLight: String
    let bannerBgDark: String
    
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text(title)
                .font(.system(size: 22, design: .serif))
                .foregroundStyle(.primary)
        
            Text(subtitle)
                .font(.system(size: 15, design: .default))
                .multilineTextAlignment(.leading)
                .frame(maxWidth: 420, alignment: .leading)
            
            Divider()
            
            HStack {
                Text(bannerCTA)
                Image(systemName: "chevron.right")
                    .font(.footnote)
                    .foregroundStyle(.secondary)
                    .fontWeight(.regular)
            }
            .font(.system(size: 17, design: .default))
            .fontWeight(.semibold)
            .foregroundStyle(.primary)
        }
        .padding()
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(scheme == .dark ? Color(hex: bannerBgDark).gradient : Color(hex: bannerBgLight).gradient)
        .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
    }
}