Landing Page SaeGreen: Preview dan Kode Siap Tempel

SaeGreen / Landing pages

Dari blog menjadi halaman penawaran. Pilih layout Produk, Jasa, atau Portofolio, lihat preview-nya, lalu salin kode lengkap ke Halaman Blogger.

3 layout halamanHTML + CSS dalam satu kodeTanpa JavaScript tambahan

Cara memasang

Buat Halaman baruBuka Blogger → Halaman → Halaman Baru. Isi judul yang sesuai.
Pilih Tampilan HTMLSalin seluruh kode salah satu layout, termasuk bagian style. Tempel sebagai isi halaman.
Ganti isi penawaranEdit judul, teks, paket, harga, karya, dan tautan tombol. Cari bagian sglp-order untuk mengganti area ajakan terakhir.
Pratinjau dan terbitkanPeriksa tampilan HP, tautan, dan informasi paket sebelum dipublikasikan.

Preview dan transaksiHarga serta portofolio pada demo bersifat ilustratif. Tombol paket demo menuju bagian penjelasan; tidak ada checkout atau pembayaran aktif. Untuk penjualan, ganti href tombol dengan URL produk/checkout dari store Anda. Login, pembayaran, pesanan, unduhan, dan lisensi memerlukan backend store; HTML ini tidak membuat sistem tersebut.

Landing page Produk

Hero produk, fitur, showcase, tiga paket harga, FAQ, dan ajakan pembelian.

Buka preview produk

Tampilkan kode lengkap produk

Tekan Copy pada blok berikut untuk menyalin seluruh HTML dan CSS.

<!-- SaeGreen landing page: paste all of this into Blogger Pages / HTML view. -->
<style>
/* SaeGreen landing pages: scoped, paste-ready, no JavaScript dependency. */
body:has(.sg-landing) .sg-post-head,body:has(.sg-landing) .sg-post-cover,body:has(.sg-landing) #sg-auto-toc,body:has(.sg-landing) .sg-post-tags,body:has(.sg-landing) .sg-post-nav,body:has(.sg-landing) .sg-comments,body:has(.sg-landing) .sg-popular,body:has(.sg-landing) .sg-newsletter,body:has(.sg-landing) .sg-progress{display:none!important}
body:has(.sg-landing) .sg-prose-wrap{width:100%;max-width:none;padding:0;margin:0}body:has(.sg-landing) .sg-single{margin:0}body:has(.sg-landing) .sg-readbar{display:none!important}body:has(.sg-landing) .sg-header.reading .sg-actions{display:flex}body:has(.sg-landing) .sg-header.reading .sg-navigation{display:flex}
@media(min-width:981px){body:has(.sg-landing) .sg-header.reading .sg-nav{display:flex}}
.sg-landing{--lp-paper:var(--paper,#fff);--lp-ink:var(--ink,#183b2a);--lp-muted:var(--muted,#64736b);--lp-line:var(--line,#dae8de);--lp-soft:var(--mint,#eef9f1);--lp-green:#258e46;--lp-deep:#173f2c;color:var(--lp-ink);background:var(--lp-paper);font:16px/1.65 'Google Sans',Arial,sans-serif;overflow:clip;isolation:isolate}
.sg-landing *,.sg-landing *:before,.sg-landing *:after{box-sizing:border-box}.sg-landing :is(h1,h2,h3,h4,p,figure,ul,ol){margin:0;padding:0;border:0}.sg-landing :is(h1,h2,h3,h4){color:var(--lp-ink);font-weight:600;letter-spacing:-.035em;line-height:1.14}.sg-landing h1{font-size:clamp(34px,4.6vw,62px);max-width:680px}.sg-landing h2{font-size:clamp(28px,3.2vw,42px)}.sg-landing h3{font-size:22px}.sg-landing p{color:var(--lp-muted)}.sg-landing a{color:inherit;text-decoration:none}.sg-landing img{display:block;width:100%;height:auto;border-radius:0;cursor:auto}.sg-landing svg{width:22px;height:22px;flex:none}.sg-landing :is(a,button,label,summary){-webkit-tap-highlight-color:transparent}.sg-landing :is(a,button,summary):focus-visible{outline:3px solid #4285f4;outline-offset:4px}.sg-landing [id]{scroll-margin-top:150px}.sg-landing .sglp-wrap{width:min(1160px,100%);padding-inline:32px;margin-inline:auto}.sg-landing .sglp-section{padding-block:82px}.sg-landing .sglp-soft{background:var(--lp-soft)}.sg-landing .sglp-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:32px}.sg-landing .sglp-section-head>div{max-width:640px}.sg-landing .sglp-section-head p{margin-top:14px;max-width:600px}
.sg-landing .sglp-kicker{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--lp-green);font-weight:700;margin-bottom:18px}.sg-landing .sglp-kicker>i{width:7px;height:7px;border-radius:50%;background:var(--lp-green)}.sg-landing .sglp-demo{border-bottom:1px solid var(--lp-line);padding:14px 0;font-size:12px;color:var(--lp-muted)}.sg-landing .sglp-demo-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.sg-landing .sglp-demo-nav{display:flex;gap:5px;flex-wrap:wrap}.sg-landing .sglp-demo-nav a{padding:6px 11px;border-radius:20px;min-height:32px}.sg-landing .sglp-demo-nav a[aria-current=page]{background:var(--lp-soft);color:var(--lp-green);font-weight:600}.sg-landing .sglp-hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:54px;padding-block:76px 70px}.sg-landing .sglp-hero-copy>p{font-size:18px;max-width:530px;margin-top:22px}.sg-landing .sglp-hero h1 em{color:var(--lp-green);font-style:normal}.sg-landing .sglp-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.sg-landing .sglp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 23px;min-height:48px;border:1px solid var(--lp-green);border-radius:9px;background:var(--lp-green);color:#fff;font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;transition:background .18s,box-shadow .18s}.sg-landing .sglp-btn:hover{background:#1b7436;box-shadow:0 4px 12px #173f2c18}.sg-landing .sglp-btn-ghost{background:transparent;color:var(--lp-green);border-color:var(--lp-line)}.sg-landing .sglp-btn-ghost:hover{background:var(--lp-soft)}.sg-landing .sglp-micro{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:12px;color:var(--lp-muted)}.sg-landing .sglp-micro span{display:flex;align-items:center;gap:5px}.sg-landing .sglp-micro svg{width:15px;height:15px;color:var(--lp-green)}
.sg-landing .sglp-stage{padding:30px;background:linear-gradient(135deg,#e2f3df,#f2f8e9);border:1px solid #d6e8d2;border-radius:28px;position:relative}.sg-landing .sglp-browser{border:1px solid #d3e4d8;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 20px 50px #214d2b15;color:#183b2a}.sg-landing .sglp-browser-bar{display:flex;align-items:center;gap:5px;padding:14px 16px;border-bottom:1px solid #e6eee8;font-size:9px;color:#7d8a80}.sg-landing .sglp-browser-bar i{width:6px;height:6px;border-radius:50%;background:#aac8b2}.sg-landing .sglp-browser-bar span{margin-left:12px}.sg-landing .sglp-mock-content{padding:22px}.sg-landing .sglp-mock-logo{display:flex;align-items:center;gap:5px;font-weight:700;font-size:14px;margin-bottom:16px}.sg-landing .sglp-mock-feature{padding:26px 22px;background:#1e5235;color:#fff;border-radius:9px;min-height:153px;display:flex;flex-direction:column;justify-content:center}.sg-landing .sglp-mock-feature small{font-size:9px;color:#bae3c7;letter-spacing:.12em}.sg-landing .sglp-mock-feature b{font-size:29px;line-height:1.16;letter-spacing:-.03em;margin-top:12px;max-width:260px}.sg-landing .sglp-mock-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.sg-landing .sglp-mock-card{background:#eff7f1;padding:10px;border-radius:6px;min-height:96px}.sg-landing .sglp-mock-card div{height:40px;background:#c5e5cf;border-radius:4px}.sg-landing .sglp-mock-card i{height:4px;display:block;background:#a1c4ab;width:80%;margin-top:10px;border-radius:3px}.sg-landing .sglp-mock-card i:last-child{width:55%;margin-top:5px}.sg-landing .sglp-stage-tag{position:relative;margin:18px auto -8px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:600;color:#31724b}.sg-landing .sglp-stage-tag svg{width:16px;height:16px}
.sg-landing .sglp-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:28px 0;border-top:1px solid var(--lp-line);border-bottom:1px solid var(--lp-line)}.sg-landing .sglp-benefit{display:flex;gap:14px;align-items:center}.sg-landing .sglp-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--lp-soft);color:var(--lp-green);flex:none}.sg-landing .sglp-benefit b{display:block;font-size:14px}.sg-landing .sglp-benefit small{font-size:12px;color:var(--lp-muted)}.sg-landing .sglp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.sg-landing .sglp-card{padding:28px;border:1px solid var(--lp-line);border-radius:16px;background:var(--lp-paper);min-width:0}.sg-landing .sglp-card h3{margin:20px 0 12px}.sg-landing .sglp-card p{font-size:14px}.sg-landing .sglp-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;background:var(--lp-soft);color:var(--lp-green);font-size:11px;font-weight:600;letter-spacing:.02em}.sg-landing .sglp-split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px}.sg-landing .sglp-split h2{margin-bottom:20px}.sg-landing .sglp-split p+p{margin-top:16px}.sg-landing .sglp-stack{display:grid;gap:14px}.sg-landing .sglp-stack-item{display:flex;gap:18px;padding:22px;border:1px solid var(--lp-line);border-radius:14px;background:var(--lp-paper)}.sg-landing .sglp-stack-item strong{font-size:15px;display:block;margin-bottom:6px}.sg-landing .sglp-stack-item p{font-size:13px}.sg-landing .sglp-stack-item>span{color:var(--lp-green);font-size:13px;font-weight:600;flex:none}
.sg-landing .sglp-pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}.sg-landing .sglp-price-card{position:relative;display:flex;flex-direction:column;padding:30px;border:1px solid var(--lp-line);border-radius:18px;background:var(--lp-paper)}.sg-landing .sglp-price-card.sglp-featured{border:2px solid var(--lp-green);box-shadow:0 12px 32px #1d633c0a}.sg-landing .sglp-featured>.sglp-badge{align-self:flex-start;margin-bottom:16px}.sg-landing .sglp-price-card h3{font-size:24px;margin:0 0 9px}.sg-landing .sglp-price-card>p{font-size:13px;min-height:44px}.sg-landing .sglp-price{font-size:36px;font-weight:600;letter-spacing:-.04em;margin-top:24px;line-height:1.2}.sg-landing .sglp-price small{font-size:12px;font-weight:400;letter-spacing:0;color:var(--lp-muted);display:block;margin-top:8px}.sg-landing .sglp-checks{list-style:none;padding:22px 0!important;margin:20px 0 24px!important;border-top:1px solid var(--lp-line);display:grid;gap:12px}.sg-landing .sglp-checks li{display:flex;align-items:flex-start;gap:10px;font-size:13px;padding:0;margin:0;list-style:none}.sg-landing .sglp-checks svg{color:var(--lp-green);width:17px;height:17px;margin-top:2px}.sg-landing .sglp-price-card>.sglp-btn{margin-top:auto}.sg-landing .sglp-price-note{margin-top:20px;font-size:12px;text-align:center}.sg-landing .sglp-faq{display:grid;gap:12px}.sg-landing .sglp-faq details{border:1px solid var(--lp-line);border-radius:12px;background:var(--lp-paper)}.sg-landing .sglp-faq summary{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 22px;cursor:pointer;font-size:15px;font-weight:500;list-style:none}.sg-landing .sglp-faq summary::-webkit-details-marker{display:none}.sg-landing .sglp-faq summary svg{width:18px;height:18px;transition:transform .18s}.sg-landing .sglp-faq details[open] summary svg{transform:rotate(45deg)}.sg-landing .sglp-faq details>div{padding:0 22px 22px;color:var(--lp-muted);font-size:14px}.sg-landing .sglp-cta{padding:58px;border-radius:24px;background:#193f2b;color:#fff;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:36px}.sg-landing .sglp-cta h2{color:#fff}.sg-landing .sglp-cta p{color:#c4d9cb;margin-top:18px;font-size:14px}.sg-landing .sglp-cta .sglp-actions{margin-top:0;justify-content:flex-end}.sg-landing .sglp-cta .sglp-btn{background:#d5f1ce;color:#193f2b;border-color:#d5f1ce}.sg-landing .sglp-cta .sglp-btn-ghost{background:transparent;color:#fff;border-color:#72957f}.sg-landing .sglp-page-end{font-size:12px;text-align:center;padding:0 24px 38px;color:var(--lp-muted)}
.sg-landing .sglp-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.sg-landing .sglp-project{border:1px solid var(--lp-line);border-radius:16px;overflow:hidden;background:var(--lp-paper);min-width:0}.sg-landing .sglp-project-art{padding:24px;background:#e2f1e6;min-height:210px;display:grid;align-items:center}.sg-landing .sglp-project[data-category=business] .sglp-project-art{background:#f3eede}.sg-landing .sglp-project[data-category=editorial] .sglp-project-art{background:#e2edf1}.sg-landing .sglp-project-art .sglp-browser{border-radius:8px;box-shadow:0 12px 20px #153b2510}.sg-landing .sglp-project-art .sglp-mock-content{padding:12px}.sg-landing .sglp-project-art .sglp-mock-feature{min-height:80px;padding:16px}.sg-landing .sglp-project-art .sglp-mock-feature b{font-size:20px}.sg-landing .sglp-project-art .sglp-mock-card{min-height:55px;padding:6px}.sg-landing .sglp-project-art .sglp-mock-card div{height:25px}.sg-landing .sglp-project-copy{padding:23px}.sg-landing .sglp-project-copy h3{font-size:21px;margin:14px 0 10px}.sg-landing .sglp-project-copy p{font-size:13px}.sg-landing .sglp-project details{margin-top:18px;font-size:13px}.sg-landing .sglp-project summary{color:var(--lp-green);cursor:pointer;min-height:36px;display:flex;align-items:center;gap:8px}.sg-landing .sglp-project details p{margin-top:10px}.sg-landing .sglp-project details a{display:inline-flex;margin-top:14px;min-height:36px;align-items:center;color:var(--lp-green);font-weight:600}
.sg-landing .sglp-filter-input{position:absolute;opacity:0;width:1px;height:1px;clip-path:inset(50%)}.sg-landing .sglp-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}.sg-landing .sglp-filters label{cursor:pointer;display:inline-flex;align-items:center;min-height:42px;padding:8px 18px;border:1px solid var(--lp-line);border-radius:24px;font-size:13px;color:var(--lp-muted);background:var(--lp-paper)}.sg-landing #sglp-all:checked~.sglp-filters label[for=sglp-all],.sg-landing #sglp-editorial:checked~.sglp-filters label[for=sglp-editorial],.sg-landing #sglp-business:checked~.sglp-filters label[for=sglp-business],.sg-landing #sglp-digital:checked~.sglp-filters label[for=sglp-digital]{background:var(--lp-deep);border-color:var(--lp-deep);color:#fff}.sg-landing .sglp-filter-input:focus-visible~.sglp-filters{outline:2px solid #4285f4;outline-offset:5px}.sg-landing #sglp-editorial:checked~.sglp-projects .sglp-project:not([data-category=editorial]),.sg-landing #sglp-business:checked~.sglp-projects .sglp-project:not([data-category=business]),.sg-landing #sglp-digital:checked~.sglp-projects .sglp-project:not([data-category=digital]){display:none}
html.sg-dark .sg-landing{--lp-green:#8fd99d;--lp-deep:#28643e}html.sg-dark .sg-landing .sglp-btn{color:#132f20;background:#8fd99d}html.sg-dark .sg-landing .sglp-btn-ghost{background:transparent;color:#8fd99d}html.sg-dark .sg-landing .sglp-cta .sglp-btn-ghost{color:#fff}html.sg-dark .sg-landing .sglp-stage{background:linear-gradient(135deg,#24452e,#263b29);border-color:#3f6449}html.sg-dark .sg-landing .sglp-stage-tag{color:#b2ddbd}
@media(max-width:900px){.sg-landing .sglp-hero{gap:32px}.sg-landing .sglp-stage{padding:22px}.sg-landing .sglp-grid,.sg-landing .sglp-pricing,.sg-landing .sglp-projects{gap:16px}.sg-landing .sglp-card,.sg-landing .sglp-price-card{padding:22px}.sg-landing .sglp-price{font-size:30px}.sg-landing .sglp-split{gap:34px}.sg-landing .sglp-cta{padding:38px;gap:24px}}
@media(max-width:700px){.sg-landing{font-size:15px}.sg-landing .sglp-wrap{padding-inline:20px}.sg-landing .sglp-section{padding-block:56px}.sg-landing .sglp-demo-row{gap:8px}.sg-landing .sglp-demo{padding-block:10px}.sg-landing .sglp-demo-nav a{padding:4px 10px}.sg-landing .sglp-hero{grid-template-columns:1fr;gap:32px;padding-block:46px}.sg-landing .sglp-hero-copy>p{font-size:16px;margin-top:18px}.sg-landing .sglp-actions{gap:10px;margin-top:24px}.sg-landing .sglp-btn{padding:12px 18px;font-size:13px}.sg-landing .sglp-micro{gap:12px;font-size:11px}.sg-landing .sglp-stage{border-radius:20px;padding:22px}.sg-landing .sglp-mock-content{padding:18px}.sg-landing .sglp-mock-feature{min-height:140px;padding:22px 18px}.sg-landing .sglp-mock-feature b{font-size:26px}.sg-landing .sglp-benefits{grid-template-columns:1fr;gap:20px;padding-block:26px}.sg-landing .sglp-section-head{display:block;margin-bottom:26px}.sg-landing .sglp-section-head>.sglp-btn{margin-top:20px}.sg-landing .sglp-grid,.sg-landing .sglp-pricing,.sg-landing .sglp-projects,.sg-landing .sglp-split,.sg-landing .sglp-cta{grid-template-columns:1fr}.sg-landing .sglp-split{gap:30px}.sg-landing .sglp-price-card{padding:28px}.sg-landing .sglp-price-card>p{min-height:0}.sg-landing .sglp-price{font-size:36px}.sg-landing .sglp-cta{padding:32px 26px;gap:26px}.sg-landing .sglp-cta .sglp-actions{justify-content:flex-start;flex-direction:column}.sg-landing .sglp-project-art{min-height:240px;padding:28px}.sg-landing .sglp-faq summary{padding:18px;font-size:14px}.sg-landing .sglp-faq details>div{padding:0 18px 18px}.sg-landing h1{font-size:36px}}
@media(max-width:360px){.sg-landing .sglp-wrap{padding-inline:16px}.sg-landing h1{font-size:32px}.sg-landing .sglp-stage{padding:16px}.sg-landing .sglp-actions>.sglp-btn{flex:1 1 140px}.sg-landing .sglp-mock-feature b{font-size:24px}}
@media(prefers-reduced-motion:reduce){.sg-landing *{scroll-behavior:auto!important;transition:none!important}}

</style>
<div class="sg-landing" data-sg-landing="produk"><div class="sglp-demo"><div class="sglp-wrap sglp-demo-row"><span>SAEGREEN / LANDING PAGE DEMO</span><nav class="sglp-demo-nav" aria-label="Pilihan demo landing page"><a href="https://saegreen.temablogger.com/p/landing-page-produk.html" aria-current="page">Produk</a><a href="https://saegreen.temablogger.com/p/landing-page-jasa.html">Jasa</a><a href="https://saegreen.temablogger.com/p/landing-page-portofolio.html">Portofolio</a></nav></div></div><div class="sglp-wrap"><section class="sglp-hero"><div class="sglp-hero-copy"><div class="sglp-kicker"><i></i>Blogger template / SaeGreen</div><h1>Ide Anda punya cerita.<br/><em>Beri ruang yang tepat.</em></h1><p>Template Blogger dengan navigasi yang nyaman, artikel yang rapi, dan halaman penawaran yang terasa menyatu. Mulai dari cerita, tumbuh menjadi sesuatu yang lebih.</p><div class="sglp-actions"><a class="sglp-btn" href="#sglp-pricing">Jelajahi paket<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a><a class="sglp-btn sglp-btn-ghost" href="#sglp-features">Lihat fitur<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></div><div class="sglp-micro"><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg>Desain responsif</span><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg>Satu gaya dengan SaeGreen</span></div></div><div class="sglp-stage"><div class="sglp-browser" aria-label="Ilustrasi tampilan situs"><div class="sglp-browser-bar"><i></i><i></i><i></i><span>yourwebsite.com</span></div><div class="sglp-mock-content"><div class="sglp-mock-logo"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>SaeGreen</div><div class="sglp-mock-feature" style="background:#1e5235"><small>MADE FOR YOUR NEXT CHAPTER</small><b>A little greener.<br/>A lot more you.</b></div><div class="sglp-mock-grid"><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div></div></div></div><div class="sglp-stage-tag"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>A fresh start for your next idea.</div></div></section></div><div class="sglp-wrap"><div class="sglp-benefits"><div class="sglp-benefit"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h18v13H3ZM8 21h8M12 17v4"/></svg></span><div><b>Nyaman di berbagai layar</b><small>Dari layar HP hingga desktop.</small></div></div><div class="sglp-benefit"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"/></svg></span><div><b>Komponen yang seragam</b><small>Blog, produk, dan halaman penawaran.</small></div></div><div class="sglp-benefit"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m8 6-6 6 6 6m8-12 6 6-6 6M14 3l-4 18"/></svg></span><div><b>Konten tetap milik Anda</b><small>Kelola langsung melalui Blogger.</small></div></div></div></div><section class="sglp-section" id="sglp-features"><div class="sglp-wrap"><div class="sglp-section-head"><div><div class="sglp-kicker"><i></i>Didesain untuk berkembang</div><h2>Sederhana di depan.<br/>Lengkap saat dibutuhkan.</h2><p>Bangun pengalaman membaca yang baik, lalu arahkan pengunjung ke langkah berikutnya.</p></div></div><div class="sglp-grid"><article class="sglp-card"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg></span><h3>Identitas yang segar</h3><p>Warna hijau, ruang lega, dan susunan konten yang membuat brand Anda mudah dikenali.</p></article><article class="sglp-card"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h18v13H3ZM8 21h8M12 17v4"/></svg></span><h3>Navigasi yang nyaman</h3><p>Menu responsif dan pencarian membantu pembaca menemukan isi yang mereka butuhkan.</p></article><article class="sglp-card"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m8 6-6 6 6 6m8-12 6 6-6 6M14 3l-4 18"/></svg></span><h3>Menulis lebih leluasa</h3><p>Gunakan komponen artikel untuk tutorial, dokumentasi, ulasan, atau cerita visual.</p></article><article class="sglp-card"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"/></svg></span><h3>Halaman penawaran</h3><p>Tampilkan produk, jasa, harga, dan portofolio dengan bahasa visual yang sama.</p></article><article class="sglp-card"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3 8 3v6c0 5-8 9-8 9s-8-4-8-9V6Zm-4 9 3 3 5-6"/></svg></span><h3>Arah pembelian yang jelas</h3><p>Tombol penawaran dapat diarahkan ke store atau halaman checkout pilihan Anda.</p></article><article class="sglp-card"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 3 7 7 3-7 3-3 7-3-7-7-3 7-3Z"/></svg></span><h3>Fokus pada isi</h3><p>Desain yang tenang memberi ruang bagi judul, gambar, dan gagasan Anda.</p></article></div></div></section><section class="sglp-section sglp-soft" id="sglp-showcase"><div class="sglp-wrap"><div class="sglp-section-head"><div><div class="sglp-kicker"><i></i>One template, more possibilities</div><h2>Bukan hanya tempat menulis.</h2><p>Pakai satu identitas visual untuk memperkenalkan usaha, menampilkan karya, dan membagikan pengetahuan.</p></div></div><div class="sglp-projects"><article class="sglp-project" data-category="editorial"><div class="sglp-project-art"><div class="sglp-browser" aria-label="Ilustrasi tampilan situs"><div class="sglp-browser-bar"><i></i><i></i><i></i><span>yourwebsite.com</span></div><div class="sglp-mock-content"><div class="sglp-mock-logo"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>Journal</div><div class="sglp-mock-feature" style="background:#294e61"><small>MADE FOR YOUR NEXT CHAPTER</small><b>Editorial<br/>Journal</b></div><div class="sglp-mock-grid"><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div></div></div></div></div><div class="sglp-project-copy"><span class="sglp-badge">Editorial / konsep demo</span><h3>Editorial Journal</h3><p>Ruang untuk cerita yang layak dibaca.</p><details><summary>Lihat detail <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></summary><p>Konsep showcase untuk menunjukkan struktur dan arah visual. Ganti ilustrasi, nama proyek, lingkup pekerjaan, dan hasilnya dengan karya Anda sendiri.</p><a href="#sglp-order">Diskusikan proyek serupa <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></details></div></article><article class="sglp-project" data-category="business"><div class="sglp-project-art"><div class="sglp-browser" aria-label="Ilustrasi tampilan situs"><div class="sglp-browser-bar"><i></i><i></i><i></i><span>yourwebsite.com</span></div><div class="sglp-mock-content"><div class="sglp-mock-logo"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>Studio</div><div class="sglp-mock-feature" style="background:#766342"><small>MADE FOR YOUR NEXT CHAPTER</small><b>Studio<br/>& Co.</b></div><div class="sglp-mock-grid"><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div></div></div></div></div><div class="sglp-project-copy"><span class="sglp-badge">Business / konsep demo</span><h3>Studio & Co.</h3><p>Halaman usaha dengan penawaran yang jelas.</p><details><summary>Lihat detail <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></summary><p>Konsep showcase untuk menunjukkan struktur dan arah visual. Ganti ilustrasi, nama proyek, lingkup pekerjaan, dan hasilnya dengan karya Anda sendiri.</p><a href="#sglp-order">Diskusikan proyek serupa <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></details></div></article><article class="sglp-project" data-category="digital"><div class="sglp-project-art"><div class="sglp-browser" aria-label="Ilustrasi tampilan situs"><div class="sglp-browser-bar"><i></i><i></i><i></i><span>yourwebsite.com</span></div><div class="sglp-mock-content"><div class="sglp-mock-logo"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>Digital</div><div class="sglp-mock-feature" style="background:#245e3d"><small>MADE FOR YOUR NEXT CHAPTER</small><b>Digital<br/>Product</b></div><div class="sglp-mock-grid"><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div></div></div></div></div><div class="sglp-project-copy"><span class="sglp-badge">Digital / konsep demo</span><h3>Digital Product</h3><p>Satu tempat untuk memperkenalkan produk.</p><details><summary>Lihat detail <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></summary><p>Konsep showcase untuk menunjukkan struktur dan arah visual. Ganti ilustrasi, nama proyek, lingkup pekerjaan, dan hasilnya dengan karya Anda sendiri.</p><a href="#sglp-order">Diskusikan proyek serupa <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></details></div></article></div></div></section><section class="sglp-section" id="sglp-pricing"><div class="sglp-wrap"><div class="sglp-section-head"><div><div class="sglp-kicker"><i></i>Pricing / contoh paket</div><h2>Pilih ruang untuk<br/>langkah berikutnya.</h2><p>Struktur harga berikut adalah contoh tampilan. Sesuaikan paket dengan produk dan ketentuan penjualan Anda.</p></div></div><div class="sglp-pricing"><article class="sglp-price-card"><h3>Personal</h3><p>Untuk memulai satu blog atau proyek pribadi.</p><div class="sglp-price">Rp149.000<small>sekali bayar / harga contoh</small></div><ul class="sglp-checks"><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Contoh lisensi satu situs</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Berkas template XML</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Panduan pemasangan</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Komponen artikel</span></li></ul><a class="sglp-btn sglp-btn-ghost" href="#sglp-order">Pilih Personal<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></article><article class="sglp-price-card sglp-featured"><span class="sglp-badge">Paket unggulan</span><h3>Creator</h3><p>Untuk kreator yang ingin membangun penawaran lengkap.</p><div class="sglp-price">Rp249.000<small>sekali bayar / harga contoh</small></div><ul class="sglp-checks"><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Semua contoh fasilitas Personal</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Landing page produk dan jasa</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Showcase portofolio</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Contoh dukungan pemasangan</span></li></ul><a class="sglp-btn" href="#sglp-order">Pilih Creator<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></article><article class="sglp-price-card"><h3>Studio</h3><p>Untuk kebutuhan beberapa proyek yang terencana.</p><div class="sglp-price">Rp499.000<small>sekali bayar / harga contoh</small></div><ul class="sglp-checks"><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Semua contoh fasilitas Creator</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Contoh penggunaan beberapa situs</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Panduan alur proyek</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Lingkup dukungan disepakati</span></li></ul><a class="sglp-btn sglp-btn-ghost" href="#sglp-order">Pilih Studio<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></article></div><p class="sglp-price-note">Demo layout pricing. Harga, fasilitas, dan ketentuan di atas adalah contoh; belum merupakan penawaran transaksi.</p></div></section><section class="sglp-section sglp-soft"><div class="sglp-wrap"><div class="sglp-split"><div><div class="sglp-section-head"><div><div class="sglp-kicker"><i></i>Pertanyaan umum</div><h2>Sebelum Anda<br/>memulai.</h2><p>Informasi singkat tentang cara memakai layout halaman ini.</p></div></div></div><div class="sglp-faq"><details><summary>Apakah landing page dibuat melalui Halaman Blogger?<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></summary><div>Ya. Kode halaman berisi HTML dan CSS yang bisa ditempel melalui Tampilan HTML di editor Halaman Blogger.</div></details><details><summary>Apakah pembayaran langsung aktif?<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></summary><div>Belum. Hubungkan tombol paket ke halaman produk atau checkout store Anda sebelum menerima pesanan.</div></details><details><summary>Apakah harga pada demo merupakan harga SaeGreen?<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></summary><div>Tidak. Angka dan fasilitas di demo ini hanya contoh untuk memperlihatkan susunan pricing.</div></details><details><summary>Apakah tampilannya mengikuti mode gelap?<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></summary><div>Pada SaeGreen, warna halaman mengikuti pengaturan mode terang dan gelap tema.</div></details></div></div></div></section><section class="sglp-section" id="sglp-order"><div class="sglp-wrap"><div class="sglp-cta"><div><h2>Siap menumbuhkan<br/>ide berikutnya?</h2><p>Ini preview landing page. Tombol paket belum memproses pesanan atau pembayaran. Gunakan halaman ini sebagai contoh untuk penawaran produk atau jasa Anda.</p></div><div class="sglp-actions"><a class="sglp-btn" href="https://www.temablogger.com/">Jelajahi TemaBlogger<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a><a class="sglp-btn sglp-btn-ghost" href="https://saegreen.temablogger.com/2026/10/panduan-instalasi-pengaturan-saegreen.html">Lihat panduan SaeGreen<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></div></div></div></section><div class="sglp-page-end">SaeGreen landing page / contoh layout siap disesuaikan.</div></div>

Landing page Jasa

Penawaran layanan, proses kerja, contoh hasil, paket proyek, FAQ, dan ajakan konsultasi.

Buka preview jasa

Tampilkan kode lengkap jasa

Tekan Copy pada blok berikut untuk menyalin seluruh HTML dan CSS.

<!-- SaeGreen landing page: paste all of this into Blogger Pages / HTML view. -->
<style>
/* SaeGreen landing pages: scoped, paste-ready, no JavaScript dependency. */
body:has(.sg-landing) .sg-post-head,body:has(.sg-landing) .sg-post-cover,body:has(.sg-landing) #sg-auto-toc,body:has(.sg-landing) .sg-post-tags,body:has(.sg-landing) .sg-post-nav,body:has(.sg-landing) .sg-comments,body:has(.sg-landing) .sg-popular,body:has(.sg-landing) .sg-newsletter,body:has(.sg-landing) .sg-progress{display:none!important}
body:has(.sg-landing) .sg-prose-wrap{width:100%;max-width:none;padding:0;margin:0}body:has(.sg-landing) .sg-single{margin:0}body:has(.sg-landing) .sg-readbar{display:none!important}body:has(.sg-landing) .sg-header.reading .sg-actions{display:flex}body:has(.sg-landing) .sg-header.reading .sg-navigation{display:flex}
@media(min-width:981px){body:has(.sg-landing) .sg-header.reading .sg-nav{display:flex}}
.sg-landing{--lp-paper:var(--paper,#fff);--lp-ink:var(--ink,#183b2a);--lp-muted:var(--muted,#64736b);--lp-line:var(--line,#dae8de);--lp-soft:var(--mint,#eef9f1);--lp-green:#258e46;--lp-deep:#173f2c;color:var(--lp-ink);background:var(--lp-paper);font:16px/1.65 'Google Sans',Arial,sans-serif;overflow:clip;isolation:isolate}
.sg-landing *,.sg-landing *:before,.sg-landing *:after{box-sizing:border-box}.sg-landing :is(h1,h2,h3,h4,p,figure,ul,ol){margin:0;padding:0;border:0}.sg-landing :is(h1,h2,h3,h4){color:var(--lp-ink);font-weight:600;letter-spacing:-.035em;line-height:1.14}.sg-landing h1{font-size:clamp(34px,4.6vw,62px);max-width:680px}.sg-landing h2{font-size:clamp(28px,3.2vw,42px)}.sg-landing h3{font-size:22px}.sg-landing p{color:var(--lp-muted)}.sg-landing a{color:inherit;text-decoration:none}.sg-landing img{display:block;width:100%;height:auto;border-radius:0;cursor:auto}.sg-landing svg{width:22px;height:22px;flex:none}.sg-landing :is(a,button,label,summary){-webkit-tap-highlight-color:transparent}.sg-landing :is(a,button,summary):focus-visible{outline:3px solid #4285f4;outline-offset:4px}.sg-landing [id]{scroll-margin-top:150px}.sg-landing .sglp-wrap{width:min(1160px,100%);padding-inline:32px;margin-inline:auto}.sg-landing .sglp-section{padding-block:82px}.sg-landing .sglp-soft{background:var(--lp-soft)}.sg-landing .sglp-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:32px}.sg-landing .sglp-section-head>div{max-width:640px}.sg-landing .sglp-section-head p{margin-top:14px;max-width:600px}
.sg-landing .sglp-kicker{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--lp-green);font-weight:700;margin-bottom:18px}.sg-landing .sglp-kicker>i{width:7px;height:7px;border-radius:50%;background:var(--lp-green)}.sg-landing .sglp-demo{border-bottom:1px solid var(--lp-line);padding:14px 0;font-size:12px;color:var(--lp-muted)}.sg-landing .sglp-demo-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.sg-landing .sglp-demo-nav{display:flex;gap:5px;flex-wrap:wrap}.sg-landing .sglp-demo-nav a{padding:6px 11px;border-radius:20px;min-height:32px}.sg-landing .sglp-demo-nav a[aria-current=page]{background:var(--lp-soft);color:var(--lp-green);font-weight:600}.sg-landing .sglp-hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:54px;padding-block:76px 70px}.sg-landing .sglp-hero-copy>p{font-size:18px;max-width:530px;margin-top:22px}.sg-landing .sglp-hero h1 em{color:var(--lp-green);font-style:normal}.sg-landing .sglp-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.sg-landing .sglp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 23px;min-height:48px;border:1px solid var(--lp-green);border-radius:9px;background:var(--lp-green);color:#fff;font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;transition:background .18s,box-shadow .18s}.sg-landing .sglp-btn:hover{background:#1b7436;box-shadow:0 4px 12px #173f2c18}.sg-landing .sglp-btn-ghost{background:transparent;color:var(--lp-green);border-color:var(--lp-line)}.sg-landing .sglp-btn-ghost:hover{background:var(--lp-soft)}.sg-landing .sglp-micro{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:12px;color:var(--lp-muted)}.sg-landing .sglp-micro span{display:flex;align-items:center;gap:5px}.sg-landing .sglp-micro svg{width:15px;height:15px;color:var(--lp-green)}
.sg-landing .sglp-stage{padding:30px;background:linear-gradient(135deg,#e2f3df,#f2f8e9);border:1px solid #d6e8d2;border-radius:28px;position:relative}.sg-landing .sglp-browser{border:1px solid #d3e4d8;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 20px 50px #214d2b15;color:#183b2a}.sg-landing .sglp-browser-bar{display:flex;align-items:center;gap:5px;padding:14px 16px;border-bottom:1px solid #e6eee8;font-size:9px;color:#7d8a80}.sg-landing .sglp-browser-bar i{width:6px;height:6px;border-radius:50%;background:#aac8b2}.sg-landing .sglp-browser-bar span{margin-left:12px}.sg-landing .sglp-mock-content{padding:22px}.sg-landing .sglp-mock-logo{display:flex;align-items:center;gap:5px;font-weight:700;font-size:14px;margin-bottom:16px}.sg-landing .sglp-mock-feature{padding:26px 22px;background:#1e5235;color:#fff;border-radius:9px;min-height:153px;display:flex;flex-direction:column;justify-content:center}.sg-landing .sglp-mock-feature small{font-size:9px;color:#bae3c7;letter-spacing:.12em}.sg-landing .sglp-mock-feature b{font-size:29px;line-height:1.16;letter-spacing:-.03em;margin-top:12px;max-width:260px}.sg-landing .sglp-mock-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.sg-landing .sglp-mock-card{background:#eff7f1;padding:10px;border-radius:6px;min-height:96px}.sg-landing .sglp-mock-card div{height:40px;background:#c5e5cf;border-radius:4px}.sg-landing .sglp-mock-card i{height:4px;display:block;background:#a1c4ab;width:80%;margin-top:10px;border-radius:3px}.sg-landing .sglp-mock-card i:last-child{width:55%;margin-top:5px}.sg-landing .sglp-stage-tag{position:relative;margin:18px auto -8px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:600;color:#31724b}.sg-landing .sglp-stage-tag svg{width:16px;height:16px}
.sg-landing .sglp-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:28px 0;border-top:1px solid var(--lp-line);border-bottom:1px solid var(--lp-line)}.sg-landing .sglp-benefit{display:flex;gap:14px;align-items:center}.sg-landing .sglp-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--lp-soft);color:var(--lp-green);flex:none}.sg-landing .sglp-benefit b{display:block;font-size:14px}.sg-landing .sglp-benefit small{font-size:12px;color:var(--lp-muted)}.sg-landing .sglp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.sg-landing .sglp-card{padding:28px;border:1px solid var(--lp-line);border-radius:16px;background:var(--lp-paper);min-width:0}.sg-landing .sglp-card h3{margin:20px 0 12px}.sg-landing .sglp-card p{font-size:14px}.sg-landing .sglp-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;background:var(--lp-soft);color:var(--lp-green);font-size:11px;font-weight:600;letter-spacing:.02em}.sg-landing .sglp-split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px}.sg-landing .sglp-split h2{margin-bottom:20px}.sg-landing .sglp-split p+p{margin-top:16px}.sg-landing .sglp-stack{display:grid;gap:14px}.sg-landing .sglp-stack-item{display:flex;gap:18px;padding:22px;border:1px solid var(--lp-line);border-radius:14px;background:var(--lp-paper)}.sg-landing .sglp-stack-item strong{font-size:15px;display:block;margin-bottom:6px}.sg-landing .sglp-stack-item p{font-size:13px}.sg-landing .sglp-stack-item>span{color:var(--lp-green);font-size:13px;font-weight:600;flex:none}
.sg-landing .sglp-pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}.sg-landing .sglp-price-card{position:relative;display:flex;flex-direction:column;padding:30px;border:1px solid var(--lp-line);border-radius:18px;background:var(--lp-paper)}.sg-landing .sglp-price-card.sglp-featured{border:2px solid var(--lp-green);box-shadow:0 12px 32px #1d633c0a}.sg-landing .sglp-featured>.sglp-badge{align-self:flex-start;margin-bottom:16px}.sg-landing .sglp-price-card h3{font-size:24px;margin:0 0 9px}.sg-landing .sglp-price-card>p{font-size:13px;min-height:44px}.sg-landing .sglp-price{font-size:36px;font-weight:600;letter-spacing:-.04em;margin-top:24px;line-height:1.2}.sg-landing .sglp-price small{font-size:12px;font-weight:400;letter-spacing:0;color:var(--lp-muted);display:block;margin-top:8px}.sg-landing .sglp-checks{list-style:none;padding:22px 0!important;margin:20px 0 24px!important;border-top:1px solid var(--lp-line);display:grid;gap:12px}.sg-landing .sglp-checks li{display:flex;align-items:flex-start;gap:10px;font-size:13px;padding:0;margin:0;list-style:none}.sg-landing .sglp-checks svg{color:var(--lp-green);width:17px;height:17px;margin-top:2px}.sg-landing .sglp-price-card>.sglp-btn{margin-top:auto}.sg-landing .sglp-price-note{margin-top:20px;font-size:12px;text-align:center}.sg-landing .sglp-faq{display:grid;gap:12px}.sg-landing .sglp-faq details{border:1px solid var(--lp-line);border-radius:12px;background:var(--lp-paper)}.sg-landing .sglp-faq summary{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 22px;cursor:pointer;font-size:15px;font-weight:500;list-style:none}.sg-landing .sglp-faq summary::-webkit-details-marker{display:none}.sg-landing .sglp-faq summary svg{width:18px;height:18px;transition:transform .18s}.sg-landing .sglp-faq details[open] summary svg{transform:rotate(45deg)}.sg-landing .sglp-faq details>div{padding:0 22px 22px;color:var(--lp-muted);font-size:14px}.sg-landing .sglp-cta{padding:58px;border-radius:24px;background:#193f2b;color:#fff;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:36px}.sg-landing .sglp-cta h2{color:#fff}.sg-landing .sglp-cta p{color:#c4d9cb;margin-top:18px;font-size:14px}.sg-landing .sglp-cta .sglp-actions{margin-top:0;justify-content:flex-end}.sg-landing .sglp-cta .sglp-btn{background:#d5f1ce;color:#193f2b;border-color:#d5f1ce}.sg-landing .sglp-cta .sglp-btn-ghost{background:transparent;color:#fff;border-color:#72957f}.sg-landing .sglp-page-end{font-size:12px;text-align:center;padding:0 24px 38px;color:var(--lp-muted)}
.sg-landing .sglp-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.sg-landing .sglp-project{border:1px solid var(--lp-line);border-radius:16px;overflow:hidden;background:var(--lp-paper);min-width:0}.sg-landing .sglp-project-art{padding:24px;background:#e2f1e6;min-height:210px;display:grid;align-items:center}.sg-landing .sglp-project[data-category=business] .sglp-project-art{background:#f3eede}.sg-landing .sglp-project[data-category=editorial] .sglp-project-art{background:#e2edf1}.sg-landing .sglp-project-art .sglp-browser{border-radius:8px;box-shadow:0 12px 20px #153b2510}.sg-landing .sglp-project-art .sglp-mock-content{padding:12px}.sg-landing .sglp-project-art .sglp-mock-feature{min-height:80px;padding:16px}.sg-landing .sglp-project-art .sglp-mock-feature b{font-size:20px}.sg-landing .sglp-project-art .sglp-mock-card{min-height:55px;padding:6px}.sg-landing .sglp-project-art .sglp-mock-card div{height:25px}.sg-landing .sglp-project-copy{padding:23px}.sg-landing .sglp-project-copy h3{font-size:21px;margin:14px 0 10px}.sg-landing .sglp-project-copy p{font-size:13px}.sg-landing .sglp-project details{margin-top:18px;font-size:13px}.sg-landing .sglp-project summary{color:var(--lp-green);cursor:pointer;min-height:36px;display:flex;align-items:center;gap:8px}.sg-landing .sglp-project details p{margin-top:10px}.sg-landing .sglp-project details a{display:inline-flex;margin-top:14px;min-height:36px;align-items:center;color:var(--lp-green);font-weight:600}
.sg-landing .sglp-filter-input{position:absolute;opacity:0;width:1px;height:1px;clip-path:inset(50%)}.sg-landing .sglp-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}.sg-landing .sglp-filters label{cursor:pointer;display:inline-flex;align-items:center;min-height:42px;padding:8px 18px;border:1px solid var(--lp-line);border-radius:24px;font-size:13px;color:var(--lp-muted);background:var(--lp-paper)}.sg-landing #sglp-all:checked~.sglp-filters label[for=sglp-all],.sg-landing #sglp-editorial:checked~.sglp-filters label[for=sglp-editorial],.sg-landing #sglp-business:checked~.sglp-filters label[for=sglp-business],.sg-landing #sglp-digital:checked~.sglp-filters label[for=sglp-digital]{background:var(--lp-deep);border-color:var(--lp-deep);color:#fff}.sg-landing .sglp-filter-input:focus-visible~.sglp-filters{outline:2px solid #4285f4;outline-offset:5px}.sg-landing #sglp-editorial:checked~.sglp-projects .sglp-project:not([data-category=editorial]),.sg-landing #sglp-business:checked~.sglp-projects .sglp-project:not([data-category=business]),.sg-landing #sglp-digital:checked~.sglp-projects .sglp-project:not([data-category=digital]){display:none}
html.sg-dark .sg-landing{--lp-green:#8fd99d;--lp-deep:#28643e}html.sg-dark .sg-landing .sglp-btn{color:#132f20;background:#8fd99d}html.sg-dark .sg-landing .sglp-btn-ghost{background:transparent;color:#8fd99d}html.sg-dark .sg-landing .sglp-cta .sglp-btn-ghost{color:#fff}html.sg-dark .sg-landing .sglp-stage{background:linear-gradient(135deg,#24452e,#263b29);border-color:#3f6449}html.sg-dark .sg-landing .sglp-stage-tag{color:#b2ddbd}
@media(max-width:900px){.sg-landing .sglp-hero{gap:32px}.sg-landing .sglp-stage{padding:22px}.sg-landing .sglp-grid,.sg-landing .sglp-pricing,.sg-landing .sglp-projects{gap:16px}.sg-landing .sglp-card,.sg-landing .sglp-price-card{padding:22px}.sg-landing .sglp-price{font-size:30px}.sg-landing .sglp-split{gap:34px}.sg-landing .sglp-cta{padding:38px;gap:24px}}
@media(max-width:700px){.sg-landing{font-size:15px}.sg-landing .sglp-wrap{padding-inline:20px}.sg-landing .sglp-section{padding-block:56px}.sg-landing .sglp-demo-row{gap:8px}.sg-landing .sglp-demo{padding-block:10px}.sg-landing .sglp-demo-nav a{padding:4px 10px}.sg-landing .sglp-hero{grid-template-columns:1fr;gap:32px;padding-block:46px}.sg-landing .sglp-hero-copy>p{font-size:16px;margin-top:18px}.sg-landing .sglp-actions{gap:10px;margin-top:24px}.sg-landing .sglp-btn{padding:12px 18px;font-size:13px}.sg-landing .sglp-micro{gap:12px;font-size:11px}.sg-landing .sglp-stage{border-radius:20px;padding:22px}.sg-landing .sglp-mock-content{padding:18px}.sg-landing .sglp-mock-feature{min-height:140px;padding:22px 18px}.sg-landing .sglp-mock-feature b{font-size:26px}.sg-landing .sglp-benefits{grid-template-columns:1fr;gap:20px;padding-block:26px}.sg-landing .sglp-section-head{display:block;margin-bottom:26px}.sg-landing .sglp-section-head>.sglp-btn{margin-top:20px}.sg-landing .sglp-grid,.sg-landing .sglp-pricing,.sg-landing .sglp-projects,.sg-landing .sglp-split,.sg-landing .sglp-cta{grid-template-columns:1fr}.sg-landing .sglp-split{gap:30px}.sg-landing .sglp-price-card{padding:28px}.sg-landing .sglp-price-card>p{min-height:0}.sg-landing .sglp-price{font-size:36px}.sg-landing .sglp-cta{padding:32px 26px;gap:26px}.sg-landing .sglp-cta .sglp-actions{justify-content:flex-start;flex-direction:column}.sg-landing .sglp-project-art{min-height:240px;padding:28px}.sg-landing .sglp-faq summary{padding:18px;font-size:14px}.sg-landing .sglp-faq details>div{padding:0 18px 18px}.sg-landing h1{font-size:36px}}
@media(max-width:360px){.sg-landing .sglp-wrap{padding-inline:16px}.sg-landing h1{font-size:32px}.sg-landing .sglp-stage{padding:16px}.sg-landing .sglp-actions>.sglp-btn{flex:1 1 140px}.sg-landing .sglp-mock-feature b{font-size:24px}}
@media(prefers-reduced-motion:reduce){.sg-landing *{scroll-behavior:auto!important;transition:none!important}}

</style>
<div class="sg-landing" data-sg-landing="jasa"><div class="sglp-demo"><div class="sglp-wrap sglp-demo-row"><span>SAEGREEN / LANDING PAGE DEMO</span><nav class="sglp-demo-nav" aria-label="Pilihan demo landing page"><a href="https://saegreen.temablogger.com/p/landing-page-produk.html">Produk</a><a href="https://saegreen.temablogger.com/p/landing-page-jasa.html" aria-current="page">Jasa</a><a href="https://saegreen.temablogger.com/p/landing-page-portofolio.html">Portofolio</a></nav></div></div><div class="sglp-wrap"><section class="sglp-hero"><div class="sglp-hero-copy"><div class="sglp-kicker"><i></i>Creative service / contoh studio</div><h1>Website yang rapi.<br/><em>Penawaran yang jelas.</em></h1><p>Perkenalkan layanan Anda melalui halaman yang menjelaskan hasil, proses kerja, dan ruang lingkup proyek. Beri calon pelanggan langkah pertama yang mudah.</p><div class="sglp-actions"><a class="sglp-btn" href="#sglp-pricing">Lihat paket jasa<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a><a class="sglp-btn sglp-btn-ghost" href="#sglp-process">Lihat proses<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></div><div class="sglp-micro"><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg>Desain responsif</span><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg>Satu gaya dengan SaeGreen</span></div></div><div class="sglp-stage"><div class="sglp-browser" aria-label="Ilustrasi tampilan situs"><div class="sglp-browser-bar"><i></i><i></i><i></i><span>yourwebsite.com</span></div><div class="sglp-mock-content"><div class="sglp-mock-logo"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>Green Studio</div><div class="sglp-mock-feature" style="background:#345d4b"><small>MADE FOR YOUR NEXT CHAPTER</small><b>Good ideas.<br/>Thoughtful websites.</b></div><div class="sglp-mock-grid"><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div></div></div></div><div class="sglp-stage-tag"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>A fresh start for your next idea.</div></div></section></div><div class="sglp-wrap"><div class="sglp-benefits"><div class="sglp-benefit"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v12H9l-5 4Z"/></svg></span><div><b>Mulai dari kebutuhan</b><small>Ruang lingkup dibicarakan sejak awal.</small></div></div><div class="sglp-benefit"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"/></svg></span><div><b>Desain yang konsisten</b><small>Setiap bagian mendukung satu tujuan.</small></div></div><div class="sglp-benefit"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8v4l3 2M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0"/></svg></span><div><b>Tahapan yang jelas</b><small>Dari konsep sampai penyerahan.</small></div></div></div></div><section class="sglp-section" id="sglp-services"><div class="sglp-wrap"><div class="sglp-section-head"><div><div class="sglp-kicker"><i></i>What we can build</div><h2>Layanan untuk<br/>langkah bisnis Anda.</h2><p>Sesuaikan jenis layanan di bawah dengan keahlian dan hasil yang benar-benar Anda tawarkan.</p></div></div><div class="sglp-grid"><article class="sglp-card"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h18v13H3ZM8 21h8M12 17v4"/></svg></span><h3>Landing page</h3><p>Halaman fokus untuk satu penawaran, lengkap dengan manfaat, pricing, dan ajakan bertindak.</p></article><article class="sglp-card"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg></span><h3>Identitas website</h3><p>Susunan halaman, warna, dan tipografi yang membawa karakter usaha Anda.</p></article><article class="sglp-card"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m8 6-6 6 6 6m8-12 6 6-6 6M14 3l-4 18"/></svg></span><h3>Setup Blogger</h3><p>Penataan template, navigasi, dan konten awal agar blog siap dikelola.</p></article></div></div></section><section class="sglp-section sglp-soft" id="sglp-process"><div class="sglp-wrap"><div class="sglp-split"><div><div class="sglp-section-head"><div><div class="sglp-kicker"><i></i>How we work</div><h2>Proses yang bisa<br/>Anda ikuti.</h2><p>Jelaskan tahapan proyek agar pelanggan memahami apa yang perlu disiapkan dan kapan memberikan masukan.</p></div></div></div><div class="sglp-stack"><div class="sglp-stack-item"><span>01</span><div><strong>Kenali kebutuhan</strong><p>Bahas tujuan halaman, target pembaca, isi, dan contoh visual.</p></div></div><div class="sglp-stack-item"><span>02</span><div><strong>Susun arah desain</strong><p>Tentukan struktur halaman serta bagian yang menjadi prioritas.</p></div></div><div class="sglp-stack-item"><span>03</span><div><strong>Bangun dan tinjau</strong><p>Periksa hasil, beri masukan sesuai ruang lingkup revisi.</p></div></div><div class="sglp-stack-item"><span>04</span><div><strong>Serahkan dan jelaskan</strong><p>Terima hasil akhir dan petunjuk pengelolaan yang disepakati.</p></div></div></div></div></div></section><section class="sglp-section" id="sglp-work"><div class="sglp-wrap"><div class="sglp-section-head"><div><div class="sglp-kicker"><i></i>Selected concepts</div><h2>Lihat arah visualnya.</h2><p>Konsep berikut adalah ilustrasi portofolio, bukan klaim proyek pelanggan.</p></div></div><div class="sglp-projects"><article class="sglp-project" data-category="editorial"><div class="sglp-project-art"><div class="sglp-browser" aria-label="Ilustrasi tampilan situs"><div class="sglp-browser-bar"><i></i><i></i><i></i><span>yourwebsite.com</span></div><div class="sglp-mock-content"><div class="sglp-mock-logo"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>Journal</div><div class="sglp-mock-feature" style="background:#294e61"><small>MADE FOR YOUR NEXT CHAPTER</small><b>Editorial<br/>Journal</b></div><div class="sglp-mock-grid"><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div></div></div></div></div><div class="sglp-project-copy"><span class="sglp-badge">Editorial / konsep demo</span><h3>Editorial Journal</h3><p>Ruang untuk cerita yang layak dibaca.</p><details><summary>Lihat detail <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></summary><p>Konsep showcase untuk menunjukkan struktur dan arah visual. Ganti ilustrasi, nama proyek, lingkup pekerjaan, dan hasilnya dengan karya Anda sendiri.</p><a href="#sglp-order">Diskusikan proyek serupa <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></details></div></article><article class="sglp-project" data-category="business"><div class="sglp-project-art"><div class="sglp-browser" aria-label="Ilustrasi tampilan situs"><div class="sglp-browser-bar"><i></i><i></i><i></i><span>yourwebsite.com</span></div><div class="sglp-mock-content"><div class="sglp-mock-logo"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>Studio</div><div class="sglp-mock-feature" style="background:#766342"><small>MADE FOR YOUR NEXT CHAPTER</small><b>Studio<br/>& Co.</b></div><div class="sglp-mock-grid"><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div></div></div></div></div><div class="sglp-project-copy"><span class="sglp-badge">Business / konsep demo</span><h3>Studio & Co.</h3><p>Halaman usaha dengan penawaran yang jelas.</p><details><summary>Lihat detail <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></summary><p>Konsep showcase untuk menunjukkan struktur dan arah visual. Ganti ilustrasi, nama proyek, lingkup pekerjaan, dan hasilnya dengan karya Anda sendiri.</p><a href="#sglp-order">Diskusikan proyek serupa <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></details></div></article><article class="sglp-project" data-category="digital"><div class="sglp-project-art"><div class="sglp-browser" aria-label="Ilustrasi tampilan situs"><div class="sglp-browser-bar"><i></i><i></i><i></i><span>yourwebsite.com</span></div><div class="sglp-mock-content"><div class="sglp-mock-logo"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>Digital</div><div class="sglp-mock-feature" style="background:#245e3d"><small>MADE FOR YOUR NEXT CHAPTER</small><b>Digital<br/>Product</b></div><div class="sglp-mock-grid"><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div></div></div></div></div><div class="sglp-project-copy"><span class="sglp-badge">Digital / konsep demo</span><h3>Digital Product</h3><p>Satu tempat untuk memperkenalkan produk.</p><details><summary>Lihat detail <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></summary><p>Konsep showcase untuk menunjukkan struktur dan arah visual. Ganti ilustrasi, nama proyek, lingkup pekerjaan, dan hasilnya dengan karya Anda sendiri.</p><a href="#sglp-order">Diskusikan proyek serupa <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></details></div></article></div></div></section><section class="sglp-section sglp-soft" id="sglp-pricing"><div class="sglp-wrap"><div class="sglp-section-head"><div><div class="sglp-kicker"><i></i>Service packages / contoh</div><h2>Mulai dari kebutuhan.<br/>Pilih lingkup yang sesuai.</h2><p>Angka berikut adalah ilustrasi. Isi harga, durasi, revisi, dan hasil kerja sesuai layanan Anda.</p></div></div><div class="sglp-pricing"><article class="sglp-price-card"><h3>Starter</h3><p>Satu penawaran dengan struktur yang ringkas.</p><div class="sglp-price">Rp750.000<small>per proyek / harga contoh</small></div><ul class="sglp-checks"><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Contoh satu landing page</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Penyesuaian warna dan teks</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Satu putaran revisi contoh</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Panduan penggunaan singkat</span></li></ul><a class="sglp-btn sglp-btn-ghost" href="#sglp-order">Pilih Starter<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></article><article class="sglp-price-card sglp-featured"><span class="sglp-badge">Paket unggulan</span><h3>Business</h3><p>Halaman usaha dengan isi yang lebih lengkap.</p><div class="sglp-price">Rp1.500.000<small>per proyek / harga contoh</small></div><ul class="sglp-checks"><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Contoh tiga halaman</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Pricing dan portofolio</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Dua putaran revisi contoh</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Pemeriksaan tampilan mobile</span></li></ul><a class="sglp-btn" href="#sglp-order">Pilih Business<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></article><article class="sglp-price-card"><h3>Custom</h3><p>Lingkup khusus yang dibahas terlebih dahulu.</p><div class="sglp-price">Diskusikan<small>sesuai lingkup / harga contoh</small></div><ul class="sglp-checks"><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Pemetaan kebutuhan</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Desain sesuai kesepakatan</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Integrasi ditentukan terpisah</span></li><li><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg><span>Jadwal dan revisi disepakati</span></li></ul><a class="sglp-btn sglp-btn-ghost" href="#sglp-order">Pilih Custom<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></article></div><p class="sglp-price-note">Demo layout pricing. Harga, fasilitas, dan ketentuan di atas adalah contoh; belum merupakan penawaran transaksi.</p></div></section><section class="sglp-section"><div class="sglp-wrap"><div class="sglp-split"><div><div class="sglp-section-head"><div><div class="sglp-kicker"><i></i>Good to know</div><h2>Biar ekspektasinya<br/>tetap sejalan.</h2><p>Tulis ketentuan layanan secara jelas sebelum pelanggan melakukan pemesanan.</p></div></div></div><div class="sglp-faq"><details><summary>Apa yang perlu disiapkan pelanggan?<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></summary><div>Contohnya: logo, teks penawaran, gambar, alamat tautan, dan penanggung jawab yang memberi persetujuan.</div></details><details><summary>Bagaimana dengan revisi dan waktu pengerjaan?<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></summary><div>Isi ketentuan sesuai kemampuan Anda. Jumlah revisi dan jadwal pada paket demo bukan janji layanan yang aktif.</div></details><details><summary>Bisakah tombol menuju WhatsApp atau formulir?<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></summary><div>Bisa. Ganti alamat tautan tombol dengan nomor WhatsApp bisnis atau formulir konsultasi milik Anda.</div></details><details><summary>Apakah ada pembayaran pada halaman ini?<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></summary><div>Tidak. Demo ini menampilkan struktur penawaran; pembayaran memerlukan store atau layanan yang dihubungkan terpisah.</div></details></div></div></div></section><section class="sglp-section" id="sglp-order"><div class="sglp-wrap"><div class="sglp-cta"><div><h2>Mari mulai dari<br/>percakapan yang baik.</h2><p>Ini preview landing page. Tombol paket belum memproses pesanan atau pembayaran. Gunakan halaman ini sebagai contoh untuk penawaran produk atau jasa Anda.</p></div><div class="sglp-actions"><a class="sglp-btn" href="https://www.temablogger.com/">Jelajahi TemaBlogger<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a><a class="sglp-btn sglp-btn-ghost" href="https://saegreen.temablogger.com/2026/10/panduan-instalasi-pengaturan-saegreen.html">Lihat panduan SaeGreen<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></div></div></div></section><div class="sglp-page-end">SaeGreen landing page / contoh layout siap disesuaikan.</div></div>

Landing page Portofolio

Galeri enam konsep, filter Editorial/Business/Digital, detail karya, pendekatan kerja, dan ajakan konsultasi.

Buka preview portofolio

Tampilkan kode lengkap portofolio

Tekan Copy pada blok berikut untuk menyalin seluruh HTML dan CSS.

<!-- SaeGreen landing page: paste all of this into Blogger Pages / HTML view. -->
<style>
/* SaeGreen landing pages: scoped, paste-ready, no JavaScript dependency. */
body:has(.sg-landing) .sg-post-head,body:has(.sg-landing) .sg-post-cover,body:has(.sg-landing) #sg-auto-toc,body:has(.sg-landing) .sg-post-tags,body:has(.sg-landing) .sg-post-nav,body:has(.sg-landing) .sg-comments,body:has(.sg-landing) .sg-popular,body:has(.sg-landing) .sg-newsletter,body:has(.sg-landing) .sg-progress{display:none!important}
body:has(.sg-landing) .sg-prose-wrap{width:100%;max-width:none;padding:0;margin:0}body:has(.sg-landing) .sg-single{margin:0}body:has(.sg-landing) .sg-readbar{display:none!important}body:has(.sg-landing) .sg-header.reading .sg-actions{display:flex}body:has(.sg-landing) .sg-header.reading .sg-navigation{display:flex}
@media(min-width:981px){body:has(.sg-landing) .sg-header.reading .sg-nav{display:flex}}
.sg-landing{--lp-paper:var(--paper,#fff);--lp-ink:var(--ink,#183b2a);--lp-muted:var(--muted,#64736b);--lp-line:var(--line,#dae8de);--lp-soft:var(--mint,#eef9f1);--lp-green:#258e46;--lp-deep:#173f2c;color:var(--lp-ink);background:var(--lp-paper);font:16px/1.65 'Google Sans',Arial,sans-serif;overflow:clip;isolation:isolate}
.sg-landing *,.sg-landing *:before,.sg-landing *:after{box-sizing:border-box}.sg-landing :is(h1,h2,h3,h4,p,figure,ul,ol){margin:0;padding:0;border:0}.sg-landing :is(h1,h2,h3,h4){color:var(--lp-ink);font-weight:600;letter-spacing:-.035em;line-height:1.14}.sg-landing h1{font-size:clamp(34px,4.6vw,62px);max-width:680px}.sg-landing h2{font-size:clamp(28px,3.2vw,42px)}.sg-landing h3{font-size:22px}.sg-landing p{color:var(--lp-muted)}.sg-landing a{color:inherit;text-decoration:none}.sg-landing img{display:block;width:100%;height:auto;border-radius:0;cursor:auto}.sg-landing svg{width:22px;height:22px;flex:none}.sg-landing :is(a,button,label,summary){-webkit-tap-highlight-color:transparent}.sg-landing :is(a,button,summary):focus-visible{outline:3px solid #4285f4;outline-offset:4px}.sg-landing [id]{scroll-margin-top:150px}.sg-landing .sglp-wrap{width:min(1160px,100%);padding-inline:32px;margin-inline:auto}.sg-landing .sglp-section{padding-block:82px}.sg-landing .sglp-soft{background:var(--lp-soft)}.sg-landing .sglp-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:32px}.sg-landing .sglp-section-head>div{max-width:640px}.sg-landing .sglp-section-head p{margin-top:14px;max-width:600px}
.sg-landing .sglp-kicker{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--lp-green);font-weight:700;margin-bottom:18px}.sg-landing .sglp-kicker>i{width:7px;height:7px;border-radius:50%;background:var(--lp-green)}.sg-landing .sglp-demo{border-bottom:1px solid var(--lp-line);padding:14px 0;font-size:12px;color:var(--lp-muted)}.sg-landing .sglp-demo-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.sg-landing .sglp-demo-nav{display:flex;gap:5px;flex-wrap:wrap}.sg-landing .sglp-demo-nav a{padding:6px 11px;border-radius:20px;min-height:32px}.sg-landing .sglp-demo-nav a[aria-current=page]{background:var(--lp-soft);color:var(--lp-green);font-weight:600}.sg-landing .sglp-hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:54px;padding-block:76px 70px}.sg-landing .sglp-hero-copy>p{font-size:18px;max-width:530px;margin-top:22px}.sg-landing .sglp-hero h1 em{color:var(--lp-green);font-style:normal}.sg-landing .sglp-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.sg-landing .sglp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 23px;min-height:48px;border:1px solid var(--lp-green);border-radius:9px;background:var(--lp-green);color:#fff;font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;transition:background .18s,box-shadow .18s}.sg-landing .sglp-btn:hover{background:#1b7436;box-shadow:0 4px 12px #173f2c18}.sg-landing .sglp-btn-ghost{background:transparent;color:var(--lp-green);border-color:var(--lp-line)}.sg-landing .sglp-btn-ghost:hover{background:var(--lp-soft)}.sg-landing .sglp-micro{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:12px;color:var(--lp-muted)}.sg-landing .sglp-micro span{display:flex;align-items:center;gap:5px}.sg-landing .sglp-micro svg{width:15px;height:15px;color:var(--lp-green)}
.sg-landing .sglp-stage{padding:30px;background:linear-gradient(135deg,#e2f3df,#f2f8e9);border:1px solid #d6e8d2;border-radius:28px;position:relative}.sg-landing .sglp-browser{border:1px solid #d3e4d8;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 20px 50px #214d2b15;color:#183b2a}.sg-landing .sglp-browser-bar{display:flex;align-items:center;gap:5px;padding:14px 16px;border-bottom:1px solid #e6eee8;font-size:9px;color:#7d8a80}.sg-landing .sglp-browser-bar i{width:6px;height:6px;border-radius:50%;background:#aac8b2}.sg-landing .sglp-browser-bar span{margin-left:12px}.sg-landing .sglp-mock-content{padding:22px}.sg-landing .sglp-mock-logo{display:flex;align-items:center;gap:5px;font-weight:700;font-size:14px;margin-bottom:16px}.sg-landing .sglp-mock-feature{padding:26px 22px;background:#1e5235;color:#fff;border-radius:9px;min-height:153px;display:flex;flex-direction:column;justify-content:center}.sg-landing .sglp-mock-feature small{font-size:9px;color:#bae3c7;letter-spacing:.12em}.sg-landing .sglp-mock-feature b{font-size:29px;line-height:1.16;letter-spacing:-.03em;margin-top:12px;max-width:260px}.sg-landing .sglp-mock-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.sg-landing .sglp-mock-card{background:#eff7f1;padding:10px;border-radius:6px;min-height:96px}.sg-landing .sglp-mock-card div{height:40px;background:#c5e5cf;border-radius:4px}.sg-landing .sglp-mock-card i{height:4px;display:block;background:#a1c4ab;width:80%;margin-top:10px;border-radius:3px}.sg-landing .sglp-mock-card i:last-child{width:55%;margin-top:5px}.sg-landing .sglp-stage-tag{position:relative;margin:18px auto -8px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:600;color:#31724b}.sg-landing .sglp-stage-tag svg{width:16px;height:16px}
.sg-landing .sglp-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:28px 0;border-top:1px solid var(--lp-line);border-bottom:1px solid var(--lp-line)}.sg-landing .sglp-benefit{display:flex;gap:14px;align-items:center}.sg-landing .sglp-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--lp-soft);color:var(--lp-green);flex:none}.sg-landing .sglp-benefit b{display:block;font-size:14px}.sg-landing .sglp-benefit small{font-size:12px;color:var(--lp-muted)}.sg-landing .sglp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.sg-landing .sglp-card{padding:28px;border:1px solid var(--lp-line);border-radius:16px;background:var(--lp-paper);min-width:0}.sg-landing .sglp-card h3{margin:20px 0 12px}.sg-landing .sglp-card p{font-size:14px}.sg-landing .sglp-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;background:var(--lp-soft);color:var(--lp-green);font-size:11px;font-weight:600;letter-spacing:.02em}.sg-landing .sglp-split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px}.sg-landing .sglp-split h2{margin-bottom:20px}.sg-landing .sglp-split p+p{margin-top:16px}.sg-landing .sglp-stack{display:grid;gap:14px}.sg-landing .sglp-stack-item{display:flex;gap:18px;padding:22px;border:1px solid var(--lp-line);border-radius:14px;background:var(--lp-paper)}.sg-landing .sglp-stack-item strong{font-size:15px;display:block;margin-bottom:6px}.sg-landing .sglp-stack-item p{font-size:13px}.sg-landing .sglp-stack-item>span{color:var(--lp-green);font-size:13px;font-weight:600;flex:none}
.sg-landing .sglp-pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}.sg-landing .sglp-price-card{position:relative;display:flex;flex-direction:column;padding:30px;border:1px solid var(--lp-line);border-radius:18px;background:var(--lp-paper)}.sg-landing .sglp-price-card.sglp-featured{border:2px solid var(--lp-green);box-shadow:0 12px 32px #1d633c0a}.sg-landing .sglp-featured>.sglp-badge{align-self:flex-start;margin-bottom:16px}.sg-landing .sglp-price-card h3{font-size:24px;margin:0 0 9px}.sg-landing .sglp-price-card>p{font-size:13px;min-height:44px}.sg-landing .sglp-price{font-size:36px;font-weight:600;letter-spacing:-.04em;margin-top:24px;line-height:1.2}.sg-landing .sglp-price small{font-size:12px;font-weight:400;letter-spacing:0;color:var(--lp-muted);display:block;margin-top:8px}.sg-landing .sglp-checks{list-style:none;padding:22px 0!important;margin:20px 0 24px!important;border-top:1px solid var(--lp-line);display:grid;gap:12px}.sg-landing .sglp-checks li{display:flex;align-items:flex-start;gap:10px;font-size:13px;padding:0;margin:0;list-style:none}.sg-landing .sglp-checks svg{color:var(--lp-green);width:17px;height:17px;margin-top:2px}.sg-landing .sglp-price-card>.sglp-btn{margin-top:auto}.sg-landing .sglp-price-note{margin-top:20px;font-size:12px;text-align:center}.sg-landing .sglp-faq{display:grid;gap:12px}.sg-landing .sglp-faq details{border:1px solid var(--lp-line);border-radius:12px;background:var(--lp-paper)}.sg-landing .sglp-faq summary{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 22px;cursor:pointer;font-size:15px;font-weight:500;list-style:none}.sg-landing .sglp-faq summary::-webkit-details-marker{display:none}.sg-landing .sglp-faq summary svg{width:18px;height:18px;transition:transform .18s}.sg-landing .sglp-faq details[open] summary svg{transform:rotate(45deg)}.sg-landing .sglp-faq details>div{padding:0 22px 22px;color:var(--lp-muted);font-size:14px}.sg-landing .sglp-cta{padding:58px;border-radius:24px;background:#193f2b;color:#fff;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:36px}.sg-landing .sglp-cta h2{color:#fff}.sg-landing .sglp-cta p{color:#c4d9cb;margin-top:18px;font-size:14px}.sg-landing .sglp-cta .sglp-actions{margin-top:0;justify-content:flex-end}.sg-landing .sglp-cta .sglp-btn{background:#d5f1ce;color:#193f2b;border-color:#d5f1ce}.sg-landing .sglp-cta .sglp-btn-ghost{background:transparent;color:#fff;border-color:#72957f}.sg-landing .sglp-page-end{font-size:12px;text-align:center;padding:0 24px 38px;color:var(--lp-muted)}
.sg-landing .sglp-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.sg-landing .sglp-project{border:1px solid var(--lp-line);border-radius:16px;overflow:hidden;background:var(--lp-paper);min-width:0}.sg-landing .sglp-project-art{padding:24px;background:#e2f1e6;min-height:210px;display:grid;align-items:center}.sg-landing .sglp-project[data-category=business] .sglp-project-art{background:#f3eede}.sg-landing .sglp-project[data-category=editorial] .sglp-project-art{background:#e2edf1}.sg-landing .sglp-project-art .sglp-browser{border-radius:8px;box-shadow:0 12px 20px #153b2510}.sg-landing .sglp-project-art .sglp-mock-content{padding:12px}.sg-landing .sglp-project-art .sglp-mock-feature{min-height:80px;padding:16px}.sg-landing .sglp-project-art .sglp-mock-feature b{font-size:20px}.sg-landing .sglp-project-art .sglp-mock-card{min-height:55px;padding:6px}.sg-landing .sglp-project-art .sglp-mock-card div{height:25px}.sg-landing .sglp-project-copy{padding:23px}.sg-landing .sglp-project-copy h3{font-size:21px;margin:14px 0 10px}.sg-landing .sglp-project-copy p{font-size:13px}.sg-landing .sglp-project details{margin-top:18px;font-size:13px}.sg-landing .sglp-project summary{color:var(--lp-green);cursor:pointer;min-height:36px;display:flex;align-items:center;gap:8px}.sg-landing .sglp-project details p{margin-top:10px}.sg-landing .sglp-project details a{display:inline-flex;margin-top:14px;min-height:36px;align-items:center;color:var(--lp-green);font-weight:600}
.sg-landing .sglp-filter-input{position:absolute;opacity:0;width:1px;height:1px;clip-path:inset(50%)}.sg-landing .sglp-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}.sg-landing .sglp-filters label{cursor:pointer;display:inline-flex;align-items:center;min-height:42px;padding:8px 18px;border:1px solid var(--lp-line);border-radius:24px;font-size:13px;color:var(--lp-muted);background:var(--lp-paper)}.sg-landing #sglp-all:checked~.sglp-filters label[for=sglp-all],.sg-landing #sglp-editorial:checked~.sglp-filters label[for=sglp-editorial],.sg-landing #sglp-business:checked~.sglp-filters label[for=sglp-business],.sg-landing #sglp-digital:checked~.sglp-filters label[for=sglp-digital]{background:var(--lp-deep);border-color:var(--lp-deep);color:#fff}.sg-landing .sglp-filter-input:focus-visible~.sglp-filters{outline:2px solid #4285f4;outline-offset:5px}.sg-landing #sglp-editorial:checked~.sglp-projects .sglp-project:not([data-category=editorial]),.sg-landing #sglp-business:checked~.sglp-projects .sglp-project:not([data-category=business]),.sg-landing #sglp-digital:checked~.sglp-projects .sglp-project:not([data-category=digital]){display:none}
html.sg-dark .sg-landing{--lp-green:#8fd99d;--lp-deep:#28643e}html.sg-dark .sg-landing .sglp-btn{color:#132f20;background:#8fd99d}html.sg-dark .sg-landing .sglp-btn-ghost{background:transparent;color:#8fd99d}html.sg-dark .sg-landing .sglp-cta .sglp-btn-ghost{color:#fff}html.sg-dark .sg-landing .sglp-stage{background:linear-gradient(135deg,#24452e,#263b29);border-color:#3f6449}html.sg-dark .sg-landing .sglp-stage-tag{color:#b2ddbd}
@media(max-width:900px){.sg-landing .sglp-hero{gap:32px}.sg-landing .sglp-stage{padding:22px}.sg-landing .sglp-grid,.sg-landing .sglp-pricing,.sg-landing .sglp-projects{gap:16px}.sg-landing .sglp-card,.sg-landing .sglp-price-card{padding:22px}.sg-landing .sglp-price{font-size:30px}.sg-landing .sglp-split{gap:34px}.sg-landing .sglp-cta{padding:38px;gap:24px}}
@media(max-width:700px){.sg-landing{font-size:15px}.sg-landing .sglp-wrap{padding-inline:20px}.sg-landing .sglp-section{padding-block:56px}.sg-landing .sglp-demo-row{gap:8px}.sg-landing .sglp-demo{padding-block:10px}.sg-landing .sglp-demo-nav a{padding:4px 10px}.sg-landing .sglp-hero{grid-template-columns:1fr;gap:32px;padding-block:46px}.sg-landing .sglp-hero-copy>p{font-size:16px;margin-top:18px}.sg-landing .sglp-actions{gap:10px;margin-top:24px}.sg-landing .sglp-btn{padding:12px 18px;font-size:13px}.sg-landing .sglp-micro{gap:12px;font-size:11px}.sg-landing .sglp-stage{border-radius:20px;padding:22px}.sg-landing .sglp-mock-content{padding:18px}.sg-landing .sglp-mock-feature{min-height:140px;padding:22px 18px}.sg-landing .sglp-mock-feature b{font-size:26px}.sg-landing .sglp-benefits{grid-template-columns:1fr;gap:20px;padding-block:26px}.sg-landing .sglp-section-head{display:block;margin-bottom:26px}.sg-landing .sglp-section-head>.sglp-btn{margin-top:20px}.sg-landing .sglp-grid,.sg-landing .sglp-pricing,.sg-landing .sglp-projects,.sg-landing .sglp-split,.sg-landing .sglp-cta{grid-template-columns:1fr}.sg-landing .sglp-split{gap:30px}.sg-landing .sglp-price-card{padding:28px}.sg-landing .sglp-price-card>p{min-height:0}.sg-landing .sglp-price{font-size:36px}.sg-landing .sglp-cta{padding:32px 26px;gap:26px}.sg-landing .sglp-cta .sglp-actions{justify-content:flex-start;flex-direction:column}.sg-landing .sglp-project-art{min-height:240px;padding:28px}.sg-landing .sglp-faq summary{padding:18px;font-size:14px}.sg-landing .sglp-faq details>div{padding:0 18px 18px}.sg-landing h1{font-size:36px}}
@media(max-width:360px){.sg-landing .sglp-wrap{padding-inline:16px}.sg-landing h1{font-size:32px}.sg-landing .sglp-stage{padding:16px}.sg-landing .sglp-actions>.sglp-btn{flex:1 1 140px}.sg-landing .sglp-mock-feature b{font-size:24px}}
@media(prefers-reduced-motion:reduce){.sg-landing *{scroll-behavior:auto!important;transition:none!important}}

</style>
<div class="sg-landing" data-sg-landing="portofolio"><div class="sglp-demo"><div class="sglp-wrap sglp-demo-row"><span>SAEGREEN / LANDING PAGE DEMO</span><nav class="sglp-demo-nav" aria-label="Pilihan demo landing page"><a href="https://saegreen.temablogger.com/p/landing-page-produk.html">Produk</a><a href="https://saegreen.temablogger.com/p/landing-page-jasa.html">Jasa</a><a href="https://saegreen.temablogger.com/p/landing-page-portofolio.html" aria-current="page">Portofolio</a></nav></div></div><div class="sglp-wrap"><section class="sglp-hero"><div class="sglp-hero-copy"><div class="sglp-kicker"><i></i>Selected work / konsep portofolio</div><h1>Karya yang berbicara.<br/><em>Cerita di baliknya.</em></h1><p>Tunjukkan pilihan karya, jelaskan tantangan yang diselesaikan, dan bantu calon pelanggan memahami cara Anda bekerja. Satu ruang yang tenang untuk hasil terbaik Anda.</p><div class="sglp-actions"><a class="sglp-btn" href="#sglp-projects">Jelajahi karya<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a><a class="sglp-btn sglp-btn-ghost" href="#sglp-about">Tentang pendekatan<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></div><div class="sglp-micro"><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg>Desain responsif</span><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4L19 6"/></svg>Satu gaya dengan SaeGreen</span></div></div><div class="sglp-stage"><div class="sglp-browser" aria-label="Ilustrasi tampilan situs"><div class="sglp-browser-bar"><i></i><i></i><i></i><span>yourwebsite.com</span></div><div class="sglp-mock-content"><div class="sglp-mock-logo"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>Green Portfolio</div><div class="sglp-mock-feature" style="background:#2e4f58"><small>MADE FOR YOUR NEXT CHAPTER</small><b>Purposeful design.<br/>Meaningful stories.</b></div><div class="sglp-mock-grid"><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div></div></div></div><div class="sglp-stage-tag"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>A fresh start for your next idea.</div></div></section></div><div class="sglp-wrap"><div class="sglp-benefits"><div class="sglp-benefit"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"/></svg></span><div><b>Karya pilihan</b><small>Susun menurut kategori yang relevan.</small></div></div><div class="sglp-benefit"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v12H9l-5 4Z"/></svg></span><div><b>Konteks yang jelas</b><small>Jelaskan tujuan dan peran Anda.</small></div></div><div class="sglp-benefit"><span class="sglp-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 3 7 7 3-7 3-3 7-3-7-7-3 7-3Z"/></svg></span><div><b>Langkah selanjutnya</b><small>Arahkan ke konsultasi atau detail.</small></div></div></div></div><section class="sglp-section" id="sglp-projects"><div class="sglp-wrap"><div class="sglp-section-head"><div><div class="sglp-kicker"><i></i>Project gallery</div><h2>Beragam kebutuhan.<br/>Satu perhatian pada detail.</h2><p>Filter kategori untuk menjelajahi konsep. Seluruh proyek berikut adalah contoh visual yang dapat diganti dengan karya asli Anda.</p></div></div><div class="sglp-portfolio"><input class="sglp-filter-input" type="radio" name="sglp-category" id="sglp-all" checked="checked"/><input class="sglp-filter-input" type="radio" name="sglp-category" id="sglp-editorial"/><input class="sglp-filter-input" type="radio" name="sglp-category" id="sglp-business"/><input class="sglp-filter-input" type="radio" name="sglp-category" id="sglp-digital"/><div class="sglp-filters" role="group" aria-label="Filter portofolio"><label for="sglp-all">Semua karya</label><label for="sglp-editorial">Editorial</label><label for="sglp-business">Business</label><label for="sglp-digital">Digital</label></div><div class="sglp-projects"><article class="sglp-project" data-category="editorial"><div class="sglp-project-art"><div class="sglp-browser" aria-label="Ilustrasi tampilan situs"><div class="sglp-browser-bar"><i></i><i></i><i></i><span>yourwebsite.com</span></div><div class="sglp-mock-content"><div class="sglp-mock-logo"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>Journal</div><div class="sglp-mock-feature" style="background:#294e61"><small>MADE FOR YOUR NEXT CHAPTER</small><b>Editorial<br/>Journal</b></div><div class="sglp-mock-grid"><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div></div></div></div></div><div class="sglp-project-copy"><span class="sglp-badge">Editorial / konsep demo</span><h3>Editorial Journal</h3><p>Ruang untuk cerita yang layak dibaca.</p><details><summary>Lihat detail <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></summary><p>Konsep showcase untuk menunjukkan struktur dan arah visual. Ganti ilustrasi, nama proyek, lingkup pekerjaan, dan hasilnya dengan karya Anda sendiri.</p><a href="#sglp-order">Diskusikan proyek serupa <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></details></div></article><article class="sglp-project" data-category="business"><div class="sglp-project-art"><div class="sglp-browser" aria-label="Ilustrasi tampilan situs"><div class="sglp-browser-bar"><i></i><i></i><i></i><span>yourwebsite.com</span></div><div class="sglp-mock-content"><div class="sglp-mock-logo"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>Studio</div><div class="sglp-mock-feature" style="background:#766342"><small>MADE FOR YOUR NEXT CHAPTER</small><b>Studio<br/>& Co.</b></div><div class="sglp-mock-grid"><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div></div></div></div></div><div class="sglp-project-copy"><span class="sglp-badge">Business / konsep demo</span><h3>Studio & Co.</h3><p>Halaman usaha dengan penawaran yang jelas.</p><details><summary>Lihat detail <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></summary><p>Konsep showcase untuk menunjukkan struktur dan arah visual. Ganti ilustrasi, nama proyek, lingkup pekerjaan, dan hasilnya dengan karya Anda sendiri.</p><a href="#sglp-order">Diskusikan proyek serupa <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></details></div></article><article class="sglp-project" data-category="digital"><div class="sglp-project-art"><div class="sglp-browser" aria-label="Ilustrasi tampilan situs"><div class="sglp-browser-bar"><i></i><i></i><i></i><span>yourwebsite.com</span></div><div class="sglp-mock-content"><div class="sglp-mock-logo"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>Digital</div><div class="sglp-mock-feature" style="background:#245e3d"><small>MADE FOR YOUR NEXT CHAPTER</small><b>Digital<br/>Product</b></div><div class="sglp-mock-grid"><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div></div></div></div></div><div class="sglp-project-copy"><span class="sglp-badge">Digital / konsep demo</span><h3>Digital Product</h3><p>Satu tempat untuk memperkenalkan produk.</p><details><summary>Lihat detail <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></summary><p>Konsep showcase untuk menunjukkan struktur dan arah visual. Ganti ilustrasi, nama proyek, lingkup pekerjaan, dan hasilnya dengan karya Anda sendiri.</p><a href="#sglp-order">Diskusikan proyek serupa <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></details></div></article><article class="sglp-project" data-category="business"><div class="sglp-project-art"><div class="sglp-browser" aria-label="Ilustrasi tampilan situs"><div class="sglp-browser-bar"><i></i><i></i><i></i><span>yourwebsite.com</span></div><div class="sglp-mock-content"><div class="sglp-mock-logo"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>Local</div><div class="sglp-mock-feature" style="background:#766342"><small>MADE FOR YOUR NEXT CHAPTER</small><b>Local<br/>Business</b></div><div class="sglp-mock-grid"><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div></div></div></div></div><div class="sglp-project-copy"><span class="sglp-badge">Business / konsep demo</span><h3>Local Business</h3><p>Profil bisnis dengan arah yang sederhana.</p><details><summary>Lihat detail <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></summary><p>Konsep showcase untuk menunjukkan struktur dan arah visual. Ganti ilustrasi, nama proyek, lingkup pekerjaan, dan hasilnya dengan karya Anda sendiri.</p><a href="#sglp-order">Diskusikan proyek serupa <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></details></div></article><article class="sglp-project" data-category="editorial"><div class="sglp-project-art"><div class="sglp-browser" aria-label="Ilustrasi tampilan situs"><div class="sglp-browser-bar"><i></i><i></i><i></i><span>yourwebsite.com</span></div><div class="sglp-mock-content"><div class="sglp-mock-logo"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>Learn</div><div class="sglp-mock-feature" style="background:#294e61"><small>MADE FOR YOUR NEXT CHAPTER</small><b>Knowledge<br/>Hub</b></div><div class="sglp-mock-grid"><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div></div></div></div></div><div class="sglp-project-copy"><span class="sglp-badge">Editorial / konsep demo</span><h3>Knowledge Hub</h3><p>Dokumentasi yang mudah dijelajahi.</p><details><summary>Lihat detail <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></summary><p>Konsep showcase untuk menunjukkan struktur dan arah visual. Ganti ilustrasi, nama proyek, lingkup pekerjaan, dan hasilnya dengan karya Anda sendiri.</p><a href="#sglp-order">Diskusikan proyek serupa <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></details></div></article><article class="sglp-project" data-category="digital"><div class="sglp-project-art"><div class="sglp-browser" aria-label="Ilustrasi tampilan situs"><div class="sglp-browser-bar"><i></i><i></i><i></i><span>yourwebsite.com</span></div><div class="sglp-mock-content"><div class="sglp-mock-logo"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg>Creator</div><div class="sglp-mock-feature" style="background:#245e3d"><small>MADE FOR YOUR NEXT CHAPTER</small><b>Creator<br/>Portfolio</b></div><div class="sglp-mock-grid"><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div><div class="sglp-mock-card"><div></div><i></i><i></i></div></div></div></div></div><div class="sglp-project-copy"><span class="sglp-badge">Digital / konsep demo</span><h3>Creator Portfolio</h3><p>Karya pilihan, disusun dengan nyaman.</p><details><summary>Lihat detail <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></summary><p>Konsep showcase untuk menunjukkan struktur dan arah visual. Ganti ilustrasi, nama proyek, lingkup pekerjaan, dan hasilnya dengan karya Anda sendiri.</p><a href="#sglp-order">Diskusikan proyek serupa <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></details></div></article></div></div></div></section><section class="sglp-section sglp-soft" id="sglp-about"><div class="sglp-wrap"><div class="sglp-split"><div><div class="sglp-section-head"><div><div class="sglp-kicker"><i></i>Our approach</div><h2>Desain yang membantu<br/>orang memahami.</h2><p>Halaman yang baik menyampaikan tujuan dengan jelas. Mulai dari isi, susun hierarki, lalu berikan ruang yang cukup untuk setiap bagian.</p></div></div><p>Gunakan bagian ini untuk menceritakan pendekatan kerja, keahlian, dan jenis proyek yang ingin Anda tangani. Sertakan hasil terukur hanya jika memiliki bukti yang dapat dijelaskan.</p></div><div class="sglp-stack"><div class="sglp-stack-item"><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3C9 1 2 7 5 15c3 8 17 6 15-12ZM4 21 17 7M5 15l7-1"/></svg></span><div><strong>Clarity first</strong><p>Tujuan halaman dan isi utama menjadi dasar keputusan visual.</p></div></div><div class="sglp-stack-item"><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h18v13H3ZM8 21h8M12 17v4"/></svg></span><div><strong>Designed for real screens</strong><p>Tampilan tetap nyaman pada ukuran layar yang berbeda.</p></div></div><div class="sglp-stack-item"><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v12H9l-5 4Z"/></svg></span><div><strong>Built through conversation</strong><p>Masukan yang jelas membantu proyek bergerak ke arah yang tepat.</p></div></div></div></div></div></section><section class="sglp-section"><div class="sglp-wrap"><div class="sglp-split"><div><div class="sglp-section-head"><div><div class="sglp-kicker"><i></i>Questions</div><h2>Ingin bekerja<br/>bersama?</h2><p>Mulai dengan informasi singkat tentang kebutuhan dan target proyek Anda.</p></div></div></div><div class="sglp-faq"><details><summary>Apakah semua proyek di demo merupakan karya nyata?<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></summary><div>Tidak. Nama, ilustrasi, dan uraian proyek pada halaman ini adalah contoh portofolio.</div></details><details><summary>Bagaimana melihat detail sebuah karya?<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></summary><div>Tekan Lihat detail pada kartu. Untuk proyek asli, Anda dapat menambahkan tantangan, proses, hasil, dan tautan situs.</div></details><details><summary>Bisa digunakan untuk portofolio selain website?<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></summary><div>Bisa. Ganti kategori, gambar, dan uraian dengan karya desain, fotografi, produk, atau bidang lain yang sesuai.</div></details></div></div></div></section><section class="sglp-section" id="sglp-order"><div class="sglp-wrap"><div class="sglp-cta"><div><h2>Punya ide yang<br/>ingin diwujudkan?</h2><p>Ini preview landing page. Tombol paket belum memproses pesanan atau pembayaran. Gunakan halaman ini sebagai contoh untuk penawaran produk atau jasa Anda.</p></div><div class="sglp-actions"><a class="sglp-btn" href="https://www.temablogger.com/">Jelajahi TemaBlogger<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a><a class="sglp-btn sglp-btn-ghost" href="https://saegreen.temablogger.com/2026/10/panduan-instalasi-pengaturan-saegreen.html">Lihat panduan SaeGreen<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg></a></div></div></div></section><div class="sglp-page-end">SaeGreen landing page / contoh layout siap disesuaikan.</div></div>

Kustomisasi yang perlu diperiksa

Nama brand, judul, dan deskripsi sudah sesuai.
Harga, fasilitas, lisensi, waktu kerja, dan revisi adalah penawaran Anda sendiri.
Portofolio memakai karya dan informasi yang dapat dipertanggungjawabkan.
Tautan tombol paket, konsultasi, dan navigasi demo sudah diganti.
Halaman ini memakai CSS khusus SaeGreen agar tampil penuh tanpa metadata artikel.
CSS tetap ada di halaman; jangan menghapus tag style saat menempelkan kode.

Integrasi store di tahap berikutnya

Mulai dengan menautkan tombol paket ke halaman produk atau checkout yang benar. Sinkronisasi katalog, status pesanan, akun, unduhan, dan lisensi membutuhkan integrasi backend yang diuji terpisah. Jangan menyimpan token akun atau kunci rahasia di HTML publik.

Pencarian yang disarankan

Landing Page SaeGreen: Preview dan Kode Siap Tempel

Cara memasang

Landing page Produk

Landing page Jasa

Landing page Portofolio

Kustomisasi yang perlu diperiksa

Integrasi store di tahap berikutnya

Comments (0)

Komentar

Posting Komentar

Popular Posts

Panduan Membuat Postingan SaeGreen: Preview dan Kode Komponen

Panduan Instalasi dan Pengaturan SaeGreen

Fitur SaeGreen: Template Blogger Modern untuk Konten yang Nyaman Dibaca

Landing Page SaeGreen: Preview dan Kode Siap Tempel

Cara memasang

Landing page Produk

Landing page Jasa

Landing page Portofolio

Kustomisasi yang perlu diperiksa

Integrasi store di tahap berikutnya

Comments (0)

Komentar

Posting Komentar

Popular Posts

Panduan Membuat Postingan SaeGreen: Preview dan Kode Komponen

Panduan Instalasi dan Pengaturan SaeGreen

Fitur SaeGreen: Template Blogger Modern untuk Konten yang Nyaman Dibaca

Get the latest news in your inbox.