13 changed files with 1571 additions and 2 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+Dockerfile
--- a/README.md
+++ b/README.md
@ -1,2 +0,0 @@
-# custom1
-
--- a/about_us.html
+++ b/about_us.html
@ -0,0 +1,154 @@
+<!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>about_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>
+<section id="mission-statement" style="padding: 4rem 1rem; background-color: #fcfafa; text-align: center; max-width: 900px; margin: 0 auto;">
+    <h2 style="font-size: 2.5rem; color: #4a4a4a; margin-bottom: 1.5rem; font-weight: 300;">Our Guiding Light</h2>
+    <p style="font-size: 1.15rem; line-height: 1.8; color: #666; max-width: 700px; margin: 0 auto;">
+        Our mission is to foster a sanctuary of peace and spiritual growth, offering a path to inner harmony and compassionate living. We strive to empower individuals to discover their true selves, connect with universal wisdom, and contribute positively to the world through mindful practice and shared understanding.
+    </p>
+</section>
+<section id="history-section">
+    <div class="container">
+        <h2>Our Journey Through Time</h2>
+
+        <div class="history-content">
+            <p>
+                Founded in [Year], our spiritual community began with a simple yet profound vision: to create a sanctuary where individuals could explore inner peace, cultivate mindfulness, and connect with universal wisdom. What started as small gatherings in a humble setting quickly grew, driven by a shared desire for spiritual growth and compassionate living.
+            </p>
+            <p>
+                The early years were marked by deep contemplation and the development of our core teachings, heavily influenced by [mention spiritual tradition/founder's philosophy, e.g., ancient contemplative practices and the teachings of Master [Founder's Name]]. We focused on establishing foundational programs, including silent retreats, community dialogues, and introductory meditation workshops, laying the groundwork for our expanding reach.
+            </p>
+            <p>
+                Over the decades, our community has blossomed, embracing new generations and adapting to contemporary needs while remaining steadfast to our timeless principles. We have expanded our offerings to include advanced spiritual studies, youth programs, and outreach initiatives, always striving to be a beacon of light and understanding in an ever-changing world. Today, we continue to honor our legacy by fostering an inclusive environment for spiritual exploration and service.
+            </p>
+        </div>
+    </div>
+</section>
+<section id="founder-profile" class="section-padding bg-light-background">
+    <div class="container mx-auto px-4 py-12">
+        <h2 class="text-4xl font-heading text-center text-dark-text mb-12">Our Spiritual Guide</h2>
+        <div class="max-w-4xl mx-auto md:flex md:items-center md:space-x-12">
+            <div class="md:w-1/3 flex-shrink-0 mb-8 md:mb-0">
+                <img src="https://via.placeholder.com/300x300/E0E0E0/888888?text=Founder+Photo" alt="Photo of [Founder's Name]" class="rounded-full w-48 h-48 md:w-64 md:h-64 mx-auto object-cover shadow-lg border-4 border-gold-accent">
+            </div>
+            <div class="md:w-2/3 text-center md:text-left">
+                <h3 class="text-3xl font-bold text-dark-text mb-2">Name of Founder</h3>
+                <p class="text-xl text-gold-accent mb-6">Visionary & Spiritual Teacher</p>
+                <p class="text-gray-700 leading-relaxed mb-4">
+                    [Founder's Name] is the guiding light behind our community, having dedicated [X] years to profound spiritual exploration and practice. Their journey has encompassed deep meditation, the study of ancient texts, and extensive travels to sacred sites, culminating in a unique wisdom that inspires all who encounter it.
+                </p>
+                <p class="text-gray-700 leading-relaxed">
+                    With a compassionate heart and unwavering commitment to humanity's spiritual awakening, [Founder's Name] established this sacred space. Their teachings emphasize mindfulness, the cultivation of inner peace, and the practice of unconditional love, providing a clear path for individuals to connect with their true spiritual essence.
+                </p>
+            </div>
+        </div>
+    </div>
+</section>
+<section id="core-values">
+    <div class="container">
+        <h2>Our Core Values</h2>
+        <p class="section-intro">At [Organization Name], our foundation is built upon timeless principles that guide our journey and foster a harmonious community dedicated to inner peace and collective well-being.</p>
+
+        <div class="values-grid">
+            <div class="value-item">
+                <div class="value-icon">[Icon Placeholder]</div>
+                <h3>Compassion</h3>
+                <p>Cultivating empathy and understanding towards all beings, fostering a spirit of kindness and active care in every interaction.</p>
+            </div>
+
+            <div class="value-item">
+                <div class="value-icon">[Icon Placeholder]</div>
+                <h3>Mindfulness</h3>
+                <p>Embracing the present moment with awareness and non-judgment, finding peace and clarity in every breath and action.</p>
+            </div>
+
+            <div class="value-item">
+                <div class="value-icon">[Icon Placeholder]</div>
+                <h3>Integrity</h3>
+                <p>Upholding truth, honesty, and moral uprightness in all our endeavors, ensuring consistency between our beliefs and actions.</p>
+            </div>
+
+            <div class="value-item">
+                <div class="value-icon">[Icon Placeholder]</div>
+                <h3>Community</h3>
+                <p>Building a supportive and inclusive environment where individuals connect, share, and grow together in mutual respect and love.</p>
+            </div>
+
+            <div class="value-item">
+                <div class="value-icon">[Icon Placeholder]</div>
+                <h3>Growth</h3>
+                <p>Encouraging continuous personal and spiritual development, fostering a lifelong journey of learning, reflection, and transformation.</p>
+            </div>
+
+            <div class="value-item">
+                <div class="value-icon">[Icon Placeholder]</div>
+                <h3>Service</h3>
+                <p>Devoting ourselves to selfless acts that benefit others and the wider world, embodying the principle of giving back with an open heart.</p>
+            </div>
+        </div>
+    </div>
+</section>
+<section id="community-vision" class="section">
+    <div class="container">
+        <h2 class="section-title">Our Shared Community Vision</h2>
+        <p class="section-description">
+            We envision a vibrant and compassionate community, rooted in spiritual wisdom and dedicated to fostering personal growth, collective well-being, and a harmonious connection with all life.
+        </p>
+
+        <div class="vision-grid">
+            <div class="vision-item">
+                <div class="vision-icon-placeholder">
+                    <!-- Placeholder for an SVG icon or image -->
+                    &#9733;
+                </div>
+                <h3 class="vision-item-title">Cultivating Inner Peace</h3>
+                <p class="vision-item-description">
+                    A community where individuals discover and deepen their inner tranquility through mindfulness practices and contemplative wisdom.
+                </p>
+            </div>
+
+            <div class="vision-item">
+                <div class="vision-icon-placeholder">
+                    <!-- Placeholder for an SVG icon or image -->
+                    &#9734;
+                </div>
+                <h3 class="vision-item-title">Fostering Connection</h3>
+                <p class="vision-item-description">
+                    Building bridges of understanding and empathy, creating a supportive network where every member feels valued and heard.
+                </p>
+            </div>
+
+            <div class="vision-item">
+                <div class="vision-icon-placeholder">
+                    <!-- Placeholder for an SVG icon or image -->
+                    &#9789;
+                </div>
+                <h3 class="vision-item-title">Inspiring Compassion in Action</h3>
+                <p class="vision-item-description">
+                    Empowering members to extend kindness and service beyond our walls, contributing positively to the wider world.
+                </p>
+            </div>
+
+            <div class="vision-item">
+                <div class="vision-icon-placeholder">
+                    <!-- Placeholder for an SVG icon or image -->
+                    &#9827;
+                </div>
+                <h3 class="vision-item-title">Embracing Continuous Growth</h3>
+                <p class="vision-item-description">
+                    Providing resources and a nurturing environment for ongoing spiritual learning, personal evolution, and self-discovery.
+                </p>
+            </div>
+        </div>
+    </div>
+</section>
+<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">Luminous Path</h3><p><strong>Address:</strong><br></br><span>Level 1, 12 Serenity Rd, Harmony NSW 2000</span></p><p><strong>Contact:</strong><br></br><span>1800 123 4567</span><br></br><a href="mailto:info@relume.io">info@luminouspath.org</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">Our Teachings</a></li><li><a href="#">Meditation & Practice</a></li><li><a href="#">Upcoming Events</a></li><li><a href="#">Community Support</a></li><li><a href="#">Spiritual Resources</a></li></ul><ul><li><a href="#">About Us</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Volunteer</a></li><li><a href="#">Support Our Mission</a></li><li><a href="#">FAQs</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2023 Luminous Path. All rights reserved.</p><ul class="footer-2-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>
--- a/add_new_icard.html
+++ b/add_new_icard.html
@ -0,0 +1,163 @@
+<!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Add New ICard</title>
+          <link rel="stylesheet" href="style.css" />
+      </head>
+      <body>
+      <div class="page-wrapper">
+            <div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">IDPro</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">About Us</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Solutions</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">More<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">Sign Up</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
+<div class="app-form"><h1>Start Your I-Card Transformation Journey</h1><h2>Your Contact Information</h2><div class="form-row"><div class="form-group"><label>First Name</label><input id="first-name" type="text" placeholder="Enter your first name"></div><div class="form-group"><label>Last Name</label><input id="last-name" type="text" placeholder="Enter your last name"></div></div><div class="form-group full-width"><label>Business Email</label><input id="email" type="email" placeholder="your.email@organization.com"></div><h2>Connect with Us</h2><div class="form-group full-width"><label>Phone Number (Optional)</label><input id="phone" type="tel" placeholder="e.g., +1 555-123-4567"></div><h2>Tell Us About Your I-Card Needs</h2><div class="form-group full-width"><textarea id="cover-letter" placeholder="Share details about your organization, number of I-cards needed, or specific features you're looking for. This helps us tailor your experience!"></textarea></div><button type="submit">Get Started Today</button></div>
+<section id="form-instructions" style="padding: 60px 20px; background-color: #f9f9f9; color: #333; font-family: Arial, sans-serif;">
+    <div class="container" style="max-width: 960px; margin: 0 auto; background-color: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);">
+        <h2 style="font-size: 2.5em; color: #1a202c; text-align: center; margin-bottom: 40px;">Form Instructions &amp; Guidelines</h2>
+
+        <div class="instruction-block" style="margin-bottom: 30px;">
+            <h3 style="font-size: 1.8em; color: #3b5998; margin-bottom: 15px;">1. Icard Detail Form</h3>
+            <p style="font-size: 1.1em; line-height: 1.6;">When creating or editing an Icard entry, please provide the following information:</p>
+            <ul style="list-style: disc; margin-left: 25px; padding-left: 0; font-size: 1.1em; line-height: 1.6;">
+                <li style="margin-bottom: 8px;"><strong style="color: #555;">Icard Name:</strong> A unique and descriptive name for your Icard (e.g., "Batch 2024 Student ID", "Faculty Card 2023"). This name helps you identify the Icard later.</li>
+                <li style="margin-bottom: 8px;"><strong style="color: #555;">Description:</strong> A brief explanation of the Icard's purpose or the group it's intended for (e.g., "Official ID for B.Tech CSE students, 2024 intake").</li>
+            </ul>
+        </div>
+
+        <div class="instruction-block" style="margin-bottom: 30px;">
+            <h3 style="font-size: 1.8em; color: #3b5998; margin-bottom: 15px;">2. Student Data Excel Upload</h3>
+            <p style="font-size: 1.1em; line-height: 1.6;">To ensure accurate data processing for your Icards, please prepare your student information in an Excel file (.xlsx or .xls) following these critical guidelines:</p>
+            <ul style="list-style: disc; margin-left: 25px; padding-left: 0; font-size: 1.1em; line-height: 1.6;">
+                <li style="margin-bottom: 8px;"><strong style="color: #555;">First Row as Headers:</strong> The very first row of your Excel sheet must contain unique column headers. These headers will act as the "keys" that link your data to the Icard template.</li>
+                <li style="margin-bottom: 8px;"><strong style="color: #555;">Key Naming Convention:</strong> Use clear, concise, and consistent names for your headers (e.g., `studentName`, `rollNumber`, `dateOfBirth`, `course`, `address`). Avoid special characters like `@`, `#`, `$`, `!`, etc., and prefer camelCase or PascalCase, or use spaces as needed if your template will exactly match them.</li>
+                <li style="margin-bottom: 8px;"><strong style="color: #555;">Required Data:</strong> Ensure all necessary fields are present and correctly populated for each student. If a key in your template does not find a corresponding column or data, it will appear blank.</li>
+                <li style="margin-bottom: 8px;"><strong style="color: #555;">Data Types:</strong> The system supports text, numbers, and dates. For dates, maintain a consistent format (e.g., YYYY-MM-DD or DD/MM/YYYY) across all entries.</li>
+                <li style="margin-bottom: 8px;"><strong style="color: #555;">Empty Rows/Columns:</strong> Avoid entirely empty rows or columns within the data range you intend to upload.</li>
+            </ul>
+            <div class="example-tip" style="background-color: #e6f7ff; border-left: 5px solid #66b3ff; padding: 15px; margin-top: 20px; border-radius: 4px;">
+                <p style="font-style: italic; color: #0056b3; margin: 0;"><strong style="color: #0056b3;">Example Excel Headers:</strong> `Student Name`, `Roll No`, `Program`, `Date of Birth`, `Contact No`, `Address`</p>
+            </div>
+        </div>
+
+        <div class="instruction-block" style="margin-bottom: 30px;">
+            <h3 style="font-size: 1.8em; color: #3b5998; margin-bottom: 15px;">3. Icard Template Upload</h3>
+            <p style="font-size: 1.1em; line-height: 1.6;">Upload your Icard template file (e.g., DOCX, PDF with editable fields, or a custom format if specified). This template will serve as the design blueprint for all generated Icards.</p>
+            <ul style="list-style: disc; margin-left: 25px; padding-left: 0; font-size: 1.1em; line-height: 1.6;">
+                <li style="margin-bottom: 8px;"><strong style="color: #555;">Placeholder Syntax:</strong> To mark where student-specific data should be inserted, use double curly braces `{{ }}` around your Excel column headers (keys).</li>
+                <li style="margin-bottom: 8px;"><strong style="color: #555;">Exact Match:</strong> The placeholder name within your template must *exactly* match the corresponding column header in your Excel file. This includes case-sensitivity and any spaces or special characters used.</li>
+                <li style="margin-bottom: 8px;"><strong style="color: #555;">Image Placeholders:</strong> If your template supports dynamic image insertion (e.g., student photos), refer to specific system documentation for the correct image placeholder syntax and expected file naming conventions for images.</li>
+            </ul>
+            <div class="example-tip" style="background-color: #e6f7ff; border-left: 5px solid #66b3ff; padding: 15px; margin-top: 20px; border-radius: 4px;">
+                <p style="font-style: italic; color: #0056b3; margin: 0;"><strong style="color: #0056b3;">Example Template Content Snippet:</strong><br>
+                Name: {{Student Name}}<br>
+                Roll Number: {{Roll No}}<br>
+                Program: {{Program}}<br>
+                D.O.B: {{Date of Birth}}<br>
+                Contact: {{Contact No}}</p>
+            </div>
+        </div>
+
+        <div class="instruction-block" style="margin-bottom: 0;">
+            <h3 style="font-size: 1.8em; color: #3b5998; margin-bottom: 15px;">4. Conversion Process</h3>
+            <p style="font-size: 1.1em; line-height: 1.6;">After successfully uploading both your Excel student data and your Icard template, click the "Convert" button. The system will then initiate the following process:</p>
+            <ul style="list-style: disc; margin-left: 25px; padding-left: 0; font-size: 1.1em; line-height: 1.6;">
+                <li style="margin-bottom: 8px;">The system will read and fetch all data records from your uploaded Excel sheet, row by row.</li>
+                <li style="margin-bottom: 8px;">For each student record, it will create a new Icard instance.</li>
+                <li style="margin-bottom: 8px;">Inside each Icard instance, it will iterate through your Icard template and automatically replace every `{{placeholder}}` with the corresponding data value from the current student's row in the Excel sheet.</li>
+                <li style="margin-bottom: 8px;">Finally, it will generate individual, personalized Icards for each student based on the processed data and template.</li>
+            </ul>
+            <div class="example-tip" style="background-color: #fffbe6; border-left: 5px solid #ffd700; padding: 15px; margin-top: 20px; border-radius: 4px;">
+                <p style="font-style: italic; color: #8a6d3b; margin: 0;"><strong style="color: #8a6d3b;">Important Tip:</strong> Always perform a quick check of your generated Icards to ensure all data has been correctly mapped and appears as expected. Discrepancies often stem from mismatched Excel headers and template placeholders.</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Template Preview Area</title>
+    <link rel="stylesheet" href="style.css" />
+
+
+    <section class="template-preview-section" aria-labelledby="templatePreviewHeading">
+        <header class="template-preview-header">
+            <h2 id="templatePreviewHeading">I-Card Template Preview: <span style="color: #007bff;">[iCardName]</span></h2>
+            <div class="actions">
+                <button type="button" class="btn-edit">Edit Template</button>
+                <button type="button" class="btn-save">Save &amp; Continue</button>
+            </div>
+        </header>
+
+        <div class="preview-grid">
+            <article class="preview-card" aria-label="I-Card Preview for Student 1">
+                <div class="preview-card-image">I-Card Template Layout</div>
+                <div class="preview-card-content">
+                    <h3>Student Name: <span class="student-name">[StudentName 1]</span></h3>
+                    <p>Roll No: [RollNo 1]</p>
+                    <p>Class: [Class 1]</p>
+                    <p>ID: [StudentID 1]</p>
+                </div>
+            </article>
+
+            <article class="preview-card" aria-label="I-Card Preview for Student 2">
+                <div class="preview-card-image">I-Card Template Layout</div>
+                <div class="preview-card-content">
+                    <h3>Student Name: <span class="student-name">[StudentName 2]</span></h3>
+                    <p>Roll No: [RollNo 2]</p>
+                    <p>Class: [Class 2]</p>
+                    <p>ID: [StudentID 2]</p>
+                </div>
+            </article>
+
+            <article class="preview-card" aria-label="I-Card Preview for Student 3">
+                <div class="preview-card-image">I-Card Template Layout</div>
+                <div class="preview-card-content">
+                    <h3>Student Name: <span class="student-name">[StudentName 3]</span></h3>
+                    <p>Roll No: [RollNo 3]</p>
+                    <p>Class: [Class 3]</p>
+                    <p>ID: [StudentID 3]</p>
+                </div>
+            </article>
+
+            <article class="preview-card" aria-label="I-Card Preview for Student 4">
+                <div class="preview-card-image">I-Card Template Layout</div>
+                <div class="preview-card-content">
+                    <h3>Student Name: <span class="student-name">[StudentName 4]</span></h3>
+                    <p>Roll No: [RollNo 4]</p>
+                    <p>Class: [Class 4]</p>
+                    <p>ID: [StudentID 4]</p>
+                </div>
+            </article>
+
+            <article class="preview-card" aria-label="I-Card Preview for Student 5">
+                <div class="preview-card-image">I-Card Template Layout</div>
+                <div class="preview-card-content">
+                    <h3>Student Name: <span class="student-name">[StudentName 5]</span></h3>
+                    <p>Roll No: [RollNo 5]</p>
+                    <p>Class: [Class 5]</p>
+                    <p>ID: [StudentID 5]</p>
+                </div>
+            </article>
+
+            <article class="preview-card" aria-label="I-Card Preview for Student 6">
+                <div class="preview-card-image">I-Card Template Layout</div>
+                <div class="preview-card-content">
+                    <h3>Student Name: <span class="student-name">[StudentName 6]</span></h3>
+                    <p>Roll No: [RollNo 6]</p>
+                    <p>Class: [Class 6]</p>
+                    <p>ID: [StudentID 6]</p>
+                </div>
+            </article>
+        </div>
+
+        <nav class="pagination" aria-label="Template Preview Pagination">
+            <button type="button" disabled="" aria-label="Previous page">Previous</button>
+            <span>Page 1 of X</span>
+            <button type="button" aria-label="Next page">Next</button>
+        </nav>
+    </section>
+
+</div>
+      </body>
+      </html>
--- a/contact_confirmation.html
+++ b/contact_confirmation.html
@ -0,0 +1,146 @@
+<!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>contact_confirmation</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>
+<section class="thank-you-message-section">
+    <div class="thank-you-container">
+        <h1 class="thank-you-title">Thank You!</h1>
+        <p class="thank-you-message-text">Your message has been successfully sent. We appreciate your interest and will connect with you shortly on your spiritual journey.</p>
+        <p class="thank-you-follow-up">In the interim, we invite you to explore our website further or connect with us on our social media channels for daily inspiration.</p>
+        <a href="/" class="thank-you-home-button">Return to Home Page</a>
+    </div>
+</section>
+<section id="next-steps" class="next-steps-section">
+    <div class="container">
+        <h2 class="section-title">Ready for Your Next Step?</h2>
+        <p class="section-description">
+            Embrace a path of inner peace and community. Explore how you can connect with us further.
+        </p>
+        <div class="next-steps-grid">
+            <div class="step-card">
+                <h3 class="card-title">Join a Meditation Session</h3>
+                <p class="card-text">Find serenity and inner calm in our guided sessions.</p>
+                <a href="##placeholder-link-to-sessions" class="button button-primary">View Schedule</a>
+            </div>
+            <div class="step-card">
+                <h3 class="card-title">Explore Our Teachings</h3>
+                <p class="card-text">Deepen your understanding of our core spiritual beliefs.</p>
+                <a href="##placeholder-link-to-about" class="button button-secondary">Learn More</a>
+            </div>
+            <div class="step-card">
+                <h3 class="card-title">Subscribe to Our Newsletter</h3>
+                <p class="card-text">Receive updates, insights, and event invitations directly.</p>
+                <a href="##placeholder-link-to-subscribe" class="button button-primary">Subscribe Now</a>
+            </div>
+            <div class="step-card">
+                <h3 class="card-title">Connect with Us</h3>
+                <p class="card-text">Reach out with questions or for personal guidance.</p>
+                <a href="##placeholder-link-to-contact" class="button button-secondary">Contact Us</a>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="social-media-links-section">
+    <div class="container">
+        <h2>Connect With Us</h2>
+        <p>Follow us on our social media channels to stay updated with our latest events, teachings, and community news.</p>
+        <div class="social-icons">
+            <a href="#" aria-label="Facebook Profile" class="social-icon facebook">
+                <!-- Placeholder for Facebook icon -->
+                <img src="https://via.placeholder.com/32/3b5998/ffffff?text=f" alt="Facebook">
+            </a>
+            <a href="#" aria-label="Instagram Profile" class="social-icon instagram">
+                <!-- Placeholder for Instagram icon -->
+                <img src="https://via.placeholder.com/32/e1306c/ffffff?text=i" alt="Instagram">
+            </a>
+            <a href="#" aria-label="Twitter Profile" class="social-icon twitter">
+                <!-- Placeholder for Twitter icon -->
+                <img src="https://via.placeholder.com/32/1DA1F2/ffffff?text=t" alt="Twitter">
+            </a>
+            <a href="#" aria-label="YouTube Channel" class="social-icon youtube">
+                <!-- Placeholder for YouTube icon -->
+                <img src="https://via.placeholder.com/32/FF0000/ffffff?text=y" alt="YouTube">
+            </a>
+        </div>
+    </div>
+</section>
+<section class="return-home-prompt" style="text-align: center; padding: 80px 20px; background-color: #f8f8f8; font-family: 'Georgia', serif; color: #4a4a4a;">
+    <div class="container" style="max-width: 760px; margin: 0 auto;">
+        <h2 style="font-size: 2.8em; margin-bottom: 25px; color: #5a4b3e;">Return to Serenity</h2>
+        <p style="font-size: 1.2em; line-height: 1.7; margin-bottom: 40px; color: #6a6a6a;">
+            Whether you've explored all paths or are seeking a new beginning, we invite you to journey back to the heart of our spiritual community.
+            Find solace, wisdom, and connection on our home page.
+        </p>
+        <a href="/" class="button" style="display: inline-block; padding: 18px 35px; background-color: #8c7851; color: white; text-decoration: none; border-radius: 6px; font-size: 1.1em; font-weight: bold; transition: background-color 0.3s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);">
+            Journey Back to Peace
+        </a>
+    </div>
+</section>
+<section id="support-information" class="support-information-section">
+    <div class="container">
+        <h2 class="section-title">Support Information</h2>
+        <p class="section-description">Find answers to common questions and important resources to assist you on your journey.</p>
+
+        <div class="faq-container">
+            <h3 class="faq-heading">Frequently Asked Questions</h3>
+            <div class="faq-list">
+                <div class="faq-item">
+                    <details>
+                        <summary class="faq-question">What is the spiritual organization about?</summary>
+                        <div class="faq-answer">
+                            <p>Our organization is dedicated to fostering inner peace, spiritual growth, and community connection through various teachings and practices. We provide a supportive environment for individuals exploring their spiritual path.</p>
+                        </div>
+                    </details>
+                </div>
+                <div class="faq-item">
+                    <details>
+                        <summary class="faq-question">How can I participate in sessions or retreats?</summary>
+                        <div class="faq-answer">
+                            <p>Details about upcoming meditation sessions, spiritual talks, and retreats, including registration information, can be found on our <a href="#services-link">[Link to Services/Events Page]</a>. You can also subscribe to our newsletter for updates.</p>
+                        </div>
+                    </details>
+                </div>
+                <div class="faq-item">
+                    <details>
+                        <summary class="faq-question">Are there any membership requirements or fees?</summary>
+                        <div class="faq-answer">
+                            <p>Many of our core offerings are open to everyone without membership fees. Some specialized retreats or workshops may have a nominal fee to cover operational costs. Please check individual event details for specifics.</p>
+                        </div>
+                    </details>
+                </div>
+                <div class="faq-item">
+                    <details>
+                        <summary class="faq-question">How can I support the organization's mission?</summary>
+                        <div class="faq-answer">
+                            <p>We welcome support through volunteering, spreading awareness, or financial contributions. Please visit our <a href="#support-link">[Link to Donate/Support Page]</a> for more information on how you can help us grow.</p>
+                        </div>
+                    </details>
+                </div>
+            </div>
+        </div>
+
+        <div class="important-links-container">
+            <h3 class="links-heading">Important Resources</h3>
+            <ul class="resource-links">
+                <li><a href="#privacy-policy-link">[Placeholder for Privacy Policy]</a></li>
+                <li><a href="#terms-of-service-link">[Placeholder for Terms of Service]</a></li>
+                <li><a href="#cookie-policy-link">[Placeholder for Cookie Policy]</a></li>
+            </ul>
+        </div>
+
+        <div class="contact-support-cta">
+            <h3 class="cta-heading">Need More Assistance?</h3>
+            <p>If you couldn't find the answer to your question, please feel free to reach out to our support team directly.</p>
+            <a href="contact.html" class="button primary-button">Contact Us Directly</a>
+        </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>
--- a/contact_us.html
+++ b/contact_us.html
@ -0,0 +1,168 @@
+<!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>
--- a/dashboard.html
+++ b/dashboard.html
@ -0,0 +1,121 @@
+<!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Dashboard</title>
+          <link rel="stylesheet" href="style.css" />
+      </head>
+      <body>
+      <div class="page-wrapper">
+            <div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">IDPro</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">About Us</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Solutions</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">More<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">Sign Up</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
+<div class="text-1-wrapper"><section class="text-1-section"><p class="text-1-tagline">Revolutionize Your ID Card Creation</p><h2 class="text-1-heading">Effortlessly Design &amp; Generate Professional ID Cards</h2><p class="text-1-description">Our intuitive platform streamlines the entire ID card process. Upload student data from Excel, select from customizable templates, and instantly generate personalized, high-quality ID cards for your institution.</p><div class="text-1-button-group"><button class="text-1-btn text-1-solid">Start Creating Today</button><button class="text-1-btn text-1-outline">Discover Features</button></div></section></div>
+
+
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ICard Projects List</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&amp;display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css" />
+
+
+
+    <section class="icard-projects-section">
+        <div class="container">
+            <header class="section-header">
+                <h2>Your ICard Projects</h2>
+                <a href="#add-new-icard" class="button">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
+                    Create New ICard Project
+                </a>
+            </header>
+
+            <div class="project-grid">
+                <!-- Project Card 1 -->
+                <article class="project-card">
+                    <div class="card-content">
+                        <h3>University Student ICard</h3>
+                        <p>Manages student ID cards for the university, including name, ID number, and department details. Ready for data import.</p>
+                    </div>
+                    <div class="card-actions">
+                        <a href="#project-detail-1" class="card-action-button">View Details</a>
+                        <a href="#upload-data-1" class="card-action-button">Upload Data</a>
+                        <a href="#download-template-1" class="card-action-button">Download Template</a>
+                    </div>
+                </article>
+
+                <!-- Project Card 2 -->
+                <article class="project-card">
+                    <div class="card-content">
+                        <h3>Employee Access Card</h3>
+                        <p>Configured for employee access cards with company logo, employee photo, name, and designation. Template pre-designed.</p>
+                    </div>
+                    <div class="card-actions">
+                        <a href="#project-detail-2" class="card-action-button">View Details</a>
+                        <a href="#upload-data-2" class="card-action-button">Upload Data</a>
+                        <a href="#download-template-2" class="card-action-button">Download Template</a>
+                    </div>
+                </article>
+
+                <!-- Project Card 3 -->
+                <article class="project-card">
+                    <div class="card-content">
+                        <h3>Conference Attendee Badge</h3>
+                        <p>Generates badges for conference attendees, capturing their name, organization, and attendee type for events.</p>
+                    </div>
+                    <div class="card-actions">
+                        <a href="#project-detail-3" class="card-action-button">View Details</a>
+                        <a href="#upload-data-3" class="card-action-button">Upload Data</a>
+                        <a href="#download-template-3" class="card-action-button">Download Template</a>
+                    </div>
+                </article>
+
+                <!-- Project Card 4 -->
+                <article class="project-card">
+                    <div class="card-content">
+                        <h3>School ID Card (K-12)</h3>
+                        <p>Basic ID cards for K-12 students. Includes student name, grade, school year, and a placeholder for photo.</p>
+                    </div>
+                    <div class="card-actions">
+                        <a href="#project-detail-4" class="card-action-button">View Details</a>
+                        <a href="#upload-data-4" class="card-action-button">Upload Data</a>
+                        <a href="#download-template-4" class="card-action-button">Download Template</a>
+                    </div>
+                </article>
+
+                <!-- Project Card 5 (Example of a project in progress) -->
+                <article class="project-card">
+                    <div class="card-content">
+                        <h3>Volunteer Service Pass</h3>
+                        <p>Designed for volunteers, showing their name, volunteer ID, and an expiry date. Template needs finalization.</p>
+                    </div>
+                    <div class="card-actions">
+                        <a href="#project-detail-5" class="card-action-button">View Details</a>
+                        <a href="#upload-data-5" class="card-action-button">Upload Data</a>
+                        <a href="#download-template-5" class="card-action-button">Download Template</a>
+                    </div>
+                </article>
+
+                <!-- Project Card 6 (Example of a new project) -->
+                <article class="project-card">
+                    <div class="card-content">
+                        <h3>Membership Card Template</h3>
+                        <p>A generic template for club or organization membership cards. Customizable fields for member name and join date.</p>
+                    </div>
+                    <div class="card-actions">
+                        <a href="#project-detail-6" class="card-action-button">View Details</a>
+                        <a href="#upload-data-6" class="card-action-button">Upload Data</a>
+                        <a href="#download-template-6" class="card-action-button">Download Template</a>
+                    </div>
+                </article>
+            </div>
+        </div>
+    </section>
+
+
+</div>
+      </body>
+      </html>
--- a/icard_details.html
+++ b/icard_details.html
@ -0,0 +1,67 @@
+<!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>ICard Details</title>
+          <link rel="stylesheet" href="style.css" />
+      </head>
+      <body>
+      <div class="page-wrapper">
+            <div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">IDPro</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">About Us</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Solutions</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">More<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">Sign Up</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
+<div class="text-2-wrapper"><section class="text-2-section"><p class="text-2-tagline">Seamless ID Card Creation</p><h2 class="text-2-heading">Design, Generate &amp; Manage Professional ID Cards with Ease</h2><p class="text-2-description">Revolutionize your ID card production. Upload student data from Excel, select a stunning template, and instantly generate personalized, high-quality ID cards for your entire institution. Simple, fast, and efficient.</p><div class="text-2-button-group"><button class="text-2-btn text-2-solid">Start Creating Now</button><button class="text-2-btn text-2-outline">Explore Features</button></div></section></div>
+
+
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Student Data Upload</title>
+    <link rel="stylesheet" href="style.css" />
+
+
+    <div class="container" role="main">
+        <header>
+            <h1>Student Data &amp; I-Card Template Upload</h1>
+            <p>Upload your student data and the I-Card template for batch generation.</p>
+        </header>
+
+        <section class="section-content">
+            <div class="upload-form">
+                <div class="form-group">
+                    <label for="excel-file">Upload Student Data (Excel File)</label>
+                    <input type="file" id="excel-file" name="student_data_excel" accept=".xls,.xlsx" aria-describedby="excel-info">
+                    <p id="excel-info" class="info-text" style="font-size: 0.85em; color: var(--secondary-color); margin-top: 0.5rem;">
+                        Supported formats: .xls, .xlsx. Ensure your data has clear headers for mapping.
+                    </p>
+                </div>
+
+                <div class="form-group">
+                    <label for="template-file">Upload I-Card Template (Word Document)</label>
+                    <input type="file" id="template-file" name="icard_template_doc" accept=".doc,.docx" aria-describedby="template-info">
+                    <p id="template-info" class="info-text" style="font-size: 0.85em; color: var(--secondary-color); margin-top: 0.5rem;">
+                        Supported formats: .doc, .docx. Use placeholders like `{{STUDENT_NAME}}` in your template.
+                    </p>
+                </div>
+            </div>
+
+            <aside class="info-box" aria-labelledby="template-guidelines">
+                <h3 id="template-guidelines">Template &amp; Data Guidelines</h3>
+                <p>To ensure successful conversion, please follow these guidelines:</p>
+                <ul>
+                    <li><strong>Excel Headers:</strong> Use descriptive column headers (e.g., "Student Name", "Roll Number", "DOB").</li>
+                    <li><strong>Template Placeholders:</strong> Use double curly braces for keys in your Word template, matching your Excel headers (e.g., <code>{{Student Name}}</code>, <code>{{Roll Number}}</code>).</li>
+                    <li><strong>File Naming:</strong> Use clear, simple names for your uploaded files.</li>
+                    <li><strong>Data Integrity:</strong> Ensure your Excel data is clean and consistent.</li>
+                </ul>
+            </aside>
+
+            <div class="button-group">
+                <button type="submit" class="btn">Convert &amp; Generate I-Cards</button>
+                <button type="button" class="btn btn-secondary">Cancel</button>
+            </div>
+        </section>
+    </div>
+
+</div>
+      </body>
+      </html>
--- a/index.html
+++ b/index.html
--- a/join_our_community.html
+++ b/join_our_community.html
@ -0,0 +1,230 @@
+<!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>join_our_community</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>
+<section id="welcome-benefits" style="padding: 4rem 1.5rem; max-width: 1200px; margin: 0 auto; text-align: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333;">
+    <div style="margin-bottom: 3rem;">
+        <h2 style="font-size: 2.5rem; margin-bottom: 1rem; color: #6a0dad; letter-spacing: 0.05rem;">Welcome & Discover Inner Peace</h2>
+        <p style="font-size: 1.15rem; line-height: 1.8; max-width: 800px; margin: 0 auto 2rem;">
+            At [Organization Name], we believe in fostering a community where individuals can explore their spiritual journey, find balance, and cultivate a deeper connection to themselves and the universe.
+        </p>
+        <blockquote style="font-style: italic; font-size: 1.25rem; line-height: 1.6; max-width: 700px; margin: 0 auto; padding: 1.5rem; border-left: 5px solid #d4af37; background-color: #f9f9f9; color: #555;">
+            "The journey of a thousand miles begins with a single step."
+            <footer style="font-size: 0.9rem; margin-top: 0.8rem; display: block; color: #777;">— Ancient Wisdom</footer>
+        </blockquote>
+    </div>
+
+    <div style="margin-top: 4rem;">
+        <h2 style="font-size: 2.2rem; margin-bottom: 2.5rem; color: #6a0dad; letter-spacing: 0.03rem;">Our Core Offerings</h2>
+        <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem;">
+            <div style="background-color: #ffffff; border-radius: 10px; padding: 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.08); width: calc(33% - 2rem); min-width: 280px; text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease;">
+                <div style="font-size: 3rem; color: #d4af37; margin-bottom: 1rem; text-align: center;">🧘</div>
+                <h3 style="font-size: 1.6rem; margin-bottom: 0.8rem; color: #555;">Guided Meditation Sessions</h3>
+                <p style="font-size: 1rem; line-height: 1.6; color: #666;">
+                    Join our tranquil sessions designed to calm your mind, reduce stress, and enhance your focus. Suitable for all experience levels.
+                </p>
+            </div>
+
+            <div style="background-color: #ffffff; border-radius: 10px; padding: 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.08); width: calc(33% - 2rem); min-width: 280px; text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease;">
+                <div style="font-size: 3rem; color: #d4af37; margin-bottom: 1rem; text-align: center;">🗣️</div>
+                <h3 style="font-size: 1.6rem; margin-bottom: 0.8rem; color: #555;">Enlightening Spiritual Talks</h3>
+                <p style="font-size: 1rem; line-height: 1.6; color: #666;">
+                    Explore profound spiritual topics and teachings through insightful discussions led by experienced guides.
+                </p>
+            </div>
+
+            <div style="background-color: #ffffff; border-radius: 10px; padding: 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.08); width: calc(33% - 2rem); min-width: 280px; text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease;">
+                <div style="font-size: 3rem; color: #d4af37; margin-bottom: 1rem; text-align: center;">🌳</div>
+                <h3 style="font-size: 1.6rem; margin-bottom: 0.8rem; color: #555;">Wellness & Retreat Programs</h3>
+                <p style="font-size: 1rem; line-height: 1.6; color: #666;">
+                    Immerse yourself in nature-based retreats and holistic wellness programs designed for rejuvenation and deep spiritual growth.
+                </p>
+            </div>
+
+            <div style="background-color: #ffffff; border-radius: 10px; padding: 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.08); width: calc(33% - 2rem); min-width: 280px; text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease;">
+                <div style="font-size: 3rem; color: #d4af37; margin-bottom: 1rem; text-align: center;">📚</div>
+                <h3 style="font-size: 1.6rem; margin-bottom: 0.8rem; color: #555;">Study Groups & Workshops</h3>
+                <p style="font-size: 1rem; line-height: 1.6; color: #666;">
+                    Participate in interactive groups to delve deeper into spiritual texts, practices, and mindfulness techniques.
+                </p>
+            </div>
+        </div>
+    </div>
+</section>
+<section id="registration-form" class="py-16 bg-light-soft text-center">
+    <div class="container mx-auto px-4">
+        <h2 class="text-3xl md:text-4xl font-calm text-gold-dark mb-6">Join Our Spiritual Journey</h2>
+        <p class="text-lg text-gray-700 max-w-2xl mx-auto mb-10">Register to receive updates, join our sessions, or simply connect with our community.</p>
+
+        <div class="max-w-md mx-auto bg-white p-8 shadow-lg rounded-lg">
+            <form action="#" method="POST" class="space-y-6">
+                <div>
+                    <label for="reg-name" class="block text-left text-gray-800 font-semibold mb-2">Full Name</label>
+                    <input type="text" id="reg-name" name="name" placeholder="Your Name" required class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lavender-light">
+                </div>
+                <div>
+                    <label for="reg-email" class="block text-left text-gray-800 font-semibold mb-2">Email Address</label>
+                    <input type="email" id="reg-email" name="email" placeholder="you@example.com" required class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lavender-light">
+                </div>
+                <div>
+                    <label for="reg-interest" class="block text-left text-gray-800 font-semibold mb-2">What are you interested in?</label>
+                    <select id="reg-interest" name="interest" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lavender-light">
+                        <option value="">Please Select</option>
+                        <option value="newsletter">Newsletter Updates</option>
+                        <option value="meditation">Meditation Sessions</option>
+                        <option value="talks">Spiritual Talks</option>
+                        <option value="retreats">Retreats & Workshops</option>
+                        <option value="general">General Inquiry / Connect</option>
+                    </select>
+                </div>
+                <div>
+                    <label for="reg-message" class="block text-left text-gray-800 font-semibold mb-2">Your Message (Optional)</label>
+                    <textarea id="reg-message" name="message" rows="4" placeholder="Share a brief message or question..." class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lavender-light resize-y"></textarea>
+                </div>
+                <button type="submit" class="w-full bg-gold-main text-white font-bold py-3 px-6 rounded-md hover:bg-gold-dark transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gold-main focus:ring-offset-2">Register Now</button>
+            </form>
+        </div>
+    </div>
+</section>
+<section class="membership-section">
+    <div class="container">
+        <h2 class="section-title">Membership Options</h2>
+        <p class="section-description">
+            Choose the path that resonates with your spiritual journey. Our memberships offer various levels of engagement and support for your growth.
+        </p>
+
+        <div class="membership-cards-wrapper">
+
+            <div class="membership-card">
+                <h3 class="card-title">Basic Seeker</h3>
+                <div class="card-price">
+                    <span class="price-amount">$0</span><span class="price-period">/month</span>
+                </div>
+                <ul class="card-features">
+                    <li>Access to foundational meditations</li>
+                    <li>Weekly spiritual insights newsletter</li>
+                    <li>Community forum access</li>
+                    <li>Limited online resources</li>
+                </ul>
+                <button class="cta-button">Join for Free</button>
+            </div>
+
+            <div class="membership-card featured-card">
+                <h3 class="card-title">Enlightened Path</h3>
+                <div class="card-price">
+                    <span class="price-amount">$29</span><span class="price-period">/month</span>
+                </div>
+                <ul class="card-features">
+                    <li>All Basic Seeker benefits</li>
+                    <li>Unlimited access to meditation library</li>
+                    <li>Monthly live spiritual talks</li>
+                    <li>Exclusive workshop discounts</li>
+                    <li>Access to advanced teachings</li>
+                </ul>
+                <button class="cta-button">Start Your Journey</button>
+            </div>
+
+            <div class="membership-card">
+                <h3 class="card-title">Sacred Circle</h3>
+                <div class="card-price">
+                    <span class="price-amount">$49</span><span class="price-period">/month</span>
+                </div>
+                <ul class="card-features">
+                    <li>All Enlightened Path benefits</li>
+                    <li>Personalized spiritual guidance session (1/year)</li>
+                    <li>Early access to new content & events</li>
+                    <li>Annual retreat priority booking</li>
+                    <li>Exclusive member-only gatherings</li>
+                </ul>
+                <button class="cta-button">Become a Member</button>
+            </div>
+
+        </div>
+    </div>
+</section>
+<footer class="site-footer">
+    <div class="container">
+        <p class="copyright-text">&copy; 2023 Spiritual Community. All rights reserved.</p>
+        <nav class="footer-nav">
+            <a href="#privacy-policy" class="footer-link">Privacy Policy</a>
+            <span class="separator">|</span>
+            <a href="#terms-of-service" class="footer-link">Terms of Service</a>
+        </nav>
+    </div>
+</footer>
+<section class="contact-section">
+    <div class="container">
+        <h2 class="section-title">Get in Touch with Us</h2>
+        <p class="section-description">We're here to answer any questions you may have or to provide support. Please reach out to us.</p>
+
+        <div class="contact-grid">
+            <div class="contact-form-wrapper">
+                <h3 class="subsection-title">Send Us a Message</h3>
+                <form class="contact-form">
+                    <div class="form-group">
+                        <label for="name">Your Name</label>
+                        <input type="text" id="name" name="name" placeholder="Enter your name" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="email">Your Email</label>
+                        <input type="email" id="email" name="email" placeholder="Enter your email" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="message">Your Message</label>
+                        <textarea id="message" name="message" rows="6" placeholder="Type your message here..." required></textarea>
+                    </div>
+                    <button type="submit" class="btn btn-primary">Send Message</button>
+                </form>
+            </div>
+
+            <div class="contact-info-wrapper">
+                <div class="contact-details">
+                    <h3 class="subsection-title">Contact Information</h3>
+                    <address class="contact-address">
+                        <p><i class="icon-phone"></i> Phone: <a href="tel:+1234567890">+1 (234) 567-890</a></p>
+                        <p><i class="icon-email"></i> Email: <a href="mailto:info@spiritualorg.org">info@spiritualorg.org</a></p>
+                        <p><i class="icon-location"></i> Address: 123 Spirit Path, Serene City, SC 98765</p>
+                    </address>
+
+                    <div class="social-media">
+                        <h4 class="sub-heading">Connect With Us</h4>
+                        <ul class="social-links">
+                            <li><a href="#" aria-label="Facebook"><i class="icon-facebook"></i> Facebook</a></li>
+                            <li><a href="#" aria-label="Instagram"><i class="icon-instagram"></i> Instagram</a></li>
+                            <li><a href="#" aria-label="Twitter"><i class="icon-twitter"></i> Twitter</a></li>
+                            <li><a href="#" aria-label="YouTube"><i class="icon-youtube"></i> YouTube</a></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="location-map">
+                    <h3 class="subsection-title">Our Location</h3>
+                    <div class="map-placeholder">
+                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.220556272551!2d-122.41941558468165!3d37.77492977975971!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80858064b5e0c5d5%3A0x6b4c2b9a7f3f1f3a!2sSan%20Francisco%2C%20CA!5e0!3m2!1sen!2sus!4v1678901234567!5m2!1sen!2sus" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" aria-label="Location Map"></iframe>
+                    </div>
+                </div>
+
+                <div class="newsletter-subscription">
+                    <h3 class="subsection-title">Subscribe to Our Newsletter</h3>
+                    <p>Receive updates, spiritual insights, and event invitations directly to your inbox.</p>
+                    <form class="newsletter-form">
+                        <div class="form-group">
+                            <label for="newsletter-email" class="sr-only">Email for Newsletter</label>
+                            <input type="email" id="newsletter-email" name="newsletter-email" placeholder="Your email address" required>
+                        </div>
+                        <button type="submit" class="btn btn-secondary">Subscribe</button>
+                    </form>
+                </div>
+            </div>
+        </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>
--- a/login.html
+++ b/login.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Login</title>
+          <link rel="stylesheet" href="style.css" />
+      </head>
+      <body>
+      <div class="page-wrapper">
+            <div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">IDPro</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">About Us</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Solutions</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">More<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">Sign Up</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
+<div class="app-form"><h1>Start Your I-Card Transformation Journey</h1><h2>Your Contact Information</h2><div class="form-row"><div class="form-group"><label>First Name</label><input id="first-name" type="text" placeholder="Enter your first name"></div><div class="form-group"><label>Last Name</label><input id="last-name" type="text" placeholder="Enter your last name"></div></div><div class="form-group full-width"><label>Business Email</label><input id="email" type="email" placeholder="your.email@organization.com"></div><h2>Connect with Us</h2><div class="form-group full-width"><label>Phone Number (Optional)</label><input id="phone" type="tel" placeholder="e.g., +1 555-123-4567"></div><h2>Tell Us About Your I-Card Needs</h2><div class="form-group full-width"><textarea id="cover-letter" placeholder="Share details about your organization, number of I-cards needed, or specific features you're looking for. This helps us tailor your experience!"></textarea></div><button type="submit">Get Started Today</button></div>
+
+
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Forgot Password</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css" />
+
+
+    <main class="forgot-password-container" role="main">
+        <header>
+            <h1>Forgot Password?</h1>
+        </header>
+        <section>
+            <p>Enter your email address below and we'll send you a link to reset your password.</p>
+            <form action="/reset-password" method="POST" aria-label="Forgot Password Form">
+                <div class="form-group">
+                    <label for="email">Email Address</label>
+                    <input type="email" id="email" name="email" placeholder="you@example.com" required="" autocomplete="email">
+                </div>
+                <button type="submit" class="submit-button">Send Reset Link</button>
+            </form>
+        </section>
+        <footer class="back-to-login">
+            <p>Remember your password? <a href="/login">Back to Login</a></p>
+        </footer>
+    </main>
+
+</div>
+      </body>
+      </html>
--- a/sign_up.html
+++ b/sign_up.html
@ -0,0 +1,57 @@
+<!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Sign Up</title>
+          <link rel="stylesheet" href="style.css" />
+      </head>
+      <body>
+      <div class="page-wrapper">
+            <div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">IDPro</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">About Us</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Solutions</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">More<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">Sign Up</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
+
+
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Registration Form</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css" />
+
+
+    <section class="registration-section">
+        <header>
+            <h2>Create Your Account</h2>
+            <p>Sign up to manage your I-Card templates and student data.</p>
+        </header>
+        <form action="#" method="POST">
+            <div class="form-group">
+                <label for="fullName">Full Name</label>
+                <input type="text" id="fullName" name="fullName" placeholder="Enter your full name" required="" aria-label="Full Name">
+            </div>
+            <div class="form-group">
+                <label for="email">Email Address</label>
+                <input type="email" id="email" name="email" placeholder="e.g., example@domain.com" required="" aria-label="Email Address">
+            </div>
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input type="password" id="password" name="password" placeholder="Min. 8 characters" required="" aria-label="Password">
+            </div>
+            <div class="form-group">
+                <label for="confirmPassword">Confirm Password</label>
+                <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Re-enter your password" required="" aria-label="Confirm Password">
+            </div>
+            <div class="form-actions">
+                <button type="submit" class="btn btn-primary">Register</button>
+            </div>
+        </form>
+        <footer class="login-link">
+            Already have an account? <a href="#" aria-label="Login">Login</a>
+        </footer>
+    </section>
+
+</div>
+      </body>
+      </html>
--- a/style.css
+++ b/style.css