first theme commit

archive-solutions.php

@@ -0,0 +1,138 @@
+<?php
+
+/**
+ * Solutions Archive Page template.
+ * 
+ * @package ThemeStarter
+ */
+
+?>
+
+<!-- Get Header -->
+<?php get_header(); ?>
+
+<?php get_template_part('template-parts/partials/page-header') ?>
+
+<!-- Contact Us  -->
+<section class="bg-gray-100">
+
+  <div id="contact-tabs" class="py-8 px-4 max-w-7xl mx-auto">
+
+    <div>
+
+      <div class="flex space-x-2 items-center mb-4">
+        <i class="bi-info-circle-fill"></i>
+        <p class="font-medium text-lg">Please select a service category</p>
+      </div>
+
+      <div class="md:hidden">
+
+        <label for="tabs" class="sr-only">
+          Please Select a tab to view the registration form
+        </label>
+
+        <select id="tabs" name="tabs" class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
+          <!-- Dynamically generate options -->
+          <?php
+          $args = array(
+            'post_type'      => 'solutions',
+            'posts_per_page' => -1,
+            'orderby'        => 'date',
+            'order'          => 'ASC',
+          );
+          $query = new WP_Query($args);
+          if ($query->have_posts()) {
+            while ($query->have_posts()) {
+              $query->the_post(); ?>
+              <option value="<?= esc_attr(get_post_field('post_name', get_the_ID())) ?>"><?php the_title(); ?></option>
+          <?php }
+            // wp_reset_postdata();
+          } else {
+            // No posts found
+          }
+          ?>
+        </select>
+
+
+      </div>
+
+      <!-- Tabs -->
+      <div class="hidden md:block">
+        <nav class="isolate flex divide-x divide-gray-200 rounded-lg shadow" aria-label="Tabs">
+          <!-- Dynamically generate tab links -->
+
+          <?php while ($query->have_posts()) {
+            $query->the_post();
+            $title = get_the_title() ?>
+            <button class="tab-link rounded-l-lg group relative min-w-0 flex-1 overflow-hidden py-4 px-4 text-center text-sm font-medium focus:z-10" data-tab="<?= esc_attr(get_post_field('post_name', get_the_ID())) ?>">
+
+              <div>
+                <img src="<?= get_field('solution_image') ?>">
+                <p class="font-medium"><?php _e($title, 'harplabs'); ?></p>
+              </div>
+
+
+            </button>
+          <?php }
+          // wp_reset_postdata(); 
+          ?>
+        </nav>
+      </div>
+
+      <div class="py-8">
+
+        <?php while ($query->have_posts()) {
+          $query->the_post(); ?>
+          <!-- Dynamically Generated Tabs -->
+          <div id="<?= esc_attr(get_post_field('post_name', get_the_ID())) ?>" class="tab">
+
+            <div class="flex-1">
+
+              <h2 class="font-medium"><?= get_field("solution_products_list_subheading")  ?>...</h2>
+
+              <h1 class="font-bold text-3xl md:text-4xl lg:text-5xl"><?= the_title()  ?></h1>
+
+              <img class="md:hidden" src="<?= get_field('solution_image') ?>">
+
+              <ul class="py-4">
+                <?php while (have_rows('solution_facts_and_data')) :
+
+                  the_row();
+                  $sub_value = get_sub_field('solution_fact'); ?>
+
+                  <li class="flex space-x-4">
+                    <i class="bi-check-circle-fill"></i>
+                    <p><?php echo $sub_value; ?></p>
+                  </li>
+
+                <?php endwhile; ?>
+              </ul>
+
+
+              <div class="mt-4">
+
+                <a href="<?php the_permalink() ?>" class="w-full text-center rounded-md border border-black bg-stone-100 px-8 py-2.5 text-sm font-semibold  shadow-sm hover:bg-stone-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-yellow-600 uppercase">Learn More <i class="ml-4 bi-arrow-right"></i></a>
+              </div>
+
+              <ul class="list-disc list-inside py-4">
+                <li>No Payment Required</li>
+                <li>No Strings Attached</li>
+                <li>100% Risk-Free</li>
+              </ul>
+            </div>
+          
+          </div>
+        <?php }
+        wp_reset_postdata();
+        ?>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</section>
+
+<!-- Get Footer -->
+<?php get_footer(); ?>