@zoyth/simple-site-framework 1.0.4 → 1.1.0

package/dist/components/index.d.mts

@@ -3933,4 +3933,77 @@ interface CTASectionProps {
  */
 declare function CTASection({ heading, description, primaryCTA, secondaryCTA, locale, variant, buttonLayout, backgroundColor, align, maxWidth, className, }: CTASectionProps): react_jsx_runtime.JSX.Element;
 
-export { AboutSection, AddressLink, type AddressLinkProps, AnimatedCounter, type AnimatedCounterProps, AnimatedItem, AnimatedSection, type AnimatedSectionProps, type AnimationType, type Badge, type BadgeType, type BillingPeriod, BlogCard, type BlogCardProps, BodyEndScripts, type BodyEndScriptsProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, type CTAButtonConfig, CTASection, type CTASectionProps, Card, type CardProps, CaseStudySection, Checkbox, CheckboxGroup, CheckboxGroupARIA, type CheckboxGroupARIAOption, type CheckboxGroupARIAProps, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, CodeBlock, type CodeBlockProps, type ComparisonFeature, type ComparisonOption, ComparisonTable, type ComparisonTableProps, ComponentDemo, type ComponentDemoProps, ContactForm, type ContactFormData, type ContactFormField, type ContactFormProps, type ContactFormResponse, ContactSection, CountdownTimer, type CountdownTimerProps, type CustomBadge, EmailLink, type EmailLinkProps, ExitIntentModal, type ExitIntentModalProps, type FAQ, FAQAccordion, type FAQAccordionProps, type Feature, type FeatureCategory, FeatureSection, FeaturesGrid, FileUpload, type FileUploadProps, Footer, type FooterProps, FormField, FormFieldARIA, type FormFieldARIAProps, type FormFieldProps, FormGroup, HeadScripts, type HeadScriptsProps, Header, type HeaderProps, type Heading, HeroSection, I18nMetaTags, type I18nMetaTagsProps, Icon, type IconName, type IconProps, Icons, InlineCode, Input, type InputProps, LanguageSelector, type LanguageSelectorProps, LanguageSwitcher, type LanguageSwitcherProps, LazySection, type LazySectionProps, LiveProof, type LiveProofNotification, type LiveProofProps, LoadingOverlay, type LoadingOverlayProps, LoadingSpinner, type LoadingSpinnerProps, LogosSection, MobileCTA, type MobileCTAProps, Modal, ModalContent, ModalFooter, type ModalProps, ModalRoot, type ModalSize, ModalTrigger, MultiStepForm, type MultiStepFormProps, type NotificationPosition, type OpenGraphMetadata, PersonalTaxesSection, PhoneLink, type PhoneLinkProps, PolicyLayout, type PolicyLayoutProps, type PricingFeature, PricingTable, type PricingTableProps, type PricingTier, Radio, RadioGroup, RadioGroupARIA, type RadioGroupARIAOption, type RadioGroupARIAProps, type RadioGroupOption, type RadioGroupProps, type RadioProps, RecruitingSection, SEOMetaTags, type SEOMetaTagsProps, SecurePortalSection, Select, type SelectOption, type SelectOptionGroup, type SelectProps, ServicePageLayout, ServicesSection, Skeleton, type SkeletonAnimation, SkeletonAvatar, SkeletonButton, SkeletonCard, SkeletonImage, type SkeletonProps, SkeletonText, type SpinnerSize, type SpinnerStyle, type Stat, StatsSection, type StatsSectionProps, type StepProps, StickyBar, type StickyBarProps, StructuredData, type StructuredDataProps, StyleGuide, type StyleGuideProps, type Tab, TableOfContents, type TableOfContentsProps, Tabs, type TabsProps, type Testimonial, TestimonialCarousel, type TestimonialCarouselProps, TestimonialSection, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, type Toast, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastType, TrustBadges, type TrustBadgesProps, type TwitterMetadata, WhyChooseUsSection, generateMockNotifications, toast, useMultiStepForm, useToast, withLazyLoad };
+interface BlogLayoutProps {
+    /** Blog post title */
+    title: string;
+    /** Short description for SEO */
+    excerpt: string;
+    /** Author name */
+    author: string;
+    /** Author avatar URL */
+    authorAvatar?: string;
+    /** Publication date (ISO string YYYY-MM-DD) */
+    date: string;
+    /** Reading time in minutes */
+    readTime: number;
+    /** Post tags */
+    tags: string[];
+    /** Featured image URL */
+    image?: string;
+    /** Featured image alt text */
+    imageAlt?: string;
+    /** Current locale */
+    locale: string;
+    /** Blog post content (from MDX) */
+    children: ReactNode;
+    /** Show table of contents sidebar @default true */
+    showToc?: boolean;
+    /** Link to blog index */
+    backHref?: string;
+    /** Label for back link */
+    backLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare function BlogLayout({ title, excerpt, author, authorAvatar, date, readTime, tags, image, imageAlt, locale, children, showToc, backHref, backLabel, className, }: BlogLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface BlogPostMetadata {
+    title: string;
+    excerpt: string;
+    author: string;
+    /** ISO date (YYYY-MM-DD) */
+    date: string;
+    /** Reading time in minutes */
+    readTime: number;
+    tags: string[];
+    featured?: boolean;
+    /** Featured image URL */
+    image?: string;
+    imageAlt?: string;
+    [key: string]: unknown;
+}
+
+interface BlogIndexProps {
+    /** Current locale */
+    locale: string;
+    /** Blog posts to display */
+    posts: Array<{
+        slug: string;
+        metadata: BlogPostMetadata;
+    }>;
+    /** Page title */
+    title?: LocalizedString$2 | string;
+    /** Page description */
+    description?: LocalizedString$2 | string;
+    /** Show tag filter bar @default true */
+    showTagFilter?: boolean;
+    /** BlogCard variant @default 'default' */
+    cardVariant?: 'default' | 'horizontal' | 'minimal';
+    /** Show featured posts prominently @default true */
+    featuredFirst?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare function BlogIndex({ locale, posts, title, description, showTagFilter, cardVariant, featuredFirst, className, }: BlogIndexProps): react_jsx_runtime.JSX.Element;
+
+export { AboutSection, AddressLink, type AddressLinkProps, AnimatedCounter, type AnimatedCounterProps, AnimatedItem, AnimatedSection, type AnimatedSectionProps, type AnimationType, type Badge, type BadgeType, type BillingPeriod, BlogCard, type BlogCardProps, BlogIndex, type BlogIndexProps, BlogLayout, type BlogLayoutProps, BodyEndScripts, type BodyEndScriptsProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, type CTAButtonConfig, CTASection, type CTASectionProps, Card, type CardProps, CaseStudySection, Checkbox, CheckboxGroup, CheckboxGroupARIA, type CheckboxGroupARIAOption, type CheckboxGroupARIAProps, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, CodeBlock, type CodeBlockProps, type ComparisonFeature, type ComparisonOption, ComparisonTable, type ComparisonTableProps, ComponentDemo, type ComponentDemoProps, ContactForm, type ContactFormData, type ContactFormField, type ContactFormProps, type ContactFormResponse, ContactSection, CountdownTimer, type CountdownTimerProps, type CustomBadge, EmailLink, type EmailLinkProps, ExitIntentModal, type ExitIntentModalProps, type FAQ, FAQAccordion, type FAQAccordionProps, type Feature, type FeatureCategory, FeatureSection, FeaturesGrid, FileUpload, type FileUploadProps, Footer, type FooterProps, FormField, FormFieldARIA, type FormFieldARIAProps, type FormFieldProps, FormGroup, HeadScripts, type HeadScriptsProps, Header, type HeaderProps, type Heading, HeroSection, I18nMetaTags, type I18nMetaTagsProps, Icon, type IconName, type IconProps, Icons, InlineCode, Input, type InputProps, LanguageSelector, type LanguageSelectorProps, LanguageSwitcher, type LanguageSwitcherProps, LazySection, type LazySectionProps, LiveProof, type LiveProofNotification, type LiveProofProps, LoadingOverlay, type LoadingOverlayProps, LoadingSpinner, type LoadingSpinnerProps, LogosSection, MobileCTA, type MobileCTAProps, Modal, ModalContent, ModalFooter, type ModalProps, ModalRoot, type ModalSize, ModalTrigger, MultiStepForm, type MultiStepFormProps, type NotificationPosition, type OpenGraphMetadata, PersonalTaxesSection, PhoneLink, type PhoneLinkProps, PolicyLayout, type PolicyLayoutProps, type PricingFeature, PricingTable, type PricingTableProps, type PricingTier, Radio, RadioGroup, RadioGroupARIA, type RadioGroupARIAOption, type RadioGroupARIAProps, type RadioGroupOption, type RadioGroupProps, type RadioProps, RecruitingSection, SEOMetaTags, type SEOMetaTagsProps, SecurePortalSection, Select, type SelectOption, type SelectOptionGroup, type SelectProps, ServicePageLayout, ServicesSection, Skeleton, type SkeletonAnimation, SkeletonAvatar, SkeletonButton, SkeletonCard, SkeletonImage, type SkeletonProps, SkeletonText, type SpinnerSize, type SpinnerStyle, type Stat, StatsSection, type StatsSectionProps, type StepProps, StickyBar, type StickyBarProps, StructuredData, type StructuredDataProps, StyleGuide, type StyleGuideProps, type Tab, TableOfContents, type TableOfContentsProps, Tabs, type TabsProps, type Testimonial, TestimonialCarousel, type TestimonialCarouselProps, TestimonialSection, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, type Toast, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastType, TrustBadges, type TrustBadgesProps, type TwitterMetadata, WhyChooseUsSection, generateMockNotifications, toast, useMultiStepForm, useToast, withLazyLoad };

package/dist/components/index.d.ts

@@ -3933,4 +3933,77 @@ interface CTASectionProps {
  */
 declare function CTASection({ heading, description, primaryCTA, secondaryCTA, locale, variant, buttonLayout, backgroundColor, align, maxWidth, className, }: CTASectionProps): react_jsx_runtime.JSX.Element;
 
-export { AboutSection, AddressLink, type AddressLinkProps, AnimatedCounter, type AnimatedCounterProps, AnimatedItem, AnimatedSection, type AnimatedSectionProps, type AnimationType, type Badge, type BadgeType, type BillingPeriod, BlogCard, type BlogCardProps, BodyEndScripts, type BodyEndScriptsProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, type CTAButtonConfig, CTASection, type CTASectionProps, Card, type CardProps, CaseStudySection, Checkbox, CheckboxGroup, CheckboxGroupARIA, type CheckboxGroupARIAOption, type CheckboxGroupARIAProps, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, CodeBlock, type CodeBlockProps, type ComparisonFeature, type ComparisonOption, ComparisonTable, type ComparisonTableProps, ComponentDemo, type ComponentDemoProps, ContactForm, type ContactFormData, type ContactFormField, type ContactFormProps, type ContactFormResponse, ContactSection, CountdownTimer, type CountdownTimerProps, type CustomBadge, EmailLink, type EmailLinkProps, ExitIntentModal, type ExitIntentModalProps, type FAQ, FAQAccordion, type FAQAccordionProps, type Feature, type FeatureCategory, FeatureSection, FeaturesGrid, FileUpload, type FileUploadProps, Footer, type FooterProps, FormField, FormFieldARIA, type FormFieldARIAProps, type FormFieldProps, FormGroup, HeadScripts, type HeadScriptsProps, Header, type HeaderProps, type Heading, HeroSection, I18nMetaTags, type I18nMetaTagsProps, Icon, type IconName, type IconProps, Icons, InlineCode, Input, type InputProps, LanguageSelector, type LanguageSelectorProps, LanguageSwitcher, type LanguageSwitcherProps, LazySection, type LazySectionProps, LiveProof, type LiveProofNotification, type LiveProofProps, LoadingOverlay, type LoadingOverlayProps, LoadingSpinner, type LoadingSpinnerProps, LogosSection, MobileCTA, type MobileCTAProps, Modal, ModalContent, ModalFooter, type ModalProps, ModalRoot, type ModalSize, ModalTrigger, MultiStepForm, type MultiStepFormProps, type NotificationPosition, type OpenGraphMetadata, PersonalTaxesSection, PhoneLink, type PhoneLinkProps, PolicyLayout, type PolicyLayoutProps, type PricingFeature, PricingTable, type PricingTableProps, type PricingTier, Radio, RadioGroup, RadioGroupARIA, type RadioGroupARIAOption, type RadioGroupARIAProps, type RadioGroupOption, type RadioGroupProps, type RadioProps, RecruitingSection, SEOMetaTags, type SEOMetaTagsProps, SecurePortalSection, Select, type SelectOption, type SelectOptionGroup, type SelectProps, ServicePageLayout, ServicesSection, Skeleton, type SkeletonAnimation, SkeletonAvatar, SkeletonButton, SkeletonCard, SkeletonImage, type SkeletonProps, SkeletonText, type SpinnerSize, type SpinnerStyle, type Stat, StatsSection, type StatsSectionProps, type StepProps, StickyBar, type StickyBarProps, StructuredData, type StructuredDataProps, StyleGuide, type StyleGuideProps, type Tab, TableOfContents, type TableOfContentsProps, Tabs, type TabsProps, type Testimonial, TestimonialCarousel, type TestimonialCarouselProps, TestimonialSection, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, type Toast, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastType, TrustBadges, type TrustBadgesProps, type TwitterMetadata, WhyChooseUsSection, generateMockNotifications, toast, useMultiStepForm, useToast, withLazyLoad };
+interface BlogLayoutProps {
+    /** Blog post title */
+    title: string;
+    /** Short description for SEO */
+    excerpt: string;
+    /** Author name */
+    author: string;
+    /** Author avatar URL */
+    authorAvatar?: string;
+    /** Publication date (ISO string YYYY-MM-DD) */
+    date: string;
+    /** Reading time in minutes */
+    readTime: number;
+    /** Post tags */
+    tags: string[];
+    /** Featured image URL */
+    image?: string;
+    /** Featured image alt text */
+    imageAlt?: string;
+    /** Current locale */
+    locale: string;
+    /** Blog post content (from MDX) */
+    children: ReactNode;
+    /** Show table of contents sidebar @default true */
+    showToc?: boolean;
+    /** Link to blog index */
+    backHref?: string;
+    /** Label for back link */
+    backLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare function BlogLayout({ title, excerpt, author, authorAvatar, date, readTime, tags, image, imageAlt, locale, children, showToc, backHref, backLabel, className, }: BlogLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface BlogPostMetadata {
+    title: string;
+    excerpt: string;
+    author: string;
+    /** ISO date (YYYY-MM-DD) */
+    date: string;
+    /** Reading time in minutes */
+    readTime: number;
+    tags: string[];
+    featured?: boolean;
+    /** Featured image URL */
+    image?: string;
+    imageAlt?: string;
+    [key: string]: unknown;
+}
+
+interface BlogIndexProps {
+    /** Current locale */
+    locale: string;
+    /** Blog posts to display */
+    posts: Array<{
+        slug: string;
+        metadata: BlogPostMetadata;
+    }>;
+    /** Page title */
+    title?: LocalizedString$2 | string;
+    /** Page description */
+    description?: LocalizedString$2 | string;
+    /** Show tag filter bar @default true */
+    showTagFilter?: boolean;
+    /** BlogCard variant @default 'default' */
+    cardVariant?: 'default' | 'horizontal' | 'minimal';
+    /** Show featured posts prominently @default true */
+    featuredFirst?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare function BlogIndex({ locale, posts, title, description, showTagFilter, cardVariant, featuredFirst, className, }: BlogIndexProps): react_jsx_runtime.JSX.Element;
+
+export { AboutSection, AddressLink, type AddressLinkProps, AnimatedCounter, type AnimatedCounterProps, AnimatedItem, AnimatedSection, type AnimatedSectionProps, type AnimationType, type Badge, type BadgeType, type BillingPeriod, BlogCard, type BlogCardProps, BlogIndex, type BlogIndexProps, BlogLayout, type BlogLayoutProps, BodyEndScripts, type BodyEndScriptsProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, type CTAButtonConfig, CTASection, type CTASectionProps, Card, type CardProps, CaseStudySection, Checkbox, CheckboxGroup, CheckboxGroupARIA, type CheckboxGroupARIAOption, type CheckboxGroupARIAProps, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, CodeBlock, type CodeBlockProps, type ComparisonFeature, type ComparisonOption, ComparisonTable, type ComparisonTableProps, ComponentDemo, type ComponentDemoProps, ContactForm, type ContactFormData, type ContactFormField, type ContactFormProps, type ContactFormResponse, ContactSection, CountdownTimer, type CountdownTimerProps, type CustomBadge, EmailLink, type EmailLinkProps, ExitIntentModal, type ExitIntentModalProps, type FAQ, FAQAccordion, type FAQAccordionProps, type Feature, type FeatureCategory, FeatureSection, FeaturesGrid, FileUpload, type FileUploadProps, Footer, type FooterProps, FormField, FormFieldARIA, type FormFieldARIAProps, type FormFieldProps, FormGroup, HeadScripts, type HeadScriptsProps, Header, type HeaderProps, type Heading, HeroSection, I18nMetaTags, type I18nMetaTagsProps, Icon, type IconName, type IconProps, Icons, InlineCode, Input, type InputProps, LanguageSelector, type LanguageSelectorProps, LanguageSwitcher, type LanguageSwitcherProps, LazySection, type LazySectionProps, LiveProof, type LiveProofNotification, type LiveProofProps, LoadingOverlay, type LoadingOverlayProps, LoadingSpinner, type LoadingSpinnerProps, LogosSection, MobileCTA, type MobileCTAProps, Modal, ModalContent, ModalFooter, type ModalProps, ModalRoot, type ModalSize, ModalTrigger, MultiStepForm, type MultiStepFormProps, type NotificationPosition, type OpenGraphMetadata, PersonalTaxesSection, PhoneLink, type PhoneLinkProps, PolicyLayout, type PolicyLayoutProps, type PricingFeature, PricingTable, type PricingTableProps, type PricingTier, Radio, RadioGroup, RadioGroupARIA, type RadioGroupARIAOption, type RadioGroupARIAProps, type RadioGroupOption, type RadioGroupProps, type RadioProps, RecruitingSection, SEOMetaTags, type SEOMetaTagsProps, SecurePortalSection, Select, type SelectOption, type SelectOptionGroup, type SelectProps, ServicePageLayout, ServicesSection, Skeleton, type SkeletonAnimation, SkeletonAvatar, SkeletonButton, SkeletonCard, SkeletonImage, type SkeletonProps, SkeletonText, type SpinnerSize, type SpinnerStyle, type Stat, StatsSection, type StatsSectionProps, type StepProps, StickyBar, type StickyBarProps, StructuredData, type StructuredDataProps, StyleGuide, type StyleGuideProps, type Tab, TableOfContents, type TableOfContentsProps, Tabs, type TabsProps, type Testimonial, TestimonialCarousel, type TestimonialCarouselProps, TestimonialSection, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, type Toast, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastType, TrustBadges, type TrustBadgesProps, type TwitterMetadata, WhyChooseUsSection, generateMockNotifications, toast, useMultiStepForm, useToast, withLazyLoad };

package/dist/components/index.js

@@ -28812,6 +28812,8 @@ __export(components_exports, {
   AnimatedItem: () => AnimatedItem,
   AnimatedSection: () => AnimatedSection,
   BlogCard: () => BlogCard,
+  BlogIndex: () => BlogIndex,
+  BlogLayout: () => BlogLayout,
   BodyEndScripts: () => BodyEndScripts,
   Breadcrumb: () => Breadcrumb,
   Button: () => Button,
@@ -34301,6 +34303,10 @@ var import_react24 = require("react");
 var import_rsc = require("next-mdx-remote/rsc");
 var import_rehype_slug = __toESM(require("rehype-slug"));
 
+// src/lib/content/blog.ts
+var import_rsc2 = require("next-mdx-remote/rsc");
+var import_rehype_slug2 = __toESM(require("rehype-slug"));
+
 // src/components/sections/HeroSection.tsx
 var import_image4 = __toESM(require("next/image"));
 var import_jsx_runtime35 = require("react/jsx-runtime");
@@ -38200,6 +38206,206 @@ function CTASection({
     }
   );
 }
+
+// src/components/BlogLayout.tsx
+var import_jsx_runtime69 = require("react/jsx-runtime");
+function BlogLayout({
+  title,
+  excerpt,
+  author,
+  authorAvatar,
+  date,
+  readTime,
+  tags,
+  image,
+  imageAlt,
+  locale,
+  children,
+  showToc = true,
+  backHref,
+  backLabel,
+  className
+}) {
+  const formattedDate = formatDate2(date, locale);
+  const isFr = locale === "fr";
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("article", { className: cn("max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+      "a",
+      {
+        href: backHref || `/${locale}/blog`,
+        className: "inline-flex items-center text-sm text-gray-600 hover:text-primary mb-6",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { "aria-hidden": "true", children: "\u2190" }),
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ml-2", children: backLabel || (isFr ? "Retour au blog" : "Back to blog") })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("header", { className: "mb-8 sm:mb-12", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("h1", { className: "text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-4", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex flex-wrap items-center gap-4 text-sm text-gray-600 mb-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex items-center gap-2", children: [
+          authorAvatar && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+            "img",
+            {
+              src: authorAvatar,
+              alt: author,
+              className: "w-8 h-8 rounded-full object-cover"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { children: author })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { "aria-hidden": "true", children: "\xB7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("time", { dateTime: date, children: formattedDate }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { "aria-hidden": "true", children: "\xB7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { children: [
+          readTime,
+          " ",
+          isFr ? "min de lecture" : "min read"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "flex flex-wrap gap-2", children: tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        "span",
+        {
+          className: "inline-block px-3 py-1 text-xs font-medium bg-gray-100 text-gray-700 rounded-full",
+          children: tag
+        },
+        tag
+      )) })
+    ] }),
+    image && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "mb-8 sm:mb-12 rounded-lg overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      "img",
+      {
+        src: image,
+        alt: imageAlt || title,
+        className: "w-full h-auto object-cover"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex flex-col lg:flex-row gap-8 lg:gap-12", children: [
+      showToc && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("aside", { className: "hidden lg:block w-64 flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "sticky top-24", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TableOfContents, { title: isFr ? "Table des mati\xE8res" : "Table of Contents" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        "div",
+        {
+          className: cn(
+            "prose prose-gray prose-lg max-w-none",
+            "prose-headings:scroll-mt-24",
+            "prose-h2:text-2xl prose-h2:font-bold prose-h2:mt-12 prose-h2:mb-4",
+            "prose-h3:text-xl prose-h3:font-semibold prose-h3:mt-8 prose-h3:mb-3",
+            "prose-h4:text-lg prose-h4:font-semibold prose-h4:mt-6 prose-h4:mb-2",
+            "prose-p:text-gray-700 prose-p:leading-relaxed",
+            "prose-a:text-primary prose-a:no-underline hover:prose-a:underline",
+            "prose-strong:text-gray-900 prose-strong:font-semibold",
+            "prose-ul:my-6 prose-li:my-2",
+            "prose-code:text-primary prose-code:bg-gray-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded",
+            "prose-pre:bg-gray-900 prose-pre:text-gray-100",
+            "prose-blockquote:border-l-primary prose-blockquote:bg-gray-50 prose-blockquote:py-2",
+            "prose-table:text-sm",
+            "sm:prose-lg",
+            "prose-headings:break-words",
+            "prose-p:break-words"
+          ),
+          children
+        }
+      ) })
+    ] })
+  ] });
+}
+function formatDate2(dateString, locale) {
+  try {
+    const isoDateMatch = dateString.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    const date = isoDateMatch ? /* @__PURE__ */ new Date(`${dateString}T12:00:00`) : new Date(dateString);
+    return date.toLocaleDateString(locale, {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    });
+  } catch {
+    return dateString;
+  }
+}
+
+// src/components/BlogIndex.tsx
+var import_react35 = require("react");
+var import_jsx_runtime70 = require("react/jsx-runtime");
+function BlogIndex({
+  locale,
+  posts,
+  title,
+  description,
+  showTagFilter = true,
+  cardVariant = "default",
+  featuredFirst = true,
+  className
+}) {
+  const [activeTag, setActiveTag] = (0, import_react35.useState)(null);
+  const resolvedTitle = title ? typeof title === "string" ? title : getLocalizedString(title, locale) : void 0;
+  const resolvedDescription = description ? typeof description === "string" ? description : getLocalizedString(description, locale) : void 0;
+  const allTags = (0, import_react35.useMemo)(() => {
+    const tagSet = /* @__PURE__ */ new Set();
+    for (const post of posts) {
+      for (const tag of post.metadata.tags) {
+        tagSet.add(tag);
+      }
+    }
+    return Array.from(tagSet).sort();
+  }, [posts]);
+  const filteredPosts = activeTag ? posts.filter((p) => p.metadata.tags.includes(activeTag)) : posts;
+  const featuredPosts = featuredFirst ? filteredPosts.filter((p) => p.metadata.featured) : [];
+  const regularPosts = featuredFirst ? filteredPosts.filter((p) => !p.metadata.featured) : filteredPosts;
+  const isFr = locale === "fr";
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: cn("max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12", className), children: [
+    (resolvedTitle || resolvedDescription) && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "mb-8 sm:mb-12", children: [
+      resolvedTitle && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("h1", { className: "text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-3", children: resolvedTitle }),
+      resolvedDescription && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "text-lg text-gray-600", children: resolvedDescription })
+    ] }),
+    showTagFilter && allTags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "flex flex-wrap gap-2 mb-8", role: "group", "aria-label": isFr ? "Filtrer par tag" : "Filter by tag", children: allTags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      "button",
+      {
+        onClick: () => setActiveTag(activeTag === tag ? null : tag),
+        className: cn(
+          "px-3 py-1.5 text-sm font-medium rounded-full transition-colors",
+          activeTag === tag ? "bg-primary text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+        ),
+        children: tag
+      },
+      tag
+    )) }),
+    filteredPosts.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "text-center py-16", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "text-gray-500 text-lg", children: isFr ? "Aucun article trouv\xE9." : "No posts found." }) }),
+    featuredPosts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "mb-12", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: featuredPosts.map((post) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      BlogCard,
+      {
+        locale,
+        title: post.metadata.title,
+        excerpt: post.metadata.excerpt,
+        image: post.metadata.image,
+        imageAlt: post.metadata.imageAlt,
+        href: `/${locale}/blog/${post.slug}`,
+        author: post.metadata.author,
+        date: post.metadata.date,
+        readTime: post.metadata.readTime,
+        tags: post.metadata.tags,
+        variant: cardVariant
+      },
+      post.slug
+    )) }) }),
+    regularPosts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: regularPosts.map((post) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      BlogCard,
+      {
+        locale,
+        title: post.metadata.title,
+        excerpt: post.metadata.excerpt,
+        image: post.metadata.image,
+        imageAlt: post.metadata.imageAlt,
+        href: `/${locale}/blog/${post.slug}`,
+        author: post.metadata.author,
+        date: post.metadata.date,
+        readTime: post.metadata.readTime,
+        tags: post.metadata.tags,
+        variant: cardVariant
+      },
+      post.slug
+    )) })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AboutSection,
@@ -38208,6 +38414,8 @@ function CTASection({
   AnimatedItem,
   AnimatedSection,
   BlogCard,
+  BlogIndex,
+  BlogLayout,
   BodyEndScripts,
   Breadcrumb,
   Button,