@m13v/seo-components 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m13v/seo-components",
-  "version": "0.2.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

@@ -1,5 +1,5 @@
 interface ArticleMetaProps {
-  author: string;
+  author?: string;
   authorRole?: string;
   datePublished: string;
   dateModified?: string;
@@ -18,7 +18,7 @@ function formatDate(value: string) {
 }
 
 export function ArticleMeta({
-  author,
+  author = "Matthew Diakonov",
   authorRole,
   datePublished,
   dateModified,
@@ -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/FlowDiagram.tsx

@@ -32,7 +32,7 @@ export function FlowDiagram({ title, steps }: FlowDiagramProps) {
       <p className="text-xs font-mono uppercase tracking-widest text-emerald-500 mb-5">
         {title}
       </p>
-      <div className="flex items-start gap-0 min-w-max">
+      <div className="flex items-start justify-between w-full">
         {steps.map((step, i) => (
           <motion.div
             key={i}
@@ -46,7 +46,7 @@ export function FlowDiagram({ title, steps }: FlowDiagramProps) {
               delay: i * 0.08,
             }}
           >
-            <div className="flex flex-col items-center w-28 shrink-0">
+            <div className="flex flex-col items-center flex-1 min-w-0 max-w-[180px]">
               <div className="w-11 h-11 rounded-xl bg-white border border-zinc-200 flex items-center justify-center text-lg mb-2">
                 {step.icon ? icons[step.icon] || "\u2022" : `${i + 1}`}
               </div>

package/src/components/InlineCta.tsx

@@ -17,7 +17,7 @@ export function InlineCta({
 }: InlineCtaProps) {
   return (
     <motion.div
-      className="my-12 p-6 rounded-2xl border border-accent/20 bg-accent-surface"
+      className="my-12 mx-auto max-w-2xl p-6 rounded-2xl border border-teal-100 bg-teal-50/30"
       initial={{ opacity: 0, y: 16 }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true }}

package/src/components/ProofBand.tsx

@@ -15,7 +15,7 @@ export function ProofBand({
   const hasHalf = rating - fullStars >= 0.3;
 
   return (
-    <div className={`text-sm text-zinc-500 mb-8 ${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">
         <div className="flex items-center gap-0.5" aria-label={`${rating} out of 5`}>