77 lines
2.6 KiB
React
77 lines
2.6 KiB
React
"use client";
|
|
|
|
import React from "react";
|
|
import { Mail, MailOpen, LinkedinIcon, GithubIcon } from "lucide-react";
|
|
|
|
const Contact = () => {
|
|
const itemClass =
|
|
"group relative flex items-center gap-3 text-gray-700 font-mulish text-lg rounded-lg px-3 py-2 -mx-3 transition-colors duration-300 hover:text-blue-600";
|
|
|
|
return (
|
|
<section
|
|
id="contactScroll"
|
|
className="mx-auto flex justify-center py-20 px-4 md:px-8 bg-gray-50 rounded-lg shadow-inner"
|
|
>
|
|
<div className="w-full max-w-6xl">
|
|
<h3 className="text-2xl font-poppins text-blue-500 mb-4 font-extrabold text-center">
|
|
Contact
|
|
</h3>
|
|
<p className="text-gray-700 font-poppins text-xl mt-5 font-semibold text-center mb-12">
|
|
Feel free to contact me!
|
|
</p>
|
|
|
|
<div className="flex justify-center">
|
|
<div className="bg-white p-8 rounded-xl shadow-xl border border-gray-100 flex flex-col gap-4 w-full max-w-md">
|
|
<a
|
|
href="mailto:contact@valentin-massonniere.ch"
|
|
className={itemClass}
|
|
>
|
|
<span className="relative flex-shrink-0 w-6 h-6 text-blue-500">
|
|
<Mail
|
|
className="absolute inset-0 transition-opacity duration-300 ease-out group-hover:opacity-0"
|
|
size={24}
|
|
/>
|
|
<MailOpen
|
|
className="absolute inset-0 opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-100"
|
|
size={24}
|
|
/>
|
|
</span>
|
|
<span className="relative min-w-0 break-words">
|
|
contact@valentin-massonniere.ch
|
|
</span>
|
|
</a>
|
|
|
|
<a
|
|
href="https://github.com/TheValll"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={itemClass}
|
|
>
|
|
<GithubIcon
|
|
className="relative flex-shrink-0 text-blue-500"
|
|
size={24}
|
|
/>
|
|
<span className="relative">TheValll</span>
|
|
</a>
|
|
|
|
<a
|
|
href="https://www.linkedin.com/in/valentin-massonniere/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={itemClass}
|
|
>
|
|
<LinkedinIcon
|
|
className="relative flex-shrink-0 text-blue-500"
|
|
size={24}
|
|
/>
|
|
<span className="relative">Valentin MASSONNIERE</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Contact;
|