make the hero section more attractive and maybe add pictures of web development

index.html

@@ -13,7 +13,19 @@
         .magic-gradient {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         }
-        .card-hover {
+        @keyframes blob {
+            0% { transform: translate(0px, 0px) scale(1); }
+            33% { transform: translate(30px, -50px) scale(1.1); }
+            66% { transform: translate(-20px, 20px) scale(0.9); }
+            100% { transform: translate(0px, 0px) scale(1); }
+        }
+        .animate-blob {
+            animation: blob 7s infinite;
+        }
+        .animation-delay-2000 {
+            animation-delay: 2s;
+        }
+.card-hover {
             transition: all 0.3s ease;
         }
         .card-hover:hover {
@@ -32,7 +44,7 @@
                 <div class="flex">
                     <div class="flex-shrink-0 flex items-center">
                         <i data-feather="code" class="h-8 w-8 text-purple-600"></i>
-                        <span class="ml-2 text-xl font-bold text-gray-900">WizzyWeb</span>
+                        <span class="ml-2 text-xl font-bold text-gray-900">BARQ</span>
                     </div>
                 </div>
                 <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
@@ -50,36 +62,58 @@
             </div>
         </div>
     </nav>
-
     <!-- Hero Section -->
-    <div class="relative z-10">
+    <div class="relative z-10 overflow-hidden">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
-            <div class="text-center">
-                <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-gray-900">
-                    <span class="block">Pixel Wizardry by</span>
-                    <span class="block text-transparent bg-clip-text magic-gradient">[Your Name]</span>
-                </h1>
-                <p class="mt-6 max-w-lg mx-auto text-xl text-gray-600">
-                    Turning caffeine into clean code and wild ideas into pixel-perfect realities.
-</p>
-                <div class="mt-10 flex justify-center">
-                    <div class="inline-flex rounded-md shadow">
-                        <a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white magic-gradient hover:opacity-90 md:py-4 md:text-lg md:px-10">
-                            View My Work
-                        </a>
+            <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
+                <div>
+                    <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-gray-900">
+                        <span class="block">Crafting Digital</span>
+                        <span class="block text-transparent bg-clip-text magic-gradient">Masterpieces</span>
+                    </h1>
+                    <p class="mt-6 max-w-lg text-xl text-gray-600">
+                        Where code meets creativity - building breathtaking web experiences that convert visitors into customers.
+                    </p>
+                    <div class="mt-10 flex flex-wrap gap-4">
+                        <div class="inline-flex rounded-md shadow">
+                            <a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white magic-gradient hover:opacity-90 md:py-4 md:text-lg md:px-10">
+                                View Portfolio
+                            </a>
+                        </div>
+                        <div class="inline-flex">
+                            <a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-purple-700 bg-purple-100 hover:bg-purple-200 md:py-4 md:text-lg md:px-10">
+                                <i data-feather="message-square" class="w-5 h-5 mr-2"></i>
+                                Get Free Quote
+                            </a>
+                        </div>
                     </div>
-                    <div class="ml-3 inline-flex">
-                        <a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-purple-700 bg-purple-100 hover:bg-purple-200 md:py-4 md:text-lg md:px-10">
-                            <i data-feather="message-square" class="w-5 h-5 mr-2"></i>
-                            Let's Talk
-</a>
+                </div>
+                <div class="mt-12 lg:mt-0">
+                    <div class="relative">
+                        <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
+                        <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
+                        <div class="relative rounded-2xl bg-white p-2 shadow-xl border border-gray-100">
+                            <div class="grid grid-cols-2 gap-2">
+                                <div class="rounded-lg overflow-hidden">
+                                    <img src="http://static.photos/technology/640x360/1" alt="Web Development" class="w-full h-full object-cover">
+                                </div>
+                                <div class="rounded-lg overflow-hidden">
+                                    <img src="http://static.photos/workspace/640x360/2" alt="UI Design" class="w-full h-full object-cover">
+                                </div>
+                                <div class="rounded-lg overflow-hidden">
+                                    <img src="http://static.photos/code/640x360/3" alt="Coding" class="w-full h-full object-cover">
+                                </div>
+                                <div class="rounded-lg overflow-hidden">
+                                    <img src="http://static.photos/office/640x360/4" alt="Development" class="w-full h-full object-cover">
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-
-    <!-- Features Section -->
+<!-- Features Section -->
     <div class="relative z-10 py-12 bg-white/80 backdrop-blur-sm">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="lg:text-center">