A Pen by Health/Health on CodePen.
Created
February 8, 2025 17:53
-
-
Save healthhealth/f04483e3c03a4871608c8e81ee603b18 to your computer and use it in GitHub Desktop.
Untitled
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Dr. Gustavo Mendes e Silva - Cannabis Medicinal | Psiquiatria | São Paulo</title> | |
| <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> | |
| <meta name="description" content="Agende sua consulta com o Dr. Gustavo Mendes e Silva, psiquiatra especialista em Cannabis Medicinal em São Paulo. Tratamentos para autismo, TDAH, ansiedade, depressão e mais. Atendimento online e presencial na Vila Olímpia." /> | |
| <meta name="keywords" content="psiquiatra SP, cannabis medicinal, TDAH, ansiedade, depressão, Dr. Gustavo Mendes, OrCann, tratamento, telemedicina, São Paulo, Vila Olímpia" /> | |
| <meta name="author" content="Dr. Gustavo Mendes e Silva" /> | |
| <link rel="canonical" href="https://dr.orcann.com" /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;500;600&family=Quicksand:wght@300..700&display=swap" rel="stylesheet" /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script> | |
| <script src="https://unpkg.com/react@18/umd/react.development.js"></script> | |
| <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> | |
| <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Montserrat', 'sans-serif'], | |
| display: ['Playfair Display', 'serif'], | |
| quicksand: ['Quicksand', 'sans-serif'], | |
| }, | |
| colors: { | |
| primary: '#1a365d', | |
| secondary: '#c5a572', | |
| accent: '#2c5282', | |
| 'hero-bg': '#293f4e', | |
| }, | |
| }, | |
| }, | |
| }; | |
| </script> | |
| <style> | |
| /* ----- Estilos Base ----- */ | |
| html, | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| margin: 0; | |
| background-color: #f7fafc; | |
| overflow-x: hidden; | |
| /* Prevent horizontal scroll on body */ | |
| height: 100vh; | |
| /* Full viewport height */ | |
| width: 100vw; | |
| /* Full viewport width */ | |
| } | |
| #content-container { | |
| overflow-y: auto; | |
| /* Enable vertical scroll within container */ | |
| height: 100vh; | |
| /* Full viewport height */ | |
| width: 100vw; | |
| /* Full viewport width */ | |
| position: relative; | |
| /* Needed for fixed elements inside to be relative to this container */ | |
| -webkit-overflow-scrolling: touch; | |
| /* For smooth scrolling on iOS */ | |
| scrollbar-width: none; | |
| /* Firefox */ | |
| -ms-overflow-style: none; | |
| /* IE and Edge */ | |
| } | |
| #content-container::-webkit-scrollbar { | |
| display: none; | |
| /* Chrome, Safari, Opera */ | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4 { | |
| font-family: 'Playfair Display', serif; | |
| color: #1a365d; | |
| } | |
| section { | |
| position: relative; | |
| /* Ensure sections are relative for absolute positioning if needed */ | |
| padding-top: 20px; | |
| /* Keep original padding */ | |
| padding-bottom: 20px; | |
| /* Keep original padding */ | |
| } | |
| /* ----- Navbar ----- */ | |
| .nav-glass { | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| /* Safari support */ | |
| } | |
| /* ----- Hero Section ----- */ | |
| .bg-hero-gradient { | |
| background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); | |
| position: relative; | |
| } | |
| .bg-hero-gradient::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%); | |
| pointer-events: none; | |
| } | |
| /* ----- Cards Expansíveis ----- */ | |
| .card { | |
| transition: all 0.3s ease; | |
| background: #ffffff; | |
| overflow: hidden; | |
| border-radius: 0.75rem; | |
| /* Consistent rounded corners */ | |
| } | |
| .card.expanded { | |
| transform: scale(1.02); | |
| background: linear-gradient(145deg, rgba(26, 54, 93, 0.98), rgba(44, 82, 130, 0.98)); | |
| box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05); | |
| } | |
| .card.expanded .card-header { | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .card.expanded .card-header h3 { | |
| color: #ffffff; | |
| } | |
| .card.expanded .card-header p { | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| .card.expanded .icon-wrapper { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .card.expanded .icon-wrapper i { | |
| color: #ffffff; | |
| } | |
| .card-content { | |
| transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); | |
| overflow: hidden; | |
| /* Ensure content is clipped */ | |
| } | |
| .card-expanded-content { | |
| padding: 2rem; | |
| color: rgba(255, 255, 255, 0.9); | |
| /* Removed min-height */ | |
| } | |
| /* Grid Items dentro dos cards */ | |
| .benefit-item, | |
| .tech-item, | |
| .service-item, | |
| .progress-item { | |
| padding: 1.5rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 1rem; | |
| transition: background 0.3s ease, transform 0.3s ease; | |
| /* Simplified transition */ | |
| } | |
| .benefit-item:hover, | |
| .tech-item:hover, | |
| .service-item:hover, | |
| .progress-item:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| transform: translateY(-2px); | |
| } | |
| .benefit-item i, | |
| .tech-item i, | |
| .service-item i, | |
| .progress-item i { | |
| font-size: 1.5rem; | |
| opacity: 0.9; | |
| color: inherit; | |
| /* Inherit text color */ | |
| margin-bottom: 0.5rem; | |
| /* Consistent spacing */ | |
| } | |
| .card-expanded-content h4 { | |
| font-size: 1.1rem; | |
| color: rgba(255, 255, 255, 0.95); | |
| margin-bottom: 0.5rem; | |
| } | |
| .card-expanded-content p { | |
| font-size: 0.95rem; | |
| color: rgba(255, 255, 255, 0.8); | |
| line-height: 1.5; | |
| } | |
| /* Hover de Cards */ | |
| .card:not(.expanded):hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); | |
| background: rgba(255, 255, 255, 0.98); | |
| } | |
| .card:not(.expanded):hover .icon-wrapper { | |
| background: rgba(26, 54, 93, 0.1); | |
| } | |
| .card:not(.expanded):hover .icon-wrapper i { | |
| transform: scale(1.1); | |
| } | |
| /* Transições */ | |
| .card, | |
| .icon-wrapper, | |
| .icon-wrapper i, | |
| .card-header h3, | |
| .card-header p { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* Focus States para Acessibilidade */ | |
| .card-header:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.3); | |
| border-radius: 0.75rem; | |
| } | |
| /* Efeito de highlight nos ícones */ | |
| .card.expanded .icon-wrapper::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| border-radius: inherit; | |
| /* Ensure highlight follows rounded corners */ | |
| } | |
| .card.expanded .icon-wrapper:hover::after { | |
| opacity: 1; | |
| } | |
| /* ----- Botões Flutuantes ----- */ | |
| .floating-btn { | |
| position: fixed; | |
| right: 20px; | |
| padding: 0; | |
| /* Remove padding, use width/height */ | |
| border-radius: 50%; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| width: 54px; | |
| height: 54px; | |
| line-height: 54px; | |
| /* Vertically center icon */ | |
| text-align: center; | |
| } | |
| .floating-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); | |
| } | |
| /* ----- Carrossel ----- */ | |
| .carousel { | |
| perspective: 50vw; | |
| perspective-origin: 50% 50%; | |
| height: 700px; | |
| /* Set carousel height */ | |
| max-height: 700px; | |
| position: relative; | |
| } | |
| .carousel__stage { | |
| transform-style: preserve-3d; | |
| transform: translateZ(calc(-350px - 1rem)); | |
| /* Half of carousel height + offset */ | |
| height: 100%; | |
| } | |
| .carousel__control { | |
| position: absolute; | |
| right: 1rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| z-index: 2; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 0 1rem; | |
| /* Add some horizontal padding */ | |
| } | |
| .carousel__control a { | |
| display: block; | |
| width: 12px; | |
| height: 12px; | |
| margin-bottom: 0.5rem; | |
| border-radius: 50%; | |
| background-color: rgba(255, 255, 255, 0.3); | |
| opacity: 0.8; | |
| transition: background-color 0.3s ease, opacity 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .carousel__control a.active, | |
| .carousel__control a:hover { | |
| background-color: rgba(255, 255, 255, 0.7); | |
| opacity: 1; | |
| } | |
| .spinner { | |
| transform-style: preserve-3d; | |
| transition: transform 1s; | |
| transform-origin: 50% 50%; | |
| height: 100%; | |
| /* Ensure full height */ | |
| } | |
| .spinner__face { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| backface-visibility: hidden; | |
| transform-origin: 50% 50%; | |
| transform: translateZ(351rem); | |
| /* Initial transform */ | |
| display: flex; | |
| align-items: center; | |
| /* Vertically center content */ | |
| } | |
| .spinner__face.js-active { | |
| transform: rotateX(0deg) translateZ(calc(350px + 1rem)); | |
| } | |
| .spinner__face.js-next { | |
| transform: rotateX(90deg) translateZ(calc(350px + 1rem)); | |
| } | |
| .content { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| overflow: hidden; | |
| flex-direction: row; | |
| /* Ensure horizontal layout */ | |
| } | |
| .content__left, | |
| .content__right { | |
| width: 50%; | |
| /* Equal width */ | |
| height: 100%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| opacity: 0; | |
| /* Initially hidden for animation */ | |
| transform: translateY(20px); | |
| /* Start slightly below */ | |
| transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| padding: 2rem; | |
| } | |
| .spinner__face.js-active .content__left, | |
| .spinner__face.js-active .content__right { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .content__left { | |
| transition-delay: 0.3s; | |
| text-align: center; | |
| /* Center text horizontally */ | |
| } | |
| .content__right { | |
| transition-delay: 0.5s; | |
| text-align: justify; | |
| /* Justify text */ | |
| } | |
| .content__left h2 { | |
| font-size: 3rem; | |
| margin-bottom: 0.5rem; | |
| color: white; | |
| } | |
| .content__left p, | |
| .content__right .content__main { | |
| font-size: 1.1rem; | |
| line-height: 1.7; | |
| opacity: 0.9; | |
| color: white; | |
| } | |
| .content__index { | |
| position: absolute; | |
| bottom: 1rem; | |
| right: 1rem; | |
| font-size: 8rem; | |
| opacity: 0.1; | |
| color: white; | |
| } | |
| /* ----- Responsividade ----- */ | |
| @media (max-width: 768px) { | |
| .card.expanded { | |
| transform: scale(1); | |
| } | |
| .carousel { | |
| height: auto; | |
| max-height: none; | |
| } | |
| .spinner__face { | |
| position: relative; | |
| transform: none !important; | |
| height: auto; | |
| } | |
| .content__left, | |
| .content__right { | |
| width: 100%; | |
| position: static; | |
| opacity: 1; | |
| padding: 1rem; | |
| /* Reduced padding on smaller screens */ | |
| } | |
| .benefits-grid, | |
| .tech-features, | |
| .service-features, | |
| .progress-features { | |
| grid-template-columns: 1fr; | |
| } | |
| .card-expanded-content { | |
| padding: 1rem; | |
| /* Reduced padding */ | |
| } | |
| .benefit-item, | |
| .tech-item, | |
| .service-item, | |
| .progress-item { | |
| padding: 1rem; | |
| /* Reduced padding */ | |
| } | |
| .card-expanded-content h4 { | |
| font-size: 1rem; | |
| } | |
| .card-expanded-content p { | |
| font-size: 0.9rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="content-container"> | |
| <nav class="nav-glass fixed w-full z-50 top-0"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center space-x-8"> | |
| <a href="/" class="font-display font-bold text-xl text-primary"> | |
| Dr. Gustavo Mendes e Silva | |
| </a> | |
| <a href="https://orcann.com" target="_blank" rel="noopener noreferrer" class="flex items-center text-accent hover:text-primary"> | |
| <img src="/favicon-16x16.png" alt="OrCann" class="w-6 h-6 mr-2"> | |
| OrCann | |
| </a> | |
| </div> | |
| <div class="hidden md:flex md:space-x-8"> | |
| <a href="#sobre" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md">Sobre</a> | |
| <a href="#especialidades" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md">Especialidades</a> | |
| <a href="#metodo" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md">Método</a> | |
| <a href="#contato" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md">Contato</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="menu-btn" class="text-gray-600 hover:text-primary"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> | |
| <div class="px-4 py-2 space-y-2"> | |
| <a href="#sobre" class="block text-gray-600 hover:text-primary py-2 rounded-md">Sobre</a> | |
| <a href="#especialidades" class="block text-gray-600 hover:text-primary py-2 rounded-md">Especialidades</a> | |
| <a href="#metodo" class="block text-gray-600 hover:text-primary py-2 rounded-md">Método</a> | |
| <a href="#contato" class="block text-gray-600 hover:text-primary py-2 rounded-md">Contato</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <section class="bg-hero-gradient min-h-screen flex items-center justify-center px-4 py-20" id="hero"> | |
| <div class="max-w-7xl mx-auto text-center text-white"> | |
| <h1 class="font-display text-5xl md:text-6xl lg:text-7xl mb-6"> | |
| Medicina que<br />transforma vidas | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-12 opacity-90"> | |
| Psiquiatria baseada em evidências e centrada no paciente | |
| </p> | |
| <div class="max-w-md mx-auto"> | |
| <form class="space-y-4" action="https://formspree.io/f/seu-form-id" method="POST"> {/* Replace with your Formspree endpoint */} | |
| <input type="text" name="nome" placeholder="Seu nome" required class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 placeholder-white placeholder-opacity-70 border border-white border-opacity-30 focus:outline-none focus:border-opacity-70" /> | |
| <input type="email" name="email" placeholder="Seu e-mail" required class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 placeholder-white placeholder-opacity-70 border border-white border-opacity-30 focus:outline-none focus:border-opacity-70" /> | |
| <button type="submit" class="w-full px-6 py-3 bg-white text-primary font-semibold rounded-lg hover:bg-opacity-90 transition duration-300"> | |
| Agendar Consulta | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="sobre" class="py-20 px-4 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-4xl font-display text-primary text-center mb-8">Sobre o Dr. Gustavo</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-center"> | |
| <div> | |
| <img src="dr-gustavo.jpg" alt="Dr. Gustavo Mendes e Silva" class="rounded-xl shadow-lg w-full"> {/* Replace with actual image */} | |
| </div> | |
| <div class="text-gray-700"> | |
| <p class="mb-6">O Dr. Gustavo Mendes e Silva é um médico psiquiatra apaixonado por transformar vidas através de uma abordagem moderna e humanizada da medicina.</p> | |
| <p class="mb-6">Com vasta experiência em tratamentos com Cannabis Medicinal, ele se destaca no atendimento de pacientes com Autismo, TDAH, Ansiedade, Depressão e traumas decorrentes de violências.</p> | |
| <p class="mb-6">Sua formação inclui especialização em Psiquiatria pela renomada Escola Paulista de Medicina (UNIFESP) e constante atualização em congressos e cursos internacionais, garantindo o uso das mais recentes tecnologias e abordagens terapêuticas.</p> | |
| <p class="mb-6">O Dr. Gustavo é co-fundador da OrCann, clínica referência em Cannabis Medicinal, e atende pacientes de todo o Brasil através da telemedicina, além de oferecer atendimento presencial em seu consultório na Vila Olímpia, em São Paulo.</p> | |
| <p>Seu compromisso é oferecer um cuidado individualizado, baseado em evidências científicas e focado nas necessidades de cada paciente.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="especialidades" class="relative py-20 bg-gradient-to-b from-hero-bg to-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4"> | |
| <h2 class="text-4xl font-display text-white text-center mb-8">Especialidades</h2> | |
| <div id="specialty-carousel"> | |
| {/* React SpecialtyCarousel component will be rendered here */} | |
| </div> | |
| </div> | |
| </section> | |
| <section id="metodo" class="relative py-20 px-4 bg-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-4xl font-display text-primary text-center mb-8">Método & Abordagem</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="card relative rounded-xl shadow-lg transition-all duration-500 ease-out transform hover:shadow-xl"> | |
| <div class="card-header p-6 cursor-pointer"> | |
| <div class="flex items-center gap-4"> | |
| <div class="icon-wrapper h-12 w-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center"> | |
| <i class="fas fa-clock text-xl text-primary"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-900">Consultas de 2 Horas</h3> | |
| <p class="text-sm text-gray-600">Tempo adequado para uma avaliação completa</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-content"> | |
| <div class="card-expanded-content"> | |
| <p class="text-lg mb-6">Dedico tempo adequado para compreender sua história em profundidade, garantindo uma avaliação completa e personalizada.</p> | |
| <div class="benefits-grid grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="benefit-item"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| <h4 class="font-semibold">Avaliação Detalhada</h4> | |
| <p>Tempo para explorar todos os aspectos relevantes do seu caso</p> | |
| </div> | |
| <div class="benefit-item"> | |
| <i class="fas fa-comments text-blue-500"></i> | |
| <h4 class="font-semibold">Dúvidas Esclarecidas</h4> | |
| <p>Espaço para discutir todas suas questões e preocupações</p> | |
| </div> | |
| <div class="benefit-item"> | |
| <i class="fas fa-tasks text-purple-500"></i> | |
| <h4 class="font-semibold">Plano Terapêutico</h4> | |
| <p>Construção conjunta do tratamento mais adequado</p> | |
| </div> | |
| <div class="benefit-item"> | |
| <i class="fas fa-heart text-red-500"></i> | |
| <h4 class="font-semibold">Atendimento Humanizado</h4> | |
| <p>Foco total em você, sem pressa ou interrupções</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card relative rounded-xl shadow-lg transition-all duration-500 ease-out transform hover:shadow-xl"> | |
| <div class="card-header p-6 cursor-pointer"> | |
| <div class="flex items-center gap-4"> | |
| <div class="icon-wrapper h-12 w-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center"> | |
| <i class="fas fa-robot text-xl text-primary"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-900">Tecnologia Avançada</h3> | |
| <p class="text-sm text-gray-600">IA e análise de dados para melhor tratamento</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-content"> | |
| <div class="card-expanded-content"> | |
| <p class="text-lg mb-6">Utilização de inteligência artificial e tecnologias modernas para análise aprofundada e acompanhamento personalizado do seu progresso.</p> | |
| <div class="tech-features grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="tech-item"> | |
| <i class="fas fa-brain text-indigo-500"></i> | |
| <h4 class="font-semibold">Análise com IA</h4> | |
| <p>Claude e Vertex AI para análise linguística e comportamental</p> | |
| </div> | |
| <div class="tech-item"> | |
| <i class="fas fa-chart-line text-blue-500"></i> | |
| <h4 class="font-semibold">Monitoramento</h4> | |
| <p>Acompanhamento contínuo do progresso e ajustes necessários</p> | |
| </div> | |
| <div class="tech-item"> | |
| <i class="fas fa-shield-alt text-green-500"></i> | |
| <h4 class="font-semibold">Privacidade</h4> | |
| <p>Dados criptografados e protegidos seguindo LGPD</p> | |
| </div> | |
| <div class="tech-item"> | |
| <i class="fas fa-tablet-alt text-purple-500"></i> | |
| <h4 class="font-semibold">Dashboard</h4> | |
| <p>Visualização clara do seu progresso e metas</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card relative rounded-xl shadow-lg transition-all duration-500 ease-out transform hover:shadow-xl"> | |
| <div class="card-header p-6 cursor-pointer"> | |
| <div class="flex items-center gap-4"> | |
| <div class="icon-wrapper h-12 w-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center"> | |
| <i class="fas fa-user-plus text-xl text-primary"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-900">Atendimento Personalizado</h3> | |
| <p class="text-sm text-gray-600">Adaptado às suas necessidades específicas</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-content"> | |
| <div class="card-expanded-content"> | |
| <p class="text-lg mb-6">Cada pessoa é única e merece um atendimento que respeite suas particularidades e necessidades específicas.</p> | |
| <div class="service-features grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="service-item"> | |
| <i class="fas fa-home text-teal-500"></i> | |
| <h4 class="font-semibold">Ambiente Adaptado</h4> | |
| <p>Consultório preparado para diferentes necessidades</p> | |
| </div> | |
| <div class="service-item"> | |
| <i class="fas fa-car text-blue-500"></i> | |
| <h4 class="font-semibold">Atendimento Domiciliar</h4> | |
| <p>Disponível para pacientes no raio de 15km</p> | |
| </div> | |
| <div class="service-item"> | |
| <i class="fas fa-clock text-orange-500"></i> | |
| <h4 class="font-semibold">Horários Flexíveis</h4> | |
| <p>Agendamento adaptado à sua rotina</p> | |
| </div> | |
| <div class="service-item"> | |
| <i class="fas fa-comments text-purple-500"></i> | |
| <h4 class="font-semibold">Suporte Contínuo</h4> | |
| <p>Acompanhamento entre consultas via WhatsApp</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card relative rounded-xl shadow-lg transition-all duration-500 ease-out transform hover:shadow-xl"> | |
| <div class="card-header p-6 cursor-pointer"> | |
| <div class="flex items-center gap-4"> | |
| <div class="icon-wrapper h-12 w-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center"> | |
| <i class="fas fa-bullseye text-xl text-primary"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-900">Metas & Evolução</h3> | |
| <p class="text-sm text-gray-600">Acompanhamento claro do seu progresso</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-content"> | |
| <div class="card-expanded-content"> | |
| <p class="text-lg mb-6">Estabelecimento de objetivos claros e acompanhamento consistente da sua evolução ao longo do tratamento.</p> | |
| <div class="progress-features grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="progress-item"> | |
| <i class="fas fa-flag-checkered text-red-500"></i> | |
| <h4 class="font-semibold">Metas Claras</h4> | |
| <p>Objetivos definidos em conjunto desde o início</p> | |
| </div> | |
| <div class="progress-item"> | |
| <i class="fas fa-clipboard-check text-green-500"></i> | |
| <h4 class="font-semibold">Avaliações</h4> | |
| <p>Verificação periódica do progresso</p> | |
| </div> | |
| <div class="progress-item"> | |
| <i class="fas fa-sliders-h text-blue-500"></i> | |
| <h4 class="font-semibold">Ajustes</h4> | |
| <p>Adaptação contínua do tratamento conforme necessário</p> | |
| </div> | |
| <div class="progress-item"> | |
| <i class="fas fa-door-open text-purple-500"></i> | |
| <h4 class="font-semibold">Alta Planejada</h4> | |
| <p>Preparação gradual para conclusão do tratamento</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="contato" class="py-20 px-4 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-4xl font-display text-primary text-center mb-8">Contato</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="w-full h-96 rounded-lg overflow-hidden shadow-lg map-container"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.123237487306!2d-46.6798223!3d-23.5999128!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce57b6e629e251%3A0x514a30df0fa62955!2sDr.%20Gustavo%20Mendes%20e%20Silva%20-%20Psiquiatria%20e%20Cannabis%20Medicinal!5e0!3m2!1spt-BR!2sbr!4v1738162079431!5m2!1spt-BR!2sbr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"> | |
| </iframe> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-lg contact-info"> | |
| <h3 class="text-2xl font-display text-primary mb-6">Informações</h3> | |
| <div class="space-y-4"> | |
| <p class="flex items-center text-gray-700"> | |
| <i class="fas fa-map-marker-alt w-6 text-accent mr-2"></i> | |
| Rua Fidêncio Ramos, 308 - Torre B, Sala 94 | |
| <br />Vila Olímpia, São Paulo - SP | |
| </p> | |
| <p class="flex items-center text-gray-700"> | |
| <i class="fas fa-phone w-6 text-accent mr-2"></i> | |
| (11) 96546-1146 | |
| </p> | |
| <p class="flex items-center text-gray-700"> | |
| <i class="fas fa-envelope w-6 text-accent mr-2"></i> | |
| dr@orcann.com | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer class="bg-primary text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-xl font-display mb-4">Dr. Gustavo Mendes e Silva</h3> | |
| <p class="text-gray-300">Médico Psiquiatra</p> | |
| <p class="text-gray-300">CRM-SP: 218133</p> | |
| <p class="mt-4 text-gray-400"> | |
| Atendimento em consultório particular na Vila Olímpia - São Paulo e por Telemedicina para todo o Brasil. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-display mb-4">Horário de Atendimento</h3> | |
| <div class="space-y-2 text-gray-300"> | |
| <p>Segunda a Sexta</p> | |
| <p>09:00 - 18:00</p> | |
| <p class="mt-4 text-gray-400"> | |
| Atendimentos em horários especiais podem ser agendados conforme necessidade. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-700 text-center"> | |
| <p class="text-gray-400 text-sm"> | |
| © 2024 OrCann | Todos os direitos reservados. | |
| </p> | |
| <p class="text-gray-400 text-sm mt-2"> | |
| Desenvolvido por | |
| <a href="https://healthhealth.io" class="hover:text-white" target="_blank" rel="noopener noreferrer"> | |
| HEALTH / HEALTH - CNPJ: 54.252.646/0001-95 | |
| </a> | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <a href="https://wa.me/5511965461146" class="floating-btn bottom-4 bg-green-500 text-white" target="_blank" rel="noopener noreferrer"> | |
| <i class="fab fa-whatsapp text-2xl"></i> | |
| </a> | |
| <a href="https://autismo.orcann.com" class="floating-btn bottom-20 bg-blue-500 text-white" target="_blank" rel="noopener noreferrer"> | |
| <img src="autismo.PNG" alt="Portal Autismo" class="w-6 h-6"> | |
| </a> | |
| <button id="back-to-top" class="floating-btn bottom-36 bg-gray-800 text-white hidden"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| </div> | |
| <script type="text/babel"> | |
| const { useEffect, useState, useCallback } = React; | |
| const SpecialtyCarousel = () => { | |
| const [activeIndex, setActiveIndex] = useState(0); | |
| const [disabled, setDisabled] = useState(false); | |
| const SPIN_DUR = 1000; | |
| const specialties = [ | |
| { | |
| title: "AUTISMO", | |
| subtitle: "TEA", | |
| bg: "#27323c", | |
| content: `"Especializado no atendimento de pessoas com TEA, oferecendo um ambiente adaptado e acolhedor. Consultas de 2 horas permitem uma avaliação completa e personalizada, com foco nas necessidades específicas de cada paciente."` | |
| }, | |
| { | |
| title: "TDAH", | |
| subtitle: "DÉFICIT DE ATENÇÃO", | |
| bg: "#19304a", | |
| content: `"Abordagem moderna do TDAH com avaliação tecnológica e monitoramento contínuo. Tratamento personalizado que considera aspectos profissionais, acadêmicos e pessoais."` | |
| }, | |
| { | |
| title: "ANSIEDADE", | |
| subtitle: "E DEPRESSÃO", | |
| bg: "#2b2533", | |
| content: `"Tratamento humanizado de transtornos de humor e ansiedade. Integração de terapias convencionais e complementares, com foco na recuperação do bem-estar e qualidade de vida."` | |
| }, | |
| { | |
| title: "TRAUMAS", | |
| subtitle: "E VIOLÊNCIAS", | |
| bg: "#312f2d", | |
| content: `"Atendimento especializado para vítimas de violência e trauma, com ambiente seguro e acolhedor. Abordagem sensível e personalizada, respeitando o tempo de cada pessoa."` | |
| } | |
| ]; | |
| const spin = useCallback((inc = 1) => { | |
| if (disabled || !inc) return; | |
| setDisabled(true); | |
| let newIndex = activeIndex + inc; | |
| if (newIndex >= specialties.length) newIndex = 0; | |
| if (newIndex < 0) newIndex = specialties.length - 1; | |
| setActiveIndex(newIndex); | |
| setTimeout(() => { | |
| setDisabled(false); | |
| }, SPIN_DUR); | |
| }, [activeIndex, disabled, specialties.length]); | |
| const handleKeyUp = useCallback((e) => { | |
| switch (e.keyCode) { | |
| case 38: spin(-1); break; // Up arrow | |
| case 40: spin(1); break; // Down arrow | |
| default: break; | |
| } | |
| }, [spin]); | |
| useEffect(() => { | |
| document.addEventListener('keyup', handleKeyUp); | |
| return () => document.removeEventListener('keyup', handleKeyUp); | |
| }, [handleKeyUp]); | |
| return ( | |
| <div className="w-full h-full relative overflow-hidden"> | |
| <div className="carousel h-full"> | |
| <div className="carousel__control"> | |
| {specialties.map((_, i) => ( | |
| <a | |
| key={i} | |
| href="#" | |
| className={` | |
| block | |
| w-full | |
| aspect-square | |
| mb-2 | |
| rounded-full | |
| bg-white | |
| bg-opacity-20 | |
| hover:bg-opacity-30 | |
| transition-all | |
| duration-300 | |
| ${activeIndex === i ? 'active bg-opacity-70' : ''} | |
| `} | |
| onClick={(e) => { | |
| e.preventDefault(); | |
| if (!disabled) spin(i - activeIndex); | |
| }} | |
| aria-label={`Ir para o slide ${i + 1}`} | |
| /> | |
| ))} | |
| </div> | |
| <div className="carousel__stage absolute inset-0"> | |
| <div className={`spinner absolute w-full h-full transition-transform duration-1000 ${disabled ? 'pointer-events-none' : ''}`}> | |
| {specialties.map((specialty, i) => ( | |
| <div | |
| key={i} | |
| className={`spinner__face absolute w-full h-full overflow-hidden flex items-center | |
| ${i === activeIndex ? 'js-active' : ''} | |
| ${(i === (activeIndex + 1) % specialties.length) ? 'js-next' : ''} `} | |
| style={{ backgroundColor: specialty.bg }} | |
| > | |
| <div className="content relative w-full h-full flex"> | |
| <div className="content__left w-1/2 p-8"> | |
| <h2 className="text-5xl text-white font-bold"> | |
| {specialty.title}<br/> | |
| <span className="text-base font-light block mt-2">{specialty.subtitle}</span> | |
| </h2> | |
| </div> | |
| <div className="content__right w-1/2 p-8 flex items-center"> | |
| <div className="content__main text-white text-lg"> | |
| <p>{specialty.content}</p> | |
| </div> | |
| <h3 className="content__index text-9xl absolute bottom-4 right-4 opacity-5 text-white">{String(i + 1).padStart(2, '0')}</h3> | |
| </div> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| ReactDOM.render(<SpecialtyCarousel />, document.getElementById('specialty-carousel')); | |
| </script> | |
| <script> | |
| // ----- Menu Mobile ----- | |
| const menuBtn = document.getElementById('menu-btn'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| menuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // ----- Scroll to Top ----- | |
| const backToTop = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTop.classList.remove('hidden'); | |
| } else { | |
| backToTop.classList.add('hidden'); | |
| } | |
| }); | |
| backToTop.addEventListener('click', () => { | |
| const contentContainer = document.getElementById('content-container'); | |
| contentContainer.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // ----- Cards Expansíveis ----- | |
| class ExpandableCards { | |
| constructor() { | |
| this.activeCard = null; | |
| this.cards = [{ | |
| title: 'Consultas de 2 Horas', | |
| icon: 'clock', | |
| description: 'Tempo adequado para uma avaliação completa', | |
| content: ` | |
| <div class="card-expanded-content"> | |
| <p class="text-lg mb-6">Dedico tempo adequado para compreender sua história em profundidade, garantindo uma avaliação completa e personalizada.</p> | |
| <div class="benefits-grid grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="benefit-item"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| <h4 class="font-semibold">Avaliação Detalhada</h4> | |
| <p>Tempo para explorar todos os aspectos relevantes do seu caso</p> | |
| </div> | |
| <div class="benefit-item"> | |
| <i class="fas fa-comments text-blue-500"></i> | |
| <h4 class="font-semibold">Dúvidas Esclarecidas</h4> | |
| <p>Espaço para discutir todas suas questões e preocupações</p> | |
| </div> | |
| <div class="benefit-item"> | |
| <i class="fas fa-tasks text-purple-500"></i> | |
| <h4 class="font-semibold">Plano Terapêutico</h4> | |
| <p>Construção conjunta do tratamento mais adequado</p> | |
| </div> | |
| <div class="benefit-item"> | |
| <i class="fas fa-heart text-red-500"></i> | |
| <h4 class="font-semibold">Atendimento Humanizado</h4> | |
| <p>Foco total em você, sem pressa ou interrupções</p> | |
| </div> | |
| </div> | |
| </div> | |
| ` | |
| }, | |
| { | |
| title: 'Tecnologia Avançada', | |
| icon: 'robot', | |
| description: 'IA e análise de dados para melhor tratamento', | |
| content: ` | |
| <div class="card-expanded-content"> | |
| <p class="text-lg mb-6">Utilização de inteligência artificial e tecnologias modernas para análise aprofundada e acompanhamento personalizado do seu progresso.</p> | |
| <div class="tech-features grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="tech-item"> | |
| <i class="fas fa-brain text-indigo-500"></i> | |
| <h4 class="font-semibold">Análise com IA</h4> | |
| <p>Claude e Vertex AI para análise linguística e comportamental</p> | |
| </div> | |
| <div class="tech-item"> | |
| <i class="fas fa-chart-line text-blue-500"></i> | |
| <h4 class="font-semibold">Monitoramento</h4> | |
| <p>Acompanhamento contínuo do progresso e ajustes necessários</p> | |
| </div> | |
| <div class="tech-item"> | |
| <i class="fas fa-shield-alt text-green-500"></i> | |
| <h4 class="font-semibold">Privacidade</h4> | |
| <p>Dados criptografados e protegidos seguindo LGPD</p> | |
| </div> | |
| <div class="tech-item"> | |
| <i class="fas fa-tablet-alt text-purple-500"></i> | |
| <h4 class="font-semibold">Dashboard</h4> | |
| <p>Visualização clara do seu progresso e metas</p> | |
| </div> | |
| </div> | |
| </div> | |
| ` | |
| }, | |
| { | |
| title: 'Atendimento Personalizado', | |
| icon: 'user-plus', | |
| description: 'Adaptado às suas necessidades específicas', | |
| content: ` | |
| <div class="card-expanded-content"> | |
| <p class="text-lg mb-6">Cada pessoa é única e merece um atendimento que respeite suas particularidades e necessidades específicas.</p> | |
| <div class="service-features grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="service-item"> | |
| <i class="fas fa-home text-teal-500"></i> | |
| <h4 class="font-semibold">Ambiente Adaptado</h4> | |
| <p>Consultório preparado para diferentes necessidades</p> | |
| </div> | |
| <div class="service-item"> | |
| <i class="fas fa-car text-blue-500"></i> | |
| <h4 class="font-semibold">Atendimento Domiciliar</h4> | |
| <p>Disponível para pacientes no raio de 15km</p> | |
| </div> | |
| <div class="service-item"> | |
| <i class="fas fa-clock text-orange-500"></i> | |
| <h4 class="font-semibold">Horários Flexíveis</h4> | |
| <p>Agendamento adaptado à sua rotina</p> | |
| </div> | |
| <div class="service-item"> | |
| <i class="fas fa-comments text-purple-500"></i> | |
| <h4 class="font-semibold">Suporte Contínuo</h4> | |
| <p>Acompanhamento entre consultas via WhatsApp</p> | |
| </div> | |
| </div> | |
| </div> | |
| ` | |
| }, | |
| { | |
| title: 'Metas & Evolução', | |
| icon: 'bullseye', | |
| description: 'Acompanhamento claro do seu progresso', | |
| content: ` | |
| <div class="card-expanded-content"> | |
| <p class="text-lg mb-6">Estabelecimento de objetivos claros e acompanhamento consistente da sua evolução ao longo do tratamento.</p> | |
| <div class="progress-features grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="progress-item"> | |
| <i class="fas fa-flag-checkered text-red-500"></i> | |
| <h4 class="font-semibold">Metas Claras</h4> | |
| <p>Objetivos definidos em conjunto desde o início</p> | |
| </div> | |
| <div class="progress-item"> | |
| <i class="fas fa-clipboard-check text-green-500"></i> | |
| <h4 class="font-semibold">Avaliações</h4> | |
| <p>Verificação periódica do progresso</p> | |
| </div> | |
| <div class="progress-item"> | |
| <i class="fas fa-sliders-h text-blue-500"></i> | |
| <h4 class="font-semibold">Ajustes</h4> | |
| <p>Adaptação contínua do tratamento conforme necessário</p> | |
| </div> | |
| <div class="progress-item"> | |
| <i class="fas fa-door-open text-purple-500"></i> | |
| <h4 class="font-semibold">Alta Planejada</h4> | |
| <p>Preparação gradual para conclusão do tratamento</p> | |
| </div> | |
| </div> | |
| </div> | |
| ` | |
| } | |
| ]; | |
| class ExpandableCards { | |
| constructor() { | |
| this.activeCard = null; | |
| this.cards = [{ | |
| title: 'Consultas de 2 Horas', | |
| icon: 'clock', | |
| description: 'Tempo adequado para uma avaliação completa', | |
| content: ` | |
| <div class="card-expanded-content"> | |
| <p class="text-lg mb-6">Dedico tempo adequado para compreender sua história em profundidade, garantindo uma avaliação completa e personalizada.</p> | |
| <div class="benefits-grid grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="benefit-item"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| <h4 class="font-semibold">Avaliação Detalhada</h4> | |
| <p>Tempo para explorar todos os aspectos relevantes do seu caso</p> | |
| </div> | |
| <div class="benefit-item"> | |
| <i class="fas fa-comments text-blue-500"></i> | |
| <h4 class="font-semibold">Dúvidas Esclarecidas</h4> | |
| <p>Espaço para discutir todas suas questões e preocupações</p> | |
| </div> | |
| <div class="benefit-item"> | |
| <i class="fas fa-tasks text-purple-500"></i> | |
| <h4 class="font-semibold">Plano Terapêutico</h4> | |
| <p>Construção conjunta do tratamento mais adequado</p> | |
| </div> | |
| <div class="benefit-item"> | |
| <i class="fas fa-heart text-red-500"></i> | |
| <h4 class="font-semibold">Atendimento Humanizado</h4> | |
| <p>Foco total em você, sem pressa ou interrupções</p> | |
| </div> | |
| </div> | |
| </div> | |
| ` | |
| }, | |
| { | |
| title: 'Tecnologia Avançada', | |
| icon: 'robot', | |
| description: 'IA e análise de dados para melhor tratamento', | |
| content: ` | |
| <div class="card-expanded-content"> | |
| <p class="text-lg mb-6">Utilização de inteligência artificial e tecnologias modernas para análise aprofundada e acompanhamento personalizado do seu progresso.</p> | |
| <div class="tech-features grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="tech-item"> | |
| <i class="fas fa-brain text-indigo-500"></i> | |
| <h4 class="font-semibold">Análise com IA</h4> | |
| <p>Claude e Vertex AI para análise linguística e comportamental</p> | |
| </div> | |
| <div class="tech-item"> | |
| <i class="fas fa-chart-line text-blue-500"></i> | |
| <h4 class="font-semibold">Monitoramento</h4> | |
| <p>Acompanhamento contínuo do progresso e ajustes necessários</p> | |
| </div> | |
| <div class="tech-item"> | |
| <i class="fas fa-shield-alt text-green-500"></i> | |
| <h4 class="font-semibold">Privacidade</h4> | |
| <p>Dados criptografados e protegidos seguindo LGPD</p> | |
| </div> | |
| <div class="tech-item"> | |
| <i class="fas fa-tablet-alt text-purple-500"></i> | |
| <h4 class="font-semibold">Dashboard</h4> | |
| <p>Visualização clara do seu progresso e metas</p> | |
| </div> | |
| </div> | |
| </div> | |
| ` | |
| }, | |
| { | |
| title: 'Atendimento Personalizado', | |
| icon: 'user-plus', | |
| description: 'Adaptado às suas necessidades específicas', | |
| content: ` | |
| <div class="card-expanded-content"> | |
| <p class="text-lg mb-6">Cada pessoa é única e merece um atendimento que respeite suas particularidades e necessidades específicas.</p> | |
| <div class="service-features grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="service-item"> | |
| <i class="fas fa-home text-teal-500"></i> | |
| <h4 class="font-semibold">Ambiente Adaptado</h4> | |
| <p>Consultório preparado para diferentes necessidades</p> | |
| </div> | |
| <div class="service-item"> | |
| <i class="fas fa-car text-blue-500"></i> | |
| <h4 class="font-semibold">Atendimento Domiciliar</h4> | |
| <p>Disponível para pacientes no raio de 15km</p> | |
| </div> | |
| <div class="service-item"> | |
| <i class="fas fa-clock text-orange-500"></i> | |
| <h4 class="font-semibold">Horários Flexíveis</h4> | |
| <p>Agendamento adaptado à sua rotina</p> | |
| </div> | |
| <div class="service-item"> | |
| <i class="fas fa-comments text-purple-500"></i> | |
| <h4 class="font-semibold">Suporte Contínuo</h4> | |
| <p>Acompanhamento entre consultas via WhatsApp</p> | |
| </div> | |
| </div> | |
| </div> | |
| ` | |
| }, | |
| { | |
| title: 'Metas & Evolução', | |
| icon: 'bullseye', | |
| description: 'Acompanhamento claro do seu progresso', | |
| content: ` | |
| <div class="card-expanded-content"> | |
| <p class="text-lg mb-6">Estabelecimento de objetivos claros e acompanhamento consistente da sua evolução ao longo do tratamento.</p> | |
| <div class="progress-features grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="progress-item"> | |
| <i class="fas fa-flag-checkered text-red-500"></i> | |
| <h4 class="font-semibold">Metas Claras</h4> | |
| <p>Objetivos definidos em conjunto desde o início</p> | |
| </div> | |
| <div class="progress-item"> | |
| <i class="fas fa-clipboard-check text-green-500"></i> | |
| <h4 class="font-semibold">Avaliações</h4> | |
| <p>Verificação periódica do progresso</p> | |
| </div> | |
| <div class="progress-item"> | |
| <i class="fas fa-sliders-h text-blue-500"></i> | |
| <h4 class="font-semibold">Ajustes</h4> | |
| <p>Adaptação contínua do tratamento conforme necessário</p> | |
| </div> | |
| <div class="progress-item"> | |
| <i class="fas fa-door-open text-purple-500"></i> | |
| <h4 class="font-semibold">Alta Planejada</h4> | |
| <p>Preparação gradual para conclusão do tratamento</p> | |
| </div> | |
| </div> | |
| </div> | |
| ` | |
| } | |
| ]; | |
| this.init = function() { | |
| this.createCards(); | |
| this.setupListeners(); | |
| }; | |
| this.createCards = function() { | |
| const container = document.querySelector('#metodo .grid'); | |
| if (!container) return; | |
| this.cards.forEach((card) => { | |
| const cardElement = this.createCardElement(card); | |
| container.appendChild(cardElement); | |
| }); | |
| }; | |
| this.createCardElement = function(card) { | |
| const element = document.createElement('div'); | |
| element.className = 'card relative rounded-xl shadow-lg transition-all duration-500 ease-out transform hover:shadow-xl'; | |
| element.innerHTML = ` | |
| <div class="card-header p-6 cursor-pointer"> | |
| <div class="flex items-center gap-4"> | |
| <div class="icon-wrapper h-12 w-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center"> | |
| <i class="fas fa-${card.icon} text-xl text-primary"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-900">${card.title}</h3> | |
| <p class="text-sm text-gray-600">${card.description}</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-content" style="max-height: 0;"> | |
| ${card.content} | |
| </div> | |
| `; | |
| return element; | |
| }; | |
| this.setupListeners = function() { | |
| const cards = document.querySelectorAll('.card'); | |
| cards.forEach((card, index) => { | |
| const header = card.querySelector('.card-header'); | |
| const content = card.querySelector('.card-content'); | |
| header.addEventListener('click', () => { | |
| if (this.activeCard === index) { | |
| // Close the active card | |
| this.closeCard(card, content); | |
| this.activeCard = null; | |
| } else { | |
| // Close previously active card (if any) | |
| if (this.activeCard !== null) { | |
| const previousCard = cards[this.activeCard]; | |
| this.closeCard(previousCard, previousCard.querySelector('.card-content')); | |
| } | |
| // Open the new card | |
| this.openCard(card, content); | |
| this.activeCard = index; | |
| } | |
| }); | |
| }); | |
| }; | |
| this.openCard = function(card, content) { | |
| card.classList.add('expanded'); | |
| content.style.maxHeight = `${content.scrollHeight}px`; | |
| // Animate entrance of content elements with GSAP | |
| const elements = content.querySelectorAll('.card-expanded-content > *'); | |
| elements.forEach((el) => { | |
| gsap.from(el, { | |
| opacity: 0, | |
| y: 20, | |
| duration: 0.5, | |
| ease: "power2.out", | |
| }); | |
| }); | |
| }; | |
| this.closeCard = function(card, content) { | |
| card.classList.remove('expanded'); | |
| content.style.maxHeight = '0'; | |
| }; | |
| this.init(); | |
| } | |
| } | |
| // ----- GSAP Animations ----- | |
| gsap.registerPlugin(ScrollTrigger); | |
| function initHeroAnimations() { | |
| const heroTimeline = gsap.timeline({ | |
| defaults: { | |
| ease: "power2.out" | |
| } | |
| }); | |
| heroTimeline | |
| .from("#hero h1", { | |
| duration: 1, | |
| y: 50, | |
| opacity: 0, | |
| delay: 0.5 | |
| }) | |
| .from("#hero p", { | |
| duration: 0.8, | |
| y: 30, | |
| opacity: 0 | |
| }, "-=0.6") | |
| .from("#hero form", { | |
| duration: 0.8, | |
| y: 30, | |
| opacity: 0 | |
| }, "-=0.6"); | |
| gsap.to(".bg-hero-gradient::before", { | |
| yPercent: 30, | |
| ease: "none", | |
| scrollTrigger: { | |
| trigger: "#hero", | |
| start: "top top", | |
| end: "bottom top", | |
| scrub: true, | |
| container: "#content-container" // Specify the scroll container | |
| } | |
| }); | |
| } | |
| function initCardAnimations() { | |
| const cards = document.querySelectorAll('.card'); | |
| cards.forEach((card, index) => { | |
| gsap.from(card, { | |
| duration: 0.8, | |
| y: 50, | |
| opacity: 0, | |
| delay: index * 0.2, | |
| scrollTrigger: { | |
| trigger: card, | |
| start: "top bottom-=100", | |
| toggleActions: "play none none reverse", | |
| container: "#content-container" // Specify the scroll container | |
| } | |
| }); | |
| }); | |
| } | |
| function initCarouselAnimations() { | |
| gsap.from("#specialty-carousel", { | |
| duration: 1, | |
| y: 100, | |
| opacity: 0, | |
| scrollTrigger: { | |
| trigger: "#especialidades", | |
| start: "top center", | |
| toggleActions: "play none none reverse", | |
| container: "#content-container" // Specify the scroll container | |
| } | |
| }); | |
| } | |
| function initContactAnimations() { | |
| const contactTimeline = gsap.timeline({ | |
| scrollTrigger: { | |
| trigger: "#contato", | |
| start: "top center", | |
| toggleActions: "play none none reverse", | |
| container: "#content-container" // Specify the scroll container | |
| } | |
| }); | |
| contactTimeline | |
| .from(".map-container", { | |
| duration: 1, | |
| x: -50, | |
| opacity: 0 | |
| }) | |
| .from(".contact-info", { | |
| duration: 1, | |
| x: 50, | |
| opacity: 0 | |
| }, "-=0.8"); | |
| } | |
| function initFloatingButtonsAnimations() { | |
| const buttons = document.querySelectorAll('.floating-btn'); | |
| buttons.forEach((btn, index) => { | |
| gsap.from(btn, { | |
| duration: 0.5, | |
| x: 100, | |
| opacity: 0, | |
| delay: 0.2 + (index * 0.1), | |
| ease: "power2.out", | |
| scrollTrigger: { | |
| trigger: "body", | |
| start: "top top", | |
| end: "+=50", | |
| toggleActions: "play none none reverse", | |
| container: "#content-container" // Specify the scroll container | |
| } | |
| }); | |
| }); | |
| } | |
| function initMobileMenuAnimations() { | |
| const menuBtn = document.getElementById('menu-btn'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| let menuTimeline = gsap.timeline({ | |
| paused: true | |
| }); | |
| menuTimeline | |
| .to(mobileMenu, { | |
| duration: 0.3, | |
| height: "auto", | |
| opacity: 1, | |
| ease: "power2.inOut" | |
| }) | |
| .from(mobileMenu.querySelectorAll('a'), { | |
| duration: 0.4, | |
| y: 20, | |
| opacity: 0, | |
| stagger: 0.1, | |
| ease: "power2.out" | |
| }, "-=0.2"); | |
| menuBtn.addEventListener('click', () => { | |
| if (mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.remove('hidden'); | |
| menuTimeline.play(); | |
| } else { | |
| menuTimeline.reverse().then(() => { | |
| mobileMenu.classList.add('hidden'); | |
| }); | |
| } | |
| }); | |
| } | |
| // ----- Initialization ----- | |
| function initAllAnimations() { | |
| initHeroAnimations(); | |
| initCardAnimations(); | |
| initCarouselAnimations(); | |
| initContactAnimations(); | |
| initFloatingButtonsAnimations(); | |
| initMobileMenuAnimations(); | |
| } | |
| document.addEventListener('DOMContentLoaded', () => { | |
| initAllAnimations(); | |
| new ExpandableCards(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment