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": "19.2.0",
|
||||||
"react-dom": "19.2.0",
|
"react-dom": "19.2.0",
|
||||||
"react-google-recaptcha": "^3.1.0",
|
"react-google-recaptcha": "^3.1.0",
|
||||||
|
"react-icons": "^5.5.0",
|
||||||
"selenium-webdriver": "^4.38.0",
|
"selenium-webdriver": "^4.38.0",
|
||||||
"sitemap": "^9.0.0",
|
"sitemap": "^9.0.0",
|
||||||
"xml2js": "^0.6.2"
|
"xml2js": "^0.6.2"
|
||||||
@ -5069,6 +5070,15 @@
|
|||||||
"react": ">=16.4.1"
|
"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": {
|
"node_modules/react-is": {
|
||||||
"version": "16.13.1",
|
"version": "16.13.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||||
|
|||||||
@ -16,6 +16,7 @@
|
|||||||
"react": "19.2.0",
|
"react": "19.2.0",
|
||||||
"react-dom": "19.2.0",
|
"react-dom": "19.2.0",
|
||||||
"react-google-recaptcha": "^3.1.0",
|
"react-google-recaptcha": "^3.1.0",
|
||||||
|
"react-icons": "^5.5.0",
|
||||||
"selenium-webdriver": "^4.38.0",
|
"selenium-webdriver": "^4.38.0",
|
||||||
"sitemap": "^9.0.0",
|
"sitemap": "^9.0.0",
|
||||||
"xml2js": "^0.6.2"
|
"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 {
|
.section {
|
||||||
padding: 60px 20px;
|
padding: 60px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sectionTitleCenter {
|
.sectionTitleCenter {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ctaSubtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
.ctaTitle {
|
.ctaTitle {
|
||||||
font-size: 2rem;
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sliderBtn {
|
.sliderBtn {
|
||||||
@ -437,6 +441,20 @@
|
|||||||
.faqImageBlock {
|
.faqImageBlock {
|
||||||
min-height: 300px;
|
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 */
|
/* FAQ Section Styles */
|
||||||
@ -458,7 +476,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 600px;
|
/* min-height: 600px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.faqImage {
|
.faqImage {
|
||||||
@ -572,4 +590,57 @@
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0);
|
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 {
|
.section {
|
||||||
padding: 80px 20px;
|
padding: 80px 10px;
|
||||||
background-color: #f5e6d3;
|
background-color: #f5e6d3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -43,7 +43,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.blogSection {
|
.blogSection {
|
||||||
padding: 80px 20px;
|
padding: 80px 10px;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
/* background-color: #0a0a0a; */
|
/* background-color: #0a0a0a; */
|
||||||
@ -138,6 +138,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.blogSection {
|
.blogSection {
|
||||||
padding: 60px 20px;
|
padding: 60px 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -42,7 +42,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.contactSection {
|
.contactSection {
|
||||||
padding: 80px 20px;
|
padding: 80px 10px;
|
||||||
background-color: #F5E6D3;
|
background-color: #F5E6D3;
|
||||||
/* background-image: url('/images/section-bg.jpg'); */
|
/* background-image: url('/images/section-bg.jpg'); */
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
@ -284,7 +284,7 @@
|
|||||||
|
|
||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px) {
|
||||||
.container {
|
.container {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 3rem;
|
gap: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -299,7 +299,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.contactSection {
|
.contactSection {
|
||||||
padding: 60px 20px;
|
padding: 60px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
@ -313,4 +313,10 @@
|
|||||||
.formBlock {
|
.formBlock {
|
||||||
padding: 2rem 1.5rem;
|
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 {
|
.section {
|
||||||
padding: 80px 20px;
|
padding: 80px 10px;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
/* background-color: #0a0a0a; */
|
/* background-color: #0a0a0a; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
|
|||||||
@ -248,7 +248,7 @@
|
|||||||
|
|
||||||
@media (max-width: 968px) {
|
@media (max-width: 968px) {
|
||||||
.menuGrid {
|
.menuGrid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: repeat(2, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -286,4 +286,14 @@
|
|||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) and (min-width: 200px){
|
||||||
|
|
||||||
|
.menuGrid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -35,7 +35,7 @@
|
|||||||
.imageWrapper {
|
.imageWrapper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 600px;
|
min-height: 900px;
|
||||||
/* Ensure substantial height */
|
/* Ensure substantial height */
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -47,13 +47,13 @@
|
|||||||
|
|
||||||
.content {
|
.content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 80px 60px;
|
/* padding: 80px 60px; */
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: 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 */
|
/* Optional pattern overlay if available, else dark bg */
|
||||||
background-color: #151515;
|
background-color: #151515;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -91,7 +91,7 @@
|
|||||||
/* Goldish text color as seen in image */
|
/* Goldish text color as seen in image */
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
max-width: 80%;
|
max-width: 60%;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
.section {
|
.section {
|
||||||
padding: 80px 20px;
|
padding: 80px 10px;
|
||||||
background-color: #3a0c08;
|
background-color: #3a0c08;
|
||||||
background-image: url('/images/section-bg.jpg');
|
background-image: url('/images/section-bg.jpg');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
@ -173,11 +173,11 @@
|
|||||||
|
|
||||||
.card {
|
.card {
|
||||||
flex: 0 0 100%;
|
flex: 0 0 100%;
|
||||||
max-width: 100%;
|
max-width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide 2nd and 3rd cards on mobile, show only 1st */
|
/* Hide 2nd and 3rd cards on mobile, show only 1st */
|
||||||
.card:nth-child(2),
|
|
||||||
.card:nth-child(3) {
|
.card:nth-child(3) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -222,6 +222,19 @@
|
|||||||
padding: 0 15px;
|
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 {
|
.arrow {
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -166,13 +166,55 @@
|
|||||||
.recaptchaWrapper {
|
.recaptchaWrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
/* align-items: center; */
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
margin: 1rem 0;
|
/* margin: 1rem 0; */
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.imageContainer {
|
.imageContainer {
|
||||||
display: block;
|
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>
|
<span className={styles.charCount}>{charCount}/500 characters</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.recaptchaWrapper}>
|
||||||
|
<ReCAPTCHA
|
||||||
|
sitekey="6Lckq9MrAAAAABjBD9rQYm19BMGFFWiwb9mPiw2K"
|
||||||
|
onChange={handleCaptchaChange}
|
||||||
|
/>
|
||||||
|
{formErrors.captcha && <small className={styles.errorText}>{formErrors.captcha}</small>}
|
||||||
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className={styles.submitButton}
|
className={styles.submitButton}
|
||||||
@ -211,13 +220,7 @@ export default function BookTable() {
|
|||||||
Submit Reservation
|
Submit Reservation
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div className={styles.recaptchaWrapper}>
|
|
||||||
<ReCAPTCHA
|
|
||||||
sitekey="6Lckq9MrAAAAABjBD9rQYm19BMGFFWiwb9mPiw2K"
|
|
||||||
onChange={handleCaptchaChange}
|
|
||||||
/>
|
|
||||||
{formErrors.captcha && <small className={styles.errorText}>{formErrors.captcha}</small>}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@ -1,76 +1,64 @@
|
|||||||
.footer {
|
.footer {
|
||||||
|
position: relative;
|
||||||
background-color: #2a0a0a;
|
background-color: #2a0a0a;
|
||||||
background-image: url('/images/section-bg.jpg');
|
background-image: url('/images/footer-bg.png');
|
||||||
/* Deep red/brown */
|
background-size: cover;
|
||||||
color: #d4b060;
|
background-position: center;
|
||||||
/* Gold-ish text */
|
background-repeat: no-repeat;
|
||||||
padding: 4rem 2rem 1rem;
|
color: #C5A059;
|
||||||
border-top: 1px solid var(--color-gold);
|
padding: 60px 40px;
|
||||||
|
font-family: var(--font-lato);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Add this (or adjust as needed) to Footer.module.css */
|
/* The Gold Border Container */
|
||||||
|
.borderWrapper {
|
||||||
.logoImage {
|
/* border: 2px solid #8B6E38; */
|
||||||
/* Style the Next.js Image component inside the logo container */
|
/* Darker gold/bronze border */
|
||||||
width: auto;
|
padding: 40px;
|
||||||
height: 100px;
|
position: relative;
|
||||||
/* Example height - adjust this to your desired size */
|
max-width: 1600px;
|
||||||
max-width: 100%;
|
margin: 0 auto;
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 3rem;
|
gap: 4rem;
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column {
|
.column {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 250px;
|
min-width: 280px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Brand Column */
|
||||||
.brandColumn {
|
.brandColumn {
|
||||||
|
flex: 1.2;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
font-family: var(--font-playfair);
|
margin-bottom: 1.5rem;
|
||||||
font-size: 2rem;
|
}
|
||||||
color: var(--color-gold);
|
|
||||||
margin-bottom: 1rem;
|
.logoImage {
|
||||||
text-transform: uppercase;
|
width: auto;
|
||||||
letter-spacing: 2px;
|
height: 120px;
|
||||||
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font-family: var(--font-lato);
|
font-size: 0.95rem;
|
||||||
font-size: 0.9rem;
|
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 2rem;
|
||||||
color: #ccb;
|
color: #C5A059;
|
||||||
|
opacity: 0.9;
|
||||||
|
max-width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.socialIcons {
|
.socialIcons {
|
||||||
@ -78,63 +66,179 @@
|
|||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.iconLink {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
width: 30px;
|
width: 40px;
|
||||||
height: 30px;
|
height: 40px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--color-gold);
|
background-color: #C5A059;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: #ffff;
|
color: #2a0a0a;
|
||||||
font-weight: bold;
|
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 {
|
.heading {
|
||||||
font-family: var(--font-playfair);
|
font-family: var(--font-playfair);
|
||||||
font-size: 1.2rem;
|
font-size: 1.5rem;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
color: var(--color-gold);
|
color: #C5A059;
|
||||||
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
|
|
||||||
.linkList {
|
.linkList {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.linkItem {
|
.linkItem {
|
||||||
margin-bottom: 0.8rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-playfair);
|
||||||
color: #ccb;
|
font-size: 1.1rem;
|
||||||
|
color: #C5A059;
|
||||||
|
text-decoration: none;
|
||||||
transition: color 0.3s ease;
|
transition: color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link:hover {
|
.link:hover {
|
||||||
color: var(--color-gold);
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Location Column */
|
||||||
|
.locationColumn {
|
||||||
|
flex: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contactInfo {
|
.contactInfo {
|
||||||
font-family: var(--font-lato);
|
font-size: 1rem;
|
||||||
color: #ccb;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
|
color: #C5A059;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contactRow {
|
.contactRow {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.5rem;
|
align-items: center;
|
||||||
margin-bottom: 0.5rem;
|
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 {
|
.copyright {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 4rem;
|
margin-top: 3rem;
|
||||||
padding-top: 1rem;
|
padding-top: 1.5rem;
|
||||||
border-top: 1px solid rgba(191, 155, 48, 0.3);
|
/* border-top: 1px solid rgba(197, 160, 89, 0.3); */
|
||||||
font-family: var(--font-lato);
|
font-size: 0.9rem;
|
||||||
font-size: 0.8rem;
|
color: #C5A059;
|
||||||
color: #887;
|
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 Image from 'next/image'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import styles from './Footer.module.css'
|
import styles from './Footer.module.css'
|
||||||
|
import { FaFacebookF, FaTwitter, FaInstagram } from 'react-icons/fa'
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
|
|
||||||
@ -10,94 +11,89 @@ export default function Footer() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<footer className={styles.footer} id="contact">
|
<footer className={styles.footer} id="contact">
|
||||||
<div className={styles.container}>
|
<div className={styles.borderWrapper}>
|
||||||
{/* Brand Column */}
|
<div className={styles.container}>
|
||||||
<div className={`${styles.column} ${styles.brandColumn}`}>
|
{/* Brand Column */}
|
||||||
{/* Logo updated to use Image and Link */}
|
<div className={`${styles.column} ${styles.brandColumn}`}>
|
||||||
<div className={styles.logo}>
|
<div className={styles.logo}>
|
||||||
<Link href="/" onClick={() => window.scrollTo(0, 0)}>
|
<Link href="/" onClick={() => window.scrollTo(0, 0)}>
|
||||||
<Image
|
<Image
|
||||||
src="/images/antalya-logo.png"
|
src="/images/footer-logo.webp"
|
||||||
alt="Antalya Restaurant"
|
alt="Antalya Restaurant"
|
||||||
width={200}
|
width={200}
|
||||||
height={200}
|
height={200}
|
||||||
className={styles.logoImage} // Must be styled in Footer.module.css
|
className={styles.logoImage}
|
||||||
priority
|
priority
|
||||||
/>
|
/>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
{/* End of Logo update */}
|
<p className={styles.description}>
|
||||||
<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.
|
||||||
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
|
|
||||||
</p>
|
</p>
|
||||||
|
<div className={styles.socialIcons}>
|
||||||
<div className={styles.contactRow}>
|
<a href="#" className={styles.iconLink}><div className={styles.icon}><FaFacebookF /></div></a>
|
||||||
<span>📞</span>
|
<a href="#" className={styles.iconLink}><div className={styles.icon}><FaTwitter /></div></a>
|
||||||
<a href="tel:5195816363">Kitchener: 519-581-6363</a>
|
<a href="#" className={styles.iconLink}><div className={styles.icon}><FaInstagram /></div></a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className={styles.contactRow}>
|
{/* Quick Links Column */}
|
||||||
<span>📞</span>
|
<div className={`${styles.column} ${styles.linksColumn}`}>
|
||||||
<a href="tel:2893139838">Burlington: 289-313-9838</a>
|
<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>
|
||||||
|
|
||||||
<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>
|
||||||
|
|
||||||
</div>
|
<div className={styles.copyright}>
|
||||||
|
© Copyright 2025 Antalya Restaurant | Powered by{' '}
|
||||||
<div className={styles.copyright}>
|
<a
|
||||||
© Copyright 2025 Antalya Restaurant | Powered by{' '}
|
href={metatronCubeLink}
|
||||||
<a
|
target="_blank"
|
||||||
href={metatronCubeLink}
|
rel="noopener noreferrer"
|
||||||
target="_blank"
|
>
|
||||||
rel="noopener noreferrer"
|
MetatronCube
|
||||||
>
|
</a>{' '}
|
||||||
MetatronCube
|
All Rights Reserved
|
||||||
</a>{' '}
|
</div>
|
||||||
All Rights Reserved
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -150,4 +150,31 @@
|
|||||||
.nextBtn {
|
.nextBtn {
|
||||||
right: 10px;
|
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 {
|
.title {
|
||||||
font-family: var(--font-playfair);
|
font-family: var(--font-playfair);
|
||||||
font-size: 3.5rem;
|
font-size: 78px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
@ -64,7 +64,7 @@
|
|||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font-family: var(--font-playfair);
|
font-family: var(--font-playfair);
|
||||||
font-size: 1.5rem;
|
font-size: 33px;
|
||||||
color: var(--color-gold);
|
color: var(--color-gold);
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
@ -78,9 +78,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
padding: 1rem 2rem;
|
padding: 15px 25px;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
font-size: 1rem;
|
font-size: 12px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -152,4 +152,14 @@
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: 1rem;
|
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 {
|
.section {
|
||||||
padding: 80px 20px;
|
padding: 80px 10px;
|
||||||
background-color: #3a0c08;
|
background-color: #3a0c08;
|
||||||
background-image: url('/images/section-bg.jpg');
|
background-image: url('/images/section-bg.jpg');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
@ -114,10 +114,16 @@
|
|||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.grid {
|
.grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: repeat(2, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.grid {
|
||||||
|
grid-template-columns: repeat(1, 1fr);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -1,11 +1,11 @@
|
|||||||
.section {
|
.section {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 80px 20px;
|
padding: 80px 10px;
|
||||||
background-color: #0a0a0a;
|
background-color: #0a0a0a;
|
||||||
/* Dark background matching design */
|
/* Dark background matching design */
|
||||||
background-image: url('/images/testimonials-bg.png');
|
background-image: url('/images/testimonial-bg.webp');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
/* background-position: center; */
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -180,6 +180,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px) {
|
||||||
.sliderContainer {
|
.sliderContainer {
|
||||||
padding: 0 30px;
|
padding: 0 30px;
|
||||||
@ -187,12 +189,9 @@
|
|||||||
|
|
||||||
.card {
|
.card {
|
||||||
flex: 0 0 100%;
|
flex: 0 0 100%;
|
||||||
max-width: 100%;
|
max-width: 50%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide 2nd and 3rd cards on mobile, show only 1st */
|
|
||||||
.card:nth-child(2),
|
|
||||||
.card:nth-child(3) {
|
.card:nth-child(3) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -238,6 +237,19 @@
|
|||||||
padding: 0 15px;
|
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 {
|
.arrow {
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user