add detail page

lib/widgets/detail_header.dart

@@ -0,0 +1,104 @@
+import 'package:flutter/material.dart';
+
+class DetailHeader extends StatelessWidget {
+  final String name;
+  final String type;
+  final String color;
+
+  const DetailHeader({
+    super.key,
+    required this.name,
+    required this.type,
+    required this.color,
+  });
+
+  Color _getColorFromString(String colorName) {
+    final colorMap = {
+      'red': Colors.red,
+      'blue': Colors.blue,
+      'green': Colors.green,
+      'yellow': Colors.yellow,
+      'black': Colors.black,
+      'white': Colors.white,
+      'orange': Colors.orange,
+      'purple': Colors.purple,
+      'pink': Colors.pink,
+      'grey': Colors.grey,
+      'brown': Colors.brown,
+    };
+    return colorMap[colorName.toLowerCase()] ?? Colors.grey;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.all(24),
+      decoration: BoxDecoration(
+        gradient: LinearGradient(
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+          colors: [
+            _getColorFromString(color).withAlpha(100),
+            _getColorFromString(color).withAlpha(50),
+          ],
+        ),
+        borderRadius: BorderRadius.only(
+          bottomLeft: Radius.circular(32),
+          bottomRight: Radius.circular(32),
+        ),
+      ),
+      child: Column(
+        children: [
+          // Color circle
+          Container(
+            width: 100,
+            height: 100,
+            decoration: BoxDecoration(
+              color: _getColorFromString(color),
+              shape: BoxShape.circle,
+              border: Border.all(
+                color: Colors.white,
+                width: 4,
+              ),
+              boxShadow: [
+                BoxShadow(
+                  color: _getColorFromString(color).withAlpha(120),
+                  blurRadius: 20,
+                  spreadRadius: 5,
+                ),
+              ],
+            ),
+          ),
+          SizedBox(height: 16),
+          // Name
+          Text(
+            name,
+            style: TextStyle(
+              fontSize: 28,
+              fontWeight: FontWeight.bold,
+              color: Colors.grey.shade800,
+            ),
+            textAlign: TextAlign.center,
+          ),
+          SizedBox(height: 8),
+          // Type badge
+          Container(
+            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 6),
+            decoration: BoxDecoration(
+              color: _getColorFromString(color).withAlpha(120),
+              borderRadius: BorderRadius.circular(20),
+            ),
+            child: Text(
+              type,
+              style: TextStyle(
+                fontSize: 16,
+                fontWeight: FontWeight.w600,
+                color: _getColorFromString(color).withAlpha(180),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}