Website company profile modern untuk PT. Inovasi Digital Nusantara, perusahaan konsultan teknologi terdepan di Indonesia.

• Frontend Framework: Vue 3 + TypeScript
• Build Tool: Vite
• State Management: Pinia
• Routing: Vue Router 4
• Styling: CSS3 (Custom styling)
• Backend: Supabase (PostgreSQL + Auth)
• Icons: Heroicons
• Deployment: Vercel/Netlify Ready

• ✅ Home Page - Hero section dengan CTA dan logo partner
• ✅ Tentang Kami - Visi, misi, dan profil perusahaan
• ✅ Produk & Layanan - Katalog layanan (data dari Supabase)
• ✅ FAQ - Frequently Asked Questions (data dari Supabase)
• ✅ Kontak - Form kontak dan informasi perusahaan
• ✅ Responsive Design - Optimized untuk desktop dan mobile

• ✅ Login Admin - Authentication dengan Supabase Auth
• ✅ Dashboard - Overview statistik dan aktivitas
• ✅ CRUD Produk/Layanan - Manajemen katalog layanan
• ✅ CRUD FAQ - Manajemen pertanyaan dan jawaban
• ✅ CRUD Testimoni - Manajemen testimoni klien

• Node.js 18+
• npm atau yarn
• Akun Supabase (untuk backend)

git clone <repository-url>
cd pt-inovasi-digital

npm install

Buat file .env berdasarkan .env.example:

cp .env.example .env

Edit file .env dan isi dengan kredensial Supabase Anda:

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

1. Login ke Supabase Dashboard
2. Buat project baru atau gunakan yang sudah ada
3. Jalankan SQL script dari file database-schema.sql di SQL Editor
4. Enable Row Level Security (RLS) untuk semua tabel
5. Setup authentication policies sesuai kebutuhan

npm run dev

Website akan berjalan di http://localhost:5173

pt-inovasi-digital/
├── public/                 # Static assets
├── src/
│   ├── assets/            # Images, logos, icons
│   │   └── images/        # Generated logos dan gambar
│   ├── components/        # Vue components
│   │   ├── Navbar.vue     # Navigation component
│   │   ├── Footer.vue     # Footer component
│   │   └── Layout.vue     # Main layout wrapper
│   ├── pages/             # Page components
│   │   ├── Home.vue       # Homepage
│   │   ├── About.vue      # Tentang Kami
│   │   ├── Services.vue   # Produk & Layanan
│   │   ├── FAQ.vue        # FAQ page
│   │   ├── Contact.vue    # Kontak page
│   │   ├── NotFound.vue   # 404 page
│   │   └── admin/         # Admin pages
│   │       ├── Login.vue      # Admin login
│   │       ├── Dashboard.vue  # Admin dashboard
│   │       ├── Products.vue   # CRUD Produk
│   │       ├── FAQ.vue        # CRUD FAQ
│   │       └── Testimonials.vue # CRUD Testimoni
│   ├── router/            # Vue Router configuration
│   │   └── index.ts       # Routes definition
│   ├── store/             # Pinia stores
│   │   └── index.ts       # State management
│   ├── utils/             # Utility functions
│   │   └── supabaseClient.ts # Supabase configuration
│   ├── data/              # Static data
│   │   └── company-content.ts # Company information
│   ├── App.vue            # Root component
│   ├── main.ts            # App entry point
│   └── style.css          # Global styles
├── database-schema.sql    # Database schema
├── .env.example          # Environment variables template
├── package.json          # Dependencies
├── vite.config.ts        # Vite configuration
└── README.md             # Documentation

• produk - Katalog produk dan layanan
• faq - Frequently Asked Questions
• testimoni - Testimoni klien
• users - User authentication (Supabase Auth)

Detail schema tersedia di file database-schema.sql.

• Primary: Blue (#2563eb)
• Secondary: Gray (#475569)
• Accent: Orange (#f59e0b)
• Background: White (#ffffff)
• Text: Dark Gray (#1f2937)

• Font Family: Inter, system-ui, sans-serif
• Headings: Bold, various sizes
• Body: Regular, 16px base

• Buttons: Primary, Secondary, Outline variants
• Cards: Shadow, rounded corners
• Forms: Consistent input styling
• Navigation: Responsive navbar with mobile menu

1. Push code ke GitHub repository
2. Connect repository di Vercel dashboard
3. Set environment variables di Vercel:
   • VITE_SUPABASE_URL
   • VITE_SUPABASE_ANON_KEY
4. Deploy automatically

1. Build project: npm run build
2. Upload dist folder ke Netlify
3. Set environment variables di Netlify dashboard
4. Configure redirects untuk SPA routing

# Build for production
npm run build

# Preview build locally
npm run preview

# Deploy dist folder to your hosting provider

File vite.config.ts sudah dikonfigurasi dengan:

• Path aliases (@ untuk src/)
• Vue plugin
• TypeScript support

• Hash mode untuk compatibility
• Route guards untuk admin pages
• Lazy loading untuk optimal performance

Pinia stores untuk:

• Authentication state
• Products management
• FAQ management
• Testimonials management

• Supabase Auth untuk admin login
• Route guards untuk protected pages
• Session management

• Environment variables untuk sensitive data
• Row Level Security di Supabase
• Input validation dan sanitization

Untuk pertanyaan teknis atau support:

• Email: [email protected]
• Phone: +62 21 1234 5678
• Address: Jl. Sudirman No. 123, Jakarta Pusat

© 2024 Potydev. All rights reserved.

Developed with ❤️ by PT. Inovasi Digital Nusantara Development Team