68 lines
2.4 KiB
React
68 lines
2.4 KiB
React
"use client";
|
|
|
|
import React from "react";
|
|
import Image from "next/image";
|
|
import { MailIcon, LinkedinIcon, GithubIcon } from "lucide-react";
|
|
|
|
const Contact = () => {
|
|
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">
|
|
{/* Contact section title */}
|
|
<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 flex-col md:flex-row justify-center md:justify-between items-center gap-12">
|
|
<div className="w-full md:w-1/2 lg:w-2/5 flex justify-center">
|
|
<div className="bg-white p-6 rounded-xl shadow-xl border border-gray-100 flex flex-col gap-4 max-w-sm w-full">
|
|
{/* Mail contact */}
|
|
<div className="flex items-center text-gray-700 font-mulish text-lg">
|
|
<MailIcon
|
|
className="mr-3 text-blue-500 flex-shrink-0"
|
|
size={24}
|
|
/>{" "}
|
|
{/* Added flex-shrink-0 */}
|
|
<p className="min-w-0 break-words">
|
|
valentin78.massonniere@gmail.com
|
|
</p>{" "}
|
|
{/* Added min-w-0 and break-words */}
|
|
</div>
|
|
|
|
{/* Discord contact */}
|
|
<div className="flex items-center text-gray-700 font-mulish text-lg">
|
|
<GithubIcon className="mr-3 text-blue-500" size={24} />
|
|
<p>TheValll</p>
|
|
</div>
|
|
|
|
{/* LinkedIn contact */}
|
|
<div className="flex items-center text-gray-700 font-mulish text-lg">
|
|
<LinkedinIcon className="mr-3 text-blue-500" size={24} />
|
|
<p>Valentin MASSONNIERE</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative w-full md:w-1/2 lg:w-3/5 hidden md:flex justify-center items-center">
|
|
<Image
|
|
src="/assets/img/contact.png"
|
|
alt="Contact illustration"
|
|
width={400}
|
|
height={400}
|
|
className="z-10 max-w-full h-auto rounded-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Contact;
|