59 lines
3.1 KiB
TypeScript
59 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { ArrowRight, Download } from 'lucide-react';
|
|
|
|
const Hero: React.FC = () => {
|
|
return (
|
|
<section className="relative bg-background-light py-20 lg:py-32 overflow-hidden">
|
|
<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">
|
|
<div className="lg:grid lg:grid-cols-12 lg:gap-8 items-center">
|
|
<div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
|
|
<h1 className="text-4xl font-bold text-text sm:text-5xl lg:text-6xl">
|
|
<span className="block">Creative</span>
|
|
<span className="block text-other">
|
|
Developer
|
|
</span>
|
|
</h1>
|
|
<p className="mt-6 text-lg text-lines sm:text-xl max-w-3xl">
|
|
I craft exceptional digital experiences through innovative web development,
|
|
combining cutting-edge technology with beautiful design to bring your ideas to life.
|
|
</p>
|
|
<div className="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<a
|
|
href="/portfolio"
|
|
className="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-background bg-other hover:bg-lines focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-other transition-all duration-200 transform hover:scale-105"
|
|
>
|
|
View My Work
|
|
<ArrowRight className="ml-2 h-5 w-5" aria-hidden="true" />
|
|
</a>
|
|
<a
|
|
href="/resume.pdf"
|
|
className="inline-flex items-center justify-center px-6 py-3 border-2 border-lines text-base font-medium rounded-lg text-text bg-transparent hover:bg-background hover:border-other hover:text-other focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-other transition-all duration-200"
|
|
>
|
|
<Download className="mr-2 h-5 w-5" aria-hidden="true" />
|
|
Download Resume
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
|
|
<div className="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
|
|
<div className="relative block w-full bg-boxes rounded-lg overflow-hidden">
|
|
<img
|
|
className="w-full h-96 object-cover"
|
|
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
|
|
alt="Professional developer portrait"
|
|
loading="lazy"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-tr from-boxes/40 to-other/20"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Hero; |