templates/partials/partialsHome/_about.html.twig line 1

Open in your IDE?
  1. <section id="about" class="py-20 bg-white">
  2.     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  3.         <div class="grid md:grid-cols-2 gap-12 items-center">
  4.             <div data-aos="fade-right">
  5.                 <h2 id="about-heading" class="text-4xl font-extrabold text-primary-blue mb-6">
  6.                     <span class="border-b-4 border-gold pb-2">{{ 'about.heading'|trans }}</span>
  7.                 </h2>
  8.                 <p id="about-text" class="text-gray-700 mb-6 text-lg">
  9.                     {{ 'about.text'|trans }}
  10.                 </p>
  11.                 <div class="space-y-4">
  12.                     <div class="flex items-start">
  13.                         <i class="fas fa-check-circle text-gold text-xl mr-3 mt-1"></i>
  14.                         <p id="about-point-1" class="text-gray-700">{{ 'about.point1'|trans }}</p>
  15.                     </div>
  16.                     <div class="flex items-start">
  17.                         <i class="fas fa-check-circle text-gold text-xl mr-3 mt-1"></i>
  18.                         <p id="about-point-2" class="text-gray-700">{{ 'about.point2'|trans }}</p>
  19.                     </div>
  20.                     <div class="flex items-start">
  21.                         <i class="fas fa-check-circle text-gold text-xl mr-3 mt-1"></i>
  22.                         <p id="about-point-3" class="text-gray-700">{{ 'about.point3'|trans }}</p>
  23.                     </div>
  24.                     <div class="flex items-start">
  25.                         <i class="fas fa-check-circle text-gold text-xl mr-3 mt-1"></i>
  26.                         <p id="about-point-4" class="text-gray-700">{{ 'about.point4'|trans }}</p>
  27.                     </div>
  28.                 </div>
  29.                 <a href="#contact" id="learn-more-link" class="inline-block mt-8 px-6 py-3 bg-primary-blue text-white font-semibold rounded-lg hover:bg-primary-blue-dark transition duration-300">
  30.                     {{ 'about.learnMoreLink'|trans }}
  31.                 </a>
  32.             </div>
  34.             <div data-aos="fade-left" class="grid grid-cols-2 gap-4">
  35.                 <div class="space-y-4">
  36.                     <div class="bg-gray-50 p-6 rounded-xl shadow-md">
  37.                         <i class="fas fa-globe-africa text-primary-blue text-3xl mb-4"></i>
  38.                         <h4 id="expertise-heading" class="font-bold text-gray-800 mb-2">{{ 'about.expertiseHeading'|trans }}</h4>
  39.                         <p id="expertise-desc" class="text-gray-600 text-sm">{{ 'about.expertiseDesc'|trans }}</p>
  40.                     </div>
  41.                     <div class="bg-gray-50 p-6 rounded-xl shadow-md">
  42.                         <i class="fas fa-handshake text-gold text-3xl mb-4"></i>
  43.                         <h4 id="partnership-heading" class="font-bold text-gray-800 mb-2">{{ 'about.partnershipHeading'|trans }}</h4>
  44.                         <p id="partnership-desc" class="text-gray-600 text-sm">{{ 'about.partnershipDesc'|trans }}</p>
  45.                     </div>
  46.                 </div>
  47.                 <div class="space-y-4 mt-8">
  48.                     <div class="bg-gray-50 p-6 rounded-xl shadow-md">
  49.                         <i class="fas fa-shield-alt text-red text-3xl mb-4"></i>
  50.                         <h4 id="security-heading" class="font-bold text-gray-800 mb-2">{{ 'about.securityHeading'|trans }}</h4>
  51.                         <p id="security-desc" class="text-gray-600 text-sm">{{ 'about.securityDesc'|trans }}</p>
  52.                     </div>
  53.                     <div class="bg-gray-50 p-6 rounded-xl shadow-md">
  54.                         <i class="fas fa-bolt text-primary-blue text-3xl mb-4"></i>
  55.                         <h4 id="processing-heading" class="font-bold text-gray-800 mb-2">{{ 'about.processingHeading'|trans }}</h4>
  56.                         <p id="processing-desc" class="text-gray-600 text-sm">{{ 'about.processingDesc'|trans }}</p>
  57.                     </div>
  58.                 </div>
  59.             </div>
  60.         </div>
  61.     </div>
  62. </section>