@trackany-device/components 1.0.0

package/src/components/cms/sections/featured-blog-slider-section.tsx

@@ -0,0 +1,256 @@
+import { PlatformLink } from '../../../platform/context';
+import { ArrowRight, Calendar } from 'lucide-react';
+
+import { BlurredImage } from '../blurred-image';
+import { SectionButtons } from '../section-button';
+import type { CmsButton } from '../section-button';
+import { Badge } from '../../ui/badge';
+import { cn } from '../../../lib/utils';
+
+export type FeaturedBlogSliderContent = {
+    eyebrow?: string | null;
+    title?: string | null;
+    subtitle?: string | null;
+    featured_blog_slug?: string | null;
+    list_count?: number | null;
+    buttons?: CmsButton[] | null;
+};
+
+export type BlogPostCard = {
+    id: number;
+    title: string;
+    slug: string;
+    excerpt: string | null;
+    cover_image: string | null;
+    published_at: string | null;
+    author: { name: string } | null;
+    tags: { name: string; slug: string; color: string | null }[];
+};
+
+/**
+ * Featured blog slider — large hero post on the left + vertical
+ * scroll-snap list of recent posts on the right. The "featured" post
+ * is content.featured_blog_slug if set, otherwise the newest published
+ * post; the list contains up to `list_count` newer-first remaining posts.
+ */
+export function FeaturedBlogSliderSection({
+    content,
+    posts,
+    identifier,
+}: {
+    content?: FeaturedBlogSliderContent;
+    posts?: BlogPostCard[];
+    identifier?: string | null;
+}) {
+    const listCount = content?.list_count ?? 5;
+    const pool = posts ?? [];
+
+    if (pool.length === 0) {
+        return null;
+    }
+
+    const explicit = content?.featured_blog_slug
+        ? pool.find((p) => p.slug === content.featured_blog_slug)
+        : null;
+    const featured = explicit ?? pool[0];
+    const list = pool.filter((p) => p.id !== featured.id).slice(0, listCount);
+
+    return (
+        <section
+            id={identifier ?? undefined}
+            className="bg-background py-20 sm:py-24"
+        >
+            <div className="mx-auto max-w-6xl px-6">
+                {(content?.eyebrow || content?.title || content?.subtitle) && (
+                    <header className="mb-10 max-w-2xl">
+                        {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?.subtitle && (
+                            <p className="mt-3 text-base leading-relaxed text-pretty text-muted-foreground sm:text-lg">
+                                {content.subtitle}
+                            </p>
+                        )}
+                    </header>
+                )}
+
+                <div className="grid gap-6 lg:grid-cols-12">
+                    <FeaturedPost post={featured} />
+                    <PostList posts={list} />
+                </div>
+
+                {content?.buttons && content.buttons.length > 0 && (
+                    <div className="mt-10">
+                        <SectionButtons
+                            buttons={content.buttons}
+                            align="left"
+                            size="md"
+                        />
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+}
+
+function FeaturedPost({ post }: { post: BlogPostCard }) {
+    return (
+        <PlatformLink href={`/blog/${post.slug}`} className="group block lg:col-span-7">
+            <article className="flex h-full flex-col overflow-hidden rounded-2xl border border-border/60 bg-card transition-colors hover:border-primary/40">
+                <div className="relative 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.02]"
+                    />
+                </div>
+                <div className="flex flex-1 flex-col p-6">
+                    <TagsRow tags={post.tags} />
+                    <h3 className="mt-2 text-2xl font-semibold tracking-tight text-balance text-card-foreground sm:text-3xl">
+                        {post.title}
+                    </h3>
+                    {post.excerpt && (
+                        <p className="mt-3 line-clamp-3 flex-1 leading-relaxed text-pretty text-muted-foreground">
+                            {post.excerpt}
+                        </p>
+                    )}
+                    <PostMeta post={post} className="mt-5" />
+                </div>
+            </article>
+        </PlatformLink>
+    );
+}
+
+function PostList({ posts }: { posts: BlogPostCard[] }) {
+    if (posts.length === 0) {
+        return null;
+    }
+
+    return (
+        <div
+            className={cn(
+                'lg:col-span-5',
+                // Vertical scroll-snap on tall screens; auto-height otherwise.
+                'lg:max-h-[640px] lg:snap-y lg:snap-mandatory lg:overflow-y-auto',
+                'lg:pr-2 lg:[scrollbar-width:thin]',
+            )}
+        >
+            <ul className="flex flex-col gap-3">
+                {posts.map((p) => (
+                    <li key={p.id} className="lg:snap-start">
+                        <a
+                            href={`/blog/${p.slug}`}
+                            className="group flex items-start gap-4 rounded-xl border border-border/60 bg-card p-4 transition-colors hover:border-primary/40"
+                        >
+                            <div className="size-16 shrink-0 overflow-hidden rounded-md bg-muted">
+                                <BlurredImage
+                                    src={p.cover_image}
+                                    alt=""
+                                    padding="p-0"
+                                    rounded="md"
+                                    fit="cover"
+                                    whiteWash={0}
+                                    className="h-full w-full"
+                                />
+                            </div>
+                            <div className="flex min-w-0 flex-1 flex-col">
+                                <TagsRow tags={p.tags.slice(0, 1)} />
+                                <h4 className="mt-1 line-clamp-2 text-sm font-semibold text-card-foreground group-hover:text-primary">
+                                    {p.title}
+                                </h4>
+                                {p.published_at && (
+                                    <time
+                                        dateTime={p.published_at}
+                                        className="mt-1 text-xs text-muted-foreground"
+                                    >
+                                        {formatDate(p.published_at)}
+                                    </time>
+                                )}
+                            </div>
+                            <ArrowRight className="mt-1 size-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-primary" />
+                        </a>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
+
+function TagsRow({ tags }: { tags: BlogPostCard['tags'] }) {
+    if (!tags || tags.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className="flex flex-wrap gap-1.5">
+            {tags.map((t) => (
+                <Badge
+                    key={t.slug}
+                    variant="secondary"
+                    className="text-[10px] font-medium"
+                    style={
+                        t.color
+                            ? {
+                                  backgroundColor: `${t.color}1a`,
+                                  color: t.color,
+                              }
+                            : undefined
+                    }
+                >
+                    {t.name}
+                </Badge>
+            ))}
+        </div>
+    );
+}
+
+function PostMeta({
+    post,
+    className,
+}: {
+    post: BlogPostCard;
+    className?: string;
+}) {
+    return (
+        <div
+            className={cn(
+                'flex items-center gap-3 text-xs text-muted-foreground',
+                className,
+            )}
+        >
+            {post.author && <span>{post.author.name}</span>}
+            {post.author && post.published_at && <span>·</span>}
+            {post.published_at && (
+                <span className="inline-flex items-center gap-1">
+                    <Calendar className="size-3" />
+                    <time dateTime={post.published_at}>
+                        {formatDate(post.published_at)}
+                    </time>
+                </span>
+            )}
+        </div>
+    );
+}
+
+function formatDate(iso: string): string {
+    try {
+        return new Date(iso).toLocaleDateString(undefined, {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+        });
+    } catch {
+        return iso;
+    }
+}

package/src/components/cms/sections/featured-products-grid-section.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+
+import { SectionButtons } from '../section-button';
+import type { CmsButton } from '../section-button';
+import { ProductCard } from '../../products/product-card';
+import type { ProductCardData } from '../../products/product-card';
+import { Button } from '../../ui/button';
+import { cn } from '../../../lib/utils';
+
+export type FeaturedProductsGridContent = {
+    eyebrow?: string | null;
+    title?: string | null;
+    subtitle?: string | null;
+    columns?: 2 | 3 | 4 | null;
+    max_items?: number | null;
+    show_buttons_on_cards?: boolean | null;
+    card_button_label?: string | null;
+    buttons?: CmsButton[] | null;
+};
+
+export type ProductCard = ProductCardData;
+
+/**
+ * Featured products carousel. Pulls from `featured_products` shared prop
+ * (DeviceType::featured()). Renders a horizontal scroll-snap row with
+ * arrow controls — same `ProductCard` component used everywhere else,
+ * so cards stay visually consistent across surfaces.
+ */
+export function FeaturedProductsGridSection({
+    content,
+    products,
+    identifier,
+}: {
+    content?: FeaturedProductsGridContent;
+    products?: ProductCardData[];
+    identifier?: string | null;
+}) {
+    const max = content?.max_items ?? 8;
+    const items = (products ?? []).slice(0, max > 0 ? max : undefined);
+
+    const scrollerRef = useRef<HTMLDivElement>(null);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+
+    useEffect(() => {
+        const el = scrollerRef.current;
+
+        if (!el) {
+            return;
+        }
+
+        const update = () => {
+            setCanScrollLeft(el.scrollLeft > 4);
+            setCanScrollRight(
+                el.scrollLeft + el.clientWidth < el.scrollWidth - 4,
+            );
+        };
+        update();
+        el.addEventListener('scroll', update, { passive: true });
+        window.addEventListener('resize', update);
+
+        return () => {
+            el.removeEventListener('scroll', update);
+            window.removeEventListener('resize', update);
+        };
+    }, [items.length]);
+
+    function scrollBy(direction: 1 | -1) {
+        const el = scrollerRef.current;
+
+        if (!el) {
+            return;
+        }
+
+        const card = el.querySelector<HTMLElement>('[data-product-card]');
+        const step = card ? card.offsetWidth + 20 : el.clientWidth * 0.8;
+        el.scrollBy({ left: direction * step, behavior: 'smooth' });
+    }
+
+    if (items.length === 0) {
+        return null;
+    }
+
+    return (
+        <section
+            id={identifier ?? undefined}
+            className="bg-muted/30 py-20 sm:py-24"
+        >
+            <div className="mx-auto max-w-7xl px-6">
+                {(content?.eyebrow || content?.title || content?.subtitle) && (
+                    <header className="mx-auto mb-10 max-w-2xl text-center">
+                        {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?.subtitle && (
+                            <p className="mt-3 text-base leading-relaxed text-pretty text-muted-foreground sm:text-lg">
+                                {content.subtitle}
+                            </p>
+                        )}
+                    </header>
+                )}
+
+                <div className="relative">
+                    {/* Arrow controls */}
+                    <Button
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        aria-label="Previous"
+                        onClick={() => scrollBy(-1)}
+                        disabled={!canScrollLeft}
+                        className={cn(
+                            'absolute top-1/2 -left-2 z-10 hidden -translate-y-1/2 rounded-full bg-background shadow-md sm:flex',
+                            !canScrollLeft && 'opacity-0',
+                        )}
+                    >
+                        <ChevronLeft className="size-5" />
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        aria-label="Next"
+                        onClick={() => scrollBy(1)}
+                        disabled={!canScrollRight}
+                        className={cn(
+                            'absolute top-1/2 -right-2 z-10 hidden -translate-y-1/2 rounded-full bg-background shadow-md sm:flex',
+                            !canScrollRight && 'opacity-0',
+                        )}
+                    >
+                        <ChevronRight className="size-5" />
+                    </Button>
+
+                    {/* Scroll-snap carousel */}
+                    <div
+                        ref={scrollerRef}
+                        className="flex snap-x snap-mandatory gap-5 overflow-x-auto pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+                    >
+                        {items.map((p) => (
+                            <div
+                                key={p.id}
+                                data-product-card
+                                className="w-[260px] shrink-0 snap-start sm:w-[280px] lg:w-[300px]"
+                            >
+                                <ProductCard product={p} />
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+                {content?.buttons && content.buttons.length > 0 && (
+                    <div className="mt-12">
+                        <SectionButtons
+                            buttons={content.buttons}
+                            align="center"
+                            size="lg"
+                        />
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+}

package/src/components/cms/sections/featured-solutions-grid-section.tsx

@@ -0,0 +1,183 @@
+import { PlatformLink } from '../../../platform/context';
+import { ArrowRight } from 'lucide-react';
+
+import { SectionButtons } from '../section-button';
+import type { CmsButton } from '../section-button';
+import { Card } from '../../ui/card';
+import { Icon } from '../../ui/icon';
+import { lucideIcon } from '../../../lib/lucide-icon-map';
+import { cn } from '../../../lib/utils';
+
+export type FeaturedSolutionsGridContent = {
+    eyebrow?: string | null;
+    title?: string | null;
+    subtitle?: string | null;
+    columns?: 2 | 3 | 4 | null;
+    max_items?: number | null;
+    show_buttons_on_cards?: boolean | null;
+    card_button_label?: string | null;
+    buttons?: CmsButton[] | null;
+};
+
+export type SolutionCard = {
+    id: number;
+    title: string;
+    description: string | null;
+    icon_name: string | null;
+    gradient_from?: string | null;
+    gradient_to?: string | null;
+    cta_label?: string | null;
+    cta_href?: string | null;
+    slug?: string;
+};
+
+const COLS: Record<number, string> = {
+    2: 'sm:grid-cols-2',
+    3: 'sm:grid-cols-2 lg:grid-cols-3',
+    4: 'sm:grid-cols-2 lg:grid-cols-4',
+};
+
+/**
+ * Featured solutions grid. Pulls from `solutions` shared prop
+ * (Solution::featured()). Each card renders icon + title + description
+ * with an optional per-card CTA, plus an optional row of section-level
+ * buttons below the grid.
+ */
+export function FeaturedSolutionsGridSection({
+    content,
+    solutions,
+    identifier,
+}: {
+    content?: FeaturedSolutionsGridContent;
+    solutions?: SolutionCard[];
+    identifier?: string | null;
+}) {
+    const columns = content?.columns ?? 3;
+    const max = content?.max_items ?? 0;
+    const showCta = content?.show_buttons_on_cards ?? true;
+    const ctaLabel = content?.card_button_label ?? 'Learn more';
+
+    const items = (solutions ?? []).slice(0, max > 0 ? max : undefined);
+
+    if (items.length === 0) {
+        return null;
+    }
+
+    return (
+        <section
+            id={identifier ?? undefined}
+            className="bg-background py-20 sm:py-24"
+        >
+            <div className="mx-auto max-w-6xl px-6">
+                {(content?.eyebrow || content?.title || content?.subtitle) && (
+                    <header className="mx-auto mb-12 max-w-2xl text-center">
+                        {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?.subtitle && (
+                            <p className="mt-3 text-base leading-relaxed text-pretty text-muted-foreground sm:text-lg">
+                                {content.subtitle}
+                            </p>
+                        )}
+                    </header>
+                )}
+
+                <div
+                    className={cn(
+                        'grid grid-cols-1 gap-4',
+                        COLS[columns] ?? COLS[3],
+                    )}
+                >
+                    {items.map((s) => (
+                        <SolutionCardCell
+                            key={s.id}
+                            solution={s}
+                            showCta={showCta}
+                            ctaLabel={ctaLabel}
+                        />
+                    ))}
+                </div>
+
+                {content?.buttons && content.buttons.length > 0 && (
+                    <div className="mt-12">
+                        <SectionButtons
+                            buttons={content.buttons}
+                            align="center"
+                            size="lg"
+                        />
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+}
+
+function SolutionCardCell({
+    solution,
+    showCta,
+    ctaLabel,
+}: {
+    solution: SolutionCard;
+    showCta: boolean;
+    ctaLabel: string;
+}) {
+    const Icon$ = lucideIcon(solution.icon_name);
+    const href =
+        solution.cta_href ??
+        (solution.slug ? `/solutions/${solution.slug}` : null);
+
+    const card = (
+        <Card className="group flex h-full flex-col border-border/60 bg-card p-6 transition-colors hover:border-primary/40">
+            {Icon$ && (
+                <div
+                    className={cn(
+                        'mb-4 inline-flex size-12 items-center justify-center rounded-xl text-white',
+                        // Use the brand gradient if both stops set; otherwise default to primary.
+                        solution.gradient_from && solution.gradient_to
+                            ? 'bg-gradient-to-br'
+                            : 'bg-primary',
+                    )}
+                    style={
+                        solution.gradient_from && solution.gradient_to
+                            ? {
+                                  backgroundImage: `linear-gradient(to bottom right, var(--color-${solution.gradient_from}, #2563eb), var(--color-${solution.gradient_to}, #1d4ed8))`,
+                              }
+                            : undefined
+                    }
+                >
+                    <Icon iconNode={Icon$} className="size-5" />
+                </div>
+            )}
+
+            <h3 className="text-lg font-semibold text-card-foreground">
+                {solution.title}
+            </h3>
+
+            {solution.description && (
+                <p className="mt-2 line-clamp-3 flex-1 text-sm leading-relaxed text-muted-foreground">
+                    {solution.description}
+                </p>
+            )}
+
+            {showCta && href && (
+                <div className="mt-4 inline-flex items-center gap-1 text-sm font-medium text-primary group-hover:gap-2">
+                    {solution.cta_label ?? ctaLabel}
+                    <ArrowRight className="size-3.5 transition-transform group-hover:translate-x-0.5" />
+                </div>
+            )}
+        </Card>
+    );
+
+    if (href) {
+        return <PlatformLink href={href}>{card}</PlatformLink>;
+    }
+
+    return card;
+}