implement modular styling for pages and components and add new assets and UI components

src/app/about-antalya-restaurant/about.module.css

@@ -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;
+  border: 2px solid #441109;
- color: var(--color-alterparagraph) !important;
+  color: #441109 !important;
   font-family: var(--font-lato);
   font-size: 1.1rem;
   text-transform: uppercase;
@@ -136,8 +136,8 @@
 }
 
 .menuButton:hover {
-  background-color: #c49c5c;
+  background-color: #441109;
-  color: #fff;
+  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;
 }

src/app/antalya-restaurant-gallery/gallery.module.css

@@ -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;
+    border: 2px solid #441109;
-    color: var(--color-paragraph);
+    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;
 }
 

src/app/antalya-restaurant-menu/menu.module.css

@@ -96,8 +96,8 @@
 
 .tab {
     background: transparent;
-    border: 2px solid #b07c4b;
+    border: 2px solid #441109;
-    color: var(--color-paragraph);
+    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;

src/app/antalya-turkish-food-blog/blog.module.css

@@ -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;
+    border: 2px solid #441109;
-    color: var(--color-alterparagraph) !important;
+    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;
 }
 

src/app/catering-services-ontario/CateringContent.tsx

@@ -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}>

src/app/catering-services-ontario/CateringPackages.tsx

@@ -7,9 +7,9 @@ const packages = [
     {
         id: 'silver',
         name: 'SILVER PACKAGE',
-        price: '$19',
+        // price: '$19',
-        perPerson: 'PER PERSON',
+        // perPerson: 'PER PERSON',
-        minPeople: '(MIN 20PPL)',
+        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',
+        // price: '$23',
-        perPerson: 'PER PERSON',
+        // perPerson: 'PER PERSON',
-        minPeople: '(MIN 25PPL)',
+        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',
+        // price: '$25',
-        perPerson: 'PER PERSON',
+        // perPerson: 'PER PERSON',
-        minPeople: '(MIN 30PPL)',
+        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.priceAmount}>{pkg?.price ? pkg.price : ''}</span> */}
-                                    <span className={styles.priceDetail}>{pkg.perPerson} {pkg.minPeople}</span>
+                                    <span className={styles.priceDetail}>{pkg.minPeople}</span>
                                 </div>
 
                                 <ul className={styles.itemsList}>

src/app/catering-services-ontario/catering.module.css

@@ -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; */

src/components/Blogs/Blogs.module.css

@@ -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%;

src/components/Footer/Footer.tsx

@@ -90,18 +90,18 @@ export default function Footer() {
                                 <h3 className={styles.heading}>Location</h3>
 
                                 {/* Burlington Location */}
-                                <div className={styles.locationItem}>
+                                {/* <div className={styles.locationItem}>
                                     <h4 className={styles.cityHeading}>Burlington</h4>
                                     <div className={styles.contactRow}>
                                         <img src="/images/maps-and-flags.png" alt="Location Icon" className={styles.iconImage} />
                                         <span>1860 Appleby Line, Burlington, ON L7L 7H7</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:2893139838">289-313-9838</a>
                                     </div>
-                                </div>
+                                </div> */}
 
                                 {/* Kitchener Location */}
                                 <div className={styles.locationItem}>

src/components/Menu/Menu.module.css

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

src/components/PopularDishes/PopularDishes.module.css

@@ -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;
+    border: 2px solid #410d0a;
-    color: var(--color-paragraph);
+    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;
 }