42 lines
2.0 KiB
TypeScript
42 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { ArrowRight, Play } from 'lucide-react';
|
|
|
|
const HeroBillboard: React.FC = () => {
|
|
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>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white to-transparent"></div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default HeroBillboard; |