Spaces:
Running
Running
use an image of a lighthouse , or search the internet and find the logo for TREY Trauma Recovery for Exploited Youth here
900ce5d verified | <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> | |