284 lines
6.6 KiB
PHP
284 lines
6.6 KiB
PHP
<!doctype html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>FAQ - PawMedic</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
|
|
|
|
<style>
|
|
:root{
|
|
--ff-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
|
|
--ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
|
|
--primary: #6fcf97;
|
|
--primary-dark: #4bb66f;
|
|
--primary-light: #e8f7ef;
|
|
--text-dark: #114d3a;
|
|
--text-muted: #64748b;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body{
|
|
margin:0;
|
|
font-family:var(--ff-body);
|
|
background:linear-gradient(135deg, #f0fdf4 0%, #eaf7f0 50%, #f0f9ff 100%);
|
|
background-attachment:fixed;
|
|
color:#333;
|
|
-webkit-font-smoothing:antialiased;
|
|
line-height:1.6;
|
|
min-height:100vh;
|
|
padding:20px;
|
|
position:relative;
|
|
}
|
|
|
|
body::before{
|
|
content:'';
|
|
position:fixed;
|
|
top:0;
|
|
left:0;
|
|
right:0;
|
|
bottom:0;
|
|
background-image:
|
|
radial-gradient(circle at 20% 50%, rgba(111,207,151,0.12) 0%, transparent 60%),
|
|
radial-gradient(circle at 80% 80%, rgba(111,207,151,0.08) 0%, transparent 60%);
|
|
pointer-events:none;
|
|
z-index:0;
|
|
}
|
|
|
|
.container{
|
|
max-width:900px;
|
|
margin:0 auto;
|
|
padding:40px 0;
|
|
position:relative;
|
|
z-index:1;
|
|
}
|
|
|
|
.header{
|
|
text-align:center;
|
|
margin-bottom:50px;
|
|
animation:fadeDown 0.6s ease;
|
|
}
|
|
|
|
.logo-link{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
gap:10px;
|
|
text-decoration:none;
|
|
color:var(--text-dark);
|
|
margin-bottom:20px;
|
|
transition:transform 0.3s ease;
|
|
}
|
|
|
|
.logo-link:hover{
|
|
transform:translateY(-2px);
|
|
}
|
|
|
|
.logo-icon{
|
|
width:44px;
|
|
height:44px;
|
|
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
|
|
border-radius:12px;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
font-size:22px;
|
|
}
|
|
|
|
.logo-text{
|
|
font-size:22px;
|
|
font-weight:700;
|
|
font-family:var(--ff-heading);
|
|
}
|
|
|
|
.header h1{
|
|
font-family:var(--ff-heading);
|
|
font-size:clamp(1.8rem, 4vw, 2.6rem);
|
|
font-weight:800;
|
|
color:var(--text-dark);
|
|
margin:20px 0 12px;
|
|
letter-spacing:-0.02em;
|
|
}
|
|
|
|
.header p{
|
|
color:var(--text-muted);
|
|
font-size:17px;
|
|
margin:0;
|
|
}
|
|
|
|
.faq-card{
|
|
background:rgba(255,255,255,0.95);
|
|
backdrop-filter:blur(20px);
|
|
border-radius:24px;
|
|
padding:40px;
|
|
box-shadow:0 20px 60px rgba(17,77,58,0.12);
|
|
border:1px solid rgba(111,207,151,0.15);
|
|
margin-bottom:24px;
|
|
animation:fadeUp 0.6s ease backwards;
|
|
}
|
|
|
|
.faq-card:nth-child(1){animation-delay:0.1s;}
|
|
.faq-card:nth-child(2){animation-delay:0.2s;}
|
|
.faq-card:nth-child(3){animation-delay:0.3s;}
|
|
.faq-card:nth-child(4){animation-delay:0.4s;}
|
|
.faq-card:nth-child(5){animation-delay:0.5s;}
|
|
.faq-card:nth-child(n+6){animation-delay:0.6s;}
|
|
|
|
.faq-question{
|
|
font-family:var(--ff-heading);
|
|
font-size:18px;
|
|
font-weight:700;
|
|
color:var(--text-dark);
|
|
margin-bottom:12px;
|
|
display:flex;
|
|
align-items:center;
|
|
gap:12px;
|
|
cursor:pointer;
|
|
user-select:none;
|
|
}
|
|
|
|
.faq-question::before{
|
|
content:'❓';
|
|
font-size:24px;
|
|
flex-shrink:0;
|
|
}
|
|
|
|
.faq-answer{
|
|
color:var(--text-muted);
|
|
line-height:1.8;
|
|
font-size:15px;
|
|
max-height:0;
|
|
overflow:hidden;
|
|
transition:max-height 0.3s ease, padding 0.3s ease;
|
|
padding:0;
|
|
}
|
|
|
|
.faq-card.active .faq-answer{
|
|
max-height:500px;
|
|
padding-top:12px;
|
|
}
|
|
|
|
.faq-card.active .faq-question::before{
|
|
content:'✓';
|
|
}
|
|
|
|
.back-btn{
|
|
margin-bottom:30px;
|
|
display:inline-flex;
|
|
align-items:center;
|
|
gap:8px;
|
|
color:var(--text-muted);
|
|
text-decoration:none;
|
|
font-weight:600;
|
|
transition:all 0.3s ease;
|
|
}
|
|
|
|
.back-btn:hover{
|
|
color:var(--primary-dark);
|
|
transform:translateX(-4px);
|
|
}
|
|
|
|
@keyframes fadeDown{
|
|
from{
|
|
opacity:0;
|
|
transform:translateY(-20px);
|
|
}
|
|
to{
|
|
opacity:1;
|
|
transform:translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeUp{
|
|
from{
|
|
opacity:0;
|
|
transform:translateY(30px);
|
|
}
|
|
to{
|
|
opacity:1;
|
|
transform:translateY(0);
|
|
}
|
|
}
|
|
|
|
@media(max-width:768px){
|
|
.faq-card{
|
|
padding:28px 24px;
|
|
}
|
|
}
|
|
|
|
@media (max-width:576px) and (orientation:portrait){
|
|
.container{padding:14px;}
|
|
.header h1{font-size:1.35rem;}
|
|
.header p{font-size:14px;}
|
|
.logo-icon{width:38px;height:38px;}
|
|
.faq-card{padding:16px 12px;border-radius:14px;}
|
|
.faq-question{font-size:15px;}
|
|
.faq-answer{font-size:14px;line-height:1.6;}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<a href="/" class="back-btn">
|
|
← Kembali ke Beranda
|
|
</a>
|
|
|
|
<div class="header">
|
|
<a href="/" class="logo-link">
|
|
<div class="logo-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
|
|
<circle cx="6" cy="8" r="2.2"></circle>
|
|
<circle cx="10.8" cy="5.6" r="2.1"></circle>
|
|
<circle cx="15.8" cy="8" r="2.2"></circle>
|
|
<path d="M12 10.6c-3.4 0-5.9 2.4-5.9 4.9 0 2.2 1.8 3.9 4 3.9 1.4 0 1.9-.7 2-.7s.6.7 2 .7c2.2 0 4-1.7 4-3.9 0-2.6-2.6-4.9-6.1-4.9z"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="logo-text">PawMedic</div>
|
|
</a>
|
|
<h1>Pertanyaan Umum</h1>
|
|
<p>Temukan jawaban untuk pertanyaan yang sering diajukan</p>
|
|
</div>
|
|
|
|
<div class="faq-list">
|
|
@forelse(($faqs ?? []) as $faq)
|
|
<div class="faq-card">
|
|
<div class="faq-question">{{ $faq['question'] ?? '-' }}</div>
|
|
<div class="faq-answer" style="white-space: pre-line;">{{ $faq['answer'] ?? '-' }}</div>
|
|
</div>
|
|
@empty
|
|
<div class="faq-card">
|
|
<div class="faq-question">Belum ada FAQ</div>
|
|
<div class="faq-answer">Konten FAQ belum tersedia.</div>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
|
|
@include('components.scroll-top')
|
|
|
|
<script>
|
|
document.querySelectorAll('.faq-question').forEach(question => {
|
|
question.addEventListener('click', function() {
|
|
const card = this.parentElement;
|
|
const isActive = card.classList.contains('active');
|
|
|
|
// Close all other cards
|
|
document.querySelectorAll('.faq-card').forEach(c => {
|
|
c.classList.remove('active');
|
|
});
|
|
|
|
// Toggle current card
|
|
if (!isActive) {
|
|
card.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|