site_vitrine/theme/single-navier_product.php

485 lines
26 KiB
PHP

<?php
/**
* Single Product Template - Design FLO
* Inspiré de navier-instruments.com/fr/flo-fr/
*
* @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);
$features = get_post_meta(get_the_ID(), 'product_features', true);
$specs = get_post_meta(get_the_ID(), 'product_specifications', true);
$advantages = get_post_meta(get_the_ID(), 'product_advantages', true);
$datasheet = get_post_meta(get_the_ID(), 'product_datasheet', true);
// Images du produit FLO - Toutes les nouvelles images
$flo_images = array(
'main' => NAVIER_URI . '/assets/images/products/flo/Navier-Instruments-FlowMeter-ProductImage02.jpg',
'banner1' => NAVIER_URI . '/assets/images/products/flo/Flo-Page-Banner04B.jpg',
'banner2' => NAVIER_URI . '/assets/images/products/flo/Flo-Page-Banner07C.jpg.png',
'waterproof' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-WaterProof.png',
'dustproof' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-DustProof.png',
'dustproof2' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-DustProof02.png',
'dustproof3' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-DustProof03.png',
'shockproof' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-ShockProof.png',
'battery' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-Battery.png',
'double_battery' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-DoubleBattery.png',
'usb_charge' => NAVIER_URI . '/assets/images/products/flo/NavierInstruments-USB-Charge.png',
'response_time' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-ResponseTime.png',
'user_friendly' => NAVIER_URI . '/assets/images/products/flo/NavierInstruments-UserFriendly01.png',
'anti_dry' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-Anti-dry.png',
'protection' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-Over-CurrentProtection.png',
);
// Default features if none set
if (!$features || empty($features)) {
$features = array(
array('icon' => 'precision', 'title' => 'Temps de réponse', 'description' => 'Moins de 0,3 ms pour des mesures instantanées', 'image' => $flo_images['response_time']),
array('icon' => 'robust', 'title' => 'Petit, solide et léger', 'description' => 'Boîtier aluminium CNC avec modes minuterie/compteur', 'image' => $flo_images['user_friendly']),
array('icon' => 'waterproof', 'title' => 'Étanche', 'description' => 'IP67 - Immersion jusqu\'à 1m pendant 30 minutes', 'image' => $flo_images['waterproof']),
array('icon' => 'dustproof', 'title' => 'Étanche à la poussière', 'description' => 'Parfait pour les environnements industriels sales', 'image' => $flo_images['dustproof3']),
array('icon' => 'protection', 'title' => 'Protection surintensité', 'description' => 'Protection électronique avancée', 'image' => $flo_images['protection']),
);
}
// 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 de fonctionnement', 'value' => '-20°C à +50°C'),
array('label' => 'Indice de protection', 'value' => 'IP67'),
array('label' => 'Immersion', 'value' => 'Jusqu\'à 1m pendant 30 minutes'),
array('label' => 'Alimentation', 'value' => 'Batterie Li-ion rechargeable'),
array('label' => 'Autonomie', 'value' => '> 8 heures'),
array('label' => 'Charge', 'value' => 'USB magnétique'),
array('label' => 'Connectivité', 'value' => 'WiFi / USB'),
array('label' => 'Matériau boîtier', 'value' => 'Aluminium CNC'),
array('label' => 'Écran', 'value' => 'Polycarbonate 3mm (gants compatibles)'),
array('label' => 'Poids', 'value' => '< 500g'),
array('label' => 'Élément de mesure', 'value' => 'Élément Navier - linéarité exemplaire'),
);
}
?>
<!-- Hero Section - Fullscreen with Product -->
<section class="product-hero product-hero--fullscreen">
<div class="product-hero-bg">
<div class="product-hero-bg-gradient"></div>
</div>
<div class="container">
<div class="product-hero-inner">
<div class="product-hero-content" data-reveal="fade-right">
<span class="product-hero-badge">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
</svg>
<?php echo esc_html($category_name); ?>
</span>
<h1 class="product-hero-title" data-reveal="fade-up" data-delay="100">
<span class="title-main"><?php the_title(); ?></span>
<span class="title-tagline"><?php echo $subtitle ? esc_html($subtitle) : 'Le débitmètre dont vous avez toujours rêvé'; ?></span>
</h1>
<p class="product-hero-subtitle" data-reveal="fade-up" data-delay="200">
Le temps de réponse est 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-buttons" data-reveal="fade-up" data-delay="400">
<a href="#contact-product" class="btn btn--primary btn--large btn--glow">
Demander un Devis
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</a>
<a href="#specifications" class="btn btn--secondary btn--large">
Spécifications
</a>
</div>
</div>
<div class="product-hero-image" data-reveal="fade-left" data-delay="200">
<div class="product-hero-image-wrapper">
<img src="<?php echo esc_url($flo_images['main']); ?>" alt="<?php the_title(); ?> - Débitmètre portable" class="product-main-image">
<div class="product-hero-glow"></div>
</div>
<!-- Floating badges -->
<div class="floating-badge floating-badge--1" data-reveal="scale" data-delay="500">
<span class="badge-value">< 0.3</span>
<span class="badge-unit">ms</span>
</div>
<div class="floating-badge floating-badge--2" data-reveal="scale" data-delay="600">
<span class="badge-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path>
</svg>
</span>
<span class="badge-text">IP67</span>
</div>
<div class="floating-badge floating-badge--3" data-reveal="scale" data-delay="700">
<span class="badge-icon">🇫🇷</span>
<span class="badge-text">Made in France</span>
</div>
</div>
</div>
</div>
<!-- Scroll indicator -->
<div class="scroll-indicator" data-reveal="fade-up" data-delay="800">
<span>Découvrir</span>
<div class="scroll-arrow">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
</div>
</section>
<!-- Features Section - 5 Icons Row -->
<section class="product-features-section section">
<div class="container">
<div class="product-features-row">
<?php
$delay = 100;
foreach ($features as $index => $feature) :
$image = isset($feature['image']) ? $feature['image'] : '';
?>
<div class="product-feature-item" data-reveal="fade-up" data-delay="<?php echo $delay; ?>">
<div class="product-feature-icon-wrapper">
<?php if ($image) : ?>
<img src="<?php echo esc_url($image); ?>" alt="<?php echo esc_attr($feature['title']); ?>" class="feature-image">
<?php endif; ?>
</div>
<h4 class="product-feature-title"><?php echo esc_html($feature['title']); ?></h4>
</div>
<?php
$delay += 100;
endforeach;
?>
</div>
</div>
</section>
<!-- Banner Section - Made in France - Full Width -->
<section class="product-fullwidth-banner" style="background-image: url('<?php echo esc_url($flo_images['banner1']); ?>');">
<div class="banner-overlay"></div>
<div class="container">
<div class="banner-content-grid">
<div class="banner-text-content" data-reveal="fade-right">
<h2 class="banner-title">Conçu, Fabriqué et Pensé en France</h2>
<p class="banner-text">Navier instruments a développé l'appareil de mesure qui deviendra l'outil de prédilection des laboratoires nomades. Conçu selon trois principes : <strong>Solid, Waterproof, Dustproof</strong>.</p>
<ul class="banner-features-list">
<li data-reveal="fade-right" data-delay="100">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
Aluminium usiné CNC pour une précision maximale
</li>
<li data-reveal="fade-right" data-delay="200">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
Écran polycarbonate 3mm compatible gants
</li>
<li data-reveal="fade-right" data-delay="300">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
Poignée ergonomique spécialement conçue
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Nomad Section - Un Ordinateur de Poche -->
<section class="product-nomad section section--dark">
<div class="container">
<div class="nomad-inner">
<div class="nomad-content" data-reveal="fade-right">
<span class="section-badge section-badge--light">Nomade</span>
<h2 class="section-title section-title--light">Un Ordinateur de Poche</h2>
<p class="nomad-text">Équipé d'une batterie rechargeable Li-ion haute capacité, le <?php the_title(); ?> vous offre plus de <strong>8 heures d'autonomie</strong> continue.</p>
<p class="nomad-text">Le chargeur USB magnétique mural permet une recharge rapide et sécurisée.</p>
<div class="nomad-stats">
<div class="nomad-stat" data-reveal="fade-up" data-delay="100">
<span class="nomad-stat-value">8h+</span>
<span class="nomad-stat-label">Autonomie</span>
</div>
<div class="nomad-stat" data-reveal="fade-up" data-delay="200">
<span class="nomad-stat-value">2h</span>
<span class="nomad-stat-label">Recharge</span>
</div>
<div class="nomad-stat" data-reveal="fade-up" data-delay="300">
<span class="nomad-stat-value">< 500g</span>
<span class="nomad-stat-label">Poids</span>
</div>
</div>
</div>
<div class="nomad-visual" data-reveal="fade-left">
<div class="nomad-image-container">
<img src="<?php echo esc_url($flo_images['main']); ?>" alt="<?php the_title(); ?> - Portable" class="nomad-product-image">
<div class="nomad-glow"></div>
</div>
<div class="nomad-features-float">
<div class="float-feature float-feature--1" data-reveal="scale" data-delay="400">
<img src="<?php echo esc_url($flo_images['battery']); ?>" alt="Batterie">
</div>
<div class="float-feature float-feature--2" data-reveal="scale" data-delay="500">
<img src="<?php echo esc_url($flo_images['usb_charge']); ?>" alt="USB">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Temperature Range Section -->
<section class="product-temperature section">
<div class="container">
<div class="temperature-inner">
<div class="temperature-visual" data-reveal="fade-right">
<img src="<?php echo esc_url($flo_images['main']); ?>" alt="<?php the_title(); ?>" class="temperature-product-image">
</div>
<div class="temperature-content" data-reveal="fade-left">
<span class="section-badge">Extrême</span>
<h2 class="section-title">Travail sur Large Écart de Température</h2>
<p>Du froid polaire à la chaleur tropicale, le <?php the_title(); ?> maintient ses performances. Testé et certifié pour fonctionner de <strong>-20°C à +50°C</strong>.</p>
<div class="temperature-gauge" data-animate-on-scroll>
<div class="temperature-range">
<div class="temp-indicator temp-cold">
<span class="temp-icon">❄️</span>
<span class="temp-value">-20°C</span>
</div>
<div class="temp-bar">
<div class="temp-bar-track">
<div class="temp-bar-fill"></div>
</div>
</div>
<div class="temp-indicator temp-hot">
<span class="temp-icon">🔥</span>
<span class="temp-value">+50°C</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Protection Section - Ploof Splash Badaboum -->
<section class="product-protection section section--alt">
<div class="container">
<div class="section-header" data-reveal="fade-up">
<h2 class="section-title">Prêt pour Ploof, Splaash et Gros Badaboum</h2>
<p class="section-description">Le <?php the_title(); ?> est conçu pour résister aux conditions les plus extrêmes.</p>
</div>
<div class="protection-grid protection-grid--images">
<div class="protection-item" data-reveal="zoom-in" data-delay="100">
<div class="protection-image">
<img src="<?php echo esc_url($flo_images['shockproof']); ?>" alt="ShockProof">
</div>
<h3 class="protection-title">ShockProof</h3>
<p class="protection-text">Résistant aux chocs et aux chutes</p>
</div>
<div class="protection-item" data-reveal="zoom-in" data-delay="200">
<div class="protection-image">
<img src="<?php echo esc_url($flo_images['waterproof']); ?>" alt="WaterProof">
</div>
<h3 class="protection-title">WaterProof</h3>
<p class="protection-text">IP67 - Submersion jusqu'à 1m pendant 30 min</p>
</div>
<div class="protection-item" data-reveal="zoom-in" data-delay="300">
<div class="protection-image">
<img src="<?php echo esc_url($flo_images['dustproof2']); ?>" alt="DustProof">
</div>
<h3 class="protection-title">DustProof</h3>
<p class="protection-text">Protection totale contre les particules</p>
</div>
</div>
</div>
</section>
<!-- Battery Section -->
<section class="product-battery section">
<div class="container">
<div class="section-header" data-reveal="fade-up">
<h2 class="section-title">Autonomie et Recharge</h2>
</div>
<div class="battery-grid">
<div class="battery-item" data-reveal="fade-up" data-delay="100">
<div class="battery-image">
<img src="<?php echo esc_url($flo_images['battery']); ?>" alt="Batterie">
</div>
<h4>Batterie Li-ion</h4>
<p>Plus de 8 heures d'autonomie</p>
</div>
<div class="battery-item" data-reveal="fade-up" data-delay="200">
<div class="battery-image">
<img src="<?php echo esc_url($flo_images['usb_charge']); ?>" alt="USB Charge">
</div>
<h4>Charge USB Magnétique</h4>
<p>Recharge rapide et sécurisée</p>
</div>
<div class="battery-item" data-reveal="fade-up" data-delay="300">
<div class="battery-image">
<img src="<?php echo esc_url($flo_images['double_battery']); ?>" alt="Double Batterie">
</div>
<h4>Double Batterie</h4>
<p>Option pour une autonomie prolongée</p>
</div>
</div>
</div>
</section>
<!-- Modes Section -->
<section class="product-modes section section--dark">
<div class="container">
<div class="section-header" data-reveal="fade-up">
<span class="section-badge section-badge--light">Fonctionnalités</span>
<h2 class="section-title section-title--light">Bouton Latéral Chronomètre</h2>
<p class="section-description section-description--light">Deux modes de fonctionnement pour s'adapter à tous vos besoins</p>
</div>
<div class="modes-grid">
<div class="mode-card" data-reveal="fade-up" data-delay="100">
<div class="mode-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 6v6l4 2"></path>
</svg>
</div>
<h3 class="mode-title">Mode Minuterie</h3>
<p class="mode-text">Définissez un objectif de mesure et recevez une alerte sonore lorsqu'il est atteint. Idéal pour les prélèvements standardisés.</p>
</div>
<div class="mode-card" data-reveal="fade-up" data-delay="200">
<div class="mode-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
</svg>
</div>
<h3 class="mode-title">Mode Compteur</h3>
<p class="mode-text">Mesure continue en temps réel avec export des données via WiFi ou USB. Parfait pour le monitoring long terme.</p>
</div>
</div>
</div>
</section>
<!-- Fullwidth Banner 2 - Élément de Flux -->
<section class="product-fullwidth-banner product-fullwidth-banner--2" style="background-image: url('<?php echo esc_url($flo_images['banner2']); ?>');">
<div class="banner-overlay banner-overlay--gradient"></div>
<div class="container">
<div class="banner-content banner-content--center" data-reveal="fade-up">
<h2 class="section-title section-title--light section-title--large">Élément de Flux en Aluminium CNC</h2>
<p class="banner-text banner-text--large">Linéarité exemplaire grâce à notre technologie brevetée</p>
</div>
</div>
</section>
<!-- Specifications Section -->
<section id="specifications" class="specifications-section section">
<div class="container">
<div class="section-header" data-reveal="fade-up">
<span class="section-badge">Technique</span>
<h2 class="section-title">Spécifications Techniques</h2>
</div>
<div class="specifications-wrapper" data-reveal="fade-up" data-delay="100">
<div class="specifications-table">
<?php foreach ($specs as $index => $spec) : ?>
<div class="spec-row" data-reveal="fade-up" data-delay="<?php echo 50 + ($index * 30); ?>">
<div class="spec-label">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 11 12 14 22 4"></polyline>
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
</svg>
<?php echo esc_html($spec['label']); ?>
</div>
<div class="spec-value"><?php echo esc_html($spec['value']); ?></div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="product-services section section--alt">
<div class="container">
<div class="section-header" data-reveal="fade-up">
<h2 class="section-title">Nos Services</h2>
</div>
<div class="services-grid services-grid--3">
<div class="service-card" data-reveal="fade-up" data-delay="100">
<div class="service-icon">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
</svg>
</div>
<h4>Service après-ventes</h4>
<p>Maintenance et réparation de vos appareils</p>
</div>
<div class="service-card" data-reveal="fade-up" data-delay="200">
<div class="service-icon">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
<line x1="8" y1="21" x2="16" y2="21"></line>
<line x1="12" y1="17" x2="12" y2="21"></line>
</svg>
</div>
<h4>NavLab</h4>
<p>Logiciel d'analyse des données inclus</p>
</div>
<div class="service-card" data-reveal="fade-up" data-delay="300">
<div class="service-icon">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
</div>
<h4>Téléchargements</h4>
<p>Fiches techniques et manuels</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="product-cta-section section section--gradient">
<div class="container">
<div class="product-cta-inner" data-reveal="scale">
<div class="product-cta-content">
<h2 class="section-title section-title--light">Intéressé par le <?php the_title(); ?> ?</h2>
<p>Contactez notre équipe commerciale pour obtenir un devis personnalisé.</p>
<div class="product-cta-buttons">
<a href="#contact-product" class="btn btn--eco btn--large">
Demander un Devis
</a>
<a href="tel:+33620094641" class="btn btn--outline-light btn--large">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
</svg>
+33 (0) 6 20 09 46 41
</a>
</div>
</div>
</div>
</div>
</section>
<?php
endwhile;
get_footer();