feat: Integrated pronounciation frontend

Presently/presently/users/templates/users/pronuciation.html

@@ -11,12 +11,46 @@
         </ol>
     </nav>
     <div class="heading-text heading-section text-center py-3">
-        <h4>Pronuciation and Grammer Errors</h4>
+        <h4 class="mb-0">Pronuciation and Grammer Suggestions</h4>
         <span class="lead">See what presently think about your presentation</span>
     </div>       
-    <hr/>
+    <div class="tabs my-5">
+        <ul class="nav nav-tabs" id="myTab" role="tablist">
+            <li class="nav-item">
+                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
+                    aria-controls="home" aria-selected="true">Grammer Suggestions</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
+                    aria-controls="profile" aria-selected="false">Pronuciation Errors</a>
+            </li>
+        </ul>
+        <div class="tab-content" id="myTabContent">
+            <div class="tab-pane fade show active" id="home" role="tabpanel"
+                aria-labelledby="home-tab">
+                <h2 class="pb-5">You have said..</h2>
+                <div class="pb-5 mx-5">
+                    <h4 style="color: grey;">" {{ stt }} "</h4>
+                </div>
+
+                <div class="py-5">
+                    <h2>What <span><img src="{% static 'users/images/title.png' %}" class="img-fluid" style="width: 230px;"></span> Suggest to say...</h2>  
+                </div>
 
+                <section class="background-colored">
+                    <div id="particles-dots" class="particles"></div>
+                    <div class="container">
+                        <div class="heading-text text-light px-5">
                             <h4>{{ result }}</h4>
+                        </div>
+                    </div>
+                </section>
+            </div>
+            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+                
+            </div>
+        </div>
+    </div>
 
     <div class="d-flex justify-content-center mb-5">
         <a class="btn btn-outline" href="{% url 'overallfeedback' %}" type="submit">View summery detail</a>