Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c06d97e710 | |||
| 222dca246a | |||
| c1d7d9d665 | |||
| d087dd3751 | |||
| 99be65b8f9 | |||
| 9a40a33f03 | |||
| 73d1ca40b9 | |||
| c73a025ba7 |
249
src/app/page.tsx
249
src/app/page.tsx
@@ -3,15 +3,15 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import { Award, CheckCircle, Shield, Star, Zap } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
@@ -29,135 +29,136 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Accueil", id: "home" },
|
||||
{ name: "À Propos", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Produits", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="MCCMAROC"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Accueil", id: "home" },
|
||||
{ name: "À Propos", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Produits", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="MCCMAROC"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplitTestimonial
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Excellence en Métrologie Industrielle au Maroc"
|
||||
description="MCCMAROC vous accompagne avec des solutions de mesure de haute précision, étalonnage ISO 17025 et instruments de pointe pour vos besoins industriels."
|
||||
testimonials={[
|
||||
{ name: "Ahmed Mansouri", handle: "@IndustrieMaroc", testimonial: "Un service d'étalonnage rapide et conforme aux normes internationales.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/business-woman-posing-street_23-2148213529.jpg" },
|
||||
{ name: "Sara Bennis", handle: "@TechPrecision", testimonial: "La meilleure expertise technique pour nos instruments Trimos au Maroc.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/solar-panels-manufacturing-factory-specialist-explains-production-process_482257-118103.jpg" }
|
||||
]}
|
||||
buttons={[{ text: "Demander un Devis", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/laboratory-3d-glassware_23-2151560643.jpg"
|
||||
imageAlt="Laboratoire de métrologie MCCMAROC"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplitTestimonial
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Excellence en Métrologie Industrielle"
|
||||
description="Solutions de mesure, étalonnage ISO 17025 et instruments de haute précision pour l'industrie marocaine."
|
||||
testimonials={[]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/laboratory-3d-glassware_23-2151560643.jpg?_wi=1"
|
||||
imageAlt="Laboratoire de métrologie"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Expertise Technique"
|
||||
metrics={[
|
||||
{ icon: CheckCircle, label: "Instruments Étalonnés", value: "1500+" },
|
||||
{ icon: Award, label: "Conformité ISO 17025", value: "Oui" },
|
||||
{ icon: Shield, label: "Années d'Expérience", value: "12+" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Notre Engagement Qualité"
|
||||
metrics={[
|
||||
{ icon: CheckCircle, label: "Instruments Étalonnés", value: "1500+" },
|
||||
{ icon: Award, label: "Conformité ISO 17025", value: "Certifié" },
|
||||
{ icon: Shield, label: "Expertise Technique", value: "12 Ans" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: "s1", title: "Étalonnage Dimensionnel", subtitle: "Conformité totale aux normes.", category: "Services", value: "Certifié" },
|
||||
{ id: "s2", title: "Maintenance et Réparation", subtitle: "Intervention rapide sur site.", category: "Services", value: "Réactif" },
|
||||
{ id: "s3", title: "Conseil Technique", subtitle: "Expertise pour vos choix d'outils.", category: "Services", value: "Personnalisé" },
|
||||
]}
|
||||
title="Nos Services"
|
||||
description="Nous offrons une gamme complète de services pour garantir la fiabilité de vos mesures."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: "s1", title: "Étalonnage", subtitle: "Conformité aux normes", category: "Métrologie", value: "Précis" },
|
||||
{ id: "s2", title: "Maintenance", subtitle: "Intervention rapide", category: "Services", value: "Fiable" },
|
||||
{ id: "s3", title: "Conseil", subtitle: "Expertise sur mesure", category: "Services", value: "Expert" },
|
||||
]}
|
||||
title="Nos Services Industriels"
|
||||
description="Des solutions techniques adaptées à vos exigences de production."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Micromètre Digital Trimos", price: "Sur devis", imageSrc: "http://img.b2bpic.net/free-photo/construction-plans-with-helmet-drawing-tools-blueprints_1232-4299.jpg" },
|
||||
{ id: "p2", name: "Scanner Laser Sylvac", price: "Sur devis", imageSrc: "http://img.b2bpic.net/free-photo/craftswoman-working-workshop_107420-65303.jpg" }
|
||||
]}
|
||||
title="Catalogue Instruments"
|
||||
description="Découvrez notre sélection des meilleurs instruments de mesure mondiaux."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Micromètres", price: "Sur demande", imageSrc: "http://img.b2bpic.net/free-photo/laser-level-measuring-tool_93675-128435.jpg" },
|
||||
{ id: "p2", name: "Scanner Laser", price: "Sur demande", imageSrc: "http://img.b2bpic.net/free-photo/craftswoman-working-workshop_107420-65303.jpg" },
|
||||
{ id: "p3", name: "Pieds à coulisse", price: "Sur demande", imageSrc: "http://img.b2bpic.net/free-photo/construction-plans-with-helmet-drawing-tools-blueprints_1232-4299.jpg" },
|
||||
]}
|
||||
title="Catalogue Instruments"
|
||||
description="Équipement de métrologie de classe mondiale."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", icon: Zap, title: "Clients Satisfaits", value: "300+" },
|
||||
{ id: "m2", icon: Star, title: "Projets Terminés", value: "850" },
|
||||
{ id: "m3", icon: Award, title: "Normes Maîtriées", value: "20+" },
|
||||
]}
|
||||
title="Impact Industriel"
|
||||
description="Nous contribuons à la précision de vos processus industriels."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", icon: Zap, title: "Clients", value: "300+" },
|
||||
{ id: "m2", icon: Star, title: "Projets", value: "850+" },
|
||||
{ id: "m3", icon: Award, title: "Normes", value: "20+" },
|
||||
]}
|
||||
title="Chiffres Clés"
|
||||
description="La preuve par l'impact."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
title="Témoignages Clients"
|
||||
description="Ils font confiance à MCCMAROC pour leurs besoins en métrologie."
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah Ahmed", date: "2024", title: "Directrice", quote: "Service exceptionnel et expertise technique inégalée.", tag: "Industrie", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-happy-man-with-helmet-crossed-arms_23-2148269266.jpg" }
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[]}
|
||||
kpiItems={[
|
||||
{ value: "100%", label: "Satisfaction" },
|
||||
{ value: "98%", label: "Conformité" },
|
||||
{ value: "24h", label: "Réactivité" },
|
||||
]}
|
||||
title="Ils nous font confiance"
|
||||
description="L'excellence au service de nos partenaires industriels."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
faqs={[
|
||||
{ id: "f1", title: "Quels instruments étalonnez-vous ?", content: "Nous étalonnons les instruments dimensionnels, de pression et de température." },
|
||||
{ id: "f2", title: "Êtes-vous certifiés ISO 17025 ?", content: "Oui, notre laboratoire respecte strictement les exigences de la norme ISO 17025." }
|
||||
]}
|
||||
title="Questions Fréquentes"
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Domaines d'étalonnage?", content: "Dimensionnel, pression, température." },
|
||||
{ id: "f2", title: "ISO 17025?", content: "Laboratoire accrédité." },
|
||||
]}
|
||||
sideTitle="Support Technique"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Contactez nos experts dès aujourd'hui pour discuter de vos besoins en métrologie."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Contact"
|
||||
title="Discutons de vos besoins"
|
||||
description="Obtenez votre devis personnalisé aujourd'hui."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/laboratory-3d-glassware_23-2151560643.jpg?_wi=2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="MCCMAROC"
|
||||
columns={[
|
||||
{ title: "Société", items: [{ label: "À Propos", href: "#about" }, { label: "Services", href: "#services" }] },
|
||||
{ title: "Légal", items: [{ label: "Mentions Légales", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="MCCMAROC"
|
||||
leftLink={{ text: "Contact", href: "#contact" }}
|
||||
rightLink={{ text: "Mentions Légales", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f5f5;
|
||||
--card: #ffffff;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #1f3251;
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #000612e6;
|
||||
--primary-cta: #15479c;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta: #f9f9f9;
|
||||
--secondary-cta-text: #000612e6;
|
||||
--accent: #15479c;
|
||||
--background-accent: #a8cce8;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user