Showing source for: https://yanstd.pages.dev/
Duration: 0.094439s
Server: cloudflare
<!DOCTYPE html>
<html lang="id" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>yanstd — Jasa Website & Desain untuk Usaha Kecil | Batam</title>
<meta name="description" content="Jasa pembuatan website murah untuk UMKM: landing page, website bisnis, toko online, company profile, jasa repair & perbaikan website, audit keamanan, percepat website, dan SEO audit. Mulai Rp499rb, jadi 2–10 hari. Web developer Batam, melayani seluruh Indonesia.">
<meta name="keywords" content="jasa website batam, jasa pembuatan website UMKM, jasa landing page, jasa toko online, company profile, jasa website murah, web developer batam, yanstd, expert advisor metatrader 5, jasa repair website, jasa perbaikan website, jasa buat website murah, jasa website landing page, jasa toko online murah, jasa company profile, audit keamanan website, percepat website, jasa seo website, jasa website lengkap">
<meta name="author" content="yanstd">
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1">
<meta name="theme-color" content="#FDC800">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com; font-src 'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com; script-src 'self' 'unsafe-inline'; connect-src 'self'; form-action 'self' https://wa.me; base-uri 'self'; frame-ancestors 'none'">
<link rel="canonical" href="https://yanstd.web.id/">
<meta property="og:type" content="website">
<meta property="og:locale" content="id_ID">
<meta property="og:site_name" content="yanstd">
<meta property="og:title" content="yanstd — Jasa Website & Desain untuk Usaha Kecil">
<meta property="og:description" content="Website & desain yang bikin usaha kecil kelihatan besar. Mulai Rp499rb, jadi 2–10 hari. 1% Coding, 99% AI Engineering.">
<meta property="og:url" content="https://yanstd.web.id/">
<meta property="og:image" content="https://yanstd.web.id/og-cover.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="yanstd — Jasa Website & Desain untuk Usaha Kecil">
<meta name="twitter:description" content="Website & desain yang bikin usaha kecil kelihatan besar. Mulai Rp1,2jt.">
<meta name="twitter:image" content="https://yanstd.web.id/og-cover.png">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="image" href="avatar.webp" fetchpriority="high">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" media="print" onload="this.media='all'">
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"></noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@500;700&display=swap" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"></noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@500;700&display=swap"></noscript>
<style>
:root{--white:#FBFBF9;--navy:#1C293C;--yellow:#FDC800;--purple:#432DD7;--line:#E2E2DD;--gray:#5B6B84;--gray2:#8A94A6}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--white);color:var(--navy);line-height:1.5;overflow-x:hidden}
.hero-wrap{position:relative;overflow:hidden}
.hero-wrap::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#DEDED7 1.5px,transparent 1.5px),linear-gradient(90deg,#DEDED7 1.5px,transparent 1.5px);background-size:58px 58px;opacity:.9;pointer-events:none}
.hero-wrap::after{content:"";position:absolute;width:520px;height:520px;right:-140px;top:-120px;background:var(--yellow);opacity:.38;border-radius:50%;filter:blur(70px);animation:blob 14s ease-in-out infinite alternate;pointer-events:none}
@keyframes blob{from{transform:translate(0,0) scale(1)}to{transform:translate(-40px,50px) scale(1.15)}}
.hero-wrap .deco-sq{display:block;position:absolute;width:120px;height:120px;border:4px solid var(--purple);right:5%;bottom:12%;opacity:.5;transform:rotate(18deg);animation:spin2 22s linear infinite;pointer-events:none}
@keyframes spin2{to{transform:rotate(378deg)}}
.hero-wrap .deco-circle{display:block;position:absolute;width:150px;height:150px;border:3px dashed var(--navy);border-radius:50%;left:52%;top:8%;opacity:.2;animation:spin2 30s linear infinite reverse;pointer-events:none}
.hero-wrap .container{position:relative;z-index:2}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--navy);color:#fff;padding:12px 18px;z-index:999;font-weight:700}
.container{max-width:1160px;margin:0 auto;padding-left:40px;padding-right:40px;width:100%}
/* NAV */
nav{position:sticky;top:0;z-index:100;background:rgba(251,251,249,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.navin{height:84px;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:900;font-size:26px;letter-spacing:-.5px;text-decoration:none}
.logo b{color:var(--purple)}
.navlinks{display:flex;gap:34px;align-items:center}
.navlinks a{text-decoration:none;font-size:16px;font-weight:500;transition:opacity .2s}
.navlinks a:hover{opacity:.6}
.navcta{background:var(--navy)!important;color:var(--white)!important;padding:12px 22px!important;font-weight:700!important;font-size:15px!important;transition:transform .2s}
.navcta:hover{transform:translateY(-2px);opacity:1!important}
.burger{display:none;background:none;border:2px solid var(--navy);padding:10px 12px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--navy);margin:4px 0}
/* HERO */
.hero{padding-top:68px;padding-bottom:52px;display:flex;justify-content:space-between;align-items:stretch;gap:56px}
.hero-left{flex:1;min-width:0}
h1{font-size:clamp(34px,6.6vw,100px);line-height:1;letter-spacing:-2px;font-weight:900;overflow-wrap:break-word;word-break:break-word}
.mark{background:linear-gradient(transparent 58%,var(--yellow) 58%);padding:0 4px}
.tagline{margin-top:24px;font-size:clamp(17px,2vw,21px);font-weight:700;color:var(--navy)}
.hero-sub{margin-top:10px;font-size:clamp(15px,1.6vw,19px);color:var(--gray);max-width:520px}
.hero-btns{margin-top:34px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.btn-primary{background:var(--yellow);color:var(--navy);font-weight:900;font-size:18px;padding:18px 32px;border:3px solid var(--navy);box-shadow:6px 6px 0 var(--navy);text-decoration:none;display:inline-block;transition:transform .15s,box-shadow .15s}
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:70%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-18deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-120%}80%,100%{left:130%}}
.btn-primary:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--navy)}
.btn-ghost{color:var(--navy);font-weight:700;font-size:18px;text-decoration:none;border-bottom:2px solid var(--navy);padding-bottom:4px}
.hero-avatar{width:38%;max-width:400px;flex-shrink:0;border:1px solid var(--line);padding:16px;background:#fff;display:flex;flex-direction:column;align-self:stretch}
.hero-avatar img{width:100%;flex:1;object-fit:cover;min-height:0;border-radius:2px}
.hero-avatar .tag{margin-top:12px;font-size:13px;color:var(--gray2)}
.hero-avatar img{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* MARQUEE */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;overflow:hidden;white-space:nowrap}
.mtrack{display:inline-flex;animation:mslide 36s linear infinite;will-change:transform}
.marquee .mono{font-size:14px;letter-spacing:1px;color:var(--gray)}
.marquee .dot{color:var(--yellow);padding:0 18px}
@keyframes mslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* SECTION */
section{padding-top:60px;padding-bottom:60px}
section.alt{background:#fff;border-top:1px solid var(--line)}
.seclabel{font-size:13px;letter-spacing:2px;color:var(--purple);font-weight:700}
.sechead{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:36px;gap:20px}
.sechead h2{font-size:clamp(30px,4.4vw,52px);font-weight:900;letter-spacing:-1.5px;margin-top:10px}
.more{font-size:16px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--yellow);padding-bottom:2px;white-space:nowrap}
/* CARDS */
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;align-items:stretch}
.card{position:relative;background:#fff;border:4px solid var(--navy);box-shadow:8px 8px 0 var(--navy);padding:24px 20px 22px;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;overflow:hidden}
.card::after{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--yellow);transform-origin:left}
.card:hover::after{background:var(--purple)}
.card > *{position:relative;z-index:1}
.card:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--navy)}
.card .num{font-size:13px;color:var(--gray2)}
.card .name{font-size:21px;font-weight:900;margin-top:12px;letter-spacing:-.5px;min-height:2.6em;line-height:1.3}
.card .old{font-size:15px;color:#7B8595;text-decoration:line-through;margin-top:12px;min-height:1.4em;display:block}
.card .hprice{display:flex;flex-direction:column;justify-content:flex-end;min-height:104px;margin-bottom:14px}
.card .price{font-size:24px;font-weight:700;background:var(--yellow);display:inline-block;padding:8px 14px;border:3px solid var(--navy);margin-top:6px;align-self:flex-start;white-space:nowrap;min-width:110px;text-align:center}
.card .pill{font-size:10px;letter-spacing:1.5px;color:var(--purple);font-weight:700;margin-top:6px;min-height:1.2em}
.card .from{font-size:12px;color:var(--gray2);margin-top:4px;font-weight:500;letter-spacing:.3px;min-height:1.3em}
.card .feat{margin-top:auto;padding-top:14px;border-top:1px dashed #C9CFDA;display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.card .feat li{font-size:13px;color:#3D4A61;line-height:1.45;padding-left:16px;position:relative}
.card .feat li::before{content:"\2713";position:absolute;left:0;color:var(--purple);font-weight:700}
ul{list-style:none}
.repairrow{margin-top:26px;font-size:16px;color:var(--gray)}
.repairrow b{color:var(--navy)}
.repairrow a{color:var(--navy);font-weight:700}
/* REPAIR CARDS */
.rcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}
@media (max-width:1150px){.rcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rcards{grid-template-columns:1fr}}
.rcard{min-width:0;background:#fff;border:1px solid var(--line);padding:24px 20px;display:flex;flex-direction:column;gap:12px;transition:transform .18s,border-color .18s}
.rcard:hover{transform:translateY(-4px);border-color:var(--navy)}
.rhead{display:flex;align-items:flex-start;gap:12px;min-width:0;min-height:72px}
.rhead > div{min-width:0;flex:1}
.rname{font-size:17px;font-weight:900;letter-spacing:-.3px}
.ricon{width:46px;height:46px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--yellow);border:2.5px solid var(--navy);border-radius:10px}
.ricon i{font-size:20px;color:var(--navy)}
.rname{font-size:17px;font-weight:900;letter-spacing:-.3px}
.rsub{font-size:9px;letter-spacing:1.2px;color:var(--gray2);margin-top:4px;white-space:nowrap}
.rprice{margin-left:58px;display:flex;align-items:center;gap:10px;margin-top:2px}
.rprice .old{font-size:12px;color:#7B8595;text-decoration:line-through;flex-shrink:0}
.rprice .now{font-size:16px;font-weight:900;background:var(--yellow);padding:3px 10px;border:2px solid var(--navy);display:inline-block}
.rcard .rhead{padding-bottom:12px;border-bottom:1px solid var(--line)}
.rcard p{font-size:14px;color:var(--gray);line-height:1.55;margin-top:12px}
.rcard p b{color:var(--navy)}
/* WORKS */
.work-main{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:24px}
.work{border:1px solid var(--line);background:#fff;overflow:hidden}
.work img{width:100%;object-fit:cover;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.work:hover img{transform:scale(1.03)}
.work-main .work img{height:420px;object-position:top}
.work .meta{padding:22px 24px}
.work .k{font-size:12px;letter-spacing:1.5px;color:var(--purple);font-weight:700}
.work h3{font-size:25px;font-weight:900;margin-top:8px;letter-spacing:-.5px}
.work .meta p{font-size:15px;color:var(--gray);margin-top:8px}
.work-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pcard{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column}
.pcard .top{background:var(--navy);padding:20px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;min-height:92px}
.pcard .top .mono{font-size:11px;letter-spacing:1.5px;color:var(--yellow);font-weight:700}
.pcard .top .mono.g{color:#9AA6BD}
.pcard .body{padding:20px 22px;display:flex;flex-direction:column;flex:1}
.pcard h3{font-size:20px;font-weight:900;letter-spacing:-.4px;line-height:1.2}
.pcard .body p{font-size:14px;color:var(--gray);margin-top:8px;line-height:1.55}
.pcard .tech{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.pcard .tech span{font-size:10px;letter-spacing:1px;border:1px solid #C9CFDA;color:#3D4A61;padding:4px 8px}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.work-grid .work{display:flex;flex-direction:column;justify-content:center;padding:28px 26px}
.work-grid h3{font-size:21px;font-weight:900;margin-top:8px}
.work-grid p{font-size:14px;color:var(--gray);margin-top:8px;line-height:1.55}
.note{margin-top:22px;font-size:12px;color:var(--gray2)}
/* STEPS */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.step .big{font-size:60px;font-weight:900;color:transparent;-webkit-text-stroke:2px var(--navy);line-height:1}
.step h3{font-size:23px;font-weight:900;margin-top:10px}
.step p{font-size:16px;color:var(--gray);margin-top:8px}
/* ABOUT */
.about{display:flex;gap:44px;align-items:stretch}
.about-img{width:34%;max-width:340px;flex-shrink:0;border:1px solid var(--line)}
.about-img img{width:100%;height:100%;object-fit:cover}
.about .txt{flex:1;min-width:0}
.about p{font-size:18px;line-height:1.65;color:#33415C;max-width:660px}
.skillgrid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:30px}
.skillgrid .lbl{font-size:12px;letter-spacing:2px;color:var(--purple);font-weight:700}
.tools{margin-top:12px;display:flex;gap:9px;flex-wrap:wrap}
.tools span{font-size:13px;border:1px solid var(--navy);padding:7px 12px;transition:background .2s,color .2s}
.tools span:hover{background:var(--navy);color:#fff}
/* CTA */
.ctablock{background:var(--yellow);border-top:4px solid var(--navy);border-bottom:4px solid var(--navy);padding-top:56px;padding-bottom:56px}
.ctablock .container{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.ctablock h2{font-size:clamp(34px,5vw,58px);font-weight:900;letter-spacing:-2px;line-height:1.02}
.btn-dark{background:var(--navy);color:var(--yellow);font-weight:900;font-size:19px;padding:22px 36px;text-decoration:none;white-space:nowrap;transition:transform .15s}
.btn-dark:hover{transform:translateY(-3px)}
/* PROMO CARD */
.promo{max-width:1060px;margin:0 auto;padding:0 22px}
.promo-inner,.promo{display:flex}
.promo{background:#fff;border:3px solid var(--navy);border-radius:16px;box-shadow:8px 8px 0 var(--yellow);padding:22px 26px;margin-top:26px;margin-bottom:40px;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.promo-txt{font-weight:900;font-size:20px;line-height:1.35}
.promo-txt .mark{color:var(--purple)}
.promo-link{font-weight:700;color:var(--purple);min-height:44px;display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}
.promo-link:hover{text-decoration:underline}
@media (max-width:640px){
.promo{flex-direction:column;align-items:flex-start;gap:12px;padding:20px;margin-top:26px;margin-bottom:34px}
.promo-txt{font-size:17px}
}
/* FOOTER */
footer{padding-top:42px;padding-bottom:42px}
footer .container{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:15px;color:var(--gray2)}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
/* REVEAL ANIM */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
[data-reveal]{opacity:1;transform:none;transition:none}
.hero-left > *{opacity:1;transform:none}
.mtrack{animation:none}
.hero-left > *,.hero-avatar,.mark::before,.btn-primary::after,.hero-wrap::after,.hero-wrap .deco-sq,.hero-wrap .deco-circle{animation:none!important;opacity:1!important;transform:none!important}
.mark::before{transform:scaleX(1)!important}
*{transition-duration:.01ms!important}
}
/* MOBILE */
@media (max-width:900px){
.container{padding-left:22px;padding-right:22px}
.navin{height:64px}
.burger{display:block}
.navlinks{position:absolute;top:64px;left:0;right:0;background:var(--white);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:0;max-height:0;overflow:hidden;transition:max-height .35s ease}
.navlinks.open{max-height:340px}
.navlinks a{padding:16px 22px;border-bottom:1px solid var(--line);font-size:16px}
.navcta{padding:16px 22px!important;text-align:center}
.hero{flex-direction:column;padding-top:36px;padding-bottom:32px;gap:26px}
h1{font-size:34px;letter-spacing:-1px}
.hero-avatar{width:100%;max-width:none}
.hero-avatar img{height:220px}
.hero-btns{margin-top:26px;flex-direction:column;align-items:stretch}
.btn-primary{text-align:center}
.btn-ghost{align-self:center}
section{padding-top:42px;padding-bottom:42px}
.sechead{flex-direction:column;align-items:flex-start;gap:8px}
.sechead h2{letter-spacing:-1px}
.cards{grid-template-columns:1fr;gap:18px}
.rcards{grid-template-columns:1fr;gap:16px}
.card .name{min-height:0}
.work-main .work img{height:210px}
.work-grid{grid-template-columns:1fr}
.work-list{grid-template-columns:1fr}
.steps{grid-template-columns:1fr;gap:28px}
.about{flex-direction:column;gap:24px}
.about-img{width:100%;max-width:none}
.about-img img{height:260px}
.skillgrid{grid-template-columns:1fr;gap:24px}
.ctablock{padding-top:44px;padding-bottom:44px}
.btn-dark{width:100%;text-align:center}
footer .container{flex-direction:column;gap:8px}
}
@media (max-width:400px){
.container{padding-left:18px;padding-right:18px}
h1{font-size:32px}
}
/* LANG TOGGLE */
.langbtn{background:none;border:2px solid var(--navy);font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;padding:8px 12px;cursor:pointer;letter-spacing:1px;display:inline-flex;align-items:center;gap:7px}
.langbtn:hover{background:var(--navy);color:var(--white)}
.navlinks .langbtn{align-self:center;margin-left:6px}
@media (max-width:900px){.navlinks .langbtn{align-self:stretch;margin:12px 22px 16px;justify-self:start}}
.flg{display:inline-block;vertical-align:-1px;border:1px solid rgba(0,0,0,.25);border-radius:2px}
.faqwrap{display:grid;gap:14px;max-width:1000px}
.faq{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 22px;transition:border-color .2s}
.faq[open]{border-color:var(--navy)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:700;color:var(--navy);padding:18px 0;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;color:var(--purple);font-weight:400;flex-shrink:0}
.faq[open] summary::after{content:"\2013"}
.faq p{color:var(--gray);font-size:15.5px;line-height:1.65;padding:0 0 20px;margin:0}
.faq p b{color:var(--navy)}
@media(max-width:640px){.faq summary{font-size:15.5px;padding:15px 0}.faq p{font-size:14.5px}}
</style>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ProfessionalService",
"name": "yanstd",
"alternateName": "yanstd — Jasa Website & Desain untuk Usaha Kecil",
"url": "https://yanstd.web.id/",
"logo": "https://yanstd.web.id/favicon-512.png",
"image": "https://yanstd.web.id/og-cover.png",
"description": "Jasa pembuatan website untuk UMKM: landing page, website bisnis, toko online, company profile, repair, audit keamanan, dan SEO. Batam, melayani seluruh Indonesia.",
"founder": {"@type": "Person", "name": "yanstd"},
"address": {"@type": "PostalAddress", "addressLocality": "Batam", "addressRegion": "Kepulauan Riau", "addressCountry": "ID"},
"areaServed": "ID",
"priceRange": "Rp499rb - Rp5,5jt"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Berapa harga jasa pembuatan website di Batam?",
"acceptedAnswer": {"@type": "Answer", "text": "Di yanstd.web.id, harga mulai Rp499 ribu untuk website Starter. Landing Page Rp1,2 juta, Website Bisnis Rp2 juta, Toko Online Rp4 juta, Company Profile Rp5 juta. Setiap paket termasuk domain .pages.dev, hosting Cloudflare, dan desain custom — bukan template."}
},
{
"@type": "Question",
"name": "Jasa pembuatan website UMKM murah mana yang terpercaya di Indonesia?",
"acceptedAnswer": {"@type": "Answer", "text": "yanstd (yanstd.web.id) adalah jasa website untuk UMKM berbasis di Batam dengan pendekatan AI engineering: website cepat, SEO-ready, dua bahasa, dan harga transparan mulai Rp499 ribu. Portofolio bisa dilihat langsung di yanstd.web.id dan tiap project punya link live yang bisa dites."}
},
{
"@type": "Question",
"name": "Berapa lama pengerjaan website untuk UMKM?",
"acceptedAnswer": {"@type": "Answer", "text": "Landing page umumnya selesai 3-5 hari kerja, website bisnis 1-2 minggu. Termasuk revisi sampai disetujui, dan semua project dilengkapi versi bahasa Inggris opsional."}
},
{
"@type": "Question",
"name": "Apakah ada jasa website gratis untuk UMKM?",
"acceptedAnswer": {"@type": "Answer", "text": "Ya. yanstd memberikan 1-2 landing page gratis untuk UMKM setiap hari Jumat. Caranya DM Instagram @yanstd888 dengan kata \"JUMAT\"."}
}
]
}
</script>
</head>
<body>
<a class="skip" href="#main" data-en="Skip to content">Lewati ke konten</a>
<nav aria-label="Navigasi utama">
<div class="container navin">
<a class="logo" href="/">yanstd<b>.*</b></a>
<button class="burger" id="burger" aria-label="Buka menu" aria-expanded="false" aria-controls="navlinks"><span></span><span></span><span></span></button>
<div class="navlinks" id="navlinks">
<a href="#karya" data-en="works">karya</a>
<a href="#repair" data-en="repair">repair</a>
<a href="#layanan" data-en="services">layanan</a>
<a href="#tentang" data-en="about">tentang</a>
<button class="langbtn" id="langbtn" type="button" aria-label="Ganti bahasa"><svg class="flg" width="18" height="13" viewBox="0 0 18 13" aria-hidden="true"><rect width="18" height="13" fill="#E70011"/><rect y="0" width="18" height="6.5" fill="#E70011"/><rect y="6.5" width="18" height="6.5" fill="#fff"/></svg><span>ID</span></button>
<a class="navcta" href="https://wa.me/6282173514234?text=Halo%20yanstd%2C%20saya%20mau%20konsultasi%20gratis%20soal%20website" target="_blank" rel="noopener noreferrer" data-en="FREE CONSULT!">KONSULTASI GRATIS!</a>
</div>
</div>
</nav>
<main id="main">
<div class="hero-wrap">
<span class="deco-circle" aria-hidden="true"></span>
<span class="deco-sq" aria-hidden="true"></span>
<header class="hero container">
<div class="hero-left">
<h1 data-reveal data-en-html="Website & design that makes small businesses <span class='mark'>look big</span>.<b style='color:var(--purple)'>*</b>">Website & desain yang bikin usaha kecil <span class="mark">kelihatan besar</span>.<b style="color:var(--purple)">*</b></h1>
<p class="tagline" data-reveal data-en="1% Coding, 99% AI Engineering.">1% Coding, 99% AI Engineering.</p>
<p class="hero-sub" data-reveal data-en="yanstd — batam · web & design · since 2024. I help small businesses & brands get an online presence that's clean, fast, and sells.">yanstd — batam · web & desain · sejak 2024. Saya bantu UMKM & brand kecil punya kehadiran online yang rapi, cepat, dan jualan.</p>
<div class="hero-btns" data-reveal>
<a class="btn-primary" href="https://wa.me/6282173514234?text=Halo%20yanstd%2C%20saya%20mau%20order%20website" target="_blank" rel="noopener noreferrer"data-en="ORDER NOW →">ORDER SEKARANG →</a>
<a class="btn-ghost" href="#karya" data-en="see works ↓">lihat karya ↓</a>
</div>
</div>
<div class="hero-avatar" data-reveal>
<img src="avatar.webp" alt="Ilustrasi line art yanstd, web designer asal Batam" width="640" height="800" fetchpriority="high" decoding="async">
<div class="tag mono">yanstd · batam, id</div>
</div>
</header>
</div>
<div class="marquee" aria-hidden="true">
<div class="mtrack" id="mtrack"><span class="mono" data-en="70+ PRODUCTION DESIGNS">70+ DESAIN PRODUKSI</span><span class="dot">●</span><span class="mono" data-en="4 SERVICE PACKAGES">4 PAKET JASA</span><span class="dot">●</span><span class="mono" data-en="REPLIES < 1 HR">RESPON < 1 JAM</span><span class="dot">●</span><span class="mono" data-en="WEB & TRADING AUTOMATION">WEB & AUTOMASI TRADING</span><span class="dot">●</span><span class="mono" data-en="OPEN FOR PROJECT">OPEN FOR PROJECT</span><span data-en="4 SERVICE PACKAGES">4 PAKET JASA</span><span class="dot">●</span><span data-en="REPLIES < 1 HR">RESPON < 1 JAM</span><span class="dot">●</span><span data-en="WEB & TRADING AUTOMATION">WEB & AUTOMASI TRADING</span><span class="dot">●</span><span data-en="OPEN FOR PROJECT">OPEN FOR PROJECT</span><span class="dot">●</span></span><span class="mono" data-en="70+ PRODUCTION DESIGNS">70+ DESAIN PRODUKSI</span><span class="dot">●</span><span class="mono" data-en="4 SERVICE PACKAGES">4 PAKET JASA</span><span class="dot">●</span><span class="mono" data-en="REPLIES < 1 HR">RESPON < 1 JAM</span><span class="dot">●</span><span class="mono" data-en="WEB & TRADING AUTOMATION">WEB & AUTOMASI TRADING</span><span class="dot">●</span><span class="mono" data-en="OPEN FOR PROJECT">OPEN FOR PROJECT</span><span data-en="4 SERVICE PACKAGES">4 PAKET JASA</span><span class="dot">●</span><span data-en="REPLIES < 1 HR">RESPON < 1 JAM</span><span class="dot">●</span><span data-en="WEB & TRADING AUTOMATION">WEB & AUTOMASI TRADING</span><span class="dot">●</span><span data-en="OPEN FOR PROJECT">OPEN FOR PROJECT</span><span class="dot">●</span></span><span class="mono" data-en="70+ PRODUCTION DESIGNS">70+ DESAIN PRODUKSI</span><span class="dot">●</span><span class="mono" data-en="4 SERVICE PACKAGES">4 PAKET JASA</span><span class="dot">●</span><span class="mono" data-en="REPLIES < 1 HR">RESPON < 1 JAM</span><span class="dot">●</span><span class="mono" data-en="WEB & TRADING AUTOMATION">WEB & AUTOMASI TRADING</span><span class="dot">●</span><span class="mono" data-en="OPEN FOR PROJECT">OPEN FOR PROJECT</span><span data-en="4 SERVICE PACKAGES">4 PAKET JASA</span><span class="dot">●</span><span data-en="REPLIES < 1 HR">RESPON < 1 JAM</span><span class="dot">●</span><span data-en="WEB & TRADING AUTOMATION">WEB & AUTOMASI TRADING</span><span class="dot">●</span><span data-en="OPEN FOR PROJECT">OPEN FOR PROJECT</span><span class="dot">●</span></span><span class="mono" data-en="70+ PRODUCTION DESIGNS">70+ DESAIN PRODUKSI</span><span class="dot">●</span><span class="mono" data-en="4 SERVICE PACKAGES">4 PAKET JASA</span><span class="dot">●</span><span class="mono" data-en="REPLIES < 1 HR">RESPON < 1 JAM</span><span class="dot">●</span><span class="mono" data-en="WEB & TRADING AUTOMATION">WEB & AUTOMASI TRADING</span><span class="dot">●</span><span class="mono" data-en="OPEN FOR PROJECT">OPEN FOR PROJECT</span><span data-en="4 SERVICE PACKAGES">4 PAKET JASA</span><span class="dot">●</span><span data-en="REPLIES < 1 HR">RESPON < 1 JAM</span><span class="dot">●</span><span data-en="WEB & TRADING AUTOMATION">WEB & AUTOMASI TRADING</span><span class="dot">●</span><span data-en="OPEN FOR PROJECT">OPEN FOR PROJECT</span><span class="dot">●</span></span></div>
</div>
<section id="layanan">
<div class="container">
<div class="sechead">
<div>
<div class="seclabel mono" data-en="01 — SERVICES">01 — LAYANAN</div>
<h2 data-en="Choose the website package you need.">Pilih paket website yang kamu butuh.</h2>
</div>
<a class="more" href="https://wa.me/6282173514234?text=Halo%2C%20mau%20tanya%20paket%20jasa" target="_blank" rel="noopener noreferrer"data-en="ask about packages →">tanya paket →</a>
</div>
<div class="cards">
<article class="card" data-reveal data-idx="01" style="border-color:var(--purple);box-shadow:8px 8px 0 var(--purple)">
<div class="name" data-en="Starter">Starter</div>
<span class="hprice"><div class="price">Rp499rb</div>
<div class="pill mono" style="background:var(--purple);color:var(--yellow)" data-en="CHEAPEST">TERMURAH</div>
</span><ul class="feat" data-en-html="<li>1 static page: portfolio / sales</li><li>Direct WhatsApp chat button</li><li>Free hosting (yourname.pages.dev)</li><li>Free .pages.dev domain</li><li>Mobile-friendly + basic SEO</li><li>Done in 2–3 days, 1 revision</li>"><li>1 halaman statis: portofolio / jualan</li><li>Tombol chat WA langsung</li><li>Hosting gratis (namakamu.pages.dev)</li><li>Domain .pages.dev termasuk</li><li>Rapi di HP + SEO dasar</li><li>Jadi 2–3 hari, 1x revisi</li></ul>
</article>
<article class="card" data-reveal data-idx="02">
<div class="name" data-en="Landing Page">Landing Page</div>
<span class="hprice"><div class="old">Rp1.500.000</div>
<div class="price">Rp1,2jt</div>
<div class="pill mono" data-en="LAUNCHING">LAUNCHING</div>
</span><ul class="feat" data-en-html="<li>1 page, 6 full sections</li><li>Order form direct to WhatsApp</li><li>Google Analytics + sitemap</li><li>12-mo hosting + .com domain</li><li>Done in 3–5 days</li>"><li>1 halaman, 6 seksi lengkap</li><li>Form order langsung ke WA</li><li>Google Analytics + sitemap</li><li>Hosting 12 bln + domain .com</li><li>Jadi 3–5 hari</li></ul>
</article>
<article class="card" data-reveal data-idx="03">
<div class="name" data-en="Business Website">Website Bisnis</div>
<span class="hprice"><div class="old">Rp2.500.000</div>
<div class="price">Rp2jt</div>
<div class="pill mono" data-en="LAUNCHING">LAUNCHING</div>
</span><ul class="feat" data-en-html="<li>5 pages + copywriting</li><li>Business email [email protected]</li><li>Google Maps & contact buttons</li><li>12-mo hosting + .com domain</li><li>Done in 7–10 days, 3 revisions</li>"><li>5 halaman + copywriting</li><li>Email bisnis [email protected]</li><li>Google Maps & tombol kontak</li><li>Hosting 12 bln + domain .com</li><li>Jadi 7–10 hari, 3x revisi</li></ul>
</article>
<article class="card" data-reveal data-idx="04">
<div class="name" data-en="Online Store">Toko Online</div>
<span class="hprice"><div class="old">Rp4.500.000</div>
<div class="from" data-en="start from">start from</div>
<div class="price">Rp4jt</div>
<div class="pill mono" data-en="LAUNCHING">LAUNCHING</div>
</span><ul class="feat" data-en-html="<li>Catalog + product pages</li><li>Cart & checkout order</li><li>Stock management + coupons</li><li>Automatic daily backups</li><li>First 10 products added</li>"><li>Katalog + halaman produk</li><li>Keranjang & checkout order</li><li>Manajemen stok + kupon</li><li>Backup harian otomatis</li><li>Isi 10 produk pertama</li></ul>
</article>
<article class="card" data-reveal data-idx="05">
<div class="name" data-en="Company Profile">Company Profile</div>
<span class="hprice"><div class="old">Rp5.500.000</div>
<div class="from">start from</div>
<div class="price">Rp5jt</div>
<div class="pill mono" data-en="LAUNCHING">LAUNCHING</div>
</span><ul class="feat" data-en-html="<li>7 formal corporate pages</li><li>Vision-mission, structure, portfolio</li><li>Simple careers form</li><li>Optional ID/EN multilingual</li><li>4 revision rounds</li>"><li>7 halaman korporat formal</li><li>Visi-misi, struktur, portofolio</li><li>Form karier sederhana</li><li>Multi-bahasa ID/EN opsional</li><li>4x putaran revisi</li></ul>
</article>
</div>
</div>
</section>
<section id="repair">
<div class="container">
<div class="sechead">
<div>
<div class="seclabel mono" data-en="02 — REPAIR & RESCUE">02 — REPAIR & RESCUE</div>
<h2 data-en="Website problems? Repair & maintenance service.">Website bermasalah? Jasa perbaikan & perawatan website.</h2>
</div>
<a class="more" href="https://wa.me/6282173514234?text=Halo%2C%20website%20saya%20bermasalah" target="_blank" rel="noopener noreferrer"data-en="free diagnosis →">diagnosa gratis →</a>
</div>
<div class="rcards">
<article class="rcard" data-reveal>
<div class="rhead">
<span class="ricon" aria-hidden="true"><i class="fa-solid fa-screwdriver-wrench"></i></span>
<div>
<div class="rname" data-en="Web Rescue">Web Rescue</div>
<div class="rsub mono" data-en="C1 · 1–2 WORKING DAYS">C1 · 1–2 HARI KERJA</div>
</div>
</div>
<div class="rprice"><div class="old">Rp750rb</div><div class="now">Rp500rb</div></div>
<p data-en="Website down, broken, or hacked? Diagnosis first — <b>free</b>. Can't fix it? <b>You don't pay.</b>">Website down, error, atau kena hack? Diagnosa dulu — <b>gratis</b>. Gagal beres? <b>Gak usah bayar.</b></p>
</article>
<article class="rcard" data-reveal>
<div class="rhead">
<span class="ricon" aria-hidden="true"><i class="fa-solid fa-shield-halved"></i></span>
<div>
<div class="rname" data-en="Security & Hardening">Security & Keamanan</div>
<div class="rsub mono" data-en="C4 · 20-POINT AUDIT">C4 · AUDIT 20 POIN</div>
</div>
</div>
<div class="rprice"><div class="old">Rp750rb</div><div class="now">Rp500rb</div></div>
<p data-en="Audit of 20 weak points (login, SSL, malware, firewall) + hardening + malware cleanup if found.">Audit 20 titik lemah (login, SSL, malware, firewall) + hardening + pembersihan malware kalau ketemu.</p>
</article>
<article class="rcard" data-reveal>
<div class="rhead">
<span class="ricon" aria-hidden="true"><i class="fa-solid fa-bolt"></i></span>
<div>
<div class="rname" data-en="Page Speed">Page Speed</div>
<div class="rsub mono" data-en="C5 · TARGET SCORE 80+">C5 · TARGET SKOR 80+</div>
</div>
</div>
<div class="rprice"><div class="old">Rp600rb</div><div class="now">Rp400rb</div></div>
<p data-en="A slow website drives customers away. Image compression, caching, lazy-loading — before vs after scores reported.">Website lemot = pelanggan kabur. Kompres gambar, cache, lazy-load — skor sebelum vs sesudah dilaporkan.</p>
</article>
<article class="rcard" data-reveal>
<div class="rhead">
<span class="ricon" aria-hidden="true"><i class="fa-solid fa-magnifying-glass-chart"></i></span>
<div>
<div class="rname" data-en="SEO Audit & Fix">SEO Audit & Fix</div>
<div class="rsub mono" data-en="C6 · 20 FIXES">C6 · 20 PERBAIKAN</div>
</div>
</div>
<div class="rprice"><div class="old">Rp1,2jt</div><div class="now">Rp800rb</div></div>
<p data-en="Get found on Google: indexing, sitemap, structured data, meta, speed — 20 findings fixed on the spot.">Biar ditemukan Google: cek indexing, sitemap, structured data, meta, kecepatan — 20 temuan langsung dibereskan.</p>
</article>
</div>
<p class="note mono" data-reveal data-en="Bundles: Rescue + Security Rp900k · Speed + SEO Rp1.1m">Bundling: Rescue + Security Rp900rb · Speed + SEO Rp1,1jt</p>
</div>
</section>
<section id="karya" class="alt">
<div class="container">
<div class="sechead">
<div>
<div class="seclabel mono" data-en="03 — SELECTED WORK">03 — KARYA PILIHAN</div>
<h2 data-en="Websites I have built.">Portofolio website yang sudah dibuat.</h2>
</div>
<a class="more" href="https://www.node2mint.com" target="_blank" rel="noopener noreferrer"data-en="visit live →">kunjungi live →</a>
</div>
<div class="work-main">
<article class="work" data-reveal>
<a href="https://www.node2mint.com" target="_blank" rel="noopener noreferrer">
<img src="node2mint.webp" alt="Preview website Node2Mint.com — marketplace AI API multi-model" width="1280" height="720" loading="lazy" decoding="async">
</a>
<div class="meta">
<div class="k mono" data-en="WEB APP · LIVE">WEB APP · LIVE</div>
<h3>Node2Mint.com</h3>
<p data-en="Multi-model AI marketplace — Next.js, Cloudflare, 5 languages. Publicly accessible at node2mint.com.">Marketplace AI multi-model — Next.js, Cloudflare, 5 bahasa. Bisa diakses publik di node2mint.com.</p>
</div>
</article>
<article class="work" data-reveal>
<a href="https://bsphone11.pages.dev" target="_blank" rel="noopener noreferrer">
<img src="work-bsphone.webp" alt="Preview website BSphone11 — landing page toko HP di Batam: iPhone, Android, service & reseller" width="1280" height="720" loading="lazy" decoding="async">
</a>
<div class="meta">
<div class="k mono" data-en="LANDING PAGE · SMALL BUSINESS · LIVE">LANDING PAGE · UMKM · LIVE</div>
<h3 data-en="BSphone11 — Phone Store Batam">BSphone11 — Toko HP Batam</h3>
<p data-en="One-page landing for a phone store in Batam: products, service & reseller. Casual copy, local Batam SEO, PageSpeed Desktop 99 · Mobile 91 · SEO 100. COD in Batam, ships across Indonesia.">Landing page 1 halaman untuk toko HP di Batam: produk, service & reseller. Copy santai, SEO lokal Batam, PageSpeed Desktop 99 · Mobile 91 · SEO 100. Bisa COD Batam, kirim se-Indonesia.</p>
</div>
</article>
<article class="work" data-reveal>
<a href="https://yanstd.web.id" target="_blank" rel="noopener noreferrer">
<img src="work-yanstd.webp" alt="Preview website yanstd.web.id — situs jasa website & desain" width="1280" height="720" loading="lazy" decoding="async">
</a>
<div class="meta">
<div class="k mono" data-en="SERVICE WEBSITE · LIVE">WEBSITE JASA · LIVE</div>
<h3>yanstd.web.id</h3>
<p data-en="Website & design service site for small businesses — neobrutalism, mobile friendly, SEO-ready, full security headers. The site you are looking at right now.">Situs jasa website & desain untuk usaha kecil — neobrutalism, mobile friendly, SEO siap, security headers lengkap. Situs yang sedang kamu lihat ini.</p>
</div>
</article>
<article class="work" data-reveal>
<a href="https://pacejourney.pages.dev" target="_blank" rel="noopener noreferrer">
<img src="work-pacejourney.webp" alt="Preview website Pace Journey — personal branding travel creator & backpacker nebeng keliling Indonesia" width="1280" height="720" loading="lazy" decoding="async">
</a>
<div class="meta">
<div class="k mono" data-en="PERSONAL BRANDING · TRAVEL CREATOR · LIVE">PERSONAL BRANDING · TRAVEL CREATOR · LIVE</div>
<h3 data-en="Pace Journey — Hitchhiking Across Indonesia">Pace Journey — Nebeng Keliling Indonesia</h3>
<p data-en="Personal branding for travel creator Alvian Rusdy Urbinas: TikTok & Instagram highlight embeds, travel gallery, QRIS/Sociabuzz donations, dark adventure design. PageSpeed Desktop 98 · SEO 100.">Personal branding untuk travel creator Alvian Rusdy Urbinas: highlight video TikTok & Instagram embed, galeri perjalanan, donasi QRIS/Sociabuzz, dark adventure design. PageSpeed Desktop 98 · SEO 100.</p>
</div>
</article>
<article class="work" data-reveal>
<a href="https://raycollectibles-id.pages.dev" target="_blank" rel="noopener noreferrer">
<img src="work-ray.webp" alt="Preview website RayCollectibles.id — toko trading card game premium, koleksi graded PSA GEM MT 10, dark luxury gold" width="1280" height="720" loading="lazy" decoding="async">
</a>
<div class="meta">
<div class="k mono" data-en="TCG STORE · DARK LUXURY · LIVE">TOKO TCG · DARK LUXURY · LIVE</div>
<h3>RayCollectibles.id</h3>
<p data-en="Premium trading card store site: owner's graded collection (PSA GEM MT 10, sealed booster boxes) presented in dark-luxury editorial style, TCG logo marquee, collection slider. PageSpeed Desktop 99 · Mobile 87.">Situs toko trading card premium: koleksi owner bergrade (PSA GEM MT 10, booster box sealed) ditampilkan gaya dark-luxury editorial, marquee logo TCG, slider koleksi. PageSpeed Desktop 99 · Mobile 87.</p>
</div>
</article>
</div>
<div class="work-main">
<article class="work" data-reveal>
<img src="work-apexquant-dash.webp" alt="Preview dashboard ApexQuant — live PAMM MT5 performance: equity curve, win rate, drawdown, Sharpe ratio" width="1280" height="598" loading="lazy" decoding="async">
<div class="meta">
<div class="k mono" data-en="WEB APP · TRADING PLATFORM · LIVE">WEB APP · TRADING PLATFORM · LIVE</div>
<h3 data-en="ApexQuant — MT5 Performance Dashboard">ApexQuant — MT5 Performance Dashboard</h3>
<p data-en="Real-time dashboard for MetaTrader 5 trading accounts: equity curve, win rate, profit factor, drawdown & Sharpe ratio broadcast live. Built to see more than just profit.">Dashboard real-time untuk akun trading MetaTrader 5: equity curve, win rate, profit factor, drawdown & Sharpe ratio disiarkan live. Dibangun untuk melihat lebih dari sekadar profit.</p>
</div>
</article>
</div>
<div class="work-list">
<article class="pcard" data-reveal>
<div class="top">
<span class="mono" data-en="WEB APP · TRADING">WEB APP · TRADING</span>
</div>
<div class="body">
<h3>Polymarket Auto Trade</h3>
<p data-en="Automated trading bot for prediction markets — opportunity monitoring, order execution, and position management run on their own.">Bot trading otomatis untuk pasar prediksi — pemantauan peluang, eksekusi order, dan manajemen posisi jalan sendiri.</p>
<div class="tech mono"><span>PYTHON</span><span>API</span><span data-en="AUTOMATION">AUTOMASI</span></div>
</div>
</article>
<article class="pcard" data-reveal>
<div class="top">
<span class="mono" data-en="WEB APP · TRADING">WEB APP · TRADING</span>
</div>
<div class="body">
<h3>Binance Auto Trade</h3>
<p data-en="Binance trading bot with automated strategy, real-time position monitoring, and clean execution logs.">Bot trading Binance dengan strategi otomatis, monitoring posisi real-time, dan log eksekusi yang rapi.</p>
<div class="tech mono"><span>PYTHON</span><span>BINANCE API</span><span>DASHBOARD</span></div>
</div>
</article>
<article class="pcard" data-reveal>
<div class="top">
<span class="mono" data-en="WEB · LANDING">WEB · LANDING</span>
</div>
<div class="body">
<h3>Superblox — Landing Page</h3>
<p data-en="Product offer page with conversion structure: hero, benefits, pricing, and order call-to-action.">Halaman penawaran produk dengan struktur konversi: hero, keunggulan, paket harga, dan ajakan order.</p>
<div class="tech mono"><span>HTML/CSS</span><span>TAILWIND</span><span data-en="RESPONSIVE">RESPONSIF</span></div>
</div>
</article>
<article class="pcard" data-reveal>
<div class="top">
<span class="mono" data-en="WEB APP · DASHBOARD">WEB APP · DASHBOARD</span>
</div>
<div class="body">
<h3>Admin Stok & Webhook Order</h3>
<p data-en="Admin panel to manage stock and incoming orders (webhooks). Orders are logged automatically — no manual input.">Panel admin untuk kelola stok dan order masuk (webhook). Pesanan otomatis tercatat, tidak perlu input manual.</p>
<div class="tech mono"><span>PHP/LARAVEL</span><span>MYSQL</span><span>WEBHOOK</span></div>
</div>
</article>
<article class="pcard" data-reveal>
<div class="top">
<span class="mono" data-en="EA · METATRADER 5">EA · METATRADER 5</span>
</div>
<div class="body">
<h3>Expert Advisor MT5</h3>
<p data-en="Automated trading robot for MetaTrader 5 — programmed entry/exit rules, risk management, runs 24 hours unattended.">Robot trading otomatis untuk MetaTrader 5 — aturan entry/exit terprogram, manajemen risiko, jalan 24 jam tanpa ditunggu.</p>
<div class="tech mono"><span>MQL5</span><span>ALGORITMA</span><span>RISK MGMT</span></div>
</div>
</article>
<article class="pcard" data-reveal style="border-style:dashed;border-color:#C9CFDA">
<div class="top" style="background:#F4F4F1">
<span class="mono" style="color:#8A94A6" data-en="NEXT PROJECT">PROJECT BERIKUTNYA</span>
</div>
<div class="body">
<h3 data-en-html="Your turn goes here.<b style='color:var(--purple)'>*</b>">Giliran kamu di sini.<b style="color:var(--purple)">*</b></h3>
<p data-en="Before/after of every project will be displayed here — real proof, not promises.">Before/after setiap project bakal kupajang di sini — bukti nyata, bukan janji.</p>
<div class="tech mono"><span data-en="OPEN SLOT">SLOT TERBUKA</span></div>
</div>
</article>
</div>
<div class="work-grid">
<article class="work" data-reveal>
<div class="k mono" data-en="HOW I WORK">CARA KERJA</div>
<h3 data-en="AI-powered, still manually reviewed.">AI-powered, tetap dicek manual.</h3>
<p data-en="Every page is built with 99% AI engineering — then reviewed line by line. Fast, but still clean.">Setiap halaman dibangun dengan 99% AI engineering — lalu kureview baris per baris. Cepat, tapi tetap rapi.</p>
</article>
<article class="work" data-reveal>
<div class="k mono" data-en="SCOPE">LINGKUP</div>
<h3 data-en="Websites, admin panels, even trading robots.">Website, panel admin, sampai robot trading.</h3>
<p data-en="Not just visuals. I also build the systems behind them: dashboards, webhooks, automation, and MT5 Expert Advisors.">Bukan cuma tampilan. Saya juga bangun sistem yang jalan di belakangnya: dashboard, webhook, otomasi, dan Expert Advisor MT5.</p>
</article>
</div>
<p class="note mono" data-reveal data-en="* Limited slots — I take on 1–2 projects per month to keep the quality high.">* Slot terbatas — saya kerjakan 1–2 project per bulan biar hasilnya maksimal.</p>
</div>
</section>
<section id="proses">
<div class="container">
<div class="sechead">
<div>
<div class="seclabel mono" data-en="04 — PROCESS">04 — PROSES</div>
<h2 data-en="Easy, 3 steps.">Gampang, 3 langkah.</h2>
</div>
</div>
<div class="steps">
<div class="step" data-reveal>
<div class="big mono">01</div>
<h3 data-en="WhatsApp Chat">Chat WhatsApp</h3>
<p data-en="Tell me about your business. Free consultation, no pressure.">Ceritain usaha kamu. Konsultasi gratis, gak ada paksaan.</p>
</div>
<div class="step" data-reveal>
<div class="big mono">02</div>
<h3 data-en="Send Details">Kirim Detail</h3>
<p data-en="Logo, photos, products, prices, WA number. That's it.">Logo, foto, produk, harga, nomor WA. Itu aja.</p>
</div>
<div class="step" data-reveal>
<div class="big mono">03</div>
<h3 data-en="Website Done">Website jadi</h3>
<p data-en="3–10 working days. You review, revise, go live.">3–10 hari kerja. Kamu review, revisi, live.</p>
</div>
</div>
</div>
</section>
<section id="tentang" class="alt">
<div class="container">
<div class="sechead">
<div>
<div class="seclabel mono" data-en="05 — ABOUT">05 — TENTANG</div>
<h2 data-en="Who is behind this.">Siapa di balik ini.</h2>
</div>
</div>
<div class="about">
<div class="about-img" data-reveal>
<img src="avatar.webp" alt="yanstd — freelance web developer & desainer asal Batam" width="640" height="800" loading="lazy" decoding="async">
</div>
<div class="txt" data-reveal>
<p data-en="I'm <b>yanstd</b>, from Batam, Indonesia. I build websites & designs for small businesses that need to look professional without an agency budget. I also built <b>Node2Mint</b> — an AI & digital-needs marketplace. Open for freelance projects and collaborations.">Saya <b>yanstd</b>, asal Batam. Fokus bikin website & desain untuk usaha kecil yang butuh kelihatan profesional tanpa budget agensi. Juga bangun <b>Node2Mint</b> — marketplace AI & kebutuhan digital. Terbuka untuk project lepas maupun kolaborasi.</p>
<div class="skillgrid">
<div>
<div class="lbl mono" data-en="TECHNICAL SKILLS">TECHNICAL SKILLS</div>
<div class="tools mono"><span>PHP</span><span>LARAVEL</span><span>MYSQL / POSTGRESQL</span><span>PYTHON</span><span>GO</span><span>REACT</span><span>TAILWIND CSS</span><span>MACHINE LEARNING</span><span>MQL5</span></div>
</div>
<div>
<div class="lbl mono" data-en="TOOLS / AI STACK">TOOLS / AI STACK</div>
<div class="tools mono"><span>CLAUDE</span><span>CHATGPT</span><span>DEEPSEEK</span><span>GEMINI</span><span>HERMES AGENT</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ctablock" id="kontak">
<div class="container">
<h2 data-reveal data-en-html="Have a project?<br>Let's talk — free.">Punya project?<br>Ngobrol dulu, gratis.</h2>
<a class="btn-dark js-wa" href="https://wa.me/6282173514234?text=Halo%20yanstd%2C%20saya%20mau%20ngobrol%20soal%20project" target="_blank" rel="noopener noreferrer" data-reveal data-en="CHAT ON WHATSAPP →">CHAT WHATSAPP →</a>
</div>
</section>
<section id="faq" class="alt">
<div class="container">
<div class="sechead"><div>
<div class="seclabel mono" data-en="06 — FAQ">06 — TANYA JAWAB</div>
<h2 data-en="Common questions.">Pertanyaan yang sering ditanya.</h2>
</div></div>
<div class="faqwrap">
<details class="faq"><summary>Berapa harga jasa pembuatan website?</summary><p>Starter mulai <b>Rp499 ribu</b>. Landing Page Rp1,2jt, Website Bisnis Rp2jt, Toko Online Rp4jt, Company Profile Rp5jt. Semua sudah termasuk desain custom — bukan template, dan harga transparan tanpa biaya tersembunyi.</p></details>
<details class="faq"><summary>Berapa lama pengerjaannya?</summary><p>Landing page biasanya <b>3–5 hari kerja</b>, website bisnis 1–2 minggu. Termasuk revisi sampai kamu bilang oke.</p></details>
<details class="faq"><summary>Website-nya bisa bahasa Inggris juga?</summary><p>Bisa. Semua project ku dukung <b>dua bahasa</b> (ID/EN) — cocok kalau targetmu ada pelanggan luar juga.</p></details>
<details class="faq"><summary>Ada yang gratis?</summary><p>Ada. Tiap <b>Jumat</b> aku buatkan 1–2 landing page <b>gratis</b> untuk UMKM. DM Instagram <a href="https://instagram.com/yanstd888" target="_blank" rel="noopener">@yanstd888</a> dengan kata "JUMAT".</p></details>
<details class="faq"><summary>Website lama kena hack / lambat / rusak?</summary><p>Bisa dibenerin. Ada layanan Web Rescue, Security Hardening, Page Speed, dan SEO Audit — mulai Rp400rb. Diagnosa gratis, gagal beres gak usah bayar.</p></details>
</div>
</div>
</section>
</main>
<div class="promo">
<div class="promo-txt">GRATIS: 1–2 landing page untuk UMKM tiap Jumat <span class="mark">DM "JUMAT"</span></div>
<a class="promo-link" href="/free-landing-page-umkm" data-en="See details">Lihat detail →</a>
</div>
<footer>
<div class="container">
<div>© <span id="yr">2026</span> yanstd — batam, indonesia</div>
<div class="mono"><a href="https://instagram.com/yanstd888" target="_blank" rel="noopener noreferrer">@YANSTD888</a> · <a href="https://www.node2mint.com" target="_blank" rel="noopener noreferrer">NODE2MINT.COM</a></div>
</div>
<a href="/jasa-website-batam.html" style="display:none">jasa pembuatan website batam</a>
</footer>
<script type="application/ld+json">
{"@context":"https://schema.org","@graph":[
{"@type":"Person","@id":"https://yanstd.web.id/#person","name":"yanstd","jobTitle":"Web Developer & Designer","address":{"@type":"PostalAddress","addressLocality":"Batam","addressCountry":"ID"},"knowsAbout":["PHP","Laravel","MySQL","PostgreSQL","Python","Go","React","Tailwind CSS","Machine Learning","MQL5"],"sameAs":["https://instagram.com/yanstd888","https://www.node2mint.com"]},
{"@type":"ProfessionalService","@id":"https://yanstd.web.id/#service","name":"yanstd — Jasa Website & Desain","description":"Jasa pembuatan website, toko online, company profile, dashboard admin, otomasi trading, dan Expert Advisor MetaTrader 5.","url":"https://yanstd.web.id/","founder":{"@id":"https://yanstd.web.id/#person"},"areaServed":{"@type":"Country","name":"Indonesia"},"address":{"@type":"PostalAddress","addressLocality":"Batam","addressCountry":"ID"},"priceRange":"Rp499000-Rp5000000","hasOfferCatalog":{"@type":"OfferCatalog","name":"Paket Jasa Website","itemListElement":[
{"@type":"Offer","price":"499000","priceCurrency":"IDR","itemOffered":{"@type":"Service","name":"Paket Starter"}},
{"@type":"Offer","price":"1200000","priceCurrency":"IDR","itemOffered":{"@type":"Service","name":"Landing Page"}},
{"@type":"Offer","price":"2000000","priceCurrency":"IDR","itemOffered":{"@type":"Service","name":"Website Bisnis"}},
{"@type":"Offer","price":"4000000","priceCurrency":"IDR","itemOffered":{"@type":"Service","name":"Toko Online"}},
{"@type":"Offer","price":"5000000","priceCurrency":"IDR","itemOffered":{"@type":"Service","name":"Company Profile"}}]}},
{"@type":"WebSite","@id":"https://yanstd.web.id/#website","url":"https://yanstd.web.id/","name":"yanstd","inLanguage":"id-ID","publisher":{"@id":"https://yanstd.web.id/#person"}}
]}
</script>
<script>
(function(){
"use strict";
var d=document;
d.getElementById('yr').textContent=new Date().getFullYear();
/* mobile nav */
var b=d.getElementById('burger'),nl=d.getElementById('navlinks');
b.addEventListener('click',function(){
var o=nl.classList.toggle('open');
b.setAttribute('aria-expanded',o?'true':'false');
});
nl.addEventListener('click',function(e){if(e.target.tagName==='A'){nl.classList.remove('open');b.setAttribute('aria-expanded','false');}});
/* scroll reveal */
var els=d.querySelectorAll('[data-reveal]');
if('IntersectionObserver' in window){
var io=new IntersectionObserver(function(list){
list.forEach(function(en){if(en.isIntersecting){en.target.classList.add('in');io.unobserve(en.target);}});
},{rootMargin:'0px 0px -8% 0px',threshold:.08});
els.forEach(function(el,i){
var r=el.getBoundingClientRect();
if(r.top<window.innerHeight&&r.bottom>0){el.classList.add('in');}
else{el.style.transitionDelay=Math.min(i%4*70,210)+'ms';io.observe(el);}
});
}else{els.forEach(function(el){el.classList.add('in');});}
/* rate limiter: max 1 CTA / 1.5s, max 8 per menit */
var last=0,count=0,win=0;
d.addEventListener('click',function(e){
var a=e.target.closest?e.target.closest('.js-wa,.btn-primary,.navcta'):null;
if(!a)return;
var now=Date.now();
if(now-win>60000){win=now;count=0;}
if(now-last<1500||count>=8){
e.preventDefault();e.stopPropagation();
a.style.opacity='.5';a.style.pointerEvents='none';
setTimeout(function(){a.style.opacity='';a.style.pointerEvents='';},1500);
return;
}
last=now;count++;
},true);
})();
</script>
<script>
/* i18n toggle ID/EN */
(function(){
"use strict";
var d=document;
var btn=d.getElementById('langbtn');
var metaDesc=d.querySelector('meta[name="description"]');
var ogTitle=d.querySelector('meta[property="og:title"]');
var titles={id:'yanstd — Jasa Website & Desain untuk Usaha Kecil | Batam',
en:'yanstd — Website & Design Services for Small Businesses | Batam, Indonesia'};
var descs={id:'Jasa pembuatan website murah untuk UMKM: landing page, website bisnis, toko online, company profile, jasa repair, audit keamanan, percepat website, SEO audit. Mulai Rp499rb. Web developer Batam.',
en:'Affordable website services for small businesses: landing pages, business websites, online stores, company profiles, repair, security audits, speed optimization, SEO. From IDR 499k. Web developer in Batam, Indonesia.'};
function apply(lang){
var en = lang==='en';
d.documentElement.lang = en?'en':'id';
document.title = titles[lang];
if(metaDesc) metaDesc.setAttribute('content',descs[lang]);
if(ogTitle) ogTitle.setAttribute('content',titles[lang]);
d.querySelectorAll('[data-en]').forEach(function(el){
if(en){ if(!el.getAttribute('data-id')) el.setAttribute('data-id', el.innerHTML);
el.innerHTML = el.getAttribute('data-en'); }
else { if(el.hasAttribute('data-id')) el.innerHTML = el.getAttribute('data-id'); }
});
d.querySelectorAll('[data-en-html]').forEach(function(el){
if(en){ if(!el.getAttribute('data-id-html')) el.setAttribute('data-id-html', el.innerHTML);
el.innerHTML = el.getAttribute('data-en-html'); }
else { if(el.hasAttribute('data-id-html')) el.innerHTML = el.getAttribute('data-id-html'); }
});
btn.innerHTML = en ? `<svg class='flg' width="18" height="13" viewBox="0 0 60 30" aria-hidden="true"><clipPath id="u"><rect width="60" height="30"/></clipPath><g clip-path="url(#u)"><rect width="60" height="30" fill="#012169"/><path d="M0,0 60,30 M60,0 0,30" stroke="#fff" stroke-width="6"/><path d="M0,0 60,30 M60,0 0,30" stroke="#C8102E" stroke-width="4"/><path d="M30,0 v30 M0,15 h60" stroke="#fff" stroke-width="10"/><path d="M30,0 v30 M0,15 h60" stroke="#C8102E" stroke-width="6"/></g></svg><span>EN</span>` : `<svg class='flg' width="18" height="13" viewBox="0 0 18 13" aria-hidden="true"><rect width="18" height="13" fill="#E70011"/><rect y="6.5" width="18" height="6.5" fill="#fff"/></svg><span>ID</span>`;
btn.setAttribute('aria-label', en?'Ganti ke Bahasa Indonesia':'Switch to English');
try{localStorage.setItem('ylang',lang);}catch(e){}
}
var saved='id';
try{saved=localStorage.getItem('ylang')||'id';}catch(e){}
if(saved==='en') apply('en');
btn.addEventListener('click',function(){
apply(d.documentElement.lang==='en'?'id':'en');
});
})();
</script>
</body>
</html>
| # |
Url |
Url |
Source |
Date |
| 1 |
https://yanstd.pages.dev/ |
|
2026-10-17 02:38:17 |
| 2 |
https://www.texarkanatwins.com/%25… |
|
2026-10-17 02:38:17 |
| 3 |
https://techxa.com.my/ |
|
2026-10-17 02:38:17 |
| 4 |
https://www.myfortune3cart.com/ |
|
2026-10-17 02:38:17 |
| 5 |
https://www.texarkanatwins.com/%25… |
|
2026-10-17 02:38:17 |
| 6 |
https://hikingthebalkans.com/ |
|
2026-10-17 02:38:16 |
| 7 |
https://party-wall-notices87541.dr… |
|
2026-10-17 02:38:16 |
| 8 |
https://cy2tec.com/blog7.html |
|
2026-10-17 02:38:16 |
| 9 |
https://www.texarkanatwins.com/%25… |
|
2026-10-17 02:38:16 |
| 10 |
https://emiliowrcla.bloguetechno.c… |
|
2026-10-17 02:38:15 |
| 11 |
https://www.texarkanatwins.com/%25… |
|
2026-10-17 02:38:15 |
| 12 |
https://www.texarkanatwins.com/%25… |
|
2026-10-17 02:38:15 |
| 13 |
https://identity.flickr.com/login |
|
2026-10-17 02:38:15 |
| 14 |
https://www.texarkanatwins.com/%25… |
|
2026-10-17 02:38:15 |
| 15 |
https://sonharcomcasamentodeoutra3… |
|
2026-10-17 02:38:15 |
| 16 |
https://www.magcloud.com/user/stri… |
|
2026-10-17 02:38:15 |
| 17 |
https://www.texarkanatwins.com/%25… |
|
2026-10-17 02:38:15 |
| 18 |
https://dirtyjuicyburgers.com/ |
|
2026-10-17 02:38:15 |
| 19 |
https://www.texarkanatwins.com/%25… |
|
2026-10-17 02:38:14 |
| 20 |
https://crownau77-au.com/ |
|
2026-10-17 02:38:14 |