diff --git a/src/app/catering-services-ontario/CateringPackages.module.css b/src/app/catering-services-ontario/CateringPackages.module.css index 14834d1..d464f02 100644 --- a/src/app/catering-services-ontario/CateringPackages.module.css +++ b/src/app/catering-services-ontario/CateringPackages.module.css @@ -1,182 +1,330 @@ +/* ============================================================ + CATERING PACKAGES — LUXURY SPLIT PANEL + ============================================================ */ + .packagesSection { - padding: 80px 20px; - background-image: url("/images/about-us/guest-bg.webp"); - background-size: cover; - background-position: center; + background-color: #080604; overflow: hidden; - color: #fff; + padding: 100px 0 0; } -.container { - max-width: 1200px; - margin: 0 auto; -} - -.header { +.sectionHeader { text-align: center; - margin-bottom: 60px; + padding: 0 30px 80px; + position: relative; +} + +.eyebrow { + display: inline-flex; + align-items: center; + gap: 14px; + font-size: 11px; + letter-spacing: 5px; + text-transform: uppercase; + color: #c49c5c; + font-weight: 700; + margin-bottom: 18px; +} + +.eyebrow::before, +.eyebrow::after { + content: ''; + display: block; + width: 40px; + height: 1px; + background: #c49c5c; + opacity: 0.6; } .mainTitle { font-family: var(--font-playfair); - font-size: 48px; - color: #fff; - margin-bottom: 15px; -} - -.subTitle { - font-family: var(--font-lato); - font-size: 18px; - color: #c49c5c; - text-transform: uppercase; + font-size: 58px; + font-weight: 400; + color: #f5e6d3; letter-spacing: 2px; + margin-bottom: 0; + line-height: 1.1; } -/* Package Row */ -.packageRow { +/* ============================================================ + SPLIT PANEL — Each Package + ============================================================ */ +.packagePanel { display: flex; - align-items: center; - gap: 60px; - margin-bottom: 80px; - /* Reduced from 80px */ + width: 100%; + min-height: 580px; + position: relative; } -.packageRow.reverse { +.packagePanel.reverse { flex-direction: row-reverse; } -/* Content Side */ -.contentSide { - flex: 1; - padding: 20px; -} - -.ribbonWrapper { - margin-bottom: 25px; - display: flex; - justify-content: flex-start; -} - - - -.ribbon { - background-color: #c49c5c; - /* Gold/Orange theme */ - color: #fff; - padding: 10px 30px; +/* ---- IMAGE SIDE ---- */ +.panelImageSide { + flex: 0 0 55%; position: relative; - display: inline-block; - /* Clip path for ribbon flag effect if desired */ - clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%); - padding-right: 40px; - /* Space for the notch */ + overflow: hidden; } -.ribbonText { - font-family: var(--font-playfair); - font-size: 20px; - font-weight: 700; - letter-spacing: 1px; - text-transform: uppercase; +.panelImage { + object-fit: cover; + transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } -.priceTag { - margin-bottom: 30px; +.packagePanel:hover .panelImage { + transform: scale(1.05); +} + +/* Gradient bridge from image → content */ +.imageFade { + position: absolute; + inset: 0; + z-index: 2; +} + +/* For normal (image left) → fade right */ +.packagePanel:not(.reverse) .imageFade { + background: linear-gradient( + to right, + transparent 50%, + rgba(8, 6, 4, 0.8) 80%, + #080604 100% + ); +} + +/* For reversed (image right) → fade left */ +.packagePanel.reverse .imageFade { + background: linear-gradient( + to left, + transparent 50%, + rgba(8, 6, 4, 0.8) 80%, + #080604 100% + ); +} + +/* ---- CONTENT SIDE ---- */ +.panelContentSide { + flex: 0 0 45%; + background-color: #080604; display: flex; - align-items: baseline; - gap: 10px; - border-bottom: 2px solid #f5e6d3; - padding-bottom: 15px; + align-items: center; + position: relative; + overflow: hidden; + padding: 60px 70px; } -.priceAmount { - font-size: 32px; - font-weight: bold; - color: #fff; +/* Ambient glow from the image side */ +.packagePanel:not(.reverse) .panelContentSide::before { + content: ''; + position: absolute; + left: -80px; + top: 50%; + transform: translateY(-50%); + width: 200px; + height: 200px; + border-radius: 50%; + background: radial-gradient(circle, rgba(196, 156, 92, 0.18) 0%, transparent 70%); + pointer-events: none; +} + +.packagePanel.reverse .panelContentSide::before { + content: ''; + position: absolute; + right: -80px; + top: 50%; + transform: translateY(-50%); + width: 200px; + height: 200px; + border-radius: 50%; + background: radial-gradient(circle, rgba(196, 156, 92, 0.18) 0%, transparent 70%); + pointer-events: none; +} + +/* Large watermark letter */ +.watermarkLetter { + position: absolute; font-family: var(--font-playfair); + font-size: 280px; + font-weight: 700; + line-height: 1; + letter-spacing: -10px; + pointer-events: none; + z-index: 0; + opacity: 0.03; + color: #c49c5c; + top: 50%; + transform: translateY(-50%); + right: -30px; + user-select: none; } -.priceDetail { - font-size: 14px; +.packagePanel.reverse .watermarkLetter { + left: -30px; + right: auto; +} + +/* Content wrapper */ +.panelInner { + position: relative; + z-index: 2; + width: 100%; +} + +/* Metallic tier badge */ +.tierBadge { + display: inline-flex; + align-items: center; + gap: 10px; + margin-bottom: 22px; +} + +.tierName { + font-size: 11px; + letter-spacing: 5px; + text-transform: uppercase; + font-weight: 800; + padding: 6px 18px; + position: relative; +} + +/* Tier-specific metallic badge colours */ +.tierSilver .tierName { + background: linear-gradient(135deg, #8a8a8a 0%, #d8d8d8 40%, #a0a0a0 60%, #e0e0e0 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + border: 1px solid rgba(200, 200, 200, 0.35); +} + +.tierGold .tierName { + background: linear-gradient(135deg, #9a6e28 0%, #e8c97a 40%, #b07c38 60%, #f0d790 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + border: 1px solid rgba(196, 156, 92, 0.4); +} + +.tierPlatinum .tierName { + background: linear-gradient(135deg, #aaaaaa 0%, #f0f0f0 40%, #c0c0c0 60%, #ffffff 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + border: 1px solid rgba(220, 220, 220, 0.4); +} + +/* Package name */ +.packageName { + font-family: var(--font-playfair); + font-size: 52px; + font-weight: 400; + color: #f5e6d3; + line-height: 1; + margin-bottom: 8px; + letter-spacing: 1px; +} + +/* Min. People pill */ +.packageMinPeople { + display: inline-block; + font-size: 11px; + letter-spacing: 3px; + text-transform: uppercase; color: #c49c5c; font-weight: 600; - text-transform: uppercase; - font-family: var(--font-lato); + margin-bottom: 30px; } +/* Ornamental divider */ +.panelDivider { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 28px; +} + +.panelDivider::before, +.panelDivider::after { + content: ''; + flex: 1; + height: 1px; + background: rgba(196, 156, 92, 0.3); +} + +.panelDividerDot { + width: 6px; + height: 6px; + background: #c49c5c; + transform: rotate(45deg); + flex-shrink: 0; +} + +/* Items list */ .itemsList { list-style: none; padding: 0; margin: 0; + display: flex; + flex-direction: column; + gap: 10px; } .listItem { display: flex; align-items: flex-start; - gap: 15px; - margin-bottom: 15px; + gap: 12px; + font-size: 14px; + color: #b8a99a; + line-height: 1.5; + transition: color 0.2s; } -.checkIcon { +.listItem:hover { + color: #f0e4d4; +} + +.checkMark { color: #c49c5c; - font-weight: bold; + font-size: 10px; + flex-shrink: 0; + margin-top: 3px; + opacity: 0.8; } -.itemText { - font-family: var(--font-lato); - font-size: 16px; - color: #f0f0f0; - line-height: 1.6; +/* Accent border strip — between panels */ +.panelAccentStrip { + position: absolute; + top: 0; + bottom: 0; + width: 2px; + background: linear-gradient(180deg, transparent, rgba(196, 156, 92, 0.5) 40%, rgba(196, 156, 92, 0.5) 60%, transparent); + z-index: 5; } -/* Image Side */ -.imageSide { - flex: 1; - position: relative; - display: flex; - justify-content: center; +.packagePanel:not(.reverse) .panelAccentStrip { + right: 45%; } -.archImageWrapper { - position: relative; - width: 100%; - height: 500px; - border-radius: 200px 200px 20px 20px; - /* Arch shape */ - overflow: hidden; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); +.packagePanel.reverse .panelAccentStrip { + left: 45%; } - - -.archImage { - object-fit: cover; - transition: transform 0.6s ease; -} - -.archImageWrapper:hover .archImage { - transform: scale(1.05); -} - -/* Add Ons Section */ +/* ============================================================ + ADD-ONS SECTION + ============================================================ */ .addOnsSection { background-color: #000; - /* background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url('/images/catering/bring-authentic.webp'); */ - background-size: cover; - background-position: center; - background-attachment: fixed; padding: 80px 20px; width: 100%; text-align: center; color: #fff; - margin-top: 0; } .addOnsHeader { margin-bottom: 50px; } -.addOnsSubtitle { +.addOnsEyebrow { display: block; font-size: 14px; color: #c49c5c; @@ -204,18 +352,18 @@ line-height: 1.6; } +/* Add-On Grid */ .addOnsGrid { display: grid; grid-template-columns: repeat(4, 1fr); - /* 4 items */ gap: 30px; + max-width: 1200px; + margin: 0 auto; } .addOnCard { background: #111; padding: 30px 20px; - /* Reduced padding */ - /* border-radius: 5px; */ border: 1px solid #222; display: flex; flex-direction: column; @@ -236,35 +384,26 @@ position: relative; width: 80px; height: 80px; - margin-bottom: 20px; border-radius: 50%; overflow: hidden; border: 3px solid #c49c5c; + flex-shrink: 0; } .addOnImage { object-fit: cover; } -/* -.addOnIcon { - width: 50px; - height: 50px; - color: #c49c5c; - margin-bottom: 10px; -} -*/ - .addOnName { font-family: var(--font-playfair); font-size: 20px; font-weight: 400; color: #fff; margin: 0; + text-align: center; } .addOnPrice { - font-family: var(--font-lato); font-size: 16px; color: #a0a0a0; line-height: 1.6; @@ -272,40 +411,69 @@ } /* Responsive */ -@media (max-width: 1200px) { +@media (max-width: 1100px) { + .packageName { + font-size: 40px; + } + + .panelContentSide { + padding: 50px 45px; + } +} + +@media (max-width: 900px) { + .packagePanel, + .packagePanel.reverse { + flex-direction: column; + } + + .panelImageSide { + flex: 0 0 300px; + height: 300px; + } + + .packagePanel:not(.reverse) .imageFade, + .packagePanel.reverse .imageFade { + background: linear-gradient(to bottom, transparent 40%, #080604 100%); + } + + .panelContentSide { + flex: 1; + padding: 40px 30px; + } + + .panelAccentStrip { + display: none; + } + + .watermarkLetter { + font-size: 180px; + } + .addOnsGrid { grid-template-columns: repeat(2, 1fr); } } -@media (max-width: 900px) { - .packageRow { - flex-direction: column; - gap: 40px; - } - - .packageRow.reverse { - flex-direction: column; - } - - .imageSide { - width: 100%; - } - - .archImageWrapper { - width: 100%; - max-width: 500px; - height: 350px; - border-radius: 150px 150px 20px 20px; - } -} - @media (max-width: 600px) { + .mainTitle { + font-size: 38px; + } + + .packageName { + font-size: 32px; + } + + .panelImageSide { + flex: 0 0 240px; + height: 240px; + } + .addOnsGrid { grid-template-columns: 1fr; } - .addOnsTitle { - font-size: 36px; + .addOnCard { + height: 240px; } } \ No newline at end of file diff --git a/src/app/catering-services-ontario/CateringPackages.tsx b/src/app/catering-services-ontario/CateringPackages.tsx index bdbdcb3..132e25e 100644 --- a/src/app/catering-services-ontario/CateringPackages.tsx +++ b/src/app/catering-services-ontario/CateringPackages.tsx @@ -1,32 +1,31 @@ import React from 'react'; import Image from 'next/image'; import styles from './CateringPackages.module.css'; -import { motion } from 'framer-motion'; const packages = [ { id: 'silver', - name: 'SILVER PACKAGE', - // price: '$19', - // perPerson: 'PER PERSON', - minPeople: 'MIN 20PPL', - image: '/images/catering/packages/silver.webp', // Placeholder + tier: 'Silver', + tierClass: 'tierSilver', + watermark: 'S', + minPeople: 'Minimum 20 People', + image: '/images/catering/packages/silver.webp', items: [ 'Choice of two kebabs (Adana, Kofta, Chicken Shish, Meat Doner, Chicken Doner)', 'Rice or Bulgur', 'Choice of one salad (Garden, Greek, Caesar Salad)', 'Choice of 1 appetizer (Babaghanoush, Hummus, Haydari)', 'Freshly baked bread', - 'Grilled tomato and peppers' + 'Grilled tomato and peppers', ] }, { id: 'gold', - name: 'GOLD PACKAGE', - // price: '$23', - // perPerson: 'PER PERSON', - minPeople: 'MIN 25PPL', - image: '/images/catering/packages/gold.webp', // Placeholder + tier: 'Gold', + tierClass: 'tierGold', + watermark: 'G', + minPeople: 'Minimum 25 People', + image: '/images/catering/packages/gold.webp', items: [ 'Choice of two kebabs (Adana, Kofta, Chicken Shish, Meat Doner, Chicken Doner)', 'Rice or Bulgur', @@ -35,16 +34,16 @@ const packages = [ 'Garlic potatoes or Fried and spiced eggplants', 'Freshly baked bread', 'Grilled tomato and peppers', - 'Dessert (Sutlac-Rice Pudding)' + 'Dessert (Sutlac-Rice Pudding)', ] }, { id: 'platinum', - name: 'PLATINUM PACKAGE', - // price: '$25', - // perPerson: 'PER PERSON', - minPeople: 'MIN 30PPL', - image: '/images/catering/packages/platinum.webp', // Placeholder + tier: 'Platinum', + tierClass: 'tierPlatinum', + watermark: 'P', + minPeople: 'Minimum 30 People', + image: '/images/catering/packages/platinum.webp', items: [ 'Choice of 2 kebabs (Adana, Kofta, Chicken Shish, Meat Doner, Chicken Doner)', 'Rice or Bulgur', @@ -54,7 +53,7 @@ const packages = [ 'Grilled tomato and peppers', 'Freshly baked bread', 'Dessert (Sutlac-Rice Pudding)', - 'Qabuli Plau (Basmati rice with carrots and raisins topped with veal chunks)' + 'Qabuli Plau (Basmati rice with carrots and raisins topped with veal chunks)', ] } ]; @@ -63,87 +62,109 @@ const addOns = [ { name: 'Tray of Falafel', price: '$60', image: '/images/catering/packages/tray.webp' }, { name: 'Shola Gorbandi', price: '$80', image: '/images/catering/packages/shola.webp' }, { name: 'Kavurma (Saluted Veal)', price: '$80', image: '/images/catering/packages/kavurma.webp' }, - { name: 'Mantu (Afghan style dumplings)', price: '$80', image: '/images/catering/packages/mantu.webp' } + { name: 'Mantu (Afghan style dumplings)', price: '$80', image: '/images/catering/packages/mantu.webp' }, ]; const CateringPackages = () => { return ( <> + {/* ── Packages Section ── */}
-
-
-

Catering Packages

-

Choose the perfect menu for your event

-
- {packages.map((pkg, index) => ( -
- {/* Content Side */} -
-
-
- {pkg.name} -
-
+ {/* Header */} +
+

Tailored Experiences

+

Catering Packages

+
-
- {/* {pkg?.price ? pkg.price : ''} */} - {pkg.minPeople} -
+ {/* Package Panels */} + {packages.map((pkg, index) => { + const isReversed = index % 2 !== 0; + return ( +
+ {/* Accent strip between image & content */} +
-
    - {pkg.items.map((item, i) => ( -
  • - ✓ - {item} -
    • - ))} -
+ {/* ── Image Side ── */} +
+ {`${pkg.tier} + {/* Gradient bridge */} +
- {/* Image Side */} -
-
- {pkg.name} + {/* ── Content Side ── */} +
+ {/* Watermark letter */} + + +
+ {/* Tier badge */} +
+ {pkg.tier} +
+ + {/* Package name */} +

{pkg.tier} Package

+ + {/* Min people */} +

{pkg.minPeople}

+ + {/* Ornamental divider */} +
+ +
+ + {/* Items list */} +
    + {pkg.items.map((item, i) => ( +
  • + ◆ + {item} +
    • + ))} +
- ))} -
+ ); + })}
- {/* Add Ons Section */} + {/* ── Add-Ons Section ── */}
-
-
- EXTRAS -

Delicious Add-Ons

-

- Enhance your catering package with our signature sides and specialty dishes. -

-
+
+ EXTRAS +

Delicious Add-Ons

+

+ Enhance your catering package with our signature sides and specialty dishes. +

+
-
- {addOns.map((addon, i) => ( -
-
- {addon.name} -
-

{addon.name}

-

{addon.price}

+
+ {addOns.map((addon, i) => ( +
+
+ {addon.name}
- ))} -
+

{addon.name}

+
+ ))}
diff --git a/src/app/catering-services-ontario/catering.module.css b/src/app/catering-services-ontario/catering.module.css index eb694ec..9503bff 100644 --- a/src/app/catering-services-ontario/catering.module.css +++ b/src/app/catering-services-ontario/catering.module.css @@ -476,7 +476,7 @@ .smallHeading { font-size: var(--small-text-size); - color: var(--color-paragraph); + color: #441123; font-family: var(--font-lato); font-weight: 600; letter-spacing: 2px; @@ -1113,25 +1113,25 @@ gap: 15px; margin-bottom: 20px; font-size: var(--body-size); - color: var(--color-alterparagraph) !important; + color: #441109 !important; font-family: var(--font-lato); line-height: 1.6; } .aboutSpecialsIcon { - color: var(--color-button); + color: #441123; font-weight: bold; font-size: 20px; flex-shrink: 0; } .lastButton { - color: var(--color-alterparagraph) !important; + color: #441109 !important; font-family: var(--font-lato); text-transform: uppercase; letter-spacing: 1px; background: none; - border: 2px solid #b07c4b; + border: 2px solid #441109; margin-top: 1rem; padding: 15px 40px; font-size: 1.1rem; @@ -1141,7 +1141,7 @@ } .lastButton:hover { - background-color: #c49c5c; + background-color: #441123; color: #fff !important; transform: translateY(-2px); /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); */