### SCSS Responsive Breakpoints Definition and Usage

Source: https://context7.com/uideck/play-bootstrap/llms.txt

Defines SCSS variables for various screen sizes (e.g., desktop, laptop, tablet, mobile) and demonstrates their usage in media queries for responsive styling. These variables help maintain a consistent responsive design across different devices. No external dependencies are required.

```scss
/* assets/scss/_variables.scss */
$xl-desktop: "only screen and (min-width: 1921px)";
$desktop: "only screen and (min-width: 1400px) and (max-width: 1920px)";
$laptop: "only screen and (min-width: 1200px) and (max-width: 1399px)";
$lg: "only screen and (min-width: 992px) and (max-width: 1199px)";
$md: "only screen and (min-width: 768px) and (max-width: 991px)";
$xs: "(max-width: 767px)";
$sm: "only screen and (min-width: 576px) and (max-width: 767px)";

/* Usage example */
.container {
  @media #{$xs} {
    padding-left: 40px;
    padding-right: 40px;
  }
  @media #{$sm} {
    padding-left: 20px;
    padding-right: 20px;
  }
}
```

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

### Features Section Component (HTML)

Source: https://context7.com/uideck/play-bootstrap/llms.txt

Displays product features in a responsive grid layout. It includes a section title and individual feature cards with icons, titles, descriptions, and links. Designed for easy integration into web pages.

```html
<section id="features" class="ud-features">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="ud-section-title">
          <span>Features</span>
          <h2>Main Features of Play</h2>
          <p>There are many variations of passages available.</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-3 col-lg-3 col-sm-6">
        <div class="ud-single-feature wow fadeInUp" data-wow-delay=".1s">
          <div class="ud-feature-icon">
            <i class="lni lni-gift"></i>
          </div>
          <div class="ud-feature-content">
            <h3 class="ud-feature-title">Free and Open-Source</h3>
            <p class="ud-feature-desc">
              Lorem Ipsum is simply dummy text of the printing and industry.
            </p>
            <a href="#" class="ud-feature-link">Learn More</a>
          </div>
        </div>
      </div>
      <!-- Repeat for additional features -->
    </div>
  </div>
</section>
```

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

### FAQ Accordion Component (HTML)

Source: https://context7.com/uideck/play-bootstrap/llms.txt

Implements an interactive Frequently Asked Questions section using Bootstrap's collapse functionality. It features a section title and individual accordion items, each with a toggle button and collapsible content panel. Ideal for support or information pages.

```html
<section id="faq" class="ud-faq">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="ud-section-title text-center mx-auto">
          <span>FAQ</span>
          <h2>Any Questions? Answered</h2>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6">
        <div class="ud-single-faq wow fadeInUp" data-wow-delay=".1s">
          <div class="accordion">
            <button
              class="ud-faq-btn collapsed"
              data-bs-toggle="collapse"
              data-bs-target="#collapseOne"
            >
              <span class="icon flex-shrink-0">
                <i class="lni lni-chevron-down"></i>
              </span>
              <span>How to use this template?</span>
            </button>
            <div id="collapseOne" class="accordion-collapse collapse">
              <div class="ud-faq-body">
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s.
              </div>
            </div>
          </div>
        </div>
        <!-- Additional FAQ items -->
      </div>
    </div>
  </div>
</section>
```

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

### HTML Page Structure - Play Bootstrap

Source: https://context7.com/uideck/play-bootstrap/llms.txt

Demonstrates the basic HTML page structure for the Play Bootstrap template. It includes the head section with meta tags, title, favicon, and CSS dependencies, as well as the body with header navigation, content placeholders, and footer. It also includes essential JavaScript includes.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Play | Free Startup and SaaS Landing Page Template</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.svg" type="image/svg" />

    <!-- CSS Dependencies -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/animate.css" />
    <link rel="stylesheet" href="assets/css/lineicons.css" />
    <link rel="stylesheet" href="assets/css/ud-styles.css" />
  </head>
  <body>
    <!-- Header with navigation -->
    <header class="ud-header">
      <div class="container">
        <nav class="navbar navbar-expand-lg">
          <a class="navbar-brand" href="index.html">
            <img src="assets/images/logo/logo.svg" alt="Logo" />
          </a>
          <!-- Mobile toggle button -->
          <button class="navbar-toggler">
            <span class="toggler-icon"></span>
            <span class="toggler-icon"></span>
            <span class="toggler-icon"></span>
          </button>
          <!-- Navigation menu -->
          <div class="navbar-collapse">
            <ul class="navbar-nav mx-auto">
              <li class="nav-item"><a class="ud-menu-scroll" href="#home">Home</a></li>
              <li class="nav-item"><a class="ud-menu-scroll" href="#about">About</a></li>
              <li class="nav-item"><a class="ud-menu-scroll" href="#pricing">Pricing</a></li>
            </ul>
          </div>
        </nav>
      </div>
    </header>

    <!-- Page content sections go here -->

    <!-- Footer -->
    <footer class="ud-footer wow fadeInUp" data-wow-delay=".15s">
      <!-- Footer content -->
    </footer>

    <!-- JavaScript -->
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/wow.min.js"></script>
    <script src="assets/js/main.js"></script>
  </body>
</html>

```

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

### Pricing Section Component (HTML)

Source: https://context7.com/uideck/play-bootstrap/llms.txt

Presents different pricing tiers in a responsive layout using Bootstrap grid. It highlights a 'popular' option and includes pricing headers, feature lists, and call-to-action buttons. Suitable for SaaS products or service offerings.

```html
<section id="pricing" class="ud-pricing">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="ud-section-title mx-auto text-center">
          <span>Pricing</span>
          <h2>Our Pricing Plans</h2>
        </div>
      </div>
    </div>
    <div class="row g-0 align-items-center justify-content-center">
      <!-- Basic Plan -->
      <div class="col-lg-4 col-md-6 col-sm-10">
        <div class="ud-single-pricing first-item wow fadeInUp" data-wow-delay=".15s">
          <div class="ud-pricing-header">
            <h3>STARTING FROM</h3>
            <h4>$ 19.99/mo</h4>
          </div>
          <div class="ud-pricing-body">
            <ul>
              <li>5 User</li>
              <li>All UI components</li>
              <li>Lifetime access</li>
              <li>Free updates</li>
            </ul>
          </div>
          <div class="ud-pricing-footer">
            <a href="#" class="ud-main-btn ud-border-btn">Purchase Now</a>
          </div>
        </div>
      </div>
      <!-- Popular Plan (highlighted) -->
      <div class="col-lg-4 col-md-6 col-sm-10">
        <div class="ud-single-pricing active wow fadeInUp" data-wow-delay=".1s">
          <span class="ud-popular-tag">POPULAR</span>
          <div class="ud-pricing-header">
            <h3>STARTING FROM</h3>
            <h4>$ 30.99/mo</h4>
          </div>
          <div class="ud-pricing-body">
            <ul>
              <li>5 User</li>
              <li>All UI components</li>
              <li>Lifetime access</li>
            </ul>
          </div>
          <div class="ud-pricing-footer">
            <a href="#" class="ud-main-btn ud-white-btn">Purchase Now</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
```

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

### JavaScript Core Functionality: Sticky Header, Nav Toggle, Smooth Scroll

Source: https://context7.com/uideck/play-bootstrap/llms.txt

Implements core JavaScript functionalities including a sticky header that changes logo on scroll, a mobile navigation toggle for responsive menus, and smooth scrolling to page sections. It also handles the visibility of a 'back-to-top' button and initializes WOW.js for animations. Relies on DOM manipulation and event listeners.

```javascript
// assets/js/main.js - Core functionality
(function () {
  "use strict";

  // Sticky header on scroll
  window.onscroll = function () {
    const ud_header = document.querySelector(".ud-header");
    const sticky = ud_header.offsetTop;
    const logo = document.querySelector(".navbar-brand img");

    if (window.pageYOffset > sticky) {
      ud_header.classList.add("sticky");
      logo.src = "assets/images/logo/logo-2.svg"; // Dark logo for sticky
    } else {
      ud_header.classList.remove("sticky");
      logo.src = "assets/images/logo/logo.svg"; // Light logo for transparent
    }

    // Back-to-top button visibility
    const backToTop = document.querySelector(".back-to-top");
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
      backToTop.style.display = "flex";
    } else {
      backToTop.style.display = "none";
    }
  };

  // Mobile navbar toggle
  let navbarToggler = document.querySelector(".navbar-toggler");
  const navbarCollapse = document.querySelector(".navbar-collapse");

  navbarToggler.addEventListener("click", function () {
    navbarToggler.classList.toggle("active");
    navbarCollapse.classList.toggle("show");
  });

  // Close mobile menu when menu item clicked
  document.querySelectorAll(".ud-menu-scroll").forEach((e) =>
    e.addEventListener("click", () => {
      navbarToggler.classList.remove("active");
      navbarCollapse.classList.remove("show");
    })
  );

  // Submenu dropdown toggle
  const submenuButton = document.querySelectorAll(".nav-item-has-children");
  submenuButton.forEach((elem) => {
    elem.querySelector("a").addEventListener("click", () => {
      elem.querySelector(".ud-submenu").classList.toggle("show");
    });
  });

  // Initialize WOW.js animations
  new WOW().init();
})();
```

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

### CSS Variables and Theming (CSS)

Source: https://context7.com/uideck/play-bootstrap/llms.txt

Defines essential CSS custom properties (variables) for global styling and theming within the template, located in `_common.scss`. It also includes styling for a primary button (`.ud-main-btn`), demonstrating the use of these variables for consistent design.

```css
/* assets/scss/_common.scss - CSS Variables */
:root {
  --font: "Inter", sans-serif;
  --body-color: #637381;
  --heading-color: #212b36;
  --primary-color: #3056d3;
  --white: #ffffff;
}

/* Custom button styling */
.ud-main-btn {
  display: inline-block;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  border-radius: 5px;
  padding: 15px 25px;
  border: 1px solid transparent;
  color: var(--white);
  cursor: pointer;
  transition: 0.4s;
  background: var(--primary-color);
}

.ud-main-btn:hover {
  color: var(--white);
  background: var(--heading-color);
}
```

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

### Login Page Component (HTML)

Source: https://context7.com/uideck/play-bootstrap/llms.txt

A self-contained HTML structure for a login page. It features input fields for email and password, social login options, and links for password recovery and sign-up. This component is suitable for standalone authentication pages.

```html
<section class="ud-login">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="ud-login-wrapper">
          <div class="ud-login-logo">
            <img src="assets/images/logo/logo-2.svg" alt="logo" />
          </div>
          <form class="ud-login-form">
            <div class="ud-form-group">
              <input type="email" name="email" placeholder="Email/username" />
            </div>
            <div class="ud-form-group">
              <input type="password" name="password" placeholder="*********" />
            </div>
            <div class="ud-form-group">
              <button type="submit" class="ud-main-btn w-100">Login</button>
            </div>
          </form>
          <div class="ud-socials-connect">
            <p>Connect With</p>
            <ul>
              <li><a href="#" class="facebook"><i class="lni lni-facebook-filled"></i></a></li>
              <li><a href="#" class="twitter"><i class="lni lni-twitter-filled"></i></a></li>
              <li><a href="#" class="google"><i class="lni lni-google"></i></a></li>
            </ul>
          </div>
          <a class="forget-pass" href="#">Forget Password?</a>
          <p class="signup-option">Not a member yet? <a href="#">Sign Up</a></p>
        </div>
      </div>
    </div>
  </div>
</section>
```

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

### Contact Form Component (HTML)

Source: https://context7.com/uideck/play-bootstrap/llms.txt

A complete HTML structure for a contact form section. It includes fields for name, email, and message, along with contact information display. This component is designed for easy integration into web pages.

```html
<section id="contact" class="ud-contact">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-xl-8 col-lg-7">
        <div class="ud-contact-content-wrapper">
          <div class="ud-contact-title">
            <span>CONTACT US</span>
            <h2>Let's talk about<br />Love to hear from you!</h2>
          </div>
          <div class="ud-contact-info-wrapper">
            <div class="ud-single-info">
              <div class="ud-info-icon">
                <i class="lni lni-map-marker"></i>
              </div>
              <div class="ud-info-meta">
                <h5>Our Location</h5>
                <p>401 Broadway, 24th Floor, London</p>
              </div>
            </div>
            <div class="ud-single-info">
              <div class="ud-info-icon">
                <i class="lni lni-envelope"></i>
              </div>
              <div class="ud-info-meta">
                <h5>How Can We Help?</h5>
                <p>info@yourdomain.com</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4 col-lg-5">
        <div class="ud-contact-form-wrapper wow fadeInUp" data-wow-delay=".2s">
          <h3 class="ud-contact-form-title">Send us a Message</h3>
          <form class="ud-contact-form">
            <div class="ud-form-group">
              <label for="fullName">Full Name*</label>
              <input type="text" name="fullName" placeholder="John Doe" />
            </div>
            <div class="ud-form-group">
              <label for="email">Email*</label>
              <input type="email" name="email" placeholder="example@mail.com" />
            </div>
            <div class="ud-form-group">
              <label for="message">Message*</label>
              <textarea name="message" rows="3" placeholder="Your message"></textarea>
            </div>
            <div class="ud-form-group mb-0">
              <button type="submit" class="ud-main-btn">Send Message</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
```

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

### JavaScript Smooth Scrolling for Anchor Links

Source: https://context7.com/uideck/play-bootstrap/llms.txt

Implements smooth scrolling behavior for anchor links on the homepage, allowing users to navigate to different sections of the page with a smooth animation. It also manages the active state of navigation links based on the user's scroll position. Requires HTML anchor links with the class 'ud-menu-scroll'.

```javascript
// Add to page script section for smooth scrolling
const pageLink = document.querySelectorAll(".ud-menu-scroll");

pageLink.forEach((elem) => {
  elem.addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(elem.getAttribute("href")).scrollIntoView({
      behavior: "smooth",
      offsetTop: 1 - 60,
    });
  });
});

// Section menu active state on scroll
function onScroll(event) {
  const sections = document.querySelectorAll(".ud-menu-scroll");
  const scrollPos =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;

  for (let i = 0; i < sections.length; i++) {
    const currLink = sections[i];
    const val = currLink.getAttribute("href");
    const refElement = document.querySelector(val);
    const scrollTopMinus = scrollPos + 73;
    if (
      refElement.offsetTop <= scrollTopMinus &&
      refElement.offsetTop + refElement.offsetHeight > scrollTopMinus
    ) {
      document.querySelector(".ud-menu-scroll").classList.remove("active");
      currLink.classList.add("active");
    } else {
      currLink.classList.remove("active");
    }
  }
}

window.document.addEventListener("scroll", onScroll);
```

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

### Hero Section Component - Play Bootstrap

Source: https://context7.com/uideck/play-bootstrap/llms.txt

Illustrates the HTML structure for the hero section component. This section is designed to be a prominent landing area, featuring a title, descriptive text, call-to-action buttons, and decorative images. It utilizes Bootstrap grid classes and custom classes for styling.

```html
<section class="ud-hero" id="home">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="ud-hero-content wow fadeInUp" data-wow-delay=".2s">
          <h1 class="ud-hero-title">
            Open-Source Web Template for SaaS, Startup, Apps, and More
          </h1>
          <p class="ud-hero-desc">
            Multidisciplinary Web Template Built with Your Favourite
            Technology - HTML Bootstrap, Tailwind and React NextJS.
          </p>
          <ul class="ud-hero-buttons">
            <li>
              <a href="#download" class="ud-main-btn ud-white-btn">
                Download Now
              </a>
            </li>
            <li>
              <a href="#learn" class="ud-main-btn ud-link-btn">
                Learn More <i class="lni lni-arrow-right"></i>
              </a>
            </li>
          </ul>
        </div>
        <div class="ud-hero-image wow fadeInUp" data-wow-delay=".25s">
          <img src="assets/images/hero/hero-image.svg" alt="hero-image" />
          <img src="assets/images/hero/dotted-shape.svg" alt="shape" class="shape shape-1" />
        </div>
      </div>
    </div>
  </div>
</section>

```

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

### Smooth Scrolling for Menu Navigation (JavaScript)

Source: https://github.com/uideck/play-bootstrap/blob/main/index.html

This JavaScript code enables smooth scrolling to different sections of the page when menu links are clicked. It prevents the default anchor jump and smoothly animates the scroll to the target element. The offsetTop value is used to adjust the scroll position, accounting for fixed headers.

```javascript
// ==== for menu scroll
const pageLink = document.querySelectorAll(".ud-menu-scroll");
pageLink.forEach((elem) => {
  elem.addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(elem.getAttribute("href")).scrollIntoView({
      behavior: "smooth",
      offsetTop: 1 - 60,
    });
  });
});
```

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

### Active Menu Item Highlighting on Scroll (JavaScript)

Source: https://github.com/uideck/play-bootstrap/blob/main/index.html

This JavaScript function, `onScroll`, dynamically adds and removes an 'active' class to menu items based on the user's current scroll position. It determines which section is currently in view and highlights the corresponding navigation link. This provides visual feedback to the user about their location on the page.

```javascript
// section menu active
function onScroll(event) {
  const sections = document.querySelectorAll(".ud-menu-scroll");
  const scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  for (let i = 0; i < sections.length; i++) {
    const currLink = sections[i];
    const val = currLink.getAttribute("href");
    const refElement = document.querySelector(val);
    const scrollTopMinus = scrollPos + 73;
    if (
      refElement.offsetTop <= scrollTopMinus &&
      refElement.offsetTop + refElement.offsetHeight > scrollTopMinus
    ) {
      document
        .querySelector(".ud-menu-scroll")
        .classList.remove("active");
      currLink.classList.add("active");
    } else {
      currLink.classList.remove("active");
    }
  }
}
window.document.addEventListener("scroll", onScroll);
```

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