From c39e6f2456da903132a8576f3bb80d1bf38e2c5a Mon Sep 17 00:00:00 2001
From: development <mulikavj@gmail.com>
Date: Tue, 20 Jan 2026 13:59:48 +0000
Subject: [PATCH] Update src/components/sections/hero/HeroBillboard.js

---
 src/components/sections/hero/HeroBillboard.js | 86 +++++++++++--------
 1 file changed, 48 insertions(+), 38 deletions(-)

diff --git a/src/components/sections/hero/HeroBillboard.js b/src/components/sections/hero/HeroBillboard.js
index 8f47c5a..7eb3db1 100644
--- a/src/components/sections/hero/HeroBillboard.js
+++ b/src/components/sections/hero/HeroBillboard.js
@@ -1,45 +1,55 @@
 import React from 'react';
-import { ArrowRight } from 'lucide-react';
+import { Play, ChevronDown } from 'lucide-react';
 
-function HeroBillboard() {
+const HeroBillboard = () => {
   return (
-    <div className="relative bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex items-center">
-      <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
-      
-      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-        <div className="max-w-4xl mx-auto">
-          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
-            Build Amazing
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600"> Web Experiences</span>
-          </h1>
+    <section className="relative h-screen flex items-center justify-center overflow-hidden">
+      {/* Background Image */}
+      <div className="absolute inset-0 z-0">
+        <img
+          src="/images/placeholder.webp"
+          alt="Hero Background"
+          className="w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 bg-black/40"></div>
+      </div>
+
+      {/* Content */}
+      <div className="relative z-10 text-center text-white max-w-4xl mx-auto px-4">
+        <h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight">
+          Innovation
+          <span className="block text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-600">
+            Redefined
+          </span>
+        </h1>
+        
+        <p className="text-xl md:text-2xl mb-8 text-gray-200 max-w-2xl mx-auto">
+          Experience the future of technology with our cutting-edge solutions designed to transform your digital landscape.
+        </p>
+
+        {/* CTA Buttons */}
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+          <button className="bg-white text-black px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition-all duration-300 transform hover:scale-105">
+            Get Started
+          </button>
           
-          <p className="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">
-            Create stunning, responsive websites with our modern component library. 
-            Fast, accessible, and beautifully designed.
-          </p>
-          
-          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-            <button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-colors flex items-center gap-2">
-              Get Started
-              <ArrowRight size={20} />
-            </button>
-            
-            <button className="border-2 border-gray-300 hover:border-gray-400 text-gray-700 px-8 py-4 rounded-lg font-semibold text-lg transition-colors">
-              View Demo
-            </button>
-          </div>
-          
-          <div className="mt-12">
-            <img
-              src="/images/header.e5c9eff6-1768917245945.webp"
-              alt="Hero Banner"
-              className="w-full max-w-4xl mx-auto rounded-lg shadow-2xl"
-            />
-          </div>
+          <button className="flex items-center gap-2 border-2 border-white text-white px-8 py-4 rounded-full font-semibold hover:bg-white hover:text-black transition-all duration-300">
+            <Play size={20} />
+            Watch Demo
+          </button>
         </div>
       </div>
-    </div>
-  );
-}
 
-export default HeroBillboard;
\ No newline at end of file
+      {/* Scroll Indicator */}
+      <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white animate-bounce">
+        <ChevronDown size={32} />
+      </div>
+
+      {/* Decorative Elements */}
+      <div className="absolute top-20 left-20 w-20 h-20 bg-blue-500/20 rounded-full blur-xl animate-pulse"></div>
+      <div className="absolute bottom-20 right-20 w-32 h-32 bg-purple-500/20 rounded-full blur-xl animate-pulse delay-1000"></div>
+    </section>
+  );
+};
+
+export default HeroBillboard;