Feature Spotlight

// Feature Spotlight · syxUI · https://syxui.dev/components/tip-spotlight
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

let ttRed = Color(red: 0.90, green: 0.24, blue: 0.28)
let ttPurple = Color(red: 0.55, green: 0.40, blue: 0.90)

struct Spotlight: View { var body: some View { VStack(spacing: 8) { HStack(spacing: 12) { VStack(spacing: 4) { Image(systemName: "gift.fill").font(.system(size: 18)).foregroundStyle(ttPurple).frame(width: 46, height: 46).background(Color(.systemBackground), in: RoundedRectangle(cornerRadius: 12, style: .continuous)).overlay(RoundedRectangle(cornerRadius: 12, style: .continuous).stroke(style: StrokeStyle(lineWidth: 2, dash: [4, 3])).foregroundStyle(ttPurple)).overlay(alignment: .topTrailing) { Text("New").font(.system(size: 8, weight: .bold)).foregroundStyle(.white).padding(.horizontal, 5).padding(.vertical, 2).background(ttRed, in: Capsule()).offset(x: 8, y: -6) }; Text("Rewards").font(.system(size: 11)).foregroundStyle(.secondary) }; Spacer() }.frame(width: 200); Image(systemName: "arrowtriangle.up.fill").font(.system(size: 11)).foregroundStyle(Color(.systemBackground)); VStack(alignment: .leading, spacing: 8) { Text("Task Center and Reward Center are now combined into a new Rewards Hub.").font(.system(size: 13)); HStack { Text("1/3").font(.system(size: 12)).foregroundStyle(.secondary); Spacer(); Text("Next").font(.system(size: 13, weight: .semibold)).foregroundStyle(.black).padding(.horizontal, 14).padding(.vertical, 6).background(Color(red: 0.98, green: 0.85, blue: 0.1), in: Capsule()) } }.padding(14).frame(width: 240).background(Color(.systemBackground), in: RoundedRectangle(cornerRadius: 14, style: .continuous)).shadow(color: .black.opacity(0.1), radius: 14, y: 5) } } }