diff --git a/src/components/sections/hero/HeroBillboard.js b/src/components/sections/hero/HeroBillboard.js
new file mode 100644
index 0000000..38b87fb
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboard.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { ArrowRight } from 'lucide-react';
+
+function HeroBillboard() {
+  return (
+    <section className="bg-gradient-to-br from-blue-50 to-indigo-100 py-20">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center">
+          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
+            Build Amazing <span className="text-blue-600">Web Experiences</span>
+          </h1>
+          <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
+            Create stunning websites and applications with our comprehensive component library and design system.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <button className="bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors flex items-center justify-center">
+              Get Started <ArrowRight className="ml-2" size={20} />
+            </button>
+            <button className="bg-white text-gray-700 px-8 py-3 rounded-lg font-semibold border border-gray-300 hover:bg-gray-50 transition-colors">
+              Learn More
+            </button>
+          </div>
+        </div>
+        <div className="mt-16">
+          <img src="/images/header.e5c9eff6-1768917228520.webp" alt="Hero" className="mx-auto rounded-lg shadow-2xl" />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default HeroBillboard;