Agentika Web

One-Stop AI Agent & Automation Hub · agentika.web.id

Website resmi untuk Agentika, agensi AI Automation yang membantu bisnis, solopreneur, dan kreator mengotomatisasi workflow menggunakan AI. Platform ini menggabungkan landing page agency, blog SEO, direktori AI tools (afiliasi), dan lead generation — semuanya dalam satu proyek Next.js.

Deskripsi

Agentika Web adalah proyek full-stack frontend yang dibangun dengan performa, SEO, dan monetisasi sebagai prioritas utama:

Showcase & Lead Generation — landing page agency untuk layanan chatbot AI, workflow automation, dan data scraping.
SEO Blog & Tech Review — engine blog berbasis MDX untuk konten berbahasa Indonesia siap AdSense & afiliasi.
AI Tools Directory — hub direktori tools AI dengan badge, filter kategori, dan tautan afiliasi.

Fitur Utama

Landing Page & Agency

Hero futuristik dengan mockup simulasi AI chat (dark theme, glow effect, grid background).
Grid layanan: WhatsApp/IG AI Chatbot, Custom Workflow Automation (n8n/Make), Data Extraction & Scraping.
Banner lead capture untuk AI Automation Checklist (form email).
Tombol WhatsApp mengambang + CTA "Konsultasi Gratis" di seluruh halaman.
Halaman layanan detail dengan use case, proses kerja, dan FAQ-style blok.

Blog Engine (MDX)

Rendering statis (SSG) dengan next-mdx-remote + gray-matter.
Halaman listing dengan pencarian dan filter berdasarkan tag.
Halaman artikel dengan Table of Contents, estimasi waktu baca, metadata dinamis (OpenGraph/Twitter Card), dan navigasi artikel sebelumnya/berikutnya.
JSON-LD Article schema untuk SEO.
Slot iklan AdSense (top, in-feed, bottom) + komponen <AffiliateBox /> di dalam artikel.

AI Tools Hub

Grid direktori 12+ tools AI (Make.com, OpenAI, Zapier, n8n, Apify, dll).
Badge: Featured, Free Trial, Agency Pick.
Filter berdasarkan kategori (Automation, LLM/AI, Chatbot, Scraping, dll).
Tautan afiliasi dengan rel="sponsored nofollow noopener".

Lead Generation & Kontak

Form kontak dengan validasi (React Hook Form): Nama, Email, Kebutuhan Bisnis, Budget Range.
Integrasi WhatsApp satu klik.

SEO & Monetisasi

Dynamic sitemap.xml dan robots.txt.
JSON-LD Organization schema di root layout.
Metadata dinamis per halaman (generateMetadata).
Komponen AdSenseBanner siap pakai (placeholder otomatis jika client belum diisi).

Tech Stack

Layer	Teknologi
Framework	Next.js 14 (App Router, TypeScript)
Styling	Tailwind CSS + Lucide Icons
UI	Komponen custom ala Shadcn UI (button, card, badge, input, select, textarea)
Content	MDX (`next-mdx-remote`) + `gray-matter` untuk frontmatter
Form	React Hook Form
Font	System font stack (tanpa dependency eksternal)
Deployment	Vercel (terhubung ke custom domain)
Monetization	Google AdSense, komponen AffiliateBox

Struktur Proyek

agentika-web/
├── app/
│   ├── layout.tsx          # Root layout: dark theme, navbar, footer, AdSense, JSON-LD
│   ├── page.tsx            # Homepage (hero, services, featured, CTA)
│   ├── globals.css         # Tema & utilitas Tailwind
│   ├── sitemap.ts          # Dynamic XML sitemap
│   ├── robots.ts           # robots.txt
│   ├── not-found.tsx       # Halaman 404
│   ├── blog/
│   │   ├── page.tsx        # Listing blog (search + filter tag)
│   │   └── [slug]/page.tsx # Halaman artikel MDX + TOC + ad slots
│   ├── services/page.tsx   # Detail layanan agency
│   ├── tools/page.tsx      # Direktori AI tools
│   └── contact/page.tsx    # Kontak + form
├── components/
│   ├── ui/                 # Button, Card, Badge, Input, Textarea, Select, Label
│   ├── navbar.tsx          # Navbar sticky + mobile menu
│   ├── footer.tsx          # Footer lengkap
│   ├── hero.tsx            # Hero + mockup AI chat
│   ├── services-grid.tsx   # Grid layanan
│   ├── featured-section.tsx# Artikel & tools unggulan
│   ├── cta-banner.tsx      # Lead capture email
│   ├── blog-list.tsx       # Filter & pencarian blog (client)
│   ├── blog-card.tsx       # Kartu artikel
│   ├── toc.tsx             # Table of contents
│   ├── tool-card.tsx       # Kartu tool afiliasi
│   ├── tools-explorer.tsx  # Filter kategori tools
│   ├── contact-form.tsx    # Form kontak (React Hook Form)
│   ├── adsense-banner.tsx  # Slot AdSense reusable
│   ├── affiliate-box.tsx   # CTA box afiliasi
│   ├── whatsapp-float.tsx  # Tombol WA mengambang
│   └── mdx-components.tsx  # Custom component untuk MDX
├── content/
│   └── blog/               # Artikel MDX (frontmatter + konten)
├── lib/
│   ├── site.ts             # Konfigurasi global (branding, WA, nav)
│   ├── blog.ts             # Utilitas baca MDX blog
│   ├── tools.ts            # Data direktori AI tools
│   ├── services.ts         # Data layanan
│   └── utils.ts            # Helper (cn, formatDate, readingTime, dll)
├── public/
│   ├── icon.svg
│   └── images/blog/        # Cover image artikel
├── .env.example
├── next.config.mjs
├── tailwind.config.ts
└── tsconfig.json

Menambah Artikel Blog Baru

Buat file .mdx di content/blog/ dengan frontmatter:

---
title: "Judul Artikel Anda"
date: "2026-01-01"
excerpt: "Ringkasan singkat yang muncul di kartu artikel dan meta description."
coverImage: "/images/blog/nama-file.svg"
tags: ["AI Agents", "Automation"]
author: "Tim Agentika"
authorTitle: "AI Automation Agency"
featured: true
readingMinutes: 6
---

Konten artikel di sini. Gunakan Markdown biasa atau MDX.

<AffiliateBox
  title="Judul CTA"
  description="Deskripsi singkat."
  cta="Coba Sekarang"
  href="https://contoh.com"
  tone="cyan"
/>

Tag yang dikenali: AI Agents, Automation, WhatsApp, n8n, Data Scraping, Productivity, Business.

Setup Environment Local

Prasyarat

Node.js 18.17+ (disarankan 20 LTS)
npm / yarn / pnpm
Git

Langkah Instalasi

# 1. Clone repositori
git clone https://github.com/ai-abraham/Agentik.git
cd Agentik

# 2. Install dependencies
npm install

# 3. Siapkan environment variables
cp .env.example .env.local

# 4. Jalankan development server
npm run dev

Buka http://localhost:3000.

Environment Variables

Variable	Deskripsi	Contoh
`NEXT_PUBLIC_SITE_URL`	URL site (dipakai untuk canonical, sitemap, robots)	`https://agentika.web.id`
`NEXT_PUBLIC_ADSENSE_CLIENT`	Publisher ID Google AdSense. Kosongkan untuk menampilkan placeholder iklan	`ca-pub-XXXXXXXXXXXXXXXX`
`NEXT_PUBLIC_FORM_ENDPOINT`	Webhook form (Formspree/Resend). Kosongkan untuk mode demo (sukses simulasi)	`https://formspree.io/f/xxxxxx`

Catatan: Nomor WhatsApp, email, dan tautan sosial dikonfigurasi di lib/site.ts (bukan env var).

Script yang Tersedia

npm run dev        # Development server
npm run build      # Production build
npm run start      # Jalankan hasil build
npm run lint       # ESLint (next/core-web-vitals)
npm run typecheck  # TypeScript type check

Konfigurasi Sebelum Production

Ubah nomor WhatsApp di lib/site.ts (siteConfig.whatsapp.number).
Ganti email kontak & sosial media.
Isi NEXT_PUBLIC_ADSENSE_CLIENT dengan publisher ID Anda.
Isi NEXT_PUBLIC_FORM_ENDPOINT dengan endpoint Formspree/Resend.
(Opsional) Ganti logo di public/icon.svg.

Deploy ke Vercel

Opsi 1: Import Repositori dari GitHub

Push proyek ke GitHub (sudah dilakukan: ai-abraham/Agentik).
Buka vercel.com/new → Import Git Repository.
Pilih repositori Agentik.
Vercel otomatis mendeteksi Next.js. Framework preset: Next.js.
Build command & output directory biarkan default (next build, otomatis).
Klik Deploy.

Opsi 2: CLI (Vercel CLI)

# Install Vercel CLI
npm install -g vercel

# Deploy (ikuti instruksi login)
vercel

# Deploy ke production
vercel --prod

Konfigurasi Environment di Vercel

Setelah import, tambahkan Environment Variables di Project → Settings → Environment Variables:

NEXT_PUBLIC_SITE_URL = https://agentika.web.id
NEXT_PUBLIC_ADSENSE_CLIENT = ca-pub-XXXXXXXXXXXXXXXX
NEXT_PUBLIC_FORM_ENDPOINT = https://formspree.io/f/xxxxxx

Tambahkan untuk scope: Production, Preview, dan Development.

Hubungkan Custom Domain

Di dashboard Vercel: Project → Settings → Domains.
Tambahkan agentika.web.id (dan www.agentika.web.id).
Ikuti instruksi untuk mengarahkan DNS:
- Vercel DNS: tambahkan nameserver vercel-dns.com dkk.
- Domain eksternal: buat A record → 76.76.21.21 atau CNAME cname.vercel-dns.com.
Tunggu propagasi DNS (beberapa menit–jam). SSL certificate dibuat otomatis oleh Vercel.

Deploy Otomatis (CI/CD)

Setiap push ke branch main akan memicu preview build; merge ke production branch memicu deploy production secara otomatis. Untuk mematikan deploy preview, ubah pengaturan di Project → Settings → Git.

Navigation Menu

Repository navigation

About

Repository files navigation

Agentika Web

Deskripsi

Fitur Utama

Landing Page & Agency

Blog Engine (MDX)

AI Tools Hub

Lead Generation & Kontak

SEO & Monetisasi

Tech Stack

Struktur Proyek

Menambah Artikel Blog Baru

Setup Environment Local

Prasyarat

Langkah Instalasi

Environment Variables

Script yang Tersedia

Konfigurasi Sebelum Production

Deploy ke Vercel

Opsi 1: Import Repositori dari GitHub

Opsi 2: CLI (Vercel CLI)

Konfigurasi Environment di Vercel

Hubungkan Custom Domain

Deploy Otomatis (CI/CD)

Lisensi

About

Releases

Packages

Contributors

Languages

Name		Name	Last commit message	Last commit date
app		app
components		components
content/blog		content/blog
lib		lib
public		public
.env.example		.env.example
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
next-env.d.ts		next-env.d.ts
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation

Agentika Web

Deskripsi

Fitur Utama

Landing Page & Agency

Blog Engine (MDX)

AI Tools Hub

Lead Generation & Kontak

SEO & Monetisasi

Tech Stack

Struktur Proyek

Menambah Artikel Blog Baru

Setup Environment Local

Prasyarat

Langkah Instalasi

Environment Variables

Script yang Tersedia

Konfigurasi Sebelum Production

Deploy ke Vercel

Opsi 1: Import Repositori dari GitHub

Opsi 2: CLI (Vercel CLI)

Konfigurasi Environment di Vercel

Hubungkan Custom Domain

Deploy Otomatis (CI/CD)

Lisensi

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages