/* data.jsx — content, helpers, and small UI atoms for Sukatukang */
// ---- bilingual copy. Malay primary, English secondary. ----
const COPY = {
brand: "Sukatukang",
nav: [
{ id: "kerja", ms: "Hasil kerja", en: "Work" },
{ id: "proses", ms: "Proses", en: "Process" },
{ id: "kenapa", ms: "Kenapa kami", en: "Why us" },
{ id: "cenderahati", ms: "Cenderahati", en: "Souvenirs" },
],
hero: {
eyebrow: { ms: "Perintis troli boleh alih tersuai di Malaysia", en: "Pioneer of custom portable carts in Malaysia" },
headlines: [
{ ms: "Booth yang setaraf\ndengan jenama anda.", en: "The booth your brand deserves." },
{ ms: "Troli dan booth tersuai,\ndibina untuk menyerlah.", en: "Custom carts and booths, built to be seen." },
{ ms: "Di sinilah perniagaan anda\nmendapat pentasnya.", en: "Where your business gets its stage." },
],
sub: {
ms: "Setiap troli dan booth dibina khas mengikut tempahan, bukan dikeluarkan secara pukal. Dari satu troli mudah alih hinggalah booth acara tersuai sepenuhnya.",
en: "Every cart and booth is built to order, finished to a standard your brand can stand behind. From a single portable cart to a full custom event booth.",
},
ctaPrimary: { ms: "Mula tempahan", en: "Start your build" },
ctaSecondary: { ms: "Lihat hasil kerja", en: "View our work" },
},
trust: {
line: { ms: "Dipercayai jenama nasional dan klien bertaraf Dato'.", en: "Trusted by national brands and Dato'-tier clients." },
stats: [
{ value: "1.2 juta", label: { ms: "paparan satu binaan", en: "views on a single build" } },
{ value: "32K+", label: { ms: "pengikut", en: "followers" } },
{ value: "431K+", label: { ms: "suka", en: "likes" } },
],
logosNote: { ms: "logo klien", en: "client logo" },
},
work: {
eyebrow: { ms: "Hasil kerja kami", en: "Our work" },
title: { ms: "Setiap binaan, satu cerita jenama.", en: "Every build tells a brand's story." },
intro: { ms: "Tinjau rangkaian kami sebelum anda menghantar mesej. Tapis mengikut kategori.", en: "Browse the range before you message. Filter by category." },
filters: [
{ id: "all", ms: "Semua", en: "All" },
{ id: "cart", ms: "Troli mudah alih", en: "Portable carts" },
{ id: "retail", ms: "Retail & pameran", en: "Retail & exhibition" },
{ id: "event", ms: "Booth acara mewah", en: "Luxury event booths" },
{ id: "wood", ms: "Cenderahati kayu", en: "Wooden souvenirs" },
],
},
process: {
eyebrow: { ms: "Dari idea ke siap", en: "From idea to delivered" },
title: { ms: "Tempahan yang tersusun,\nbukan teka-teki.", en: "Ordering that's structured, not a guessing game." },
steps: [
{ n: "01", ms: "Beritahu kami keperluan anda", en: "Tell us your build", body: { ms: "Jenis, saiz, kegunaan dan tarikh. Semua dalam satu borang ringkas.", en: "Type, size, use case and date — all in one short brief." } },
{ n: "02", ms: "Kami sediakan sebut harga dan reka bentuk", en: "We quote and design", body: { ms: "Harga jelas, tiada kejutan. Anda lihat rekaan sebelum kami mula.", en: "Clear pricing, no surprises. You see the design before we start." } },
{ n: "03", ms: "Kami bina dengan teliti", en: "We build, crafted to order", body: { ms: "Dibina khas oleh tukang, kemasan premium dari awal hingga akhir.", en: "Crafted to order, premium finish end to end." } },
{ n: "04", ms: "Dihantar dan sedia digunakan", en: "Delivered and ready to roll", body: { ms: "Sampai ke lokasi anda, sedia untuk dibuka dan beroperasi.", en: "Delivered to your location, ready to open and operate." } },
],
},
why: {
eyebrow: { ms: "Kenapa Sukatukang", en: "Why Sukatukang" },
title: { ms: "Premium bukan slogan.\nIa kemasan kami.", en: "Premium isn't a slogan. It's our finish." },
pillars: [
{ ms: "Dibina khas, bukan pukal", en: "Built to order, never mass produced", body: { ms: "Setiap unit dibina mengikut tempahan anda, bukan dikeluarkan dari kilang secara borong.", en: "Each unit is made to your brief, not pulled off a production line." } },
{ ms: "Kemasan premium, dipercayai jenama nasional", en: "Premium finish trusted by national brands", body: { ms: "Standard kemasan yang boleh dibanggakan oleh klien bertaraf Dato' dan korporat.", en: "A finish standard Dato'-tier and corporate clients stand behind." } },
{ ms: "Perintis troli tersuai di Malaysia", en: "Pioneer of the custom portable cart in Malaysia", body: { ms: "Kami yang memulakan kategori ini, dan kami terus menetapkan piawaiannya.", en: "We started this category, and we keep setting its standard." } },
{ ms: "Komunikasi pantas dan jujur", en: "Fast, honest communication", body: { ms: "Dari idea ke serahan, anda sentiasa tahu di mana tempahan anda berada.", en: "From idea to handover, you always know where your build stands." } },
],
},
souvenir: {
eyebrow: { ms: "Cenderahati kayu, sedia ditempah", en: "Wooden souvenirs, ready to order" },
title: { ms: "Cenderahati kayu\nuntuk acara dan korporat.", en: "Wooden keepsakes for events and corporate gifts." },
body: { ms: "Cenderahati kayu tersuai dan siap-sedia untuk acara, hadiah korporat dan kenang-kenangan.", en: "Custom and ready-made wooden pieces for events, corporate gifts, and keepsakes." },
cta: { ms: "Tinjau cenderahati", en: "Browse souvenirs" },
phase: { ms: "Tempahan dalam talian (FPX) — fasa 2", en: "Online ordering with FPX — phase 2" },
items: [
{ ms: "Plak kayu tersuai", en: "Custom wooden plaque" },
{ ms: "Set hadiah korporat", en: "Corporate gift set" },
{ ms: "Kenang-kenangan acara", en: "Event keepsake" },
{ ms: "Ukiran nama", en: "Engraved nameplate" },
],
},
inquiry: {
eyebrow: { ms: "Ceritakan keperluan anda", en: "Tell us about your build" },
title: { ms: "Satu borang. Satu sebut harga.\nTiada lagi “berapa harga bang”.", en: "One brief. One quote. No more blank “how much”." },
intro: { ms: "Isi ringkas di bawah. Kami balas terus di WhatsApp dengan sebut harga, brief anda sudah lengkap di tangan kami.", en: "Fill the short brief below. We reply on WhatsApp with a quote, your details already in hand." },
submit: { ms: "Hantar ke WhatsApp", en: "Send to WhatsApp" },
note: { ms: "Kami balas di WhatsApp dengan sebut harga.", en: "We'll reply on WhatsApp with a quote." },
},
footer: {
tagline: { ms: "Troli dan booth tersuai, dibina untuk menyerlah.", en: "Custom carts and booths, built to be seen." },
response: { ms: "Maklum balas pantas", en: "Fast response" },
location: { ms: "Selangor, Malaysia", en: "Selangor, Malaysia" },
},
};
// portfolio items — category, name, caption, slot id, span
const BUILDS = [
{ id: "biggest", cat: "cart", feature: true,
name: { ms: "Booth mudah alih terbesar", en: "Biggest portable booth" },
cap: { ms: "Binaan dengan 1.2 juta paparan", en: "The 1.2M-view build" },
use: { ms: "Acara jenama berskala besar", en: "Large-scale brand activation" } },
{ id: "tokri", cat: "cart",
name: { ms: "TokRi Booth", en: "TokRi Booth" },
cap: { ms: "Tersuai eksklusif", en: "Exclusive custom made" },
use: { ms: "F&B mudah alih", en: "Portable F&B" } },
{ id: "dherbs", cat: "retail",
name: { ms: "Susun atur retail D'Herbs", en: "D'Herbs retail setup" },
cap: { ms: "Kehadiran retail jenama", en: "Branded retail presence" },
use: { ms: "Retail & pameran", en: "Retail & exhibition" } },
{ id: "event1", cat: "event",
name: { ms: "Booth acara mewah", en: "Luxury event booth" },
cap: { ms: "Susun atur acara penuh", en: "Full event spread" },
use: { ms: "Acara korporat", en: "Corporate event" } },
{ id: "exhibit", cat: "retail",
name: { ms: "Pameran pameran", en: "Exhibition stand" },
cap: { ms: "Direka untuk dilihat", en: "Built to be seen" },
use: { ms: "Pameran perdagangan", en: "Trade show" } },
{ id: "souvenir",cat: "wood",
name: { ms: "Rangkaian cenderahati kayu", en: "Wooden souvenir range" },
cap: { ms: "Tersuai dan siap-sedia", en: "Custom & ready-made" },
use: { ms: "Hadiah & kenang-kenangan", en: "Gifts & keepsakes" } },
{ id: "event2", cat: "event",
name: { ms: "Susun atur acara mewah", en: "Luxury event spread" },
cap: { ms: "Pengalaman jenama premium", en: "Premium brand experience" },
use: { ms: "Pelancaran produk", en: "Product launch" } },
{ id: "cart2", cat: "cart",
name: { ms: "Troli kopi tersuai", en: "Custom coffee cart" },
cap: { ms: "Mudah alih, sedia jenama", en: "Portable, brand-ready" },
use: { ms: "Kafe bergerak", en: "Mobile cafe" } },
];
// inquiry form options
const FORM_OPTS = {
buildType: [
{ ms: "Troli mudah alih", en: "Portable cart" },
{ ms: "Booth retail", en: "Retail booth" },
{ ms: "Booth acara", en: "Event booth" },
{ ms: "Cenderahati kayu", en: "Wooden souvenir" },
{ ms: "Belum pasti", en: "Not sure yet" },
],
useCase: [
{ ms: "F&B", en: "F&B" },
{ ms: "Retail", en: "Retail" },
{ ms: "Pameran", en: "Exhibition" },
{ ms: "Acara", en: "Event" },
{ ms: "Lain-lain", en: "Other" },
],
budget: [
{ ms: "Bawah RM3,000", en: "Under RM3,000" },
{ ms: "RM3,000 – RM6,000", en: "RM3,000 – RM6,000" },
{ ms: "RM6,000 – RM12,000", en: "RM6,000 – RM12,000" },
{ ms: "RM12,000+", en: "RM12,000+" },
{ ms: "Belum pasti", en: "Not sure yet" },
],
};
// ---- language helpers ----
// lang === 'ms' -> Malay primary; 'en' -> English primary
function pri(obj, lang) { return lang === "en" ? obj.en : obj.ms; }
function sec(obj, lang) { return lang === "en" ? obj.ms : obj.en; }
// ---- atoms ----
// Bilingual block: large primary + small secondary line
function Bi({ obj, lang, primaryClass, secClass, secStyle, tag = "div", style }) {
const Tag = tag;
const primary = pri(obj, lang);
const secondary = sec(obj, lang);
return (
{primary.split("\n").map((ln, i) => (
{ln}
))}
{secondary ? {secondary} : null}
);
}
// Eyebrow with mono primary + muted secondary
function Eyebrow({ obj, lang }) {
return (
{pri(obj, lang)}
· {sec(obj, lang)}
);
}
// scroll reveal hook
function useReveal() {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
}, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
el.querySelectorAll(".reveal").forEach((n) => io.observe(n));
if (el.classList.contains("reveal")) io.observe(el);
return () => io.disconnect();
}, []);
return ref;
}
// viewport hook — breakpoint at 820px
function useIsMobile(bp = 820) {
const [m, setM] = React.useState(typeof window !== "undefined" ? window.innerWidth <= bp : false);
React.useEffect(() => {
const on = () => setM(window.innerWidth <= bp);
on();
window.addEventListener("resize", on);
return () => window.removeEventListener("resize", on);
}, [bp]);
return m;
}
// Image placeholder slot — a striped, intentional "image goes here" cell. The
// client drops real booth photos in before launch; for the mockup it stays a
// labelled placeholder. Pass `aspect` (e.g. "4 / 5") to size by ratio inside a
// relatively-positioned wrapper; otherwise the caller's `style` positions it.
function Slot({ id, placeholder, radius = 0, style, aspect }) {
const fill = (
);
if (!aspect) return fill;
return (
{fill}
);
}
Object.assign(window, {
COPY, BUILDS, FORM_OPTS, pri, sec, Bi, Eyebrow, useReveal, Slot, useIsMobile,
});