templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{% endblock %}
  5. {% block body %}
  8.     <style>
  9.         
  10.         .hero {
  11.             height: 50vh;
  12.             background: url('/images/test.png') no-repeat center center/cover;
  13.             display: flex;
  14.             align-items: center;
  15.             justify-content: center;
  16.             position: relative;
  17.             text-align: center;
  18.             color: white;
  19.         }
  20.         .hero-overlay {
  21.             position: absolute;
  22.             top: 0;
  23.             left: 0;
  24.             width: 100%;
  25.             height: 100%;
  26.             background: rgba(0, 0, 0, 0.5);
  27.             z-index: 1;
  28.         }
  29.         .hero-content {
  30.             position: relative;
  31.             z-index: 2;
  32.         }
  33.         .hero-content h1 {
  34.             font-size: 4rem;
  35.             font-weight: 600;
  36.             margin-bottom: 20px;
  37.             text-shadow: 2px 2px 5px #000;
  38.         }
  40.         .hero-content p {
  41.             font-size: 1.5rem;
  42.             margin-bottom: 30px;
  43.             text-shadow: 1px 1px 3px #000;
  44.         }
  46.         .hero-content .btn {
  47.             margin: 10px;
  48.             padding: 15px 30px;
  49.             font-size: 1.2rem;
  50.             background-color: #e50914;
  51.             color: white;
  52.             border: none;
  53.             transition: transform 0.3s ease, background-color 0.3s ease;
  54.         }
  55.         .hero-content .btn:hover {
  56.             background-color: #c10812;
  57.             transform: scale(1.05);
  58.         }
  59.         
  60.         .section-title {
  61.             font-weight: 600;
  62.             margin-bottom: 0px;
  63.             color: #e50914;
  64.         }
  65.         .card:hover {
  66.             transform: translateY(-5px);
  67.             box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  68.         }
  69.         .carousel-item img {
  70.             object-fit: cover;
  71.             height: 400px;
  72.         }
  73.         .popup-img {
  74.             cursor: pointer;
  75.         }
  76.         .carousel-indicators button {
  77.             background-color: #f8f9fa;
  78.             width: 20px;
  79.             height: 20px;
  80.         }
  82.         .carousel-indicators .active {
  83.             background-color: #dc3545!important; /* Un tono más claro para destacar */
  84.         }
  85.         .carousel-indicators {
  86.              /* Un tono más claro para destacar */
  87.         }
  88.         .b-r {
  89.             border: 1px solid #dc3545!important;
  90.             background-color: #f8f9fa !important;
  91.             border-radius: 100px;
  92.         }
  93.     </style>
  94.     <!-- Estilos -->
  95.     <style>
  96.         /* Estilo para las tarjetas (hover zoom) */
  97.         .hover-card {
  98.             transition: transform 0.3s ease, box-shadow 0.3s ease;
  99.         }
  101.         .hover-card:hover {
  102.             transform: scale(1.05);
  103.             box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
  104.         }
  106.         /* Estilo adicional para las imágenes redondeadas en la tarjeta */
  107.         .card-img-top {
  108.             border-radius: 8px 8px 0 0;
  109.         }
  110.     </style>
  111.     <!-- Estilos -->
  112.     <style>
  113.         #events h3 {
  114.             font-weight: bold;
  115.             font-size: 1.75rem;
  116.         }
  118.         #events p {
  119.             line-height: 1.8;
  120.             font-size: 1rem;
  121.             color: #555;
  122.         }
  124.         /* Ajustes de imágenes */
  125.         #events img {
  126.             height: auto;
  127.             max-height: 50vh;
  128.             object-fit: cover;
  129.         }
  131.         /* Control hover para flechas del carrusel */
  132.         .carousel-control-prev-icon,
  133.         .carousel-control-next-icon {
  134.             
  135.             /*background-color: rgba(0, 0, 0, 0.5);*/
  136.             filter: invert(1);
  137.             border-radius: 50%;
  138.             width: 50px;
  139.             height: 50px;
  140.             
  142.         }
  143.         .carousel-control-next,
  144.         .carousel-control-prev{
  145.             opacity: 0.2;
  146.             background: lightgrey;
  147.         }
  148.         .carousel-control-next:hover,
  149.         .carousel-control-prev:hover{
  150.             opacity: 0.3;
  151.             background: lightgrey;
  152.         }
  154.         .carousel-control-next:focus,
  155.         .carousel-control-prev:focus{
  156.             opacity: 0.3;
  157.             background: lightgrey;
  158.         }
  160.         /* Ajustes responsivos */
  161.         @media (max-width: 768px) {
  162.             .hero h1{
  163.                 font-size:2.5rem;
  164.             }
  165.             #events img {
  166.                 max-height: 250px;
  167.             }
  169.             #events h3 {
  170.                 font-size: 1.5rem;
  171.             }
  173.             #events p {
  174.                 font-size: 0.9rem;
  175.             }
  176.             .carousel-control-next,
  177.             .carousel-control-prev{
  178.                 display:none;
  179.             }
  180.         }
  182.         .stiky-container{
  183.             height:50vh;
  184.         }
  185.     </style>
  187. <!-- Estilos para centrar el contenido -->
  188. <style>
  189.     .event-content {
  190.         display: flex;
  191.         flex-direction: column;
  192.         align-items: center;
  193.         justify-content: center;
  194.         min-height: 300px; /* Ajusta este valor según el alto deseado */
  195.     }
  196.     
  197. </style>
  199. <body>
  200.     <!-- Header -->
  201.     {{ render(controller('App\\Controller\\HeaderController::index')) }}
  202.     <!-- Hero Section -->
  203.     <section id="hero" class="py-3" style="min-height: 50vh; background-color: #fff;">
  204.         <div class="container">
  205.             <div class="hero rounded">
  206.                 <div class="hero-overlay rounded"></div>
  207.                 <div class="hero-content text-white">
  208.                     <h1>Bienvenido a TCGBUNKER</h1>
  209.                     <p>Donde cada deck es único</p>
  210.                     <div>
  211.                         <button class="btn" onclick="window.location.href='/order'">Ver Decks</button>
  212.                     </div>
  213.                 </div>
  214.             </div>
  215.         </div>
  216.     </section>
  218.     <section id="best-dishes" class="py-3" style="background-color: #fff;" >
  219.         <div class="container h-100 d-flex flex-column justify-content-center">
  220.                 {{ render(controller('App\\Controller\\Blocks\\BestProductsController::index')) }}
  221.             </div>
  222.         </div>
  223.     </section>
  225.     <section class="py-3" style="background-color: #fff;">
  226.         <div class="container">
  227.             <div class="row align-items-center">
  228.             <!-- Column 1: Imagen -->
  229.             <div class="col-md-7 mb-4 mb-md-0 " >
  230.                 <img src="/images/b6v8unpgk1b91.jpg" alt="Imagen de vendedor" class="img-fluid rounded w-100" style="max-height: 450px" />
  231.             </div>
  232.             <!-- Column 2: Texto y Botón -->
  233.             <div class="col-md-5 text-center text-md-start">
  234.                 <h1 class="h1 mb-4 text-center fw-bolder section-title">Conviértete en Vendedor</h1>
  235.                 <button type="button" class="btn btn-primary w-100" onclick="window.location.href = '/contact'">Contactanos</button>
  236.             </div>
  237.             </div>
  238.         </div>
  239.     </section>
  241.     <section id="best" class="py-3" style="background-color: #fff;" >
  242.         <div class="container h-100 d-flex flex-column justify-content-center">
  243.                 {{ render(controller('App\\Controller\\Blocks\\CategoryViewController::index')) }}
  244.             </div>
  245.         </div>
  246.     </section>
  248.     
  249. </body>
  252. {% endblock %}