slick landing page

handlers/landingpage.handlers.go

@@ -0,0 +1,33 @@
+package handlers
+
+import (
+	"github.com/a-h/templ"
+	landingpage "github.com/emarifer/go-templ-project-structure/views/landing_page"
+
+	"github.com/labstack/echo/v4"
+)
+
+type LandingPageService interface {
+}
+
+func NewLandingPageHandler(us LandingPageService) *LandingPageHandler {
+	return &LandingPageHandler{
+		LandingPageService: us,
+	}
+}
+
+type LandingPageHandler struct {
+	LandingPageService LandingPageService
+}
+
+func (uh *LandingPageHandler) LandingPage(c echo.Context) error {
+	// lp := landingpage.ShowLandingPage("Westerindo", landingpage.WrapperLandingPage(landingpage.NavbarLandingPage()), landingpage.CssLandingPage(), landingpage.JsLandingPage())
+	lp := landingpage.ShowLandingPage("Westerindo", landingpage.LandingPageMain(landingpage.WrapperLandingPage(landingpage.NavbarLandingPage(), landingpage.JumbotronLandingPage(), landingpage.OurMedicalServices(), landingpage.WhyWesterIndoLandingPage(), landingpage.PromotionLandingPage()), landingpage.FooterLandingPage()), landingpage.CssLandingPage(), landingpage.JsLandingPage())
+	return uh.View(c, lp)
+}
+
+func (uh *LandingPageHandler) View(c echo.Context, cmp templ.Component) error {
+	c.Response().Header().Set(echo.HeaderContentType, echo.MIMETextHTML)
+
+	return cmp.Render(c.Request().Context(), c.Response().Writer)
+}

handlers/routes.go

@@ -8,6 +8,10 @@ func SetupRoutes(app *echo.Echo, h *UserHandler) {
 	group.GET("", h.HandlerShowUsers)
 	group.GET("/details/:id", h.HandlerShowUserById)
 
+	// Landing page
+	lp := LandingPageHandler{}
+	groupLandingPage := app.Group("/landingpage")
+	groupLandingPage.GET("", lp.LandingPage)
 }
 
 //PLAYGROUND TESTING

services/landingpage.services.go

@@ -0,0 +1,80 @@
+package services
+
+import (
+	"time"
+
+	"github.com/emarifer/go-templ-project-structure/db"
+)
+
+func NewServicesLandingPage(u LandingPage, uStore db.XsampleStore) *ServiceLandingPage {
+
+	return &ServiceLandingPage{
+		LandingPage:  u,
+		XsampleStore: uStore,
+	}
+}
+
+type LandingPage struct {
+	ID          int       `json:"id"`
+	Xsamplename string    `json:"Xsamplename"`
+	Email       string    `json:"email"`
+	CreatedAt   time.Time `json:"created_at,omitempty"`
+}
+
+type ServiceLandingPage struct {
+	LandingPage  LandingPage
+	XsampleStore db.XsampleStore
+}
+
+func (su *ServiceLandingPage) GetAllXsamples() ([]LandingPage, error) {
+	query := `SELECT id, Xsamplename, email, created_at FROM Xsamples ORDER BY created_at DESC`
+
+	rows, err := su.XsampleStore.Db.Query(query)
+	if err != nil {
+		return []LandingPage{}, err
+	}
+	// We close the resource
+	defer rows.Close()
+
+	Xsamples := []LandingPage{}
+	for rows.Next() {
+		rows.Scan(
+			&su.LandingPage.ID,
+			&su.LandingPage.Xsamplename,
+			&su.LandingPage.Email,
+			&su.LandingPage.CreatedAt,
+		)
+
+		Xsamples = append(Xsamples, su.LandingPage)
+	}
+
+	return Xsamples, nil
+}
+
+func (su *ServiceLandingPage) GetXsampleById(id int) (LandingPage, error) {
+
+	query := `SELECT id, Xsamplename, email, created_at FROM Xsamples
+		WHERE id = ?`
+
+	stmt, err := su.XsampleStore.Db.Prepare(query)
+	if err != nil {
+		return LandingPage{}, err
+	}
+
+	defer stmt.Close()
+
+	su.LandingPage.ID = id
+	err = stmt.QueryRow(
+		su.LandingPage.ID,
+	).Scan(
+		&su.LandingPage.ID,
+		&su.LandingPage.Xsamplename,
+		&su.LandingPage.Email,
+		&su.LandingPage.CreatedAt,
+	)
+	if err != nil {
+		return LandingPage{}, err
+	}
+
+	return su.LandingPage, nil
+}

views/landing_page/landingpage.templ

@@ -0,0 +1,644 @@
+package landingpage
+
+import (
+	"github.com/emarifer/go-templ-project-structure/views/layout"
+)
+
+templ LandingPageMain(wrapper templ.Component, footer templ.Component){
+    @wrapper
+    @footer
+}
+
+// wrapper top
+templ WrapperLandingPage(navbar templ.Component, jumbotron templ.Component, our_medical_services templ.Component, why_westerindo templ.Component, promotion templ.Component) {
+    <div class="wrapper-custom">
+        @navbar
+        @jumbotron
+        @our_medical_services
+        @why_westerindo
+        @promotion
+    </div>
+}
+
+// jumbotron
+templ JumbotronLandingPage() {
+    <!-- Large(>=992px) and XL (>=1200px) START -->
+    <div class="d-none d-lg-block d-xl-block">
+     <div class="jumbotron bg-primary">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-8 d-flex flex-column">
+              <div class="mb-3">
+                <h1 class="title-jumbotron text-white">
+                  Invest in Your Well-being with Our Comprehensive Medical
+                  Check-Up
+                </h1>
+                <p class="sub-title-jumbotron text-white">
+                  Elevate your health journey with our thorough medical
+                  assessments, empowering you to take proactive steps towards a
+                  healthier, happier life.
+                </p>
+                <button type="button" class="btn btn-lg btn-pill bg-white">
+                  <span class="title-get-started">Get Started</span>
+                </button>
+              </div>
+              <div class="mt-auto"></div>
+            </div>
+            <div class="col-md-4 d-flex justify-content-md-end">
+              <div
+                style="
+                  flex: 2;
+                  margin: 10px;
+                  display: flex;
+                  align-items: center;
+                "
+              >
+                <img
+                  src="asset-corporate-portal/media/landingpage/jumbotron_left.png"
+                  class="img-fluid"
+                  alt="Your Brand"
+                  style="width: 100%; height: 100%"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Large(>=992px) and XL (>=1200px) END -->
+}
+
+// our medical services
+templ OurMedicalServices(){
+    <!-- Large(>=992px) and XL (>=1200px) START -->
+    <div class="d-none d-lg-block d-xl-block">
+     <div class="container">
+        <div class="row">
+          <div class="col-md-12 text-left">
+            <h2 class="title-section text-black">Our Medical Services</h2>
+            <p class="sub-title-section text-black">
+              Discover excellence in healthcare at Our Medical Services. From
+              diagnosis to treatment, our dedicated team provides personalized
+              care for your well-being.
+            </p>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-4">
+            <div class="card custom-card-lp">
+              <div class="card-body">
+                <div class="icon-container bg-primary-transparent">
+                  <span
+                    class="iconify text-primary w-20 h-20"
+                    data-icon="uil:clinic-medical"
+                  ></span>
+                </div>
+                <h5 class="card-title title-fs-20">In House Clinic</h5>
+                <p class="card-text sub-title-fs-12">
+                  Maintaining health in the workplace by carrying out
+                  promotional, preventive, curative and rehabilitative programs.
+                </p>
+                <a href="#" class="link-learn-more text-primary"
+                  >Learn More
+                  <span
+                    class="iconify text-primary w-20 h-20"
+                    data-icon="eva:arrow-forward-outline"
+                  ></span>
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card custom-card-lp">
+              <div class="card-body">
+                <div class="icon-container bg-primary-transparent">
+                  <span
+                    class="iconify text-primary w-20 h-20"
+                    data-icon="healthicons:clinical-a-outline"
+                  ></span>
+                </div>
+                <h5 class="card-title title-fs-20">Laboratorium Test</h5>
+                <p class="card-text sub-title-fs-12">
+                  Maintaining health in the workplace by carrying out
+                  promotional, preventive, curative and rehabilitative programs.
+                </p>
+                <a href="#" class="link-learn-more text-primary"
+                  >Learn More
+                  <span
+                    class="iconify text-primary w-20 h-20"
+                    data-icon="eva:arrow-forward-outline"
+                  ></span>
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="card custom-card-lp">
+              <div class="card-body">
+                <div class="icon-container bg-primary-transparent">
+                  <span
+                    class="iconify text-primary w-20 h-20"
+                    data-icon="jam:medical"
+                  ></span>
+                </div>
+                <h5 class="card-title title-fs-20">Medical Check Up</h5>
+                <p class="card-text sub-title-fs-12">
+                  Maintaining health in the workplace by carrying out
+                  promotional, preventive, curative and rehabilitative programs.
+                </p>
+                <a href="#" class="link-learn-more text-primary"
+                  >Learn More
+                  <span
+                    class="iconify text-primary w-20 h-20"
+                    data-icon="eva:arrow-forward-outline"
+                  ></span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Large(>=992px) and XL (>=1200px) END -->
+}
+
+// why westerindo
+templ WhyWesterIndoLandingPage(){
+    <!-- Large(>=992px) and XL (>=1200px) START -->
+    <div class="d-none d-lg-block d-xl-block">
+        <div class="container mt-5">
+            <div class="row">
+            <div class="col-md-12 col-lg-12 text-left">
+                <h2 class="title-section text-black">Why Westerindo</h2>
+                <p class="sub-title-section text-black">
+                With a dedicated team of professionals we’re committed to
+                providing medical attention tailored to your needs, ensuring a
+                journey to optimal health and vitality.
+                </p>
+            </div>
+            </div>
+            <div class="row mt-5">
+            <div class="col-md-6">
+                <img
+                src="asset-corporate-portal/media/landingpage/why_westerindo_right.png"
+                alt="Your Brand"
+                class="align-top w-100 h-100 pt-4 pb-4"
+                />
+            </div>
+            <div class="col-md-6 d-flex flex-column">
+                <!-- 1 -->
+                <div class="row flex-grow-1">
+                <div class="media">
+                    <div class="media-left">
+                    <span
+                        class="iconify text-primary media-left-icon"
+                        data-icon="mingcute:certificate-line"
+                    ></span>
+                    </div>
+                    <div class="media-body">
+                    <h4 class="title-fs-20 text-black ml-4">ISO Certificate</h4>
+                    <p class="sub-title-fs-12 text-black ml-4">
+                        Westerindo Clinical Laboratory has obtained ISO 15189:2009
+                        (ISO 15189:2007) Accreditation from the National
+                        Accreditation Committee (KAN) and the Health Laboratory
+                        Accreditation Commission (KALK).
+                    </p>
+                    </div>
+                </div>
+                </div>
+
+                <!-- 2 -->
+                <div class="row flex-grow-1">
+                <div class="media">
+                    <div class="media-left">
+                    <span
+                        class="iconify text-primary media-left-icon"
+                        data-icon="mingcute:certificate-line"
+                    ></span>
+                    </div>
+                    <div class="media-body">
+                    <h4 class="title-fs-20 text-black ml-4">Modern Technology</h4>
+                    <p class="sub-title-fs-12 text-black ml-4">
+                        Laboratory Information System (LIS) is an information system
+                        in which laboratory equipment and diagnostic support have
+                        been integrated automatically so that examination results
+                        can be immediately filled in in employee data. This
+                        eliminates the possibility of human error.
+                    </p>
+                    </div>
+                </div>
+                </div>
+
+                <!-- 3 -->
+                <div class="row flex-grow-1">
+                <div class="media">
+                    <div class="media-left">
+                    <span
+                        class="iconify media-left-icon"
+                        data-icon="mingcute:certificate-line"
+                    ></span>
+                    </div>
+                    <div class="media-body">
+                    <h4 class="title-fs-20 text-black ml-4">
+                        Good Quality Facilities
+                    </h4>
+                    <p class="sub-title-fs-12 text-black ml-4">
+                        The laboratory and medical support equipment used at the
+                        Westerindo Clinical Laboratory is international scale for
+                        precise, fast and accurate results. Lab and medical
+                        equipment certificates are periodically renewed according to
+                        standards.
+                    </p>
+                    </div>
+                </div>
+                </div>
+
+                <!-- 4 -->
+                <div class="row flex-grow-1">
+                <div class="media">
+                    <div class="media-left">
+                    <span
+                        class="iconify media-left-icon"
+                        data-icon="mingcute:certificate-line"
+                    ></span>
+                    </div>
+                    <div class="media-body">
+                    <h4 class="title-fs-20 text-black ml-4">
+                        Professional Service
+                    </h4>
+                    <p class="sub-title-fs-12 text-black ml-4">
+                        Westerindo Clinical Laboratory is committed to providing
+                        professional and excellent service. Therefore, all staff and
+                        doctors at the Westerindo Clinical Laboratory have
+                        competency certification according to their field.
+                    </p>
+                    </div>
+                </div>
+                </div>
+
+                <!-- 5 -->
+                <div class="row">
+                <div class="media">
+                    <div class="media-left">
+                    <span
+                        class="iconify media-left-icon"
+                        data-icon="mingcute:certificate-line"
+                    ></span>
+                    </div>
+                    <div class="media-body">
+                    <h4 class="title-fs-20 text-black ml-4">Experienced</h4>
+                    <p class="sub-title-fs-12 text-black ml-4">
+                        Westerindo Clinical Laboratory is very experienced in
+                        carrying out Medical Check Ups both onsite and insite, in
+                        all corners of Indonesia. Serving various kinds of
+                        companies, from oil and gas companies, automotive,
+                        manufacturing, offices, and others.
+                    </p>
+                    </div>
+                </div>
+                </div>
+            </div>
+            </div>
+        </div>
+    </div>
+    <!-- Large(>=992px) and XL (>=1200px) END -->
+}
+
+// promotion
+templ PromotionLandingPage() {
+    <!-- Large(>=992px) and XL (>=1200px) START -->
+    <div class="d-none d-lg-block d-xl-block">
+     <div class="container mt-4">
+        <div class="row">
+          <div class="col-md-12 text-left">
+            <h2 class="title-section text-black">Promotions</h2>
+            <p class="sub-title-section text-black">
+              Seize This Opportunity to Enhance Your Health
+            </p>
+          </div>
+        </div>
+
+        <div class="row mt-4 mb-2">
+          <div class="col-md-4 mt-2">
+            <img
+              src="asset-corporate-portal/media/landingpage/promotion_1.png"
+              class="img-fluid"
+              alt="Your Brand"
+            />
+          </div>
+          <div class="col-md-4 mt-2">
+            <img
+              src="asset-corporate-portal/media/landingpage/promotion_2.png"
+              class="img-fluid"
+              alt="Your Brand"
+            />
+          </div>
+          <div class="col-md-4 mt-2">
+            <img
+              src="asset-corporate-portal/media/landingpage/promotion_3.png"
+              class="img-fluid"
+              alt="Your Brand"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Large(>=992px) and XL (>=1200px) END -->
+}
+
+// footer below
+templ FooterLandingPage() {
+    <footer class="wrapper-custom bg-black pb-15 pt-25">
+      <div class="row mb-5">
+        <div class="col-md-12 col-lg">
+          <img
+            src="asset-corporate-portal/media/landingpage/logo.png"
+            class="logo-footer"
+            width="126"
+            height="40"
+            alt="Your Brand"
+          />
+
+          <div class="text-white d-flex flex-row mb-3">
+            <div class="mr-3 mt-1">
+              <i
+                class="fas fa-map-marker-alt marker footer-icon text-warning"
+              ></i>
+            </div>
+            <div class="flex-grow-1">
+              <p class="footer-sub-title text-grey">
+                Jl. Cipaku I No.5, RT.2/RW.4, Petogogan, Kec. Kby. Baru, Kota
+                Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12170
+              </p>
+            </div>
+          </div>
+
+          <div class="d-flex flex-row">
+            <div class="mr-3 mt-1">
+              <i class="fas fa-phone footer-icon text-warning"></i>
+            </div>
+            <div class="flex-grow-1">
+              <p class="footer-sub-title text-grey">021-7392345</p>
+              <p class="footer-sub-title text-grey">021-2702525</p>
+              <p class="footer-sub-title text-grey">021-7255080</p>
+            </div>
+          </div>
+        </div>
+        <div class="col-md col-lg">
+          <h4 class="footer-title text-white mb-3">Dashboard</h4>
+          <p class="footer-sub-title text-grey">
+            Employee Medical Health Analytic Clinic Admission
+          </p>
+        </div>
+        <div class="col-md col-lg">
+          <h4 class="footer-title text-white">Benefit</h4>
+        </div>
+        <div class="col-md col-lg">
+          <h4 class="footer-title text-white">Finance & Claims</h4>
+        </div>
+        <div class="col-md col-lg">
+          <h4 class="footer-title text-white">Membership</h4>
+        </div>
+      </div>
+
+      <div class="garis bg-grey"></div>
+      <div class="row mt-4">
+        <div class="col-md-6">
+          <p class="footer-sub-title text-grey">
+            © Copyright 2024. Organized PT SADHANA ABIYASA SAMPOERNA (Privacy
+            Policy)
+          </p>
+        </div>
+        <div class="col-md-6 text-right">
+          <p class="footer-icons">
+            <a href="#" class="mr-3"><i class="fab fa-whatsapp"></i></a>
+            <a href="#" class="mr-3"><i class="fab fa-facebook"></i></a>
+            <a href="#"><i class="fab fa-instagram"></i></a>
+          </p>
+        </div>
+      </div>
+    </footer>
+}
+
+templ NavbarLandingPage() {
+	<nav
+		class="navbar navbar-expand-sm navbar-expand-lg navbar-lp justify-content-between"
+	>
+		<a class="navbar-brand" href="#">
+			<img
+				src="asset-corporate-portal/media/landingpage/logo.png"
+				width="126"
+				height="40"
+				class="d-inline-block align-top"
+				alt="Your Brand"
+			/>
+		</a>
+		<button type="button" class="btn btn-lg btn-primary btn-pill">
+			<span class="title">Login</span>
+		</button>
+	</nav>
+}
+
+templ CssLandingPage() {
+	<style>
+      body {
+        background-color: white;
+        /* padding-right: 100px;
+            padding-left: 100px; */
+      }
+
+      .navbar-lp {
+        padding-top: 40px;
+        padding-bottom: 40px;
+      }
+
+      .jumbotron-lp {
+        border-radius: 32px;
+        /* background: #3B4F9F; */
+      }
+
+      .title {
+        /* color: #FFF; */
+        font-family: Poppins;
+        font-size: 15px;
+        /* font-size: 1vw; */
+        font-style: normal;
+        font-weight: 700;
+      }
+
+      .title-jumbotron {
+        /* color: #FFF; */
+        font-family: Poppins;
+        font-size: 52px;
+        /* font-size: 3vw; */
+        font-style: normal;
+        font-weight: 600;
+      }
+
+      .sub-title-jumbotron {
+        /* color: #FFF; */
+        font-family: Poppins;
+        font-size: 16px;
+        /* font-size: 1vw; */
+        font-style: normal;
+        font-weight: 400;
+      }
+
+      .btn-login {
+        border-radius: 40px;
+        /* background-color: #3B4F9F; */
+        box-shadow: 0px 8px 16px 0px rgba(59, 79, 159, 0.24);
+      }
+
+      .title-get-started {
+        /* color: #0C518C; */
+        font-family: Poppins;
+        font-size: 20px;
+        /* font-size: 1vw; */
+        font-style: normal;
+        font-weight: 700;
+      }
+
+      .custom-button-get-started {
+        border-radius: 40px;
+        /* background-color: #FFF; */
+        box-shadow: 0px 8px 16px 0px rgba(12, 81, 140, 0.24);
+        padding: 20px;
+        margin-top: 44px;
+        justify-content: center;
+        align-items: center;
+        width: 242px;
+      }
+
+      .title-section {
+        /* color: #000; */
+        font-family: Poppins;
+        font-size: 40px;
+        /* font-size: 3vw; */
+        font-style: normal;
+        font-weight: 600;
+        line-height: 80px;
+        margin-bottom: 16px;
+      }
+
+      .sub-title-section {
+        /* color: #212B36; */
+        font-family: Poppins;
+        font-size: 20px;
+        /* font-size: 1.5vw; */
+        font-style: normal;
+        font-weight: 400;
+        line-height: 36px;
+      }
+
+      .custom-card-lp {
+        border-radius: 24px;
+        border: 1px solid #d9d9d9;
+        margin-top: 40px;
+      }
+
+      .title-fs-20 {
+        /* color: #0E1E28; */
+        font-family: Poppins;
+        font-size: 20px;
+        /* font-size: 1.5vw; */
+        font-style: normal;
+        /* font-weight: 500; */
+        line-height: 36px;
+      }
+
+      .sub-title-fs-12 {
+        /* color: #0E1E28; */
+        font-family: Poppins;
+        font-size: 12px;
+        /* font-size: 0.9vw; */
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+        margin-bottom: 16px;
+      }
+
+      .icon-container {
+        display: inline-block;
+        border-radius: 8px;
+        margin-bottom: 16px;
+        width: 40px;
+        height: 40px;
+        text-align: center;
+        line-height: 40px;
+      }
+
+      .link-learn-more {
+        /* color: #3B4F9F; */
+        font-family: Poppins;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+        text-decoration: none;
+      }
+
+      .wrapper-custom {
+        /* background: #1B1D1F; */
+        padding-left: 10vw;
+        padding-right: 10vw;
+        padding-bottom: 10vh;
+      }
+
+      .media-left-icon {
+        width: 40px;
+        height: 40px;
+      }
+
+      .footer-title {
+        /* color: #FFF; */
+        font-family: Poppins;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 20px;
+      }
+
+      .footer-sub-title {
+        /* color: #C3C4C5; */
+        font-family: Poppins;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+      }
+
+      .logo-footer {
+        margin-bottom: 24px;
+        margin-top: -20px;
+      }
+
+      .garis {
+        /* background: #C3C4C5; */
+        height: 0.2px;
+        margin-bottom: 5vh;
+      }
+    </style>
+}
+
+templ JsLandingPage() {
+     <script
+      src="https://unpkg.com/htmx.org@1.9.11/dist/htmx.js"
+      integrity="sha384-l9bYT9SL4CAW0Hl7pAOpfRc18mys1b0wK4U8UtGnWOxPVbVMgrOdB+jyz/WY8Jue"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js"
+      integrity="sha512-lYMiwcB608+RcqJmP93CMe7b4i9G9QK1RbixsNu4PzMRJMsqr/bUrkXUuFzCNsRUo3IXNUr5hz98lINURv5CNA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+}
+
+templ ShowLandingPage(title string, cmp templ.Component, css templ.Component, js templ.Component) {
+	@layout.PlaygroundLayout(title, css, js) {
+		@cmp
+	}
+}

views/landing_page/landingpage_templ.go

@@ -0,0 +1,328 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package landingpage
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	"github.com/emarifer/go-templ-project-structure/views/layout"
+)
+
+func LandingPageMain(wrapper templ.Component, footer templ.Component) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = wrapper.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = footer.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+// wrapper top
+func WrapperLandingPage(navbar templ.Component, jumbotron templ.Component, our_medical_services templ.Component, why_westerindo templ.Component, promotion templ.Component) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"wrapper-custom\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = navbar.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = jumbotron.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = our_medical_services.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = why_westerindo.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = promotion.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+// jumbotron
+func JumbotronLandingPage() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Large(>=992px) and XL (>=1200px) START --><div class=\"d-none d-lg-block d-xl-block\"><div class=\"jumbotron bg-primary\"><div class=\"container\"><div class=\"row\"><div class=\"col-md-8 d-flex flex-column\"><div class=\"mb-3\"><h1 class=\"title-jumbotron text-white\">Invest in Your Well-being with Our Comprehensive Medical\r Check-Up\r</h1><p class=\"sub-title-jumbotron text-white\">Elevate your health journey with our thorough medical\r assessments, empowering you to take proactive steps towards a\r healthier, happier life.\r</p><button type=\"button\" class=\"btn btn-lg btn-pill bg-white\"><span class=\"title-get-started\">Get Started</span></button></div><div class=\"mt-auto\"></div></div><div class=\"col-md-4 d-flex justify-content-md-end\"><div style=\"
+\n                  flex: 2;
+\n                  margin: 10px;
+\n                  display: flex;
+\n                  align-items: center;
+\n                \"><img src=\"asset-corporate-portal/media/landingpage/jumbotron_left.png\" class=\"img-fluid\" alt=\"Your Brand\" style=\"width: 100%; height: 100%\"></div></div></div></div></div></div><!-- Large(>=992px) and XL (>=1200px) END -->")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+// our medical services
+func OurMedicalServices() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Large(>=992px) and XL (>=1200px) START --><div class=\"d-none d-lg-block d-xl-block\"><div class=\"container\"><div class=\"row\"><div class=\"col-md-12 text-left\"><h2 class=\"title-section text-black\">Our Medical Services</h2><p class=\"sub-title-section text-black\">Discover excellence in healthcare at Our Medical Services. From\r diagnosis to treatment, our dedicated team provides personalized\r care for your well-being.\r</p></div></div><div class=\"row\"><div class=\"col-md-4\"><div class=\"card custom-card-lp\"><div class=\"card-body\"><div class=\"icon-container bg-primary-transparent\"><span class=\"iconify text-primary w-20 h-20\" data-icon=\"uil:clinic-medical\"></span></div><h5 class=\"card-title title-fs-20\">In House Clinic</h5><p class=\"card-text sub-title-fs-12\">Maintaining health in the workplace by carrying out\r promotional, preventive, curative and rehabilitative programs.\r</p><a href=\"#\" class=\"link-learn-more text-primary\">Learn More\r <span class=\"iconify text-primary w-20 h-20\" data-icon=\"eva:arrow-forward-outline\"></span></a></div></div></div><div class=\"col-md-4\"><div class=\"card custom-card-lp\"><div class=\"card-body\"><div class=\"icon-container bg-primary-transparent\"><span class=\"iconify text-primary w-20 h-20\" data-icon=\"healthicons:clinical-a-outline\"></span></div><h5 class=\"card-title title-fs-20\">Laboratorium Test</h5><p class=\"card-text sub-title-fs-12\">Maintaining health in the workplace by carrying out\r promotional, preventive, curative and rehabilitative programs.\r</p><a href=\"#\" class=\"link-learn-more text-primary\">Learn More\r <span class=\"iconify text-primary w-20 h-20\" data-icon=\"eva:arrow-forward-outline\"></span></a></div></div></div><div class=\"col-md-4\"><div class=\"card custom-card-lp\"><div class=\"card-body\"><div class=\"icon-container bg-primary-transparent\"><span class=\"iconify text-primary w-20 h-20\" data-icon=\"jam:medical\"></span></div><h5 class=\"card-title title-fs-20\">Medical Check Up</h5><p class=\"card-text sub-title-fs-12\">Maintaining health in the workplace by carrying out\r promotional, preventive, curative and rehabilitative programs.\r</p><a href=\"#\" class=\"link-learn-more text-primary\">Learn More\r <span class=\"iconify text-primary w-20 h-20\" data-icon=\"eva:arrow-forward-outline\"></span></a></div></div></div></div></div></div><!-- Large(>=992px) and XL (>=1200px) END -->")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+// why westerindo
+func WhyWesterIndoLandingPage() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var5 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var5 == nil {
+			templ_7745c5c3_Var5 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Large(>=992px) and XL (>=1200px) START --><div class=\"d-none d-lg-block d-xl-block\"><div class=\"container mt-5\"><div class=\"row\"><div class=\"col-md-12 col-lg-12 text-left\"><h2 class=\"title-section text-black\">Why Westerindo</h2><p class=\"sub-title-section text-black\">With a dedicated team of professionals we’re committed to\r providing medical attention tailored to your needs, ensuring a\r journey to optimal health and vitality.\r</p></div></div><div class=\"row mt-5\"><div class=\"col-md-6\"><img src=\"asset-corporate-portal/media/landingpage/why_westerindo_right.png\" alt=\"Your Brand\" class=\"align-top w-100 h-100 pt-4 pb-4\"></div><div class=\"col-md-6 d-flex flex-column\"><!-- 1 --><div class=\"row flex-grow-1\"><div class=\"media\"><div class=\"media-left\"><span class=\"iconify text-primary media-left-icon\" data-icon=\"mingcute:certificate-line\"></span></div><div class=\"media-body\"><h4 class=\"title-fs-20 text-black ml-4\">ISO Certificate</h4><p class=\"sub-title-fs-12 text-black ml-4\">Westerindo Clinical Laboratory has obtained ISO 15189:2009\r (ISO 15189:2007) Accreditation from the National\r Accreditation Committee (KAN) and the Health Laboratory\r Accreditation Commission (KALK).\r</p></div></div></div><!-- 2 --><div class=\"row flex-grow-1\"><div class=\"media\"><div class=\"media-left\"><span class=\"iconify text-primary media-left-icon\" data-icon=\"mingcute:certificate-line\"></span></div><div class=\"media-body\"><h4 class=\"title-fs-20 text-black ml-4\">Modern Technology</h4><p class=\"sub-title-fs-12 text-black ml-4\">Laboratory Information System (LIS) is an information system\r in which laboratory equipment and diagnostic support have\r been integrated automatically so that examination results\r can be immediately filled in in employee data. This\r eliminates the possibility of human error.\r</p></div></div></div><!-- 3 --><div class=\"row flex-grow-1\"><div class=\"media\"><div class=\"media-left\"><span class=\"iconify media-left-icon\" data-icon=\"mingcute:certificate-line\"></span></div><div class=\"media-body\"><h4 class=\"title-fs-20 text-black ml-4\">Good Quality Facilities\r</h4><p class=\"sub-title-fs-12 text-black ml-4\">The laboratory and medical support equipment used at the\r Westerindo Clinical Laboratory is international scale for\r precise, fast and accurate results. Lab and medical\r equipment certificates are periodically renewed according to\r standards.\r</p></div></div></div><!-- 4 --><div class=\"row flex-grow-1\"><div class=\"media\"><div class=\"media-left\"><span class=\"iconify media-left-icon\" data-icon=\"mingcute:certificate-line\"></span></div><div class=\"media-body\"><h4 class=\"title-fs-20 text-black ml-4\">Professional Service\r</h4><p class=\"sub-title-fs-12 text-black ml-4\">Westerindo Clinical Laboratory is committed to providing\r professional and excellent service. Therefore, all staff and\r doctors at the Westerindo Clinical Laboratory have\r competency certification according to their field.\r</p></div></div></div><!-- 5 --><div class=\"row\"><div class=\"media\"><div class=\"media-left\"><span class=\"iconify media-left-icon\" data-icon=\"mingcute:certificate-line\"></span></div><div class=\"media-body\"><h4 class=\"title-fs-20 text-black ml-4\">Experienced</h4><p class=\"sub-title-fs-12 text-black ml-4\">Westerindo Clinical Laboratory is very experienced in\r carrying out Medical Check Ups both onsite and insite, in\r all corners of Indonesia. Serving various kinds of\r companies, from oil and gas companies, automotive,\r manufacturing, offices, and others.\r</p></div></div></div></div></div></div></div><!-- Large(>=992px) and XL (>=1200px) END -->")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+// promotion
+func PromotionLandingPage() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var6 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var6 == nil {
+			templ_7745c5c3_Var6 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Large(>=992px) and XL (>=1200px) START --><div class=\"d-none d-lg-block d-xl-block\"><div class=\"container mt-4\"><div class=\"row\"><div class=\"col-md-12 text-left\"><h2 class=\"title-section text-black\">Promotions</h2><p class=\"sub-title-section text-black\">Seize This Opportunity to Enhance Your Health\r</p></div></div><div class=\"row mt-4 mb-2\"><div class=\"col-md-4 mt-2\"><img src=\"asset-corporate-portal/media/landingpage/promotion_1.png\" class=\"img-fluid\" alt=\"Your Brand\"></div><div class=\"col-md-4 mt-2\"><img src=\"asset-corporate-portal/media/landingpage/promotion_2.png\" class=\"img-fluid\" alt=\"Your Brand\"></div><div class=\"col-md-4 mt-2\"><img src=\"asset-corporate-portal/media/landingpage/promotion_3.png\" class=\"img-fluid\" alt=\"Your Brand\"></div></div></div></div><!-- Large(>=992px) and XL (>=1200px) END -->")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+// footer below
+func FooterLandingPage() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var7 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var7 == nil {
+			templ_7745c5c3_Var7 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<footer class=\"wrapper-custom bg-black pb-15 pt-25\"><div class=\"row mb-5\"><div class=\"col-md-12 col-lg\"><img src=\"asset-corporate-portal/media/landingpage/logo.png\" class=\"logo-footer\" width=\"126\" height=\"40\" alt=\"Your Brand\"><div class=\"text-white d-flex flex-row mb-3\"><div class=\"mr-3 mt-1\"><i class=\"fas fa-map-marker-alt marker footer-icon text-warning\"></i></div><div class=\"flex-grow-1\"><p class=\"footer-sub-title text-grey\">Jl. Cipaku I No.5, RT.2/RW.4, Petogogan, Kec. Kby. Baru, Kota\r Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12170\r</p></div></div><div class=\"d-flex flex-row\"><div class=\"mr-3 mt-1\"><i class=\"fas fa-phone footer-icon text-warning\"></i></div><div class=\"flex-grow-1\"><p class=\"footer-sub-title text-grey\">021-7392345</p><p class=\"footer-sub-title text-grey\">021-2702525</p><p class=\"footer-sub-title text-grey\">021-7255080</p></div></div></div><div class=\"col-md col-lg\"><h4 class=\"footer-title text-white mb-3\">Dashboard</h4><p class=\"footer-sub-title text-grey\">Employee Medical Health Analytic Clinic Admission\r</p></div><div class=\"col-md col-lg\"><h4 class=\"footer-title text-white\">Benefit</h4></div><div class=\"col-md col-lg\"><h4 class=\"footer-title text-white\">Finance & Claims</h4></div><div class=\"col-md col-lg\"><h4 class=\"footer-title text-white\">Membership</h4></div></div><div class=\"garis bg-grey\"></div><div class=\"row mt-4\"><div class=\"col-md-6\"><p class=\"footer-sub-title text-grey\">© Copyright 2024. Organized PT SADHANA ABIYASA SAMPOERNA (Privacy\r Policy)\r</p></div><div class=\"col-md-6 text-right\"><p class=\"footer-icons\"><a href=\"#\" class=\"mr-3\"><i class=\"fab fa-whatsapp\"></i></a> <a href=\"#\" class=\"mr-3\"><i class=\"fab fa-facebook\"></i></a> <a href=\"#\"><i class=\"fab fa-instagram\"></i></a></p></div></div></footer>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func NavbarLandingPage() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var8 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var8 == nil {
+			templ_7745c5c3_Var8 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<nav class=\"navbar navbar-expand-sm navbar-expand-lg navbar-lp justify-content-between\"><a class=\"navbar-brand\" href=\"#\"><img src=\"asset-corporate-portal/media/landingpage/logo.png\" width=\"126\" height=\"40\" class=\"d-inline-block align-top\" alt=\"Your Brand\"></a> <button type=\"button\" class=\"btn btn-lg btn-primary btn-pill\"><span class=\"title\">Login</span></button></nav>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func CssLandingPage() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var9 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var9 == nil {
+			templ_7745c5c3_Var9 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<style>\r\n      body {\r\n        background-color: white;\r\n        /* padding-right: 100px;\r\n            padding-left: 100px; */\r\n      }\r\n\r\n      .navbar-lp {\r\n        padding-top: 40px;\r\n        padding-bottom: 40px;\r\n      }\r\n\r\n      .jumbotron-lp {\r\n        border-radius: 32px;\r\n        /* background: #3B4F9F; */\r\n      }\r\n\r\n      .title {\r\n        /* color: #FFF; */\r\n        font-family: Poppins;\r\n        font-size: 15px;\r\n        /* font-size: 1vw; */\r\n        font-style: normal;\r\n        font-weight: 700;\r\n      }\r\n\r\n      .title-jumbotron {\r\n        /* color: #FFF; */\r\n        font-family: Poppins;\r\n        font-size: 52px;\r\n        /* font-size: 3vw; */\r\n        font-style: normal;\r\n        font-weight: 600;\r\n      }\r\n\r\n      .sub-title-jumbotron {\r\n        /* color: #FFF; */\r\n        font-family: Poppins;\r\n        font-size: 16px;\r\n        /* font-size: 1vw; */\r\n        font-style: normal;\r\n        font-weight: 400;\r\n      }\r\n\r\n      .btn-login {\r\n        border-radius: 40px;\r\n        /* background-color: #3B4F9F; */\r\n        box-shadow: 0px 8px 16px 0px rgba(59, 79, 159, 0.24);\r\n      }\r\n\r\n      .title-get-started {\r\n        /* color: #0C518C; */\r\n        font-family: Poppins;\r\n        font-size: 20px;\r\n        /* font-size: 1vw; */\r\n        font-style: normal;\r\n        font-weight: 700;\r\n      }\r\n\r\n      .custom-button-get-started {\r\n        border-radius: 40px;\r\n        /* background-color: #FFF; */\r\n        box-shadow: 0px 8px 16px 0px rgba(12, 81, 140, 0.24);\r\n        padding: 20px;\r\n        margin-top: 44px;\r\n        justify-content: center;\r\n        align-items: center;\r\n        width: 242px;\r\n      }\r\n\r\n      .title-section {\r\n        /* color: #000; */\r\n        font-family: Poppins;\r\n        font-size: 40px;\r\n        /* font-size: 3vw; */\r\n        font-style: normal;\r\n        font-weight: 600;\r\n        line-height: 80px;\r\n        margin-bottom: 16px;\r\n      }\r\n\r\n      .sub-title-section {\r\n        /* color: #212B36; */\r\n        font-family: Poppins;\r\n        font-size: 20px;\r\n        /* font-size: 1.5vw; */\r\n        font-style: normal;\r\n        font-weight: 400;\r\n        line-height: 36px;\r\n      }\r\n\r\n      .custom-card-lp {\r\n        border-radius: 24px;\r\n        border: 1px solid #d9d9d9;\r\n        margin-top: 40px;\r\n      }\r\n\r\n      .title-fs-20 {\r\n        /* color: #0E1E28; */\r\n        font-family: Poppins;\r\n        font-size: 20px;\r\n        /* font-size: 1.5vw; */\r\n        font-style: normal;\r\n        /* font-weight: 500; */\r\n        line-height: 36px;\r\n      }\r\n\r\n      .sub-title-fs-12 {\r\n        /* color: #0E1E28; */\r\n        font-family: Poppins;\r\n        font-size: 12px;\r\n        /* font-size: 0.9vw; */\r\n        font-style: normal;\r\n        font-weight: 400;\r\n        line-height: 20px;\r\n        margin-bottom: 16px;\r\n      }\r\n\r\n      .icon-container {\r\n        display: inline-block;\r\n        border-radius: 8px;\r\n        margin-bottom: 16px;\r\n        width: 40px;\r\n        height: 40px;\r\n        text-align: center;\r\n        line-height: 40px;\r\n      }\r\n\r\n      .link-learn-more {\r\n        /* color: #3B4F9F; */\r\n        font-family: Poppins;\r\n        font-size: 16px;\r\n        font-style: normal;\r\n        font-weight: 500;\r\n        line-height: normal;\r\n        text-decoration: none;\r\n      }\r\n\r\n      .wrapper-custom {\r\n        /* background: #1B1D1F; */\r\n        padding-left: 10vw;\r\n        padding-right: 10vw;\r\n        padding-bottom: 10vh;\r\n      }\r\n\r\n      .media-left-icon {\r\n        width: 40px;\r\n        height: 40px;\r\n      }\r\n\r\n      .footer-title {\r\n        /* color: #FFF; */\r\n        font-family: Poppins;\r\n        font-size: 14px;\r\n        font-style: normal;\r\n        font-weight: 500;\r\n        line-height: 20px;\r\n      }\r\n\r\n      .footer-sub-title {\r\n        /* color: #C3C4C5; */\r\n        font-family: Poppins;\r\n        font-size: 12px;\r\n        font-style: normal;\r\n        font-weight: 400;\r\n        line-height: 20px;\r\n      }\r\n\r\n      .logo-footer {\r\n        margin-bottom: 24px;\r\n        margin-top: -20px;\r\n      }\r\n\r\n      .garis {\r\n        /* background: #C3C4C5; */\r\n        height: 0.2px;\r\n        margin-bottom: 5vh;\r\n      }\r\n    </style>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func JsLandingPage() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var10 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var10 == nil {
+			templ_7745c5c3_Var10 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script src=\"https://unpkg.com/htmx.org@1.9.11/dist/htmx.js\" integrity=\"sha384-l9bYT9SL4CAW0Hl7pAOpfRc18mys1b0wK4U8UtGnWOxPVbVMgrOdB+jyz/WY8Jue\" crossorigin=\"anonymous\"></script><script src=\"https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js\" integrity=\"sha512-lYMiwcB608+RcqJmP93CMe7b4i9G9QK1RbixsNu4PzMRJMsqr/bUrkXUuFzCNsRUo3IXNUr5hz98lINURv5CNA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func ShowLandingPage(title string, cmp templ.Component, css templ.Component, js templ.Component) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var11 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var11 == nil {
+			templ_7745c5c3_Var11 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var12 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+			if !templ_7745c5c3_IsBuffer {
+				templ_7745c5c3_Buffer = templ.GetBuffer()
+				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+			}
+			templ_7745c5c3_Err = cmp.Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if !templ_7745c5c3_IsBuffer {
+				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = layout.PlaygroundLayout(title, css, js).Render(templ.WithChildren(ctx, templ_7745c5c3_Var12), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {