websites.id | Bikin Website Gak Cuma Bagus, Tapi Berkelas<\/title>\r\n<script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap\" rel=\"stylesheet\"\/>\r\n<script id=\"tailwind-config\">\r\n tailwind.config = {\r\n darkMode: \"class\",\r\n theme: {\r\n extend: {\r\n \"colors\": {\r\n \"background\": \"#0b1326\",\r\n \"on-surface\": \"#dae2fd\",\r\n \"on-error-container\": \"#ffdad6\",\r\n \"secondary-fixed-dim\": \"#bcc7de\",\r\n \"on-tertiary-fixed\": \"#001e2c\",\r\n \"on-secondary-fixed\": \"#111c2d\",\r\n \"surface-container-high\": \"#222a3d\",\r\n \"on-primary-container\": \"#064e3b\",\r\n \"outline\": \"#8b90a0\",\r\n \"primary-fixed-dim\": \"#6ee7b7\",\r\n \"secondary-fixed\": \"#d8e3fb\",\r\n \"surface-container-lowest\": \"#060e20\",\r\n \"surface-container\": \"#171f33\",\r\n \"primary-container\": \"#10b981\",\r\n \"on-secondary\": \"#263143\",\r\n \"surface-container-low\": \"#131b2e\",\r\n \"on-tertiary-fixed-variant\": \"#004c69\",\r\n \"primary\": \"#10b981\",\r\n \"on-tertiary-container\": \"#002d40\",\r\n \"inverse-on-surface\": \"#283044\",\r\n \"on-secondary-fixed-variant\": \"#3c475a\",\r\n \"on-tertiary\": \"#00354a\",\r\n \"secondary\": \"#bcc7de\",\r\n \"primary-fixed\": \"#a7f3d0\",\r\n \"tertiary\": \"#34d399\",\r\n \"surface-variant\": \"#2d3449\",\r\n \"secondary-container\": \"#3e495d\",\r\n \"error\": \"#ffb4ab\",\r\n \"on-background\": \"#dae2fd\",\r\n \"on-secondary\": \"#aeb9d0\",\r\n \"on-primary-fixed-variant\": \"#065f46\",\r\n \"on-primary-fixed\": \"#022c22\",\r\n \"surface-tint\": \"#10b981\",\r\n \"surface-container-highest\": \"#2d3449\",\r\n \"tertiary-container\": \"#059669\",\r\n \"error-container\": \"#93000a\",\r\n \"surface-bright\": \"#31394d\",\r\n \"surface\": \"#0b1326\",\r\n \"on-primary\": \"#ffffff\",\r\n \"on-surface-variant\": \"#c1c6d7\",\r\n \"outline-variant\": \"#414754\",\r\n \"tertiary-fixed\": \"#d1fae5\",\r\n \"tertiary-fixed-dim\": \"#34d399\",\r\n \"surface-dim\": \"#0b1326\",\r\n \"inverse-primary\": \"#059669\",\r\n \"inverse-surface\": \"#dae2fd\",\r\n \"on-error\": \"#690005\"\r\n },\r\n \"borderRadius\": {\r\n \"DEFAULT\": \"0.125rem\",\r\n \"lg\": \"0.25rem\",\r\n \"xl\": \"0.5rem\",\r\n \"full\": \"0.75rem\"\r\n },\r\n \"fontFamily\": {\r\n \"headline\": [\"Space Grotesk\"],\r\n \"body\": [\"Manrope\"],\r\n \"label\": [\"Inter\"]\r\n }\r\n },\r\n },\r\n }\r\n <\/script>\r\n<style>\r\n .material-symbols-outlined {\r\n font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\r\n }\r\n .glass-panel {\r\n background: rgba(23, 31, 51, 0.6);\r\n backdrop-filter: blur(24px);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-background text-on-surface font-body selection:bg-primary\/30 selection:text-primary\">\r\n\r\n<nav class=\"fixed top-0 w-full z-50 bg-[#0b1326]\/60 backdrop-blur-xl\">\r\n<div class=\"flex justify-between items-center px-8 py-4 max-w-7xl mx-auto font-space-grotesk tracking-tight\">\r\n<div class=\"text-2xl font-bold tracking-tighter text-[#dae2fd]\">websites.id<\/div>\r\n<div class=\"hidden md:flex items-center gap-8\">\r\n<a class=\"text-[#dae2fd]\/80 hover:text-[#dae2fd] transition-colors\" href=\"#\">Layanan<\/a>\r\n<a class=\"text-[#dae2fd]\/80 hover:text-[#dae2fd] transition-colors\" href=\"#\">Portofolio<\/a>\r\n<a class=\"text-[#dae2fd]\/80 hover:text-[#dae2fd] transition-colors\" href=\"#\">Cara Kerja<\/a>\r\n<a class=\"text-[#dae2fd]\/80 hover:text-[#dae2fd] transition-colors\" href=\"#\">Testimoni<\/a>\r\n<\/div>\r\n<button class=\"bg-primary text-on-primary px-6 py-2 rounded-full font-bold hover:bg-primary\/90 active:scale-95 transition-all\">\r\n Konsultasi Gratis\r\n <\/button>\r\n<\/div>\r\n<\/nav>\r\n<main>\r\n\r\n<section class=\"relative min-h-screen flex items-center pt-20 overflow-hidden\">\r\n<div class=\"absolute inset-0 z-0\">\r\n<div class=\"absolute inset-0 bg-gradient-to-br from-background via-background\/90 to-primary\/5\"><\/div>\r\n<img decoding=\"async\" class=\"w-full h-full object-cover opacity-30 mix-blend-overlay\" data-alt=\"Abstract futuristic digital network\" src=\"https:\/\/lh3.googleusercontent.com\/aida-public\/AB6AXuANuhRdosLy-seqNKrbVrJGJ8LYjx_mbBITaNQBgV9S3Tgg0OHgrvKCECIxLWkS3vxVgZyHs7uma0UipR--zTAsBUWWhUo-cL-jr1ZklEszfhvUZx_Os6hUOtz9wub4n1kclPUZh0dDx1b8BTVFeWQsPNjJRbP3tf22ppHGYiwKNhoyQq7Sir0ba_Wv590ZdTIKHBx-4oJPe6YbXLxhicnSweT7Xfhjp8drD_YdyHNGKQGMeQGDNPcj2YaPVPQ_U0Es1EdDkbWDFS0\"\/>\r\n<\/div>\r\n<div class=\"container mx-auto px-8 z-10 grid grid-cols-1 lg:grid-cols-12 gap-12\">\r\n<div class=\"lg:col-span-8\">\r\n<span class=\"font-label text-primary tracking-widest text-sm uppercase mb-6 block\">Premium Web Engineering<\/span>\r\n<h1 class=\"font-headline text-6xl md:text-8xl font-bold leading-tight tracking-tighter mb-8\">\r\n Bikin Website<br\/>\r\n<span class=\"text-transparent bg-clip-text bg-gradient-to-r from-primary to-tertiary\">Gak Cuma Bagus, Tapi Berkelas.<\/span>\r\n<\/h1>\r\n<p class=\"font-body text-xl md:text-2xl text-on-surface-variant max-w-2xl mb-10 leading-relaxed\">\r\n Kami bantu bangun kehadiran digital brand kamu dengan standar engineering tinggi, bukan sekadar templatan yang biasa-biasa aja.\r\n <\/p>\r\n<div class=\"flex flex-wrap gap-4\">\r\n<button class=\"bg-primary text-on-primary px-8 py-4 rounded-full font-bold text-lg transition-all active:scale-95 hover:shadow-[0_0_20px_rgba(16,185,129,0.4)]\">\r\n Mulai Proyek\r\n <\/button>\r\n<button class=\"border border-outline-variant text-on-surface px-8 py-4 rounded-full font-bold text-lg hover:bg-surface-container transition-all\">\r\n Lihat Hasil Kerja Kami\r\n <\/button>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"absolute right-[-10%] bottom-[10%] w-[500px] h-[500px] bg-primary\/10 rounded-full blur-[120px] pointer-events-none\"><\/div>\r\n<\/section>\r\n\r\n<section class=\"py-32 px-8 bg-surface-container-lowest\">\r\n<div class=\"max-w-7xl mx-auto\">\r\n<div class=\"mb-20\">\r\n<h2 class=\"font-headline text-4xl md:text-5xl font-bold mb-4\">Layanan Kami<\/h2>\r\n<p class=\"text-on-surface-variant text-lg max-w-xl\">Pake teknologi paling update buat kasih solusi digital yang sat-set, gampang diskalakan, dan cakep dipandang.<\/p>\r\n<\/div>\r\n<div class=\"grid grid-cols-1 md:grid-cols-6 gap-6\">\r\n\r\n<div class=\"md:col-span-4 bg-surface-container p-10 rounded-xl hover:bg-surface-container-high transition-all group\">\r\n<div class=\"mb-8\">\r\n<span class=\"material-symbols-outlined text-primary text-4xl\" data-icon=\"code\">code<\/span>\r\n<\/div>\r\n<h3 class=\"font-headline text-3xl font-bold mb-4\">Custom Web Development<\/h3>\r\n<p class=\"text-on-surface-variant text-lg mb-8 max-w-md\">Arsitektur kelas enterprise pake React atau Next.js. Backend-nya kenceng, dibikin khusus sesuai kebutuhan bisnis kamu.<\/p>\r\n<img decoding=\"async\" class=\"w-full h-48 object-cover rounded-lg opacity-40 group-hover:opacity-60 transition-opacity\" data-alt=\"Code on monitor\" src=\"https:\/\/lh3.googleusercontent.com\/aida-public\/AB6AXuD8VguKdu4S-2fjutv_t7ZRBNCv81nss6FDMLJGildtTwNr6rpSMFpzTkiy-T7tL01SWALoCWzJS_FNfB7tkATyjXsaCBHcSXFafwtC-VO6sIADZQ6HBbBPxYgI6QKpiNnds3vy1Cxtk6oxCLO9Spkfkw0WGKu2JJjd30Rf4fSiLT8ITiRlnByW8lqBCn5awZS75Uh3izkseNnigfHUZS4SEN-HlX-NOTv1YocrTY6JzNET5IwSS4ppSbX_ascHkmAMspzfpCDJU04\"\/>\r\n<\/div>\r\n\r\n<div class=\"md:col-span-2 bg-surface-container p-10 rounded-xl hover:bg-surface-container-high transition-all group\">\r\n<div class=\"mb-8\">\r\n<span class=\"material-symbols-outlined text-primary text-4xl\" data-icon=\"auto_awesome_motion\">auto_awesome_motion<\/span>\r\n<\/div>\r\n<h3 class=\"font-headline text-3xl font-bold mb-4\">Desain UI\/UX<\/h3>\r\n<p class=\"text-on-surface-variant mb-6\">Tampilan estetik ala majalah kelas atas, tapi tetep enak dipake dan gak bikin pusing user.<\/p>\r\n<div class=\"flex flex-col gap-2\">\r\n<div class=\"h-1 bg-primary\/20 rounded-full w-full overflow-hidden\">\r\n<div class=\"h-full bg-primary w-[95%]\"><\/div>\r\n<\/div>\r\n<span class=\"text-xs font-label text-outline uppercase tracking-widest\">User Experience First<\/span>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"md:col-span-3 bg-surface-container p-10 rounded-xl hover:bg-surface-container-high transition-all\">\r\n<div class=\"mb-8\">\r\n<span class=\"material-symbols-outlined text-primary text-4xl\" data-icon=\"shopping_bag\">shopping_bag<\/span>\r\n<\/div>\r\n<h3 class=\"font-headline text-3xl font-bold mb-4\">Solusi E-commerce<\/h3>\r\n<p class=\"text-on-surface-variant\">Ubah pengunjung jadi pembeli dengan proses checkout yang mulus dan sistem manajemen stok yang gak ribet.<\/p>\r\n<\/div>\r\n\r\n<div class=\"md:col-span-3 bg-surface-container p-10 rounded-xl hover:bg-surface-container-high transition-all border-b-2 border-transparent hover:border-primary\/20\">\r\n<div class=\"mb-8\">\r\n<span class=\"material-symbols-outlined text-primary text-4xl\" data-icon=\"cloud\">cloud<\/span>\r\n<\/div>\r\n<h3 class=\"font-headline text-3xl font-bold mb-4\">Cloud Hosting & Security<\/h3>\r\n<p class=\"text-on-surface-variant\">Infrastruktur cloud dengan jaminan uptime 99,9% dan proteksi keamanan tingkat tinggi supaya data kamu aman terus.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/section>\r\n\r\n<section class=\"py-32 px-8\">\r\n<div class=\"max-w-7xl mx-auto\">\r\n<div class=\"flex justify-between items-end mb-16\">\r\n<div>\r\n<h2 class=\"font-headline text-4xl md:text-5xl font-bold mb-4\">Portofolio Kami<\/h2>\r\n<p class=\"text-on-surface-variant text-lg\">Intip beberapa proyek yang udah sukses kami kerjain.<\/p>\r\n<\/div>\r\n<a class=\"text-primary font-bold hover:underline flex items-center gap-2\" href=\"#\">\r\n Lihat Semua Project <span class=\"material-symbols-outlined text-sm\" data-icon=\"arrow_forward\">arrow_forward<\/span>\r\n<\/a>\r\n<\/div>\r\n<div class=\"grid grid-cols-1 md:grid-cols-2 gap-12\">\r\n\r\n<div class=\"space-y-6\">\r\n<div class=\"aspect-video overflow-hidden rounded-xl bg-surface-container group\">\r\n<img decoding=\"async\" class=\"w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700 scale-105 group-hover:scale-100\" data-alt=\"Modern minimalist website\" src=\"https:\/\/lh3.googleusercontent.com\/aida-public\/AB6AXuDvfKjDzceK03y8VmvuRA5BvbjsDyTRFyuuONqGaETP1ZlCReGHAPihttVav8Ry1AquE8b-T1epbFQyrAfWX7ui7PxLSJV08pwYGlzifwdSWIqHl1BrYZz1KpRri_-dHDukpqH-y3WkM_wkvttWuXouKsADsu0brk8SLGXhe5ikYM-p3z28stSEEDju1al75Vq167WPwkO9hQYJbPrtxr41iwnnAHCmY3tRgk8yOMIO5fg57IHtuETDK9HBq8N0XjJQ5dwvFbb-21M\"\/>\r\n<\/div>\r\n<div>\r\n<span class=\"font-label text-sm text-outline uppercase tracking-widest\">Fintech \u2022 2024<\/span>\r\n<h3 class=\"font-headline text-2xl font-bold mt-2\">Platform Nexus Capital<\/h3>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"space-y-6 md:mt-24\">\r\n<div class=\"aspect-video overflow-hidden rounded-xl bg-surface-container group\">\r\n<img decoding=\"async\" class=\"w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700 scale-105 group-hover:scale-100\" data-alt=\"High-tech dashboard\" src=\"https:\/\/lh3.googleusercontent.com\/aida-public\/AB6AXuCXXdejPFd0NahKPeLMxtjAVySNDdXkAh8eq3fGwYjy8caLzknvgmmLfg8I17wcWdYwWjyLmVz0nd0FX3LRS55PFGdhyN5nr-KmjYySp6jCoDgj2qX-xi2RuGraXqPuqFNdrCkAgEX05e9POx_xJo8-DO7zZWUb7D5G8Ew5fa-XxZCPBeaX0IvLHFTiNeXUM2VdkmjRZkdwflYCQKTjU0_CChzZLaMxw4vxH7wNSvwD2zzItfPkdrO3PvSP7QCH_fL49mj2xSLWGAM\"\/>\r\n<\/div>\r\n<div>\r\n<span class=\"font-label text-sm text-outline uppercase tracking-widest\">SaaS \u2022 2023<\/span>\r\n<h3 class=\"font-headline text-2xl font-bold mt-2\">Dashboard Vortex Analytics<\/h3>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/section>\r\n\r\n<section class=\"py-32 px-8 bg-surface-container-low overflow-hidden\">\r\n<div class=\"max-w-7xl mx-auto relative\">\r\n<div class=\"text-center mb-24\">\r\n<h2 class=\"font-headline text-4xl md:text-5xl font-bold mb-4\">Gimana Cara Kami Kerja?<\/h2>\r\n<p class=\"text-on-surface-variant text-lg max-w-2xl mx-auto\">Kami punya proses yang rapi supaya hasilnya gak meleset dari harapan kamu.<\/p>\r\n<\/div>\r\n<div class=\"relative grid grid-cols-1 md:grid-cols-4 gap-8\">\r\n<div class=\"hidden md:block absolute top-12 left-0 w-full h-px bg-gradient-to-r from-transparent via-outline-variant to-transparent\"><\/div>\r\n\r\n<div class=\"relative z-10 text-center space-y-4\">\r\n<div class=\"w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold mx-auto mb-6\">01<\/div>\r\n<h4 class=\"font-headline text-xl font-bold\">Diskusi Ide<\/h4>\r\n<p class=\"text-on-surface-variant text-sm\">Kita ngobrol santai buat nentuin target, siapa usernya, dan spek teknisnya.<\/p>\r\n<\/div>\r\n\r\n<div class=\"relative z-10 text-center space-y-4\">\r\n<div class=\"w-12 h-12 rounded-full bg-surface-container-high border border-outline-variant text-on-surface flex items-center justify-center font-bold mx-auto mb-6\">02<\/div>\r\n<h4 class=\"font-headline text-xl font-bold\">Proses Desain<\/h4>\r\n<p class=\"text-on-surface-variant text-sm\">Tim kami bakal bikin konsep visual dan pengalaman user yang oke punya.<\/p>\r\n<\/div>\r\n\r\n<div class=\"relative z-10 text-center space-y-4\">\r\n<div class=\"w-12 h-12 rounded-full bg-surface-container-high border border-outline-variant text-on-surface flex items-center justify-center font-bold mx-auto mb-6\">03<\/div>\r\n<h4 class=\"font-headline text-xl font-bold\">Coding & Dev<\/h4>\r\n<p class=\"text-on-surface-variant text-sm\">Saatnya tim engineer kami beraksi bikin website yang solid dan responsif.<\/p>\r\n<\/div>\r\n\r\n<div class=\"relative z-10 text-center space-y-4\">\r\n<div class=\"w-12 h-12 rounded-full bg-surface-container-high border border-outline-variant text-on-surface flex items-center justify-center font-bold mx-auto mb-6\">04<\/div>\r\n<h4 class=\"font-headline text-xl font-bold\">Launch!<\/h4>\r\n<p class=\"text-on-surface-variant text-sm\">Website siap online! Kami pantau terus biar makin hari makin kenceng.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/section>\r\n\r\n<section class=\"py-32 px-8\">\r\n<div class=\"max-w-7xl mx-auto\">\r\n<div class=\"grid grid-cols-1 lg:grid-cols-2 gap-20 items-center\">\r\n<div>\r\n<h2 class=\"font-headline text-4xl md:text-5xl font-bold mb-8\">Kata Mereka yang Udah Cobain<\/h2>\r\n<div class=\"space-y-12\">\r\n<div class=\"relative\">\r\n<span class=\"material-symbols-outlined text-8xl absolute -top-10 -left-6 opacity-10\" data-icon=\"format_quote\">format_quote<\/span>\r\n<p class=\"font-body text-2xl italic text-on-surface relative z-10 leading-relaxed\">\r\n \"Bener-bener puas kerja bareng websites.id. Hasilnya gak cuma cakep doang, tapi konversi penjualan kami naik drastis semenjak pake platform baru ini. Kerjanya cepet dan profesional banget!\"\r\n <\/p>\r\n<div class=\"mt-6\">\r\n<p class=\"font-bold text-primary\">Sarah Chen<\/p>\r\n<p class=\"text-on-surface-variant text-sm uppercase tracking-widest font-label\">CTO, Lumina Systems Indonesia<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"grid grid-cols-2 gap-4\">\r\n<div class=\"aspect-square bg-surface-container rounded-xl flex items-center justify-center p-8 grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all\">\r\n<span class=\"font-headline text-2xl font-black tracking-tighter opacity-40\">PARTNER_1<\/span>\r\n<\/div>\r\n<div class=\"aspect-square bg-surface-container rounded-xl flex items-center justify-center p-8 grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all\">\r\n<span class=\"font-headline text-2xl font-black tracking-tighter opacity-40\">PARTNER_2<\/span>\r\n<\/div>\r\n<div class=\"aspect-square bg-surface-container rounded-xl flex items-center justify-center p-8 grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all\">\r\n<span class=\"font-headline text-2xl font-black tracking-tighter opacity-40\">PARTNER_3<\/span>\r\n<\/div>\r\n<div class=\"aspect-square bg-surface-container rounded-xl flex items-center justify-center p-8 grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all\">\r\n<span class=\"font-headline text-2xl font-black tracking-tighter opacity-40\">PARTNER_4<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/section>\r\n\r\n<section class=\"py-32 px-8\">\r\n<div class=\"max-w-7xl mx-auto\">\r\n<div class=\"bg-gradient-to-r from-surface-container to-surface-container-high rounded-[2rem] p-12 md:p-24 text-center relative overflow-hidden\">\r\n<div class=\"absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary\/5 to-transparent\"><\/div>\r\n<div class=\"relative z-10\">\r\n<h2 class=\"font-headline text-4xl md:text-6xl font-bold mb-8\">Siap Bikin Brand Kamu <br\/>Makin Berkelas?<\/h2>\r\n<p class=\"text-on-surface-variant text-xl max-w-2xl mx-auto mb-12\">Yuk ngobrolin gimana kami bisa bantu bisnis kamu makin bersinar di dunia digital.<\/p>\r\n<button class=\"bg-primary text-on-primary px-12 py-5 rounded-full font-bold text-xl hover:scale-105 transition-all shadow-xl shadow-primary\/20\">\r\n Mulai Proyek Sekarang\r\n <\/button>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/section>\r\n<\/main>\r\n\r\n<footer class=\"bg-[#060e20] w-full py-12 px-8 border-t border-outline-variant\/10\">\r\n<div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-7xl mx-auto\">\r\n<div class=\"space-y-6\">\r\n<div class=\"text-xl font-black text-[#dae2fd]\">websites.id<\/div>\r\n<p class=\"text-[#dae2fd]\/60 font-manrope text-sm leading-relaxed\">\r\n Bantu bangun kehadiran digital lewat engineering presisi dan desain yang berkelas.\r\n <\/p>\r\n<\/div>\r\n<div class=\"space-y-4\">\r\n<h4 class=\"font-bold text-primary mb-4\">Navigasi<\/h4>\r\n<ul class=\"space-y-2\">\r\n<li><a class=\"text-[#dae2fd]\/60 hover:text-[#10b981] transition-colors font-manrope text-sm\" href=\"#\">Layanan<\/a><\/li>\r\n<li><a class=\"text-[#dae2fd]\/60 hover:text-[#10b981] transition-colors font-manrope text-sm\" href=\"#\">Portofolio<\/a><\/li>\r\n<li><a class=\"text-[#dae2fd]\/60 hover:text-[#10b981] transition-colors font-manrope text-sm\" href=\"#\">Cara Kerja<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div class=\"space-y-4\">\r\n<h4 class=\"font-bold text-primary mb-4\">Legal<\/h4>\r\n<ul class=\"space-y-2\">\r\n<li><a class=\"text-[#dae2fd]\/60 hover:text-[#10b981] transition-colors font-manrope text-sm\" href=\"#\">Kebijakan Privasi<\/a><\/li>\r\n<li><a class=\"text-[#dae2fd]\/60 hover:text-[#10b981] transition-colors font-manrope text-sm\" href=\"#\">Syarat & Ketentuan<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div class=\"space-y-4\">\r\n<h4 class=\"font-bold text-primary mb-4\">Hubungi Kami<\/h4>\r\n<ul class=\"space-y-2\">\r\n<li><a class=\"text-[#dae2fd]\/60 hover:text-[#10b981] transition-colors font-manrope text-sm\" href=\"#\">LinkedIn<\/a><\/li>\r\n<li><a class=\"text-[#dae2fd]\/60 hover:text-[#10b981] transition-colors font-manrope text-sm\" href=\"#\">GitHub<\/a><\/li>\r\n<li><a class=\"text-[#dae2fd]\/60 hover:text-[#10b981] transition-colors font-manrope text-sm\" href=\"#\">Kontak Kami<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<div class=\"max-w-7xl mx-auto mt-16 pt-8 border-t border-outline-variant\/10 text-center\">\r\n<p class=\"text-[#dae2fd]\/60 font-manrope text-sm\">\u00a9 2024 websites.id. Partner Digital Kamu.<\/p>\r\n<\/div>\r\n<\/footer>\r\n<\/body><\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>websites.id | Bikin Website Gak Cuma Bagus, Tapi Berkelas websites.id Layanan Portofolio Cara Kerja Testimoni Konsultasi Gratis Premium Web Engineering Bikin Website Gak Cuma Bagus, Tapi Berkelas. Kami bantu bangun kehadiran digital brand kamu dengan standar engineering tinggi, bukan sekadar templatan yang biasa-biasa aja. Mulai Proyek Lihat Hasil Kerja Kami Layanan Kami Pake teknologi paling […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-63","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/websites.id\/index.php?rest_route=\/wp\/v2\/pages\/63","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websites.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/websites.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/websites.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websites.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=63"}],"version-history":[{"count":13,"href":"https:\/\/websites.id\/index.php?rest_route=\/wp\/v2\/pages\/63\/revisions"}],"predecessor-version":[{"id":76,"href":"https:\/\/websites.id\/index.php?rest_route=\/wp\/v2\/pages\/63\/revisions\/76"}],"wp:attachment":[{"href":"https:\/\/websites.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nwebsites.id | Bikin Website Gak Cuma Bagus, Tapi Berkelas<\/title>\r\n<script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap\" rel=\"stylesheet\"\/>\r\n<script id=\"tailwind-config\">\r\n tailwind.config = {\r\n darkMode: \"class\",\r\n theme: {\r\n extend: {\r\n \"colors\": {\r\n \"background\": \"#0b1326\",\r\n \"on-surface\": \"#dae2fd\",\r\n \"on-error-container\": \"#ffdad6\",\r\n \"secondary-fixed-dim\": \"#bcc7de\",\r\n \"on-tertiary-fixed\": \"#001e2c\",\r\n \"on-secondary-fixed\": \"#111c2d\",\r\n \"surface-container-high\": \"#222a3d\",\r\n \"on-primary-container\": \"#064e3b\",\r\n \"outline\": \"#8b90a0\",\r\n \"primary-fixed-dim\": \"#6ee7b7\",\r\n \"secondary-fixed\": \"#d8e3fb\",\r\n \"surface-container-lowest\": \"#060e20\",\r\n \"surface-container\": \"#171f33\",\r\n \"primary-container\": \"#10b981\",\r\n \"on-secondary\": \"#263143\",\r\n \"surface-container-low\": \"#131b2e\",\r\n \"on-tertiary-fixed-variant\": \"#004c69\",\r\n \"primary\": \"#10b981\",\r\n \"on-tertiary-container\": \"#002d40\",\r\n \"inverse-on-surface\": \"#283044\",\r\n \"on-secondary-fixed-variant\": \"#3c475a\",\r\n \"on-tertiary\": \"#00354a\",\r\n \"secondary\": \"#bcc7de\",\r\n \"primary-fixed\": \"#a7f3d0\",\r\n \"tertiary\": \"#34d399\",\r\n \"surface-variant\": \"#2d3449\",\r\n \"secondary-container\": \"#3e495d\",\r\n \"error\": \"#ffb4ab\",\r\n \"on-background\": \"#dae2fd\",\r\n \"on-secondary\": \"#aeb9d0\",\r\n \"on-primary-fixed-variant\": \"#065f46\",\r\n \"on-primary-fixed\": \"#022c22\",\r\n \"surface-tint\": \"#10b981\",\r\n \"surface-container-highest\": \"#2d3449\",\r\n \"tertiary-container\": \"#059669\",\r\n \"error-container\": \"#93000a\",\r\n \"surface-bright\": \"#31394d\",\r\n \"surface\": \"#0b1326\",\r\n \"on-primary\": \"#ffffff\",\r\n \"on-surface-variant\": \"#c1c6d7\",\r\n \"outline-variant\": \"#414754\",\r\n \"tertiary-fixed\": \"#d1fae5\",\r\n \"tertiary-fixed-dim\": \"#34d399\",\r\n \"surface-dim\": \"#0b1326\",\r\n \"inverse-primary\": \"#059669\",\r\n \"inverse-surface\": \"#dae2fd\",\r\n \"on-error\": \"#690005\"\r\n },\r\n \"borderRadius\": {\r\n \"DEFAULT\": \"0.125rem\",\r\n \"lg\": \"0.25rem\",\r\n \"xl\": \"0.5rem\",\r\n \"full\": \"0.75rem\"\r\n },\r\n \"fontFamily\": {\r\n \"headline\": [\"Space Grotesk\"],\r\n \"body\": [\"Manrope\"],\r\n \"label\": [\"Inter\"]\r\n }\r\n },\r\n },\r\n }\r\n <\/script>\r\n<style>\r\n .material-symbols-outlined {\r\n font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\r\n }\r\n .glass-panel {\r\n background: rgba(23, 31, 51, 0.6);\r\n backdrop-filter: blur(24px);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-background text-on-surface font-body selection:bg-primary\/30 selection:text-primary\">\r\n\r\n<nav class=\"fixed top-0 w-full z-50 bg-[#0b1326]\/60 backdrop-blur-xl\">\r\n<div class=\"flex justify-between items-center px-8 py-4 max-w-7xl mx-auto font-space-grotesk tracking-tight\">\r\n<div class=\"text-2xl font-bold tracking-tighter text-[#dae2fd]\">websites.id<\/div>\r\n<div class=\"hidden md:flex items-center gap-8\">\r\n<a class=\"text-[#dae2fd]\/80 hover:text-[#dae2fd] transition-colors\" href=\"#\">Layanan<\/a>\r\n<a class=\"text-[#dae2fd]\/80 hover:text-[#dae2fd] transition-colors\" href=\"#\">Portofolio<\/a>\r\n<a class=\"text-[#dae2fd]\/80 hover:text-[#dae2fd] transition-colors\" href=\"#\">Cara Kerja<\/a>\r\n<a class=\"text-[#dae2fd]\/80 hover:text-[#dae2fd] transition-colors\" href=\"#\">Testimoni<\/a>\r\n<\/div>\r\n<button class=\"bg-primary text-on-primary px-6 py-2 rounded-full font-bold hover:bg-primary\/90 active:scale-95 transition-all\">\r\n Konsultasi Gratis\r\n <\/button>\r\n<\/div>\r\n<\/nav>\r\n<main>\r\n\r\n<section class=\"relative min-h-screen flex items-center pt-20 overflow-hidden\">\r\n<div class=\"absolute inset-0 z-0\">\r\n<div class=\"absolute inset-0 bg-gradient-to-br from-background via-background\/90 to-primary\/5\"><\/div>\r\n<img decoding=\"async\" class=\"w-full h-full object-cover opacity-30 mix-blend-overlay\" data-alt=\"Abstract futuristic digital network\" src=\"https:\/\/lh3.googleusercontent.com\/aida-public\/AB6AXuANuhRdosLy-seqNKrbVrJGJ8LYjx_mbBITaNQBgV9S3Tgg0OHgrvKCECIxLWkS3vxVgZyHs7uma0UipR--zTAsBUWWhUo-cL-jr1ZklEszfhvUZx_Os6hUOtz9wub4n1kclPUZh0dDx1b8BTVFeWQsPNjJRbP3tf22ppHGYiwKNhoyQq7Sir0ba_Wv590ZdTIKHBx-4oJPe6YbXLxhicnSweT7Xfhjp8drD_YdyHNGKQGMeQGDNPcj2YaPVPQ_U0Es1EdDkbWDFS0\"\/>\r\n<\/div>\r\n<div class=\"container mx-auto px-8 z-10 grid grid-cols-1 lg:grid-cols-12 gap-12\">\r\n<div class=\"lg:col-span-8\">\r\n<span class=\"font-label text-primary tracking-widest text-sm uppercase mb-6 block\">Premium Web Engineering<\/span>\r\n<h1 class=\"font-headline text-6xl md:text-8xl font-bold leading-tight tracking-tighter mb-8\">\r\n Bikin Website<br\/>\r\n<span class=\"text-transparent bg-clip-text bg-gradient-to-r from-primary to-tertiary\">Gak Cuma Bagus, Tapi Berkelas.<\/span>\r\n<\/h1>\r\n<p class=\"font-body text-xl md:text-2xl text-on-surface-variant max-w-2xl mb-10 leading-relaxed\">\r\n Kami bantu bangun kehadiran digital brand kamu dengan standar engineering tinggi, bukan sekadar templatan yang biasa-biasa aja.\r\n <\/p>\r\n<div class=\"flex flex-wrap gap-4\">\r\n<button class=\"bg-primary text-on-primary px-8 py-4 rounded-full font-bold text-lg transition-all active:scale-95 hover:shadow-[0_0_20px_rgba(16,185,129,0.4)]\">\r\n Mulai Proyek\r\n <\/button>\r\n<button class=\"border border-outline-variant text-on-surface px-8 py-4 rounded-full font-bold text-lg hover:bg-surface-container transition-all\">\r\n Lihat Hasil Kerja Kami\r\n <\/button>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"absolute right-[-10%] bottom-[10%] w-[500px] h-[500px] bg-primary\/10 rounded-full blur-[120px] pointer-events-none\"><\/div>\r\n<\/section>\r\n\r\n<section class=\"py-32 px-8 bg-surface-container-lowest\">\r\n<div class=\"max-w-7xl mx-auto\">\r\n<div class=\"mb-20\">\r\n<h2 class=\"font-headline text-4xl md:text-5xl font-bold mb-4\">Layanan Kami<\/h2>\r\n<p class=\"text-on-surface-variant text-lg max-w-xl\">Pake teknologi paling update buat kasih solusi digital yang sat-set, gampang diskalakan, dan cakep dipandang.<\/p>\r\n<\/div>\r\n<div class=\"grid grid-cols-1 md:grid-cols-6 gap-6\">\r\n\r\n<div class=\"md:col-span-4 bg-surface-container p-10 rounded-xl hover:bg-surface-container-high transition-all group\">\r\n<div class=\"mb-8\">\r\n<span class=\"material-symbols-outlined text-primary text-4xl\" data-icon=\"code\">code<\/span>\r\n<\/div>\r\n<h3 class=\"font-headline text-3xl font-bold mb-4\">Custom Web Development<\/h3>\r\n<p class=\"text-on-surface-variant text-lg mb-8 max-w-md\">Arsitektur kelas enterprise pake React atau Next.js. Backend-nya kenceng, dibikin khusus sesuai kebutuhan bisnis kamu.<\/p>\r\n<img decoding=\"async\" class=\"w-full h-48 object-cover rounded-lg opacity-40 group-hover:opacity-60 transition-opacity\" data-alt=\"Code on monitor\" src=\"https:\/\/lh3.googleusercontent.com\/aida-public\/AB6AXuD8VguKdu4S-2fjutv_t7ZRBNCv81nss6FDMLJGildtTwNr6rpSMFpzTkiy-T7tL01SWALoCWzJS_FNfB7tkATyjXsaCBHcSXFafwtC-VO6sIADZQ6HBbBPxYgI6QKpiNnds3vy1Cxtk6oxCLO9Spkfkw0WGKu2JJjd30Rf4fSiLT8ITiRlnByW8lqBCn5awZS75Uh3izkseNnigfHUZS4SEN-HlX-NOTv1YocrTY6JzNET5IwSS4ppSbX_ascHkmAMspzfpCDJU04\"\/>\r\n<\/div>\r\n\r\n<div class=\"md:col-span-2 bg-surface-container p-10 rounded-xl hover:bg-surface-container-high transition-all group\">\r\n<div class=\"mb-8\">\r\n<span class=\"material-symbols-outlined text-primary text-4xl\" data-icon=\"auto_awesome_motion\">auto_awesome_motion<\/span>\r\n<\/div>\r\n<h3 class=\"font-headline text-3xl font-bold mb-4\">Desain UI\/UX<\/h3>\r\n<p class=\"text-on-surface-variant mb-6\">Tampilan estetik ala majalah kelas atas, tapi tetep enak dipake dan gak bikin pusing user.<\/p>\r\n<div class=\"flex flex-col gap-2\">\r\n<div class=\"h-1 bg-primary\/20 rounded-full w-full overflow-hidden\">\r\n<div class=\"h-full bg-primary w-[95%]\"><\/div>\r\n<\/div>\r\n<span class=\"text-xs font-label text-outline uppercase tracking-widest\">User Experience First<\/span>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"md:col-span-3 bg-surface-container p-10 rounded-xl hover:bg-surface-container-high transition-all\">\r\n<div class=\"mb-8\">\r\n<span class=\"material-symbols-outlined text-primary text-4xl\" data-icon=\"shopping_bag\">shopping_bag<\/span>\r\n<\/div>\r\n<h3 class=\"font-headline text-3xl font-bold mb-4\">Solusi E-commerce<\/h3>\r\n<p class=\"text-on-surface-variant\">Ubah pengunjung jadi pembeli dengan proses checkout yang mulus dan sistem manajemen stok yang gak ribet.<\/p>\r\n<\/div>\r\n\r\n<div class=\"md:col-span-3 bg-surface-container p-10 rounded-xl hover:bg-surface-container-high transition-all border-b-2 border-transparent hover:border-primary\/20\">\r\n<div class=\"mb-8\">\r\n<span class=\"material-symbols-outlined text-primary text-4xl\" data-icon=\"cloud\">cloud<\/span>\r\n<\/div>\r\n<h3 class=\"font-headline text-3xl font-bold mb-4\">Cloud Hosting & Security<\/h3>\r\n<p class=\"text-on-surface-variant\">Infrastruktur cloud dengan jaminan uptime 99,9% dan proteksi keamanan tingkat tinggi supaya data kamu aman terus.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/section>\r\n\r\n<section class=\"py-32 px-8\">\r\n<div class=\"max-w-7xl mx-auto\">\r\n<div class=\"flex justify-between items-end mb-16\">\r\n<div>\r\n<h2 class=\"font-headline text-4xl md:text-5xl font-bold mb-4\">Portofolio Kami<\/h2>\r\n<p class=\"text-on-surface-variant text-lg\">Intip beberapa proyek yang udah sukses kami kerjain.<\/p>\r\n<\/div>\r\n<a class=\"text-primary font-bold hover:underline flex items-center gap-2\" href=\"#\">\r\n Lihat Semua Project <span class=\"material-symbols-outlined text-sm\" data-icon=\"arrow_forward\">arrow_forward<\/span>\r\n<\/a>\r\n<\/div>\r\n<div class=\"grid grid-cols-1 md:grid-cols-2 gap-12\">\r\n\r\n<div class=\"space-y-6\">\r\n<div class=\"aspect-video overflow-hidden rounded-xl bg-surface-container group\">\r\n<img decoding=\"async\" class=\"w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700 scale-105 group-hover:scale-100\" data-alt=\"Modern minimalist website\" src=\"https:\/\/lh3.googleusercontent.com\/aida-public\/AB6AXuDvfKjDzceK03y8VmvuRA5BvbjsDyTRFyuuONqGaETP1ZlCReGHAPihttVav8Ry1AquE8b-T1epbFQyrAfWX7ui7PxLSJV08pwYGlzifwdSWIqHl1BrYZz1KpRri_-dHDukpqH-y3WkM_wkvttWuXouKsADsu0brk8SLGXhe5ikYM-p3z28stSEEDju1al75Vq167WPwkO9hQYJbPrtxr41iwnnAHCmY3tRgk8yOMIO5fg57IHtuETDK9HBq8N0XjJQ5dwvFbb-21M\"\/>\r\n<\/div>\r\n<div>\r\n<span class=\"font-label text-sm text-outline uppercase tracking-widest\">Fintech \u2022 2024<\/span>\r\n<h3 class=\"font-headline text-2xl font-bold mt-2\">Platform Nexus Capital<\/h3>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"space-y-6 md:mt-24\">\r\n<div class=\"aspect-video overflow-hidden rounded-xl bg-surface-container group\">\r\n<img decoding=\"async\" class=\"w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700 scale-105 group-hover:scale-100\" data-alt=\"High-tech dashboard\" src=\"https:\/\/lh3.googleusercontent.com\/aida-public\/AB6AXuCXXdejPFd0NahKPeLMxtjAVySNDdXkAh8eq3fGwYjy8caLzknvgmmLfg8I17wcWdYwWjyLmVz0nd0FX3LRS55PFGdhyN5nr-KmjYySp6jCoDgj2qX-xi2RuGraXqPuqFNdrCkAgEX05e9POx_xJo8-DO7zZWUb7D5G8Ew5fa-XxZCPBeaX0IvLHFTiNeXUM2VdkmjRZkdwflYCQKTjU0_CChzZLaMxw4vxH7wNSvwD2zzItfPkdrO3PvSP7QCH_fL49mj2xSLWGAM\"\/>\r\n<\/div>\r\n<div>\r\n<span class=\"font-label text-sm text-outline uppercase tracking-widest\">SaaS \u2022 2023<\/span>\r\n<h3 class=\"font-headline text-2xl font-bold mt-2\">Dashboard Vortex Analytics<\/h3>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/section>\r\n\r\n<section class=\"py-32 px-8 bg-surface-container-low overflow-hidden\">\r\n<div class=\"max-w-7xl mx-auto relative\">\r\n<div class=\"text-center mb-24\">\r\n<h2 class=\"font-headline text-4xl md:text-5xl font-bold mb-4\">Gimana Cara Kami Kerja?<\/h2>\r\n<p class=\"text-on-surface-variant text-lg max-w-2xl mx-auto\">Kami punya proses yang rapi supaya hasilnya gak meleset dari harapan kamu.<\/p>\r\n<\/div>\r\n<div class=\"relative grid grid-cols-1 md:grid-cols-4 gap-8\">\r\n<div class=\"hidden md:block absolute top-12 left-0 w-full h-px bg-gradient-to-r from-transparent via-outline-variant to-transparent\"><\/div>\r\n\r\n<div class=\"relative z-10 text-center space-y-4\">\r\n<div class=\"w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold mx-auto mb-6\">01<\/div>\r\n<h4 class=\"font-headline text-xl font-bold\">Diskusi Ide<\/h4>\r\n<p class=\"text-on-surface-variant text-sm\">Kita ngobrol santai buat nentuin target, siapa usernya, dan spek teknisnya.<\/p>\r\n<\/div>\r\n\r\n<div class=\"relative z-10 text-center space-y-4\">\r\n<div class=\"w-12 h-12 rounded-full bg-surface-container-high border border-outline-variant text-on-surface flex items-center justify-center font-bold mx-auto mb-6\">02<\/div>\r\n<h4 class=\"font-headline text-xl font-bold\">Proses Desain<\/h4>\r\n<p class=\"text-on-surface-variant text-sm\">Tim kami bakal bikin konsep visual dan pengalaman user yang oke punya.<\/p>\r\n<\/div>\r\n\r\n<div class=\"relative z-10 text-center space-y-4\">\r\n<div class=\"w-12 h-12 rounded-full bg-surface-container-high border border-outline-variant text-on-surface flex items-center justify-center font-bold mx-auto mb-6\">03<\/div>\r\n<h4 class=\"font-headline text-xl font-bold\">Coding & Dev<\/h4>\r\n<p class=\"text-on-surface-variant text-sm\">Saatnya tim engineer kami beraksi bikin website yang solid dan responsif.<\/p>\r\n<\/div>\r\n\r\n<div class=\"relative z-10 text-center space-y-4\">\r\n<div class=\"w-12 h-12 rounded-full bg-surface-container-high border border-outline-variant text-on-surface flex items-center justify-center font-bold mx-auto mb-6\">04<\/div>\r\n<h4 class=\"font-headline text-xl font-bold\">Launch!<\/h4>\r\n<p class=\"text-on-surface-variant text-sm\">Website siap online! Kami pantau terus biar makin hari makin kenceng.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/section>\r\n\r\n<section class=\"py-32 px-8\">\r\n<div class=\"max-w-7xl mx-auto\">\r\n<div class=\"grid grid-cols-1 lg:grid-cols-2 gap-20 items-center\">\r\n<div>\r\n<h2 class=\"font-headline text-4xl md:text-5xl font-bold mb-8\">Kata Mereka yang Udah Cobain<\/h2>\r\n<div class=\"space-y-12\">\r\n<div class=\"relative\">\r\n<span class=\"material-symbols-outlined text-8xl absolute -top-10 -left-6 opacity-10\" data-icon=\"format_quote\">format_quote<\/span>\r\n<p class=\"font-body text-2xl italic text-on-surface relative z-10 leading-relaxed\">\r\n \"Bener-bener puas kerja bareng websites.id. Hasilnya gak cuma cakep doang, tapi konversi penjualan kami naik drastis semenjak pake platform baru ini. Kerjanya cepet dan profesional banget!\"\r\n <\/p>\r\n<div class=\"mt-6\">\r\n<p class=\"font-bold text-primary\">Sarah Chen<\/p>\r\n<p class=\"text-on-surface-variant text-sm uppercase tracking-widest font-label\">CTO, Lumina Systems Indonesia<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"grid grid-cols-2 gap-4\">\r\n<div class=\"aspect-square bg-surface-container rounded-xl flex items-center justify-center p-8 grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all\">\r\n<span class=\"font-headline text-2xl font-black tracking-tighter opacity-40\">PARTNER_1<\/span>\r\n<\/div>\r\n<div class=\"aspect-square bg-surface-container rounded-xl flex items-center justify-center p-8 grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all\">\r\n<span class=\"font-headline text-2xl font-black tracking-tighter opacity-40\">PARTNER_2<\/span>\r\n<\/div>\r\n<div class=\"aspect-square bg-surface-container rounded-xl flex items-center justify-center p-8 grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all\">\r\n<span class=\"font-headline text-2xl font-black tracking-tighter opacity-40\">PARTNER_3<\/span>\r\n<\/div>\r\n<div class=\"aspect-square bg-surface-container rounded-xl flex items-center justify-center p-8 grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all\">\r\n<span class=\"font-headline text-2xl font-black tracking-tighter opacity-40\">PARTNER_4<\/span>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/section>\r\n\r\n<section class=\"py-32 px-8\">\r\n<div class=\"max-w-7xl mx-auto\">\r\n<div class=\"bg-gradient-to-r from-surface-container to-surface-container-high rounded-[2rem] p-12 md:p-24 text-center relative overflow-hidden\">\r\n<div class=\"absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary\/5 to-transparent\"><\/div>\r\n<div class=\"relative z-10\">\r\n<h2 class=\"font-headline text-4xl md:text-6xl font-bold mb-8\">Siap Bikin Brand Kamu <br\/>Makin Berkelas?<\/h2>\r\n<p class=\"text-on-surface-variant text-xl max-w-2xl mx-auto mb-12\">Yuk ngobrolin gimana kami bisa bantu bisnis kamu makin bersinar di dunia digital.<\/p>\r\n<button class=\"bg-primary text-on-primary px-12 py-5 rounded-full font-bold text-xl hover:scale-105 transition-all shadow-xl shadow-primary\/20\">\r\n Mulai Proyek Sekarang\r\n <\/button>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/section>\r\n<\/main>\r\n\r\n<footer class=\"bg-[#060e20] w-full py-12 px-8 border-t border-outline-variant\/10\">\r\n<div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-7xl mx-auto\">\r\n<div class=\"space-y-6\">\r\n<div class=\"text-xl font-black text-[#dae2fd]\">websites.id<\/div>\r\n<p class=\"text-[#dae2fd]\/60 font-manrope text-sm leading-relaxed\">\r\n Bantu bangun kehadiran digital lewat engineering presisi dan desain yang berkelas.\r\n <\/p>\r\n<\/div>\r\n<div class=\"space-y-4\">\r\n<h4 class=\"font-bold text-primary mb-4\">Navigasi<\/h4>\r\n<ul class=\"space-y-2\">\r\n<li><a class=\"text-[#dae2fd]\/60 hover:text-[#10b981] transition-colors font-manrope text-sm\" href=\"#\">Layanan<\/a><\/li>\r\n<li><a class=\"text-[#dae2fd]\/60 hover:text-[#10b981] transition-colors font-manrope text-sm\" href=\"#\">Portofolio<\/a><\/li>\r\n<li><a class=\"text-[#dae2fd]\/60 hover:text-[#10b981] transition-colors font-manrope text-sm\" href=\"#\">Cara Kerja<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div class=\"space-y-4\">\r\n<h4 class=\"font-bold text-primary mb-4\">Legal<\/h4>\r\n<ul class=\"space-y-2\">\r\n<li><a class=\"text-[#dae2fd]\/60 hover:text-[#10b981] transition-colors font-manrope text-sm\" href=\"#\">Kebijakan Privasi<\/a><\/li>\r\n<li><a class=\"text-[#dae2fd]\/60 hover:text-[#10b981] transition-colors font-manrope text-sm\" href=\"#\">Syarat & Ketentuan<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div class=\"space-y-4\">\r\n<h4 class=\"font-bold text-primary mb-4\">Hubungi Kami<\/h4>\r\n<ul class=\"space-y-2\">\r\n<li><a class=\"text-[#dae2fd]\/60 hover:text-[#10b981] transition-colors font-manrope text-sm\" href=\"#\">LinkedIn<\/a><\/li>\r\n<li><a class=\"text-[#dae2fd]\/60 hover:text-[#10b981] transition-colors font-manrope text-sm\" href=\"#\">GitHub<\/a><\/li>\r\n<li><a class=\"text-[#dae2fd]\/60 hover:text-[#10b981] transition-colors font-manrope text-sm\" href=\"#\">Kontak Kami<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<div class=\"max-w-7xl mx-auto mt-16 pt-8 border-t border-outline-variant\/10 text-center\">\r\n<p class=\"text-[#dae2fd]\/60 font-manrope text-sm\">\u00a9 2024 websites.id. Partner Digital Kamu.<\/p>\r\n<\/div>\r\n<\/footer>\r\n<\/body><\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>websites.id | Bikin Website Gak Cuma Bagus, Tapi Berkelas websites.id Layanan Portofolio Cara Kerja Testimoni Konsultasi Gratis Premium Web Engineering Bikin Website Gak Cuma Bagus, Tapi Berkelas. Kami bantu bangun kehadiran digital brand kamu dengan standar engineering tinggi, bukan sekadar templatan yang biasa-biasa aja. Mulai Proyek Lihat Hasil Kerja Kami Layanan Kami Pake teknologi paling […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-63","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/websites.id\/index.php?rest_route=\/wp\/v2\/pages\/63","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websites.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/websites.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/websites.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websites.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=63"}],"version-history":[{"count":13,"href":"https:\/\/websites.id\/index.php?rest_route=\/wp\/v2\/pages\/63\/revisions"}],"predecessor-version":[{"id":76,"href":"https:\/\/websites.id\/index.php?rest_route=\/wp\/v2\/pages\/63\/revisions\/76"}],"wp:attachment":[{"href":"https:\/\/websites.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}