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
|
||||
const staticLinks = [
|
||||
{ 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: '/gallery/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/contact/', changefreq: 'weekly', priority: 0.6 },
|
||||
|
||||
@ -140,6 +140,14 @@
|
||||
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 */
|
||||
.featuresGrid {
|
||||
display: grid;
|
||||
@ -195,10 +203,10 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
padding: 0 70px;
|
||||
}
|
||||
|
||||
.sliderBtn {
|
||||
@ -214,6 +222,18 @@
|
||||
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 {
|
||||
@ -221,6 +241,7 @@
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
.testimonialCard {
|
||||
background-color: #F5E6D3;
|
||||
padding: 3rem 2.5rem;
|
||||
@ -235,7 +256,6 @@
|
||||
.testimonialText {
|
||||
font-family: var(--font-lato);
|
||||
font-size: 1.3rem;
|
||||
/* color: #5d4037; */
|
||||
line-height: 1.8;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
@ -262,6 +282,7 @@
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
.authorInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -278,9 +299,7 @@
|
||||
.authorRole {
|
||||
font-family: var(--font-lato);
|
||||
font-size: 0.95rem;
|
||||
/* color: #836839; */
|
||||
}
|
||||
|
||||
.sliderDots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -403,8 +422,12 @@
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.ctaSubtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ctaTitle {
|
||||
font-size: 2rem;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.sliderBtn {
|
||||
@ -437,6 +460,20 @@
|
||||
.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 */
|
||||
@ -472,7 +509,7 @@
|
||||
.faqContentBlock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
/* gap: 2rem; */
|
||||
}
|
||||
|
||||
.faqTitle {
|
||||
@ -520,7 +557,7 @@
|
||||
font-family: var(--font-lato);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
/* color: #5d4037; */
|
||||
color: #c49c5c;
|
||||
text-align: left;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@ -557,7 +594,7 @@
|
||||
.faqAnswer p {
|
||||
font-family: var(--font-lato);
|
||||
font-size: 1rem;
|
||||
color: #c49c5c;
|
||||
/* color: #5d4037; */
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
}
|
||||
@ -573,3 +610,56 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -97,7 +97,7 @@ export default function AboutPage() {
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>About Us</h1>
|
||||
<p className={styles.breadcrumb}>
|
||||
<Link href="/">Home</Link> / About Us
|
||||
<Link href="/">Home</Link> / About
|
||||
</p>
|
||||
</div>
|
||||
</motion.section>
|
||||
@ -112,6 +112,11 @@ export default function AboutPage() {
|
||||
variants={staggerContainer}
|
||||
>
|
||||
<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>
|
||||
<p className={styles.text}>
|
||||
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 */}
|
||||
<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
|
||||
className={styles.sectionTitleCenter}
|
||||
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} />
|
||||
</motion.div>
|
||||
<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>
|
||||
<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.
|
||||
@ -191,6 +206,11 @@ export default function AboutPage() {
|
||||
|
||||
{/* Testimonials Section - Auto Slider */}
|
||||
<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
|
||||
className={styles.sectionTitleCenter}
|
||||
initial="hidden"
|
||||
@ -270,6 +290,11 @@ export default function AboutPage() {
|
||||
/>
|
||||
</motion.div>
|
||||
<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>
|
||||
<p className={styles.faqSubtitle}>
|
||||
Have questions about Antalya Restaurant? Find answers to our most commonly asked questions below.
|
||||
@ -293,6 +318,11 @@ export default function AboutPage() {
|
||||
variants={fadeIn}
|
||||
>
|
||||
<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
|
||||
className={styles.ctaTitle}
|
||||
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 {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 4rem;
|
||||
font-size: var(--hero-title-size);
|
||||
color: #c49c5c;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
@ -28,7 +28,7 @@
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 1.1rem;
|
||||
font-size: var(--body-size);
|
||||
color: #c49c5c;
|
||||
font-family: var(--font-lato);
|
||||
}
|
||||
@ -51,7 +51,7 @@
|
||||
}
|
||||
|
||||
.smallHeading {
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--small-text-size);
|
||||
color: #c49c5c;
|
||||
font-family: var(--font-lato);
|
||||
font-weight: 600;
|
||||
@ -61,7 +61,7 @@
|
||||
|
||||
.mainHeading {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 2.5rem;
|
||||
font-size: var(--main-heading-size);
|
||||
color: #5d4037;
|
||||
line-height: 1.3;
|
||||
font-weight: 700;
|
||||
@ -69,7 +69,7 @@
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1rem;
|
||||
font-size: var(--body-size);
|
||||
color: #c49c5c;
|
||||
line-height: 1.8;
|
||||
font-family: var(--font-lato);
|
||||
@ -118,7 +118,7 @@
|
||||
|
||||
.blogTitle {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 1.6rem;
|
||||
font-size: var(--subheading-size);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@ -132,14 +132,14 @@
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--small-text-size);
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--font-lato);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
font-size: 1rem;
|
||||
font-size: var(--body-size);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-grow: 1;
|
||||
@ -156,7 +156,7 @@
|
||||
align-self: flex-start;
|
||||
font-family: var(--font-lato);
|
||||
text-transform: uppercase;
|
||||
font-size: 0.85rem;
|
||||
font-size: var(--small-text-size);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -166,15 +166,11 @@
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.heroTitle {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.mainHeading {
|
||||
font-size: 2rem;
|
||||
.hero {
|
||||
padding: 6rem 1rem 4rem;
|
||||
}
|
||||
|
||||
.blogSection {
|
||||
padding: 60px 10px;
|
||||
padding: 20px 10px 60px;
|
||||
}
|
||||
}
|
||||
@ -65,8 +65,12 @@ export default function BlogPage() {
|
||||
</motion.section>
|
||||
|
||||
<section className={styles.sectionHeading}>
|
||||
<p className={styles.smallHeading}>🍴 ANTALYA 🍴</p>
|
||||
<h2 className={styles.mainHeading}>Stories From Our Kitchen, Turkish Culture, And Culinary Traditions</h2>
|
||||
<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.mainHeading}>Stories From Our Kitchen, And Traditions</h2>
|
||||
<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.
|
||||
</p>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
.heroTitle {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 4rem;
|
||||
font-size: var(--hero-title-size);
|
||||
color: #c49c5c;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 1.1rem;
|
||||
font-size: var(--body-size);
|
||||
color: #c49c5c;
|
||||
font-family: var(--font-lato);
|
||||
}
|
||||
@ -44,11 +44,19 @@
|
||||
.contactSection {
|
||||
padding: 80px 10px;
|
||||
background-color: #F5E6D3;
|
||||
/* background-image: url('/images/section-bg.jpg'); */
|
||||
background-size: cover;
|
||||
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 {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
@ -61,12 +69,12 @@
|
||||
.formBlock {
|
||||
background-color: #F5E6D3;
|
||||
padding: 2.5rem;
|
||||
border: 2px solid #b07c4b
|
||||
border: 2px solid #b07c4b;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: var(--font-cinzel), serif;
|
||||
font-size: 2.5rem;
|
||||
font-size: var(--main-heading-size);
|
||||
color: #5d4037;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 600;
|
||||
@ -76,8 +84,7 @@
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1rem;
|
||||
/* color: #5d4037; */
|
||||
font-size: var(--body-size);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2rem;
|
||||
font-family: var(--font-lato);
|
||||
@ -104,7 +111,7 @@
|
||||
.formLabel {
|
||||
font-family: var(--font-lato);
|
||||
color: #c49c5c;
|
||||
font-size: 0.95rem;
|
||||
font-size: var(--small-text-size);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -115,7 +122,7 @@
|
||||
padding: 0.9rem;
|
||||
color: #c49c5c;
|
||||
font-family: var(--font-lato);
|
||||
font-size: 0.95rem;
|
||||
font-size: var(--small-text-size);
|
||||
transition: border-color 0.3s;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@ -137,7 +144,7 @@
|
||||
}
|
||||
|
||||
.charCount {
|
||||
font-size: 0.85rem;
|
||||
font-size: var(--small-text-size);
|
||||
color: #836839;
|
||||
text-align: right;
|
||||
font-family: var(--font-lato);
|
||||
@ -148,7 +155,7 @@
|
||||
border: none;
|
||||
color: #fff;
|
||||
padding: 15px 40px;
|
||||
font-size: 1rem;
|
||||
font-size: var(--body-size);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
@ -165,14 +172,13 @@
|
||||
box-shadow: 0 4px 12px rgba(197, 160, 89, 0.3);
|
||||
}
|
||||
|
||||
|
||||
/* Alert Messages */
|
||||
.alert {
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: var(--font-lato);
|
||||
font-size: 0.95rem;
|
||||
font-size: var(--small-text-size);
|
||||
}
|
||||
|
||||
.alertSuccess {
|
||||
@ -189,7 +195,7 @@
|
||||
|
||||
.errorText {
|
||||
color: #dc3545;
|
||||
font-size: 0.85rem;
|
||||
font-size: var(--small-text-size);
|
||||
margin-top: 0.25rem;
|
||||
display: block;
|
||||
font-family: var(--font-lato);
|
||||
@ -243,14 +249,14 @@
|
||||
|
||||
.locationTitle {
|
||||
font-family: var(--font-cinzel), serif;
|
||||
font-size: 1.3rem;
|
||||
font-size: var(--subheading-size);
|
||||
color: #5d4037;
|
||||
margin-bottom: 0.3rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.locationSubtitle {
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--small-text-size);
|
||||
color: #836839;
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: var(--font-lato);
|
||||
@ -258,14 +264,13 @@
|
||||
|
||||
.locationAddress,
|
||||
.locationPhone {
|
||||
font-size: 1rem;
|
||||
/* color: #5d4037; */
|
||||
font-size: var(--body-size);
|
||||
line-height: 1.6;
|
||||
font-family: var(--font-lato);
|
||||
}
|
||||
|
||||
.locationPhone {
|
||||
font-size: 1.2rem;
|
||||
font-size: var(--subheading-size);
|
||||
font-weight: 600;
|
||||
color: #c49c5c;
|
||||
}
|
||||
@ -288,7 +293,7 @@
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* Responsive Media Queries */
|
||||
@media (max-width: 1024px) {
|
||||
.container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@ -301,18 +306,10 @@
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.heroTitle {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.contactSection {
|
||||
padding: 60px 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.formRow {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@ -320,13 +317,12 @@
|
||||
.formBlock {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) and (min-width: 200px) {
|
||||
.container {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}/* Mobile responsive fixes for 320px */
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.contactSection {
|
||||
padding: 40px 8px;
|
||||
@ -340,10 +336,6 @@
|
||||
.locationCard {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
@ -375,14 +367,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.formRow {
|
||||
gap: 0.8rem;
|
||||
}
|
||||
@ -390,7 +374,6 @@
|
||||
.input,
|
||||
.textarea {
|
||||
padding: 0.7rem;
|
||||
font-size: 0.9rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -409,7 +392,8 @@
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
/* Critical 320px fix - ensure all boxes include padding and border in width */
|
||||
|
||||
/* Critical 320px fix */
|
||||
@media (max-width: 320px) {
|
||||
.contactSection {
|
||||
padding: 30px 8px !important;
|
||||
@ -425,22 +409,13 @@
|
||||
|
||||
.formBlock,
|
||||
.locationCard {
|
||||
padding: 2px;
|
||||
padding: 12px;
|
||||
border: 2px solid #b07c4b;
|
||||
box-sizing: border-box !important;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.4rem !important;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.formRow {
|
||||
gap: 0.6rem !important;
|
||||
}
|
||||
@ -454,26 +429,10 @@
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.input,
|
||||
.textarea {
|
||||
padding: 0.6rem !important;
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
|
||||
.locationCard {
|
||||
gap: 0.8rem !important;
|
||||
}
|
||||
|
||||
.locationTitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.locationSubtitle,
|
||||
.locationAddress,
|
||||
.locationPhone {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.iconWrapper {
|
||||
width: 35px !important;
|
||||
height: 35px !important;
|
||||
@ -490,17 +449,4 @@
|
||||
transform-origin: 0 0 !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 Navbar from "@/components/Navbar/Navbar";
|
||||
import Footer from "@/components/Footer/Footer";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import styles from "./contact.module.css";
|
||||
import { motion } from "framer-motion";
|
||||
@ -167,7 +168,13 @@ export default function ContactPage() {
|
||||
viewport={{ once: true }}
|
||||
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>
|
||||
|
||||
<p className={styles.subtitle}>
|
||||
Reserve your table for an unforgettable Turkish dining experience. We look forward to serving you our authentic cuisine.
|
||||
</p>
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
.heroTitle {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 4rem;
|
||||
font-size: var(--hero-title-size);
|
||||
color: #c49c5c;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
@ -28,7 +28,7 @@
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 1.1rem;
|
||||
font-size: var(--body-size);
|
||||
color: #c49c5c;
|
||||
font-family: var(--font-lato);
|
||||
}
|
||||
@ -51,7 +51,7 @@
|
||||
}
|
||||
|
||||
.smallHeading {
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--small-text-size);
|
||||
color: #c49c5c;
|
||||
font-family: var(--font-lato);
|
||||
font-weight: 600;
|
||||
@ -61,7 +61,7 @@
|
||||
|
||||
.mainHeading {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 2.5rem;
|
||||
font-size: var(--main-heading-size);
|
||||
color: #5d4037;
|
||||
line-height: 1.3;
|
||||
font-weight: 700;
|
||||
@ -69,7 +69,7 @@
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1rem;
|
||||
font-size: var(--body-size);
|
||||
color: #c49c5c;
|
||||
line-height: 1.8;
|
||||
font-family: var(--font-lato);
|
||||
@ -96,7 +96,7 @@
|
||||
border: 2px solid #b07c4b;
|
||||
color: #c49c5c;
|
||||
padding: 12px 30px;
|
||||
font-size: 1rem;
|
||||
font-size: var(--body-size);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-family: var(--font-lato);
|
||||
@ -154,7 +154,7 @@
|
||||
|
||||
.viewText {
|
||||
color: #c49c5c;
|
||||
font-size: 1.2rem;
|
||||
font-size: var(--body-size);
|
||||
border: 2px solid #b07c4b;
|
||||
padding: 0.5rem 1.5rem;
|
||||
font-family: var(--font-lato);
|
||||
@ -199,7 +199,7 @@
|
||||
background: none;
|
||||
border: none;
|
||||
color: #c49c5c;
|
||||
font-size: 2.5rem;
|
||||
font-size: calc(var(--hero-title-size) * 0.7);
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
@ -215,7 +215,7 @@
|
||||
background: rgba(197, 160, 89, 0.2);
|
||||
border: 2px solid #b07c4b;
|
||||
color: #c49c5c;
|
||||
font-size: 2rem;
|
||||
font-size: calc(var(--main-heading-size) * 0.9);
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
@ -236,12 +236,8 @@
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.heroTitle {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.mainHeading {
|
||||
font-size: 2rem;
|
||||
.hero {
|
||||
padding: 6rem 1rem 4rem;
|
||||
}
|
||||
|
||||
.prevBtn {
|
||||
|
||||
@ -109,8 +109,12 @@ export default function GalleryPage() {
|
||||
</motion.section>
|
||||
|
||||
<section className={styles.sectionHeading}>
|
||||
<p className={styles.smallHeading}>🍴 ANTALYA 🍴</p>
|
||||
<h2 className={styles.mainHeading}>A Visual Journey Through Authentic Turkish Cuisine</h2>
|
||||
<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.mainHeading}>A Visual Journey Through Authentic Turkish</h2>
|
||||
<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.
|
||||
</p>
|
||||
|
||||
@ -10,7 +10,6 @@
|
||||
|
||||
/* Legacy color support (mapped to new colors) */
|
||||
--color-gold: #d28839;
|
||||
/* Updated to button color */
|
||||
|
||||
/* Font Family Variables */
|
||||
--font-menu: 'Canva Sans', sans-serif;
|
||||
@ -21,6 +20,14 @@
|
||||
--font-playfair: 'Playfair Display', serif;
|
||||
--font-lato: 'Canva Sans', sans;
|
||||
--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);
|
||||
font-family: var(--font-paragraph);
|
||||
font-weight: 300;
|
||||
/* Ensure default font is applied */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@ -74,3 +80,167 @@ button {
|
||||
.border-standard {
|
||||
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 {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 4rem;
|
||||
font-size: var(--hero-title-size);
|
||||
color: #c49c5c;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
@ -28,7 +28,7 @@
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 1.1rem;
|
||||
font-size: var(--body-size);
|
||||
color: #c49c5c;
|
||||
font-family: var(--font-lato);
|
||||
}
|
||||
@ -51,7 +51,7 @@
|
||||
}
|
||||
|
||||
.smallHeading {
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--small-text-size);
|
||||
color: #c49c5c;
|
||||
font-family: var(--font-lato);
|
||||
font-weight: 600;
|
||||
@ -61,7 +61,7 @@
|
||||
|
||||
.mainHeading {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 2.5rem;
|
||||
font-size: var(--main-heading-size);
|
||||
color: #5d4037;
|
||||
line-height: 1.3;
|
||||
font-weight: 700;
|
||||
@ -69,7 +69,7 @@
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1rem;
|
||||
font-size: var(--body-size);
|
||||
color: #c49c5c;
|
||||
line-height: 1.8;
|
||||
font-family: var(--font-lato);
|
||||
@ -97,7 +97,7 @@
|
||||
border: 2px solid #b07c4b;
|
||||
color: #c49c5c;
|
||||
padding: 12px 30px;
|
||||
font-size: 1rem;
|
||||
font-size: var(--body-size);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-family: var(--font-lato);
|
||||
@ -157,11 +157,12 @@
|
||||
left: -10px;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
border: 2px dashed #ff6b6b;
|
||||
border: 4px dotted #c49c5c;
|
||||
border-radius: 50%;
|
||||
animation: spin 10s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
@ -203,23 +204,23 @@
|
||||
|
||||
.dishName {
|
||||
font-family: var(--font-playfair);
|
||||
font-size: 1.25rem;
|
||||
color: #333;
|
||||
font-size: var(--subheading-size);
|
||||
color: #5d4037;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.price {
|
||||
display: block;
|
||||
font-size: 1.1rem;
|
||||
color: #ffb300;
|
||||
font-size: var(--body-size);
|
||||
color: #c49c5c;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-lato);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.9rem;
|
||||
.cardContent .description {
|
||||
font-size: var(--small-text-size);
|
||||
color: #c49c5c;
|
||||
line-height: 1.6;
|
||||
font-family: var(--font-lato);
|
||||
@ -237,21 +238,12 @@
|
||||
padding: 6rem 1rem 4rem;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.mainHeading {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px 15px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.menuCard {
|
||||
|
||||
@ -82,8 +82,12 @@ export default function MenuPage() {
|
||||
</motion.section>
|
||||
|
||||
<section className={styles.sectionHeading}>
|
||||
<p className={styles.smallHeading}>🍴 ANTALYA 🍴</p>
|
||||
<h2 className={styles.mainHeading}>Delicious Turkish Dishes, Including Kebabs, Mezze, And More</h2>
|
||||
<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.mainHeading}>Delicious Turkish, Mezze, And More</h2>
|
||||
<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.
|
||||
</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.
|
||||
</p>
|
||||
|
||||
<Link href="/about" className={styles.button}>
|
||||
<Link href="/about-us" className={styles.button}>
|
||||
Learn More
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
@ -67,6 +67,15 @@
|
||||
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 {
|
||||
font-family: var(--font-cinzel), serif;
|
||||
font-size: 0.95rem;
|
||||
|
||||
@ -40,6 +40,11 @@ export default function Blogs() {
|
||||
|
||||
return (
|
||||
<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>
|
||||
|
||||
<div className={styles.sliderContainer}>
|
||||
|
||||
@ -11,6 +11,15 @@
|
||||
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 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@ -45,7 +54,7 @@
|
||||
|
||||
.title {
|
||||
font-family: var(--font-playfair);
|
||||
color: var(--color-gold);
|
||||
color: #c49c5c;
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
@ -68,7 +77,7 @@
|
||||
|
||||
.label {
|
||||
font-family: var(--font-playfair);
|
||||
color: var(--color-gold);
|
||||
color: #c49c5c;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
@ -98,7 +107,7 @@
|
||||
|
||||
.submitButton {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-gold);
|
||||
border: 1px solid #c49c5c;
|
||||
color: var(--color-text-light);
|
||||
padding: 0.8rem 2rem;
|
||||
font-family: var(--font-lato);
|
||||
@ -111,8 +120,8 @@
|
||||
}
|
||||
|
||||
.submitButton:hover {
|
||||
background-color: var(--color-gold);
|
||||
color: var(--color-dark);
|
||||
background-color: #c49c5c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.successMessage {
|
||||
@ -154,7 +163,7 @@
|
||||
|
||||
/* Character count */
|
||||
.charCount {
|
||||
color: var(--color-gold);
|
||||
color: #c49c5c;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
display: block;
|
||||
|
||||
@ -131,6 +131,11 @@ export default function BookTable() {
|
||||
|
||||
<div className={styles.formContainer}>
|
||||
<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>
|
||||
|
||||
{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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 5px;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
@ -154,6 +154,15 @@
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.iconImage {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-right: 10px;
|
||||
object-fit: contain;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
.contactRow a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -90,17 +90,29 @@ export default function Footer() {
|
||||
</p>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@ -111,6 +123,7 @@ export default function Footer() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className={styles.copyright}>
|
||||
|
||||
@ -17,6 +17,15 @@
|
||||
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 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
|
||||
@ -39,6 +39,11 @@ export default function Gallery() {
|
||||
|
||||
return (
|
||||
<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>
|
||||
<div className={styles.grid}>
|
||||
{images.map((src, index) => (
|
||||
|
||||
@ -177,6 +177,15 @@
|
||||
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 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
@ -54,6 +54,11 @@ export default function Menu() {
|
||||
|
||||
return (
|
||||
<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 */}
|
||||
<motion.h2
|
||||
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 = [
|
||||
{ name: 'Home', href: '/' },
|
||||
{ name: 'About', href: '/about' },
|
||||
{ name: 'About', href: '/about-us' },
|
||||
{ name: 'Gallery', href: '/gallery' },
|
||||
{ name: 'Menu', href: '/menu' },
|
||||
{ name: 'Blog', href: '/blog' },
|
||||
|
||||
@ -42,6 +42,16 @@
|
||||
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 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
@ -50,6 +50,11 @@ export default function PopularDishes() {
|
||||
|
||||
return (
|
||||
<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
|
||||
className={styles.title}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
|
||||
@ -16,6 +16,15 @@
|
||||
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 {
|
||||
font-family: var(--font-cinzel), serif;
|
||||
/* Assuming Cinzel is available or similar serif */
|
||||
|
||||
@ -83,6 +83,11 @@ export default function Testimonials() {
|
||||
|
||||
return (
|
||||
<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>
|
||||
|
||||
<div className={styles.sliderContainer}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user