templ per komponen, scroll horizontal

This commit is contained in:
sindhu
2024-04-26 17:01:41 +07:00
parent 99d7fd5159
commit b9108efb25
6 changed files with 1458 additions and 204 deletions

View File

@@ -102,6 +102,11 @@ License: You must have a valid license purchased only from themeforest(the above
type="text/css"
/>
<style>
div.scrollmenu {
overflow: auto;
white-space: nowrap;
}
body {
background-color: white;
/* padding-right: 100px;
@@ -308,64 +313,69 @@ License: You must have a valid license purchased only from themeforest(the above
<!-- 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>
<!-- 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="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="../assets/asset-corporate-portal/media/landingpage/jumbotron_left.png"
class="img-fluid"
alt="Your Brand"
style="width: 100%; height: 100%"
/>
<div class="col-md-4 d-flex justify-content-md-end">
<div
style="
flex: 2;
margin: 10px;
display: flex;
align-items: center;
"
>
<img
src="../assets/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 -->
<!-- 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>
<!-- 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>
<div class="row">
<div class="col-md-4">
<div class="card custom-card-lp">
<div class="d-flex flex-row flex-nowrap overflow-auto">
<div class="card card-block custom-card-lp mr-5" style="min-width: 200px;">
<div class="card-body">
<div class="icon-container bg-primary-transparent">
<span
@@ -375,8 +385,7 @@ License: You must have a valid license purchased only from themeforest(the above
</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.
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<a href="#" class="link-learn-more text-primary"
>Learn More
@@ -387,10 +396,7 @@ License: You must have a valid license purchased only from themeforest(the above
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card custom-card-lp">
<div class="card card-block custom-card-lp mr-5" style="min-width: 300px;">
<div class="card-body">
<div class="icon-container bg-primary-transparent">
<span
@@ -401,7 +407,8 @@ License: You must have a valid license purchased only from themeforest(the above
<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.
promotional, preventive, curative and rehabilitative
programs.
</p>
<a href="#" class="link-learn-more text-primary"
>Learn More
@@ -412,10 +419,7 @@ License: You must have a valid license purchased only from themeforest(the above
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card custom-card-lp">
<div class="card card-block custom-card-lp mr-5" style="min-width: 300px;">
<div class="card-body">
<div class="icon-container bg-primary-transparent">
<span
@@ -426,7 +430,8 @@ License: You must have a valid license purchased only from themeforest(the above
<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.
promotional, preventive, curative and rehabilitative
programs.
</p>
<a href="#" class="link-learn-more text-primary"
>Learn More
@@ -438,182 +443,342 @@ License: You must have a valid license purchased only from themeforest(the above
</div>
</div>
</div>
<!-- <div class="container">
<div class="">
<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>
</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 -->
<!-- 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 were committed to
providing medical attention tailored to your needs, ensuring a
journey to optimal health and vitality.
</p>
<!-- 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 were committed to
providing medical attention tailored to your needs, ensuring a
journey to optimal health and vitality.
</p>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-md-6">
<img
src="../assets/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 class="row mt-5">
<div class="col-md-6">
<img
src="../assets/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>
</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>
<!-- 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>
</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>
<!-- 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>
</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>
<!-- 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>
</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>
<!-- 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) START -->
<!-- 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>
<!-- 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>
<div class="row mt-4 mb-2">
<div class="col-md-4 mt-2">
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_1.png"
class="img-fluid"
alt="Your Brand"
/>
</div>
<div class="col-md-4 mt-2">
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_2.png"
class="img-fluid"
alt="Your Brand"
/>
</div>
<div class="col-md-4 mt-2">
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_3.png"
class="img-fluid"
alt="Your Brand"
/>
<div class="scrollmenu">
<div class="mt-4 mb-2">
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_1.png"
class="img-fluid mr-2"
alt="Your Brand"
/>
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_1.png"
class="img-fluid mr-2"
alt="Your Brand"
/>
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_3.png"
class="img-fluid mr-2"
alt="Your Brand"
/>
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_1.png"
class="img-fluid mr-2"
alt="Your Brand"
/>
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_1.png"
class="img-fluid mr-2"
alt="Your Brand"
/>
<!-- <div class="col-md-4 mt-2">
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_1.png"
class="img-fluid"
alt="Your Brand"
/>
</div>
<div class="col-md-4 mt-2">
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_1.png"
class="img-fluid"
alt="Your Brand"
/>
</div>
<div class="col-md-4 mt-2">
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_2.png"
class="img-fluid"
alt="Your Brand"
/>
</div>
<div class="col-md-4 mt-2">
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_3.png"
class="img-fluid"
alt="Your Brand"
/>
</div> -->
</div>
</div>
</div>
</div>
<!-- Large(>=992px) and XL (>=1200px) END -->
<!-- Promotion END -->
</div>

View File

@@ -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)
}

View File

@@ -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

View File

@@ -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
}

View File

@@ -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 were 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
}
}

View File

@@ -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 were 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 {