en-US/help.html at master · InternetPublicLibrary/en-US · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
---
layout: info
title: Help Center
lang: en-US
description: Get help with using the Internet Public Library.
permalink: /en-US/help/
---

<!-- Hero -->
<section class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-12">
    <div class="container mx-auto px-4 text-center">
        <i class="fas fa-question-circle text-5xl mb-4 opacity-80"></i>
        <h1 class="text-4xl font-bold mb-4">Help Center</h1>
        <p class="text-xl text-purple-100 max-w-2xl mx-auto">Find answers to common questions and learn how to use IPL
        </p>
    </div>
</section>

<div class="container mx-auto px-4 py-12">
    <div class="max-w-4xl mx-auto">

        <!-- FAQ -->
        <div class="bg-white rounded-xl shadow-sm border p-8 mb-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">Frequently Asked Questions</h2>

            <div class="space-y-6">
                <div class="border-b border-gray-100 pb-6">
                    <h3 class="font-semibold text-gray-900 mb-2">What is the Internet Public Library?</h3>
                    <p class="text-gray-600">IPL is a free, curated directory of educational resources organized by
                        category. Think of it as a library for the internet's best learning materials.</p>
                </div>

                <div class="border-b border-gray-100 pb-6">
                    <h3 class="font-semibold text-gray-900 mb-2">How can I contribute?</h3>
                    <p class="text-gray-600">You can <a href="/en-US/submit-resource/"
                            class="text-blue-600 hover:underline">submit new resources</a>, report broken links, suggest
                        improvements, or help translate content.</p>
                </div>

                <div class="border-b border-gray-100 pb-6">
                    <h3 class="font-semibold text-gray-900 mb-2">Is IPL really free?</h3>
                    <p class="text-gray-600">Yes! IPL is completely free to use. We're an open-source project maintained
                        by volunteers.</p>
                </div>

                <div class="pb-2">
                    <h3 class="font-semibold text-gray-900 mb-2">How do I report an issue?</h3>
                    <p class="text-gray-600">Use our <a href="/en-US/report-issues/"
                            class="text-blue-600 hover:underline">issue reporting form</a> or open an issue on <a
                            href="https://github.com/InternetPublicLibrary/IPLibrary-website/issues"
                            class="text-blue-600 hover:underline">GitHub</a>.</p>
                </div>
            </div>
        </div>

        <!-- Contact -->
        <div class="grid md:grid-cols-3 gap-6">
            <a href="mailto:help@ipl.org"
                class="bg-white rounded-xl shadow-sm border p-6 text-center hover:shadow-md transition-shadow">
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-envelope text-blue-600 text-xl"></i>
                </div>
                <h3 class="font-semibold text-gray-900">Email Support</h3>
                <p class="text-gray-600 text-sm">help@ipl.org</p>
            </a>

            <a href="https://github.com/InternetPublicLibrary/IPLibrary-website/discussions"
                class="bg-white rounded-xl shadow-sm border p-6 text-center hover:shadow-md transition-shadow">
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                    <i class="fab fa-github text-purple-600 text-xl"></i>
                </div>
                <h3 class="font-semibold text-gray-900">Community</h3>
                <p class="text-gray-600 text-sm">GitHub Discussions</p>
            </a>

            <a href="/en-US/contact/"
                class="bg-white rounded-xl shadow-sm border p-6 text-center hover:shadow-md transition-shadow">
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-comments text-green-600 text-xl"></i>
                </div>
                <h3 class="font-semibold text-gray-900">Contact Us</h3>
                <p class="text-gray-600 text-sm">Send a message</p>
            </a>
        </div>
    </div>
</div>