@trackany-device/components 1.0.0

package/src/components/cms/section-button.tsx

@@ -0,0 +1,127 @@
+import { PlatformLink } from '../../platform/context';
+
+import { Button } from '../ui/button';
+import { Icon } from '../ui/icon';
+import { lucideIcon } from '../../lib/lucide-icon-map';
+import { cn } from '../../lib/utils';
+
+export type CmsButton = {
+    label: string;
+    link: string;
+    icon?: string | null;
+    variant?:
+        | 'primary'
+        | 'secondary'
+        | 'outline'
+        | 'ghost'
+        | 'destructive'
+        | null;
+};
+
+/**
+ * Maps the CMS `buttons[]` variant strings to shadcn Button variants.
+ * Our schema uses "primary" (matches user intent); shadcn calls it "default".
+ */
+function mapVariant(v?: string | null) {
+    switch (v) {
+        case 'secondary':
+            return 'secondary' as const;
+        case 'outline':
+            return 'outline' as const;
+        case 'ghost':
+            return 'ghost' as const;
+        case 'destructive':
+            return 'destructive' as const;
+        case 'primary':
+        default:
+            return 'primary' as const;
+    }
+}
+
+function isExternal(href: string): boolean {
+    return /^(https?:)?\/\//i.test(href) || /^mailto:|^tel:/i.test(href);
+}
+
+function isAnchor(href: string): boolean {
+    return href.startsWith('#');
+}
+
+export function SectionButton({
+    button,
+    size = 'lg',
+    className,
+}: {
+    button: CmsButton;
+    size?: 'md' | 'sm' | 'lg';
+    className?: string;
+}) {
+    const Icon$ = lucideIcon(button.icon);
+    const variant = mapVariant(button.variant);
+
+    const content = (
+        <>
+            {Icon$ ? <Icon iconNode={Icon$} className="size-4" /> : null}
+            {button.label}
+        </>
+    );
+
+    if (isExternal(button.link) || isAnchor(button.link)) {
+        return (
+            <Button
+                asChild
+                variant={variant}
+                size={size}
+                className={cn(className)}
+            >
+                <a
+                    href={button.link}
+                    target={isExternal(button.link) ? '_blank' : undefined}
+                    rel={
+                        isExternal(button.link)
+                            ? 'noopener noreferrer'
+                            : undefined
+                    }
+                >
+                    {content}
+                </a>
+            </Button>
+        );
+    }
+
+    return (
+        <Button asChild variant={variant} size={size} className={cn(className)}>
+            <PlatformLink href={button.link}>{content}</PlatformLink>
+        </Button>
+    );
+}
+
+export function SectionButtons({
+    buttons,
+    align = 'center',
+    size = 'lg',
+    className,
+}: {
+    buttons?: CmsButton[] | null;
+    align?: 'left' | 'center' | 'right';
+    size?: 'md' | 'sm' | 'lg';
+    className?: string;
+}) {
+    if (!buttons || buttons.length === 0) {
+        return null;
+    }
+
+    return (
+        <div
+            className={cn(
+                'flex flex-wrap items-center gap-3',
+                align === 'center' && 'justify-center',
+                align === 'right' && 'justify-end',
+                className,
+            )}
+        >
+            {buttons.map((b, i) => (
+                <SectionButton key={`${b.label}-${i}`} button={b} size={size} />
+            ))}
+        </div>
+    );
+}

package/src/components/cms/sections/banner-5050-section.tsx

@@ -0,0 +1,135 @@
+import { Check, ImageOff } from 'lucide-react';
+
+import { SectionButtons } from '../section-button';
+import type { CmsButton } from '../section-button';
+import { Icon } from '../../ui/icon';
+import { lucideIcon } from '../../../lib/lucide-icon-map';
+import { cn } from '../../../lib/utils';
+
+export type Banner5050Content = {
+    image?: string | null;
+    image_position?: 'left' | 'right' | null;
+    eyebrow?: string | null;
+    title?: string | null;
+    body?: string | null;
+    bullets?: { icon?: string | null; text: string }[] | null;
+    buttons?: CmsButton[] | null;
+};
+
+/**
+ * 50/50 banner — image on one side, text/bullets/CTAs on the other.
+ * Used for "Built for engineers", team intros, product highlights —
+ * anywhere we want a visual + supporting copy with equal weight.
+ *
+ * Image renders as a full-bleed cover photo inside a rounded card —
+ * no blurred halo / surface wash, so the image keeps a hard edge.
+ */
+export function Banner5050Section({
+    content,
+    identifier,
+}: {
+    content?: Banner5050Content;
+    identifier?: string | null;
+}) {
+    const imagePos = content?.image_position ?? 'left';
+
+    return (
+        <section
+            id={identifier ?? undefined}
+            className="bg-background py-20 sm:py-24"
+        >
+            <div className="mx-auto max-w-6xl px-6">
+                <div
+                    className={cn(
+                        'grid items-center gap-10 lg:grid-cols-2 lg:gap-16',
+                    )}
+                >
+                    <div
+                        className={cn(
+                            imagePos === 'right' ? 'lg:order-2' : 'lg:order-1',
+                        )}
+                    >
+                        <div className="aspect-[4/3] overflow-hidden rounded-2xl bg-muted/40">
+                            {content?.image ? (
+                                <img
+                                    src={content.image}
+                                    alt={content.title ?? ''}
+                                    loading="lazy"
+                                    className="h-full w-full object-cover"
+                                />
+                            ) : (
+                                <div
+                                    aria-label={content?.title ?? ''}
+                                    className="flex h-full w-full items-center justify-center text-muted-foreground"
+                                >
+                                    <ImageOff className="size-12 opacity-40" />
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    <div
+                        className={cn(
+                            imagePos === 'right' ? 'lg:order-1' : 'lg:order-2',
+                        )}
+                    >
+                        {content?.eyebrow && (
+                            <p className="mb-3 text-xs font-medium tracking-widest text-muted-foreground uppercase">
+                                {content.eyebrow}
+                            </p>
+                        )}
+                        {content?.title && (
+                            <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+                                {content.title}
+                            </h2>
+                        )}
+                        {content?.body && (
+                            <p className="mt-4 text-base leading-relaxed text-pretty text-muted-foreground sm:text-lg">
+                                {content.body}
+                            </p>
+                        )}
+
+                        {content?.bullets && content.bullets.length > 0 && (
+                            <ul className="mt-6 space-y-3">
+                                {content.bullets.map((b, i) => {
+                                    const Icon$ = lucideIcon(b.icon);
+
+                                    return (
+                                        <li
+                                            key={i}
+                                            className="flex items-start gap-3 text-sm leading-relaxed"
+                                        >
+                                            <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+                                                {Icon$ ? (
+                                                    <Icon
+                                                        iconNode={Icon$}
+                                                        className="size-3"
+                                                    />
+                                                ) : (
+                                                    <Check className="size-3" />
+                                                )}
+                                            </span>
+                                            <span className="text-foreground">
+                                                {b.text}
+                                            </span>
+                                        </li>
+                                    );
+                                })}
+                            </ul>
+                        )}
+
+                        {content?.buttons && content.buttons.length > 0 && (
+                            <div className="mt-8">
+                                <SectionButtons
+                                    buttons={content.buttons}
+                                    align="left"
+                                    size="lg"
+                                />
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}

package/src/components/cms/sections/blogs-listing-section.tsx

@@ -0,0 +1,270 @@
+'use client';
+import { PlatformLink } from '../../../platform/context';
+
+import { ArrowRight, Calendar, Search } from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+import { BlurredImage } from '../blurred-image';
+import { Badge } from '../../ui/badge';
+import { Card } from '../../ui/card';
+import { Input } from '../../ui/input';
+import { cn } from '../../../lib/utils';
+
+import type { BlogPostCard } from './featured-blog-slider-section';
+
+export type BlogsListingContent = {
+    title?: string | null;
+    subtitle?: string | null;
+    items_per_page?: number | null;
+    show_tag_filter?: boolean | null;
+    show_author_filter?: boolean | null;
+};
+
+/**
+ * Paginated blog listing with client-side search + tag filter.
+ * Reads `posts` shared prop (an array of BlogPostCard).
+ */
+export function BlogsListingSection({
+    content,
+    posts,
+    identifier,
+}: {
+    content?: BlogsListingContent;
+    posts?: BlogPostCard[];
+    identifier?: string | null;
+}) {
+    const perPage = content?.items_per_page ?? 12;
+    const showTagFilter = content?.show_tag_filter ?? true;
+
+    const [query, setQuery] = useState('');
+    const [activeTag, setActiveTag] = useState<string | null>(null);
+    const [visible, setVisible] = useState(perPage);
+
+    const allTags = useMemo(() => {
+        const seen = new Map<string, { name: string; color: string | null }>();
+
+        for (const p of posts ?? []) {
+            for (const t of p.tags) {
+                if (!seen.has(t.slug)) {
+                    seen.set(t.slug, { name: t.name, color: t.color });
+                }
+            }
+        }
+
+        return Array.from(seen, ([slug, v]) => ({ slug, ...v }));
+    }, [posts]);
+
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+
+        return (posts ?? []).filter((p) => {
+            if (
+                q &&
+                !`${p.title} ${p.excerpt ?? ''}`.toLowerCase().includes(q)
+            ) {
+                return false;
+            }
+
+            if (activeTag && !p.tags.some((t) => t.slug === activeTag)) {
+                return false;
+            }
+
+            return true;
+        });
+    }, [posts, query, activeTag]);
+
+    const shown = filtered.slice(0, visible);
+
+    return (
+        <section
+            id={identifier ?? undefined}
+            className="bg-background py-20 sm:py-24"
+        >
+            <div className="mx-auto max-w-6xl px-6">
+                {(content?.title || content?.subtitle) && (
+                    <header className="mb-10 max-w-2xl">
+                        {content?.title && (
+                            <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+                                {content.title}
+                            </h2>
+                        )}
+                        {content?.subtitle && (
+                            <p className="mt-3 text-base leading-relaxed text-pretty text-muted-foreground sm:text-lg">
+                                {content.subtitle}
+                            </p>
+                        )}
+                    </header>
+                )}
+
+                <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="relative w-full sm:max-w-xs">
+                        <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+                        <Input
+                            value={query}
+                            onChange={(e) => {
+                                setQuery(e.target.value);
+                                setVisible(perPage);
+                            }}
+                            placeholder="Search articles"
+                            className="pl-9"
+                        />
+                    </div>
+
+                    {showTagFilter && allTags.length > 0 && (
+                        <div className="flex flex-wrap gap-1.5">
+                            <TagPill
+                                label="All"
+                                isActive={activeTag === null}
+                                onClick={() => {
+                                    setActiveTag(null);
+                                    setVisible(perPage);
+                                }}
+                            />
+                            {allTags.map((t) => (
+                                <TagPill
+                                    key={t.slug}
+                                    label={t.name}
+                                    color={t.color}
+                                    isActive={activeTag === t.slug}
+                                    onClick={() => {
+                                        setActiveTag(t.slug);
+                                        setVisible(perPage);
+                                    }}
+                                />
+                            ))}
+                        </div>
+                    )}
+                </div>
+
+                {shown.length > 0 ? (
+                    <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+                        {shown.map((p) => (
+                            <PostCardCell key={p.id} post={p} />
+                        ))}
+                    </div>
+                ) : (
+                    <p className="rounded-xl border border-dashed border-border bg-muted/30 py-16 text-center text-sm text-muted-foreground">
+                        No articles match your filters.
+                    </p>
+                )}
+
+                {visible < filtered.length && (
+                    <div className="mt-10 text-center">
+                        <button
+                            type="button"
+                            onClick={() => setVisible((v) => v + perPage)}
+                            className="text-sm font-medium text-primary hover:underline"
+                        >
+                            Load {Math.min(perPage, filtered.length - visible)}{' '}
+                            more
+                        </button>
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+}
+
+function TagPill({
+    label,
+    color,
+    isActive,
+    onClick,
+}: {
+    label: string;
+    color?: string | null;
+    isActive: boolean;
+    onClick: () => void;
+}) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            className={cn(
+                'rounded-full border px-3 py-1 text-xs font-medium transition-colors',
+                isActive
+                    ? 'border-primary bg-primary text-primary-foreground'
+                    : 'border-border bg-card text-muted-foreground hover:border-primary/40 hover:text-foreground',
+            )}
+            style={
+                isActive && color
+                    ? {
+                          backgroundColor: color,
+                          borderColor: color,
+                          color: 'white',
+                      }
+                    : undefined
+            }
+        >
+            {label}
+        </button>
+    );
+}
+
+function PostCardCell({ post }: { post: BlogPostCard }) {
+    return (
+        <PlatformLink href={`/blog/${post.slug}`} className="group">
+            <Card className="flex h-full flex-col overflow-hidden border-border/60 bg-card p-0 transition-colors hover:border-primary/40">
+                <div className="aspect-[16/10] overflow-hidden bg-muted">
+                    <BlurredImage
+                        src={post.cover_image}
+                        alt={post.title}
+                        padding="p-0"
+                        rounded="md"
+                        fit="cover"
+                        whiteWash={0}
+                        className="h-full w-full transition-transform duration-500 group-hover:scale-[1.03]"
+                    />
+                </div>
+                <div className="flex flex-1 flex-col p-5">
+                    {post.tags.length > 0 && (
+                        <div className="flex flex-wrap gap-1.5">
+                            {post.tags.slice(0, 2).map((t) => (
+                                <Badge
+                                    key={t.slug}
+                                    variant="secondary"
+                                    className="text-[10px]"
+                                    style={
+                                        t.color
+                                            ? {
+                                                  backgroundColor: `${t.color}1a`,
+                                                  color: t.color,
+                                              }
+                                            : undefined
+                                    }
+                                >
+                                    {t.name}
+                                </Badge>
+                            ))}
+                        </div>
+                    )}
+                    <h3 className="mt-2 line-clamp-2 text-base font-semibold text-card-foreground group-hover:text-primary">
+                        {post.title}
+                    </h3>
+                    {post.excerpt && (
+                        <p className="mt-2 line-clamp-3 flex-1 text-sm text-muted-foreground">
+                            {post.excerpt}
+                        </p>
+                    )}
+                    <div className="mt-4 flex items-center justify-between text-xs text-muted-foreground">
+                        {post.published_at && (
+                            <span className="inline-flex items-center gap-1">
+                                <Calendar className="size-3" />
+                                <time dateTime={post.published_at}>
+                                    {new Date(
+                                        post.published_at,
+                                    ).toLocaleDateString(undefined, {
+                                        month: 'short',
+                                        day: 'numeric',
+                                        year: 'numeric',
+                                    })}
+                                </time>
+                            </span>
+                        )}
+                        <ArrowRight className="size-3.5 text-primary transition-transform group-hover:translate-x-0.5" />
+                    </div>
+                </div>
+            </Card>
+        </PlatformLink>
+    );
+}