Hero and Subtitle Updates

Author: chaoming

data/carousel/core-features.yaml

@@ -1,7 +1,14 @@
 weight: 1
-title: "<h1 style='text-align: left;'>Open Source SaaS Starter</h1>"
+title: "<h1 style='text-align: left;'>Start Building Your SaaS in Minutes</h1>"
 description: >
   <div style="text-align: left;">
-    <h3>The open-source framework that provides everything you need to launch your SaaS product. Fully integrated with Firebase and Stripe.</h3>
+    <h3>Fireact.dev is the open-source framework for building production-ready SaaS applications fast with Firebase and Stripe.</h3>
   </div>
 image: "img/carousel/fireact-hero.png"
+button:
+  - text: "View Demo"
+    link: "/demos"
+    class: "btn btn-template-main"
+  - text: "Get Started Now"
+    link: "https://docs.fireact.dev/getting-started/"
+    class: "btn btn-template-secondary"

layouts/partials/carousel.html

@@ -0,0 +1,45 @@
+{{ if default true .Site.Params.CarouselHomepage.enable }}
+{{ if isset .Site.Data "carousel" }}
+{{ if gt (len .Site.Data.carousel) 0 }}
+<section>
+    <div class="home-carousel">
+        <div class="dark-mask"></div>
+        <div class="container">
+            <div class="homepage owl-carousel"
+                data-autoplay="{{ default true .Site.Params.CarouselHomepage.auto_play }}"
+                data-slide-speed="{{ default 2000 .Site.Params.CarouselHomepage.slide_speed }}"
+                data-pagination-speed="{{ default 1000 .Site.Params.CarouselHomepage.pagination_speed }}">
+                {{ range sort .Site.Data.carousel "weight" }}
+                <div class="item">
+                    {{ if .href }}
+                    <a href="{{ .href }}" target="_blank" title="{{ .title | safeHTML }}">
+                    {{ end }}
+                        <div class="row">
+                            <div class="col-sm-6 right">
+                                <h1>{{ .title | safeHTML }}</h1>
+                                {{ .description | safeHTML }}
+                                {{ if .button }}
+                                <p class="buttons">
+                                    {{ range .button }}
+                                    <a href="{{ .link }}" class="{{ .class }}">{{ .text }}</a>
+                                    {{ end }}
+                                </p>
+                                {{ end }}
+                            </div>
+                            <div class="col-sm-6">
+                                <img class="img-responsive" src="{{ .image }}" alt="">
+                            </div>
+                        </div>
+                    {{ if .href }}
+                    </a>
+                    {{ end }}
+                </div>
+                {{ end }}
+            </div>
+            <!-- /.project owl-slider -->
+        </div>
+    </div>
+</section>
+{{ end }}
+{{ end }}
+{{ end }}

static/css/custom.css

@@ -135,19 +135,71 @@ p {
 }
 
 .home-carousel .owl-carousel {
-    padding-top: 20px;
-    padding-bottom: 20px;
+    padding-top: 10px; /* Reduced padding */
+    padding-bottom: 10px; /* Reduced padding */
+}
+
+.home-carousel .owl-carousel img {
+    width: auto;
+    margin: 0 auto;
+    display: block;
+}
+
+.home-carousel h1 {
+    font-size: 3.5rem !important; /* Adjust as needed */
+    color: #ffffff !important;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
 }
 
-.home-carousel h1,
 .home-carousel h2,
-.home-carousel h3,
 .home-carousel p,
 .home-carousel ul {
     color: #ffffff !important;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
 }
 
+.home-carousel h3 {
+    font-size: 1.8rem !important; /* Adjust as needed, smaller than h1 */
+    color: #ffffff !important;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
+}
+
+.home-carousel .buttons {
+    text-align: left !important;
+    margin-top: 30px !important;
+}
+
+.home-carousel .buttons .btn {
+    padding: 12px 32px !important;
+    background-color: #ffffff !important; /* Changed to white for better contrast */
+    color: var(--primary-color) !important; /* Changed text color to primary blue */
+    border: none !important;
+    border-radius: 8px !important;
+    font-weight: 700 !important;
+    letter-spacing: 0.5px !important;
+    transition: all 0.3s ease !important;
+    display: inline-block !important;
+    text-shadow: none !important; /* Removed text shadow for cleaner look */
+}
+
+.home-carousel .buttons .btn:hover {
+    background-color: #f0f0f0 !important; /* Slightly darker white on hover */
+    color: var(--primary-color) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
+}
+
+.home-carousel .buttons .btn-template-secondary {
+    background-color: transparent !important;
+    color: #ffffff !important;
+    border: 1px solid #ffffff !important;
+}
+
+.home-carousel .buttons .btn-template-secondary:hover {
+    background-color: rgba(255, 255, 255, 0.1) !important;
+    color: #ffffff !important;
+}
+
 /* Links */
 a {
     color: var(--primary-color) !important;