From 3a2721e150291f578d19529b3ceef3496b5640f2 Mon Sep 17 00:00:00 2001
From: Beingpax <prakashjoshipaxtek@gmail.com>
Date: Sun, 28 Dec 2025 14:32:00 +0545
Subject: [PATCH] Reduce hero section size and create reusable component

---
 .../Views/Common/CompactHeroSection.swift     | 29 +++++++++++++++++++
 .../Dictionary/DictionarySettingsView.swift   | 27 ++++-------------
 VoiceInk/Views/PermissionsView.swift          | 24 ++++-----------
 .../Settings/AudioInputSettingsView.swift     | 24 ++++-----------
 4 files changed, 45 insertions(+), 59 deletions(-)
 create mode 100644 VoiceInk/Views/Common/CompactHeroSection.swift

diff --git a/VoiceInk/Views/Common/CompactHeroSection.swift b/VoiceInk/Views/Common/CompactHeroSection.swift
new file mode 100644
index 0000000..7e0a00e
--- /dev/null
+++ b/VoiceInk/Views/Common/CompactHeroSection.swift
@@ -0,0 +1,29 @@
+import SwiftUI
+
+struct CompactHeroSection: View {
+    let icon: String
+    let title: String
+    let description: String
+    var maxDescriptionWidth: CGFloat? = nil
+
+    var body: some View {
+        VStack(spacing: 16) {
+            Image(systemName: icon)
+                .font(.system(size: 28))
+                .foregroundStyle(.blue)
+                .symbolRenderingMode(.hierarchical)
+
+            VStack(spacing: 6) {
+                Text(title)
+                    .font(.system(size: 22, weight: .bold))
+                Text(description)
+                    .font(.system(size: 14))
+                    .foregroundStyle(.secondary)
+                    .multilineTextAlignment(.center)
+                    .frame(maxWidth: maxDescriptionWidth)
+            }
+        }
+        .padding(.vertical, 20)
+        .frame(maxWidth: .infinity)
+    }
+}
diff --git a/VoiceInk/Views/Dictionary/DictionarySettingsView.swift b/VoiceInk/Views/Dictionary/DictionarySettingsView.swift
index f02668a..f7426c5 100644
--- a/VoiceInk/Views/Dictionary/DictionarySettingsView.swift
+++ b/VoiceInk/Views/Dictionary/DictionarySettingsView.swift
@@ -41,27 +41,12 @@ struct DictionarySettingsView: View {
     }
     
     private var heroSection: some View {
-        VStack(spacing: 24) {
-            Image(systemName: "brain.filled.head.profile")
-                .font(.system(size: 40))
-                .foregroundStyle(.blue)
-                .padding(20)
-                .background(Circle()
-                    .fill(Color(.windowBackgroundColor).opacity(0.9))
-                    .shadow(color: .black.opacity(0.1), radius: 10, y: 5))
-
-            VStack(spacing: 8) {
-                Text("Dictionary Settings")
-                    .font(.system(size: 28, weight: .bold))
-                Text("Enhance VoiceInk's transcription accuracy by teaching it your vocabulary")
-                    .font(.system(size: 15))
-                    .foregroundStyle(.secondary)
-                    .multilineTextAlignment(.center)
-                    .frame(maxWidth: 400)
-            }
-        }
-        .padding(.vertical, 40)
-        .frame(maxWidth: .infinity)
+        CompactHeroSection(
+            icon: "brain.filled.head.profile",
+            title: "Dictionary Settings",
+            description: "Enhance VoiceInk's transcription accuracy by teaching it your vocabulary",
+            maxDescriptionWidth: 500
+        )
     }
     
     private var mainContent: some View {
diff --git a/VoiceInk/Views/PermissionsView.swift b/VoiceInk/Views/PermissionsView.swift
index b80af94..86df4cd 100644
--- a/VoiceInk/Views/PermissionsView.swift
+++ b/VoiceInk/Views/PermissionsView.swift
@@ -202,25 +202,11 @@ struct PermissionsView: View {
         ScrollView {
             VStack(spacing: 32) {
                 // Header
-                VStack(spacing: 24) {
-                    Image(systemName: "shield.lefthalf.filled")
-                        .font(.system(size: 40))
-                        .foregroundStyle(.blue)
-                        .padding(20)
-                        .background(Circle()
-                            .fill(Color(.windowBackgroundColor).opacity(0.9))
-                            .shadow(color: .black.opacity(0.1), radius: 10, y: 5))
-                    
-                    VStack(spacing: 8) {
-                        Text("App Permissions")
-                            .font(.system(size: 28, weight: .bold))
-                        Text("VoiceInk requires the following permissions to function properly")
-                            .font(.system(size: 15))
-                            .foregroundStyle(.secondary)
-                    }
-                }
-                .padding(.vertical, 40)
-                .frame(maxWidth: .infinity)
+                CompactHeroSection(
+                    icon: "shield.lefthalf.filled",
+                    title: "App Permissions",
+                    description: "VoiceInk requires the following permissions to function properly"
+                )
                 
                 // Permission Cards
                 VStack(spacing: 16) {
diff --git a/VoiceInk/Views/Settings/AudioInputSettingsView.swift b/VoiceInk/Views/Settings/AudioInputSettingsView.swift
index ed3135c..7218478 100644
--- a/VoiceInk/Views/Settings/AudioInputSettingsView.swift
+++ b/VoiceInk/Views/Settings/AudioInputSettingsView.swift
@@ -29,25 +29,11 @@ struct AudioInputSettingsView: View {
     }
     
     private var heroSection: some View {
-        VStack(spacing: 24) {
-            Image(systemName: "waveform")
-                .font(.system(size: 40))
-                .foregroundStyle(.blue)
-                .padding(20)
-                .background(Circle()
-                    .fill(Color(.windowBackgroundColor).opacity(0.4))
-                    .shadow(color: .black.opacity(0.1), radius: 10, y: 5))
-            
-            VStack(spacing: 8) {
-                Text("Audio Input")
-                    .font(.system(size: 28, weight: .bold))
-                Text("Configure your microphone preferences")
-                    .font(.system(size: 15))
-                    .foregroundStyle(.secondary)
-            }
-        }
-        .padding(.vertical, 40)
-        .frame(maxWidth: .infinity)
+        CompactHeroSection(
+            icon: "waveform",
+            title: "Audio Input",
+            description: "Configure your microphone preferences"
+        )
     }
     
     private var inputModeSection: some View {