change landing page style parts

src/pages/home/page.hbs

@@ -3,7 +3,9 @@
     {{> features }}
     {{> benefits }}
     {{> customers }}
+    {{> getStarted }}
+    {{> helpBanner }}
     {{> testimonials }}
-    {{> documentation-banner }}
-    {{> community}}
+    {{> faqBanner }}
+    {{!-- {{> community}} --}}
 </main>

src/pages/home/partials/customers.hbs

@@ -1,21 +1,21 @@
 <section>
-<div class="logo-container">
-  <div class="logo-header">
-    TRUSTED BY +100 WORLD'S BEST COMPANIES
-  </div>
-  <div class="logo-row">
-    <img class="logo" src="/images/sage.svg" alt="Sage" />
-    <img class="logo" src="/images/oracle.svg" alt="Oracle" />
-    <img class="logo" src="/images/wave.svg" alt="Wave" />
-    <img class="logo" src="/images/zoho.svg" alt="Zoho" />
-    <img class="logo" src="/images/wave.svg" alt="FreshBooks" />
-    <img class="logo" src="/images/sage.svg" alt="QuickBooks" />
-    <div class="explore-link">
-      <a href="#">
-        Explore More
-        <i class="bi bi-arrow-right"></i>
-      </a>
+  <div class="logo-container">
+    <div class="common-sub-header">
+      <h5>TRUSTED BY +100 WORLD'S BEST COMPANIES</h5>
+    </div>
+    <div class="logo-row">
+      <img class="logo" src="/images/sage.svg" alt="Sage" />
+      <img class="logo" src="/images/oracle.svg" alt="Oracle" />
+      <img class="logo" src="/images/wave.svg" alt="Wave" />
+      <img class="logo" src="/images/zoho.svg" alt="Zoho" />
+      <img class="logo" src="/images/wave.svg" alt="FreshBooks" />
+      <img class="logo" src="/images/sage.svg" alt="QuickBooks" />
+      <div class="explore-link">
+        <a href="#">
+          Explore More
+          <i class="bi bi-arrow-right"></i>
+        </a>
+      </div>
     </div>
   </div>
-</div>
 </section>

src/pages/home/partials/faqBanner.hbs

@@ -0,0 +1,14 @@
+<section class="faq-banner-section">
+  <div class="faq-banner-container">
+    <div class="common-header">
+      <h2>Need help?</h2>
+    </div>
+    <p class="faq-banner-description">
+      Check the frequently asked questions or contact us. We are happy to help.
+    </p>
+    <div class="faq-banner-buttons">
+      <a href="#" class="common-btn-white">Contact Support</a>
+      <a href="#" class="common-btn-outlined">FAQ</a>
+    </div>
+  </div>
+</section>

src/pages/home/partials/features.hbs

@@ -1,18 +1,11 @@
 <section class="features-section">
-  <div class="container-fluid">
-    <!-- Header Section -->
-    <div class="row">
-      <div class="col-12 text-center">
-        <div class="common-sub-header">
-          <h5>What we do</h5>
-        </div>
-        <div class="common-header">
-          <h2>Empowering businesses to innovate, by building Awesome Experiences</h2>
-        </div>
-      </div>
+  <div class="col-lg-11 features-container">
+    <div class="common-sub-header">
+      <h5>What we do</h5>
+    </div>
+    <div class="common-header">
+      <h2>Empowering businesses to innovate, by building Awesome Experiences</h2>
     </div>
-
-    <!-- Features Section -->
     <div class="feature-content">
       <div class="feature-card">
         <div>

src/pages/home/partials/getStarted.hbs

@@ -0,0 +1,51 @@
+<section class="get-started-section">
+  <div class="col-lg-11 get-started-container">
+    <div class="common-sub-header">
+      <h5>Get Started</h5>
+    </div>
+    <div class="common-header">
+      <h2>Turning Code into Customer Solutionss</h2>
+    </div>
+    <div class="get-started-card-list">
+      <div class="get-started-card">
+        <span class="step-number">1</span>
+        <h3>Explore & Subscribe to our APIs</h3>
+        <ul>
+          <li>Sign up with us</li>
+          <li>Choose an API and Try-it-out</li>
+          <li>Create an application</li>
+          <li>Subscribe the application to the API to get going</li>
+        </ul>
+        <a href="#" class="get-started-link">How it Works →</a>
+      </div>
+      <div class="get-started-card">
+        <span class="step-number">2</span>
+        <h3>Developing Applications</h3>
+        <ul>
+          <li>Generate application keys</li>
+          <li>Utilise SDKs to generate application code</li>
+          <li>Connect to the Sandbox endpoint of APIs for testing</li>
+        </ul>
+        <a href="#" class="get-started-link">Documentation →</a>
+      </div>
+      <div class="get-started-card">
+        <span class="step-number">3</span>
+        <h3>Ready to Launch</h3>
+        <ul>
+          <li>Switch to the production endpoint of APIs</li>
+          <li>Perform tests</li>
+          <li>Launch!</li>
+        </ul>
+        <a href="#" class="get-started-link">Ask Community Forum →</a>
+      </div>
+    </div>
+    <!-- Ready to Build Section -->
+    <section class="ready-to-build-section">
+      <div class="ready-to-build-container">
+        <span class="ready-text">Ready to Build?</span>
+        <a href="#" class="ready-signup-button">SIGN UP</a>
+      </div>
+    </section>
+
+  </div>
+</section>

src/pages/home/partials/helpBanner.hbs

@@ -0,0 +1,37 @@
+<section class="help-banner-section">
+  <!-- Use Cases Section -->
+  <div class="col-lg-11 help-banner-container">
+    <div class="help-banner use-cases">
+      <div class="help-banner-content">
+        <h3>Use Cases</h3>
+        <p>Explore various use cases and examples to see how our APIs can meet
+          your needs.</p>
+        <a href="#" class="help-banner-link">Browse Use Cases →</a>
+      </div>
+      <div class="help-banner-image">
+        <img
+          src="../../../images/UseCaseImg.svg"
+          alt="Use Cases Illustration"
+        />
+      </div>
+    </div>
+    <!-- Innovating Together Section -->
+    <div class="help-banner innovating-together">
+      <div class="help-banner-content">
+        <h3>Innovating Together</h3>
+        <p>
+          We are here to help! Get in touch with us for any assistance regarding
+          the use of our APIs. For feedback, for inspirations, or any sort of
+          assistance, help is just a click away.
+        </p>
+        <a href="#" class="help-banner-link">Join Community Forum →</a>
+      </div>
+      <div class="help-banner-image-inno">
+        <img
+          src="../../../images/InnovatingImg.svg"
+          alt="Innovating Together Illustration"
+        />
+      </div>
+    </div>
+  </div>
+</section>

src/pages/home/partials/testimonials.hbs

@@ -1,38 +1,39 @@
-<section>
-<div class="testimonial-container">
-    <div class="testimonial-heading">
-        <div class="dev-sub-header">
-            <h5>WHAT WE HEAR</h5>
-        </div>
-        <div class="dev-header">
-            <h2>Reviews from our valuable customers</h2>
-        </div>
+<section class="testimonial-section">
+  <div class="col-lg-11 testimonial-container">
+    <div class="common-sub-header">
+      <h5>Get Started</h5>
+    </div>
+    <div class="common-header">
+      <h2>Turning Code into Customer Solutionss</h2>
     </div>
-    <div class="row">
-        {{#userProfiles}}
+    <div class="row testimonial-card-container">
+      {{#userProfiles}}
         <div class="col-md-4">
-            <div class="card testimonial-card">
-                <div class="card-body">
-                    <div class="profile-details">
-                        <div class="profile-info">
-                            <img src={{avatar}} alt="Avatar" class="profile-avatar rounded-circle" />
-                            <div>
-                                <h5>{{name}}</h5>
-                                <p class="text-muted">{{company}}</p>
-                            </div>
-                        </div>
-                        <div>
-                            <a href={{profileUrl}} class="linkedin-icon">
-                                <img src="/images/linkedIn.svg"
-                                    alt="LinkedIn" />
-                            </a>
-                        </div>
-                    </div>
-                    <p class="card-text">{{comment}}</p>
+          <div class="card testimonial-card">
+            <div class="card-body">
+              <div class="profile-details">
+                <div class="profile-info">
+                  <img
+                    src={{avatar}}
+                    alt="Avatar"
+                    class="profile-avatar rounded-circle"
+                  />
+                  <div>
+                    <h5>{{name}}</h5>
+                    <p class="text-muted">{{company}}</p>
+                  </div>
                 </div>
+              </div>
+              <p class="card-text">{{comment}}</p>
+              <div>
+                <a href={{profileUrl}} class="linkedin-icon">
+                  <img src="/images/linkedIn.svg" alt="LinkedIn" />
+                </a>
+              </div>
             </div>
+          </div>
         </div>
-        {{/userProfiles}}
+      {{/userProfiles}}
     </div>
-</div>
+  </div>
 </section>

src/partials/footer.hbs

@@ -1,5 +1,22 @@
-<footer class="container-fluid footer fixed-bottom"></footer>
-    <div class="col-lg-12 footer-bottom">
-        <p>WSO2 Developer-portal | © 2024 WSO2 LLC</p>
+<footer class="footer-section">
+  <div class="footer-container">
+    <ul class="footer-links">
+      <li><a href="#">Support</a></li>
+      <li><a href="#">APIs</a></li>
+      <li><a href="#">Why DEPT</a></li>
+      <li><a href="#">Enterprise</a></li>
+      <li><a href="#">FAQ</a></li>
+      <li><a href="#">Contact Us</a></li>
+      <li><a href="#">How it Works</a></li>
+      <li><a href="#">Setup</a></li>
+      <li><a href="#">Products</a></li>
+      <li><a href="#">Community Guide</a></li>
+    </ul>
+    <div class="footer-icons">
+      <a href="#" class="social-icon"><i class="bi bi-linkedin"></i></a>
+      <a href="#" class="social-icon"><i class="bi bi-twitter"></i></a>
+      <a href="#" class="social-icon"><i class="bi bi-youtube"></i></a>
+      <a href="#" class="social-icon"><i class="bi bi-discord"></i></a>
     </div>
+  </div>
 </footer>

src/styles/api-content.css

@@ -1,9 +1,9 @@
 /* styles of key features */
-.features-container {
+/* .features-container {
   padding: 60px 40px 20px 40px;
   background-color: var(--main-bg-color);
   text-align: center;
-}
+} */
 
 /* styles of api overview */
 .api-overview {
@@ -127,9 +127,9 @@
   min-height: 275px;
 }
 
-.card-body {
+/* .card-body {
   padding: 20px;
-}
+} */
 
 .icon-container {
   display: flex;

src/styles/benifits.css

@@ -1,3 +1,6 @@
+.benifits-section{
+  padding: 0 3.75rem 1rem 3.75rem;
+}
 .benefits-container {
   background: var(--primary-gradient);
   padding: 3.75rem;
@@ -9,7 +12,7 @@
 .benefits-list {
   display: flex;
   justify-content: space-between;
-  gap: 1rem;
+  gap: 2rem;
 }
 
 .benefit-item {
@@ -68,10 +71,11 @@
   font-size: 0.75rem;
   text-decoration: none;
   display: inline-block;
+  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
 }
 
 .benefit-link:hover {
-  text-decoration: underline;
+  transform: translateX(0.3rem);
 }
 
 @media screen and (max-width: 48rem) {