Spaces:
Running
Running
File size: 36,326 Bytes
cfeecda 900ce5d 2d151e8 cfeecda af7b413 cfeecda 900ce5d 2d151e8 cfeecda | 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 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TREY Trauma Recovery for Exploited Youth</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
treyblue: '#1e3a8a',
treyyellow: '#fbbf24',
}
}
}
}
</script>
<style>
.quick-exit {
transition: all 0.3s ease;
}
.quick-exit:hover {
transform: scale(1.1);
}
.stats-card {
transition: all 0.3s ease;
}
.stats-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.testimonial-card {
transition: all 0.3s ease;
}
.testimonial-card:hover {
transform: scale(1.02);
}
.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="quick-exit 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">
<div 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>
</div>
<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">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="absolute inset-0 bg-black opacity-30"></div>
<div class="container mx-auto px-4 relative z-10 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">Beacon of Hope for Exploited Youth</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Providing holistic trauma recovery and care for survivors of human trafficking in Nova Scotia</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#donate" class="bg-treyyellow hover:bg-yellow-500 text-treyblue font-bold py-3 px-6 rounded-full transition duration-300">Support Our Mission</a>
<a href="#contact" class="bg-transparent hover:bg-white hover:text-treyblue border-2 border-white text-white font-bold py-3 px-6 rounded-full transition duration-300">Get Help Now</a>
</div>
</div>
</header>
<!-- About Section -->
<section id="about" 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">About TREY</h2>
<div class="w-24 h-1 bg-treyyellow mx-auto"></div>
</div>
<div class="flex flex-col md:flex-row items-center gap-12">
<div class="md:w-1/2">
<img src="http://static.photos/people/640x360/10" alt="Team supporting each other" class="rounded-lg shadow-xl w-full">
</div>
<div class="md:w-1/2">
<h3 class="text-2xl font-semibold text-treyblue mb-4">Our Mission</h3>
<p class="text-gray-700 mb-6">TREY (Trauma Recovery for Exploited Youth) is a Nova Scotia-based organization dedicated to providing comprehensive recovery services for youth who have experienced sexual exploitation and human trafficking. We believe in a trauma-informed, survivor-centered approach that addresses the whole person.</p>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i data-feather="check-circle" class="text-treyyellow mr-2 mt-1"></i>
<span>Founded in 2015 by survivors and trauma specialists</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-treyyellow mr-2 mt-1"></i>
<span>First dedicated safehouse in Atlantic Canada for trafficked youth</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-treyyellow mr-2 mt-1"></i>
<span>Holistic recovery model addressing physical, emotional, mental and spiritual needs</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Who We Are Section -->
<section id="who" 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">Who We Are</h2>
<div class="w-24 h-1 bg-treyyellow mx-auto"></div>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="bg-treyblue text-white rounded-full w-20 h-20 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">Our Team</h3>
<p class="text-gray-700">Comprised of trauma specialists, social workers, counsellors, and survivor advocates with decades of combined experience supporting exploited youth.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="bg-treyblue text-white rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
<i data-feather="heart" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-semibold text-treyblue mb-3">Our Approach</h3>
<p class="text-gray-700">We meet survivors where they're at, providing individualized care plans that respect autonomy and empower personal growth.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="bg-treyblue text-white rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
<i data-feather="home" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-semibold text-treyblue mb-3">Our Safehouse</h3>
<p class="text-gray-700">A confidential, secure location offering trauma-informed residential care with 24/7 support staff and comprehensive services.</p>
</div>
</div>
<div class="mt-12 bg-white p-8 rounded-lg shadow-md">
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="md:w-1/3">
<img src="http://static.photos/blue/320x240/15" alt="Lighthouse representing hope" class="rounded-lg w-full">
</div>
<div class="md:w-2/3">
<h3 class="text-2xl font-semibold text-treyblue mb-4">Why the Lighthouse?</h3>
<p class="text-gray-700 mb-4">Our lighthouse logo symbolizes the guidance and safety we provide to survivors navigating the stormy waters of trauma recovery. Just as a lighthouse warns ships of danger and guides them to safety, TREY serves as a beacon of hope for exploited youth.</p>
<p class="text-gray-700">The blue represents trust, stability and depth of our commitment, while the yellow symbolizes the warmth, hope and light we bring to survivors' lives.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" 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 Services</h2>
<div class="w-24 h-1 bg-treyyellow mx-auto"></div>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-100 p-6 rounded-lg shadow-md border-l-4 border-treyblue">
<div class="flex items-center mb-4">
<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 Support</h3>
</div>
<p class="text-gray-700 mb-4">24/7 crisis response, street outreach, and hospital accompaniment for youth in active exploitation situations.</p>
<ul class="space-y-2 text-gray-700 text-sm">
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Crisis intervention and safety planning</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Transportation to safe locations</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Basic needs provision (food, clothing, hygiene)</span>
</li>
</ul>
</div>
<div class="bg-gray-100 p-6 rounded-lg shadow-md border-l-4 border-treyblue">
<div class="flex items-center mb-4">
<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>
<p class="text-gray-700 mb-4">Confidential residential care with flexible stay durations based on individual needs and recovery progress.</p>
<ul class="space-y-2 text-gray-700 text-sm">
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Trauma-informed living environment</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>24/7 staffing with trained specialists</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Life skills development and education 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>Average stay of 6-18 months</span>
</li>
</ul>
</div>
<div class="bg-gray-100 p-6 rounded-lg shadow-md border-l-4 border-treyblue">
<div class="flex items-center mb-4">
<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>
<p class="text-gray-700 mb-4">Continued support for survivors transitioning to independent living or other long-term housing.</p>
<ul class="space-y-2 text-gray-700 text-sm">
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Ongoing counselling and case management</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-treyyellow mr-2 mt-1 w-4 h-4"></i>
<span>Employment and education 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>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>Alumni events and community building</span>
</li>
</ul>
</div>
</div>
<div class="mt-12 bg-treyblue text-white p-8 rounded-lg shadow-lg">
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="md:w-1/3">
<img src="http://static.photos/yellow/320x240/8" alt="Holistic healing" class="rounded-lg w-full">
</div>
<div class="md:w-2/3">
<h3 class="text-2xl font-semibold mb-4">Our Holistic Recovery Model</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-white bg-opacity-20 p-4 rounded-lg text-center">
<i data-feather="activity" class="w-8 h-8 mx-auto mb-2 text-treyyellow"></i>
<h4 class="font-medium">Physical</h4>
<p class="text-sm">Medical care, nutrition, movement therapy</p>
</div>
<div class="bg-white bg-opacity-20 p-4 rounded-lg text-center">
<i data-feather="heart" class="w-8 h-8 mx-auto mb-2 text-treyyellow"></i>
<h4 class="font-medium">Emotional</h4>
<p class="text-sm">Trauma therapy, emotional regulation</p>
</div>
<div class="bg-white bg-opacity-20 p-4 rounded-lg text-center">
<i data-feather="brain" class="w-8 h-8 mx-auto mb-2 text-treyyellow"></i>
<h4 class="font-medium">Mental</h4>
<p class="text-sm">CBT, education, life skills</p>
</div>
<div class="bg-white bg-opacity-20 p-4 rounded-lg text-center">
<i data-feather="feather" class="w-8 h-8 mx-auto mb-2 text-treyyellow"></i>
<h4 class="font-medium">Spiritual</h4>
<p class="text-sm">Meaning-making, mindfulness, connection</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Statistics Section -->
<section id="stats" 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">Human Trafficking in Canada</h2>
<div class="w-24 h-1 bg-treyyellow mx-auto"></div>
<p class="text-gray-600 max-w-2xl mx-auto">Recent statistics highlight the urgent need for specialized services like those TREY provides. All data sourced from <a href="https://www.publicsafety.gc.ca" class="text-treyblue underline" target="_blank">Public Safety Canada</a> and <a href="https://www.rcmp-grc.gc.ca" class="text-treyblue underline" target="_blank">RCMP reports</a>.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
<div class="stats-card bg-white p-6 rounded-lg shadow-md text-center">
<div class="text-4xl font-bold text-treyblue mb-2">93%</div>
<p class="text-gray-700">of trafficking victims in Canada are domestic</p>
</div>
<div class="stats-card bg-white p-6 rounded-lg shadow-md text-center">
<div class="text-4xl font-bold text-treyblue mb-2">72%</div>
<p class="text-gray-700">are under age 25 when exploitation begins</p>
</div>
<div class="stats-card bg-white p-6 rounded-lg shadow-md text-center">
<div class="text-4xl font-bold text-treyblue mb-2">1,400+</div>
<p class="text-gray-700">human trafficking cases reported annually</p>
</div>
<div class="stats-card bg-white p-6 rounded-lg shadow-md text-center">
<div class="text-4xl font-bold text-treyblue mb-2">3-5x</div>
<p class="text-gray-700">higher rates in Atlantic Canada than national average</p>
</div>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg">
<h3 class="text-2xl font-semibold text-treyblue mb-6 text-center">Youth Vulnerability Factors</h3>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h4 class="text-lg font-medium text-treyblue mb-3 flex items-center">
<i data-feather="alert-triangle" class="text-treyyellow mr-2"></i>
Risk Factors
</h4>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<span class="bg-treyblue text-white rounded-full w-5 h-5 flex items-center justify-center text-xs mr-3 mt-1">1</span>
<span>History of childhood abuse or neglect</span>
</li>
<li class="flex items-start">
<span class="bg-treyblue text-white rounded-full w-5 h-5 flex items-center justify-center text-xs mr-3 mt-1">2</span>
<span>Indigenous identity (disproportionately affected)</span>
</li>
<li class="flex items-start">
<span class="bg-treyblue text-white rounded-full w-5 h-5 flex items-center justify-center text-xs mr-3 mt-1">3</span>
<span>LGBTQ2S+ youth facing family rejection</span>
</li>
<li class="flex items-start">
<span class="bg-treyblue text-white rounded-full w-5 h-5 flex items-center justify-center text-xs mr-3 mt-1">4</span>
<span>Involvement in child welfare system</span>
</li>
</ul>
</div>
<div>
<h4 class="text-lg font-medium text-treyblue mb-3 flex items-center">
<i data-feather="shield" class="text-treyyellow mr-2"></i>
Protective Factors
</h4>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<span class="bg-treyblue text-white rounded-full w-5 h-5 flex items-center justify-center text-xs mr-3 mt-1">1</span>
<span>Safe, stable housing (like TREY's safehouse)</span>
</li>
<li class="flex items-start">
<span class="bg-treyblue text-white rounded-full w-5 h-5 flex items-center justify-center text-xs mr-3 mt-1">2</span>
<span>Trauma-informed support services</span>
</li>
<li class="flex items-start">
<span class="bg-treyblue text-white rounded-full w-5 h-5 flex items-center justify-center text-xs mr-3 mt-1">3</span>
<span>Education and employment opportunities</span>
</li>
<li class="flex items-start">
<span class="bg-treyblue text-white rounded-full w-5 h-5 flex items-center justify-center text-xs mr-3 mt-1">4</span>
<span>Community connections and peer support</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Survivor Stories Section -->
<section id="stories" 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">Survivor Stories</h2>
<div class="w-24 h-1 bg-treyyellow mx-auto"></div>
<p class="text-gray-600 max-w-2xl mx-auto">Names and identifying details have been changed to protect privacy. These are real experiences shared with consent.</p>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="testimonial-card bg-gray-50 p-8 rounded-lg shadow-md border-t-4 border-treyyellow">
<div class="flex items-center mb-6">
<img src="http://static.photos/people/200x200/1" alt="Alex" class="w-16 h-16 rounded-full mr-4">
<div>
<h4 class="font-semibold text-treyblue">Alex, 19</h4>
<p class="text-gray-600 text-sm">Safehouse resident, 2022-2023</p>
</div>
</div>
<blockquote class="text-gray-700 italic mb-6">
"I came to TREY with nothing but the clothes I was wearing and so much fear. The staff never judged me, even when I struggled to trust. They helped me see my own strength. Now I'm in college and have my own apartment - things I never dreamed possible."
</blockquote>
<div class="flex justify-end">
<i data-feather="quote" class="text-treyblue opacity-30 w-12 h-12"></i>
</div>
</div>
<div class="testimonial-card bg-gray-50 p-8 rounded-lg shadow-md border-t-4 border-treyyellow">
<div class="flex items-center mb-6">
<img src="http://static.photos/people/200x200/2" alt="Jordan" class="w-16 h-16 rounded-full mr-4">
<div>
<h4 class="font-semibold text-treyblue">Jordan, 21</h4>
<p class="text-gray-600 text-sm">Aftercare program participant</p>
</div>
</div>
<blockquote class="text-gray-700 italic mb-6">
"After three years of being controlled, TREY was the first place I felt safe enough to sleep through the night. Their holistic approach helped me reconnect with my Indigenous culture, which has been crucial to my healing journey."
</blockquote>
<div class="flex justify-end">
<i data-feather="quote" class="text-treyblue opacity-30 w-12 h-12"></i>
</div>
</div>
</div>
<div class="mt-12 bg-treyblue text-white p-8 rounded-lg shadow-lg">
<div class="max-w-4xl mx-auto text-center">
<h3 class="text-2xl font-semibold mb-6">Breaking the Cycle</h3>
<p class="mb-6">Since 2015, TREY has supported over 120 survivors in their recovery journeys. Our alumni success stories include:</p>
<div class="grid md:grid-cols-3 gap-6 text-center">
<div>
<div class="text-3xl font-bold mb-2">85%</div>
<p>Maintained stable housing 1 year after program</p>
</div>
<div>
<div class="text-3xl font-bold mb-2">72%</div>
<p>Pursued education or employment</p>
</div>
<div>
<div class="text-3xl font-bold mb-2">92%</div>
<p>Reported improved mental health</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Donate Section -->
<section id="donate" class="py-16 bg-gradient-to-r from-treyblue to-blue-800 text-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Support Our Work</h2>
<div class="w-24 h-1 bg-treyyellow mx-auto"></div>
<p class="max-w-2xl mx-auto">Your donation directly supports survivor care, safehouse operations, and prevention education in our communities.</p>
</div>
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="bg-white bg-opacity-10 p-8 rounded-lg border border-white border-opacity-20 text-center">
<h3 class="text-xl font-semibold mb-4">Basic Needs</h3>
<div class="text-4xl font-bold mb-6">$50</div>
<p class="mb-6">Provides a survivor with clothing, toiletries and essential items upon arrival</p>
<button class="bg-treyyellow hover:bg-yellow-500 text-treyblue font-bold py-2 px-6 rounded-full transition duration-300">Donate Now</button>
</div>
<div class="bg-white bg-opacity-20 p-8 rounded-lg border border-white border-opacity-20 text-center transform scale-105">
<h3 class="text-xl font-semibold mb-4">Weekly Therapy</h3>
<div class="text-4xl font-bold mb-6">$150</div>
<p class="mb-6">Funds one week of specialized trauma counselling for a survivor</p>
<button class="bg-treyyellow hover:bg-yellow-500 text-treyblue font-bold py-2 px-6 rounded-full transition duration-300">Donate Now</button>
</div>
<div class="bg-white bg-opacity-10 p-8 rounded-lg border border-white border-opacity-20 text-center">
<h3 class="text-xl font-semibold mb-4">Safehouse Stay</h3>
<div class="text-4xl font-bold mb-6">$500</div>
<p class="mb-6">Supports one week of safe housing, food, and 24/7 care</p>
<button class="bg-treyyellow hover:bg-yellow-500 text-treyblue font-bold py-2 px-6 rounded-full transition duration-300">Donate Now</button>
</div>
</div>
<div class="mt-12 bg-white bg-opacity-10 p-8 rounded-lg max-w-4xl mx-auto">
<h3 class="text-xl font-semibold mb-6 text-center">Other Ways to Give</h3>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h4 class="font-medium mb-3 flex items-center">
<i data-feather="repeat" class="mr-2 text-treyyellow"></i>
Monthly Giving
</h4>
<p class="text-sm">Recurring donations provide stable funding for our programs. Even $20/month makes a lasting impact.</p>
<button class="mt-4 bg-treyyellow hover:bg-yellow-500 text-treyblue font-bold py-2 px-4 rounded-full text-sm transition duration-300">Become a Monthly Donor</button>
</div>
<div>
<h4 class="font-medium mb-3 flex items-center">
<i data-feather="gift" class="mr-2 text-treyyellow"></i>
In-Kind Donations
</h4>
<p class="text-sm">We accept new clothing, hygiene products, gift cards, and other items to support survivors.</p>
<button class="mt-4 bg-transparent hover:bg-white hover:text-treyblue border border-white text-white font-bold py-2 px-4 rounded-full text-sm transition duration-300">See Wish List</button>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" 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">Contact Us</h2>
<div class="w-24 h-1 bg-treyyellow mx-auto"></div>
<p class="text-gray-600 max-w-2xl mx-auto">If you or someone you know needs help, please reach out. All communications are confidential.</p>
</div>
<div class="grid md:grid-cols-2 gap-12 max-w-5xl mx-auto">
<div class="bg-gray-50 p-8 rounded-lg shadow-md">
<h3 class="text-xl font-semibold text-treyblue mb-6">Get in Touch</h3>
<form>
<div class="mb-4">
<label for="name" class="block text-gray-700 text-sm font-medium mb-2">Name</label>
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-treyblue focus:border-transparent">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 text-sm font-medium mb-2">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-treyblue focus:border-transparent">
</div>
<div class="mb-4">
<label for="subject" class="block text-gray-700 text-sm font-medium mb-2">Subject</label>
<select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-treyblue focus:border-transparent">
<option value="">Select a topic</option>
<option value="help">I need help</option>
<option value="referral">Professional referral</option>
<option value="volunteer">Volunteer inquiry</option>
<option value="donation">Donation question</option>
<option value="other">Other</option>
</select>
</div>
<div class="mb-6">
<label for="message" class="block text-gray-700 text-sm font-medium mb-2">Message</label>
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-treyblue focus:border-transparent"></textarea>
</div>
<button type="submit" class="w-full bg-treyblue hover:bg-blue-800 text-white font-bold py-3 px-4 rounded-lg transition duration-300">Send Message</button>
</form>
</div>
<div>
<div class="bg-gray-50 p-8 rounded-lg shadow-md mb-8">
<h3 class="text-xl font-semibold text-treyblue mb-4">Emergency Contact</h3>
<p class="text-gray-700 mb-6">If you or someone you know is in immediate danger, please call 911.</p>
<div class="bg-treyblue text-white p-4 rounded-lg">
<div class="flex items-center mb-2">
<i data-feather="phone" class="mr-2 text-treyyellow"></i>
<span class="font-semibold">24/7 Crisis Line:</span>
</div>
<a href="tel:+19024444444" class="text-xl font-bold block mb-4">902-444-4444</a>
<p class="text-sm">Text or call. All conversations confidential.</p>
</div>
</div>
<div class="bg-gray-50 p-8 rounded-lg shadow-md">
<h3 class="text-xl font-semibold text-treyblue mb-4">Our Location</h3>
<p class="text-gray-700 mb-4">For safety reasons, our safehouse location is confidential. All meetings are arranged by appointment.</p>
<div class="flex items-start mb-4">
<i data-feather="mail" class="mr-3 mt-1 text-treyblue"></i>
<span>info@trey-recovery.org</span>
</div>
<div class="flex items-start mb-4">
<i data-feather="map-pin" class="mr-3 mt-1 text-treyblue"></i>
<span>Halifax Regional Municipality, Nova Scotia</span>
</div>
<div class="flex items-start">
<i data-feather="clock" class="mr-3 mt-1 text-treyblue"></i>
<span>Administrative office hours: Monday-Friday, 9am-5pm AT</span>
</div>
</div>
</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" class="hover:text-treyyellow transition">About Us</a></li>
<li><a href="#services" class="hover:text-treyyellow transition">Our Services</a></li>
<li><a href="#stats" class="hover:text-treyyellow transition">Statistics</a></li>
<li><a href="#donate" class="hover:text-treyyellow transition">Donate</a></li>
<li><a href="#contact" class="hover:text-treyyellow transition">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Legal</h4>
<ul class="space-y-2 text-sm text-gray-300">
<li><a href="#" class="hover:text-treyyellow transition">Privacy Policy</a></li>
<li><a href="#" class="hover:text-treyyellow transition">Terms of Service</a></li>
<li><a href="#" class="hover:text-treyyellow transition">Financial Reports</a></li>
<li><a href="#" class="hover:text-treyyellow transition">Careers</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Connect</h4>
<div class="flex space-x-4 mb-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>
<a href="#" class="bg-red-600 hover:bg-red-700 w-8 h-8 rounded-full flex items-center justify-center">
<i data-feather="youtube" class="w-4 h-4"></i>
</a>
</div>
<p class="text-sm text-gray-300">Sign up for our newsletter:</p>
<div class="flex mt-2">
<input type="email" placeholder="Your email" class="px-3 py-2 text-gray-800 rounded-l-lg text-sm focus:outline-none w-full">
<button class="bg-treyyellow hover:bg-yellow-500 text-treyblue px-3 rounded-r-lg text-sm font-medium">Join</button>
</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. | Registered Charity #: 12345-6789-RR0001</p>
<p class="mt-2">Website designed with care for survivors.</p>
</div>
</div>
</footer>
<script>
// Initialize feather icons
feather.replace();
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Mobile menu toggle would go here
const mobileMenuButton = document.querySelector('button[aria-label="mobile menu"]');
// Implementation would be added for mobile responsiveness
</script>
</body>
</html>
|