footer + responsive layout

This commit is contained in:
2024-05-02 16:58:26 +07:00
parent df96880e76
commit 3baa3a2cac
4 changed files with 384 additions and 53 deletions

View File

@@ -1,58 +1,118 @@
package landingpage
templ FooterSection() {
import "github.com/emarifer/go-templ-project-structure/services"
templ FooterContact() {
<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">
// { alamat }
// </p>
<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">
// for _, d := range phone {
// <p class="footer-sub-title text-grey">{ d }</p>
// }
<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>
}
templ FooterNav(title string, data []services.FooterSubNav) {
<div class="col-md col-lg">
<h4 class="footer-title text-white">{ title }</h4>
for _, d := range data {
<div>
<a class="footer-sub-title text-grey" href={ templ.SafeURL(d.FootSubNavLink) }>{ d.FootSubNavTitle }</a>
</div>
}
</div>
}
templ FooterSection(navlist []services.FooterNav) {
<footer class="wrapper-custom bg-black pb-25 pt-25 mt-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>
// HP
<div class="d-xs-block d-sm-block d-md-none">
<div class="row mb-5">
<div class="col-md col-lg">
<img
src="asset-corporate-portal/media/landingpage/logo.png"
class="logo-footer"
width="126"
height="40"
alt="Your Brand"
/>
@FooterContact()
</div>
<div class="mt-5">
for _, d := range navlist {
@FooterNav(d.FooterNavTitle, d.FooteSubNav)
}
</div>
</div>
</div>
// End HP
// Tablet
<div class="d-none d-md-block d-lg-none">
<div class="row mb-5">
<div class="col-md col-lg">
<img
src="asset-corporate-portal/media/landingpage/logo.png"
class="logo-footer"
width="126"
height="40"
alt="Your Brand"
/>
@FooterContact()
</div>
<div class="col-md col-lg">
for _, d := range navlist {
@FooterNav(d.FooterNavTitle, d.FooteSubNav)
}
</div>
</div>
</div>
// End Tablet
// Dekstop
<div class="d-none d-lg-block">
<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"
/>
@FooterContact()
</div>
for _, d := range navlist {
@FooterNav(d.FooterNavTitle, d.FooteSubNav)
}
</div>
</div>
// End Dekstop
<div class="garis bg-grey"></div>
<div class="row mt-4">
<div class="col-md-6">
<p class="footer-sub-title text-grey">

View File

@@ -0,0 +1,184 @@
// 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/services"
func FooterContact() 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 = templ_7745c5c3_Buffer.WriteString("<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\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>")
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 FooterNav(title string, data []services.FooterSubNav) 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=\"col-md col-lg\"><h4 class=\"footer-title text-white\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(title)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\footer.templ`, Line: 40, Col: 51}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h4>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
for _, d := range data {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div><a class=\"footer-sub-title text-grey\" href=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var4 templ.SafeURL = templ.SafeURL(d.FootSubNavLink)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var4)))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(d.FootSubNavTitle)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\footer.templ`, Line: 43, Col: 114}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a></div>")
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
})
}
func FooterSection(navlist []services.FooterNav) 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("<footer class=\"wrapper-custom bg-black pb-25 pt-25 mt-25\"><div class=\"d-xs-block d-sm-block d-md-none\"><div class=\"row mb-5\"><div class=\"col-md col-lg\"><img src=\"asset-corporate-portal/media/landingpage/logo.png\" class=\"logo-footer\" width=\"126\" height=\"40\" alt=\"Your Brand\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = FooterContact().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"mt-5\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
for _, d := range navlist {
templ_7745c5c3_Err = FooterNav(d.FooterNavTitle, d.FooteSubNav).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div><div class=\"d-none d-md-block d-lg-none\"><div class=\"row mb-5\"><div class=\"col-md col-lg\"><img src=\"asset-corporate-portal/media/landingpage/logo.png\" class=\"logo-footer\" width=\"126\" height=\"40\" alt=\"Your Brand\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = FooterContact().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col-md col-lg\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
for _, d := range navlist {
templ_7745c5c3_Err = FooterNav(d.FooterNavTitle, d.FooteSubNav).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div><div class=\"d-none d-lg-block\"><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\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = FooterContact().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
}
for _, d := range navlist {
templ_7745c5c3_Err = FooterNav(d.FooterNavTitle, d.FooteSubNav).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</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
})
}