<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <link href="/dist/output.css" rel="stylesheet" />
    <link href="../../../../dist/output.css" rel="stylesheet" th:remove="all" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="public/images/favicon-32x32.png"
    />
    <link href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap"
      rel="stylesheet"
    />
    <title>Frontend Mentor | [Challenge Name Here]</title>

    <script type="text/javascript" src="public/deps/htmx.min.js"></script>
    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
    <style>
      .attribution {
        font-size: 11px;
        text-align: center;
      }
      .attribution a {
        color: hsl(228, 45%, 44%);
      }
    </style>
  </head>
  <body class="grid grid-flow-col-dense place-content-center bg-light-grayish-blue">
    <div class="py-20 px-7 space-y-7 min-h-screen text-white md:grid md:gap-[30px] md:py-0 md:px-0 h-max max-w-[1200px] md:grid-cols-[repeat(auto-fill,_255px)] md:auto-rows-[280px] md:mt-[160px] md:space-y-0">
      <section
        th:fragment="testimonialSection(testimonials)"
        th:each="testimonial : ${testimonials}"
        th:classappend="${testimonial.additionalSizeClasses} + ' ' + ${testimonial.additionalColorClasses}"
        class="py-7 px-10 flex flex-col justify-between rounded-xl first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow   "
        th:id="${testimonial.id}"
        th:hx-get="'/testimonial/' + ${testimonial.id} + '?nextOrientation=' + ${testimonial.followupOrientation}"
        hx-swap="outerHTML"
      >
        <div class="flex items-center">
          <img
            alt="Avatar image"
            src="../../../../public/images/image-daniel.jpg"
            th:src="${testimonial.avatarUrl}"
            class="mr-5 w-10 h-10 rounded-full border-2 border-gray-400"
          />
          <div class="grow">
            <h1
              th:text="${testimonial.author}"
            >Daniel Clifford</h1>
            <p class="text-sm opacity-50">Verified Graduate</p>
          </div>
        </div>
        <h2 class="text-2xl"
            th:text="${testimonial.header}"
        >
          I received a job offer mid-course, and the subjects I learned were
          current, if not more so, in the company I joined. I honestly feel I
          got every penny’s worth.
        </h2>
        <p class="opacity-[70%] pb-2 leading-snug"
            th:text="${testimonial.text}"
        >
          “ I was an EMT for many years before I joined the bootcamp. I’ve been
          looking to make a transition and have heard some people who had an
          amazing experience here. I signed up for the free intro course and
          found it incredibly fun! I enrolled shortly thereafter. The next 12
          weeks was the best - and most grueling - time of my life. Since
          completing the course, I’ve successfully switched careers, working as
          a Software Engineer at a VR startup. ”
        </p>
      </section>

      <section
        th:remove="all"
        class="py-7 px-10 flex flex-col justify-between rounded-xl bg-very-dark-grayish-blue first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow"
      >
        <div class="flex items-center">
          <img
            alt="Avatar image"
            src="../../../../public/images/image-jonathan.jpg"
            class="mr-5 w-10 h-10 rounded-full border-2 border-gray-400"
          />
          <div class="grow">
            <h1>Jonathan Walters</h1>
            <p class="text-sm opacity-50">Verified Graduate</p>
          </div>
        </div>
        <h2 class="text-2xl">
          The team was very supportive and kept me motivated
        </h2>
        <p class="opacity-[70%] pb-2 leading-snug">
          “ I started as a total newbie with virtually no coding skills. I now
          work as a mobile engineer for a big company. This was one of the best
          investments I’ve made in myself. ”
        </p>
      </section>
      <section
        th:remove="all"
        class="py-7 px-10 flex flex-col justify-between rounded-xl bg-white text-very-dark-blackish-blue first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow"
      >
        <div class="flex items-center">
          <img
            alt="Avatar image"
            src="../../../../public/images/image-jeanette.jpg"
            class="mr-5 w-10 h-10 rounded-full border-2 border-gray-400"
          />
          <div class="grow">
            <h1>Jeanette Harmon</h1>
            <p class="text-sm leading-snug opacity-50">Verified Graduate</p>
          </div>
        </div>
        <h2 class="text-2xl">An overall wonderful and rewarding experience</h2>
        <p class="opacity-[70%] pb-2 leading-snug">
          “ Thank you for the wonderful experience! I now have a job I really
          enjoy, and make a good living while doing something I love. ”
        </p>
      </section>
      <section
        th:remove="all"
        class="py-7 px-10 flex flex-col justify-between rounded-xl bg-very-dark-blackish-blue text-white first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow md:col-span-2"
      >
        <div class="flex items-center">
          <img
            alt="Avatar image"
            src="../../../../public/images/image-patrick.jpg"
            class="mr-5 w-10 h-10 rounded-full border-2 border-gray-400"
          />
          <div class="grow">
            <h1>Patrick Abrams</h1>
            <p class="text-sm leading-snug opacity-50">Verified Graduate</p>
          </div>
        </div>
        <h2 class="text-2xl">
          Awesome teaching support from TAs who did the bootcamp themselves.
          Getting guidance from them and learning from their experiences was
          easy.
        </h2>
        <p class="opacity-[70%] pb-2 leading-snug">
          “ The staff seem genuinely concerned about my progress which I find
          really refreshing. The program gave me the confidence necessary to be
          able to go out in the world and present myself as a capable junior
          developer. The standard is above the rest. You will get the personal
          attention you need from an incredible community of smart and amazing
          people. ”
        </p>
      </section>

      <section
        th:remove="all"
        class="py-7 px-10 flex flex-col justify-between rounded-xl bg-white text-very-dark-blackish-blue first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow md:row-span-2 md:row-start-1 md:col-end-[-1]"
      >
        <div class="flex items-center">
          <img
            alt="Avatar image"
            src="../../../../public/images/image-kira.jpg"
            class="mr-5 w-10 h-10 rounded-full border-2 border-gray-400"
          />
          <div class="grow">
            <h1>Kira Whittle</h1>
            <p class="text-sm opacity-50">Verified Graduate</p>
          </div>
        </div>
        <h2 class="text-2xl">
          Such a life-changing experience. Highly recommended!
        </h2>
        Quis hendrerit dolor magna eget est lorem ipsum dolor sit amet, consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis! Nam libero justo, laoreet sit amet cursus sit amet, dictum sit amet justo donec.
        <p class="opacity-[70%] pb-2 leading-snug">
          “ Before joining the bootcamp, I’ve never written a line of code. I
          needed some structure from professionals who can help me learn
          programming step by step. I was encouraged to enroll by a former
          student of theirs who can only say wonderful things about the program.
          The entire curriculum and staff did not disappoint. They were very
          hands-on and I never had to wait long for assistance. The agile team
          project, in particular, was outstanding. It took my learning to the
          next level in a way that no tutorial could ever have. In fact, I’ve
          often referred to it during interviews as an example of my developent
          experience. It certainly helped me land a job as a full-stack
          developer after receiving multiple offers. 100% recommend! ”
        </p>
      </section>
    </div>

    <div class="fixed inset-x-0 bottom-0 attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Source code at <a href="https://github.com/efim/Learning-HTMX">Your Name Here</a>.
    </div>
  </body>
</html>
