mudança de logo, alteração no nome e melhoria da identidade visual

app/login/page.tsx

@@ -9,13 +9,14 @@ import { ArrowLeft } from "lucide-react"; // Importa o ícone de seta
 export default function LoginPage() {
   return (
     <div className="min-h-screen grid grid-cols-1 lg:grid-cols-2">
-      
       {/* PAINEL ESQUERDO: O Formulário */}
       <div className="relative flex flex-col items-center justify-center p-8 bg-background">
-        
         {/* Link para Voltar */}
         <div className="absolute top-8 left-8">
-          <Link href="/" className="inline-flex items-center text-muted-foreground hover:text-primary transition-colors font-medium">
+          <Link
+            href="/"
+            className="inline-flex items-center text-muted-foreground hover:text-primary transition-colors font-medium"
+          >
             <ArrowLeft className="w-4 h-4 mr-2" />
             Voltar à página inicial
           </Link>
@@ -23,9 +24,27 @@ export default function LoginPage() {
 
         {/* O contêiner principal que agora terá a sombra e o estilo de card */}
         <div className="w-full max-w-md bg-card p-10 rounded-2xl shadow-xl">
+          {/* NOVO: Bloco da Logo e Nome (Painel Esquerdo) */}
+          <div className="flex items-center justify-center space-x-3 mb-8">
+            <img
+              src="/Logo MedConnect.png" // Caminho CORRETO para a logo
+              alt="Logo MedConnect"
+              className="w-18 h-18 object-contain" // Verifique se w-12 h-12 é o tamanho desejado
+            />
+            <span className="text-3xl font-extrabold text-primary">
+              MedConnect
+            </span>
+          </div>
+          {/* FIM: Bloco da Logo e Nome */}
+
           <div className="text-center mb-8">
-            <h1 className="text-3xl font-bold text-foreground">Acesse sua conta</h1>
+            {/* Título de boas-vindas movido para baixo da logo */}
-            <p className="text-muted-foreground mt-2">Bem-vindo(a) de volta ao MedConnect!</p>
+            <h1 className="text-3xl font-bold text-foreground">
+              Acesse sua conta
+            </h1>
+            <p className="text-muted-foreground mt-2">
+              Bem-vindo(a) de volta ao MedConnect!
+            </p>
           </div>
 
           <LoginForm>
@@ -40,7 +59,9 @@ export default function LoginPage() {
           </LoginForm>
 
           <div className="mt-6 text-center text-sm">
-            <span className="text-muted-foreground">Não tem uma conta de paciente? </span>
+            <span className="text-muted-foreground">
+              Não tem uma conta de paciente?{" "}
+            </span>
             <Link href="/patient/register">
               <span className="font-semibold text-primary hover:underline cursor-pointer">
                 Crie uma agora
@@ -57,26 +78,26 @@ export default function LoginPage() {
           src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=2070" // Uma imagem profissional de alta qualidade
           alt="Médica utilizando um tablet na clínica MedConnect"
           fill
-          style={{ objectFit: 'cover' }}
+          style={{ objectFit: "cover" }}
           priority // Ajuda a carregar a imagem mais rápido
         />
         {/* Camada de sobreposição para escurecer a imagem e destacar o texto */}
         <div className="absolute inset-0 bg-primary/80 flex flex-col items-start justify-end p-12 text-left">
-            {/* BLOCO DE NOME ADICIONADO */}
+          {/* BLOCO DE NOME ADICIONADO */}
-            <div className="mb-6 border-l-4 border-primary-foreground pl-4">
+          <div className="mb-6 border-l-4 border-primary-foreground pl-4">
-                <h1 className="text-5xl font-extrabold text-primary-foreground tracking-wider">
+            <h1 className="text-5xl font-extrabold text-primary-foreground tracking-wider">
-                MedConnect
+              MedConnect
-                </h1>
+            </h1>
-            </div>
+          </div>
-            <h2 className="text-4xl font-bold text-primary-foreground leading-tight">
+          <h2 className="text-4xl font-bold text-primary-foreground leading-tight">
-                Tecnologia e Cuidado a Serviço da Sua Saúde.
+            Tecnologia e Cuidado a Serviço da Sua Saúde.
-            </h2>
+          </h2>
-            <p className="mt-4 text-lg text-primary-foreground/80">
+          <p className="mt-4 text-lg text-primary-foreground/80">
-                Acesse seu portal para uma experiência de saúde integrada, segura e eficiente.
+            Acesse seu portal para uma experiência de saúde integrada, segura e
-            </p>
+            eficiente.
+          </p>
         </div>
       </div>
-
     </div>
   );
 }

app/page.tsx

@@ -15,9 +15,20 @@ export default function InicialPage() {
         <span>Email: contato@mediconnect.com</span>
       </div>
 
-      {/* Header principal */}
+      {/* Header principal - Com Logo REAL */}
       <header className="bg-card shadow-md py-4 px-4 md:px-6 flex justify-between items-center relative">
-        <h1 className="text-2xl font-bold text-primary">MediConnect</h1>
+        {/* Agrupamento do Logo e Nome do Site */}
+        <a href="#home" className="flex items-center space-x-1 cursor-pointer">
+          {/* 1. IMAGEM/LOGO REAL: Referenciando o arquivo placeholder-logo.png na pasta public */}
+          <img
+            src="/android-chrome-512x512.png" // O caminho se inicia a partir da pasta 'public'
+            alt="Logo MediConnect"
+            className="w-14 h-14 object-contain" // ALTERADO: Aumentado para w-14 h-14
+          />
+
+          {/* 2. NOME DO SITE */}
+          <h1 className="text-2xl font-bold text-primary">MediConnect</h1>
+        </a>
 
         {/* Botão do menu hambúrguer para telas menores */}
         <div className="md:hidden flex items-center space-x-4">
@@ -62,8 +73,9 @@ export default function InicialPage() {
 
         {/* Navegação principal */}
         <nav
-          className={`${isMenuOpen ? "block" : "hidden"
+          className={`${
-            } absolute top-[76px] left-0 w-full bg-card shadow-md py-4 md:relative md:top-auto md:left-auto md:w-auto md:block md:bg-transparent md:shadow-none z-10`}
+            isMenuOpen ? "block" : "hidden"
+          } absolute top-[76px] left-0 w-full bg-card shadow-md py-4 md:relative md:top-auto md:left-auto md:w-auto md:block md:bg-transparent md:shadow-none z-10`}
         >
           <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-6 text-muted-foreground font-medium items-center">
             <Link href="#home" className="hover:text-primary">
@@ -135,10 +147,12 @@ export default function InicialPage() {
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-10 max-w-5xl mx-auto">
           <div className="p-6 bg-background rounded-xl shadow hover:shadow-lg transition">
-            <h3 className="text-xl font-semibold text-primary">Clínica Geral</h3>
+            <h3 className="text-xl font-semibold text-primary">
+              Clínica Geral
+            </h3>
             <p className="text-muted-foreground mt-2 text-sm">
-              Seu primeiro passo para o cuidado. Atendimento focado na prevenção e
+              Seu primeiro passo para o cuidado. Atendimento focado na prevenção
-              no diagnóstico inicial.
+              e no diagnóstico inicial.
             </p>
             <Button className="mt-4 w-full">Agendar</Button>
           </div>

components/doctor-layout.tsx

@@ -167,8 +167,9 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
     // O restante do seu código JSX permanece exatamente o mesmo
     <div className="min-h-screen bg-background flex">
       <div
-        className={`bg-card border-r border transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"
+        className={`bg-card border-r border transition-all duration-300 ${
-          } fixed left-0 top-0 h-screen flex flex-col z-50`}
+          sidebarCollapsed ? "w-16" : "w-64"
+        } fixed left-0 top-0 h-screen flex flex-col z-50`}
       >
         <div className="p-4 border-b border">
           <div className="flex items-center justify-between">
@@ -204,10 +205,11 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
             return (
               <Link key={item.href} href={item.href}>
                 <div
-                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive
+                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
-                    ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
+                    isActive
-                    : "text-gray-600 hover:bg-gray-50"
+                      ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
-                    }`}
+                      : "text-gray-600 hover:bg-gray-50"
+                  }`}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
                   {!sidebarCollapsed && (
@@ -221,18 +223,22 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
         // ... (seu código anterior)
         {/* Sidebar para desktop */}
         <div
-          className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"
+          className={`bg-white border-r border-gray-200 transition-all duration-300 ${
-            } fixed left-0 top-0 h-screen flex flex-col z-50`}
+            sidebarCollapsed ? "w-16" : "w-64"
+          } fixed left-0 top-0 h-screen flex flex-col z-50`}
         >
           <div className="p-4 border-b border-gray-200">
             <div className="flex items-center justify-between">
               {!sidebarCollapsed && (
                 <div className="flex items-center gap-2">
-                  <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                  {/* 🛑 SUBSTITUIÇÃO: Usando a tag <img> com o caminho da logo */}
-                    <div className="w-4 h-4 bg-white rounded-sm"></div>
+                  <img
-                  </div>
+                    src="/Logo MedConnect.png" // Use o arquivo da logo (ou /android-chrome-512x512.png)
+                    alt="Logo MediConnect"
+                    className="w-12 h-12 object-contain" // Define o tamanho para w-8 h-8 (32px)
+                  />
                   <span className="font-semibold text-gray-900">
-                    MediConnect
+                    MedConnect
                   </span>
                 </div>
               )}
@@ -261,10 +267,11 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
               return (
                 <Link key={item.href} href={item.href}>
                   <div
-                    className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive
+                    className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
-                      ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
+                      isActive
-                      : "text-gray-600 hover:bg-gray-50"
+                        ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
-                      }`}
+                        : "text-gray-600 hover:bg-gray-50"
+                    }`}
                   >
                     <Icon className="w-5 h-5 flex-shrink-0" />
                     {!sidebarCollapsed && (
@@ -313,8 +320,9 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
             </div>
 
             <div
-              className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-muted-foreground hover:bg-accent cursor-pointer ${sidebarCollapsed ? "justify-center" : ""
+              className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-muted-foreground hover:bg-accent cursor-pointer ${
-                }`}
+                sidebarCollapsed ? "justify-center" : ""
+              }`}
               onClick={handleLogout}
             >
               <LogOut className="w-5 h-5 flex-shrink-0" />
@@ -330,8 +338,9 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
         ></div>
       )}
       <div
-        className={`bg-white border-r border-gray-200 fixed left-0 top-0 h-screen flex flex-col z-50 transition-transform duration-300 md:hidden ${isMobileMenuOpen ? "translate-x-0 w-64" : "-translate-x-full w-64"
+        className={`bg-white border-r border-gray-200 fixed left-0 top-0 h-screen flex flex-col z-50 transition-transform duration-300 md:hidden ${
-          }`}
+          isMobileMenuOpen ? "translate-x-0 w-64" : "-translate-x-full w-64"
+        }`}
       >
         <div className="p-4 border-b border-gray-200 flex items-center justify-between">
           <div className="flex items-center gap-2">
@@ -360,10 +369,11 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
             return (
               <Link key={item.href} href={item.href} onClick={toggleMobileMenu}>
                 <div
-                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive
+                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
-                    ? "bg-accent text-accent-foreground border-r-2 border-primary"
+                    isActive
-                    : "text-muted-foreground hover:bg-accent"
+                      ? "bg-accent text-accent-foreground border-r-2 border-primary"
-                    }`}
+                      : "text-muted-foreground hover:bg-accent"
+                  }`}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
                   <span className="font-medium">{item.label}</span>
@@ -409,10 +419,10 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
       </div>
 
       <div
-        className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"
+        className={`flex-1 flex flex-col transition-all duration-300 ${
-          }`}
+          sidebarCollapsed ? "ml-16" : "ml-64"
+        }`}
       >
-
         <main className="flex-1 p-6">{children}</main>
       </div>
 

components/manager-layout.tsx

@@ -130,16 +130,20 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
   return (
     <div className="min-h-screen bg-gray-50 flex">
       <div
-        className={`bg-white border-r border-gray-200 transition-all duration-300 fixed top-0 h-screen flex flex-col z-30 ${sidebarCollapsed ? "w-16" : "w-64"
+        className={`bg-white border-r border-gray-200 transition-all duration-300 fixed top-0 h-screen flex flex-col z-30 ${
-          }`}
+          sidebarCollapsed ? "w-16" : "w-64"
+        }`}
       >
         <div className="p-4 border-b border-gray-200 flex items-center justify-between">
           {!sidebarCollapsed && (
             <div className="flex items-center gap-2">
-              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+              {/* 🛑 SUBSTITUIÇÃO: Usando a tag <img> com o caminho da logo */}
-                <div className="w-4 h-4 bg-white rounded-sm"></div>
+              <img
-              </div>
+                src="/Logo MedConnect.png" // Use o arquivo da logo (ou /android-chrome-512x512.png)
-              <span className="font-semibold text-gray-900">MediConnect</span>
+                alt="Logo MediConnect"
+                className="w-12 h-12 object-contain" // Define o tamanho para w-8 h-8 (32px)
+              />
+              <span className="font-semibold text-gray-900">MedConnect</span>
             </div>
           )}
           <Button
@@ -163,10 +167,11 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
             return (
               <Link key={item.label} href={item.href}>
                 <div
-                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive
+                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
+                    isActive
                       ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
                       : "text-gray-600 hover:bg-gray-50"
-                    }`}
+                  }`}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
                   {!sidebarCollapsed && (
@@ -217,10 +222,10 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
       </div>
 
       <div
-        className={`flex-1 flex flex-col transition-all duration-300 w-full ${sidebarCollapsed ? "ml-16" : "ml-64"
+        className={`flex-1 flex flex-col transition-all duration-300 w-full ${
-          }`}
+          sidebarCollapsed ? "ml-16" : "ml-64"
+        }`}
       >
-
         <main className="flex-1 p-4 md:p-6">{children}</main>
       </div>
 

components/patient-layout.tsx

@@ -134,20 +134,22 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
     <div className="min-h-screen bg-background flex">
       {/* Sidebar */}
       <div
-        className={`bg-card border-r border-border transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"
+        className={`bg-card border-r border-border transition-all duration-300 ${
-          } fixed left-0 top-0 h-screen flex flex-col z-10`}
+          sidebarCollapsed ? "w-16" : "w-64"
+        } fixed left-0 top-0 h-screen flex flex-col z-10`}
       >
         {/* Header da Sidebar */}
         <div className="p-4 border-b border-border">
           <div className="flex items-center justify-between">
             {!sidebarCollapsed && (
               <div className="flex items-center gap-2">
-                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                {/* 🛑 SUBSTITUIÇÃO: Usando a tag <img> com o caminho da logo */}
-                  <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
+                <img
-                </div>
+                  src="/Logo MedConnect.png" // Use o arquivo da logo (ou /android-chrome-512x512.png)
-                <span className="font-semibold text-foreground">
+                  alt="Logo MediConnect"
-                  MediConnect
+                  className="w-12 h-12 object-contain" // Define o tamanho para w-8 h-8 (32px)
-                </span>
+                />
+                <span className="font-semibold text-gray-900">MedConnect</span>
               </div>
             )}
             <Button
@@ -176,10 +178,11 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
             return (
               <Link key={item.href} href={item.href}>
                 <div
-                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive
+                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
+                    isActive
                       ? "bg-accent text-accent-foreground"
                       : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                    }`}
+                  }`}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
                   {!sidebarCollapsed && (
@@ -235,10 +238,10 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
 
       {/* Main Content */}
       <div
-        className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"
+        className={`flex-1 flex flex-col transition-all duration-300 ${
-          }`}
+          sidebarCollapsed ? "ml-16" : "ml-64"
+        }`}
       >
-
         {/* Page Content */}
         <main className="flex-1 p-6">{children}</main>
       </div>

components/secretary-layout.tsx

@@ -142,12 +142,13 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
           <div className="flex items-center justify-between">
             {!sidebarCollapsed && (
               <div className="flex items-center gap-2">
-                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                {/* 🛑 SUBSTITUIÇÃO: Usando a tag <img> com o caminho da logo */}
-                  <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
+                <img
-                </div>
+                  src="/Logo MedConnect.png" // Use o arquivo da logo (ou /android-chrome-512x512.png)
-                <span className="font-semibold text-foreground">
+                  alt="Logo MediConnect"
-                  MediConnect
+                  className="w-12 h-12 object-contain" // Define o tamanho para w-8 h-8 (32px)
-                </span>
+                />
+                <span className="font-semibold text-gray-900">MedConnect</span>
               </div>
             )}
             <Button
@@ -175,10 +176,11 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
             return (
               <Link key={item.href} href={item.href}>
                 <div
-                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive
+                  className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
+                    isActive
                       ? "bg-accent text-accent-foreground"
                       : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                    }`}
+                  }`}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
                   {!sidebarCollapsed && (
@@ -230,10 +232,10 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
 
       {/* Main Content */}
       <div
-        className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"
+        className={`flex-1 flex flex-col transition-all duration-300 ${
-          }`}
+          sidebarCollapsed ? "ml-16" : "ml-64"
+        }`}
       >
-
         <main className="flex-1 p-6">{children}</main>
       </div>