landingpage

.codegraph/.gitignore

@@ -0,0 +1,5 @@
+# CodeGraph data files — local to each machine, not for committing.
+# Ignore everything in .codegraph/ except this file itself, so transient
+# files (the database, daemon.pid, sockets, logs) never show up in git.
+*
+!.gitignore

.gitignore

@@ -0,0 +1,39 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+/node_modules/
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# InsForge & AI agent skills
+.insforge
+.agent
+.agents
+.augment
+.claude
+.cline
+.github/copilot*
+.kilocode
+.qoder
+.qwen
+.roo
+.trae
+.windsurf

.npmrc

@@ -0,0 +1 @@
+allow-scripts=*

.oxlintrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}

AGENTS.md

@@ -0,0 +1,22 @@
+# AGENTS.md
+
+<!-- INSFORGE:START -->
+## InsForge backend
+
+This project uses [InsForge](https://insforge.dev): an all-in-one, open-source Postgres-based backend (BaaS) that gives this app a database, authentication, file storage, edge functions, realtime, an AI model gateway, and payments through one platform.
+
+- **Project:** **Landing Page** (API base `https://catb5ski.ap-southeast.insforge.app`)
+- **Skills:** these InsForge skills are installed for supported coding agents. Reach for them before implementing any InsForge feature instead of guessing the API:
+  - `insforge`: app code with the `@insforge/sdk` client (database CRUD, auth, storage, edge functions, realtime, AI, email, and Stripe payments).
+  - `insforge-cli`: backend and infrastructure via the `insforge` CLI (projects, SQL, migrations, RLS policies, storage buckets, functions, secrets, payment setup, schedules, deploys).
+  - `insforge-debug`: diagnosing failures (SDK/HTTP errors, RLS denials, auth and OAuth issues) and running security or performance audits.
+  - `insforge-integrations`: wiring external auth providers (Clerk, Auth0, WorkOS, Better Auth, etc.) for JWT-based RLS, or the OKX x402 payment facilitator.
+  - `find-skills`: discovering additional skills on demand.
+- **Credentials:** app code reads keys from `.env.local`; the CLI reads `.insforge/project.json`. Never hardcode or commit keys.
+
+Key patterns:
+
+- Database inserts take an array: `insert([{ ... }])`.
+- Reference users with `auth.users(id)`; use `auth.uid()` in RLS policies.
+- For storage uploads, persist both the returned `url` and `key`.
+<!-- INSFORGE:END -->

README.md

@@ -0,0 +1,32 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the Oxlint configuration
+
+If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
+
+```json
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "options": {
+    "typeAware": true
+  },
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
+```
+
+See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

functions/gallery-delete.ts

@@ -0,0 +1,58 @@
+import { createAdminClient } from "npm:@insforge/sdk";
+
+const corsHeaders = {
+  "Access-Control-Allow-Origin": "*",
+  "Access-Control-Allow-Methods": "POST, OPTIONS",
+  "Access-Control-Allow-Headers": "Content-Type, Authorization",
+};
+
+export default async function (req: Request): Promise<Response> {
+  if (req.method === "OPTIONS") {
+    return new Response(null, { status: 204, headers: corsHeaders });
+  }
+
+  if (req.method !== "POST") {
+    return new Response(JSON.stringify({ error: "Method not allowed" }), {
+      status: 405,
+      headers: { ...corsHeaders, "Content-Type": "application/json" },
+    });
+  }
+
+  try {
+    const { key } = await req.json();
+
+    if (!key || typeof key !== "string") {
+      return new Response(JSON.stringify({ error: "Missing key" }), {
+        status: 400,
+        headers: { ...corsHeaders, "Content-Type": "application/json" },
+      });
+    }
+
+    const admin = createAdminClient({
+      baseUrl: Deno.env.get("INSFORGE_BASE_URL")!,
+      apiKey: Deno.env.get("INSFORGE_API_KEY")!,
+    });
+
+    const { error } = await admin.storage.from("gallery").remove(key);
+
+    if (error) {
+      return new Response(JSON.stringify({ error: error.message }), {
+        status: 500,
+        headers: { ...corsHeaders, "Content-Type": "application/json" },
+      });
+    }
+
+    return new Response(JSON.stringify({ success: true }), {
+      status: 200,
+      headers: { ...corsHeaders, "Content-Type": "application/json" },
+    });
+  } catch (err) {
+    return new Response(
+      JSON.stringify({ error: err instanceof Error ? err.message : "Unknown error" }),
+      {
+        status: 500,
+        headers: { ...corsHeaders, "Content-Type": "application/json" },
+      }
+    );
+  }
+}

functions/gallery-upload.ts

@@ -0,0 +1,68 @@
+import { createAdminClient } from "npm:@insforge/sdk";
+
+const corsHeaders = {
+  "Access-Control-Allow-Origin": "*",
+  "Access-Control-Allow-Methods": "POST, OPTIONS",
+  "Access-Control-Allow-Headers": "Content-Type, Authorization",
+};
+
+export default async function (req: Request): Promise<Response> {
+  if (req.method === "OPTIONS") {
+    return new Response(null, { status: 204, headers: corsHeaders });
+  }
+
+  if (req.method !== "POST") {
+    return new Response(JSON.stringify({ error: "Method not allowed" }), {
+      status: 405,
+      headers: { ...corsHeaders, "Content-Type": "application/json" },
+    });
+  }
+
+  try {
+    const { name, contentType, base64 } = await req.json();
+
+    if (!base64 || typeof base64 !== "string") {
+      return new Response(JSON.stringify({ error: "Missing base64 file" }), {
+        status: 400,
+        headers: { ...corsHeaders, "Content-Type": "application/json" },
+      });
+    }
+
+    const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
+    const file = new File([bytes], name || "gallery.jpg", {
+      type: contentType || "image/jpeg",
+    });
+
+    const admin = createAdminClient({
+      baseUrl: Deno.env.get("INSFORGE_BASE_URL")!,
+      apiKey: Deno.env.get("INSFORGE_API_KEY")!,
+    });
+
+    const { data, error } = await admin.storage
+      .from("gallery")
+      .uploadAuto(file);
+
+    if (error || !data) {
+      return new Response(
+        JSON.stringify({ error: error?.message || "Upload failed" }),
+        {
+          status: 500,
+          headers: { ...corsHeaders, "Content-Type": "application/json" },
+        }
+      );
+    }
+
+    return new Response(JSON.stringify({ url: data.url, key: data.key }), {
+      status: 200,
+      headers: { ...corsHeaders, "Content-Type": "application/json" },
+    });
+  } catch (err) {
+    return new Response(
+      JSON.stringify({ error: err instanceof Error ? err.message : "Unknown error" }),
+      {
+        status: 500,
+        headers: { ...corsHeaders, "Content-Type": "application/json" },
+      }
+    );
+  }
+}

functions/login-user.ts

@@ -0,0 +1,83 @@
+import { createAdminClient } from "npm:@insforge/sdk";
+
+const corsHeaders = {
+  "Access-Control-Allow-Origin": "*",
+  "Access-Control-Allow-Methods": "POST, OPTIONS",
+  "Access-Control-Allow-Headers": "Content-Type, Authorization",
+};
+
+function sha256Hex(text: string): Promise<string> {
+  return crypto.subtle
+    .digest("SHA-256", new TextEncoder().encode(text))
+    .then((buf) =>
+      Array.from(new Uint8Array(buf))
+        .map((b) => b.toString(16).padStart(2, "0"))
+        .join("")
+    );
+}
+
+export default async function (req: Request): Promise<Response> {
+  if (req.method === "OPTIONS") {
+    return new Response(null, { status: 204, headers: corsHeaders });
+  }
+  if (req.method !== "POST") {
+    return new Response(JSON.stringify({ error: "Method not allowed" }), {
+      status: 405,
+      headers: { ...corsHeaders, "Content-Type": "application/json" },
+    });
+  }
+
+  try {
+    const { username, password } = await req.json();
+
+    if (
+      typeof username !== "string" ||
+      typeof password !== "string" ||
+      !username.trim() ||
+      !password
+    ) {
+      return new Response(JSON.stringify({ error: "Username & password wajib." }), {
+        status: 400,
+        headers: { ...corsHeaders, "Content-Type": "application/json" },
+      });
+    }
+
+    const admin = createAdminClient({
+      baseUrl: Deno.env.get("INSFORGE_BASE_URL")!,
+      apiKey: Deno.env.get("INSFORGE_API_KEY")!,
+    });
+
+    const { data: user } = await admin.database
+      .from("app_users")
+      .select("username, password_hash, salt")
+      .eq("username", username.trim())
+      .maybeSingle();
+
+    if (!user) {
+      return new Response(JSON.stringify({ error: "Username atau password salah." }), {
+        status: 401,
+        headers: { ...corsHeaders, "Content-Type": "application/json" },
+      });
+    }
+
+    const pepper = Deno.env.get("AUTH_PEPPER") ?? "";
+    const hash = await sha256Hex(`${user.salt}|${password}|${pepper}`);
+
+    if (hash !== user.password_hash) {
+      return new Response(JSON.stringify({ error: "Username atau password salah." }), {
+        status: 401,
+        headers: { ...corsHeaders, "Content-Type": "application/json" },
+      });
+    }
+
+    return new Response(JSON.stringify({ ok: true, username: user.username }), {
+      status: 200,
+      headers: { ...corsHeaders, "Content-Type": "application/json" },
+    });
+  } catch (err) {
+    return new Response(
+      JSON.stringify({ error: err instanceof Error ? err.message : "Unknown error" }),
+      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+    );
+  }
+}

functions/register-user.ts

@@ -0,0 +1,107 @@
+import { createAdminClient } from "npm:@insforge/sdk";
+
+const corsHeaders = {
+  "Access-Control-Allow-Origin": "*",
+  "Access-Control-Allow-Methods": "POST, OPTIONS",
+  "Access-Control-Allow-Headers": "Content-Type, Authorization",
+};
+
+function sha256Hex(text: string): Promise<string> {
+  return crypto.subtle
+    .digest("SHA-256", new TextEncoder().encode(text))
+    .then((buf) =>
+      Array.from(new Uint8Array(buf))
+        .map((b) => b.toString(16).padStart(2, "0"))
+        .join("")
+    );
+}
+
+function randomSalt(): string {
+  const bytes = new Uint8Array(16);
+  crypto.getRandomValues(bytes);
+  return Array.from(bytes)
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+}
+
+export default async function (req: Request): Promise<Response> {
+  if (req.method === "OPTIONS") {
+    return new Response(null, { status: 204, headers: corsHeaders });
+  }
+  if (req.method !== "POST") {
+    return new Response(JSON.stringify({ error: "Method not allowed" }), {
+      status: 405,
+      headers: { ...corsHeaders, "Content-Type": "application/json" },
+    });
+  }
+
+  try {
+    const { username, password } = await req.json();
+
+    if (
+      typeof username !== "string" ||
+      typeof password !== "string" ||
+      username.trim().length < 3 ||
+      password.length < 6
+    ) {
+      return new Response(
+        JSON.stringify({ error: "Username min 3 & password min 6 karakter." }),
+        { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+      );
+    }
+
+    const admin = createAdminClient({
+      baseUrl: Deno.env.get("INSFORGE_BASE_URL")!,
+      apiKey: Deno.env.get("INSFORGE_API_KEY")!,
+    });
+
+    const { count } = await admin.database
+      .from("app_users")
+      .select("id", { count: "exact", head: true });
+
+    if ((count ?? 0) > 0) {
+      return new Response(
+        JSON.stringify({ error: "Akun admin sudah dibuat. Pendaftaran ditutup." }),
+        { status: 403, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+      );
+    }
+
+    const { data: existing } = await admin.database
+      .from("app_users")
+      .select("id")
+      .eq("username", username.trim())
+      .maybeSingle();
+
+    if (existing) {
+      return new Response(JSON.stringify({ error: "Username sudah dipakai." }), {
+        status: 409,
+        headers: { ...corsHeaders, "Content-Type": "application/json" },
+      });
+    }
+
+    const salt = randomSalt();
+    const pepper = Deno.env.get("AUTH_PEPPER") ?? "";
+    const hash = await sha256Hex(`${salt}|${password}|${pepper}`);
+
+    const { error } = await admin.database.from("app_users").insert([
+      { username: username.trim(), password_hash: hash, salt },
+    ]);
+
+    if (error) {
+      return new Response(JSON.stringify({ error: error.message }), {
+        status: 500,
+        headers: { ...corsHeaders, "Content-Type": "application/json" },
+      });
+    }
+
+    return new Response(JSON.stringify({ ok: true }), {
+      status: 200,
+      headers: { ...corsHeaders, "Content-Type": "application/json" },
+    });
+  } catch (err) {
+    return new Response(
+      JSON.stringify({ error: err instanceof Error ? err.message : "Unknown error" }),
+      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+    );
+  }
+}

functions/save-discount-claim.ts

@@ -0,0 +1,60 @@
+import { createAdminClient } from "npm:@insforge/sdk";
+
+const corsHeaders = {
+  "Access-Control-Allow-Origin": "*",
+  "Access-Control-Allow-Methods": "POST, OPTIONS",
+  "Access-Control-Allow-Headers": "Content-Type, Authorization",
+};
+
+export default async function (req: Request): Promise<Response> {
+  if (req.method === "OPTIONS") {
+    return new Response(null, { status: 204, headers: corsHeaders });
+  }
+
+  if (req.method !== "POST") {
+    return new Response(JSON.stringify({ error: "Method not allowed" }), {
+      status: 405,
+      headers: { ...corsHeaders, "Content-Type": "application/json" },
+    });
+  }
+
+  try {
+    const { name, phone } = await req.json();
+
+    if (!name || typeof name !== "string" || !phone || typeof phone !== "string") {
+      return new Response(JSON.stringify({ error: "Missing name or phone" }), {
+        status: 400,
+        headers: { ...corsHeaders, "Content-Type": "application/json" },
+      });
+    }
+
+    const admin = createAdminClient({
+      baseUrl: Deno.env.get("INSFORGE_BASE_URL")!,
+      apiKey: Deno.env.get("INSFORGE_API_KEY")!,
+    });
+
+    const { error } = await admin.database
+      .from("discount_claims")
+      .insert([{ name: name.trim(), phone: phone.trim() }]);
+
+    if (error) {
+      return new Response(JSON.stringify({ error: error.message }), {
+        status: 500,
+        headers: { ...corsHeaders, "Content-Type": "application/json" },
+      });
+    }
+
+    return new Response(JSON.stringify({ success: true }), {
+      status: 200,
+      headers: { ...corsHeaders, "Content-Type": "application/json" },
+    });
+  } catch (err) {
+    return new Response(
+      JSON.stringify({ error: err instanceof Error ? err.message : "Unknown error" }),
+      {
+        status: 500,
+        headers: { ...corsHeaders, "Content-Type": "application/json" },
+      }
+    );
+  }
+}

index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="id">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="PT. Lintas Jaringan Indonesia - Solusi WiFi Cerdas untuk Rumah & Bisnis Anda. Cabang Cikembar Sukabumi." />
+    <title>LJN Cikembar | Solusi WiFi Cerdas</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet" />
+    <!-- Fallback font sementara Google Fonts loading — cegah FOIT -->
+    <style>
+      body { font-family: system-ui, -apple-system, sans-serif; }
+      .fonts-loaded body { font-family: 'Inter', system-ui, sans-serif; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

migrations/20260824032146_gallery-storage-policy.sql

@@ -0,0 +1,14 @@
+-- Allow anonymous uploads into the public 'gallery' bucket.
+-- The bucket is public, so direct object GETs bypass RLS for display.
+-- These policies only grant INSERT to anon for this bucket.
+
+ALTER TABLE storage.objects ENABLE ROW LEVEL SECURITY;
+
+DROP POLICY IF EXISTS storage_objects_gallery_insert ON storage.objects;
+
+CREATE POLICY storage_objects_gallery_insert ON storage.objects
+  FOR INSERT TO anon
+  WITH CHECK (bucket = 'gallery');
+
+GRANT INSERT ON storage.objects TO anon;
+GRANT USAGE ON SCHEMA storage TO anon;

migrations/20260824033730_gallery-storage-select.sql

@@ -0,0 +1,9 @@
+-- Allow anon to read (and satisfy INSERT ... RETURNING) rows in the public
+-- 'gallery' bucket. Reads of object URLs from a public bucket already bypass
+-- RLS; this policy only unblocks the row returned by the upload INSERT.
+
+CREATE POLICY storage_objects_gallery_select ON storage.objects
+  FOR SELECT TO anon
+  USING (bucket = 'gallery');
+
+GRANT SELECT ON storage.objects TO anon;

migrations/20260824035127_discount-claims.sql

@@ -0,0 +1,15 @@
+CREATE TABLE IF NOT EXISTS public.discount_claims (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  name text NOT NULL,
+  phone text NOT NULL,
+  created_at timestamptz NOT NULL DEFAULT now()
+);
+
+ALTER TABLE public.discount_claims ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY discount_claims_insert ON public.discount_claims
+  FOR INSERT TO anon
+  WITH CHECK (true);
+
+GRANT INSERT ON public.discount_claims TO anon;
+GRANT USAGE ON SCHEMA public TO anon;

migrations/20260824035455_discount-claims-auth.sql

@@ -0,0 +1,7 @@
+DROP POLICY IF EXISTS discount_claims_insert ON public.discount_claims;
+
+CREATE POLICY discount_claims_insert ON public.discount_claims
+  FOR INSERT TO anon, authenticated
+  WITH CHECK (true);
+
+GRANT INSERT ON public.discount_claims TO authenticated;

migrations/20260824045421_app-users.sql

@@ -0,0 +1,7 @@
+CREATE TABLE IF NOT EXISTS public.app_users (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  username text UNIQUE NOT NULL,
+  password_hash text NOT NULL,
+  salt text NOT NULL,
+  created_at timestamptz NOT NULL DEFAULT now()
+);

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "ljn-landing",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "oxlint",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.4.0",
+    "@insforge/sdk": "^1.5.2",
+    "@radix-ui/react-accordion": "^1.2.18",
+    "@radix-ui/react-avatar": "^1.2.4",
+    "@radix-ui/react-dialog": "^1.1.21",
+    "@radix-ui/react-label": "^2.1.13",
+    "@radix-ui/react-navigation-menu": "^1.2.20",
+    "@radix-ui/react-select": "^2.3.5",
+    "@radix-ui/react-separator": "^1.1.13",
+    "@radix-ui/react-slot": "^1.3.1",
+    "@radix-ui/react-tabs": "^1.1.19",
+    "@radix-ui/react-tooltip": "^1.2.14",
+    "@tailwindcss/vite": "^4.3.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.42.2",
+    "lucide-react": "^1.26.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-hook-form": "^7.82.0",
+    "react-router-dom": "^7.18.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.3",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "oxlint": "^1.71.0",
+    "shadcn": "^4.14.1",
+    "typescript": "~6.0.2",
+    "vite": "^8.1.1"
+  }
+}

public/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" rx="6" fill="#1a1a1a"/>
+  <path d="M16 8a12 12 0 0 1 8.485 3.515" stroke="#facc15" stroke-width="3" stroke-linecap="round"/>
+  <path d="M16 12a8 8 0 0 1 5.657 2.343" stroke="#facc15" stroke-width="3" stroke-linecap="round"/>
+  <path d="M16 16a4 4 0 0 1 2.828 1.172" stroke="#facc15" stroke-width="3" stroke-linecap="round"/>
+  <circle cx="16" cy="22" r="2" fill="#facc15"/>
+</svg>

public/icons.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>

src/App.tsx

@@ -0,0 +1,133 @@
+import { lazy, Suspense } from "react"
+import { BrowserRouter, Routes, Route } from "react-router-dom"
+import { SiteProvider } from "@/context/SiteContext"
+import { AuthProvider, useAuth } from "@/context/AuthContext"
+import { Toaster } from "@/components/ui/sonner"
+import MainLayout from "@/layouts/MainLayout"
+import LandingPage from "@/pages/LandingPage"
+import AdminLogin from "@/pages/AdminLogin"
+
+// Lazy-load admin routes — tidak perlu di-load visitor landing page
+const AdminLayout = lazy(() => import("@/layouts/AdminLayout"))
+const AdminDashboard = lazy(() => import("@/pages/AdminDashboard"))
+const HeroForm = lazy(() => import("@/pages/HeroForm"))
+const PackageManager = lazy(() => import("@/pages/PackageForm"))
+const BenefitsForm = lazy(() => import("@/pages/BenefitsForm"))
+const AboutForm = lazy(() => import("@/pages/AboutForm"))
+const ContactForm = lazy(() => import("@/pages/ContactForm"))
+const SocialForm = lazy(() => import("@/pages/SocialForm"))
+const GalleryForm = lazy(() => import("@/pages/GalleryForm"))
+const PromoForm = lazy(() => import("@/pages/PromoForm"))
+
+function AdminFallback() {
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <div className="text-center">
+        <div className="inline-block animate-spin rounded-full h-8 w-8 border-4 border-black border-t-yellow-300" />
+        <p className="mt-4 font-bold text-gray-600">Memuat panel admin...</p>
+      </div>
+    </div>
+  )
+}
+
+function AdminGate() {
+  const { user, loading } = useAuth()
+  if (loading) return <AdminFallback />
+  if (!user) return <AdminLogin />
+  return (
+    <Suspense fallback={<AdminFallback />}>
+      <AdminLayout />
+    </Suspense>
+  )
+}
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <SiteProvider>
+        <AuthProvider>
+          <Routes>
+            <Route element={<MainLayout />}>
+              <Route path="/" element={<LandingPage />} />
+            </Route>
+            <Route path="/admin" element={<AdminGate />}>
+            <Route
+              index
+              element={
+                <Suspense fallback={<AdminFallback />}>
+                  <AdminDashboard />
+                </Suspense>
+              }
+            />
+            <Route
+              path="hero"
+              element={
+                <Suspense fallback={<AdminFallback />}>
+                  <HeroForm />
+                </Suspense>
+              }
+            />
+            <Route
+              path="packages"
+              element={
+                <Suspense fallback={<AdminFallback />}>
+                  <PackageManager />
+                </Suspense>
+              }
+            />
+            <Route
+              path="benefits"
+              element={
+                <Suspense fallback={<AdminFallback />}>
+                  <BenefitsForm />
+                </Suspense>
+              }
+            />
+            <Route
+              path="about"
+              element={
+                <Suspense fallback={<AdminFallback />}>
+                  <AboutForm />
+                </Suspense>
+              }
+            />
+            <Route
+              path="contact"
+              element={
+                <Suspense fallback={<AdminFallback />}>
+                  <ContactForm />
+                </Suspense>
+              }
+            />
+            <Route
+              path="social"
+              element={
+                <Suspense fallback={<AdminFallback />}>
+                  <SocialForm />
+                </Suspense>
+              }
+            />
+            <Route
+              path="gallery"
+              element={
+                <Suspense fallback={<AdminFallback />}>
+                  <GalleryForm />
+                </Suspense>
+              }
+            />
+            <Route
+              path="promo"
+              element={
+                <Suspense fallback={<AdminFallback />}>
+                  <PromoForm />
+                </Suspense>
+              }
+            />
+          </Route>
+          </Routes>
+          <Toaster />
+        </AuthProvider>
+      </SiteProvider>
+    </BrowserRouter>
+  )
+}

src/components/About.tsx

@@ -0,0 +1,33 @@
+import { motion } from "framer-motion"
+import { useSite } from "@/context/SiteContext"
+
+export default function About() {
+  const { data } = useSite()
+  const { about } = data
+
+  return (
+    <section id="tentang" className="bg-purple-200 border-b-4 border-black py-16 sm:py-20">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="max-w-3xl mx-auto"
+        >
+          <div className="bg-white border-4 border-black rounded-lg p-8 shadow-brutal text-center">
+            <div className="inline-block bg-purple-300 border-3 border-black p-3 rounded-full mb-6">
+              <svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
+              </svg>
+            </div>
+            <h2 className="text-3xl sm:text-4xl font-black mb-4">{about.title}</h2>
+            <p className="text-base font-bold text-gray-600 leading-relaxed">
+              {about.description}
+            </p>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}

src/components/BenefitCard.tsx

@@ -0,0 +1,33 @@
+import { motion } from "framer-motion"
+import { Zap, Wifi, Headphones, DollarSign } from "lucide-react"
+import type { Benefit } from "@/types/site"
+
+const iconMap: Record<string, React.ReactNode> = {
+  Zap: <Zap className="h-8 w-8" />,
+  Wifi: <Wifi className="h-8 w-8" />,
+  Headphones: <Headphones className="h-8 w-8" />,
+  DollarSign: <DollarSign className="h-8 w-8" />,
+}
+
+interface BenefitCardProps {
+  benefit: Benefit
+  index: number
+}
+
+export default function BenefitCard({ benefit, index }: BenefitCardProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      whileInView={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.3, delay: index * 0.1 }}
+      viewport={{ once: true }}
+      className="bg-white border-4 border-black rounded-lg p-6 shadow-brutal hover-lift"
+    >
+      <div className="bg-yellow-300 border-3 border-black rounded-full p-3 w-fit mb-4">
+        {iconMap[benefit.icon] ?? <Zap className="h-8 w-8" />}
+      </div>
+      <h3 className="font-black text-lg mb-2">{benefit.title}</h3>
+      <p className="text-sm font-bold text-gray-600">{benefit.description}</p>
+    </motion.div>
+  )
+}

src/components/Benefits.tsx

@@ -0,0 +1,36 @@
+import { motion } from "framer-motion"
+import { useSite } from "@/context/SiteContext"
+import BenefitCard from "@/components/BenefitCard"
+
+export default function Benefits() {
+  const { data } = useSite()
+  const { benefits } = data
+
+  return (
+    <section id="keunggulan" className="bg-green-200 border-b-4 border-black py-16 sm:py-20">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="text-center mb-12"
+        >
+          <div className="inline-block bg-white border-4 border-black px-6 py-2 rounded-md mb-4">
+            <span className="font-black text-sm">KEUNGGULAN</span>
+          </div>
+          <h2 className="text-3xl sm:text-4xl font-black tracking-tight">
+            Kenapa Harus{" "}
+            <span className="bg-black text-green-200 px-2">LJN?</span>
+          </h2>
+        </motion.div>
+
+        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {benefits.map((benefit, index) => (
+            <BenefitCard key={index} benefit={benefit} index={index} />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

src/components/CTA.tsx

@@ -0,0 +1,64 @@
+import { motion } from "framer-motion"
+import { Button } from "@/components/ui/button"
+import { useSite } from "@/context/SiteContext"
+import { MessageCircle } from "lucide-react"
+
+export default function CTA() {
+  const { data } = useSite()
+
+  const scrollToPaket = () => {
+    const el = document.querySelector("#paket")
+    if (el) el.scrollIntoView({ behavior: "smooth" })
+  }
+
+  const openWhatsApp = () => {
+    window.open(`https://wa.me/${data.contact.whatsapp}`, "_blank")
+  }
+
+  return (
+    <section id="kontak" className="relative bg-orange-400 border-b-4 border-black py-16 sm:py-20 overflow-hidden">
+      <div className="absolute inset-0 opacity-10">
+        <div className="absolute top-5 left-10 w-32 h-32 bg-black rounded-full" />
+        <div className="absolute bottom-10 right-10 w-40 h-40 bg-black rounded-full" />
+        <div className="absolute top-1/2 left-1/2 w-20 h-20 bg-black rounded-full" />
+      </div>
+
+      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9 }}
+          whileInView={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="max-w-2xl mx-auto space-y-6"
+        >
+          <h2 className="text-3xl sm:text-5xl font-black text-white leading-tight">
+            Siap Pasang Internet{" "}
+            <span className="bg-black text-orange-400 px-2">Cepat & Stabil?</span>
+          </h2>
+          <p className="text-lg font-bold text-white/90">
+            Daftar sekarang dan nikmati internet tanpa batas dengan harga terjangkau.
+          </p>
+          <div className="flex flex-wrap justify-center gap-4 pt-2">
+            <Button
+              variant="brutal"
+              size="lg"
+              className="bg-white hover:bg-gray-100 text-black text-base font-black"
+              onClick={scrollToPaket}
+            >
+              Daftar Sekarang
+            </Button>
+            <Button
+              variant="brutal"
+              size="lg"
+              className="bg-green-500 hover:bg-green-600 text-white text-base font-black"
+              onClick={openWhatsApp}
+            >
+              <MessageCircle className="h-5 w-5 mr-2" />
+              Hubungi WhatsApp
+            </Button>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}

src/components/Footer.tsx

@@ -0,0 +1,90 @@
+import { useSite } from "@/context/SiteContext"
+import { Wifi, MessageCircle } from "lucide-react"
+import { Separator } from "@/components/ui/separator"
+
+const socialColors: Record<string, string> = {
+  whatsapp: "hover:bg-green-500 hover:text-white",
+  instagram: "hover:bg-pink-500 hover:text-white",
+  tiktok: "hover:bg-black hover:text-white",
+}
+
+const socialIcons: Record<string, React.ReactNode> = {
+  whatsapp: (
+    <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.82 11.82 0 00-3.48-8.413z" />
+    </svg>
+  ),
+  instagram: (
+    <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+      <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
+    </svg>
+  ),
+  tiktok: (
+    <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+      <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" />
+    </svg>
+  ),
+}
+
+export default function Footer() {
+  const { data } = useSite()
+
+  return (
+    <footer className="bg-black text-white py-12">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="grid md:grid-cols-3 gap-8">
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <div className="bg-yellow-300 text-black p-1.5 rounded-md">
+                <Wifi className="h-5 w-5" />
+              </div>
+              <span className="font-black text-lg">{data.company.name}</span>
+            </div>
+            <p className="text-sm font-bold text-gray-400">{data.company.branch}</p>
+            <p className="text-sm text-gray-500">{data.company.address}</p>
+          </div>
+
+          <div className="space-y-3">
+            <h4 className="font-black text-sm uppercase tracking-wider">Navigasi</h4>
+            <div className="space-y-1">
+              {["Beranda", "Paket", "Keunggulan", "Tentang", "Kontak"].map((item) => (
+                <a
+                  key={item}
+                  href={`#${item.toLowerCase()}`}
+                  className="block text-sm font-bold text-gray-400 hover:text-yellow-300 transition-colors"
+                >
+                  {item}
+                </a>
+              ))}
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            <h4 className="font-black text-sm uppercase tracking-wider">Hubungi Kami</h4>
+            <div className="flex gap-2">
+              {data.social.map((s) => (
+                <a
+                  key={s.platform}
+                  href={s.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={`border-2 border-white rounded-md p-2 transition-colors ${socialColors[s.platform] ?? "hover:bg-white hover:text-black"}`}
+                >
+                  {socialIcons[s.platform] ?? <MessageCircle className="h-5 w-5" />}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <Separator className="my-8 bg-gray-800" />
+
+        <div className="text-center">
+          <p className="text-sm font-bold text-gray-500">
+            &copy; {new Date().getFullYear()} {data.company.name}. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}

src/components/Gallery.tsx

@@ -0,0 +1,69 @@
+import { motion } from "framer-motion";
+import { useSite } from "@/context/SiteContext";
+import ImageCard from "@/components/ui/image-card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+} from "@/components/ui/carousel";
+
+export default function Gallery() {
+  const { data } = useSite();
+  const { gallery } = data;
+
+  if (gallery.length === 0) return null;
+
+  return (
+    <section
+      id="galeri"
+      className="bg-blue-200 border-b-4 border-black py-16 sm:py-20"
+    >
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="text-center mb-12"
+        >
+          <div className="inline-block bg-white border-4 border-black px-6 py-2 rounded-md mb-4">
+            <span className="font-black text-sm">DOKUMENTASI</span>
+          </div>
+          <h2 className="text-3xl sm:text-4xl font-black tracking-tight">
+            {" "}
+            <span className="bg-black text-blue-200 px-2">
+              LJN Cikembar Sukabumi
+            </span>
+          </h2>
+        </motion.div>
+
+        <Carousel opts={{ loop: true, slidesToScroll: 1 }} className="relative">
+          <CarouselContent className="-ml-3 sm:-ml-4">
+            {gallery.map((image, index) => (
+              <CarouselItem
+                key={image.id}
+                className="pl-3 sm:pl-4 basis-full sm:basis-1/2 lg:basis-1/3"
+              >
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  transition={{ delay: index * 0.05, duration: 0.5 }}
+                  viewport={{ once: true }}
+                >
+                  <ImageCard
+                    imageUrl={image.url}
+                    caption={image.caption || "Foto galeri LJN"}
+                  />
+                </motion.div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious className="left-2 bg-yellow-300 border-black hover:bg-yellow-400" />
+          <CarouselNext className="right-2 bg-yellow-300 border-black hover:bg-yellow-400" />
+        </Carousel>
+      </div>
+    </section>
+  );
+}

src/components/Hero.tsx

@@ -0,0 +1,133 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Zap, BadgeCheck } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useSite } from "@/context/SiteContext"
+
+export default function Hero() {
+  const { data } = useSite()
+  const { hero } = data
+
+  const scrollToPaket = () => {
+    const el = document.querySelector("#paket")
+    if (el) el.scrollIntoView({ behavior: "smooth" })
+  }
+
+  const openWhatsApp = () => {
+    window.open(`https://wa.me/${data.contact.whatsapp}`, "_blank")
+  }
+
+  return (
+    <section id="beranda" className="relative overflow-hidden bg-pink-300 border-b-4 border-black">
+      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
+        <div className="grid lg:grid-cols-2 gap-12 items-center">
+          <motion.div
+            initial={{ opacity: 0, x: -50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.6 }}
+            className="space-y-6"
+          >
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.2, duration: 0.5 }}
+              className="inline-block bg-white border-4 border-black px-4 py-1.5 rounded-md"
+            >
+              <span className="font-black text-sm">{hero.bannerText}</span>
+            </motion.div>
+
+            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-black leading-tight tracking-tight">
+              {hero.title}
+              <br />
+              <span className="text-yellow-300 bg-black px-2 inline-block mt-2">
+                {hero.subtitle}
+              </span>
+            </h1>
+
+            <div className="space-y-3">
+              <div className="flex items-center gap-2 text-base font-bold">
+                <Zap className="h-5 w-5 text-yellow-500" />
+                <span>{hero.highlight1}</span>
+              </div>
+              <div className="flex items-center gap-2 text-base font-bold">
+                <BadgeCheck className="h-5 w-5 text-green-600" />
+                <span>{hero.highlight2}</span>
+              </div>
+            </div>
+
+            <div className="flex flex-wrap gap-3 pt-2">
+              <Button
+                variant="brutal"
+                size="lg"
+                className="bg-green-400 hover:bg-green-500 text-base font-black"
+                onClick={scrollToPaket}
+              >
+                {hero.ctaText}
+              </Button>
+              <Button
+                variant="brutal"
+                size="lg"
+                className="bg-white hover:bg-gray-100 text-base font-black"
+                onClick={openWhatsApp}
+              >
+                {hero.ctaSecondaryText}
+              </Button>
+            </div>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, x: 50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.6, delay: 0.3 }}
+            className="hidden lg:block"
+          >
+            <div className="relative">
+              <div className="bg-white border-4 border-black rounded-lg p-8 shadow-brutal">
+                <div className="space-y-4">
+                  <div className="flex items-center gap-3">
+                    <div className="bg-blue-400 border-3 border-black rounded-full p-3">
+                      <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.858 15.355-5.858 21.213 0" />
+                      </svg>
+                    </div>
+                    <div>
+                      <div className="font-black text-lg">100 Mbps</div>
+                      <div className="text-sm font-bold text-gray-500">Kecepatan Maksimal</div>
+                    </div>
+                  </div>
+                  <div className="bg-green-300 border-3 border-black rounded-md p-3">
+                    <div className="font-black text-sm">LATEST</div>
+                    <div className="font-black text-lg">Fiber Optic</div>
+                    <div className="text-sm font-bold">Teknologi Terbaru</div>
+                  </div>
+                  <div className="grid grid-cols-3 gap-3">
+                    {[1, 2, 3].map((i) => (
+                      <div key={i} className="bg-gray-100 border-3 border-black rounded-md p-2 aspect-square flex items-center justify-center">
+                        <div className="text-center">
+                          <div className="font-black text-lg">{i * 10}+</div>
+                          <div className="text-xs font-bold">Pelanggan</div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+              <div className="absolute -bottom-4 -right-4 bg-orange-400 border-4 border-black rounded-full p-3 shadow-brutal-sm rotate-12">
+                <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+
+      <div className="absolute top-0 left-0 w-full h-full opacity-5 pointer-events-none">
+        <div className="absolute top-10 left-10 w-20 h-20 bg-black rounded-full" />
+        <div className="absolute top-40 right-20 w-16 h-16 bg-black rounded-full" />
+        <div className="absolute bottom-10 left-1/3 w-24 h-24 bg-black rounded-full" />
+      </div>
+    </section>
+  )
+}

src/components/LazySection.tsx

@@ -0,0 +1,60 @@
+import { lazy, Suspense, useState, useEffect, useRef, type ComponentType } from "react"
+
+function SectionFallback() {
+  return (
+    <div className="flex items-center justify-center py-20">
+      <div className="animate-pulse space-y-4 w-full max-w-4xl px-4">
+        <div className="h-8 bg-gray-200 rounded w-1/3 mx-auto" />
+        <div className="h-4 bg-gray-200 rounded w-2/3 mx-auto" />
+        <div className="h-64 bg-gray-200 rounded" />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Lazy-load component hanya saat masuk viewport.
+ * Mengurangi initial bundle + render cost untuk below-fold content.
+ */
+export function LazySection({
+  importFn,
+  ...props
+}: {
+  importFn: () => Promise<{ default: ComponentType<unknown> }>
+  [key: string]: unknown
+}) {
+  const [isVisible, setIsVisible] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true)
+          observer.disconnect()
+        }
+      },
+      { rootMargin: "200px" }
+    )
+
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
+  const LazyComp = lazy(importFn)
+
+  return (
+    <div ref={ref}>
+      {isVisible ? (
+        <Suspense fallback={<SectionFallback />}>
+          <LazyComp {...props} />
+        </Suspense>
+      ) : (
+        <div style={{ minHeight: "100px" }} />
+      )}
+    </div>
+  )
+}

src/components/Navbar.tsx

@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { Menu, Wifi } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+
+const navLinks = [
+  { href: "#beranda", label: "Beranda" },
+  { href: "#paket", label: "Paket" },
+  { href: "#keunggulan", label: "Keunggulan" },
+  { href: "#tentang", label: "Tentang" },
+  { href: "#galeri", label: "Galeri" },
+  { href: "#kontak", label: "Kontak" },
+];
+
+export default function Navbar() {
+  const [open, setOpen] = useState(false);
+  const location = useLocation();
+
+  const scrollTo = (id: string) => {
+    setOpen(false);
+    if (location.pathname !== "/") {
+      window.location.href = `/${id}`;
+      return;
+    }
+    const el = document.querySelector(id);
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
+  return (
+    <nav className="sticky top-0 z-50 bg-yellow-300 border-b-4 border-black">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex h-16 items-center justify-between">
+          <Link
+            to="/"
+            className="flex items-center gap-2 font-black text-lg tracking-tight"
+          >
+            <div className="bg-black text-yellow-300 p-1.5 rounded-md">
+              <Wifi className="h-5 w-5" />
+            </div>
+            <span className="hidden sm:block">LJN Cikembar Sukabumi</span>
+          </Link>
+
+          <div className="hidden md:flex items-center gap-1">
+            {navLinks.map((link) => (
+              <button
+                key={link.href}
+                onClick={() => scrollTo(link.href)}
+                className="px-3 py-2 font-bold text-sm hover:bg-black hover:text-yellow-300 rounded-md transition-colors"
+              >
+                {link.label}
+              </button>
+            ))}
+          </div>
+
+          <Sheet open={open} onOpenChange={setOpen}>
+            <SheetTrigger asChild className="md:hidden">
+              <Button variant="brutal" size="icon">
+                <Menu className="h-5 w-5" />
+              </Button>
+            </SheetTrigger>
+            <SheetContent
+              side="right"
+              className="w-64 bg-yellow-300 border-l-4 border-black"
+            >
+              <div className="flex items-center gap-2 font-black text-lg mb-8">
+                <Wifi className="h-5 w-5" />
+                LJN Cikembar Sukabumi
+              </div>
+              <div className="flex flex-col gap-2">
+                {navLinks.map((link) => (
+                  <button
+                    key={link.href}
+                    onClick={() => scrollTo(link.href)}
+                    className="text-left px-4 py-3 font-bold text-base hover:bg-black hover:text-yellow-300 rounded-md transition-colors"
+                  >
+                    {link.label}
+                  </button>
+                ))}
+              </div>
+            </SheetContent>
+          </Sheet>
+        </div>
+      </div>
+    </nav>
+  );
+}

src/components/PackageCard.tsx

@@ -0,0 +1,72 @@
+import { motion } from "framer-motion"
+import { Zap } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { cn, formatRupiah } from "@/utils/helpers"
+import type { PackageData } from "@/types/site"
+
+interface PackageCardProps {
+  pkg: PackageData
+  index: number
+  onSelect: (pkg: PackageData) => void
+}
+
+export default function PackageCard({ pkg, index, onSelect }: PackageCardProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4, delay: index * 0.1 }}
+      viewport={{ once: true }}
+      className={cn(
+        "relative bg-white border-4 border-black rounded-lg p-6 shadow-brutal hover-lift",
+        pkg.popular && "bg-yellow-200"
+      )}
+    >
+      {pkg.popular && (
+        <div className="absolute -top-4 left-1/2 -translate-x-1/2">
+          <Badge className="bg-red-500 hover:bg-red-600 text-white border-2 border-black font-black px-4 py-1 text-sm">
+            TERPOPULER
+          </Badge>
+        </div>
+      )}
+
+      <div className="text-center space-y-4">
+        <h3 className="font-black text-xl">{pkg.name}</h3>
+
+        <div className="flex items-center justify-center gap-1 text-4xl font-black">
+          <Zap className="h-7 w-7 text-yellow-500" />
+          <span>{pkg.speed}</span>
+          <span className="text-lg">Mbps</span>
+        </div>
+
+        <ul className="space-y-2 text-left">
+          {pkg.features.map((feature, i) => (
+            <li key={i} className="flex items-center gap-2 text-sm font-bold">
+              <span className="text-green-500 font-black">&#10003;</span>
+              {feature}
+            </li>
+          ))}
+        </ul>
+
+        <div className="pt-2">
+          <div className="text-3xl font-black">{formatRupiah(pkg.price)}</div>
+          <div className="text-sm font-bold text-gray-500">/Bulan</div>
+        </div>
+
+        <Button
+          variant="brutal"
+          className={cn(
+            "w-full font-black",
+            pkg.popular
+              ? "bg-red-500 hover:bg-red-600 text-white"
+              : "bg-green-400 hover:bg-green-500"
+          )}
+          onClick={() => onSelect(pkg)}
+        >
+          Pilih Paket
+        </Button>
+      </div>
+    </motion.div>
+  )
+}

src/components/Pricing.tsx

@@ -0,0 +1,45 @@
+import { motion } from "framer-motion"
+import { useSite } from "@/context/SiteContext"
+import PackageCard from "@/components/PackageCard"
+import type { PackageData } from "@/types/site"
+
+export default function Pricing() {
+  const { data } = useSite()
+  const activePackages = data.packages.filter((p) => p.active)
+
+  const handleSelect = (pkg: PackageData) => {
+    const message = `Halo, saya tertarik dengan ${pkg.name} (${pkg.speed} Mbps) seharga Rp${pkg.price.toLocaleString("id-ID")}/bulan. Mohon informasi lebih lanjut.`
+    window.open(
+      `https://wa.me/${data.contact.whatsapp}?text=${encodeURIComponent(message)}`,
+      "_blank"
+    )
+  }
+
+  return (
+    <section id="paket" className="bg-blue-200 border-b-4 border-black py-16 sm:py-20">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="text-center mb-12"
+        >
+          <div className="inline-block bg-white border-4 border-black px-6 py-2 rounded-md mb-4">
+            <span className="font-black text-sm">PAKET INTERNET</span>
+          </div>
+          <h2 className="text-3xl sm:text-4xl font-black tracking-tight">
+            Pilih Paket Sesuai{" "}
+            <span className="bg-black text-blue-200 px-2">Kebutuhan Anda</span>
+          </h2>
+        </motion.div>
+
+        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {activePackages.map((pkg, index) => (
+            <PackageCard key={pkg.id} pkg={pkg} index={index} onSelect={handleSelect} />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

src/components/PromoPopup.tsx

@@ -0,0 +1,196 @@
+import { useEffect, useRef, useState, type FormEvent } from "react"
+import { AnimatePresence, motion } from "framer-motion"
+import { Gift, MessageCircle, X, User, Phone } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { InputWithIcon } from "@/components/ui/input-icon"
+import { toast } from "sonner"
+import { useSite } from "@/context/SiteContext"
+import { insforge } from "@/lib/insforge"
+
+const DISMISS_KEY = "ljn-promo-dismissed"
+
+export default function PromoPopup() {
+  const { data } = useSite()
+  const { promo, contact } = data
+  const [open, setOpen] = useState(false)
+  const [step, setStep] = useState<"intro" | "form">("intro")
+  const [name, setName] = useState("")
+  const [phone, setPhone] = useState("")
+  const [submitting, setSubmitting] = useState(false)
+  const triggeredRef = useRef(false)
+
+  useEffect(() => {
+    if (!promo.enabled) return
+    if (promo.showOnce && localStorage.getItem(DISMISS_KEY)) return
+    if (triggeredRef.current) return
+
+    const threshold = Math.max(promo.scrollThreshold, 0)
+    const onScroll = () => {
+      if (window.scrollY >= threshold) {
+        triggeredRef.current = true
+        setOpen(true)
+      }
+    }
+    onScroll()
+    window.addEventListener("scroll", onScroll, { passive: true })
+    return () => window.removeEventListener("scroll", onScroll)
+  }, [promo.enabled, promo.showOnce, promo.scrollThreshold])
+
+  const dismiss = () => {
+    triggeredRef.current = true
+    if (promo.showOnce) localStorage.setItem(DISMISS_KEY, "1")
+    setOpen(false)
+    setStep("intro")
+    setName("")
+    setPhone("")
+    setSubmitting(false)
+  }
+
+  const openWhatsApp = (claimName?: string, claimPhone?: string) => {
+    const extra = claimName
+      ? `\n\nNama: ${claimName}\nNo HP: ${claimPhone}`
+      : ""
+    const url = `https://wa.me/${contact.whatsapp}?text=${encodeURIComponent(
+      promo.message + extra
+    )}`
+    window.open(url, "_blank")
+    dismiss()
+  }
+
+  const handleClaim = () => {
+    setStep("form")
+  }
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    if (!name.trim() || !phone.trim()) return
+    setSubmitting(true)
+    try {
+      const { error } = await insforge.functions.invoke("save-discount-claim", {
+        body: { name: name.trim(), phone: phone.trim() },
+      })
+      if (error) throw error
+      toast.success("Klaim terkirim! Mengarahkan ke WhatsApp...")
+      openWhatsApp(name.trim(), phone.trim())
+    } catch {
+      toast.error("Gagal menyimpan klaim. Coba lagi.")
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          className="fixed inset-0 z-50 flex items-center justify-center p-4"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+        >
+          <div
+            className="absolute inset-0 bg-black/60"
+            onClick={dismiss}
+            aria-hidden
+          />
+
+          <motion.div
+            role="dialog"
+            aria-modal="true"
+            aria-label="Promo"
+            initial={{ opacity: 0, scale: 0.85, y: 20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.85, y: 20 }}
+            transition={{ type: "spring", stiffness: 260, damping: 22 }}
+            className="relative w-full max-w-md bg-orange-400 border-4 border-black shadow-brutal rounded-xl overflow-hidden"
+          >
+            <button
+              type="button"
+              onClick={dismiss}
+              aria-label="Tutup"
+              className="absolute top-3 right-3 z-10 flex h-8 w-8 items-center justify-center rounded-md bg-white border-2 border-black hover:bg-gray-100"
+            >
+              <X className="h-4 w-4" />
+            </button>
+
+            <div className="bg-black text-orange-400 px-6 py-4 flex items-center gap-3">
+              <Gift className="h-7 w-7" />
+              <h2 className="text-xl sm:text-2xl font-black leading-tight">
+                {promo.title}
+              </h2>
+            </div>
+
+            <div className="p-6 space-y-6">
+              <p className="text-base font-bold text-black/90 leading-relaxed">
+                {promo.description}
+              </p>
+
+              {step === "intro" ? (
+                <div className="flex flex-col gap-3">
+                  <Button
+                    variant="brutal"
+                    size="lg"
+                    className="w-full bg-green-500 hover:bg-green-600 text-white text-base font-black"
+                    onClick={handleClaim}
+                  >
+                    <MessageCircle className="h-5 w-5 mr-2" />
+                    {promo.ctaText}
+                  </Button>
+                  <button
+                    type="button"
+                    onClick={dismiss}
+                    className="text-sm font-bold text-black/70 underline underline-offset-2 hover:text-black"
+                  >
+                    Nanti saja
+                  </button>
+                </div>
+              ) : (
+                <form onSubmit={handleSubmit} className="space-y-3">
+                  <div className="space-y-1">
+                    <label className="block text-sm font-black text-black/80">Nama</label>
+                    <InputWithIcon
+                      icon={<User className="h-4 w-4" />}
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      placeholder="Nama lengkap"
+                      className="border-2 border-black font-bold"
+                      required
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <label className="block text-sm font-black text-black/80">No. Handphone</label>
+                    <InputWithIcon
+                      icon={<Phone className="h-4 w-4" />}
+                      value={phone}
+                      onChange={(e) => setPhone(e.target.value)}
+                      placeholder="62812xxxxxxx"
+                      inputMode="tel"
+                      className="border-2 border-black font-bold"
+                      required
+                    />
+                  </div>
+                  <Button
+                    type="submit"
+                    variant="brutal"
+                    size="lg"
+                    className="w-full bg-green-500 hover:bg-green-600 text-white text-base font-black"
+                    disabled={submitting}
+                  >
+                    <MessageCircle className="h-5 w-5 mr-2" />
+                    {submitting ? "Mengirim..." : "Kirim & Klaim via WhatsApp"}
+                  </Button>
+                  <button
+                    type="button"
+                    onClick={() => setStep("intro")}
+                    className="text-sm font-bold text-black/70 underline underline-offset-2 hover:text-black w-full"
+                  >
+                    Kembali
+                  </button>
+                </form>
+              )}
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}

src/components/ui/accordion.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

src/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        brutal: "border-4 border-black bg-white text-black font-bold shadow-[4px_4px_0px_#000] hover:shadow-[6px_6px_0px_#000] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all active:shadow-[2px_2px_0px_#000] active:translate-x-[2px] active:translate-y-[2px]",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

src/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/carousel.tsx

@@ -0,0 +1,260 @@
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

src/components/ui/dialog.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

src/components/ui/form.tsx

@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  if (!itemContext) {
+    throw new Error("useFormField should be used within <FormItem>")
+  }
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue | null>(null)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

src/components/ui/image-card.tsx

@@ -0,0 +1,23 @@
+import { cn } from "@/lib/utils";
+
+type Props = {
+  imageUrl: string;
+  caption: string;
+  className?: string;
+};
+
+export default function ImageCard({ imageUrl, caption, className }: Props) {
+  return (
+    <figure
+      className={cn(
+        "w-full overflow-hidden rounded-2xl border-4 border-black bg-white font-base shadow-lg",
+        className,
+      )}
+    >
+      <img className="w-full h-40 object-cover" src={imageUrl} alt="image" />
+      <figcaption className="border-t-2 text-main-foreground border-border p-4">
+        {caption}
+      </figcaption>
+    </figure>
+  );
+}

src/components/ui/input-icon.tsx

@@ -0,0 +1,40 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Input } from "@/components/ui/input"
+
+interface InputWithIconProps extends React.ComponentProps<"input"> {
+  icon?: React.ReactNode
+  error?: boolean
+  containerClassName?: string
+}
+
+const InputWithIcon = React.forwardRef<HTMLInputElement, InputWithIconProps>(
+  ({ className, icon, error, containerClassName, ...props }, ref) => {
+    if (!icon) {
+      return (
+        <Input
+          ref={ref}
+          className={cn(error && "border-red-500", className)}
+          {...props}
+        />
+      )
+    }
+
+    return (
+      <div className={cn("relative", containerClassName)}>
+        <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 flex items-center justify-center text-black/60">
+          {icon}
+        </span>
+        <Input
+          ref={ref}
+          className={cn("pl-9 pr-3", error && "border-red-500", className)}
+          {...props}
+        />
+      </div>
+    )
+  }
+)
+InputWithIcon.displayName = "InputWithIcon"
+
+export { InputWithIcon }

src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

src/components/ui/navigation-menu.tsx

@@ -0,0 +1,128 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}

src/components/ui/select.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

src/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

src/components/ui/sheet.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

src/components/ui/sonner.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import {
+  CircleCheck,
+  Info,
+  LoaderCircle,
+  OctagonX,
+  TriangleAlert,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheck className="h-4 w-4" />,
+        info: <Info className="h-4 w-4" />,
+        warning: <TriangleAlert className="h-4 w-4" />,
+        error: <OctagonX className="h-4 w-4" />,
+        loading: <LoaderCircle className="h-4 w-4 animate-spin" />,
+      }}
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

src/components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

src/components/ui/tooltip.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

src/context/AuthContext.tsx

@@ -0,0 +1,66 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react"
+import { toast } from "sonner"
+
+export interface AuthUser {
+  username: string
+}
+
+interface AuthContextType {
+  user: AuthUser | null
+  loading: boolean
+  login: (username: string) => void
+  logout: () => Promise<void>
+  refresh: () => void
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined)
+
+const SESSION_KEY = "ljn-admin-session"
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<AuthUser | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(SESSION_KEY)
+      if (raw) setUser(JSON.parse(raw))
+    } catch {
+      // ignore corrupt session
+    }
+    setLoading(false)
+  }, [])
+
+  const login = (username: string) => {
+    const u = { username }
+    localStorage.setItem(SESSION_KEY, JSON.stringify(u))
+    setUser(u)
+  }
+
+  const logout = async () => {
+    localStorage.removeItem(SESSION_KEY)
+    setUser(null)
+    toast.success("Berhasil logout.")
+  }
+
+  const refresh = () => {
+    try {
+      const raw = localStorage.getItem(SESSION_KEY)
+      setUser(raw ? JSON.parse(raw) : null)
+    } catch {
+      setUser(null)
+    }
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, logout, refresh }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext)
+  if (!ctx) throw new Error("useAuth must be used within AuthProvider")
+  return ctx
+}

src/context/SiteContext.tsx

@@ -0,0 +1,176 @@
+import { createContext, useContext, useState, type ReactNode } from "react"
+import type { SiteData, HeroData, PackageData, Benefit, AboutData, GalleryImage, PromoData } from "@/types/site"
+import { defaultSiteData } from "@/data/site"
+
+
+interface SiteContextType {
+  data: SiteData
+  updateHero: (hero: Partial<HeroData>) => void
+  updatePackage: (id: string, pkg: Partial<PackageData>) => void
+  addPackage: (pkg: PackageData) => void
+  removePackage: (id: string) => void
+  updateBenefit: (index: number, benefit: Partial<Benefit>) => void
+  updateAbout: (about: Partial<AboutData>) => void
+  updateContact: (contact: Partial<SiteData["contact"]>) => void
+  updateSocial: (index: number, social: Partial<SiteData["social"][number]>) => void
+  updatePromo: (promo: Partial<PromoData>) => void
+  addGalleryImage: (image: Omit<GalleryImage, "id">) => void
+  removeGalleryImage: (id: string) => void
+  updateGalleryCaption: (id: string, caption: string) => void
+}
+
+const SiteContext = createContext<SiteContextType | null>(null)
+
+export function SiteProvider({ children }: { children: ReactNode }) {
+  const [data, setData] = useState<SiteData>(() => {
+    const stored = localStorage.getItem("ljn-site-data")
+    if (!stored) return defaultSiteData
+    const parsed = JSON.parse(stored) as Partial<SiteData>
+    return {
+      ...defaultSiteData,
+      ...parsed,
+      gallery: parsed.gallery ?? defaultSiteData.gallery,
+      promo: parsed.promo ?? defaultSiteData.promo,
+    }
+  })
+
+  const updateHero = (hero: Partial<HeroData>) => {
+    setData((prev) => {
+      const next = { ...prev, hero: { ...prev.hero, ...hero } }
+      localStorage.setItem("ljn-site-data", JSON.stringify(next))
+      return next
+    })
+  }
+
+  const updatePackage = (id: string, pkg: Partial<PackageData>) => {
+    setData((prev) => {
+      const packages = prev.packages.map((p) =>
+        p.id === id ? { ...p, ...pkg } : p
+      )
+      const next = { ...prev, packages }
+      localStorage.setItem("ljn-site-data", JSON.stringify(next))
+      return next
+    })
+  }
+
+  const addPackage = (pkg: PackageData) => {
+    setData((prev) => {
+      const next = { ...prev, packages: [...prev.packages, pkg] }
+      localStorage.setItem("ljn-site-data", JSON.stringify(next))
+      return next
+    })
+  }
+
+  const removePackage = (id: string) => {
+    setData((prev) => {
+      const next = { ...prev, packages: prev.packages.filter((p) => p.id !== id) }
+      localStorage.setItem("ljn-site-data", JSON.stringify(next))
+      return next
+    })
+  }
+
+  const updateBenefit = (index: number, benefit: Partial<Benefit>) => {
+    setData((prev) => {
+      const benefits = prev.benefits.map((b, i) =>
+        i === index ? { ...b, ...benefit } : b
+      )
+      const next = { ...prev, benefits }
+      localStorage.setItem("ljn-site-data", JSON.stringify(next))
+      return next
+    })
+  }
+
+  const updateAbout = (about: Partial<AboutData>) => {
+    setData((prev) => {
+      const next = { ...prev, about: { ...prev.about, ...about } }
+      localStorage.setItem("ljn-site-data", JSON.stringify(next))
+      return next
+    })
+  }
+
+  const updateContact = (contact: Partial<SiteData["contact"]>) => {
+    setData((prev) => {
+      const next = { ...prev, contact: { ...prev.contact, ...contact } }
+      localStorage.setItem("ljn-site-data", JSON.stringify(next))
+      return next
+    })
+  }
+
+  const updateSocial = (index: number, social: Partial<SiteData["social"][number]>) => {
+    setData((prev) => {
+      const sc = [...prev.social]
+      sc[index] = { ...sc[index], ...social }
+      const next = { ...prev, social: sc }
+      localStorage.setItem("ljn-site-data", JSON.stringify(next))
+      return next
+    })
+  }
+
+  const updatePromo = (promo: Partial<PromoData>) => {
+    setData((prev) => {
+      const next = { ...prev, promo: { ...prev.promo, ...promo } }
+      localStorage.setItem("ljn-site-data", JSON.stringify(next))
+      return next
+    })
+  }
+
+  const addGalleryImage = (image: Omit<GalleryImage, "id">) => {
+    const nextImage: GalleryImage = { ...image, id: crypto.randomUUID() }
+    setData((prev) => {
+      const next = { ...prev, gallery: [...prev.gallery, nextImage] }
+      try {
+        localStorage.setItem("ljn-site-data", JSON.stringify(next))
+      } catch {
+        throw new Error("Penyimpanan browser penuh. Gunakan foto berukuran lebih kecil.")
+      }
+      return next
+    })
+  }
+
+  const removeGalleryImage = (id: string) => {
+    setData((prev) => {
+      const next = { ...prev, gallery: prev.gallery.filter((g) => g.id !== id) }
+      localStorage.setItem("ljn-site-data", JSON.stringify(next))
+      return next
+    })
+  }
+
+  const updateGalleryCaption = (id: string, caption: string) => {
+    setData((prev) => {
+      const gallery = prev.gallery.map((g) =>
+        g.id === id ? { ...g, caption } : g
+      )
+      const next = { ...prev, gallery }
+      localStorage.setItem("ljn-site-data", JSON.stringify(next))
+      return next
+    })
+  }
+
+  return (
+    <SiteContext.Provider
+      value={{
+        data,
+        updateHero,
+        updatePackage,
+        addPackage,
+        removePackage,
+        updateBenefit,
+        updateAbout,
+        updateContact,
+        updateSocial,
+        updatePromo,
+        addGalleryImage,
+        removeGalleryImage,
+        updateGalleryCaption,
+      }}
+    >
+      {children}
+    </SiteContext.Provider>
+  )
+}
+
+export function useSite() {
+  const ctx = useContext(SiteContext)
+  if (!ctx) throw new Error("useSite must be used within SiteProvider")
+  return ctx
+}

src/data/site.ts

@@ -0,0 +1,137 @@
+import type { SiteData } from "@/types/site";
+
+export const defaultSiteData: SiteData = {
+  hero: {
+    title: "SOLUSI WIFI CERDAS",
+    subtitle: "UNTUK RUMAH & BISNIS ANDA",
+    highlight1: "Kecepatan hingga 100 Mbps",
+    highlight2: "Biaya Pemasangan hanya Rp.150.000",
+    ctaText: "Daftar Sekarang",
+    ctaSecondaryText: "Hubungi Admin",
+    bannerText: "Harga Pas, Untuk Kecepatan Tanpa Batas",
+  },
+  packages: [
+    {
+      id: "1",
+      name: "PAKET MIRAH",
+      speed: 20,
+      price: 150000,
+      features: [
+        "Kecepatan Hingga 20 Mbps",
+        "Sudah Termasuk PPN",
+        "Kuota Tak Terbatas",
+      ],
+      active: true,
+      popular: false,
+    },
+    {
+      id: "2",
+      name: "PAKET MEUJEUH",
+      speed: 30,
+      price: 180000,
+      features: [
+        "Kecepatan Hingga 30 Mbps",
+        "Sudah Termasuk PPN",
+        "Kuota Tak Terbatas",
+      ],
+      active: true,
+      popular: false,
+    },
+    {
+      id: "3",
+      name: "PAKET GANCANG",
+      speed: 50,
+      price: 220000,
+      features: [
+        "Kecepatan Hingga 50 Mbps",
+        "Sudah Termasuk PPN",
+        "Kuota Tak Terbatas",
+      ],
+      active: true,
+      popular: true,
+    },
+    {
+      id: "4",
+      name: "PAKET NGABRET",
+      speed: 100,
+      price: 300000,
+      features: [
+        "Kecepatan Hingga 100 Mbps",
+        "Sudah Termasuk PPN",
+        "Kuota Tak Terbatas",
+      ],
+      active: true,
+      popular: false,
+    },
+  ],
+  benefits: [
+    {
+      icon: "Zap",
+      title: "Instalasi Cepat",
+      description:
+        "Proses pemasangan cepat dan profesional oleh tim teknisi berpengalaman.",
+    },
+    {
+      icon: "Wifi",
+      title: "Internet Stabil",
+      description:
+        "Koneksi stabil dengan uptime tinggi menggunakan infrastruktur fiber optic.",
+    },
+    {
+      icon: "Headphones",
+      title: "Support Responsif",
+      description: "Layanan pelanggan 24/7 siap membantu setiap kendala Anda.",
+    },
+    {
+      icon: "DollarSign",
+      title: "Harga Terjangkau",
+      description:
+        "Paket internet dengan harga kompetitif tanpa biaya tersembunyi.",
+    },
+  ],
+  about: {
+    title: "Kenapa Memilih LJN?",
+    description:
+      "Kami memiliki pengalaman yang luas dalam pemasangan WiFi dan telah melayani banyak pelanggan dengan tingkat kepuasan yang tinggi.",
+  },
+  gallery: [],
+  contact: {
+    whatsapp: "6281234567890",
+    instagram: "https://instagram.com/ljn.cikembar",
+    tiktok: "https://tiktok.com/@ljn.cikembar",
+  },
+  social: [
+    {
+      platform: "whatsapp",
+      url: "https://wa.me/6281234567890",
+      label: "WhatsApp",
+    },
+    {
+      platform: "instagram",
+      url: "https://instagram.com/ljn.cikembar",
+      label: "Instagram",
+    },
+    {
+      platform: "tiktok",
+      url: "https://tiktok.com/@ljn.cikembar",
+      label: "TikTok",
+    },
+  ],
+  promo: {
+    enabled: true,
+    title: "DISKON 50% PAKET GANCANG!",
+    description:
+      "Paket Gancang 50 Mbps diskon 50%! Dari Rp300.000 jadi Rp150.000/bulan. Penawaran terbatas, langsung hubungi admin via WhatsApp!",
+    ctaText: "Klaim Diskon 50% via WhatsApp",
+    message:
+      "Halo, saya tertarik dengan promo diskon 50% Paket Gancang. Boleh info lebih lanjut?",
+    scrollThreshold: 400,
+    showOnce: true,
+  },
+  company: {
+    name: "PT. Lintas Jaringan Indonesia",
+    branch: "Kantor Cabang Cikembar Sukabumi Jawa Barat",
+    address:
+      "Jl. Cirengkol, Cikembar, Kec. Cikembar, Kabupaten Sukabumi, Jawa Barat 43157",
+  },
+};

src/index.css

@@ -0,0 +1,81 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: #ffffff;
+  --color-foreground: #1a1a1a;
+  --color-card: #ffffff;
+  --color-card-foreground: #1a1a1a;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #1a1a1a;
+  --color-primary: #1a1a1a;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #f5f5f5;
+  --color-secondary-foreground: #1a1a1a;
+  --color-muted: #f5f5f5;
+  --color-muted-foreground: #737373;
+  --color-accent: #f5f5f5;
+  --color-accent-foreground: #1a1a1a;
+  --color-destructive: #ef4444;
+  --color-destructive-foreground: #ffffff;
+  --color-border: #1a1a1a;
+  --color-input: #1a1a1a;
+  --color-ring: #1a1a1a;
+  --color-main: #60a5fa;
+  --color-main-foreground: #1a1a1a;
+  --color-chart-1: #ff6b6b;
+  --color-chart-2: #4ecdc4;
+  --color-chart-3: #ffe66d;
+  --color-chart-4: #a29bfe;
+  --color-chart-5: #fd79a8;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-base: 1rem;
+  --shadow-shadow: 8px 8px 0px #1a1a1a;
+  --font-base: 'Inter', system-ui, -apple-system, sans-serif;
+  --color-sidebar: #ffffff;
+  --color-sidebar-foreground: #1a1a1a;
+  --color-sidebar-primary: #1a1a1a;
+  --color-sidebar-primary-foreground: #ffffff;
+  --color-sidebar-accent: #f5f5f5;
+  --color-sidebar-accent-foreground: #1a1a1a;
+  --color-sidebar-border: #1a1a1a;
+  --color-sidebar-ring: #1a1a1a;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  }
+}
+
+@utility border-brutal {
+  border: 4px solid #1a1a1a;
+}
+
+@utility shadow-brutal {
+  box-shadow: 8px 8px 0px #1a1a1a;
+}
+
+@utility shadow-brutal-sm {
+  box-shadow: 4px 4px 0px #1a1a1a;
+}
+
+@utility shadow-brutal-hover {
+  box-shadow: 12px 12px 0px #1a1a1a;
+}
+
+@utility hover-lift {
+  transition: transform 0.2s, box-shadow 0.2s;
+  &:hover {
+    transform: translate(-4px, -4px);
+    box-shadow: 12px 12px 0px #1a1a1a;
+  }
+}

src/layouts/AdminLayout.tsx

@@ -0,0 +1,113 @@
+import { useState } from "react"
+import { Link, Outlet, useLocation } from "react-router-dom"
+import {
+  LayoutDashboard,
+  Package,
+  Zap,
+  Info,
+  Phone,
+  Share2,
+  Gift,
+  Menu,
+  X,
+  Home,
+  Image,
+  LogOut,
+} from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/utils/helpers"
+import { useAuth } from "@/context/AuthContext"
+
+const menuItems = [
+  { href: "/admin", icon: LayoutDashboard, label: "Dashboard" },
+  { href: "/admin/hero", icon: Home, label: "Konten" },
+  { href: "/admin/packages", icon: Package, label: "Paket Internet" },
+  { href: "/admin/benefits", icon: Zap, label: "Keunggulan" },
+  { href: "/admin/about", icon: Info, label: "Tentang Kami" },
+  { href: "/admin/gallery", icon: Image, label: "Galeri" },
+  { href: "/admin/contact", icon: Phone, label: "Kontak" },
+  { href: "/admin/social", icon: Share2, label: "Media Sosial" },
+  { href: "/admin/promo", icon: Gift, label: "Promo Pop-up" },
+]
+
+export default function AdminLayout() {
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+  const location = useLocation()
+  const { logout } = useAuth()
+
+  const handleSignOut = async () => {
+    await logout()
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-100">
+      <div className="bg-yellow-300 border-b-4 border-black px-4 h-14 flex items-center justify-between lg:hidden">
+        <span className="font-black">Admin Panel</span>
+        <div className="flex items-center gap-2">
+          <Button variant="brutal" size="icon" onClick={handleSignOut} aria-label="Logout">
+            <LogOut className="h-4 w-4" />
+          </Button>
+          <Button variant="brutal" size="icon" onClick={() => setSidebarOpen(!sidebarOpen)}>
+            {sidebarOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex">
+        <aside
+          className={cn(
+            "fixed inset-y-0 left-0 z-40 w-64 bg-white border-r-4 border-black transform transition-transform lg:translate-x-0 lg:static lg:inset-auto",
+            sidebarOpen ? "translate-x-0" : "-translate-x-full"
+          )}
+        >
+          <div className="h-14 flex items-center justify-between px-4 border-b-4 border-black bg-yellow-300">
+            <Link to="/" className="font-black text-lg">
+              LJN Admin
+            </Link>
+            <Button
+              variant="brutal"
+              size="icon"
+              onClick={handleSignOut}
+              aria-label="Logout"
+              className="hidden lg:inline-flex"
+            >
+              <LogOut className="h-4 w-4" />
+            </Button>
+          </div>
+          <nav className="p-2 space-y-1">
+            {menuItems.map((item) => {
+              const isActive = location.pathname === item.href
+              return (
+                <Link
+                  key={item.href}
+                  to={item.href}
+                  onClick={() => setSidebarOpen(false)}
+                  className={cn(
+                    "flex items-center gap-3 px-3 py-2.5 rounded-md font-bold text-sm transition-colors",
+                    isActive
+                      ? "bg-black text-yellow-300"
+                      : "hover:bg-gray-100 text-gray-700"
+                  )}
+                >
+                  <item.icon className="h-4 w-4" />
+                  {item.label}
+                </Link>
+              )
+            })}
+          </nav>
+        </aside>
+
+        {sidebarOpen && (
+          <div
+            className="fixed inset-0 z-30 bg-black/50 lg:hidden"
+            onClick={() => setSidebarOpen(false)}
+          />
+        )}
+
+        <main className="flex-1 min-h-screen p-4 sm:p-6 lg:p-8">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}

src/layouts/MainLayout.tsx

@@ -0,0 +1,15 @@
+import { Outlet } from "react-router-dom"
+import Navbar from "@/components/Navbar"
+import PromoPopup from "@/components/PromoPopup"
+
+export default function MainLayout() {
+  return (
+    <div className="min-h-screen bg-white">
+      <Navbar />
+      <main>
+        <Outlet />
+      </main>
+      <PromoPopup />
+    </div>
+  )
+}

src/lib/insforge.ts

@@ -0,0 +1,6 @@
+import { createClient } from "@insforge/sdk"
+
+export const insforge = createClient({
+  baseUrl: import.meta.env.VITE_INSFORGE_URL,
+  anonKey: import.meta.env.VITE_INSFORGE_ANON_KEY,
+})

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/pages/AboutForm.tsx

@@ -0,0 +1,50 @@
+import { useForm } from "react-hook-form"
+import { useSite } from "@/context/SiteContext"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Button } from "@/components/ui/button"
+import { toast } from "sonner"
+import type { AboutData } from "@/types/site"
+
+export default function AboutForm() {
+  const { data, updateAbout } = useSite()
+  const { register, handleSubmit, formState: { isDirty } } = useForm<AboutData>({
+    defaultValues: data.about,
+  })
+
+  const onSubmit = (values: AboutData) => {
+    updateAbout(values)
+    toast.success("Tentang Kami berhasil diupdate!")
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-black">Edit Tentang Kami</h1>
+        <p className="text-sm font-bold text-gray-500">Ubah konten section tentang kami</p>
+      </div>
+
+      <Card className="border-4 border-black shadow-brutal-sm">
+        <CardHeader>
+          <CardTitle className="font-black">Tentang Kami Content</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div>
+              <label className="block font-bold text-sm mb-1">Judul</label>
+              <Input {...register("title", { required: true })} className="border-2 border-black font-bold" />
+            </div>
+            <div>
+              <label className="block font-bold text-sm mb-1">Deskripsi</label>
+              <Textarea {...register("description", { required: true })} className="border-2 border-black font-bold" rows={4} />
+            </div>
+            <Button type="submit" variant="brutal" disabled={!isDirty}>
+              Simpan Perubahan
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/pages/AdminDashboard.tsx

@@ -0,0 +1,63 @@
+import { motion } from "framer-motion"
+import { useSite } from "@/context/SiteContext"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Package, Zap, Phone, Image } from "lucide-react"
+
+export default function AdminDashboard() {
+  const { data } = useSite()
+
+  const stats = [
+    { label: "Paket Aktif", value: data.packages.filter((p) => p.active).length, icon: Package, color: "bg-blue-300" },
+    { label: "Keunggulan", value: data.benefits.length, icon: Zap, color: "bg-green-300" },
+    { label: "Foto Galeri", value: data.gallery.length, icon: Image, color: "bg-cyan-300" },
+    { label: "Sosial Media", value: data.social.length, icon: Phone, color: "bg-pink-300" },
+  ]
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-black">Dashboard</h1>
+        <p className="text-sm font-bold text-gray-500">Overview konten landing page</p>
+      </div>
+
+      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {stats.map((stat, i) => (
+          <motion.div
+            key={stat.label}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: i * 0.1 }}
+          >
+            <Card className="border-4 border-black shadow-brutal-sm">
+              <CardHeader className="flex flex-row items-center justify-between pb-2">
+                <CardTitle className="text-sm font-black">{stat.label}</CardTitle>
+                <div className={`${stat.color} border-2 border-black rounded-md p-1.5`}>
+                  <stat.icon className="h-4 w-4" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="text-3xl font-black">{stat.value}</div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        ))}
+      </div>
+
+      <Card className="border-4 border-black shadow-brutal-sm">
+        <CardHeader>
+          <CardTitle className="font-black">Preview Hero</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-2">
+            <p className="font-bold text-sm text-gray-500">Judul:</p>
+            <p className="font-black text-lg">{data.hero.title}</p>
+            <p className="font-bold text-sm text-gray-500">Subtitle:</p>
+            <p className="font-black">{data.hero.subtitle}</p>
+            <p className="font-bold text-sm text-gray-500">Banner:</p>
+            <p className="font-bold">{data.hero.bannerText}</p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/pages/AdminLogin.tsx

@@ -0,0 +1,146 @@
+import { useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { UserPlus, LogIn, Loader2, ShieldCheck } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { InputWithIcon } from "@/components/ui/input-icon"
+import { insforge } from "@/lib/insforge"
+import { useAuth } from "@/context/AuthContext"
+import { toast } from "sonner"
+
+type Mode = "signin" | "signup"
+
+export default function AdminLogin() {
+  const [mode, setMode] = useState<Mode>("signin")
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+  const [submitting, setSubmitting] = useState(false)
+  const { login } = useAuth()
+  const navigate = useNavigate()
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!username.trim()) {
+      toast.error("Username wajib diisi.")
+      return
+    }
+    if (password.length < 6) {
+      toast.error("Password minimal 6 karakter.")
+      return
+    }
+    setSubmitting(true)
+    try {
+      if (mode === "signup") {
+        const { error } = await insforge.functions.invoke("register-user", {
+          body: { username: username.trim(), password },
+        })
+        if (error) {
+          const msg =
+            error && typeof error === "object" && "message" in error
+              ? String((error as { message: unknown }).message)
+              : ""
+          toast.error(msg || "Gagal membuat akun.")
+          if (msg.includes("Pendaftaran ditutup")) {
+            setMode("signin")
+          }
+          setSubmitting(false)
+          return
+        }
+        toast.success("Akun berhasil dibuat. Silakan masuk.")
+        setMode("signin")
+        setPassword("")
+        setSubmitting(false)
+        return
+      }
+
+      const { error } = await insforge.functions.invoke("login-user", {
+        body: { username: username.trim(), password },
+      })
+      if (error) throw error
+      login(username.trim())
+      toast.success("Login berhasil!")
+      navigate("/admin")
+    } catch (err) {
+      console.error(err)
+      toast.error(
+        err && typeof err === "object" && "message" in err
+          ? String((err as { message: unknown }).message)
+          : "Gagal memproses permintaan. Coba lagi."
+      )
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100 px-4">
+      <Card className="w-full max-w-md border-4 border-black shadow-brutal rounded-md">
+        <CardHeader className="bg-yellow-300 border-b-4 border-black">
+          <CardTitle className="flex items-center gap-2 font-black text-lg">
+            <ShieldCheck className="h-5 w-5" />
+            Admin Panel LJN
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="p-6">
+          <div className="mb-4 flex border-2 border-black rounded-md overflow-hidden">
+            <button
+              type="button"
+              onClick={() => setMode("signin")}
+              className={
+                "flex-1 py-2.5 font-bold text-sm transition-colors " +
+                (mode === "signin" ? "bg-black text-yellow-300" : "bg-white text-gray-700")
+              }
+            >
+              Masuk
+            </button>
+            <button
+              type="button"
+              onClick={() => setMode("signup")}
+              className={
+                "flex-1 py-2.5 font-bold text-sm border-l-2 border-black transition-colors " +
+                (mode === "signup" ? "bg-black text-yellow-300" : "bg-white text-gray-700")
+              }
+            >
+              Daftar
+            </button>
+          </div>
+
+          <form onSubmit={submit} className="space-y-4">
+            <InputWithIcon
+              icon={<UserPlus className="h-4 w-4" />}
+              type="text"
+              placeholder="Username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              autoComplete="username"
+            />
+            <InputWithIcon
+              icon={<LogIn className="h-4 w-4" />}
+              type="password"
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete={mode === "signin" ? "current-password" : "new-password"}
+            />
+
+            <Button type="submit" variant="brutal" className="w-full" disabled={submitting}>
+              {submitting ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : mode === "signin" ? (
+                "Masuk"
+              ) : (
+                "Buat Akun"
+              )}
+            </Button>
+          </form>
+
+          <p className="mt-4 text-center text-xs text-gray-500">
+            {mode === "signin"
+              ? "Belum punya akun? Pilih tab Daftar."
+              : "Sudah punya akun? Pilih tab Masuk."}
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/pages/BenefitsForm.tsx

@@ -0,0 +1,89 @@
+import { useSite } from "@/context/SiteContext"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { toast } from "sonner"
+import { motion } from "framer-motion"
+import type { Benefit } from "@/types/site"
+import { Zap, Wifi, Headphones, DollarSign } from "lucide-react"
+
+const iconOptions = [
+  { value: "Zap", label: "Zap", icon: Zap },
+  { value: "Wifi", label: "Wifi", icon: Wifi },
+  { value: "Headphones", label: "Headphones", icon: Headphones },
+  { value: "DollarSign", label: "DollarSign", icon: DollarSign },
+]
+
+export default function BenefitsForm() {
+  const { data, updateBenefit } = useSite()
+
+  const handleUpdate = (index: number, field: keyof Benefit, value: string) => {
+    updateBenefit(index, { [field]: value })
+    toast.success("Keunggulan berhasil diupdate!")
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-black">Edit Keunggulan</h1>
+        <p className="text-sm font-bold text-gray-500">Ubah konten keunggulan LJN</p>
+      </div>
+
+      <div className="grid sm:grid-cols-2 gap-4">
+        {data.benefits.map((benefit, index) => {
+          const IconComp = iconOptions.find((o) => o.value === benefit.icon)?.icon ?? Zap
+          return (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.1 }}
+            >
+              <Card className="border-4 border-black shadow-brutal-sm">
+                <CardHeader>
+                  <div className="flex items-center gap-2">
+                    <div className="bg-yellow-300 border-2 border-black rounded-md p-1.5">
+                      <IconComp className="h-5 w-5" />
+                    </div>
+                    <CardTitle className="font-black text-base">Keunggulan {index + 1}</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  <div>
+                    <label className="block font-bold text-xs mb-1">Icon</label>
+                    <select
+                      value={benefit.icon}
+                      onChange={(e) => handleUpdate(index, "icon", e.target.value)}
+                      className="w-full border-2 border-black rounded-md p-2 text-sm font-bold"
+                    >
+                      {iconOptions.map((opt) => (
+                        <option key={opt.value} value={opt.value}>
+                          {opt.label}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block font-bold text-xs mb-1">Judul</label>
+                    <Input
+                      value={benefit.title}
+                      onChange={(e) => handleUpdate(index, "title", e.target.value)}
+                      className="border-2 border-black font-bold"
+                    />
+                  </div>
+                  <div>
+                    <label className="block font-bold text-xs mb-1">Deskripsi</label>
+                    <Input
+                      value={benefit.description}
+                      onChange={(e) => handleUpdate(index, "description", e.target.value)}
+                      className="border-2 border-black font-bold"
+                    />
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

src/pages/ContactForm.tsx

@@ -0,0 +1,68 @@
+import { useForm } from "react-hook-form"
+import { useSite } from "@/context/SiteContext"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { toast } from "sonner"
+import { MessageCircle, Phone } from "lucide-react"
+
+interface ContactFormValues {
+  whatsapp: string
+  instagram: string
+  tiktok: string
+}
+
+export default function ContactForm() {
+  const { data, updateContact } = useSite()
+  const { register, handleSubmit, formState: { isDirty } } = useForm<ContactFormValues>({
+    defaultValues: data.contact,
+  })
+
+  const onSubmit = (values: ContactFormValues) => {
+    updateContact(values)
+    toast.success("Kontak berhasil diupdate!")
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-black">Edit Kontak</h1>
+        <p className="text-sm font-bold text-gray-500">Ubah informasi kontak</p>
+      </div>
+
+      <Card className="border-4 border-black shadow-brutal-sm">
+        <CardHeader>
+          <CardTitle className="font-black">Kontak Info</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div>
+              <label className="flex items-center gap-2 font-bold text-sm mb-1">
+                <MessageCircle className="h-4 w-4 text-green-500" />
+                Nomor WhatsApp
+              </label>
+              <Input {...register("whatsapp", { required: true })} placeholder="6281234567890" className="border-2 border-black font-bold" />
+            </div>
+            <div>
+              <label className="flex items-center gap-2 font-bold text-sm mb-1">
+                <Phone className="h-4 w-4 text-pink-500" />
+                URL Instagram
+              </label>
+              <Input {...register("instagram")} placeholder="https://instagram.com/..." className="border-2 border-black font-bold" />
+            </div>
+            <div>
+              <label className="flex items-center gap-2 font-bold text-sm mb-1">
+                <Phone className="h-4 w-4" />
+                URL TikTok
+              </label>
+              <Input {...register("tiktok")} placeholder="https://tiktok.com/@..." className="border-2 border-black font-bold" />
+            </div>
+            <Button type="submit" variant="brutal" disabled={!isDirty}>
+              Simpan Perubahan
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/pages/GalleryForm.tsx

@@ -0,0 +1,261 @@
+import { useRef, useState } from "react"
+import { useSite } from "@/context/SiteContext"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { InputWithIcon } from "@/components/ui/input-icon"
+import { Button } from "@/components/ui/button"
+import { toast } from "sonner"
+import { motion } from "framer-motion"
+import { ImagePlus, Trash2, Upload, Link2 } from "lucide-react"
+import { insforge } from "@/lib/insforge"
+
+const MAX_DIMENSION = 1280
+const JPEG_QUALITY = 0.75
+
+function fileToBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      const result = reader.result as string
+      resolve(result.split(",")[1])
+    }
+    reader.onerror = () => reject(new Error("Gagal membaca file."))
+    reader.readAsDataURL(file)
+  })
+}
+
+function compressImage(file: File): Promise<File> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      const img = new Image()
+      img.onload = () => {
+        let { width, height } = img
+        if (width > MAX_DIMENSION || height > MAX_DIMENSION) {
+          const scale = MAX_DIMENSION / Math.max(width, height)
+          width = Math.round(width * scale)
+          height = Math.round(height * scale)
+        }
+        const canvas = document.createElement("canvas")
+        canvas.width = width
+        canvas.height = height
+        const ctx = canvas.getContext("2d")
+        if (!ctx) {
+          reject(new Error("Canvas tidak didukung browser ini."))
+          return
+        }
+        ctx.fillStyle = "#ffffff"
+        ctx.fillRect(0, 0, width, height)
+        ctx.drawImage(img, 0, 0, width, height)
+        canvas.toBlob(
+          (blob) => {
+            if (!blob) {
+              reject(new Error("Gagal mengompres gambar."))
+              return
+            }
+            resolve(
+              new File([blob], `gallery-${Date.now()}.jpg`, {
+                type: "image/jpeg",
+              })
+            )
+          },
+          "image/jpeg",
+          JPEG_QUALITY
+        )
+      }
+      img.onerror = () => reject(new Error("File bukan gambar yang valid."))
+      img.src = reader.result as string
+    }
+    reader.onerror = () => reject(new Error("Gagal membaca file gambar."))
+    reader.readAsDataURL(file)
+  })
+}
+
+export default function GalleryForm() {
+  const { data, addGalleryImage, removeGalleryImage, updateGalleryCaption } = useSite()
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [url, setUrl] = useState("")
+  const [key, setKey] = useState("")
+  const [caption, setCaption] = useState("")
+  const [uploading, setUploading] = useState(false)
+
+  const handleFile = async (file: File | undefined) => {
+    if (!file) return
+    if (!file.type.startsWith("image/")) {
+      toast.error("File harus berupa gambar.")
+      return
+    }
+    setUploading(true)
+    try {
+      const compressed = await compressImage(file)
+      const base64 = await fileToBase64(compressed)
+      const { data, error } = await insforge.functions.invoke("gallery-upload", {
+        body: {
+          name: compressed.name,
+          contentType: compressed.type,
+          base64,
+        },
+      })
+      if (error || !data?.url) throw error ?? new Error("Upload gagal.")
+      setUrl(data.url)
+      setKey(data.key)
+      toast.success("Gambar siap ditambahkan!")
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Gagal mengunggah gambar."
+      )
+    } finally {
+      setUploading(false)
+      if (fileInputRef.current) fileInputRef.current.value = ""
+    }
+  }
+
+  const handleAdd = () => {
+    if (!url.trim()) {
+      toast.error("Pilih gambar atau isi URL foto dulu.")
+      return
+    }
+    try {
+      addGalleryImage({
+        url: url.trim(),
+        caption: caption.trim(),
+        key: key.trim() || undefined,
+      })
+      toast.success("Foto berhasil ditambahkan!")
+      setUrl("")
+      setKey("")
+      setCaption("")
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Gagal menyimpan foto.")
+    }
+  }
+
+  const handleRemove = async (id: string) => {
+    const image = data.gallery.find((g) => g.id === id)
+    if (image?.key) {
+      const { error } = await insforge.functions.invoke("gallery-delete", {
+        body: { key: image.key },
+      })
+      if (error) {
+        toast.error("Gagal menghapus file di storage.")
+        return
+      }
+    }
+    removeGalleryImage(id)
+    toast.success("Foto berhasil dihapus!")
+  }
+
+  const handleCaption = (id: string, value: string) => {
+    updateGalleryCaption(id, value)
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-black">Edit Galeri</h1>
+        <p className="text-sm font-bold text-gray-500">Kelola foto dokumentasi LJN</p>
+      </div>
+
+      <Card className="border-4 border-dashed border-black shadow-brutal-sm">
+        <CardHeader>
+          <CardTitle className="font-black flex items-center gap-2">
+            <ImagePlus className="h-5 w-5" />
+            Tambah Foto
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex flex-col sm:flex-row gap-3">
+            <Button
+              variant="brutal"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={uploading}
+              className="bg-yellow-300"
+            >
+              <Upload className="h-4 w-4" />
+              {uploading ? "Memproses..." : "Upload Gambar"}
+            </Button>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              className="hidden"
+              onChange={(e) => handleFile(e.target.files?.[0])}
+            />
+            <InputWithIcon
+              containerClassName="flex-1"
+              icon={<Link2 className="h-4 w-4" />}
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              placeholder="Atau tempel URL gambar di sini..."
+              className="border-2 border-black font-bold"
+            />
+          </div>
+
+          {url && (
+            <div className="flex items-center gap-4">
+              <img
+                src={url}
+                alt="Preview"
+                className="h-24 w-32 object-cover border-4 border-black rounded-md"
+              />
+              <div className="flex-1 space-y-2">
+                <Input
+                  value={caption}
+                  onChange={(e) => setCaption(e.target.value)}
+                  placeholder="Caption foto (opsional)"
+                  className="border-2 border-black font-bold"
+                />
+                <Button variant="brutal" onClick={handleAdd} className="bg-green-500 text-white">
+                  Tambah ke Galeri
+                </Button>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {data.gallery.length === 0 ? (
+        <Card className="border-4 border-black shadow-brutal-sm">
+          <CardContent className="py-10 text-center font-bold text-gray-500">
+            Belum ada foto. Tambahkan foto pertama di atas.
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {data.gallery.map((image, index) => (
+            <motion.div
+              key={image.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.05 }}
+            >
+              <Card className="border-4 border-black shadow-brutal-sm overflow-hidden">
+                <img
+                  src={image.url}
+                  alt={image.caption || "Foto galeri"}
+                  className="h-40 w-full object-cover border-b-4 border-black"
+                />
+                <CardContent className="p-3 space-y-3">
+                  <Input
+                    value={image.caption}
+                    onChange={(e) => handleCaption(image.id, e.target.value)}
+                    placeholder="Caption foto"
+                    className="border-2 border-black font-bold"
+                  />
+                  <Button
+                    variant="destructive"
+                    className="w-full"
+                    onClick={() => handleRemove(image.id)}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                    Hapus
+                  </Button>
+                </CardContent>
+              </Card>
+            </motion.div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

src/pages/HeroForm.tsx

@@ -0,0 +1,73 @@
+import { useForm } from "react-hook-form"
+import { useSite } from "@/context/SiteContext"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { toast } from "sonner"
+import type { HeroData } from "@/types/site"
+
+export default function HeroForm() {
+  const { data, updateHero } = useSite()
+  const { register, handleSubmit, formState: { isDirty } } = useForm<HeroData>({
+    defaultValues: data.hero,
+  })
+
+  const onSubmit = (values: HeroData) => {
+    updateHero(values)
+    toast.success("Konten berhasil diupdate!")
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-black">Edit Konten</h1>
+        <p className="text-sm font-bold text-gray-500">Ubah konten section</p>
+      </div>
+
+      <Card className="border-4 border-black shadow-brutal-sm">
+        <CardHeader>
+          <CardTitle className="font-black">Kontent</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div>
+              <label className="block font-bold text-sm mb-1">Judul</label>
+              <Input {...register("title", { required: true })} className="border-2 border-black font-bold" />
+            </div>
+            <div>
+              <label className="block font-bold text-sm mb-1">Subtitle</label>
+              <Input {...register("subtitle", { required: true })} className="border-2 border-black font-bold" />
+            </div>
+            <div>
+              <label className="block font-bold text-sm mb-1">Banner Text</label>
+              <Input {...register("bannerText")} className="border-2 border-black font-bold" />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block font-bold text-sm mb-1">Highlight 1</label>
+                <Input {...register("highlight1")} className="border-2 border-black font-bold" />
+              </div>
+              <div>
+                <label className="block font-bold text-sm mb-1">Highlight 2</label>
+                <Input {...register("highlight2")} className="border-2 border-black font-bold" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block font-bold text-sm mb-1">CTA Text</label>
+                <Input {...register("ctaText")} className="border-2 border-black font-bold" />
+              </div>
+              <div>
+                <label className="block font-bold text-sm mb-1">CTA Secondary</label>
+                <Input {...register("ctaSecondaryText")} className="border-2 border-black font-bold" />
+              </div>
+            </div>
+            <Button type="submit" variant="brutal" disabled={!isDirty}>
+              Simpan Perubahan
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/pages/LandingPage.tsx

@@ -0,0 +1,17 @@
+import Hero from "@/components/Hero"
+import Pricing from "@/components/Pricing"
+import { LazySection } from "@/components/LazySection"
+
+export default function LandingPage() {
+  return (
+    <>
+      <Hero />
+      <Pricing />
+      <LazySection importFn={() => import("@/components/Benefits")} />
+      <LazySection importFn={() => import("@/components/About")} />
+      <LazySection importFn={() => import("@/components/Gallery")} />
+      <LazySection importFn={() => import("@/components/CTA")} />
+      <LazySection importFn={() => import("@/components/Footer")} />
+    </>
+  )
+}

src/pages/PackageForm.tsx

@@ -0,0 +1,179 @@
+import { useState } from "react"
+import { useForm } from "react-hook-form"
+import { useSite } from "@/context/SiteContext"
+import { Card, CardContent } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { toast } from "sonner"
+import { generateId, formatRupiah } from "@/utils/helpers"
+import type { PackageData } from "@/types/site"
+import { Pencil, Trash2, Plus } from "lucide-react"
+
+interface PackageFormValues {
+  name: string
+  speed: number
+  price: number
+  features: string
+  active: boolean
+  popular: boolean
+}
+
+export default function PackageManager() {
+  const { data, updatePackage, addPackage, removePackage } = useSite()
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [open, setOpen] = useState(false)
+
+  const form = useForm<PackageFormValues>()
+  const { register, handleSubmit, reset } = form
+
+  const openAdd = () => {
+    reset({ name: "", speed: 0, price: 0, features: "", active: true, popular: false })
+    setEditingId(null)
+    setOpen(true)
+  }
+
+  const openEdit = (pkg: PackageData) => {
+    reset({
+      name: pkg.name,
+      speed: pkg.speed,
+      price: pkg.price,
+      features: pkg.features.join("\n"),
+      active: pkg.active,
+      popular: pkg.popular,
+    })
+    setEditingId(pkg.id)
+    setOpen(true)
+  }
+
+  const onSubmit = (values: PackageFormValues) => {
+    const pkgData = {
+      name: values.name,
+      speed: Number(values.speed),
+      price: Number(values.price),
+      features: values.features.split("\n").filter(Boolean),
+      active: values.active,
+      popular: values.popular,
+    }
+
+    if (editingId) {
+      updatePackage(editingId, pkgData)
+      toast.success("Paket berhasil diupdate!")
+    } else {
+      addPackage({
+        ...pkgData,
+        id: generateId(),
+      })
+      toast.success("Paket baru berhasil ditambahkan!")
+    }
+    setOpen(false)
+  }
+
+  const handleDelete = (id: string) => {
+    removePackage(id)
+    toast.success("Paket berhasil dihapus!")
+  }
+
+  const toggleActive = (pkg: PackageData) => {
+    updatePackage(pkg.id, { active: !pkg.active })
+    toast.success(`Paket ${pkg.active ? "dinonaktifkan" : "diaktifkan"}!`)
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-black">Paket Internet</h1>
+          <p className="text-sm font-bold text-gray-500">Kelola paket internet</p>
+        </div>
+        <Button variant="brutal" onClick={openAdd} className="bg-green-400 hover:bg-green-500">
+          <Plus className="h-4 w-4 mr-2" />
+          Tambah Paket
+        </Button>
+      </div>
+
+      <div className="grid gap-4">
+        {data.packages.map((pkg) => (
+          <Card key={pkg.id} className="border-4 border-black shadow-brutal-sm">
+            <CardContent className="flex items-center justify-between p-4">
+              <div className="flex items-center gap-4">
+                <div className="space-y-1">
+                  <div className="flex items-center gap-2">
+                    <span className="font-black text-lg">{pkg.name}</span>
+                    {pkg.popular && <Badge className="bg-red-500 border-2 border-black">POPULER</Badge>}
+                    {!pkg.active && <Badge className="bg-gray-400 border-2 border-black">INACTIVE</Badge>}
+                  </div>
+                  <div className="text-sm font-bold text-gray-500">
+                    {pkg.speed} Mbps &middot; {formatRupiah(pkg.price)}/Bulan
+                  </div>
+                  <div className="text-xs text-gray-400">
+                    {pkg.features.join(" | ")}
+                  </div>
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button variant="brutal" size="sm" onClick={() => toggleActive(pkg)}>
+                  {pkg.active ? "Nonaktifkan" : "Aktifkan"}
+                </Button>
+                <Button variant="brutal" size="icon" onClick={() => openEdit(pkg)}>
+                  <Pencil className="h-4 w-4" />
+                </Button>
+                <Button variant="brutal" size="icon" className="bg-red-400 hover:bg-red-500" onClick={() => handleDelete(pkg.id)}>
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="border-4 border-black shadow-brutal max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="font-black text-xl">
+              {editingId ? "Edit Paket" : "Tambah Paket"}
+            </DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div>
+              <label className="block font-bold text-sm mb-1">Nama Paket</label>
+              <Input {...register("name", { required: true })} className="border-2 border-black" />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block font-bold text-sm mb-1">Speed (Mbps)</label>
+                <Input {...register("speed", { required: true })} type="number" className="border-2 border-black" />
+              </div>
+              <div>
+                <label className="block font-bold text-sm mb-1">Harga (Rp)</label>
+                <Input {...register("price", { required: true })} type="number" className="border-2 border-black" />
+              </div>
+            </div>
+            <div>
+              <label className="block font-bold text-sm mb-1">Fitur (satu per baris)</label>
+              <textarea
+                {...register("features")}
+                rows={4}
+                className="w-full border-2 border-black rounded-md p-2 text-sm font-bold"
+              />
+            </div>
+            <div className="flex items-center gap-4">
+              <label className="flex items-center gap-2 font-bold text-sm">
+                <input type="checkbox" {...register("active")} className="w-4 h-4 border-2 border-black" />
+                Aktif
+              </label>
+              <label className="flex items-center gap-2 font-bold text-sm">
+                <input type="checkbox" {...register("popular")} className="w-4 h-4 border-2 border-black" />
+                Populer
+              </label>
+            </div>
+            <Button type="submit" variant="brutal" className="w-full bg-green-400 hover:bg-green-500">
+              {editingId ? "Update Paket" : "Tambah Paket"}
+            </Button>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

src/pages/PromoForm.tsx

@@ -0,0 +1,97 @@
+import { useForm } from "react-hook-form"
+import { useSite } from "@/context/SiteContext"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { toast } from "sonner"
+import type { PromoData } from "@/types/site"
+
+export default function PromoForm() {
+  const { data, updatePromo } = useSite()
+  const { register, handleSubmit, formState: { isDirty } } = useForm<PromoData>({
+    defaultValues: data.promo,
+  })
+
+  const onSubmit = (values: PromoData) => {
+    updatePromo(values)
+    toast.success("Promo berhasil diupdate!")
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-black">Edit Promo Pop-up</h1>
+        <p className="text-sm font-bold text-gray-500">
+          Atur promo yang tampil otomatis di halaman pengunjung
+        </p>
+      </div>
+
+      <Card className="border-4 border-black shadow-brutal-sm">
+        <CardHeader>
+          <CardTitle className="font-black">Promo</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <label className="flex items-center gap-2 font-bold text-sm">
+              <input
+                type="checkbox"
+                {...register("enabled")}
+                className="h-4 w-4 border-2 border-black"
+              />
+              Tampilkan promo
+            </label>
+            <div>
+              <label className="block font-bold text-sm mb-1">Judul</label>
+              <Input {...register("title", { required: true })} className="border-2 border-black font-bold" />
+            </div>
+            <div>
+              <label className="block font-bold text-sm mb-1">Deskripsi</label>
+              <textarea
+                {...register("description", { required: true })}
+                rows={3}
+                className="w-full rounded-md border-2 border-black bg-white px-3 py-2 font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black"
+              />
+            </div>
+            <div>
+              <label className="block font-bold text-sm mb-1">Teks Tombol</label>
+              <Input {...register("ctaText", { required: true })} className="border-2 border-black font-bold" />
+            </div>
+            <div>
+              <label className="block font-bold text-sm mb-1">
+                Pesan WhatsApp (terisi otomatis)
+              </label>
+              <textarea
+                {...register("message")}
+                rows={3}
+                className="w-full rounded-md border-2 border-black bg-white px-3 py-2 font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black"
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block font-bold text-sm mb-1">
+                  Ambang Scroll (px)
+                </label>
+                <Input
+                  type="number"
+                  {...register("scrollThreshold", { valueAsNumber: true, min: 0 })}
+                  className="border-2 border-black font-bold"
+                />
+              </div>
+              <label className="flex items-end gap-2 font-bold text-sm pb-2">
+                <input
+                  type="checkbox"
+                  {...register("showOnce")}
+                  className="h-4 w-4 border-2 border-black"
+                />
+                Tampil sekali per pengunjung
+              </label>
+            </div>
+            <Button type="submit" variant="brutal" disabled={!isDirty}>
+              Simpan Perubahan
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/pages/SocialForm.tsx

@@ -0,0 +1,70 @@
+import { useSite } from "@/context/SiteContext"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { toast } from "sonner"
+import { motion } from "framer-motion"
+import { MessageCircle } from "lucide-react"
+
+export default function SocialForm() {
+  const { data, updateSocial } = useSite()
+
+  const handleUpdate = (index: number, field: "url" | "label", value: string) => {
+    updateSocial(index, { [field]: value })
+    toast.success("Media sosial berhasil diupdate!")
+  }
+
+  const socialColors: Record<string, string> = {
+    whatsapp: "bg-green-400",
+    instagram: "bg-pink-400",
+    tiktok: "bg-black text-white",
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-black">Edit Media Sosial</h1>
+        <p className="text-sm font-bold text-gray-500">Ubah link media sosial</p>
+      </div>
+
+      <div className="grid gap-4">
+        {data.social.map((social, index) => (
+          <motion.div
+            key={social.platform}
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: index * 0.1 }}
+          >
+            <Card className="border-4 border-black shadow-brutal-sm">
+              <CardHeader>
+                <div className="flex items-center gap-2">
+                  <div className={`${socialColors[social.platform] ?? "bg-gray-300"} border-2 border-black rounded-md p-1.5`}>
+                    <MessageCircle className="h-4 w-4" />
+                  </div>
+                  <CardTitle className="font-black text-base capitalize">{social.platform}</CardTitle>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <div>
+                  <label className="block font-bold text-xs mb-1">Label</label>
+                  <Input
+                    value={social.label}
+                    onChange={(e) => handleUpdate(index, "label", e.target.value)}
+                    className="border-2 border-black font-bold"
+                  />
+                </div>
+                <div>
+                  <label className="block font-bold text-xs mb-1">URL</label>
+                  <Input
+                    value={social.url}
+                    onChange={(e) => handleUpdate(index, "url", e.target.value)}
+                    className="border-2 border-black font-bold"
+                  />
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  )
+}

src/types/site.ts

@@ -0,0 +1,73 @@
+export interface HeroData {
+  title: string
+  subtitle: string
+  highlight1: string
+  highlight2: string
+  ctaText: string
+  ctaSecondaryText: string
+  bannerText: string
+}
+
+export interface Benefit {
+  icon: string
+  title: string
+  description: string
+}
+
+export interface PackageData {
+  id: string
+  name: string
+  speed: number
+  price: number
+  features: string[]
+  active: boolean
+  popular: boolean
+}
+
+export interface AboutData {
+  title: string
+  description: string
+}
+
+export interface SocialLink {
+  platform: "whatsapp" | "instagram" | "tiktok"
+  url: string
+  label: string
+}
+
+export interface GalleryImage {
+  id: string
+  url: string
+  caption: string
+  key?: string
+}
+
+export interface PromoData {
+  enabled: boolean
+  title: string
+  description: string
+  ctaText: string
+  message: string
+  scrollThreshold: number
+  showOnce: boolean
+}
+
+export interface SiteData {
+  hero: HeroData
+  packages: PackageData[]
+  benefits: Benefit[]
+  gallery: GalleryImage[]
+  about: AboutData
+  contact: {
+    whatsapp: string
+    instagram: string
+    tiktok: string
+  }
+  social: SocialLink[]
+  promo: PromoData
+  company: {
+    name: string
+    branch: string
+    address: string
+  }
+}

src/utils/helpers.ts

@@ -0,0 +1,14 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatRupiah(amount: number): string {
+  return `Rp${amount.toLocaleString("id-ID")}`
+}
+
+export function generateId(): string {
+  return Math.random().toString(36).substring(2, 9)
+}

src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_INSFORGE_URL: string
+  readonly VITE_INSFORGE_ANON_KEY: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "ignoreDeprecations": "6.0"
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  build: {
+    target: 'es2020',
+    cssMinify: 'lightningcss',
+    rollupOptions: {
+      output: {
+        manualChunks(id: string) {
+          if (id.includes('node_modules')) {
+            if (id.includes('react-dom') || id.includes('react-router')) return 'vendor-react'
+            if (id.includes('react')) return 'vendor-react'
+            if (id.includes('framer-motion')) return 'vendor-motion'
+            if (id.includes('@radix-ui')) return 'vendor-radix'
+            if (id.includes('lucide-react')) return 'vendor-icons'
+            return 'vendor'
+          }
+        },
+      },
+    },
+  },
+})