Compare commits
No commits in common. "f8d1f92952f463da10cf548b9561a91cb922e6c5" and "ce8cc63a942ca2a675a09dd1f10f85289a0ee8b3" have entirely different histories.
f8d1f92952
...
ce8cc63a94
@ -1,5 +0,0 @@
|
|||||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9.99935 6.66683V3.3335H6.66602" stroke="#2953A4" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path d="M14.9987 6.66699H4.9987C4.07822 6.66699 3.33203 7.41318 3.33203 8.33366V15.0003C3.33203 15.9208 4.07822 16.667 4.9987 16.667H14.9987C15.9192 16.667 16.6654 15.9208 16.6654 15.0003V8.33366C16.6654 7.41318 15.9192 6.66699 14.9987 6.66699Z" stroke="#2953A4" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path d="M1.66602 11.6668H3.33268M16.666 11.6668H18.3327M12.4993 10.8335V12.5002M7.49935 10.8335V12.5002" stroke="#2953A4" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 765 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.7 KiB |
@ -1,24 +0,0 @@
|
|||||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<rect width="40" height="40" rx="20" fill="#DAE2EF"/>
|
|
||||||
<g clip-path="url(#clip0_352_719)">
|
|
||||||
<path d="M27.1875 28.4375V31.25C27.1875 31.6976 27.0097 32.1268 26.6932 32.4432C26.3768 32.7597 25.9476 32.9375 25.5 32.9375H13.125C12.6774 32.9375 12.2482 32.7597 11.9318 32.4432C11.6153 32.1268 11.4375 31.6976 11.4375 31.25V28.4375H27.1875Z" fill="#678AC9"/>
|
|
||||||
<path d="M21.5625 9.3125H17.0625C16.7641 9.3125 16.478 9.19397 16.267 8.983C16.056 8.77202 15.9375 8.48587 15.9375 8.1875V7.0625H22.6875V8.1875C22.6875 8.48587 22.569 8.77202 22.358 8.983C22.147 9.19397 21.8609 9.3125 21.5625 9.3125Z" fill="#678AC9"/>
|
|
||||||
<path d="M28.875 9.3125C27.9545 9.31312 27.0516 9.5647 26.2634 10.0402C25.4752 10.5157 24.8316 11.197 24.4018 12.011C23.9719 12.825 23.7721 13.7407 23.8239 14.6598C23.8757 15.5788 24.1771 16.4663 24.6956 17.2269L23.8125 19.4375H28.875C30.2177 19.4375 31.5053 18.9041 32.4547 17.9547C33.4041 17.0053 33.9375 15.7177 33.9375 14.375C33.9375 13.0323 33.4041 11.7447 32.4547 10.7953C31.5053 9.84587 30.2177 9.3125 28.875 9.3125ZM27.75 11.5625H30C30.1492 11.5625 30.2923 11.6218 30.3977 11.7273C30.5032 11.8327 30.5625 11.9758 30.5625 12.125C30.5625 12.2742 30.5032 12.4173 30.3977 12.5227C30.2923 12.6282 30.1492 12.6875 30 12.6875H27.75C27.6008 12.6875 27.4577 12.6282 27.3523 12.5227C27.2468 12.4173 27.1875 12.2742 27.1875 12.125C27.1875 11.9758 27.2468 11.8327 27.3523 11.7273C27.4577 11.6218 27.6008 11.5625 27.75 11.5625ZM30 17.1875H27.75C27.6008 17.1875 27.4577 17.1282 27.3523 17.0227C27.2468 16.9173 27.1875 16.7742 27.1875 16.625C27.1875 16.4758 27.2468 16.3327 27.3523 16.2273C27.4577 16.1218 27.6008 16.0625 27.75 16.0625H30C30.1492 16.0625 30.2923 16.1218 30.3977 16.2273C30.5032 16.3327 30.5625 16.4758 30.5625 16.625C30.5625 16.7742 30.5032 16.9173 30.3977 17.0227C30.2923 17.1282 30.1492 17.1875 30 17.1875ZM31.6875 14.9375H26.0625C25.9133 14.9375 25.7702 14.8782 25.6648 14.7727C25.5593 14.6673 25.5 14.5242 25.5 14.375C25.5 14.2258 25.5593 14.0827 25.6648 13.9773C25.7702 13.8718 25.9133 13.8125 26.0625 13.8125H31.6875C31.8367 13.8125 31.9798 13.8718 32.0852 13.9773C32.1907 14.0827 32.25 14.2258 32.25 14.375C32.25 14.5242 32.1907 14.6673 32.0852 14.7727C31.9798 14.8782 31.8367 14.9375 31.6875 14.9375Z" fill="#F0B100"/>
|
|
||||||
<path d="M20.4375 30.125H18.1875C18.0383 30.125 17.8952 30.1843 17.7898 30.2898C17.6843 30.3952 17.625 30.5383 17.625 30.6875C17.625 30.8367 17.6843 30.9798 17.7898 31.0852C17.8952 31.1907 18.0383 31.25 18.1875 31.25H20.4375C20.5867 31.25 20.7298 31.1907 20.8352 31.0852C20.9407 30.9798 21 30.8367 21 30.6875C21 30.5383 20.9407 30.3952 20.8352 30.2898C20.7298 30.1843 20.5867 30.125 20.4375 30.125Z" fill="#224B9F"/>
|
|
||||||
<path d="M27.75 8.8625C27.7653 8.5577 27.7183 8.25298 27.6121 7.96688C27.5059 7.68077 27.3426 7.41927 27.1321 7.19828C26.9216 6.97728 26.6684 6.80141 26.3878 6.68137C26.1073 6.56133 25.8052 6.49962 25.5 6.5H13.125C12.5283 6.5 11.956 6.73705 11.534 7.15901C11.1121 7.58097 10.875 8.15326 10.875 8.75V31.25C10.875 31.8467 11.1121 32.419 11.534 32.841C11.956 33.2629 12.5283 33.5 13.125 33.5H25.5C26.0967 33.5 26.669 33.2629 27.091 32.841C27.5129 32.419 27.75 31.8467 27.75 31.25V20H28.875C29.6609 19.9992 30.4379 19.8338 31.1559 19.5143C31.8739 19.1948 32.517 18.7285 33.0438 18.1452C33.5705 17.562 33.9692 16.8749 34.2142 16.1281C34.4591 15.3814 34.5448 14.5916 34.4659 13.8097C34.3869 13.0278 34.1449 12.2711 33.7556 11.5884C33.3663 10.9058 32.8382 10.3122 32.2055 9.84613C31.5728 9.38003 30.8494 9.05168 30.082 8.88227C29.3146 8.71285 28.5202 8.70611 27.75 8.8625ZM16.5 7.625H22.125V8.1875C22.125 8.33669 22.0657 8.47976 21.9602 8.58525C21.8548 8.69074 21.7117 8.75 21.5625 8.75H17.0625C16.9133 8.75 16.7702 8.69074 16.6648 8.58525C16.5593 8.47976 16.5 8.33669 16.5 8.1875V7.625ZM26.625 31.25C26.625 31.5484 26.5065 31.8345 26.2955 32.0455C26.0845 32.2565 25.7984 32.375 25.5 32.375H13.125C12.8266 32.375 12.5405 32.2565 12.3295 32.0455C12.1185 31.8345 12 31.5484 12 31.25V29H26.625V31.25ZM26.625 27.875H12V8.75C12 8.45163 12.1185 8.16548 12.3295 7.95451C12.5405 7.74353 12.8266 7.625 13.125 7.625H15.375V8.1875C15.375 8.63505 15.5528 9.06428 15.8693 9.38074C16.1857 9.69721 16.6149 9.875 17.0625 9.875H21.5625C22.0101 9.875 22.4393 9.69721 22.7557 9.38074C23.0722 9.06428 23.25 8.63505 23.25 8.1875V7.625H25.5C25.7984 7.625 26.0845 7.74353 26.2955 7.95451C26.5065 8.16548 26.625 8.45163 26.625 8.75V9.2225C25.8908 9.54344 25.2337 10.0175 24.6976 10.613C24.1615 11.2085 23.7588 11.9116 23.5165 12.6754C23.2742 13.4391 23.1978 14.2458 23.2925 15.0414C23.3872 15.837 23.6508 16.6032 24.0656 17.2888L23.2894 19.2294C23.2554 19.3148 23.2428 19.4072 23.2528 19.4985C23.2627 19.5899 23.2949 19.6774 23.3466 19.7534C23.3982 19.8295 23.4676 19.8917 23.5489 19.9347C23.6301 19.9777 23.7206 20.0001 23.8125 20H26.625V27.875ZM28.875 18.875H24.645L25.2075 17.435C25.2416 17.3486 25.2539 17.2551 25.2431 17.1628C25.2323 17.0706 25.1988 16.9824 25.1456 16.9063C24.5806 16.0758 24.3097 15.0801 24.376 14.0779C24.4424 13.0756 24.8421 12.1244 25.5116 11.3756C26.1811 10.6268 27.0819 10.1235 28.0705 9.94592C29.0591 9.76831 30.0787 9.92656 30.967 10.3955C31.8553 10.8644 32.5611 11.617 32.9722 12.5335C33.3832 13.45 33.4758 14.4777 33.2352 15.4529C32.9946 16.4281 32.4347 17.2948 31.6445 17.9149C30.8544 18.5351 29.8794 18.873 28.875 18.875Z" fill="#224B9F"/>
|
|
||||||
<path d="M13.6875 22.8125H17.0625V26.1875H13.6875V22.8125Z" fill="#678AC9"/>
|
|
||||||
<path d="M13.6875 17.75H17.0625V21.125H13.6875V17.75Z" fill="#678AC9"/>
|
|
||||||
<path d="M13.6875 12.6875H17.0625V16.0625H13.6875V12.6875Z" fill="#678AC9"/>
|
|
||||||
<path d="M24.375 26.1875H19.875C19.7258 26.1875 19.5827 26.1282 19.4773 26.0227C19.3718 25.9173 19.3125 25.7742 19.3125 25.625C19.3125 25.4758 19.3718 25.3327 19.4773 25.2273C19.5827 25.1218 19.7258 25.0625 19.875 25.0625H24.375C24.5242 25.0625 24.6673 25.1218 24.7727 25.2273C24.8782 25.3327 24.9375 25.4758 24.9375 25.625C24.9375 25.7742 24.8782 25.9173 24.7727 26.0227C24.6673 26.1282 24.5242 26.1875 24.375 26.1875Z" fill="#678AC9"/>
|
|
||||||
<path d="M24.375 23.9375H19.875C19.7258 23.9375 19.5827 23.8782 19.4773 23.7727C19.3718 23.6673 19.3125 23.5242 19.3125 23.375C19.3125 23.2258 19.3718 23.0827 19.4773 22.9773C19.5827 22.8718 19.7258 22.8125 19.875 22.8125H24.375C24.5242 22.8125 24.6673 22.8718 24.7727 22.9773C24.8782 23.0827 24.9375 23.2258 24.9375 23.375C24.9375 23.5242 24.8782 23.6673 24.7727 23.7727C24.6673 23.8782 24.5242 23.9375 24.375 23.9375Z" fill="#678AC9"/>
|
|
||||||
<path d="M21.5625 21.125H19.875C19.7258 21.125 19.5827 21.0657 19.4773 20.9602C19.3718 20.8548 19.3125 20.7117 19.3125 20.5625C19.3125 20.4133 19.3718 20.2702 19.4773 20.1648C19.5827 20.0593 19.7258 20 19.875 20H21.5625C21.7117 20 21.8548 20.0593 21.9602 20.1648C22.0657 20.2702 22.125 20.4133 22.125 20.5625C22.125 20.7117 22.0657 20.8548 21.9602 20.9602C21.8548 21.0657 21.7117 21.125 21.5625 21.125Z" fill="#678AC9"/>
|
|
||||||
<path d="M21.5625 18.875H19.875C19.7258 18.875 19.5827 18.8157 19.4773 18.7102C19.3718 18.6048 19.3125 18.4617 19.3125 18.3125C19.3125 18.1633 19.3718 18.0202 19.4773 17.9148C19.5827 17.8093 19.7258 17.75 19.875 17.75H21.5625C21.7117 17.75 21.8548 17.8093 21.9602 17.9148C22.0657 18.0202 22.125 18.1633 22.125 18.3125C22.125 18.4617 22.0657 18.6048 21.9602 18.7102C21.8548 18.8157 21.7117 18.875 21.5625 18.875Z" fill="#678AC9"/>
|
|
||||||
<path d="M21.5625 16.0625H19.875C19.7258 16.0625 19.5827 16.0032 19.4773 15.8977C19.3718 15.7923 19.3125 15.6492 19.3125 15.5C19.3125 15.3508 19.3718 15.2077 19.4773 15.1023C19.5827 14.9968 19.7258 14.9375 19.875 14.9375H21.5625C21.7117 14.9375 21.8548 14.9968 21.9602 15.1023C22.0657 15.2077 22.125 15.3508 22.125 15.5C22.125 15.6492 22.0657 15.7923 21.9602 15.8977C21.8548 16.0032 21.7117 16.0625 21.5625 16.0625Z" fill="#678AC9"/>
|
|
||||||
<path d="M21.5625 13.8125H19.875C19.7258 13.8125 19.5827 13.7532 19.4773 13.6477C19.3718 13.5423 19.3125 13.3992 19.3125 13.25C19.3125 13.1008 19.3718 12.9577 19.4773 12.8523C19.5827 12.7468 19.7258 12.6875 19.875 12.6875H21.5625C21.7117 12.6875 21.8548 12.7468 21.9602 12.8523C22.0657 12.9577 22.125 13.1008 22.125 13.25C22.125 13.3992 22.0657 13.5423 21.9602 13.6477C21.8548 13.7532 21.7117 13.8125 21.5625 13.8125Z" fill="#678AC9"/>
|
|
||||||
</g>
|
|
||||||
<defs>
|
|
||||||
<clipPath id="clip0_352_719">
|
|
||||||
<rect width="27" height="27" fill="white" transform="translate(7.5 6.5)"/>
|
|
||||||
</clipPath>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 8.2 KiB |
@ -2,25 +2,14 @@
|
|||||||
|
|
||||||
@theme {
|
@theme {
|
||||||
--color-secondary-400: #f7a01f;
|
--color-secondary-400: #f7a01f;
|
||||||
--color-secondary-100: #feecc7;
|
|
||||||
--color-secondary-200: #fcd78b;
|
|
||||||
--color-secondary-hover: #f3810d;
|
|
||||||
|
|
||||||
--color-primary-800: #2852a3;
|
|
||||||
--color-primary-600: #337add;
|
|
||||||
--color-primary-100: #deedfb;
|
|
||||||
--color-primary-200: #c4e1f9;
|
|
||||||
--color-primary-50: #f0f7fe;
|
|
||||||
--color-primary-surface: #f0f7fe;
|
|
||||||
--color-primary-hover: #264781;
|
|
||||||
--color-primary-default: #2953a4;
|
|
||||||
|
|
||||||
--color-title: #020618;
|
--color-title: #020618;
|
||||||
--color-subtitle: #45556c;
|
--color-subtitle: #45556c;
|
||||||
--color-body: #62748e;
|
--color-body: #62748e;
|
||||||
|
--color-primary-800: #2852a3;
|
||||||
|
--color-primary-600: #337add;
|
||||||
|
--color-primary-100: #deedfb;
|
||||||
--color-border: #e2e8f0;
|
--color-border: #e2e8f0;
|
||||||
--color-subtle: #f1f5f9;
|
--color-subtle: #f1f5f9;
|
||||||
--color-surface: #f8fafc;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
@ -31,32 +20,11 @@ body {
|
|||||||
font-family: var(--font-open-sauce-one);
|
font-family: var(--font-open-sauce-one);
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style-type: disc;
|
list-style-type: disc;
|
||||||
list-style-position: outside;
|
list-style-position: inside;
|
||||||
padding-left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0;
|
|
||||||
border: 1px solid #e2e8f0;
|
|
||||||
border-radius: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
padding: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary-button {
|
.primary-button {
|
||||||
@apply bg-white p-2 flex gap-3 items-center justify-center text-title font-semibold w-fit cursor-pointer;
|
@apply bg-white p-2 flex gap-3 items-center justify-center text-title font-semibold w-fit cursor-pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
|
||||||
@apply rounded-xl border bg-white border-border flex;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,48 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
import TitleComponent from "./title";
|
|
||||||
import { CaretDownIcon, QuestionIcon } from "@phosphor-icons/react";
|
|
||||||
|
|
||||||
export default function FAQ() {
|
|
||||||
const [openFaq, setOpenFaq] = useState<number>(-1);
|
|
||||||
|
|
||||||
const listFaq = [
|
|
||||||
{
|
|
||||||
question: "Apakah semua pesan akan dikenakan biaya mulai 1 Oktober 2026?",
|
|
||||||
answer: "Tidak. Perubahan ini membuat Service Message menjadi berbayar setelah free tier terpakai. Template Message tetap mengikuti pricing berdasarkan kategorinya.",
|
|
||||||
},
|
|
||||||
{ question: "Apakah pesan dari pelanggan ikut dihitung?", answer: "Tidak. Perhitungan Service Message berlaku untuk pesan dari bisnis kepada pelanggan yang berhasil delivered." },
|
|
||||||
{ question: "Apakah pesan yang gagal delivered dikenakan biaya?", answer: "Tidak. Charging Meta dilakukan berdasarkan pesan yang berhasil delivered." },
|
|
||||||
{
|
|
||||||
question: "Jika memiliki beberapa nomor WhatsApp, apakah masing-masing mendapat 1.000 pesan gratis?",
|
|
||||||
answer: "Ya. Free tier mengikuti business phone number. Setiap nomor WhatsApp Business Platform mendapatkan kuota 1.000 Service Message gratis per bulan secara terpisah.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "Apakah M-OMNIX akan menerapkan free tier ini?",
|
|
||||||
answer: "Ya. M-OMNIX akan mengikuti ketentuan pricing dan billing yang diberlakukan oleh Meta, termasuk free tier 1.000 Service Message per business phone number per bulan.",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-4 gap-6 flex-col card lg:p-6">
|
|
||||||
<TitleComponent icon={QuestionIcon} title="FAQ" />
|
|
||||||
<div className="flex flex-col gap-4">
|
|
||||||
{listFaq.map((item, index) => (
|
|
||||||
<div className={`flex flex-col ${openFaq === index ? "gap-4" : ""}`} key={item.question}>
|
|
||||||
<div className="flex flex-col gap-3 cursor-pointer" onClick={() => (openFaq === index ? setOpenFaq(-1) : setOpenFaq(index))}>
|
|
||||||
<div className="flex gap-4 justify-between items-center">
|
|
||||||
<p className="font-semibold text-lg md:text-[20px] text-title">{item.question}</p>
|
|
||||||
<div className="size-6 md:size-8">
|
|
||||||
<CaretDownIcon className="text-black size-6 md:size-8" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={`text-body px-2 overflow-hidden md:text-lg transition-all duration-200 ${index === openFaq ? "py-2 max-h-50" : "max-h-0 py-0"}`}>{item.answer}</div>
|
|
||||||
</div>
|
|
||||||
{index !== listFaq.length - 1 && <div className="h-px w-full bg-border" />}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,198 +0,0 @@
|
|||||||
import { ChatDotsIcon, GiftIcon, LightningIcon, MegaphoneSimpleIcon, ShieldCheckIcon, UserCircleCheckIcon } from "@phosphor-icons/react/dist/ssr";
|
|
||||||
import ServiceMessage from "@/image/perubahan-pricing/service-message.svg";
|
|
||||||
import FreeMonthTier from "@/image/perubahan-pricing/free-monthly-tier.svg";
|
|
||||||
import botIcon from "@/image/perubahan-pricing/bot-icon.svg";
|
|
||||||
import Image from "next/image";
|
|
||||||
import TitleComponent from "./title";
|
|
||||||
import FAQ from "./faq";
|
|
||||||
|
|
||||||
export default function ChangePricing() {
|
|
||||||
const listPerubahan = [
|
|
||||||
{ image: ServiceMessage, title: "Service Message", caption: "Berbayar per pesan yang berhasil delivered." },
|
|
||||||
{ image: FreeMonthTier, title: "Free Monthly Tier", caption: "1.000 pesan gratis setiap bulan per nomor." },
|
|
||||||
];
|
|
||||||
|
|
||||||
const listServiceMessage = [
|
|
||||||
"Service Message akan dikenakan biaya per pesan yang berhasil delivered.",
|
|
||||||
"Pesan yang dikirim pelanggan kepada bisnis tidak dikenakan biaya Service Message.",
|
|
||||||
"Rate Service Message akan mengikuti rate Utility dan Authentication berdasarkan market/country tujuan pesan.",
|
|
||||||
];
|
|
||||||
|
|
||||||
const chatBot = ["Pesanan Anda sudah kami proses.", "Saat ini pesanan sedang dalam pengiriman."];
|
|
||||||
|
|
||||||
const freeTier = [
|
|
||||||
"Berlaku per business phone number.",
|
|
||||||
"Reset setiap bulan.",
|
|
||||||
"Sisa kuota tidak dapat dipindahkan ke bulan berikutnya.",
|
|
||||||
"Hanya berlaku untuk Service Message.",
|
|
||||||
"Tidak berlaku untuk Marketing, Utility, atau Authentication Template Message.",
|
|
||||||
];
|
|
||||||
|
|
||||||
const column = [
|
|
||||||
{ nomor: "Nomor A", fee: "1.000/Bulan" },
|
|
||||||
{ nomor: "Nomor B", fee: "1.000/Bulan" },
|
|
||||||
{ nomor: "Nomor C", fee: "1.000/Bulan" },
|
|
||||||
{ nomor: "Nomor D", fee: "1.000/Bulan" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const customerService = [
|
|
||||||
{ title: "Senin, 09.00", caption: "Pelanggan mengirim pesan → window aktif sampai Selasa, 09.00." },
|
|
||||||
{ title: "Senin, 14.00", caption: "Pelanggan mengirim pesan lagi → periode 24 jam dimulai kembali, window aktif sampai Selasa, 14.00." },
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="w-full py-8 px-4 gap-4 flex flex-col bg-white md:px-25">
|
|
||||||
<div className="p-4 gap-6 border-border card flex-col">
|
|
||||||
<div className="flex flex-col gap-3 md:flex-row">
|
|
||||||
<div className="rounded-lg border py-1 px-1.5 bg-primary-50 border-primary-200 flex gap-1 items-center text-primary-hover w-fit">
|
|
||||||
<MegaphoneSimpleIcon className="size-3.5" />
|
|
||||||
<p className="text-xs">Kebijakan Baru Meta</p>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-lg border py-1 px-1.5 gap-1 bg-secondary-100 border-secondary-200 text-secondary-hover text-xs w-fit">Berlaku mulai 1 Oktober 2026</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-4">
|
|
||||||
<p className="font-semibold text-2xl md:text-[32px] text-black">Perubahan Pricing WhatsApp Business Platform</p>
|
|
||||||
<p className="text-body text-lg">
|
|
||||||
Mulai <span className="text-title">1 Oktober 2026</span>, Meta akan mengenakan biaya per pesan untuk <span className="text-title">Service Message</span> dan memperkenalkan free tier sebanyak{" "}
|
|
||||||
<span className="text-title">1.000 Service Message per bulan</span> untuk setiap business phone number.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
{listPerubahan?.map((item) => (
|
|
||||||
<div key={item?.title} className="p-6 gap-4 items-center card">
|
|
||||||
<Image src={item.image} alt="image-perubahan" width={40} height={40} className="size-10 md:size-14" />
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<p className="font-semibold text-title text-lg md:text-[24px]">{item.title}</p>
|
|
||||||
<p className="font-sm text-body md:text-base">{item.caption}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card p-6 gap-6 flex-col">
|
|
||||||
<TitleComponent icon={ChatDotsIcon} title="Service Message" />
|
|
||||||
<p className="text-lg text-body">
|
|
||||||
<span className="font-semibold text-title">Service Message</span> adalah pesan non-template yang dikirim oleh bisnis kepada pelanggan selama <span className="font-semibold text-title">customer service window 24 jam</span> masih
|
|
||||||
aktif.
|
|
||||||
</p>
|
|
||||||
<div className="flex flex-col gap-3">
|
|
||||||
<p className="font-semibold text-lg text-black">Mulai 1 Oktober 2026:</p>
|
|
||||||
<div className="text-body md:text-lg">
|
|
||||||
<ul>
|
|
||||||
{listServiceMessage.map((item: string) => (
|
|
||||||
<li key={item}>{item}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-xl py-6 px-4 md:px-6 gap-2.5 bg-subtle flex flex-col">
|
|
||||||
<div className="flex flex-col gap-2.5">
|
|
||||||
<div className="flex gap-2 md:max-w-118.5 md:w-full">
|
|
||||||
<div className="flex items-center justify-center size-8 bg-primary-200 rounded-full text-primary-default font-semibold text-xs">AD</div>
|
|
||||||
<div className="flex flex-col rounded-lg border py-3 px-4 bg-white border-border gap-1 flex-1">
|
|
||||||
<p className="text-sm text-title">Halo, saya ingin menanyakan status pesanan.</p>
|
|
||||||
<p className="text-xs text-body">20:00</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{chatBot.map((item: string) => (
|
|
||||||
<div className="flex gap-2 md:max-w-118.5 md:w-full self-end" key={item}>
|
|
||||||
<div className="rounded-lg border py-3 px-4 bg-primary-default border-border text-white gap-1 flex flex-col flex-1">
|
|
||||||
<p className="text-sm">{item}</p>
|
|
||||||
<p className="text-xs">20:00</p>
|
|
||||||
</div>
|
|
||||||
<div className="size-8 flex justify-center items-center rounded-full bg-primary-200">
|
|
||||||
<Image src={botIcon} alt="bot-icon" width={20} height={20} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-subtitle text-end">Pada contoh di atas, bisnis mengirimkan 2 Service Message.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="p-6 gap-6 flex-col card">
|
|
||||||
<TitleComponent icon={GiftIcon} title="Free Monthly Tier" />
|
|
||||||
<p className="text-body md:text-lg">
|
|
||||||
<span className="font-semibold text-title">Setiap business phone number</span> akan mendapatkan <span className="font-semibold text-title">1.000 Service Message gratis setiap bulan.</span> Meta hanya akan mengenakan biaya mulai
|
|
||||||
dari Service Message ke-1.001 yang berhasil delivered.
|
|
||||||
</p>
|
|
||||||
<div className="flex flex-col gap-3">
|
|
||||||
<p className="font-semibold text-lg text-black">Ketentuan free tier</p>
|
|
||||||
<ul className="text-body md:text-lg">
|
|
||||||
{freeTier.map((item: string) => (
|
|
||||||
<li key={item}>{item}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-3">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr className="text-[13px] font-medium text-primary-default">
|
|
||||||
<td className="bg-surface border-r border-border">Nomor WhatsApp</td>
|
|
||||||
<td className="bg-surface">Free Service Message</td>
|
|
||||||
</tr>
|
|
||||||
{column.map((item) => (
|
|
||||||
<tr key={item.nomor} className="text-[13px] text-title">
|
|
||||||
<td className="py-[18.5px] border-t border-border border-r">{item.nomor}</td>
|
|
||||||
<td className="py-[18.5px] border-t border-border">{item.fee}</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</thead>
|
|
||||||
</table>
|
|
||||||
<p className="text-[13px] text-subtitle">Masing-masing business phone number mendapatkan kuota gratisnya sendiri. Free tier dihitung berdasarkan business phone number, bukan Business Portfolio atau WABA.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="p-6 gap-6 flex-col card">
|
|
||||||
<TitleComponent icon={UserCircleCheckIcon} title="Customer Service Window" />
|
|
||||||
<p className="text-body md:text-lg">
|
|
||||||
Tidak ada perubahan pada ketentuan customer service window. Window berlaku selama <span className="font-semibold text-title">24 jam sejak pesan terakhir pelanggan.</span> Setiap kali pelanggan mengirimkan pesan baru, periode 24
|
|
||||||
jam akan dimulai kembali dari pesan tersebut.
|
|
||||||
</p>
|
|
||||||
<div className="flex flex-col gap-3 rounded-xl p-4 md:p-6 bg-subtle">
|
|
||||||
{customerService.map((item, index) => (
|
|
||||||
<div className="flex flex-col gap-3" key={item.title}>
|
|
||||||
<div className="flex flex-col gap-2.5">
|
|
||||||
<p className="font-semibold text-lg text-black">{item.title}</p>
|
|
||||||
<p className="text-subtitle">{item.caption}</p>
|
|
||||||
</div>
|
|
||||||
{index === 0 && <div className="h-px border-t border-dashed border-border" />}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div className="p-4 gap-6 flex-col card md:p-6">
|
|
||||||
<TitleComponent icon={ShieldCheckIcon} title="Utility Messages" />
|
|
||||||
<p className="text-body md:text-lg">
|
|
||||||
Mulai <span className="font-semibold text-title">1 Oktober 2026</span>, Utility Template Message yang dikirim selama customer service window 24 jam juga akan dikenakan biaya sesuai{" "}
|
|
||||||
<span className="font-semibold text-title">rate Utility</span> yang berlaku. Free tier 1.000 Service Message tidak berlaku untuk Utility Template Message.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="p-4 gap-6 flex-col card md:p-6">
|
|
||||||
<TitleComponent icon={MegaphoneSimpleIcon} title="Marketing dan Authentication Messages" />
|
|
||||||
<p className="text-body md:text-lg">Tidak terdapat perubahan pada mekanisme charging utama untuk Marketing dan Authentication Template Message. Keduanya tetap dikenakan biaya sesuai kategori dan market/country tujuan pesan.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="p-4 gap-6 card flex-col md:p-6">
|
|
||||||
<TitleComponent icon={LightningIcon} title="Free Entry Point 72 jam" />
|
|
||||||
<p className="text-body md:text-lg">
|
|
||||||
Tidak ada perubahan pada mekanisme Free Entry Point. Ketika pelanggan mengirimkan pesan ke bisnis melalui Click-to-WhatsApp Ads atau Facebook Page call-to-action button, pesan bisnis dapat memperoleh periode bebas biaya selama 3
|
|
||||||
hari (72 jam) sesuai ketentuan Meta.
|
|
||||||
</p>
|
|
||||||
<p className="text-body md:text-lg">
|
|
||||||
Free Entry Point berbeda dengan customer service window. Customer service window menentukan kapan bisnis dapat mengirim pesan non-template, sedangkan Free Entry Point berkaitan dengan periode pesan yang tidak dikenakan biaya Meta.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<FAQ />
|
|
||||||
|
|
||||||
<div className="p-6 card text-body md:text-lg">M-OMNIX · Informasi WhatsApp Business Platform</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
import { type Icon } from "@phosphor-icons/react";
|
|
||||||
|
|
||||||
export default function TitleComponent({ title, icon: Icon }: { title: string; icon: Icon }) {
|
|
||||||
return (
|
|
||||||
<div className="flex gap-3 items-center">
|
|
||||||
<div className="rounded-full bg-primary-surface items-center justify-center size-10 md:size-14 text-primary-default flex">
|
|
||||||
<Icon className="size-6.75 md:size-9" />
|
|
||||||
</div>
|
|
||||||
<p className="font-semibold text-lg md:text-[24px] text-black">{title}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -8,7 +8,7 @@ import { usePathname } from "next/navigation";
|
|||||||
|
|
||||||
export default function Navbar() {
|
export default function Navbar() {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [activeSection, setActiveSection] = useState("");
|
const [activeSection, setActiveSection] = useState("about-us");
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const isContact = pathname === "/contact";
|
const isContact = pathname === "/contact";
|
||||||
const active = isContact ? "contact" : activeSection;
|
const active = isContact ? "contact" : activeSection;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user