redesign PaywallView with premium header, feature grid, and ticket separator

Replace the generic paywall header with a branded "SportsTime Pro / Your All-Access Pass"
hero section, 4 uniform feature cards (GeometryReader-sized squares), and a dashed ticket
perforation separator. Add "Show Paywall" debug button in Settings.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

SportsTime/Features/Paywall/Views/PaywallView.swift

@@ -21,29 +21,57 @@ struct PaywallView: View {
 
     var body: some View {
         SubscriptionStoreView(subscriptions: storeManager.products.filter { $0.subscription != nil }) {
-            VStack(spacing: Theme.Spacing.md) {
+            VStack(spacing: 0) {
-                Image(systemName: "star.circle.fill")
+                // Hero section
-                    .font(.system(.largeTitle, design: .default).weight(.regular))
+                VStack(spacing: Theme.Spacing.sm) {
-                    .foregroundStyle(Theme.warmOrange)
+                    Image(systemName: "shield.lefthalf.filled.badge.checkmark")
-                    .accessibilityHidden(true)
+                        .font(.system(size: 28))
+                        .foregroundStyle(Theme.warmOrange)
+                        .accessibilityHidden(true)
 
-                Text("Upgrade to Pro")
+                    Text("SportsTime Pro")
-                    .font(.largeTitle.bold())
+                        .font(.title2.bold())
-                    .foregroundStyle(Theme.textPrimary(colorScheme))
+                        .foregroundStyle(Theme.textPrimary(colorScheme))
-                    .accessibilityIdentifier("paywall.title")
+                        .accessibilityIdentifier("paywall.title")
 
-                Text("Unlock the full SportsTime experience")
+                    Text("Your All-Access Pass")
-                    .font(.body)
+                        .font(.subheadline)
-                    .foregroundStyle(Theme.textSecondary(colorScheme))
+                        .foregroundStyle(Theme.textSecondary(colorScheme))
-
-                HStack(spacing: Theme.Spacing.lg) {
-                    featurePill(icon: "infinity", text: "Unlimited Trips")
-                    featurePill(icon: "doc.fill", text: "PDF Export")
-                    featurePill(icon: "trophy.fill", text: "Progress")
                 }
-                .padding(.top, Theme.Spacing.sm)
+                .padding(.vertical, Theme.Spacing.xl)
+                .frame(maxWidth: .infinity)
+                .background(
+                    RoundedRectangle(cornerRadius: Theme.CornerRadius.large)
+                        .fill(Theme.warmOrange.opacity(0.06))
+                )
+                .padding(.horizontal, Theme.Spacing.md)
+
+                // Feature grid — GeometryReader to make all cards identical squares
+                GeometryReader { geo in
+                    let spacing = Theme.Spacing.sm
+                    let hPadding = Theme.Spacing.md * 2
+                    let cardSize = (geo.size.width - hPadding - spacing * 3) / 4
+
+                    HStack(spacing: spacing) {
+                        featureCard(icon: "infinity", label: "Unlimited\nTrips", size: cardSize)
+                        featureCard(icon: "doc.text.fill", label: "PDF\nExport", size: cardSize)
+                        featureCard(icon: "building.2.fill", label: "Stadium\nTracking", size: cardSize)
+                        featureCard(icon: "trophy.fill", label: "Achieve-\nments", size: cardSize)
+                    }
+                    .padding(.horizontal, Theme.Spacing.md)
+                }
+                .frame(height: 90)
+                .padding(.top, Theme.Spacing.md)
+
+                // Dashed ticket perforation separator
+                Line()
+                    .stroke(style: StrokeStyle(lineWidth: 1.5, dash: [6, 4]))
+                    .foregroundStyle(Theme.textMuted(colorScheme).opacity(0.4))
+                    .frame(height: 1)
+                    .padding(.horizontal, Theme.Spacing.lg)
+                    .padding(.top, Theme.Spacing.lg)
+                    .padding(.bottom, Theme.Spacing.sm)
             }
-            .padding(Theme.Spacing.lg)
         }
         .storeButton(.visible, for: .restorePurchases)
         .subscriptionStoreControlStyle(.prominentPicker)
@@ -78,19 +106,43 @@ struct PaywallView: View {
         }
     }
 
-    private func featurePill(icon: String, text: String) -> some View {
+    // MARK: - Feature Card
-        HStack(spacing: 4) {
+
+    private func featureCard(icon: String, label: String, size: CGFloat) -> some View {
+        VStack(spacing: 4) {
             Image(systemName: icon)
-                .font(.caption2)
+                .font(.system(size: 18))
+                .foregroundStyle(Theme.warmOrange)
                 .accessibilityHidden(true)
-            Text(text)
+
-                .font(.caption2)
+            Text(label)
+                .font(.system(size: 10, weight: .medium))
+                .multilineTextAlignment(.center)
+                .foregroundStyle(Theme.textSecondary(colorScheme))
+                .lineLimit(2)
+                .minimumScaleFactor(0.8)
         }
         .accessibilityElement(children: .combine)
-        .foregroundStyle(Theme.textMuted(colorScheme))
+        .frame(width: size, height: size)
-        .padding(.horizontal, 10)
+        .background(
-        .padding(.vertical, 6)
+            RoundedRectangle(cornerRadius: Theme.CornerRadius.small)
-        .background(Theme.warmOrange.opacity(0.08), in: Capsule())
+                .fill(Theme.warmOrange.opacity(0.08))
+                .overlay(
+                    RoundedRectangle(cornerRadius: Theme.CornerRadius.small)
+                        .strokeBorder(Theme.warmOrange.opacity(0.15), lineWidth: 1)
+                )
+        )
+    }
+}
+
+// MARK: - Dashed Line Shape
+
+private struct Line: Shape {
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+        path.move(to: CGPoint(x: 0, y: rect.midY))
+        path.addLine(to: CGPoint(x: rect.maxX, y: rect.midY))
+        return path
     }
 }
 

SportsTime/Features/Settings/Views/SettingsView.swift

@@ -543,6 +543,12 @@ struct SettingsView: View {
                 Label("Show Onboarding Flow", systemImage: "play.circle")
             }
 
+            Button {
+                showPaywall = true
+            } label: {
+                Label("Show Paywall", systemImage: "creditcard.fill")
+            }
+
             Button {
                 UserDefaults.standard.removeObject(forKey: "hasSeenOnboardingPaywall")
             } label: {