83 lines
15 KiB
HTML
83 lines
15 KiB
HTML
|
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><title>moonlight institute</title><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="/_astro/about.VnERiBqh.css"></head> <body class="font-inter"> <header class="bg-midnight shadow-md"> <div class="container mx-auto px-4 py-4 flex justify-between items-center"> <a href="/" class="flex font-serif font-bold items-center"> <img src="/_astro/logo.B4JwDBCK_fI1oy.webp" alt="Company Logo" class="rounded-lg" width="48" height="48" loading="lazy" decoding="async"> <span class="ml-4 text-white text-2xl">moonlight institute</span> </a> <nav class="hidden md:flex space-x-6"> <a href="/about" class="text-white hover:text-moonlight-hover transition duration-150 ease-in-out"> About </a><a href="/governance" class="text-white hover:text-moonlight-hover transition duration-150 ease-in-out"> Governance </a><a href="/projects" class="text-white hover:text-moonlight-hover transition duration-150 ease-in-out"> Projects </a> </nav> <a href="/#" class="bg-moonlight-hover text-white px-4 py-2 rounded hover:bg-primary-600 transition duration-150 ease-in-out" style="display:none">
|
|||
|
|
🤍 Donate
|
|||
|
|
</a> </div> </header> <main> <section class="bg-midnight py-20"> <div class="container mx-auto px-4"> <div class="flex flex-col lg:flex-row items-center"> <div class="lg:w-1/2 lg:pr-12"> <h1 class="text-5xl lg:text-6xl font-serif font-bold text-white mb-6">
|
|||
|
|
illuminating pathways
|
|||
|
|
</h1> <p class="text-xl text-gray-300 mb-8">
|
|||
|
|
to a sustainable, equitable, and just world for generations to come
|
|||
|
|
</p> </div> <div class="lg:w-1/2 mt-10 lg:mt-0 relative"> <img src="/_astro/hero-image.B98NS7iW_ZH2xEw.webp" alt="Happy family" class="rounded-lg shadow-xl" width="600" height="400" loading="lazy" decoding="async"> <!--<button
|
|||
|
|
id="playButton"
|
|||
|
|
class="absolute bottom-4 left-4 bg-white bg-opacity-80 text-gray-800 px-4 py-2 rounded-full flex items-center space-x-2 hover:bg-opacity-100 transition duration-300"
|
|||
|
|
>
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|||
|
|
</svg>
|
|||
|
|
<span>See how this works</span>
|
|||
|
|
</button> --> </div> </div> </div> </section> <!-- Video Modal --> <!--
|
|||
|
|
<div id="videoModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
|
|||
|
|
<div class="bg-white rounded-lg p-8 max-w-3xl w-full">
|
|||
|
|
<div class="flex justify-between items-center mb-4">
|
|||
|
|
<h3 class="text-2xl font-bold">How Your Co. Works</h3>
|
|||
|
|
<button id="closeModal" class="text-gray-500 hover:text-gray-700">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="aspect-w-16 aspect-h-9">
|
|||
|
|
<iframe
|
|||
|
|
id="youtubeVideo"
|
|||
|
|
class="w-full h-full"
|
|||
|
|
src="https://www.youtube.com/embed/f4D55v97wLM"
|
|||
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|||
|
|
allowfullscreen
|
|||
|
|
></iframe>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// components/Hero.astro
|
|||
|
|
const playButton = document.getElementById('playButton');
|
|||
|
|
const videoModal = document.getElementById('videoModal');
|
|||
|
|
const closeModal = document.getElementById('closeModal');
|
|||
|
|
const youtubeVideo = document.getElementById('youtubeVideo') as HTMLIFrameElement;
|
|||
|
|
|
|||
|
|
playButton?.addEventListener('click', () => {
|
|||
|
|
videoModal?.classList.remove('hidden');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
closeModal?.addEventListener('click', () => {
|
|||
|
|
videoModal?.classList.add('hidden');
|
|||
|
|
youtubeVideo.contentWindow?.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
videoModal?.addEventListener('click', (e) => {
|
|||
|
|
if (e.target === videoModal) {
|
|||
|
|
videoModal.classList.add('hidden');
|
|||
|
|
youtubeVideo.contentWindow?.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
--> <section class="bg-moonlight-700 py-20 text-white text-center"> <div class="container mx-auto px-4"> <h2 class="text-4xl font-serif font-bold mb-20">Our Projects</h2> <!--
|
|||
|
|
<p class="text-xl mb-12 max-w-2xl mx-auto">
|
|||
|
|
Your Company reaches and motivates individuals struggling to adhere to care plans, rewarding them for healthy behaviors.
|
|||
|
|
</p>
|
|||
|
|
--> <div class="bg-white text-moonlight-500 rounded-lg shadow-lg p-8"> <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-8"> <div class="flex flex-col items-center"> <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" class="w-16 h-16 mb-4 text-moonlight-500" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M48 0C21.53 0 0 21.53 0 48v64c0 8.84 7.16 16 16 16h80V48C96 21.53 74.47 0 48 0zm208 412.57V352h288V96c0-52.94-43.06-96-96-96H111.59C121.74 13.41 128 29.92 128 48v368c0 38.87 34.65 69.65 74.75 63.12C234.22 474 256 444.46 256 412.57zM288 384v32c0 52.93-43.06 96-96 96h336c61.86 0 112-50.14 112-112 0-8.84-7.16-16-16-16H288z"></path></svg> <p class="text-lg font-semibold">Policy</p> <p class="text-sm font-normal">Decolonized governance structures, economic models, and ethical use of technology, intended for implementation in Canada.</p> <a href="projects" class="inline-block bg-moonlight-500 text-white font-bold py-3 px-8 mt-4 rounded-full hover:bg-moonlight-500 transition duration-300">Learn More</a> </div><div class="flex flex-col items-center"> <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="w-16 h-16 mb-4 text-moonlight-500" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M507.73 109.1c-2.24-9.03-13.54-12.09-20.12-5.51l-74.36 74.36-67.88-11.31-11.31-67.88 74.36-74.36c6.62-6.62 3.43-17.9-5.66-20.16-47.38-11.74-99.55.91-136.58 37.93-39.64 39.64-50.55 97.1-34.05 147.2L18.74 402.76c-24.99 24.99-24.99 65.51 0 90.5 24.99 24.99 65.51 24.99 90.5 0l213.21-213.21c50.12 16.71 107.47 5.68 147.37-34.22 37.07-37.07 49.7-89.32 37.91-136.73zM64 472c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z"></path></svg> <p class="text-lg font-semibold">Tools</p> <p class="text-sm font-normal">On the ground projects and technological tools to encourage and facilitate development of a just and sustainable society.</p> <a href="projects" class="inline-block bg-moonlight-500 text-white font-bold py-3 px-8 mt-4 rounded-full hover:bg-moonlight-500 transition duration-300">Learn More</a> </div><div class="flex flex-col items-center"> <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" class="w-16 h-16 mb-4 text-moonlight-500" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M576 240c0-23.63-12.95-44.04-32-55.12V32.01C544 23.26 537.02 0 512 0c-7.12 0-14.19 2.38-19.98 7.02l-85.03 68.03C364.28 109.19 310.66 128 256 128H64c-35.35 0-64 28.65-64 64v96c0 35.35 28.65 64 64 64h33.7c-1.39 10.48-2.18 21.14-2.18 32 0 39.77 9.26 77.35 25.56 110.94 5.19 10.69 16.52 17.06 28.4 17.06h74.28c26.05 0 41.69-29.84 25.9-50.56-16.4-21.52-26.15-48.36-26.15-77.44 0-11.11 1.62-21.79 4.41-32H256c54.66 0 108.28 18.81 150.98 52.95l85.03 68.03a32.023 32.023 0 0 0 19.98 7.02c24.92 0 32-22.78 32-32V295.13C563.05 284.04 576 263.63 576 240zm-96 141.42l-33.05-26.44C392.95 311.78 325.12 288 256 288v-96c69.12 0 136.95-23.78 190.95-66.98L480 98.58v282.84z"></path></svg> <p class="text-lg font-semibold">Media</p> <p class="text-sm font-normal">Developing communication tools to heal divides and converse about the future we need, and communicate pathways and hope.</p> <a href="projects" class="inline-block bg-moonlight-500 text-white font-bold py-3 px-8 mt-4 rounded-full hover:bg-moonlight-500 transition duration-300">Learn More</a> </div> </div> </div> <!--
|
|||
|
|
<p class="text-xl mt-12 mb-8 max-w-2xl mx-auto">
|
|||
|
|
Our science-backed platform is built on the principles of behavioral economics to work for the hardest-to-reach populations.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<a href="/platform" class="inline-block bg-white text-blue-700 font-bold py-3 px-8 rounded-full hover:bg-blue-100 transition duration-300">
|
|||
|
|
Explore the Your Company platform
|
|||
|
|
</a>
|
|||
|
|
--> </div> </section> <section class="bg-stone-100 py-20"> <div class="container mx-auto px-4"> <div class="max-w-6xl mx-auto flex flex-col lg:flex-row gap-16"> <div class="lg:w-1/3"> <h2 class="text-4xl font-serif font-bold text-gray-800 mb-4">Talk to us</h2> <!--
|
|||
|
|
<p class="text-xl text-gray-600">
|
|||
|
|
Learn how Wellth can impact health, cost, and quality outcomes for your organization.
|
|||
|
|
</p>
|
|||
|
|
--> </div> <div class="lg:w-2/3"> <form class="space-y-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <label for="firstName" class="block text-sm font-medium text-gray-700 mb-1">First name*</label> <input type="text" id="firstName" name="firstName" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-moonlight-500 focus:border-moonlight-500"> </div> <div> <label for="lastName" class="block text-sm font-medium text-gray-700 mb-1">Last name*</label> <input type="text" id="lastName" name="lastName" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500"> </div> </div> <div> <label for="workEmail" class="block text-sm font-medium text-gray-700 mb-1">Work email*</label> <input type="email" id="workEmail" name="workEmail" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500"> </div> <div> <label for="phoneNumber" class="block text-sm font-medium text-gray-700 mb-1">Phone number*</label> <input type="tel" id="phoneNumber" name="phoneNumber" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500"> </div> <div> <label for="message" class="block text-sm font-medium text-gray-700 mb-1">How can we help?</label> <textarea id="message" name="message" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500"></textarea> </div> <div> <button type="submit" class="px-6 py-3 bg-moonlight-700 text-white text-sm font-medium rounded-md hover:bg-moonlight-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
|
|||
|
|
Get in touch
|
|||
|
|
</button> </div> </form> </div> </div> </div> </section> </main> <footer class="bg-gray-900 text-white py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8"> <div> <img src="/_astro/logo.B4JwDBCK_fI1oy.webp" alt="Company Logo Image" class="rounded-lg" width="48" height="48" loading="lazy" decoding="async"> <p class="font-serif font-bold pt-2 text-xl">moonlight institute</p> <p class="text-sm pt-2">illuminating pathways to a sustainable, equitable, and just world for generations to come</p> <p class="text-sm pt-2 mt-6 text-gray-300">moonlight institute is a Canadian federally regulated non-profit corporation headquartered on the unceded territory of the ɬəʔamɛn (Tla’amin Nation)</p> <p class="text-sm pt-2 mt-6 text-gray-300"><span class="font-bold">Contact Us</span><br><a class="underline" href="mailto:info@moonlightinstitute.org">info@moonlightinstitute.org</a><br>11 Laniakea Crescent, Lasqueti Island, BC V0R 2J0<br>+1 (604) 800-5640</p> </div> <div> <h3 class="text-lg font-semibold mb-4">Quick Links</h3> <ul class="space-y-2"> <li> <a href="/" class="text-sm hover:text-primary-300">Home</a> </li><li> <a href="about" class="text-sm hover:text-primary-300">About</a> </li><li> <a href="governance" class="text-sm hover:text-primary-300">Governance</a> </li><li> <a href="projects" class="text-sm hover:text-primary-300">Projects</a> </li><li> <a href="mailto:info@moonlightinstitute.org" class="text-sm hover:text-primary-300">Contact Us</a> </li><li> <a href="#" class="text-sm hover:text-primary-300">Donate</a> </li> </ul> </div> <div> <h3 class="text-lg font-semibold mb-4">Stay Connected</h3> <p class="text-sm mb-4">Subscribe to our newsletter for updates</p> <form class="flex"> <input type="email" placeholder="Your email" class="flex-grow rounded-l-md px-4 py-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary-500"> <button type="submit" class="bg-moonlight-500 text-white px-4 py-2 rounded-r-md hover:bg-moonlight-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
|
|||
|
|
Subscribe
|
|||
|
|
</button> </form> </div> </div> <div class="border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center"> <p class="text-sm mb-4 md:mb-0">© 2025 moonlight institute. All rights reserved.</p> <div class="flex space-x-4"> <a href="https://www.instagram.com/moonlight.institute/" target="_blank" rel="noopener noreferrer" class="text-moonlight-100 hover:text-white"> <span class="sr-only">Instagram</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path d="M 8 3 C 5.239 3 3 5.239 3 8 L 3 16 C 3 18.761 5.239 21 8 21 L 16 21 C 18.761 21 21 18.761 21 16 L 21 8 C 21 5.239 18.761 3 16 3 L 8 3 z M 18 5 C 18.552 5 19 5.448 19 6 C 19 6.552 18.552 7 18 7 C 17.448 7 17 6.552 17 6 C 17 5.448 17.448 5 18 5 z M 12 7 C 14.761 7 17 9.239 17 12 C 17 14.761 14.761 17 12 17 C 9.239 17 7 14.761 7 12 C 7 9.239 9.239 7 12 7 z M 12 9 A 3 3 0 0 0 9 12 A 3 3 0 0 0 12 15 A 3 3 0 0 0 15 12 A 3 3 0 0 0 12 9 z"></path> </svg> </a> <a href="https://twitter.com/moonlight_inst" target="_blank" rel="noopener noreferrer" class="text-moonlight-100 hover:text-white"> <span class="sr-only">Twitter</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path> </svg> </a> <a href="https://www.facebook.com/moonlightinstitute" target="_blank" rel="noopener noreferrer" class="text-moonlight-100 hover:text-white"> <span class="sr-only">Facebook</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path d="M12,2C6.477,2,2,6.477,2,12c0,5.013,3.693,9.153,8.505,9.876V14.65H8.031v-2.629h2.474v-1.749 c0-2.896,1.411-4.167,3.818-4.167c1.153,0,1.762,0.085,2.051,0.124v2.294h-1.642c-1.022,0-1.379,0.969-1.379,2.061v1.437h2.995 l-0.406,2.629h-2.588v7.247C18.235,21.236,22,17.062,22,12C22,6.477,17.523,2,12,2z"></path> </svg> </a> </div> </div> </div> </footer> </body></html>
|