4.6 KiB
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:
- Template URL: https://bootstrapmade.com/ilanding-bootstrap-landing-page-template/
- License: https://bootstrapmade.com/license/
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
- Bootstrap 5.3.3: https://getbootstrap.com/
- Bootstrap Icons: https://icons.getbootstrap.com/
- AOS (Animate On Scroll): https://michalsnik.github.io/aos/
- GLightbox: https://biati-digital.github.io/glightbox/
- Swiper: https://swiperjs.com/
- PureCounter: https://github.com/srexi/purecounterjs
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:
- Mengunduh template lengkap
- Copy folder
img/dari template kepublic/assets/landing/assets/img/ - 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.phpsudah 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