Update src/app/page.tsx

Merge version_17 into main

src/app/page.tsx

@@ -4,6 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import HeroBillboard from "@/components/sections/hero/HeroBillboard";
 import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
+import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
 import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
 import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
@@ -60,47 +61,37 @@ export default function LandingPage() {
       </div>
 
       <div id="specialties" data-section="specialties">
-        <div style={{ padding: "var(--vw-3) var(--vw-1_5)", textAlign: "center", backgroundColor: "var(--background-accent)" }}>
-          <h2 style={{ fontSize: "2rem", marginBottom: "1.5rem", fontWeight: "bold" }}>Tabela de Exames e Serviços</h2>
-          <div style={{ overflowX: "auto", margin: "0 auto", maxWidth: "100%" }}>
-            <table style={{
-              width: "100%",              borderCollapse: "collapse",              backgroundColor: "var(--card)",              borderRadius: "8px",              overflow: "hidden",              boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
-            }}>
-              <thead>
-                <tr style={{ backgroundColor: "var(--primary-cta)", color: "var(--primary-cta-text)" }}>
-                  <th style={{ padding: "1rem", textAlign: "left", borderRight: "1px solid var(--accent)" }}>Exame/Serviço</th>
-                  <th style={{ padding: "1rem", textAlign: "left", borderRight: "1px solid var(--accent)" }}>Descrição</th>
-                  <th style={{ padding: "1rem", textAlign: "left" }}>Indicação</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr style={{ borderBottom: "1px solid var(--accent)" }}>
-                  <td style={{ padding: "1rem", fontWeight: "bold", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Consulta Oftalmológica</td>
-                  <td style={{ padding: "1rem", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Avaliação completa da saúde ocular com anamnese detalhada e testes de visão.</td>
-                  <td style={{ padding: "1rem", color: "var(--foreground)" }}>Para todos que desejam verificar a saúde dos olhos</td>
-                </tr>
-                <tr style={{ borderBottom: "1px solid var(--accent)" }}>
-                  <td style={{ padding: "1rem", fontWeight: "bold", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Exame de Vista</td>
-                  <td style={{ padding: "1rem", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Diagnóstico para correção visual adequada e prescrição de óculos ou lentes de contato.</td>
-                  <td style={{ padding: "1rem", color: "var(--foreground)" }}>Dificuldade para enxergar, visão borrada ou embaçada</td>
-                </tr>
-                <tr style={{ borderBottom: "1px solid var(--accent)" }}>
-                  <td style={{ padding: "1rem", fontWeight: "bold", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Diagnóstico de Doenças Oculares</td>
-                  <td style={{ padding: "1rem", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Identificação e tratamento de glaucoma, catarata, inflamações e outras patologias.</td>
-                  <td style={{ padding: "1rem", color: "var(--foreground)" }}>Suspeita de glaucoma, catarata ou outras doenças oculares</td>
-                </tr>
-                <tr style={{ borderBottom: "1px solid var(--accent)" }}>
-                  <td style={{ padding: "1rem", fontWeight: "bold", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Acompanhamento Visual</td>
-                  <td style={{ padding: "1rem", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Monitoramento contínuo da saúde ocular ao longo do tempo para prevenção e controle.</td>
-                  <td style={{ padding: "1rem", color: "var(--foreground)" }}>Pacientes com histórico de doenças oculares ou idosos</td>
-                </tr>
-                <tr>
-                  <td style={{ padding: "1rem", fontWeight: "bold", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Avaliação para Óculos</td>
-                  <td style={{ padding: "1rem", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Determinação precisa da receita ideal com conforto visual máximo.</td>
-                  <td style={{ padding: "1rem", color: "var(--foreground)" }}>Necessidade de correção visual ou atualização de prescrição</td>
-                </tr>
-              </tbody>
-            </table>
+        <div className="flex flex-col gap-8 py-20">
+          <div className="max-w-4xl mx-auto">
+            <h2 className="text-4xl font-bold mb-4">Especialidades e Serviços</h2>
+            <p className="text-lg text-gray-600 mb-8">Oferecemos uma gama completa de serviços oftalmológicos com diagnóstico preciso e tratamento eficaz.</p>
+            
+            <div className="space-y-6">
+              <div className="border-b pb-6">
+                <h3 className="text-xl font-semibold mb-2">Consulta Oftalmológica</h3>
+                <p className="text-gray-700">Avaliação completa da saúde ocular com anamnese detalhada e testes de visão.</p>
+              </div>
+              
+              <div className="border-b pb-6">
+                <h3 className="text-xl font-semibold mb-2">Exame de Vista</h3>
+                <p className="text-gray-700">Diagnóstico para correção visual adequada e prescrição de óculos ou lentes de contato.</p>
+              </div>
+              
+              <div className="border-b pb-6">
+                <h3 className="text-xl font-semibold mb-2">Diagnóstico de Doenças Oculares</h3>
+                <p className="text-gray-700">Identificação e tratamento de glaucoma, catarata, inflamações e outras patologias.</p>
+              </div>
+              
+              <div className="border-b pb-6">
+                <h3 className="text-xl font-semibold mb-2">Acompanhamento Visual</h3>
+                <p className="text-gray-700">Monitoramento contínuo da saúde ocular ao longo do tempo para prevenção e controle.</p>
+              </div>
+              
+              <div className="pb-6">
+                <h3 className="text-xl font-semibold mb-2">Avaliação para Óculos</h3>
+                <p className="text-gray-700">Determinação precisa da receita ideal com conforto visual máximo.</p>
+              </div>
+            </div>
           </div>
         </div>
       </div>