Add Clicks2Cart theme with custom styling for header, hero, and collection sections, including new images and page structures.
This commit is contained in:
Alaguraj0361
parent
78714dbd26
commit
0cfe4c8b85
BIN
addons/theme_clicks2cart/static/src/img/brush_splash.png
Normal file
BIN
addons/theme_clicks2cart/static/src/img/brush_splash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 483 KiB |
BIN
addons/theme_clicks2cart/static/src/img/flora_col_v2.png
Normal file
BIN
addons/theme_clicks2cart/static/src/img/flora_col_v2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 698 KiB |
BIN
addons/theme_clicks2cart/static/src/img/floral_accent_br.png
Normal file
BIN
addons/theme_clicks2cart/static/src/img/floral_accent_br.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 564 KiB |
BIN
addons/theme_clicks2cart/static/src/img/floral_accent_tl.png
Normal file
BIN
addons/theme_clicks2cart/static/src/img/floral_accent_tl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 532 KiB |
BIN
addons/theme_clicks2cart/static/src/img/hero_slide_1_v2.png
Normal file
BIN
addons/theme_clicks2cart/static/src/img/hero_slide_1_v2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 824 KiB |
BIN
addons/theme_clicks2cart/static/src/img/hero_slide_2_v2.png
Normal file
BIN
addons/theme_clicks2cart/static/src/img/hero_slide_2_v2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 408 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 755 KiB After Width: | Height: | Size: 95 KiB |
BIN
addons/theme_clicks2cart/static/src/img/holiday_col_v2.png
Normal file
BIN
addons/theme_clicks2cart/static/src/img/holiday_col_v2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 656 KiB |
BIN
addons/theme_clicks2cart/static/src/img/holiday_prod_1.png
Normal file
BIN
addons/theme_clicks2cart/static/src/img/holiday_prod_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
addons/theme_clicks2cart/static/src/img/holiday_prod_2.png
Normal file
BIN
addons/theme_clicks2cart/static/src/img/holiday_prod_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
addons/theme_clicks2cart/static/src/img/holiday_prod_3.png
Normal file
BIN
addons/theme_clicks2cart/static/src/img/holiday_prod_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
addons/theme_clicks2cart/static/src/img/holiday_prod_4.png
Normal file
BIN
addons/theme_clicks2cart/static/src/img/holiday_prod_4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
addons/theme_clicks2cart/static/src/img/holiday_promo_bg.png
Normal file
BIN
addons/theme_clicks2cart/static/src/img/holiday_promo_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 517 KiB |
BIN
addons/theme_clicks2cart/static/src/img/holiday_promo_bg_v3.png
Normal file
BIN
addons/theme_clicks2cart/static/src/img/holiday_promo_bg_v3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 496 KiB |
BIN
addons/theme_clicks2cart/static/src/img/wedding_col_v2.png
Normal file
BIN
addons/theme_clicks2cart/static/src/img/wedding_col_v2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 694 KiB |
@ -14,7 +14,7 @@ header#top {
|
|||||||
&.o_header_is_scrolled {
|
&.o_header_is_scrolled {
|
||||||
background: rgba(255, 255, 255, 0.95) !important;
|
background: rgba(255, 255, 255, 0.95) !important;
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
@ -57,22 +57,53 @@ header#top {
|
|||||||
// Hero Section
|
// Hero Section
|
||||||
.s_hero_premium {
|
.s_hero_premium {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: #f3e5d8;
|
height: 100vh;
|
||||||
background-image: url('https://landing.engotheme.com/html/jenstore/demo/img/slider-1.png');
|
min-height: 100vh;
|
||||||
background-size: cover;
|
|
||||||
background-position: center bottom;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
padding: 120px 0 250px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
padding: 0; // Padding handled by flex centering in slides
|
||||||
|
|
||||||
|
.carousel,
|
||||||
|
.carousel-inner,
|
||||||
|
.carousel-item {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center bottom;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
// Only show active or transitioning items as flex
|
||||||
|
&.active,
|
||||||
|
&.carousel-item-next,
|
||||||
|
&.carousel-item-prev {
|
||||||
|
display: flex !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&.slide-1 {
|
||||||
|
background-image: url('/theme_clicks2cart/static/src/img/hero_slide_1_v2.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.slide-2 {
|
||||||
|
background-image: url('/theme_clicks2cart/static/src/img/hero_slide_2_v2.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.slide-3 {
|
||||||
|
background-image: url('/theme_clicks2cart/static/src/img/hero_slide_2_v2.png');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
padding-top: 100px;
|
||||||
|
padding-bottom: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-pre-title {
|
.hero-pre-title {
|
||||||
font-family: $font-family-sans-serif;
|
font-family: 'Outfit', sans-serif;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 4px;
|
letter-spacing: 4px;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
@ -81,11 +112,11 @@ header#top {
|
|||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-family: $font-family-serif;
|
font-family: 'Playfair Display', serif;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 6rem;
|
font-size: 6rem;
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
line-height: 1;
|
line-height: 1.1;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -101,14 +132,14 @@ header#top {
|
|||||||
width: 150px;
|
width: 150px;
|
||||||
margin: 0 auto 45px;
|
margin: 0 auto 45px;
|
||||||
display: block;
|
display: block;
|
||||||
filter: brightness(0); // Ensure the separator is black
|
filter: brightness(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-shop-now {
|
.btn-shop-now {
|
||||||
background: #000;
|
background: #000;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 15px 50px;
|
padding: 15px 50px;
|
||||||
font-family: $font-family-sans-serif;
|
font-family: 'Outfit', sans-serif;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
@ -118,7 +149,32 @@ header#top {
|
|||||||
&:hover {
|
&:hover {
|
||||||
transform: translateY(-3px);
|
transform: translateY(-3px);
|
||||||
background: #222;
|
background: #222;
|
||||||
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom Carousel Indicators
|
||||||
|
.carousel-indicators {
|
||||||
|
bottom: 50px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding-right: 100px;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 2px solid #000;
|
||||||
|
opacity: 0.5;
|
||||||
|
margin: 0 5px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: #000;
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -144,19 +200,19 @@ header#top {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "who we are ?";
|
content: "who we are ?";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 10vw;
|
font-size: 10vw;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #f7f7f7;
|
color: #f7f7f7;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
opacity: 0.1;
|
opacity: 0.1;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
letter-spacing: -2px;
|
letter-spacing: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 991px) {
|
@media (max-width: 991px) {
|
||||||
@ -200,7 +256,7 @@ header#top {
|
|||||||
img {
|
img {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2px solid #fff;
|
border: 2px solid #fff;
|
||||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -212,6 +268,7 @@ header#top {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@ -222,3 +279,678 @@ header#top {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// =========================================
|
||||||
|
// Shop By Collection (Jenstore Style)
|
||||||
|
// =========================================
|
||||||
|
.s_collections {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 100px 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
// Background Pattern
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-image: url('https://landing.engotheme.com/html/jenstore/demo/img/shadow_canyon.png');
|
||||||
|
background-repeat: repeat;
|
||||||
|
opacity: 0.1;
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_col_heading {
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 2.8rem;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
color: #000;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_col_subheading {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 0;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_col_promo {
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 0;
|
||||||
|
// box-shadow: 0 15px 45px rgba(0, 0, 0, 0.07);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.s_col_promo_img {
|
||||||
|
transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .s_col_promo_img {
|
||||||
|
transform: scale(1.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_col_overlay_text {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
// background: rgba(255, 255, 255, 0.95);
|
||||||
|
padding: 40px 50px;
|
||||||
|
text-align: center;
|
||||||
|
min-width: 280px;
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
z-index: 5;
|
||||||
|
// border: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.s_col_hello {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
color: #e6b3a3;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_col_sale_text {
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 2.2rem;
|
||||||
|
color: #000;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_col_shop_btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
border-bottom: 2px solid #1a1a1a;
|
||||||
|
color: #1a1a1a !important;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-decoration: none !important;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-bottom-color: #e6b3a3;
|
||||||
|
color: #e6b3a3 !important;
|
||||||
|
padding-right: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Floating Floral Accents (Elementor Style)
|
||||||
|
.s_col_bg_flower {
|
||||||
|
position: absolute;
|
||||||
|
width: 500px;
|
||||||
|
height: 500px;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
opacity: 0.15;
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
&--tl {
|
||||||
|
top: -100px;
|
||||||
|
left: -150px;
|
||||||
|
background-image: url('/theme_clicks2cart/static/src/img/floral_accent_tl.png') !important;
|
||||||
|
transform: rotate(-10deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--br {
|
||||||
|
bottom: -150px;
|
||||||
|
right: -150px;
|
||||||
|
background-image: url('/theme_clicks2cart/static/src/img/floral_accent_br.png') !important;
|
||||||
|
transform: rotate(15deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Product Grid Cards
|
||||||
|
.s_col_product_card {
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #f0f0f0;
|
||||||
|
padding: 15px;
|
||||||
|
transition: all 0.4s ease;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_col_badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
right: 15px;
|
||||||
|
background: #000;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 4px 10px;
|
||||||
|
z-index: 3;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
&--hot {
|
||||||
|
background: #e74c3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--sale {
|
||||||
|
background: #e6b3a3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_col_product_img {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
transition: transform 0.6s ease;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
object-fit: contain;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .s_col_product_img img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_col_product_info {
|
||||||
|
.s_col_product_name {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #1a1a1a !important;
|
||||||
|
display: block;
|
||||||
|
text-decoration: none !important;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_col_stars {
|
||||||
|
color: #e8a838;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_col_product_price {
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #1a1a1a;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// =========================================
|
||||||
|
// Category Feature (Wedding Section)
|
||||||
|
// =========================================
|
||||||
|
.s_category_feature {
|
||||||
|
padding: 120px 0;
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.s_cat_background {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -45%);
|
||||||
|
width: 100%;
|
||||||
|
height: 600px;
|
||||||
|
background-image: url('/theme_clicks2cart/static/src/img/brush_splash.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 110% auto;
|
||||||
|
opacity: 0.8;
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_cat_header {
|
||||||
|
position: relative;
|
||||||
|
z-index: 5;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.s_cat_title {
|
||||||
|
font-family: 'Playfair Display', serif;
|
||||||
|
font-size: 4.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1a1a1a;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_cat_divider {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 15px;
|
||||||
|
color: #888;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
height: 1px;
|
||||||
|
width: 40px;
|
||||||
|
background: linear-gradient(90deg, transparent, #888, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_cat_grid {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_cat_card {
|
||||||
|
background: #fff;
|
||||||
|
padding: 10px;
|
||||||
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_cat_badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
background: #e74c3c;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 3px 8px;
|
||||||
|
z-index: 12;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
|
||||||
|
&.badge-hot {
|
||||||
|
background: #e74c3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.badge-sale {
|
||||||
|
background: #e6b3a3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_cat_img_wrap {
|
||||||
|
background-color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 2px;
|
||||||
|
aspect-ratio: 4 / 5;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
transition: transform 0.8s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_cat_hover_btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%) scale(0.8);
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
background: #000;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 15;
|
||||||
|
|
||||||
|
.btn_add_cart {
|
||||||
|
color: #fff !important;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #e6b3a3;
|
||||||
|
transform: translate(-50%, -50%) scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.s_cat_img_wrap img {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_cat_hover_btn {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_cat_info {
|
||||||
|
.s_cat_prod_name {
|
||||||
|
font-family: 'Outfit', sans-serif;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: 15px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #1a1a1a !important;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #e6b3a3 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_cat_prod_price {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #e6b3a3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Floating Floral Accents at the bottom
|
||||||
|
.s_cat_floating_flower {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -50px;
|
||||||
|
right: -30px;
|
||||||
|
width: 350px;
|
||||||
|
height: 350px;
|
||||||
|
background-image: url('/theme_clicks2cart/static/src/img/floral_accent_br.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
z-index: 15;
|
||||||
|
opacity: 0.9;
|
||||||
|
pointer-events: none;
|
||||||
|
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// =========================================
|
||||||
|
// Holiday Section (Exact Mockup Match)
|
||||||
|
// =========================================
|
||||||
|
.s_holiday_section {
|
||||||
|
padding: 120px 0;
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.s_holiday_header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 80px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 5;
|
||||||
|
|
||||||
|
.s_holiday_title {
|
||||||
|
font-family: 'Playfair Display', serif;
|
||||||
|
font-size: 5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1a1a1a;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_holiday_divider {
|
||||||
|
color: #666;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-family: 'Outfit', sans-serif;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 15px;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
height: 1px;
|
||||||
|
width: 30px;
|
||||||
|
background: #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_holiday_grid_container {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Left Column: 2x2 Product Grid
|
||||||
|
.s_holiday_prod_grid {
|
||||||
|
.s_cat_card {
|
||||||
|
margin-bottom: 50px;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
background: transparent;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: none;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.s_cat_img_wrap {
|
||||||
|
img {
|
||||||
|
transform: scale(1); // No scaling as requested "only show icon"
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_cat_hover_btn {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_cat_badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
right: 15px;
|
||||||
|
background: #000;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 4px 10px;
|
||||||
|
z-index: 12;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
&.badge-hot {
|
||||||
|
background: #e74c3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.badge-sale {
|
||||||
|
background: #e6b3a3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_cat_img_wrap {
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
aspect-ratio: 1 / 1.25;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 90%;
|
||||||
|
max-height: 90%;
|
||||||
|
object-fit: contain;
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
transition: transform 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_cat_hover_btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%) scale(0.8);
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
background: #000; // Default black as requested
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 15;
|
||||||
|
pointer-events: auto;
|
||||||
|
|
||||||
|
.btn_add_cart {
|
||||||
|
color: #fff !important;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #e6b3a3; // Highlight color on hover
|
||||||
|
transform: translate(-50%, -50%) scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_cat_info {
|
||||||
|
.s_cat_prod_name {
|
||||||
|
font-family: 'Outfit', sans-serif;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #444 !important;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
display: block;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_cat_stars {
|
||||||
|
color: #e6b3a3; // Accent color for stars
|
||||||
|
font-size: 0.75rem;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_cat_prod_price {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 800; // Extra bold price
|
||||||
|
color: #000;
|
||||||
|
font-family: 'Outfit', sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Right Column: Artistic Promo
|
||||||
|
.s_holiday_promo_wrap {
|
||||||
|
position: relative;
|
||||||
|
min-height: 700px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.s_holiday_promo_bg {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url('/theme_clicks2cart/static/src/img/holiday_promo_bg_v3.png');
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_holiday_promo_content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 5;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: -20px;
|
||||||
|
|
||||||
|
.s_holiday_hello {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
color: #333;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_holiday_promo_title {
|
||||||
|
font-family: 'Playfair Display', serif;
|
||||||
|
font-size: 5.5rem;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #000;
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.s_holiday_shop_btn {
|
||||||
|
display: inline-block;
|
||||||
|
background: #000;
|
||||||
|
color: #fff !important;
|
||||||
|
padding: 10px 30px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 1.5px;
|
||||||
|
text-decoration: none !important;
|
||||||
|
border-radius: 0; // Square corners as in mockup
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Floating Petals
|
||||||
|
.s_holiday_petal_float {
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 2;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -12,30 +12,78 @@
|
|||||||
<xpath expr="//div[@id='wrap']" position="replace">
|
<xpath expr="//div[@id='wrap']" position="replace">
|
||||||
<div id="wrap" class="oe_structure">
|
<div id="wrap" class="oe_structure">
|
||||||
<!-- Premium Hero Section -->
|
<!-- Premium Hero Section -->
|
||||||
|
<!-- Premium Hero Section (Working Slider) -->
|
||||||
<section class="s_hero_premium py-0">
|
<section class="s_hero_premium py-0">
|
||||||
<div class="container py-5">
|
<div id="clicks2cartHeroCarousel" class="carousel slide h-100" data-bs-ride="carousel">
|
||||||
<div class="row min-vh-75 align-items-center">
|
<!-- Indicators -->
|
||||||
<div class="col-lg-12">
|
<div class="carousel-indicators">
|
||||||
<p class="hero-pre-title text-uppercase">EXPLORE THE</p>
|
<button type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
||||||
<h1 class="display-1 fw-bold mb-4">New Arrivals</h1>
|
<button type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||||
<p class="hero-desc">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</p>
|
<button type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||||||
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Separator_flourish.svg" class="hero-separator opacity-75" alt="Separator"/>
|
</div>
|
||||||
<div class="mt-4">
|
|
||||||
<a href="/shop" class="btn btn-shop-now font-weight-bold">Shop now</a>
|
<div class="carousel-inner h-100">
|
||||||
|
<!-- Slide 1 -->
|
||||||
|
<div class="carousel-item active h-100 slide-1">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row align-items-center">
|
||||||
|
<div class="col-lg-12">
|
||||||
|
<p class="hero-pre-title text-uppercase">EXPLORE THE</p>
|
||||||
|
<h1 class="display-1 fw-bold mb-4">New Arrivals</h1>
|
||||||
|
<p class="hero-desc">Experience our hand-picked floral collections designed to bring elegance and freshness to your special moments.</p>
|
||||||
|
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Separator_flourish.svg" class="hero-separator opacity-75" alt="Separator"/>
|
||||||
|
<div class="mt-4">
|
||||||
|
<a href="/shop" class="btn btn-shop-now font-weight-bold">Shop now</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 2 -->
|
||||||
|
<div class="carousel-item h-100 slide-2">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row align-items-center">
|
||||||
|
<div class="col-lg-12">
|
||||||
|
<p class="hero-pre-title text-uppercase">SPECIAL MOMENTS</p>
|
||||||
|
<h1 class="display-1 fw-bold mb-4">Wedding Bloom</h1>
|
||||||
|
<p class="hero-desc">Discover the perfect wedding floral arrangements that capture the essence of your love story with timeless beauty.</p>
|
||||||
|
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Separator_flourish.svg" class="hero-separator opacity-75" alt="Separator"/>
|
||||||
|
<div class="mt-4">
|
||||||
|
<a href="/shop" class="btn btn-shop-now font-weight-bold">Explore More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Slide 3 -->
|
||||||
|
<div class="carousel-item h-100 slide-3">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row align-items-center">
|
||||||
|
<div class="col-lg-12">
|
||||||
|
<p class="hero-pre-title text-uppercase">FRESH EVERY DAY</p>
|
||||||
|
<h1 class="display-1 fw-bold mb-4">Luxury Gifting</h1>
|
||||||
|
<p class="hero-desc">Elevate your gifting game with our premium floral boxes, delivered fresh to your doorstep every single day.</p>
|
||||||
|
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Separator_flourish.svg" class="hero-separator opacity-75" alt="Separator"/>
|
||||||
|
<div class="mt-4">
|
||||||
|
<a href="/shop" class="btn btn-shop-now font-weight-bold">Gift Now</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<!-- Controls -->
|
||||||
<!-- Carousel Indicators (Visual only for now) -->
|
<button class="carousel-control-prev" type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide="prev" style="width: 5%;">
|
||||||
<div class="position-absolute bottom-0 end-0 p-5 mb-5 me-5 z-index-4 d-none d-lg-block">
|
<span class="carousel-control-prev-icon" aria-hidden="true" style="filter: invert(1);"></span>
|
||||||
<div class="d-flex gap-2">
|
<span class="visually-hidden">Previous</span>
|
||||||
<div style="width: 10px; height: 10px; border-radius: 50%; background: #000;"></div>
|
</button>
|
||||||
<div style="width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000;"></div>
|
<button class="carousel-control-next" type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide="next" style="width: 5%;">
|
||||||
<div style="width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000;"></div>
|
<span class="carousel-control-next-icon" aria-hidden="true" style="filter: invert(1);"></span>
|
||||||
<div style="width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000;"></div>
|
<span class="visually-hidden">Next</span>
|
||||||
</div>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -65,43 +113,353 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Shop by collection -->
|
<!-- Shop by collection -->
|
||||||
<section class="s_collections py-5 bg-light">
|
<section class="s_collections position-relative overflow-hidden">
|
||||||
<div class="container py-4">
|
<!-- Large outline flower backgrounds (top-left + bottom-right) -->
|
||||||
<div class="text-center mb-5">
|
<div class="s_col_bg_flower s_col_bg_flower--tl" aria-hidden="true"></div>
|
||||||
<h2 class="display-5 fw-bold" style="font-family: 'Playfair Display';">Shop by collection</h2>
|
<div class="s_col_bg_flower s_col_bg_flower--br" aria-hidden="true"></div>
|
||||||
<p class="text-muted">Choose the perfect bouquet for any occasion</p>
|
|
||||||
|
<div class="container position-relative py-5" style="z-index:2;">
|
||||||
|
<!-- Section Header -->
|
||||||
|
<div class="text-center mb-4">
|
||||||
|
<h2 class="s_col_heading">Shop by collection</h2>
|
||||||
|
<p class="s_col_subheading">— All Category of Clicks2Cart —</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="row g-4">
|
|
||||||
<div class="col-md-4">
|
<!-- Main Content Row -->
|
||||||
<div class="card h-100 shadow-sm border-0 rounded-4 overflow-hidden">
|
<div class="row align-items-center g-4">
|
||||||
<img src="/theme_clicks2cart/static/src/img/flora_col.png" class="card-img-top" alt="Flora Collection"/>
|
|
||||||
<div class="card-body text-center py-4 bg-white">
|
<!-- Left: Floral Image + Sale Text Overlay -->
|
||||||
<h4 class="card-title fw-bold" style="font-family: 'Playfair Display';">Flora Selection</h4>
|
<div class="col-lg-5">
|
||||||
<p class="text-muted small mb-3">Timeless classics for every day.</p>
|
<div class="s_col_promo position-relative">
|
||||||
<a href="/shop" class="btn btn-outline-dark btn-sm rounded-pill px-4">Explore</a>
|
<!-- The actual floral image (pink roses + splash + envelope) -->
|
||||||
|
<img src="https://landing.engotheme.com/html/jenstore/demo/img/collection.png"
|
||||||
|
class="s_col_promo_img img-fluid w-100"
|
||||||
|
alt="Summer Sale Collection"/>
|
||||||
|
<!-- Text overlay box centered on image -->
|
||||||
|
<div class="s_col_overlay_text">
|
||||||
|
<span class="s_col_hello">HELLO SUMMER</span>
|
||||||
|
<h3 class="s_col_sale_text">Sale 10%</h3>
|
||||||
|
<a href="/shop" class="s_col_shop_btn">Shop now</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
|
||||||
<div class="card h-100 shadow-sm border-0 rounded-4 overflow-hidden">
|
|
||||||
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" class="card-img-top" alt="Wedding Collection"/>
|
<!-- Right: 2×2 Product Grid -->
|
||||||
<div class="card-body text-center py-4 bg-white">
|
<div class="col-lg-7">
|
||||||
<h4 class="card-title fw-bold" style="font-family: 'Playfair Display';">Wedding Dreams</h4>
|
<t t-set="featured_products" t-value="request.env['product.template'].sudo().search([('is_published', '=', True), ('sale_ok', '=', True), ('website_id', 'in', [False, website.id])], limit=4, order='website_sequence asc')"/>
|
||||||
<p class="text-muted small mb-3">Elegance for your perfect day.</p>
|
<div class="row g-3">
|
||||||
<a href="/shop" class="btn btn-outline-dark btn-sm rounded-pill px-4">Explore</a>
|
<t t-foreach="featured_products" t-as="product">
|
||||||
</div>
|
<div class="col-6">
|
||||||
</div>
|
<div class="s_col_product_card">
|
||||||
</div>
|
<t t-if="product_index == 0">
|
||||||
<div class="col-md-4">
|
<span class="s_col_badge s_col_badge--hot">HOT</span>
|
||||||
<div class="card h-100 shadow-sm border-0 rounded-4 overflow-hidden">
|
</t>
|
||||||
<img src="/theme_clicks2cart/static/src/img/holiday_col.png" class="card-img-top" alt="Holiday Collection"/>
|
<t t-elif="product_index == 3">
|
||||||
<div class="card-body text-center py-4 bg-white">
|
<span class="s_col_badge s_col_badge--sale">SALE</span>
|
||||||
<h4 class="card-title fw-bold" style="font-family: 'Playfair Display';">Holiday Joy</h4>
|
</t>
|
||||||
<p class="text-muted small mb-3">Festive spirits in every bloom.</p>
|
<div class="s_col_product_img">
|
||||||
<a href="/shop" class="btn btn-outline-dark btn-sm rounded-pill px-4">Explore</a>
|
<a t-attf-href="/shop/product/#{product.website_slug}">
|
||||||
|
<img t-att-src="website.image_url(product, 'image_512')" t-att-alt="product.name" loading="lazy"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="s_col_product_info">
|
||||||
|
<h6 class="s_col_product_name" t-field="product.name"/>
|
||||||
|
<div class="s_col_stars">
|
||||||
|
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-o"/>
|
||||||
|
</div>
|
||||||
|
<p class="s_col_product_price">
|
||||||
|
<span t-field="product.list_price" t-options='{"widget": "monetary"}'/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</t>
|
||||||
|
<!-- Fallback if no products -->
|
||||||
|
<t t-if="not featured_products">
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="s_col_product_card">
|
||||||
|
<span class="s_col_badge s_col_badge--hot">HOT</span>
|
||||||
|
<div class="s_col_product_img">
|
||||||
|
<img src="/theme_clicks2cart/static/src/img/flora_col.png" alt="Flora"/>
|
||||||
|
</div>
|
||||||
|
<div class="s_col_product_info">
|
||||||
|
<h6 class="s_col_product_name">Flora Bouquet</h6>
|
||||||
|
<div class="s_col_stars">
|
||||||
|
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-o"/>
|
||||||
|
</div>
|
||||||
|
<p class="s_col_product_price">$120.00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="s_col_product_card">
|
||||||
|
<div class="s_col_product_img">
|
||||||
|
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Wedding"/>
|
||||||
|
</div>
|
||||||
|
<div class="s_col_product_info">
|
||||||
|
<h6 class="s_col_product_name">Wedding Roses</h6>
|
||||||
|
<div class="s_col_stars">
|
||||||
|
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/>
|
||||||
|
</div>
|
||||||
|
<p class="s_col_product_price">$115.40</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="s_col_product_card">
|
||||||
|
<div class="s_col_product_img">
|
||||||
|
<img src="/theme_clicks2cart/static/src/img/holiday_col.png" alt="Holiday"/>
|
||||||
|
</div>
|
||||||
|
<div class="s_col_product_info">
|
||||||
|
<h6 class="s_col_product_name">Holiday Bloom</h6>
|
||||||
|
<div class="s_col_stars">
|
||||||
|
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-half-o"/><i class="fa fa-star-o"/>
|
||||||
|
</div>
|
||||||
|
<p class="s_col_product_price">$250.60</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="s_col_product_card">
|
||||||
|
<span class="s_col_badge s_col_badge--sale">SALE</span>
|
||||||
|
<div class="s_col_product_img">
|
||||||
|
<img src="/theme_clicks2cart/static/src/img/hero_bg.png" alt="Sale"/>
|
||||||
|
</div>
|
||||||
|
<div class="s_col_product_info">
|
||||||
|
<h6 class="s_col_product_name">Rose Bouquet</h6>
|
||||||
|
<div class="s_col_stars">
|
||||||
|
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-o"/><i class="fa fa-star-o"/>
|
||||||
|
</div>
|
||||||
|
<p class="s_col_product_price">$100.90</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</t>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Wedding Category Feature Section -->
|
||||||
|
<section class="s_category_feature pb-0">
|
||||||
|
<!-- Brush Splash Background -->
|
||||||
|
<div class="s_cat_background" aria-hidden="true"></div>
|
||||||
|
|
||||||
|
<div class="container pb-5">
|
||||||
|
<!-- Section Header -->
|
||||||
|
<div class="s_cat_header">
|
||||||
|
<h2 class="s_cat_title">Wedding</h2>
|
||||||
|
<p class="s_cat_divider">~ All Category of Clickstocart ~</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Product Grid (4 items) -->
|
||||||
|
<div class="row s_cat_grid">
|
||||||
|
<t t-set="wedding_products" t-value="request.env['product.template'].sudo().search([('is_published', '=', True)], limit=4, order='website_sequence asc')"/>
|
||||||
|
|
||||||
|
<t t-foreach="wedding_products" t-as="product">
|
||||||
|
<div class="col-lg-3 col-md-6 mb-4">
|
||||||
|
<div class="s_cat_card text-center">
|
||||||
|
<t t-if="product_index == 0">
|
||||||
|
<span class="s_cat_badge badge-hot">HOT</span>
|
||||||
|
</t>
|
||||||
|
<t t-elif="product_index == 2">
|
||||||
|
<span class="s_cat_badge badge-sale">SALE</span>
|
||||||
|
</t>
|
||||||
|
|
||||||
|
<div class="s_cat_img_wrap position-relative overflow-hidden">
|
||||||
|
<a t-attf-href="/shop/product/#{product.website_slug or product.id}">
|
||||||
|
<img t-att-src="website.image_url(product, 'image_512')" t-att-alt="product.name" loading="lazy"/>
|
||||||
|
</a>
|
||||||
|
<!-- Hover Cart Icon -->
|
||||||
|
<div class="s_cat_hover_btn">
|
||||||
|
<a t-attf-href="/shop/cart/update_short?product_id=#{product.product_variant_id.id}" class="btn_add_cart" title="Add to Cart">
|
||||||
|
<i class="fa fa-shopping-cart"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Product info below image -->
|
||||||
|
<div class="s_cat_info mt-3">
|
||||||
|
<h6 class="s_cat_prod_name mb-1">
|
||||||
|
<a t-attf-href="/shop/product/#{product.website_slug or product.id}" t-field="product.name" class="text-dark text-decoration-none fw-bold"/>
|
||||||
|
</h6>
|
||||||
|
<div class="s_cat_prod_price fw-bold" style="color: #e6b3a3;">
|
||||||
|
<span t-field="product.list_price" t-options='{"widget": "monetary"}'/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</t>
|
||||||
|
|
||||||
|
<!-- Fallback placeholders -->
|
||||||
|
<t t-if="not wedding_products">
|
||||||
|
<t t-foreach="[1,2,3,4]" t-as="item">
|
||||||
|
<div class="col-lg-3 col-md-6 mb-4">
|
||||||
|
<div class="s_cat_card text-center">
|
||||||
|
<t t-if="item == 1"><span class="s_cat_badge badge-hot">HOT</span></t>
|
||||||
|
<t t-if="item == 3"><span class="s_cat_badge badge-sale">SALE</span></t>
|
||||||
|
|
||||||
|
<div class="s_cat_img_wrap position-relative overflow-hidden">
|
||||||
|
<img t-attf-src="/theme_clicks2cart/static/src/img/wedding_col#{'_v2' if item == 4 else ''}.png" alt="Fallback Product"/>
|
||||||
|
<div class="s_cat_hover_btn">
|
||||||
|
<a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="s_cat_info mt-3">
|
||||||
|
<h6 class="s_cat_prod_name mb-1">Wedding Flowers</h6>
|
||||||
|
<div class="s_cat_prod_price fw-bold" style="color: #e6b3a3;">$120.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</t>
|
||||||
|
</t>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Floating floral accents at bottom right -->
|
||||||
|
<div class="s_cat_floating_flower" aria-hidden="true"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Holiday Section -->
|
||||||
|
<section class="s_holiday_section">
|
||||||
|
<!-- Top accent floral -->
|
||||||
|
<div class="s_holiday_bg_accent" aria-hidden="true"></div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<!-- Section Header -->
|
||||||
|
<div class="s_holiday_header">
|
||||||
|
<h2 class="s_holiday_title">Holiday</h2>
|
||||||
|
<p class="s_holiday_divider">— Lorem Ipsum is simply dummy text of the printing —</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row align-items-center s_holiday_grid_container">
|
||||||
|
<!-- Left: Product Grid (7 cols) -->
|
||||||
|
<div class="col-lg-7">
|
||||||
|
<div class="row s_holiday_prod_grid">
|
||||||
|
<t t-set="holiday_products" t-value="request.env['product.template'].sudo().search([('is_published', '=', True)], limit=4, offset=4, order='website_sequence asc')"/>
|
||||||
|
|
||||||
|
<t t-foreach="holiday_products" t-as="product">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="s_cat_card">
|
||||||
|
<t t-if="product_index == 0">
|
||||||
|
<span class="s_cat_badge badge-hot">HOT</span>
|
||||||
|
</t>
|
||||||
|
<t t-elif="product_index == 3">
|
||||||
|
<span class="s_cat_badge badge-sale">SALE</span>
|
||||||
|
</t>
|
||||||
|
|
||||||
|
<div class="s_cat_img_wrap position-relative overflow-hidden">
|
||||||
|
<a t-attf-href="/shop/product/#{product.website_slug or product.id}">
|
||||||
|
<img t-att-src="website.image_url(product, 'image_512')" t-att-alt="product.name" loading="lazy"/>
|
||||||
|
</a>
|
||||||
|
<div class="s_cat_hover_btn">
|
||||||
|
<a t-attf-href="/shop/cart/update_short?product_id=#{product.product_variant_id.id}" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="s_cat_info">
|
||||||
|
<h6 class="s_cat_prod_name mb-1">
|
||||||
|
<a t-attf-href="/shop/product/#{product.website_slug or product.id}" t-field="product.name" class="text-dark text-decoration-none fw-bold"/>
|
||||||
|
</h6>
|
||||||
|
<div class="s_cat_prod_price fw-bold">
|
||||||
|
<span t-field="product.list_price" t-options='{"widget": "monetary"}'/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</t>
|
||||||
|
|
||||||
|
<!-- Fallback with specific Holiday Images -->
|
||||||
|
<t t-if="not holiday_products">
|
||||||
|
<div class="col-md-6 mb-4">
|
||||||
|
<div class="s_cat_card">
|
||||||
|
<span class="s_cat_badge badge-hot">HOT</span>
|
||||||
|
<div class="s_cat_img_wrap position-relative overflow-hidden">
|
||||||
|
<img src="/theme_clicks2cart/static/src/img/holiday_prod_1.png" alt="Fun & Flirty"/>
|
||||||
|
<div class="s_cat_hover_btn">
|
||||||
|
<a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="s_cat_info">
|
||||||
|
<h6 class="s_cat_prod_name">Fun & Flirty By Bl..</h6>
|
||||||
|
<div class="s_cat_stars mb-1" style="color: #e6b3a3; font-size: 0.8rem;">
|
||||||
|
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-o"/>
|
||||||
|
</div>
|
||||||
|
<div class="s_cat_prod_price fw-bold">$200.2</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 mb-4">
|
||||||
|
<div class="s_cat_card">
|
||||||
|
<div class="s_cat_img_wrap position-relative overflow-hidden">
|
||||||
|
<img src="/theme_clicks2cart/static/src/img/holiday_prod_2.png" alt="Winter White"/>
|
||||||
|
<div class="s_cat_hover_btn">
|
||||||
|
<a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="s_cat_info">
|
||||||
|
<h6 class="s_cat_prod_name">Winter White Bo..</h6>
|
||||||
|
<div class="s_cat_stars mb-1" style="color: #e6b3a3; font-size: 0.8rem;">
|
||||||
|
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/>
|
||||||
|
</div>
|
||||||
|
<div class="s_cat_prod_price fw-bold">$240.2</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 mb-4">
|
||||||
|
<div class="s_cat_card">
|
||||||
|
<div class="s_cat_img_wrap position-relative overflow-hidden">
|
||||||
|
<img src="/theme_clicks2cart/static/src/img/holiday_prod_3.png" alt="Tulipa Floriade"/>
|
||||||
|
<div class="s_cat_hover_btn">
|
||||||
|
<a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="s_cat_info">
|
||||||
|
<h6 class="s_cat_prod_name">Tulipa Floriade -..</h6>
|
||||||
|
<div class="s_cat_stars mb-1" style="color: #e6b3a3; font-size: 0.8rem;">
|
||||||
|
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-o"/><i class="fa fa-star-o"/><i class="fa fa-star-o"/>
|
||||||
|
</div>
|
||||||
|
<div class="s_cat_prod_price fw-bold">$105.7</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 mb-4">
|
||||||
|
<div class="s_cat_card">
|
||||||
|
<span class="s_cat_badge badge-sale">SALE</span>
|
||||||
|
<div class="s_cat_img_wrap position-relative overflow-hidden">
|
||||||
|
<img src="/theme_clicks2cart/static/src/img/holiday_prod_4.png" alt="Sweet Sorbet"/>
|
||||||
|
<div class="s_cat_hover_btn">
|
||||||
|
<a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="s_cat_info">
|
||||||
|
<h6 class="s_cat_prod_name">Sweet Sorbet..</h6>
|
||||||
|
<div class="s_cat_stars mb-1" style="color: #e6b3a3; font-size: 0.8rem;">
|
||||||
|
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-o"/>
|
||||||
|
</div>
|
||||||
|
<div class="s_cat_prod_price fw-bold">$215.2</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</t>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right: Large Promo Area (5 cols) -->
|
||||||
|
<div class="col-lg-5">
|
||||||
|
<div class="s_holiday_promo_wrap">
|
||||||
|
<div class="s_holiday_promo_bg"></div>
|
||||||
|
<div class="s_holiday_promo_content">
|
||||||
|
<span class="s_holiday_hello">HELLO SUMMER</span>
|
||||||
|
<h3 class="s_holiday_promo_title">Sale 10%</h3>
|
||||||
|
<a href="/shop" class="s_holiday_shop_btn">Shop now</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user