site_vitrine/theme/single-navier_product.php

663 lines
19 KiB
PHP

<?php
/**
* Single Product Template - Design inspiré navier-instruments.com
* Thème clair cohérent avec le site, structure moderne
*
* @package Navier_Instruments
*/
get_header();
while (have_posts()) :
the_post();
// Get product data
$categories = get_the_terms(get_the_ID(), 'product_category');
$category_name = ($categories && !is_wp_error($categories)) ? $categories[0]->name : 'Produit';
// Get custom fields
$subtitle = get_post_meta(get_the_ID(), 'product_subtitle', true);
$specs = get_post_meta(get_the_ID(), 'product_specifications', true);
// Default specs if none set
if (!$specs || empty($specs)) {
$specs = array(
array('label' => 'Plage de mesure', 'value' => '0.5 - 30 L/min'),
array('label' => 'Temps de réponse', 'value' => '< 0,3 ms'),
array('label' => 'Précision', 'value' => '± 2%'),
array('label' => 'Température', 'value' => '-20°C à +50°C'),
array('label' => 'Protection', 'value' => 'IP67'),
array('label' => 'Autonomie', 'value' => '> 8 heures'),
array('label' => 'Connectivité', 'value' => 'WiFi / USB'),
array('label' => 'Poids', 'value' => '< 500g'),
);
}
// Product image (featured image or placeholder)
$product_image = get_the_post_thumbnail_url(get_the_ID(), 'full');
if (!$product_image) {
$product_image = 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800&q=80';
}
?>
<style>
/* Product Page Specific Styles */
.product-page-wrapper {
padding-top: 100px;
}
/* Hero Section */
.product-hero-section {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, rgba(0, 180, 216, 0.05) 100%);
}
.product-hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.product-hero-text h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
color: var(--navier-primary, #00b4d8);
margin-bottom: 15px;
line-height: 1.1;
}
.product-hero-tagline {
font-size: 1.4rem;
color: var(--navier-secondary, #2dc653);
margin-bottom: 25px;
font-style: italic;
}
.product-hero-desc {
font-size: 1.1rem;
color: #555;
margin-bottom: 30px;
line-height: 1.7;
}
.product-hero-stats {
display: flex;
gap: 30px;
margin-bottom: 30px;
}
.product-stat {
text-align: center;
padding: 20px;
background: #fff;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.product-stat-value {
font-size: 2rem;
font-weight: 700;
color: var(--navier-primary, #00b4d8);
}
.product-stat-label {
font-size: 0.85rem;
color: #888;
text-transform: uppercase;
letter-spacing: 1px;
}
.product-hero-btns {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.product-hero-image {
position: relative;
}
.product-hero-image img {
width: 100%;
max-width: 500px;
border-radius: 20px;
box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}
.product-badge {
position: absolute;
background: var(--navier-primary, #00b4d8);
color: #fff;
padding: 12px 20px;
border-radius: 10px;
font-weight: 600;
font-size: 0.9rem;
box-shadow: 0 10px 30px rgba(0, 180, 216, 0.3);
}
.product-badge-1 { top: 10%; right: -5%; }
.product-badge-2 { bottom: 30%; left: -5%; }
.product-badge-3 { bottom: 5%; right: 10%; background: var(--navier-secondary, #2dc653); }
/* Features Row */
.product-features-row-section {
padding: 60px 0;
background: #fff;
}
.product-features-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.product-feature-box {
text-align: center;
padding: 30px 15px;
background: #f8f9fa;
border-radius: 15px;
transition: all 0.3s ease;
}
.product-feature-box:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
background: #fff;
}
.product-feature-icon {
width: 70px;
height: 70px;
margin: 0 auto 15px;
background: linear-gradient(135deg, var(--navier-primary, #00b4d8) 0%, var(--navier-secondary, #2dc653) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.product-feature-icon svg {
width: 35px;
height: 35px;
stroke: #fff;
}
.product-feature-box h4 {
font-size: 0.95rem;
color: #333;
font-weight: 600;
}
/* Content Sections */
.product-content-section {
padding: 80px 0;
}
.product-content-section.alt {
background: #f8f9fa;
}
.product-content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.product-content-grid.reverse {
direction: rtl;
}
.product-content-grid.reverse > * {
direction: ltr;
}
.product-content-text h2 {
font-size: 2.2rem;
font-weight: 700;
color: #222;
margin-bottom: 20px;
}
.product-content-text h2 span {
color: var(--navier-primary, #00b4d8);
}
.product-content-text p {
font-size: 1.1rem;
color: #555;
margin-bottom: 15px;
line-height: 1.7;
}
.product-content-list {
list-style: none;
padding: 0;
margin-top: 25px;
}
.product-content-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #eee;
color: #444;
}
.product-content-list li svg {
color: var(--navier-secondary, #2dc653);
flex-shrink: 0;
}
.product-content-image img {
width: 100%;
border-radius: 15px;
box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}
/* Banner Section */
.product-banner-section {
padding: 100px 20px;
background: linear-gradient(135deg, var(--navier-primary, #00b4d8) 0%, #0096c7 100%);
text-align: center;
color: #fff;
}
.product-banner-section h2 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
margin-bottom: 20px;
}
.product-banner-section p {
font-size: 1.3rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
/* Protection Grid */
.product-protection-section {
padding: 80px 0;
background: #fff;
}
.product-section-header {
text-align: center;
margin-bottom: 50px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding: 0 20px;
}
.product-section-header h2 {
font-size: 2.2rem;
font-weight: 700;
color: #222;
margin-bottom: 15px;
}
.product-section-header p {
font-size: 1.1rem;
color: #666;
}
.product-protection-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
.product-protection-card {
text-align: center;
padding: 40px 30px;
background: #f8f9fa;
border-radius: 20px;
transition: all 0.3s ease;
}
.product-protection-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0,0,0,0.1);
background: #fff;
}
.product-protection-card img {
width: 100px;
height: 100px;
object-fit: contain;
margin-bottom: 20px;
}
.product-protection-card h3 {
font-size: 1.2rem;
color: var(--navier-primary, #00b4d8);
margin-bottom: 10px;
}
.product-protection-card p {
color: #666;
}
/* Specs Section */
.product-specs-section {
padding: 80px 0;
background: #f8f9fa;
}
.product-specs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.product-spec-item {
display: flex;
justify-content: space-between;
padding: 18px 25px;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.product-spec-label {
color: #666;
}
.product-spec-value {
font-weight: 600;
color: var(--navier-primary, #00b4d8);
}
/* CTA Section */
.product-cta-section {
padding: 80px 20px;
background: linear-gradient(135deg, var(--navier-secondary, #2dc653) 0%, #25a244 100%);
text-align: center;
color: #fff;
}
.product-cta-section h2 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 15px;
}
.product-cta-section p {
font-size: 1.2rem;
opacity: 0.9;
margin-bottom: 30px;
}
.product-cta-btns {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.btn-white {
padding: 16px 35px;
background: #fff;
color: var(--navier-secondary, #2dc653);
border: none;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-white:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.btn-outline-white {
padding: 16px 35px;
background: transparent;
color: #fff;
border: 2px solid #fff;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-outline-white:hover {
background: #fff;
color: var(--navier-secondary, #2dc653);
}
/* Responsive */
@media (max-width: 992px) {
.product-hero-grid,
.product-content-grid {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.product-content-grid.reverse {
direction: ltr;
}
.product-hero-image {
order: -1;
}
.product-badge {
display: none;
}
.product-features-container {
grid-template-columns: repeat(3, 1fr);
}
.product-protection-grid {
grid-template-columns: repeat(2, 1fr);
}
.product-hero-stats {
justify-content: center;
}
.product-hero-btns {
justify-content: center;
}
}
@media (max-width: 768px) {
.product-features-container {
grid-template-columns: repeat(2, 1fr);
}
.product-specs-grid {
grid-template-columns: 1fr;
}
.product-protection-grid {
grid-template-columns: 1fr;
}
.product-hero-stats {
flex-wrap: wrap;
}
}
</style>
<div class="product-page-wrapper">
<!-- Hero Section -->
<section class="product-hero-section">
<div class="product-hero-grid">
<div class="product-hero-text">
<h1><?php the_title(); ?></h1>
<p class="product-hero-tagline"><?php echo $subtitle ? esc_html($subtitle) : 'Le débitmètre dont vous avez toujours rêvé'; ?></p>
<p class="product-hero-desc">
Temps de réponse inférieur à <strong>0,3 ms</strong>. Solide, étanche et construit sur batterie rechargeable. WiFi et USB intégrés.
</p>
<div class="product-hero-stats">
<div class="product-stat">
<div class="product-stat-value">&lt; 0.3</div>
<div class="product-stat-label">ms réponse</div>
</div>
<div class="product-stat">
<div class="product-stat-value">IP67</div>
<div class="product-stat-label">Étanche</div>
</div>
<div class="product-stat">
<div class="product-stat-value">8h+</div>
<div class="product-stat-label">Autonomie</div>
</div>
</div>
<div class="product-hero-btns">
<a href="mailto:contact@navier-instruments.com" class="btn btn--primary">Demander un Devis</a>
<a href="#specs" class="btn btn--secondary">Spécifications</a>
</div>
</div>
<div class="product-hero-image">
<img src="<?php echo esc_url($product_image); ?>" alt="<?php the_title(); ?>">
<div class="product-badge product-badge-1">🇫🇷 Made in France</div>
<div class="product-badge product-badge-2">IP67 Étanche</div>
<div class="product-badge product-badge-3">WiFi Intégré</div>
</div>
</div>
</section>
<!-- Features Row -->
<section class="product-features-row-section">
<div class="product-features-container">
<div class="product-feature-box">
<div class="product-feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<path d="M12 6v6l4 2"/>
</svg>
</div>
<h4>Temps de réponse</h4>
</div>
<div class="product-feature-box">
<div class="product-feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="2">
<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/>
</svg>
</div>
<h4>Étanche IP67</h4>
</div>
<div class="product-feature-box">
<div class="product-feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="2">
<rect x="2" y="7" width="20" height="14" rx="2"/>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
</svg>
</div>
<h4>Robuste</h4>
</div>
<div class="product-feature-box">
<div class="product-feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="2">
<path d="M5 12.55a11 11 0 0 1 14.08 0"/>
<path d="M1.42 9a16 16 0 0 1 21.16 0"/>
<path d="M8.53 16.11a6 6 0 0 1 6.95 0"/>
<circle cx="12" cy="20" r="1"/>
</svg>
</div>
<h4>WiFi Intégré</h4>
</div>
<div class="product-feature-box">
<div class="product-feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="2">
<rect x="1" y="6" width="18" height="12" rx="2"/>
<path d="M23 13v-2"/>
</svg>
</div>
<h4>Batterie Li-ion</h4>
</div>
</div>
</section>
<!-- Content Section 1 - Made in France -->
<section class="product-content-section">
<div class="product-content-grid">
<div class="product-content-text">
<h2>Conçu et <span>Fabriqué en France</span></h2>
<p>Navier Instruments a développé l'appareil de mesure qui deviendra l'outil de prédilection des laboratoires nomades.</p>
<p>Conçu selon trois principes : <strong>Solid, Waterproof, Dustproof</strong>.</p>
<ul class="product-content-list">
<li>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="20 6 9 17 4 12"/>
</svg>
Aluminium usiné CNC pour une précision maximale
</li>
<li>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="20 6 9 17 4 12"/>
</svg>
Écran polycarbonate 3mm compatible gants
</li>
<li>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="20 6 9 17 4 12"/>
</svg>
Poignée ergonomique spécialement conçue
</li>
</ul>
</div>
<div class="product-content-image">
<img src="https://images.unsplash.com/photo-1581092160607-ee22621dd758?w=800&q=80" alt="Fabrication en France">
</div>
</div>
</section>
<!-- Banner Section -->
<section class="product-banner-section">
<h2>Un Ordinateur de Poche</h2>
<p>Plus de 8 heures d'autonomie avec batterie Li-ion rechargeable et chargeur USB magnétique</p>
</section>
<!-- Content Section 2 - Temperature -->
<section class="product-content-section alt">
<div class="product-content-grid reverse">
<div class="product-content-text">
<h2>Large Plage de <span>Température</span></h2>
<p>Du froid polaire à la chaleur tropicale, le <?php the_title(); ?> maintient ses performances.</p>
<p>Testé et certifié pour fonctionner de <strong>-20°C à +50°C</strong>.</p>
<ul class="product-content-list">
<li>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="20 6 9 17 4 12"/>
</svg>
Fonctionnement en conditions extrêmes
</li>
<li>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="20 6 9 17 4 12"/>
</svg>
Calibration stable sur toute la plage
</li>
</ul>
</div>
<div class="product-content-image">
<img src="https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?w=800&q=80" alt="Conditions extrêmes">
</div>
</div>
</section>
<!-- Protection Section -->
<section class="product-protection-section">
<div class="product-section-header">
<h2>Prêt pour Ploof, Splaash et Badaboum</h2>
<p>Conçu pour résister aux conditions les plus extrêmes</p>
</div>
<div class="product-protection-grid">
<div class="product-protection-card">
<img src="https://img.icons8.com/fluency/100/000000/security-checked.png" alt="ShockProof">
<h3>ShockProof</h3>
<p>Résistant aux chocs et aux chutes</p>
</div>
<div class="product-protection-card">
<img src="https://img.icons8.com/fluency/100/000000/water.png" alt="WaterProof">
<h3>WaterProof</h3>
<p>IP67 - Submersion jusqu'à 1m</p>
</div>
<div class="product-protection-card">
<img src="https://img.icons8.com/fluency/100/000000/wind.png" alt="DustProof">
<h3>DustProof</h3>
<p>Protection totale contre les particules</p>
</div>
</div>
</section>
<!-- Specifications Section -->
<section id="specs" class="product-specs-section">
<div class="product-section-header">
<h2>Spécifications Techniques</h2>
</div>
<div class="product-specs-grid">
<?php foreach ($specs as $spec) : ?>
<div class="product-spec-item">
<span class="product-spec-label"><?php echo esc_html($spec['label']); ?></span>
<span class="product-spec-value"><?php echo esc_html($spec['value']); ?></span>
</div>
<?php endforeach; ?>
</div>
</section>
<!-- CTA Section -->
<section class="product-cta-section">
<h2>Intéressé par le <?php the_title(); ?> ?</h2>
<p>Contactez notre équipe commerciale pour obtenir un devis personnalisé</p>
<div class="product-cta-btns">
<a href="mailto:contact@navier-instruments.com" class="btn-white">Demander un Devis</a>
<a href="tel:+33620094641" class="btn-outline-white">+33 (0) 6 20 09 46 41</a>
</div>
</section>
</div>
<?php
endwhile;
get_footer();