Oliver/ODOO4projects.com
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Homepage relaunch: contrast fix, heading hierarchy, order widget refactor, final CTA band, depth & polish

Browse Source
This commit is contained in:
reef
2026-08-15 09:35:00 +00:00
parent cc5667bf7b
commit 85334fc4d2
7 changed files with 982 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+81 -64
View File
@@ -202,13 +202,23 @@
font-size: 1.5rem;
color: var(--primary);
margin-bottom: 0.75rem;
display: block;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.25rem;
height: 3.25rem;
border-radius: 1rem;
background: linear-gradient(135deg, rgba(113,75,103,0.12), rgba(113,75,103,0.04));
border: 1px solid rgba(113,75,103,0.1);
box-shadow: 0 4px 12px rgba(113, 75, 103, 0.12);
}
.features-strip .item h3 {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.3rem;
.features-strip .item h2 {
font-size: 1.02rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 0.35rem;
color: var(--dark);
letter-spacing: -0.01em;
}
.features-strip .item p {
font-size: 0.8rem;
@@ -292,7 +302,7 @@
<div class="hero-stats">
<span class="hero-stat"><i class="fas fa-check-circle"></i> 6 global locations</span>
<span class="hero-stat"><i class="fas fa-check-circle"></i> Deploy in 5 min</span>
<span class="hero-stat"><i class="fas fa-check-circle"></i> Instant setup</span>
<span class="hero-stat"><i class="fas fa-check-circle"></i> AI support included</span>
<span class="hero-stat"><i class="fas fa-check-circle"></i> Instant backups</span>
</div>
<div>
@@ -384,27 +394,27 @@
<div class="grid">
<div class="item">
<i class="fas fa-rocket"></i>
<h3>5-Minute Deployment</h3>
<h2>5-Minute Deployment</h2>
<p>No DevOps team needed. Pick a plan, choose your region, and your Odoo instance is live in minutes.</p>
</div>
<div class="item">
<i class="fas fa-shield-alt"></i>
<h3>Automatic Backups &amp; SSL</h3>
<h2>Automatic Backups &amp; SSL</h2>
<p>Daily backups stored in redundant slots. Free SSL certificates on every domain — always secure.</p>
</div>
<div class="item">
<i class="fas fa-globe"></i>
<h3>6 Global Locations</h3>
<h2>6 Global Locations</h2>
<p>US, UK, Brazil, India, Australia, Netherlands. Choose your data region at deploy time.</p>
</div>
<div class="item">
<i class="fas fa-code-branch"></i>
<h3>Git-Based Module Deployment</h3>
<p>Push custom modules via Git or use one-click Quick Git. No FTP, no shenanigans.</p>
<h2>Git-Based Module Deployment</h2>
<p>Push custom modules via Git or use one-click Quick Git. No FTP, no hassle.</p>
</div>
<div class="item">
<i class="fas fa-headset"></i>
<h3>Support Bot &amp; Human Support</h3>
<h2>Support Bot &amp; Human Support</h2>
<p>AI support bot for instant fixes. Human team for everything else. Your UUID is your key.</p>
</div>
</div>
@@ -458,7 +468,7 @@
via Git or use one-click Quick Git. No FTP, no hassle.
</li>
<li style="margin-bottom: 0.5rem;">
<strong>Full management through your <strong>ODOO Settings Panel</strong></strong>
<strong>Full management through your ODOO Settings Panel</strong>
&mdash; no SSH, no terminal, no DevOps team required.
</li>
</ol>
@@ -573,9 +583,9 @@
<p class="desc">&ldquo;ODOO Standard .. that is all my business needs&rdquo;</p>
<a href="javascript:void(0)" class="btn btn-primary" onclick="openOrderWidget('Side Hustle', 19.40, 214.0, false)">Buy Now</a>
<ul>
<li><i class="fas fa-check" style="color: #28a745"></i> ODOO CE Hosting</li>
<li><i class="fas fa-check" style="color: #28a745"></i> Automatic Backups</li>
<li><i class="fas fa-check" style="color: #28a745"></i> Domain Mapping, SSL Cert</li>
<li><i class="fas fa-check" style="color: var(--success)"></i> ODOO CE Hosting</li>
<li><i class="fas fa-check" style="color: var(--success)"></i> Automatic Backups</li>
<li><i class="fas fa-check" style="color: var(--success)"></i> Domain Mapping, SSL Cert</li>
</ul>
</div>
<div class="pcard-foot">Instant setup, satisfied or reimbursed.</div>
@@ -592,10 +602,10 @@
<p class="desc">&ldquo;I need some modules and professional reports&rdquo;</p>
<a href="javascript:void(0)" class="btn btn-primary" onclick="openOrderWidget('On the Rise', 36.25, 395.0, false)">Buy Now</a>
<ul>
<li><i class="fas fa-check" style="color: #28a745"></i> ODOO CE Hosting</li>
<li><i class="fas fa-check" style="color: #28a745"></i> Automatic Backups</li>
<li><i class="fas fa-check" style="color: #28a745"></i> Domain Mapping, SSL Cert</li>
<li><i class="fas fa-check" style="color: #28a745"></i> Module installation via GIT / quickGIT</li>
<li><i class="fas fa-check" style="color: var(--success)"></i> ODOO CE Hosting</li>
<li><i class="fas fa-check" style="color: var(--success)"></i> Automatic Backups</li>
<li><i class="fas fa-check" style="color: var(--success)"></i> Domain Mapping, SSL Cert</li>
<li><i class="fas fa-check" style="color: var(--success)"></i> Module installation via GIT / quickGIT</li>
</ul>
</div>
<div class="pcard-foot">Instant setup, satisfied or reimbursed.</div>
@@ -612,12 +622,12 @@
<p class="desc">&ldquo;ODOO Enterprise is a must have!&rdquo;</p>
<a href="javascript:void(0)" class="btn btn-primary" onclick="openOrderWidget('Powerhouse', 49.60, 535.0, false)">Buy Now</a>
<ul>
<li><i class="fas fa-check" style="color: #28a745"></i> ODOO CE Hosting</li>
<li><i class="fas fa-check" style="color: #28a745"></i> Automatic Backups</li>
<li><i class="fas fa-check" style="color: #28a745"></i> 3 Domain Mapping, SSL Cert</li>
<li><i class="fas fa-check" style="color: #28a745"></i> Module installation via GIT / quickGIT</li>
<li><i class="fas fa-check" style="color: #28a745"></i> 2 Workers</li>
<li><i class="fas fa-check" style="color: #28a745"></i> 2GB HDD</li>
<li><i class="fas fa-check" style="color: var(--success)"></i> ODOO CE Hosting</li>
<li><i class="fas fa-check" style="color: var(--success)"></i> Automatic Backups</li>
<li><i class="fas fa-check" style="color: var(--success)"></i> 3 Domain Mapping, SSL Cert</li>
<li><i class="fas fa-check" style="color: var(--success)"></i> Module installation via GIT / quickGIT</li>
<li><i class="fas fa-check" style="color: var(--success)"></i> 2 Workers</li>
<li><i class="fas fa-check" style="color: var(--success)"></i> 2GB HDD</li>
</ul>
</div>
<div class="pcard-foot">Instant setup, satisfied or reimbursed.</div>
@@ -632,12 +642,12 @@
<div class="price-save empire-no-save" style="display: none" data-monthly-text="" data-yearly-text=""></div>
</div>
<p class="desc">&ldquo;My house! My Horse! My Server!&rdquo;</p>
<a href="javascript:void(0)" class="btn btn-outline-primary" onclick="openOrderWidget('Empire', 80.0, 950.0, true)">Contact Us</a>
<a href="javascript:void(0)" class="btn btn-primary" onclick="openOrderWidget('Empire', 80.0, 950.0, true)">Get Custom Quote</a>
<ul>
<li><i class="fas fa-check" style="color: #28a745"></i> Our service on your server</li>
<li><i class="fas fa-check" style="color: #28a745"></i> All modules &amp; features</li>
<li><i class="fas fa-check" style="color: #28a745"></i> Unlimited customization</li>
<li><br /></li>
<li><i class="fas fa-check" style="color: var(--success)"></i> Our service on your server</li>
<li><i class="fas fa-check" style="color: var(--success)"></i> All modules &amp; features</li>
<li><i class="fas fa-check" style="color: var(--success)"></i> Unlimited customization</li>
<li><i class="fas fa-check" style="color: var(--success)"></i> Priority support &amp; dedicated onboarding</li>
</ul>
</div>
<div class="pcard-foot">Instant setup, satisfied or reimbursed.</div>
@@ -648,38 +658,36 @@
</section>
<!-- Order Widget -->
<div id="orderWidgetOverlay" style="display:none;position:fixed;inset:0;z-index:999;background:rgba(0,0,0,0.6);align-items:center;justify-content:center;">
<div id="orderPanelBuy" style="display:none;">
<div style="background:#fff;border-radius:1rem;max-width:460px;width:90%;overflow:hidden;position:relative;">
<button onclick="closeOrderWidget()" style="position:absolute;top:0.75rem;right:0.75rem;z-index:10;background:#fff;border:none;width:2.4rem;height:2.4rem;border-radius:50%;cursor:pointer;font-size:1.3rem;box-shadow:0 2px 8px rgba(0,0,0,0.1);color:#555;">&times;</button>
<div style="padding:2rem;">
<h2 style="font-size:clamp(1rem,2vw,1.24rem);margin-bottom:0.5rem;color:#1b1319;" id="orderPlanTitle">On the Rise</h2>
<p style="font-size:0.8rem;color:rgba(33,37,41,0.6);margin-bottom:1rem;">
<span id="orderPlanPrice">$ 36.25</span> <span id="orderPlanPeriod">/ month</span>
<span id="orderPlanTax" style="font-size:0.7rem;color:rgba(33,37,41,0.45);">+ tax</span>
</p>
<p id="orderCouponMsg" style="font-size:0.78rem;color:#28a745;margin-bottom:1rem;display:none;">Use coupon <strong>FREE TRIAL</strong> at checkout for 1 month free</p>
<p id="orderYearlySave" style="font-size:0.78rem;color:#28a745;margin-bottom:1rem;display:none;">Save <span id="orderSavePercent">15</span>% with yearly billing</p>
<label style="font-size:0.78rem;font-weight:500;display:block;margin-bottom:0.25rem;color:#1b1319;">Server Location</label>
<select id="orderServerLocation" style="width:100%;padding:0.6rem 0.8rem;font-size:0.82rem;border:1px solid #e5e3e0;border-radius:0.5rem;background:#fff;color:#1b1319;margin-bottom:1.5rem;font-family:Inter,sans-serif;cursor:pointer;">
<option value="USA">&#127482;&#127480; United States</option>
<option value="Brazil">&#127463;&#127479; Brazil</option>
<option value="India">&#127470;&#127475; India</option>
<option value="Australia">&#127462;&#127482; Australia</option>
<option value="Netherlands">&#127475;&#127473; Netherlands</option>
<option value="UK">&#127468;&#127463; United Kingdom</option>
</select>
<div style="margin-bottom:1rem;">
<label style="font-size:0.78rem;font-weight:500;display:block;margin-bottom:0.25rem;color:#1b1319;">Coupon Code</label>
<div style="display:flex;gap:0.5rem;">
<input id="orderCouponInput" type="text" value="FREE TRIAL" style="flex:1;padding:0.55rem 0.8rem;font-size:0.82rem;border:1px solid #e5e3e0;border-radius:0.5rem;background:#fff;color:#1b1319;font-family:Inter,sans-serif;" />
<button onclick="applyCoupon()" style="padding:0.55rem 1rem;font-size:0.78rem;background:#714b67;color:#fff;border:none;border-radius:0.5rem;cursor:pointer;font-family:Inter,sans-serif;font-weight:500;">Apply</button>
</div>
<p id="orderCouponStatus" style="font-size:0.7rem;color:#28a745;margin-top:0.3rem;display:none;">&#10003; Coupon applied</p>
<div id="orderWidgetOverlay" class="ow-overlay" onclick="if(event.target===this)closeOrderWidget()">
<div id="orderPanelBuy" class="ow-panel" style="display:none">
<button class="ow-close" onclick="closeOrderWidget()">&times;</button>
<div class="ow-content">
<h2 class="ow-title" id="orderPlanTitle">On the Rise</h2>
<p class="ow-price">
<span class="ow-price-amount" id="orderPlanPrice">$ 36.25</span> <span id="orderPlanPeriod">/ month</span>
<span class="ow-price-tax" id="orderPlanTax">+ tax</span>
</p>
<p class="ow-coupon-msg" id="orderCouponMsg">Use coupon <strong>FREE TRIAL</strong> at checkout for 1 month free</p>
<p class="ow-yearly-save" id="orderYearlySave">Save <span id="orderSavePercent">15</span>% with yearly billing</p>
<label class="ow-field-label" for="orderServerLocation">Server Location</label>
<select id="orderServerLocation" class="ow-select">
<option value="USA">&#127482;&#127480; United States</option>
<option value="Brazil">&#127463;&#127479; Brazil</option>
<option value="India">&#127470;&#127475; India</option>
<option value="Australia">&#127462;&#127482; Australia</option>
<option value="Netherlands">&#127475;&#127473; Netherlands</option>
<option value="UK">&#127468;&#127463; United Kingdom</option>
</select>
<div style="margin-bottom:1rem">
<label class="ow-field-label" for="orderCouponInput">Coupon Code</label>
<div class="ow-coupon-row">
<input id="orderCouponInput" type="text" value="FREE TRIAL" class="ow-input" />
<button class="ow-btn-apply" onclick="applyCoupon()">Apply</button>
</div>
<a id="orderBuyBtn" href="/contactus" class="btn btn-primary btn-lg" style="width:100%;text-align:center;display:block;">Continue to Stripe &rarr;</a>
<p style="font-size:0.68rem;color:rgba(33,37,41,0.45);text-align:center;margin-top:0.6rem;">&#128274; Secure Stripe checkout &middot; Credit card required</p>
<p class="ow-coupon-status" id="orderCouponStatus">&#10003; Coupon applied</p>
</div>
<a id="orderBuyBtn" href="/contactus" class="btn btn-primary btn-lg ow-buy">Continue to Stripe &rarr;</a>
<p class="ow-note">&#128274; Secure Stripe checkout &middot; Credit card required</p>
</div>
</div>
</div>
@@ -704,12 +712,21 @@
</div>
</section>
<!-- Final CTA -->
<section class="final-cta">
<div class="container">
<h2>Ready to deploy your Odoo?</h2>
<p>Pick a plan, choose your region, and your instance is live in under 5 minutes. No DevOps required.</p>
<a href="#pricing" class="btn-hero">See Plans &amp; Pricing &rarr;</a>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="fgrid">
<div>
<h5>Useful Links</h5>
<h4>Useful Links</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="support.html">Support</a></li>
@@ -719,12 +736,12 @@
</ul>
</div>
<div>
<h5>About us</h5>
<h4>About us</h4>
<p>We build smart, scalable business solutions by combining the <strong>stability</strong> of Odoo ERP with the <strong>power</strong> of AI and N8N automation.</p>
<p>From streamlined sales to global rollouts, our <strong>lean, eco-friendly</strong> approach helps businesses cut costs, boost efficiency, and grow without limits.</p>
</div>
<div>
<h5>Follow us on</h5>
<h4>Follow us on</h4>
<div class="social">
<a href="https://www.linkedin.com/company/odoo4projects/" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
<a href="/" target="_blank" aria-label="Home"><i class="fas fa-home"></i></a>