From e3df7f27502810d9c3359ca04b19656c8b7fb5d3 Mon Sep 17 00:00:00 2001
From: Guilhermefariah <guilhermefaria321@gmail.com>
Date: Wed, 24 Jul 2024 22:58:34 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8Atualiza=20o=20componente=20Me?=
 =?UTF-8?q?ntoringView=20para=20aprimorar=20a=20est=C3=A9tica=20e=20a=20le?=
 =?UTF-8?q?gibilidade?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/(mentoring)/mentoring.view.tsx    | 57 +++++++++----------
 1 file changed, 28 insertions(+), 29 deletions(-)

diff --git a/frontend/src/app/(mentoring)/mentoring.view.tsx b/frontend/src/app/(mentoring)/mentoring.view.tsx
index 532ed39..5a13104 100644
--- a/frontend/src/app/(mentoring)/mentoring.view.tsx
+++ b/frontend/src/app/(mentoring)/mentoring.view.tsx
@@ -2,77 +2,76 @@ import Image from 'next/image'
 
 export function MentoringView() {
 	return (
-		<main className="flex items-center justify-center h-screen">
-			<div className="w-full max-w-xs">
-				<header className="flex justify-center items-center space-x-4 w-full text-center pb-4">
-					<Image src="/static/imgs/faladev.jpg" alt="" height="50" width="200" />
+		<main className="flex items-center justify-center min-h-screen bg-gray-100">
+			<div className="w-full max-w-md bg-white shadow-lg rounded-lg p-6 hover:shadow-blue-300">
+				<header className="flex justify-center items-center space-x-4 w-full text-center pb-6">
+					<Image src="/static/imgs/faladev.jpg" alt="FalaDev Logo" height="50" width="200" />
 				</header>
-				<form className="mt-5 bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
-					<div className="mb-4">
-						<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="name">
+				<form className="space-y-4">
+					<div className="mb-2">
+						<label className="block text-gray-800 text-lg font-semibold mb-2" htmlFor="name">
 							Nome
 						</label>
 						<input
-							className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+							className="block w-full py-3 px-4 border border-gray-300 rounded-lg shadow-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-300"
 							id="name"
 							type="text"
 							name="name"
+							placeholder="Digite seu nome"
 							required
 						/>
 					</div>
-					<div className="mb-4">
-						<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
+					<div className="mb-2">
+						<label className="block text-gray-800 text-lg font-semibold mb-2" htmlFor="email">
 							E-mail
 						</label>
 						<input
-							className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+							className="block w-full py-3 px-4 border border-gray-300 rounded-lg shadow-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-300"
 							id="email"
 							type="email"
 							name="email"
+							placeholder="Digite seu e-mail"
 							required
 						/>
 					</div>
-					<div className="mb-4">
-						<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="phone">
+					<div className="mb-2">
+						<label className="block text-gray-800 text-lg font-semibold mb-2" htmlFor="phone">
 							Telefone
 						</label>
 						<input
-							className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+							className="block w-full py-3 px-4 border border-gray-300 rounded-lg shadow-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-300"
 							id="phone"
 							type="text"
 							name="phone"
+							placeholder="Digite seu telefone"
 							required
 						/>
 					</div>
 					<div className="flex items-center justify-center">
 						<button
-							className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+							className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-300"
 							type="submit"
 						>
 							Quero participar
 						</button>
 					</div>
 				</form>
-				<hr className="mb-10" />
-				<footer className="flex justify-center items-center space-x-4 w-full text-center pb-4">
-					<a href="https://www.instagram.com/faladev.tech/" target="_blank" className="flex items-center space-x-2">
-						<Image src="static/imgs/instagram.svg" alt="Instagram FalaDev" width={25} height={25} />
-						<span className="text-xs">@faladev.tech</span>
+				<hr className="my-8 border-gray-300" />
+				<footer className="flex flex-wrap justify-center items-center space-x-4 w-full text-center py-4">
+					<a href="https://www.instagram.com/faladev.tech/" target="_blank" rel="noopener noreferrer" className="flex items-center space-x-2 transition-transform transform hover:scale-105">
+						<Image src="/static/imgs/instagram.svg" alt="Instagram FalaDev" width={25} height={25} />
+						<span className="text-base text-gray-700 hover:text-blue-600">@faladev.tech</span>
 					</a>
-					<a href="https://www.youtube.com/@FalaDev" target="_blank" className="flex items-center space-x-2">
+					<a href="https://www.youtube.com/@FalaDev" target="_blank" rel="noopener noreferrer" className="flex items-center space-x-2 transition-transform transform hover:scale-105">
 						<Image src="/static/imgs/youtube.svg" alt="YouTube FalaDev" width={35} height={35} />
-						<span className="text-xs">@FalaDev</span>
+						<span className="text-base text-gray-700 hover:text-red-600">@FalaDev</span>
 					</a>
-					<a
-						href="https://chat.whatsapp.com/BZpPgPOH9F091JLiIvRMpd"
-						target="_blank"
-						className="flex items-center space-x-2"
-					>
+					<a href="https://chat.whatsapp.com/BZpPgPOH9F091JLiIvRMpd" target="_blank" rel="noopener noreferrer" className="flex items-center space-x-2 transition-transform transform hover:scale-105">
 						<Image src="/static/imgs/whatsapp.svg" alt="WhatsApp FalaDev" width={30} height={30} />
-						<span className="text-xs">@FalaDev</span>
+						<span className="text-base text-gray-700 hover:text-green-600">@FalaDev</span>
 					</a>
 				</footer>
-				<p className="text-xs text-center">
+				<p className="text-lg text-gray-600 text-center">
 					Essa é uma mentoria gratuita para quem está entrando na área de tecnologia, migrando de área ou buscando
 					crescimento profissional.
 				</p>