implement catering packages component and add styling modules for various site sections

This commit is contained in:
Alaguraj0361 2026-04-03 15:43:20 +05:30
parent 5bb7b806e5
commit 32f7443bb8
14 changed files with 63 additions and 62 deletions

4
package-lock.json generated
View File

@ -1,11 +1,11 @@
{
"name": "antalya-web",
"name": "antalya-burlington",
"version": "0.1.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "antalya-web",
"name": "antalya-burlington",
"version": "0.1.0",
"dependencies": {
"axios": "^1.13.2",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 30 KiB

View File

@ -106,7 +106,7 @@
.text {
font-size: 1.1rem;
line-height: 1.8;
color: var(--color-alterparagraph) !important;
color: #441109 !important;
margin-bottom: 1.5rem;
opacity: 0.9;
font-family: var(--font-lato);
@ -123,8 +123,8 @@
.menuButton {
display: inline-block;
padding: 15px 40px;
border: 2px solid #b07c4b;
color: var(--color-alterparagraph) !important;
border: 2px solid #441109;
color: #441109 !important;
font-family: var(--font-lato);
font-size: 1.1rem;
text-transform: uppercase;
@ -136,8 +136,8 @@
}
.menuButton:hover {
background-color: #c49c5c;
color: #fff;
background-color: #441109;
color: #F5E6D3 !important;
}
.smallHeading {
@ -202,7 +202,7 @@
.featureDesc {
font-family: var(--font-lato);
font-size: 1rem;
color: var(--color-alterparagraph) !important;
color: #441109 !important;
line-height: 1.6;
}
@ -269,7 +269,7 @@
line-height: 1.8;
font-style: italic;
text-align: center;
color: #a67c52;
color: #441109;
}
.testimonialAuthor {
@ -560,7 +560,7 @@
.faqSubtitle {
font-family: var(--font-lato);
font-size: 1.1rem;
color: var(--color-alterparagraph) !important;
color: #441109 !important;
line-height: 1.6;
margin-bottom: 1rem;
}
@ -573,7 +573,7 @@
.faqItem {
background: #fff;
border: 2px solid #b07c4b;
border: 2px solid #441109;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
@ -595,25 +595,25 @@
font-family: var(--font-lato);
font-size: 1.1rem;
font-weight: 600;
color: var(--color-paragraph);
color: #441109;
text-align: left;
transition: all 0.3s ease;
}
.faqQuestion:hover {
background-color: #c49c5c;
background-color: #441109;
color: #fff;
}
.faqQuestionActive {
background-color: #c49c5c;
background-color: #441109;
color: #fff;
}
.faqIcon {
font-size: 1.5rem;
font-weight: bold;
color: var(--color-paragraph);
color: #441109;
transition: transform 0.3s ease, color 0.3s ease;
flex-shrink: 0;
margin-left: 1rem;
@ -637,7 +637,7 @@
.faqAnswer p {
font-family: var(--font-lato);
font-size: 1rem;
/* color: #5d4037; */
color: #441109;
line-height: 1.8;
margin: 0;
}

View File

@ -70,7 +70,7 @@
.description {
font-size: var(--body-size);
color: var(--color-alterparagraph) !important;
color: #441109 !important;
line-height: 1.8;
font-family: var(--font-lato);
max-width: 800px;
@ -93,8 +93,8 @@
.tab {
background: transparent;
border: 2px solid #b07c4b;
color: var(--color-paragraph);
border: 2px solid #441109;
color: #441109;
padding: 12px 30px;
font-size: var(--body-size);
cursor: pointer;
@ -108,7 +108,7 @@
.tab:hover,
.activeTab {
background-color: #c49c5c;
background-color: #441109;
color: #F5E6D3;
}

View File

@ -96,8 +96,8 @@
.tab {
background: transparent;
border: 2px solid #b07c4b;
color: var(--color-paragraph);
border: 2px solid #441109;
color: #441109;
padding: 8px 20px 8px 8px;
font-size: 1rem;
cursor: pointer;
@ -120,10 +120,10 @@
.tab:hover,
.activeTab {
background-color: #c49c5c;
background-color: #441109;
color: #f5e6d3;
transform: translateY(-2px);
border: 2px solid #b07c4b;
border: 2px solid #441109;
}
.menuGrid {
@ -257,7 +257,7 @@
.descriptionMenu {
font-size: var(--body-size);
color: var(--color-alterparagraph) !important;
color: #441109 !important;
line-height: 1.5;
font-family: var(--font-lato);
margin: 0;
@ -266,7 +266,7 @@
.description {
font-size: 0.95rem;
color: var(--color-alterparagraph) !important;
color: #441109 !important;
line-height: 1.5;
font-family: var(--font-lato);
margin: 0;

View File

@ -70,7 +70,7 @@
.description {
font-size: var(--body-size);
color: var(--color-alterparagraph) !important;
color: #441109 !important;
line-height: 1.8;
font-family: var(--font-lato);
max-width: 800px;
@ -123,35 +123,36 @@
}
.blogTitle a {
color: #3e2723;
color: #200c08;
transition: color 0.3s;
}
.blogTitle a:hover {
/* .blogTitle a:hover {
color: var(--color-paragraph);
}
} */
.date {
font-size: var(--small-text-size);
margin-bottom: 1rem;
font-family: var(--font-lato);
font-weight: 600;
color: #2b0b06;
}
.excerpt {
font-size: var(--body-size);
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 1.5rem;
flex-grow: 1;
font-family: var(--font-lato);
color: var(--color-alterparagraph) !important;
color: #441109 !important;
}
.button {
display: inline-block;
padding: 10px 25px;
border: 2px solid #b07c4b;
color: var(--color-alterparagraph) !important;
border: 2px solid #441109;
color: #441109 !important;
text-align: center;
transition: all 0.3s ease;
align-self: flex-start;
@ -162,7 +163,7 @@
}
.button:hover {
background-color: #c49c5c;
background-color: #441109;
color: #fff !important;
}

View File

@ -362,15 +362,15 @@ export default function CateringContent() {
</div>
</motion.span>
<motion.h2 className={styles.storyTitle} variants={fadeInUp}>
Bring Authentic Turkish Flavour to Your Event - Contact Us Today.
Bring Authentic Turkish Flavour to Your Event - Email Us Today.
</motion.h2>
<motion.a
href="tel:+15195882037"
href="mailto:hello@antalyarestaurant.ca"
className={styles.storydesc}
variants={fadeInUp}
style={{ display: "inline-block" }}
>
+1 519 588 2037
hello@antalyarestaurant.ca
</motion.a>
{/* <motion.button className={styles.storyButton} variants={fadeInUp}>

View File

@ -7,9 +7,9 @@ const packages = [
{
id: 'silver',
name: 'SILVER PACKAGE',
price: '$19',
perPerson: 'PER PERSON',
minPeople: '(MIN 20PPL)',
// price: '$19',
// perPerson: 'PER PERSON',
minPeople: 'MIN 20PPL',
image: '/images/catering/packages/silver.webp', // Placeholder
items: [
'Choice of two kebabs (Adana, Kofta, Chicken Shish, Meat Doner, Chicken Doner)',
@ -23,9 +23,9 @@ const packages = [
{
id: 'gold',
name: 'GOLD PACKAGE',
price: '$23',
perPerson: 'PER PERSON',
minPeople: '(MIN 25PPL)',
// price: '$23',
// perPerson: 'PER PERSON',
minPeople: 'MIN 25PPL',
image: '/images/catering/packages/gold.webp', // Placeholder
items: [
'Choice of two kebabs (Adana, Kofta, Chicken Shish, Meat Doner, Chicken Doner)',
@ -41,9 +41,9 @@ const packages = [
{
id: 'platinum',
name: 'PLATINUM PACKAGE',
price: '$25',
perPerson: 'PER PERSON',
minPeople: '(MIN 30PPL)',
// price: '$25',
// perPerson: 'PER PERSON',
minPeople: 'MIN 30PPL',
image: '/images/catering/packages/platinum.webp', // Placeholder
items: [
'Choice of 2 kebabs (Adana, Kofta, Chicken Shish, Meat Doner, Chicken Doner)',
@ -87,8 +87,8 @@ const CateringPackages = () => {
</div>
<div className={styles.priceTag}>
<span className={styles.priceAmount}>{pkg.price}</span>
<span className={styles.priceDetail}>{pkg.perPerson} {pkg.minPeople}</span>
{/* <span className={styles.priceAmount}>{pkg?.price ? pkg.price : ''}</span> */}
<span className={styles.priceDetail}>{pkg.minPeople}</span>
</div>
<ul className={styles.itemsList}>

View File

@ -115,7 +115,7 @@
.description1 {
font-size: var(--body-size);
color: var(--color-alterparagraph) !important;
color: #441109 !important;
line-height: 1.8;
font-family: var(--font-lato);
/* max-width: 800px; */
@ -684,7 +684,7 @@
.servingDescription {
font-size: var(--body-size);
color: var(--color-alterparagraph) !important;
color: #441109 !important;
line-height: 1.8;
font-family: var(--font-lato);
/* max-width: 800px; */

View File

@ -79,7 +79,7 @@
.excerpt {
font-family: var(--font-playfair);
font-size: 0.95rem;
color: var(--color-alterparagraph) !important;
color: #441109 !important;
margin-bottom: 25px;
line-height: 1.6;
max-width: 90%;

View File

@ -104,18 +104,18 @@ export default function Footer() {
</div>
{/* Kitchener Location */}
<div className={styles.locationItem}>
{/* <div className={styles.locationItem}>
<h4 className={styles.cityHeading}>Kitchener</h4>
<div className={styles.contactRow}>
<img src="/images/maps-and-flags.png" alt="Location Icon" className={styles.iconImage} />
<span>1187 Fischer-Hallman Rd #435, Kitchener, ON N2E 4H9</span>
</div>
{/* <h4 className={styles.cityHeading}>Call us</h4> */}
<h4 className={styles.cityHeading}>Call us</h4>
<div className={styles.contactRow}>
<img src="/images/phone-call.png" alt="Phone Icon" className={styles.iconImage} />
<a href="tel:5195816363">519-581-6363</a>
</div>
</div>
</div> */}
<h4 className={styles.cityHeading}>Email us</h4>

View File

@ -206,8 +206,8 @@
}
.description {
font-size: var(--body-size);
color: var(--color-paragraph);
font-size: 16px;
color: #430f0c;
line-height: 1.5;
font-family: var(--font-lato);
margin: 0;

View File

@ -64,7 +64,7 @@
.dishName {
font-family: var(--font-playfair);
font-size: 1.8rem;
color: var(--color-paragraph);
color: #410d0a;
/* Dark brown text */
margin-bottom: 15px;
font-weight: 600;
@ -74,7 +74,7 @@
font-family: var(--font-cinzel), serif;
/* Using serif as per image look */
font-size: 1rem;
color: var(--color-alterparagraph) !important;
color: #410d0a !important;
margin-bottom: 30px;
line-height: 1.6;
max-width: 90%;
@ -84,8 +84,8 @@
.button {
display: inline-block;
padding: 12px 30px;
border: 2px solid #b07c4b;
color: var(--color-paragraph);
border: 2px solid #410d0a;
color: #410d0a;
font-family: var(--font-inter), sans-serif;
text-transform: uppercase;
font-size: 0.9rem;
@ -96,7 +96,7 @@
}
.button:hover {
background-color: #c49c5c;
background-color: #410d0a;
color: #fff;
}