🔵 other: Initial WP conversion from Eleventy

2026-05-25 16:48:48 -05:00
parent 2e5bfaba89
commit dcb38250f8
56 changed files with 965 additions and 318 deletions
@@ -0,0 +1,62 @@
+<?php
+/**
+ * Template Name: Q & A
+ *
+ * @package GoAskAuntie
+ * @since 1.0.0
+ */
+
+namespace BasicWP;
+
+get_header();
+
+$qa_image  = get_theme_file_uri( '/static/img/q-and-a.png' );
+$bg_condom = get_theme_file_uri( '/static/img/bg-condom.png' );
+
+$questions = get_field( 'questions', 'option' ) ?: array();
+?>
+
+<section class="w-full pb-24 bg-pattern bg-teal-light bg-contain bg-repeat-y bg-top relative">
+	<div class="md:mx-6 lg:mx-auto pt-12 lg:pt-32 text-gray relative">
+		<h1 class="text-4xl font-bold md:text-6xl lg:text-7xl tracking-wide uppercase text-white mb-16 mx-auto text-left">Q+A</h1>
+	</div>
+</section>
+
+<section class="p-0 w-full bg-pattern bg-teal-light bg-contain bg-repeat-y bg-top">
+	<div class="q-and-a rounded-[45px] bg-white p-4 pt-8 md:p-8 mx-auto w-full md:w-auto relative">
+		<div class="text-purple flex gap-6 w-fit text-2xl items-end">
+			<img src="<?php echo esc_url( $qa_image ); ?>" alt="Q&A logo" class="h-24 inline hidden md:block">
+			<span class="block mb-4">Do you have a question?<br class="p-0">Find Auntie's answers here.</span>
+		</div>
+		<div class="absolute top-0 right-0 h-96 w-96 -mt-24 bg-contain bg-no-repeat hidden md:flex items-center flex-col justify-center" style="background-image: url('<?php echo esc_url( $bg_condom ); ?>');">
+			<h2 class="text-4xl uppercase text-white text-center">Resources</h2>
+			<a href="<?php echo esc_url( home_url( '/resources/' ) ); ?>" class="btn bg-red rounded-full border-4 border-white text-white px-8 py-2 text-center hover:shadow-lg">Learn More</a>
+		</div>
+		<div class="p-4">
+			<div class="grid md:grid-cols-2 gap-6">
+				<?php
+				if ( $questions ) {
+					foreach ( $questions as $qa ) {
+						$question = $qa['question'] ?? '';
+						$answer   = $qa['answer'] ?? '';
+						if ( empty( $question ) && empty( $answer ) ) {
+							continue;
+						}
+						echo '<div class="prose my-4">';
+						if ( $question ) {
+							echo '<p class="my-4 font-bold text-navy">Q: ' . esc_html( $question ) . '</p>';
+						}
+						if ( $answer ) {
+							echo '<p class="!m-0 pb-0 font-extrabold uppercase text-red text-xl">AUNTIE:</p>';
+							echo '<p class="mb-4 !mt-1 pt-0 text-red-900">' . esc_html( $answer ) . '</p>';
+						}
+						echo '</div>';
+					}
+				}
+				?>
+			</div>
+		</div>
+	</div>
+</section>
+
+<?php get_footer(); ?>