add responsive tablet dan hp

This commit is contained in:
Hanan Askarim
2024-05-02 13:35:38 +07:00
parent 62d7735ee1
commit 7cc0ce51ba
4 changed files with 190 additions and 57 deletions

View File

@@ -2,7 +2,6 @@ package landingpage
import (
"github.com/emarifer/go-templ-project-structure/views/layout"
"github.com/emarifer/go-templ-project-structure/views/under_development"
)
templ MainLandingPage(medicalServiceComponent templ.Component, listAdvantageComponent templ.Component, listPromotion templ.Component, footer templ.Component) {
@@ -24,41 +23,36 @@ templ MainLandingPage(medicalServiceComponent templ.Component, listAdvantageComp
<span class="title">Login</span>
</button>
</nav>
<div class="d-block d-lg-none d-xl-none">
@under_development.UnderDevelopment()
<!-- Navbar End -->
<!-- jumbotron START -->
<!-- <div class="jumbotron jumbotron-lp d-none d-lg-block"> -->
@HeaderCard()
<!-- jumbotron END -->
<!-- Our Medical Service START -->
<div class="row">
@HeaderSection("Our Medical Services", "Discover excellence in healthcare at Our Medical Services. From diagnosis to treatment, our dedicated team provides personalized care for your well-being.")
</div>
<div class="d-none d-lg-block">
<!-- Navbar End -->
<!-- jumbotron START -->
<!-- <div class="jumbotron jumbotron-lp d-none d-lg-block"> -->
@HeaderCard()
<!-- jumbotron END -->
<!-- Our Medical Service START -->
@medicalServiceComponent
<!-- Our Medical Service END -->
<!-- Why Westerindo START belum fix di ukuran < 1400 -->
<div class="container p-0 mt-5 ">
<div class="row">
@HeaderSection("Our Medical Services", "Discover excellence in healthcare at Our Medical Services. From diagnosis to treatment, our dedicated team provides personalized care for your well-being.")
@HeaderSection("Why Westerindo", "With a dedicated team of professionals were committed to providing medical attention tailored to your needs, ensuring a journey to optimal health and vitality.")
</div>
@medicalServiceComponent
<!-- Our Medical Service END -->
<!-- Why Westerindo START belum fix di ukuran < 1400 -->
<div class="container p-0 mt-5 ">
<div class="row">
@HeaderSection("Why Westerindo", "With a dedicated team of professionals were committed to providing medical attention tailored to your needs, ensuring a journey to optimal health and vitality.")
</div>
@listAdvantageComponent
</div>
<!-- Why Westerindo END -->
<!-- Promotion START -->
<div class="container mt-4">
<div class="row">
@HeaderSection("Promotions", "Seize This Opportunity to Enhance Your Health")
</div>
@listPromotion
</div>
<!-- Promotion END -->
<!-- footer START -->
@footer
<!-- footer END -->
@listAdvantageComponent
</div>
<!-- Why Westerindo END -->
<!-- Promotion START -->
<div class="container mt-4">
<div class="row">
@HeaderSection("Promotions", "Seize This Opportunity to Enhance Your Health")
</div>
@listPromotion
</div>
<!-- Promotion END -->
<!-- footer START -->
@footer
<!-- footer END -->
</div>
}
@@ -112,6 +106,24 @@ templ CssLandingPage() {
font-weight: 700;
}
.title-jumbotron-sm {
/* color: #FFF; */
font-family: Poppins;
font-size: 32px;
/* font-size: 3vw; */
font-style: normal;
font-weight: 600;
}
.title-jumbotron-md {
/* color: #FFF; */
font-family: Poppins;
font-size: 42px;
/* font-size: 3vw; */
font-style: normal;
font-weight: 600;
}
.title-jumbotron {
/* color: #FFF; */
font-family: Poppins;
@@ -316,8 +328,8 @@ templ JsLandingPage() {
autoplaySpeed: 2000,
infinite: true,
lazyLoad: "ondemand",
slidesToShow: 3,
slidesToScroll: 3,
slidesToShow: 2,
slidesToScroll: 2,
});
// sm

File diff suppressed because one or more lines are too long

View File

@@ -34,7 +34,17 @@ templ MedicalService(title string, desciption string, icon string, link string)
}
templ ListMedicalService(medserData []services.ClientService) {
<div class="row responsive-lg">
<div class="row responsive-sm d-xs-block d-sm-block d-md-none">
for _, d := range medserData {
@MedicalService(d.ClientServiceName, d.ClientServiceDescription, d.ClientServiceIcon, d.ClientServiceLink)
}
</div>
<div class="row responsive-md d-none d-md-block d-lg-none">
for _, d := range medserData {
@MedicalService(d.ClientServiceName, d.ClientServiceDescription, d.ClientServiceIcon, d.ClientServiceLink)
}
</div>
<div class="row responsive-lg d-none d-lg-block">
for _, d := range medserData {
@MedicalService(d.ClientServiceName, d.ClientServiceDescription, d.ClientServiceIcon, d.ClientServiceLink)
}
@@ -87,7 +97,76 @@ templ ListAdvantage(adData []services.AdvantageClient) {
}
templ HeaderCard() {
<div class="jumbotron bg-primary">
// Hp
<div class="jumbotron bg-primary d-xs-block d-sm-block d-md-none">
<div class="container">
<div class="row">
<div class="col-sm-12 mb-3 d-flex justify-content-sm-end">
<div class="d-flex m-1 align-items-center">
<img
src="../asset-corporate-portal/media/landingpage/jumbotron_left.png"
class="img-fluid w-100 h-100 img-header"
alt="Your Brand"
/>
</div>
</div>
<div class="col-sm-12 d-flex flex-column">
<div class="mb-3">
<h1 class="title-jumbotron-sm 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>
</div>
</div>
// End Hp
// Tablet
<div class="jumbotron bg-primary d-none d-md-block d-lg-none">
<div class="container">
<div class="row">
<div class="col-md-12 mb-3 d-flex justify-content-md-end">
<div class="d-flex m-1 align-items-center">
<img
src="../asset-corporate-portal/media/landingpage/jumbotron_left.png"
class="img-fluid w-100 h-100 img-header"
alt="Your Brand"
/>
</div>
</div>
<div class="col-md-12 d-flex flex-column">
<div class="mb-3">
<h1 class="title-jumbotron-md text-white">
Invest in Your Well-being with Our Comprehensive Medical
Check-Up
</h1>
<p class="sub-title-jumbotron-md 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>
</div>
</div>
// End Tablet
// Dekstop
<div class="jumbotron bg-primary d-none d-lg-block">
<div class="container">
<div class="row">
<div class="col-md-8 d-flex flex-column">
@@ -125,6 +204,7 @@ templ HeaderCard() {
</div>
</div>
</div>
// End Dekstop
}
templ Promotion(prm services.Promotion) {
@@ -138,6 +218,16 @@ templ Promotion(prm services.Promotion) {
}
templ ListPromotion(prm []services.Promotion) {
<div class="row responsive-sm d-xs-block d-sm-block d-md-none">
for _, d := range prm {
@Promotion(d)
}
</div>
<div class="row responsive-md d-none d-md-block d-lg-none">
for _, d := range prm {
@Promotion(d)
}
</div>
<div class="row responsive-lg d-none d-lg-block d-xl-block">
for _, d := range prm {
@Promotion(d)

View File

@@ -99,7 +99,27 @@ func ListMedicalService(medserData []services.ClientService) templ.Component {
templ_7745c5c3_Var6 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row responsive-lg\">")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row responsive-sm d-xs-block d-sm-block d-md-none\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
for _, d := range medserData {
templ_7745c5c3_Err = MedicalService(d.ClientServiceName, d.ClientServiceDescription, d.ClientServiceIcon, d.ClientServiceLink).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"row responsive-md d-none d-md-block d-lg-none\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
for _, d := range medserData {
templ_7745c5c3_Err = MedicalService(d.ClientServiceName, d.ClientServiceDescription, d.ClientServiceIcon, d.ClientServiceLink).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"row responsive-lg d-none d-lg-block\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -140,7 +160,7 @@ func HeaderSection(title string, desc string) templ.Component {
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(title)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 46, Col: 46}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 56, Col: 46}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
@@ -153,7 +173,7 @@ func HeaderSection(title string, desc string) templ.Component {
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(desc)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 48, Col: 9}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 58, Col: 9}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil {
@@ -190,7 +210,7 @@ func Advantage(title string, desc string) templ.Component {
var templ_7745c5c3_Var11 string
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(title)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 63, Col: 51}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 73, Col: 51}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
if templ_7745c5c3_Err != nil {
@@ -203,7 +223,7 @@ func Advantage(title string, desc string) templ.Component {
var templ_7745c5c3_Var12 string
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(desc)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 65, Col: 11}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 75, Col: 11}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
if templ_7745c5c3_Err != nil {
@@ -267,7 +287,7 @@ func HeaderCard() templ.Component {
templ_7745c5c3_Var14 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<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\"><!-- style=\"\r\n flex: 2;\r\n margin: 10px;\r\n display: flex;\r\n align-items: center;\r\n \" --><div class=\"d-flex m-1o align-items-center\"><img src=\"../asset-corporate-portal/media/landingpage/jumbotron_left.png\" class=\"img-fluid w-100 h-100 img-header\" alt=\"Your Brand\"></div></div></div></div></div>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"jumbotron bg-primary d-xs-block d-sm-block d-md-none\"><div class=\"container\"><div class=\"row\"><div class=\"col-sm-12 mb-3 d-flex justify-content-sm-end\"><div class=\"d-flex m-1 align-items-center\"><img src=\"../asset-corporate-portal/media/landingpage/jumbotron_left.png\" class=\"img-fluid w-100 h-100 img-header\" alt=\"Your Brand\"></div></div><div class=\"col-sm-12 d-flex flex-column\"><div class=\"mb-3\"><h1 class=\"title-jumbotron-sm 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></div></div><div class=\"jumbotron bg-primary d-none d-md-block d-lg-none\"><div class=\"container\"><div class=\"row\"><div class=\"col-md-12 mb-3 d-flex justify-content-md-end\"><div class=\"d-flex m-1 align-items-center\"><img src=\"../asset-corporate-portal/media/landingpage/jumbotron_left.png\" class=\"img-fluid w-100 h-100 img-header\" alt=\"Your Brand\"></div></div><div class=\"col-md-12 d-flex flex-column\"><div class=\"mb-3\"><h1 class=\"title-jumbotron-md text-white\">Invest in Your Well-being with Our Comprehensive Medical\r Check-Up\r</h1><p class=\"sub-title-jumbotron-md 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></div></div><div class=\"jumbotron bg-primary d-none d-lg-block\"><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\"><!-- style=\"\r\n flex: 2;\r\n margin: 10px;\r\n display: flex;\r\n align-items: center;\r\n \" --><div class=\"d-flex m-1o align-items-center\"><img src=\"../asset-corporate-portal/media/landingpage/jumbotron_left.png\" class=\"img-fluid w-100 h-100 img-header\" alt=\"Your Brand\"></div></div></div></div></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -298,7 +318,7 @@ func Promotion(prm services.Promotion) templ.Component {
var templ_7745c5c3_Var16 string
templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(prm.PromotionAsset)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 133, Col: 27}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 213, Col: 27}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
if templ_7745c5c3_Err != nil {
@@ -328,7 +348,27 @@ func ListPromotion(prm []services.Promotion) templ.Component {
templ_7745c5c3_Var17 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row responsive-lg d-none d-lg-block d-xl-block\">")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row responsive-sm d-xs-block d-sm-block d-md-none\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
for _, d := range prm {
templ_7745c5c3_Err = Promotion(d).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"row responsive-md d-none d-md-block d-lg-none\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
for _, d := range prm {
templ_7745c5c3_Err = Promotion(d).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"row responsive-lg d-none d-lg-block d-xl-block\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}