Update website templates and improve rental product display

This commit is contained in:
Alaguraj0361 2026-06-18 17:41:19 +05:30
parent 6b61000f4f
commit d4a8113c79
9 changed files with 73 additions and 96 deletions

View File

@ -14,107 +14,83 @@
<xpath expr="//div[@id='wrap']" position="replace"> <xpath expr="//div[@id='wrap']" position="replace">
<div id="wrap" class="oe_structure oe_empty tailwind-wrapper bg-cream" style="background-color: #fcf6e9;"> <div id="wrap" class="oe_structure oe_empty tailwind-wrapper bg-cream" style="background-color: #fcf6e9;">
<main class="flex-1"> <main class="flex-1">
<section class="mx-auto max-w-6xl px-6 py-20 md:py-28"> <section class="mx-auto max-w-6xl px-6 py-12">
<p class="mb-4 text-xs uppercase tracking-[0.4em] text-gold">Services</p> <p class="mb-4 text-xs uppercase tracking-[0.4em] text-gold">Rental Collection</p>
<h1 class="font-serif text-5xl text-navy md:text-6xl">Vastu Consultation Packages</h1> <h1 class="font-serif text-5xl text-navy md:text-6xl mb-6">Our Event Rental Products</h1>
<p class="mt-6 max-w-2xl text-muted-foreground">Each session is personalised. If you're unsure which package suits you, start by booking and we'll find the right fit together.</p> <p class="mt-2 max-w-2xl text-muted-foreground mb-12">Browse our premium collection of event rental items to elevate your special occasion.</p>
<div class="mt-16 grid gap-6 md:grid-cols-2">
<div class="group flex flex-col rounded-xl border border-border/60 bg-card p-8 transition-shadow hover:shadow-lg"> <div class="row">
<p class="text-xs uppercase tracking-[0.25em] text-gold">For the spaces you live in</p> <!-- Category Sidebar -->
<h2 class="mt-3 font-serif text-2xl text-navy">Home Vastu Consultation</h2> <div class="col-md-3 mb-4">
<p class="mt-3 text-sm leading-relaxed text-muted-foreground">A complete energetic review of your home - entrance, bedrooms, kitchen, and living areas - with a written report of practical, room-by-room recommendations.</p> <div class="bg-card rounded-xl border border-border/60 p-4 shadow-sm">
<div class="mt-6 flex flex-wrap gap-x-5 gap-y-2 text-xs text-muted-foreground"> <h5 class="font-serif text-xl text-navy mb-4" style="border-bottom: 2px solid #d4a14a; padding-bottom: 8px;">Categories</h5>
<span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg> 90 minutes + report</span> <div class="list-group list-group-flush" style="background: transparent;">
<span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-3.5 w-3.5" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg> Online or in person</span> <a t-att-href="'/rentals' + (search and ('?search=' + search) or '')"
</div> t-att-class="'list-group-item list-group-item-action border-0 px-2 py-2 rounded font-medium ' + (not current_category and 'bg-navy text-cream' or 'text-navy hover:bg-navy/5 bg-transparent')"
<div style="margin-top: 1.5rem; height: 1px; background: linear-gradient(to right, transparent, rgba(212, 161, 74, 0.45), transparent);"></div> style="transition: all 0.2s; text-decoration: none;">
<div class="mt-6 flex items-end justify-between"> All Products
<span class="font-serif text-2xl text-navy">$ on request</span> </a>
<a href="/rental/request" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 shadow h-8 rounded-md px-3 text-xs bg-navy text-cream hover:bg-navy/90" style="color: #fcf6e9;">Book</a> <t t-foreach="categories" t-as="cat">
<a t-att-href="'/rentals?category=' + str(cat.id) + (search and ('&amp;search=' + search) or '')"
t-att-class="'list-group-item list-group-item-action border-0 px-2 py-2 rounded font-medium mt-1 ' + (current_category == cat.id and 'bg-navy text-cream' or 'text-navy hover:bg-navy/5 bg-transparent')"
style="transition: all 0.2s; text-decoration: none;">
<span t-field="cat.name"/>
</a>
</t>
</div>
</div> </div>
</div> </div>
<div class="group flex flex-col rounded-xl border border-border/60 bg-card p-8 transition-shadow hover:shadow-lg">
<p class="text-xs uppercase tracking-[0.25em] text-gold">For offices, studios &amp; retail</p> <!-- Products Section -->
<h2 class="mt-3 font-serif text-2xl text-navy">Business Vastu Consultation</h2> <div class="col-md-9">
<p class="mt-3 text-sm leading-relaxed text-muted-foreground">Align your workspace for growth, focus, and prosperity. Includes entrance, seating, cash counter, and reception placement guidance.</p> <!-- Search and Filter Area -->
<div class="mt-6 flex flex-wrap gap-x-5 gap-y-2 text-xs text-muted-foreground"> <div class="mb-6">
<span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg> 90 minutes + report</span> <form action="/rentals" method="get" class="flex gap-2">
<span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-3.5 w-3.5" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg> Online or in person</span> <input type="hidden" name="category" t-att-value="current_category" t-if="current_category"/>
<input type="text" name="search" class="form-control flex-1 px-4 py-2 border border-border rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-gold" placeholder="Search rental products..." t-att-value="search"/>
<button type="submit" class="btn bg-navy text-cream hover:bg-navy/90 px-6 py-2 rounded-lg font-medium shadow-sm transition-colors" style="color: #fcf6e9; border: none;">Search</button>
</form>
</div> </div>
<div style="margin-top: 1.5rem; height: 1px; background: linear-gradient(to right, transparent, rgba(212, 161, 74, 0.45), transparent);"></div>
<div class="mt-6 flex items-end justify-between"> <!-- Empty state -->
<span class="font-serif text-2xl text-navy">$ on request</span> <div class="text-center py-16 bg-card rounded-xl border border-border/60 shadow-sm" t-if="not products">
<a href="/rental/request" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 shadow h-8 rounded-md px-3 text-xs bg-navy text-cream hover:bg-navy/90" style="color: #fcf6e9;">Book</a> <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#d4a14a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="mx-auto mb-4"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
<h3 class="font-serif text-2xl text-navy mb-2">No Products Found</h3>
<p class="text-muted-foreground text-sm">We couldn't find any rental products matching your filters.</p>
<a href="/rentals" class="mt-4 inline-block text-gold underline text-sm font-semibold">Clear Filters</a>
</div> </div>
</div>
<div class="group flex flex-col rounded-xl border border-border/60 bg-card p-8 transition-shadow hover:shadow-lg"> <!-- Product Grid -->
<p class="text-xs uppercase tracking-[0.25em] text-gold">For clinics, studios &amp; retreats</p> <div class="row" t-if="products">
<h2 class="mt-3 font-serif text-2xl text-navy">Wellness Centre Vastu Review</h2> <t t-foreach="products" t-as="product">
<p class="mt-3 text-sm leading-relaxed text-muted-foreground">Create environments that support healing - for clients and practitioners alike. Treatment room placement, flow, and energetic clarity.</p> <div class="col-md-4 col-sm-6 mb-4">
<div class="mt-6 flex flex-wrap gap-x-5 gap-y-2 text-xs text-muted-foreground"> <div class="group flex flex-col h-100 rounded-xl border border-border/60 bg-card transition-shadow hover:shadow-lg overflow-hidden">
<span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg> 2 hours + report</span> <!-- Product Image -->
<span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-3.5 w-3.5" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg> Online or in person</span> <div class="relative overflow-hidden bg-slate-100" style="height: 200px;">
<img t-if="product.image_1920" t-att-src="image_data_uri(product.image_1920)" class="w-100 h-100 object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy"/>
<div t-else="" class="d-flex align-items-center justify-content-center h-100 text-muted bg-slate-50">
<i class="fa fa-picture-o fa-3x text-slate-300"></i>
</div>
</div>
<!-- Product Details -->
<div class="p-4 d-flex flex-column flex-grow-1">
<h3 class="font-serif text-lg text-navy font-bold mb-2 group-hover:text-gold transition-colors" t-field="product.name"/>
<p class="text-sm text-muted-foreground leading-relaxed flex-grow-1 mb-4" t-field="product.description_sale" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;"/>
<div class="mt-auto pt-3 border-t border-border/40 d-flex justify-content-between align-items-center">
<div>
<span class="font-serif text-lg text-navy font-bold" t-field="product.rental_price_per_day" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
<span class="text-xs text-muted-foreground block">/ day</span>
</div>
<a t-att-href="'/rentals/%s' % slug(product)" class="inline-flex items-center justify-center font-medium cursor-pointer transition-colors px-3 py-1.5 text-xs bg-navy text-cream hover:bg-navy/90 rounded-md shadow-sm" style="color: #fcf6e9; text-decoration: none;">
View Details
</a>
</div>
</div>
</div>
</div>
</t>
</div> </div>
<div style="margin-top: 1.5rem; height: 1px; background: linear-gradient(to right, transparent, rgba(212, 161, 74, 0.45), transparent);"></div>
<div class="mt-6 flex items-end justify-between">
<span class="font-serif text-2xl text-navy">$ on request</span>
<a href="/rental/request" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 shadow h-8 rounded-md px-3 text-xs bg-navy text-cream hover:bg-navy/90" style="color: #fcf6e9;">Book</a>
</div>
</div>
<div class="group flex flex-col rounded-xl border border-border/60 bg-card p-8 transition-shadow hover:shadow-lg">
<p class="text-xs uppercase tracking-[0.25em] text-gold">For your sacred corner</p>
<h2 class="mt-3 font-serif text-2xl text-navy">Altar Placement Guidance</h2>
<p class="mt-3 text-sm leading-relaxed text-muted-foreground">A focused session on placing and arranging your altar or prayer space so it feels grounded, intentional, and alive.</p>
<div class="mt-6 flex flex-wrap gap-x-5 gap-y-2 text-xs text-muted-foreground">
<span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg> 45 minutes</span>
<span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-3.5 w-3.5" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg> Online</span>
</div>
<div style="margin-top: 1.5rem; height: 1px; background: linear-gradient(to right, transparent, rgba(212, 161, 74, 0.45), transparent);"></div>
<div class="mt-6 flex items-end justify-between">
<span class="font-serif text-2xl text-navy">$ on request</span>
<a href="/rental/request" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 shadow h-8 rounded-md px-3 text-xs bg-navy text-cream hover:bg-navy/90" style="color: #fcf6e9;">Book</a>
</div>
</div>
<div class="group flex flex-col rounded-xl border border-border/60 bg-card p-8 transition-shadow hover:shadow-lg">
<p class="text-xs uppercase tracking-[0.25em] text-gold">Before you build or move</p>
<h2 class="mt-3 font-serif text-2xl text-navy">Floor Plan Review</h2>
<p class="mt-3 text-sm leading-relaxed text-muted-foreground">Send across a floor plan and receive a written Vastu review with suggested adjustments before construction or move-in.</p>
<div class="mt-6 flex flex-wrap gap-x-5 gap-y-2 text-xs text-muted-foreground">
<span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg> Written report</span>
<span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-3.5 w-3.5" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg> Remote review</span>
</div>
<div style="margin-top: 1.5rem; height: 1px; background: linear-gradient(to right, transparent, rgba(212, 161, 74, 0.45), transparent);"></div>
<div class="mt-6 flex items-end justify-between">
<span class="font-serif text-2xl text-navy">$ on request</span>
<a href="/rental/request" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 shadow h-8 rounded-md px-3 text-xs bg-navy text-cream hover:bg-navy/90" style="color: #fcf6e9;">Book</a>
</div>
</div>
<div class="group flex flex-col rounded-xl border border-border/60 bg-card p-8 transition-shadow hover:shadow-lg">
<p class="text-xs uppercase tracking-[0.25em] text-gold">Continuing the work</p>
<h2 class="mt-3 font-serif text-2xl text-navy">Follow-up Consultation</h2>
<p class="mt-3 text-sm leading-relaxed text-muted-foreground">For existing clients - to check in on remedies applied, review new spaces, or revisit any concerns over time.</p>
<div class="mt-6 flex flex-wrap gap-x-5 gap-y-2 text-xs text-muted-foreground">
<span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg> 45 minutes</span>
<span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-3.5 w-3.5" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg> Online or in person</span>
</div>
<div style="margin-top: 1.5rem; height: 1px; background: linear-gradient(to right, transparent, rgba(212, 161, 74, 0.45), transparent);"></div>
<div class="mt-6 flex items-end justify-between">
<span class="font-serif text-2xl text-navy">$ on request</span>
<a href="/rental/request" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 shadow h-8 rounded-md px-3 text-xs bg-navy text-cream hover:bg-navy/90" style="color: #fcf6e9;">Book</a>
</div>
</div>
</div>
</section>
<section class="bg-card/40" style="border-top: 1px solid #e0d6c6;">
<div class="mx-auto max-w-6xl px-6 py-20 md:py-28">
<div class="mb-12 max-w-2xl">
<p class="mb-3 text-xs uppercase tracking-[0.3em] text-gold">A quick orientation</p>
<h2 class="font-serif text-4xl text-navy md:text-5xl">How Vastu maps to the rooms you live in</h2>
<p class="mt-5 text-muted-foreground">A glimpse of the directional principles that shape every consultation - from the kitchen's energy of nourishment to the bedroom's call for rest.</p>
</div>
<div class="relative">
<div class="absolute -inset-6 -z-10 rounded-3xl bg-gradient-to-br from-gold-soft/30 to-sage/15 blur-2xl"></div>
<img alt="Vastu-inspired room guide" class="w-full rounded-2xl shadow-2xl ring-1 ring-navy/10" loading="lazy" src="/theme_aakriti_events/static/src/img/vastu-rooms.png"/>
</div> </div>
</div> </div>
</section> </section>
@ -123,6 +99,7 @@
</xpath> </xpath>
</template> </template>
<!-- Inherit and Override Product Detail Page --> <!-- Inherit and Override Product Detail Page -->
<template id="rental_product_detail_template_inherit" inherit_id="event_rental.rental_product_detail_template"> <template id="rental_product_detail_template_inherit" inherit_id="event_rental.rental_product_detail_template">
<xpath expr="//div[@id='wrap']" position="replace"> <xpath expr="//div[@id='wrap']" position="replace">