@mohasinac/appkit 2.1.3 → 2.3.0

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

@@ -1,161 +0,0 @@
-import { ReactNode } from "react";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Grid, Heading, Section, Span, Text } from "../../../ui";
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-export interface HowItWorksInfoStep {
-  number: number;
-  icon: string;
-  title: string;
-  text: string;
-  /** Optional accent colour class for the step number badge, e.g. "bg-emerald-100 …" */
-  accentClass?: string;
-  /** Optional text colour class for the number */
-  textClass?: string;
-}
-
-export interface HowItWorksInfoDetail {
-  title: string;
-  text: string;
-}
-
-export interface HowItWorksInfoViewProps {
-  /** Page hero heading */
-  title: string;
-  subtitle?: string;
-  /** Tailwind gradient class for the hero header, e.g. "bg-gradient-to-r from-cobalt-600 to-violet-700" */
-  heroClass?: string;
-  /** Step-by-step section heading */
-  stepsTitle?: string;
-  steps: HowItWorksInfoStep[];
-  /** "Important things to know" or similar detail cards below the steps */
-  detailsSectionTitle?: string;
-  details?: HowItWorksInfoDetail[];
-  /** Optional: render the flow/status diagram above the steps list */
-  renderDiagram?: () => ReactNode;
-  /** Optional extra content at the bottom (CTAs, links, etc.) */
-  renderFooter?: () => ReactNode;
-  /** Accent colour for the step number badges (default: cobalt/blue) */
-  accentClass?: string;
-  className?: string;
-}
-
-// ─── View ─────────────────────────────────────────────────────────────────────
-
-export function HowItWorksInfoView({
-  title,
-  subtitle,
-  heroClass = "bg-gradient-to-br from-cobalt-700 via-cobalt-600 to-violet-700",
-  stepsTitle,
-  steps,
-  detailsSectionTitle,
-  details = [],
-  renderDiagram,
-  renderFooter,
-  accentClass = "bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-400",
-  className = "",
-}: HowItWorksInfoViewProps) {
-  const { themed, flex, spacing } = THEME_CONSTANTS;
-
-  return (
-    <div
-      className={`-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10 ${className}`}
-    >
-      {/* Header */}
-      <Section className={`${heroClass} text-white py-14 md:py-16 lg:py-20`}>
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <Heading level={1} variant="none" className="mb-4 text-white">
-            {title}
-          </Heading>
-          {subtitle && (
-            <Text variant="none" className="text-white/80 max-w-2xl mx-auto">
-              {subtitle}
-            </Text>
-          )}
-        </div>
-      </Section>
-
-      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 md:py-12 lg:py-16">
-        {/* Optional diagram slot */}
-        {renderDiagram?.()}
-
-        {/* Steps */}
-        {stepsTitle && (
-          <Heading level={2} className="mb-6">
-            {stepsTitle}
-          </Heading>
-        )}
-
-        <div className={`${spacing.stack} mb-14`}>
-          {steps.map(
-            ({
-              number,
-              icon,
-              title: stepTitle,
-              text,
-              accentClass: stepAccent,
-              textClass,
-            }) => (
-              <Section
-                key={number}
-                className={`flex gap-4 items-start ${themed.bgSecondary} rounded-xl p-6 border ${themed.border}`}
-              >
-                <div
-                  className={`shrink-0 w-10 h-10 rounded-xl ${stepAccent ?? accentClass} ${flex.center} text-sm font-bold`}
-                >
-                  <Span className={textClass}>{number}</Span>
-                </div>
-                <div>
-                  <Heading level={3} className="font-semibold mb-1">
-                    {icon} {stepTitle}
-                  </Heading>
-                  <Text
-                    variant="secondary"
-                    size="sm"
-                    className="leading-relaxed"
-                  >
-                    {text}
-                  </Text>
-                </div>
-              </Section>
-            ),
-          )}
-        </div>
-
-        {/* Detail cards */}
-        {details.length > 0 && (
-          <>
-            {detailsSectionTitle && (
-              <Heading level={2} className="mb-6">
-                {detailsSectionTitle}
-              </Heading>
-            )}
-            <Grid className="grid-cols-1 sm:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3 mb-12">
-              {details.map(({ title: dt, text: dx }) => (
-                <div
-                  key={dt}
-                  className={`${themed.bgSecondary} border ${themed.border} rounded-xl p-5`}
-                >
-                  <Heading level={3} className="font-semibold mb-2">
-                    {dt}
-                  </Heading>
-                  <Text
-                    variant="secondary"
-                    size="sm"
-                    className="leading-relaxed"
-                  >
-                    {dx}
-                  </Text>
-                </div>
-              ))}
-            </Grid>
-          </>
-        )}
-
-        {/* Footer slot (CTAs, links) */}
-        {renderFooter?.()}
-      </div>
-    </div>
-  );
-}

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

@@ -1,194 +0,0 @@
-"use client";
-
-import React, { useEffect, useRef, useState } from "react";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Button, Div, Grid, Heading, Section, Text } from "../../../ui";
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-export interface HowItWorksStep {
-  number: number;
-  title: string;
-  desc: string;
-  renderIcon?: (props: { className?: string }) => React.ReactNode;
-  accentFrom?: string;
-  iconColor?: string;
-  iconBg?: string;
-  badgeBg?: string;
-}
-
-export interface HowItWorksSectionProps {
-  title: string;
-  subtitle?: string;
-  pillLabel?: string;
-  ctaLabel?: string;
-  onCtaClick?: () => void;
-  steps: HowItWorksStep[];
-  className?: string;
-}
-
-// ─── Single step card ─────────────────────────────────────────────────────────
-
-function StepCard({
-  step,
-  visible,
-  delay,
-}: {
-  step: HowItWorksStep;
-  visible: boolean;
-  delay: number;
-}) {
-  const {
-    badgeBg = "bg-primary",
-    iconColor = "text-primary",
-    iconBg = "bg-primary/5 dark:bg-primary/10",
-  } = step;
-
-  return (
-    <div
-      className={[
-        "relative rounded-3xl p-8",
-        "bg-white dark:bg-slate-900",
-        "shadow-md group hover:-translate-y-2 hover:shadow-xl",
-        "transition-all duration-300",
-        visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8",
-      ].join(" ")}
-      style={{ transitionDelay: `${delay}ms` }}
-    >
-      {/* Step number watermark */}
-      <div
-        className="absolute top-4 right-5 font-display text-7xl bg-gradient-to-br from-primary to-cobalt opacity-10 bg-clip-text text-transparent select-none pointer-events-none leading-none"
-        aria-hidden="true"
-      >
-        {step.number}
-      </div>
-
-      {/* Visible index badge */}
-      <div
-        className={`relative z-10 w-10 h-10 rounded-full ${badgeBg} text-white font-bold text-sm flex items-center justify-center mb-5 shadow-md`}
-      >
-        {step.number}
-      </div>
-
-      {/* Icon */}
-      {step.renderIcon && (
-        <div
-          className={`relative z-10 w-14 h-14 rounded-2xl ${iconBg} flex items-center justify-center mb-4 border border-white/80 dark:border-slate-700/50`}
-        >
-          <span className={`${iconColor}`} aria-hidden="true">
-            {step.renderIcon({ className: "w-6 h-6" })}
-          </span>
-        </div>
-      )}
-
-      {/* Text */}
-      <Heading
-        level={3}
-        className={`relative z-10 text-base font-semibold ${THEME_CONSTANTS.themed.textPrimary} mb-2`}
-      >
-        {step.title}
-      </Heading>
-      <Text
-        className={`relative z-10 text-sm ${THEME_CONSTANTS.themed.textSecondary} leading-relaxed`}
-      >
-        {step.desc}
-      </Text>
-    </div>
-  );
-}
-
-// ─── Section ─────────────────────────────────────────────────────────────────
-
-export function HowItWorksSection({
-  title,
-  subtitle,
-  pillLabel,
-  ctaLabel,
-  onCtaClick,
-  steps,
-  className = "",
-}: HowItWorksSectionProps) {
-  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={`p-8 ${themed.bgPrimary} ${className}`}
-    >
-      <Div className="max-w-6xl mx-auto">
-        {/* Header */}
-        <div
-          className={`text-center mb-12 transition-all duration-700 ${
-            visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
-          }`}
-        >
-          {pillLabel && (
-            <div className="inline-block mb-4 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}
-            </div>
-          )}
-
-          <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-xl mx-auto`}
-            >
-              {subtitle}
-            </Text>
-          )}
-        </div>
-
-        {/* Steps */}
-        <Grid
-          gap="lg"
-          className="grid-cols-1 md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 mb-10"
-        >
-          {steps.map((step, i) => (
-            <StepCard
-              key={step.number}
-              step={step}
-              visible={visible}
-              delay={i * 150}
-            />
-          ))}
-        </Grid>
-
-        {/* CTA */}
-        {ctaLabel && onCtaClick && (
-          <div
-            className={`text-center transition-all duration-700 delay-500 ${
-              visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
-            }`}
-          >
-            <Button variant="primary" size="lg" onClick={onCtaClick}>
-              {ctaLabel}
-            </Button>
-          </div>
-        )}
-      </Div>
-    </Section>
-  );
-}

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

@@ -1,130 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import {
-  Button,
-  Div,
-  Heading,
-  Input,
-  Section,
-  Span,
-  Text,
-} from "../../../ui";
-
-export interface NewsletterBannerProps {
-  /**
-   * Called when the user submits the form. Throw on failure — the component
-   * will show a generic error message.
-   */
-  onSubscribe: (email: string) => Promise<void>;
-  /** Eyebrow label. Default: "STAY CONNECTED". */
-  eyebrow?: string;
-  /** Section heading. Default: "Join Our Newsletter". */
-  heading?: string;
-  /** Sub-heading. Default: "Get exclusive offers, new arrivals and more." */
-  subheading?: string;
-  /** Email placeholder text. Default: "Enter your email". */
-  placeholder?: string;
-  /** CTA button label. Default: "Subscribe". */
-  ctaLabel?: string;
-  /** Success message shown after subscribe. Default: "You're in! Check your inbox." */
-  successMessage?: string;
-  /** Error message on failure. Default: "Something went wrong. Please try again." */
-  errorMessage?: string;
-}
-
-export function NewsletterBanner({
-  onSubscribe,
-  eyebrow = "STAY CONNECTED",
-  heading = "Join Our Newsletter",
-  subheading = "Get exclusive offers, new arrivals and more.",
-  placeholder = "Enter your email",
-  ctaLabel = "Subscribe",
-  successMessage = "You're in! Check your inbox.",
-  errorMessage = "Something went wrong. Please try again.",
-}: NewsletterBannerProps) {
-  const [email, setEmail] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [success, setSuccess] = useState(false);
-  const [error, setError] = useState(false);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!email) return;
-    setLoading(true);
-    setError(false);
-    try {
-      await onSubscribe(email);
-      setEmail("");
-      setSuccess(true);
-    } catch {
-      setError(true);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <Section
-      className="relative overflow-hidden py-24"
-      style={{
-        background:
-          "var(--newsletter-bg, linear-gradient(135deg, var(--color-primary, #1e40af) 0%, var(--color-secondary, #7c3aed) 100%))",
-      }}
-    >
-      {/* Decorative rings */}
-      <Div className="pointer-events-none absolute -top-20 -right-20 h-60 w-60 rounded-full border border-white/[0.06]" />
-      <Div className="pointer-events-none absolute -bottom-16 -left-16 h-48 w-48 rounded-full border border-dashed border-white/[0.08]" />
-
-      <Div className="relative mx-auto max-w-2xl px-4 text-center sm:px-6">
-        <Span className="mb-4 inline-flex rounded-full border border-white/20 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-white/70">
-          {eyebrow}
-        </Span>
-        <Heading
-          level={2}
-          className="text-3xl font-bold text-white sm:text-4xl"
-        >
-          {heading}
-        </Heading>
-        <Text className="mt-4 text-white/60">{subheading}</Text>
-
-        {success ? (
-          <Text className="mt-8 rounded-xl border border-white/20 bg-white/10 px-6 py-4 text-sm font-semibold text-white">
-            {successMessage}
-          </Text>
-        ) : (
-          <form onSubmit={handleSubmit} className="mt-8 flex gap-3">
-            <Input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder={placeholder}
-              required
-              className="flex-1 rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-sm text-white placeholder:text-white/40 outline-none focus:border-white/40"
-            />
-            <Button
-              type="submit"
-              disabled={loading}
-              variant="primary"
-              className="shrink-0 rounded-xl px-5 py-3 text-sm font-bold transition-opacity disabled:opacity-60"
-              style={{
-                background: "var(--color-yellow, #FFE500)",
-                color: "#0D0D0D",
-              }}
-            >
-              {loading ? "…" : ctaLabel}
-            </Button>
-          </form>
-        )}
-
-        {error && (
-          <Text className="mt-3 text-sm text-red-300">{errorMessage}</Text>
-        )}
-
-        <Text className="mt-4 text-xs text-white/40">
-          No spam, ever. Unsubscribe anytime.
-        </Text>
-      </Div>
-    </Section>
-  );
-}

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

@@ -1,85 +0,0 @@
-"use client";
-
-import React from "react";
-import { Heading, Section, Text, TextLink } from "../../../ui";
-import { Mail } from "lucide-react";
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-export interface NewsletterSectionProps {
-  title: string;
-  subtitle?: string;
-  privacyLabel?: string;
-  privacyHref?: string;
-  renderForm: () => React.ReactNode;
-  className?: string;
-}
-
-// ─── Section ─────────────────────────────────────────────────────────────────
-
-export function NewsletterSection({
-  title,
-  subtitle,
-  privacyLabel,
-  privacyHref,
-  renderForm,
-  className = "",
-}: NewsletterSectionProps) {
-  return (
-    <Section className={`py-16 px-4 relative overflow-hidden ${className}`}>
-      {/* Gradient background layer */}
-      <div
-        className="absolute inset-0 bg-gradient-to-br from-primary/10 via-cobalt/5 to-secondary/10 dark:from-primary/15 dark:via-cobalt/10 dark:to-secondary/15 pointer-events-none"
-        aria-hidden
-      />
-      {/* Decorative circles */}
-      <div
-        className="absolute -top-20 -right-20 w-80 h-80 rounded-full bg-primary/5 dark:bg-primary/10 pointer-events-none"
-        aria-hidden
-      />
-      <div
-        className="absolute -bottom-16 -left-16 w-64 h-64 rounded-full bg-cobalt/5 dark:bg-cobalt/10 pointer-events-none"
-        aria-hidden
-      />
-
-      <div className="relative z-10 max-w-2xl mx-auto text-center">
-        {/* Icon badge */}
-        <div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary/10 dark:bg-primary/20 border border-primary/20 mb-5 mx-auto">
-          <Mail className="w-7 h-7 text-primary" />
-        </div>
-
-        <Heading
-          level={2}
-          className="text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-white mb-3"
-        >
-          {title}
-        </Heading>
-        {subtitle && (
-          <Text
-            size="base"
-            className="text-zinc-500 dark:text-zinc-400 mb-8 max-w-md mx-auto"
-          >
-            {subtitle}
-          </Text>
-        )}
-
-        {/* Form slot */}
-        {renderForm()}
-
-        {/* Privacy */}
-        {privacyLabel && privacyHref && (
-          <Text size="xs" className="text-zinc-400 dark:text-zinc-500 mt-4">
-            {privacyLabel}{" "}
-            <TextLink
-              href={privacyHref}
-              className="underline underline-offset-2 hover:text-primary"
-            >
-              Privacy Policy
-            </TextLink>
-            .
-          </Text>
-        )}
-      </div>
-    </Section>
-  );
-}

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

@@ -1,130 +0,0 @@
-import Image from "next/image";
-import Link from "next/link";
-import { Div, Heading, Row, Section, Span, Text } from "../../../ui";
-import type { PromoBanner } from "../types";
-
-export interface PromoGridProps {
-  banners: PromoBanner[];
-  /** Eyebrow label above the section heading. Default: "LIMITED TIME". */
-  eyebrow?: string;
-  /** Section heading. Default: "HOT DEALS & PROMOS". */
-  heading?: string;
-}
-
-export function PromoGrid({
-  banners,
-  eyebrow = "LIMITED TIME",
-  heading = "HOT DEALS & PROMOS",
-}: PromoGridProps) {
-  if (banners.length === 0) return null;
-
-  return (
-    <Section
-      className="py-10 sm:py-16"
-      style={{
-        background: "var(--dark-section-alt)",
-        borderTop: "1px solid rgba(255,255,255,0.06)",
-        borderBottom: "1px solid rgba(255,255,255,0.06)",
-      }}
-    >
-      <Div className="mx-auto max-w-7xl px-4">
-        <Row
-          wrap
-          align="end"
-          justify="between"
-          gap="sm"
-          className="mb-7 gap-y-2"
-        >
-          <Div>
-            <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.6rem, 4vw, 2.4rem)",
-                letterSpacing: "0.08em",
-                color: "#FFFFFF",
-                lineHeight: 1,
-              }}
-            >
-              {heading}
-            </Heading>
-          </Div>
-        </Row>
-
-        {/*
-          Layout:
-          - Mobile: single column stack
-          - sm: 2 columns
-          - lg: 3 cols, first card spans 2 rows
-        */}
-        <Div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
-          {banners.slice(0, 4).map((banner, i) => (
-            <Link
-              key={banner.id}
-              href={banner.ctaUrl}
-              className={`group relative block overflow-hidden ${i === 0 ? "sm:row-span-2" : ""}`}
-              style={{
-                minHeight:
-                  i === 0
-                    ? "clamp(220px, 32vh, 480px)"
-                    : "clamp(130px, 16vh, 240px)",
-                background: "var(--dark-section-card)",
-              }}
-            >
-              <Image
-                src={banner.image}
-                alt={banner.title}
-                fill
-                className="object-cover transition-transform duration-500 group-hover:scale-105"
-                sizes={
-                  i === 0
-                    ? "(max-width: 640px) 100vw, 40vw"
-                    : "(max-width: 640px) 50vw, 30vw"
-                }
-              />
-              <Div
-                className="absolute inset-0"
-                style={{
-                  background:
-                    i === 0
-                      ? "linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%)"
-                      : "linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 100%)",
-                }}
-              />
-              {/* Yellow inset border on hover */}
-              <Div
-                className="absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-                style={{ boxShadow: "inset 0 0 0 2px var(--color-yellow)" }}
-              />
-              <Div className="absolute bottom-0 left-0 right-0 p-4">
-                <Text
-                  className="leading-tight"
-                  style={{
-                    fontFamily: "var(--font-bangers, Bangers, cursive)",
-                    fontSize: i === 0 ? "1.35rem" : "1rem",
-                    letterSpacing: "0.06em",
-                    color: "#FFFFFF",
-                  }}
-                >
-                  {banner.title}
-                </Text>
-                <Span
-                  className="mt-1 inline-flex items-center gap-1 text-xs font-black uppercase"
-                  style={{ color: "var(--color-yellow)" }}
-                >
-                  {banner.ctaLabel} →
-                </Span>
-              </Div>
-            </Link>
-          ))}
-        </Div>
-      </Div>
-    </Section>
-  );
-}