Update src/app/page.tsx
This commit is contained in:
473
src/app/page.tsx
473
src/app/page.tsx
@@ -11,397 +11,108 @@ import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import { Laptop, Smartphone, Tool } from "lucide-react";
|
||||
import { Laptop, Smartphone, Wrench } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Accessoires",
|
||||
id: "accessoires",
|
||||
},
|
||||
{
|
||||
name: "Avis",
|
||||
id: "avis",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Hard-Soft Tech"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Accessoires", id: "accessoires" },
|
||||
{ name: "Avis", id: "avis" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Hard-Soft Tech"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Votre expert informatique à Tiznit"
|
||||
description="Réparation d'ordinateurs, programmation de téléphones et vente d'accessoires. Service rapide, fiable et professionnel."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/very-good-smiling-brunette-woman-shows-ok-okay-hand-sign-looking-satisfied-recommend-great-deal-pleased-with-quality-standing-white-background_176420-46695.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-co-worker-spending-time-office_23-2149328310.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/mature-woman-smiling_1149-601.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/laughing-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-looking-laptop-isolated-purple-background_141793-83972.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
]}
|
||||
avatarText="+100 Clients satisfaits"
|
||||
buttons={[
|
||||
{
|
||||
text: "Nos services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
text: "Appeler maintenant",
|
||||
href: "tel:+212661771271",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Réparation PC",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Déblocage Mobile",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Vente Accessoires",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Diagnostic Rapide",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Service Professionnel",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Votre expert informatique à Tiznit"
|
||||
description="Réparation d'ordinateurs, programmation de téléphones et vente d'accessoires. Service rapide, fiable et professionnel."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/very-good-smiling-brunette-woman-shows-ok-okay-hand-sign-looking-satisfied-recommend-great-deal-pleased-with-quality-standing-white-background_176420-46695.jpg", alt: "Client 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg", alt: "Client 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-co-worker-spending-time-office_23-2149328310.jpg", alt: "Client 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/mature-woman-smiling_1149-601.jpg", alt: "Client 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/laughing-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-looking-laptop-isolated-purple-background_141793-83972.jpg", alt: "Client 5" },
|
||||
]}
|
||||
avatarText="+100 Clients satisfaits"
|
||||
buttons={[
|
||||
{ text: "Nos services", href: "#services" },
|
||||
{ text: "Appeler maintenant", href: "tel:+212661771271" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Réparation PC" },
|
||||
{ type: "text", text: "Déblocage Mobile" },
|
||||
{ type: "text", text: "Vente Accessoires" },
|
||||
{ type: "text", text: "Diagnostic Rapide" },
|
||||
{ type: "text", text: "Service Professionnel" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Réparation PC & Laptop",
|
||||
description: "Diagnostic complet, remplacement de composants, nettoyage système.",
|
||||
icon: Laptop,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-male-it-engineer-practicing-repair-motherboard_23-2147883710.jpg",
|
||||
imageAlt: "Réparation PC",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-repairing-circuit-board-laptop_1098-14844.jpg",
|
||||
imageAlt: "Réparation PC",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-repairing-computer-chips_23-2150880963.jpg?_wi=1",
|
||||
imageAlt: "laptop repair service",
|
||||
},
|
||||
{
|
||||
title: "Programmation Téléphones",
|
||||
description: "Déblocage réseau, flash ROM, mise à jour logicielle, récupération.",
|
||||
icon: Smartphone,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tablet-with-stethoscope-latex-gloves_23-2147612210.jpg",
|
||||
imageAlt: "Réparation mobile",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blank-screen-digital-tablet-with-fishing-equipment-wooden-desk_23-2148189235.jpg",
|
||||
imageAlt: "Réparation mobile",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/senior-physician-measuring-blood-pressure-with-blood-pressure-monitor_482257-126335.jpg",
|
||||
imageAlt: "laptop repair service",
|
||||
},
|
||||
{
|
||||
title: "Maintenance Technique",
|
||||
description: "Remplacement écrans, batteries, connecteurs, matériel informatique.",
|
||||
icon: Tool,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/indian-man-customer-buyer-mobile-phone-store-choose-case-his-smartphone-south-asian-peoples-technologies-concept-cellphone-shop_627829-1286.jpg?_wi=1",
|
||||
imageAlt: "Maintenance",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/server-hub-programmer-using-ai-machine-learning-node-tree-software_482257-126014.jpg",
|
||||
imageAlt: "Maintenance",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/very-good-smiling-brunette-woman-shows-ok-okay-hand-sign-looking-satisfied-recommend-great-deal-pleased-with-quality-standing-white-background_176420-46695.jpg",
|
||||
imageAlt: "laptop repair service",
|
||||
},
|
||||
]}
|
||||
title="Nos services professionnels"
|
||||
description="Nous offrons des solutions complètes pour tous vos besoins en informatique et téléphonie."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Nos services professionnels"
|
||||
description="Nous offrons des solutions complètes pour tous vos besoins en informatique et téléphonie."
|
||||
features={[
|
||||
{ title: "Réparation PC & Laptop", description: "Diagnostic complet, remplacement de composants, nettoyage système.", icon: Laptop, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/young-male-it-engineer-practicing-repair-motherboard_23-2147883710.jpg", imageAlt: "Réparation PC" }, { imageSrc: "http://img.b2bpic.net/free-photo/man-repairing-circuit-board-laptop_1098-14844.jpg", imageAlt: "Réparation PC" }] },
|
||||
{ title: "Programmation Téléphones", description: "Déblocage réseau, flash ROM, mise à jour logicielle, récupération.", icon: Smartphone, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/tablet-with-stethoscope-latex-gloves_23-2147612210.jpg", imageAlt: "Réparation mobile" }, { imageSrc: "http://img.b2bpic.net/free-photo/blank-screen-digital-tablet-with-fishing-equipment-wooden-desk_23-2148189235.jpg", imageAlt: "Réparation mobile" }] },
|
||||
{ title: "Maintenance Technique", description: "Remplacement écrans, batteries, connecteurs, matériel informatique.", icon: Wrench, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/indian-man-customer-buyer-mobile-phone-store-choose-case-his-smartphone-south-asian-peoples-technologies-concept-cellphone-shop_627829-1286.jpg", imageAlt: "Maintenance" }, { imageSrc: "http://img.b2bpic.net/free-photo/server-hub-programmer-using-ai-machine-learning-node-tree-software_482257-126014.jpg", imageAlt: "Maintenance" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="accessoires" data-section="accessoires">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Souris sans fil",
|
||||
price: "120 MAD",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/indian-man-customer-buyer-mobile-phone-store-choose-case-his-smartphone-south-asian-peoples-technologies-concept-cellphone-shop_627829-1286.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Clavier AZERTY",
|
||||
price: "180 MAD",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/master-holds-new-screen-replacement-disassembled-smartphone-his-laboratory-tool-kit-with-instruments-laptop-front-him-white-table-space-your-text-right_346278-1201.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Clé USB 64GB",
|
||||
price: "90 MAD",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105529.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Chargeur PC",
|
||||
price: "250 MAD",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-tiny-music-boxes-collection_23-2150545655.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Casque Bluetooth",
|
||||
price: "300 MAD",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-tiny-music-boxes-collection_23-2150545639.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Carte SD 128GB",
|
||||
price: "150 MAD",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/computer-keyboard-with-mouse-cassette-pink-background_185193-162285.jpg",
|
||||
},
|
||||
]}
|
||||
title="Accessoires informatique"
|
||||
description="Une sélection de périphériques de haute qualité pour votre quotidien."
|
||||
/>
|
||||
</div>
|
||||
<div id="accessoires" data-section="accessoires">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
title="Accessoires informatique"
|
||||
description="Une sélection de périphériques de haute qualité pour votre quotidien."
|
||||
products={[
|
||||
{ id: "p1", name: "Souris sans fil", price: "120 MAD", imageSrc: "http://img.b2bpic.net/free-photo/indian-man-customer-buyer-mobile-phone-store-choose-case-his-smartphone-south-asian-peoples-technologies-concept-cellphone-shop_627829-1286.jpg" },
|
||||
{ id: "p2", name: "Clavier AZERTY", price: "180 MAD", imageSrc: "http://img.b2bpic.net/free-photo/master-holds-new-screen-replacement-disassembled-smartphone-his-laboratory-tool-kit-with-instruments-laptop-front-him-white-table-space-your-text-right_346278-1201.jpg" },
|
||||
{ id: "p3", name: "Clé USB 64GB", price: "90 MAD", imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105529.jpg" },
|
||||
{ id: "p4", name: "Chargeur PC", price: "250 MAD", imageSrc: "http://img.b2bpic.net/free-photo/view-tiny-music-boxes-collection_23-2150545655.jpg" },
|
||||
{ id: "p5", name: "Casque Bluetooth", price: "300 MAD", imageSrc: "http://img.b2bpic.net/free-photo/view-tiny-music-boxes-collection_23-2150545639.jpg" },
|
||||
{ id: "p6", name: "Carte SD 128GB", price: "150 MAD", imageSrc: "http://img.b2bpic.net/free-photo/computer-keyboard-with-mouse-cassette-pink-background_185193-162285.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "7+",
|
||||
title: "Ans d'expérience",
|
||||
description: "Expertise confirmée",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-repairing-computer-chips_23-2150880963.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "100+",
|
||||
title: "Clients satisfaits",
|
||||
description: "Confiance renouvelée",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-male-technician-holding-digital-tablet_23-2147923499.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "6/7",
|
||||
title: "Jours d'ouverture",
|
||||
description: "Toujours là pour vous",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-is-working-his-lab-repair-clean-computer-laptop-toolkit-box-with-specific-instruments-near_346278-1802.jpg",
|
||||
},
|
||||
]}
|
||||
title="Engagement Hard-Soft Tech"
|
||||
description="Les chiffres qui font notre renommée à Tiznit."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="avis" data-section="avis">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Client",
|
||||
role: "Fidèle",
|
||||
company: "Tiznit",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/enthusiastic-businesswoman-corporate-woman-showing-thumbs-up-smiling-complimenting-recommending-company-standing-white-background_1258-122203.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Client",
|
||||
role: "Satisfait",
|
||||
company: "Tiznit",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-businessman-glasses-shaking-hands-with-female-partner-meeting-co-working-space_74855-10006.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Client",
|
||||
role: "Content",
|
||||
company: "Tiznit",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/head-shot-happy-beautiful-young-woman-posing-indoors-looking-camera-smiling_74855-10218.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Client",
|
||||
role: "Rapide",
|
||||
company: "Tiznit",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-smiling-looking-confident-happy-standing-suit-street-leans-her_1258-193996.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Client",
|
||||
role: "Pro",
|
||||
company: "Tiznit",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-headphones-looking-laptop-screen_1163-5436.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "5.0",
|
||||
label: "Note Google",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
label: "Satisfaction",
|
||||
},
|
||||
{
|
||||
value: "Rapide",
|
||||
label: "Service",
|
||||
},
|
||||
]}
|
||||
title="Ce que pensent nos clients"
|
||||
description="Une note de 5/5 sur Google Maps qui témoigne de notre sérieux."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Quels sont les horaires d'ouverture ?",
|
||||
content: "Nous sommes ouverts du lundi au samedi, de 9h à 19h.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Offrez-vous une garantie ?",
|
||||
content: "Oui, toutes nos réparations sont garanties pour assurer votre tranquillité.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Où êtes-vous situés ?",
|
||||
content: "Nous sommes situés rue Idzakri, Tiznit 85000.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Questions fréquentes"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Contactez-nous"
|
||||
description="Besoin d'une réparation urgente ? Passez nous voir à notre atelier."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/high-angle-view-pink-retro-landline-telephone-with-receiver_23-2148084239.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Hard-Soft Tech",
|
||||
items: [
|
||||
{
|
||||
label: "Rue Idzakri, Tiznit",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "+212 661-771271",
|
||||
href: "tel:+212661771271",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Réparation PC",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Programmation mobile",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2025 Hard-Soft Tech"
|
||||
bottomRightText="Tous droits réservés"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Contact"
|
||||
title="Contactez-nous"
|
||||
description="Besoin d'une réparation urgente ? Passez nous voir à notre atelier."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/high-angle-view-pink-retro-landline-telephone-with-receiver_23-2148084239.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user