@mohasinac/appkit 2.1.3 → 2.3.0

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

@@ -1,96 +0,0 @@
-import { Div, Heading, Section, StarRating, Text } from "../../../ui";
-import type { Testimonial } from "../types";
-
-export interface TestimonialsCarouselProps {
-  testimonials: Testimonial[];
-  /** Eyebrow label. Default: "COLLECTOR REVIEWS". */
-  eyebrow?: string;
-  /** Section heading. Default: "WHAT OUR COLLECTORS SAY". */
-  heading?: string;
-}
-
-export function TestimonialsCarousel({
-  testimonials,
-  eyebrow = "COLLECTOR REVIEWS",
-  heading = "WHAT OUR COLLECTORS SAY",
-}: TestimonialsCarouselProps) {
-  if (testimonials.length === 0) return null;
-
-  return (
-    <Section
-      style={{
-        background: "var(--section-bg)",
-        borderTop: "var(--section-border)",
-        borderBottom: "var(--section-border)",
-        minHeight: "calc(100svh - var(--header-height, 4rem))",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        paddingBlock: "clamp(3rem, 6vh, 5rem)",
-      }}
-    >
-      <Div
-        className="mx-auto w-full max-w-7xl px-6 sm:px-8 flex flex-col"
-        style={{ minHeight: 0 }}
-      >
-        {/* Heading */}
-        <Div className="mb-6 text-center" style={{ flexShrink: 0 }}>
-          <Text
-            className="mb-1 text-xs font-black uppercase tracking-widest"
-            style={{ color: "var(--color-red)", letterSpacing: "0.18em" }}
-          >
-            {eyebrow}
-          </Text>
-          <Heading
-            level={2}
-            style={{
-              fontFamily: "var(--font-bangers, Bangers, cursive)",
-              fontSize: "clamp(1.8rem, 4vw, 2.8rem)",
-              letterSpacing: "0.08em",
-              color: "var(--section-title-color)",
-              lineHeight: 1,
-            }}
-          >
-            {heading}
-          </Heading>
-        </Div>
-
-        {/* 2-row masonry grid — wraps into 2 rows, scrolls horizontally on overflow */}
-        <Div
-          className="flex flex-col flex-wrap gap-4 overflow-x-auto scrollbar-none"
-          style={{ maxHeight: "50svh", alignContent: "flex-start" }}
-        >
-          {testimonials.map((t) => (
-            <Div
-              key={t.id}
-              className="flex shrink-0 flex-col gap-3 p-5"
-              style={{
-                width: "clamp(260px, 28vw, 360px)",
-                background: "var(--card-bg)",
-                border: "var(--card-border)",
-                boxShadow: "var(--card-shadow)",
-              }}
-            >
-              <StarRating value={t.rating} readOnly size="sm" />
-              <Text
-                className="flex-1 text-sm leading-relaxed"
-                style={{ color: "var(--text-secondary)" }}
-              >
-                &ldquo;{t.text}&rdquo;
-              </Text>
-              <Text
-                className="text-xs font-black uppercase"
-                style={{
-                  color: "var(--color-yellow)",
-                  letterSpacing: "0.06em",
-                }}
-              >
-                — {t.name}
-              </Text>
-            </Div>
-          ))}
-        </Div>
-      </Div>
-    </Section>
-  );
-}

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

@@ -1,155 +0,0 @@
-import React from "react";
-import { Div, Section, Text } from "../../../ui";
-import type { TrustBadge, TrustBadgeIconKey } from "../types";
-
-const BADGE_ICONS: Record<TrustBadgeIconKey, React.ReactNode> = {
-  shipping: (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="h-7 w-7"
-      aria-hidden="true"
-    >
-      <path d="M5 12H19" />
-      <path d="M15 7l5 5-5 5" />
-      <path d="M1 17V7a4 4 0 0 1 4-4h10" />
-      <path d="M22 17a4 4 0 0 1-4 4H5" />
-    </svg>
-  ),
-  support: (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="h-7 w-7"
-      aria-hidden="true"
-    >
-      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-    </svg>
-  ),
-  rewards: (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="h-7 w-7"
-      aria-hidden="true"
-    >
-      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
-    </svg>
-  ),
-  secure: (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="h-7 w-7"
-      aria-hidden="true"
-    >
-      <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
-      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-    </svg>
-  ),
-};
-
-const FALLBACK_BADGES: TrustBadge[] = [
-  {
-    id: "shipping",
-    title: "Free Shipping",
-    sub: "On qualifying orders",
-    iconKey: "shipping",
-    sortOrder: 1,
-    active: true,
-  },
-  {
-    id: "support",
-    title: "Expert Support",
-    sub: "Mon–Sat, 10 AM – 7 PM",
-    iconKey: "support",
-    sortOrder: 2,
-    active: true,
-  },
-  {
-    id: "rewards",
-    title: "Loyalty Rewards",
-    sub: "Earn points on every order",
-    iconKey: "rewards",
-    sortOrder: 3,
-    active: true,
-  },
-  {
-    id: "secure",
-    title: "Secure Payments",
-    sub: "UPI · Cards · EMI available",
-    iconKey: "secure",
-    sortOrder: 4,
-    active: true,
-  },
-];
-
-export interface TrustBadgesProps {
-  badges?: TrustBadge[];
-}
-
-export function TrustBadges({ badges }: TrustBadgesProps) {
-  const items = badges && badges.length > 0 ? badges : FALLBACK_BADGES;
-
-  return (
-    <Section
-      style={{
-        background: "var(--section-bg)",
-        borderTop: "var(--section-border)",
-        borderBottom: "var(--section-border)",
-      }}
-    >
-      <Div className="mx-auto max-w-7xl px-4 py-6 sm:py-10">
-        <Div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
-          {items.map((badge) => (
-            <Div
-              key={badge.id}
-              className="flex flex-col items-center gap-2 text-center sm:flex-row sm:items-center sm:text-left sm:gap-4"
-            >
-              <Div
-                className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full"
-                style={{
-                  background: "rgba(240,196,23,0.12)",
-                  color: "var(--color-red)",
-                  border: "2px solid var(--border-ink)",
-                }}
-              >
-                {BADGE_ICONS[badge.iconKey]}
-              </Div>
-              <Div>
-                <Text
-                  className="text-sm font-black uppercase tracking-wide"
-                  style={{ color: "var(--section-title-color)" }}
-                >
-                  {badge.title}
-                </Text>
-                <Text
-                  className="text-xs font-medium"
-                  style={{ color: "var(--color-muted)" }}
-                >
-                  {badge.sub}
-                </Text>
-              </Div>
-            </Div>
-          ))}
-        </Div>
-      </Div>
-    </Section>
-  );
-}

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

@@ -1,168 +0,0 @@
-"use client";
-
-import React, { useEffect, useRef, useState } from "react";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Grid, Heading, Section, Span, Text } from "../../../ui";
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-export interface TrustFeatureItem {
-  iconName: string;
-  title: string;
-  description: string;
-  renderIcon?: (props: { className?: string }) => React.ReactNode;
-}
-
-export interface TrustFeaturesSectionProps {
-  items: TrustFeatureItem[];
-  title?: string;
-  variant?: "cards" | "strip";
-  className?: string;
-}
-
-// ─── Single cards-variant card ───────────────────────────────────────────────
-
-function TrustFeatureCard({
-  item,
-  visible,
-  delay,
-}: {
-  item: TrustFeatureItem;
-  visible: boolean;
-  delay: number;
-}) {
-  return (
-    <div
-      className={[
-        "flex flex-col items-center text-center p-4",
-        "transition-all duration-500",
-        visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4",
-      ].join(" ")}
-      style={{ transitionDelay: `${delay}ms` }}
-    >
-      {/* Icon box */}
-      <div className="from-primary-500/10 to-cobalt-500/10 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br flex-shrink-0">
-        {item.renderIcon ? (
-          item.renderIcon({ className: "w-7 h-7" })
-        ) : (
-          <Span
-            className="text-primary-600 dark:text-primary-400 text-2xl"
-            aria-hidden="true"
-          >
-            ✓
-          </Span>
-        )}
-      </div>
-
-      <Heading
-        level={3}
-        className="mt-3 mb-1 text-sm font-semibold tracking-wide uppercase text-zinc-800 dark:text-zinc-100"
-      >
-        {item.title}
-      </Heading>
-      <Text className="text-xs leading-relaxed text-zinc-500 dark:text-zinc-400">
-        {item.description}
-      </Text>
-    </div>
-  );
-}
-
-// ─── Single strip-variant item ───────────────────────────────────────────────
-
-function TrustStripItem({ item }: { item: TrustFeatureItem }) {
-  return (
-    <div className="inline-flex flex-shrink-0 items-center gap-2 px-6">
-      {item.renderIcon ? (
-        item.renderIcon({ className: "w-5 h-5" })
-      ) : (
-        <Span
-          className="text-primary-600 dark:text-primary-400 text-lg"
-          aria-hidden="true"
-        >
-          ✓
-        </Span>
-      )}
-      <Text className="text-sm font-medium text-zinc-700 dark:text-zinc-300 whitespace-nowrap">
-        {item.title}
-      </Text>
-    </div>
-  );
-}
-
-// ─── Section ─────────────────────────────────────────────────────────────────
-
-export function TrustFeaturesSection({
-  items,
-  title,
-  variant = "cards",
-  className = "",
-}: TrustFeaturesSectionProps) {
-  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();
-  }, []);
-
-  if (variant === "strip") {
-    const doubled = [...items, ...items];
-    return (
-      <Section
-        ref={sectionRef}
-        className={`py-4 overflow-hidden border-y border-zinc-100 dark:border-slate-800 ${className}`}
-      >
-        <div className="flex animate-marquee">
-          {doubled.map((item, i) => (
-            <TrustStripItem key={`${item.iconName}-${i}`} item={item} />
-          ))}
-        </div>
-      </Section>
-    );
-  }
-
-  return (
-    <Section
-      ref={sectionRef}
-      className={`py-10 px-4 ${themed.bgSecondary} ${className}`}
-    >
-      <div className="max-w-6xl mx-auto">
-        {title && (
-          <div className="text-center mb-8">
-            <Heading
-              level={2}
-              className={`text-3xl md:text-4xl font-bold ${themed.textPrimary}`}
-            >
-              {title}
-            </Heading>
-          </div>
-        )}
-        <Grid
-          gap="lg"
-          className="grid-cols-2 sm:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4"
-        >
-          {items.map((item, index) => (
-            <TrustFeatureCard
-              key={item.iconName}
-              item={item}
-              visible={visible}
-              delay={index * 100}
-            />
-          ))}
-        </Grid>
-      </div>
-    </Section>
-  );
-}

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

@@ -1,59 +0,0 @@
-"use client";
-
-import React from "react";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Grid, Heading, Section, Text } from "../../../ui";
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-export interface TrustIndicatorItem {
-  key?: string;
-  icon: string;
-  title: string;
-  description: string;
-}
-
-export interface TrustIndicatorsSectionProps {
-  items: TrustIndicatorItem[];
-  className?: string;
-}
-
-// ─── Section ─────────────────────────────────────────────────────────────────
-
-export function TrustIndicatorsSection({
-  items,
-  className = "",
-}: TrustIndicatorsSectionProps) {
-  const { themed } = THEME_CONSTANTS;
-
-  return (
-    <Section className={`p-6 ${themed.bgSecondary} ${className}`}>
-      <div className="w-full">
-        <Grid
-          gap="md"
-          className="grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4 md:gap-8"
-        >
-          {items.map((indicator, index) => (
-            <div
-              key={index}
-              className="text-center p-4 rounded-2xl bg-white dark:bg-slate-900 border border-zinc-100 dark:border-slate-800 hover:shadow-md transition-shadow"
-            >
-              <div className="text-4xl md:text-5xl mb-2 md:mb-3">
-                {indicator.icon}
-              </div>
-              <Heading
-                level={3}
-                className={`text-sm font-semibold ${themed.textPrimary} mb-1 md:mb-2`}
-              >
-                {indicator.title}
-              </Heading>
-              <Text className={`text-xs ${themed.textSecondary}`}>
-                {indicator.description}
-              </Text>
-            </div>
-          ))}
-        </Grid>
-      </div>
-    </Section>
-  );
-}

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

@@ -1,178 +0,0 @@
-"use client";
-
-import React from "react";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Button, Grid, Heading, Row, Section, Span, Text } from "../../../ui";
-
-// ─── Props ───────────────────────────────────────────────────────────────────
-
-export interface WelcomeSectionChip {
-  key: string;
-  emoji: string;
-  label: string;
-}
-
-export interface WelcomeSectionProps {
-  title: string;
-  subtitle?: string;
-  pillLabel?: string;
-  showCTA?: boolean;
-  ctaLabel?: string;
-  onCtaClick?: () => void;
-  secondaryCtaLabel?: string;
-  onSecondaryCtaClick?: () => void;
-  trustChips?: WelcomeSectionChip[];
-  isLoading?: boolean;
-  brandLogoText?: string;
-  className?: string;
-}
-
-// ─── Component ───────────────────────────────────────────────────────────────
-
-export function WelcomeSection({
-  title,
-  subtitle,
-  pillLabel,
-  showCTA = true,
-  ctaLabel = "Shop now",
-  onCtaClick,
-  secondaryCtaLabel = "Browse products",
-  onSecondaryCtaClick,
-  trustChips = [],
-  isLoading = false,
-  brandLogoText = "",
-  className = "",
-}: WelcomeSectionProps) {
-  const { themed, flex } = THEME_CONSTANTS;
-
-  if (isLoading) {
-    return (
-      <Section
-        className={`relative overflow-hidden py-16 md:py-24 px-4 ${className}`}
-      >
-        <div className="animate-pulse max-w-4xl mx-auto text-center">
-          <div className="h-6 bg-zinc-200 dark:bg-slate-700 rounded-full w-52 mx-auto mb-6" />
-          <div className="h-20 bg-zinc-200 dark:bg-slate-700 rounded-lg mb-4 max-w-2xl mx-auto" />
-          <div className="h-6 bg-zinc-200 dark:bg-slate-700 rounded-lg mb-8 max-w-lg mx-auto" />
-          <div className="flex justify-center gap-4">
-            <div className="h-12 bg-zinc-200 dark:bg-slate-700 rounded-xl w-36" />
-            <div className="h-12 bg-zinc-200 dark:bg-slate-700 rounded-xl w-36" />
-          </div>
-        </div>
-      </Section>
-    );
-  }
-
-  return (
-    <Section
-      className={`relative overflow-hidden py-16 md:py-24 px-4 ${className}`}
-    >
-      {/* Decorative rings */}
-      <div
-        className="pointer-events-none absolute -top-24 -left-24 w-96 h-96 rounded-full border border-dashed border-primary/10 animate-spin [animation-duration:60s]"
-        aria-hidden="true"
-      />
-      <div
-        className="pointer-events-none absolute -bottom-32 -right-32 w-[32rem] h-[32rem] rounded-full border border-dashed border-cobalt/10 animate-spin [animation-duration:80s] [animation-direction:reverse]"
-        aria-hidden="true"
-      />
-
-      <div className="relative z-10 max-w-7xl mx-auto">
-        <Grid
-          gap="2xl"
-          className="grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 items-center"
-        >
-          {/* Left: text content */}
-          <div className="text-center lg:text-left">
-            {/* Pill badge */}
-            {pillLabel && (
-              <div>
-                <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">
-                  <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>
-            )}
-
-            {/* H1 */}
-            <Heading
-              level={1}
-              variant="none"
-              className="mt-4 font-display text-5xl md:text-7xl lg:text-8xl bg-gradient-to-r from-primary via-cobalt to-secondary dark:from-secondary dark:via-cobalt dark:to-primary bg-clip-text text-transparent leading-tight"
-            >
-              {title}
-            </Heading>
-
-            {/* Subtitle */}
-            {subtitle && (
-              <Text
-                className={`mt-4 text-xl ${themed.textSecondary} max-w-xl leading-relaxed mx-auto lg:mx-0`}
-              >
-                {subtitle}
-              </Text>
-            )}
-
-            {/* CTAs */}
-            {showCTA && (
-              <Row
-                wrap
-                gap="md"
-                className="mt-8 justify-center lg:justify-start"
-              >
-                <Button variant="primary" size="lg" onClick={onCtaClick}>
-                  {ctaLabel}
-                </Button>
-                <Button
-                  variant="outline"
-                  size="lg"
-                  onClick={onSecondaryCtaClick}
-                >
-                  {secondaryCtaLabel}
-                </Button>
-              </Row>
-            )}
-
-            {/* Trust chips */}
-            {trustChips.length > 0 && (
-              <Row
-                wrap
-                gap="sm"
-                className="mt-6 justify-center lg:justify-start"
-              >
-                {trustChips.map((chip) => (
-                  <Span
-                    key={chip.key}
-                    className="bg-zinc-100 dark:bg-slate-800 rounded-full px-3 py-1 text-xs text-zinc-600 dark:text-zinc-400"
-                  >
-                    {chip.emoji} {chip.label}
-                  </Span>
-                ))}
-              </Row>
-            )}
-          </div>
-
-          {/* Right: brand placeholder (desktop only) */}
-          <div className="hidden lg:block">
-            <div
-              className={`relative rounded-3xl overflow-hidden aspect-[4/3] bg-gradient-to-br from-primary/10 via-cobalt/10 to-secondary/10 border ${themed.border}`}
-            >
-              <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-cobalt/5" />
-              <div className={`absolute inset-0 ${flex.center}`}>
-                <Span className="font-display text-8xl text-primary/20 select-none">
-                  {brandLogoText}
-                </Span>
-              </div>
-            </div>
-          </div>
-        </Grid>
-      </div>
-    </Section>
-  );
-}