LearnByDesign/testimonials.html at main · AlexWallaceAptly/LearnByDesign · 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resources | Learn by Design - Parent Resources for Autism & ABA</title>
    <meta name="description" content="Essential resources for caregivers seeking information on Applied Behavior Analysis, autism, and research-based treatments from trusted organizations.">

    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="Logos/IconOnly_Transparent_NoBuffer.png">
    <link rel="icon" type="image/png" sizes="16x16" href="Logos/IconOnly_Transparent_NoBuffer.png">
    <link rel="apple-touch-icon" href="Logos/IconOnly_Transparent_NoBuffer.png">
    <link rel="shortcut icon" href="Logos/IconOnly_Transparent_NoBuffer.png">

    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="accessibility.css">
</head>
<body class="font-sans">
    <!-- Header/Navigation -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <img src="Logos/IconOnly_Transparent_NoBuffer.png" alt="Learn by Design Logo" class="h-12 w-auto">
                <h1 class="text-2xl font-bold text-blueberry">Learn by Design</h1>
            </div>

            <nav class="hidden md:flex space-x-8">
                <a href="index.html" class="text-blueberry font-medium hover:text-magenta transition">Home</a>
                <a href="services.html" class="text-blueberry font-medium hover:text-magenta transition">Services</a>
                <a href="about-us.html" class="text-blueberry font-medium hover:text-magenta transition">About Us</a>
                <a href="testimonials.html" class="text-magenta font-medium">Resources</a>
                <a href="contact.html" class="text-blueberry font-medium hover:text-magenta transition">Contact</a>
            </nav>

            <button class="md:hidden text-blueberry text-2xl" id="mobile-menu-button">
                <i class="fas fa-bars"></i>
            </button>
        </div>

        <!-- Mobile Menu -->
        <div class="md:hidden hidden bg-white w-full py-4 px-4 shadow-md" id="mobile-menu">
            <div class="flex flex-col space-y-4">
                <a href="index.html" class="text-blueberry font-medium hover:text-magenta transition">Home</a>
                <a href="services.html" class="text-blueberry font-medium hover:text-magenta transition">Services</a>
                <a href="about-us.html" class="text-blueberry font-medium hover:text-magenta transition">About Us</a>
                <a href="testimonials.html" class="text-magenta font-medium">Resources</a>
                <a href="contact.html" class="text-blueberry font-medium hover:text-magenta transition">Contact</a>
            </div>
        </div>
    </header>

    <!-- Page Header -->
    <section class="hero-section py-16">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl md:text-5xl font-bold text-blueberry mb-6">Parent Resources</h1>
            <p class="text-xl text-sage max-w-3xl mx-auto">We recommend the resources below for information on Applied Behavior Analysis, Autism, and research based treatments:</p>
        </div>
    </section>

    <!-- Resources Section -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="max-w-4xl mx-auto">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Resource Links -->
                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition duration-300">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-external-link-alt text-blueberry text-xl mr-3"></i>
                            <h3 class="text-lg font-semibold text-blueberry">Teachers Pay Teachers</h3>
                        </div>
                        <p class="text-sage mb-4">Educational resources and materials marketplace</p>
                        <a href="https://www.teacherspayteachers.com" target="_blank" rel="noopener noreferrer" class="text-magenta hover:text-blueberry transition font-medium">
                            teacherspayteachers.com <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>

                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition duration-300">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-external-link-alt text-blueberry text-xl mr-3"></i>
                            <h3 class="text-lg font-semibold text-blueberry">Parents Helping Parents</h3>
                        </div>
                        <p class="text-sage mb-4">Support for parents of children with disabilities</p>
                        <a href="https://www.php.com" target="_blank" rel="noopener noreferrer" class="text-magenta hover:text-blueberry transition font-medium">
                            php.com <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>

                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition duration-300">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-external-link-alt text-blueberry text-xl mr-3"></i>
                            <h3 class="text-lg font-semibold text-blueberry">Regional Centers</h3>
                        </div>
                        <p class="text-sage mb-4">Respite care, co-pay assistance, additional services in your area</p>
                        <a href="https://dds.ca.gov/rc" target="_blank" rel="noopener noreferrer" class="text-magenta hover:text-blueberry transition font-medium">
                            dds.ca.gov/rc <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>

                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition duration-300">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-external-link-alt text-blueberry text-xl mr-3"></i>
                            <h3 class="text-lg font-semibold text-blueberry">Disability Services</h3>
                        </div>
                        <p class="text-sage mb-4">California Employment Development Department disability services</p>
                        <a href="https://edd.ca.gov/en/disability/apply/" target="_blank" rel="noopener noreferrer" class="text-magenta hover:text-blueberry transition font-medium">
                            edd.ca.gov/en/disability/apply/ <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>

                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition duration-300">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-external-link-alt text-blueberry text-xl mr-3"></i>
                            <h3 class="text-lg font-semibold text-blueberry">JABA</h3>
                        </div>
                        <p class="text-sage mb-4">Journal of Applied Behavior Analysis - research publication</p>
                        <a href="https://onlinelibrary.wiley.com/journal/19383703" target="_blank" rel="noopener noreferrer" class="text-magenta hover:text-blueberry transition font-medium">
                            Journal of Applied Behavior Analysis <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>

                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition duration-300">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-external-link-alt text-blueberry text-xl mr-3"></i>
                            <h3 class="text-lg font-semibold text-blueberry">ABAI</h3>
                        </div>
                        <p class="text-sage mb-4">Association for Behavior Analysis International</p>
                        <a href="https://www.abainternational.org" target="_blank" rel="noopener noreferrer" class="text-magenta hover:text-blueberry transition font-medium">
                            abainternational.org <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>

                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition duration-300">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-external-link-alt text-blueberry text-xl mr-3"></i>
                            <h3 class="text-lg font-semibold text-blueberry">BACB</h3>
                        </div>
                        <p class="text-sage mb-4">Behavior Analyst Certification Board</p>
                        <a href="https://www.bacb.com" target="_blank" rel="noopener noreferrer" class="text-magenta hover:text-blueberry transition font-medium">
                            bacb.com <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>

                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition duration-300">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-external-link-alt text-blueberry text-xl mr-3"></i>
                            <h3 class="text-lg font-semibold text-blueberry">PECS USA</h3>
                        </div>
                        <p class="text-sage mb-4">Picture Exchange Communication System resources</p>
                        <a href="https://pecsusa.com" target="_blank" rel="noopener noreferrer" class="text-magenta hover:text-blueberry transition font-medium">
                            pecsusa.com <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>

                <!-- Call to Action -->
                <div class="mt-16 bg-gradient-to-r from-blueberry to-magenta rounded-xl p-8 text-white text-center">
                    <h2 class="text-3xl font-bold mb-4">Need More Support?</h2>
                    <p class="text-xl mb-6">Our team is here to help guide you through your child's ABA therapy journey.</p>
                    <a href="contact.html" class="bg-white text-blueberry px-8 py-3 rounded-full font-medium hover:bg-opacity-90 transition">Contact Us Today</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-blueberry text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <div class="flex items-center space-x-3 mb-4">
                        <img src="Logos/IconOnly_Transparent_NoBuffer.png" alt="Learn by Design Logo" class="h-10 w-auto">
                        <h3 class="text-xl font-bold">Learn by Design</h3>
                    </div>
                    <p class="text-blue-100">Providing exceptional ABA therapy services with compassion and expertise since 2025.</p>
                </div>

                <div>
                    <h4 class="text-lg font-bold mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="index.html" class="text-blue-100 hover:text-white transition">Home</a></li>
                        <li><a href="services.html" class="text-blue-100 hover:text-white transition">Services</a></li>
                        <li><a href="about-us.html" class="text-blue-100 hover:text-white transition">About Us</a></li>
                        <li><a href="testimonials.html" class="text-blue-100 hover:text-white transition">Resources</a></li>
                        <li><a href="contact.html" class="text-blue-100 hover:text-white transition">Contact</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-lg font-bold mb-4">Services</h4>
                    <ul class="space-y-2">
                        <li><a href="services.html" class="text-blue-100 hover:text-white transition">Early Development Support</a></li>
                        <li><a href="services.html" class="text-blue-100 hover:text-white transition">In-Home Therapy</a></li>
                        <li><a href="services.html" class="text-blue-100 hover:text-white transition">Caregiver Training</a></li>
                    </ul>
                </div>


            </div>

            <div class="border-t border-blue-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-blue-100 mb-4 md:mb-0">© 2025 Learn by Design. All rights reserved.</p>
                <div class="flex space-x-6">
                    <a href="#" class="text-blue-100 hover:text-white transition">Privacy Policy</a>
                    <a href="#" class="text-blue-100 hover:text-white transition">Terms of Service</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Back to Top Button -->
    <button id="back-to-top" class="fixed bottom-8 right-8 bg-magenta text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
        <i class="fas fa-arrow-up"></i>
    </button>

    <script src="script.js"></script>
</body>
</html>