development/91b18844-c148-4ae0-9a69-cc57582d450b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
development
2026-01-20 15:23:50 +00:00
parent 17a028c25a
commit 719dd4f0ec
1 changed files with 21 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/sections/hero/HeroBillboard.tsx
View File

@@ -1,42 +1,30 @@
import React from 'react';
import { ArrowRight, Play } from 'lucide-react';
const HeroBillboard: React.FC = () => {
const HeroBillboard = () => {
return (
<section className="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 to-purple-600/10"></div>
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div className="space-y-8">
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-gray-900 leading-tight">
Build the Future
<span className="block bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
Today
</span>
</h1>
<p className="max-w-3xl mx-auto text-lg md:text-xl text-gray-600 leading-relaxed">
Transform your ideas into reality with our cutting-edge technology solutions.
Experience the power of innovation at your fingertips.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
<button className="inline-flex items-center px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors duration-200 group">
Get Started
<ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform duration-200" />
</button>
<button className="inline-flex items-center px-8 py-4 bg-white text-gray-900 font-semibold rounded-lg border-2 border-gray-300 hover:border-gray-400 transition-colors duration-200 group">
<Play className="mr-2 h-5 w-5" />
Watch Demo
</button>
</div>
<section className="relative min-h-screen flex items-center justify-center bg-black text-white overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 to-blue-900/20"></div>
<div className="relative z-10 text-center px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">
<h1 className="text-4xl sm:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
Welcome to the Future
</h1>
<p className="text-lg sm:text-xl lg:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto">
Experience cutting-edge design and technology that transforms your digital presence.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<button className="px-8 py-3 bg-white text-black font-semibold rounded-lg hover:bg-gray-100 transition-colors">
Get Started
</button>
<button className="px-8 py-3 border border-white text-white font-semibold rounded-lg hover:bg-white hover:text-black transition-colors">
Learn More
</button>
</div>
</div>
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white to-transparent"></div>
<div className="absolute inset-0 opacity-10">
<div className="w-full h-full bg-gradient-to-br from-purple-500 via-blue-500 to-cyan-500 animate-pulse"></div>
</div>
</section>
);
};
export default HeroBillboard;
export default HeroBillboard;