coba landing page hanan

assets/sindhu/landingpage.html

@@ -277,6 +277,18 @@ License: You must have a valid license purchased only from themeforest(the above
         /* background: #C3C4C5; */
         height: 0.2px;
       }
+
+      .w-logo {
+        width: 126px;
+        height: 40px;
+      }
+
+      .jumbotron-left {
+        flex: 2;
+        margin: 10px;
+        display: flex;
+        align-items: center;
+      }
     </style>
   </head>
   <!--end::Head-->
@@ -295,9 +307,7 @@ License: You must have a valid license purchased only from themeforest(the above
         <a class="navbar-brand" href="#">
           <img
             src="../assets/asset-corporate-portal/media/landingpage/logo.png"
-            width="126"
-            height="40"
-            class="d-inline-block align-top"
+            class="d-inline-block align-top w-logo"
             alt="Your Brand"
           />
         </a>
@@ -330,14 +340,7 @@ License: You must have a valid license purchased only from themeforest(the above
               <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;
-                "
-              >
+              <div class="jumbotron-left">
                 <img
                   src="../assets/asset-corporate-portal/media/landingpage/jumbotron_left.png"
                   class="img-fluid"

cmd/main.go

@@ -46,6 +46,14 @@ func main() {
 	xh := handlers.NewXsampleHandler(xs)
 	handlers.SetupRoutesXsample(app, xh)
 
+	lStore, err := db.NewLandingPageStore(dbName)
+	if err != nil {
+		app.Logger.Fatalf("failed to create store: %s", err)
+	}
+	ls := services.NewServicesLandingPage(services.LandingPage{}, lStore)
+	lh := handlers.NewLandingPageHandler(ls)
+	handlers.SetupRoutesLandingPage(app, lh)
+
 	app.Logger.Fatal(app.Start(":5000"))
 }
 

db/landingpage.store.go

@@ -0,0 +1,26 @@
+package db
+
+import (
+	"database/sql"
+
+	_ "github.com/glebarez/go-sqlite"
+)
+
+type LandingPageStore struct {
+	Db *sql.DB
+}
+
+func NewLandingPageStore(dbName string) (LandingPageStore, error) {
+	Db, err := getConnection(dbName)
+	if err != nil {
+		return LandingPageStore{}, err
+	}
+
+	if err := createMigrations(dbName, Db); err != nil {
+		return LandingPageStore{}, err
+	}
+
+	return LandingPageStore{
+		Db,
+	}, nil
+}

handlers/landingpage.handlers.go

@@ -0,0 +1,32 @@
+package handlers
+
+import (
+	"github.com/a-h/templ"
+	"github.com/emarifer/go-templ-project-structure/views/landingpage"
+
+	"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) HendlerShowLandingPage(c echo.Context) error {
+	lp := landingpage.ShowLandingPage("Landing Page", landingpage.BodyLandingPage(), 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

@@ -15,6 +15,13 @@ func SetupRoutesXsample(app *echo.Echo, h *XsampleHandler) {
 	xSample := app.Group("/xsample")
 	xSample.GET("/xsample01", h.Hello)
 }
+
+//LANDINGPAGE TESTING
+func SetupRoutesLandingPage(app *echo.Echo, h *LandingPageHandler) {
+	LandingPage := app.Group("/landingpage")
+	LandingPage.GET("/", h.HendlerShowLandingPage)
+}
+
 func SetupRoutesProject(app *echo.Echo) {
 
 }

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.LandingPageStore) *ServicesLandingPage {
+
+	return &ServicesLandingPage{
+		LandingPage:      u,
+		LandingPageStore: uStore,
+	}
+}
+
+type LandingPage struct {
+	ID              int       `json:"id"`
+	LandingPagename string    `json:"LandingPagename"`
+	Email           string    `json:"email"`
+	CreatedAt       time.Time `json:"created_at,omitempty"`
+}
+
+type ServicesLandingPage struct {
+	LandingPage      LandingPage
+	LandingPageStore db.LandingPageStore
+}
+
+func (su *ServicesLandingPage) GetAllLandingPages() ([]LandingPage, error) {
+	query := `SELECT id, LandingPagename, email, created_at FROM LandingPages ORDER BY created_at DESC`
+
+	rows, err := su.LandingPageStore.Db.Query(query)
+	if err != nil {
+		return []LandingPage{}, err
+	}
+	// We close the resource
+	defer rows.Close()
+
+	LandingPages := []LandingPage{}
+	for rows.Next() {
+		rows.Scan(
+			&su.LandingPage.ID,
+			&su.LandingPage.LandingPagename,
+			&su.LandingPage.Email,
+			&su.LandingPage.CreatedAt,
+		)
+
+		LandingPages = append(LandingPages, su.LandingPage)
+	}
+
+	return LandingPages, nil
+}
+
+func (su *ServicesLandingPage) GetLandingPageById(id int) (LandingPage, error) {
+
+	query := `SELECT id, LandingPagename, email, created_at FROM LandingPages
+		WHERE id = ?`
+
+	stmt, err := su.LandingPageStore.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.LandingPagename,
+		&su.LandingPage.Email,
+		&su.LandingPage.CreatedAt,
+	)
+	if err != nil {
+		return LandingPage{}, err
+	}
+
+	return su.LandingPage, nil
+}

views/landingpage/landingpage.templ

@@ -0,0 +1,663 @@
+package landingpage
+
+import (
+	"github.com/emarifer/go-templ-project-structure/views/layout"
+)
+
+templ BodyLandingPage() {
+	<div class="cards-wrapper carousel slide carousel-fade" id="carouselExampleControls" data-ride="carousel">
+		<div class="carousel-inner">
+			<div class="card carousel-item active">
+				<img src="..." class="card-img-top" alt="..."/>
+				<div class="card-body">
+					<h5 class="card-title">Card title</h5>
+					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+					<a href="#" class="btn btn-primary">Go somewhere</a>
+				</div>
+			</div>
+			<div class="card carousel-item">
+				<img src="..." class="card-img-top" alt="..."/>
+				<div class="card-body">
+					<h5 class="card-title">Card title</h5>
+					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+					<a href="#" class="btn btn-primary">Go somewhere</a>
+				</div>
+			</div>
+			<div class="card carousel-item">
+				<img src="..." class="card-img-top" alt="..."/>
+				<div class="card-body">
+					<h5 class="card-title">Card title</h5>
+					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+					<a href="#" class="btn btn-primary">Go somewhere</a>
+				</div>
+			</div>
+		</div>
+		<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+			<span class="sr-only">Previous</span>
+		</a>
+		<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+			<span class="carousel-control-next-icon" aria-hidden="true"></span>
+			<span class="sr-only">Next</span>
+		</a>
+	</div>
+	<br/>
+	<br/>
+	<br/>
+	<div class="wrapper-custom">
+		<!-- Navbar Start -->
+		<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"
+					class="d-inline-block align-top w-logo"
+					alt="Your Brand"
+				/>
+			</a>
+			<button type="button" class="btn btn-lg btn-primary btn-pill">
+				<span class="title">Login</span>
+			</button>
+		</nav>
+		<!-- Navbar End -->
+		<!-- jumbotron START -->
+		<!-- <div class="jumbotron jumbotron-lp d-none d-lg-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 class="jumbotron-left">
+							<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>
+		<!-- jumbotron END -->
+		<!-- Our Medical Service START -->
+		<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>
+		<!-- Our Medical Service END -->
+		<!-- Why Westerindo START  belum fix di ukuran < 1400 -->
+		<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>
+		<!-- Why Westerindo END -->
+		<!-- Promotion START -->
+		<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>
+		<!-- Promotion END -->
+	</div>
+	<!-- footer START -->
+	<footer class="wrapper-custom bg-black pb-25 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">
+					<!-- style="display: flex; flex-direction: row; color: white;align-items: start; margin-bottom: 24px;" -->
+					<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>
+	<!-- footer END -->
+}
+
+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;
+      }
+
+      .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;
+      }
+      
+      .w-logo {
+        width: 126px;
+        height: 40px;
+      }
+
+      .jumbotron-left {
+        flex: 2;
+        margin: 10px;
+        display: flex;
+        align-items: center;
+      }
+
+        .cards-wrapper {
+            display: flex;
+            justify-content: center;
+        }
+        .card img {
+            max-width: 100%;
+            max-height: 100%;
+        }
+
+        .carousel-control-prev,
+        .carousel-control-next {
+            background-color: #e1e1e1;
+            width: 5vh;
+            height: 5vh;
+            border-radius: 50%;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    </style>
+}
+
+templ JsLandingPage() {
+	<!--begin::Page Vendors(used by this page)-->
+	<script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
+	<!--end::Page Vendors-->
+	<!--begin::Page Scripts(used by this page)-->
+	<script src="assets/js/pages/widgets.js"></script>
+	<!--end::Page Scripts-->
+	<!-- echartjs.min.js -->
+	<script src="assets/js/echarts-js/echart.min.js"></script>
+	<!-- helper htmx -->
+	<script src="assets/js/helper-htmx/helper.js"></script>
+	<!-- iconify -->
+	<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>
+	<!-- htmx -->
+	<script src="https://unpkg.com/htmx.org@1.9.11/dist/htmx.js" integrity="sha384-l9bYT9SL4CAW0Hl7pAOpfRc18mys1b0wK4U8UtGnWOxPVbVMgrOdB+jyz/WY8Jue" crossorigin="anonymous"></script>
+	<!-- SCRIPT -->
+	<script type="text/javascript" async></script>
+	<!-- SCRIPT -->
+}
+
+templ ShowLandingPage(title string, cmp templ.Component, css templ.Component, js templ.Component) {
+	@layout.CanvasLayout(title, css, js) {
+		@cmp
+	}
+}