All pages responsive animation overflow issues are fixed

This commit is contained in:
akash 2025-12-08 18:45:52 +05:30
parent 08169e6ad8
commit ed302a8a1c
8 changed files with 63 additions and 21 deletions

View File

@ -34,10 +34,10 @@ export default function AboutContent() {
};
const slideInLeft = {
hidden: { opacity: 0, x: -50 },
hidden: { opacity: 0, y: 30 },
visible: {
opacity: 1,
x: 0,
y: 0,
transition: {
duration: 0.7
}
@ -45,10 +45,10 @@ export default function AboutContent() {
};
const slideInRight = {
hidden: { opacity: 0, x: 50 },
hidden: { opacity: 0, y: 30 },
visible: {
opacity: 1,
x: 0,
y: 0,
transition: {
duration: 0.7
}
@ -235,9 +235,9 @@ export default function AboutContent() {
<motion.div
key={currentTestimonial}
className={styles.testimonialCard}
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -50 }}
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
transition={{ duration: 0.5 }}
>
<p className={styles.testimonialText}>"{testimonialData[currentTestimonial].text}"</p>

View File

@ -307,6 +307,7 @@
justify-content: center;
gap: 1rem;
margin-top: 2rem;
display: none;
}
.dot {
@ -637,6 +638,47 @@
}
}
@media (max-width: 767px) and (min-width: 200px) {
.testimonialSlider {
display: flex;
align-items: center;
justify-content: center;
max-width: 900px;
margin: 0 auto;
position: relative;
padding: 0 10px !important;
/* Reduced side padding (enough for arrows) */
}
.testimonialCard {
padding: 1.5rem 1rem !important;
/* Reduced card padding */
gap: 1rem !important;
}
.testimonialText {
font-size: 1rem !important;
/* Reduced font size */
line-height: 1.5;
}
.sliderBtn {
width: 18px;
height: 25px;
font-size: 1rem;
}
.sliderBtn:first-child {
left: -6px;
}
.sliderBtn:last-child {
right: -6px;
}
}
@media (max-width: 500px) {
.faqContainer {

View File

@ -197,9 +197,9 @@ export default function GalleryContent() {
<motion.div
className={styles.lightboxImageWrapper}
key={currentIndex}
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -50 }}
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.9 }}
transition={{ duration: 0.3 }}
>
<Image

View File

@ -163,8 +163,8 @@ export default function ContactContent() {
{/* Left Side - Book a Table Form */}
<motion.div
className={styles.formBlock}
initial={{ opacity: 0, x: -60 }}
whileInView={{ opacity: 1, x: 0 }}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
>
@ -316,8 +316,8 @@ export default function ContactContent() {
{/* Right Side - Location Info & Map */}
<motion.div
className={styles.infoBlock}
initial={{ opacity: 0, x: 60 }}
whileInView={{ opacity: 1, x: 0 }}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
>

View File

@ -67,10 +67,10 @@ export default function CateringContent() {
};
const slideInLeft = {
hidden: { opacity: 0, x: -50 },
hidden: { opacity: 0, y: 30 },
visible: {
opacity: 1,
x: 0,
y: 0,
transition: {
duration: 0.7
}
@ -78,10 +78,10 @@ export default function CateringContent() {
};
const slideInRight = {
hidden: { opacity: 0, x: 50 },
hidden: { opacity: 0, y: 30 },
visible: {
opacity: 1,
x: 0,
y: 0,
transition: {
duration: 0.7
}

View File

@ -100,7 +100,7 @@
@media (max-width: 768px) {
.faqSection {
padding: 40px 15px;
padding: 40px 0px;
}
.faqTitle {

View File

@ -1,5 +1,5 @@
.sectionHeading {
padding: 80px 20px 40px;
padding: 0px 20px 40px;
max-width: 900px;
margin: 0 auto;
text-align: center;

View File

@ -65,7 +65,7 @@ export default function Testimonials() {
</div>
</div>
</div>
<h3 className={styles.name}> {item.name}</h3>
{/* <h3 className={styles.name}>— {item.name}</h3> */}
<p className={styles.testimonialText}>"{item.text}"</p>
<div style={{ fontSize: '1.5rem', color: '#ffdf00', textAlign: 'center', letterSpacing: '3px', marginTop: '20px' }}>
{'★★★★★'}