587 lines
32 KiB
PHP
587 lines
32 KiB
PHP
<?php
|
|
/**
|
|
* Front Page Template
|
|
*
|
|
* @package Navier_Instruments
|
|
*/
|
|
|
|
get_header();
|
|
|
|
// Get page URLs
|
|
$products_page = get_page_by_path('produits');
|
|
$products_url = $products_page ? get_permalink($products_page) : home_url('/produits/');
|
|
|
|
$about_page = get_page_by_path('a-propos');
|
|
$about_url = $about_page ? get_permalink($about_page) : home_url('/a-propos/');
|
|
|
|
$services_page = get_page_by_path('services');
|
|
$services_url = $services_page ? get_permalink($services_page) : home_url('/services/');
|
|
|
|
$contact_page = get_page_by_path('contact');
|
|
$contact_url = $contact_page ? get_permalink($contact_page) : home_url('/contact/');
|
|
?>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="container">
|
|
<div class="hero-inner">
|
|
<div class="hero-content animate animate-fade-up">
|
|
<span class="hero-badge">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
|
</svg>
|
|
<?php echo esc_html(get_theme_mod('navier_hero_badge', 'Innovation Éco-responsable')); ?>
|
|
</span>
|
|
|
|
<h1 class="hero-title">
|
|
<?php echo wp_kses_post(get_theme_mod('navier_hero_title', 'Excellence en <span>Prélèvement d\'Air</span> Industriel')); ?>
|
|
</h1>
|
|
|
|
<p class="hero-description">
|
|
<?php echo esc_html(get_theme_mod('navier_hero_description', 'Navier Instruments conçoit et fabrique des solutions innovantes de prélèvement d\'air pour les environnements industriels et de laboratoire. Qualité, précision et durabilité au cœur de notre mission.')); ?>
|
|
</p>
|
|
|
|
<div class="hero-buttons">
|
|
<a href="<?php echo esc_url($products_url); ?>" class="btn btn--primary btn--large">
|
|
<?php echo esc_html(get_theme_mod('navier_hero_cta1_text', 'Découvrir nos Produits')); ?>
|
|
<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="<?php echo esc_url($contact_url); ?>" class="btn btn--secondary btn--large">
|
|
<?php echo esc_html(get_theme_mod('navier_hero_cta2_text', 'Nous Contacter')); ?>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="hero-stats">
|
|
<div class="hero-stat">
|
|
<span class="hero-stat-value"><?php echo esc_html(get_theme_mod('navier_stat_1_value', '25+')); ?></span>
|
|
<span class="hero-stat-label"><?php echo esc_html(get_theme_mod('navier_stat_1_label', 'Années d\'Expérience')); ?></span>
|
|
</div>
|
|
<div class="hero-stat">
|
|
<span class="hero-stat-value"><?php echo esc_html(get_theme_mod('navier_stat_2_value', '500+')); ?></span>
|
|
<span class="hero-stat-label"><?php echo esc_html(get_theme_mod('navier_stat_2_label', 'Clients dans le Monde')); ?></span>
|
|
</div>
|
|
<div class="hero-stat">
|
|
<span class="hero-stat-value"><?php echo esc_html(get_theme_mod('navier_stat_3_value', '100%')); ?></span>
|
|
<span class="hero-stat-label"><?php echo esc_html(get_theme_mod('navier_stat_3_label', 'Made in France')); ?></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-image animate animate-fade-left animate-delay-2">
|
|
<?php
|
|
$hero_image = get_theme_mod('navier_hero_image');
|
|
if ($hero_image) :
|
|
?>
|
|
<img src="<?php echo esc_url($hero_image); ?>" alt="Navier Instruments - Technologie de Prélèvement d'Air">
|
|
<?php else : ?>
|
|
<div class="hero-image-placeholder" style="background: linear-gradient(135deg, var(--navier-primary) 0%, var(--navier-accent) 100%); width: 100%; height: 400px; border-radius: var(--border-radius-xl); display: flex; align-items: center; justify-content: center;">
|
|
<svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1" style="opacity: 0.5;">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<path d="M12 6v6l4 2"></path>
|
|
<path d="M8 12h8"></path>
|
|
</svg>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section id="features" class="section features">
|
|
<div class="container">
|
|
<div class="section-header animate animate-fade-up">
|
|
<span class="section-badge">Pourquoi Nous Choisir</span>
|
|
<h2 class="section-title">L'Innovation au Service de la Qualité de l'Air</h2>
|
|
<p class="section-description">Découvrez pourquoi les leaders de l'industrie font confiance à Navier Instruments pour leurs besoins en prélèvement d'air.</p>
|
|
</div>
|
|
|
|
<div class="features-grid">
|
|
<!-- Feature 1 -->
|
|
<div class="feature-card animate animate-fade-up animate-delay-1">
|
|
<div class="feature-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
|
|
</svg>
|
|
</div>
|
|
<h4 class="feature-title">Qualité Premium</h4>
|
|
<p class="feature-description">Chaque produit est conçu et fabriqué selon les normes de qualité les plus strictes, garantissant des résultats fiables et précis.</p>
|
|
</div>
|
|
|
|
<!-- Feature 2 -->
|
|
<div class="feature-card animate animate-fade-up animate-delay-2">
|
|
<div class="feature-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z"></path>
|
|
<path d="M2 17l10 5 10-5"></path>
|
|
<path d="M2 12l10 5 10-5"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="feature-title">Innovation de Pointe</h4>
|
|
<p class="feature-description">Notre équipe R&D repousse constamment les limites de la technologie pour vous offrir les solutions les plus avancées.</p>
|
|
</div>
|
|
|
|
<!-- Feature 3 - Eco -->
|
|
<div class="feature-card feature-card--eco animate animate-fade-up animate-delay-3">
|
|
<div class="feature-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
|
<path d="M9 12l2 2 4-4"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="feature-title">Éco-responsable</h4>
|
|
<p class="feature-description">Engagés pour un avenir durable, nous intégrons des pratiques éco-responsables à chaque étape de la production.</p>
|
|
</div>
|
|
|
|
<!-- Feature 4 -->
|
|
<div class="feature-card animate animate-fade-up animate-delay-1">
|
|
<div class="feature-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="9" cy="7" r="4"></circle>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="feature-title">Support Expert</h4>
|
|
<p class="feature-description">Notre équipe d'experts est là pour vous guider dans le choix et l'utilisation de vos équipements.</p>
|
|
</div>
|
|
|
|
<!-- Feature 5 -->
|
|
<div class="feature-card animate animate-fade-up animate-delay-2">
|
|
<div class="feature-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
|
|
<circle cx="12" cy="10" r="3"></circle>
|
|
</svg>
|
|
</div>
|
|
<h4 class="feature-title">Made in France</h4>
|
|
<p class="feature-description">Fièrement conçu et fabriqué à Senlis, en France, garantissant une expertise locale et une qualité irréprochable.</p>
|
|
</div>
|
|
|
|
<!-- Feature 6 -->
|
|
<div class="feature-card animate animate-fade-up animate-delay-3">
|
|
<div class="feature-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<h4 class="feature-title">Qualité Certifiée</h4>
|
|
<p class="feature-description">Processus et produits certifiés ISO répondant aux normes internationales les plus strictes.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="section about">
|
|
<div class="container">
|
|
<div class="about-inner">
|
|
<div class="about-image animate animate-fade-right">
|
|
<?php
|
|
$about_image = get_theme_mod('navier_about_image');
|
|
if ($about_image) :
|
|
?>
|
|
<img src="<?php echo esc_url($about_image); ?>" alt="À propos de Navier Instruments">
|
|
<?php else : ?>
|
|
<div class="about-image-placeholder" style="background: linear-gradient(135deg, var(--navier-gray-100) 0%, var(--navier-gray-300) 100%); width: 100%; height: 400px; border-radius: var(--border-radius-xl); display: flex; align-items: center; justify-content: center;">
|
|
<svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="var(--navier-primary)" stroke-width="1" style="opacity: 0.3;">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
<circle cx="8.5" cy="8.5" r="1.5"></circle>
|
|
<polyline points="21 15 16 10 5 21"></polyline>
|
|
</svg>
|
|
</div>
|
|
<?php endif; ?>
|
|
<div class="about-badge">
|
|
<span class="about-badge-value"><?php echo esc_html(get_theme_mod('navier_about_badge_value', '25+')); ?></span>
|
|
<span class="about-badge-label"><?php echo esc_html(get_theme_mod('navier_about_badge_label', 'Années d\'Excellence')); ?></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="about-content animate animate-fade-left">
|
|
<span class="section-badge">À Propos</span>
|
|
<h2 class="section-title"><?php echo esc_html(get_theme_mod('navier_about_title', 'Pionniers du Prélèvement d\'Air')); ?></h2>
|
|
<p><?php echo esc_html(get_theme_mod('navier_about_text', 'Basée à Senlis, en France, Navier Instruments est à la pointe de la technologie de prélèvement d\'air depuis plus de deux décennies. Notre engagement envers l\'innovation, la qualité et la responsabilité environnementale guide chacune de nos actions.')); ?></p>
|
|
|
|
<ul class="about-list">
|
|
<li>
|
|
<span class="about-list-icon">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
</span>
|
|
<span>Solutions innovantes pour environnements industriels et laboratoires</span>
|
|
</li>
|
|
<li>
|
|
<span class="about-list-icon">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
</span>
|
|
<span>Engagement pour la durabilité et les pratiques éco-responsables</span>
|
|
</li>
|
|
<li>
|
|
<span class="about-list-icon">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
</span>
|
|
<span>Dédiés à la santé et à la sécurité des utilisateurs</span>
|
|
</li>
|
|
<li>
|
|
<span class="about-list-icon">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
</span>
|
|
<span>Fort engagement communautaire et partenariats locaux</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<a href="#contact" class="btn btn--primary">
|
|
Nous contacter
|
|
<svg width="16" height="16" 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Products Section -->
|
|
<section id="products" class="section products">
|
|
<div class="container">
|
|
<div class="section-header animate animate-fade-up">
|
|
<span class="section-badge">Nos Produits</span>
|
|
<h2 class="section-title">Solutions de Prélèvement d'Air</h2>
|
|
<p class="section-description">Découvrez notre gamme de produits innovants conçus pour la précision et la fiabilité.</p>
|
|
</div>
|
|
|
|
<div class="products-grid">
|
|
<?php
|
|
$products = new WP_Query(array(
|
|
'post_type' => 'navier_product',
|
|
'posts_per_page' => 3,
|
|
'orderby' => 'date',
|
|
'order' => 'DESC',
|
|
));
|
|
|
|
if ($products->have_posts()) :
|
|
$delay = 1;
|
|
while ($products->have_posts()) : $products->the_post();
|
|
?>
|
|
<article class="product-card animate animate-fade-up animate-delay-<?php echo esc_attr($delay); ?>">
|
|
<div class="product-image">
|
|
<?php if (has_post_thumbnail()) : ?>
|
|
<?php the_post_thumbnail('navier-product'); ?>
|
|
<?php else : ?>
|
|
<div class="product-image-placeholder" style="width: 100%; height: 250px; background: linear-gradient(135deg, var(--navier-gray-100) 0%, var(--navier-gray-300) 100%); display: flex; align-items: center; justify-content: center;">
|
|
<svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="var(--navier-primary)" stroke-width="1" style="opacity: 0.3;">
|
|
<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>
|
|
</div>
|
|
<?php endif; ?>
|
|
<?php
|
|
$categories = get_the_terms(get_the_ID(), 'product_category');
|
|
if ($categories && !is_wp_error($categories)) :
|
|
?>
|
|
<span class="product-tag"><?php echo esc_html($categories[0]->name); ?></span>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="product-content">
|
|
<h4 class="product-title"><?php the_title(); ?></h4>
|
|
<p class="product-description"><?php echo esc_html(get_the_excerpt()); ?></p>
|
|
<a href="<?php the_permalink(); ?>" class="product-link">
|
|
En savoir plus
|
|
<svg width="16" height="16" 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>
|
|
</div>
|
|
</article>
|
|
<?php
|
|
$delay++;
|
|
if ($delay > 3) $delay = 1;
|
|
endwhile;
|
|
wp_reset_postdata();
|
|
else :
|
|
// Placeholder products if no products exist
|
|
$placeholder_products = array(
|
|
array(
|
|
'title' => 'AirSampler Pro X500',
|
|
'desc' => 'Solution de prélèvement d\'air haute performance pour environnements industriels avec certification ATEX.',
|
|
'tag' => 'Industriel',
|
|
),
|
|
array(
|
|
'title' => 'LabAnalyzer L200',
|
|
'desc' => 'Analyseur de précision pour laboratoire avec analyse en temps réel et interface logicielle avancée.',
|
|
'tag' => 'Laboratoire',
|
|
),
|
|
array(
|
|
'title' => 'MiniAir Portable M100',
|
|
'desc' => 'Solution portable ultra-compacte pour les mesures de qualité d\'air sur le terrain avec GPS intégré.',
|
|
'tag' => 'Portable',
|
|
),
|
|
);
|
|
|
|
$delay = 1;
|
|
foreach ($placeholder_products as $product) :
|
|
?>
|
|
<article class="product-card animate animate-fade-up animate-delay-<?php echo esc_attr($delay); ?>">
|
|
<div class="product-image">
|
|
<div class="product-image-placeholder" style="width: 100%; height: 250px; background: linear-gradient(135deg, var(--navier-gray-100) 0%, var(--navier-gray-300) 100%); display: flex; align-items: center; justify-content: center;">
|
|
<svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="var(--navier-primary)" stroke-width="1" style="opacity: 0.3;">
|
|
<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>
|
|
</div>
|
|
<span class="product-tag"><?php echo esc_html($product['tag']); ?></span>
|
|
</div>
|
|
<div class="product-content">
|
|
<h4 class="product-title"><?php echo esc_html($product['title']); ?></h4>
|
|
<p class="product-description"><?php echo esc_html($product['desc']); ?></p>
|
|
<a href="<?php echo esc_url($products_url); ?>" class="product-link">
|
|
En savoir plus
|
|
<svg width="16" height="16" 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>
|
|
</div>
|
|
</article>
|
|
<?php
|
|
$delay++;
|
|
endforeach;
|
|
endif;
|
|
?>
|
|
</div>
|
|
|
|
<div class="text-center" style="margin-top: var(--spacing-2xl);">
|
|
<a href="<?php echo esc_url($products_url); ?>" class="btn btn--secondary">
|
|
Voir tous les produits
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Values Section (Eco-responsibility) -->
|
|
<section id="values" class="section values">
|
|
<div class="container">
|
|
<div class="section-header animate animate-fade-up">
|
|
<span class="section-badge">Nos Valeurs</span>
|
|
<h2 class="section-title">Engagés pour un Avenir Durable</h2>
|
|
<p class="section-description">Notre approche éco-responsable guide chacune de nos décisions.</p>
|
|
</div>
|
|
|
|
<div class="values-grid">
|
|
<div class="value-card animate animate-fade-up animate-delay-1">
|
|
<div class="value-icon">
|
|
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
|
|
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
|
|
<line x1="12" y1="22.08" x2="12" y2="12"></line>
|
|
</svg>
|
|
</div>
|
|
<h4 class="value-title">Conception Durable</h4>
|
|
<p class="value-description">Produits conçus pour la longévité, la réparabilité et un impact environnemental minimal.</p>
|
|
</div>
|
|
|
|
<div class="value-card animate animate-fade-up animate-delay-2">
|
|
<div class="value-icon">
|
|
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="value-title">Santé & Sécurité</h4>
|
|
<p class="value-description">Protection de la santé des utilisateurs grâce à des normes de sécurité rigoureuses.</p>
|
|
</div>
|
|
|
|
<div class="value-card animate animate-fade-up animate-delay-3">
|
|
<div class="value-icon">
|
|
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<path d="M12 6v6l4 2"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="value-title">Production Locale</h4>
|
|
<p class="value-description">Fabriqué en France pour réduire l'empreinte carbone et soutenir l'économie locale.</p>
|
|
</div>
|
|
|
|
<div class="value-card animate animate-fade-up animate-delay-4">
|
|
<div class="value-icon">
|
|
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="9" cy="7" r="4"></circle>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="value-title">Communauté</h4>
|
|
<p class="value-description">Engagement fort auprès des communautés locales et partenariats pour une croissance partagée.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="section cta">
|
|
<div class="container">
|
|
<div class="cta-inner animate animate-scale">
|
|
<div class="cta-content">
|
|
<h2 class="section-title">Prêt à Améliorer votre Surveillance de la Qualité de l'Air ?</h2>
|
|
<p class="cta-description">Contactez notre équipe d'experts dès aujourd'hui pour discuter de vos besoins et trouver la solution parfaite pour votre environnement.</p>
|
|
<div class="cta-buttons">
|
|
<a href="<?php echo esc_url($contact_url); ?>" class="btn btn--primary btn--large">
|
|
Demander un Devis
|
|
</a>
|
|
<a href="<?php echo esc_url($products_url); ?>" class="btn btn--eco btn--large">
|
|
Voir le Catalogue
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="cta-image">
|
|
<div class="cta-image-placeholder" style="background: linear-gradient(135deg, var(--navier-primary) 0%, var(--navier-accent) 100%); width: 100%; height: 300px; border-radius: var(--border-radius-lg); display: flex; align-items: center; justify-content: center;">
|
|
<svg width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1" style="opacity: 0.5;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="section contact">
|
|
<div class="container">
|
|
<div class="contact-inner">
|
|
<div class="contact-info animate animate-fade-right">
|
|
<span class="section-badge">Contact</span>
|
|
<h2 class="section-title">Nous Contacter</h2>
|
|
<p>Des questions ? Notre équipe est là pour vous aider. Contactez-nous par l'un des moyens suivants.</p>
|
|
|
|
<div class="contact-item">
|
|
<div class="contact-item-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
|
|
<circle cx="12" cy="10" r="3"></circle>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="contact-item-label">Adresse</p>
|
|
<p class="contact-item-value"><?php echo esc_html(get_theme_mod('navier_contact_address', 'Zone Industrielle, 60300 Senlis, France')); ?></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-item">
|
|
<div class="contact-item-icon">
|
|
<svg width="24" height="24" 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>
|
|
</div>
|
|
<div>
|
|
<p class="contact-item-label">Téléphone</p>
|
|
<p class="contact-item-value">
|
|
<a href="tel:<?php echo esc_attr(get_theme_mod('navier_phone', '+33 (0)3 44 00 00 00')); ?>">
|
|
<?php echo esc_html(get_theme_mod('navier_phone', '+33 (0)3 44 00 00 00')); ?>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-item">
|
|
<div class="contact-item-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
|
<polyline points="22,6 12,13 2,6"></polyline>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="contact-item-label">Email</p>
|
|
<p class="contact-item-value">
|
|
<a href="mailto:<?php echo esc_attr(get_theme_mod('navier_email', 'contact@navier-instruments.com')); ?>">
|
|
<?php echo esc_html(get_theme_mod('navier_email', 'contact@navier-instruments.com')); ?>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-item">
|
|
<div class="contact-item-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<polyline points="12 6 12 12 16 14"></polyline>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="contact-item-label">Horaires</p>
|
|
<p class="contact-item-value"><?php echo esc_html(get_theme_mod('navier_hours', 'Lun - Ven : 9h00 - 18h00')); ?></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: var(--spacing-xl);">
|
|
<a href="<?php echo esc_url($contact_url); ?>" class="btn btn--primary">
|
|
Page Contact Complète
|
|
<svg width="16" height="16" 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>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-form animate animate-fade-left">
|
|
<h3>Envoyez-nous un message</h3>
|
|
<form id="navier-contact-form" method="post">
|
|
<?php wp_nonce_field('navier_nonce', 'navier_contact_nonce'); ?>
|
|
|
|
<div class="form-group">
|
|
<label for="contact-name" class="form-label">Nom complet *</label>
|
|
<input type="text" id="contact-name" name="name" class="form-input" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="contact-email" class="form-label">Adresse email *</label>
|
|
<input type="email" id="contact-email" name="email" class="form-input" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="contact-phone" class="form-label">Téléphone</label>
|
|
<input type="tel" id="contact-phone" name="phone" class="form-input">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="contact-subject" class="form-label">Sujet</label>
|
|
<input type="text" id="contact-subject" name="subject" class="form-input">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="contact-message" class="form-label">Message *</label>
|
|
<textarea id="contact-message" name="message" class="form-textarea" required></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn--primary btn--large" style="width: 100%;">
|
|
Envoyer le Message
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="22" y1="2" x2="11" y2="13"></line>
|
|
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
|
|
</svg>
|
|
</button>
|
|
|
|
<div id="form-response" style="margin-top: var(--spacing-md); display: none;"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<?php
|
|
get_footer();
|