@m13v/seo-components 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@m13v/seo-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"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.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./src/index.ts",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
interface ArticleMetaProps {
|
|
2
|
-
author
|
|
2
|
+
author?: string;
|
|
3
3
|
authorRole?: string;
|
|
4
4
|
datePublished: string;
|
|
5
5
|
dateModified?: string;
|
|
@@ -18,7 +18,7 @@ function formatDate(value: string) {
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
export function ArticleMeta({
|
|
21
|
-
author,
|
|
21
|
+
author = "Matthew Diakonov",
|
|
22
22
|
authorRole,
|
|
23
23
|
datePublished,
|
|
24
24
|
dateModified,
|
|
@@ -32,7 +32,7 @@ export function FlowDiagram({ title, steps }: FlowDiagramProps) {
|
|
|
32
32
|
<p className="text-xs font-mono uppercase tracking-widest text-emerald-500 mb-5">
|
|
33
33
|
{title}
|
|
34
34
|
</p>
|
|
35
|
-
<div className="flex items-start
|
|
35
|
+
<div className="flex items-start justify-between w-full">
|
|
36
36
|
{steps.map((step, i) => (
|
|
37
37
|
<motion.div
|
|
38
38
|
key={i}
|
|
@@ -46,7 +46,7 @@ export function FlowDiagram({ title, steps }: FlowDiagramProps) {
|
|
|
46
46
|
delay: i * 0.08,
|
|
47
47
|
}}
|
|
48
48
|
>
|
|
49
|
-
<div className="flex flex-col items-center w-
|
|
49
|
+
<div className="flex flex-col items-center flex-1 min-w-0 max-w-[180px]">
|
|
50
50
|
<div className="w-11 h-11 rounded-xl bg-white border border-zinc-200 flex items-center justify-center text-lg mb-2">
|
|
51
51
|
{step.icon ? icons[step.icon] || "\u2022" : `${i + 1}`}
|
|
52
52
|
</div>
|
|
@@ -17,7 +17,7 @@ export function InlineCta({
|
|
|
17
17
|
}: InlineCtaProps) {
|
|
18
18
|
return (
|
|
19
19
|
<motion.div
|
|
20
|
-
className="my-12 p-6 rounded-2xl border border-
|
|
20
|
+
className="my-12 mx-auto max-w-2xl p-6 rounded-2xl border border-teal-100 bg-teal-50/30"
|
|
21
21
|
initial={{ opacity: 0, y: 16 }}
|
|
22
22
|
whileInView={{ opacity: 1, y: 0 }}
|
|
23
23
|
viewport={{ once: true }}
|
|
@@ -15,9 +15,9 @@ export function ProofBand({
|
|
|
15
15
|
const hasHalf = rating - fullStars >= 0.3;
|
|
16
16
|
|
|
17
17
|
return (
|
|
18
|
-
<div className={`text-sm text-zinc-500 mb-8 ${className}`}>
|
|
18
|
+
<div className={`text-sm text-zinc-500 mb-8 w-full ${className}`}>
|
|
19
19
|
{/* Stars + rating on its own line */}
|
|
20
|
-
<div className="flex items-center gap-2 mb-2">
|
|
20
|
+
<div className="flex items-center gap-2 mb-2 justify-center sm:justify-start">
|
|
21
21
|
<div className="flex items-center gap-0.5" aria-label={`${rating} out of 5`}>
|
|
22
22
|
{Array.from({ length: 5 }, (_, i) => (
|
|
23
23
|
<svg
|
|
@@ -43,7 +43,7 @@ export function ProofBand({
|
|
|
43
43
|
|
|
44
44
|
{/* Highlights as a clean vertical list */}
|
|
45
45
|
{highlights.length > 0 && (
|
|
46
|
-
<div className="flex flex-col gap-1">
|
|
46
|
+
<div className="flex flex-col gap-1 items-center sm:items-start">
|
|
47
47
|
{highlights.map((h, i) => (
|
|
48
48
|
<div key={i} className="flex items-center gap-2">
|
|
49
49
|
<svg
|