@mohasinac/appkit 2.1.3 → 2.3.0

package/src/features/homepage/components/SectionCarousel.tsx

@@ -1,284 +0,0 @@
-"use client";
-
-import React from "react";
-import { THEME_CONSTANTS } from "../../../tokens";
-import {
-  Button,
-  Heading,
-  HorizontalScroller,
-  Section,
-  Span,
-  Text,
-  TextLink,
-  type PerViewConfig,
-} from "../../../ui";
-import { MediaImage } from "../../media/MediaImage";
-
-// ─── Props ───────────────────────────────────────────────────────────────────
-
-export interface SectionCarouselProps<T = unknown> {
-  /** Section heading */
-  title: string;
-
-  /** Optional subtitle below the heading */
-  description?: string;
-
-  /**
-   * Heading visual variant.
-   * - `"default"` — standard themed text
-   * - `"gradient"` — primary→cobalt gradient clip text
-   * - `"editorial"` — pill + font-display H2 + ornament
-   */
-  headingVariant?: "default" | "gradient" | "editorial";
-
-  /**
-   * Pill label shown above the heading when `headingVariant="editorial"`.
-   * Required for editorial variant; ignored otherwise.
-   */
-  pillLabel?: string;
-
-  /**
-   * URL of an image to use as the section background.
-   * A dark semi-transparent overlay is applied so text remains readable.
-   */
-  backgroundImage?: string;
-
-  /** Route for the "View More" button. Omit to hide the button. */
-  viewMoreHref?: string;
-
-  /**
-   * Label for the "View More" button.
-   * Defaults to "View all →" when omitted.
-   */
-  viewMoreLabel?: string;
-
-  /** Items to render in the carousel. */
-  items: T[];
-
-  /** Renders a single item. Receives (item, index). */
-  renderItem: (item: T, index: number) => React.ReactNode;
-
-  /** Responsive items-per-view breakpoint config. Default: { base: 1, sm: 2, md: 3 } */
-  perView?: PerViewConfig;
-
-  /** Gap between cards in px. Default: 16 */
-  gap?: number;
-
-  /** Enable circular auto-scroll. Default: false */
-  autoScroll?: boolean;
-
-  /** Interval between auto-scroll steps in ms. Default: 3500 */
-  autoScrollInterval?: number;
-
-  /** Key extractor for the HorizontalScroller. */
-  keyExtractor?: (item: T, index: number) => string;
-
-  /**
-   * Number of rows (for 2-row grid mode).
-   * Auto-scroll is disabled in grid mode.
-   * Default: 1
-   */
-  rows?: number;
-
-  /** Additional classes on the outer `<Section>`. */
-  className?: string;
-
-  /** Show a loading skeleton instead of items. */
-  isLoading?: boolean;
-
-  /** Number of skeleton cards to show. Default: 4 */
-  skeletonCount?: number;
-
-  /**
-   * Whether the heading and description text should be light-coloured.
-   * Defaults to `true` when `backgroundImage` is provided, `false` otherwise.
-   */
-  lightText?: boolean;
-
-  /**
-   * When `true`, adds a negative right margin to the scroller wrapper so the
-   * last visible item peeks at the edge.
-   * Default: false
-   */
-  showPeek?: boolean;
-
-  /**
-   * Minimum item width in px.
-   * Default: 220
-   */
-  minItemWidth?: number;
-}
-
-// ─── Skeleton ────────────────────────────────────────────────────────────────
-
-function CarouselSkeleton({ count }: { count: number }) {
-  const { skeleton } = THEME_CONSTANTS;
-  return (
-    <div className="flex gap-4 overflow-hidden px-4">
-      {Array.from({ length: count }).map((_, i) => (
-        <div
-          key={i}
-          className="flex-none min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] h-[clamp(180px,26vh,260px)] space-y-2"
-        >
-          <div className={`aspect-square rounded-xl ${skeleton.image}`} />
-          <div className={`${skeleton.text} w-3/4`} />
-          <div className={`${skeleton.text} w-1/2`} />
-        </div>
-      ))}
-    </div>
-  );
-}
-
-// ─── Component ───────────────────────────────────────────────────────────────
-
-export function SectionCarousel<T = unknown>({
-  title,
-  description,
-  headingVariant = "default",
-  pillLabel,
-  backgroundImage,
-  viewMoreHref,
-  viewMoreLabel = "View all →",
-  items,
-  renderItem,
-  perView = { base: 1, sm: 2, md: 3 },
-  gap = 16,
-  autoScroll = false,
-  autoScrollInterval = 3500,
-  keyExtractor,
-  rows = 1,
-  className = "",
-  isLoading = false,
-  skeletonCount = 4,
-  lightText,
-  showPeek = false,
-  minItemWidth = 220,
-}: SectionCarouselProps<T>) {
-  const hasBg = Boolean(backgroundImage);
-  const useLightText = lightText ?? hasBg;
-
-  const { themed, flex } = THEME_CONSTANTS;
-
-  const headingClass = useLightText
-    ? "text-white"
-    : headingVariant === "gradient"
-      ? "bg-gradient-to-r from-primary to-cobalt bg-clip-text text-transparent"
-      : themed.textPrimary;
-
-  const descVariant = useLightText ? "text-white/80" : themed.textSecondary;
-
-  const pillClass =
-    "inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm";
-
-  return (
-    <Section
-      className={[
-        "relative overflow-hidden w-full",
-        hasBg ? "" : themed.bgSecondary,
-        "p-8",
-        className,
-      ]
-        .filter(Boolean)
-        .join(" ")}
-    >
-      {/* Background image + overlay */}
-      {hasBg && backgroundImage && (
-        <>
-          <div className="absolute inset-0 overflow-hidden">
-            <MediaImage src={backgroundImage} alt="" size="hero" />
-          </div>
-          <div className="absolute inset-0 bg-black/55" />
-        </>
-      )}
-
-      {/* Content — sits above the background */}
-      <div className="relative z-10 w-full max-w-7xl mx-auto">
-        {/* Header */}
-        <div className="text-center mb-6">
-          {/* Editorial pill */}
-          {headingVariant === "editorial" && pillLabel && (
-            <div className="mb-4">
-              <Span className={pillClass}>
-                <Span
-                  className="w-1.5 h-1.5 rounded-full bg-primary-500 inline-block"
-                  aria-hidden="true"
-                />
-                {pillLabel}
-                <Span
-                  className="w-1.5 h-1.5 rounded-full bg-primary-500 inline-block"
-                  aria-hidden="true"
-                />
-              </Span>
-            </div>
-          )}
-
-          {/* Heading */}
-          <Heading
-            level={2}
-            variant="none"
-            className={[
-              "text-3xl md:text-4xl font-bold mb-2",
-              headingVariant === "editorial" ? "font-display text-4xl" : "",
-              headingClass,
-            ]
-              .filter(Boolean)
-              .join(" ")}
-          >
-            {title}
-          </Heading>
-
-          {/* Editorial ornament */}
-          {headingVariant === "editorial" && (
-            <div
-              className={`${flex.center} gap-2 mt-1 text-zinc-400 dark:text-zinc-500 text-xs select-none`}
-              aria-hidden="true"
-            >
-              <Span className="h-px w-6 bg-current" />
-              <Span className="text-xs">✶</Span>
-              <Span className="h-px w-6 bg-current" />
-            </div>
-          )}
-
-          {description && (
-            <Text className={`text-base ${descVariant} mt-2`}>
-              {description}
-            </Text>
-          )}
-        </div>
-
-        {/* Carousel or skeleton */}
-        {isLoading ? (
-          <CarouselSkeleton count={skeletonCount} />
-        ) : (
-          <HorizontalScroller
-            items={items}
-            renderItem={renderItem}
-            perView={perView}
-            gap={gap}
-            autoScroll={autoScroll}
-            autoScrollInterval={autoScrollInterval}
-            keyExtractor={keyExtractor}
-            rows={rows}
-            minItemWidth={minItemWidth}
-          />
-        )}
-
-        {/* View More button */}
-        {viewMoreHref && !isLoading && (
-          <div className="mt-6 text-center">
-            <TextLink
-              href={viewMoreHref}
-              className={`inline-flex items-center gap-2 px-6 py-2.5 rounded-full text-sm font-medium transition-colors ${
-                useLightText
-                  ? "bg-white/20 text-white hover:bg-white/30 backdrop-blur-sm"
-                  : "bg-primary/10 text-primary hover:bg-primary/20 dark:bg-primary/15 dark:text-primary-400"
-              }`}
-            >
-              {viewMoreLabel}
-            </TextLink>
-          </div>
-        )}
-      </div>
-    </Section>
-  );
-}

package/src/features/homepage/components/SecurityHighlightsSection.tsx

@@ -1,149 +0,0 @@
-"use client";
-
-import React, { useEffect, useRef, useState } from "react";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Grid, Heading, Section, Span, Text, TextLink } from "../../../ui";
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-export interface SecurityHighlightItem {
-  key: string;
-  title: string;
-  description: string;
-  renderIcon?: (props: { className?: string }) => React.ReactNode;
-  colorClass?: string;
-  iconColorClass?: string;
-}
-
-export interface SecurityHighlightsSectionProps {
-  title: string;
-  subtitle?: string;
-  pillLabel?: string;
-  items: SecurityHighlightItem[];
-  learnMoreHref?: string;
-  learnMoreLabel?: string;
-  className?: string;
-}
-
-// ─── Single card ─────────────────────────────────────────────────────────────
-
-function SecurityCard({
-  item,
-  visible,
-  delay,
-}: {
-  item: SecurityHighlightItem;
-  visible: boolean;
-  delay: number;
-}) {
-  const colorClass =
-    item.colorClass ??
-    "bg-primary/5 border-primary/20 dark:bg-primary/10 dark:border-primary/30";
-  const iconColorClass = item.iconColorClass ?? "text-primary";
-
-  return (
-    <div
-      className={[
-        "rounded-xl border p-5 transition-all duration-500",
-        colorClass,
-        visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4",
-      ].join(" ")}
-      style={{ transitionDelay: `${delay}ms` }}
-    >
-      {item.renderIcon && (
-        <div className="w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 flex items-center justify-center mb-3">
-          <span className={iconColorClass} aria-hidden="true">
-            {item.renderIcon({ className: "w-6 h-6" })}
-          </span>
-        </div>
-      )}
-      <Text className="font-semibold mb-1">{item.title}</Text>
-      <Text variant="secondary" className="text-sm leading-relaxed">
-        {item.description}
-      </Text>
-    </div>
-  );
-}
-
-// ─── Section ─────────────────────────────────────────────────────────────────
-
-export function SecurityHighlightsSection({
-  title,
-  subtitle,
-  pillLabel,
-  items,
-  learnMoreHref,
-  learnMoreLabel = "Learn more →",
-  className = "",
-}: SecurityHighlightsSectionProps) {
-  const { themed } = THEME_CONSTANTS;
-  const sectionRef = useRef<HTMLElement>(null);
-  const [visible, setVisible] = useState(false);
-
-  useEffect(() => {
-    const el = sectionRef.current;
-    if (!el) return;
-    const observer = new IntersectionObserver(
-      ([entry], obs) => {
-        if (entry.isIntersecting) {
-          setVisible(true);
-          obs.disconnect();
-        }
-      },
-      { threshold: 0.15 },
-    );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <Section
-      ref={sectionRef}
-      className={`py-14 px-4 ${themed.bgPrimary} ${className}`}
-    >
-      <div className="max-w-6xl mx-auto">
-        {/* Header */}
-        <div className="text-center mb-10">
-          {pillLabel && (
-            <Span className="inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm">
-              {pillLabel}
-            </Span>
-          )}
-          <Heading
-            level={2}
-            className={`mt-4 text-3xl md:text-4xl font-bold ${themed.textPrimary}`}
-          >
-            {title}
-          </Heading>
-          {subtitle && (
-            <Text variant="secondary" className="mt-2 max-w-xl mx-auto">
-              {subtitle}
-            </Text>
-          )}
-        </div>
-
-        {/* Cards grid */}
-        <Grid
-          gap="none"
-          className="grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5"
-        >
-          {items.map((item, index) => (
-            <SecurityCard
-              key={item.key}
-              item={item}
-              visible={visible}
-              delay={index * 100}
-            />
-          ))}
-        </Grid>
-
-        {/* CTA link */}
-        {learnMoreHref && (
-          <div className="text-center mt-8">
-            <TextLink href={learnMoreHref}>{learnMoreLabel}</TextLink>
-          </div>
-        )}
-      </div>
-    </Section>
-  );
-}

package/src/features/homepage/components/SiteFeaturesSection.tsx

@@ -1,86 +0,0 @@
-"use client";
-
-import React from "react";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Grid, Heading, Section, Text } from "../../../ui";
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-export interface SiteFeatureItem {
-  id: string;
-  icon: string;
-  title: string;
-  description: string;
-}
-
-export interface SiteFeaturesSectionProps {
-  title: string;
-  subtitle?: string;
-  features: SiteFeatureItem[];
-  className?: string;
-}
-
-// ─── Section ─────────────────────────────────────────────────────────────────
-
-export function SiteFeaturesSection({
-  title,
-  subtitle,
-  features,
-  className = "",
-}: SiteFeaturesSectionProps) {
-  const { themed } = THEME_CONSTANTS;
-
-  return (
-    <Section className={`p-8 ${themed.bgSecondary} ${className}`}>
-      <div className="w-full">
-        {/* Section Header */}
-        <div className="text-center mb-12">
-          <Heading
-            level={2}
-            className={`text-3xl md:text-4xl font-bold ${themed.textPrimary} mb-3`}
-          >
-            {title}
-          </Heading>
-          {subtitle && (
-            <Text
-              className={`text-base ${themed.textSecondary} max-w-2xl mx-auto`}
-            >
-              {subtitle}
-            </Text>
-          )}
-        </div>
-
-        {/* Features Grid */}
-        <Grid
-          gap="lg"
-          className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:gap-8"
-        >
-          {features.map((feature) => (
-            <div
-              key={feature.id}
-              className="p-6 text-center hover:shadow-lg transition-all group rounded-2xl bg-white dark:bg-slate-900 border border-zinc-100 dark:border-slate-800"
-            >
-              {/* Icon */}
-              <div className="text-6xl mb-4 group-hover:scale-110 transition-transform">
-                {feature.icon}
-              </div>
-
-              {/* Title */}
-              <Heading
-                level={3}
-                className={`text-base font-bold ${themed.textPrimary} mb-2`}
-              >
-                {feature.title}
-              </Heading>
-
-              {/* Description */}
-              <Text className={`text-base ${themed.textSecondary}`}>
-                {feature.description}
-              </Text>
-            </div>
-          ))}
-        </Grid>
-      </div>
-    </Section>
-  );
-}

package/src/features/homepage/components/StatsCounterSection.tsx

@@ -1,118 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import type { ReactNode } from "react";
-import { Div, Grid, Heading, Section, Text } from "../../../ui";
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-export interface StatItem {
-  key: string;
-  value: string;
-  label: string;
-  renderIcon?: (props: { className?: string }) => ReactNode;
-}
-
-export interface StatsCounterSectionProps {
-  stats: StatItem[];
-  className?: string;
-}
-
-// ─── Smngle stat mtem ─────────────────────────────────────────────────────────
-
-function StatCard({
-  stat,
-  visible,
-  delay,
-  isLast,
-}: {
-  stat: StatItem;
-  visible: boolean;
-  delay: number;
-  isLast: boolean;
-}) {
-  return (
-    <Div
-      className={[
-        "relative flex flex-col items-center px-6 py-8 text-center",
-        "transition-all duration-700",
-        visible ? "translate-y-0 opacity-100" : "translate-y-6 opacity-0",
-        !isLast ? "border-cobalt-200 md:border-r dark:border-white/10" : "",
-      ].join(" ")}
-      style={{ transitionDelay: `${delay}ms` }}
-    >
-      {stat.renderIcon && (
-        <Div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-cobalt-100 backdrop-blur dark:bg-white/10">
-          {stat.renderIcon({ className: "w-7 h-7" })}
-        </Div>
-      )}
-
-      <Heading
-        level={2}
-        variant="none"
-        className="mb-1 font-display text-4xl text-zinc-900 dark:text-white md:text-5xl"
-      >
-        {stat.value}
-      </Heading>
-
-      <Text
-        variant="none"
-        className="text-sm uppercase tracking-widest text-zinc-500 dark:text-white/60"
-      >
-        {stat.label}
-      </Text>
-    </Div>
-  );
-}
-
-// ─── Sectmon ─────────────────────────────────────────────────────────────────
-
-export function StatsCounterSection({
-  stats,
-  className = "",
-}: StatsCounterSectionProps) {
-  const sectionRef = useRef<HTMLElement>(null);
-  const [visible, setVisible] = useState(false);
-
-  useEffect(() => {
-    const el = sectionRef.current;
-    if (!el) return;
-
-    const observer = new IntersectionObserver(
-      ([entry], obs) => {
-        if (entry.isIntersecting) {
-          setVisible(true);
-          obs.disconnect();
-        }
-      },
-      { threshold: 0.2 },
-    );
-
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <Section
-      ref={sectionRef}
-      className={`bg-gradient-to-br from-cobalt-50 via-zinc-50 to-cobalt-50 px-4 py-12 dark:from-cobalt-900 dark:via-slate-900 dark:to-cobalt-950 ${className}`}
-    >
-      <Div className="mx-auto max-w-5xl">
-        <Grid
-          gap="none"
-          className="grid-cols-2 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4"
-        >
-          {stats.map((stat, i) => (
-            <StatCard
-              key={stat.key}
-              stat={stat}
-              visible={visible}
-              delay={i * 120}
-              isLast={i === stats.length - 1}
-            />
-          ))}
-        </Grid>
-      </Div>
-    </Section>
-  );
-}