resposive issues are home page bg images are updated
This commit is contained in:
akash
parent
a33ad0ac5b
commit
53051c4be0
10
package-lock.json
generated
10
package-lock.json
generated
@ -14,6 +14,7 @@
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0",
|
||||
"react-google-recaptcha": "^3.1.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"selenium-webdriver": "^4.38.0",
|
||||
"sitemap": "^9.0.0",
|
||||
"xml2js": "^0.6.2"
|
||||
@ -5069,6 +5070,15 @@
|
||||
"react": ">=16.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-icons": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
|
||||
"integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0",
|
||||
"react-google-recaptcha": "^3.1.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"selenium-webdriver": "^4.38.0",
|
||||
"sitemap": "^9.0.0",
|
||||
"xml2js": "^0.6.2"
|
||||
|
||||
BIN
public/images/about-right-bg.webp
Normal file
BIN
public/images/about-right-bg.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 776 KiB After Width: | Height: | Size: 527 KiB |
BIN
public/images/footer-bg.webp
Normal file
BIN
public/images/footer-bg.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
public/images/footer-logo.webp
Normal file
BIN
public/images/footer-logo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
public/images/testimonial-bg.webp
Normal file
BIN
public/images/testimonial-bg.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
575
src/app/about-us/about.module.css
Normal file
575
src/app/about-us/about.module.css
Normal file
@ -0,0 +1,575 @@
|
||||
.main {
|
||||
background-color: var(--color-dark);
|
||||
color: var(--color-text-light);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 10rem 2rem;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/hero-1.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 4rem;
|
||||
color: var(--color-gold);
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 1.1rem;
|
||||
color: #C5A059;
|
||||
font-family: var(--font-lato);
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: #fff;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
color: var(--color-gold);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 80px 20px;
|
||||
background-color: #f5e6d3;
|
||||
}
|
||||
|
||||
.featuresSection {
|
||||
background-color: #3a0c08;
|
||||
background-image: url('/images/section-bg.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.testimonialsSection {
|
||||
background-color: #3a0c08;
|
||||
background-image: url('/images/about-testimonial-bg.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.textBlock {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.imageBlock {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 3rem;
|
||||
color: #5d4037;
|
||||
margin-bottom: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.sectionTitleCenter {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 3.5rem;
|
||||
color: #C5A059;
|
||||
margin-bottom: 3rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
color: #5d4037;
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0.9;
|
||||
font-family: var(--font-lato);
|
||||
}
|
||||
|
||||
.image {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 4px solid #C5A059;
|
||||
}
|
||||
|
||||
.menuButton {
|
||||
display: inline-block;
|
||||
padding: 15px 40px;
|
||||
border: 2px solid #C5A059;
|
||||
color: #C5A059;
|
||||
font-family: var(--font-lato);
|
||||
font-size: 1.1rem;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
background: transparent;
|
||||
letter-spacing: 1px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.menuButton:hover {
|
||||
background-color: #C5A059;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.featuresGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 3rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.featureCard {
|
||||
background-color: #F5E6D3;
|
||||
padding: 2.5rem 2rem;
|
||||
text-align: center;
|
||||
border: 4px solid #C5A059;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.featureCard:hover {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.featureImageWrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 2px solid #C5A059;
|
||||
}
|
||||
|
||||
.featureImage {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.featureTitle {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 1.8rem;
|
||||
color: #3e2723;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.featureDesc {
|
||||
font-family: var(--font-lato);
|
||||
font-size: 1rem;
|
||||
color: #5d4037;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Testimonials Slider */
|
||||
.testimonialSlider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sliderBtn {
|
||||
background: transparent;
|
||||
border: 2px solid #C5A059;
|
||||
color: #C5A059;
|
||||
font-size: 2.5rem;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sliderBtn:hover {
|
||||
background-color: #C5A059;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.testimonialCard {
|
||||
background-color: #F5E6D3;
|
||||
padding: 3rem 2.5rem;
|
||||
border: 4px solid #C5A059;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
flex: 1;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.testimonialText {
|
||||
font-family: var(--font-lato);
|
||||
font-size: 1.3rem;
|
||||
color: #5d4037;
|
||||
line-height: 1.8;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.testimonialAuthor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.authorImageWrapper {
|
||||
position: relative;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 3px solid #C5A059;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.authorImage {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.authorInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.authorName {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 1.2rem;
|
||||
color: #3e2723;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.authorRole {
|
||||
font-family: var(--font-lato);
|
||||
font-size: 0.95rem;
|
||||
color: #836839;
|
||||
}
|
||||
|
||||
.sliderDots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
border: 2px solid #C5A059;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dot:hover,
|
||||
.activeDot {
|
||||
background-color: #C5A059;
|
||||
}
|
||||
|
||||
/* Call to Action Section */
|
||||
.ctaSection {
|
||||
padding: 5rem 2rem;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ctaOverlay {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: rgba(58, 12, 8, 0.9);
|
||||
padding: 4rem 2rem;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
border: 4px solid #C5A059;
|
||||
}
|
||||
|
||||
.ctaTitle {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 3rem;
|
||||
color: #C5A059;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.ctaSubtitle {
|
||||
font-family: var(--font-lato);
|
||||
font-size: 1.3rem;
|
||||
color: #F5E6D3;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.ctaButton {
|
||||
display: inline-block;
|
||||
padding: 15px 40px;
|
||||
border: 2px solid #C5A059;
|
||||
color: #C5A059;
|
||||
font-family: var(--font-lato);
|
||||
font-size: 1.1rem;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
background: transparent;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.ctaButton:hover {
|
||||
background-color: #C5A059;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.featuresGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.testimonialSlider {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sliderBtn {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.testimonialCard {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.faqContainer {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.faqImageBlock {
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.heroTitle {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 60px 10px;
|
||||
}
|
||||
|
||||
.sectionTitleCenter {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.ctaTitle {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.sliderBtn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.faqSection {
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
.faqTitle {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.faqSubtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.faqQuestion {
|
||||
padding: 1.2rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.faqAnswer {
|
||||
padding: 1.2rem 1.5rem;
|
||||
}
|
||||
|
||||
.faqImageBlock {
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* FAQ Section Styles */
|
||||
.faqSection {
|
||||
padding: 80px 20px;
|
||||
background-color: #F5E6D3;
|
||||
}
|
||||
|
||||
.faqContainer {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.faqImageBlock {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* min-height: 600px; */
|
||||
}
|
||||
|
||||
.faqImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.faqContentBlock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.faqTitle {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 2.5rem;
|
||||
color: #5d4037;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.faqSubtitle {
|
||||
font-family: var(--font-lato);
|
||||
font-size: 1.1rem;
|
||||
color: #836839;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.faqAccordion {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.faqItem {
|
||||
background: #fff;
|
||||
border: 2px solid #C5A059;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.faqItem:hover {
|
||||
box-shadow: 0 4px 12px rgba(197, 160, 89, 0.2);
|
||||
}
|
||||
|
||||
.faqQuestion {
|
||||
width: 100%;
|
||||
padding: 1.5rem 2rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-lato);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #5d4037;
|
||||
text-align: left;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.faqQuestion:hover {
|
||||
background-color: #C5A059;
|
||||
}
|
||||
|
||||
.faqQuestionActive {
|
||||
background-color: #C5A059;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.faqIcon {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #C5A059;
|
||||
transition: transform 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.faqQuestionActive .faqIcon {
|
||||
color: #fff;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.faqAnswer {
|
||||
padding: 1.5rem 2rem;
|
||||
border-top: 1px solid #e0d5c7;
|
||||
animation: slideDown 0.3s ease;
|
||||
}
|
||||
|
||||
.faqAnswer p {
|
||||
font-family: var(--font-lato);
|
||||
font-size: 1rem;
|
||||
color: #5d4037;
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
168
src/app/about-us/about_temp.css
Normal file
168
src/app/about-us/about_temp.css
Normal file
@ -0,0 +1,168 @@
|
||||
.main {
|
||||
background-color: var(--color-dark);
|
||||
color: var(--color-text-light);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 10rem 2rem;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/hero-1.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 4rem;
|
||||
color: var(--color-gold);
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 1.1rem;
|
||||
color: #C5A059;
|
||||
font-family: var(--font-lato);
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: #fff;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
color: var(--color-gold);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 80px 10px;
|
||||
background-color: #f5e6d3;
|
||||
}
|
||||
|
||||
.featuresSection {
|
||||
background-color: #3a0c08;
|
||||
background-image: url('/images/section-bg.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.testimonialsSection {
|
||||
background-color: #0a0a0a;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.textBlock {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.imageBlock {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 3rem;
|
||||
color: #C5A059;
|
||||
margin-bottom: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.sectionTitleCenter {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 3.5rem;
|
||||
color: #C5A059;
|
||||
margin-bottom: 3rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
color: #C5A059;
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0.9;
|
||||
font-family: var(--font-lato);
|
||||
}
|
||||
|
||||
.image {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 4px solid #C5A059;
|
||||
}
|
||||
|
||||
.menuButton {
|
||||
display: inline-block;
|
||||
padding: 15px 40px;
|
||||
border: 2px solid #C5A059;
|
||||
color: #C5A059;
|
||||
font-family: var(--font-lato);
|
||||
font-size: 1.1rem;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
background: transparent;
|
||||
letter-spacing: 1px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.menuButton:hover {
|
||||
background-color: #C5A059;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.featuresGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 3rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.featureCard {
|
||||
background-color: #F5E6D3;
|
||||
padding: 2.5rem 2rem;
|
||||
text-align: center;
|
||||
border: 4px solid #C5A059;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.featureCard:hover {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.featureImageWrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 2px solid #C5A059;
|
||||
}
|
||||
352
src/app/about-us/page.tsx
Normal file
352
src/app/about-us/page.tsx
Normal file
@ -0,0 +1,352 @@
|
||||
'use client'
|
||||
|
||||
import Navbar from "@/components/Navbar/Navbar";
|
||||
import Footer from "@/components/Footer/Footer";
|
||||
import FAQ from "@/components/FAQ/FAQ";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import styles from "./about.module.css";
|
||||
import { featuresData, testimonialData, ctaData, aboutFaqData } from "@/utils/constant";
|
||||
import { useState, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
export default function AboutPage() {
|
||||
const [currentTestimonial, setCurrentTestimonial] = useState(0);
|
||||
|
||||
// Animation variants
|
||||
const fadeInUp = {
|
||||
hidden: { opacity: 0, y: 30 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.6
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const fadeIn = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { duration: 0.8 }
|
||||
}
|
||||
};
|
||||
|
||||
const slideInLeft = {
|
||||
hidden: { opacity: 0, x: -50 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: {
|
||||
duration: 0.7
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const slideInRight = {
|
||||
hidden: { opacity: 0, x: 50 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: {
|
||||
duration: 0.7
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const staggerContainer = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.2,
|
||||
delayChildren: 0.1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Auto-slide testimonials
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentTestimonial((prev) => (prev + 1) % testimonialData.length);
|
||||
}, 5000); // Change every 5 seconds
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const nextTestimonial = () => {
|
||||
setCurrentTestimonial((prev) => (prev + 1) % testimonialData.length);
|
||||
};
|
||||
|
||||
const prevTestimonial = () => {
|
||||
setCurrentTestimonial((prev) => (prev - 1 + testimonialData.length) % testimonialData.length);
|
||||
};
|
||||
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Banner */}
|
||||
<motion.section
|
||||
className={styles.hero}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={fadeIn}
|
||||
>
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>About Us</h1>
|
||||
<p className={styles.breadcrumb}>
|
||||
<Link href="/">Home</Link> / About Us
|
||||
</p>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
{/* About Section - No boxed structure */}
|
||||
<section className={styles.section}>
|
||||
<motion.div
|
||||
className={styles.container}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
variants={staggerContainer}
|
||||
>
|
||||
<motion.div className={styles.textBlock} variants={slideInLeft}>
|
||||
<h2 className={styles.sectionTitle}>Our Story</h2>
|
||||
<p className={styles.text}>
|
||||
Founded in 2010, Antalya Restaurant began with a simple mission: to bring the authentic flavors of Turkey to our community.
|
||||
What started as a small family-run kitchen has grown into a beloved dining destination, known for its warm hospitality and traditional recipes passed down through generations.
|
||||
</p>
|
||||
<p className={styles.text}>
|
||||
Every dish we serve tells a story of tradition, passion, and dedication to the culinary arts. Our chefs use time-honored techniques combined with the freshest ingredients to create an unforgettable dining experience.
|
||||
</p>
|
||||
<Link href="/menu" className={styles.menuButton}>
|
||||
View Our Menu
|
||||
</Link>
|
||||
</motion.div>
|
||||
<motion.div className={styles.imageBlock} variants={slideInRight}>
|
||||
<Image src="/images/restaurant-interior.png" alt="Our Story" width={500} height={350} className={styles.image} />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Features Section - With real images */}
|
||||
<section className={`${styles.section} ${styles.featuresSection}`}>
|
||||
<motion.h2
|
||||
className={styles.sectionTitleCenter}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
variants={fadeInUp}
|
||||
>
|
||||
What Makes Us Special
|
||||
</motion.h2>
|
||||
<motion.div
|
||||
className={styles.featuresGrid}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
variants={staggerContainer}
|
||||
>
|
||||
{featuresData.map((feature) => (
|
||||
<motion.div
|
||||
key={feature.id}
|
||||
className={styles.featureCard}
|
||||
variants={fadeInUp}
|
||||
whileHover={{ y: -5, transition: { duration: 0.3 } }}
|
||||
>
|
||||
<div className={styles.featureImageWrapper}>
|
||||
<Image src={feature.image} alt={feature.title} fill className={styles.featureImage} />
|
||||
</div>
|
||||
<h3 className={styles.featureTitle}>{feature.title}</h3>
|
||||
<p className={styles.featureDesc}>{feature.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Why Choose Us Section */}
|
||||
<section className={styles.section}>
|
||||
<motion.div
|
||||
className={styles.container}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
variants={staggerContainer}
|
||||
>
|
||||
<motion.div className={styles.imageBlock} variants={slideInLeft}>
|
||||
<Image src="/images/hero-2.png" alt="Why Choose Us" width={500} height={350} className={styles.image} />
|
||||
</motion.div>
|
||||
<motion.div className={styles.textBlock} variants={slideInRight}>
|
||||
<h2 className={styles.sectionTitle}>Why Choose Us</h2>
|
||||
<p className={styles.text}>
|
||||
At Antalya Restaurant, we don't just serve food – we create experiences. Our commitment to authenticity means every spice, every ingredient, and every cooking method stays true to Turkish culinary traditions.
|
||||
</p>
|
||||
<p className={styles.text}>
|
||||
From our charcoal-grilled kebabs to our handmade baklava, we take pride in delivering dishes that transport you straight to the streets of Istanbul and the coasts of Antalya.
|
||||
</p>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials Section - Auto Slider */}
|
||||
<section className={`${styles.section} ${styles.testimonialsSection}`}>
|
||||
<motion.h2
|
||||
className={styles.sectionTitleCenter}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
variants={fadeInUp}
|
||||
>
|
||||
What Our Guests Say
|
||||
</motion.h2>
|
||||
<motion.div
|
||||
className={styles.testimonialSlider}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
variants={fadeIn}
|
||||
>
|
||||
<button className={styles.sliderBtn} onClick={prevTestimonial}>‹</button>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={currentTestimonial}
|
||||
className={styles.testimonialCard}
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -50 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<p className={styles.testimonialText}>"{testimonialData[currentTestimonial].text}"</p>
|
||||
<div className={styles.testimonialAuthor}>
|
||||
<div className={styles.authorImageWrapper}>
|
||||
<Image
|
||||
src={testimonialData[currentTestimonial].image}
|
||||
alt={testimonialData[currentTestimonial].name}
|
||||
fill
|
||||
className={styles.authorImage}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.authorInfo}>
|
||||
<p className={styles.authorName}>{testimonialData[currentTestimonial].name}</p>
|
||||
<p className={styles.authorRole}>{testimonialData[currentTestimonial].role}</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
<button className={styles.sliderBtn} onClick={nextTestimonial}>›</button>
|
||||
</motion.div>
|
||||
|
||||
{/* Slider dots */}
|
||||
<div className={styles.sliderDots}>
|
||||
{testimonialData.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className={`${styles.dot} ${index === currentTestimonial ? styles.activeDot : ''}`}
|
||||
onClick={() => setCurrentTestimonial(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section - Image Left, FAQ Right */}
|
||||
<section className={styles.faqSection}>
|
||||
<motion.div
|
||||
className={styles.faqContainer}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
variants={staggerContainer}
|
||||
>
|
||||
<motion.div className={styles.faqImageBlock} variants={slideInLeft}>
|
||||
<Image
|
||||
src="/images/restaurant-interior.png"
|
||||
alt="Frequently Asked Questions"
|
||||
width={600}
|
||||
height={700}
|
||||
className={styles.faqImage}
|
||||
/>
|
||||
</motion.div>
|
||||
<motion.div className={styles.faqContentBlock} variants={slideInRight}>
|
||||
<h2 className={styles.faqTitle}>Frequently Asked Questions</h2>
|
||||
<p className={styles.faqSubtitle}>
|
||||
Have questions about Antalya Restaurant? Find answers to our most commonly asked questions below.
|
||||
</p>
|
||||
<div className={styles.faqAccordion}>
|
||||
{aboutFaqData.map((faq, index) => (
|
||||
<FaqItem key={index} question={faq.q} answer={faq.a} />
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Call to Action */}
|
||||
<motion.section
|
||||
className={styles.ctaSection}
|
||||
style={{ backgroundImage: `url(${ctaData.backgroundImage})` }}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
variants={fadeIn}
|
||||
>
|
||||
<div className={styles.ctaOverlay}>
|
||||
<motion.h2
|
||||
className={styles.ctaTitle}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
{ctaData.title}
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
className={styles.ctaSubtitle}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
>
|
||||
{ctaData.subtitle}
|
||||
</motion.p>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.6 }}
|
||||
>
|
||||
<Link href={ctaData.buttonLink} className={styles.ctaButton}>
|
||||
{ctaData.buttonText}
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
// FAQ Item Component
|
||||
function FaqItem({ question, answer }: { question: string; answer: string }) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className={styles.faqItem}>
|
||||
<button
|
||||
className={`${styles.faqQuestion} ${isOpen ? styles.faqQuestionActive : ''}`}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
<span>{question}</span>
|
||||
<span className={styles.faqIcon}>{isOpen ? '−' : '+'}</span>
|
||||
</button>
|
||||
{isOpen && (
|
||||
<div className={styles.faqAnswer}>
|
||||
<p>{answer}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -396,15 +396,19 @@
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 60px 20px;
|
||||
padding: 60px 10px;
|
||||
}
|
||||
|
||||
.sectionTitleCenter {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.ctaSubtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ctaTitle {
|
||||
font-size: 2rem;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.sliderBtn {
|
||||
@ -437,6 +441,20 @@
|
||||
.faqImageBlock {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.ctaButton {
|
||||
display: inline-block;
|
||||
padding: 12px 20px;
|
||||
border: 2px solid #C5A059;
|
||||
color: #C5A059;
|
||||
font-family: var(--font-lato);
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
background: transparent;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* FAQ Section Styles */
|
||||
@ -458,7 +476,7 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 600px;
|
||||
/* min-height: 600px; */
|
||||
}
|
||||
|
||||
.faqImage {
|
||||
@ -572,4 +590,57 @@
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
|
||||
.faqContainer {
|
||||
display: flex;
|
||||
flex-direction: column !important;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* Image should come to top */
|
||||
.faqImageBlock {
|
||||
width: 100% !important;
|
||||
order: -1;
|
||||
/* ⬅⬅ THIS moves image to the top */
|
||||
}
|
||||
|
||||
.faqImage {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
object-fit: cover !important;
|
||||
border-radius: 12px;
|
||||
border: 4px solid #c5a059;
|
||||
}
|
||||
|
||||
.ctaButton {
|
||||
display: inline-block;
|
||||
padding: 12px 20px;
|
||||
border: 2px solid #C5A059;
|
||||
color: #C5A059;
|
||||
font-family: var(--font-lato);
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
background: transparent;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* FAQ Text */
|
||||
.faqContent {
|
||||
width: 100% !important;
|
||||
padding: 0 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Accordion full width */
|
||||
.accordionWrapper {
|
||||
width: 100% !important;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
@ -44,7 +44,7 @@
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 80px 20px;
|
||||
padding: 80px 10px;
|
||||
background-color: #f5e6d3;
|
||||
}
|
||||
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
}
|
||||
|
||||
.blogSection {
|
||||
padding: 80px 20px;
|
||||
padding: 80px 10px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
/* background-color: #0a0a0a; */
|
||||
@ -138,6 +138,6 @@
|
||||
}
|
||||
|
||||
.blogSection {
|
||||
padding: 60px 20px;
|
||||
padding: 60px 10px;
|
||||
}
|
||||
}
|
||||
@ -42,7 +42,7 @@
|
||||
}
|
||||
|
||||
.contactSection {
|
||||
padding: 80px 20px;
|
||||
padding: 80px 10px;
|
||||
background-color: #F5E6D3;
|
||||
/* background-image: url('/images/section-bg.jpg'); */
|
||||
background-size: cover;
|
||||
@ -284,7 +284,7 @@
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.container {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
@ -299,7 +299,7 @@
|
||||
}
|
||||
|
||||
.contactSection {
|
||||
padding: 60px 20px;
|
||||
padding: 60px 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -313,4 +313,10 @@
|
||||
.formBlock {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) and (min-width: 200px) {
|
||||
.container {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 50 KiB |
@ -43,10 +43,10 @@
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 80px 20px;
|
||||
padding: 80px 10px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
/* background-color: #0a0a0a; */
|
||||
/* background-color: #0a0a0a; */
|
||||
}
|
||||
|
||||
.tabs {
|
||||
|
||||
@ -248,7 +248,7 @@
|
||||
|
||||
@media (max-width: 968px) {
|
||||
.menuGrid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@ -286,4 +286,14 @@
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) and (min-width: 200px){
|
||||
|
||||
.menuGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -35,7 +35,7 @@
|
||||
.imageWrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
min-height: 600px;
|
||||
min-height: 900px;
|
||||
/* Ensure substantial height */
|
||||
}
|
||||
|
||||
@ -47,13 +47,13 @@
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 80px 60px;
|
||||
/* padding: 80px 60px; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-image: url('/images/pattern-overlay.png');
|
||||
background-image: url('/images/about-right-bg.webp');
|
||||
/* Optional pattern overlay if available, else dark bg */
|
||||
background-color: #151515;
|
||||
position: relative;
|
||||
@ -91,7 +91,7 @@
|
||||
/* Goldish text color as seen in image */
|
||||
line-height: 1.8;
|
||||
margin-bottom: 50px;
|
||||
max-width: 80%;
|
||||
max-width: 60%;
|
||||
font-size: 1rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.section {
|
||||
padding: 80px 20px;
|
||||
padding: 80px 10px;
|
||||
background-color: #3a0c08;
|
||||
background-image: url('/images/section-bg.jpg');
|
||||
background-size: cover;
|
||||
@ -173,11 +173,11 @@
|
||||
|
||||
.card {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
/* Hide 2nd and 3rd cards on mobile, show only 1st */
|
||||
.card:nth-child(2),
|
||||
|
||||
.card:nth-child(3) {
|
||||
display: none;
|
||||
}
|
||||
@ -222,6 +222,19 @@
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Hide 2nd and 3rd cards on mobile, show only 1st */
|
||||
.card:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
.card:nth-child(3) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
@ -166,13 +166,55 @@
|
||||
.recaptchaWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
/* align-items: center; */
|
||||
gap: 0.5rem;
|
||||
margin: 1rem 0;
|
||||
/* margin: 1rem 0; */
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.imageContainer {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.formContainer {
|
||||
padding: 3rem 1rem;
|
||||
/* Reduce padding on mobile */
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
/* Smaller title */
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Fix reCAPTCHA overflow on very small screens */
|
||||
.recaptchaWrapper {
|
||||
transform: scale(0.85);
|
||||
transform-origin: left top;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
/* Center it if possible, or left align */
|
||||
margin-bottom: -10px;
|
||||
/* Compensate for scale gap */
|
||||
}
|
||||
|
||||
/* If centering is preferred */
|
||||
.recaptchaWrapper>div {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 340px) {
|
||||
.formContainer {
|
||||
padding: 2rem 0.5rem;
|
||||
/* Even less padding for 320px */
|
||||
}
|
||||
|
||||
.recaptchaWrapper {
|
||||
transform: scale(0.77);
|
||||
/* Aggressive scaling for 320px */
|
||||
}
|
||||
}
|
||||
@ -204,6 +204,15 @@ export default function BookTable() {
|
||||
/>
|
||||
<span className={styles.charCount}>{charCount}/500 characters</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.recaptchaWrapper}>
|
||||
<ReCAPTCHA
|
||||
sitekey="6Lckq9MrAAAAABjBD9rQYm19BMGFFWiwb9mPiw2K"
|
||||
onChange={handleCaptchaChange}
|
||||
/>
|
||||
{formErrors.captcha && <small className={styles.errorText}>{formErrors.captcha}</small>}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className={styles.submitButton}
|
||||
@ -211,13 +220,7 @@ export default function BookTable() {
|
||||
Submit Reservation
|
||||
</button>
|
||||
|
||||
<div className={styles.recaptchaWrapper}>
|
||||
<ReCAPTCHA
|
||||
sitekey="6Lckq9MrAAAAABjBD9rQYm19BMGFFWiwb9mPiw2K"
|
||||
onChange={handleCaptchaChange}
|
||||
/>
|
||||
{formErrors.captcha && <small className={styles.errorText}>{formErrors.captcha}</small>}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
@ -1,76 +1,64 @@
|
||||
.footer {
|
||||
position: relative;
|
||||
background-color: #2a0a0a;
|
||||
background-image: url('/images/section-bg.jpg');
|
||||
/* Deep red/brown */
|
||||
color: #d4b060;
|
||||
/* Gold-ish text */
|
||||
padding: 4rem 2rem 1rem;
|
||||
border-top: 1px solid var(--color-gold);
|
||||
background-image: url('/images/footer-bg.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
color: #C5A059;
|
||||
padding: 60px 40px;
|
||||
font-family: var(--font-lato);
|
||||
}
|
||||
|
||||
/* Add this (or adjust as needed) to Footer.module.css */
|
||||
|
||||
.logoImage {
|
||||
/* Style the Next.js Image component inside the logo container */
|
||||
width: auto;
|
||||
height: 100px;
|
||||
/* Example height - adjust this to your desired size */
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.copyright a {
|
||||
color: #c9a865; /* your highlight color */
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.copyright a:hover {
|
||||
color: #c9a865;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
.logoa {
|
||||
/* Ensure the link container doesn't disrupt layout */
|
||||
display: inline-block;
|
||||
/* The Gold Border Container */
|
||||
.borderWrapper {
|
||||
/* border: 2px solid #8B6E38; */
|
||||
/* Darker gold/bronze border */
|
||||
padding: 40px;
|
||||
position: relative;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 3rem;
|
||||
gap: 4rem;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
/* Brand Column */
|
||||
.brandColumn {
|
||||
flex: 1.2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 2rem;
|
||||
color: var(--color-gold);
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.logoImage {
|
||||
width: auto;
|
||||
height: 120px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-family: var(--font-lato);
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #ccb;
|
||||
margin-bottom: 2rem;
|
||||
color: #C5A059;
|
||||
opacity: 0.9;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.socialIcons {
|
||||
@ -78,63 +66,179 @@
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.iconLink {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-gold);
|
||||
background-color: #C5A059;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffff;
|
||||
font-weight: bold;
|
||||
color: #2a0a0a;
|
||||
font-size: 1.2rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.icon:hover {
|
||||
background-color: #fff;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* Links Column */
|
||||
.linksColumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--color-gold);
|
||||
color: #C5A059;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.linkList {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.linkItem {
|
||||
margin-bottom: 0.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.link {
|
||||
font-family: var(--font-lato);
|
||||
color: #ccb;
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 1.1rem;
|
||||
color: #C5A059;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: var(--color-gold);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Location Column */
|
||||
.locationColumn {
|
||||
flex: 1.2;
|
||||
}
|
||||
|
||||
.contactInfo {
|
||||
font-family: var(--font-lato);
|
||||
color: #ccb;
|
||||
font-size: 0.9rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.8;
|
||||
color: #C5A059;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 1.5rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.contactRow {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.contactRow a {
|
||||
color: #C5A059;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.contactRow a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.phoneIcon,
|
||||
.emailIcon {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.subHeading {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 1.3rem;
|
||||
margin: 2rem 0 1rem;
|
||||
color: #C5A059;
|
||||
}
|
||||
|
||||
.hours {
|
||||
font-size: 1rem;
|
||||
line-height: 1.8;
|
||||
color: #C5A059;
|
||||
}
|
||||
|
||||
/* Copyright */
|
||||
.copyright {
|
||||
text-align: center;
|
||||
margin-top: 4rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid rgba(191, 155, 48, 0.3);
|
||||
font-family: var(--font-lato);
|
||||
font-size: 0.8rem;
|
||||
color: #887;
|
||||
margin-top: 3rem;
|
||||
padding-top: 1.5rem;
|
||||
/* border-top: 1px solid rgba(197, 160, 89, 0.3); */
|
||||
font-size: 0.9rem;
|
||||
color: #C5A059;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.copyright a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.copyright a:hover {
|
||||
color: #C5A059;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.container {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.linksColumn {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.linkList {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.footer {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.borderWrapper {
|
||||
padding: 0px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.container {
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.brandColumn,
|
||||
.linksColumn,
|
||||
.locationColumn {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.linkList {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contactRow {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@ -3,6 +3,7 @@
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import styles from './Footer.module.css'
|
||||
import { FaFacebookF, FaTwitter, FaInstagram } from 'react-icons/fa'
|
||||
|
||||
export default function Footer() {
|
||||
|
||||
@ -10,94 +11,89 @@ export default function Footer() {
|
||||
|
||||
return (
|
||||
<footer className={styles.footer} id="contact">
|
||||
<div className={styles.container}>
|
||||
{/* Brand Column */}
|
||||
<div className={`${styles.column} ${styles.brandColumn}`}>
|
||||
{/* Logo updated to use Image and Link */}
|
||||
<div className={styles.logo}>
|
||||
<Link href="/" onClick={() => window.scrollTo(0, 0)}>
|
||||
<Image
|
||||
src="/images/antalya-logo.png"
|
||||
alt="Antalya Restaurant"
|
||||
width={200}
|
||||
height={200}
|
||||
className={styles.logoImage} // Must be styled in Footer.module.css
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
{/* End of Logo update */}
|
||||
<p className={styles.description}>
|
||||
Discover the essence of fusion cuisine in the heart of Ontario at Antalya Restaurant.
|
||||
Our carefully curated menu offers a delicious selection from sizzling kebabs and succulent doners to authentic pides, sandwiches, and wraps.
|
||||
</p>
|
||||
<div className={styles.socialIcons}>
|
||||
<div className={styles.icon}>f</div>
|
||||
<div className={styles.icon}>t</div>
|
||||
<div className={styles.icon}>in</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Links Column */}
|
||||
<div className={styles.column}>
|
||||
<h3 className={styles.heading}>Quick Links</h3>
|
||||
{/* Removed the Bootstrap classes (row, col-lg-6) as this is a CSS Modules file and those classes are not defined. Reverting to a single list structure for stability. */}
|
||||
|
||||
<ul className={styles.linkList}>
|
||||
<li className={styles.linkItem}><a href="/" className={styles.link}>Home</a></li>
|
||||
<li className={styles.linkItem}><a href="/about" className={styles.link}>About</a></li>
|
||||
<li className={styles.linkItem}><a href="/gallery" className={styles.link}>Gallery</a></li>
|
||||
<li className={styles.linkItem}><a href="/menu" className={styles.link}>Menu</a></li>
|
||||
<li className={styles.linkItem}><a href="/blog" className={styles.link}>Blog</a></li>
|
||||
<li className={styles.linkItem}><a href="/contact" className={styles.link}>Contact</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Location Column */}
|
||||
<div className={styles.column}>
|
||||
<h3 className={styles.heading}>Location</h3>
|
||||
<div className={styles.contactInfo}>
|
||||
<p style={{ marginBottom: '1rem' }}>
|
||||
1187 Fischer-Hhallman Rd #435, Kitchener, ON N2E 4H9<br />
|
||||
1860 Appleby Line, Burlington, ON L7L 7H7
|
||||
<div className={styles.borderWrapper}>
|
||||
<div className={styles.container}>
|
||||
{/* Brand Column */}
|
||||
<div className={`${styles.column} ${styles.brandColumn}`}>
|
||||
<div className={styles.logo}>
|
||||
<Link href="/" onClick={() => window.scrollTo(0, 0)}>
|
||||
<Image
|
||||
src="/images/footer-logo.webp"
|
||||
alt="Antalya Restaurant"
|
||||
width={200}
|
||||
height={200}
|
||||
className={styles.logoImage}
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<p className={styles.description}>
|
||||
Discover the essence of fusion cuisine in the heart of Ontario at Antalya Restaurant. Our carefully curated menu offers a delicious selection from sizzling kebabs and succulent doners to authentic pides, sandwiches, and wraps.
|
||||
</p>
|
||||
|
||||
<div className={styles.contactRow}>
|
||||
<span>📞</span>
|
||||
<a href="tel:5195816363">Kitchener: 519-581-6363</a>
|
||||
<div className={styles.socialIcons}>
|
||||
<a href="#" className={styles.iconLink}><div className={styles.icon}><FaFacebookF /></div></a>
|
||||
<a href="#" className={styles.iconLink}><div className={styles.icon}><FaTwitter /></div></a>
|
||||
<a href="#" className={styles.iconLink}><div className={styles.icon}><FaInstagram /></div></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.contactRow}>
|
||||
<span>📞</span>
|
||||
<a href="tel:2893139838">Burlington: 289-313-9838</a>
|
||||
{/* Quick Links Column */}
|
||||
<div className={`${styles.column} ${styles.linksColumn}`}>
|
||||
<h3 className={styles.heading}>Quick Links</h3>
|
||||
<ul className={styles.linkList}>
|
||||
<li className={styles.linkItem}><Link href="/" className={styles.link}>Home</Link></li>
|
||||
<li className={styles.linkItem}><Link href="/about-us" className={styles.link}>About</Link></li>
|
||||
<li className={styles.linkItem}><Link href="/gallery" className={styles.link}>Gallery</Link></li>
|
||||
<li className={styles.linkItem}><Link href="/menu" className={styles.link}>Menu</Link></li>
|
||||
<li className={styles.linkItem}><Link href="/blog" className={styles.link}>Blog</Link></li>
|
||||
<li className={styles.linkItem}><Link href="/contact" className={styles.link}>Contact</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Location Column */}
|
||||
<div className={`${styles.column} ${styles.locationColumn}`}>
|
||||
<h3 className={styles.heading}>Location</h3>
|
||||
<div className={styles.contactInfo}>
|
||||
<p className={styles.address}>
|
||||
1187 Fischer-Hallman Rd #435, Kitchener, ON N2E 4H9<br />
|
||||
1860 Appleby Line, Burlington, ON L7L 7H7
|
||||
</p>
|
||||
|
||||
<div className={styles.contactRow}>
|
||||
<span className={styles.phoneIcon}>📞</span>
|
||||
<a href="tel:5195816363">Kitchener: 519-581-6363</a>
|
||||
</div>
|
||||
|
||||
<div className={styles.contactRow}>
|
||||
<span className={styles.phoneIcon}>📞</span>
|
||||
<a href="tel:2893139838">Burlington: 289-313-9838</a>
|
||||
</div>
|
||||
|
||||
<div className={styles.contactRow}>
|
||||
<span className={styles.emailIcon}>✉️</span>
|
||||
<a href="mailto:hello@antalyarestaurant.ca">hello@antalyarestaurant.ca</a>
|
||||
</div>
|
||||
|
||||
<h3 className={styles.subHeading}>Opening Hours</h3>
|
||||
<p className={styles.hours}>
|
||||
Sunday–Thursday 11am–10pm<br />
|
||||
Friday–Saturday 11am–11pm
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.contactRow}>
|
||||
<span>✉️</span>
|
||||
<a href="mailto:hello@antalyarestaurant.ca">hello@antalyarestaurant.ca</a>
|
||||
</div>
|
||||
|
||||
<h3 className={styles.heading} style={{ marginTop: '1.5rem' }}>Opening Hours</h3>
|
||||
<p>
|
||||
Sunday–Thursday 11am–10pm<br />
|
||||
Friday–Saturday 11am–11pm
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className={styles.copyright}>
|
||||
© Copyright 2025 Antalya Restaurant | Powered by{' '}
|
||||
<a
|
||||
href={metatronCubeLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
MetatronCube
|
||||
</a>{' '}
|
||||
All Rights Reserved
|
||||
<div className={styles.copyright}>
|
||||
© Copyright 2025 Antalya Restaurant | Powered by{' '}
|
||||
<a
|
||||
href={metatronCubeLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
MetatronCube
|
||||
</a>{' '}
|
||||
All Rights Reserved
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
|
||||
@ -150,4 +150,31 @@
|
||||
.nextBtn {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.section {
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
/* Stack vertically on mobile */
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.imageWrapper {
|
||||
height: 250px;
|
||||
/* Slightly smaller height */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 340px) {
|
||||
.section {
|
||||
padding: 3rem 0.5rem;
|
||||
}
|
||||
|
||||
.imageWrapper {
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
@ -55,7 +55,7 @@
|
||||
|
||||
.title {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 3.5rem;
|
||||
font-size: 78px;
|
||||
color: #fff;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
@ -64,7 +64,7 @@
|
||||
|
||||
.subtitle {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 1.5rem;
|
||||
font-size: 33px;
|
||||
color: var(--color-gold);
|
||||
margin-bottom: 2rem;
|
||||
font-style: italic;
|
||||
@ -78,9 +78,9 @@
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 1rem 2rem;
|
||||
padding: 15px 25px;
|
||||
font-family: var(--font-lato);
|
||||
font-size: 1rem;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
@ -152,4 +152,14 @@
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
}
|
||||
.btn {
|
||||
padding: 12px 25px;
|
||||
font-family: var(--font-lato);
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
.section {
|
||||
padding: 80px 20px;
|
||||
padding: 80px 10px;
|
||||
background-color: #3a0c08;
|
||||
background-image: url('/images/section-bg.jpg');
|
||||
background-size: cover;
|
||||
@ -114,10 +114,16 @@
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
@ -1,11 +1,11 @@
|
||||
.section {
|
||||
position: relative;
|
||||
padding: 80px 20px;
|
||||
padding: 80px 10px;
|
||||
background-color: #0a0a0a;
|
||||
/* Dark background matching design */
|
||||
background-image: url('/images/testimonials-bg.png');
|
||||
background-image: url('/images/testimonial-bg.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
/* background-position: center; */
|
||||
background-repeat: no-repeat;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
@ -180,6 +180,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.sliderContainer {
|
||||
padding: 0 30px;
|
||||
@ -187,12 +189,9 @@
|
||||
|
||||
.card {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
max-width: 50%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Hide 2nd and 3rd cards on mobile, show only 1st */
|
||||
.card:nth-child(2),
|
||||
.card:nth-child(3) {
|
||||
display: none;
|
||||
}
|
||||
@ -238,6 +237,19 @@
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
.card:nth-child(3) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user