1 ---
2 import IndexLayout from '@/layouts/IndexLayout.astro'
3 import { SITE } from '@/config'
4 ---
5
6 <IndexLayout
7 title={`Hubungi Kami - ${SITE.title}`}
8 description="Hubungi tim PBJ Komplit untuk pertanyaan, saran, atau feedback"
9 >
10 <div class="contact-page prose">
11 <h1>Hubungi Kami</h1>
12
13 <p>
14 Punya pertanyaan tentang aplikasi PBJ Komplit? Ingin memberikan saran atau feedback? Atau
15 tertarik untuk berkolaborasi? Kami senang mendengar dari Anda!
16 </p>
17
18 <div class="contact-info">
19 <h2>Kontak</h2>
20 <p>Hubungi kami melalui email:</p>
21
22 <div class="email-section">
23 <a href="mailto:info@pepakbasajawa.com" class="email-link"> info@pepakbasajawa.com </a>
24 </div>
25
26 <p>Kami akan berusaha merespons pertanyaan Anda secepat mungkin.</p>
27 </div>
28
29 <div class="topics">
30 <h2>Apa yang bisa Anda tanyakan?</h2>
31 <ul>
32 <li>Pertanyaan tentang fitur aplikasi PBJ Komplit</li>
33 <li>Bantuan teknis atau troubleshooting</li>
34 <li>Saran materi pembelajaran baru</li>
35 <li>Laporan bug atau masalah</li>
36 <li>Feedback tentang pengalaman menggunakan aplikasi</li>
37 <li>Usulan perbaikan atau peningkatan fitur</li>
38 <li>Peluang kolaborasi atau kemitraan</li>
39 <li>Pertanyaan tentang bahasa dan budaya Jawa</li>
40 </ul>
41 </div>
42
43 <div class="app-info">
44 <h2>Tentang Aplikasi</h2>
45 <p>
46 PBJ Komplit adalah aplikasi pembelajaran bahasa Jawa yang lengkap dan interaktif. Aplikasi
47 ini menyediakan materi pembelajaran dari tingkat dasar hingga mahir, mencakup kosakata, tata
48 bahasa, aksara Jawa, dan wawasan budaya Jawa.
49 </p>
50 <p>
51 Website: <a href="https://pepakbasajawa.5mb.app/" target="_blank" rel="noopener noreferrer">
52 https://pepakbasajawa.5mb.app/
53 </a>
54 </p>
55 </div>
56
57 <div class="community">
58 <h2>Bergabung dengan Komunitas</h2>
59 <p>
60 Kami percaya bahwa belajar bahasa lebih menyenangkan bersama komunitas. Bagikan pengalaman
61 belajar Anda, ajukan pertanyaan, dan bantu sesama pembelajar bahasa Jawa.
62 </p>
63 </div>
64
65 <div class="footer-note">
66 <p><em>Matur nuwun sampun rawuh! (Terima kasih sudah berkunjung!)</em></p>
67 <p><strong>Mari bersama-sama melestarikan bahasa dan budaya Jawa! 🙏</strong></p>
68 </div>
69 </div>
70 </IndexLayout>
71
72 <style>
73 .contact-page {
74 max-width: 100%;
75 margin: 0 auto;
76 padding: 2rem 0;
77 }
78
79 .contact-info {
80 margin: 2rem 0;
81 }
82
83 .email-section {
84 margin: 1.5rem 0;
85 padding: 1rem;
86 background: var(--code-bg);
87 border-radius: 8px;
88 border-left: 4px solid var(--accent);
89 }
90
91 .email-link {
92 font-size: 1.25rem;
93 font-weight: 600;
94 color: var(--accent);
95 text-decoration: none;
96 word-break: break-all;
97 }
98
99 .email-link:hover {
100 text-decoration: underline;
101 }
102
103 .topics {
104 margin: 2rem 0;
105 }
106
107 .topics ul {
108 list-style-type: disc;
109 margin-left: 1.5rem;
110 }
111
112 .topics li {
113 margin: 0.5rem 0;
114 line-height: 1.6;
115 }
116
117 .app-info,
118 .community {
119 margin: 2rem 0;
120 }
121
122 .app-info a {
123 color: var(--accent);
124 text-decoration: none;
125 }
126
127 .app-info a:hover {
128 text-decoration: underline;
129 }
130
131 .footer-note {
132 margin: 3rem 0 1rem;
133 padding: 1.5rem;
134 background: var(--selection);
135 border-radius: 8px;
136 text-align: center;
137 }
138
139 .footer-note p {
140 margin: 0.5rem 0;
141 }
142
143 @media (max-width: 768px) {
144 .contact-page {
145 padding: 1rem 0;
146 }
147
148 .email-link {
149 font-size: 1.1rem;
150 }
151 }
152 </style>