<template>
  <div class="adce-onboarding-faqs">
    <PageHeader
      title="Onboarding FAQs"
      subtext
      description
      displaySearch
      :onChangeSearch="handleSearchChange"
    />
    <div class="container pt-0">
      <div class="row justify-content-center">
        <div class="col-xs-12 col-md-10 pt-0">
          <FAQsSection :searchText="searchText" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
import FAQsSection from "@/components/ADCE/Onboarding/FAQs/FAQsSection";

export default {
  name: "ADCEOnboardingFAQs",
  components: {
    PageHeader,
    FAQsSection
  },
  data() {
    return {
      searchText: ""
    };
  },
  methods: {
    handleSearchChange(value) {
      this.searchText = value;
    }
  }
};
</script>
<style lang="scss">
.adce-onboarding {
  .section-container {
    margin-bottom: 2rem;
    .registration-card {
      background-color: $bottom-bg;
      min-height: 350px;
      color: white;
      p {
        color: white;
      }
      h4 {
        color: white;
      }
    }
    .registration-action {
      margin-bottom: 30px;
      h4 {
        color: white;
      }
    }
  }
}
</style>