@@ -5,69 +5,87 @@ struct ProductDetailView: View {
55 @State private var showAddedToCart : Bool = false
66 let product : Product
77
8+ private let brandGradient = LinearGradient ( colors: [ . purple, . blue] , startPoint: . leading, endPoint: . trailing)
9+
810 init ( product: Product ) {
911 self . product = product
1012 self . _isFavorite = State ( initialValue: product. isFavorite)
1113 }
1214
1315 var body : some View {
1416 ScrollView {
15- VStack ( alignment: . leading, spacing: 24 ) {
17+ VStack ( alignment: . leading, spacing: 20 ) {
1618 Image ( product. imageName)
1719 . resizable ( )
1820 . scaledToFit ( )
19- . frame ( height: 260 )
21+ . frame ( height: 300 )
2022 . cornerRadius ( 20 )
2123 . padding ( . top, 16 )
2224 Text ( product. name)
2325 . font ( AppFont . title)
2426 . padding ( . top, 8 )
25- Text ( product. brand)
26- . font ( AppFont . sectionTitle)
27- . foregroundColor ( . secondary)
28- Text ( " $ \( String ( format: " %.2f " , product. price) ) " )
29- . font ( AppFont . body)
30- . bold ( )
31- . padding ( . vertical, 4 )
32- Text ( product. description)
33- . font ( AppFont . body)
34- . foregroundColor ( . primary)
35- . padding ( . vertical, 8 )
36- HStack ( spacing: 16 ) {
27+
28+ // BRAND (gradient) + PRICE CAPSULE ON RIGHT
29+ HStack {
30+ Text ( product. brand. uppercased ( ) )
31+ . font ( AppFont . sectionTitle)
32+ . bold ( ) // slightly bolder
33+ . foregroundStyle ( brandGradient)
34+ Spacer ( )
35+ Text ( String ( format: " $%.2f " , product. price) )
36+ . font ( . system( size: 16 , weight: . semibold, design: . rounded) )
37+ . foregroundColor ( . white)
38+ . padding ( . horizontal, 14 )
39+ . padding ( . vertical, 8 )
40+ . background ( brandGradient)
41+ . clipShape ( Capsule ( ) )
42+ . shadow ( color: Color . black. opacity ( 0.08 ) , radius: 8 , x: 0 , y: 4 )
43+ }
44+
45+ // Add to Cart aligned right under the price with brand colors
46+ HStack {
47+ Spacer ( )
3748 Button ( action: {
3849 showAddedToCart = true
3950 // TODO: Add to cart logic
4051 } ) {
4152 Label ( " Add to Cart " , systemImage: " cart.badge.plus " )
42- . padding ( )
43- . background ( Color . accentGreen)
53+ . font ( . system( size: 16 , weight: . semibold, design: . rounded) )
54+ . padding ( . horizontal, 16 )
55+ . padding ( . vertical, 10 )
4456 . foregroundColor ( . white)
45- . cornerRadius ( 10 )
57+ . background ( brandGradient)
58+ . clipShape ( RoundedRectangle ( cornerRadius: 12 , style: . continuous) )
59+ . shadow ( color: Color . black. opacity ( 0.1 ) , radius: 6 , x: 0 , y: 4 )
4660 }
4761 . accessibilityIdentifier ( " detail_add_to_cart_button " )
48- Button ( action: {
49- isFavorite. toggle ( )
50- // TODO: Update favorite state in model/service
51- } ) {
52- Image ( systemName: isFavorite ? " heart.fill " : " heart " )
53- . foregroundColor ( isFavorite ? . red : . gray)
54- . padding ( )
55- . background ( Color . white)
56- . clipShape ( Circle ( ) )
57- . shadow ( radius: 2 )
58- }
59- . accessibilityIdentifier ( " detail_favorite_button " )
6062 }
63+
64+ // DESCRIPTION SECTION
65+ VStack ( alignment: . leading, spacing: 8 ) {
66+ Text ( " DESCRIPTION " )
67+ . font ( . system( size: 16 , weight: . bold, design: . rounded) )
68+ . foregroundColor ( . primary)
69+ Text ( product. description)
70+ . font ( AppFont . body)
71+ . foregroundColor ( . primary)
72+ Text ( " Purpose: Built for runners who want a confident daily trainer — mixing cushioned comfort with stable transitions. Great for road mileage, recovery days, and tempo efforts. The engineered upper provides breathable support; the midsole geometry keeps your stride smooth and efficient. " )
73+ . font ( AppFont . body)
74+ . foregroundColor ( . secondary)
75+ }
76+ . padding ( . top, 4 )
77+
6178 if showAddedToCart {
6279 Text ( " Added to cart! " )
6380 . foregroundColor ( . accentGreen)
6481 . font ( . caption)
6582 . transition ( . opacity)
66- . padding ( . top, 4 )
6783 }
84+
6885 Spacer ( )
6986 }
7087 . padding ( . horizontal)
88+ . padding ( . vertical, 16 )
7189 }
7290 . background ( Color . backgroundPrimary)
7391 . navigationTitle ( product. name)
0 commit comments