+
+
{nft.imageUrl ? (
- 
) : (
{nft.brand.logoUrl && (
- 
)}
{nft.brand.name}
diff --git a/src/app/manage/nfts/page.tsx b/src/app/manage/nfts/page.tsx
index db72557..69179e0 100644
--- a/src/app/manage/nfts/page.tsx
+++ b/src/app/manage/nfts/page.tsx
@@ -12,6 +12,7 @@ import {
import { Badge } from '@/components/ui/badge';
import { Sparkles, TrendingUp, Calendar, ImageIcon } from 'lucide-react';
import Link from 'next/link';
+import Image from 'next/image';
import {
formatAddress,
getTxExplorerUrl,
@@ -117,10 +118,12 @@ async function NFTTable() {
{nft.imageUrl ? (
-
) : (
diff --git a/src/app/manage/tickets/components/sidebar-cards.tsx b/src/app/manage/tickets/components/sidebar-cards.tsx
index f7388ba..d8ed188 100644
--- a/src/app/manage/tickets/components/sidebar-cards.tsx
+++ b/src/app/manage/tickets/components/sidebar-cards.tsx
@@ -1,5 +1,6 @@
'use client';
+import Image from 'next/image';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
FileText,
@@ -165,11 +166,13 @@ export function ProductSidebar({ tag, products }: ProductSidebarProps) {
{tag.nft?.image_url && (
diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx
new file mode 100644
index 0000000..9a82e41
--- /dev/null
+++ b/src/app/pricing/page.tsx
@@ -0,0 +1,53 @@
+import { Metadata } from 'next';
+import { Navbar } from '@/components/landing/Navbar';
+import { Footer } from '@/components/landing/Footer';
+import {
+ PricingHero,
+ PricingCards,
+ IncludedFeatures,
+ PricingFAQs,
+ PricingCTA,
+} from '@/components/pricing';
+
+export const metadata: Metadata = {
+ title: 'Pricing - Etags',
+ description:
+ 'Transparent pricing for blockchain-based product authentication. Start free with 1,000 tags per month. Upgrade anytime.',
+ keywords: [
+ 'pricing',
+ 'product authentication pricing',
+ 'blockchain pricing',
+ 'anti-counterfeiting cost',
+ ],
+ openGraph: {
+ title: 'Pricing - Etags',
+ description:
+ 'Choose the right plan for your business. Start free, upgrade anytime.',
+ },
+};
+
+export default function PricingPage() {
+ return (
+
{nft.image_url && (
- 
)}
NFT Collectible
-
- ![]()
+
+ {/* Background Effects */}
+
+
+
+
+
+ );
+}
diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx
new file mode 100644
index 0000000..185ba50
--- /dev/null
+++ b/src/app/privacy/page.tsx
@@ -0,0 +1,168 @@
+import { Metadata } from 'next';
+import { Navbar } from '@/components/landing/Navbar';
+import { Footer } from '@/components/landing/Footer';
+import { LegalHero, LegalSection } from '@/components/legal';
+
+export const metadata: Metadata = {
+ title: 'Privacy Policy - Etags',
+ description:
+ 'Learn how Etags collects, uses, and protects your data. We are committed to transparency and data privacy.',
+ keywords: ['privacy policy', 'data protection', 'GDPR', 'data privacy'],
+ openGraph: {
+ title: 'Privacy Policy - Etags',
+ description: 'Our commitment to protecting your data and privacy.',
+ },
+};
+
+export default function PrivacyPage() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/security/page.tsx b/src/app/security/page.tsx
new file mode 100644
index 0000000..a69f1d1
--- /dev/null
+++ b/src/app/security/page.tsx
@@ -0,0 +1,254 @@
+import { Metadata } from 'next';
+import { Navbar } from '@/components/landing/Navbar';
+import { Footer } from '@/components/landing/Footer';
+import { LegalHero, LegalSection } from '@/components/legal';
+
+export const metadata: Metadata = {
+ title: 'Security Practices - Etags',
+ description:
+ 'Learn about our security measures and best practices to protect your data and products.',
+ keywords: [
+ 'security',
+ 'data protection',
+ 'cybersecurity',
+ 'blockchain security',
+ ],
+ openGraph: {
+ title: 'Security Practices - Etags',
+ description: 'Our commitment to security and data protection.',
+ },
+};
+
+export default function SecurityPage() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 1.1 Informasi Akun +
++ Ketika Anda mendaftar sebagai pengguna Etags, kami mengumpulkan + informasi seperti nama, email, nama perusahaan, dan kata sandi + terenkripsi. Informasi ini digunakan untuk membuat dan mengelola + akun Anda. +
+ ++ 1.2 Data Produk dan Tag +
++ Kami menyimpan informasi produk yang Anda upload, termasuk nama + produk, deskripsi, gambar, dan metadata lainnya. Data QR code + dan transaksi blockchain juga dicatat untuk verifikasi keaslian. +
+ ++ 1.3 Data Scan +
++ Ketika konsumen scan QR code produk, kami mengumpulkan data + seperti waktu scan, lokasi (jika diizinkan), fingerprint browser + untuk mendeteksi fraud, dan informasi device. +
+ ++ 1.4 Data Web3 +
++ Untuk fitur NFT collectible dan support ticket, kami + mengumpulkan wallet address, transaction hash, dan metadata NFT. + Kami tidak pernah meminta private key atau seed phrase. +
++ Informasi digunakan untuk menyediakan, memelihara, dan + meningkatkan layanan Etags, termasuk verifikasi produk, + dashboard analytics, dan NFT minting. +
++ Data scan dianalisis menggunakan AI untuk mendeteksi pola + mencurigakan dan melindungi brand dari pemalsuan. Kami + menggunakan Kolosal AI dengan enkripsi end-to-end. +
++ Kami menggunakan email Anda untuk mengirim notifikasi penting, + update produk, dan newsletter (dapat unsubscribe kapan saja). +
++ Semua data sensitif dienkripsi menggunakan AES-256 encryption. + Kata sandi di-hash dengan bcrypt dan tidak dapat dibaca dalam + bentuk plain text. +
++ Kami menggunakan HTTPS untuk semua komunikasi dan implementasi + rate limiting untuk mencegah abuse. Database kami di-backup + secara teratur dan disimpan secara terenkripsi. +
++ Akses ke data dibatasi dengan role-based access control (RBAC) + dan semua aktivitas dicatat untuk audit trail. +
++ Kami tidak menjual data pribadi Anda kepada pihak ketiga. Data + hanya dibagikan dalam kondisi berikut: +
+-
+
- Dengan persetujuan eksplisit Anda +
- Untuk mematuhi hukum dan regulasi yang berlaku +
- + Untuk melindungi hak dan keamanan Etags dan pengguna lainnya + +
- + Dengan service provider terpercaya (Cloudflare R2, Base + Sepolia blockchain) dengan perjanjian kerahasiaan + +
+ Anda memiliki hak untuk mengakses, memperbarui, atau menghapus + data pribadi Anda kapan saja melalui dashboard atau dengan + menghubungi kami. +
++ Anda dapat mengekspor semua data Anda dalam format JSON dan + meminta penghapusan akun beserta semua data terkait. +
++ Untuk pertanyaan atau request terkait privasi, hubungi: + privacy@etags.id +
++ Kami menggunakan cookies untuk menjaga sesi login dan mengingat + preferensi Anda. Anda dapat menonaktifkan cookies melalui + browser settings, namun beberapa fitur mungkin tidak berfungsi + optimal. +
++ Kami dapat memperbarui kebijakan privasi ini sewaktu-waktu. + Perubahan signifikan akan diberitahukan via email dan tercantum + tanggal pembaruan di bagian atas dokumen ini. +
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/showcase/page.tsx b/src/app/showcase/page.tsx
new file mode 100644
index 0000000..0836f6e
--- /dev/null
+++ b/src/app/showcase/page.tsx
@@ -0,0 +1,54 @@
+import { Metadata } from 'next';
+import { Navbar } from '@/components/landing/Navbar';
+import { Footer } from '@/components/landing/Footer';
+import {
+ ShowcaseHero,
+ AchievementStats,
+ ShowcaseGrid,
+ TestimonialsSection,
+ ShowcaseCTA,
+} from '@/components/showcase';
+
+export const metadata: Metadata = {
+ title: 'Success Stories - Etags',
+ description:
+ 'See how leading brands use Etags to protect their products from counterfeiting across various industries including fashion, luxury goods, pharmaceutical, and electronics.',
+ keywords: [
+ 'success stories',
+ 'case studies',
+ 'testimonials',
+ 'brand protection',
+ 'anti-counterfeiting',
+ ],
+ openGraph: {
+ title: 'Success Stories - Etags',
+ description:
+ '100+ brands trust Etags to protect their products from counterfeiting.',
+ },
+};
+
+export default function ShowcasePage() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 1.1 Data in Transit +
++ Semua komunikasi antara browser Anda dan server kami menggunakan + TLS 1.3 encryption. Ini memastikan bahwa data tidak dapat dibaca + oleh pihak ketiga selama transmisi. +
+ ++ 1.2 Data at Rest +
++ Data sensitif di database dienkripsi menggunakan AES-256 + encryption. Kata sandi di-hash menggunakan bcrypt dengan salt + unik per pengguna. +
+ ++ 1.3 API Keys dan Secrets +
++ API keys dan environment variables disimpan secara terenkripsi + dan tidak pernah di-hardcode dalam source code. Kami menggunakan + secure secret management system. +
++ 2.1 NextAuth v5 +
++ Platform menggunakan NextAuth v5 dengan credentials provider. + Session di-manage dengan secure HTTP-only cookies yang tidak + dapat diakses via JavaScript. +
+ ++ 2.2 Role-Based Access Control (RBAC) +
++ User roles (admin, brand) dengan permission yang jelas. Brand + users hanya dapat mengakses data brand mereka sendiri dengan + brand_id isolation. +
+ ++ 2.3 Web3 Authentication +
++ Untuk NFT features, user connect wallet via MetaMask. Kami tidak + pernah meminta atau menyimpan private keys. Semua transaksi + di-sign oleh user di browser mereka. +
++ 3.1 Rate Limiting +
++ API endpoints dilindungi dengan rate limiting (misalnya, contact + form: 3 requests per 15 menit). Ini mencegah abuse dan DoS + attacks. +
+ ++ 3.2 Input Validation +
++ Semua user input divalidasi di client-side dan server-side. Kami + sanitize input untuk mencegah XSS, SQL injection, dan command + injection attacks. +
+ ++ 3.3 CSRF Protection +
++ Form submissions dilindungi dengan CSRF tokens untuk mencegah + cross-site request forgery attacks. +
+ ++ 3.4 Content Security Policy (CSP) +
++ Kami implementasi CSP headers untuk mencegah XSS attacks dan + clickjacking. +
++ 4.1 Smart Contract Audits +
++ Smart contracts (ETagRegistry, ETagCollectible) telah diaudit + dan tested secara komprehensif. Source code tersedia untuk + review. +
+ ++ 4.2 Admin Wallet Security +
++ Admin wallet untuk NFT minting menggunakan hardware wallet dan + multi-signature setup untuk transaksi besar. +
+ ++ 4.3 Immutable Records +
++ Tag stamping di blockchain bersifat immutable. Setelah tag + dicreate, data tidak dapat diubah, memastikan integritas + verifikasi. +
+5.1 Logging
++ Semua aktivitas penting dicatat (login, API calls, blockchain + transactions) tanpa menyimpan informasi sensitif seperti kata + sandi atau private keys. +
+ ++ 5.2 Anomaly Detection +
++ AI fraud detection menganalisis pola scan untuk mendeteksi + aktivitas mencurigakan. Alert otomatis dikirim untuk aktivitas + anomaly. +
+ ++ 5.3 Regular Security Audits +
++ Kami melakukan security audits berkala dan penetration testing + untuk mengidentifikasi dan memperbaiki vulnerability. +
++ Database di-backup setiap hari dan disimpan secara terenkripsi + di multiple locations. Backup dapat di-restore dalam waktu 1 jam + untuk disaster recovery. +
++ Blockchain data bersifat permanen dan tersedia di Base Sepolia + network. +
++ Dalam kasus security incident, kami memiliki prosedur response + yang jelas: +
+-
+
- Identifikasi dan isolasi masalah dalam 1 jam +
- Notifikasi ke affected users dalam 24 jam +
- Root cause analysis dan remediation +
- Post-incident review dan improvement +
Etags compliant dengan:
+-
+
- GDPR untuk data protection +
- OWASP Top 10 security best practices +
- Blockchain security standards +
- Indonesia data protection regulations +
Kami merekomendasikan user untuk:
+-
+
- Menggunakan kata sandi yang kuat dan unik +
- Tidak membagikan credential kepada pihak lain +
- Logout setelah selesai menggunakan platform +
- + Verifikasi email notifications untuk aktivitas mencurigakan + +
- Menjaga keamanan wallet address dan private keys +
+ Jika Anda menemukan security vulnerability, harap laporkan ke: + security@etags.id. Kami berkomitmen untuk menangani laporan + dengan serius dan akan memberikan credit untuk responsible + disclosure. +
+
+ {/* Background Effects */}
+
+
+
+
+
+ );
+}
diff --git a/src/app/support/components/new-ticket-form.tsx b/src/app/support/components/new-ticket-form.tsx
index 8b12fb0..5d566d4 100644
--- a/src/app/support/components/new-ticket-form.tsx
+++ b/src/app/support/components/new-ticket-form.tsx
@@ -1,6 +1,7 @@
'use client';
import { useState } from 'react';
+import Image from 'next/image';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
@@ -121,10 +122,13 @@ export function NewTicketForm({
>
+
+
+
+
+
+
+
diff --git a/src/app/terms/page.tsx b/src/app/terms/page.tsx
new file mode 100644
index 0000000..0c27ec3
--- /dev/null
+++ b/src/app/terms/page.tsx
@@ -0,0 +1,194 @@
+import { Metadata } from 'next';
+import { Navbar } from '@/components/landing/Navbar';
+import { Footer } from '@/components/landing/Footer';
+import { LegalHero, LegalSection } from '@/components/legal';
+
+export const metadata: Metadata = {
+ title: 'Terms & Conditions - Etags',
+ description:
+ 'Terms and conditions for using Etags platform. Please read carefully before using our services.',
+ keywords: ['terms', 'conditions', 'terms of service', 'user agreement'],
+ openGraph: {
+ title: 'Terms & Conditions - Etags',
+ description: 'Terms and conditions for using Etags platform.',
+ },
+};
+
+export default function TermsPage() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/verify/[code]/components/nft-claim-card.tsx b/src/app/verify/[code]/components/nft-claim-card.tsx
index 60e0c72..dff794c 100644
--- a/src/app/verify/[code]/components/nft-claim-card.tsx
+++ b/src/app/verify/[code]/components/nft-claim-card.tsx
@@ -3,6 +3,7 @@
import { useState, useEffect, useCallback } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
+import Image from 'next/image';
import {
Sparkles,
Wallet,
@@ -186,11 +187,13 @@ export function NFTClaimCard({
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Dengan mengakses dan menggunakan platform Etags, Anda menyetujui + untuk terikat dengan syarat dan ketentuan ini. Jika Anda tidak + setuju, harap tidak menggunakan layanan kami. +
++ 2.1 Akun Pengguna +
++ Anda bertanggung jawab untuk menjaga kerahasiaan akun dan kata + sandi Anda. Anda setuju untuk tidak membagikan akses akun kepada + pihak lain dan segera memberitahu kami jika terjadi akses tidak + sah. +
+ ++ 2.2 Penggunaan yang Dilarang +
++ Anda setuju untuk tidak menggunakan platform untuk: +
+-
+
- Aktivitas ilegal atau melanggar hukum +
- + Mengunggah konten yang melanggar hak cipta atau hak kekayaan + intelektual + +
- + Melakukan spamming, phishing, atau aktivitas berbahaya lainnya + +
- + Mencoba mengakses sistem atau data pengguna lain secara tidak + sah + +
- Menggunakan bot atau automated tools tanpa izin +
+ 2.3 Konten Pengguna +
++ Anda mempertahankan semua hak atas konten yang Anda upload + (gambar produk, deskripsi, dll). Dengan mengunggah konten, Anda + memberikan Etags lisensi non-eksklusif untuk menggunakan konten + tersebut dalam rangka menyediakan layanan. +
++ Etags menggunakan blockchain Base Sepolia untuk verifikasi + produk dan NFT minting. Transaksi blockchain bersifat permanen + dan tidak dapat diubah setelah dikonfirmasi. +
++ NFT yang di-mint melalui Etags adalah milik Anda sepenuhnya. + Anda bertanggung jawab untuk menjaga keamanan wallet Anda. +
++ Etags tidak bertanggung jawab atas kehilangan akses ke wallet + atau NFT akibat kelalaian Anda dalam menjaga private key atau + seed phrase. +
++ Paket gratis (Starter) tersedia dengan limit 1.000 tag per + bulan. Paket berbayar (Professional, Enterprise) dikenakan biaya + sesuai pricing yang tercantum. +
++ Pembayaran diproses secara bulanan atau tahunan tergantung paket + yang dipilih. Refund dapat diajukan dalam 14 hari pertama untuk + paket berbayar. +
++ Kami berhak mengubah pricing dengan pemberitahuan 30 hari + sebelumnya. Perubahan tidak berlaku untuk langganan yang sudah + berjalan. +
++ Kami berusaha menjaga uptime 99.9%, namun tidak menjamin layanan + akan selalu tersedia tanpa gangguan. Maintenance terjadwal akan + diberitahukan sebelumnya. +
++ Kami berhak membatasi atau menangguhkan akses ke layanan jika + terjadi pelanggaran syarat dan ketentuan atau aktivitas + mencurigakan. +
++ Semua teknologi, software, dan brand assets Etags dilindungi + oleh hak cipta dan hak kekayaan intelektual. Anda tidak + diperkenankan untuk menyalin, memodifikasi, atau + mendistribusikan tanpa izin tertulis dari kami. +
++ Etags tidak bertanggung jawab atas kerugian langsung atau tidak + langsung yang timbul dari penggunaan layanan, termasuk namun + tidak terbatas pada: +
+-
+
- Kehilangan data atau kerusakan sistem +
- Kerugian bisnis atau kehilangan profit +
- Kerusakan reputasi +
- Kegagalan transaksi blockchain di luar kendali kami +
+ Tanggung jawab maksimal kami terbatas pada jumlah yang Anda + bayarkan dalam 12 bulan terakhir. +
++ Anda dapat menghentikan layanan kapan saja melalui dashboard. + Data Anda akan dihapus dalam 30 hari setelah penghentian. +
++ Kami berhak menghentikan layanan Anda tanpa pemberitahuan jika + terjadi pelanggaran berat terhadap syarat dan ketentuan. +
++ Syarat dan ketentuan ini diatur oleh hukum Republik Indonesia. + Setiap sengketa akan diselesaikan melalui pengadilan di Jakarta, + Indonesia. +
++ Untuk pertanyaan terkait syarat dan ketentuan, hubungi: + legal@etags.id +
+
{nft?.imageUrl && (
-
- ![]()
+
)}
@@ -222,11 +225,13 @@ export function NFTClaimCard({
{nftResult.imageUrl && (
-
+
+ );
+}
diff --git a/src/components/about/ValuesSection.tsx b/src/components/about/ValuesSection.tsx
new file mode 100644
index 0000000..8fece56
--- /dev/null
+++ b/src/components/about/ValuesSection.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Shield, Target, Users, Zap } from 'lucide-react';
+import { ABOUT_VALUES } from '@/constants';
+
+const MotionDiv = motion.div;
+
+// Map icons to the data
+const values = ABOUT_VALUES.map((value, index) => ({
+ ...value,
+ icon: [Shield, Target, Users, Zap][index],
+}));
+
+export function ValuesSection() {
+ return (
+
+
+ );
+}
diff --git a/src/components/careers/CareersHero.tsx b/src/components/careers/CareersHero.tsx
new file mode 100644
index 0000000..5860972
--- /dev/null
+++ b/src/components/careers/CareersHero.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+export function CareersHero() {
+ return (
+
+
+ );
+}
diff --git a/src/components/contact/ContactForm.tsx b/src/components/contact/ContactForm.tsx
new file mode 100644
index 0000000..e3aa5de
--- /dev/null
+++ b/src/components/contact/ContactForm.tsx
@@ -0,0 +1,308 @@
+'use client';
+
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Send } from 'lucide-react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import {
+ validateContactForm,
+ sanitizeContactForm,
+ type ContactFormData,
+ type ValidationError,
+} from '@/lib/validations/contact';
+
+export function ContactForm() {
+ const [formData, setFormData] = useState({
+ name: '',
+ email: '',
+ company: '',
+ subject: '',
+ message: '',
+ });
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [fieldErrors, setFieldErrors] = useState>({});
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+
+ // Reset field errors
+ setFieldErrors({});
+ setIsSubmitting(true);
+
+ try {
+ // Client-side validation
+ const sanitizedData = sanitizeContactForm(formData);
+ const validation = validateContactForm(sanitizedData);
+
+ if (!validation.isValid) {
+ // Convert validation errors to field-keyed object
+ const errors: Record = {};
+ validation.errors.forEach((err: ValidationError) => {
+ errors[err.field] = err.message;
+ });
+ setFieldErrors(errors);
+
+ toast.error('Validasi Gagal', {
+ description: 'Mohon periksa kembali form Anda',
+ });
+
+ setIsSubmitting(false);
+ return;
+ }
+
+ // Submit to API
+ const response = await fetch('/api/contact', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(sanitizedData),
+ });
+
+ const result = await response.json();
+
+ if (!response.ok) {
+ // Handle specific error codes
+ if (result.code === 'RATE_LIMIT_EXCEEDED') {
+ toast.error('Terlalu Banyak Permintaan', {
+ description:
+ result.error || 'Silakan coba lagi dalam beberapa menit',
+ });
+ } else if (result.code === 'VALIDATION_ERROR' && result.errors) {
+ // Server-side validation errors
+ const errors: Record = {};
+ result.errors.forEach((err: ValidationError) => {
+ errors[err.field] = err.message;
+ });
+ setFieldErrors(errors);
+
+ toast.error('Validasi Gagal', {
+ description: result.error || 'Data form tidak valid',
+ });
+ } else {
+ toast.error('Gagal Mengirim Pesan', {
+ description: result.error || 'Terjadi kesalahan server',
+ });
+ }
+
+ setIsSubmitting(false);
+ return;
+ }
+
+ // Success
+ toast.success('Pesan Terkirim!', {
+ description:
+ result.message ||
+ 'Terima kasih telah menghubungi kami. Kami akan segera merespons pesan Anda.',
+ });
+
+ // Reset form
+ setFormData({
+ name: '',
+ email: '',
+ company: '',
+ subject: '',
+ message: '',
+ });
+ } catch (error) {
+ // Network or unexpected errors
+ if (error instanceof TypeError && error.message.includes('fetch')) {
+ toast.error('Koneksi Bermasalah', {
+ description:
+ 'Tidak dapat terhubung ke server. Periksa koneksi internet Anda.',
+ });
+ } else {
+ toast.error('Terjadi Kesalahan', {
+ description:
+ 'Silakan coba lagi atau hubungi kami via email di hello@etags.id',
+ });
+ }
+
+ // Log error in development only
+ if (process.env.NODE_ENV === 'development') {
+ console.error(
+ 'Contact form error:',
+ error instanceof Error ? error.message : 'Unknown error'
+ );
+ }
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ // Clear field error when user starts typing
+ const handleFieldChange = (field: keyof ContactFormData, value: string) => {
+ setFormData({ ...formData, [field]: value });
+ if (fieldErrors[field]) {
+ setFieldErrors({ ...fieldErrors, [field]: '' });
+ }
+ };
+
+ return (
+
+
- ![]()
+
)}
diff --git a/src/components/about/AboutHero.tsx b/src/components/about/AboutHero.tsx
new file mode 100644
index 0000000..5c08c50
--- /dev/null
+++ b/src/components/about/AboutHero.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import { motion, useReducedMotion } from 'framer-motion';
+
+const MotionH1 = motion.h1;
+const MotionP = motion.p;
+
+export function AboutHero() {
+ const reduceMotion = useReducedMotion();
+ return (
+
+
+ Tentang Etags
+
+
+ Platform verifikasi produk berbasis blockchain yang mengamankan rantai
+ pasokan dan memberikan kepercayaan penuh kepada konsumen.
+
+
+ );
+}
diff --git a/src/components/about/MissionVision.tsx b/src/components/about/MissionVision.tsx
new file mode 100644
index 0000000..ddc4389
--- /dev/null
+++ b/src/components/about/MissionVision.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+const MotionDiv = motion.div;
+
+export function MissionVision() {
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/about/StatsSection.tsx b/src/components/about/StatsSection.tsx
new file mode 100644
index 0000000..19ef012
--- /dev/null
+++ b/src/components/about/StatsSection.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { ABOUT_STATS } from '@/constants';
+import type { StatItem } from '@/types/common';
+
+const MotionDiv = motion.div;
+
+export function StatsSection() {
+ const stats: StatItem[] = ABOUT_STATS;
+ return (
+ Misi Kami
++ Memberikan solusi autentikasi produk yang aman, transparan, dan mudah + digunakan untuk melindungi konsumen dari produk palsu dan meningkatkan + kepercayaan terhadap brand. +
+Visi Kami
++ Menjadi standar global untuk verifikasi keaslian produk dengan + teknologi blockchain, menciptakan ekosistem di mana setiap produk + dapat diverifikasi dengan mudah dan aman. +
+
+ {stats.map((stat, index) => (
+
+
+ ))}
+
+ );
+}
diff --git a/src/components/about/TeamSection.tsx b/src/components/about/TeamSection.tsx
new file mode 100644
index 0000000..f6cd9b3
--- /dev/null
+++ b/src/components/about/TeamSection.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Users } from 'lucide-react';
+import { ABOUT_TEAM } from '@/constants';
+import type { TeamMember } from '@/types/common';
+
+const MotionDiv = motion.div;
+
+export function TeamSection() {
+ const team: TeamMember[] = ABOUT_TEAM as unknown as TeamMember[];
+ return (
+
+ {stat.value}
+
+ {stat.label}
+
+
+ );
+}
diff --git a/src/components/about/TechnologyStack.tsx b/src/components/about/TechnologyStack.tsx
new file mode 100644
index 0000000..5832e64
--- /dev/null
+++ b/src/components/about/TechnologyStack.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { ABOUT_TECH_STACK } from '@/constants';
+import type { TechStackItem } from '@/types/common';
+
+const MotionDiv = motion.div;
+
+export function TechnologyStack() {
+ const techStack: TechStackItem[] =
+ ABOUT_TECH_STACK as unknown as TechStackItem[];
+ return (
+ Tim Kami
++ Tim Pemuja Deadline Anti Refund - Developer berpengalaman yang + berdedikasi membangun solusi blockchain terbaik untuk IMPHEN 2025. +
+
+ {team.map((member, index) => (
+
+
+ ))}
+
+
+
+ {member.name}
+{member.role}
+ + GitHub Profile + ++ Teknologi Kami +
++ Etags dibangun dengan teknologi terdepan untuk memberikan keamanan, + kecepatan, dan skalabilitas yang optimal. +
+
+ {techStack.map((tech) => (
+
+
+
+ ))}
+ {tech.title}
+{tech.description}
+
+
+ );
+}
diff --git a/src/components/about/index.ts b/src/components/about/index.ts
new file mode 100644
index 0000000..0da64bd
--- /dev/null
+++ b/src/components/about/index.ts
@@ -0,0 +1,6 @@
+export { AboutHero } from './AboutHero';
+export { MissionVision } from './MissionVision';
+export { ValuesSection } from './ValuesSection';
+export { TechnologyStack } from './TechnologyStack';
+export { TeamSection } from './TeamSection';
+export { StatsSection } from './StatsSection';
diff --git a/src/components/blog/BlogError.tsx b/src/components/blog/BlogError.tsx
new file mode 100644
index 0000000..c0925bb
--- /dev/null
+++ b/src/components/blog/BlogError.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import React from 'react';
+
+interface BlogErrorProps {
+ message: string;
+}
+
+export function BlogError({ message }: BlogErrorProps) {
+ return (
+ + Nilai-Nilai Kami +
+
+ {values.map((value, index) => (
+
+
+ ))}
+
+ + {value.title} +
++ {value.description} +
+
+
+ );
+}
diff --git a/src/components/blog/BlogGrid.tsx b/src/components/blog/BlogGrid.tsx
new file mode 100644
index 0000000..cb640a5
--- /dev/null
+++ b/src/components/blog/BlogGrid.tsx
@@ -0,0 +1,106 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+import { Calendar, ArrowRight } from 'lucide-react';
+
+const MotionDiv = motion.div;
+
+interface BlogPost {
+ title: string;
+ excerpt: string;
+ url: string;
+ feature_image: string;
+ published_at: string;
+}
+
+interface BlogGridProps {
+ posts: BlogPost[];
+}
+
+export function BlogGrid({ posts }: BlogGridProps) {
+ if (!posts || posts.length === 0) {
+ return (
+ {message}
+ +
+
+ );
+ }
+
+ const formatDate = (dateString: string) => {
+ const date = new Date(dateString);
+ return date.toLocaleDateString('id-ID', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ });
+ };
+
+ return (
+ + Belum ada artikel yang tersedia saat ini. Kembali lagi nanti untuk + konten terbaru! +
+
+ {posts.map((post, index) => (
+
+ {/* Featured Image */}
+
+ ))}
+
+ );
+}
diff --git a/src/components/blog/BlogPagination.tsx b/src/components/blog/BlogPagination.tsx
new file mode 100644
index 0000000..7fe6d42
--- /dev/null
+++ b/src/components/blog/BlogPagination.tsx
@@ -0,0 +1,133 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface BlogPaginationProps {
+ currentPage: number;
+ totalPages: number;
+ hasNext: boolean;
+ hasPrev: boolean;
+}
+
+export function BlogPagination({
+ currentPage,
+ totalPages,
+ hasNext,
+ hasPrev,
+}: BlogPaginationProps) {
+ const router = useRouter();
+
+ const navigateToPage = async (page: number) => {
+ const url = page === 1 ? '/blog' : `/blog?page=${page}`;
+ await router.push(url);
+ router.refresh();
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+ };
+
+ // Generate page numbers to display
+ const getPageNumbers = () => {
+ const pages: (number | string)[] = [];
+ const maxVisible = 7; // Maximum number of page buttons to show
+
+ if (totalPages <= maxVisible) {
+ // Show all pages if total is small
+ for (let i = 1; i <= totalPages; i++) {
+ pages.push(i);
+ }
+ } else {
+ // Always show first page
+ pages.push(1);
+
+ if (currentPage <= 3) {
+ // Near the start
+ for (let i = 2; i <= 4; i++) {
+ pages.push(i);
+ }
+ pages.push('...');
+ pages.push(totalPages);
+ } else if (currentPage >= totalPages - 2) {
+ // Near the end
+ pages.push('...');
+ for (let i = totalPages - 3; i <= totalPages; i++) {
+ pages.push(i);
+ }
+ } else {
+ // In the middle
+ pages.push('...');
+ pages.push(currentPage - 1);
+ pages.push(currentPage);
+ pages.push(currentPage + 1);
+ pages.push('...');
+ pages.push(totalPages);
+ }
+ }
+
+ return pages;
+ };
+
+ const pageNumbers = getPageNumbers();
+
+ return (
+
+ {post.feature_image ? (
+
+
+ {/* Content */}
+
+
+ )}
+
+
+
+ E
+
+ Etags Blog
+
+ {/* Date */}
+
+
+
+
+ {/* Title */}
+ + {post.title} +
+ + {/* Excerpt */} ++ {post.excerpt} +
+ + {/* Read More Link */} + + Baca Selengkapnya +
+ {/* Previous Button */}
+
+
+ {/* Page Numbers */}
+
+ );
+}
diff --git a/src/components/blog/README.md b/src/components/blog/README.md
new file mode 100644
index 0000000..86c2ed7
--- /dev/null
+++ b/src/components/blog/README.md
@@ -0,0 +1,174 @@
+# Blog Component
+
+This directory contains components for the blog feature that integrates with Ghost CMS.
+
+## Components
+
+### BlogGrid
+
+Displays a grid of blog posts fetched from Ghost CMS API.
+
+**Props:**
+
+- `posts: BlogPost[]` - Array of blog posts from Ghost API
+
+**BlogPost Interface:**
+
+```typescript
+interface BlogPost {
+ title: string;
+ excerpt: string;
+ url: string;
+ feature_image: string;
+ published_at: string;
+}
+```
+
+### BlogPagination
+
+Pagination controls for navigating through blog posts.
+
+**Props:**
+
+- `currentPage: number` - Current active page
+- `totalPages: number` - Total number of pages
+- `hasNext: boolean` - Whether there's a next page
+- `hasPrev: boolean` - Whether there's a previous page
+
+**Features:**
+
+- Smart page number display with ellipsis
+- Previous/Next navigation buttons
+- Active page highlighting
+- URL-based navigation with search params
+- Smooth scroll to top on page change
+
+## Setup
+
+1. **Get Ghost Content API Key:**
+ - Go to your Ghost admin panel
+ - Navigate to Settings → Integrations
+ - Create a new Custom Integration or use existing one
+ - Copy the Content API Key
+
+2. **Set Environment Variable:**
+ Add to your `.env` or `.env.local`:
+
+ ```
+ NEXT_PUBLIC_TOKEN=your_ghost_content_api_key_here
+ ```
+
+3. **Configure API Endpoint:**
+ The blog page fetches from: `https://blog.javapixa.com/ghost/api/content/posts/`
+
+ If you want to use a different Ghost blog, update the URL in `src/app/blog/page.tsx`:
+
+ ```typescript
+ const result = await axios.get(
+ `https://your-blog-domain.com/ghost/api/content/posts/?key=${token}&limit=6&fields=title,excerpt,url,feature_image,published_at`
+ );
+ ```
+
+## Features
+
+- ✅ Server-side rendering for better SEO
+- ✅ Loading skeleton during data fetch
+- ✅ Error handling with user-friendly messages
+- ✅ Responsive grid layout (1/2/3 columns)
+- ✅ Featured image support with fallback
+- ✅ Date formatting in Indonesian locale
+- ✅ Hover animations and transitions
+- ✅ External link handling (opens in new tab)
+- ✅ Line clamping for title and excerpt
+- ✅ Pagination with Ghost CMS API
+- ✅ URL-based page navigation
+- ✅ Smart pagination controls with ellipsis
+
+## Customization
+
+### Change Number of Posts Per Page
+
+Edit the `POSTS_PER_PAGE` constant in `src/app/blog/page.tsx`:
+
+```typescript
+const POSTS_PER_PAGE = 9; // Change to your desired number
+```
+
+This will affect:
+
+- Number of posts shown per page
+- Pagination page count calculation
+- API request limit parameter
+
+### Add More Fields
+
+Add fields to the `fields` parameter:
+
+```typescript
+`...&fields=title,excerpt,url,feature_image,published_at,tags,authors`;
+```
+
+### Styling
+
+All components use the project's design system colors:
+
+- Primary: `#2B4C7E`
+- Dark: `#0C2340`
+- Medium: `#1E3A5F`
+- Gray: `#A8A8A8`
+- Text: `#606060`
+
+## API Reference
+
+Ghost Content API documentation: https://ghost.org/docs/content-api/
+
+**Endpoint:** `GET /ghost/api/content/posts/`
+
+**Query Parameters:**
+
+- `key` (required): Content API Key
+- `limit`: Number of posts to return per page (default: 15)
+- `page`: Page number for pagination (default: 1)
+- `fields`: Comma-separated list of fields to include
+- `filter`: Filter posts (e.g., `tag:blockchain`)
+- `order`: Sort order (e.g., `published_at DESC`)
+- `include`: Include related data (e.g., `tags,authors`)
+
+**Response Format:**
+
+```json
+{
+ "posts": [...],
+ "meta": {
+ "pagination": {
+ "page": 1,
+ "limit": 9,
+ "pages": 10,
+ "total": 87,
+ "next": 2,
+ "prev": null
+ }
+ }
+}
+```
+
+## Troubleshooting
+
+### "Gagal memuat artikel blog"
+
+- Check if `NEXT_PUBLIC_TOKEN` is set in environment variables
+- Verify the Ghost API endpoint is accessible
+- Check if the Content API Key is valid
+- Ensure CORS is configured on Ghost admin
+
+### No posts showing
+
+- Verify posts are published in Ghost (not drafts)
+- Check the API response in browser network tab
+- Try increasing the `limit` parameter
+
+### Images not loading
+
+- Verify `feature_image` URLs are accessible
+- Check if Ghost CDN/storage is configured correctly
+- The fallback UI will show if image URL is invalid
diff --git a/src/components/blog/index.ts b/src/components/blog/index.ts
new file mode 100644
index 0000000..eb147cd
--- /dev/null
+++ b/src/components/blog/index.ts
@@ -0,0 +1,2 @@
+export { BlogGrid } from './BlogGrid';
+export { BlogPagination } from './BlogPagination';
diff --git a/src/components/careers/BenefitsGrid.tsx b/src/components/careers/BenefitsGrid.tsx
new file mode 100644
index 0000000..9143f11
--- /dev/null
+++ b/src/components/careers/BenefitsGrid.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { CAREER_BENEFITS } from '@/constants';
+import type { BenefitItem } from '@/types/common';
+
+export function BenefitsGrid() {
+ const benefits: BenefitItem[] = CAREER_BENEFITS as unknown as BenefitItem[];
+ return (
+
+ {pageNumbers.map((page, index) => {
+ if (page === '...') {
+ return (
+
+ ...
+
+ );
+ }
+
+ const pageNum = page as number;
+ const isActive = pageNum === currentPage;
+
+ return (
+
+ );
+ })}
+
+
+ {/* Next Button */}
+
+
+
+ );
+}
diff --git a/src/components/careers/CareersCTA.tsx b/src/components/careers/CareersCTA.tsx
new file mode 100644
index 0000000..06cba63
--- /dev/null
+++ b/src/components/careers/CareersCTA.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Mail } from 'lucide-react';
+
+export function CareersCTA() {
+ return (
+ + Benefit & Perks +
+
+ {benefits.map((benefit, index) => {
+ const Icon = benefit.icon;
+ return (
+
+
+ );
+ })}
+
+
+
+ + {benefit.title} +
++ {benefit.description} +
++ Tidak Menemukan Posisi yang Cocok? +
++ Kirim resume dan portfolio Anda ke kami. Kami selalu mencari talenta + yang passionate untuk bergabung dengan tim. +
+ +
+
+ Bangun Karir Bersama Kami
+
+
+ Bergabunglah dengan tim yang passionate dalam membangun solusi
+ blockchain untuk masa depan. Remote-first, work-life balance, dan
+ teknologi terdepan.
+
+
+ );
+}
diff --git a/src/components/careers/PositionsList.tsx b/src/components/careers/PositionsList.tsx
new file mode 100644
index 0000000..f35b7f7
--- /dev/null
+++ b/src/components/careers/PositionsList.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Briefcase, MapPin, Clock } from 'lucide-react';
+import { JOB_POSITIONS } from '@/constants';
+import type { JobPosition } from '@/types/common';
+
+export function PositionsList() {
+ const positions: JobPosition[] = JOB_POSITIONS as unknown as JobPosition[];
+ return (
+
+
+ );
+}
diff --git a/src/components/careers/ValuesCards.tsx b/src/components/careers/ValuesCards.tsx
new file mode 100644
index 0000000..142fa50
--- /dev/null
+++ b/src/components/careers/ValuesCards.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { CAREER_VALUES } from '@/constants';
+
+export function ValuesCards() {
+ return (
+ + Posisi Terbuka +
+
+ {positions.map((position, index) => (
+
+
+ ))}
+
+
+
+
+
+
+
+ Apply Now
+
+ + {position.title} +
+
+
+
+ + {position.description} +
+ +
+
+ + Requirements: +
+-
+ {position.requirements.map((req, i) => (
+
- + • + {req} + + ))} +
+
+ );
+}
diff --git a/src/components/careers/index.ts b/src/components/careers/index.ts
new file mode 100644
index 0000000..a84f185
--- /dev/null
+++ b/src/components/careers/index.ts
@@ -0,0 +1,5 @@
+export { CareersHero } from './CareersHero';
+export { ValuesCards } from './ValuesCards';
+export { BenefitsGrid } from './BenefitsGrid';
+export { PositionsList } from './PositionsList';
+export { CareersCTA } from './CareersCTA';
diff --git a/src/components/contact/ContactCTA.tsx b/src/components/contact/ContactCTA.tsx
new file mode 100644
index 0000000..3f92e53
--- /dev/null
+++ b/src/components/contact/ContactCTA.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { ArrowRight, BookOpen } from 'lucide-react';
+
+export function ContactCTA() {
+ return (
+ + Nilai-Nilai Kami +
+
+ {CAREER_VALUES.map((value, index) => {
+ const Icon = value.icon;
+ return (
+
+
+ );
+ })}
+
+
+
+ + {value.title} +
++ {value.description} +
++ Ingin Tahu Lebih Banyak? +
++ Jelajahi dokumentasi lengkap kami atau lihat FAQ untuk pertanyaan yang + sering diajukan. +
+
+
+ Lihat FAQ
+
+