Skip to content

feat: implement interactive testimonials and feedback workflow #897

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AyushRBuilds wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: implement interactive testimonials and feedback workflow #897

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

229 changes: 119 additions & 110 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -683,133 +683,142 @@ <h3 style="font-family: 'Playfair Display', serif; margin-bottom: 20px; color: v
</section>

<section class="bb-reviews">
<p class="eyebrow">Loved by our customers</p>
<h2>Sweet Words from <em>Happy Customers</em></h2>

<div class="reviews-grid">
<!-- Background SVGs -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="position: absolute; top: 15%; left: 10%; width: 140px; opacity: 0.2; color: #e8d0b0; transform: rotate(-15deg);">
<path d="M4.5 12h15c0-3.3-2.7-6-6-6-1.5 0-2.8.6-3.8 1.5C8.7 6.6 7.4 6 5.9 6 4.3 6 3 7.3 3 8.9c0 1 .5 1.9 1.5 2.5z" />
<path d="M5.5 12l1.5 9h10l1.5-9" />
<path d="M12 6V3" />
<circle cx="12" cy="2" r="1" />
</svg>

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="position: absolute; bottom: 15%; right: 10%; width: 160px; opacity: 0.2; color: #e8d0b0; transform: rotate(20deg);">
<path d="M20 21H4v-8l16-6v14z" />
<path d="M4 13l16-6" />
<path d="M4 17h16" />
<path d="M12 7v-4" />
<circle cx="12" cy="2" r="1" />
</svg>

<div style="text-align: center; position: relative; z-index: 10; margin-bottom: 40px;">
<p class="eyebrow">Loved by our customers</p>
<h2>Sweet Words from <em>Happy Customers</em></h2>
</div>

<div class="review-card featured">
<span class="featured-badge">Top review</span>
<span class="quote-mark">"</span>
<div class="stars">★★★★★</div>
<p class="review-text">
The brownies were unbelievably rich and fresh.
<div class="bb-scroller-box" style="--animation-duration: 40s; --animation-direction: forwards;">
<div class="bb-scroller-track">
<div class="bb-review-item" onclick="openTestimonialModal(this)">
<span style="position: absolute; top: 10px; left: 15px; font-family: Georgia, serif; font-size: 5rem; color: rgba(232, 208, 176, 0.4); line-height: 1; pointer-events: none;">"</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="position: absolute; top: 20px; right: 20px; width: 45px; opacity: 0.15; color: #b07d3e; pointer-events: none; transform: rotate(10deg);">
<path d="M4.5 12h15c0-3.3-2.7-6-6-6-1.5 0-2.8.6-3.8 1.5C8.7 6.6 7.4 6 5.9 6 4.3 6 3 7.3 3 8.9c0 1 .5 1.9 1.5 2.5z" />
<path d="M5.5 12l1.5 9h10l1.5-9" />
<path d="M12 6V3" />
<circle cx="12" cy="2" r="1" />
</svg>
<p class="review-text" style="position: relative; z-index: 2;">
The brownies were <span class="highlight">unbelievably rich and fresh</span>.
You can genuinely feel the homemade touch in every bite.
This isn't just food — it's comfort wrapped in chocolate.
</p>

<div class="reviewer">
<div class="reviewer-avatar">KS</div>
<div>
<p class="reviewer-name">Keerthana S.</p>
<p class="reviewer-location">Krishnagiri</p>
</div>
</div>
</div>

<div class="review-card">
<span class="quote-mark">"</span>
<div class="stars">★★★★★</div>
<p class="review-text">
Ordered a birthday cake and everyone loved it.
Beautiful presentation and amazing taste!
</p>

<div class="reviewer">
<div class="reviewer-avatar">RM</div>
<div>
<p class="reviewer-name">Rahul M.</p>
<p class="reviewer-location">Krishnagiri</p>
</div>

<div class="review-card">
<span class="quote-mark">"</span>
<div class="stars">★★★★★</div>
<p class="review-text">
One of the best homemade dessert brands here.
Fresh, soft, and perfectly balanced sweetness.
</p>

<div class="reviewer">
<div class="reviewer-avatar">DR</div>
<div>
<p class="reviewer-name">Divya R.</p>
<p class="reviewer-location">Krishnagiri</p>
</div>

<div class="review-card">
<span class="quote-mark">"</span>
<div class="stars">★★★★★</div>
<p class="review-text">
The cookies tasted just like homemade treats from childhood.
Soft, fresh and absolutely comforting.
</p>

<div class="reviewer">
<div class="reviewer-avatar">AK</div>
<div>
<p class="reviewer-name">Ananya K.</p>
<p class="reviewer-location">Krishnagiri</p>
</div>

</div>

<div class="review-card">
<span class="quote-mark">"</span>
<div class="stars">★★★★★</div>
<p class="review-text">
Brownie Bliss never disappoints.
Every dessert feels thoughtfully crafted and beautifully packed.
</p>

<div class="reviewer">
<div class="reviewer-avatar">SP</div>
<div>
<p class="reviewer-name">Sriram P.</p>
<p class="reviewer-location">Krishnagiri</p>
</div>
<h3
style="font-family: 'Playfair Display', serif; font-size: 26px; color: #3C1E14; margin-bottom: 8px; font-weight: 500;">
Share Your Experience</h3>
<p style="color: var(--text-mid); font-size: 15px; margin-bottom: 24px; opacity: 0.8;">We'd love
to hear your thoughts and suggestions.</p>

<form
onsubmit="event.preventDefault(); showToast('Thank you for your feedback! ⭐'); this.reset();"
style="display: inline-block;">
<button class="hero-cta premium-write-btn" type="submit">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2.5" style="margin-right: 4px;">
<path d="M12 20h9" stroke-linecap="round" stroke-linejoin="round" />
<path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Write a Review
</button>
</form>
</div>
</div>

</div>
</section>

<div id="reviewModal" class="modal">
<div class="modal-content">
<span class="close-btn" onClick="closeReviewModal()">&times;</span>
<div class="bb-review-item" onclick="openTestimonialModal(this)">
<span style="position: absolute; top: 10px; left: 15px; font-family: Georgia, serif; font-size: 5rem; color: rgba(232, 208, 176, 0.4); line-height: 1; pointer-events: none;">"</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="position: absolute; top: 20px; right: 20px; width: 45px; opacity: 0.15; color: #b07d3e; pointer-events: none; transform: rotate(-5deg);">
<path d="M20 21H4v-8l16-6v14z" />
<path d="M4 13l16-6" />
<path d="M4 17h16" />
<path d="M12 7v-4" />
<circle cx="12" cy="2" r="1" />
</svg>
<p class="review-text" style="position: relative; z-index: 2;">
Ordered a birthday cake and everyone loved it.
<span class="highlight">Beautiful presentation</span> and amazing taste!
</p>
<div class="reviewer">
<div>
<p class="reviewer-name">Rahul M.</p>
<p class="reviewer-location">Krishnagiri</p>
</div>
</div>
</div>

<h2>Write a review</h2>
<div class="bb-review-item" onclick="openTestimonialModal(this)">
<span style="position: absolute; top: 10px; left: 15px; font-family: Georgia, serif; font-size: 5rem; color: rgba(232, 208, 176, 0.4); line-height: 1; pointer-events: none;">"</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="position: absolute; top: 20px; right: 20px; width: 45px; opacity: 0.15; color: #b07d3e; pointer-events: none; transform: rotate(15deg);">
<path d="M4.5 12h15c0-3.3-2.7-6-6-6-1.5 0-2.8.6-3.8 1.5C8.7 6.6 7.4 6 5.9 6 4.3 6 3 7.3 3 8.9c0 1 .5 1.9 1.5 2.5z" />
<path d="M5.5 12l1.5 9h10l1.5-9" />
<path d="M12 6V3" />
<circle cx="12" cy="2" r="1" />
</svg>
<p class="review-text" style="position: relative; z-index: 2;">
One of the best homemade dessert brands here.
Fresh, soft, and <span class="highlight">perfectly balanced sweetness</span>.
</p>
<div class="reviewer">
<div>
<p class="reviewer-name">Divya R.</p>
<p class="reviewer-location">Krishnagiri</p>
</div>
</div>
</div>

<form id="reviewForm">
<textarea id="reviewText"
placeholder="Write your review here..."
required></textarea>
<div class="bb-review-item" onclick="openTestimonialModal(this)">
<span style="position: absolute; top: 10px; left: 15px; font-family: Georgia, serif; font-size: 5rem; color: rgba(232, 208, 176, 0.4); line-height: 1; pointer-events: none;">"</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="position: absolute; top: 20px; right: 20px; width: 45px; opacity: 0.15; color: #b07d3e; pointer-events: none; transform: rotate(-10deg);">
<path d="M20 21H4v-8l16-6v14z" />
<path d="M4 13l16-6" />
<path d="M4 17h16" />
<path d="M12 7v-4" />
<circle cx="12" cy="2" r="1" />
</svg>
<p class="review-text" style="position: relative; z-index: 2;">
The cookies tasted <span class="highlight">just like homemade treats</span> from childhood.
Soft, fresh and absolutely comforting.
</p>
<div class="reviewer">
<div>
<p class="reviewer-name">Ananya K.</p>
<p class="reviewer-location">Krishnagiri</p>
</div>
</div>
</div>

<button type="submit" class="submit-btn">Submit Review</button>
</form>
<div class="bb-review-item" onclick="openTestimonialModal(this)">
<span style="position: absolute; top: 10px; left: 15px; font-family: Georgia, serif; font-size: 5rem; color: rgba(232, 208, 176, 0.4); line-height: 1; pointer-events: none;">"</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="position: absolute; top: 20px; right: 20px; width: 45px; opacity: 0.15; color: #b07d3e; pointer-events: none; transform: rotate(5deg);">
<path d="M4.5 12h15c0-3.3-2.7-6-6-6-1.5 0-2.8.6-3.8 1.5C8.7 6.6 7.4 6 5.9 6 4.3 6 3 7.3 3 8.9c0 1 .5 1.9 1.5 2.5z" />
<path d="M5.5 12l1.5 9h10l1.5-9" />
<path d="M12 6V3" />
<circle cx="12" cy="2" r="1" />
</svg>
<p class="review-text" style="position: relative; z-index: 2;">
Brownie Bliss never disappoints.
Every dessert feels <span class="highlight">thoughtfully crafted</span> and beautifully packed.
</p>
<div class="reviewer">
<div>
<p class="reviewer-name">Sriram P.</p>
<p class="reviewer-location">Krishnagiri</p>
</div>
</div>
</div>
</div>
</div>
</section>

</div>
</section>
<!-- Testimonial Zoom Modal -->
<div id="testimonialZoomModal" class="modal">
<div class="modal-content zoom-modal-content">
<span class="close-btn" onClick="closeTestimonialModal()">&times;</span>
<div id="testimonialZoomBody"></div>
</div>
</div>

<!-- FOOTER -->
<footer id="contact">
Expand Down
68 changes: 67 additions & 1 deletion public/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1840,4 +1840,70 @@ document.addEventListener('DOMContentLoaded', () => {
setTimeout(function () {
btn.classList.add("visible");
}, 2000);
})();
})();

// ============================================================
// TESTIMONIAL & REVIEW MODALS
// ============================================================

function openTestimonialModal(cardElement) {
const modal = document.getElementById('testimonialZoomModal');
const body = document.getElementById('testimonialZoomBody');
if (!modal || !body) return;

// Clone the card content but remove onclick to prevent recursive opening
const clone = cardElement.cloneNode(true);
clone.removeAttribute('onclick');
clone.classList.remove('featured');

body.innerHTML = '';
body.appendChild(clone);

modal.style.display = 'flex';
document.body.style.overflow = 'hidden';
}

function closeTestimonialModal() {
const modal = document.getElementById('testimonialZoomModal');
if (modal) {
modal.style.display = 'none';
document.body.style.overflow = '';
}
}

// Close modals when clicking outside
window.addEventListener('click', (e) => {
const zoomModal = document.getElementById('testimonialZoomModal');
if (e.target === zoomModal) {
closeTestimonialModal();
}
});

// ============================================================
// ACETERNITY UI CARD STACK - Vanilla JS Implementation
// ============================================================
document.addEventListener("DOMContentLoaded", () => {
// Infinite Moving Cards logic (Vanilla JS)
const scrollerContainer = document.querySelector(".bb-scroller-box");
const scrollerList = document.querySelector(".bb-scroller-track");

if (scrollerContainer && scrollerList) {
// Clone all items in the list to create the seamless infinite effect
const scrollerContent = Array.from(scrollerList.children);
scrollerContent.forEach((item) => {
const duplicatedItem = item.cloneNode(true);
// Remove any duplicate IDs if they exist to prevent HTML invalidation
duplicatedItem.removeAttribute('id');
scrollerList.appendChild(duplicatedItem);
});
}
});

function scrollToFeedback(e) {
if (e) e.preventDefault();
const el = document.getElementById('feedback');
if (el) {
const y = el.getBoundingClientRect().top + window.scrollY - 80;
window.scrollTo({ top: y, behavior: 'smooth' });
}
}
Loading