Spaces:

AL-Consulting
/

undefined

Running

App Files Files Community

AL-Consulting commited on Oct 20, 2025

Commit

cfeecda

verified ·

1 Parent(s): 226f347

can i have the edits please

Browse files

Files changed (4) hide show

README.md +8 -4
about.html +654 -0
donate.html +335 -0
index.html +653 -18

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 🌍
 colorFrom: purple
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: undefined
 colorFrom: purple
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

about.html ADDED Viewed

	@@ -0,0 +1,654 @@

+<!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="http://static.photos/blue/200x200/42" alt="TREY Lighthouse Logo" class="h-12 w-12 rounded-full">
+            <span class="text-xl font-bold">TREY Trauma Recovery</span>
+          </div>
+          <div class="hidden md:flex items-center space-x-8">
+            <a href="#about" class="nav-link">About</a>
+            <a href="#who" class="nav-link">Who We Are</a>
+            <a href="#services" class="nav-link">Our Services</a>
+            <a href="#stats" class="nav-link">Statistics</a>
+            <a href="#stories" class="nav-link">Survivor Stories</a>
+            <a href="#donate" class="nav-link">Donate</a>
+            <a href="#contact" 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="http://static.photos/blue/200x200/42" alt="TREY Logo" class="h-10 w-10 rounded-full">
+              <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>

donate.html ADDED Viewed

	@@ -0,0 +1,335 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About TREY - Trauma Recovery for Exploited Youth</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+      .timeline-item {
+        position: relative;
+        padding-left: 3rem;
+        margin-bottom: 3rem;
+      }
+      .timeline-item:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 2px;
+        height: 100%;
+        background: #fbbf24;
+      }
+      .timeline-dot {
+        position: absolute;
+        left: -0.5rem;
+        top: 0;
+        width: 1.5rem;
+        height: 1.5rem;
+        border-radius: 50%;
+        background: #1e3a8a;
+        border: 3px solid #fbbf24;
+      }
+      .team-card:hover img {
+        transform: scale(1.05);
+      }
+    </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-blue-900 hover:bg-red-600 text-white px-4 py-2 rounded-full shadow-lg flex items-center gap-2 transition duration-300">
+        <i data-feather="alert-circle"></i>
+        Quick Exit
+      </a>
+    </div>
+    <!-- Navigation -->
+    <nav class="bg-blue-900 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="http://static.photos/blue/200x200/42" alt="TREY Lighthouse Logo" class="h-12 w-12 rounded-full">
+            <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="text-yellow-300 font-medium">About</a>
+            <a href="index.html#who" class="hover:text-yellow-300 transition">Who We Are</a>
+            <a href="index.html#services" class="hover:text-yellow-300 transition">Our Services</a>
+            <a href="index.html#stats" class="hover:text-yellow-300 transition">Statistics</a>
+            <a href="index.html#stories" class="hover:text-yellow-300 transition">Survivor Stories</a>
+            <a href="index.html#donate" class="hover:text-yellow-300 transition">Donate</a>
+            <a href="index.html#contact" class="hover:text-yellow-300 transition">Contact</a>
+          </div>
+          <button class="md:hidden focus:outline-none">
+            <i data-feather="menu"></i>
+          </button>
+        </div>
+      </div>
+    </nav>
+    <!-- About Hero -->
+    <header class="relative bg-gradient-to-r from-blue-900 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-5xl font-bold mb-6">Our Story & Impact</h1>
+        <p class="text-xl mb-8 max-w-3xl mx-auto">How TREY became Atlantic Canada's leading provider of specialized care for trafficked youth</p>
+      </div>
+    </header>
+    <!-- Our History -->
+    <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-blue-900 mb-4">Our History</h2>
+          <div class="w-24 h-1 bg-yellow-400 mx-auto"></div>
+        </div>
+        <div class="max-w-4xl mx-auto">
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div class="bg-gray-100 p-6 rounded-lg shadow-sm">
+              <div class="text-sm text-yellow-600 font-semibold mb-1">2014</div>
+              <h3 class="text-xl font-semibold text-blue-900 mb-2">The Beginning</h3>
+              <p class="text-gray-700">Founders Sarah Johnson and Dr. Michael Chen, recognizing the gap in services for trafficked youth in Atlantic Canada, begin developing the TREY model based on best practices from across North America.</p>
+            </div>
+          </div>
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div class="bg-gray-100 p-6 rounded-lg shadow-sm">
+              <div class="text-sm text-yellow-600 font-semibold mb-1">June 2015</div>
+              <h3 class="text-xl font-semibold text-blue-900 mb-2">Official Launch</h3>
+              <p class="text-gray-700">TREY incorporates as a nonprofit and begins providing outreach services with a staff of 3 and a network of volunteer mentors.</p>
+            </div>
+          </div>
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div class="bg-gray-100 p-6 rounded-lg shadow-sm">
+              <div class="text-sm text-yellow-600 font-semibold mb-1">January 2017</div>
+              <h3 class="text-xl font-semibold text-blue-900 mb-2">Safehouse Opening</h3>
+              <p class="text-gray-700">With funding from private donors and a government grant, TREY opens Atlantic Canada's first dedicated safehouse for trafficked youth, with capacity for 6 residents.</p>
+            </div>
+          </div>
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div class="bg-gray-100 p-6 rounded-lg shadow-sm">
+              <div class="text-sm text-yellow-600 font-semibold mb-1">2019</div>
+              <h3 class="text-xl font-semibold text-blue-900 mb-2">Program Expansion</h3>
+              <p class="text-gray-700">TREY adds Indigenous cultural supports and trauma-informed yoga therapy to its holistic model, responding to community needs.</p>
+            </div>
+          </div>
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div class="bg-gray-100 p-6 rounded-lg shadow-sm">
+              <div class="text-sm text-yellow-600 font-semibold mb-1">2022</div>
+              <h3 class="text-xl font-semibold text-blue-900 mb-2">Growing Impact</h3>
+              <p class="text-gray-700">TREY celebrates serving over 100 survivors since inception and expands safehouse capacity to 10 beds with specialized trauma recovery spaces.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Our Model -->
+    <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-blue-900 mb-4">Our Recovery Model</h2>
+          <div class="w-24 h-1 bg-yellow-400 mx-auto"></div>
+          <p class="text-gray-600 max-w-2xl mx-auto mt-4">Developed by trauma specialists and informed by survivor feedback, our model addresses all aspects of healing.</p>
+        </div>
+        <div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+          <div class="bg-white p-8 rounded-lg shadow-md">
+            <h3 class="text-xl font-semibold text-blue-900 mb-4">Four Pillars Framework</h3>
+            <div class="space-y-6">
+              <div class="flex items-start">
+                <div class="bg-blue-900 text-white rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0">
+                  <i data-feather="activity" class="w-5 h-5"></i>
+                </div>
+                <div>
+                  <h4 class="font-medium text-blue-900 mb-1">Physical Safety</h4>
+                  <p class="text-gray-700 text-sm">Secure housing, medical care, nutrition, and body-based therapies to rebuild physical wellbeing.</p>
+                </div>
+              </div>
+              <div class="flex items-start">
+                <div class="bg-blue-900 text-white rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0">
+                  <i data-feather="heart" class="w-5 h-5"></i>
+                </div>
+                <div>
+                  <h4 class="font-medium text-blue-900 mb-1">Emotional Healing</h4>
+                  <p class="text-gray-700 text-sm">Trauma therapy, support groups, and expressive arts to process experiences and rebuild trust.</p>
+                </div>
+              </div>
+              <div class="flex items-start">
+                <div class="bg-blue-900 text-white rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0">
+                  <i data-feather="brain" class="w-5 h-5"></i>
+                </div>
+                <div>
+                  <h4 class="font-medium text-blue-900 mb-1">Cognitive Restoration</h4>
+                  <p class="text-gray-700 text-sm">Education support, life skills training, and career counseling to rebuild independence.</p>
+                </div>
+              </div>
+              <div class="flex items-start">
+                <div class="bg-blue-900 text-white rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0">
+                  <i data-feather="feather" class="w-5 h-5"></i>
+                </div>
+                <div>
+                  <h4 class="font-medium text-blue-900 mb-1">Spiritual Connection</h4>
+                  <p class="text-gray-700 text-sm">Meaning-making, cultural reconnection, and mindfulness practices to restore purpose.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="bg-white p-8 rounded-lg shadow-md">
+            <h3 class="text-xl font-semibold text-blue-900 mb-4">Our Unique Approach</h3>
+            <div class="space-y-4">
+              <div class="bg-blue-50 p-4 rounded-lg">
+                <h4 class="font-medium text-blue-900 flex items-center mb-2">
+                  <i data-feather="user" class="mr-2 text-yellow-400"></i>
+                  Survivor-Centered
+                </h4>
+                <p class="text-gray-700 text-sm">Programs designed with and by survivors, with choices and autonomy at the core.</p>
+              </div>
+              <div class="bg-blue-50 p-4 rounded-lg">
+                <h4 class="font-medium text-blue-900 flex items-center mb-2">
+                  <i data-feather="clock" class="mr-2 text-yellow-400"></i>
+                  Stage-Based
+                </h4>
+                <p class="text-gray-700 text-sm">Services adapt to each survivor's stage of recovery, from crisis to stability to growth.</p>
+              </div>
+              <div class="bg-blue-50 p-4 rounded-lg">
+                <h4 class="font-medium text-blue-900 flex items-center mb-2">
+                  <i data-feather="globe" class="mr-2 text-yellow-400"></i>
+                  Culturally Inclusive
+                </h4>
+                <p class="text-gray-700 text-sm">Recognizing the disproportionate impact on Indigenous communities and other marginalized groups.</p>
+              </div>
+              <div class="bg-blue-50 p-4 rounded-lg">
+                <h4 class="font-medium text-blue-900 flex items-center mb-2">
+                  <i data-feather="home" class="mr-2 text-yellow-400"></i>
+                  Community-Integrated
+                </h4>
+                <p class="text-gray-700 text-sm">Building bridges with local services and employers to support long-term success.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Our Team -->
+    <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-blue-900 mb-4">Meet Our Leadership</h2>
+          <div class="w-24 h-1 bg-yellow-400 mx-auto"></div>
+          <p class="text-gray-600 max-w-2xl mx-auto mt-4">Compassionate professionals dedicated to transforming lives</p>
+        </div>
+        <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+          <div class="team-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition duration-300">
+            <div class="overflow-hidden h-64">
+              <img src="http://static.photos/people/640x480/5" alt="Sarah Johnson" class="w-full h-full object-cover transition duration-500">
+            </div>
+            <div class="p-6">
+              <h3 class="text-xl font-semibold text-blue-900">Sarah Johnson</h3>
+              <p class="text-yellow-600 text-sm mb-3">Co-Founder & Executive Director</p>
+              <p class="text-gray-700 text-sm">MSW, with 15 years experience in anti-trafficking work and survivor advocacy.</p>
+            </div>
+          </div>
+          <div class="team-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition duration-300">
+            <div class="overflow-hidden h-64">
+              <img src="http://static.photos/people/640x480/6" alt="Dr. Michael Chen" class="w-full h-full object-cover transition duration-500">
+            </div>
+            <div class="p-6">
+              <h3 class="text-xl font-semibold text-blue-900">Dr. Michael Chen</h3>
+              <p class="text-yellow-600 text-sm mb-3">Co-Founder & Clinical Director</p>
+              <p class="text-gray-700 text-sm">PhD in Clinical Psychology, specializing in complex trauma recovery.</p>
+            </div>
+          </div>
+          <div class="team-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition duration-300">
+            <div class="overflow-hidden h-64">
+              <img src="http://static.photos/people/640x480/7" alt="Mia Gabriel" class="w-full h-full object-cover transition duration-500">
+            </div>
+            <div class="p-6">
+              <h3 class="text-xl font-semibold text-blue-900">Mia Gabriel</h3>
+              <p class="text-yellow-600 text-sm mb-3">Director of Indigenous Relations</p>
+              <p class="text-gray-700 text-sm">Mi'kmaq knowledge keeper and trauma-informed care specialist.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-blue-900 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="http://static.photos/blue/200x200/42" alt="TREY Logo" class="h-10 w-10 rounded-full">
+              <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="text-yellow-300">About Us</a></li>
+              <li><a href="index.html#who" class="hover:text-yellow-300 transition">Who We Are</a></li>
+              <li><a href="index.html#services" class="hover:text-yellow-300 transition">Our Services</a></li>
+              <li><a href="index.html#stats" class="hover:text-yellow-300 transition">Statistics</a></li>
+              <li><a href="index.html#contact" class="hover:text-yellow-300 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-yellow-300 transition">24/7 Crisis Line: 902-444-4444</a></li>
+              <li><a href="mailto:info@trey-recovery.org" class="hover:text-yellow-300 transition">info@trey-recovery.org</a></li>
+              <li><a href="#" class="hover:text-yellow-300 transition">Confidential Inquiry Form</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>
+            <p class="text-sm text-gray-300 mt-4">Sign up for our newsletter to stay updated.</p>
+          </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>

index.html CHANGED Viewed

@@ -1,19 +1,654 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!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="http://static.photos/blue/200x200/42" alt="TREY Lighthouse Logo" class="h-12 w-12 rounded-full">
+            <span class="text-xl font-bold">TREY Trauma Recovery</span>
+          </div>
+          <div class="hidden md:flex items-center space-x-8">
+            <a href="#about" class="nav-link">About</a>
+            <a href="#who" class="nav-link">Who We Are</a>
+            <a href="#services" class="nav-link">Our Services</a>
+            <a href="#stats" class="nav-link">Statistics</a>
+            <a href="#stories" class="nav-link">Survivor Stories</a>
+            <a href="#donate" class="nav-link">Donate</a>
+            <a href="#contact" 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="http://static.photos/blue/200x200/42" alt="TREY Logo" class="h-10 w-10 rounded-full">
+              <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>