143 lines
4.6 KiB
Markdown
143 lines
4.6 KiB
Markdown
# 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
|
|
```bash
|
|
# Copy dari template ke folder ini
|
|
cp template/css/main.css public/assets/landing/assets/css/
|
|
```
|
|
|
|
#### JavaScript Files
|
|
```bash
|
|
# Copy dari template ke folder ini
|
|
cp template/js/main.js public/assets/landing/assets/js/
|
|
```
|
|
|
|
#### Vendor Libraries
|
|
```bash
|
|
# Copy vendor libraries
|
|
cp -r template/vendor/* public/assets/landing/assets/vendor/
|
|
```
|
|
|
|
#### Images
|
|
```bash
|
|
# 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
|
|
```bash
|
|
# 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
|
|
```bash
|
|
# 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
|
|
```bash
|
|
# 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
|
|
```bash
|
|
# 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
|
|
```bash
|
|
# 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
|
|
```bash
|
|
# 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
|