import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Container(
      color: const Color.fromARGB(255, 96, 106, 114),
      child: Center(
        child: Column(
          children: [
          const  Text(
              'Brand',
              style: TextStyle(
                color: Colors.white,
                fontSize: 100,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                letterSpacing: 2.0,
              decoration: TextDecoration.none
              ),
            ),
         const   Text(
              'builder',
              style: TextStyle(
                color: Colors.white,
                fontSize: 60,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                letterSpacing: 2.0,
           decoration: TextDecoration.none
              ),
            ),
         const   Text(
              'an IT company',
              style: TextStyle(
                color: Colors.white,
                fontSize: 18,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                letterSpacing: 2.0,
                decoration: TextDecoration.none
              ),
            ),
          const  SizedBox(height: 30),
           const  Text(
              'Our services',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
                decoration: TextDecoration.none,
              ),
            ),
         const   SizedBox(height: 20),
            Wrap(
              alignment: WrapAlignment.start,
              spacing: 20, // Adjust spacing between service items
              runSpacing: 20, // Adjust run spacing
              children: [
              
                ServiceItem(
                  icon: Icons.palette,
                  text: 'Branding',
                ),
                ServiceItem(
                  icon: Icons.design_services,
                  text: 'UX/UI Design',
                ),
                ServiceItem(
                  icon: Icons.mobile_screen_share,
                  text: 'Mobile App Development',
                ),
                ServiceItem(
                  icon: Icons.storage,
                  text: 'Server Management',
                ),
                  ServiceItem(
                  icon: Icons.shop,
                  text: 'Digital Marketing',
                ),
                // Add more services here
              ],
            ),
          ],
        ),
      ),
    ),
  ));
}

class ServiceItem extends StatelessWidget {
  final IconData icon;
  final String text;

  ServiceItem({required this.icon, required this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 160.0, // Adjust the width of each service box
      height: 160.0, // Adjust the height of each service box
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.white,
          width: 2.0,
        ),
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            icon,
            color: Colors.white,
            size: 40,
          ),
          const SizedBox(height: 5),
          Text(
            text,
            textAlign: TextAlign.center,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 14,
              decoration: TextDecoration.none,
              fontWeight: FontWeight.bold,
              letterSpacing: 1.0,
              shadows: [
                Shadow(
                  color: Colors.black,
                  blurRadius: 3.0,
                  offset: Offset(2, 2),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}