sidakpelem/public/landing/README.md

4.6 KiB

Landing Page Assets Setup

Overview

Folder ini berisi assets untuk landing page SODAKDesa yang menggunakan template iLanding Bootstrap.

Struktur Folder

public/assets/landing/assets/
├── css/
│   └── main.css                   # CSS utama (placeholder)
├── js/
│   └── main.js                    # JavaScript utama (placeholder)
├── vendor/                        # Vendor libraries (perlu di-download)
│   ├── bootstrap/
│   ├── aos/
│   ├── glightbox/
│   ├── swiper/
│   └── purecounter/
└── img/                           # Images (perlu di-copy dari template)
    ├── clients/
    ├── testimonials/
    └── various images...

Setup Instructions

1. Download Template Assets

Anda perlu mengunduh template iLanding Bootstrap dari:

2. Copy Assets

Setelah mengunduh template, copy file-file berikut:

CSS Files

# Copy dari template ke folder ini
cp template/css/main.css public/assets/landing/assets/css/

JavaScript Files

# Copy dari template ke folder ini
cp template/js/main.js public/assets/landing/assets/js/

Vendor Libraries

# Copy vendor libraries
cp -r template/vendor/* public/assets/landing/assets/vendor/

Images

# Copy images
cp -r template/img/* public/assets/landing/assets/img/

3. Vendor Libraries yang Diperlukan

4. Alternative: Download Manual

Jika tidak ingin mengunduh template lengkap, Anda bisa mengunduh library secara manual:

Bootstrap

# Download Bootstrap CSS dan JS
wget https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css -O public/assets/landing/assets/vendor/bootstrap/css/bootstrap.min.css
wget https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js -O public/assets/landing/assets/vendor/bootstrap/js/bootstrap.bundle.min.js

Bootstrap Icons

# Download Bootstrap Icons CSS
wget https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css -O public/assets/landing/assets/vendor/bootstrap-icons/bootstrap-icons.css

AOS

# Download AOS CSS dan JS
wget https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css -O public/assets/landing/assets/vendor/aos/aos.css
wget https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js -O public/assets/landing/assets/vendor/aos/aos.js

GLightbox

# Download GLightbox CSS dan JS
wget https://cdn.jsdelivr.net/npm/glightbox@3.2.0/dist/css/glightbox.min.css -O public/assets/landing/assets/vendor/glightbox/css/glightbox.min.css
wget https://cdn.jsdelivr.net/npm/glightbox@3.2.0/dist/js/glightbox.min.js -O public/assets/landing/assets/vendor/glightbox/js/glightbox.min.js

Swiper

# Download Swiper CSS dan JS
wget https://cdn.jsdelivr.net/npm/swiper@10.3.1/swiper-bundle.min.css -O public/assets/landing/assets/vendor/swiper/swiper-bundle.min.css
wget https://cdn.jsdelivr.net/npm/swiper@10.3.1/swiper-bundle.min.js -O public/assets/landing/assets/vendor/swiper/swiper-bundle.min.js

PureCounter

# Download PureCounter JS
wget https://cdn.jsdelivr.net/npm/purecounter@1.0.0/dist/purecounter_vanilla.js -O public/assets/landing/assets/vendor/purecounter/purecounter_vanilla.js

5. Images

Untuk images, Anda perlu:

  1. Mengunduh template lengkap
  2. Copy folder img/ dari template ke public/assets/landing/assets/img/
  3. Atau menggunakan placeholder images dari CDN

6. Testing

Setelah setup selesai, test landing page di:

http://localhost:8000/

Troubleshooting

CSS/JS tidak load

  • Pastikan path di layouts/app.blade.php sudah benar
  • Pastikan file assets sudah ada di folder yang tepat
  • Check browser console untuk error

Images tidak muncul

  • Pastikan folder img/ sudah di-copy
  • Check path images di components
  • Gunakan placeholder images sementara

Vendor libraries error

  • Pastikan semua vendor libraries sudah di-download
  • Check versi compatibility
  • Gunakan CDN sebagai alternatif

Notes

  • File CSS dan JS saat ini adalah placeholder
  • Anda perlu mengganti dengan file asli dari template
  • Pastikan license template sudah sesuai dengan kebutuhan