ilham
/
sigd
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update images and enhance UI with fade-in effects and accordion functionality 

- Replaced background images (bg1.png, bg2.png, bg3.png, bg4.png) with updated versions.
- Added fade-in class to sections for smoother transitions.
- Improved layout and styling in index.blade.php, including adjustments to headings and content structure.
- Implemented accordion functionality for FAQs with smooth transitions in front.blade.php.
- Added custom CSS for button hover effects and information card animations.
john
Falih Ananta 2025-12-03 14:43:15 +07:00
parent b8953c6142
commit 39a29a6525
8 changed files with 3366 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
.gitignore vendored 100644
View File

@ -0,0 +1,68 @@
# Ignore vendor directory
/vendor/
# Ignore node_modules
/node_modules/
# Ignore build and dist directories
/public/build/
/public/storage/
/storage/*.key
# Ignore environment files
.env
.env.backup
.env.production
# Ignore IDE files
.vscode/
.idea/
*.swp
*.swo
# Ignore logs
/storage/logs/*.log
/storage/framework/cache/data/
/storage/framework/sessions/
/storage/framework/views/
# Ignore database files (if using SQLite)
*.sqlite
*.sqlite3
database/database.sqlite
# Ignore PHP Storm
/.idea
/.vscode
# Ignore Mac system files
.DS_Store
# Ignore npm debug logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Ignore Composer cache
/.composer/
# Ignore PHP CS Fixer cache
.php_cs.cache
.php-cs-fixer.cache
# Ignore testing database
testing.sqlite
# Ignore hot reload file
/public/hot
# Ignore mix manifest
/public/mix-manifest.json
# Ignore coverage reports
/coverage/
/.nyc_output/
# Ignore temporary files
*.tmp
*.temp

2981
package-lock.json generated 100644
View File

File diff suppressed because it is too large Load Diff

BIN
public/assets/images/bg1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 173 KiB

After

Width:  |  Height:  |  Size: 5.5 MiB

BIN
public/assets/images/bg2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 185 KiB

After

Width:  |  Height:  |  Size: 9.4 MiB

BIN
public/assets/images/bg3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 225 KiB

After

Width:  |  Height:  |  Size: 8.5 MiB

BIN
public/assets/images/bg4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 311 KiB

After

Width:  |  Height:  |  Size: 12 MiB

182
resources/views/index.blade.php
View File

@ -1,7 +1,7 @@
@extends('layouts.front')
@section('content')
<section class="relative continer py-[90px]">
<section class="relative continer py-[90px] fade-in">
<div class="flex flex-col items-center text-center mx-auto py-100 gap-1 w-[80%] md:w-[80%] lg:w-[60%]">
<h1 class="mb-0 font-semibold text-[42px] md:text-[52px] lg:text-[72px]">Sistem Informasi</h1>
<h1 class="mb-0 font-semibold text-[42px] md:text-[52px] lg:text-[72px]">Gas Rumah Kaca Daerah</h1>
@ -12,27 +12,39 @@
</div>
</div>
</section>
<section class="relative container mx-auto p-10">
<section class="relative container mx-auto p-10 fade-in">
<div class="flex flex-col md:flex-row gap-4 justify-between items-center">
<div class="md:w-[50%]"><h1 class="text-[32px] md:text-[42px] font-semibold">Informasi Gas Rumah Kaca Daerah</h1></div>
<div class="md:w-[50%]"><p class="text-[16px] text-[#878C91]">Perhitungan emisi GRK mengikuti standar IPCC terbaru dan divalidasi oleh lembaga lingkungan terkait, serta didukung kerja sama dengan Kementerian LHK untuk memastikan akuntabilitas data.</p></div>
<div class="md:w-[50%]">
<h1 class="text-[22px] md:text-5xl">Informasi Gas Rumah Kaca Daerah</h1>
</div>
<div class="md:w-[50%]">
<p class="text-[16px] text-[#878C91]">Perhitungan emisi GRK mengikuti standar IPCC terbaru dan divalidasi oleh lembaga lingkungan terkait, serta didukung kerja sama dengan Kementerian LHK untuk memastikan akuntabilitas data.</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mt-[50px]">
<div class="bg-[url({{ asset('assets/images/bg1.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px] bg-blend-overlay">
<h4 class="text-[20px]">Energi</h4>
<p class="font-thin text-sm">We're a UK-based Laravel agency. We'll get your project moving so you can focus on what matters most. You'll have peac.</p>
<div class="info-card bg-[url({{ asset('assets/images/bg1.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px]">
<div class="content">
<h4 class="text-[20px]">Energi</h4>
<p class="font-thin text-sm">We're a UK-based Laravel agency. We'll get your project moving so you can focus on what matters most. You'll have peac.</p>
</div>
</div>
<div class="bg-[url({{ asset('assets/images/bg2.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px] bg-blend-overlay">
<h4 class="text-[20px]">Industrial Processes and Product Use</h4>
<p class="font-thin text-sm">As the largest on-shore Laravel development company in the United States, Active Logic is headquartered in.</p>
<div class="info-card bg-[url({{ asset('assets/images/bg2.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px]">
<div class="content">
<h4 class="text-[20px]">Industrial Processes and Product Use</h4>
<p class="font-thin text-sm">As the largest on-shore Laravel development company in the United States, Active Logic is headquartered in.</p>
</div>
</div>
<div class="bg-[url({{ asset('assets/images/bg3.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px] bg-blend-overlay">
<h4 class="text-[20px]">Pertanian & Lahan</h4>
<p class="font-thin text-sm">We’re the Laravel agency you couldn’t afford locally. But we’re based in Georgia, the country. So, you can.</p>
<div class="info-card bg-[url({{ asset('assets/images/bg3.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px]">
<div class="content">
<h4 class="text-[20px]">Pertanian & Lahan</h4>
<p class="font-thin text-sm">We're the Laravel agency you couldn't afford locally. But we're based in Georgia, the country. So, you can.</p>
</div>
</div>
<div class="bg-[url({{ asset('assets/images/bg4.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px] bg-blend-overlay">
<h4 class="text-[20px]">Limbah</h4>
<p class="font-thin text-sm">We're the experts in all things Laravel. If you need an app built or rescued, or you need your team built or leveled up, we'v</p>
<div class="info-card bg-[url({{ asset('assets/images/bg4.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px]">
<div class="content">
<h4 class="text-[20px]">Limbah</h4>
<p class="font-thin text-sm">We're the experts in all things Laravel. If you need an app built or rescued, or you need your team built or leveled up, we'v</p>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row gap-4 justify-center items-center mt-[45px]">
@ -40,10 +52,12 @@
</div>
</section>
<section class="relative mx-auto container p-5">
<section class="relative mx-auto container p-5 fade-in">
<div class="bg-[#2084FF] rounded-[10px] pt-20">
<div class="flex flex-row gap-4 justify-center text-center items-center text-white">
<div class="md:w-[70%]"><h1 class="text-[32px] md:text-[42px] font-semibold">Semua yang Anda Butuhkan, Lengkap dan Terverifikasi.</h1></div>
<div class="md:w-[70%]">
<h1 class="text-[32px] md:text-[42px] font-semibold">Semua yang Anda Butuhkan, Lengkap dan Terverifikasi.</h1>
</div>
</div>
<div class="flex flex-col lg:flex-row justify-center items-center gap-4 mt-[35px] px-20 lg:w-[90%] mx-auto text-center">
<div class="rounded-full w-full border px-6 py-3 text-white"><a href="">Investasi Sektor</a></div>
@ -57,10 +71,12 @@
</div>
</section>
<section class="relative mx-auto container p-5">
<section class="relative mx-auto container p-5 fade-in">
<div class="py-20">
<div class="flex flex-row gap-4 justify-center text-center items-center">
<div class=""><h1 class="text-[22px] md:text-[32px] font-semibold">Kami menjamin pengujian komprehensif didukung metodologi standar <br> ISO/IEC 17025 dan tim analis tersertifikasi</h1></div>
<div class="">
<h1 class="text-[22px] md:text-5xl">Kami menjamin pengujian komprehensif didukung metodologi standar <br> ISO/IEC 17025 dan tim analis tersertifikasi</h1>
</div>
</div>
<div class="flex md:flex-row flex-col md:justify-between items-center gap-[35px] lg:gap-4 mt-[55px] px-20">
<div class="flex justify-center items-center gap-3">
@ -79,7 +95,7 @@
</div>
</section>
<section class="relative mx-auto container p-5">
<section class="relative mx-auto container p-5 fade-in">
<div class="py-20">
<div class="flex flex-col lg:flex-row gap-4">
<div class="flex flex-col gap-5 lg:w-[40%]">
@ -93,50 +109,86 @@
</div>
</div>
<div class="flex flex-col gap-3 lg:w-[60%]">
<div class="flex flex-col gap-3 p-3">
<div class=" flex justify-between items-center">
<div class="w-2/1"><h1 class="font-reguler text-2xl">Apa itu SIGD dan apa tujuannya ?</h1></div>
<div class="w-1/4 text-right"><i class="bx bx-minus"></i></div>
<div id="accordion-card" data-accordion="collapse">
<h2 id="accordion-card-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-700 rounded-base shadow-xs border border-gray-200 hover:text-gray-900 hover:bg-gray-50 gap-3 [&[aria-expanded='true']]:rounded-b-none [&[aria-expanded='true']]:shadow-none" data-accordion-target="#accordion-card-body-1" aria-expanded="true" aria-controls="accordion-card-body-1">
<span>Apa itu SIGD dan apa tujuannya?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7" />
</svg>
</button>
</h2>
<div id="accordion-card-body-1" class="border border-t-0 border-gray-200 rounded-b-base shadow-xs" aria-labelledby="accordion-card-heading-1">
<div class="p-4 md:p-5">
<p class="mb-2 text-[#878C91]">SIGRD adalah Sistem Informasi Gas Rumah Kaca Daerah yang bertujuan untuk memantau, melaporkan, dan mengevaluasi status emisi GRK di wilayah [Nama Daerah] secara transparan dan terintegrasi.</p>
</div>
</div>
<div class="deskripsi">
<p class="text-[#878C91]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis, voluptates quos odio nihil, cupiditate reiciendis repellat aliquam aperiam autem sit possimus, veniam accusamus? Nam doloribus neque tenetur veniam quae.</p>
<h2 id="accordion-card-heading-2" class="mt-4">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-700 rounded-base shadow-xs border border-gray-200 hover:text-gray-900 hover:bg-gray-50 gap-3 [&[aria-expanded='true']]:rounded-b-none [&[aria-expanded='true']]:shadow-none" data-accordion-target="#accordion-card-body-2" aria-expanded="false" aria-controls="accordion-card-body-2">
<span>Bagaimanakah metodologi perhitungan emisi yang digunakan?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7" />
</svg>
</button>
</h2>
<div id="accordion-card-body-2" class="hidden border border-t-0 border-gray-200 rounded-b-base shadow-xs" aria-labelledby="accordion-card-heading-2">
<div class="p-4 md:p-5">
<p class="mb-2 text-[#878C91]">Kami menggunakan pedoman IPCC (Intergovernmental Panel on Climate Change) yang diselaraskan dengan Pedoman Teknis Inventarisasi GRK Nasional (KLHK RI). Ini memastikan data valid dan dapat diperbandingkan.</p>
</div>
</div>
<h2 id="accordion-card-heading-3" class="mt-4">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-700 rounded-base shadow-xs border border-gray-200 hover:text-gray-900 hover:bg-gray-50 gap-3 [&[aria-expanded='true']]:rounded-b-none [&[aria-expanded='true']]:shadow-none" data-accordion-target="#accordion-card-body-3" aria-expanded="false" aria-controls="accordion-card-body-3">
<span>Apa saja sektor penyumbang emisi utama di daerah ini?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7" />
</svg>
</button>
</h2>
<div id="accordion-card-body-3" class="hidden border border-t-0 border-gray-200 rounded-b-base shadow-xs" aria-labelledby="accordion-card-heading-3">
<div class="p-4 md:p-5">
<p class="mb-2 text-[#878C91]">Sektor utama meliputi energi, transportasi, industri, dan limbah.</p>
</div>
</div>
<h2 id="accordion-card-heading-4" class="mt-4">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-700 rounded-base shadow-xs border border-gray-200 hover:text-gray-900 hover:bg-gray-50 gap-3 [&[aria-expanded='true']]:rounded-b-none [&[aria-expanded='true']]:shadow-none" data-accordion-target="#accordion-card-body-4" aria-expanded="false" aria-controls="accordion-card-body-4">
<span>Bagaimana masyarakat umum dapat berpartisipasi dalam upaya mitigasi?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7" />
</svg>
</button>
</h2>
<div id="accordion-card-body-4" class="hidden border border-t-0 border-gray-200 rounded-b-base shadow-xs" aria-labelledby="accordion-card-heading-4">
<div class="p-4 md:p-5">
<p class="mb-2 text-[#878C91]">Masyarakat dapat berpartisipasi melalui berbagai cara seperti menggunakan transportasi ramah lingkungan, menghemat energi, dan mengurangi limbah.</p>
</div>
</div>
<h2 id="accordion-card-heading-5" class="mt-4">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-700 rounded-base shadow-xs border border-gray-200 hover:text-gray-900 hover:bg-gray-50 gap-3 [&[aria-expanded='true']]:rounded-b-none [&[aria-expanded='true']]:shadow-none" data-accordion-target="#accordion-card-body-5" aria-expanded="false" aria-controls="accordion-card-body-5">
<span>Bagaimana cara mengakses data terbaru di platform SIGD?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7" />
</svg>
</button>
</h2>
<div id="accordion-card-body-5" class="hidden border border-t-0 border-gray-200 rounded-b-base shadow-xs" aria-labelledby="accordion-card-heading-5">
<div class="p-4 md:p-5">
<p class="mb-2 text-[#878C91]">Data terbaru di platform SIGD dapat diakses melalui beberapa cara:</p>
<ul class="mb-3 text-[#878C91] list-disc pl-5">
<li>Dashboard utama yang menampilkan ringkasan data emisi terkini</li>
<li>Menu "Data Inventarisasi" untuk data inventarisasi GRK lengkap</li>
<li>Bagian "Laporan" untuk mengunduh laporan berkala</li>
<li>Fitur "Pencarian Data" untuk mencari data spesifik berdasarkan sektor, tahun, atau wilayah</li>
</ul>
<p class="text-[#878C91]">Semua data diperbaharui secara berkala dan dapat diunduh dalam berbagai format seperti PDF, Excel, atau CSV untuk keperluan analisis lebih lanjut.</p>
</div>
</div>
</div>
<hr>
<div class="flex flex-col gap-3 p-3">
<div class=" flex justify-between items-center">
<div class="w-2/1"><h1 class="font-reguler text-2xl">Bagaimanakah metodologi perhitungan emisi yang digunakan ?</h1></div>
<div class="w-1/4 text-right"><i class="bx bx-plus"></i></div>
</div>
<div class="deskripsi hidden">
<p class="text-[#878C91]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis, voluptates quos odio nihil, cupiditate reiciendis repellat aliquam aperiam autem sit possimus, veniam accusamus? Nam doloribus neque tenetur veniam quae.</p>
</div>
</div>
<div class="flex flex-col gap-3 p-3">
<div class=" flex justify-between items-center">
<div class="w-2/1"><h1 class="font-reguler text-2xl">Apa saja sektor penyumbang emisi utama di daerah ini ?</h1></div>
<div class="w-1/4 text-right"><i class="bx bx-plus"></i></div>
</div>
<div class="deskripsi hidden">
<p class="text-[#878C91]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis, voluptates quos odio nihil, cupiditate reiciendis repellat aliquam aperiam autem sit possimus, veniam accusamus? Nam doloribus neque tenetur veniam quae.</p>
</div>
</div>
<div class="flex flex-col gap-3 p-3">
<div class=" flex justify-between items-center">
<div class="w-2/1"><h1 class="font-reguler text-2xl">Bagaimana masyarakat umum dapat berpartisipasi dalam upaya mitibasi ?</h1></div>
<div class="w-1/4 text-right"><i class="bx bx-plus"></i></div>
</div>
<div class="deskripsi hidden">
<p class="text-[#878C91]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis, voluptates quos odio nihil, cupiditate reiciendis repellat aliquam aperiam autem sit possimus, veniam accusamus? Nam doloribus neque tenetur veniam quae.</p>
</div>
</div>
<hr>
</div>
</div>
</div>
</section>
<section class="relative bg-[#efefef] py-20">
<section class="relative bg-[#efefef] py-20 fade-in">
<div class="container mx-auto p-5">
<div class="flex flex-col lg:flex-row gap-4">
<div class="lg:w-[60%]">
@ -160,8 +212,10 @@
</div>
<div class="text-xl md:text-2xl font-reguler">Bagaimana Data GRK Daerah Meningkatkan Keputusan Kebijakan Iklim</div>
<div class="flex justify-between items-center mt-5">
<div class="w-[70%]"><p class="text-[#878C91]">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut laborum assumenda...</p></div>
<div class="w-[30%] text-right flex justify-center items-center"><a href="" class="px-8 py-3 border rounded-full bg-[#2084FF] text-white"><i class="bx bx-right-arrow-alt text-2xl"></i></a></div>
<div class="w-[70%]">
<p class="text-[#878C91]">Data yang akurat memudahkan perencanaan mitigasi dan adaptasi berbasis kebutuhan nyata.</p>
</div>
<div class="w-[30%] text-right flex justify-center items-center"><a href="" class="px-8 py-3 border rounded-full border-[#000]"><i class="bx bx-right-arrow-alt text-2xl"></i></a></div>
</div>
</div>
</div>
@ -172,7 +226,9 @@
</div>
<div class="text-xl md:text-2xl font-reguler">Memahami Tren Emisi dengan Metodologi Berbasis IPCC</div>
<div class="flex justify-between items-center mt-5">
<div class="w-[70%]"><p class="text-[#878C91]">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut laborum assumenda...</p></div>
<div class="w-[70%]">
<p class="text-[#878C91]">Pelaporan inventarisasi GRK lebih konsisten dan dapat dibandingan antar-tahun.</p>
</div>
<div class="w-[30%] text-right flex justify-center items-center"><a href="" class="px-8 py-3 border rounded-full border-[#000]"><i class="bx bx-right-arrow-alt text-2xl"></i></a></div>
</div>
</div>
@ -184,7 +240,9 @@
</div>
<div class="text-xl md:text-2xl font-reguler">Optimalkan Dampak Aksi Iklim Lewat Pelaporan Emisi yang Transparan</div>
<div class="flex justify-between items-center mt-5">
<div class="w-[70%]"><p class="text-[#878C91]">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut laborum assumenda...</p></div>
<div class="w-[70%]">
<p class="text-[#878C91]">Transparansi pelaporan membantu evaluasi dan memastikan efektivitas program iklim daerah.</p>
</div>
<div class="w-[30%] text-right flex justify-center items-center"><a href="" class="px-8 py-3 border rounded-full border-[#000]"><i class="bx bx-right-arrow-alt text-2xl"></i></a></div>
</div>
</div>
@ -193,7 +251,7 @@
</div>
</section>
<section class="relative bg-[#fff] py-20">
<section class="relative bg-[#fff] py-20 fade-in">
<div class="container mx-auto p-5">
<div class="flex flex-col md:flex-row gap-5">
<div class="flex flex-col gap-3 md:w-[50%]">

208
resources/views/layouts/front.blade.php
View File

@ -26,6 +26,108 @@
<!-- alertifyjs default themes Css -->
<link href="{{ asset('assets/libs/alertifyjs/build/css/themes/default.min.css') }}" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<style>
.fade-in {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Button hover animations */
.btn-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.btn-hover:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.btn-hover:active {
transform: translateY(0);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Primary button (blue background) hover effect */
.btn-hover.btn-primary:hover {
background-color: #1a6fd9;
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(32, 132, 255, 0.4);
}
/* Secondary button (border only) hover effect */
.btn-hover.btn-secondary:hover {
background-color: #f8fafc;
border-color: #2084FF;
color: #2084FF;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
/* Icon button hover effects */
.btn-hover.btn-icon:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
/* Tab button hover effects */
.btn-hover.btn-tab:hover {
background-color: rgba(255, 255, 255, 0.9);
color: #2084FF;
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}
/* FAQ Static Styles */
.faq-item {
/* Static display - no animations */
}
.faq-content {
/* Always visible */
display: block;
opacity: 1;
}
/* Information Card Hover Animations */
.info-card {
position: relative;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.info-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.7) 100%);
z-index: 1;
transition: background 0.3s ease;
}
.info-card:hover {
transform: translateY(-8px);
}
.info-card:hover::before {
background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.8) 100%);
}
.info-card .content {
position: relative;
z-index: 2;
}
</style>
@yield('css')
</head>
<body>
@ -61,20 +163,104 @@
<script src="{{ asset('assets/libs/alertifyjs/build/alertify.min.js') }}"></script>
<script src="{{ asset('assets/libs/choices.js/public/assets/scripts/choices.min.js') }}"></script>
<script>
new Choices('.choices', {
shouldSort: false,
document.addEventListener('DOMContentLoaded', function() {
// Simple fade-in animation
const fadeElements = document.querySelectorAll('.fade-in');
if (fadeElements.length === 0) {
console.log('No fade-in elements found');
return;
}
console.log('Found ' + fadeElements.length + ' fade-in elements');
// Show first element immediately
if (fadeElements[0]) {
setTimeout(() => {
fadeElements[0].classList.add('visible');
console.log('First element animated');
}, 500);
}
// Setup intersection observer for other elements
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
console.log('Element animated on scroll');
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
});
// Observe all elements except the first one
for (let i = 1; i < fadeElements.length; i++) {
observer.observe(fadeElements[i]);
}
} else {
// Fallback for older browsers
fadeElements.forEach(el => {
el.style.opacity = '1';
el.style.transform = 'translateY(0)';
});
}
// Flowbite Accordion Functionality
const accordionButtons = document.querySelectorAll('[data-accordion-target]');
accordionButtons.forEach(button => {
button.addEventListener('click', function() {
const targetId = this.getAttribute('data-accordion-target');
const targetElement = document.querySelector(targetId);
const isExpanded = this.getAttribute('aria-expanded') === 'true';
const icon = this.querySelector('[data-accordion-icon]');
// Close all other accordion items
accordionButtons.forEach(otherButton => {
if (otherButton !== button) {
const otherId = otherButton.getAttribute('data-accordion-target');
const otherElement = document.querySelector(otherId);
const otherIcon = otherButton.querySelector('[data-accordion-icon]');
otherButton.setAttribute('aria-expanded', 'false');
if (otherElement) {
otherElement.classList.add('hidden');
}
if (otherIcon) {
otherIcon.classList.remove('rotate-180');
}
}
});
// Toggle current accordion item
if (isExpanded) {
this.setAttribute('aria-expanded', 'false');
if (targetElement) {
targetElement.classList.add('hidden');
}
if (icon) {
icon.classList.remove('rotate-180');
}
} else {
this.setAttribute('aria-expanded', 'true');
if (targetElement) {
targetElement.classList.remove('hidden');
}
if (icon) {
icon.classList.add('rotate-180');
}
}
});
});
});
@if (Session::get('type')=='invalid')
alertify.error("{{ Session::get('message') }}");
@endif
@if (Session::get('type')=='success')
alertify.success("{{ Session::get('message') }}");
@endif
@if (Session::get('type')=='warning')
alertify.warning("{{ Session::get('message') }}");
@endif
</script>
@yield('js')
</body>