sub heading and icons are updated
This commit is contained in:
akash
parent
7b1a76134c
commit
6356e07fa0
BIN
public/images/cloche-icon.png
Normal file
BIN
public/images/cloche-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 551 KiB |
BIN
public/images/dinner.png
Normal file
BIN
public/images/dinner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 571 B |
BIN
public/images/dish.png
Normal file
BIN
public/images/dish.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
public/images/eat.png
Normal file
BIN
public/images/eat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 862 B |
BIN
public/images/email.png
Normal file
BIN
public/images/email.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 625 B |
BIN
public/images/fork-icon.png
Normal file
BIN
public/images/fork-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 505 KiB |
BIN
public/images/phone-call.png
Normal file
BIN
public/images/phone-call.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 702 B |
@ -1 +1 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>http://localhost:3000/</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>http://localhost:3000/about/</loc><changefreq>monthly</changefreq><priority>0.5</priority></url><url><loc>http://localhost:3000/menu/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/gallery/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/contact/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/blog/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/blog/the-art-of-turkish-tea/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/blog/secrets-of-charcoal-grilling/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/blog/a-taste-of-sweet-legacy/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url></urlset>
|
<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>http://localhost:3000/</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>http://localhost:3000/about-us/</loc><changefreq>monthly</changefreq><priority>0.5</priority></url><url><loc>http://localhost:3000/menu/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/gallery/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/contact/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/blog/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/blog/the-art-of-turkish-tea/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/blog/secrets-of-charcoal-grilling/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url><url><loc>http://localhost:3000/blog/a-taste-of-sweet-legacy/</loc><changefreq>weekly</changefreq><priority>0.6</priority></url></urlset>
|
||||||
@ -27,7 +27,7 @@ const formatUrl = (url) => {
|
|||||||
// ✅ Static pages
|
// ✅ Static pages
|
||||||
const staticLinks = [
|
const staticLinks = [
|
||||||
{ url: '/', changefreq: 'daily', priority: 1.0 },
|
{ url: '/', changefreq: 'daily', priority: 1.0 },
|
||||||
{ url: '/about/', changefreq: 'monthly', priority: 0.5 },
|
{ url: '/about-us/', changefreq: 'monthly', priority: 0.5 },
|
||||||
{ url: '/menu/', changefreq: 'weekly', priority: 0.6 },
|
{ url: '/menu/', changefreq: 'weekly', priority: 0.6 },
|
||||||
{ url: '/gallery/', changefreq: 'weekly', priority: 0.6 },
|
{ url: '/gallery/', changefreq: 'weekly', priority: 0.6 },
|
||||||
{ url: '/contact/', changefreq: 'weekly', priority: 0.6 },
|
{ url: '/contact/', changefreq: 'weekly', priority: 0.6 },
|
||||||
|
|||||||
@ -140,6 +140,14 @@
|
|||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.smallHeading {
|
||||||
|
font-size: var(--small-text-size);
|
||||||
|
color: #c49c5c;
|
||||||
|
font-family: var(--font-lato);
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
/* Features Section */
|
/* Features Section */
|
||||||
.featuresGrid {
|
.featuresGrid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@ -154,7 +162,7 @@
|
|||||||
padding: 2.5rem 2rem;
|
padding: 2.5rem 2rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 2px solid #b07c4b;
|
border: 2px solid #b07c4b;
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.featureCard:hover {
|
.featureCard:hover {
|
||||||
@ -195,10 +203,10 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 2rem;
|
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
padding: 0 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sliderBtn {
|
.sliderBtn {
|
||||||
@ -214,6 +222,18 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sliderBtn:first-child {
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sliderBtn:last-child {
|
||||||
|
right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sliderBtn:hover {
|
.sliderBtn:hover {
|
||||||
@ -221,11 +241,12 @@
|
|||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.testimonialCard {
|
.testimonialCard {
|
||||||
background-color: #F5E6D3;
|
background-color: #F5E6D3;
|
||||||
padding: 3rem 2.5rem;
|
padding: 3rem 2.5rem;
|
||||||
border: 2px solid #b07c4b;
|
border: 2px solid #b07c4b;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@ -235,7 +256,6 @@
|
|||||||
.testimonialText {
|
.testimonialText {
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
/* color: #5d4037; */
|
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -262,6 +282,7 @@
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.authorInfo {
|
.authorInfo {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -278,9 +299,7 @@
|
|||||||
.authorRole {
|
.authorRole {
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
/* color: #836839; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sliderDots {
|
.sliderDots {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -403,8 +422,12 @@
|
|||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ctaSubtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
.ctaTitle {
|
.ctaTitle {
|
||||||
font-size: 2rem;
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sliderBtn {
|
.sliderBtn {
|
||||||
@ -437,6 +460,20 @@
|
|||||||
.faqImageBlock {
|
.faqImageBlock {
|
||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ctaButton {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border: 2px solid #b07c4b;
|
||||||
|
color: #c49c5c;
|
||||||
|
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 */
|
||||||
@ -472,7 +509,7 @@
|
|||||||
.faqContentBlock {
|
.faqContentBlock {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 2rem;
|
/* gap: 2rem; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.faqTitle {
|
.faqTitle {
|
||||||
@ -520,7 +557,7 @@
|
|||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
/* color: #5d4037; */
|
color: #c49c5c;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
@ -557,7 +594,7 @@
|
|||||||
.faqAnswer p {
|
.faqAnswer p {
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: #c49c5c;
|
/* color: #5d4037; */
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@ -572,4 +609,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: 2px solid #b07c4b
|
||||||
|
}
|
||||||
|
|
||||||
|
.ctaButton {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border: 2px solid #b07c4b;
|
||||||
|
color: #c49c5c;
|
||||||
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -150,7 +150,7 @@
|
|||||||
padding: 2.5rem 2rem;
|
padding: 2.5rem 2rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 2px solid #b07c4b;
|
border: 2px solid #b07c4b;
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.featureCard:hover {
|
.featureCard:hover {
|
||||||
|
|||||||
@ -97,7 +97,7 @@ export default function AboutPage() {
|
|||||||
<div className={styles.heroContent}>
|
<div className={styles.heroContent}>
|
||||||
<h1 className={styles.heroTitle}>About Us</h1>
|
<h1 className={styles.heroTitle}>About Us</h1>
|
||||||
<p className={styles.breadcrumb}>
|
<p className={styles.breadcrumb}>
|
||||||
<Link href="/">Home</Link> / About Us
|
<Link href="/">Home</Link> / About
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</motion.section>
|
</motion.section>
|
||||||
@ -112,6 +112,11 @@ export default function AboutPage() {
|
|||||||
variants={staggerContainer}
|
variants={staggerContainer}
|
||||||
>
|
>
|
||||||
<motion.div className={styles.textBlock} variants={slideInLeft}>
|
<motion.div className={styles.textBlock} variants={slideInLeft}>
|
||||||
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
|
||||||
|
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
|
||||||
|
<span>ANTALYA</span>
|
||||||
|
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
|
||||||
|
</div>
|
||||||
<h2 className={styles.sectionTitle}>Our Story</h2>
|
<h2 className={styles.sectionTitle}>Our Story</h2>
|
||||||
<p className={styles.text}>
|
<p className={styles.text}>
|
||||||
Founded in 2010, Antalya Restaurant began with a simple mission: to bring the authentic flavors of Turkey to our community.
|
Founded in 2010, Antalya Restaurant began with a simple mission: to bring the authentic flavors of Turkey to our community.
|
||||||
@ -132,6 +137,11 @@ export default function AboutPage() {
|
|||||||
|
|
||||||
{/* Features Section - With real images */}
|
{/* Features Section - With real images */}
|
||||||
<section className={`${styles.section} ${styles.featuresSection}`}>
|
<section className={`${styles.section} ${styles.featuresSection}`}>
|
||||||
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
|
||||||
|
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
|
||||||
|
<span>ANTALYA</span>
|
||||||
|
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
|
||||||
|
</div>
|
||||||
<motion.h2
|
<motion.h2
|
||||||
className={styles.sectionTitleCenter}
|
className={styles.sectionTitleCenter}
|
||||||
initial="hidden"
|
initial="hidden"
|
||||||
@ -178,6 +188,11 @@ export default function AboutPage() {
|
|||||||
<Image src="/images/hero-2.png" alt="Why Choose Us" width={500} height={350} className={styles.image} />
|
<Image src="/images/hero-2.png" alt="Why Choose Us" width={500} height={350} className={styles.image} />
|
||||||
</motion.div>
|
</motion.div>
|
||||||
<motion.div className={styles.textBlock} variants={slideInRight}>
|
<motion.div className={styles.textBlock} variants={slideInRight}>
|
||||||
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
|
||||||
|
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
|
||||||
|
<span>ANTALYA</span>
|
||||||
|
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
|
||||||
|
</div>
|
||||||
<h2 className={styles.sectionTitle}>Why Choose Us</h2>
|
<h2 className={styles.sectionTitle}>Why Choose Us</h2>
|
||||||
<p className={styles.text}>
|
<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.
|
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.
|
||||||
@ -191,6 +206,11 @@ export default function AboutPage() {
|
|||||||
|
|
||||||
{/* Testimonials Section - Auto Slider */}
|
{/* Testimonials Section - Auto Slider */}
|
||||||
<section className={`${styles.section} ${styles.testimonialsSection}`}>
|
<section className={`${styles.section} ${styles.testimonialsSection}`}>
|
||||||
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
|
||||||
|
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
|
||||||
|
<span>ANTALYA</span>
|
||||||
|
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
|
||||||
|
</div>
|
||||||
<motion.h2
|
<motion.h2
|
||||||
className={styles.sectionTitleCenter}
|
className={styles.sectionTitleCenter}
|
||||||
initial="hidden"
|
initial="hidden"
|
||||||
@ -270,6 +290,11 @@ export default function AboutPage() {
|
|||||||
/>
|
/>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
<motion.div className={styles.faqContentBlock} variants={slideInRight}>
|
<motion.div className={styles.faqContentBlock} variants={slideInRight}>
|
||||||
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
|
||||||
|
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
|
||||||
|
<span>ANTALYA</span>
|
||||||
|
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
|
||||||
|
</div>
|
||||||
<h2 className={styles.faqTitle}>Frequently Asked Questions</h2>
|
<h2 className={styles.faqTitle}>Frequently Asked Questions</h2>
|
||||||
<p className={styles.faqSubtitle}>
|
<p className={styles.faqSubtitle}>
|
||||||
Have questions about Antalya Restaurant? Find answers to our most commonly asked questions below.
|
Have questions about Antalya Restaurant? Find answers to our most commonly asked questions below.
|
||||||
@ -293,6 +318,11 @@ export default function AboutPage() {
|
|||||||
variants={fadeIn}
|
variants={fadeIn}
|
||||||
>
|
>
|
||||||
<div className={styles.ctaOverlay}>
|
<div className={styles.ctaOverlay}>
|
||||||
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
|
||||||
|
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
|
||||||
|
<span>ANTALYA</span>
|
||||||
|
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
|
||||||
|
</div>
|
||||||
<motion.h2
|
<motion.h2
|
||||||
className={styles.ctaTitle}
|
className={styles.ctaTitle}
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
|||||||
@ -1,667 +0,0 @@
|
|||||||
.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: #c49c5c;
|
|
||||||
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: #c49c5c;
|
|
||||||
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: 2px solid #b07c4b
|
|
||||||
}
|
|
||||||
|
|
||||||
.menuButton {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 15px 40px;
|
|
||||||
border: 2px solid #b07c4b;
|
|
||||||
color: #c49c5c;
|
|
||||||
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: #c49c5c;
|
|
||||||
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: 2px solid #b07c4b;
|
|
||||||
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 #b07c4b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
padding: 0 70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sliderBtn {
|
|
||||||
background: transparent;
|
|
||||||
border: 2px solid #b07c4b;
|
|
||||||
color: #c49c5c;
|
|
||||||
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;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sliderBtn:first-child {
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sliderBtn:last-child {
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sliderBtn:hover {
|
|
||||||
background-color: #c49c5c;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.testimonialCard {
|
|
||||||
background-color: #F5E6D3;
|
|
||||||
padding: 3rem 2.5rem;
|
|
||||||
border: 2px solid #b07c4b;
|
|
||||||
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 #c49c5c;
|
|
||||||
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 #b07c4b;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot:hover,
|
|
||||||
.activeDot {
|
|
||||||
background-color: #c49c5c;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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: 2px solid #b07c4b
|
|
||||||
}
|
|
||||||
|
|
||||||
.ctaTitle {
|
|
||||||
font-family: var(--font-playfair);
|
|
||||||
font-size: 3rem;
|
|
||||||
color: #c49c5c;
|
|
||||||
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 #b07c4b;
|
|
||||||
color: #c49c5c;
|
|
||||||
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: #c49c5c;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.featuresGrid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .featuresGrid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
} */
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ctaSubtitle {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ctaTitle {
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sliderBtn {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.testimonialSlider {
|
|
||||||
padding: 0 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sliderBtn:first-child {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sliderBtn:last-child {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ctaButton {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 12px 20px;
|
|
||||||
border: 2px solid #b07c4b;
|
|
||||||
color: #c49c5c;
|
|
||||||
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 */
|
|
||||||
.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 #b07c4b;
|
|
||||||
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: #c49c5c;
|
|
||||||
text-align: left;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faqQuestion:hover {
|
|
||||||
background-color: #c49c5c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faqQuestionActive {
|
|
||||||
background-color: #c49c5c;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faqIcon {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #c49c5c;
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
|
|
||||||
.faqContainer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column !important;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featuresGrid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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: 2px solid #b07c4b
|
|
||||||
}
|
|
||||||
|
|
||||||
.ctaButton {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 12px 20px;
|
|
||||||
border: 2px solid #b07c4b;
|
|
||||||
color: #c49c5c;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,770 +0,0 @@
|
|||||||
.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: #c49c5c;
|
|
||||||
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: #0a0a0a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: #c49c5c;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sectionTitleCenter {
|
|
||||||
font-family: var(--font-playfair);
|
|
||||||
font-size: 3.5rem;
|
|
||||||
color: #c49c5c;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
line-height: 1.8;
|
|
||||||
color: #c49c5c;
|
|
||||||
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: 2px solid #b07c4b
|
|
||||||
}
|
|
||||||
|
|
||||||
.menuButton {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 15px 40px;
|
|
||||||
border: 2px solid #b07c4b;
|
|
||||||
color: #c49c5c;
|
|
||||||
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: #c49c5c;
|
|
||||||
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: 2px solid #b07c4b
|
|
||||||
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 #b07c4b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 #b07c4b;
|
|
||||||
color: #c49c5c;
|
|
||||||
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: #c49c5c;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.testimonialCard {
|
|
||||||
background-color: #F5E6D3;
|
|
||||||
padding: 3rem 2.5rem;
|
|
||||||
border: 2px solid #b07c4b
|
|
||||||
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 #c49c5c;
|
|
||||||
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 #b07c4b;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot:hover,
|
|
||||||
.activeDot {
|
|
||||||
background-color: #c49c5c;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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: 2px solid #b07c4b
|
|
||||||
}
|
|
||||||
|
|
||||||
.ctaTitle {
|
|
||||||
font-family: var(--font-playfair);
|
|
||||||
font-size: 3rem;
|
|
||||||
color: #c49c5c;
|
|
||||||
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 #b07c4b;
|
|
||||||
color: #c49c5c;
|
|
||||||
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: #c49c5c;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.featuresGrid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.testimonialSlider {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sliderBtn {
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
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 #b07c4b;
|
|
||||||
color: #c49c5c;
|
|
||||||
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: #c49c5c;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.testimonialCard {
|
|
||||||
background-color: #F5E6D3;
|
|
||||||
padding: 3rem 2.5rem;
|
|
||||||
border: 2px solid #b07c4b
|
|
||||||
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 #c49c5c;
|
|
||||||
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 #b07c4b;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot:hover,
|
|
||||||
.activeDot {
|
|
||||||
background-color: #c49c5c;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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: 2px solid #b07c4b
|
|
||||||
}
|
|
||||||
|
|
||||||
.ctaTitle {
|
|
||||||
font-family: var(--font-playfair);
|
|
||||||
font-size: 3rem;
|
|
||||||
color: #c49c5c;
|
|
||||||
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 #b07c4b;
|
|
||||||
color: #c49c5c;
|
|
||||||
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: #c49c5c;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.featuresGrid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.testimonialSlider {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sliderBtn {
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.testimonialCard {
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.heroTitle {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
padding: 60px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sectionTitleCenter {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ctaTitle {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sliderBtn {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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 #b07c4b;
|
|
||||||
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: #c49c5c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faqQuestionActive {
|
|
||||||
background-color: #c49c5c;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faqIcon {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #c49c5c;
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.faqContainer {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faqImageBlock {
|
|
||||||
min-height: 400px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,168 +0,0 @@
|
|||||||
.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: #c49c5c;
|
|
||||||
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: #c49c5c;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sectionTitleCenter {
|
|
||||||
font-family: var(--font-playfair);
|
|
||||||
font-size: 3.5rem;
|
|
||||||
color: #c49c5c;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
line-height: 1.8;
|
|
||||||
color: #c49c5c;
|
|
||||||
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: 2px solid #b07c4b
|
|
||||||
}
|
|
||||||
|
|
||||||
.menuButton {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 15px 40px;
|
|
||||||
border: 2px solid #b07c4b;
|
|
||||||
color: #c49c5c;
|
|
||||||
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: #c49c5c;
|
|
||||||
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: 2px solid #b07c4b;
|
|
||||||
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 #b07c4b;
|
|
||||||
}
|
|
||||||
@ -1,352 +0,0 @@
|
|||||||
'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
|
|
||||||
</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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
.heroTitle {
|
.heroTitle {
|
||||||
font-family: var(--font-playfair);
|
font-family: var(--font-playfair);
|
||||||
font-size: 4rem;
|
font-size: var(--hero-title-size);
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@ -28,7 +28,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
font-size: 1.1rem;
|
font-size: var(--body-size);
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
}
|
}
|
||||||
@ -51,7 +51,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.smallHeading {
|
.smallHeading {
|
||||||
font-size: 0.9rem;
|
font-size: var(--small-text-size);
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@ -61,7 +61,7 @@
|
|||||||
|
|
||||||
.mainHeading {
|
.mainHeading {
|
||||||
font-family: var(--font-playfair);
|
font-family: var(--font-playfair);
|
||||||
font-size: 2.5rem;
|
font-size: var(--main-heading-size);
|
||||||
color: #5d4037;
|
color: #5d4037;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
@ -69,7 +69,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font-size: 1rem;
|
font-size: var(--body-size);
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
@ -118,7 +118,7 @@
|
|||||||
|
|
||||||
.blogTitle {
|
.blogTitle {
|
||||||
font-family: var(--font-playfair);
|
font-family: var(--font-playfair);
|
||||||
font-size: 1.6rem;
|
font-size: var(--subheading-size);
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -132,14 +132,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.date {
|
.date {
|
||||||
font-size: 0.9rem;
|
font-size: var(--small-text-size);
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.excerpt {
|
.excerpt {
|
||||||
font-size: 1rem;
|
font-size: var(--body-size);
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
@ -156,7 +156,7 @@
|
|||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 0.85rem;
|
font-size: var(--small-text-size);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -166,15 +166,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.heroTitle {
|
.hero {
|
||||||
font-size: 3rem;
|
padding: 6rem 1rem 4rem;
|
||||||
}
|
|
||||||
|
|
||||||
.mainHeading {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.blogSection {
|
.blogSection {
|
||||||
padding: 60px 10px;
|
padding: 20px 10px 60px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -65,8 +65,12 @@ export default function BlogPage() {
|
|||||||
</motion.section>
|
</motion.section>
|
||||||
|
|
||||||
<section className={styles.sectionHeading}>
|
<section className={styles.sectionHeading}>
|
||||||
<p className={styles.smallHeading}>🍴 ANTALYA 🍴</p>
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
|
||||||
<h2 className={styles.mainHeading}>Stories From Our Kitchen, Turkish Culture, And Culinary Traditions</h2>
|
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
|
||||||
|
<span>ANTALYA</span>
|
||||||
|
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
|
||||||
|
</div>
|
||||||
|
<h2 className={styles.mainHeading}>Stories From Our Kitchen, And Traditions</h2>
|
||||||
<p className={styles.description}>
|
<p className={styles.description}>
|
||||||
Discover the rich heritage of Turkish cuisine through our blog. From traditional recipes and cooking techniques to the cultural significance of tea and hospitality, we share insights into what makes Turkish food truly special.
|
Discover the rich heritage of Turkish cuisine through our blog. From traditional recipes and cooking techniques to the cultural significance of tea and hospitality, we share insights into what makes Turkish food truly special.
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -19,7 +19,7 @@
|
|||||||
|
|
||||||
.heroTitle {
|
.heroTitle {
|
||||||
font-family: var(--font-playfair);
|
font-family: var(--font-playfair);
|
||||||
font-size: 4rem;
|
font-size: var(--hero-title-size);
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@ -27,7 +27,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
font-size: 1.1rem;
|
font-size: var(--body-size);
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
}
|
}
|
||||||
@ -44,11 +44,19 @@
|
|||||||
.contactSection {
|
.contactSection {
|
||||||
padding: 80px 10px;
|
padding: 80px 10px;
|
||||||
background-color: #F5E6D3;
|
background-color: #F5E6D3;
|
||||||
/* background-image: url('/images/section-bg.jpg'); */
|
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.smallHeading {
|
||||||
|
font-size: var(--small-text-size);
|
||||||
|
color: #c49c5c;
|
||||||
|
font-family: var(--font-lato);
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1400px;
|
max-width: 1400px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@ -61,12 +69,12 @@
|
|||||||
.formBlock {
|
.formBlock {
|
||||||
background-color: #F5E6D3;
|
background-color: #F5E6D3;
|
||||||
padding: 2.5rem;
|
padding: 2.5rem;
|
||||||
border: 2px solid #b07c4b
|
border: 2px solid #b07c4b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-family: var(--font-cinzel), serif;
|
font-family: var(--font-cinzel), serif;
|
||||||
font-size: 2.5rem;
|
font-size: var(--main-heading-size);
|
||||||
color: #5d4037;
|
color: #5d4037;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@ -76,8 +84,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font-size: 1rem;
|
font-size: var(--body-size);
|
||||||
/* color: #5d4037; */
|
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
@ -104,7 +111,7 @@
|
|||||||
.formLabel {
|
.formLabel {
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
font-size: 0.95rem;
|
font-size: var(--small-text-size);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -115,7 +122,7 @@
|
|||||||
padding: 0.9rem;
|
padding: 0.9rem;
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
font-size: 0.95rem;
|
font-size: var(--small-text-size);
|
||||||
transition: border-color 0.3s;
|
transition: border-color 0.3s;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
@ -137,7 +144,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.charCount {
|
.charCount {
|
||||||
font-size: 0.85rem;
|
font-size: var(--small-text-size);
|
||||||
color: #836839;
|
color: #836839;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
@ -148,7 +155,7 @@
|
|||||||
border: none;
|
border: none;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 15px 40px;
|
padding: 15px 40px;
|
||||||
font-size: 1rem;
|
font-size: var(--body-size);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
@ -165,14 +172,13 @@
|
|||||||
box-shadow: 0 4px 12px rgba(197, 160, 89, 0.3);
|
box-shadow: 0 4px 12px rgba(197, 160, 89, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Alert Messages */
|
/* Alert Messages */
|
||||||
.alert {
|
.alert {
|
||||||
padding: 1rem 1.5rem;
|
padding: 1rem 1.5rem;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
font-size: 0.95rem;
|
font-size: var(--small-text-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
.alertSuccess {
|
.alertSuccess {
|
||||||
@ -189,7 +195,7 @@
|
|||||||
|
|
||||||
.errorText {
|
.errorText {
|
||||||
color: #dc3545;
|
color: #dc3545;
|
||||||
font-size: 0.85rem;
|
font-size: var(--small-text-size);
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
display: block;
|
display: block;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
@ -210,7 +216,7 @@
|
|||||||
background: #F5E6D3;
|
background: #F5E6D3;
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
border: 2px solid #b07c4b;
|
border: 2px solid #b07c4b;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
transition: transform 0.3s;
|
transition: transform 0.3s;
|
||||||
@ -243,14 +249,14 @@
|
|||||||
|
|
||||||
.locationTitle {
|
.locationTitle {
|
||||||
font-family: var(--font-cinzel), serif;
|
font-family: var(--font-cinzel), serif;
|
||||||
font-size: 1.3rem;
|
font-size: var(--subheading-size);
|
||||||
color: #5d4037;
|
color: #5d4037;
|
||||||
margin-bottom: 0.3rem;
|
margin-bottom: 0.3rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.locationSubtitle {
|
.locationSubtitle {
|
||||||
font-size: 0.9rem;
|
font-size: var(--small-text-size);
|
||||||
color: #836839;
|
color: #836839;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
@ -258,21 +264,20 @@
|
|||||||
|
|
||||||
.locationAddress,
|
.locationAddress,
|
||||||
.locationPhone {
|
.locationPhone {
|
||||||
font-size: 1rem;
|
font-size: var(--body-size);
|
||||||
/* color: #5d4037; */
|
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
}
|
}
|
||||||
|
|
||||||
.locationPhone {
|
.locationPhone {
|
||||||
font-size: 1.2rem;
|
font-size: var(--subheading-size);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mapContainer {
|
.mapContainer {
|
||||||
border: 2px solid #b07c4b;
|
border: 2px solid #b07c4b;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -288,7 +293,7 @@
|
|||||||
gap: 5px;
|
gap: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Responsive Media Queries */
|
||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px) {
|
||||||
.container {
|
.container {
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
@ -301,18 +306,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.heroTitle {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contactSection {
|
.contactSection {
|
||||||
padding: 60px 10px;
|
padding: 60px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formRow {
|
.formRow {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
@ -320,13 +317,12 @@
|
|||||||
.formBlock {
|
.formBlock {
|
||||||
padding: 2rem 1.5rem;
|
padding: 2rem 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) and (min-width: 200px) {
|
|
||||||
.container {
|
.container {
|
||||||
grid-template-columns: repeat(1, 1fr);
|
grid-template-columns: repeat(1, 1fr);
|
||||||
}
|
}
|
||||||
}/* Mobile responsive fixes for 320px */
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
.contactSection {
|
.contactSection {
|
||||||
padding: 40px 8px;
|
padding: 40px 8px;
|
||||||
@ -340,10 +336,6 @@
|
|||||||
.locationCard {
|
.locationCard {
|
||||||
padding: 1.5rem 1rem;
|
padding: 1.5rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 350px) {
|
@media (max-width: 350px) {
|
||||||
@ -375,14 +367,6 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.heroTitle {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formRow {
|
.formRow {
|
||||||
gap: 0.8rem;
|
gap: 0.8rem;
|
||||||
}
|
}
|
||||||
@ -390,7 +374,6 @@
|
|||||||
.input,
|
.input,
|
||||||
.textarea {
|
.textarea {
|
||||||
padding: 0.7rem;
|
padding: 0.7rem;
|
||||||
font-size: 0.9rem;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
@ -409,7 +392,8 @@
|
|||||||
height: 20px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* Critical 320px fix - ensure all boxes include padding and border in width */
|
|
||||||
|
/* Critical 320px fix */
|
||||||
@media (max-width: 320px) {
|
@media (max-width: 320px) {
|
||||||
.contactSection {
|
.contactSection {
|
||||||
padding: 30px 8px !important;
|
padding: 30px 8px !important;
|
||||||
@ -425,22 +409,13 @@
|
|||||||
|
|
||||||
.formBlock,
|
.formBlock,
|
||||||
.locationCard {
|
.locationCard {
|
||||||
padding: 2px;
|
padding: 12px;
|
||||||
border: 2px solid #b07c4b;
|
border: 2px solid #b07c4b;
|
||||||
box-sizing: border-box !important;
|
box-sizing: border-box !important;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 1.4rem !important;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formRow {
|
.formRow {
|
||||||
gap: 0.6rem !important;
|
gap: 0.6rem !important;
|
||||||
}
|
}
|
||||||
@ -454,26 +429,10 @@
|
|||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input,
|
|
||||||
.textarea {
|
|
||||||
padding: 0.6rem !important;
|
|
||||||
font-size: 0.85rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.locationCard {
|
.locationCard {
|
||||||
gap: 0.8rem !important;
|
gap: 0.8rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.locationTitle {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.locationSubtitle,
|
|
||||||
.locationAddress,
|
|
||||||
.locationPhone {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconWrapper {
|
.iconWrapper {
|
||||||
width: 35px !important;
|
width: 35px !important;
|
||||||
height: 35px !important;
|
height: 35px !important;
|
||||||
@ -490,17 +449,4 @@
|
|||||||
transform-origin: 0 0 !important;
|
transform-origin: 0 0 !important;
|
||||||
margin-bottom: -12px !important;
|
margin-bottom: -12px !important;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.submitButton {
|
|
||||||
padding: 12px 30px !important;
|
|
||||||
font-size: 0.9rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.heroTitle {
|
|
||||||
font-size: 2.2rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb {
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -5,6 +5,7 @@ import ReCAPTCHA from "react-google-recaptcha";
|
|||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import Navbar from "@/components/Navbar/Navbar";
|
import Navbar from "@/components/Navbar/Navbar";
|
||||||
import Footer from "@/components/Footer/Footer";
|
import Footer from "@/components/Footer/Footer";
|
||||||
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import styles from "./contact.module.css";
|
import styles from "./contact.module.css";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
@ -167,7 +168,13 @@ export default function ContactPage() {
|
|||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ duration: 0.8 }}
|
transition={{ duration: 0.8 }}
|
||||||
>
|
>
|
||||||
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', gap: '10px' }}>
|
||||||
|
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
|
||||||
|
<span>ANTALYA</span>
|
||||||
|
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
|
||||||
|
</div>
|
||||||
<h2 className={styles.title}>Book a Table</h2>
|
<h2 className={styles.title}>Book a Table</h2>
|
||||||
|
|
||||||
<p className={styles.subtitle}>
|
<p className={styles.subtitle}>
|
||||||
Reserve your table for an unforgettable Turkish dining experience. We look forward to serving you our authentic cuisine.
|
Reserve your table for an unforgettable Turkish dining experience. We look forward to serving you our authentic cuisine.
|
||||||
</p>
|
</p>
|
||||||
@ -319,19 +326,19 @@ export default function ContactPage() {
|
|||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.locationInfo}>
|
<div className={styles.locationInfo}>
|
||||||
<h3 className={styles.locationTitle}>Call Us</h3>
|
<h3 className={styles.locationTitle}>Call Us</h3>
|
||||||
|
|
||||||
<div className={styles.phoneFlex}>
|
<div className={styles.phoneFlex}>
|
||||||
<a href="tel:5195816363" className={styles.locationSubtitle}>
|
<a href="tel:5195816363" className={styles.locationSubtitle}>
|
||||||
Kitchener : 519-581-6363
|
Kitchener : 519-581-6363
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="tel:2893139838" className={styles.locationSubtitle}>
|
<a href="tel:2893139838" className={styles.locationSubtitle}>
|
||||||
Burlington : 289-313-9838
|
Burlington : 289-313-9838
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
.heroTitle {
|
.heroTitle {
|
||||||
font-family: var(--font-playfair);
|
font-family: var(--font-playfair);
|
||||||
font-size: 4rem;
|
font-size: var(--hero-title-size);
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@ -28,7 +28,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
font-size: 1.1rem;
|
font-size: var(--body-size);
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
}
|
}
|
||||||
@ -51,7 +51,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.smallHeading {
|
.smallHeading {
|
||||||
font-size: 0.9rem;
|
font-size: var(--small-text-size);
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@ -61,7 +61,7 @@
|
|||||||
|
|
||||||
.mainHeading {
|
.mainHeading {
|
||||||
font-family: var(--font-playfair);
|
font-family: var(--font-playfair);
|
||||||
font-size: 2.5rem;
|
font-size: var(--main-heading-size);
|
||||||
color: #5d4037;
|
color: #5d4037;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
@ -69,7 +69,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font-size: 1rem;
|
font-size: var(--body-size);
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
@ -96,7 +96,7 @@
|
|||||||
border: 2px solid #b07c4b;
|
border: 2px solid #b07c4b;
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
padding: 12px 30px;
|
padding: 12px 30px;
|
||||||
font-size: 1rem;
|
font-size: var(--body-size);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
@ -154,7 +154,7 @@
|
|||||||
|
|
||||||
.viewText {
|
.viewText {
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
font-size: 1.2rem;
|
font-size: var(--body-size);
|
||||||
border: 2px solid #b07c4b;
|
border: 2px solid #b07c4b;
|
||||||
padding: 0.5rem 1.5rem;
|
padding: 0.5rem 1.5rem;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
@ -199,7 +199,7 @@
|
|||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
font-size: 2.5rem;
|
font-size: calc(var(--hero-title-size) * 0.7);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: color 0.3s;
|
transition: color 0.3s;
|
||||||
}
|
}
|
||||||
@ -215,7 +215,7 @@
|
|||||||
background: rgba(197, 160, 89, 0.2);
|
background: rgba(197, 160, 89, 0.2);
|
||||||
border: 2px solid #b07c4b;
|
border: 2px solid #b07c4b;
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
font-size: 2rem;
|
font-size: calc(var(--main-heading-size) * 0.9);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
@ -236,12 +236,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.heroTitle {
|
.hero {
|
||||||
font-size: 3rem;
|
padding: 6rem 1rem 4rem;
|
||||||
}
|
|
||||||
|
|
||||||
.mainHeading {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.prevBtn {
|
.prevBtn {
|
||||||
|
|||||||
@ -109,8 +109,12 @@ export default function GalleryPage() {
|
|||||||
</motion.section>
|
</motion.section>
|
||||||
|
|
||||||
<section className={styles.sectionHeading}>
|
<section className={styles.sectionHeading}>
|
||||||
<p className={styles.smallHeading}>🍴 ANTALYA 🍴</p>
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
|
||||||
<h2 className={styles.mainHeading}>A Visual Journey Through Authentic Turkish Cuisine</h2>
|
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
|
||||||
|
<span>ANTALYA</span>
|
||||||
|
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
|
||||||
|
</div>
|
||||||
|
<h2 className={styles.mainHeading}>A Visual Journey Through Authentic Turkish</h2>
|
||||||
<p className={styles.description}>
|
<p className={styles.description}>
|
||||||
Explore our gallery showcasing the authentic flavors and elegant atmosphere of Antalya. From charcoal-grilled kebabs to handcrafted baklava, each image tells a story of culinary excellence and Turkish hospitality.
|
Explore our gallery showcasing the authentic flavors and elegant atmosphere of Antalya. From charcoal-grilled kebabs to handcrafted baklava, each image tells a story of culinary excellence and Turkish hospitality.
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -10,7 +10,6 @@
|
|||||||
|
|
||||||
/* Legacy color support (mapped to new colors) */
|
/* Legacy color support (mapped to new colors) */
|
||||||
--color-gold: #d28839;
|
--color-gold: #d28839;
|
||||||
/* Updated to button color */
|
|
||||||
|
|
||||||
/* Font Family Variables */
|
/* Font Family Variables */
|
||||||
--font-menu: 'Canva Sans', sans-serif;
|
--font-menu: 'Canva Sans', sans-serif;
|
||||||
@ -21,6 +20,14 @@
|
|||||||
--font-playfair: 'Playfair Display', serif;
|
--font-playfair: 'Playfair Display', serif;
|
||||||
--font-lato: 'Canva Sans', sans;
|
--font-lato: 'Canva Sans', sans;
|
||||||
--font-cormorant: 'Canva Sans', sans-serif;
|
--font-cormorant: 'Canva Sans', sans-serif;
|
||||||
|
|
||||||
|
/* Responsive Font Size Variables - Desktop Optimized */
|
||||||
|
--hero-title-size: 64px;
|
||||||
|
--section-heading-size: 42px;
|
||||||
|
--main-heading-size: 36px;
|
||||||
|
--subheading-size: 22px;
|
||||||
|
--body-size: 18px;
|
||||||
|
--small-text-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@ -37,7 +44,6 @@ body {
|
|||||||
color: var(--color-text-light);
|
color: var(--color-text-light);
|
||||||
font-family: var(--font-paragraph);
|
font-family: var(--font-paragraph);
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
/* Ensure default font is applied */
|
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
@ -73,4 +79,168 @@ button {
|
|||||||
/* Global Border Utility */
|
/* Global Border Utility */
|
||||||
.border-standard {
|
.border-standard {
|
||||||
border-color: var(--color-border);
|
border-color: var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== RESPONSIVE TYPOGRAPHY ===== */
|
||||||
|
|
||||||
|
/* ===== DESKTOP SIZES (1200px and above) ===== */
|
||||||
|
|
||||||
|
/* Extra Large Desktop: 1920px+ */
|
||||||
|
@media (min-width: 1920px) {
|
||||||
|
:root {
|
||||||
|
--hero-title-size: 68px;
|
||||||
|
--section-heading-size: 44px;
|
||||||
|
--main-heading-size: 38px;
|
||||||
|
--subheading-size: 24px;
|
||||||
|
--body-size: 19px;
|
||||||
|
--small-text-size: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large Desktop: 1600px */
|
||||||
|
@media (max-width: 1919px) and (min-width: 1600px) {
|
||||||
|
:root {
|
||||||
|
--hero-title-size: 64px;
|
||||||
|
--section-heading-size: 42px;
|
||||||
|
--main-heading-size: 36px;
|
||||||
|
--subheading-size: 22px;
|
||||||
|
--body-size: 18px;
|
||||||
|
--small-text-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Desktop: 1540px */
|
||||||
|
@media (max-width: 1599px) and (min-width: 1540px) {
|
||||||
|
:root {
|
||||||
|
--hero-title-size: 62px;
|
||||||
|
--section-heading-size: 40px;
|
||||||
|
--main-heading-size: 35px;
|
||||||
|
--subheading-size: 22px;
|
||||||
|
--body-size: 18px;
|
||||||
|
--small-text-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Desktop: 1440px */
|
||||||
|
@media (max-width: 1539px) and (min-width: 1440px) {
|
||||||
|
:root {
|
||||||
|
--hero-title-size: 60px;
|
||||||
|
--section-heading-size: 39px;
|
||||||
|
--main-heading-size: 34px;
|
||||||
|
--subheading-size: 21px;
|
||||||
|
--body-size: 18px;
|
||||||
|
--small-text-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Desktop: 1360px */
|
||||||
|
@media (max-width: 1439px) and (min-width: 1360px) {
|
||||||
|
:root {
|
||||||
|
--hero-title-size: 58px;
|
||||||
|
--section-heading-size: 38px;
|
||||||
|
--main-heading-size: 33px;
|
||||||
|
--subheading-size: 21px;
|
||||||
|
--body-size: 17px;
|
||||||
|
--small-text-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Desktop/Laptop: 1200px */
|
||||||
|
@media (max-width: 1359px) and (min-width: 1200px) {
|
||||||
|
:root {
|
||||||
|
--hero-title-size: 56px;
|
||||||
|
--section-heading-size: 36px;
|
||||||
|
--main-heading-size: 32px;
|
||||||
|
--subheading-size: 20px;
|
||||||
|
--body-size: 17px;
|
||||||
|
--small-text-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== TABLET SIZES (768px - 1199px) ===== */
|
||||||
|
|
||||||
|
/* Laptop: 1024px */
|
||||||
|
@media (max-width: 1199px) and (min-width: 1024px) {
|
||||||
|
:root {
|
||||||
|
--hero-title-size: 48px;
|
||||||
|
--section-heading-size: 32px;
|
||||||
|
--main-heading-size: 28px;
|
||||||
|
--subheading-size: 19px;
|
||||||
|
--body-size: 16px;
|
||||||
|
--small-text-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet Large: 992px */
|
||||||
|
@media (max-width: 1023px) and (min-width: 992px) {
|
||||||
|
:root {
|
||||||
|
--hero-title-size: 46px;
|
||||||
|
--section-heading-size: 30px;
|
||||||
|
--main-heading-size: 26px;
|
||||||
|
--subheading-size: 18px;
|
||||||
|
--body-size: 16px;
|
||||||
|
--small-text-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet: 768px */
|
||||||
|
@media (max-width: 991px) and (min-width: 768px) {
|
||||||
|
:root {
|
||||||
|
--hero-title-size: 42px;
|
||||||
|
--section-heading-size: 28px;
|
||||||
|
--main-heading-size: 24px;
|
||||||
|
--subheading-size: 17px;
|
||||||
|
--body-size: 15px;
|
||||||
|
--small-text-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== MOBILE SIZES (below 768px) ===== */
|
||||||
|
|
||||||
|
/* Mobile Large: 500px */
|
||||||
|
@media (max-width: 767px) and (min-width: 500px) {
|
||||||
|
:root {
|
||||||
|
--hero-title-size: 36px;
|
||||||
|
--section-heading-size: 26px;
|
||||||
|
--main-heading-size: 22px;
|
||||||
|
--subheading-size: 16px;
|
||||||
|
--body-size: 15px;
|
||||||
|
--small-text-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile: 475px */
|
||||||
|
@media (max-width: 499px) and (min-width: 475px) {
|
||||||
|
:root {
|
||||||
|
--hero-title-size: 34px;
|
||||||
|
--section-heading-size: 24px;
|
||||||
|
--main-heading-size: 21px;
|
||||||
|
--subheading-size: 16px;
|
||||||
|
--body-size: 15px;
|
||||||
|
--small-text-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile: 424px */
|
||||||
|
@media (max-width: 474px) and (min-width: 424px) {
|
||||||
|
:root {
|
||||||
|
--hero-title-size: 32px;
|
||||||
|
--section-heading-size: 23px;
|
||||||
|
--main-heading-size: 20px;
|
||||||
|
--subheading-size: 15px;
|
||||||
|
--body-size: 14px;
|
||||||
|
--small-text-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Small: 320px */
|
||||||
|
@media (max-width: 423px) {
|
||||||
|
:root {
|
||||||
|
--hero-title-size: 28px;
|
||||||
|
--section-heading-size: 21px;
|
||||||
|
--main-heading-size: 20px;
|
||||||
|
--subheading-size: 15px;
|
||||||
|
--body-size: 14px;
|
||||||
|
--small-text-size: 13px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
.heroTitle {
|
.heroTitle {
|
||||||
font-family: var(--font-playfair);
|
font-family: var(--font-playfair);
|
||||||
font-size: 4rem;
|
font-size: var(--hero-title-size);
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@ -28,7 +28,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
font-size: 1.1rem;
|
font-size: var(--body-size);
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
}
|
}
|
||||||
@ -51,7 +51,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.smallHeading {
|
.smallHeading {
|
||||||
font-size: 0.9rem;
|
font-size: var(--small-text-size);
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@ -61,7 +61,7 @@
|
|||||||
|
|
||||||
.mainHeading {
|
.mainHeading {
|
||||||
font-family: var(--font-playfair);
|
font-family: var(--font-playfair);
|
||||||
font-size: 2.5rem;
|
font-size: var(--main-heading-size);
|
||||||
color: #5d4037;
|
color: #5d4037;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
@ -69,7 +69,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font-size: 1rem;
|
font-size: var(--body-size);
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
@ -97,7 +97,7 @@
|
|||||||
border: 2px solid #b07c4b;
|
border: 2px solid #b07c4b;
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
padding: 12px 30px;
|
padding: 12px 30px;
|
||||||
font-size: 1rem;
|
font-size: var(--body-size);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
@ -157,11 +157,12 @@
|
|||||||
left: -10px;
|
left: -10px;
|
||||||
right: -10px;
|
right: -10px;
|
||||||
bottom: -10px;
|
bottom: -10px;
|
||||||
border: 2px dashed #ff6b6b;
|
border: 4px dotted #c49c5c;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: spin 10s linear infinite;
|
animation: spin 10s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
from {
|
from {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
@ -203,23 +204,23 @@
|
|||||||
|
|
||||||
.dishName {
|
.dishName {
|
||||||
font-family: var(--font-playfair);
|
font-family: var(--font-playfair);
|
||||||
font-size: 1.25rem;
|
font-size: var(--subheading-size);
|
||||||
color: #333;
|
color: #5d4037;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price {
|
.price {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 1.1rem;
|
font-size: var(--body-size);
|
||||||
color: #ffb300;
|
color: #c49c5c;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.cardContent .description {
|
||||||
font-size: 0.9rem;
|
font-size: var(--small-text-size);
|
||||||
color: #c49c5c;
|
color: #c49c5c;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
@ -237,21 +238,12 @@
|
|||||||
padding: 6rem 1rem 4rem;
|
padding: 6rem 1rem 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.heroTitle {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mainHeading {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
font-size: 0.85rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menuCard {
|
.menuCard {
|
||||||
|
|||||||
@ -82,8 +82,12 @@ export default function MenuPage() {
|
|||||||
</motion.section>
|
</motion.section>
|
||||||
|
|
||||||
<section className={styles.sectionHeading}>
|
<section className={styles.sectionHeading}>
|
||||||
<p className={styles.smallHeading}>🍴 ANTALYA 🍴</p>
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
|
||||||
<h2 className={styles.mainHeading}>Delicious Turkish Dishes, Including Kebabs, Mezze, And More</h2>
|
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
|
||||||
|
<span>ANTALYA</span>
|
||||||
|
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
|
||||||
|
</div>
|
||||||
|
<h2 className={styles.mainHeading}>Delicious Turkish, Mezze, And More</h2>
|
||||||
<p className={styles.description}>
|
<p className={styles.description}>
|
||||||
Looking for authentic Turkish dining? At Antalya, we offer a wide variety of traditional dishes, from crispy appetizers to charcoal-grilled kebabs. Whether you're craving mezze platters or hearty main courses, our menu has something for everyone.
|
Looking for authentic Turkish dining? At Antalya, we offer a wide variety of traditional dishes, from crispy appetizers to charcoal-grilled kebabs. Whether you're craving mezze platters or hearty main courses, our menu has something for everyone.
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -49,7 +49,7 @@ export default function About() {
|
|||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<Link href="/about" className={styles.button}>
|
<Link href="/about-us" className={styles.button}>
|
||||||
Learn More
|
Learn More
|
||||||
</Link>
|
</Link>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
@ -67,6 +67,15 @@
|
|||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.smallHeading {
|
||||||
|
font-size: var(--small-text-size);
|
||||||
|
color: #c49c5c;
|
||||||
|
font-family: var(--font-lato);
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.excerpt {
|
.excerpt {
|
||||||
font-family: var(--font-cinzel), serif;
|
font-family: var(--font-cinzel), serif;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
|
|||||||
@ -40,6 +40,11 @@ export default function Blogs() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section className={styles.section} id="blog">
|
<section className={styles.section} id="blog">
|
||||||
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
|
||||||
|
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
|
||||||
|
<span>ANTALYA</span>
|
||||||
|
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
|
||||||
|
</div>
|
||||||
<h2 className={styles.title}>OUR BLOGS</h2>
|
<h2 className={styles.title}>OUR BLOGS</h2>
|
||||||
|
|
||||||
<div className={styles.sliderContainer}>
|
<div className={styles.sliderContainer}>
|
||||||
|
|||||||
@ -11,6 +11,15 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.smallHeading {
|
||||||
|
font-size: var(--small-text-size);
|
||||||
|
color: #c49c5c;
|
||||||
|
font-family: var(--font-lato);
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.formContainer {
|
.formContainer {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -45,7 +54,7 @@
|
|||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-family: var(--font-playfair);
|
font-family: var(--font-playfair);
|
||||||
color: var(--color-gold);
|
color: #c49c5c;
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
@ -68,7 +77,7 @@
|
|||||||
|
|
||||||
.label {
|
.label {
|
||||||
font-family: var(--font-playfair);
|
font-family: var(--font-playfair);
|
||||||
color: var(--color-gold);
|
color: #c49c5c;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -98,7 +107,7 @@
|
|||||||
|
|
||||||
.submitButton {
|
.submitButton {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 1px solid var(--color-gold);
|
border: 1px solid #c49c5c;
|
||||||
color: var(--color-text-light);
|
color: var(--color-text-light);
|
||||||
padding: 0.8rem 2rem;
|
padding: 0.8rem 2rem;
|
||||||
font-family: var(--font-lato);
|
font-family: var(--font-lato);
|
||||||
@ -111,8 +120,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.submitButton:hover {
|
.submitButton:hover {
|
||||||
background-color: var(--color-gold);
|
background-color: #c49c5c;
|
||||||
color: var(--color-dark);
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.successMessage {
|
.successMessage {
|
||||||
@ -154,7 +163,7 @@
|
|||||||
|
|
||||||
/* Character count */
|
/* Character count */
|
||||||
.charCount {
|
.charCount {
|
||||||
color: var(--color-gold);
|
color: #c49c5c;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
display: block;
|
display: block;
|
||||||
|
|||||||
@ -131,6 +131,11 @@ export default function BookTable() {
|
|||||||
|
|
||||||
<div className={styles.formContainer}>
|
<div className={styles.formContainer}>
|
||||||
<div className={styles.content}>
|
<div className={styles.content}>
|
||||||
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
|
||||||
|
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
|
||||||
|
<span>ANTALYA</span>
|
||||||
|
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
|
||||||
|
</div>
|
||||||
<h2 className={styles.title}>Book A Table</h2>
|
<h2 className={styles.title}>Book A Table</h2>
|
||||||
|
|
||||||
{alert.show && (
|
{alert.show && (
|
||||||
|
|||||||
@ -1,16 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import styles from '@/app/about/about.module.css'; // reuse styles or define minimal inline
|
|
||||||
|
|
||||||
export default function Footer() {
|
|
||||||
return (
|
|
||||||
<footer className={styles.footer || ''} style={{
|
|
||||||
backgroundColor: 'var(--color-dark)',
|
|
||||||
color: '#fff',
|
|
||||||
textAlign: 'center',
|
|
||||||
padding: '2rem 0',
|
|
||||||
marginTop: '4rem',
|
|
||||||
}}>
|
|
||||||
<p>© 2025 Antalya Restaurant. All rights reserved.</p>
|
|
||||||
</footer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -144,7 +144,7 @@
|
|||||||
.contactRow {
|
.contactRow {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 5px;
|
||||||
margin-bottom: 0.8rem;
|
margin-bottom: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -154,6 +154,15 @@
|
|||||||
transition: color 0.3s;
|
transition: color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.iconImage {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
margin-right: 10px;
|
||||||
|
object-fit: contain;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.contactRow a:hover {
|
.contactRow a:hover {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -90,17 +90,29 @@ export default function Footer() {
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className={styles.contactRow}>
|
<div className={styles.contactRow}>
|
||||||
<span className={styles.phoneIcon}>📞</span>
|
<img
|
||||||
|
src="/images/phone-call.png"
|
||||||
|
alt="Phone"
|
||||||
|
className={styles.iconImage}
|
||||||
|
/>
|
||||||
<a href="tel:5195816363">Kitchener: 519-581-6363</a>
|
<a href="tel:5195816363">Kitchener: 519-581-6363</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.contactRow}>
|
<div className={styles.contactRow}>
|
||||||
<span className={styles.phoneIcon}>📞</span>
|
<img
|
||||||
|
src="/images/phone-call.png"
|
||||||
|
alt="Phone"
|
||||||
|
className={styles.iconImage}
|
||||||
|
/>
|
||||||
<a href="tel:2893139838">Burlington: 289-313-9838</a>
|
<a href="tel:2893139838">Burlington: 289-313-9838</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.contactRow}>
|
<div className={styles.contactRow}>
|
||||||
<span className={styles.emailIcon}>✉️</span>
|
<img
|
||||||
|
src="/images/email.png"
|
||||||
|
alt="Email"
|
||||||
|
className={styles.iconImage}
|
||||||
|
/>
|
||||||
<a href="mailto:hello@antalyarestaurant.ca">hello@antalyarestaurant.ca</a>
|
<a href="mailto:hello@antalyarestaurant.ca">hello@antalyarestaurant.ca</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -111,6 +123,7 @@ export default function Footer() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.copyright}>
|
<div className={styles.copyright}>
|
||||||
|
|||||||
@ -17,6 +17,15 @@
|
|||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.smallHeading {
|
||||||
|
font-size: var(--small-text-size);
|
||||||
|
color: #c49c5c;
|
||||||
|
font-family: var(--font-lato);
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
|||||||
@ -39,6 +39,11 @@ export default function Gallery() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section className={styles.section}>
|
<section className={styles.section}>
|
||||||
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
|
||||||
|
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
|
||||||
|
<span>ANTALYA</span>
|
||||||
|
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
|
||||||
|
</div>
|
||||||
<h2 className={styles.title}>Gallery</h2>
|
<h2 className={styles.title}>Gallery</h2>
|
||||||
<div className={styles.grid}>
|
<div className={styles.grid}>
|
||||||
{images.map((src, index) => (
|
{images.map((src, index) => (
|
||||||
|
|||||||
@ -177,6 +177,15 @@
|
|||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.smallHeading {
|
||||||
|
font-size: var(--small-text-size);
|
||||||
|
color: #c49c5c;
|
||||||
|
font-family: var(--font-lato);
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.cardContent {
|
.cardContent {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -54,6 +54,11 @@ export default function Menu() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section className={styles.menuSection}>
|
<section className={styles.menuSection}>
|
||||||
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
|
||||||
|
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
|
||||||
|
<span>ANTALYA</span>
|
||||||
|
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
|
||||||
|
</div>
|
||||||
{/* Section Title */}
|
{/* Section Title */}
|
||||||
<motion.h2
|
<motion.h2
|
||||||
className={styles.title}
|
className={styles.title}
|
||||||
|
|||||||
@ -1,26 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import Link from 'next/link';
|
|
||||||
import styles from '@/app/about/about.module.css'; // reuse existing styles if needed
|
|
||||||
|
|
||||||
export default function Navbar() {
|
|
||||||
return (
|
|
||||||
<nav className={styles.navbar || ''} style={{
|
|
||||||
backgroundColor: 'var(--color-dark)',
|
|
||||||
padding: '1rem 2rem',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
color: '#fff',
|
|
||||||
}}>
|
|
||||||
<div style={{ fontFamily: 'var(--font-playfair)', fontSize: '1.5rem' }}>
|
|
||||||
Antalya Restaurant
|
|
||||||
</div>
|
|
||||||
<ul style={{ listStyle: 'none', display: 'flex', gap: '1.5rem', margin: 0 }}>
|
|
||||||
<li><Link href="/" style={{ color: '#fff', textDecoration: 'none' }}>Home</Link></li>
|
|
||||||
<li><Link href="/about" style={{ color: '#fff', textDecoration: 'none' }}>About</Link></li>
|
|
||||||
<li><Link href="/menu" style={{ color: '#fff', textDecoration: 'none' }}>Menu</Link></li>
|
|
||||||
<li><Link href="/contact" style={{ color: '#fff', textDecoration: 'none' }}>Contact</Link></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -7,7 +7,7 @@ import styles from './Navbar.module.css'
|
|||||||
|
|
||||||
const navLinks = [
|
const navLinks = [
|
||||||
{ name: 'Home', href: '/' },
|
{ name: 'Home', href: '/' },
|
||||||
{ name: 'About', href: '/about' },
|
{ name: 'About', href: '/about-us' },
|
||||||
{ name: 'Gallery', href: '/gallery' },
|
{ name: 'Gallery', href: '/gallery' },
|
||||||
{ name: 'Menu', href: '/menu' },
|
{ name: 'Menu', href: '/menu' },
|
||||||
{ name: 'Blog', href: '/blog' },
|
{ name: 'Blog', href: '/blog' },
|
||||||
|
|||||||
@ -42,6 +42,16 @@
|
|||||||
transform: translateY(-10px);
|
transform: translateY(-10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.smallHeading {
|
||||||
|
font-size: var(--small-text-size);
|
||||||
|
color: #c49c5c;
|
||||||
|
font-family: var(--font-lato);
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.imageContainer {
|
.imageContainer {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@ -50,6 +50,11 @@ export default function PopularDishes() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section className={styles.section} id="menu">
|
<section className={styles.section} id="menu">
|
||||||
|
<motion.div className={styles.smallHeading}>
|
||||||
|
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
|
||||||
|
<span>ANTALYA</span>
|
||||||
|
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
|
||||||
|
</motion.div>
|
||||||
<motion.h2
|
<motion.h2
|
||||||
className={styles.title}
|
className={styles.title}
|
||||||
initial={{ opacity: 0, y: 30 }}
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
|||||||
@ -16,6 +16,15 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.smallHeading {
|
||||||
|
font-size: var(--small-text-size);
|
||||||
|
color: #c49c5c;
|
||||||
|
font-family: var(--font-lato);
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-family: var(--font-cinzel), serif;
|
font-family: var(--font-cinzel), serif;
|
||||||
/* Assuming Cinzel is available or similar serif */
|
/* Assuming Cinzel is available or similar serif */
|
||||||
|
|||||||
@ -83,6 +83,11 @@ export default function Testimonials() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section className={styles.section}>
|
<section className={styles.section}>
|
||||||
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
|
||||||
|
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
|
||||||
|
<span>ANTALYA</span>
|
||||||
|
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
|
||||||
|
</div>
|
||||||
<h2 className={styles.title}>TESTIMONIALS</h2>
|
<h2 className={styles.title}>TESTIMONIALS</h2>
|
||||||
|
|
||||||
<div className={styles.sliderContainer}>
|
<div className={styles.sliderContainer}>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user