landing page

src/App.js

@@ -1,11 +1,33 @@
+// src/App.js
 
+import React, { useState } from 'react';
 import PerfilSecretaria from "./perfis/perfil_secretaria/PerfilSecretaria";
+import LandingPage from './pages/LandingPage'; 
+// Mantenha todas as importações de CSS globais aqui se houver!
+// import './App.css'; 
+// import './index.css'; 
 
 function App() {
+  // O estado controla qual view mostrar: false = Landing Page, true = Dashboard
+  const [isInternalView, setIsInternalView] = useState(false);
+
+  const handleEnterSystem = () => {
+    setIsInternalView(true);
+  };
+  
+  const handleExitSystem = () => {
+    setIsInternalView(false);
+  };
+  
+  // Se não estiver na visualização interna, retorna a LandingPage.
+  if (!isInternalView) {
+    return <LandingPage onEnterSystem={handleEnterSystem} />;
+  }
+  
+  // Se estiver na visualização interna, retorna o PerfilSecretaria
   return (
-    <>
-      <PerfilSecretaria/>
-    </>
+    // Passamos a função de saída (logout)
+    <PerfilSecretaria onLogout={handleExitSystem} />
   );
 }
 

src/pages/LandingPage.jsx

@@ -0,0 +1,47 @@
+// src/pages/LandingPage.jsx
+
+import React from 'react';
+import './style/LandingPage.css'; 
+
+const LandingPage = ({ onEnterSystem }) => {
+  return (
+    // Usa a classe de isolamento CSS
+    <div className="landing-page-public-view">
+      {/* CABEÇALHO */}
+      <header className="landing-header">
+        <div className="logo">
+          {/* Logo da Landing Page. O CSS irá estilizá-la corretamente. */}
+          <h1>MediConnect</h1>
+        </div>
+        <nav className="nav-menu">
+          <a href="#home">Início</a>
+          <a href="#services">Serviços</a>
+          <a href="#contact">Contato</a>
+          {/* Botão para entrar no sistema interno */}
+          <button className="access-button" onClick={onEnterSystem}>
+            Acessar Sistema
+          </button>
+        </nav>
+      </header>
+
+      {/* ÁREA DE DESTAQUE (HERO SECTION) */}
+      <div className="hero-section">
+        <div className="hero-content">
+          {/* Título Legível (Branco) */}
+          <h2 className="hero-title">
+            Descubra o Equilíbrio Perfeito de <br />Cuidado e Tecnologia.
+          </h2>
+          <p>
+            Somos focados em oferecer a melhor experiência para pacientes e a gestão mais eficiente para a clínica.
+          </p>
+          {/* Botão de ação principal: "Acessar Sistema" */}
+          <button className="main-action-button" onClick={onEnterSystem}>
+            Acessar Sistema
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LandingPage;

src/pages/style/LandingPage.css

@@ -0,0 +1,103 @@
+/* src/pages/style/LandingPage.css */
+
+/* O seletor .landing-page-public-view ajuda a isolar os estilos */
+.landing-page-public-view {
+    font-family: Arial, sans-serif;
+    min-height: 100vh;
+    background-color: #f0f2f5;
+}
+
+/* --- Cabeçalho --- */
+.landing-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 50px;
+    background-color: white;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+}
+
+/* Estilo para a logo DENTRO do cabeçalho da Landing Page */
+.landing-header .logo h1 {
+    font-size: 1.8em;
+    color: #5b56f8; 
+    font-weight: 700;
+    margin: 0; /* Remove margem que pode quebrar o layout */
+    padding: 0; /* Remove padding */
+}
+
+.nav-menu a {
+    text-decoration: none;
+    color: #333;
+    margin-left: 25px;
+    font-size: 1em;
+    transition: color 0.2s;
+}
+
+.nav-menu a:hover {
+    color: #5b56f8;
+}
+
+.access-button {
+    background-color: #5b56f8;
+    color: white;
+    border: none;
+    padding: 8px 18px;
+    border-radius: 5px;
+    margin-left: 25px;
+    cursor: pointer;
+    font-weight: 600;
+}
+
+/* --- Área de Destaque (Hero Section) --- */
+.hero-section {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 100px 50px;
+    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://picsum.photos/1200/600?random=4') center/cover;
+    color: white;
+    min-height: 600px;
+    padding-top: 100px; 
+}
+
+.hero-content {
+    max-width: 700px; 
+    text-align: left; 
+}
+
+/* Título Branco e Legível */
+.hero-content .hero-title { 
+    font-size: 3.5em; 
+    font-weight: 700;
+    margin-bottom: 20px;
+    color: #ffffff; 
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
+}
+
+.hero-content p {
+    font-size: 1.2em; 
+    margin-bottom: 30px;
+    color: #ddd;
+}
+
+.main-action-button {
+    background-color: #5b56f8; 
+    color: white;
+    border: none;
+    padding: 15px 30px;
+    border-radius: 5px;
+    font-size: 1.1em;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.main-action-button:hover {
+    background-color: #4540d6;
+}

src/perfis/perfil_secretaria/PerfilSecretaria.jsx

@@ -1,3 +1,5 @@
+// src/perfis/perfil_secretaria/PerfilSecretaria.jsx
+
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 import Sidebar from "../../components/Sidebar";
@@ -13,11 +15,12 @@ import EditPage from "../../pages/EditPage";
 import DoctorDetails from "../../pages/DoctorDetails";
 import DoctorEditPage from "../../pages/DoctorEditPage";
 
-function PerfilSecretaria() {
+function PerfilSecretaria({ onLogout }) {
   return (
     <Router>
       <div id="app" className="active">
-        <Sidebar />
+        {/* Passamos onLogout para que o botão Sair funcione no menu */}
+        <Sidebar onLogout={onLogout} />
         <div id="main">
           <Routes>
             <Route path="/" element={<Inicio />} />