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

---
 src/components/sections/hero/HeroBillboard.js | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/components/sections/hero/HeroBillboard.js

diff --git a/src/components/sections/hero/HeroBillboard.js b/src/components/sections/hero/HeroBillboard.js
new file mode 100644
index 0000000..8f47c5a
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboard.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { ArrowRight } from 'lucide-react';
+
+function 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>
+          
+          <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>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default HeroBillboard;
\ No newline at end of file