168 lines
14 KiB
HTML
168 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>contact_us</title>
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Serenity Path</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Programs</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">Community<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join Us</button><button class="nav-1-btn nav-1-solid">Begin Your Journey</button></div></nav></div>
|
||
|
|
<div class="app-form"><h1>Begin Your Spiritual Journey</h1><h2>Your Path Details</h2><div class="form-row"><div class="form-group"><label>First Name</label><input id="first-name" type="text" placeholder="Your First Name"></input></div><div class="form-group"><label>Last Name</label><input id="last-name" type="text" placeholder="Your Last Name"></input></div></div><div class="form-group full-width"><label>Email Address</label><input id="email" type="email" placeholder="Your Email for Connection"></input></div><h2>How We Can Connect With You</h2><div class="form-group full-width"><label>Phone Number (Optional)</label><input id="phone" type="tel" placeholder="Your Preferred Contact Number"></input></div><h2>Share Your Intentions & Aspirations</h2><div class="form-group full-width"><textarea id="cover-letter" placeholder="Share your spiritual aspirations, what resonates with you, or how you envision connecting with our community."></textarea></div><button type="submit">Submit Your Sacred Intentions</button></div>
|
||
|
|
<section id="location-map">
|
||
|
|
<div class="container">
|
||
|
|
<h2>Our Location</h2>
|
||
|
|
<div class="map-placeholder">
|
||
|
|
<iframe
|
||
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12345.67890!2d-74.0060!3d40.7128!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDDCsDQyJzQ2LjMiTiA3NMKwMDAnMzUuOSJX!5e0!3m2!1sen!2sus!4v1678901234567!5m2!1sen!2sus"
|
||
|
|
width="100%"
|
||
|
|
height="450"
|
||
|
|
style="border:0;"
|
||
|
|
allowfullscreen=""
|
||
|
|
loading="lazy"
|
||
|
|
referrerpolicy="no-referrer-when-downgrade"
|
||
|
|
title="Our Spiritual Center Location"
|
||
|
|
></iframe>
|
||
|
|
</div>
|
||
|
|
<div class="address-info">
|
||
|
|
<h3>Find Us Here</h3>
|
||
|
|
<p><strong>Spiritual Sanctuary</strong></p>
|
||
|
|
<p>123 Serenity Path</p>
|
||
|
|
<p>Harmony Town, HV 98765</p>
|
||
|
|
<p>Country</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section id="contact-info" class="contact-info-section">
|
||
|
|
<div class="container">
|
||
|
|
<h2 class="section-title">Get in Touch</h2>
|
||
|
|
<p class="section-description">We'd love to hear from you. Feel free to reach out through the following channels:</p>
|
||
|
|
|
||
|
|
<div class="contact-details-grid">
|
||
|
|
<div class="contact-item">
|
||
|
|
<h3 class="item-title">Phone</h3>
|
||
|
|
<p class="item-content">
|
||
|
|
<a href="tel:+1234567890" class="contact-link">+1 (234) 567-8900</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="contact-item">
|
||
|
|
<h3 class="item-title">Email</h3>
|
||
|
|
<p class="item-content">
|
||
|
|
<a href="mailto:info@spiritualorg.com" class="contact-link">info@spiritualorg.com</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="social-media-wrapper">
|
||
|
|
<h3 class="item-title">Connect With Us</h3>
|
||
|
|
<div class="social-links">
|
||
|
|
<a href="#" class="social-link" aria-label="Facebook">
|
||
|
|
<span class="icon-placeholder">FB</span>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="social-link" aria-label="Instagram">
|
||
|
|
<span class="icon-placeholder">IG</span>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="social-link" aria-label="YouTube">
|
||
|
|
<span class="icon-placeholder">YT</span>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="social-link" aria-label="Twitter">
|
||
|
|
<span class="icon-placeholder">TW</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section id="newsletter-subscription" style="padding: 60px 20px; background-color: #f9f9f9; text-align: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333;">
|
||
|
|
<div style="max-width: 700px; margin: 0 auto;">
|
||
|
|
<h2 style="font-size: 2.5em; color: #5a4b7d; margin-bottom: 20px; font-weight: 600;">Stay Connected with Our Community</h2>
|
||
|
|
<p style="font-size: 1.1em; line-height: 1.6; margin-bottom: 40px; color: #666;">
|
||
|
|
Subscribe to our newsletter to receive uplifting messages, updates on upcoming events, spiritual insights, and more.
|
||
|
|
Join our journey towards peace and enlightenment.
|
||
|
|
</p>
|
||
|
|
<form action="#" method="POST" style="display: flex; flex-direction: column; align-items: center; gap: 15px;">
|
||
|
|
<label for="email-newsletter" style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;">Your Email Address</label>
|
||
|
|
<input type="email" id="email-newsletter" name="email" placeholder="Enter your email address" aria-label="Enter your email address" required
|
||
|
|
style="width: 100%; max-width: 400px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 1em; box-sizing: border-box; outline: none; transition: border-color 0.3s ease;">
|
||
|
|
<button type="submit"
|
||
|
|
style="background-color: #7d6b9d; color: white; padding: 15px 30px; border: none; border-radius: 5px; font-size: 1.1em; cursor: pointer; transition: background-color 0.3s ease; width: 100%; max-width: 200px; font-weight: 600;">
|
||
|
|
Subscribe Now
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
<p style="font-size: 0.9em; color: #888; margin-top: 20px;">
|
||
|
|
We respect your privacy. Your email will not be shared.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section id="assistance-support" class="py-16 md:py-24 bg-white text-gray-800">
|
||
|
|
<div class="container mx-auto px-4 max-w-4xl">
|
||
|
|
<h2 class="text-4xl md:text-5xl font-serif text-center mb-12 text-blue-800">Assistance & Support</h2>
|
||
|
|
<p class="text-lg md:text-xl text-center mb-12 max-w-2xl mx-auto text-gray-600">
|
||
|
|
Find answers to common questions and discover resources to deepen your spiritual journey and connection with our community.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="space-y-6 mb-16">
|
||
|
|
<h3 class="text-3xl font-semibold text-center mb-8 text-blue-700">Frequently Asked Questions</h3>
|
||
|
|
|
||
|
|
<!-- FAQ Item 1 -->
|
||
|
|
<details class="group bg-gray-50 rounded-lg shadow-sm overflow-hidden border border-gray-200">
|
||
|
|
<summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-300">
|
||
|
|
<span class="text-xl font-medium text-gray-700">What are your core spiritual beliefs?</span>
|
||
|
|
<svg class="w-6 h-6 transform transition-transform duration-300 group-open:rotate-180 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||
|
|
</summary>
|
||
|
|
<div class="px-6 pb-4 pt-2 text-gray-600 border-t border-gray-200">
|
||
|
|
<p>Our core beliefs are rooted in universal spiritual principles, emphasizing inner peace, compassion, mindfulness, and the interconnectedness of all beings. We draw inspiration from various wisdom traditions while encouraging personal exploration and direct experience. You can find more details on our <a href="about.html" class="text-blue-600 hover:underline">About Page</a>.</p>
|
||
|
|
</div>
|
||
|
|
</details>
|
||
|
|
|
||
|
|
<!-- FAQ Item 2 -->
|
||
|
|
<details class="group bg-gray-50 rounded-lg shadow-sm overflow-hidden border border-gray-200">
|
||
|
|
<summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-300">
|
||
|
|
<span class="text-xl font-medium text-gray-700">How can I participate in meditation sessions?</span>
|
||
|
|
<svg class="w-6 h-6 transform transition-transform duration-300 group-open:rotate-180 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||
|
|
</summary>
|
||
|
|
<div class="px-6 pb-4 pt-2 text-gray-600 border-t border-gray-200">
|
||
|
|
<p>We offer various meditation sessions, both online and in-person. You can view our schedule and register for sessions directly on our <a href="home.html#services" class="text-blue-600 hover:underline">Home Page</a> under the 'Services' section. No prior experience is needed, and all are welcome.</p>
|
||
|
|
</div>
|
||
|
|
</details>
|
||
|
|
|
||
|
|
<!-- FAQ Item 3 -->
|
||
|
|
<details class="group bg-gray-50 rounded-lg shadow-sm overflow-hidden border border-gray-200">
|
||
|
|
<summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-300">
|
||
|
|
<span class="text-xl font-medium text-gray-700">Do you offer personal spiritual guidance?</span>
|
||
|
|
<svg class="w-6 h-6 transform transition-transform duration-300 group-open:rotate-180 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||
|
|
</summary>
|
||
|
|
<div class="px-6 pb-4 pt-2 text-gray-600 border-t border-gray-200">
|
||
|
|
<p>Yes, we do. Our spiritual guides are available for one-on-one sessions to discuss your personal journey, challenges, and growth. Please reach out to us via our <a href="contact.html" class="text-blue-600 hover:underline">Contact Page</a> to schedule a confidential discussion.</p>
|
||
|
|
</div>
|
||
|
|
</details>
|
||
|
|
|
||
|
|
<!-- FAQ Item 4 -->
|
||
|
|
<details class="group bg-gray-50 rounded-lg shadow-sm overflow-hidden border border-gray-200">
|
||
|
|
<summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-300">
|
||
|
|
<span class="text-xl font-medium text-gray-700">How can I support the organization?</span>
|
||
|
|
<svg class="w-6 h-6 transform transition-transform duration-300 group-open:rotate-180 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||
|
|
</summary>
|
||
|
|
<div class="px-6 pb-4 pt-2 text-gray-600 border-t border-gray-200">
|
||
|
|
<p>There are several ways to support our mission, including volunteering your time, making a donation, or simply sharing our message with others. We deeply appreciate any form of contribution. Please visit our 'Support Us' section (link to be added) or <a href="contact.html" class="text-blue-600 hover:underline">Contact Us</a> for more information.</p>
|
||
|
|
</div>
|
||
|
|
</details>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="text-center">
|
||
|
|
<h3 class="text-3xl font-semibold text-blue-700 mb-6">Need Further Assistance?</h3>
|
||
|
|
<p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
|
||
|
|
If you couldn't find the answer you were looking for, or if you need personalized support, please don't hesitate to reach out to us.
|
||
|
|
</p>
|
||
|
|
<a href="contact.html" class="inline-block bg-blue-600 text-white font-medium py-3 px-8 rounded-full hover:bg-blue-700 transition duration-300 ease-in-out shadow-lg">
|
||
|
|
Contact Our Team
|
||
|
|
</a>
|
||
|
|
<p class="text-md text-gray-500 mt-4">
|
||
|
|
You can also explore our resources on the <a href="home.html" class="text-blue-600 hover:underline">Home Page</a> or learn more on the <a href="about.html" class="text-blue-600 hover:underline">About Page</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">The Serenity Collective</h3><p class="footer-1-newsletter-text">Receive soulful insights, event updates, and spiritual wisdom directly in your inbox.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"></input><button class="footer-1-subscribe-btn">Connect</button></div><p class="footer-1-privacy-note"><span>By subscribing, you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive emails from The Serenity Collective.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="#">Our Teachings</a></li><li><a href="#">Meditation Guides</a></li><li><a href="#">Sacred Retreats</a></li><li><a href="#">Spiritual Talks</a></li><li><a href="#">Community Events</a></li></ul></div><div class="footer-1-column"><h4>About Us</h4><ul><li><a href="#">Our Mission</a></li><li><a href="#">Our Story</a></li><li><a href="#">The Founder</a></li><li><a href="#">Our Values</a></li><li><a href="#">Testimonials</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Connect with Us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2023 The Serenity Collective. All rights reserved.</p><ul class="footer-1-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
||
|
|
</body>
|
||
|
|
</html>
|