templates/soluciones/index.html.twig line 1

Open in your IDE?
  1. {% extends 'new-base.html.twig' %}
  3. {% block contentCenter %}
  5. <style>
  6.     .solutions-title {
  7.         font-size: 3rem;
  8.         font-weight: 700;
  9.         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  10.         -webkit-background-clip: text;
  11.         -webkit-text-fill-color: transparent;
  12.         background-clip: text;
  13.         position: relative;
  14.         display: inline-block;
  15.         letter-spacing: -1px;
  16.         margin-bottom: 2rem;
  17.     }
  18.     
  19.     .solutions-title::after {
  20.         content: '';
  21.         position: absolute;
  22.         bottom: -15px;
  23.         left: 50%;
  24.         transform: translateX(-50%);
  25.         width: 120px;
  26.         height: 4px;
  27.         background: linear-gradient(90deg, transparent, #667eea, #764ba2, transparent);
  28.         border-radius: 2px;
  29.     }
  30.     
  31.     .title-wrapper {
  32.         position: relative;
  33.         display: inline-block;
  34.     }
  35.     
  37.     [data-bs-theme="dark"] .solutions-title {
  38.         background: linear-gradient(135deg, #8b9ef6 0%, #9d7ac4 100%);
  39.         -webkit-background-clip: text;
  40.         -webkit-text-fill-color: transparent;
  41.         background-clip: text;
  42.     }
  43.     
  44.     [data-bs-theme="dark"] .solutions-title::after {
  45.         background: linear-gradient(90deg, transparent, #8b9ef6, #9d7ac4, transparent);
  46.     }
  47.     
  48.     [data-bs-theme="dark"] .title-wrapper::before,
  49.     [data-bs-theme="dark"] .title-wrapper::after {
  50.         background: linear-gradient(135deg, #8b9ef6 0%, #9d7ac4 100%);
  51.         -webkit-background-clip: text;
  52.         -webkit-text-fill-color: transparent;
  53.         background-clip: text;
  54.     }
  55.     
  56.     @media (max-width: 768px) {
  57.         .solutions-title {
  58.             font-size: 2.2rem;
  59.         }
  60.         
  61.         .title-wrapper::before,
  62.         .title-wrapper::after {
  63.             display: none;
  64.         }
  65.     }
  67.     .project-item {
  68.         background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  69.         border-radius: 20px;
  70.         padding: 40px 20px;
  71.         margin-bottom: 40px;
  72.         transition: all 0.3s ease;
  73.         border: 1px solid rgba(102, 126, 234, 0.1);
  74.         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  75.     }
  76.     
  77.     .project-item:hover {
  78.         transform: translateY(-5px);
  79.         box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
  80.         background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
  81.     }
  82.     
  83.     .project-item:nth-child(even) {
  84.         background: linear-gradient(135deg, rgba(118, 75, 162, 0.05) 0%, rgba(102, 126, 234, 0.05) 100%);
  85.     }
  86.     
  87.     .project-item:nth-child(even):hover {
  88.         background: linear-gradient(135deg, rgba(118, 75, 162, 0.08) 0%, rgba(102, 126, 234, 0.08) 100%);
  89.     }
  90.     
  91.     [data-bs-theme="dark"] .project-item {
  92.         background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  93.         border-color: rgba(102, 126, 234, 0.2);
  94.         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  95.     }
  96.     
  97.     [data-bs-theme="dark"] .project-item:hover {
  98.         box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  99.         background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
  100.     }
  101.     
  102.     [data-bs-theme="dark"] .project-item:nth-child(even) {
  103.         background: linear-gradient(135deg, rgba(118, 75, 162, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%);
  104.     }
  105.     
  106.     [data-bs-theme="dark"] .project-item:nth-child(even):hover {
  107.         background: linear-gradient(135deg, rgba(118, 75, 162, 0.15) 0%, rgba(102, 126, 234, 0.15) 100%);
  108.     }
  109.     
  110.     .project-item .bg-secondary {
  111.         border-radius: 15px;
  112.         overflow: hidden;
  113.         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  114.     }
  115.     
  116.     .project-item img {
  117.         transition: transform 0.3s ease;
  118.     }
  119.     
  120.     .project-item:hover img {
  121.         transform: scale(1.02);
  122.     }
  123. </style>
  125. <div class="container-fluid">
  126.     <section class="container mt-5 py-lg-5 py-md-4 py-3" id="proyects">
  127.         <div class="text-center mb-lg-5 mb-4 pb-lg-3 pb-md-2">
  128.             <div class="title-wrapper">
  129.                 <h2 class="solutions-title">Nuestras Soluciones</h2>
  130.             </div>
  131.         </div>
  133.         <!-- Project item -->
  134.         <div class="row gy-4 project-item">
  135.             <div class="col-md-6 rellax" data-rellax-percentage="0.5" data-rellax-speed="0.5" data-disable-parallax-down="md">
  136.                 <div class="bg-secondary rounded-3">
  137.                     <img src="https://audio2text.ai/assets/img/bg/imagen3_audio2text.png" alt="Project image">
  138.                 </div>
  139.             </div>
  140.             <div class="col-xl-4 col-lg-5 col-md-6 col-sm-8 offset-lg-1 d-flex rellax" data-rellax-percentage="0.5" data-rellax-speed="-0.5" data-disable-parallax-down="md">
  141.                 <div class="align-self-center ps-lg-0 ps-md-4">
  142.                     <h4 class="mb-lg-4 mb-3 fs-base fw-normal text-body">Audio2Text</h4>
  143.                     <h3 class="h2 mb-lg-4 mb-3">Transcribe tus Audios a Texto y Analiza</h3>
  144.                     <p class="mb-lg-4 mb-3">Convierte sin esfuerzo las palabras habladas en texto escrito con una precisión incomparable utilizando la tecnología de audio a texto de inteligencia artificial de Audio2Text.</p>
  145.                     <ul class="mb-lg-4 mb-3 fs-sm text-muted list-inline" style="max-width: 19.125rem;">
  146.                         <li class="list-inline-item me-1">
  147.                             API disponibe
  148.                             <span class="ms-1">·</span>
  149.                         </li>
  150.                         <li class="list-inline-item me-1">
  151.                             Tarifas por uso
  152.                             <span class="ms-1">·</span>
  153.                         </li>
  154.                         <li class="list-inline-item me-1">
  155.                             specialistas en call centers
  156.                             <span class="ms-1">·</span>
  157.                         </li>
  158.                         <li class="list-inline-item me-1">
  159.                             Ineligencia Artificial
  160.                         </li>
  161.                     </ul>
  162.                     <a href="https://audio2text.ai/" target="_blank" class="btn btn-lg btn-outline-primary">Ir a Audio2Text</a>
  163.                 </div>
  164.             </div>
  165.         </div>
  167.         <!-- Project item -->
  168.         <div class="row gy-4 project-item">
  169.             <div class="col-xl-4 col-lg-5 col-md-6 col-sm-8 offset-lg-1 d-flex rellax" data-rellax-percentage="0.5" data-rellax-speed="-0.5" data-disable-parallax-down="md">
  170.                 <div class="align-self-center ps-lg-0 ps-md-4">
  171.                     <h4 class="mb-lg-4 mb-3 fs-base fw-normal text-body">Liia</h4>
  172.                     <h3 class="h2 mb-lg-4 mb-3">Extraiga e Identifique Notificaciones Judiciales</h3>
  173.                     <p class="mb-lg-4 mb-3">Obtenga la informacion tabulada de la informacion mas relevante de una notificacion judicial.</p>
  174.                     <ul class="mb-lg-4 mb-3 fs-sm text-muted list-inline" style="max-width: 19.125rem;">
  175.                         <li class="list-inline-item me-1">
  176.                             Relacción Cliente Abogado
  177.                             <span class="ms-1">·</span>
  178.                         </li>
  179.                         <li class="list-inline-item me-1">
  180.                             Conocimiento Legal Único
  181.                             <span class="ms-1">·</span>
  182.                         </li>
  183.                         <li class="list-inline-item me-1">
  184.                             Aplicación tecnología IA
  185.                         </li>
  186.                     </ul>
  187.                     <a href="https://liia.ai/" target="_blank" class="btn btn-lg btn-outline-primary">Ir a Liia</a>
  188.                 </div>
  189.             </div>
  190.             <div class="col-md-6 rellax" data-rellax-percentage="0.5" data-rellax-speed="0.5" data-disable-parallax-down="md">
  191.                 <div class="bg-secondary rounded-3">
  192.                     <img src="silicon/assets/img/landing/liia.png" alt="Project image">
  193.                 </div>
  194.             </div>
  195.         </div>
  197.         <!-- Project item -->
  198.         <div class="row gy-4 project-item">
  199.             <div class="col-md-6 rellax" data-rellax-percentage="0.5" data-rellax-speed="0.5" data-disable-parallax-down="md">
  200.                 <div class="bg-secondary rounded-3">
  201.                     <img src="silicon/assets/img/landing/buzia.png" alt="Project image">
  202.                 </div>
  203.             </div>
  204.             <div class="col-xl-4 col-lg-5 col-md-6 col-sm-8 offset-lg-1 d-flex rellax" data-rellax-percentage="0.5" data-rellax-speed="-0.5" data-disable-parallax-down="md">
  205.                 <div class="align-self-center ps-lg-0 ps-md-4">
  206.                     <h4 class="mb-lg-4 mb-3 fs-base fw-normal text-body">Buzia</h4>
  207.                     <h3 class="h2 mb-lg-4 mb-3">Clasifica y Analiza tu buzones de Email con IA</h3>
  208.                     <p class="mb-lg-4 mb-3">Con Buzia podrás administrar y monitorear tus lista de correos de forma mucho más cómoda con la ayuda de la nueva aplicación que hemos creado.</p>
  209.                     <ul class="mb-lg-4 mb-3 fs-sm text-muted list-inline" style="max-width: 19.125rem;">
  210.                         <li class="list-inline-item me-1">
  211.                             Integracion con gmail, office365...etc
  212.                             <span class="ms-1">·</span>
  213.                         </li>
  214.                         <li class="list-inline-item me-1">
  215.                             Clasifica
  216.                             <span class="ms-1">·</span>
  217.                         </li>
  218.                         <li class="list-inline-item me-1">
  219.                             Procesa
  220.                         </li>
  221.                     </ul>
  222.                     <a href="https://buzia.ai/" target="_blank" class="btn btn-lg btn-outline-primary">Ir a Buzia</a>
  223.                 </div>
  224.             </div>
  225.         </div>
  227.         <!-- Project item -->
  228.         {# <div class="row gy-4 mb-4 pb-md-3 pb-2">
  229.           <div class="col-md-6 rellax" data-rellax-percentage="0.5" data-rellax-speed="0.5" data-disable-parallax-down="md">
  230.             <div class="bg-secondary rounded-3">
  231.               <img src="silicon/assets/img/landing/software-agency-3/projects/02.png" alt="Project image">
  232.             </div>
  233.           </div>
  234.           <div class="col-xl-4 col-lg-5 col-md-6 col-sm-8 offset-lg-1 d-flex rellax" data-rellax-percentage="0.5" data-rellax-speed="-0.5" data-disable-parallax-down="md">
  235.             <div class="align-self-center ps-lg-0 ps-md-4">
  236.               <h4 class="mb-lg-4 mb-3 fs-base fw-normal text-body">Landing Page</h4>
  237.               <h3 class="h2 mb-lg-4 mb-3">Landing page for electric scooters</h3>
  238.               <p class="mb-lg-4 mb-3">Vitae non luctus rhoncus ipsum feugiat luctus ornare. Pretium nulla sed quis duis tristique orci. Odio in pellentesque urna sit facilisi convallis vel tempus.</p>
  239.               <ul class="mb-lg-4 mb-3 fs-sm text-muted list-inline" style="max-width: 19.125rem;">
  240.                 <li class="list-inline-item me-1">
  241.                   Product Strategy
  242.                   <span class="ms-1">·</span>
  243.                 </li>
  244.                 <li class="list-inline-item me-1">
  245.                   Front end Development
  246.                   <span class="ms-1">·</span>
  247.                 </li>
  248.                 <li class="list-inline-item me-1">
  249.                   Systems Design
  250.                   <span class="ms-1">·</span>
  251.                 </li>
  252.                 <li class="list-inline-item me-1">
  253.                   Web Development
  254.                 </li>
  255.               </ul>
  256.               <a href="#" class="btn btn-lg btn-outline-primary">Read More</a>
  257.             </div>
  258.           </div>
  259.         </div> #}
  261.     </section>
  262. </div>
  264. {% endblock %}