development/30824afc-4520-47fa-bb50-b301d7294c39
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/components/sections/hero/HeroBillboard.js

Browse Source
This commit is contained in:
development
2026-01-20 13:59:48 +00:00
parent a1e797c027
commit c39e6f2456
1 changed files with 48 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/sections/hero/HeroBillboard.js
View File

@@ -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;
{/* 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;