31 lines
1.4 KiB
TypeScript
31 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
|
|
const HeroBillboard = () => {
|
|
return (
|
|
<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 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;
|