implement CateringPackages component and associated styles for catering services page
This commit is contained in:
Alaguraj0361
parent
70ec7805cc
commit
c05702fc27
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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 ── */}
|
||||
<section className={styles.packagesSection}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.header}>
|
||||
<h2 className={styles.mainTitle}>Catering Packages</h2>
|
||||
<p className={styles.subTitle}>Choose the perfect menu for your event</p>
|
||||
</div>
|
||||
|
||||
{packages.map((pkg, index) => (
|
||||
<div key={pkg.id} className={`${styles.packageRow} ${index % 2 !== 0 ? styles.reverse : ''}`} style={index === packages.length - 1 ? { marginBottom: 0 } : {}}>
|
||||
{/* Content Side */}
|
||||
<div className={styles.contentSide}>
|
||||
<div className={styles.ribbonWrapper}>
|
||||
<div className={styles.ribbon}>
|
||||
<span className={styles.ribbonText}>{pkg.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Header */}
|
||||
<div className={styles.sectionHeader}>
|
||||
<p className={styles.eyebrow}>Tailored Experiences</p>
|
||||
<h2 className={styles.mainTitle}>Catering Packages</h2>
|
||||
</div>
|
||||
|
||||
<div className={styles.priceTag}>
|
||||
{/* <span className={styles.priceAmount}>{pkg?.price ? pkg.price : ''}</span> */}
|
||||
<span className={styles.priceDetail}>{pkg.minPeople}</span>
|
||||
</div>
|
||||
{/* Package Panels */}
|
||||
{packages.map((pkg, index) => {
|
||||
const isReversed = index % 2 !== 0;
|
||||
return (
|
||||
<div
|
||||
key={pkg.id}
|
||||
className={`${styles.packagePanel} ${isReversed ? styles.reverse : ''} ${styles[pkg.tierClass]}`}
|
||||
>
|
||||
{/* Accent strip between image & content */}
|
||||
<div className={styles.panelAccentStrip} />
|
||||
|
||||
<ul className={styles.itemsList}>
|
||||
{pkg.items.map((item, i) => (
|
||||
<li key={i} className={styles.listItem}>
|
||||
<span className={styles.checkIcon}>✓</span>
|
||||
<span className={styles.itemText}>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{/* ── Image Side ── */}
|
||||
<div className={styles.panelImageSide}>
|
||||
<Image
|
||||
src={pkg.image}
|
||||
alt={`${pkg.tier} catering package`}
|
||||
fill
|
||||
className={styles.panelImage}
|
||||
priority={index === 0}
|
||||
/>
|
||||
{/* Gradient bridge */}
|
||||
<div className={styles.imageFade} />
|
||||
</div>
|
||||
|
||||
{/* Image Side */}
|
||||
<div className={styles.imageSide}>
|
||||
<div className={styles.archImageWrapper}>
|
||||
<Image
|
||||
src={pkg.image}
|
||||
alt={pkg.name}
|
||||
fill
|
||||
className={styles.archImage}
|
||||
/>
|
||||
{/* ── Content Side ── */}
|
||||
<div className={styles.panelContentSide}>
|
||||
{/* Watermark letter */}
|
||||
<span className={styles.watermarkLetter} aria-hidden="true">
|
||||
{pkg.watermark}
|
||||
</span>
|
||||
|
||||
<div className={styles.panelInner}>
|
||||
{/* Tier badge */}
|
||||
<div className={styles.tierBadge}>
|
||||
<span className={styles.tierName}>{pkg.tier}</span>
|
||||
</div>
|
||||
|
||||
{/* Package name */}
|
||||
<h3 className={styles.packageName}>{pkg.tier} Package</h3>
|
||||
|
||||
{/* Min people */}
|
||||
<p className={styles.packageMinPeople}>{pkg.minPeople}</p>
|
||||
|
||||
{/* Ornamental divider */}
|
||||
<div className={styles.panelDivider}>
|
||||
<span className={styles.panelDividerDot} />
|
||||
</div>
|
||||
|
||||
{/* Items list */}
|
||||
<ul className={styles.itemsList}>
|
||||
{pkg.items.map((item, i) => (
|
||||
<li key={i} className={styles.listItem}>
|
||||
<span className={styles.checkMark}>◆</span>
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
|
||||
{/* Add Ons Section */}
|
||||
{/* ── Add-Ons Section ── */}
|
||||
<section className={styles.addOnsSection}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.addOnsHeader}>
|
||||
<span className={styles.addOnsSubtitle}>EXTRAS</span>
|
||||
<h3 className={styles.addOnsTitle}>Delicious Add-Ons</h3>
|
||||
<p className={styles.addOnsDescription}>
|
||||
Enhance your catering package with our signature sides and specialty dishes.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.addOnsHeader}>
|
||||
<span className={styles.addOnsEyebrow}>EXTRAS</span>
|
||||
<h3 className={styles.addOnsTitle}>Delicious Add-Ons</h3>
|
||||
<p className={styles.addOnsDescription}>
|
||||
Enhance your catering package with our signature sides and specialty dishes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.addOnsGrid}>
|
||||
{addOns.map((addon, i) => (
|
||||
<div key={i} className={styles.addOnCard}>
|
||||
<div className={styles.addOnImageWrapper}>
|
||||
<Image
|
||||
src={addon.image}
|
||||
alt={addon.name}
|
||||
fill
|
||||
className={styles.addOnImage}
|
||||
/>
|
||||
</div>
|
||||
<h4 className={styles.addOnName}>{addon.name}</h4>
|
||||
<p className={styles.addOnPrice}>{addon.price}</p>
|
||||
<div className={styles.addOnsGrid}>
|
||||
{addOns.map((addon, i) => (
|
||||
<div key={i} className={styles.addOnCard}>
|
||||
<div className={styles.addOnImageWrapper}>
|
||||
<Image
|
||||
src={addon.image}
|
||||
alt={addon.name}
|
||||
fill
|
||||
className={styles.addOnImage}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<h4 className={styles.addOnName}>{addon.name}</h4>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
|
||||
@ -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); */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user