templates/Home/listing.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>Pimcore Company</title>
  8.         
  9.        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
  10.         
  11.         
  12.         {#font awesome cdn link#}
  13.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  14.         
  15.         {#custom css file link#}
  16.         
  17.         <style>
  18.             #ban:hover{
  19.                 background-color:orange;
  20.             }
  21.             .l-content, .a-content{
  22.                 font-size: 12px;
  23.                 color: #A0A5A5;
  24.             }
  25.             #review-fa{
  26.                 color:#759698;
  27.             }
  28.             .swiper-slide{
  29.                 box-shadow: var(--box-shadow);
  30.             }
  31.             .repo-left{
  32.                 width : 65%;
  33.                 display:inline;
  34.                 float:left;
  35.                 background-color: #F9FBFF!important;
  36.                 margin-left: 20px;
  37.                 box-shadow: var(--box-shadow);
  38.                 border-radius: 15px;
  39.             }
  40.             .repo-right{
  41.                 width : 35%;
  42.                 display:inline;
  43.             }
  44.             .about-repo{
  45.                 padding:10px;
  46.                 height:455px;
  47.             }
  48.             .right-img{
  49.                 padding-left: 10px;
  50.                 width: 400px;
  51.                 padding-top: 3px;
  52.                 height: 289px;
  54.             }
  55.             .repo-left p{
  56.                 padding:15px;
  57.                 font-size:14px;
  58.                 font-style:oblique;
  59.                 color:#606F8A;
  60.                 word-spacing: 1px;
  61.             }
  62.             .h-repo{
  63.                 font-size:26px;
  64.                 text-align:center;
  65.                 color:#0C2425;
  66.                 padding:20px;
  67.             }
  68.             .features{
  69.                 width: 80%;
  70.                 text-align: left;
  71.                 margin: auto;
  72.                 padding: 30px;
  73.                 word-spacing: 1px;
  74.                 font-size:14px;
  75.                 border-radius: 30px;
  76.                 background-color: #F9FBFF;
  77.                 box-shadow: var(--box-shadow);
  78.             }
  79.             .features-main{
  80.                 height:800px;
  81.             }
  82.         </style>
  84.     </head>
  85.     <body>
  86.         {#header section starts#}
  87.         
  88.     {% include 'includes/company-home-header.html.twig' %}
  89.     
  90.         {#header section ends#}
  91.         
  92.         {#home section starts#}
  93.         
  94.         <section class="home" id="home">
  95.             <div class="content">
  96.                 <h3>Welcome to the digital realm of <span>Companies Repository!</span> </h3>
  97.                 <p>This repository is the culmination of our commitment to cultivating a culture of shared learning, continuous improvement, and effective knowledge management.</p>
  98.                 <a href="#" class="ban" id="ban">Learn more</a>
  99.             </div>
  100.         </section>
  101.         
  102.         {#home section ends#}
  103.         <div class="about-repo">
  104.             {# <h2 class="h-repo">About Repos</h2> #}
  105.             <h1 class="heading"> About <span>Repos</span></h1>
  106.             <div class="repo-left">
  107.                 
  108.                 <p>The Company Repository stands as a digital sanctuary of knowledge, innovation, and collaboration, meticulously designed to empower our organization's endeavors. It serves as an intellectual vault, meticulously housing a wealth of information, resources, and insights that underpin the core functions of our company. This repository is the embodiment of our commitment to fostering a culture of shared learning, continuous advancement, and efficient knowledge management.</p>
  109.                 <p>The Company Repository functions as a dynamic nexus where invaluable intellectual assets converge, align, and are readily accessible to all stakeholders. Within its virtual corridors, one can navigate through an eclectic assortment of documents, presentations, research findings, project histories, best practices, and other pivotal company intelligence. Through an intricate system of organization and indexing, this repository becomes a pivotal tool in heightening productivity, streamlining decision-making, and nurturing interdepartmental cooperation.</p>
  110.                 
  111.             </div>
  112.             <div class="repo-right">
  113.                 <img src = "https://img.freepik.com/free-vector/wireless-technology-glow-isometric-composition-with-cloud-big-data-storage-communication-teleconference-presentation-drone-delivery_1284-27115.jpg?w=360" class="right-img">
  114.             </div>
  115.         </div>
  116.         {#companies section starts#}
  117.         <section class="companies" id="#">
  118.             
  119.             <h1 class="heading">Listing <span>Companies</span></h1>
  120.             <div class="box-container">
  121.                 {% for repos in Companies | slice(0,3) %}
  122.                 <div class="box">
  123.                     <img src="/var/assets{{repos.companyLogo}}" alt="">
  124.                     <h3>{{repos.businessName}}</h3>
  125.                     <div class="l-content">
  126.                         {{repos.Description | raw}}
  127.                         {#<a href="/companyDetails?id={{repos.id}}" target="_blank" class="btn">read more</a>#}
  128.                     </div>
  129.                     <a href="/companyDetails?id={{repos.id}}" target="_blank" class="btn">read more</a>
  130.                 </div>
  131.                {% endfor %}  
  132.             </div>
  133.            
  134.         </section>
  135.         
  136.         {#companies section ends#}
  137.         
  138.         
  139.         {#article section starts#}
  140.         
  141.         <section class="articles" id="articles">
  142.             <h1 class="heading">Technology <span>Trends</span></h1>
  143.             <div class="box-container">
  144.                 {% for repos in Articles | slice(0,3) %}
  145.                 <div class="box">
  146.                     <img src="/var/assets{{repos.articleImage}}" alt=""><br>
  147.                     <div class="content">
  148.                         <div class="icons">
  149.                             <a href="#"><i class="fas fa-user"></i>{{repos.author}}</a>
  150.                             <a href="#"><i class="fas fa-calendar"></i>{{repos.articleDate}}</a>
  151.                         </div>
  152.                         <h3>{{repos.articleTitle}}</h3>
  153.                         <div class="a-content">
  154.                             {{repos.articleDescription | raw}}
  155.                         </div>
  156.                         {# <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, expedita.</p> #}
  157.                         <a href="/articleDetails?id={{repos.id}}" target="_self" class="btn">read more</a>
  158.                     </div>
  159.                 </div>
  160.                {% endfor %} 
  161.             </div>
  162.         </section>
  163.         <div class="features-main">
  164.             <h1 class="heading"> Repository <span>Features</span></h1>
  165.             <div class="features">
  166.                 <h3 style="font-size:20px; color:#051023;">Key Features:</h3>
  167.                     <b style="color:#061530; font-size:15px;">Knowledge Enrichment:</b> <p>The repository employs an intuitive taxonomy, enabling seamless classification and organization of knowledge. Documents are meticulously tagged, ensuring that searches yield precise results and users can locate insights effortlessly.</p><br>
  168.                     <b style="color:#061530; font-size:15px;">Version Control Mastery:</b> <p>Vigilant version control safeguards against the proliferation of outdated or contradictory information. Users gain access to the most current resources, enriching their efforts with the latest developments.</p><br>
  169.                     <b style="color:#061530; font-size:15px;">Collaboration Catalyst:</b> <p>Beyond a static storage space, the repository acts as a crucible for collaboration. Team members engage in real-time co-creation and collaborative editing, facilitating synergistic ideation.</p><br>
  170.                     <b style="color:#061530; font-size:15px;">Innovation Enclave:</b> <p>The repository serves as a launchpad for innovative ideas, a realm where employees can share radical concepts, research discoveries, and experimental undertakings. This environment stimulates creative thinking and accelerates new initiatives.</p><br>
  171.                     <b style="color:#061530; font-size:15px;">Onboarding Excellence:</b> <p>An indispensable resource for new members, the repository accelerates the onboarding process through comprehensive training materials and resources. This equips newcomers to swiftly become contributing assets to the organization.</p><br>
  172.                     <b style="color:#061530; font-size:15px;">Secure Sanctuary:</b> <p>A robust security framework ensures confidential information remains safeguarded. Access privileges are diligently managed, allowing only authorized personnel to engage with sensitive materials.</p><br>
  173.                     <b style="color:#061530; font-size:15px;">Analytics Insights:</b> <p>The repository provides data-driven insights into usage patterns and engagement metrics. These insights inform resource allocation, content augmentation, and training strategies.</p>
  174.             </div>
  175.         </div>
  176.         {#article section ends#}
  177.         
  178.         
  179.         {#reviews section starts#}
  180.         <section class="review" id="review">
  181.             <h1 class="heading"><span>Reviews</span></h1>
  182.             <div class="swiper review-slider">
  183.                 <div class="swiper-wrapper">
  184.                     {% for repos in ReviewsAndRatings %}
  185.                     <div class="swiper-slide box">
  186.                       {#<img src="../_default_upload_bucket/company.jpg" alt="">#}
  187.                       <i class="fas fa-user" style="font-size:10rem;" id="review-fa"></i>
  188.                       <h3>{{repos.companies}}</h3>
  189.                     <p>{{repos.writeReview}}</p>
  190.                     {% if repos.name|length %}
  191.                     <h2>Reviewer's Name: {{repos.name}}</h2>
  192.                     {% endif %}
  193.                     {% if repos.designation|length %}
  194.                     <p id="designation">{{repos.designation}}</p>
  195.                     {% endif %}
  196.                       <h3> {{repos.rating}}</h3>
  197.                       
  198.                       {#rating looping section starts#}
  199.                       {#<div class="d-flex" style="color: orange;">#}
  200.                       {#      {% for i in range(0, 4) %}#}
  201.                       {#          {% if repos.rating - i + 0.0000000001 >= 0.8 %}#}
  202.                       {#              <i class="bi bi-star-fill"></i>#}
  203.                       {#          {% elseif repos.rating - i - 0.0000000001 <= 0.2 %}#}
  204.                       {#              <i class="bi bi-star"></i>#}
  205.                       {#          {% else %}#}
  206.                       {#              <i class="bi bi-star-half"></i>#}
  207.                       {#          {% endif %}#}
  208.                       {#      {% endfor %}#}
  209.                       {#          <span class="ps-1">{{repos.rating}}</span>#}
  210.                       {#      </div>#}
  211.                       
  212.                       <div class="d-flex" style="color: orange;">
  213.                             {% for i in range(0, 4) %}
  214.                                 {% if repos.rating - i >= 0.8 %}
  215.                                     <i class="fas fa-star"></i>
  216.                                 {% elseif repos.rating - i <= 0.2 %}
  217.                                     <i class="far fa-star"></i>
  218.                                 {% else %}
  219.                                     <i class="fas fa-star-half-alt"></i>
  220.                                 {% endif %}
  221.                             {% endfor %}
  222.                                 {#<span class="ps-1">{{repos.rating}}</span>#}
  223.                             </div>
  224.                       
  225.                       {#rating looping section ends#}
  226.                     </div>
  227.                     {% endfor %}
  228.                 </div>
  229.             </div>
  230.         </section>
  231.         
  232.         {#reviews section ends#}
  233.         
  234.         
  235.         
  236.         {#footer section starts#}
  237.         
  238.         {% include 'includes/company-footer.html.twig' %}
  239.         
  240.         {#footer section ends#}
  241.         
  242.         
  243.         
  244.         {#custom js file link#}
  245.         <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
  246.             <script>
  247.             
  248.             let navbar = document.querySelector('.navbar');
  249.             document.querySelector('#menu-btn').onclick = () => {
  250.                 navbar.classList.toggle('active');
  251.                 searchForm.classList.remove('active');
  252.                 shoppingCart.classList.remove('active');
  253.                 loginForm.classList.remove('active');
  254.             }
  255.             
  256.             window.onscroll = () =>{
  257.                 searchForm.classList.remove('active');
  258.                 shoppingCart.classList.remove('active');
  259.                 loginForm.classList.remove('active');
  260.                 navbar.classList.remove('active');
  261.             }
  262.             
  263.             var swiper = new Swiper(".review-slider",{
  264.                 loop:true,
  265.                 spaceBetween: 20,
  266.                 autoplay: {
  267.                     delay: 7500,
  268.                     disableOnInteraction: false,
  269.                 },
  270.                 centeredSlides: true,
  271.                 breakpoints: {
  272.                     0: {
  273.                         slidePreview: 1,
  274.                     },
  275.                     768: {
  276.                         slidesPerView: 2,
  277.                     },
  278.                     1024: {
  279.                         slidesPerView: 3,
  280.                     },
  281.                 },
  282.             });
  283.             
  284.         </script>
  285.     </body>
  286. </html>
  288. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  289. <script>
  290. jQuery(document).ready(function(){
  291.     jQuery('.l-content').each(function(){
  292.         var myDiv = $(this);
  293.         myDiv.text(myDiv.text().substring(0,130)+'....');
  294.     });
  295.     jQuery('.a-content').each(function(){
  296.         var myDiv = $(this);
  297.         myDiv.text(myDiv.text().substring(0,130)+'....');
  298.     });
  299. });
  301. </script>