feat: add product catalog and product detail pages
This commit is contained in:
parent
9a3a106fca
commit
0d5fd84762
13 changed files with 4256 additions and 555 deletions
384
index.html
384
index.html
|
|
@ -109,7 +109,9 @@
|
|||
</head>
|
||||
<body class="bg-gray-50 font-sans text-gray-800">
|
||||
<!-- Header -->
|
||||
<header class="absolute w-full h-28 top-0 left-0 bg-white shadow-lg z-50">
|
||||
<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"
|
||||
|
|
@ -431,213 +433,231 @@
|
|||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12"
|
||||
>
|
||||
<!-- Product Card 1: Lounge Chairs -->
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/lounge_chair.jpg"
|
||||
alt="Lounge Chairs"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<a href="product-catalog.html?category=seating" class="block">
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/lounge_chair.jpg"
|
||||
alt="Lounge Chairs"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Lounge Chairs
|
||||
</h3>
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Stylish cafe chair
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Lounge Chairs
|
||||
</h3>
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Stylish cafe chair
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Product Card 2: Office Chairs -->
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/office_chair.jpg"
|
||||
alt="Office Chairs"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<a href="product-catalog.html?category=seating" class="block">
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/office_chair.jpg"
|
||||
alt="Office Chairs"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Office Chairs
|
||||
</h3>
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Luxury big sofa
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Office Chairs
|
||||
</h3>
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Luxury big sofa
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Product Card 3: Conference Room -->
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/conference_rooms.jpg"
|
||||
alt="Conference Room"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<a href="product-catalog.html?category=tables" class="block">
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/conference_rooms.jpg"
|
||||
alt="Conference Room"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Conference Room
|
||||
</h3>
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Tables
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Conference Room
|
||||
</h3>
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Tables
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Product Card 4: Storage -->
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/storage.jpg"
|
||||
alt="Storage"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<a href="product-catalog.html?category=storage" class="block">
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/storage.jpg"
|
||||
alt="Storage"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Storage
|
||||
</h3>
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Outdoor bar table and stool
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Storage
|
||||
</h3>
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Outdoor bar table and stool
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Product Card 5: Kitchen -->
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/kitchen.jpg"
|
||||
alt="Kitchen"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<a href="product-catalog.html?category=workspace" class="block">
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/kitchen.jpg"
|
||||
alt="Kitchen"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Kitchen
|
||||
</h3>
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Night lamp
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Kitchen
|
||||
</h3>
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Night lamp
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Product Card 6: Chairs -->
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/chairs.jpg"
|
||||
alt="Chairs"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<a href="product-catalog.html?category=seating" class="block">
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/chairs.jpg"
|
||||
alt="Chairs"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Chairs
|
||||
</h3>
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Small mug
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Chairs
|
||||
</h3>
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Small mug
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Product Card 7: Pods -->
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/pods.jpg"
|
||||
alt="Pods"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<a href="product-catalog.html?category=seating" class="block">
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/pods.jpg"
|
||||
alt="Pods"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Pods
|
||||
</h3>
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Cute bed set
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Pods
|
||||
</h3>
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Cute bed set
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Product Card 8: Potty -->
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/potty.jpg"
|
||||
alt="Potty"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<a href="product-catalog.html?category=workspace" class="block">
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/potty.jpg"
|
||||
alt="Potty"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Potty
|
||||
</h3>
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Minimalist flower pot
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Potty
|
||||
</h3>
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Minimalist flower pot
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Call to Action Button -->
|
||||
<div class="text-center">
|
||||
<button
|
||||
class="bg-white border border-uc-gold text-uc-gold font-playfair font-semibold text-base px-8 py-3 rounded-lg hover:bg-uc-gold hover:text-white transition-all"
|
||||
>
|
||||
Browse product catalog
|
||||
</button>
|
||||
<a href="product-catalog.html">
|
||||
<button
|
||||
class="bg-white border border-uc-gold text-uc-gold font-playfair font-semibold text-base px-8 py-3 rounded-lg hover:bg-uc-gold hover:text-white transition-all"
|
||||
>
|
||||
Browse product catalog
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue