[Update] Added responsive FAQ page with questions and answers feature/faq

7 files changed, 200 insertions, 14 deletions

diff --git a/wp-content/themes/carmag/assets/src/sass/base/_settings.scss b/wp-content/themes/carmag/assets/src/sass/base/_settings.scss
index b1c4464..753be95 100644
--- a/wp-content/themes/carmag/assets/src/sass/base/_settings.scss
+++ b/wp-content/themes/carmag/assets/src/sass/base/_settings.scss
@@ -31,4 +31,6 @@ $font-serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia,
 	"Times New Roman", serif;
 $font-sans: -apple-system, BlinkMacSystemFont, "Quantico", Roboto, Oxygen-Sans,
 	Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$font-secondary: Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
+	sans-serif;
 $font-heading: $font-sans;
diff --git a/wp-content/themes/carmag/assets/src/sass/font-awesome/_fontawesome.scss b/wp-content/themes/carmag/assets/src/sass/font-awesome/_fontawesome.scss
index ffa410f..5d1b934 100644
--- a/wp-content/themes/carmag/assets/src/sass/font-awesome/_fontawesome.scss
+++ b/wp-content/themes/carmag/assets/src/sass/font-awesome/_fontawesome.scss
@@ -2,15 +2,16 @@
  * Font Awesome Pro 5.0.0 by @fontawesome - http://fontawesome.com
  * License - http://fontawesome.com/license (Commercial License)
  */
-@import 'variables';
-@import 'mixins';
-@import 'core';
-@import 'larger';
-@import 'fixed-width';
-@import 'list';
-@import 'bordered-pulled';
-@import 'animated';
-@import 'rotated-flipped';
-@import 'stacked';
-@import 'icons';
-@import 'screen-reader';
+@import "variables";
+@import "mixins";
+@import "core";
+@import "larger";
+@import "fixed-width";
+@import "list";
+@import "bordered-pulled";
+@import "animated";
+@import "rotated-flipped";
+@import "stacked";
+@import "icons";
+@import "screen-reader";
+@import "fa-solid";
diff --git a/wp-content/themes/carmag/assets/src/sass/master.scss b/wp-content/themes/carmag/assets/src/sass/master.scss
index efb7d72..994ca26 100644
--- a/wp-content/themes/carmag/assets/src/sass/master.scss
+++ b/wp-content/themes/carmag/assets/src/sass/master.scss
@@ -4,7 +4,6 @@
 // and in the darkness bind them.
 // The order of files include is important. Dont change it.
 
-
 // All general settings and utils
 @import "base/settings";
 @import "base/mixins";
@@ -45,4 +44,5 @@
 // If there is anything specific for a page it should be in this folder
 @import "pages/404";
 @import "pages/single";
-@import "pages/search";
\ No newline at end of file
+@import "pages/search";
+@import "pages/faq";
diff --git a/wp-content/themes/carmag/assets/src/sass/pages/_faq.scss b/wp-content/themes/carmag/assets/src/sass/pages/_faq.scss
new file mode 100644
index 0000000..b16651f
--- /dev/null
+++ b/wp-content/themes/carmag/assets/src/sass/pages/_faq.scss
@@ -0,0 +1,65 @@
+.section-faq {
+	.row {
+		.column {
+			margin: 0 auto;
+
+			.content-area {
+				background-color: white;
+				padding: 30px 25px;
+
+				.faq-heading {
+					text-align: center;
+					font-family: $font-secondary;
+					font-size: 22px;
+					font-weight: bold;
+					margin-bottom: 50px;
+				}
+
+				.faq-field {
+					cursor: pointer;
+					background-color: $color-white;
+					margin: 15px 0;
+					padding: 10px 20px;
+					color: $color-primary-dark;
+
+					.field-heading {
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+
+						span {
+							font-size: 17px;
+						}
+
+						i {
+							transition: 0.2s;
+							font-size: 23px;
+							padding-left: 15px;
+							color: lighten($color-primary-dark, 20);
+						}
+
+						&.opened {
+							i {
+								transform: rotate(45deg);
+							}
+						}
+					}
+
+					.field-content {
+						max-height: 0;
+						visibility: hidden;
+						opacity: 0;
+						transition: 0.2s;
+
+						&.opened {
+							margin-top: 20px;
+							opacity: 1;
+							max-height: 100vh;
+							visibility: visible;
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/wp-content/themes/carmag/assets/src/scripts/scripts.js b/wp-content/themes/carmag/assets/src/scripts/scripts.js
index 7b0f084..93438c7 100644
--- a/wp-content/themes/carmag/assets/src/scripts/scripts.js
+++ b/wp-content/themes/carmag/assets/src/scripts/scripts.js
@@ -34,3 +34,11 @@ const loginLink = document.querySelectorAll(".login")[0];
 if (loginLink) {
 	loginLink.before(separator);
 }
+
+const faqFields = document.querySelectorAll(".faq-field");
+faqFields.forEach((field) => {
+	field.addEventListener("click", () => {
+		field.querySelector(".field-heading").classList.toggle("opened");
+		field.querySelector(".field-content").classList.toggle("opened");
+	});
+});
diff --git a/wp-content/themes/carmag/header.php b/wp-content/themes/carmag/header.php
index d54a775..ccb61e4 100644
--- a/wp-content/themes/carmag/header.php
+++ b/wp-content/themes/carmag/header.php
@@ -22,6 +22,7 @@
 <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
 
 <link href="https://fonts.googleapis.com/css2?family=Quantico:wght@400;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
 <?php wp_head(); ?>
 </head>
 
diff --git a/wp-content/themes/carmag/templates/faq.php b/wp-content/themes/carmag/templates/faq.php
new file mode 100644
index 0000000..e897645
--- /dev/null
+++ b/wp-content/themes/carmag/templates/faq.php
@@ -0,0 +1,109 @@
+<?php 
+/**
+ * Template Name: FAQ
+ *
+ * Custom FAQ template for the theme
+ * 
+ * @since  v1.0.0
+ * @package CarMag
+ */
+
+
+get_header(); ?>
+
+<section class="section-fullwidth section-faq">
+    <div class="row">
+		<div class="column small-12 medium-7">
+            <div id="primary" class="content-area">
+                <main id="main" class="site-main">
+                    <h1 class="faq-heading">FREQUENTLY ASKED QUESTIONS</h1>
+                    <div class="faq-field">
+                        <div class="field-heading">
+                            <span>CarMag vehicles</span><i class="fas fa-plus"></i>
+                        </div>
+                        <div class="field-content">
+                            Our vehicles are suitable for any budget. We sell both expensive and cheap, but quality vehicles.
+                            The CarMag site allows people to sell and buy vehicles from anywhere.
+                        </div>
+                    </div>
+                    <div class="faq-field">
+                        <div class="field-heading">
+                            <span>Warranties and services</span><i class="fas fa-plus"></i>
+                        </div>
+                        <div class="field-content">
+                            There is no universal warranty for each car on the site, 
+                            it depends on the person from whom you buy and the same applies to additional services and arrangements, it is individual for each.
+                            However, CarMag works with trusted car dealers and we will do our best to make your purchase safe and hassle-free. 
+                        </div>
+                    </div>
+                    <div class="faq-field">
+                        <div class="field-heading">
+                            <span>Can i negotiate buying a used car?</span><i class="fas fa-plus"></i>
+                        </div>
+                        <div class="field-content">
+                            You can negotiate, but you can’t use the same process for buying a new car buying. 
+                            This is because every used car is slightly different. 
+                            My new car buying strategy is based upon getting prices for the exact same make, model, trim car from different sellers.
+                        </div>
+                    </div>
+                    <div class="faq-field">
+                        <div class="field-heading">
+                            <span>Can i use a credit car to buy a car?</span><i class="fas fa-plus"></i>
+                        </div>
+                        <div class="field-content">
+                            You are highly unlikely to find a car dealer that will allow you to put the whole cost of a car on a credit card. 
+                            However, you often can use a credit card for your down payment and earn points.
+                        </div>
+                    </div>
+                    <div class="faq-field">
+                        <div class="field-heading">
+                            <span>Can they really charge more for paint?</span><i class="fas fa-plus"></i>
+                        </div>
+                        <div class="field-content">
+                            Yes, unfortunately. It seems silly, but some dealers will charge more for certain colors. 
+                            Make sure you ask that any additional charges (like paint) are included in the price they give you.
+                        </div>
+                    </div>
+                    <div class="faq-field">
+                        <div class="field-heading">
+                            <span>What is dealer holdback?</span><i class="fas fa-plus"></i>
+                        </div>
+                        <div class="field-content">
+                            Dealer holdback is a refund to the dealer from the manufacturer, typically 2-3% of MSRP. 
+                            It’s usually not negotiable and best to be ignored by car buyers.
+                        </div>
+                    </div>
+                    <div class="faq-field">
+                        <div class="field-heading">
+                            <span>Where can i find the latest car deals right now?</span><i class="fas fa-plus"></i>
+                        </div>
+                        <div class="field-content">
+                            <a href="/">Here’s</a> where you can find our picks for the best car deals across all car brands.
+                        </div>
+                    </div>
+                    <div class="faq-field">
+                        <div class="field-heading">
+                            <span>Can I get a deal buying two cars at once?</span><i class="fas fa-plus"></i>
+                        </div>
+                        <div class="field-content">
+                            Absolutely! If you need to buy two cars and want to get the same make (example, Honda), 
+                            this will help you get an even better deal. When you email car dealers, explain you want a price for both cars. 
+                            Be specific with the make, model, and trim for each car and be consistent in your emails to every dealer. 
+                        </div>
+                    </div>
+                    <div class="faq-field">
+                        <div class="field-heading">
+                            <span>Should I trade in my car or sell private party?</span><i class="fas fa-plus"></i>
+                        </div>
+                        <div class="field-content">
+                            Before going to the dealership, get an appraisal for your car so you know how much it’s worth. 
+                            Understand how much you can get and remember the tax implications.
+                        </div>
+                    </div>
+                </main><!-- #main -->
+            </div><!-- #primary -->
+        </div><!-- .column -->
+	</div><!-- .row -->
+</section><!-- .section-fullwidth section-main -->
+
+<?php get_footer(); ?>