From b81f6ef3bbe86c6f1420e32cb48dd04ef80b3f23 Mon Sep 17 00:00:00 2001
From: Aigars Silkalns <aigars.silkalns@gmail.com>
Date: Mon, 4 Aug 2025 14:17:17 +0300
Subject: [PATCH] Working eCommerce pages

---
 .../src/assets/images/eco-product-img-1.png   | Bin 0 -> 1833 bytes
 .../src/assets/images/eco-product-img-2.png   | Bin 0 -> 1833 bytes
 .../src/assets/images/eco-product-img-3.png   | Bin 0 -> 1833 bytes
 .../src/assets/images/eco-product-img-4.png   | Bin 0 -> 1833 bytes
 .../src/assets/images/eco-slider-img-1.png    | Bin 0 -> 2393 bytes
 .../src/assets/images/eco-slider-img-2.png    | Bin 0 -> 2393 bytes
 .../src/assets/images/eco-slider-img-3.png    | Bin 0 -> 2393 bytes
 concept-modern/src/js/app.js                  |   3 +
 concept-modern/src/js/pages/products.js       |   7 +-
 .../src/pages/ecommerce/checkout.html         |  22 +-
 .../src/pages/ecommerce/product-single.html   |  20 +-
 .../src/pages/ecommerce/products.html         |  84 ++---
 concept-modern/src/partials/layouts/base.hbs  |  18 +-
 concept-modern/src/partials/layouts/main.hbs  |  13 +
 .../src/scss/components/_buttons.scss         |  45 +++
 concept-modern/src/scss/main.scss             |   2 +
 concept-modern/src/scss/pages/_ecommerce.scss | 284 ++++++++++++++++
 .../src/scss/pages/_influencer-profile.scss   | 305 ++++++++++++++++++
 concept-modern/src/test.html                  |  46 +++
 concept-modern/vite.config.js                 |   1 +
 20 files changed, 775 insertions(+), 75 deletions(-)
 create mode 100644 concept-modern/src/assets/images/eco-product-img-1.png
 create mode 100644 concept-modern/src/assets/images/eco-product-img-2.png
 create mode 100644 concept-modern/src/assets/images/eco-product-img-3.png
 create mode 100644 concept-modern/src/assets/images/eco-product-img-4.png
 create mode 100644 concept-modern/src/assets/images/eco-slider-img-1.png
 create mode 100644 concept-modern/src/assets/images/eco-slider-img-2.png
 create mode 100644 concept-modern/src/assets/images/eco-slider-img-3.png
 create mode 100644 concept-modern/src/partials/layouts/main.hbs
 create mode 100644 concept-modern/src/scss/pages/_ecommerce.scss
 create mode 100644 concept-modern/src/scss/pages/_influencer-profile.scss
 create mode 100644 concept-modern/src/test.html

diff --git a/concept-modern/src/assets/images/eco-product-img-1.png b/concept-modern/src/assets/images/eco-product-img-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5547cc049be04588a04fa9762d7afddbe5547a3
GIT binary patch
literal 1833
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
XH1Yov*d=n$|2vVLjiWW)(m(Alqhlp<

literal 0
HcmV?d00001

diff --git a/concept-modern/src/assets/images/eco-product-img-2.png b/concept-modern/src/assets/images/eco-product-img-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5547cc049be04588a04fa9762d7afddbe5547a3
GIT binary patch
literal 1833
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
XH1Yov*d=n$|2vVLjiWW)(m(Alqhlp<

literal 0
HcmV?d00001

diff --git a/concept-modern/src/assets/images/eco-product-img-3.png b/concept-modern/src/assets/images/eco-product-img-3.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5547cc049be04588a04fa9762d7afddbe5547a3
GIT binary patch
literal 1833
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
XH1Yov*d=n$|2vVLjiWW)(m(Alqhlp<

literal 0
HcmV?d00001

diff --git a/concept-modern/src/assets/images/eco-product-img-4.png b/concept-modern/src/assets/images/eco-product-img-4.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5547cc049be04588a04fa9762d7afddbe5547a3
GIT binary patch
literal 1833
zcma)5cTm%b68=F@N@!9<>7bMx5DCc9L!Uq(5K4d}^cE9HsL~<<>BWFN4AP7AmI#C%
z#5+z=0TGn?L>~_XK>`mEQAD`BKi?m3=5}WHo88%OcV~7t7ww1;5|9=E06@sj*4l-G
z>l{7i195B?M#hZ;JU9!K1pssvf=>d@aeT!fTNe}nB&h;GY6d5l6H5IE05`P(VA~%6
zj7kAODzb9O*#rQ%_RtP)HY^sauCC6-#YIt3k)NNRhlfW}QW6e_=j7zHx3_zGdMYU?
z@$vDUKYw0EM#j<6F)l8SQ?s(NvbVQ4C@ARa)vI!HavmNYot>RgQBjtbmIDI=ckkX6
z5fLGi$*!)h&CSiCqM{`wCAV+i=HlWK5D>s(v3YrUMMXtKB2ije8i_;-3JP*_bKkjh
zConJ&1OmZeFexdiD_5@M=H}+-=cCc+3l}a74Gjqi3Dwlpba!{Fs;VX?Cemm$O-)T<
zVPO;sg~#K=!^0^Q3J!<EU@(_2UuG~EEiEm>!^4*@UE<~C?dj?9^Yg2%t<~4pH!?D+
zs;bJ&%q%M_OHNKME-vot>yww4x3#tH=;*k0>(=$_*GVLjySsaJb+v|uhPt|XTU%Re
zYpc1rd1`9v!-o&W#Kd%TbgZnb($dl@Dk=;O4NXi;6ciK;3=A3?8e(E%Y;0^|V`HPE
zqqViQp-`x}xHuRLPDn_Qm6g4C@uIG-Zh3imL_|b-dU`=Yfwi@@v9YnTvT|2fS5{V5
zc6Ro;bLaZ|`z0hKnwpxz!oosBL+$PDot>S1eSOu`)CdGZeSN*DscC6x>AidRAP`7!
zaIlw`S3p2ONJxl-g9DSvjEsydEG$GI5Dy+axN+l#nVFftzyIm!X<5Pmg|k1dKzoFB
z!*7q02015$w6nHwOIT(v{=iCLWXJbG1FF$oB4BmJI_3llonh%AIKx^Wl2%Hzvwj`f
zD8_KcLnM3MOYluJpN`X+my<gkk6&^-nK~U<?JZm*!+SO#-#VJCHtc!IY4kVb6l?QD
zWkPwP<~L{c`*ckWMvFIw$y}ZOrTK-aXeS*~_=fH)PN3c_+A*Bd=h^6``gSCc?8YiK
zBnRp9;7=7+9sA!)|E<+YWXsKF)w1ZWK2K!+`RkLpmA;JC(4HjsP}=h1tM<h#Dc_xZ
zynRB<U@sz<=vbdJ{HC&I>X$7QH4$rO(EjRELBi&a@NmQZs)ZHUVWxX<J99it$d-K2
zv(zkhZ9(Jfiw9#<lvdLGkLRGa{p@DpEX=yn)?BzQz3wEuWUJSEdetVoVr=$t#}Oi0
z;SYhW!-sh$-OXD!b~W`kaj)xwd`+Mu0bk?W$bVAR8fJniM}(USRfn5SNCeA0rF0?e
zWzJ~q<W$fszgjhNiy5^i8llSmRF)xz0}YKfcCQNYDp%F7?asiry!))YHpiedrTkm$
z)VJ^3pDiwL_@pCQYqFFDtX)>aip5x%-XeQN7iyrJWFbk(mOlFjU(rt;lxq6t-{*XG
z?fh8l^8K!t%)+4d9%)$!;``549t^qu_~|6_H&fz1*#ROKN4;{eo9=Y*;b^4nd+qWM
zK{&H{6iTl?tzC_yj_i`CZL_<R)$>B569{C6_u6<IHbz&w-&Upnxc+rTqZ8{0PJ_FK
z8%2Jb++;7!eFYnWXDXF>$2z;TlrX#-MWsnAKd{~KVeYb73uA_cl=SWpeUeBX+@Q}u
zk}ngeYprkD;S^{|x5xhAKoe^o1(Emh9~h^o`z>WQzn#`Qr7O$&jlW6mHLp%OMh%tv
zK#E=CRQDw0s}HGe!H;Ms$&Oz2O7jT|(41`WhrKte`fSqU<W~bYDJ4v$zz!uPh=e^D
zxxVIb47#>FWgeBF=Wb6mlbEzZ>IGNS=NVtKfgBcCe~Ao3$77dN7&LD>GCn_Yb|QfE
zX>#Bm9AjYi`Myj{(;q99s_`xDODF240^20qcQr;Yme4gq{_<)<966PNSu4+Q5xMxR
z5z@FK<M)NN?oIo;)cU-%p7uhJSEx{97p@V3WjJmoe%{<!h&O2(519KHj#4{1-u-}!
znSwTIy+&*o*oi+K@r*bLe2eQ~V?je_gkc534>rj=I>jz$etE?C)0cNpB1EY388dXL
zx`v8BN_qe7XWz()Bl!S7DT#MQ9~r+>MVC#yGfU{6o}hxx{v&ucqE}8XIp|rV><1?{
z;R2WOXG%ZI<P2MEG3cY!aa!xM!$)eTqaV-OHH%y2z!CCXf8&jTf2C|kfEaTYv4YzH
zoP3p78_(F_fY=bDpy&_|06N+*11%U#O9$o#gBigLjdXRiw0||y)~=jry!k%_Vni@L
XH1Yov*d=n$|2vVLjiWW)(m(Alqhlp<

literal 0
HcmV?d00001

diff --git a/concept-modern/src/assets/images/eco-slider-img-1.png b/concept-modern/src/assets/images/eco-slider-img-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..a539e614fd7f33fd6c0b50c27809030e6daf938d
GIT binary patch
literal 2393
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
Uf5Te2%Gf`NaF`2}W`8;BZ*sXJ^#A|>

literal 0
HcmV?d00001

diff --git a/concept-modern/src/assets/images/eco-slider-img-2.png b/concept-modern/src/assets/images/eco-slider-img-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..a539e614fd7f33fd6c0b50c27809030e6daf938d
GIT binary patch
literal 2393
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
Uf5Te2%Gf`NaF`2}W`8;BZ*sXJ^#A|>

literal 0
HcmV?d00001

diff --git a/concept-modern/src/assets/images/eco-slider-img-3.png b/concept-modern/src/assets/images/eco-slider-img-3.png
new file mode 100644
index 0000000000000000000000000000000000000000..a539e614fd7f33fd6c0b50c27809030e6daf938d
GIT binary patch
literal 2393
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
Uf5Te2%Gf`NaF`2}W`8;BZ*sXJ^#A|>

literal 0
HcmV?d00001

diff --git a/concept-modern/src/js/app.js b/concept-modern/src/js/app.js
index 8c4f664..a7ded7e 100644
--- a/concept-modern/src/js/app.js
+++ b/concept-modern/src/js/app.js
@@ -1,6 +1,9 @@
 // Main Application JavaScript
 import * as bootstrap from 'bootstrap';
 
+// Make Bootstrap available globally
+window.bootstrap = bootstrap;
+
 // Import components
 import { initSidebar } from './components/sidebar.js';
 import { initTooltips } from './components/tooltips.js';
diff --git a/concept-modern/src/js/pages/products.js b/concept-modern/src/js/pages/products.js
index aecf5ef..5b0eafe 100644
--- a/concept-modern/src/js/pages/products.js
+++ b/concept-modern/src/js/pages/products.js
@@ -1,3 +1,6 @@
+// Import Bootstrap
+import * as bootstrap from 'bootstrap';
+
 // E-commerce Products Page functionality
 export function initializeProducts() {
     // Initialize tooltips
@@ -220,7 +223,9 @@ function handleAddProduct() {
     
     // Close modal
     const modal = bootstrap.Modal.getInstance(document.getElementById('addProductModal'));
-    modal.hide();
+    if (modal) {
+        modal.hide();
+    }
     
     // Reset form
     document.getElementById('addProductForm').reset();
diff --git a/concept-modern/src/pages/ecommerce/checkout.html b/concept-modern/src/pages/ecommerce/checkout.html
index a290324..7c03f25 100644
--- a/concept-modern/src/pages/ecommerce/checkout.html
+++ b/concept-modern/src/pages/ecommerce/checkout.html
@@ -240,26 +240,26 @@
                                 <div class="order-items mb-3">
                                     <div class="order-item d-flex justify-content-between align-items-start mb-3">
                                         <div class="d-flex">
-                                            <img src="/assets/images/eco-product-img-1.png" alt="Product" width="60" class="me-3">
+                                            <img src="https://placehold.co/80x80/5969ff/ffffff?text=iPhone&font=montserrat" alt="Product" width="60" class="me-3">
                                             <div>
-                                                <h6 class="mb-1">iPhone 15 Pro Max</h6>
-                                                <small class="text-muted">512GB, Natural Titanium</small>
+                                                <h6 class="mb-1">iPhone 18 Pro Max</h6>
+                                                <small class="text-muted">1TB, Cosmic Titanium</small>
                                                 <div class="text-muted small">Qty: 1</div>
                                             </div>
                                         </div>
-                                        <span class="fw-bold">$1,399</span>
+                                        <span class="fw-bold">$1,899</span>
                                     </div>
                                     
                                     <div class="order-item d-flex justify-content-between align-items-start mb-3">
                                         <div class="d-flex">
-                                            <img src="/assets/images/eco-product-img-3.png" alt="Product" width="60" class="me-3">
+                                            <img src="https://placehold.co/80x80/ff407b/ffffff?text=AirPods&font=montserrat" alt="Product" width="60" class="me-3">
                                             <div>
-                                                <h6 class="mb-1">AirPods Pro</h6>
-                                                <small class="text-muted">2nd Generation</small>
+                                                <h6 class="mb-1">AirPods Pro 3</h6>
+                                                <small class="text-muted">3rd Generation with Lossless</small>
                                                 <div class="text-muted small">Qty: 1</div>
                                             </div>
                                         </div>
-                                        <span class="fw-bold">$249</span>
+                                        <span class="fw-bold">$299</span>
                                     </div>
                                 </div>
                                 
@@ -280,7 +280,7 @@
                                 <div class="order-totals">
                                     <div class="d-flex justify-content-between mb-2">
                                         <span>Subtotal</span>
-                                        <span>$1,648.00</span>
+                                        <span>$2,198.00</span>
                                     </div>
                                     <div class="d-flex justify-content-between mb-2">
                                         <span>Shipping</span>
@@ -288,12 +288,12 @@
                                     </div>
                                     <div class="d-flex justify-content-between mb-2">
                                         <span>Tax</span>
-                                        <span>$149.67</span>
+                                        <span>$197.82</span>
                                     </div>
                                     <hr>
                                     <div class="d-flex justify-content-between mb-3">
                                         <strong>Total</strong>
-                                        <strong class="text-primary h5 mb-0">$1,812.67</strong>
+                                        <strong class="text-primary h5 mb-0">$2,410.82</strong>
                                     </div>
                                 </div>
                                 
diff --git a/concept-modern/src/pages/ecommerce/product-single.html b/concept-modern/src/pages/ecommerce/product-single.html
index b23bf40..2d6d6ed 100644
--- a/concept-modern/src/pages/ecommerce/product-single.html
+++ b/concept-modern/src/pages/ecommerce/product-single.html
@@ -41,13 +41,13 @@
                                     <div class="col-xl-6 col-lg-6 col-md-12">
                                         <div class="product-images">
                                             <div class="main-image mb-3">
-                                                <img src="/assets/images/eco-product-img-1.png" alt="Product" class="img-fluid" id="mainImage">
+                                                <img src="https://placehold.co/600x600/5969ff/ffffff?text=iPhone+18+Pro+Max&font=montserrat" alt="Product" class="img-fluid" id="mainImage">
                                             </div>
                                             <div class="image-thumbnails d-flex gap-2">
-                                                <img src="/assets/images/eco-product-img-1.png" alt="Thumb 1" class="img-thumbnail active" width="80" onclick="changeImage(this)">
-                                                <img src="/assets/images/eco-product-img-2.png" alt="Thumb 2" class="img-thumbnail" width="80" onclick="changeImage(this)">
-                                                <img src="/assets/images/eco-product-img-3.png" alt="Thumb 3" class="img-thumbnail" width="80" onclick="changeImage(this)">
-                                                <img src="/assets/images/eco-product-img-4.png" alt="Thumb 4" class="img-thumbnail" width="80" onclick="changeImage(this)">
+                                                <img src="https://placehold.co/600x600/5969ff/ffffff?text=iPhone+18+Pro+Max&font=montserrat" alt="Thumb 1" class="img-thumbnail active" width="80" onclick="changeImage(this)">
+                                                <img src="https://placehold.co/600x600/ff407b/ffffff?text=iPhone+18+Side&font=montserrat" alt="Thumb 2" class="img-thumbnail" width="80" onclick="changeImage(this)">
+                                                <img src="https://placehold.co/600x600/25d5f2/ffffff?text=iPhone+18+Back&font=montserrat" alt="Thumb 3" class="img-thumbnail" width="80" onclick="changeImage(this)">
+                                                <img src="https://placehold.co/600x600/ffc750/ffffff?text=iPhone+18+Camera&font=montserrat" alt="Thumb 4" class="img-thumbnail" width="80" onclick="changeImage(this)">
                                             </div>
                                         </div>
                                     </div>
@@ -72,8 +72,8 @@
                                             </div>
                                             
                                             <div class="price mb-4">
-                                                <h3 class="text-primary mb-0">$1,199.00</h3>
-                                                <del class="text-muted">$1,399.00</del>
+                                                <h3 class="text-primary mb-0">$1,899.00</h3>
+                                                <del class="text-muted">$2,099.00</del>
                                                 <span class="badge bg-danger ms-2">-14% OFF</span>
                                             </div>
                                             
@@ -393,7 +393,7 @@
                                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                                         <div class="card product-card h-100">
                                             <div class="card-header p-0">
-                                                <img src="/assets/images/eco-product-img-2.png" alt="Product" class="img-fluid">
+                                                <img src="https://placehold.co/600x600/ff407b/ffffff?text=iPhone+18+Side&font=montserrat" alt="Product" class="img-fluid">
                                             </div>
                                             <div class="card-body">
                                                 <h6 class="card-title mb-1">
@@ -417,7 +417,7 @@
                                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                                         <div class="card product-card h-100">
                                             <div class="card-header p-0">
-                                                <img src="/assets/images/eco-product-img-3.png" alt="Product" class="img-fluid">
+                                                <img src="https://placehold.co/600x600/25d5f2/ffffff?text=iPhone+18+Back&font=montserrat" alt="Product" class="img-fluid">
                                             </div>
                                             <div class="card-body">
                                                 <h6 class="card-title mb-1">
@@ -441,7 +441,7 @@
                                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                                         <div class="card product-card h-100">
                                             <div class="card-header p-0">
-                                                <img src="/assets/images/eco-product-img-4.png" alt="Product" class="img-fluid">
+                                                <img src="https://placehold.co/600x600/ffc750/ffffff?text=iPhone+18+Camera&font=montserrat" alt="Product" class="img-fluid">
                                             </div>
                                             <div class="card-body">
                                                 <h6 class="card-title mb-1">
diff --git a/concept-modern/src/pages/ecommerce/products.html b/concept-modern/src/pages/ecommerce/products.html
index c9aa903..db737f6 100644
--- a/concept-modern/src/pages/ecommerce/products.html
+++ b/concept-modern/src/pages/ecommerce/products.html
@@ -37,34 +37,50 @@
                         <div class="card">
                             <div class="card-body">
                                 <div class="row align-items-center">
-                                    <div class="col-xl-6 col-lg-6 col-md-12">
-                                        <div class="input-group">
+                                    <div class="col-xl-4 col-lg-4 col-md-12 mb-3 mb-lg-0">
+                                        <div class="input-group input-group-lg">
                                             <input type="text" class="form-control" placeholder="Search products..." id="productSearch">
                                             <button class="btn btn-primary" type="button">
                                                 <i class="fas fa-search"></i>
                                             </button>
                                         </div>
                                     </div>
-                                    <div class="col-xl-6 col-lg-6 col-md-12">
-                                        <div class="d-flex gap-2 justify-content-lg-end mt-3 mt-lg-0">
-                                            <select class="form-select" id="categoryFilter">
-                                                <option value="">All Categories</option>
-                                                <option value="electronics">Electronics</option>
-                                                <option value="fashion">Fashion</option>
-                                                <option value="home">Home & Garden</option>
-                                                <option value="sports">Sports & Outdoors</option>
-                                                <option value="books">Books</option>
-                                            </select>
-                                            <select class="form-select" id="sortBy">
-                                                <option value="featured">Featured</option>
-                                                <option value="price-low">Price: Low to High</option>
-                                                <option value="price-high">Price: High to Low</option>
-                                                <option value="newest">Newest First</option>
-                                                <option value="rating">Best Rated</option>
-                                            </select>
-                                            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addProductModal">
-                                                <i class="fas fa-plus me-1"></i>Add Product
-                                            </button>
+                                    <div class="col-xl-8 col-lg-8 col-md-12">
+                                        <div class="row g-2">
+                                            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
+                                                <select class="form-select" id="categoryFilter">
+                                                    <option value="">All Categories</option>
+                                                    <option value="electronics">Electronics</option>
+                                                    <option value="fashion">Fashion</option>
+                                                    <option value="home">Home & Garden</option>
+                                                    <option value="sports">Sports & Outdoors</option>
+                                                    <option value="books">Books</option>
+                                                </select>
+                                            </div>
+                                            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
+                                                <select class="form-select" id="sortBy">
+                                                    <option value="featured">Featured</option>
+                                                    <option value="price-low">Price: Low to High</option>
+                                                    <option value="price-high">Price: High to Low</option>
+                                                    <option value="newest">Newest First</option>
+                                                    <option value="rating">Best Rated</option>
+                                                </select>
+                                            </div>
+                                            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
+                                                <select class="form-select" id="priceFilter">
+                                                    <option value="">All Prices</option>
+                                                    <option value="0-50">Under $50</option>
+                                                    <option value="50-200">$50 - $200</option>
+                                                    <option value="200-500">$200 - $500</option>
+                                                    <option value="500-1000">$500 - $1,000</option>
+                                                    <option value="1000+">Over $1,000</option>
+                                                </select>
+                                            </div>
+                                            <div class="col-xl-3 col-lg-12 col-md-6 col-sm-6">
+                                                <button class="btn btn-success w-100" data-bs-toggle="modal" data-bs-target="#addProductModal">
+                                                    <i class="fas fa-plus me-1"></i>Add Product
+                                                </button>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -135,7 +151,7 @@
                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                         <div class="card product-card h-100">
                             <div class="card-header p-0 position-relative">
-                                <img src="/assets/images/eco-product-img-1.png" alt="Product" class="img-fluid">
+                                <img src="https://placehold.co/400x400/5969ff/ffffff?text=iPhone+18+Pro+Max&font=montserrat" alt="iPhone 18 Pro Max" class="img-fluid">
                                 <span class="badge bg-danger position-absolute top-0 end-0 m-2">-20%</span>
                                 <div class="product-actions">
                                     <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
@@ -179,7 +195,7 @@
                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                         <div class="card product-card h-100">
                             <div class="card-header p-0 position-relative">
-                                <img src="/assets/images/eco-product-img-2.png" alt="Product" class="img-fluid">
+                                <img src="https://placehold.co/400x400/ff407b/ffffff?text=AirPods+Pro+3&font=montserrat" alt="AirPods Pro 3" class="img-fluid">
                                 <span class="badge bg-success position-absolute top-0 end-0 m-2">New</span>
                                 <div class="product-actions">
                                     <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
@@ -222,7 +238,7 @@
                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                         <div class="card product-card h-100">
                             <div class="card-header p-0 position-relative">
-                                <img src="/assets/images/eco-product-img-3.png" alt="Product" class="img-fluid">
+                                <img src="https://placehold.co/400x400/25d5f2/ffffff?text=Apple+Watch+Ultra+3&font=montserrat" alt="Apple Watch Ultra 3" class="img-fluid">
                                 <div class="product-actions">
                                     <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
                                         <i class="fas fa-eye"></i>
@@ -264,7 +280,7 @@
                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                         <div class="card product-card h-100">
                             <div class="card-header p-0 position-relative">
-                                <img src="/assets/images/eco-product-img-4.png" alt="Product" class="img-fluid">
+                                <img src="https://placehold.co/400x400/ffc750/ffffff?text=MacBook+Pro+M5&font=montserrat" alt="MacBook Pro M5" class="img-fluid">
                                 <span class="badge bg-danger position-absolute top-0 end-0 m-2">Hot</span>
                                 <div class="product-actions">
                                     <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
@@ -307,9 +323,7 @@
                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                         <div class="card product-card h-100">
                             <div class="card-header p-0 position-relative">
-                                <div class="placeholder-image d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
-                                    <i class="fas fa-laptop fa-3x text-muted"></i>
-                                </div>
+                                <img src="https://placehold.co/400x400/fd5190/ffffff?text=Dell+XPS+16&font=montserrat" alt="Dell XPS 16" class="img-fluid">
                                 <div class="product-actions">
                                     <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
                                         <i class="fas fa-eye"></i>
@@ -350,9 +364,7 @@
                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                         <div class="card product-card h-100">
                             <div class="card-header p-0 position-relative">
-                                <div class="placeholder-image d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
-                                    <i class="fas fa-tablet-alt fa-3x text-muted"></i>
-                                </div>
+                                <img src="https://placehold.co/400x400/28b62c/ffffff?text=iPad+Pro+M4&font=montserrat" alt="iPad Pro M4" class="img-fluid">
                                 <span class="badge bg-info position-absolute top-0 end-0 m-2">Popular</span>
                                 <div class="product-actions">
                                     <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
@@ -394,9 +406,7 @@
                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                         <div class="card product-card h-100">
                             <div class="card-header p-0 position-relative">
-                                <div class="placeholder-image d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
-                                    <i class="fas fa-camera fa-3x text-muted"></i>
-                                </div>
+                                <img src="https://placehold.co/400x400/158cba/ffffff?text=Canon+EOS+R5&font=montserrat" alt="Canon EOS R5" class="img-fluid">
                                 <div class="product-actions">
                                     <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
                                         <i class="fas fa-eye"></i>
@@ -437,9 +447,7 @@
                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                         <div class="card product-card h-100">
                             <div class="card-header p-0 position-relative">
-                                <div class="placeholder-image d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
-                                    <i class="fas fa-gamepad fa-3x text-muted"></i>
-                                </div>
+                                <img src="https://placehold.co/400x400/ff6f69/ffffff?text=PlayStation+5+Pro&font=montserrat" alt="PlayStation 5 Pro" class="img-fluid">
                                 <span class="badge bg-danger position-absolute top-0 end-0 m-2">-15%</span>
                                 <div class="product-actions">
                                     <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
diff --git a/concept-modern/src/partials/layouts/base.hbs b/concept-modern/src/partials/layouts/base.hbs
index 6b9a4a4..40a027b 100644
--- a/concept-modern/src/partials/layouts/base.hbs
+++ b/concept-modern/src/partials/layouts/base.hbs
@@ -1,23 +1,11 @@
 <!doctype html>
 <html lang="en">
 <head>
-    {{> layouts/head }}
+    {{#> head}}{{/head}}
 </head>
 <body>
-    <div class="dashboard-main-wrapper">
-        {{> layouts/header }}
-        {{> layouts/sidebar }}
-        
-        <div class="dashboard-wrapper">
-            <div class="dashboard-content">
-                <div class="container-fluid">
-                    {{{ body }}}
-                </div>
-            </div>
-            {{> layouts/footer }}
-        </div>
-    </div>
+    {{#> body}}{{/body}}
     
-    {{> layouts/scripts }}
+    {{#> scripts}}{{/scripts}}
 </body>
 </html>
\ No newline at end of file
diff --git a/concept-modern/src/partials/layouts/main.hbs b/concept-modern/src/partials/layouts/main.hbs
new file mode 100644
index 0000000..8c9aa25
--- /dev/null
+++ b/concept-modern/src/partials/layouts/main.hbs
@@ -0,0 +1,13 @@
+{{#> layouts/base}}
+    {{#*inline "head"}}
+        {{> layouts/head title=title}}
+    {{/inline}}
+    
+    {{#*inline "body"}}
+        {{> content}}
+    {{/inline}}
+    
+    {{#*inline "scripts"}}
+        {{> layouts/scripts}}
+    {{/inline}}
+{{/layouts/base}}
\ No newline at end of file
diff --git a/concept-modern/src/scss/components/_buttons.scss b/concept-modern/src/scss/components/_buttons.scss
index 2b559d5..755a22b 100644
--- a/concept-modern/src/scss/components/_buttons.scss
+++ b/concept-modern/src/scss/components/_buttons.scss
@@ -22,4 +22,49 @@
     &.active {
         color: $white !important;
     }
+}
+
+// Dark buttons should have white text
+.btn-dark,
+.btn-secondary {
+    color: $white !important;
+    
+    &:hover,
+    &:focus,
+    &:active,
+    &.active,
+    &:disabled,
+    &.disabled {
+        color: $white !important;
+    }
+}
+
+// Pagination styles
+.pagination {
+    .page-item {
+        &.active .page-link {
+            color: $white !important;
+            background-color: $primary;
+            border-color: $primary;
+        }
+        
+        .page-link {
+            color: $primary;
+            border-color: #dee2e6;
+            
+            &:hover {
+                color: $white !important;
+                background-color: $primary;
+                border-color: $primary;
+            }
+            
+            &:focus {
+                box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
+            }
+        }
+        
+        &.disabled .page-link {
+            color: #6c757d;
+        }
+    }
 }
\ No newline at end of file
diff --git a/concept-modern/src/scss/main.scss b/concept-modern/src/scss/main.scss
index 901b9c3..1a797d7 100644
--- a/concept-modern/src/scss/main.scss
+++ b/concept-modern/src/scss/main.scss
@@ -28,11 +28,13 @@
 @import "pages/dashboard";
 @import "pages/influencer";
 @import "pages/influencer-finder";
+@import "pages/influencer-profile";
 @import "pages/calendar";
 @import "pages/chat";
 @import "pages/settings";
 @import "pages/users";
 @import "pages/timeline";
+@import "pages/ecommerce";
 @import "pages/products";
 @import "pages/product-single";
 @import "pages/checkout";
diff --git a/concept-modern/src/scss/pages/_ecommerce.scss b/concept-modern/src/scss/pages/_ecommerce.scss
new file mode 100644
index 0000000..b576d32
--- /dev/null
+++ b/concept-modern/src/scss/pages/_ecommerce.scss
@@ -0,0 +1,284 @@
+// E-Commerce Pages Styles
+
+// Filter bar improvements
+.dashboard-ecommerce {
+    .card-body {
+        .input-group-lg {
+            .form-control {
+                font-size: 1rem;
+                padding: 0.75rem 1rem;
+                border-right: 0;
+                
+                &:focus {
+                    border-color: $primary;
+                    box-shadow: none;
+                }
+            }
+            
+            .btn {
+                border-left: 0;
+                padding: 0.75rem 1.25rem;
+                
+                i {
+                    font-size: 1.1rem;
+                }
+            }
+        }
+        
+        .form-select {
+            border-color: #dee2e6;
+            font-size: 0.875rem;
+            
+            &:focus {
+                border-color: $primary;
+                box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.1);
+            }
+        }
+    }
+}
+
+// Product Cards
+.product-card {
+    transition: all 0.3s ease;
+    border: 1px solid #e9ecef;
+    overflow: hidden;
+    
+    &:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
+        
+        .product-actions {
+            opacity: 1;
+        }
+    }
+    
+    .card-header {
+        position: relative;
+        overflow: hidden;
+        background: #f8f9fa;
+        min-height: 300px;
+        max-height: 300px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 !important;
+        
+        img {
+            width: 100%;
+            height: 300px;
+            object-fit: cover;
+            transition: transform 0.3s ease;
+        }
+        
+        &:hover img {
+            transform: scale(1.05);
+        }
+    }
+    
+    .product-actions {
+        position: absolute;
+        bottom: 50%;
+        left: 50%;
+        transform: translate(-50%, 50%);
+        opacity: 0;
+        transition: all 0.3s ease;
+        display: flex;
+        gap: 0.5rem;
+        
+        .btn {
+            width: 40px;
+            height: 40px;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.95);
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            transition: all 0.2s ease;
+            
+            i {
+                font-size: 1rem;
+                line-height: 1;
+            }
+            
+            &:hover {
+                transform: scale(1.1);
+                background: white;
+                color: $primary;
+                border-color: $primary;
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+            }
+        }
+    }
+    
+    .card-body {
+        .card-title {
+            font-size: 1rem;
+            font-weight: 600;
+            
+            a {
+                &:hover {
+                    color: $primary;
+                }
+            }
+        }
+    }
+}
+
+// Product Single Page
+.product-images {
+    .main-image {
+        text-align: center;
+        background: #f8f9fa;
+        padding: 2rem;
+        border-radius: 0.5rem;
+        min-height: 500px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        img {
+            max-width: 100%;
+            height: auto;
+            max-height: 500px;
+            object-fit: contain;
+            cursor: zoom-in;
+            transition: transform 0.3s ease;
+            
+            &:hover {
+                transform: scale(1.05);
+            }
+        }
+    }
+    
+    .image-thumbnails {
+        overflow-x: auto;
+        white-space: nowrap;
+        padding: 0.5rem 0;
+        
+        img {
+            cursor: pointer;
+            transition: all 0.2s ease;
+            opacity: 0.6;
+            border: 2px solid transparent;
+            background: #f8f9fa;
+            padding: 0.25rem;
+            
+            &:hover {
+                opacity: 1;
+                border-color: $primary;
+            }
+            
+            &.active {
+                opacity: 1;
+                border-color: $primary;
+            }
+        }
+    }
+}
+
+// Checkout Page
+.checkout-steps {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+    position: relative;
+    
+    &::before {
+        content: '';
+        position: absolute;
+        top: 25px;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: #e9ecef;
+        z-index: 0;
+    }
+    
+    .step {
+        flex: 1;
+        text-align: center;
+        position: relative;
+        z-index: 1;
+        
+        .step-icon {
+            width: 50px;
+            height: 50px;
+            margin: 0 auto;
+            background: #e9ecef;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.25rem;
+            color: #6c757d;
+            transition: all 0.3s ease;
+        }
+        
+        .step-title {
+            margin-top: 0.5rem;
+            font-size: 0.875rem;
+            color: #6c757d;
+            transition: color 0.3s ease;
+        }
+        
+        &.active {
+            .step-icon {
+                background: $primary;
+                color: white;
+                box-shadow: 0 2px 10px rgba($primary, 0.3);
+            }
+            
+            .step-title {
+                color: $primary;
+                font-weight: 500;
+            }
+        }
+        
+        &.completed {
+            .step-icon {
+                background: $success;
+                color: white;
+            }
+            
+            .step-title {
+                color: $success;
+            }
+        }
+    }
+}
+
+// Order items in checkout
+.order-item {
+    img {
+        border-radius: 0.25rem;
+        object-fit: cover;
+        background: #f8f9fa;
+        padding: 0.5rem;
+    }
+}
+
+// Responsive adjustments
+@media (max-width: 767.98px) {
+    .product-card {
+        .card-header {
+            min-height: 200px;
+            
+            img {
+                max-height: 200px;
+            }
+        }
+    }
+    
+    .product-images {
+        .main-image {
+            min-height: 300px;
+            padding: 1rem;
+            
+            img {
+                max-height: 300px;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/concept-modern/src/scss/pages/_influencer-profile.scss b/concept-modern/src/scss/pages/_influencer-profile.scss
new file mode 100644
index 0000000..e703d4c
--- /dev/null
+++ b/concept-modern/src/scss/pages/_influencer-profile.scss
@@ -0,0 +1,305 @@
+// Influencer Profile Page Styles
+
+// Profile Card
+.profile-card {
+    .user-avatar-xxl {
+        width: 120px;
+        height: 120px;
+        object-fit: cover;
+    }
+    
+    .card-body {
+        h3 {
+            font-weight: 600;
+        }
+        
+        h5 {
+            font-size: 1rem;
+            font-weight: 600;
+            color: #495057;
+        }
+    }
+    
+    .rating-star {
+        font-size: 1.125rem;
+        
+        i {
+            margin-right: 2px;
+        }
+    }
+    
+    .social-channels {
+        li {
+            transition: all 0.2s ease;
+            
+            &:hover {
+                transform: translateX(5px);
+            }
+        }
+        
+        a {
+            color: #495057;
+            transition: color 0.2s ease;
+            
+            &:hover {
+                color: $primary;
+            }
+            
+            i {
+                transition: transform 0.2s ease;
+            }
+        }
+    }
+}
+
+// Profile tabs
+.nav-pills {
+    .nav-link {
+        color: #495057;
+        border: 1px solid #dee2e6;
+        margin: 0 0.25rem;
+        transition: all 0.3s ease;
+        
+        &:hover {
+            background-color: #f8f9fa;
+            transform: translateY(-2px);
+        }
+        
+        &.active {
+            background-color: $primary;
+            border-color: $primary;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba($primary, 0.15);
+        }
+        
+        i {
+            font-size: 0.875rem;
+        }
+    }
+}
+
+// Campaign cards
+.campaign-card {
+    transition: all 0.3s ease;
+    border: 1px solid #e9ecef;
+    
+    &:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
+    }
+    
+    .campaign-logo {
+        width: 60px;
+        height: 60px;
+        object-fit: contain;
+    }
+    
+    .campaign-dates {
+        font-size: 0.875rem;
+        color: #6c757d;
+        
+        i {
+            font-size: 0.75rem;
+        }
+    }
+    
+    .card-footer {
+        background-color: #f8f9fa;
+    }
+    
+    .campaign-metric {
+        padding: 0.5rem;
+        border-right: 1px solid #dee2e6;
+        
+        &:last-child {
+            border-right: 0;
+        }
+        
+        h5 {
+            color: $primary;
+            font-weight: 600;
+        }
+        
+        small {
+            font-size: 0.75rem;
+        }
+    }
+}
+
+// Pricing cards
+.pricing-card {
+    transition: all 0.3s ease;
+    border: 1px solid #dee2e6;
+    
+    &:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    }
+    
+    &.featured {
+        transform: scale(1.05);
+        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+        
+        &:hover {
+            transform: scale(1.05) translateY(-5px);
+        }
+    }
+    
+    .card-header {
+        padding: 2rem 1rem;
+        
+        h4 {
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+    }
+    
+    .card-body {
+        h1 {
+            font-size: 3rem;
+            font-weight: 700;
+        }
+    }
+    
+    .package-features {
+        li {
+            padding: 0.5rem 0;
+            font-size: 0.875rem;
+            
+            i {
+                font-size: 0.75rem;
+            }
+        }
+    }
+}
+
+// Reviews
+.review-block {
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid #e9ecef;
+    
+    &:last-child {
+        border-bottom: 0;
+        padding-bottom: 0;
+    }
+    
+    .review-text {
+        font-size: 1rem;
+        line-height: 1.6;
+        color: #495057;
+        font-style: italic;
+    }
+    
+    .reviewer-info {
+        font-size: 0.875rem;
+        
+        strong {
+            color: #212529;
+        }
+    }
+}
+
+// Message form
+#messageForm {
+    .form-label {
+        font-weight: 500;
+        color: #495057;
+    }
+    
+    .form-control {
+        &:focus {
+            border-color: $primary;
+            box-shadow: 0 0 0 0.2rem rgba($primary, 0.15);
+        }
+    }
+    
+    textarea {
+        resize: vertical;
+        min-height: 120px;
+    }
+}
+
+// Section titles
+.section-block {
+    margin-bottom: 1.5rem;
+    
+    .section-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: #212529;
+        margin-bottom: 0;
+    }
+}
+
+// Mobile responsive
+@media (max-width: 991.98px) {
+    .profile-card {
+        margin-bottom: 2rem;
+    }
+    
+    .nav-pills {
+        .nav-link {
+            margin: 0.25rem 0;
+            font-size: 0.875rem;
+        }
+    }
+    
+    .campaign-card {
+        .d-flex {
+            flex-direction: column;
+            text-align: center;
+            
+            .campaign-logo {
+                margin: 0 auto 1rem !important;
+            }
+        }
+    }
+    
+    .pricing-card {
+        &.featured {
+            transform: scale(1);
+        }
+    }
+}
+
+@media (max-width: 767.98px) {
+    .campaign-metric {
+        h5 {
+            font-size: 1rem;
+        }
+        
+        small {
+            font-size: 0.625rem;
+        }
+    }
+    
+    .nav-pills {
+        flex-direction: column;
+        
+        .nav-link {
+            width: 100%;
+            margin: 0.25rem 0;
+        }
+    }
+}
+
+// Animations
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.tab-pane {
+    animation: fadeInUp 0.3s ease;
+}
+
+// Stats animation
+.card-body h1 {
+    transition: all 0.3s ease;
+}
\ No newline at end of file
diff --git a/concept-modern/src/test.html b/concept-modern/src/test.html
new file mode 100644
index 0000000..62dc007
--- /dev/null
+++ b/concept-modern/src/test.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Test Page</title>
+    <link rel="stylesheet" href="/scss/main.scss">
+</head>
+<body>
+    <div class="container mt-5">
+        <h1>Test Page</h1>
+        <p>This is a test page to verify Vite and styles are working.</p>
+        
+        <button class="btn btn-primary">Primary Button</button>
+        <button class="btn btn-secondary">Secondary Button</button>
+        
+        <div class="alert alert-info mt-3" role="alert">
+            If you can see this styled alert, Bootstrap CSS is working!
+        </div>
+        
+        <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#testModal">
+            Test Modal (Tests Bootstrap JS)
+        </button>
+        
+        <!-- Modal -->
+        <div class="modal fade" id="testModal" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">Test Modal</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    </div>
+                    <div class="modal-body">
+                        If this modal opens, Bootstrap JavaScript is working!
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script type="module" src="/js/app.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/concept-modern/vite.config.js b/concept-modern/vite.config.js
index 5dae003..ae1cf16 100644
--- a/concept-modern/vite.config.js
+++ b/concept-modern/vite.config.js
@@ -67,6 +67,7 @@ export default defineConfig({
         'chat': resolve(__dirname, 'src/pages/chat.html'),
         'inbox': resolve(__dirname, 'src/pages/inbox.html'),
         'influencer-finder': resolve(__dirname, 'src/pages/apps/influencer-finder.html'),
+        'influencer-profile': resolve(__dirname, 'src/pages/apps/influencer-profile.html'),
         // Settings
         'settings': resolve(__dirname, 'src/pages/settings.html'),
         // User Management