import React from 'react'
import 'animate.css';
import { TypeAnimation } from 'react-type-animation'
import {FaCss3Alt, FaBootstrap, FaReact, FaTwitter, FaFacebook, FaInstagram, FaLinkedinIn } from 'react-icons/fa'
import { AiOutlineHtml5 } from 'react-icons/ai'
import { BiLogoTailwindCss, BiLogoPhp, BiLogoGraphql } from 'react-icons/bi'
import { RiJavascriptFill } from 'react-icons/ri'
import { SiExpo, SiExpress } from 'react-icons/si'
import { GrNode } from 'react-icons/gr'
import Profilecartoon from '../assets/Profilecartoon.jpg'
import Descargas from '../assets/descargas.png'
export const Main = () => {
return (
<div id='main' className="relative h-screen flex flex-col lg:flex-row">
<div className='w-full lg:w-1/2 h-1/2 lg:h-full p-2 sm:p-4 lg:p-8 flex justify-center items-center'>
<img
className='animate__animated animate__rotateInDownLeft object-contain w-full md:w-auto h-full '
src={ Profilecartoon }
alt='/'
/>
</div>
<div className=" w-full lg:w-1/2 h-1/2 lg:h-full sm:p-8 flex flex-col justify-center items-center">
<h1 className="animate__animated animate__slideInDown text-4xl text-3x1 font-bold text-gray-800 mt-2 sm:mt-4 lg:mt-0 text-center">
Hi, my name is José Goncalves,
</h1>
<h2 className='flex text-3xl text-2x1 pt-2 sm:pt-4 '>
I'm a
<TypeAnimation
sequence={[
'FullStack',
2000,
'UX',
2000,
'Project Manager',
2000,
]}
wrapper='div'
repeat={ Infinity }
cursor={true}
style={{fontSize: '0.9em', paddingLeft: '5px' }}
/>
</h2>
<div className='grid grid-flow-col grid-cols-3 gap-2 auto-rows-max col-span-2 mb-0'>
<a href="#" className="w-full mb-0 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
<AiOutlineHtml5 />
<div class="text-left">
<div class="ml-2 font-sans text-sm font-semibold">HTML</div>
</div>
</a>
<a href="#" className="w-full mb-0 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
<FaCss3Alt />
<div class="text-left">
<div className="ml-2 font-sans text-sm font-semibold">CSS</div>
</div>
</a>
<a href="#" className="w-full mb-0 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
<RiJavascriptFill />
<div className="text-left">
<div className="ml-2 font-sans text-sm font-semibold">Javascript</div>
</div>
</a>
<a href="#" className="w-full mb-0 mt- w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
<FaBootstrap />
<div className="text-left">
<div className="ml-2 font-sans text-sm font-semibold">Bootstrap</div>
</div>
</a>
<a href="#" className="w-full mb-8 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
<BiLogoTailwindCss />
<div class="text-left">
<div class="ml-2 font-sans text-sm font-semibold">TailWind</div>
</div>
</a>
<a href="#" className="w-full mb-8 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
<BiLogoPhp />
<div class="text-left">
<div className="ml-2 font-sans text-sm font-semibold">PHP</div>
</div>
</a>
</div>
<div className='grid grid-flow-col grid-cols-3 gap-2 auto-rows-max col-span-2 mt-0'>
<a href="#" className="w-full mb-0 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
<FaReact />
<div className="text-left">
<div className="ml-2 font-sans text-sm font-semibold">React</div>
</div>
</a>
<a href="#" className="w-full mb-0 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
<FaReact />
<div className="text-left">
<div className="ml-2 font-sans text-sm font-semibold">React Native</div>
</div>
</a>
<a href="#" className="w-full mb-8 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
<BiLogoGraphql />
<div className="text-left">
<div className="ml-2 font-sans text-sm font-semibold">Graphql</div>
</div>
</a>
<a href="#" className="w-full mb-8 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
<SiExpo />
<div className="text-left">
<div className="ml-2 font-sans text-sm font-semibold">Expo</div>
</div>
</a>
<a href="#" className="w-full mb-8 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
<GrNode />
<div className="text-left">
<div className="ml-2 font-sans text-sm font-semibold">Node</div>
</div>
</a>
<a href="#" className="w-full mb-8 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
<SiExpress />
<div className="text-left">
<div className="ml-2 font-sans text-sm font-semibold">Express</div>
</div>
</a>
</div>
<p className="flex mt-0 mb-8 text-lg sm:mb-12 pt-4 items-justify">
Full Stack Web Developer with a Passion for creating Engage and User Experiences. Let's JOIN forces and bring your digital
dreams to frution, get in touch, and let's embark on this exciting journey together.
</p>
<div className='flex items-center sm:flex-row justify-center justify-between space-x-4 sm:space-x-6'>
<button className='flex bg-[#040404] text-white w-full sm:w-auto px-6 py-3 rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-700'>
Resume
<img className="ml-2 mt-1 animate-bounce" src={Descargas} />
</button>
<button className='text-black outline outline-[#040404] w-full sm:w-auto px-6 py-3 rounded-lg'>
Contact
</button>
</div>
</div>
</div>
)
}