added pre-heading and faq section

templates/storyteller-stream/assets/munis.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="2" viewBox="0 0 18 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="18" height="2" fill="white"/>
+</svg>

templates/storyteller-stream/assets/plus.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="8" width="18" height="2" fill="white"/>
+<rect x="10" width="18" height="2" transform="rotate(90 10 0)" fill="white"/>
+</svg>

templates/storyteller-stream/index.html

@@ -150,7 +150,14 @@
 
     <div class="bg-gradient">
       <div class="container section d-flex flex-column align-items-center">
-        <h1 class="fw-bold mt-3"><span class="word">Features</span></h1>
+        <div class="d-flex justify-content-center align-items-center gap-4">
+          <img class="rotateimg180" src="assets/title-shape.png" alt="" />
+          <h6 class="pre-heading text-center fw-bold pt-2">Features</h6>
+          <img src="assets/title-shape.png" alt="" />
+        </div>
+        <h1 class="display-5 fw-bold mt-3">
+          <span class="word">TTS Features</span>
+        </h1>
         <div class="features-section">
           <div class="row">
             <div class="col-md-4 d-flex align-items-stretch">
@@ -208,7 +215,18 @@
       <div class="container section d-flex flex-column align-items-center">
         <div class="row insights-section align-items-center">
           <div class="col-md-6 mb-4 mb-md-0 text-center text-md-start">
-            <h1 class="mb-4">
+            <div
+              class="d-flex justify-content-center justify-content-md-start align-items-center gap-4"
+            >
+              <img
+                class="rotateimg180 d-block d-md-none"
+                src="assets/title-shape.png"
+                alt=""
+              />
+              <h6 class="pre-heading fw-bold pt-2">Statistics</h6>
+              <img src="assets/title-shape.png" alt="" />
+            </div>
+            <h1 class="display-5 fw-bold mb-4 mt-3">
               <span class="word">Our Insights</span>
             </h1>
             <p>
@@ -242,24 +260,139 @@
       </div>
 
       <div class="container section d-flex flex-column align-items-center">
-        <h1 class="fw-bold mb-4">
-          <span class="word">Got Any Questions?</span>
+        <div class="d-flex justify-content-center align-items-center gap-4">
+          <img class="rotateimg180" src="assets/title-shape.png" alt="" />
+          <h6 class="pre-heading text-center fw-bold pt-2">
+            Questions and Answers
+          </h6>
+          <img src="assets/title-shape.png" alt="" />
+        </div>
+        <h1 class="display-5 fw-bold mt-3 text-center d-none d-lg-block">
+          <span class="word">Frequently Asked Questions</span>
         </h1>
-        <div class="panel p-4 py-5 mt-5 questions-panel mb-5 panel-ani">
-          <div class="text-center">
-            <h2 class="w-100 text-center">
-              <i class="fa-brands fa-discord me-3"></i>Join us in Discord!
-            </h2>
-            <p class="text-center my-4">
-              We'd love to chat with you!
-              <br />
-              Please join us in Discord so that we know what you're thinking.
-            </p>
-            <button class="btn btn-primary">Join Discord</button>
+        <h1 class="display-5 fw-bold mt-3 text-center d-lg-none">
+          <span class="word">FAQ</span>
+        </h1>
+
+        <div class="faq-panel pt-5 w-100">
+          <div class="accordion d-flex flex-column gap-3" id="accordionExample">
+            <div class="accordion-item">
+              <h2 class="accordion-header" id="headingOne">
+                <button
+                  class="accordion-button collapsed"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#collapseOne"
+                  aria-expanded="false"
+                  aria-controls="collapseOne"
+                >
+                  What is Storyteller TTS?
+                </button>
+              </h2>
+              <div
+                id="collapseOne"
+                class="accordion-collapse collapse"
+                aria-labelledby="headingOne"
+                data-bs-parent="#accordionExample"
+              >
+                <div class="accordion-body">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                  irure dolor in reprehenderit in voluptate velit esse cillum
+                  dolore eu fugiat nulla pariatur.
+                </div>
+              </div>
+            </div>
+            <div class="accordion-item">
+              <h2 class="accordion-header" id="headingTwo">
+                <button
+                  class="accordion-button collapsed"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#collapseTwo"
+                  aria-expanded="false"
+                  aria-controls="collapseTwo"
+                >
+                  How do I use Storyteller TTS?
+                </button>
+              </h2>
+              <div
+                id="collapseTwo"
+                class="accordion-collapse collapse"
+                aria-labelledby="headingTwo"
+                data-bs-parent="#accordionExample"
+              >
+                <div class="accordion-body">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                  irure dolor in reprehenderit in voluptate velit esse cillum
+                  dolore eu fugiat nulla pariatur.
+                </div>
+              </div>
+            </div>
+            <div class="accordion-item">
+              <h2 class="accordion-header" id="headingThree">
+                <button
+                  class="accordion-button collapsed"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#collapseThree"
+                  aria-expanded="false"
+                  aria-controls="collapseThree"
+                >
+                  What is this question?
+                </button>
+              </h2>
+              <div
+                id="collapseThree"
+                class="accordion-collapse collapse"
+                aria-labelledby="headingThree"
+                data-bs-parent="#accordionExample"
+              >
+                <div class="accordion-body">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                  irure dolor in reprehenderit in voluptate velit esse cillum
+                  dolore eu fugiat nulla pariatur.
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
 
+      <div class="container py-5 mb-5 d-flex flex-column align-items-center">
+        <div class="d-flex justify-content-center align-items-center gap-4">
+          <img class="rotateimg180" src="assets/title-shape.png" alt="" />
+          <h6 class="pre-heading text-center fw-bold pt-2">
+            Still got questions?
+          </h6>
+          <img src="assets/title-shape.png" alt="" />
+        </div>
+        <h1 class="display-5 fw-bold mb-4 mt-3">
+          <span class="word">Join Our Community</span>
+        </h1>
+        <p class="lead text-center mb-5">
+          We'd love to chat with you!
+          <br />
+          Please join us in Discord so that we know what you're thinking.
+        </p>
+        <div class="d-flex flex-column flex-lg-row gap-3 mb-5">
+          <button class="btn btn-secondary">
+            <i class="fa-brands fa-twitter me-2"></i>Follow on Twitter
+          </button>
+          <button class="btn btn-primary">
+            <i class="fa-brands fa-discord me-2"></i>Join our Discord
+          </button>
+        </div>
+      </div>
+
       <div class="container section d-flex flex-column align-items-center">
         <div class="cta-panel panel-ani">
           <div class="row">
@@ -267,7 +400,9 @@
               <img class="cta-img w-100" src="assets/cta-img.png" alt="" />
             </div>
             <div class="col-md-6 cta-right text-center text-sm-start px-5">
-              <h1 class="mb-4">Get started with Storyteller Stream!</h1>
+              <h1 class="display-5 fw-bold mb-5">
+                Get started with Storyteller Stream!
+              </h1>
               <button class="btn btn-secondary w-100">Sign Up</button>
             </div>
           </div>

templates/storyteller-stream/style.css

@@ -63,6 +63,20 @@ p {
   color: rgba(255, 255, 255, 0.8);
 }
 
+.pre-heading {
+  font-size: 18px;
+  color: #fc6b68;
+  text-transform: uppercase;
+}
+
+.rotateimg180 {
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
 img {
   image-rendering: auto;
   image-rendering: crisp-edges;
@@ -475,7 +489,7 @@ span.word:after {
 
 .cta-img {
   position: absolute;
-  max-width: 500px;
+  max-width: 600px;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -55%);
@@ -567,6 +581,47 @@ span.word:after {
   max-width: 800px !important;
 }
 
+.faq-panel {
+  max-width: 800px;
+}
+
+.accordion-item {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border-color: #ffffff12 !important;
+  border: 2px solid;
+  border-radius: 5px;
+}
+
+.accordion-button {
+  background-color: rgba(255, 255, 255, 0) !important;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 20px;
+}
+
+.accordion-button:hover {
+  color: #fff;
+}
+
+.accordion-button::after {
+  background-image: url(assets/plus.svg);
+  opacity: 0.5;
+  background-position: center;
+}
+
+.accordion-button:not(.collapsed)::after {
+  background-image: url(assets/munis.svg);
+  opacity: 0.5;
+}
+
+.accordion-body {
+  color: rgba(255, 255, 255, 0.8);
+  font-weight: 300;
+}
+
+.accordion-button:not(.collapsed) {
+  color: #fff;
+}
+
 .nav-pills {
   backdrop-filter: blur(5px);
   width: 100% !important;