All pages responsive animation overflow issues are fixed
This commit is contained in:
parent
08169e6ad8
commit
ed302a8a1c
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 }}
|
||||
>
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.faqSection {
|
||||
padding: 40px 15px;
|
||||
padding: 40px 0px;
|
||||
}
|
||||
|
||||
.faqTitle {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.sectionHeading {
|
||||
padding: 80px 20px 40px;
|
||||
padding: 0px 20px 40px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
@ -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' }}>
|
||||
{'★★★★★'}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user