Gary Gagarin & PartnersA website proposal for an advocate’s office in Karawang, West Java
Our team designed and built a website for Gary Gagarin & Partners, an advocate’s office in Karawang, as a proposal of our own. It is in Indonesian, with legal explainers that cite the laws they rely on and an editor area for publishing articles without a developer.
- Client
- Own project
- Sector
- Legal services
- Year
- 2026
- Platforms
- Website, Mobile web
- Services
- Product and UX design, Web development
A website in Indonesian for an advocate’s office in Karawang, West Java. It explains the office’s seven areas of practice, answers common legal questions in plain words with the laws behind them, and lets a visitor get in touch by phone, WhatsApp or a form. We prepared it on our own initiative as a proposal for the firm.
Built for
- Residents with a question about a contract, land, inheritance, a divorce or a bank who want to understand their position before they call.
- Business owners dealing with contracts, company formation or a dispute with another company.
- A member of the office’s staff who publishes articles without a developer.
The problem
An Indonesian advocate works under a professional code that limits what an office may say about itself: it may not promise an outcome, publicise the cases it handles or name its clients, and it should not compare itself with other lawyers. The site had to be useful and clear within those limits.
Legal information has to be correct and traceable. Every explanation needed to point to the law it relies on, in words a resident or a small business owner understands.
The site was designed for visits that start on a phone, often from a link shared on WhatsApp, so an article had to open quickly, read well on a small screen and be easy to pass on.
Articles have to be kept up by someone at the office who is not a developer, without a new deployment for every change.
Goals
- 01Follow the advocate code: no promised outcome, no results, no client details, no fee amounts and no comparison with other lawyers.
- 02Explain each area of practice and common legal questions in plain Indonesian, citing the articles of law involved.
- 03Let an editor draft, preview, publish, update and unpublish articles from a protected area.
- 04Make an article easy to share on WhatsApp, with a cover image of its own.
- 05Take enquiries through a form that resists automated sending and keeps every message.
- 06Give every animation a still version for visitors who reduce motion.
Our role
We prepared the site on our own initiative as a proposal for the firm: the design, the Indonesian copy and legal explainers, the build and the hosting.
What we delivered
- An Indonesian site: home, seven service pages, about, profile, articles, contact, privacy and credits pages
- An opening sequence built from the firm’s logo lettering, played once per visit on the home page
- A pinned statements section and a stacked set of service cards on the home page
- Nine legal explainers and seven service pages, each citing the laws it relies on
- An article list with search and filters, and an article panel that is a real page
- WhatsApp sharing, link copying and downloadable covers for a WhatsApp Status and for square posts
- An editor area for drafting, previewing, publishing, updating and unpublishing articles, with cover upload and earlier versions to restore
- A contact form with server-side checks, protection against automated sending and a stored inbox
- Deployment on our server with release folders, a health check, rollback and daily backups
How we worked
- 01
Write to the advocate code first
Before any copy was written, we listed what the Indonesian advocate code and the Advocates Law allow an office to say. The site names its areas of practice and says that fees are agreed with the client before work begins. It carries no results, client names, testimonials, fee amounts or superlatives.
- 02
Cite the law in plain words
Each service page has a legal basis section, and each explainer lists its sources, mostly the published texts of the laws it cites. Every article carries a note that it is general information, not advice for a particular case.
- 03
Measure the motion references
We took eight reference recordings apart frame by frame and rebuilt each mechanism for this firm: the opening, the menu, the statements, the service stack, the media cards, the article panel, the questions and the footer. Only the mechanisms and proportions were kept; nothing of the reference sites’ brands or content was reused.
- 04
Start from the firm’s own mark
The logo was set up as layered inline SVG, so the opening can move its letters and the footer can set the name across the full width. The colours come from the logo: crimson, ink and a cool white.
- 05
Run it like a product
Each deployment builds a new release, backs up the database, switches over, checks the health endpoint and the home page, and switches back if a check fails. Articles, messages and uploaded pictures are backed up every night.
Screens and features
Articles open beside the list
On a computer an article slides in over the list, and on a phone it rises as a sheet. Each one is a real page, so a link, a reload and Back all work.
Five statements, one at a time
The section holds still while each statement lights up and the photograph changes with it. Scrolling back reverses the sequence.
Seven areas of practice in one stack
Each service card stops under the one before it, with numbered tabs above. Every card leads to a full page on that area of law.
Built for the phone first
The menu fills the screen, the service cards keep their stack and numbered tabs, and the footer puts the phone number first.
An opening made from the logo
On the first visit of a session, the letters of the firm’s name start spread across the screen and close into the logo, then the home page appears. Visitors who reduce motion go straight to the page.
A real page behind every panel
Articles and media summaries open in a panel over the list, or a sheet on phones, and the address changes to the article’s own page. It can be linked, reloaded and found by search engines, and Back closes it.
Sharing made for WhatsApp
Each article has buttons to copy its link and to share it on WhatsApp. Where the browser can share files, the article goes out with its cover picture; elsewhere a visitor can download a cover sized for a WhatsApp Status (1080 by 1920) or a square one. Shared links show a preview image.
An editor area for the office
A protected area where an editor writes an article, uploads its cover, opens a private preview link, then publishes, updates or unpublishes it. Drafts save automatically, earlier versions can be restored, and public pages update without a new deployment.
A contact form that keeps every message
The form is checked on the server and lists every problem at once. A hidden field, a signed time token and a limit per visitor stop automated sending, and each message is stored in an inbox in the editor area before the visitor sees a confirmation.
Legal explainers with their sources
Nine articles answer questions such as how breach of contract differs from an unlawful act, what a formal warning letter is, and which court hears a divorce. Each lists its sources.
Motion that steps aside
With reduced motion there is no opening sequence and the statements become a plain list, so every word is on the page from the start.
Technical choices
What the product is built with, and why.
- Next.js 16 with the App Router and React 19
- Pages are rendered on the server. The article panel uses intercepting routes, so the same address shows a panel when it is opened from the list and a full page when it is opened directly.
- SQLite with better-sqlite3
- Articles, editor accounts and messages live in one database file on the server, kept outside the release folders so every deployment leaves them in place.
- GSAP 3.15
- Runs the opening, the menu and the pinned statements. Each checks the visitor’s reduced motion setting first and leaves its animation out.
- Tiptap for the article editor
- Headings, lists, quotes and pictures in a familiar editing bar. The server cleans the HTML before it is stored.
- sharp and server-drawn covers
- Uploaded covers are resized into several widths. Share covers and link previews are drawn on the server from one template.
- Instrument Sans and Newsreader, self-hosted
- One variable font file for the whole interface and a serif loaded only on article pages, both served from the site itself.
- nginx, PM2 and Let’s Encrypt on our server
- Release folders with a health check and automatic rollback, a nightly backup of the database and uploads, and an HTTPS certificate that renews itself.
Outcomes
No accessibility violations on thirteen pages
An automated audit of the live site found no violations on the home, services, service, article list, article, media summary, about, profile, contact, privacy, credits, editor sign-in and not-found pages.
Evidence: an automated accessibility audit (AccessLint) of garylaw.awanforge.com on 8 October 2026.
The article panel behaves as a page
Scripted browser checks at desktop and phone width confirmed that opening an article changes the address, Back returns to the list, and a direct link or a reload shows the full article page.
Evidence: our browser check script, run against garylaw.awanforge.com on 8 October 2026.
This website is our own project, prepared as a proposal for Gary Gagarin & Partners and hosted on our server at garylaw.awanforge.com. The firm’s name, logo, office sign photograph and portrait come from its public Instagram account, and the other photographs and video are licensed free stock credited on the site’s credits page. The service pages and legal explainers were written by our team from the laws they cite.
Run a law office or a professional practice?
We build websites that explain your work in plain words, follow the rules of your profession and let your own staff publish. Tell us about your practice.