### Install PHPMailer via Composer

Source: https://github.com/yashasnagraj/kaleitics-website/blob/master/php/vendor/phpmailer/phpmailer/README.md

Add the dependency to your project's composer.json file or run the command directly in your terminal.

```json
"phpmailer/phpmailer": "~6.0"
```

```sh
composer require phpmailer/phpmailer
```

--------------------------------

### Send an email using PHPMailer

Source: https://github.com/yashasnagraj/kaleitics-website/blob/master/php/vendor/phpmailer/phpmailer/README.md

This example demonstrates how to send an email using PHPMailer. Ensure you have installed PHPMailer via Composer and included the autoloader. Configure SMTP settings, recipients, attachments, and content before sending.

```php
<?php
// Import PHPMailer classes into the global namespace
// These must be at the top of your script, not inside a function
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

//Load Composer's autoloader
require 'vendor/autoload.php';

$mail = new PHPMailer(true);                              // Passing `true` enables exceptions
try {
    //Server settings
    $mail->SMTPDebug = 2;                                 // Enable verbose debug output
    $mail->isSMTP();                                      // Set mailer to use SMTP
    $mail->Host = 'smtp1.example.com;smtp2.example.com';  // Specify main and backup SMTP servers
    $mail->SMTPAuth = true;                               // Enable SMTP authentication
    $mail->Username = 'user@example.com';                 // SMTP username
    $mail->Password = 'secret';                           // SMTP password
    $mail->SMTPSecure = 'tls';                            // Enable TLS encryption, `ssl` also accepted
    $mail->Port = 587;                                    // TCP port to connect to

    //Recipients
    $mail->setFrom('from@example.com', 'Mailer');
    $mail->addAddress('joe@example.net', 'Joe User');     // Add a recipient
    $mail->addAddress('ellen@example.com');               // Name is optional
    $mail->addReplyTo('info@example.com', 'Information');
    $mail->addCC('cc@example.com');
    $mail->addBCC('bcc@example.com');

    //Attachments
    $mail->addAttachment('/var/tmp/file.tar.gz');         // Add attachments
    $mail->addAttachment('/tmp/image.jpg', 'new.jpg');    // Optional name

    //Content
    $mail->isHTML(true);                                  // Set email format to HTML
    $mail->Subject = 'Here is the subject';
    $mail->Body    = 'This is the HTML message body <b>in bold!</b>';
    $mail->AltBody = 'This is the body in plain text for non-HTML mail clients';

    $mail->send();
    echo 'Message has been sent';
} catch (Exception $e) {
    echo 'Message could not be sent. Mailer Error: ', $mail->ErrorInfo;
}

```

--------------------------------

### Initialize WOW.js for Scroll Animations

Source: https://context7.com/yashasnagraj/kaleitics-website/llms.txt

Sets up WOW.js to animate elements as they scroll into the viewport. It configures the animation class and the offset distance for triggering animations.

```javascript
// Initialize WOW.js for scroll-triggered animations
wow = new WOW({
  animateClass: 'animated',
  offset: 50
});
wow.init();
```

--------------------------------

### Initialize Swiper.js Carousel Sliders

Source: https://context7.com/yashasnagraj/kaleitics-website/llms.txt

Configuration for carousel and testimonial sliders using Swiper.js with loop mode and navigation controls.

```javascript
// Initialize carousel slider with Swiper.js
var swiper = new Swiper('.carousel-slider', {
  slidesPerView: 'auto',
  spaceBetween: 5,
  centeredSlides: true,
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  }
});

// Testimonials slider configuration
var swipers = new Swiper('.testimonials-slider', {
  slidesPerView: 'auto',
  spaceBetween: 5,
  centeredSlides: true,
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  }
});
```

--------------------------------

### Define HTML5 Page Structure

Source: https://context7.com/yashasnagraj/kaleitics-website/llms.txt

Standard boilerplate for the website pages, including meta tags, CSS/JS file inclusions, and structural placeholders.

```html
<!-- Standard page structure -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Kaleitics | See Data Differently</title>

  <!-- CSS FILES -->
  <link rel="stylesheet" href="css/fontawesome.min.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <!-- Preloader -->
  <div class="preloader">...</div>

  <!-- Page Transition -->
  <div class="page-transition">...</div>

  <!-- Navigation -->
  <nav class="navbar">...</nav>

  <!-- Header -->
  <header class="header">...</header>

  <!-- Content Sections -->
  <section class="content-block">...</section>

  <!-- Footer -->
  <footer class="footer">...</footer>

  <!-- JS FILES -->
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/scripts.js"></script>
</body>
</html>
```

--------------------------------

### Initialize Stellar.js for Parallax Effects

Source: https://context7.com/yashasnagraj/kaleitics-website/llms.txt

Configures Stellar.js to create parallax scrolling effects. It is set to disable horizontal scrolling and enable responsive behavior.

```javascript
// Initialize Stellar.js for parallax effects
$.stellar({
  horizontalScrolling: false,
  verticalOffset: 0,
  responsive: true
});
```

--------------------------------

### Implement Page Transitions with jQuery

Source: https://context7.com/yashasnagraj/kaleitics-website/llms.txt

Handles page transitions by preventing default link behavior and triggering an animated overlay. It avoids transitions for links targeting new tabs, fancybox, or internal page anchors.

```javascript
// Page transition on link click
$('body a').on('click', function(e) {
  var target = $(this).attr('target');
  var fancybox = $(this).data('fancybox');
  var url = this.getAttribute("href");

  if (target != '_blank' && typeof fancybox == 'undefined' && url.indexOf('#') < 0) {
    e.preventDefault();
    var url = this.getAttribute("href");

    if (url.indexOf('#') != -1) {
      var hash = url.substring(url.indexOf('#'));
      if ($('body ' + hash).length != 0) {
        $('.page-transition').removeClass("active");
      }
    } else {
      $('.page-transition').toggleClass("active");
      setTimeout(function() {
        window.location = url;
      }, 1300);
    }
  }
});
```

--------------------------------

### Load PHPMailer Classes Manually

Source: https://github.com/yashasnagraj/kaleitics-website/blob/master/php/vendor/phpmailer/phpmailer/README.md

Use this method if you are not using Composer. Ensure the paths point to the correct location of the PHPMailer source files.

```php
<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require 'path/to/PHPMailer/src/Exception.php';
require 'path/to/PHPMailer/src/PHPMailer.php';
require 'path/to/PHPMailer/src/SMTP.php';
```

--------------------------------

### Implement Hamburger Menu Toggle

Source: https://context7.com/yashasnagraj/kaleitics-website/llms.txt

jQuery event handler to toggle navigation visibility and apply CSS transition delays for mobile-friendly menus.

```javascript
// Hamburger menu toggle functionality
$('.hamburger').on('click', function(e) {
  if ($(".site-navigation").hasClass("active")) {
    $(".hamburger").toggleClass("open");
    $("body").toggleClass("overflow");
    $(".site-navigation").removeClass("active");
    $(".site-navigation").css("transition-delay", "0.9s");
    $(".site-navigation .inner").css("transition-delay", "0s");
  } else {
    $(".hamburger").toggleClass("open");
    $("body").toggleClass("overflow");
    $(".site-navigation").toggleClass("active");
    $(".site-navigation").css("transition-delay", "0s");
    $(".site-navigation .inner").css("transition-delay", "0.65s");
  }
});
```

--------------------------------

### SCSS Theme Variables and Mixins

Source: https://context7.com/yashasnagraj/kaleitics-website/llms.txt

Defines color variables and reusable mixins for font rendering and smooth transitions in SCSS. These are used for consistent styling across the website.

```scss
// Theme color variables
$color-blue: #490eea;
$color-turquaz: #7ee6f8;
$color-dark: #131314;

// Font rendering mixin for smooth text
@mixin font-render {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

// Cubic transition for smooth animations
@mixin transition-cubic {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

// Standard transition mixin
@mixin transition {
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}
```

--------------------------------

### Configure PHPMailer for SMTP Email Sending

Source: https://context7.com/yashasnagraj/kaleitics-website/llms.txt

Sets up PHPMailer to send emails via SMTP using Yahoo Mail. It configures server settings, authentication, recipients, and email content with error handling.

```php
<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require 'vendor/autoload.php';

$mail = new PHPMailer();

try {
    // Server settings
    $mail->isSMTP();
    $mail->Host       = 'smtp.mail.yahoo.com';
    $mail->SMTPAuth   = true;
    $mail->Username   = 'your-email@yahoo.com';
    $mail->Password   = 'your-password';
    $mail->SMTPSecure = 'tls';
    $mail->Port       = 465;

    // Recipients
    $mail->setFrom('sender@example.com');
    $mail->addAddress('recipient@example.com');
    $mail->addReplyTo($_REQUEST['email'], $_REQUEST['name']);

    // Content
    $mail->isHTML(true);
    $mail->Subject = $_REQUEST['subject'];

    $fields = array(
        "name" => "Name",
        "email" => "E-mail",
        "subject" => "Subject",
        "message" => "Message"
    );

    $body = "Here is the message from your website:\n\n";
    foreach ($fields as $a => $b) {
        $body .= sprintf("%20s: %s\n", $b, $_REQUEST[$a]);
    }

    $mail->Body    = $body;
    $mail->AltBody = $body;

    $mail->send();
    echo 'Message has been sent';
} catch (Exception $e) {
    echo "Message could not be sent. Mailer Error: {$mail->ErrorInfo}";
}
```

--------------------------------

### Update Git Remote URL

Source: https://github.com/yashasnagraj/kaleitics-website/blob/master/php/vendor/phpmailer/phpmailer/README.md

Use this command to update remote URLs for existing clones if they reference an old GitHub location.

```shell
git remote set-url upstream https://github.com/PHPMailer/PHPMailer.git
```

--------------------------------

### Background Image Data Attribute (JavaScript)

Source: https://context7.com/yashasnagraj/kaleitics-website/llms.txt

Dynamically sets background images for elements using a 'data-background' attribute. This allows background images to be specified directly in HTML.

```javascript
// Set background images from data attributes
var pageSection = $(".bg-image");
pageSection.each(function(indx) {
  if ($(this).attr("data-background")) {
    $(this).css("background-image", "url(" + $(this).data("background") + ")");
  }
});

// HTML usage
// <section class="bg-image" data-background="images/hero-bg.jpg">
//   <div class="content">...</div>
// </section>
```

--------------------------------

### Contact Form HTML Structure

Source: https://context7.com/yashasnagraj/kaleitics-website/llms.txt

Defines the HTML structure for a contact form with input fields for name, email, subject, and message. It includes elements for success and error messages.

```html
<form id="contact" name="contact" method="post">
  <div class="form-group">
    <input type="text" name="name" id="name" autocomplete="off" required>
    <span>Your name</span>
  </div>
  <div class="form-group">
    <input type="text" name="email" id="email" autocomplete="off" required>
    <span>Your e-mail</span>
  </div>
  <div class="form-group">
    <input type="text" name="subject" id="subject" autocomplete="off" required>
    <span>Subject</span>
  </div>
  <div class="form-group">
    <textarea name="message" id="message" autocomplete="off" required></textarea>
    <span>Your message</span>
  </div>
  <div class="form-group">
    <button id="submit" type="submit" name="submit">Submit</button>
  </div>
</form>

<div id="success" class="alert alert-success" role="alert">
  Your message was sent successfully!
</div>
<div id="error" class="alert alert-danger" role="alert">
  Something went wrong, try refreshing and submitting the form again.
</div>
```

--------------------------------

### Set PHPMailer Language

Source: https://github.com/yashasnagraj/kaleitics-website/blob/master/php/vendor/phpmailer/phpmailer/README.md

Use this method to load translations for PHPMailer error messages. Specify the language code and optionally the path to the language directory.

```php
// To load the French version
$mail->setLanguage('fr', '/optional/path/to/language/directory/');
```

--------------------------------

### Contact Form Input Label Animation (JavaScript)

Source: https://context7.com/yashasnagraj/kaleitics-website/llms.txt

Adds a floating label effect to input fields in the contact form. It checks input values on page load and on change/keyup events to toggle a CSS class.

```javascript
// Contact form input label animation
function checkForInput(element) {
  const $label = $(element).siblings('span');
  if ($(element).val().length > 0) {
    $label.addClass('label-up');
  } else {
    $label.removeClass('label-up');
  }
}

// Check on page load
$('input, textarea').each(function() {
  checkForInput(this);
});

// Check on change and keyup events
$('input, textarea').on('change keyup', function() {
  checkForInput(this);
});
```

--------------------------------

### Trigger Counter Animation on Scroll

Source: https://context7.com/yashasnagraj/kaleitics-website/llms.txt

Animates counter numbers using Odometer.js when the element scrolls into view. The animation is triggered by checking the scroll position relative to the parent section.

```javascript
// Counter animation triggered on scroll
$(document).scroll(function() {
  $('.odometer').each(function() {
    var parent_section_postion = $(this).closest('section').position();
    var parent_section_top = parent_section_postion.top;

    if ($(document).scrollTop() > parent_section_top - 300) {
      if ($(this).data('status') == 'yes') {
        $(this).html($(this).data('count'));
        $(this).data('status', 'no');
      }
    }
  });
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.