Update src/app/pricing/page.tsx

Merge version_1 into main

src/app/about/page.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import TextAbout from '@/components/sections/about/TextAbout';
+import TeamCardSix from '@/components/sections/team/TeamCardSix';
+import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Users } from 'lucide-react';
+
+export default function AboutPage() {
+  const navItems = [
+    { name: "Services", id: "services" },
+    { name: "Processus", id: "how-it-works" },
+    { name: "Avantages", id: "why-us" },
+    { name: "Portfolio", id: "portfolio" },
+    { name: "Tarifs", id: "/pricing" },
+    { name: "À propos", id: "/about" },
+    { name: "Contact", id: "contact" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="small"
+      sizing="largeSmall"
+      background="none"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="AR Agency"
+          navItems={navItems}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogoBillboard
+          logoText="À Propos d'AR Agency"
+          description="Nous sommes une agence de technologie fondée pour transformer les PME tunisiennes. Notre mission: rendre l'IA accessible, abordable et transformatrice."
+          buttons={[
+            { text: "Obtenir une démo gratuite", href: "#contact" },
+            { text: "Retour à l'accueil", href: "/" }
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "sparkles-gradient" }}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AciGvoDigUmzMgk3PnylSVK1dY/a-modern-professional-ai-dashboard-inter-1772898422231-4613cf05.png?_wi=1"
+          imageAlt="À propos AR Agency"
+          mediaAnimation="blur-reveal"
+          frameStyle="card"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <TextAbout
+          tag="Notre Mission"
+          title="Nous croyons que chaque PME tunisienne mérite d'avoir accès à la technologie AI la plus avancée. Notre vision est de transformer votre business en mettant l'automatisation et l'intelligence artificielle entre vos mains."
+          useInvertedBackground={false}
+          buttons={[
+            { text: "Voir nos services", href: "/#services" },
+            { text: "Voir nos cas d'usage", href: "/#portfolio" }
+          ]}
+        />
+      </div>
+
+      <div id="team" data-section="team">
+        <TeamCardSix
+          members={[
+            {
+              id: "1",              name: "Ayoub Rdissi",              role: "Fondateur & CEO",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AciGvoDigUmzMgk3PnylSVK1dY/a-professional-portrait-of-a-man-in-busi-1772898422427-5b38e3ce.png",              imageAlt: "Ayoub Rdissi - CEO"
+            },
+            {
+              id: "2",              name: "Mariem Ben Salem",              role: "Directrice Technique",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AciGvoDigUmzMgk3PnylSVK1dY/a-professional-portrait-of-a-woman-in-bus-1772898422380-a2ccbab5.png",              imageAlt: "Mariem Ben Salem - CTO"
+            },
+            {
+              id: "3",              name: "Tarek Khalil",              role: "Lead Developer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AciGvoDigUmzMgk3PnylSVK1dY/a-professional-portrait-of-a-developer-i-1772898422316-8e7c0db8.png",              imageAlt: "Tarek Khalil - Lead Dev"
+            },
+            {
+              id: "4",              name: "Yasmine Triki",              role: "Customer Success",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AciGvoDigUmzMgk3PnylSVK1dY/a-professional-portrait-of-a-woman-smil-1772898422453-c45dd89d.png",              imageAlt: "Yasmine Triki - Success"
+            }
+          ]}
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          title="Notre Équipe"
+          description="Des experts passionnés dédiés à votre succès"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          tag="L'équipe"
+          tagIcon={Users}
+        />
+      </div>
+
+      <div id="values" data-section="values">
+        <FeatureCardTwentySeven
+          title="Nos Valeurs"
+          description="Ce qui nous guide dans chaque projet"
+          tag="Nos principes"
+          features={[
+            {
+              id: "1",              title: "Innovation",              description: "Nous utilisons les dernières technologies pour créer des solutions avant-gardistes. L'innovation n'est pas optionnelle, c'est notre ADN.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AciGvoDigUmzMgk3PnylSVK1dY/a-modern-professional-ai-dashboard-inter-1772898422231-4613cf05.png?_wi=2",              imageAlt: "Innovation"
+            },
+            {
+              id: "2",              title: "Transparence",              description: "Pas de mystères, pas de frais cachés. Nous expliquons chaque étape, vous voyez exactement ce que vous payez et ce que vous obtenez.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AciGvoDigUmzMgk3PnylSVK1dY/a-modern-professional-ai-dashboard-inter-1772898422231-4613cf05.png?_wi=3",              imageAlt: "Transparence"
+            },
+            {
+              id: "3",              title: "Excellence",              description: "Nous ne compromis jamais sur la qualité. Chaque projet est construit avec attention aux détails et passion pour l'excellence.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AciGvoDigUmzMgk3PnylSVK1dY/a-modern-professional-ai-dashboard-inter-1772898422231-4613cf05.png?_wi=4",              imageAlt: "Excellence"
+            },
+            {
+              id: "4",              title: "Impact",              description: "Nous mesurons notre succès par le vôtre. Vos résultats, c'est notre réussite. Pas d'engagement sans impact mesurable.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AciGvoDigUmzMgk3PnylSVK1dY/a-modern-professional-ai-dashboard-inter-1772898422231-4613cf05.png?_wi=5",              imageAlt: "Impact"
+            }
+          ]}
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Prêt à démarrer?"
+          title="Prêt à automatiser votre business?"
+          description="Parlez à un expert AR Agency dès aujourd'hui. Une démo personnalisée vous attend, sans engagement, 100% gratuite."
+          background={{ variant: "downward-rays-animated" }}
+          useInvertedBackground={true}
+          inputPlaceholder="votre@email.com"
+          buttonText="Parler à un expert"
+          termsText="En cliquant, vous acceptez que nous vous contactions par email ou WhatsApp pour discuter de vos besoins. Aucun spam, juste une vraie conversation."
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="AR Agency"
+          copyrightText="© 2025 AR Agency | Automatisation AI pour PME Tunisiennes"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -13,6 +13,8 @@ export default function LandingPage() {
     { name: "Processus", id: "how-it-works" },
     { name: "Avantages", id: "why-us" },
     { name: "Portfolio", id: "portfolio" },
+    { name: "Tarifs", id: "/pricing" },
+    { name: "À propos", id: "/about" },
     { name: "Contact", id: "contact" }
   ];
 

src/app/pricing/page.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+export default function PricingPage() {
+  const navItems = [
+    { name: "Services", id: "services" },
+    { name: "Processus", id: "how-it-works" },
+    { name: "Avantages", id: "why-us" },
+    { name: "Portfolio", id: "portfolio" },
+    { name: "Tarifs", id: "/pricing" },
+    { name: "À propos", id: "/about" },
+    { name: "Contact", id: "contact" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="small"
+      sizing="largeSmall"
+      background="none"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="AR Agency"
+          navItems={navItems}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogoBillboard
+          logoText="Nos Tarifs"
+          description="Des solutions de pricing flexible adaptées à votre budget. Pas de frais cachés, transparence totale. Choisissez le plan qui correspond à vos besoins."
+          buttons={[
+            { text: "Obtenir une démo gratuite", href: "#contact" },
+            { text: "Retour à l'accueil", href: "/" }
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "sparkles-gradient" }}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AciGvoDigUmzMgk3PnylSVK1dY/a-modern-professional-ai-dashboard-inter-1772898422231-4613cf05.png?_wi=1"
+          imageAlt="Plans tarifaires AR Agency"
+          mediaAnimation="blur-reveal"
+          frameStyle="card"
+        />
+      </div>
+
+      <div id="pricing" data-section="pricing">
+        <PricingCardNine
+          title="Plans d'Automatisation AI"
+          description="Choisissez le plan parfait pour votre business. Tous les plans incluent support technique et formation."
+          tag="Tarification"
+          plans={[
+            {
+              id: "starter",              title: "Starter",              price: "500",              period: "DT/mois",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AciGvoDigUmzMgk3PnylSVK1dY/a-sleek-professional-website-mockup-show-1772898422074-d206bf8e.jpg?_wi=1",              imageAlt: "Plan Starter",              button: { text: "Commencer", href: "#contact" },
+              features: [
+                "Site web professionnel basique",                "1 intégration AI simple",                "Support email",                "Démo et formation incluses"
+              ]
+            },
+            {
+              id: "growth",              title: "Growth",              price: "1 200",              period: "DT/mois",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AciGvoDigUmzMgk3PnylSVK1dY/a-smartphone-screen-showing-a-whatsapp-c-1772898421717-be971071.png",              imageAlt: "Plan Growth",              button: { text: "Choisir Growth", href: "#contact" },
+              features: [
+                "Site web professionnel avancé",                "Agent WhatsApp IA",                "Système de réservation automatisé",                "Support prioritaire",                "Rapport mensuel"
+              ]
+            },
+            {
+              id: "enterprise",              title: "Enterprise",              price: "2 500",              period: "DT/mois",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AciGvoDigUmzMgk3PnylSVK1dY/a-modern-booking-system-interface-showin-1772898421350-3afff789.png",              imageAlt: "Plan Enterprise",              button: { text: "Solutions Personnalisées", href: "#contact" },
+              features: [
+                "Suite complète d'automatisation",                "Multiples agents AI",                "Intégrations illimitées",                "Support 24/7 dédié",                "Optimisation continue",                "Rapports analytiques avancés"
+              ]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Prêt à démarrer?"
+          title="Prêt à automatiser votre business?"
+          description="Parlez à un expert AR Agency dès aujourd'hui. Une démo personnalisée vous attend, sans engagement, 100% gratuite."
+          background={{ variant: "downward-rays-animated" }}
+          useInvertedBackground={true}
+          inputPlaceholder="votre@email.com"
+          buttonText="Parler à un expert"
+          termsText="En cliquant, vous acceptez que nous vous contactions par email ou WhatsApp pour discuter de vos besoins. Aucun spam, juste une vraie conversation."
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="AR Agency"
+          copyrightText="© 2025 AR Agency | Automatisation AI pour PME Tunisiennes"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}