Spaces:
Running
Running
File size: 12,715 Bytes
af7b413 900ce5d af7b413 900ce5d af7b413 | 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 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Services - TREY Trauma Recovery</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
treyblue: '#1e3a8a',
treyyellow: '#fbbf24',
}
}
}
}
</script>
<style>
.service-card {
transition: all 0.3s ease;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.nav-link {
position: relative;
}
.nav-link:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #fbbf24;
transition: width 0.3s ease;
}
.nav-link:hover:after {
width: 100%;
}
</style>
</head>
<body class="font-sans bg-gray-50">
<!-- Quick Exit Button -->
<div class="fixed top-4 right-4 z-50">
<a href="https://www.theweathernetwork.com/ca/weather/nova-scotia/halifax" target="_blank" class="bg-treyblue hover:bg-red-600 text-white px-4 py-2 rounded-full shadow-lg flex items-center gap-2">
<i data-feather="alert-circle"></i>
Quick Exit
</a>
</div>
<!-- Navigation -->
<nav class="bg-treyblue text-white shadow-lg sticky top-0 z-40">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<a href="index.html" class="flex items-center space-x-2">
<img src="https://static.photos/blue/200x200/1" alt="TREY Trauma Recovery Lighthouse Logo" class="h-12">
<span class="text-xl font-bold">TREY Trauma Recovery</span>
</a>
<div class="hidden md:flex items-center space-x-8">
<a href="about.html" class="nav-link">About</a>
<a href="who-we-are.html" class="nav-link">Who We Are</a>
<a href="services.html" class="nav-link text-treyyellow">Our Services</a>
<a href="statistics.html" class="nav-link">Statistics</a>
<a href="stories.html" class="nav-link">Survivor Stories</a>
<a href="donate.html" class="nav-link">Donate</a>
<a href="contact.html" class="nav-link">Contact</a>
</div>
<button class="md:hidden focus:outline-none">
<i data-feather="menu"></i>
</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="relative bg-gradient-to-r from-treyblue to-blue-800 text-white py-20">
<div class="container mx-auto px-4 relative z-10 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Our Comprehensive Services</h1>
<p class="text-xl mb-8 max-w-3xl mx-auto">Tailored support for survivors at every stage of their recovery journey</p>
</div>
</header>
<!-- Services Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-treyblue mb-4">Our Programs</h2>
<div class="w-24 h-1 bg-treyyellow mx-auto"></div>
</div>
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
<div class="service-card bg-gray-50 p-8 rounded-lg shadow-md border-t-4 border-treyblue">
<div class="flex items-center mb-6">
<div class="bg-treyblue text-white rounded-full w-12 h-12 flex items-center justify-center mr-4">
<i data-feather="compass" class="w-6 h-6"></i>
</div>
<h3 class="text-xl font-semibold text-treyblue">Outreach & Crisis Response</h3>
</div>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>24/7 crisis hotline</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Street outreach teams</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Hospital accompaniment</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Emergency safe placements</span>
</li>
</ul>
</div>
<div class="service-card bg-gray-50 p-8 rounded-lg shadow-md border-t-4 border-treyblue">
<div class="flex items-center mb-6">
<div class="bg-treyblue text-white rounded-full w-12 h-12 flex items-center justify-center mr-4">
<i data-feather="home" class="w-6 h-6"></i>
</div>
<h3 class="text-xl font-semibold text-treyblue">Safehouse Program</h3>
</div>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Confidential secure location</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Trauma-informed residential care</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Individualized recovery plans</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Average stay 6-18 months</span>
</li>
</ul>
</div>
<div class="service-card bg-gray-50 p-8 rounded-lg shadow-md border-t-4 border-treyblue">
<div class="flex items-center mb-6">
<div class="bg-treyblue text-white rounded-full w-12 h-12 flex items-center justify-center mr-4">
<i data-feather="life-buoy" class="w-6 h-6"></i>
</div>
<h3 class="text-xl font-semibold text-treyblue">Aftercare Services</h3>
</div>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Transitional housing support</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Education & employment assistance</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Alumni peer support groups</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Long-term case management</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Therapeutic Approaches -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-treyblue mb-4">Therapeutic Approaches</h2>
<div class="w-24 h-1 bg-treyyellow mx-auto"></div>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="bg-treyblue text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<i data-feather="activity" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-semibold text-treyblue mb-3">Trauma Therapy</h3>
<p class="text-gray-700">Evidence-based modalities including TF-CBT, EMDR, and somatic experiencing</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="bg-treyblue text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<i data-feather="users" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-semibold text-treyblue mb-3">Group Support</h3>
<p class="text-gray-700">Peer-led groups for processing trauma and building community</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="bg-treyblue text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<i data-feather="feather" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-semibold text-treyblue mb-3">Expressive Arts</h3>
<p class="text-gray-700">Art, music, and movement therapies for non-verbal healing</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="bg-treyblue text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<i data-feather="moon" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-semibold text-treyblue mb-3">Mindfulness</h3>
<p class="text-gray-700">Meditation, yoga, and grounding techniques for regulation</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-treyblue text-white py-12">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-4 gap-8 mb-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<img src="https://static.photos/blue/200x200/1" alt="TREY Lighthouse Logo" class="h-10">
<span class="text-lg font-bold">TREY Recovery</span>
</div>
<p class="text-sm text-gray-300">Providing hope and healing for survivors of exploitation since 2015.</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Quick Links</h4>
<ul class="space-y-2 text-sm text-gray-300">
<li><a href="about.html" class="hover:text-treyyellow transition">About Us</a></li>
<li><a href="services.html" class="hover:text-treyyellow transition">Our Services</a></li>
<li><a href="donate.html" class="hover:text-treyyellow transition">Donate</a></li>
<li><a href="contact.html" class="hover:text-treyyellow transition">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Get Help</h4>
<ul class="space-y-2 text-sm text-gray-300">
<li><a href="tel:+19024444444" class="hover:text-treyyellow transition">24/7 Crisis Line: 902-444-4444</a></li>
<li><a href="mailto:info@trey-recovery.org" class="hover:text-treyyellow transition">info@trey-recovery.org</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="bg-blue-700 hover:bg-blue-600 w-8 h-8 rounded-full flex items-center justify-center">
<i data-feather="facebook" class="w-4 h-4"></i>
</a>
<a href="#" class="bg-blue-400 hover:bg-blue-500 w-8 h-8 rounded-full flex items-center justify-center">
<i data-feather="twitter" class="w-4 h-4"></i>
</a>
<a href="#" class="bg-pink-600 hover:bg-pink-700 w-8 h-8 rounded-full flex items-center justify-center">
<i data-feather="instagram" class="w-4 h-4"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-700 pt-8 text-sm text-gray-400 text-center">
<p>© 2023 TREY Trauma Recovery for Exploited Youth. All rights reserved.</p>
<p class="mt-2">Registered Charity #: 12345-6789-RR0001</p>
</div>
</div>
</footer>
<script>
feather.replace();
</script>
</body>
</html> |