templates/footer.html.twig line 1

Open in your IDE?
  1. <footer class="footer-medico-profesional">
  2.     <div class="container-xl">
  3.         <!-- Contenido principal -->
  4.         <div class="footer-main-content">
  5.             <div class="footer-grid-layout">
  6.                 
  7.                 <!-- Columna 1: Branding y contacto -->
  8.                 <div class="footer-brand-section">
  9.                     <div class="brand-container">
  10.                         <div class="brand-header">
  11.                             <div class="brand-logo-container">
  12.                              <img src="{{ asset('images/logo-clinica-dark.png') }}" alt="ImagingPro - Centro de Diagnóstico" class="logo-img">
  13.                             </div>
  14.                         </div>
  15.                         <p class="brand-description-text">
  16.                             <span class="text-content" data-lang="es">Líderes en diagnóstico por imágenes médicas con más de 25 años de experiencia y tecnología de vanguardia.</span>
  17.                             <span class="text-content" data-lang="en" style="display:none;">Leaders in medical imaging diagnosis with over 25 years of experience and cutting-edge technology.</span>
  18.                         </p>
  19.                     </div>
  21.                     <!-- Información de contacto -->
  22.                     <div class="contact-info-section">
  23.                         <div class="contact-item">
  24.                             <i class="bi bi-telephone contact-icon"></i>
  25.                             <span class="contact-text">+1 817-264-7814</span>
  26.                         </div>
  27.                         <div class="contact-item">
  28.                             <i class="bi bi-envelope contact-icon"></i>
  29.                             <span class="contact-text">imagingprodallas@gmail.com</span>
  30.                         </div>
  31.                         <div class="contact-item">
  32.                             <i class="bi bi-clock contact-icon"></i>
  33.                             <span class="contact-text">
  34.                                 <span class="text-content" data-lang="es">Lunes - Sábados: 9:00 AM - 6:00 PM</span>
  35.                                 <span class="text-content" data-lang="en" style="display:none;">Monday - Saturday: 9:00 AM - 6:00 PM</span>
  36.                             </span>
  37.                         </div>
  38.                     </div>
  40.                     <!-- Redes sociales -->
  41.                     <div class="social-media-section">
  42.                         <h6 class="social-section-title">
  43.                             <span class="text-content" data-lang="es">Conecta con Nosotros</span>
  44.                             <span class="text-content" data-lang="en" style="display:none;">Connect With Us</span>
  45.                         </h6>
  46.                         <div class="social-icons-container">
  47.                             <a href="#" class="social-media-link" aria-label="Facebook">
  48.                                 <i class="bi bi-facebook"></i>
  49.                             </a>
  50.                             <a href="#" class="social-media-link" aria-label="Twitter">
  51.                                 <i class="bi bi-twitter-x"></i>
  52.                             </a>
  53.                             <a href="#" class="social-media-link" aria-label="LinkedIn">
  54.                                 <i class="bi bi-linkedin"></i>
  55.                             </a>
  56.                             <a href="#" class="social-media-link" aria-label="Instagram">
  57.                                 <i class="bi bi-instagram"></i>
  58.                             </a>
  59.                         </div>
  60.                     </div>
  61.                 </div>
  63.                 <!-- Columna 2: Servicios de Radiología -->
  64.                 <div class="footer-services-column">
  65.                     <h4 class="services-column-title">
  66.                         <span class="text-content" data-lang="es">Radiología</span>
  67.                         <span class="text-content" data-lang="en" style="display:none;">Radiology</span>
  68.                     </h4>
  69.                     <ul class="services-list">
  70.                         <li><a href="#rayos-x" class="service-link">
  71.                             <span class="text-content" data-lang="es">Rayos X Digital</span>
  72.                             <span class="text-content" data-lang="en" style="display:none;">Digital X-Ray</span>
  73.                         </a></li>
  74.                         <li><a href="#radiografia" class="service-link">
  75.                             <span class="text-content" data-lang="es">Radiografía</span>
  76.                             <span class="text-content" data-lang="en" style="display:none;">Radiography</span>
  77.                         </a></li>
  78.                         <li><a href="#mamografia" class="service-link">
  79.                             <span class="text-content" data-lang="es">Mamografía</span>
  80.                             <span class="text-content" data-lang="en" style="display:none;">Mammography</span>
  81.                         </a></li>
  82.                         <li><a href="#arteriografia-venografia" class="service-link">
  83.                             <span class="text-content" data-lang="es">Arteriografía/Venografía</span>
  84.                             <span class="text-content" data-lang="en" style="display:none;">Arteriography/Venography</span>
  85.                         </a></li>
  86.                     </ul>
  87.                 </div>
  89.                 <!-- Columna 3: Ultrasonidos -->
  90.                 <div class="footer-services-column">
  91.                     <h4 class="services-column-title">
  92.                         <span class="text-content" data-lang="es">Ultrasonidos</span>
  93.                         <span class="text-content" data-lang="en" style="display:none;">Ultrasounds</span>
  94.                     </h4>
  95.                     <ul class="services-list">
  96.                         <li><a href="#u-4D" class="service-link">
  97.                             <span class="text-content" data-lang="es">Ultrasonido 4D</span>
  98.                             <span class="text-content" data-lang="en" style="display:none;">4D Ultrasound</span>
  99.                         </a></li>
  100.                         <li><a href="#u-abdominal" class="service-link">
  101.                             <span class="text-content" data-lang="es">Ultrasonido Abdominal</span>
  102.                             <span class="text-content" data-lang="en" style="display:none;">Abdominal Ultrasound</span>
  103.                         </a></li>
  104.                         <li><a href="#u-mama" class="service-link">
  105.                             <span class="text-content" data-lang="es">Ultrasonido Mama</span>
  106.                             <span class="text-content" data-lang="en" style="display:none;">Breast Ultrasound</span>
  107.                         </a></li>
  108.                         <li><a href="#u-pelvico" class="service-link">
  109.                             <span class="text-content" data-lang="es">Ultrasonido Pelvico</span>
  110.                             <span class="text-content" data-lang="en" style="display:none;">Pelvic Ultrasound</span>
  111.                         </a></li>
  112.                         <li><a href="#u-prostata" class="service-link">
  113.                             <span class="text-content" data-lang="es">Ultrasonido Prostata</span>
  114.                             <span class="text-content" data-lang="en" style="display:none;">Prostate Ultrasound</span>
  115.                         </a></li>
  116.                         <li><a href="#u-renal" class="service-link">
  117.                             <span class="text-content" data-lang="es">Ultrasonido Renal</span>
  118.                             <span class="text-content" data-lang="en" style="display:none;">Renal Ultrasound</span>
  119.                         </a></li>
  120.                         <li><a href="#u-escrotal" class="service-link">
  121.                             <span class="text-content" data-lang="es">Ultrasonido Escrotal</span>
  122.                             <span class="text-content" data-lang="en" style="display:none;">Scrotal Ultrasound</span>
  123.                         </a></li>
  124.                         <li><a href="#u-tiroidea" class="service-link">
  125.                             <span class="text-content" data-lang="es">Ultrasonido Tiroideo</span>
  126.                             <span class="text-content" data-lang="en" style="display:none;">Thyroid Ultrasound</span>
  127.                         </a></li>
  128.                     </ul>
  129.                 </div>
  131.                 <!-- Columna 4: Estudios Especializados -->
  132.                 <div class="footer-services-column">
  133.                     <h4 class="services-column-title">
  134.                         <span class="text-content" data-lang="es">Estudios Avanzados</span>
  135.                         <span class="text-content" data-lang="en" style="display:none;">Advanced Studies</span>
  136.                     </h4>
  137.                     <ul class="services-list">
  138.                         <li><a href="#tomografia" class="service-link">
  139.                             <span class="text-content" data-lang="es">Tomografía</span>
  140.                             <span class="text-content" data-lang="en" style="display:none;">Tomography</span>
  141.                         </a></li>
  142.                         <li><a href="#resonancia" class="service-link">
  143.                             <span class="text-content" data-lang="es">Resonancia Magnética</span>
  144.                             <span class="text-content" data-lang="en" style="display:none;">Magnetic Resonance</span>
  145.                         </a></li>
  146.                         <li><a href="#nuclear" class="service-link">
  147.                             <span class="text-content" data-lang="es">Medicina Nuclear</span>
  148.                             <span class="text-content" data-lang="en" style="display:none;">Nuclear Medicine</span>
  149.                         </a></li>
  150.                         <li><a href="#ecocardiograma" class="service-link">
  151.                             <span class="text-content" data-lang="es">Ecocardiograma</span>
  152.                             <span class="text-content" data-lang="en" style="display:none;">Echocardiogram</span>
  153.                         </a></li>
  154.                         <li><a href="#u-musculoesqueletico" class="service-link">
  155.                             <span class="text-content" data-lang="es">Ultrasonido Musculoesquelético</span>
  156.                             <span class="text-content" data-lang="en" style="display:none;">Musculoskeletal Ultrasound</span>
  157.                         </a></li>
  158.                         <li><a href="#u-obstetrico" class="service-link">
  159.                             <span class="text-content" data-lang="es">Ultrasonido Obstétrico</span>
  160.                             <span class="text-content" data-lang="en" style="display:none;">Obstetric Ultrasound</span>
  161.                         </a></li>
  162.                     </ul>
  163.                 </div>
  165.                 <!-- Columna 5: Estudios Vasculares y Enlaces -->
  166.                 <div class="footer-services-column">
  167.                     <h4 class="services-column-title">
  168.                         <span class="text-content" data-lang="es">Estudios Vasculares</span>
  169.                         <span class="text-content" data-lang="en" style="display:none;">Vascular Studies</span>
  170.                     </h4>
  171.                     <ul class="services-list">
  172.                         <li><a href="#u-vascular" class="service-link">
  173.                             <span class="text-content" data-lang="es">Ultrasonido Vascular</span>
  174.                             <span class="text-content" data-lang="en" style="display:none;">Vascular Ultrasound</span>
  175.                         </a></li>
  176.                         <li><a href="#u-vascular-periferico" class="service-link">
  177.                             <span class="text-content" data-lang="es">Ultrasonido Vascular Periférico</span>
  178.                             <span class="text-content" data-lang="en" style="display:none;">Peripheral Vascular Ultrasound</span>
  179.                         </a></li>
  180.                         <li><a href="#u-intravascular" class="service-link">
  181.                             <span class="text-content" data-lang="es">Ultrasonido Intravascular</span>
  182.                             <span class="text-content" data-lang="en" style="display:none;">Intravascular Ultrasound</span>
  183.                         </a></li>
  184.                     </ul>
  186.                     <!-- Enlaces rápidos -->
  187.                     <h4 class="services-column-title quick-links-title">
  188.                         <span class="text-content" data-lang="es">Navegación</span>
  189.                         <span class="text-content" data-lang="en" style="display:none;">Navigation</span>
  190.                     </h4>
  191.                     <ul class="services-list">
  192.                         <li><a href="{{ path('home_index') }}" class="service-link">
  193.                             <span class="text-content" data-lang="es">Inicio</span>
  194.                             <span class="text-content" data-lang="en" style="display:none;">Home</span>
  195.                         </a></li>
  196.                         <li><a href="{{ path('home_index') }}#servicios" class="service-link">
  197.                             <span class="text-content" data-lang="es">Servicios</span>
  198.                             <span class="text-content" data-lang="en" style="display:none;">Services</span>
  199.                         </a></li>
  200.                         <li><a href="{{ path('home_index') }}#experiencia" class="service-link">
  201.                             <span class="text-content" data-lang="es">Excelencia Médica</span>
  202.                             <span class="text-content" data-lang="en" style="display:none;">Medical Excellence</span>
  203.                         </a></li>
  204.                         <li><a href="{{ path('home_index') }}#contacto" class="service-link">
  205.                             <span class="text-content" data-lang="es">Contacto</span>
  206.                             <span class="text-content" data-lang="en" style="display:none;">Contact</span>
  207.                         </a></li>
  208.                         <li><a href="{{ path('home_index') }}#formas-medicas" class="service-link">
  209.                             <span class="text-content" data-lang="es">Formas Médicas</span>
  210.                             <span class="text-content" data-lang="en" style="display:none;">Medical Forms</span>
  211.                         </a></li>
  212.                     </ul>
  213.                 </div>
  215.             </div>
  216.         </div>
  218.         <!-- Divisor -->
  219.         <div class="footer-divider-line"></div>
  221.         <!-- Footer inferior -->
  222.         <div class="footer-bottom-section">
  223.             <div class="footer-bottom-content">
  224.                 <div class="copyright-info">
  225.                     <p class="copyright-text">
  226.                         <span class="text-content" data-lang="es">© 2025 ImagingPro Centro de Diagnóstico. Todos los derechos reservados.</span>
  227.                         <span class="text-content" data-lang="en" style="display:none;">© 2025 ImagingPro Diagnostic Center. All rights reserved.</span>
  228.                     </p>
  229.                     <p class="footer-motto">
  230.                         <span class="text-content" data-lang="es">Especializados con tecnología de vanguardia para brindar la mejor experiencia médica.</span>
  231.                         <span class="text-content" data-lang="en" style="display:none;">Specialized with cutting-edge technology to provide the best medical experience.</span>
  232.                     </p>
  233.                 </div>
  234.                 
  235.                 <div class="legal-links-section">
  236.                     <a href="#privacidad" class="legal-link-item">
  237.                         <span class="text-content" data-lang="es">Política de Privacidad</span>
  238.                         <span class="text-content" data-lang="en" style="display:none;">Privacy Policy</span>
  239.                     </a>
  240.                     <span class="link-separator">|</span>
  241.                     <a href="#terminos" class="legal-link-item">
  242.                         <span class="text-content" data-lang="es">Términos de Uso</span>
  243.                         <span class="text-content" data-lang="en" style="display:none;">Terms of Use</span>
  244.                     </a>
  245.                 </div>
  246.             </div>
  247.         </div>
  248.     </div>
  249. </footer>
  251. <style>
  252. /* FOOTER STYLES - Usando SOLO las variables de tu paleta */
  254. /* Footer principal */
  255. .footer-medico-profesional {
  256.     background: linear-gradient(135deg, var(--footer-dark) 0%, var(--footer-darker) 100%);
  257.     color: var(--bg-white);
  258.     position: relative;
  259.     overflow: hidden;
  260.     border-top: 1px solid var(--border-light);
  261.     margin-top: auto;
  262. }
  264. .footer-medico-profesional::before {
  265.     content: '';
  266.     position: absolute;
  267.     top: 0;
  268.     left: 0;
  269.     right: 0;
  270.     height: 1px;
  271.     background: linear-gradient(90deg, transparent, var(--footer-light-blue), transparent);
  272. }
  274. /* Contenido principal */
  275. .footer-main-content {
  276.     padding: 4rem 0 2.5rem;
  277. }
  279. .footer-grid-layout {
  280.     display: grid;
  281.     grid-template-columns: 2.2fr 1fr 1fr 1fr 1.2fr;
  282.     gap: 2.5rem;
  283.     align-items: start;
  284. }
  286. /* Branding section */
  287. .footer-brand-section {
  288.     padding-right: 1.5rem;
  289. }
  291. .brand-container {
  292.     margin-bottom: 2rem;
  293. }
  295. .brand-header {
  296.     display: flex;
  297.     align-items: center;
  298.     gap: 1rem;
  299.     margin-bottom: 1.5rem;
  300. }
  302. .brand-logo-container {
  303.     width: 345px;
  304.     height: 145px;
  305.     display: flex;
  306.     align-items: center;
  307.     justify-content: center;
  308.     margin-left: -20px;
  309. }
  311. .brand-logo-img {
  312.     width: 100%;
  313.     height: 100%;
  314.     object-fit: contain;
  315. }
  317. .brand-text-content {
  318.     display: flex;
  319.     flex-direction: column;
  320. }
  322. .brand-main-title {
  323.     font-size: 1.5rem;
  324.     font-weight: 700;
  325.     margin: 0;
  326.     color: var(--bg-white);
  327.     letter-spacing: -0.5px;
  328. }
  330. .brand-subtitle-accent {
  331.     font-size: 0.85rem;
  332.     color: var(--footer-light-blue);
  333.     font-weight: 600;
  334.     text-transform: uppercase;
  335.     letter-spacing: 0.5px;
  336. }
  338. .brand-description-text {
  339.     color: var(--text-light);
  340.     line-height: 1.6;
  341.     font-size: 0.95rem;
  342.     margin: 0;
  343. }
  345. /* Información de contacto */
  346. .contact-info-section {
  347.     margin-bottom: 2rem;
  348. }
  350. .contact-item {
  351.     display: flex;
  352.     align-items: center;
  353.     gap: 0.75rem;
  354.     margin-bottom: 0.75rem;
  355.     color: var(--text-light);
  356.     font-size: 0.9rem;
  357. }
  359. .contact-icon {
  360.     color: var(--accent-teal);
  361.     width: 16px;
  362.     font-size: 0.9rem;
  363. }
  365. .contact-text {
  366.     font-weight: 500;
  367. }
  369. /* Redes sociales */
  370. .social-media-section {
  371.     margin-top: 2rem;
  372. }
  374. .social-section-title {
  375.     color: var(--bg-white);
  376.     margin-bottom: 1rem;
  377.     font-size: 0.95rem;
  378.     font-weight: 600;
  379.     text-transform: uppercase;
  380.     letter-spacing: 0.5px;
  381. }
  383. .social-icons-container {
  384.     display: flex;
  385.     gap: 0.75rem;
  386. }
  388. .social-media-link {
  389.     display: flex;
  390.     align-items: center;
  391.     justify-content: center;
  392.     width: 42px;
  393.     height: 42px;
  394.     border-radius: 10px;
  395.     background: rgba(255, 255, 255, 0.08);
  396.     color: var(--text-light);
  397.     text-decoration: none;
  398.     transition: all 0.3s ease;
  399.     border: 1px solid var(--border-light);
  400.     position: relative;
  401.     overflow: hidden;
  402. }
  404. .social-media-link::before {
  405.     content: '';
  406.     position: absolute;
  407.     top: 0;
  408.     left: -100%;
  409.     width: 100%;
  410.     height: 100%;
  411.     background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  412.     transition: left 0.5s ease;
  413. }
  415. .social-media-link:hover {
  416.     background: var(--footer-light-blue);
  417.     color: var(--bg-white);
  418.     transform: translateY(-3px);
  419.     box-shadow: var(--shadow-hover);
  420.     border-color: var(--footer-light-blue);
  421. }
  423. .social-media-link:hover::before {
  424.     left: 100%;
  425. }
  427. /* Columnas de servicios */
  428. .footer-services-column {
  429.     display: flex;
  430.     flex-direction: column;
  431. }
  433. .services-column-title {
  434.     color: var(--bg-white);
  435.     font-size: 1.1rem;
  436.     font-weight: 600;
  437.     margin-bottom: 1.5rem;
  438.     position: relative;
  439.     padding-bottom: 0.75rem;
  440. }
  442. .services-column-title::after {
  443.     content: '';
  444.     position: absolute;
  445.     bottom: 0;
  446.     left: 0;
  447.     width: 35px;
  448.     height: 3px;
  449.     background: linear-gradient(90deg, var(--footer-light-blue), var(--accent-teal));
  450.     border-radius: 3px;
  451. }
  453. .quick-links-title {
  454.     margin-top: 2rem;
  455. }
  457. .services-list {
  458.     list-style: none;
  459.     padding: 0;
  460.     margin: 0;
  461.     display: flex;
  462.     flex-direction: column;
  463.     gap: 0.5rem;
  464. }
  466. .service-link {
  467.     display: block;
  468.     color: var(--text-light);
  469.     text-decoration: none;
  470.     font-size: 0.9rem;
  471.     padding: 0.5rem 0;
  472.     transition: all 0.3s ease;
  473.     position: relative;
  474.     padding-left: 0;
  475.     border-left: 2px solid transparent;
  476. }
  478. .service-link:hover {
  479.     color: var(--bg-white);
  480.     transform: translateX(8px);
  481.     border-left-color: var(--accent-teal);
  482.     padding-left: 1rem;
  483. }
  485. /* Divisor */
  486. .footer-divider-line {
  487.     height: 1px;
  488.     background: linear-gradient(90deg, transparent, var(--border-light), transparent);
  489.     margin: 1.5rem 0;
  490. }
  492. /* Footer inferior */
  493. .footer-bottom-section {
  494.     padding: 1.5rem 0;
  495. }
  497. .footer-bottom-content {
  498.     display: flex;
  499.     justify-content: space-between;
  500.     align-items: center;
  501.     flex-wrap: wrap;
  502.     gap: 1.5rem;
  503. }
  505. .copyright-info {
  506.     flex: 1;
  507.     min-width: 300px;
  508. }
  510. .copyright-text {
  511.     color: var(--text-light);
  512.     margin: 0 0 0.5rem 0;
  513.     font-size: 0.9rem;
  514.     font-weight: 500;
  515. }
  517. .footer-motto {
  518.     color: var(--text-light);
  519.     margin: 0;
  520.     font-size: 0.85rem;
  521.     font-style: italic;
  522. }
  524. .legal-links-section {
  525.     display: flex;
  526.     align-items: center;
  527.     gap: 0.75rem;
  528.     flex-wrap: wrap;
  529. }
  531. .legal-link-item {
  532.     color: var(--text-light);
  533.     text-decoration: none;
  534.     font-size: 0.85rem;
  535.     transition: color 0.3s ease;
  536.     font-weight: 500;
  537. }
  539. .legal-link-item:hover {
  540.     color: var(--footer-light-blue);
  541. }
  543. .link-separator {
  544.     color: var(--border-light);
  545.     font-size: 0.85rem;
  546. }
  548. /* Responsive */
  549. @media (max-width: 1200px) {
  550.     .footer-grid-layout {
  551.         grid-template-columns: 2fr 1fr 1fr 1fr;
  552.         gap: 2rem;
  553.     }
  554.     
  555.     .footer-services-column:last-child {
  556.         grid-column: 1 / -1;
  557.         margin-top: 2rem;
  558.     }
  559. }
  561. @media (max-width: 992px) {
  562.     .footer-grid-layout {
  563.         grid-template-columns: 1fr 1fr;
  564.         gap: 2.5rem;
  565.     }
  566.     
  567.     .footer-brand-section {
  568.         grid-column: 1 / -1;
  569.         padding-right: 0;
  570.     }
  571.     
  572.     .footer-main-content {
  573.         padding: 3rem 0 2rem;
  574.     }
  575. }
  577. @media (max-width: 768px) {
  578.     .footer-grid-layout {
  579.         grid-template-columns: 1fr;
  580.         gap: 2.5rem;
  581.     }
  582.     
  583.     .footer-bottom-content {
  584.         flex-direction: column;
  585.         text-align: center;
  586.         gap: 1rem;
  587.     }
  588.     
  589.     .copyright-info {
  590.         min-width: auto;
  591.     }
  592.     
  593.     .legal-links-section {
  594.         justify-content: center;
  595.     }
  596.     
  597.     .brand-header {
  598.         justify-content: center;
  599.         text-align: center;
  600.         flex-direction: column;
  601.         gap: 0.75rem;
  602.     }
  603.     
  604.     .social-icons-container {
  605.         justify-content: center;
  606.     }
  607. }
  609. @media (max-width: 576px) {
  610.     .footer-medico-profesional {
  611.         padding: 2rem 0;
  612.     }
  613.     
  614.     .footer-main-content {
  615.         padding: 2rem 0 1.5rem;
  616.     }
  617.     
  618.     .service-link:hover {
  619.         transform: none;
  620.         padding-left: 0.5rem;
  621.     }
  622.     
  623.     .brand-logo-container {
  624.         padding: 10px;
  625.     }
  626. }
  627. </style>