alaguraj/odoo_clicks2cart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement custom homepage with a hero carousel, "Who we are" section, and product collections.

Browse Source
This commit is contained in:
Alaguraj0361 2026-03-11 16:46:32 +05:30
parent dd7a1ccd8d
commit e8fd113f54
2 changed files with 292 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
addons/theme_clicks2cart/static/src/scss/theme.scss
View File

@ -761,7 +761,7 @@ header#top {
// Left Column: 2x2 Product Grid
.s_holiday_prod_grid {
.s_cat_card {
margin-bottom: 50px;
margin-bottom: 20px;
padding: 0;
border: none;
box-shadow: none;
@ -1252,4 +1252,189 @@ footer#bottom.o_footer {
pointer-events: none;
z-index: 3;
}
}
// =========================================
// Product Action Hover Icons (Global)
// =========================================
.s_product_actions {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -40%);
display: flex;
gap: 12px;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 25;
.action-btn {
width: 44px;
height: 44px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #333 !important;
text-decoration: none !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
font-size: 1rem;
&:hover {
background: #e6b3a3;
color: #fff !important;
transform: scale(1.1);
box-shadow: 0 8px 20px rgba(230, 179, 163, 0.4);
}
}
}
// Reveal actions on hover
.s_col_product_img:hover .s_product_actions,
.s_wedding_card_img_wrap:hover .s_product_actions,
.s_cat_img_wrap:hover .s_product_actions {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%);
}
// Wedding Section Image Wrapper
.s_wedding_card_img_wrap {
background: #f8f8f8;
height: 250px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: all 0.3s ease;
img {
max-height: 220px;
object-fit: contain;
mix-blend-mode: multiply;
transition: transform 0.6s ease;
}
&:hover img {
transform: scale(1.1);
}
}
// =========================================
// Latest Blogs Section
// =========================================
.s_blogs_section {
padding: 120px 0;
position: relative;
background-color: #fff;
overflow: hidden;
.s_blogs_header {
text-align: center;
margin-bottom: 80px;
position: relative;
z-index: 5;
&::before {
content: "Latest Blogs";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
font-family: 'Playfair Display', serif;
font-size: 8rem;
font-weight: 700;
color: #f7f7f7;
z-index: -1;
opacity: 0.8; // Changed from 0.15 to be more visible like the screenshot
white-space: nowrap;
letter-spacing: -2px;
}
.s_blogs_title {
font-family: 'Playfair Display', serif;
font-size: 4rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 5px;
}
.s_blogs_subtitle {
font-family: 'Outfit', sans-serif;
font-size: 0.9rem;
color: #666;
letter-spacing: 1px;
margin: 0;
}
}
.s_blog_card {
margin-bottom: 40px;
transition: all 0.4s ease;
.s_blog_img_wrap {
overflow: hidden;
margin-bottom: 25px;
img {
width: 100%;
height: auto;
transition: transform 0.8s ease;
display: block;
aspect-ratio: 16 / 11;
object-fit: cover;
}
}
&:hover .s_blog_img_wrap img {
transform: scale(1.05);
}
.s_blog_info {
.s_blog_meta {
display: flex;
align-items: center;
gap: 15px;
font-family: 'Outfit', sans-serif;
font-size: 0.85rem;
color: #888;
margin-bottom: 15px;
i {
margin-right: 5px;
color: #e6b3a3;
}
.meta-sep {
color: #ddd;
}
}
.s_blog_name {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 700;
color: #1a1a1a;
line-height: 1.3;
margin-bottom: 15px;
transition: color 0.3s ease;
cursor: pointer;
&:hover {
color: #e6b3a3;
}
}
.s_blog_desc {
font-family: 'Outfit', sans-serif;
font-size: 0.95rem;
color: #666;
line-height: 1.6;
}
}
}
}

149
addons/theme_clicks2cart/views/pages.xml
View File

@ -156,10 +156,15 @@
<t t-elif="product_index == 3">
<span class="s_col_badge s_col_badge--sale">SALE</span>
</t>
<div class="s_col_product_img">
<div class="s_col_product_img position-relative overflow-hidden">
<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 class="s_product_actions">
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
<a t-attf-href="/shop/cart/update_short?product_id=#{product.product_variant_id.id}" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="s_col_product_info">
<h6 class="s_col_product_name" t-field="product.name"/>
@ -178,8 +183,13 @@
<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">
<div class="s_col_product_img position-relative overflow-hidden">
<img src="/theme_clicks2cart/static/src/img/flora_col.png" alt="Flora"/>
<div class="s_product_actions">
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="s_col_product_info">
<h6 class="s_col_product_name">Flora Bouquet</h6>
@ -192,8 +202,13 @@
</div>
<div class="col-6">
<div class="s_col_product_card">
<div class="s_col_product_img">
<div class="s_col_product_img position-relative overflow-hidden">
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Wedding"/>
<div class="s_product_actions">
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="s_col_product_info">
<h6 class="s_col_product_name">Wedding Roses</h6>
@ -206,8 +221,13 @@
</div>
<div class="col-6">
<div class="s_col_product_card">
<div class="s_col_product_img">
<div class="s_col_product_img position-relative overflow-hidden">
<img src="/theme_clicks2cart/static/src/img/holiday_col.png" alt="Holiday"/>
<div class="s_product_actions">
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="s_col_product_info">
<h6 class="s_col_product_name">Holiday Bloom</h6>
@ -221,8 +241,13 @@
<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">
<div class="s_col_product_img position-relative overflow-hidden">
<img src="/theme_clicks2cart/static/src/img/hero_bg.png" alt="Sale"/>
<div class="s_product_actions">
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="s_col_product_info">
<h6 class="s_col_product_name">Rose Bouquet</h6>
@ -281,10 +306,15 @@
</t>
<!-- Product Image -->
<div style="background: #f8f8f8; height: 230px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
<div class="s_wedding_card_img_wrap position-relative">
<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" style="max-height: 210px; object-fit: contain; mix-blend-mode: multiply;"/>
<img t-att-src="website.image_url(product, 'image_512')" t-att-alt="product.name" loading="lazy"/>
</a>
<div class="s_product_actions">
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
<a t-attf-href="/shop/cart/update_short?product_id=#{product.product_variant_id.id}" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<!-- Product Info -->
@ -314,8 +344,13 @@
<t t-if="item[4]">
<span class="position-absolute top-0 end-0 m-2 badge" t-attf-style="background:#{item[4] == 'SALE' and '#e74c3c' or '#e6b3a3'}; border-radius:0; font-size:0.65rem; padding: 4px 10px; letter-spacing:1px; z-index: 10;" t-esc="item[4]"/>
</t>
<div style="background: #f8f8f8; height: 230px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Product" style="max-height: 210px; object-fit: contain; mix-blend-mode: multiply;"/>
<div class="s_wedding_card_img_wrap position-relative">
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Product"/>
<div class="s_product_actions">
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="pb-2">
<span class="d-block fw-bold text-dark mb-1" style="font-family: 'Outfit'; font-size: 0.95rem;" t-esc="item[0]"/>
@ -371,8 +406,10 @@
<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 class="s_product_actions">
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
<a t-attf-href="/shop/cart/update_short?product_id=#{product.product_variant_id.id}" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="s_cat_info">
@ -394,8 +431,10 @@
<div class="s_cat_img_wrap position-relative overflow-hidden">
<span class="s_cat_badge badge-hot">HOT</span>
<img src="/theme_clicks2cart/static/src/img/holiday_prod_1.png" alt="Fun &amp; Flirty"/>
<div class="s_cat_hover_btn">
<a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
<div class="s_product_actions">
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="s_cat_info">
@ -411,8 +450,10 @@
<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 class="s_product_actions">
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="s_cat_info">
@ -428,8 +469,10 @@
<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 class="s_product_actions">
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="s_cat_info">
@ -446,8 +489,10 @@
<div class="s_cat_img_wrap position-relative overflow-hidden">
<span class="s_cat_badge badge-sale">SALE</span>
<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 class="s_product_actions">
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="s_cat_info">
@ -597,40 +642,58 @@
</section>
<!-- Latest Blogs -->
<section class="py-5 bg-white">
<div class="container py-4">
<div class="text-center mb-5">
<h2 class="display-5 fw-bold" style="font-family: 'Playfair Display';">Latest Blogs</h2>
<p class="text-muted">Stories from our garden</p>
<section class="s_blogs_section">
<div class="container">
<div class="s_blogs_header">
<h2 class="s_blogs_title">Latest Blogs</h2>
<p class="s_blogs_subtitle">- Lorem Ipsum Is simply dummy text of the printing -</p>
</div>
<div class="row g-4">
<div class="row">
<div class="col-md-4">
<div class="card border-0 h-100">
<img src="/theme_clicks2cart/static/src/img/flora_col.png" class="card-img-top rounded-4 mb-3" alt="Blog 1" style="height: 250px; object-fit: cover;"/>
<div class="card-body p-0">
<p class="small text-uppercase text-muted fw-bold mb-1">Flower Care / 24 Feb 2024</p>
<h5 class="fw-bold mb-3" style="font-family: 'Playfair Display';">How to make your flowers last longer</h5>
<a href="/blog" class="text-dark fw-bold text-decoration-none border-bottom border-dark pb-1">Read More</a>
<div class="s_blog_card">
<div class="s_blog_img_wrap">
<img src="/theme_clicks2cart/static/src/img/flora_col.png" alt="Blog 1"/>
</div>
<div class="s_blog_info">
<div class="s_blog_meta">
<span><i class="fa fa-calendar-o"></i> May, 12 2018</span>
<span class="meta-sep">|</span>
<span><i class="fa fa-pencil-square-o"></i> Pixel-Creative</span>
</div>
<h4 class="s_blog_name">Choose for yourself the Flobal chiffon dress</h4>
<p class="s_blog_desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 h-100">
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" class="card-img-top rounded-4 mb-3" alt="Blog 2" style="height: 250px; object-fit: cover;"/>
<div class="card-body p-0">
<p class="small text-uppercase text-muted fw-bold mb-1">Wedding / 18 Feb 2024</p>
<h5 class="fw-bold mb-3" style="font-family: 'Playfair Display';">Choosing the perfect bridal bouquet</h5>
<a href="/blog" class="text-dark fw-bold text-decoration-none border-bottom border-dark pb-1">Read More</a>
<div class="s_blog_card">
<div class="s_blog_img_wrap">
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Blog 2"/>
</div>
<div class="s_blog_info">
<div class="s_blog_meta">
<span><i class="fa fa-calendar-o"></i> May, 12 2018</span>
<span class="meta-sep">|</span>
<span><i class="fa fa-pencil-square-o"></i> Pixel-Creative</span>
</div>
<h4 class="s_blog_name">Choose for yourself the Flobal chiffon dress</h4>
<p class="s_blog_desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 h-100">
<img src="/theme_clicks2cart/static/src/img/holiday_col.png" class="card-img-top rounded-4 mb-3" alt="Blog 3" style="height: 250px; object-fit: cover;"/>
<div class="card-body p-0">
<p class="small text-uppercase text-muted fw-bold mb-1">Interior / 12 Feb 2024</p>
<h5 class="fw-bold mb-3" style="font-family: 'Playfair Display';">Bring the nature into your living room</h5>
<a href="/blog" class="text-dark fw-bold text-decoration-none border-bottom border-dark pb-1">Read More</a>
<div class="s_blog_card">
<div class="s_blog_img_wrap">
<img src="/theme_clicks2cart/static/src/img/holiday_col.png" alt="Blog 3"/>
</div>
<div class="s_blog_info">
<div class="s_blog_meta">
<span><i class="fa fa-calendar-o"></i> May, 12 2018</span>
<span class="meta-sep">|</span>
<span><i class="fa fa-pencil-square-o"></i> Pixel-Creative</span>
</div>
<h4 class="s_blog_name">Choose for yourself the Flobal chiffon dress</h4>
<p class="s_blog_desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
</div>