templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block meta_description %}{{ meta_description }}{% endblock %}
  5. {% block title %}{{ page_title }}{% endblock %}
  7. {% block body %}
  8.     <!-- Hero Section -->
  9.     <section class="bg-primary bg-gradient py-5 py-md-6">
  10.         <div class="container">
  11.             <div class="row align-items-center">
  12.                 <div class="col-md-6 mb-4 mb-md-0">
  13.                     <h1 class="display-4 fw-bold text-white mb-3">
  14.                         Transform Your Workplace with Team Fitness Challenges
  15.                     </h1>
  16.                     <p class="fs-4 text-white-50 mb-4">
  17.                         Boost morale, improve health, and build team spirit through friendly competition
  18.                     </p>
  19.                     <div class="d-flex flex-column flex-sm-row gap-3">
  20.                         <div class="vue-cta-button" data-text="Get Started" data-link="/register" data-type="primary"></div>
  21.                         <div class="vue-cta-button" data-text="Learn More" data-link="#features" data-type="outline"></div>
  22.                     </div>
  23.                 </div>
  24.                 <div class="col-md-6">
  25.                     <div class="hero-image-container">
  26.                         <img id="hero-image" src="https://placehold.co/600x400/1E88E5/FFFFFF?text=Team+Fitness+Challenge" alt="Team Fitness Challenge">
  27.                     </div>
  28.                 </div>
  29.             </div>
  30.         </div>
  31.     </section>
  33.     <!-- Stats Section -->
  34.     <section class="bg-white py-5">
  35.         <div class="container">
  36.             <div id="animated-stats"></div>
  37.         </div>
  38.     </section>
  40.     <!-- Features Section -->
  41.     <section id="features" class="bg-light py-5">
  42.         <div class="container">
  43.             <div class="text-center mb-5">
  44.                 <h2 class="display-5 fw-bold mb-3">Why Choose Fatness for Service?</h2>
  45.                 <p class="fs-4 text-secondary mx-auto" style="max-width: 800px;">
  46.                     Our platform makes it easy to organize and participate in corporate fitness challenges that boost team morale and improve health.
  47.                 </p>
  48.             </div>
  49.             
  50.             <div id="feature-showcase"></div>
  51.         </div>
  52.     </section>
  54.     <!-- How It Works Section -->
  55.     <section id="how-it-works" class="bg-white py-5">
  56.         <div class="container">
  57.             <div class="text-center mb-5">
  58.                 <h2 class="display-5 fw-bold mb-3">How It Works</h2>
  59.                 <p class="fs-4 text-secondary mx-auto" style="max-width: 800px;">
  60.                     Getting started with Fatness for Service is simple and straightforward.
  61.                 </p>
  62.             </div>
  63.             
  64.             <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
  65.                 <!-- Step 1 -->
  66.                 <div class="col">
  67.                     <div class="card h-100 shadow-sm position-relative">
  68.                         <div class="position-absolute top-0 start-0 translate-middle bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
  69.                             <span class="fs-4 fw-bold">1</span>
  70.                         </div>
  71.                         <div class="card-body pt-4">
  72.                             <h3 class="fs-4 fw-bold mb-3">Create or Join a Team</h3>
  73.                             <p class="text-secondary">Form a team with your colleagues or join an existing one to start your fitness journey together.</p>
  74.                         </div>
  75.                     </div>
  76.                 </div>
  77.                 
  78.                 <!-- Step 2 -->
  79.                 <div class="col">
  80.                     <div class="card h-100 shadow-sm position-relative">
  81.                         <div class="position-absolute top-0 start-0 translate-middle bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
  82.                             <span class="fs-4 fw-bold">2</span>
  83.                         </div>
  84.                         <div class="card-body pt-4">
  85.                             <h3 class="fs-4 fw-bold mb-3">Participate in Activities</h3>
  86.                             <p class="text-secondary">Engage in various fitness activities like running, cycling, or team sports that earn points for your team.</p>
  87.                         </div>
  88.                     </div>
  89.                 </div>
  90.                 
  91.                 <!-- Step 3 -->
  92.                 <div class="col">
  93.                     <div class="card h-100 shadow-sm position-relative">
  94.                         <div class="position-absolute top-0 start-0 translate-middle bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
  95.                             <span class="fs-4 fw-bold">3</span>
  96.                         </div>
  97.                         <div class="card-body pt-4">
  98.                             <h3 class="fs-4 fw-bold mb-3">Submit Evidence</h3>
  99.                             <p class="text-secondary">Upload photos or connect fitness apps to verify your activities and earn points for your team.</p>
  100.                         </div>
  101.                     </div>
  102.                 </div>
  103.                 
  104.                 <!-- Step 4 -->
  105.                 <div class="col">
  106.                     <div class="card h-100 shadow-sm position-relative">
  107.                         <div class="position-absolute top-0 start-0 translate-middle bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
  108.                             <span class="fs-4 fw-bold">4</span>
  109.                         </div>
  110.                         <div class="card-body pt-4">
  111.                             <h3 class="fs-4 fw-bold mb-3">Climb the Leaderboard</h3>
  112.                             <p class="text-secondary">Track your team's progress on real-time leaderboards and compete for the top spot.</p>
  113.                         </div>
  114.                     </div>
  115.                 </div>
  116.             </div>
  117.         </div>
  118.     </section>
  120.     <!-- Testimonials Section -->
  121.     <section id="testimonials" class="bg-light py-5">
  122.         <div class="container">
  123.             <div class="text-center mb-5">
  124.                 <h2 class="display-5 fw-bold mb-3">What Our Users Say</h2>
  125.                 <p class="fs-4 text-secondary mx-auto" style="max-width: 800px;">
  126.                     Hear from companies that have transformed their workplace with Fatness for Service.
  127.                 </p>
  128.             </div>
  129.             
  130.             <div class="row row-cols-1 row-cols-md-3 g-4">
  131.                 <!-- Testimonial 1 -->
  132.                 <div class="col">
  133.                     <div class="card h-100 shadow-sm">
  134.                         <div class="card-body">
  135.                             <div class="d-flex align-items-center mb-3">
  136.                                 <img src="https://placehold.co/100/1E88E5/FFFFFF?text=JD" alt="John Doe" class="rounded-circle me-3" width="48" height="48">
  137.                                 <div>
  138.                                     <h4 class="fw-bold mb-0">John Doe</h4>
  139.                                     <p class="text-secondary small">HR Director, TechCorp</p>
  140.                                 </div>
  141.                             </div>
  142.                             <p class="text-secondary fst-italic">"Implementing Fatness for Service has transformed our company culture. Employee engagement is up 40% and sick days are down!"</p>
  143.                         </div>
  144.                     </div>
  145.                 </div>
  146.                 
  147.                 <!-- Testimonial 2 -->
  148.                 <div class="col">
  149.                     <div class="card h-100 shadow-sm">
  150.                         <div class="card-body">
  151.                             <div class="d-flex align-items-center mb-3">
  152.                                 <img src="https://placehold.co/100/43A047/FFFFFF?text=JS" alt="Jane Smith" class="rounded-circle me-3" width="48" height="48">
  153.                                 <div>
  154.                                     <h4 class="fw-bold mb-0">Jane Smith</h4>
  155.                                     <p class="text-secondary small">Team Lead, InnovateCo</p>
  156.                                 </div>
  157.                             </div>
  158.                             <p class="text-secondary fst-italic">"The friendly competition has brought our remote teams closer together. We've seen improved collaboration across departments."</p>
  159.                         </div>
  160.                     </div>
  161.                 </div>
  162.                 
  163.                 <!-- Testimonial 3 -->
  164.                 <div class="col">
  165.                     <div class="card h-100 shadow-sm">
  166.                         <div class="card-body">
  167.                             <div class="d-flex align-items-center mb-3">
  168.                                 <img src="https://placehold.co/100/00ACC1/FFFFFF?text=RJ" alt="Robert Johnson" class="rounded-circle me-3" width="48" height="48">
  169.                                 <div>
  170.                                     <h4 class="fw-bold mb-0">Robert Johnson</h4>
  171.                                     <p class="text-secondary small">CEO, StartupXYZ</p>
  172.                                 </div>
  173.                             </div>
  174.                             <p class="text-secondary fst-italic">"Our team's health metrics have improved significantly since implementing these challenges. The ROI on this platform has been incredible."</p>
  175.                         </div>
  176.                     </div>
  177.                 </div>
  178.             </div>
  179.         </div>
  180.     </section>
  182.     <!-- CTA Section -->
  183.     <section class="bg-success bg-gradient py-5">
  184.         <div class="container text-center">
  185.             <h2 class="display-5 fw-bold text-white mb-3">Ready to Transform Your Workplace?</h2>
  186.             <p class="fs-4 text-white-50 mb-4 mx-auto" style="max-width: 800px;">
  187.                 Join hundreds of companies already improving team health and morale with Fatness for Service.
  188.             </p>
  189.             <div class="d-flex flex-column flex-sm-row justify-content-center gap-3">
  190.                 <div class="vue-cta-button" data-text="Register Now" data-link="/register" data-type="primary"></div>
  191.                 <div class="vue-cta-button" data-text="Contact Sales" data-link="/contact" data-type="outline"></div>
  192.             </div>
  193.         </div>
  194.     </section>
  195. {% endblock %}