@m13v/seo-components 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m13v/seo-components",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "39 animated React components for programmatic SEO pages. Remotion video, Magic UI style animations, trust signals, JSON-LD helpers. Teal/cyan brand, light-theme only.",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/ArticleMeta.tsx

@@ -27,7 +27,7 @@ export function ArticleMeta({
 }: ArticleMetaProps) {
   const showUpdated = dateModified && dateModified !== datePublished;
   return (
-    <div className={`flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-zinc-500 ${className}`}>
+    <div className={`flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-zinc-500 max-w-4xl mx-auto px-6 ${className}`}>
       <div className="flex items-center gap-2">
         <div className="w-7 h-7 rounded-full bg-gradient-to-br from-teal-500/40 to-teal-500/10 flex items-center justify-center text-xs font-semibold text-white">
           {author.charAt(0)}

package/src/components/Breadcrumbs.tsx

@@ -15,7 +15,7 @@ interface BreadcrumbsProps {
 export function Breadcrumbs({ items, className = "", align = "start" }: BreadcrumbsProps) {
   const justify = align === "center" ? "justify-center" : "justify-start";
   return (
-    <nav aria-label="Breadcrumb" className={className}>
+    <nav aria-label="Breadcrumb" className={`max-w-4xl mx-auto px-6 ${className}`}>
       <ol className={`flex flex-wrap items-center ${justify} gap-2 text-sm text-zinc-500`}>
         {items.map((item, i) => {
           const isLast = i === items.length - 1;

package/src/components/FaqSection.tsx

@@ -12,7 +12,7 @@ export function FaqSection({
   className = "",
 }: FaqSectionProps) {
   return (
-    <section className={className}>
+    <section className={`max-w-4xl mx-auto px-6 my-16 ${className}`}>
       <h2 className="text-3xl sm:text-4xl font-bold text-zinc-900 mb-8">{heading}</h2>
       <div className="space-y-4">
         {items.map((faq) => (

package/src/components/ProofBand.tsx

@@ -15,9 +15,9 @@ export function ProofBand({
   const hasHalf = rating - fullStars >= 0.3;
 
   return (
-    <div className={`text-sm text-zinc-500 mb-8 w-full ${className}`}>
+    <div className={`text-sm text-zinc-500 mb-8 max-w-4xl mx-auto px-6 ${className}`}>
       {/* Stars + rating on its own line */}
-      <div className="flex items-center gap-2 mb-2 justify-center sm:justify-start">
+      <div className="flex items-center gap-2 mb-2">
         <div className="flex items-center gap-0.5" aria-label={`${rating} out of 5`}>
           {Array.from({ length: 5 }, (_, i) => (
             <svg
@@ -43,7 +43,7 @@ export function ProofBand({
 
       {/* Highlights as a clean vertical list */}
       {highlights.length > 0 && (
-        <div className="flex flex-col gap-1 items-center sm:items-start">
+        <div className="flex flex-col gap-1">
           {highlights.map((h, i) => (
             <div key={i} className="flex items-center gap-2">
               <svg