There is a common perception in the legal industry that websites prioritize formality over user experience. When I took on the project for Notaris & PPAT [notarisleni], my goal was to modernize the digital presence of a notary office while ensuring the site performed efficiently for clients on mobile devices.
Many websites in this sector utilize traditional CMS platforms like WordPress. I opted for a different approach: a modern, Static Site Generation (SSG) architecture using Astro, React, and Tailwind CSS. Here is an overview of the development process.
1. The Tech Stack: Why Astro?
The primary requirements for a local business website are Speed and SEO Visibility. Clients searching for services like "Buat PT di Bogor" often do so on mobile networks, where page load speed is critical.
- Astro (v5.17): Selected for its "Island Architecture," which minimizes client-side JavaScript by default.
- React: Used selectively for interactive components like the Services Carousel.
- Tailwind CSS: Utilized for efficient, utility-first styling to keep the CSS bundle small.
- Cloudflare Pages: Chosen for reliable global content delivery.
2. Architecture: The "Island" Strategy
In many modern web applications, the browser downloads a substantial JavaScript bundle to render the layout. Astro reverses this pattern. The Notaris Leni site is primarily static HTML, generated at build time.
However, I needed interactivity for the Services Carousel. This is where Astro's "Islands" are useful. I built the carousel in React but configured Astro to hydrate it only when visible:
---
// src/pages/index.astro
import ServicesCarousel from '../components/ServicesCarousel.jsx';
---
<!-- The rest of the page is static HTML -->
<section>
<h2>Layanan Utama</h2>
<!-- This component hydrates only when scrolled into view -->
<ServicesCarousel client:visible />
</section>This directive (client:visible) reduces the initial JavaScript payload. The React bundle only loads if the user scrolls down to the services section.
3. Local SEO Strategy
For a notary, appearing in local search results (Google Maps/Search) is important. Beyond standard meta tags, I implemented structured data (JSON-LD) directly into the main layout.
I created a MainLayout.astro component that includes the specific Notary schema in the <head> of every page:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Notary",
"name": "Notaris & PPAT Leni Marlina, S.H., M.Kn.",
"address": {
"streetAddress": "Jl. Taman Tirta Cimanggu...",
"addressLocality": "Bogor",
"addressRegion": "Jawa Barat"
},
"geo": {
"latitude": -6.5340415,
"longitude": 106.7785213
},
"openingHours": "Mo-Fr 08:30-16:30"
}
</script>This provides search engines with precise information about the business location and hours, which can improve visibility in local map results.
4. Visual Design System
The design aims to evoke professional reliability. I moved away from standard corporate templates and adopted a focused color palette:
- Primary:
Slate-900(Dark background). - Accent:
Amber-600(Gold highlights). - Typography: Playfair Display for headings (serif) paired with Inter for body text (sans-serif).
I also implemented a Responsive Design strategy. Using Tailwind's breakpoints, the navigation adapts from a mobile menu to a desktop layout without code duplication.
5. Strategic Decisions
Several UX decisions were made to align the website with business goals:
The "floating" CTA
I added a persistent WhatsApp Floating Action Button (FAB). Since many users visit legal sites with immediate questions, keeping this button accessible aims to reduce friction for contacting the office.
Specific Credibility Signals
Rather than general statements, I included specific details like "Sejak 2012" and the operational region ("Kota Bogor"). Specific information tends to build more credibility in the legal field. This content was placed prominently in the hero section.
Performance Optimization
Performance was a priority throughout development. Achieving high scores on performance metrics ensures that users, including those on slower mobile connections, can access the site quickly. A responsive site contributes to a professional first impression.
6. Conclusion
The result is a highly performant website that scores well on Google Lighthouse metrics. It requires minimal ongoing maintenance, offers the security benefits of static files, and provides a professional user experience. This project demonstrates that a modern architecture can deliver effective business websites without unnecessary complexity.