fix

about.html

@@ -121,6 +121,71 @@
           culpa qui officia deserunt mollit anim id est laborum.
         </p>
       </section>
+
+      <!-- FAQ Section -->
+      <section class="faq-section" aria-labelledby="faq-heading">
+        <h2 id="faq-heading">Frequently Asked Questions</h2>
+        
+        <div class="faq-item">
+          <div class="faq-question" role="button" aria-expanded="false" aria-controls="faq-answer-1">
+            <h4>What makes your teas different from supermarket teas?</h4>
+            <span class="faq-toggle">+</span>
+          </div>
+          <div id="faq-answer-1" class="faq-answer">
+            <p>Our teas are sourced directly from traditional tea gardens and artisan farmers around the world. Unlike supermarket teas that may sit in warehouses for months, our teas are freshly harvested, properly stored, and shipped directly to you. We work closely with tea masters who have perfected their craft over generations, ensuring you receive authentic, premium-quality teas with exceptional flavor profiles.</p>
+          </div>
+        </div>
+
+        <div class="faq-item">
+          <div class="faq-question" role="button" aria-expanded="false" aria-controls="faq-answer-2">
+            <h4>How should I store my tea to maintain freshness?</h4>
+            <span class="faq-toggle">+</span>
+          </div>
+          <div id="faq-answer-2" class="faq-answer">
+            <p>To maintain optimal freshness, store your tea in an airtight container away from light, heat, and moisture. We recommend keeping tea in a cool, dark place like a pantry or cupboard. Avoid storing tea near strong odors, as tea can absorb surrounding scents. Properly stored, most teas will maintain their quality for 6-12 months, while pu-erh teas can actually improve with age when stored correctly.</p>
+          </div>
+        </div>
+
+        <div class="faq-item">
+          <div class="faq-question" role="button" aria-expanded="false" aria-controls="faq-answer-3">
+            <h4>What is the best water temperature for brewing different types of tea?</h4>
+            <span class="faq-toggle">+</span>
+          </div>
+          <div id="faq-answer-3" class="faq-answer">
+            <p>Water temperature is crucial for optimal tea brewing. Here's our guide: Green teas: 160-180°F (71-82°C), White teas: 175-185°F (79-85°C), Oolong teas: 185-205°F (85-96°C), Black teas: 200-212°F (93-100°C), Pu-erh teas: 200-212°F (93-100°C), Herbal infusions: 200-212°F (93-100°C). Using water that's too hot can burn delicate teas, while water that's too cool won't extract the full flavor profile.</p>
+          </div>
+        </div>
+
+        <div class="faq-item">
+          <div class="faq-question" role="button" aria-expanded="false" aria-controls="faq-answer-4">
+            <h4>Do you offer organic teas?</h4>
+            <span class="faq-toggle">+</span>
+          </div>
+          <div id="faq-answer-4" class="faq-answer">
+            <p>Yes! Many of our teas are certified organic, and we work with farms that practice sustainable, chemical-free cultivation methods. Look for the organic certification label on our product pages. Even our non-certified teas are sourced from farms that prioritize environmental stewardship and sustainable farming practices, as we believe great tea starts with healthy soil and happy plants.</p>
+          </div>
+        </div>
+
+        <div class="faq-item">
+          <div class="faq-question" role="button" aria-expanded="false" aria-controls="faq-answer-5">
+            <h4>How long does shipping take, and do you ship internationally?</h4>
+            <span class="faq-toggle">+</span>
+          </div>
+          <div id="faq-answer-5" class="faq-answer">
+            <p>We offer fast shipping throughout the United States, with most orders arriving within 3-5 business days. We also ship internationally to many countries, though delivery times vary by destination (typically 7-14 business days). All orders include tracking information, and we carefully package our teas to ensure they arrive in perfect condition. Free shipping is available on orders over $50 within the US.</p>
+          </div>
+        </div>
+
+        <div class="faq-item">
+          <div class="faq-question" role="button" aria-expanded="false" aria-controls="faq-answer-6">
+            <h4>Can I return or exchange tea if I'm not satisfied?</h4>
+            <span class="faq-toggle">+</span>
+          </div>
+          <div id="faq-answer-6" class="faq-answer">
+            <p>Your satisfaction is our top priority. If you're not completely happy with your tea, please contact us within 30 days of purchase. While we cannot accept returns of opened tea due to food safety regulations, we'll work with you to find a solution - whether that's a replacement, store credit, or refund depending on the circumstances. We want every cup of tea you brew to bring you joy!</p>
+          </div>
+        </div>
+      </section>
     </main>
 
     <footer>

index.html

@@ -45,6 +45,26 @@
           <li><strong>White Tea Collection:</strong> Rare silver needle and white peony from China's Fujian province</li>
           <li><strong>Pu-erh & Fermented Teas:</strong> Aged teas from Yunnan with unique earthy characteristics</li>
         </ul>
+        
+        <!-- Dynamic Image Gallery -->
+        <div class="tea-gallery" role="region" aria-label="Tea collection gallery">
+          <h3>Explore Our Tea Selection</h3>
+          <div class="gallery-container">
+            <div class="gallery-main">
+              <img id="gallery-image" src="images/green-tea-leaves.webp" alt="Premium Green Tea Leaves" />
+              <div class="gallery-controls">
+                <button id="prev-btn" class="gallery-btn" aria-label="Previous image">‹</button>
+                <button id="next-btn" class="gallery-btn" aria-label="Next image">›</button>
+              </div>
+            </div>
+            <div class="gallery-thumbnails">
+              <img src="images/green-tea-leaves.webp" alt="Premium Green Tea Leaves" class="thumbnail active" data-index="0">
+              <img src="images/Indian Black Teas.webp" alt="Indian Black Tea Selection" class="thumbnail" data-index="1">
+              <img src="images/Oolong Selections.jpg" alt="Oolong Tea Collection" class="thumbnail" data-index="2">
+            </div>
+          </div>
+          <p id="gallery-caption" class="gallery-caption">Premium Green Tea Leaves - Hand-picked from our finest gardens</p>
+        </div>
       </section>
     </main>
 

script.js

@@ -1,39 +1,251 @@
 // Global Tea Emporium - JavaScript Functionality
 
-// Contact Form Handling
+// Image Gallery Functionality
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('Gallery script loading...');
+    
+    const galleryImages = [
+        {
+            src: 'images/green-tea-leaves.webp',
+            alt: 'Premium Green Tea Leaves',
+            caption: 'Premium Green Tea Leaves - Hand-picked from our finest gardens'
+        },
+        {
+            src: 'images/Indian Black Teas.webp',
+            alt: 'Indian Black Tea Selection',
+            caption: 'Authentic Indian Black Teas - Rich and robust flavors from Assam and Darjeeling'
+        },
+        {
+            src: 'images/Oolong Selections.jpg',
+            alt: 'Oolong Tea Collection',
+            caption: 'Traditional Oolong Selections - Complex flavors from Taiwan and China'
+        }
+    ];
+
+    let currentImageIndex = 0;
+    const galleryImage = document.getElementById('gallery-image');
+    const galleryCaption = document.getElementById('gallery-caption');
+    const prevBtn = document.getElementById('prev-btn');
+    const nextBtn = document.getElementById('next-btn');
+    const thumbnails = document.querySelectorAll('.thumbnail');
+
+    // Check if gallery elements exist
+    if (!galleryImage || !galleryCaption) {
+        console.log('Gallery image or caption not found');
+        return;
+    }
+    
+    console.log('Gallery elements found:', {
+        image: !!galleryImage,
+        caption: !!galleryCaption,
+        prevBtn: !!prevBtn,
+        nextBtn: !!nextBtn,
+        thumbnails: thumbnails.length
+    });
+
+    function updateGallery(index) {
+        console.log('Updating gallery to index:', index);
+        currentImageIndex = index;
+        galleryImage.src = galleryImages[index].src;
+        galleryImage.alt = galleryImages[index].alt;
+        galleryCaption.textContent = galleryImages[index].caption;
+        
+        // Update active thumbnail
+        thumbnails.forEach((thumb, i) => {
+            thumb.classList.toggle('active', i === index);
+        });
+    }
+
+    function nextImage() {
+        console.log('Next image clicked');
+        const newIndex = (currentImageIndex + 1) % galleryImages.length;
+        updateGallery(newIndex);
+    }
+
+    function prevImage() {
+        console.log('Previous image clicked');
+        const newIndex = (currentImageIndex - 1 + galleryImages.length) % galleryImages.length;
+        updateGallery(newIndex);
+    }
+
+    // Event listeners for gallery controls
+    if (prevBtn) {
+        console.log('Adding prev button listener');
+        prevBtn.addEventListener('click', prevImage);
+    } else {
+        console.log('Prev button not found');
+    }
+
+    if (nextBtn) {
+        console.log('Adding next button listener');
+        nextBtn.addEventListener('click', nextImage);
+    } else {
+        console.log('Next button not found');
+    }
+
+    // Thumbnail click events
+    thumbnails.forEach((thumbnail) => {
+        thumbnail.addEventListener('click', () => {
+            const index = parseInt(thumbnail.getAttribute('data-index'));
+            console.log('Thumbnail clicked, index:', index);
+            if (!isNaN(index)) {
+                updateGallery(index);
+            }
+        });
+    });
+
+    // Auto-advance gallery every 5 seconds
+    setInterval(nextImage, 5000);
+    console.log('Gallery initialized successfully');
+}); // End of DOMContentLoaded for gallery
+
+// Enhanced Contact Form Validation
 document.addEventListener('DOMContentLoaded', function() {
     const contactForm = document.querySelector('.contact-form');
     
     if (contactForm) {
+        const formGroups = contactForm.querySelectorAll('.form-group');
+        
+        // Real-time validation function
+        function validateField(field) {
+            const formGroup = field.closest('.form-group');
+            const errorSpan = formGroup.querySelector('.error-message');
+            let isValid = true;
+            let errorMessage = '';
+
+            // Remove previous validation classes
+            formGroup.classList.remove('error', 'success');
+
+            // Validate required fields
+            if (field.hasAttribute('required') && !field.value.trim()) {
+                isValid = false;
+                errorMessage = 'This field is required.';
+            } else if (field.type === 'email' && field.value) {
+                // Email validation
+                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                if (!emailRegex.test(field.value)) {
+                    isValid = false;
+                    errorMessage = 'Please enter a valid email address.';
+                }
+            } else if (field.type === 'tel' && field.value) {
+                // Phone validation (basic)
+                const phoneRegex = /^[\d\s\-\+\(\)]+$/;
+                if (!phoneRegex.test(field.value)) {
+                    isValid = false;
+                    errorMessage = 'Please enter a valid phone number.';
+                }
+            } else if (field.tagName === 'TEXTAREA' && field.value.length < 10 && field.hasAttribute('required')) {
+                // Message length validation
+                isValid = false;
+                errorMessage = 'Message must be at least 10 characters long.';
+            }
+
+            // Display validation results
+            if (errorSpan) {
+                errorSpan.textContent = errorMessage;
+            }
+            
+            if (isValid && field.value.trim()) {
+                formGroup.classList.add('success');
+            } else if (!isValid) {
+                formGroup.classList.add('error');
+            }
+
+            return isValid;
+        }
+
+        // Add real-time validation to all form fields
+        formGroups.forEach(group => {
+            const input = group.querySelector('input, textarea');
+            if (input) {
+                input.addEventListener('blur', () => validateField(input));
+                input.addEventListener('input', () => {
+                    if (group.classList.contains('error')) {
+                        validateField(input);
+                    }
+                });
+            }
+        });
+
         contactForm.addEventListener('submit', function(e) {
             e.preventDefault();
             
-            // Get form data
+            let isFormValid = true;
             const formData = new FormData(contactForm);
             const data = Object.fromEntries(formData);
             
-            // Simple form validation
+            // Validate all fields
-            if (!data.name || !data.email || !data.subject || !data.message) {
+            formGroups.forEach(group => {
-                alert('Please fill in all required fields.');
+                const input = group.querySelector('input, textarea');
+                if (input && !validateField(input)) {
+                    isFormValid = false;
+                }
+            });
+
+            if (!isFormValid) {
+                // Focus on first error field
+                const firstError = contactForm.querySelector('.form-group.error input, .form-group.error textarea');
+                if (firstError) {
+                    firstError.focus();
+                }
                 return;
             }
             
-            // Email validation
+            // Simulate form submission with loading state
-            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            const submitBtn = contactForm.querySelector('.submit-btn');
-            if (!emailRegex.test(data.email)) {
+            const originalText = submitBtn.textContent;
-                alert('Please enter a valid email address.');
+            submitBtn.textContent = 'Sending...';
-                return;
+            submitBtn.disabled = true;
-            }
             
-            // Simulate form submission
+            setTimeout(() => {
                 alert(`Thank you for your message, ${data.name}! We'll get back to you soon at ${data.email}.`);
-            
-            // Reset form
                 contactForm.reset();
+                formGroups.forEach(group => group.classList.remove('error', 'success'));
+                submitBtn.textContent = originalText;
+                submitBtn.disabled = false;
+            }, 2000);
         });
     }
 });
 
+// FAQ Accordion Functionality
+document.addEventListener('DOMContentLoaded', function() {
+    const faqQuestions = document.querySelectorAll('.faq-question');
+    
+    faqQuestions.forEach(question => {
+        question.addEventListener('click', function() {
+            const answer = this.nextElementSibling;
+            const toggle = this.querySelector('.faq-toggle');
+            const isExpanded = this.getAttribute('aria-expanded') === 'true';
+            
+            // Close all other FAQ items
+            faqQuestions.forEach(otherQuestion => {
+                if (otherQuestion !== this) {
+                    const otherAnswer = otherQuestion.nextElementSibling;
+                    const otherToggle = otherQuestion.querySelector('.faq-toggle');
+                    
+                    otherQuestion.setAttribute('aria-expanded', 'false');
+                    otherAnswer.classList.remove('active');
+                    otherToggle.classList.remove('active');
+                }
+            });
+            
+            // Toggle current FAQ item
+            this.setAttribute('aria-expanded', !isExpanded);
+            answer.classList.toggle('active');
+            toggle.classList.toggle('active');
+        });
+        
+        // Add keyboard navigation
+        question.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.click();
+            }
+        });
+    });
+});
+
 // Smooth scrolling for navigation links
 document.addEventListener('DOMContentLoaded', function() {
     const navLinks = document.querySelectorAll('.main-nav a');

styles.css

@@ -1,4 +1,3 @@
-/* Global Styles */
 * {
     margin: 0;
     padding: 0;
@@ -13,7 +12,6 @@ body {
     background-image: linear-gradient(to bottom, #faf0e6 0%, #f5e1c4 100%);
 }
 
-/* Header Styles */
 header {
     background-color: #8b4513;
     color: white;
@@ -40,7 +38,6 @@ header {
     opacity: 0.7;
 }
 
-/* Navigation Styles */
 .main-nav ul {
     list-style: none;
     display: flex;
@@ -61,7 +58,6 @@ header {
     background-color: #daa520;
 }
 
-/* Main Content Styles */
 main {
     max-width: 1000px;
     margin: 0 auto;
@@ -76,7 +72,6 @@ section {
     box-shadow: 0 3px 10px rgba(139, 69, 19, 0.1);
 }
 
-/* Hero Section */
 .banner {
     text-align: center;
     background-color: #daa520;
@@ -94,7 +89,6 @@ section {
     font-style: italic;
 }
 
-/* Introduction Section */
 .introduction h2 {
     color: #8b4513;
     font-size: 32px;
@@ -109,7 +103,6 @@ section {
     line-height: 1.8;
 }
 
-/* Services Section */
 .services h2 {
     color: #8b4513;
     font-size: 32px;
@@ -136,7 +129,6 @@ section {
     color: #8b4513;
 }
 
-/* Footer Styles */
 footer {
     background-color: #8b4513;
     color: white;
@@ -157,7 +149,6 @@ footer a:hover {
     text-decoration: underline;
 }
 
-/* Contact Page Styles */
 .contact-details {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -234,7 +225,6 @@ footer a:hover {
     background-color: #daa520;
 }
 
-/* About Page Styles */
 .story-origins,
 .story-mission,
 .story-team {
@@ -261,7 +251,203 @@ footer a:hover {
     margin-bottom: 15px;
 }
 
-/* Responsive Design */
+/* Image Gallery Styles */
+.tea-gallery {
+    margin-top: 40px;
+    text-align: center;
+}
+
+.tea-gallery h3 {
+    color: #8b4513;
+    font-size: 28px;
+    margin-bottom: 25px;
+}
+
+.gallery-container {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.gallery-main {
+    position: relative;
+    margin-bottom: 20px;
+}
+
+#gallery-image {
+    width: 100%;
+    max-height: 400px;
+    object-fit: cover;
+    border-radius: 10px;
+    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
+}
+
+.gallery-controls {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px;
+    pointer-events: none;
+}
+
+.gallery-btn {
+    background-color: rgba(139, 69, 19, 0.9);
+    color: white;
+    border: 2px solid #daa520;
+    font-size: 24px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    pointer-events: all;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+}
+
+.gallery-btn:hover {
+    background-color: #daa520;
+    color: #5d4037;
+    transform: scale(1.1);
+}
+
+.gallery-btn:active {
+    transform: scale(0.95);
+}
+
+.gallery-thumbnails {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    margin-bottom: 15px;
+}
+
+.thumbnail {
+    width: 80px;
+    height: 60px;
+    object-fit: cover;
+    border-radius: 5px;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.3s, transform 0.3s;
+    border: 2px solid transparent;
+}
+
+.thumbnail:hover,
+.thumbnail.active {
+    opacity: 1;
+    transform: scale(1.1);
+    border-color: #daa520;
+}
+
+.gallery-caption {
+    font-style: italic;
+    color: #8b4513;
+    font-size: 16px;
+    margin-top: 10px;
+}
+
+/* FAQ Section Styles */
+.faq-section {
+    margin-top: 40px;
+}
+
+.faq-section h3 {
+    color: #8b4513;
+    font-size: 28px;
+    margin-bottom: 25px;
+    text-align: center;
+}
+
+.faq-item {
+    background-color: #f5e1c4;
+    margin-bottom: 15px;
+    border-radius: 8px;
+    overflow: hidden;
+    border-left: 5px solid #daa520;
+}
+
+.faq-question {
+    background-color: #8b4513;
+    color: white;
+    padding: 15px 20px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: background-color 0.3s;
+}
+
+.faq-question:hover {
+    background-color: #daa520;
+}
+
+.faq-question h4 {
+    margin: 0;
+    font-size: 18px;
+}
+
+.faq-toggle {
+    font-size: 20px;
+    transition: transform 0.3s;
+}
+
+.faq-answer {
+    padding: 0 20px;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease, padding 0.3s ease;
+    background-color: #fffaf0;
+}
+
+.faq-answer.active {
+    padding: 20px;
+    max-height: 200px;
+}
+
+.faq-toggle.active {
+    transform: rotate(45deg);
+}
+
+/* Form Validation Styles */
+.error-message {
+    color: #d32f2f;
+    font-size: 14px;
+    margin-top: 5px;
+    display: block;
+}
+
+.form-group.error input,
+.form-group.error textarea {
+    border-color: #d32f2f;
+}
+
+.form-group.success input,
+.form-group.success textarea {
+    border-color: #4caf50;
+}
+
+/* Skip link for accessibility */
+.skip-link {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background: #8b4513;
+    color: white;
+    padding: 8px;
+    text-decoration: none;
+    border-radius: 0 0 5px 0;
+    transition: top 0.3s;
+}
+
+.skip-link:focus {
+    top: 0;
+}
+
 @media (max-width: 768px) {
     .main-nav ul {
         flex-direction: column;
@@ -284,4 +470,13 @@ footer a:hover {
     .values-list {
         grid-template-columns: 1fr;
     }
+    
+    .gallery-thumbnails {
+        flex-wrap: wrap;
+    }
+    
+    .thumbnail {
+        width: 60px;
+        height: 45px;
+    }
 }