|
1 | 1 | { |
2 | 2 | "type": "div", |
3 | | - "className": "min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-orange-50 p-6", |
| 3 | + "className": "min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-orange-100 p-6 md:p-8", |
4 | 4 | "body": [ |
5 | 5 | { |
6 | 6 | "type": "div", |
7 | | - "className": "max-w-7xl mx-auto space-y-6", |
| 7 | + "className": "max-w-7xl mx-auto space-y-8", |
8 | 8 | "body": [ |
9 | 9 | { |
10 | 10 | "type": "div", |
11 | | - "className": "flex justify-between items-center", |
| 11 | + "className": "flex flex-col md:flex-row justify-between items-start md:items-center gap-4 backdrop-blur-sm bg-white/40 p-6 rounded-2xl border border-white/60 shadow-lg", |
12 | 12 | "body": [ |
13 | 13 | { |
14 | 14 | "type": "div", |
15 | | - "className": "space-y-1", |
| 15 | + "className": "space-y-2", |
16 | 16 | "body": [ |
17 | 17 | { |
18 | 18 | "type": "text", |
19 | | - "content": "E-Commerce Dashboard", |
20 | | - "className": "text-3xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent" |
| 19 | + "content": "🛍️ E-Commerce Dashboard", |
| 20 | + "className": "text-4xl font-extrabold bg-gradient-to-r from-purple-600 via-pink-600 to-orange-600 bg-clip-text text-transparent" |
21 | 21 | }, |
22 | 22 | { |
23 | 23 | "type": "text", |
24 | 24 | "content": "Monitor your store performance in real-time", |
25 | | - "className": "text-gray-600" |
| 25 | + "className": "text-gray-600 font-medium" |
26 | 26 | } |
27 | 27 | ] |
28 | 28 | }, |
29 | 29 | { |
30 | 30 | "type": "flex", |
31 | 31 | "direction": "row", |
32 | | - "gap": 2, |
| 32 | + "gap": 3, |
33 | 33 | "children": [ |
34 | 34 | { |
35 | 35 | "type": "button", |
36 | | - "label": "Download Report", |
| 36 | + "label": "📥 Download Report", |
37 | 37 | "variant": "outline", |
38 | | - "className": "border-purple-200" |
| 38 | + "className": "border-purple-200 hover:bg-purple-50 shadow-sm hover:shadow-md transition-all" |
39 | 39 | }, |
40 | 40 | { |
41 | 41 | "type": "button", |
42 | | - "label": "View Details", |
43 | | - "className": "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700" |
| 42 | + "label": "📊 View Details", |
| 43 | + "className": "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700 shadow-lg hover:shadow-xl transition-all" |
44 | 44 | } |
45 | 45 | ] |
46 | 46 | } |
|
53 | 53 | "children": [ |
54 | 54 | { |
55 | 55 | "type": "card", |
56 | | - "className": "bg-gradient-to-br from-blue-500 to-blue-600 p-6 text-white shadow-lg hover:shadow-xl transition-shadow", |
| 56 | + "className": "bg-gradient-to-br from-blue-500 via-blue-600 to-indigo-600 p-8 text-white shadow-2xl hover:shadow-3xl transition-all hover:-translate-y-1 duration-300 rounded-2xl relative overflow-hidden", |
57 | 57 | "body": { |
58 | 58 | "type": "div", |
59 | | - "className": "space-y-3", |
| 59 | + "className": "space-y-4 relative z-10", |
60 | 60 | "body": [ |
61 | 61 | { |
62 | 62 | "type": "flex", |
|
66 | 66 | "children": [ |
67 | 67 | { |
68 | 68 | "type": "text", |
69 | | - "content": "Total Sales", |
70 | | - "className": "text-sm font-medium text-blue-100" |
| 69 | + "content": "TOTAL SALES", |
| 70 | + "className": "text-xs font-black text-blue-100 uppercase tracking-widest" |
71 | 71 | }, |
72 | 72 | { |
73 | | - "type": "icon", |
74 | | - "name": "TrendingUp", |
75 | | - "className": "w-5 h-5 text-blue-100" |
| 73 | + "type": "div", |
| 74 | + "className": "p-2 bg-white/20 backdrop-blur rounded-full", |
| 75 | + "body": [ |
| 76 | + { |
| 77 | + "type": "icon", |
| 78 | + "name": "TrendingUp", |
| 79 | + "className": "w-5 h-5 text-white" |
| 80 | + } |
| 81 | + ] |
76 | 82 | } |
77 | 83 | ] |
78 | 84 | }, |
79 | 85 | { |
80 | 86 | "type": "text", |
81 | 87 | "content": "$124,563", |
82 | | - "className": "text-4xl font-bold" |
| 88 | + "className": "text-5xl font-black tracking-tight" |
83 | 89 | }, |
84 | 90 | { |
85 | | - "type": "text", |
86 | | - "content": "+25% from last week", |
87 | | - "className": "text-sm text-blue-100" |
| 91 | + "type": "div", |
| 92 | + "className": "flex items-center gap-2", |
| 93 | + "body": [ |
| 94 | + { |
| 95 | + "type": "div", |
| 96 | + "className": "px-2 py-1 bg-white/30 backdrop-blur rounded-full", |
| 97 | + "body": [ |
| 98 | + { |
| 99 | + "type": "text", |
| 100 | + "content": "+25%", |
| 101 | + "className": "text-xs font-bold" |
| 102 | + } |
| 103 | + ] |
| 104 | + }, |
| 105 | + { |
| 106 | + "type": "text", |
| 107 | + "content": "from last week", |
| 108 | + "className": "text-sm text-blue-100 font-medium" |
| 109 | + } |
| 110 | + ] |
88 | 111 | } |
89 | 112 | ] |
90 | 113 | } |
91 | 114 | }, |
92 | 115 | { |
93 | 116 | "type": "card", |
94 | | - "className": "bg-gradient-to-br from-green-500 to-emerald-600 p-6 text-white shadow-lg hover:shadow-xl transition-shadow", |
| 117 | + "className": "bg-gradient-to-br from-green-500 via-emerald-600 to-teal-600 p-8 text-white shadow-2xl hover:shadow-3xl transition-all hover:-translate-y-1 duration-300 rounded-2xl relative overflow-hidden", |
95 | 118 | "body": { |
96 | 119 | "type": "div", |
97 | | - "className": "space-y-3", |
| 120 | + "className": "space-y-4 relative z-10", |
98 | 121 | "body": [ |
99 | 122 | { |
100 | 123 | "type": "flex", |
|
104 | 127 | "children": [ |
105 | 128 | { |
106 | 129 | "type": "text", |
107 | | - "content": "New Customers", |
108 | | - "className": "text-sm font-medium text-green-100" |
| 130 | + "content": "NEW CUSTOMERS", |
| 131 | + "className": "text-xs font-black text-green-100 uppercase tracking-widest" |
109 | 132 | }, |
110 | 133 | { |
111 | | - "type": "icon", |
112 | | - "name": "UserPlus", |
113 | | - "className": "w-5 h-5 text-green-100" |
| 134 | + "type": "div", |
| 135 | + "className": "p-2 bg-white/20 backdrop-blur rounded-full", |
| 136 | + "body": [ |
| 137 | + { |
| 138 | + "type": "icon", |
| 139 | + "name": "UserPlus", |
| 140 | + "className": "w-5 h-5 text-white" |
| 141 | + } |
| 142 | + ] |
114 | 143 | } |
115 | 144 | ] |
116 | 145 | }, |
117 | 146 | { |
118 | 147 | "type": "text", |
119 | 148 | "content": "1,429", |
120 | | - "className": "text-4xl font-bold" |
| 149 | + "className": "text-5xl font-black tracking-tight" |
121 | 150 | }, |
122 | 151 | { |
123 | | - "type": "text", |
124 | | - "content": "+18% from last week", |
125 | | - "className": "text-sm text-green-100" |
| 152 | + "type": "div", |
| 153 | + "className": "flex items-center gap-2", |
| 154 | + "body": [ |
| 155 | + { |
| 156 | + "type": "div", |
| 157 | + "className": "px-2 py-1 bg-white/30 backdrop-blur rounded-full", |
| 158 | + "body": [ |
| 159 | + { |
| 160 | + "type": "text", |
| 161 | + "content": "+18%", |
| 162 | + "className": "text-xs font-bold" |
| 163 | + } |
| 164 | + ] |
| 165 | + }, |
| 166 | + { |
| 167 | + "type": "text", |
| 168 | + "content": "from last week", |
| 169 | + "className": "text-sm text-green-100 font-medium" |
| 170 | + } |
| 171 | + ] |
126 | 172 | } |
127 | 173 | ] |
128 | 174 | } |
129 | 175 | }, |
130 | 176 | { |
131 | 177 | "type": "card", |
132 | | - "className": "bg-gradient-to-br from-orange-500 to-red-600 p-6 text-white shadow-lg hover:shadow-xl transition-shadow", |
| 178 | + "className": "bg-gradient-to-br from-orange-500 via-red-600 to-pink-600 p-8 text-white shadow-2xl hover:shadow-3xl transition-all hover:-translate-y-1 duration-300 rounded-2xl relative overflow-hidden", |
133 | 179 | "body": { |
134 | 180 | "type": "div", |
135 | | - "className": "space-y-3", |
| 181 | + "className": "space-y-4 relative z-10", |
136 | 182 | "body": [ |
137 | 183 | { |
138 | 184 | "type": "flex", |
|
142 | 188 | "children": [ |
143 | 189 | { |
144 | 190 | "type": "text", |
145 | | - "content": "Pending Orders", |
146 | | - "className": "text-sm font-medium text-orange-100" |
| 191 | + "content": "PENDING ORDERS", |
| 192 | + "className": "text-xs font-black text-orange-100 uppercase tracking-widest" |
147 | 193 | }, |
148 | 194 | { |
149 | | - "type": "icon", |
150 | | - "name": "Clock", |
| 195 | + "type": "div", |
| 196 | + "className": "p-2 bg-white/20 backdrop-blur rounded-full", |
| 197 | + "body": [ |
| 198 | + { |
| 199 | + "type": "icon", |
| 200 | + "name": "Clock", |
| 201 | + "className": "w-5 h-5 text-white" |
| 202 | + } |
| 203 | + ] |
| 204 | + } |
| 205 | + ] |
| 206 | + }, |
| 207 | + { |
| 208 | + "type": "text", |
| 209 | + "content": "342", |
| 210 | + "className": "text-5xl font-black tracking-tight" |
| 211 | + }, |
| 212 | + { |
| 213 | + "type": "div", |
| 214 | + "className": "flex items-center gap-2", |
| 215 | + "body": [ |
| 216 | + { |
| 217 | + "type": "div", |
| 218 | + "className": "px-2 py-1 bg-white/30 backdrop-blur rounded-full", |
| 219 | + "body": [ |
| 220 | + { |
| 221 | + "type": "text", |
| 222 | + "content": "+12", |
| 223 | + "className": "text-xs font-bold" |
| 224 | + } |
| 225 | + ] |
| 226 | + }, |
| 227 | + { |
| 228 | + "type": "text", |
| 229 | + "content": "waiting for approval", |
| 230 | + "className": "text-sm text-orange-100 font-medium" |
| 231 | + } |
| 232 | + ] |
| 233 | + } |
| 234 | + ] |
| 235 | + } |
| 236 | + } |
| 237 | + ] |
| 238 | + }, |
151 | 239 | "className": "w-5 h-5 text-orange-100" |
152 | 240 | } |
153 | 241 | ] |
|
0 commit comments