diff --git a/addons/theme_clicks2cart/static/src/img/brush_splash.png b/addons/theme_clicks2cart/static/src/img/brush_splash.png new file mode 100644 index 0000000..68ca281 Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/brush_splash.png differ diff --git a/addons/theme_clicks2cart/static/src/img/flora_col_v2.png b/addons/theme_clicks2cart/static/src/img/flora_col_v2.png new file mode 100644 index 0000000..4bc9caa Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/flora_col_v2.png differ diff --git a/addons/theme_clicks2cart/static/src/img/floral_accent_br.png b/addons/theme_clicks2cart/static/src/img/floral_accent_br.png new file mode 100644 index 0000000..88a1bc4 Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/floral_accent_br.png differ diff --git a/addons/theme_clicks2cart/static/src/img/floral_accent_tl.png b/addons/theme_clicks2cart/static/src/img/floral_accent_tl.png new file mode 100644 index 0000000..2dda1f7 Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/floral_accent_tl.png differ diff --git a/addons/theme_clicks2cart/static/src/img/hero_slide_1_v2.png b/addons/theme_clicks2cart/static/src/img/hero_slide_1_v2.png new file mode 100644 index 0000000..7185c01 Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/hero_slide_1_v2.png differ diff --git a/addons/theme_clicks2cart/static/src/img/hero_slide_2_v2.png b/addons/theme_clicks2cart/static/src/img/hero_slide_2_v2.png new file mode 100644 index 0000000..40b9306 Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/hero_slide_2_v2.png differ diff --git a/addons/theme_clicks2cart/static/src/img/holiday_col.png b/addons/theme_clicks2cart/static/src/img/holiday_col.png index 6593592..2c8ece5 100644 Binary files a/addons/theme_clicks2cart/static/src/img/holiday_col.png and b/addons/theme_clicks2cart/static/src/img/holiday_col.png differ diff --git a/addons/theme_clicks2cart/static/src/img/holiday_col_v2.png b/addons/theme_clicks2cart/static/src/img/holiday_col_v2.png new file mode 100644 index 0000000..0e326ad Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/holiday_col_v2.png differ diff --git a/addons/theme_clicks2cart/static/src/img/holiday_prod_1.png b/addons/theme_clicks2cart/static/src/img/holiday_prod_1.png new file mode 100644 index 0000000..0618350 Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/holiday_prod_1.png differ diff --git a/addons/theme_clicks2cart/static/src/img/holiday_prod_2.png b/addons/theme_clicks2cart/static/src/img/holiday_prod_2.png new file mode 100644 index 0000000..f4d1fce Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/holiday_prod_2.png differ diff --git a/addons/theme_clicks2cart/static/src/img/holiday_prod_3.png b/addons/theme_clicks2cart/static/src/img/holiday_prod_3.png new file mode 100644 index 0000000..1039288 Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/holiday_prod_3.png differ diff --git a/addons/theme_clicks2cart/static/src/img/holiday_prod_4.png b/addons/theme_clicks2cart/static/src/img/holiday_prod_4.png new file mode 100644 index 0000000..2c8ece5 Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/holiday_prod_4.png differ diff --git a/addons/theme_clicks2cart/static/src/img/holiday_promo_bg.png b/addons/theme_clicks2cart/static/src/img/holiday_promo_bg.png new file mode 100644 index 0000000..4d0e465 Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/holiday_promo_bg.png differ diff --git a/addons/theme_clicks2cart/static/src/img/holiday_promo_bg_v3.png b/addons/theme_clicks2cart/static/src/img/holiday_promo_bg_v3.png new file mode 100644 index 0000000..86bb2e6 Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/holiday_promo_bg_v3.png differ diff --git a/addons/theme_clicks2cart/static/src/img/wedding_col_v2.png b/addons/theme_clicks2cart/static/src/img/wedding_col_v2.png new file mode 100644 index 0000000..302f7ee Binary files /dev/null and b/addons/theme_clicks2cart/static/src/img/wedding_col_v2.png differ diff --git a/addons/theme_clicks2cart/static/src/scss/theme.scss b/addons/theme_clicks2cart/static/src/scss/theme.scss index f948319..74ed73c 100644 --- a/addons/theme_clicks2cart/static/src/scss/theme.scss +++ b/addons/theme_clicks2cart/static/src/scss/theme.scss @@ -1,224 +1,956 @@ -// Custom Header & Top Bar -.o_top_bar { - font-size: 0.8rem; - color: #666; - padding: 8px 0; - border-bottom: 1px solid rgba(0, 0, 0, 0.05); -} - -header#top { - background: transparent; - transition: background 0.3s ease; - padding: 15px 0; - - &.o_header_is_scrolled { - background: rgba(255, 255, 255, 0.95) !important; - backdrop-filter: blur(10px); - box-shadow: 0 2px 10px rgba(0,0,0,0.05); - } - - .nav-link { - font-family: $font-family-sans-serif; - font-weight: 500; - letter-spacing: 0.5px; - font-size: 0.95rem; - color: #000; - - &.active { - border-bottom: 2px solid #000; - } - } - - .navbar-brand { - img { - max-height: 50px; - } - } - - .header-icons { - i { - font-size: 1.2rem; - color: #000; - } - - .cart-badge { - background: #000; - color: #fff; - font-size: 0.6rem; - padding: 2px 5px; - border-radius: 50%; - position: absolute; - top: -5px; - right: -8px; - } - } -} - -// Hero Section -.s_hero_premium { - position: relative; - background-color: #f3e5d8; - background-image: url('https://landing.engotheme.com/html/jenstore/demo/img/slider-1.png'); - background-size: cover; - background-position: center bottom; - background-repeat: no-repeat; - padding: 120px 0 250px; - text-align: center; - overflow: hidden; - - .container { - position: relative; - z-index: 2; - } - - .hero-pre-title { - font-family: $font-family-sans-serif; - text-transform: uppercase; - letter-spacing: 4px; - font-size: 1.2rem; - margin-bottom: 15px; - color: #000; - } - - h1 { - font-family: $font-family-serif; - font-weight: 700; - font-size: 6rem; - margin-bottom: 25px; - line-height: 1; - color: #000; - } - - .hero-desc { - max-width: 600px; - margin: 0 auto 35px; - font-size: 1.15rem; - line-height: 1.6; - color: #333; - } - - .hero-separator { - width: 150px; - margin: 0 auto 45px; - display: block; - filter: brightness(0); // Ensure the separator is black - } - - .btn-shop-now { - background: #000; - color: #fff; - padding: 15px 50px; - font-family: $font-family-sans-serif; - text-transform: uppercase; - font-weight: 600; - letter-spacing: 2px; - border: none; - transition: all 0.3s ease; - - &:hover { - transform: translateY(-3px); - background: #222; - box-shadow: 0 5px 15px rgba(0,0,0,0.2); - } - } -} - -// Who We Are Section -.s_who_we_are { - padding: 100px 0; - - .who-we-are-wrapper { - position: relative; - background-repeat: no-repeat; - background-position: center; - background-size: contain; - min-height: 600px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - max-width: 1000px; - margin: 0 auto; - padding: 40px; - overflow: hidden; - - &::before { - content: "who we are ?"; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-family: inherit; - font-size: 10vw; - font-weight: 700; - color: #f7f7f7; - z-index: -1; - opacity: 0.1; - white-space: nowrap; - letter-spacing: -2px; - } - - @media (max-width: 991px) { - background-size: cover; - min-height: auto; - padding: 50px 20px; - } - - h2.title { - font-family: inherit; - font-weight: 700; - font-size: 3.5rem; - color: #000; - margin-bottom: 30px; - - @media (max-width: 768px) { - font-size: 2.5rem; - } - } - - p.description { - font-family: inherit; - font-size: 1.15rem; - line-height: 1.8; - color: #222; - max-width: 800px; - margin: 0 auto 40px auto; - - @media (max-width: 768px) { - font-size: 1rem; - } - } - - .founder-info { - display: flex; - align-items: center; - gap: 15px; - text-align: left; - margin-top: 20px; - - img { - border-radius: 50%; - border: 2px solid #fff; - box-shadow: 0 4px 10px rgba(0,0,0,0.1); - object-fit: cover; - } - - .details { - h6 { - font-family: inherit; - font-weight: 700; - font-size: 1.2rem; - margin: 0; - color: #000; - } - span { - font-size: 0.8rem; - text-transform: uppercase; - letter-spacing: 2px; - color: #999; - } - } - } - } -} \ No newline at end of file +// Custom Header & Top Bar +.o_top_bar { + font-size: 0.8rem; + color: #666; + padding: 8px 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); +} + +header#top { + background: transparent; + transition: background 0.3s ease; + padding: 15px 0; + + &.o_header_is_scrolled { + background: rgba(255, 255, 255, 0.95) !important; + backdrop-filter: blur(10px); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); + } + + .nav-link { + font-family: $font-family-sans-serif; + font-weight: 500; + letter-spacing: 0.5px; + font-size: 0.95rem; + color: #000; + + &.active { + border-bottom: 2px solid #000; + } + } + + .navbar-brand { + img { + max-height: 50px; + } + } + + .header-icons { + i { + font-size: 1.2rem; + color: #000; + } + + .cart-badge { + background: #000; + color: #fff; + font-size: 0.6rem; + padding: 2px 5px; + border-radius: 50%; + position: absolute; + top: -5px; + right: -8px; + } + } +} + +// Hero Section +.s_hero_premium { + position: relative; + height: 100vh; + min-height: 100vh; + text-align: center; + 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 { + position: relative; + z-index: 2; + padding-top: 100px; + padding-bottom: 100px; + } + + .hero-pre-title { + font-family: 'Outfit', sans-serif; + text-transform: uppercase; + letter-spacing: 4px; + font-size: 1.2rem; + margin-bottom: 15px; + color: #000; + } + + h1 { + font-family: 'Playfair Display', serif; + font-weight: 700; + font-size: 6rem; + margin-bottom: 25px; + line-height: 1.1; + color: #000; + } + + .hero-desc { + max-width: 600px; + margin: 0 auto 35px; + font-size: 1.15rem; + line-height: 1.6; + color: #333; + } + + .hero-separator { + width: 150px; + margin: 0 auto 45px; + display: block; + filter: brightness(0); + } + + .btn-shop-now { + background: #000; + color: #fff; + padding: 15px 50px; + font-family: 'Outfit', sans-serif; + text-transform: uppercase; + font-weight: 600; + letter-spacing: 2px; + border: none; + transition: all 0.3s ease; + + &:hover { + transform: translateY(-3px); + background: #222; + 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); + } + } + } +} + +// Who We Are Section +.s_who_we_are { + padding: 100px 0; + + .who-we-are-wrapper { + position: relative; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + min-height: 600px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + max-width: 1000px; + margin: 0 auto; + padding: 40px; + overflow: hidden; + + &::before { + content: "who we are ?"; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-family: inherit; + font-size: 10vw; + font-weight: 700; + color: #f7f7f7; + z-index: -1; + opacity: 0.1; + white-space: nowrap; + letter-spacing: -2px; + } + + @media (max-width: 991px) { + background-size: cover; + min-height: auto; + padding: 50px 20px; + } + + h2.title { + font-family: inherit; + font-weight: 700; + font-size: 3.5rem; + color: #000; + margin-bottom: 30px; + + @media (max-width: 768px) { + font-size: 2.5rem; + } + } + + p.description { + font-family: inherit; + font-size: 1.15rem; + line-height: 1.8; + color: #222; + max-width: 800px; + margin: 0 auto 40px auto; + + @media (max-width: 768px) { + font-size: 1rem; + } + } + + .founder-info { + display: flex; + align-items: center; + gap: 15px; + text-align: left; + margin-top: 20px; + + img { + border-radius: 50%; + border: 2px solid #fff; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + object-fit: cover; + } + + .details { + h6 { + font-family: inherit; + font-weight: 700; + font-size: 1.2rem; + margin: 0; + color: #000; + } + + span { + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 2px; + color: #999; + } + } + } + } +} + +// ========================================= +// 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; + } +} \ No newline at end of file diff --git a/addons/theme_clicks2cart/views/pages.xml b/addons/theme_clicks2cart/views/pages.xml index cf90c78..cd6e248 100644 --- a/addons/theme_clicks2cart/views/pages.xml +++ b/addons/theme_clicks2cart/views/pages.xml @@ -12,30 +12,78 @@
+
-
-
-
-

EXPLORE THE

-

New Arrivals

-

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout

- Separator -
- Shop now + - - -
-
-
-
-
-
-
+ + +
@@ -65,43 +113,353 @@ -
-
-
-

Shop by collection

-

Choose the perfect bouquet for any occasion

+
+ + + + +
+ +
+

Shop by collection

+

— All Category of Clicks2Cart —

-
-
-
- Flora Collection -
-

Flora Selection

-

Timeless classics for every day.

- Explore + + +
+ + +
+
+ + Summer Sale Collection + +
+ HELLO SUMMER +

Sale 10%

+ Shop now
-
-
- Wedding Collection -
-

Wedding Dreams

-

Elegance for your perfect day.

- Explore -
-
-
-
-
- Holiday Collection -
-

Holiday Joy

-

Festive spirits in every bloom.

- Explore + + + +
+ +
+ +
+
+ + HOT + + + SALE + +
+ + + +
+
+
+
+ +
+

+ +

+
+
+
+
+ + +
+
+ HOT +
+ Flora +
+
+
Flora Bouquet
+
+ +
+

$120.00

+
+
+
+
+
+
+ Wedding +
+
+
Wedding Roses
+
+ +
+

$115.40

+
+
+
+
+
+
+ Holiday +
+
+
Holiday Bloom
+
+ +
+

$250.60

+
+
+
+
+
+ SALE +
+ Sale +
+
+
Rose Bouquet
+
+ +
+

$100.90

+
+
+
+
+
+
+ +
+
+
+ + +
+ + + +
+ +
+

Wedding

+

~ All Category of Clickstocart ~

+
+ + +
+ + + +
+
+ + HOT + + + SALE + + +
+ + + + +
+ + + +
+
+ + + +
+
+
+ + + + +
+
+ HOT + SALE + + +
+
Wedding Flowers
+
$120.00
+
+
+
+
+ +
+
+ + + +
+ + +
+ + + +
+ +
+

Holiday

+

— Lorem Ipsum is simply dummy text of the printing —

+
+ +
+ +
+
+ + + +
+
+ + HOT + + + SALE + + +
+ + + +
+ +
+
+ +
+
+
+ + + +
+
+ HOT + +
+
Fun & Flirty By Bl..
+
+ +
+
$200.2
+
+
+
+
+
+
+ Winter White +
+ +
+
+
+
Winter White Bo..
+
+ +
+
$240.2
+
+
+
+
+
+
+ Tulipa Floriade +
+ +
+
+
+
Tulipa Floriade -..
+
+ +
+
$105.7
+
+
+
+
+
+ SALE +
+ Sweet Sorbet +
+ +
+
+
+
Sweet Sorbet..
+
+ +
+
$215.2
+
+
+
+
+
+
+ + +
+
+
+
+ HELLO SUMMER +

Sale 10%

+ Shop now
+ +