mirror of
https://git.kh3group.com/georgebiri/khy_website.git
synced 2026-07-02 07:03:33 +00:00
feat: add product comparison page
This commit is contained in:
parent
a3689ca143
commit
ec844c6c88
12 changed files with 2108 additions and 86 deletions
BIN
assets/images/prod-comparison.jpg
Normal file
BIN
assets/images/prod-comparison.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
|
|
@ -520,6 +520,6 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="scripts/main.js"></script>
|
||||
<script src="scripts/main.js?v=1.1"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -330,7 +330,7 @@
|
|||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="relative bg-linen py-16">
|
||||
<section class="relative bg-floral-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-5">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- High Quality -->
|
||||
|
|
@ -563,7 +563,7 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="scripts/main.js"></script>
|
||||
<script src="scripts/main.js?v=1.1"></script>
|
||||
<script>
|
||||
// Contact form validation and submission
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,10 @@
|
|||
"Material": "Engineered wood frame, premium fabric upholstery",
|
||||
"Upholstery": "Performance fabric with stain resistance",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "3 years"
|
||||
"Warranty": "3 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 88,
|
||||
"galleryPairs": [
|
||||
|
|
@ -57,7 +60,20 @@
|
|||
"right": "assets/images/asgaard_sofa.png"
|
||||
}
|
||||
],
|
||||
"dimensions": "180cm x 85cm x 75cm"
|
||||
"dimensions": "180cm x 85cm x 75cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
|
|
@ -107,7 +123,10 @@
|
|||
"Material": "Solid wood top, steel frame",
|
||||
"Finish": "Natural wood or dark stain options",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "5 years"
|
||||
"Warranty": "5 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 69,
|
||||
"galleryPairs": [
|
||||
|
|
@ -116,7 +135,20 @@
|
|||
"right": "assets/images/office_chair.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "120cm x 60cm x 75cm"
|
||||
"dimensions": "120cm x 60cm x 75cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
|
|
@ -166,7 +198,10 @@
|
|||
"Material": "Aluminum frame, tempered glass top",
|
||||
"Weather Resistance": "UV and moisture resistant",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "2 years"
|
||||
"Warranty": "2 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 12,
|
||||
"galleryPairs": [
|
||||
|
|
@ -175,7 +210,20 @@
|
|||
"right": "assets/images/conference_room.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "100cm x 50cm x 90cm"
|
||||
"dimensions": "100cm x 50cm x 90cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
|
|
@ -225,7 +273,10 @@
|
|||
"Material": "Engineered wood, steel hardware",
|
||||
"Security": "Optional locking system",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "3 years"
|
||||
"Warranty": "3 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 103,
|
||||
"galleryPairs": [
|
||||
|
|
@ -234,7 +285,20 @@
|
|||
"right": "assets/images/conference_rooms.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "60cm x 40cm x 120cm"
|
||||
"dimensions": "60cm x 40cm x 120cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
|
|
@ -284,7 +348,10 @@
|
|||
"Material": "Steel frame, premium fabric upholstery",
|
||||
"Comfort": "Ergonomic design with lumbar support",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "2 years"
|
||||
"Warranty": "2 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 25,
|
||||
"galleryPairs": [
|
||||
|
|
@ -293,7 +360,20 @@
|
|||
"right": "assets/images/lounge_chair.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "140cm x 80cm x 75cm"
|
||||
"dimensions": "140cm x 80cm x 75cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
|
|
@ -343,7 +423,10 @@
|
|||
"Material": "Aluminum base, mesh back, fabric seat",
|
||||
"Adjustments": "Height, tilt, lumbar support",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "5 years"
|
||||
"Warranty": "5 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 80,
|
||||
"galleryPairs": [
|
||||
|
|
@ -352,7 +435,20 @@
|
|||
"right": "assets/images/office_chair.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "100cm x 70cm x 85cm"
|
||||
"dimensions": "100cm x 70cm x 85cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
|
|
@ -402,7 +498,10 @@
|
|||
"Material": "Acoustic panels, steel frame",
|
||||
"Acoustics": "Sound reduction up to 35dB",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "3 years"
|
||||
"Warranty": "3 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 10,
|
||||
"galleryPairs": [
|
||||
|
|
@ -411,7 +510,20 @@
|
|||
"right": "assets/images/conference_room.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "180cm x 90cm x 75cm"
|
||||
"dimensions": "180cm x 90cm x 75cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
|
|
@ -461,7 +573,10 @@
|
|||
"Material": "Acoustic panels, tempered glass",
|
||||
"Privacy": "Sound reduction up to 40dB",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "2 years"
|
||||
"Warranty": "2 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 89,
|
||||
"galleryPairs": [
|
||||
|
|
@ -470,7 +585,20 @@
|
|||
"right": "assets/images/conference_rooms.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "80cm x 40cm x 180cm"
|
||||
"dimensions": "80cm x 40cm x 180cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
|
|
@ -520,7 +648,10 @@
|
|||
"Material": "Engineered wood, steel frame",
|
||||
"Modularity": "Fully customizable configuration",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "5 years"
|
||||
"Warranty": "5 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 58,
|
||||
"galleryPairs": [
|
||||
|
|
@ -529,7 +660,20 @@
|
|||
"right": "assets/images/lounge_chair.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "120cm x 75cm x 85cm"
|
||||
"dimensions": "120cm x 75cm x 85cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
|
|
@ -579,7 +723,10 @@
|
|||
"Material": "Solid wood top, steel frame",
|
||||
"Technology": "Integrated power and cable management",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "5 years"
|
||||
"Warranty": "5 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 82,
|
||||
"galleryPairs": [
|
||||
|
|
@ -588,7 +735,20 @@
|
|||
"right": "assets/images/office_chair.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "90cm x 90cm x 85cm"
|
||||
"dimensions": "90cm x 90cm x 85cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
|
|
@ -638,7 +798,10 @@
|
|||
"Material": "Premium materials with durable construction",
|
||||
"Design": "Contemporary professional aesthetic",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "3 years"
|
||||
"Warranty": "3 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 38,
|
||||
"galleryPairs": [
|
||||
|
|
@ -647,7 +810,20 @@
|
|||
"right": "assets/images/conference_room.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "200cm x 100cm x 75cm"
|
||||
"dimensions": "200cm x 100cm x 75cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 12,
|
||||
|
|
@ -697,7 +873,10 @@
|
|||
"Material": "Premium materials with durable construction",
|
||||
"Design": "Contemporary professional aesthetic",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "3 years"
|
||||
"Warranty": "3 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 11,
|
||||
"galleryPairs": [
|
||||
|
|
@ -706,7 +885,20 @@
|
|||
"right": "assets/images/conference_rooms.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "70cm x 35cm x 160cm"
|
||||
"dimensions": "70cm x 35cm x 160cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 13,
|
||||
|
|
@ -756,7 +948,10 @@
|
|||
"Material": "Premium materials with durable construction",
|
||||
"Design": "Contemporary professional aesthetic",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "3 years"
|
||||
"Warranty": "3 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 48,
|
||||
"galleryPairs": [
|
||||
|
|
@ -765,7 +960,20 @@
|
|||
"right": "assets/images/lounge_chair.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "180cm x 85cm x 75cm"
|
||||
"dimensions": "180cm x 85cm x 75cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 14,
|
||||
|
|
@ -815,7 +1023,10 @@
|
|||
"Material": "Premium materials with durable construction",
|
||||
"Design": "Contemporary professional aesthetic",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "3 years"
|
||||
"Warranty": "3 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 50,
|
||||
"galleryPairs": [
|
||||
|
|
@ -824,7 +1035,20 @@
|
|||
"right": "assets/images/office_chair.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "65cm x 65cm x 85cm"
|
||||
"dimensions": "65cm x 65cm x 85cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 15,
|
||||
|
|
@ -874,7 +1098,10 @@
|
|||
"Material": "Premium materials with durable construction",
|
||||
"Design": "Contemporary professional aesthetic",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "3 years"
|
||||
"Warranty": "3 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 22,
|
||||
"galleryPairs": [
|
||||
|
|
@ -883,7 +1110,20 @@
|
|||
"right": "assets/images/conference_room.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "150cm x 80cm x 75cm"
|
||||
"dimensions": "150cm x 80cm x 75cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 16,
|
||||
|
|
@ -933,7 +1173,10 @@
|
|||
"Material": "Premium materials with durable construction",
|
||||
"Design": "Contemporary professional aesthetic",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "3 years"
|
||||
"Warranty": "3 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 95,
|
||||
"galleryPairs": [
|
||||
|
|
@ -942,7 +1185,20 @@
|
|||
"right": "assets/images/conference_rooms.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "60cm x 40cm x 120cm"
|
||||
"dimensions": "60cm x 40cm x 120cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 17,
|
||||
|
|
@ -992,7 +1248,10 @@
|
|||
"Material": "Premium materials with durable construction",
|
||||
"Design": "Contemporary professional aesthetic",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "3 years"
|
||||
"Warranty": "3 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 104,
|
||||
"galleryPairs": [
|
||||
|
|
@ -1001,7 +1260,20 @@
|
|||
"right": "assets/images/workstation.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "200cm x 100cm x 75cm"
|
||||
"dimensions": "200cm x 100cm x 75cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 18,
|
||||
|
|
@ -1051,7 +1323,10 @@
|
|||
"Material": "Premium materials with durable construction",
|
||||
"Design": "Contemporary professional aesthetic",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "3 years"
|
||||
"Warranty": "3 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 63,
|
||||
"galleryPairs": [
|
||||
|
|
@ -1060,7 +1335,20 @@
|
|||
"right": "assets/images/storage.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "70cm x 35cm x 160cm"
|
||||
"dimensions": "70cm x 35cm x 160cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 19,
|
||||
|
|
@ -1110,7 +1398,10 @@
|
|||
"Material": "Premium materials with durable construction",
|
||||
"Design": "Contemporary professional aesthetic",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "3 years"
|
||||
"Warranty": "3 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 11,
|
||||
"galleryPairs": [
|
||||
|
|
@ -1119,7 +1410,20 @@
|
|||
"right": "assets/images/pods.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "140cm x 70cm x 75cm"
|
||||
"dimensions": "140cm x 70cm x 75cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 20,
|
||||
|
|
@ -1169,7 +1473,10 @@
|
|||
"Material": "Premium materials with durable construction",
|
||||
"Design": "Contemporary professional aesthetic",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "3 years"
|
||||
"Warranty": "3 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 23,
|
||||
"galleryPairs": [
|
||||
|
|
@ -1178,7 +1485,20 @@
|
|||
"right": "assets/images/phone.png"
|
||||
}
|
||||
],
|
||||
"dimensions": "120cm x 60cm x 75cm"
|
||||
"dimensions": "120cm x 60cm x 75cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 21,
|
||||
|
|
@ -1228,7 +1548,10 @@
|
|||
"Material": "Premium materials with durable construction",
|
||||
"Design": "Contemporary professional aesthetic",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "3 years"
|
||||
"Warranty": "3 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 20,
|
||||
"galleryPairs": [
|
||||
|
|
@ -1237,7 +1560,20 @@
|
|||
"right": "assets/images/our_story.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "100cm x 50cm x 90cm"
|
||||
"dimensions": "100cm x 50cm x 90cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 22,
|
||||
|
|
@ -1287,7 +1623,10 @@
|
|||
"Material": "Premium materials with durable construction",
|
||||
"Design": "Contemporary professional aesthetic",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "3 years"
|
||||
"Warranty": "3 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 102,
|
||||
"galleryPairs": [
|
||||
|
|
@ -1296,7 +1635,20 @@
|
|||
"right": "assets/images/office_chair.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "90cm x 90cm x 85cm"
|
||||
"dimensions": "90cm x 90cm x 85cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 23,
|
||||
|
|
@ -1346,7 +1698,10 @@
|
|||
"Material": "Premium materials with durable construction",
|
||||
"Design": "Contemporary professional aesthetic",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "3 years"
|
||||
"Warranty": "3 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 34,
|
||||
"galleryPairs": [
|
||||
|
|
@ -1355,7 +1710,20 @@
|
|||
"right": "assets/images/conference_room.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "200cm x 100cm x 75cm"
|
||||
"dimensions": "200cm x 100cm x 75cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
{
|
||||
"id": 24,
|
||||
|
|
@ -1405,7 +1773,10 @@
|
|||
"Material": "Premium materials with durable construction",
|
||||
"Design": "Contemporary professional aesthetic",
|
||||
"Dimensions": "See size options",
|
||||
"Warranty": "3 years"
|
||||
"Warranty": "3 years",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
},
|
||||
"reviewsCount": 67,
|
||||
"galleryPairs": [
|
||||
|
|
@ -1414,7 +1785,20 @@
|
|||
"right": "assets/images/conference_rooms.jpg"
|
||||
}
|
||||
],
|
||||
"dimensions": "140cm x 70cm x 75cm"
|
||||
"dimensions": "140cm x 70cm x 75cm",
|
||||
"salesPackage": "1 unit",
|
||||
"configuration": "Standard",
|
||||
"fillingMaterial": "High-density foam",
|
||||
"finishType": "Premium finish",
|
||||
"adjustableHeadrest": "No",
|
||||
"maxLoadCapacity": "150kg",
|
||||
"originOfManufacture": "Ghana",
|
||||
"weight": "25kg",
|
||||
"seatHeight": "45cm",
|
||||
"legHeight": "10cm",
|
||||
"warrantyServiceType": "Standard warranty service",
|
||||
"coveredInWarranty": "Manufacturing defects",
|
||||
"notCoveredInWarranty": "Wear and tear not covered"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
|
|
|
|||
|
|
@ -985,6 +985,6 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="scripts/main.js"></script>
|
||||
<script src="scripts/main.js?v=1.1"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -186,7 +186,7 @@
|
|||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="relative bg-linen py-16">
|
||||
<section class="relative bg-floral-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-5">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- High Quality -->
|
||||
|
|
@ -419,7 +419,7 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="scripts/main.js"></script>
|
||||
<script src="scripts/products.js"></script>
|
||||
<script src="scripts/main.js?v=3.0"></script>
|
||||
<script src="scripts/products.js?v=3.0"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
972
product-comparison.html
Normal file
972
product-comparison.html
Normal file
|
|
@ -0,0 +1,972 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Product Comparison - KHY</title>
|
||||
<link rel="stylesheet" href="styles/main.css" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body class="bg-white font-sans text-gray-800">
|
||||
<!-- Header -->
|
||||
<header
|
||||
class="absolute w-full h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50"
|
||||
>
|
||||
<nav class="h-full">
|
||||
<div
|
||||
class="max-w-7xl mx-auto h-full flex items-center justify-between px-5"
|
||||
>
|
||||
<!-- Logo Section -->
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="assets/images/khy_logo.png"
|
||||
alt="KHY Logo"
|
||||
class="h-16 w-auto drop-shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<ul class="flex space-x-10">
|
||||
<li>
|
||||
<a
|
||||
href="index.html"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Home</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="index.html#products"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Products</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="index.html#projects-button"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Projects</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="index.html#clients"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Clients</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="index.html#about"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>About</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="contact.html"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Contact</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="blog.html"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Blog</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="quote.html"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Quote</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="pt-28">
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-80">
|
||||
<!-- Background Image -->
|
||||
<div class="absolute inset-0 w-full h-full">
|
||||
<img
|
||||
src="assets/images/prod-comparison.jpg"
|
||||
alt="Product comparison background"
|
||||
class="w-full h-full object-cover object-center"
|
||||
style="filter: blur(3px)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- White Overlay -->
|
||||
<div class="absolute inset-0 bg-white bg-opacity-60"></div>
|
||||
|
||||
<!-- Overlay Content -->
|
||||
<div
|
||||
class="absolute z-10 inset-0 flex items-center justify-center text-center text-black"
|
||||
>
|
||||
<h1
|
||||
class="font-playfair font-medium text-3xl md:text-4xl lg:text-5xl leading-tight"
|
||||
>
|
||||
Product Comparison
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Product Selection Section -->
|
||||
<section class="bg-white py-12">
|
||||
<div class="max-w-7xl mx-auto px-5">
|
||||
<div class="flex items-center justify-between gap-8">
|
||||
<!-- Column 1: Navigation Prompt -->
|
||||
<div class="flex-1 text-center">
|
||||
<h3 class="font-playfair font-semibold text-2xl text-black mb-4">
|
||||
Go to Product page for more Products
|
||||
</h3>
|
||||
<a
|
||||
href="product-catalog.html?returnTo=comparison&slot=2"
|
||||
class="font-playfair font-medium text-lg text-gray-600 underline hover:text-gray-800 transition-colors"
|
||||
>
|
||||
View More
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Column 2: Product 1 Card -->
|
||||
<div class="flex-1 text-center product-card-1">
|
||||
<div
|
||||
class="bg-linen rounded-lg mb-3 w-80 h-80 flex items-center justify-center mx-auto"
|
||||
>
|
||||
<div
|
||||
class="w-full h-full flex items-center justify-center text-gray-400 text-sm"
|
||||
>
|
||||
Select Product
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-playfair font-medium text-2xl text-black">
|
||||
Select Product
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Column 3: Product 2 Card -->
|
||||
<div class="flex-1 text-center product-card-2">
|
||||
<div
|
||||
class="bg-linen rounded-lg mb-3 w-80 h-80 flex items-center justify-center mx-auto"
|
||||
>
|
||||
<div
|
||||
class="w-full h-full flex items-center justify-center text-gray-400 text-sm"
|
||||
>
|
||||
Select Product
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-playfair font-medium text-2xl text-black">
|
||||
Select Product
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Column 4: Add Product Dropdown -->
|
||||
<div class="flex-1 text-center">
|
||||
<h3 class="font-playfair font-semibold text-2xl text-black mb-4">
|
||||
Add A Product
|
||||
</h3>
|
||||
<div class="relative w-full max-w-xs mx-auto">
|
||||
<select
|
||||
id="product-dropdown"
|
||||
class="w-full px-4 py-3 bg-uc-gold text-white font-playfair font-semibold text-sm rounded-lg focus:outline-none focus:ring-2 focus:ring-uc-gold focus:border-transparent border border-uc-gold appearance-none pr-10"
|
||||
>
|
||||
<option value="">Choose a Product</option>
|
||||
</select>
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 text-white"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Comparison Table Section -->
|
||||
<section class="bg-white border-t border-gray-200 comparison-table">
|
||||
<div class="max-w-7xl mx-auto px-5">
|
||||
<!-- General Section Header -->
|
||||
<div class="py-6 border-b border-gray-100 general-section">
|
||||
<h4 class="font-playfair font-medium text-2xl text-black">
|
||||
General
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<!-- General Section Table -->
|
||||
<div class="space-y-4 py-4">
|
||||
<!-- Sales Package Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Sales Package
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
Select a product
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
Select a product
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Model Number Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Model Number
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Secondary Material Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Secondary Material
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Configuration
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Upholstery Material Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Upholstery Material
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Upholstery Color Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Upholstery Color
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Section Header -->
|
||||
<div class="py-6 border-b border-gray-100 product-section">
|
||||
<h4 class="font-playfair font-medium text-2xl text-black">
|
||||
Product
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<!-- Product Section Table -->
|
||||
<div class="space-y-4 py-4">
|
||||
<!-- Filling Material Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Filling Material
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Finish Type Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Finish Type
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Adjustable Headrest Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Adjustable Headrest
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Maximum Load Capacity Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Maximum Load Capacity
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Origin of Manufacture Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Origin of Manufacture
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dimensions Section Header -->
|
||||
<div class="py-6 border-b border-gray-100 dimensions-section">
|
||||
<h4 class="font-playfair font-medium text-2xl text-black">
|
||||
Dimensions
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<!-- Dimensions Section Table -->
|
||||
<div class="space-y-4 py-4">
|
||||
<!-- Width Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Width
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Height Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Height
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Depth Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Depth
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Weight Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Weight
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Seat Height Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Seat Height
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Leg Height Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Leg Height
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Warranty Section Header -->
|
||||
<div class="py-6 border-b border-gray-100 warranty-section">
|
||||
<h4 class="font-playfair font-medium text-2xl text-black">
|
||||
Warranty
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<!-- Warranty Section Table -->
|
||||
<div class="space-y-4 py-4">
|
||||
<!-- Warranty Summary Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Warranty Summary
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Warranty Service Type Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Warranty Service Type
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Covered in Warranty Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Covered in Warranty
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Not Covered in Warranty Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Not Covered in Warranty
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Domestic Warranty Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Domestic Warranty
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Action Buttons Section -->
|
||||
<div class="max-w-7xl mx-auto px-5">
|
||||
<div class="flex items-stretch py-8 ml-8">
|
||||
<!-- Column 1: Empty space -->
|
||||
<div class="flex-1"></div>
|
||||
|
||||
<!-- Column 2: Add To Quote Button for Asgaard Sofa -->
|
||||
<div class="flex-1 px-6 border-l border-gray-200">
|
||||
<div class="text-center">
|
||||
<button
|
||||
class="bg-uc-gold text-white px-6 py-3 rounded-lg font-playfair font-semibold text-base hover:bg-uc-gold/90 transition-colors"
|
||||
>
|
||||
Add To Quote
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Column 3: Add To Quote Button for Outdoor Sofa Set -->
|
||||
<div class="flex-1 px-6 border-l border-gray-200 ml-8">
|
||||
<div class="text-center">
|
||||
<button
|
||||
class="bg-uc-gold text-white px-6 py-3 rounded-lg font-playfair font-semibold text-base hover:bg-uc-gold/90 transition-colors"
|
||||
>
|
||||
Add To Quote
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Column 4: Empty space to align with dropdown -->
|
||||
<div class="flex-1 px-6 border-l border-gray-200">
|
||||
<!-- Empty space to maintain alignment -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="relative bg-floral-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-5">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- High Quality -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-12 h-12">
|
||||
<img
|
||||
src="assets/icons/trophy.png"
|
||||
alt="Trophy"
|
||||
class="w-full h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3
|
||||
class="font-playfair font-semibold text-2xl text-black mb-1"
|
||||
>
|
||||
High Quality
|
||||
</h3>
|
||||
<p class="font-playfair font-normal text-lg text-gray-500">
|
||||
crafted from top materials
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Warranty Protection -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-12 h-12">
|
||||
<img
|
||||
src="assets/icons/warranty.png"
|
||||
alt="Guarantee"
|
||||
class="w-full h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3
|
||||
class="font-playfair font-semibold text-2xl text-black mb-1"
|
||||
>
|
||||
Warranty Protection
|
||||
</h3>
|
||||
<p class="font-playfair font-normal text-lg text-gray-500">
|
||||
Over 2 years
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Free Shipping -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-12 h-12">
|
||||
<img
|
||||
src="assets/icons/shipping.png"
|
||||
alt="Shipping"
|
||||
class="w-full h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3
|
||||
class="font-playfair font-semibold text-2xl text-black mb-1"
|
||||
>
|
||||
Free Shipping
|
||||
</h3>
|
||||
<p class="font-playfair font-normal text-lg text-gray-500">
|
||||
Order over 150 $
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 24/7 Support -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-12 h-12">
|
||||
<img
|
||||
src="assets/icons/support.png"
|
||||
alt="Support"
|
||||
class="w-full h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3
|
||||
class="font-playfair font-semibold text-2xl text-black mb-1"
|
||||
>
|
||||
24 / 7 Support
|
||||
</h3>
|
||||
<p class="font-playfair font-normal text-lg text-gray-500">
|
||||
Dedicated support
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Main content will go here -->
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-white border-t border-black border-opacity-20">
|
||||
<!-- Main Footer Content -->
|
||||
<div class="max-w-7xl mx-auto px-5 py-16">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- Company Information -->
|
||||
<div class="space-y-1">
|
||||
<!-- Logo -->
|
||||
<div class="w-16 h-20 -mt-6">
|
||||
<a
|
||||
href="index.html"
|
||||
aria-label="Go to KHY home"
|
||||
title="KHY Home"
|
||||
class="inline-block w-full h-full group focus:outline-none focus-visible:ring-2 focus-visible:ring-uc-gold rounded-md transition"
|
||||
>
|
||||
<img
|
||||
src="assets/images/khy_logo.png"
|
||||
alt="KHY logo"
|
||||
loading="lazy"
|
||||
class="w-full h-full object-contain transition-transform duration-300 group-hover:scale-105"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Address -->
|
||||
<p
|
||||
class="font-playfair font-normal text-base leading-relaxed text-gray-600 -mt-4"
|
||||
>
|
||||
5 Labone Crescent, Greater Accra, Ghana
|
||||
</p>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div class="space-y-1 -mt-2">
|
||||
<!-- Phone -->
|
||||
<div class="flex items-center space-x-3 -mt-1">
|
||||
<img
|
||||
src="assets/images/phone.png"
|
||||
alt="Phone"
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
<span class="font-playfair font-normal text-base text-gray-800">
|
||||
+233 (555) 76677
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="flex items-center space-x-3 -mt-1">
|
||||
<img src="assets/images/mail.png" alt="Email" class="w-4 h-4" />
|
||||
<span class="font-playfair font-normal text-base text-gray-800">
|
||||
design@khyltd.com
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<div class="space-y-6">
|
||||
<h3
|
||||
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
|
||||
>
|
||||
Quick Links
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<a
|
||||
href="#"
|
||||
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
|
||||
>
|
||||
Products
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Help -->
|
||||
<div class="space-y-6">
|
||||
<h3
|
||||
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
|
||||
>
|
||||
Help
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<a
|
||||
href="#"
|
||||
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
|
||||
>
|
||||
Privacy Policies
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
|
||||
>
|
||||
Terms and Conditions
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Newsletter -->
|
||||
<div class="space-y-6">
|
||||
<h3
|
||||
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
|
||||
>
|
||||
Newsletter
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter Your Email Address"
|
||||
class="flex-1 font-playfair font-normal text-sm leading-relaxed tracking-wider text-taupe-gray bg-transparent border-b border-black focus:outline-none focus:border-black"
|
||||
/>
|
||||
<button
|
||||
class="font-playfair font-normal text-sm leading-relaxed tracking-wider text-gray-800 border-b border-black hover:text-black transition-colors"
|
||||
>
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Copyright Section -->
|
||||
<div class="border-t border-light-silver">
|
||||
<div class="max-w-7xl mx-auto px-5 py-4">
|
||||
<p
|
||||
class="font-playfair font-normal text-xs leading-relaxed text-davys-grey"
|
||||
>
|
||||
© 2025 khy. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="scripts/main.js?v=3.0"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -187,32 +187,32 @@
|
|||
</h3>
|
||||
<div class="grid grid-cols-6 gap-2" id="size-buttons-container">
|
||||
<button
|
||||
class="w-8 h-8 bg-uc-gold text-white font-poppins font-normal text-sm rounded flex items-center justify-center size-button"
|
||||
class="w-8 h-8 bg-uc-gold text-white font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
|
||||
>
|
||||
L
|
||||
</button>
|
||||
<button
|
||||
class="w-8 h-8 bg-floral-white text-black font-poppins font-normal text-sm rounded flex items-center justify-center size-button"
|
||||
class="w-8 h-8 bg-floral-white text-black font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
|
||||
>
|
||||
XL
|
||||
</button>
|
||||
<button
|
||||
class="w-8 h-8 bg-floral-white text-black font-poppins font-normal text-sm rounded flex items-center justify-center size-button"
|
||||
class="w-8 h-8 bg-floral-white text-black font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
|
||||
>
|
||||
XS
|
||||
</button>
|
||||
<button
|
||||
class="w-8 h-8 bg-floral-white text-black font-poppins font-normal text-sm rounded flex items-center justify-center size-button"
|
||||
class="w-8 h-8 bg-floral-white text-black font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
|
||||
>
|
||||
S
|
||||
</button>
|
||||
<button
|
||||
class="w-8 h-8 bg-floral-white text-black font-poppins font-normal text-sm rounded flex items-center justify-center size-button"
|
||||
class="w-8 h-8 bg-floral-white text-black font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
|
||||
>
|
||||
M
|
||||
</button>
|
||||
<button
|
||||
class="w-8 h-8 bg-floral-white text-black font-poppins font-normal text-sm rounded flex items-center justify-center size-button"
|
||||
class="w-8 h-8 bg-floral-white text-black font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
|
||||
>
|
||||
2XL
|
||||
</button>
|
||||
|
|
@ -269,6 +269,7 @@
|
|||
Add To Quote
|
||||
</button>
|
||||
<button
|
||||
id="compare-products-btn"
|
||||
class="inline-flex items-center justify-center w-[440px] h-[64px] min-h-[64px] bg-white text-black font-playfair font-light text-[20px] leading-none rounded-[15px] border border-quick-silver hover:bg-black hover:text-white hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200 box-border whitespace-nowrap"
|
||||
>
|
||||
Compare Products
|
||||
|
|
@ -282,57 +283,57 @@
|
|||
<div class="space-y-4">
|
||||
<div class="flex items-center">
|
||||
<span
|
||||
class="font-poppins font-normal text-base text-quick-silver w-20"
|
||||
class="font-playfair font-normal text-base text-quick-silver w-20"
|
||||
>Model No.</span
|
||||
>
|
||||
<span
|
||||
class="font-poppins font-medium text-base text-quick-silver mx-2"
|
||||
class="font-playfair font-medium text-base text-quick-silver mx-2"
|
||||
>:</span
|
||||
>
|
||||
<span
|
||||
class="font-poppins font-normal text-base text-quick-silver"
|
||||
class="font-playfair font-normal text-base text-quick-silver"
|
||||
>SS001</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span
|
||||
class="font-poppins font-normal text-base text-quick-silver w-20"
|
||||
class="font-playfair font-normal text-base text-quick-silver w-20"
|
||||
>Category</span
|
||||
>
|
||||
<span
|
||||
class="font-poppins font-medium text-base text-quick-silver mx-2"
|
||||
class="font-playfair font-medium text-base text-quick-silver mx-2"
|
||||
>:</span
|
||||
>
|
||||
<span
|
||||
class="font-poppins font-normal text-base text-quick-silver"
|
||||
class="font-playfair font-normal text-base text-quick-silver"
|
||||
>Sofas</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span
|
||||
class="font-poppins font-normal text-base text-quick-silver w-20"
|
||||
class="font-playfair font-normal text-base text-quick-silver w-20"
|
||||
>Tags</span
|
||||
>
|
||||
<span
|
||||
class="font-poppins font-medium text-base text-quick-silver mx-2"
|
||||
class="font-playfair font-medium text-base text-quick-silver mx-2"
|
||||
>:</span
|
||||
>
|
||||
<span
|
||||
class="font-poppins font-normal text-base text-quick-silver"
|
||||
class="font-playfair font-normal text-base text-quick-silver"
|
||||
>Sofa, Chair, Home, Shop</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span
|
||||
class="font-poppins font-normal text-base text-quick-silver w-20"
|
||||
class="font-playfair font-normal text-base text-quick-silver w-20"
|
||||
>Dimension</span
|
||||
>
|
||||
<span
|
||||
class="font-poppins font-medium text-base text-quick-silver mx-2"
|
||||
class="font-playfair font-medium text-base text-quick-silver mx-2"
|
||||
>:</span
|
||||
>
|
||||
<span
|
||||
class="font-poppins font-normal text-base text-quick-silver"
|
||||
class="font-playfair font-normal text-base text-quick-silver"
|
||||
>180cm x 85cm x 75cm</span
|
||||
>
|
||||
</div>
|
||||
|
|
@ -587,6 +588,6 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="scripts/main.js"></script>
|
||||
<script src="scripts/main.js?v=1.1"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
454
scripts/main.js
454
scripts/main.js
|
|
@ -1,3 +1,11 @@
|
|||
// Global script initialization test
|
||||
console.log("=== MAIN.JS LOADED ===");
|
||||
console.log("Current pathname:", window.location.pathname);
|
||||
console.log(
|
||||
"Is comparison page:",
|
||||
window.location.pathname.includes("product-comparison.html")
|
||||
);
|
||||
|
||||
// Update year in footer and handle smooth scrolling
|
||||
function initSite() {
|
||||
// Update footer year
|
||||
|
|
@ -700,6 +708,452 @@ function initSite() {
|
|||
})();
|
||||
}
|
||||
|
||||
// Product Comparison Page Functionality
|
||||
function initProductComparison() {
|
||||
console.log("=== INITIALIZING PRODUCT COMPARISON ===");
|
||||
|
||||
// Get product IDs from URL parameters
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const product1Id = urlParams.get("product1");
|
||||
const product2Id = urlParams.get("product2");
|
||||
|
||||
console.log("URL Parameters:", { product1Id, product2Id });
|
||||
|
||||
// Fetch product data
|
||||
fetch("data/products.json")
|
||||
.then((response) => {
|
||||
console.log("Fetch response status:", response.status);
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
console.log("Products data loaded:", data);
|
||||
console.log("Total products:", data.products.length);
|
||||
|
||||
// Find products by ID
|
||||
const product1 = data.products.find((p) => p.id == product1Id);
|
||||
const product2 = data.products.find((p) => p.id == product2Id);
|
||||
|
||||
console.log("Found products:", { product1, product2 });
|
||||
|
||||
// Update product cards
|
||||
if (product1) {
|
||||
console.log("Updating product card 1 with:", product1.name);
|
||||
updateProductCard(1, product1);
|
||||
updateComparisonTable(product1, 1);
|
||||
}
|
||||
|
||||
if (product2) {
|
||||
console.log("Updating product card 2 with:", product2.name);
|
||||
updateProductCard(2, product2);
|
||||
updateComparisonTable(product2, 2);
|
||||
}
|
||||
|
||||
// Populate dropdown
|
||||
populateProductDropdown(data.products);
|
||||
|
||||
// Update View More link with current comparison state
|
||||
updateViewMoreLink(product1Id, product2Id);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error loading products:", error);
|
||||
});
|
||||
}
|
||||
|
||||
function updateProductCard(slotNumber, product) {
|
||||
console.log(`=== UPDATING PRODUCT CARD ${slotNumber} ===`);
|
||||
console.log("Product data:", product);
|
||||
|
||||
const cardContainer = document.querySelector(`.product-card-${slotNumber}`);
|
||||
console.log("Card container found:", cardContainer);
|
||||
|
||||
if (cardContainer) {
|
||||
const imageContainer = cardContainer.querySelector("div");
|
||||
const title = cardContainer.querySelector("p");
|
||||
|
||||
console.log("Image container found:", imageContainer);
|
||||
console.log("Title element found:", title);
|
||||
|
||||
if (imageContainer) {
|
||||
console.log("Replacing image container with:", product.image);
|
||||
// Replace the placeholder div with an image
|
||||
imageContainer.innerHTML = `<img src="${product.image}" alt="${product.name}" class="w-full h-full object-cover rounded-lg">`;
|
||||
}
|
||||
if (title) {
|
||||
console.log("Updating title to:", product.name);
|
||||
title.textContent = product.name;
|
||||
}
|
||||
} else {
|
||||
console.log(`Product card container .product-card-${slotNumber} not found`);
|
||||
}
|
||||
}
|
||||
|
||||
function updateComparisonTable(product, slotNumber) {
|
||||
console.log(`=== UPDATING COMPARISON TABLE FOR SLOT ${slotNumber} ===`);
|
||||
console.log("Product:", product);
|
||||
|
||||
// Update all sections
|
||||
const sections = ["general", "product", "dimensions", "warranty"];
|
||||
|
||||
sections.forEach((section) => {
|
||||
console.log(`Updating ${section} section...`);
|
||||
updateTableSection(section, product, slotNumber);
|
||||
});
|
||||
}
|
||||
|
||||
function updateTableSection(sectionName, product, slotNumber) {
|
||||
console.log(
|
||||
`=== UPDATING TABLE SECTION: ${sectionName} (SLOT ${slotNumber}) ===`
|
||||
);
|
||||
const sectionData = getProductSectionData(product, sectionName);
|
||||
|
||||
// Find the section header
|
||||
const section = document.querySelector(
|
||||
`.comparison-table .${sectionName}-section`
|
||||
);
|
||||
if (!section) {
|
||||
console.log(`Section ${sectionName}-section not found`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Find the table that comes after this section header
|
||||
const sectionTable = section.nextElementSibling;
|
||||
if (!sectionTable) {
|
||||
console.log(`Table after ${sectionName}-section not found`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Find all flex rows and filter to only those with data columns
|
||||
const allRows = sectionTable.querySelectorAll(".flex.items-center");
|
||||
const rows = Array.from(allRows).filter((row) =>
|
||||
row.querySelector(".column-1")
|
||||
);
|
||||
console.log(
|
||||
`Found ${rows.length} data rows in ${sectionName} section (out of ${allRows.length} total rows)`
|
||||
);
|
||||
|
||||
if (rows.length > 0 && sectionData) {
|
||||
console.log("Updating rows with data:", sectionData);
|
||||
|
||||
// Update each row with the corresponding data
|
||||
rows.forEach((row, index) => {
|
||||
if (index < sectionData.length) {
|
||||
const column = row.querySelector(`.column-${slotNumber}`);
|
||||
if (column) {
|
||||
console.log(
|
||||
`Updating row ${index + 1} with data: ${sectionData[index]}`
|
||||
);
|
||||
console.log(`Row element:`, row);
|
||||
console.log(`Column element:`, column);
|
||||
console.log(`Column text before update: "${column.textContent}"`);
|
||||
column.textContent = sectionData[index];
|
||||
console.log(`Column text after update: "${column.textContent}"`);
|
||||
} else {
|
||||
console.log(`Column ${slotNumber} not found in row ${index + 1}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
console.log("Table section updated successfully.");
|
||||
} else {
|
||||
console.log("No rows found or section data is empty, skipping update.");
|
||||
console.log("Rows found:", rows.length);
|
||||
console.log("Section data:", sectionData);
|
||||
}
|
||||
}
|
||||
|
||||
function getProductSectionData(product, sectionName) {
|
||||
console.log(`=== GETTING PRODUCT SECTION DATA: ${sectionName} ===`);
|
||||
console.log("Product:", product);
|
||||
|
||||
let sectionData;
|
||||
switch (sectionName) {
|
||||
case "general":
|
||||
sectionData = [
|
||||
product.salesPackage || "N/A", // Sales Package
|
||||
product.modelNo || "N/A", // Model Number
|
||||
product.additionalInformation?.Material || "N/A", // Secondary Material
|
||||
product.configuration || "N/A", // Configuration
|
||||
product.additionalInformation?.Upholstery || "N/A", // Upholstery Material
|
||||
product.colors?.[0]?.name || "N/A", // Upholstery Color
|
||||
];
|
||||
break;
|
||||
case "product":
|
||||
sectionData = [
|
||||
product.fillingMaterial || "N/A", // Filling Material
|
||||
product.finishType || "N/A", // Finish Type
|
||||
product.adjustableHeadrest || "N/A", // Adjustable Headrest
|
||||
product.maxLoadCapacity || "N/A", // Maximum Load Capacity
|
||||
product.originOfManufacture || "N/A", // Origin of Manufacture
|
||||
];
|
||||
break;
|
||||
case "dimensions":
|
||||
const dims = product.dimensions?.split(" x ") || [];
|
||||
sectionData = [
|
||||
dims[0] || "N/A", // Width
|
||||
dims[1] || "N/A", // Height
|
||||
dims[2] || "N/A", // Depth
|
||||
product.weight || "N/A", // Weight
|
||||
product.seatHeight || "N/A", // Seat Height
|
||||
product.legHeight || "N/A", // Leg Height
|
||||
];
|
||||
break;
|
||||
case "warranty":
|
||||
sectionData = [
|
||||
product.additionalInformation?.Warranty || "N/A", // Warranty Summary
|
||||
product.warrantyServiceType || "N/A", // Warranty Service Type
|
||||
product.coveredInWarranty || "N/A", // Covered in Warranty
|
||||
product.notCoveredInWarranty || "N/A", // Not Covered in Warranty
|
||||
product.additionalInformation?.Warranty || "N/A", // Domestic Warranty
|
||||
];
|
||||
break;
|
||||
default:
|
||||
sectionData = [];
|
||||
}
|
||||
|
||||
console.log(`Section data for ${sectionName}:`, sectionData);
|
||||
console.log(`Detailed breakdown for ${sectionName}:`);
|
||||
sectionData.forEach((item, index) => {
|
||||
console.log(` Item ${index + 1}: "${item}"`);
|
||||
});
|
||||
|
||||
return sectionData;
|
||||
}
|
||||
|
||||
function populateProductDropdown(products) {
|
||||
const dropdown = document.getElementById("product-dropdown");
|
||||
if (dropdown) {
|
||||
// Clear existing options except the first one
|
||||
while (dropdown.children.length > 1) {
|
||||
dropdown.removeChild(dropdown.lastChild);
|
||||
}
|
||||
|
||||
// Add all products
|
||||
products.forEach((product) => {
|
||||
const option = document.createElement("option");
|
||||
option.value = product.id;
|
||||
option.textContent = product.name;
|
||||
dropdown.appendChild(option);
|
||||
});
|
||||
|
||||
// Add event listener for product selection
|
||||
dropdown.addEventListener("change", function () {
|
||||
const selectedProductId = this.value;
|
||||
console.log("Product selected from dropdown:", selectedProductId);
|
||||
|
||||
if (selectedProductId && selectedProductId !== "Choose a Product") {
|
||||
// Find the selected product
|
||||
const selectedProduct = products.find((p) => p.id == selectedProductId);
|
||||
|
||||
if (selectedProduct) {
|
||||
console.log("Selected product found:", selectedProduct);
|
||||
|
||||
// Update the second product slot
|
||||
updateProductCard(2, selectedProduct);
|
||||
updateComparisonTable(selectedProduct, 2);
|
||||
|
||||
// Update URL to include the second product
|
||||
updateURLParameter("product2", selectedProductId);
|
||||
|
||||
// Reset dropdown to default option
|
||||
this.value = "Choose a Product";
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function updateURLParameter(param, value) {
|
||||
const url = new URL(window.location);
|
||||
url.searchParams.set(param, value);
|
||||
window.history.replaceState({}, "", url);
|
||||
}
|
||||
|
||||
function updateViewMoreLink(product1Id, product2Id) {
|
||||
const viewMoreLink = document.querySelector(
|
||||
'a[href*="product-catalog.html"]'
|
||||
);
|
||||
if (viewMoreLink) {
|
||||
// Determine which slot is available (1 or 2)
|
||||
let availableSlot = 1;
|
||||
if (!product1Id) {
|
||||
availableSlot = 1;
|
||||
} else if (!product2Id) {
|
||||
availableSlot = 2;
|
||||
} else {
|
||||
// Both slots are filled, default to slot 2 for replacement
|
||||
availableSlot = 2;
|
||||
}
|
||||
|
||||
let newHref = `product-catalog.html?returnTo=comparison&slot=${availableSlot}`;
|
||||
if (product1Id) newHref += `&product1=${product1Id}`;
|
||||
if (product2Id) newHref += `&product2=${product2Id}`;
|
||||
|
||||
viewMoreLink.href = newHref;
|
||||
console.log("Updated View More link:", newHref);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize product comparison if on comparison page
|
||||
console.log("=== CHECKING IF COMPARISON PAGE INITIALIZATION SHOULD RUN ===");
|
||||
console.log(
|
||||
"Pathname includes product-comparison.html:",
|
||||
window.location.pathname.includes("product-comparison.html")
|
||||
);
|
||||
|
||||
if (window.location.pathname.includes("product-comparison.html")) {
|
||||
console.log("Product comparison page detected, initializing immediately");
|
||||
initProductComparison();
|
||||
|
||||
// Also try on DOMContentLoaded as backup
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
console.log("Product comparison page DOMContentLoaded backup");
|
||||
initProductComparison();
|
||||
});
|
||||
}
|
||||
|
||||
// Product Detail Page - Compare Products functionality
|
||||
function initProductDetailCompare() {
|
||||
console.log("=== INITIALIZING PRODUCT DETAIL COMPARE ===");
|
||||
console.log("Current URL:", window.location.href);
|
||||
console.log("Pathname:", window.location.pathname);
|
||||
|
||||
// Try to find the button immediately
|
||||
let compareButton = document.getElementById("compare-products-btn");
|
||||
console.log("Button found by ID:", compareButton);
|
||||
|
||||
if (!compareButton) {
|
||||
console.log("Button not found by ID, trying text search...");
|
||||
const buttons = document.querySelectorAll("button");
|
||||
console.log("Total buttons found:", buttons.length);
|
||||
|
||||
buttons.forEach((button, index) => {
|
||||
console.log(`Button ${index}: "${button.textContent.trim()}"`);
|
||||
});
|
||||
|
||||
compareButton = Array.from(buttons).find(
|
||||
(button) => button.textContent.trim() === "Compare Products"
|
||||
);
|
||||
console.log("Button found by text search:", compareButton);
|
||||
}
|
||||
|
||||
if (compareButton) {
|
||||
console.log("=== ADDING CLICK LISTENER ===");
|
||||
|
||||
// Remove any existing listeners first
|
||||
compareButton.removeEventListener("click", handleCompareClick);
|
||||
compareButton.addEventListener("click", handleCompareClick);
|
||||
|
||||
// Also add a direct onclick handler as backup
|
||||
compareButton.onclick = handleCompareClick;
|
||||
|
||||
console.log("Click listener added successfully");
|
||||
console.log("Button element:", compareButton);
|
||||
console.log("Button text content:", compareButton.textContent);
|
||||
} else {
|
||||
console.log("=== BUTTON NOT FOUND ===");
|
||||
console.log("Compare Products button not found");
|
||||
}
|
||||
}
|
||||
|
||||
// Separate function for the click handler
|
||||
function handleCompareClick(event) {
|
||||
console.log("Compare Products button clicked");
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
// Get current product ID from URL
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const productId = urlParams.get("id");
|
||||
|
||||
console.log("Product ID from URL:", productId);
|
||||
|
||||
if (productId) {
|
||||
// Navigate to comparison page with current product as product1
|
||||
const comparisonUrl = `product-comparison.html?product1=${productId}`;
|
||||
console.log("Navigating to:", comparisonUrl);
|
||||
window.location.href = comparisonUrl;
|
||||
} else {
|
||||
// If no product ID, just go to comparison page
|
||||
console.log("No product ID found, navigating to comparison page");
|
||||
window.location.href = "product-comparison.html";
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize immediately if we're on the product detail page
|
||||
if (window.location.pathname.includes("product-detail.html")) {
|
||||
console.log(
|
||||
"Product detail page detected, initializing compare functionality immediately"
|
||||
);
|
||||
initProductDetailCompare();
|
||||
}
|
||||
|
||||
// Also try to initialize on DOMContentLoaded
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
console.log("DOMContentLoaded event fired");
|
||||
if (window.location.pathname.includes("product-detail.html")) {
|
||||
console.log("Product detail page detected in DOMContentLoaded");
|
||||
initProductDetailCompare();
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize product comparison if on comparison page
|
||||
if (window.location.pathname.includes("product-comparison.html")) {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
initProductComparison();
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize comparison functionality if on product catalog page
|
||||
if (window.location.pathname.includes("product-catalog.html")) {
|
||||
console.log("=== PRODUCT CATALOG PAGE DETECTED ===");
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
console.log(
|
||||
"=== DOM CONTENT LOADED - INITIALIZING PRODUCT CATALOG COMPARISON ==="
|
||||
);
|
||||
initProductCatalogComparison();
|
||||
});
|
||||
}
|
||||
|
||||
// Product Catalog - Handle comparison page returns
|
||||
function initProductCatalogComparison() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const returnTo = urlParams.get("returnTo");
|
||||
const slot = urlParams.get("slot");
|
||||
const product1Id = urlParams.get("product1");
|
||||
const product2Id = urlParams.get("product2");
|
||||
|
||||
console.log("Product catalog comparison params:", {
|
||||
returnTo,
|
||||
slot,
|
||||
product1Id,
|
||||
product2Id,
|
||||
});
|
||||
|
||||
if (returnTo === "comparison" && slot) {
|
||||
console.log("Setting up comparison return functionality for slot:", slot);
|
||||
|
||||
// Note: Product card click handling is now done in products.js viewProduct method
|
||||
console.log(
|
||||
"Comparison mode activated - View buttons will navigate to comparison page"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Replace Poppins with Playfair in all font references
|
||||
function updateFontClasses() {
|
||||
// Find all elements with font-poppins class and replace with font-playfair
|
||||
const poppinsElements = document.querySelectorAll(".font-poppins");
|
||||
poppinsElements.forEach((element) => {
|
||||
element.classList.remove("font-poppins");
|
||||
element.classList.add("font-playfair");
|
||||
});
|
||||
}
|
||||
|
||||
// Run font update on page load
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
updateFontClasses();
|
||||
});
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", initSite);
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -93,8 +93,15 @@ class ProductManager {
|
|||
|
||||
// Create individual product card HTML
|
||||
createProductCard(product) {
|
||||
// Check if we're in comparison mode
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const returnTo = urlParams.get("returnTo");
|
||||
const isComparisonMode = returnTo === "comparison";
|
||||
|
||||
return `
|
||||
<div class="group relative bg-light-bg rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
|
||||
<div class="group relative bg-light-bg rounded-lg overflow-hidden hover:shadow-lg transition-shadow product-card" data-product-id="${
|
||||
product.id
|
||||
}">
|
||||
<div class="relative h-80 overflow-hidden">
|
||||
<img
|
||||
src="${product.image}"
|
||||
|
|
@ -105,10 +112,12 @@ class ProductManager {
|
|||
<div class="absolute inset-0 bg-dark-charcoal bg-opacity-70 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<button
|
||||
class="bg-white text-uc-gold font-poppins font-semibold px-8 py-3 rounded-md hover:bg-uc-gold hover:text-white transition-colors"
|
||||
class="bg-white text-uc-gold font-poppins font-semibold px-8 py-3 rounded-md hover:bg-uc-gold hover:text-white transition-colors ${
|
||||
isComparisonMode ? "cursor-pointer" : ""
|
||||
}"
|
||||
onclick="productManager.viewProduct(${product.id})"
|
||||
>
|
||||
View
|
||||
${isComparisonMode ? "Add to Comparison" : "View"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -290,8 +299,37 @@ class ProductManager {
|
|||
viewProduct(productId) {
|
||||
const product = this.products.find((p) => p.id === productId);
|
||||
if (product) {
|
||||
// Navigate to product detail page with product ID
|
||||
window.location.href = `product-detail.html?id=${productId}`;
|
||||
// Check if we're in comparison mode
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const returnTo = urlParams.get("returnTo");
|
||||
const slot = urlParams.get("slot");
|
||||
const product1Id = urlParams.get("product1");
|
||||
const product2Id = urlParams.get("product2");
|
||||
|
||||
if (returnTo === "comparison" && slot) {
|
||||
// Navigate back to comparison page with the selected product
|
||||
let comparisonUrl = "product-comparison.html?";
|
||||
|
||||
if (slot === "1") {
|
||||
// Replace product 1
|
||||
comparisonUrl += `product1=${productId}`;
|
||||
if (product2Id) {
|
||||
comparisonUrl += `&product2=${product2Id}`;
|
||||
}
|
||||
} else {
|
||||
// Replace product 2
|
||||
if (product1Id) {
|
||||
comparisonUrl += `product1=${product1Id}&`;
|
||||
}
|
||||
comparisonUrl += `product2=${productId}`;
|
||||
}
|
||||
|
||||
console.log("Navigating to comparison page:", comparisonUrl);
|
||||
window.location.href = comparisonUrl;
|
||||
} else {
|
||||
// Normal mode - navigate to product detail page
|
||||
window.location.href = `product-detail.html?id=${productId}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
184
styles/main.css
184
styles/main.css
|
|
@ -612,6 +612,14 @@ video {
|
|||
}
|
||||
}
|
||||
|
||||
.pointer-events-none {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -624,6 +632,11 @@ video {
|
|||
inset: 0px;
|
||||
}
|
||||
|
||||
.inset-y-0 {
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.left-0 {
|
||||
left: 0px;
|
||||
}
|
||||
|
|
@ -652,6 +665,10 @@ video {
|
|||
top: 20rem;
|
||||
}
|
||||
|
||||
.right-0 {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.z-10 {
|
||||
z-index: 10;
|
||||
}
|
||||
|
|
@ -718,6 +735,10 @@ video {
|
|||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mb-3 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -750,6 +771,14 @@ video {
|
|||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.ml-8 {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.mt-12 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.box-border {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -810,6 +839,14 @@ video {
|
|||
height: 1rem;
|
||||
}
|
||||
|
||||
.h-40 {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.h-48 {
|
||||
height: 12rem;
|
||||
}
|
||||
|
||||
.h-5 {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
|
@ -870,6 +907,10 @@ video {
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
.h-64 {
|
||||
height: 16rem;
|
||||
}
|
||||
|
||||
.min-h-\[64px\] {
|
||||
min-height: 64px;
|
||||
}
|
||||
|
|
@ -958,6 +999,10 @@ video {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.w-64 {
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
|
@ -990,6 +1035,10 @@ video {
|
|||
max-width: 24rem;
|
||||
}
|
||||
|
||||
.max-w-xs {
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
|
@ -1020,6 +1069,12 @@ video {
|
|||
resize: none;
|
||||
}
|
||||
|
||||
.appearance-none {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
|
@ -1048,6 +1103,10 @@ video {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
|
@ -1206,6 +1265,10 @@ video {
|
|||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.border-l {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.border-t {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
|
@ -1219,6 +1282,16 @@ video {
|
|||
border-color: rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.border-gray-100 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-gray-200 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-gray-300 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
|
||||
|
|
@ -1258,6 +1331,11 @@ video {
|
|||
--tw-border-opacity: 0.2;
|
||||
}
|
||||
|
||||
.bg-amber-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-black {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
|
||||
|
|
@ -1275,7 +1353,7 @@ video {
|
|||
|
||||
.bg-floral-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(251 249 243 / var(--tw-bg-opacity, 1));
|
||||
background-color: rgb(252 248 243 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-gray-100 {
|
||||
|
|
@ -1350,6 +1428,14 @@ video {
|
|||
--tw-bg-opacity: 0.7;
|
||||
}
|
||||
|
||||
.bg-center {
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.bg-no-repeat {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.object-contain {
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
|
|
@ -1478,6 +1564,10 @@ video {
|
|||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.pr-6 {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.pt-12 {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
|
@ -1502,6 +1592,14 @@ video {
|
|||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.pr-10 {
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
.pr-3 {
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -1518,10 +1616,6 @@ video {
|
|||
font-family: Playfair Display, serif;
|
||||
}
|
||||
|
||||
.font-poppins {
|
||||
font-family: Poppins, sans-serif;
|
||||
}
|
||||
|
||||
.font-sans {
|
||||
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
|
|
@ -1706,10 +1800,25 @@ video {
|
|||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-gray-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-gray-200 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 231 235 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-opacity-90 {
|
||||
--tw-text-opacity: 0.9;
|
||||
}
|
||||
|
||||
.underline {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -1799,6 +1908,12 @@ video {
|
|||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.hover\:scale-105:hover {
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.hover\:scale-110:hover {
|
||||
--tw-scale-x: 1.1;
|
||||
--tw-scale-y: 1.1;
|
||||
|
|
@ -1835,6 +1950,10 @@ video {
|
|||
background-color: rgb(184 135 63 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-uc-gold\/90:hover {
|
||||
background-color: rgb(184 135 63 / 0.9);
|
||||
}
|
||||
|
||||
.hover\:bg-opacity-80:hover {
|
||||
--tw-bg-opacity: 0.8;
|
||||
}
|
||||
|
|
@ -1843,6 +1962,20 @@ video {
|
|||
--tw-bg-opacity: 0.9;
|
||||
}
|
||||
|
||||
.hover\:bg-gradient-to-r:hover {
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.hover\:from-amber-500:hover {
|
||||
--tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.hover\:to-amber-600:hover {
|
||||
--tw-gradient-to: #d97706 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.hover\:text-black:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity, 1));
|
||||
|
|
@ -1853,11 +1986,21 @@ video {
|
|||
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:text-gray-800:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(31 41 55 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:text-white:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:text-gray-200:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 231 235 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:underline:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
|
|
@ -1881,11 +2024,25 @@ video {
|
|||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.hover\:shadow-amber-200\/50:hover {
|
||||
--tw-shadow-color: rgb(253 230 138 / 0.5);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.hover\:backdrop-blur-sm:hover {
|
||||
--tw-backdrop-blur: blur(4px);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
|
||||
.focus\:border-black:focus {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.focus\:border-transparent:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.focus\:border-uc-gold:focus {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(184 135 63 / var(--tw-border-opacity, 1));
|
||||
|
|
@ -1896,6 +2053,17 @@ video {
|
|||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.focus\:ring-2:focus {
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
}
|
||||
|
||||
.focus\:ring-uc-gold:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(184 135 63 / var(--tw-ring-opacity, 1));
|
||||
}
|
||||
|
||||
.focus-visible\:ring-2:focus-visible {
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
|
|
@ -1907,6 +2075,12 @@ video {
|
|||
--tw-ring-color: rgb(184 135 63 / var(--tw-ring-opacity, 1));
|
||||
}
|
||||
|
||||
.active\:scale-95:active {
|
||||
--tw-scale-x: .95;
|
||||
--tw-scale-y: .95;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:scale-105 {
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
|
|
|
|||
|
|
@ -6,14 +6,13 @@ module.exports = {
|
|||
fontFamily: {
|
||||
montserrat: ["Montserrat", "sans-serif"],
|
||||
playfair: ["Playfair Display", "serif"],
|
||||
poppins: ["Poppins", "sans-serif"],
|
||||
},
|
||||
colors: {
|
||||
white: "#FFFFFF",
|
||||
"dark-charcoal": "#2F2F2F",
|
||||
black: "#000000",
|
||||
"uc-gold": "#B8873F",
|
||||
"floral-white": "#FBF9F3",
|
||||
"floral-white": "#FCF8F3",
|
||||
axolotl: "#6F776B",
|
||||
"dark-charcoal-ii": "#212121",
|
||||
"eerie-black": "#1A1A1A",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue