Website Rebuild KONTROVERSIONAL

KONTROVERSIONAL is a Jakarta digital agency founded in 2024, active on TikTok both as a brand account and through a managed roster of creators. The site running today speaks to one audience only: brands. This project rebuilds it to serve two audiences at once — brand clients and prospective talents — while carrying the agency’s TikTok visual identity onto the web without softening it.

The result is a static site with no CMS and no backend: all content lives as structured files inside the repository, so a content update is a content change, not a redesign.

Note: this build is a demonstration. Every talent, client and testimonial shown is placeholder or reference content, not a live commercial claim.

The old site is a single marketing page with one route out: WhatsApp. It works for brands, but it has no place for creators who want to join, and it never presents the talent roster as an asset that can be sold to brands. Those two needs reinforce each other — a strong-looking roster raises credibility with brands, and a convincing client list attracts new talent.

1. Brands & marketers — looking for viral content execution, influencer collaborations or personal branding. Their intent is to judge credibility, then start a conversation.
2. Creators & prospective talents — TikTok/Instagram creators weighing whether to join. They want to see who else is signed, what the agency offers and how to apply.
3. Press & partners (secondary) — assessing the agency’s positioning and image.

The fork happens early, through large homepage panels and navigation labelled by audience rather than by feature. The crossing point is the talent profile page: a “book this talent” CTA hands creator traffic back to the brand funnel.

The visual system is taken straight from the agency’s TikTok output: black, white and a single red accent. No fourth colour, no gradients, no pastels. Oversized display type is the primary graphic element — not merely a label — and photography runs full-bleed with a cutout treatment.

• Palette — Three colours on screen at most: black, white, accent red.
• Typography — Heavy grotesque for headlines, clean sans for body. One word inside a headline turns red for emphasis.
• Signature module — “Kontroversial Take:” — a red label followed by one opinionated line, recurring across the site.
• Motion — Fast, short scroll reveals plus a marquee ticker. Not cinematic parallax.
• Two registers — Talent pages read as fashion editorial; agency culture content is allowed to feel rougher and meme-adjacent.

Every technical decision follows one constraint: no CMS, no backend, content managed as code. The site is fully static and can be hosted on any CDN with no server bill.

The consequence that matters: a malformed talent file fails the build rather than shipping as a broken page. Validation happens once at the content boundary, so the rest of the code never has to check for missing data.

Four weeks, four phases. Each week ends with something that can be opened and judged, not just internal progress.

1. Week 1

   Foundation & Design System

   Set up the technical frame and the visual language before any page is built.

   • —Next.js with static export, TypeScript and Tailwind CSS.
   • —Lock the palette to black, white and one accent red — anything outside it fails at compile time, not merely at review.
   • —A fluid type scale (clamp) for the oversized headlines DESIGN.md §3 calls for.
   • —Core components: Logo, TwoToneHeadline, TakeCallout, MarqueeTicker, StatBadge, SectionBreakBlack.

   Output A reusable design system and a deployed, empty shell.

2. Week 2

   Content Layer & Talent Pages

   Content as code: each talent is one JSON file, validated at build time.

   • —Content schema (JSON + Zod) for talents, clients, testimonials and case studies — bad data fails the build instead of reaching production.
   • —Ten launch talent profiles with “meet our trover” bios, niche tags and TikTok/Instagram stats.
   • —The /talents roster page with niche filtering.
   • —The /talents/[slug] profile layout: editorial portrait, name wordmark, stats block, TikTok embeds and a “book this talent” CTA.

   Output The whole creator-facing path is finished and testable.

3. Week 3

   Brand-Facing Pages

   Complete the commercial side and join the two audiences into one flow.

   • —Home: hero, stats bar, tagline marquee and the brand vs. talent audience fork.
   • —/brands: five detailed services, case studies (problem → approach → result → metrics), client logos, testimonials.
   • —/work, then /about with the four “Not for Everyone” pillars and the Kontroversial Take module.
   • —/contact: a branched form (“I’m a brand” / “I’m a creator”) through a static form service, with the WhatsApp deep link as the primary fallback.

   Output The full sitemap is live and interlinked.

4. Week 4

   Polish & Launch

   Turn a complete site into a production-ready one.

   • —Responsive image pipeline (Sharp) — talent portraits are large, so srcset is prepared at build time.
   • —SEO: meta tags, per-page OG images (talent profiles get shared directly), sitemap.xml.
   • —Accessibility pass: contrast, display type legibility on small screens, keyboard focus, prefers-reduced-motion.
   • —Performance testing on mobile networks, then a static deploy to Vercel/Netlify/Cloudflare Pages.

   Output A live site, with basic analytics measuring the goals in Section 03.

• ×A CMS or admin panel for non-technical editors — content stays code-managed, per the stakeholder decision.
• ×E-commerce or payments.
• ×A login or dashboard for talents to manage their own profiles.
• ×Automatic multi-language switching.

These need a decision from the agency before a real launch:

1. 1.Canonical domain: kontroversional.com or kontraversional.com?
2. 2.Are result metrics available for the client logos shown, or do they stay logo-only until case studies are written?
3. 3.Are those ten talents the full current roster?
4. 4.Are there testimonials beyond the three currently live?
5. 5.Do talent applications go straight to WhatsApp, or through a structured form?
6. 6.Should the site be Indonesian, English or bilingual?

Questions about this build, the scope or the timeline: