@shipsite.dev/components 0.1.0 → 0.1.1

package/src/marketing/PricingSection.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import React, { useState, Children, isValidElement } from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '../lib/utils';
+import { Section } from '../ui/section';
+import { Button } from '../ui/button';
+
+interface PricingPlanProps {
+  name: string;
+  price: string;
+  yearlyPrice?: string;
+  description?: string;
+  features: string[];
+  cta: { label: string; href: string };
+  popular?: boolean;
+}
+
+export function PricingPlan(_props: PricingPlanProps) {
+  return null;
+}
+
+interface ComparisonRowProps {
+  feature: string;
+  values: (string | boolean)[];
+}
+
+export function ComparisonRow(_props: ComparisonRowProps) {
+  return null;
+}
+
+interface ComparisonCategoryProps {
+  title: string;
+}
+
+export function ComparisonCategory(_props: ComparisonCategoryProps) {
+  return null;
+}
+
+interface PricingSectionProps {
+  title?: string;
+  description?: string;
+  monthlyLabel?: string;
+  yearlyLabel?: string;
+  mostPopularLabel?: string;
+  children: React.ReactNode;
+}
+
+export function PricingSection({ title, description, monthlyLabel = 'Monthly', yearlyLabel = 'Yearly', mostPopularLabel = 'Most Popular', children }: PricingSectionProps) {
+  const [isYearly, setIsYearly] = useState(false);
+
+  const plans: PricingPlanProps[] = [];
+  const rows: { type: 'category' | 'row'; props: ComparisonRowProps | ComparisonCategoryProps }[] = [];
+
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.type === PricingPlan) plans.push(child.props as PricingPlanProps);
+    else if (child.type === ComparisonRow) rows.push({ type: 'row', props: child.props as ComparisonRowProps });
+    else if (child.type === ComparisonCategory) rows.push({ type: 'category', props: child.props as ComparisonCategoryProps });
+  });
+
+  return (
+    <Section>
+      <div className="container-main">
+        {(title || description) && (
+          <div className="text-center mb-12">
+            {title && <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">{title}</h2>}
+            {description && <p className="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>}
+          </div>
+        )}
+
+        {plans.some((p) => p.yearlyPrice) && (
+          <div className="flex items-center justify-center gap-3 mb-12">
+            <span className={cn('text-sm font-medium', !isYearly ? 'text-foreground' : 'text-muted-foreground')}>{monthlyLabel}</span>
+            <button onClick={() => setIsYearly(!isYearly)} className={cn('relative w-12 h-6 rounded-full transition-colors', isYearly ? 'bg-primary' : 'bg-muted')}>
+              <span className={cn('absolute top-0.5 w-5 h-5 bg-background rounded-full shadow transition-transform', isYearly ? 'translate-x-6' : 'translate-x-0.5')} />
+            </button>
+            <span className={cn('text-sm font-medium', isYearly ? 'text-foreground' : 'text-muted-foreground')}>{yearlyLabel}</span>
+          </div>
+        )}
+
+        <div className={cn('grid grid-cols-1 gap-6 mb-16', plans.length === 2 && 'md:grid-cols-2', plans.length >= 3 && 'md:grid-cols-3')}>
+          {plans.map((plan) => (
+            <div key={plan.name} className={cn(
+              'relative rounded-2xl p-8',
+              plan.popular
+                ? 'glass-4 ring-2 ring-primary shadow-xl'
+                : 'glass-1'
+            )}>
+              {plan.popular && (
+                <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-primary text-primary-foreground text-xs font-medium rounded-full">{mostPopularLabel}</div>
+              )}
+              <h3 className="text-xl font-bold mb-2 text-foreground">{plan.name}</h3>
+              {plan.description && <p className="text-sm mb-4 text-muted-foreground">{plan.description}</p>}
+              <div className="mb-6">
+                <span className="text-4xl font-bold text-foreground">{isYearly && plan.yearlyPrice ? plan.yearlyPrice : plan.price}</span>
+              </div>
+              <Button asChild className="w-full" variant={plan.popular ? 'default' : 'glow'}>
+                <a href={plan.cta.href}>{plan.cta.label}</a>
+              </Button>
+              <ul className="mt-6 space-y-3">
+                {plan.features.map((feature) => (
+                  <li key={feature} className="flex items-start gap-2 text-sm text-muted-foreground">
+                    <Check className="w-4 h-4 mt-0.5 shrink-0 text-primary" />
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        {rows.length > 0 && (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-border">
+                  <th className="text-left py-4 pr-4 font-medium text-foreground">Feature</th>
+                  {plans.map((plan) => <th key={plan.name} className="text-center py-4 px-4 font-medium text-foreground">{plan.name}</th>)}
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map((row, i) => {
+                  if (row.type === 'category') {
+                    return <tr key={i} className="bg-muted"><td colSpan={plans.length + 1} className="py-3 px-4 font-semibold text-foreground">{(row.props as ComparisonCategoryProps).title}</td></tr>;
+                  }
+                  const r = row.props as ComparisonRowProps;
+                  return (
+                    <tr key={i} className="border-b border-border">
+                      <td className="py-3 pr-4 text-muted-foreground">{r.feature}</td>
+                      {r.values.map((val, j) => (
+                        <td key={j} className="text-center py-3 px-4">
+                          {typeof val === 'boolean' ? (val ? <Check className="w-5 h-5 mx-auto text-primary" /> : <span className="text-muted-foreground/30">&mdash;</span>) : <span className="text-muted-foreground">{val}</span>}
+                        </td>
+                      ))}
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </Section>
+  );
+}

package/src/marketing/SocialProof.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Section } from '../ui/section';
+
+interface SocialProofProps {
+  avatars?: string[];
+  text: string;
+  subtext?: string;
+}
+
+export function SocialProof({ avatars, text, subtext }: SocialProofProps) {
+  return (
+    <Section className="py-12">
+      <div className="container-main">
+        <div className="flex flex-col items-center gap-4 text-center">
+          {avatars && avatars.length > 0 && (
+            <div className="flex -space-x-3">
+              {avatars.map((src, i) => (
+                <img
+                  key={i}
+                  src={src}
+                  alt=""
+                  className="w-10 h-10 rounded-full border-2 border-background object-cover"
+                />
+              ))}
+              <div className="w-10 h-10 rounded-full border-2 border-background bg-primary flex items-center justify-center">
+                <span className="text-xs font-semibold text-primary-foreground">+</span>
+              </div>
+            </div>
+          )}
+          <div>
+            <p className="text-lg font-semibold text-foreground">{text}</p>
+            {subtext && <p className="text-sm text-muted-foreground">{subtext}</p>}
+          </div>
+        </div>
+      </div>
+    </Section>
+  );
+}

package/src/marketing/Stats.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Section } from '../ui/section';
+
+interface StatProps {
+  label?: string;
+  value: string | number;
+  suffix?: string;
+  description?: string;
+}
+
+export function Stat(_props: StatProps) {
+  return null;
+}
+
+interface StatsProps {
+  title?: string;
+  children: React.ReactNode;
+}
+
+export function Stats({ title, children }: StatsProps) {
+  const items: StatProps[] = [];
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement(child) && child.type === Stat) {
+      items.push(child.props as StatProps);
+    }
+  });
+
+  return (
+    <Section>
+      <div className="container-main max-w-[960px]">
+        {title && (
+          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-12 text-center">{title}</h2>
+        )}
+        <div className="grid grid-cols-2 gap-12 sm:grid-cols-4">
+          {items.map((item, i) => (
+            <div key={i} className="flex flex-col items-start gap-3 text-left">
+              {item.label && (
+                <div className="text-muted-foreground text-sm font-semibold">{item.label}</div>
+              )}
+              <div className="flex items-baseline gap-2">
+                <div className="from-foreground to-foreground dark:to-brand bg-linear-to-r bg-clip-text text-4xl font-medium text-transparent drop-shadow-[2px_1px_24px_var(--brand-foreground)] transition-all duration-300 sm:text-5xl md:text-6xl">
+                  {item.value}
+                </div>
+                {item.suffix && (
+                  <div className="text-brand text-2xl font-semibold">{item.suffix}</div>
+                )}
+              </div>
+              {item.description && (
+                <div className="text-muted-foreground text-sm font-semibold text-pretty">{item.description}</div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </Section>
+  );
+}

package/src/marketing/Steps.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Section } from '../ui/section';
+
+interface StepProps {
+  title: string;
+  description: string;
+}
+
+export function Step(_props: StepProps) {
+  return null;
+}
+
+interface StepsProps {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+}
+
+export function Steps({ title, description, children }: StepsProps) {
+  const steps: StepProps[] = [];
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement(child) && child.type === Step) {
+      steps.push(child.props as StepProps);
+    }
+  });
+
+  return (
+    <Section>
+      <div className="container-main max-w-3xl">
+        {(title || description) && (
+          <div className="text-center mb-12">
+            {title && <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">{title}</h2>}
+            {description && <p className="text-lg text-muted-foreground">{description}</p>}
+          </div>
+        )}
+        <div className="space-y-8">
+          {steps.map((step, i) => (
+            <div key={i} className="flex gap-6">
+              <div className="flex flex-col items-center">
+                <div className="w-10 h-10 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold text-sm shrink-0">{i + 1}</div>
+                {i < steps.length - 1 && <div className="w-px flex-1 bg-border mt-2" />}
+              </div>
+              <div className="pb-8">
+                <h3 className="text-lg font-semibold text-foreground mb-2">{step.title}</h3>
+                <p className="text-muted-foreground">{step.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Section>
+  );
+}

package/src/marketing/TabsSection.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Section } from '../ui/section';
+import { cn } from '../lib/utils';
+
+interface TabItemProps {
+  label: string;
+  title?: string;
+  description?: string;
+  image?: string;
+  children?: React.ReactNode;
+}
+
+export function TabItem(_props: TabItemProps) {
+  return null;
+}
+
+interface TabsSectionProps {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+}
+
+export function TabsSection({ title, description, children }: TabsSectionProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const tabs: TabItemProps[] = [];
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement(child) && child.type === TabItem) {
+      tabs.push(child.props as TabItemProps);
+    }
+  });
+
+  const activeTab = tabs[activeIndex];
+
+  return (
+    <Section>
+      <div className="container-main">
+        {(title || description) && (
+          <div className="text-center mb-12">
+            {title && <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">{title}</h2>}
+            {description && <p className="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>}
+          </div>
+        )}
+        <div className="flex justify-center mb-8">
+          <div className="inline-flex rounded-full glass-1 p-1 gap-1">
+            {tabs.map((tab, i) => (
+              <button
+                key={i}
+                onClick={() => setActiveIndex(i)}
+                className={cn(
+                  'px-4 py-2 rounded-full text-sm font-medium transition-all',
+                  i === activeIndex
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:text-foreground',
+                )}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
+        {activeTab && (
+          <div className="glass-1 rounded-2xl p-8 md:p-12">
+            <div className={cn('grid gap-8', activeTab.image && 'md:grid-cols-2 items-center')}>
+              <div>
+                {activeTab.title && (
+                  <h3 className="text-2xl font-bold text-foreground mb-4">{activeTab.title}</h3>
+                )}
+                {activeTab.description && (
+                  <p className="text-muted-foreground leading-relaxed">{activeTab.description}</p>
+                )}
+              </div>
+              {activeTab.image && (
+                <img src={activeTab.image} alt={activeTab.title || activeTab.label} className="w-full rounded-xl" />
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </Section>
+  );
+}

package/src/marketing/Testimonial.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Section } from '../ui/section';
+
+interface TestimonialProps {
+  quote: string;
+  author: string;
+  role?: string;
+  image?: string;
+  company?: string;
+}
+
+export function Testimonial({ quote, author, role, image, company }: TestimonialProps) {
+  return (
+    <Section>
+      <div className="container-main max-w-3xl">
+        <div className="glass-2 rounded-2xl p-8 md:p-12">
+          <blockquote className="text-lg md:text-xl text-foreground/80 italic mb-6">&ldquo;{quote}&rdquo;</blockquote>
+          <div className="flex items-center gap-3">
+            {image && <img src={image} alt={author} className="w-10 h-10 rounded-full object-cover" />}
+            <div>
+              <p className="font-semibold text-foreground">{author}</p>
+              {(role || company) && <p className="text-sm text-muted-foreground">{role}{role && company && ' \u00B7 '}{company}</p>}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Section>
+  );
+}

package/src/marketing/Testimonials.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Section } from '../ui/section';
+
+interface TestimonialCardProps {
+  quote: string;
+  author: string;
+  role?: string;
+  company?: string;
+  image?: string;
+  rating?: number;
+}
+
+export function TestimonialCard({ quote, author, role, company, image, rating }: TestimonialCardProps) {
+  return (
+    <div className="glass-1 hover:glass-2 rounded-2xl p-6 transition-all flex flex-col justify-between gap-4">
+      {rating && (
+        <div className="flex gap-0.5">
+          {Array.from({ length: rating }).map((_, i) => (
+            <svg key={i} className="size-4 fill-brand" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
+          ))}
+        </div>
+      )}
+      <blockquote className="text-sm text-foreground/80 leading-relaxed">&ldquo;{quote}&rdquo;</blockquote>
+      <div className="flex items-center gap-3 mt-auto pt-2">
+        {image && <img src={image} alt={author} className="w-8 h-8 rounded-full object-cover" />}
+        <div>
+          <p className="text-sm font-semibold text-foreground">{author}</p>
+          {(role || company) && (
+            <p className="text-xs text-muted-foreground">{role}{role && company && ' · '}{company}</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface TestimonialsProps {
+  title?: string;
+  description?: string;
+  columns?: 2 | 3;
+  children: React.ReactNode;
+}
+
+export function Testimonials({ title, description, columns = 3, children }: TestimonialsProps) {
+  const gridCols = columns === 2 ? 'md:grid-cols-2' : 'md:grid-cols-2 lg:grid-cols-3';
+
+  return (
+    <Section>
+      <div className="container-main">
+        {(title || description) && (
+          <div className="text-center mb-12">
+            {title && <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">{title}</h2>}
+            {description && <p className="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>}
+          </div>
+        )}
+        <div className={`grid grid-cols-1 ${gridCols} gap-6`}>{children}</div>
+      </div>
+    </Section>
+  );
+}

package/src/styles/utils.css

@@ -0,0 +1,84 @@
+/* Glass effects */
+@utility glass-1 {
+  @apply border-border from-card/80 to-card/40 dark:border-border/10 dark:border-b-border/5 dark:border-t-border/20 dark:from-card/5 dark:to-card/0 border bg-linear-to-b;
+}
+@utility glass-2 {
+  @apply border-border from-card/100 to-card/80 dark:border-border/10 dark:border-b-border/5 dark:border-t-border/20 dark:from-card/10 dark:to-card/5 border bg-linear-to-b;
+}
+@utility glass-3 {
+  @apply border-border from-card/30 to-card/20 dark:border-border/10 dark:border-t-border/20 dark:border-b-border/5 dark:from-primary/5 dark:to-primary/2 border bg-linear-to-b;
+}
+@utility glass-4 {
+  @apply border-border border-b-input/90 from-card/60 to-card/20 dark:border-border/10 dark:border-t-border/30 dark:from-primary/10 dark:to-primary/5 border bg-linear-to-b dark:border-b-0;
+}
+@utility glass-5 {
+  @apply border-border border-b-input from-card/100 to-card/20 dark:border-border/10 dark:border-t-border/30 dark:from-primary/15 dark:to-primary/5 border bg-linear-to-b dark:border-b-0;
+}
+
+/* Fade effects */
+@utility fade-x {
+  mask-image: linear-gradient(
+    to right,
+    transparent 0%,
+    black 25%,
+    black 75%,
+    transparent 100%
+  );
+}
+@utility fade-y {
+  mask-image: linear-gradient(
+    to top,
+    transparent 0%,
+    black 25%,
+    black 75%,
+    transparent 100%
+  );
+}
+@utility fade-top {
+  mask-image: linear-gradient(to bottom, transparent 0%, black 35%);
+}
+@utility fade-bottom {
+  mask-image: linear-gradient(to top, transparent 0%, black 35%);
+}
+@utility fade-top-lg {
+  mask-image: linear-gradient(to bottom, transparent 15%, black 100%);
+}
+@utility fade-bottom-lg {
+  mask-image: linear-gradient(to top, transparent 15%, black 100%);
+}
+@utility fade-left {
+  mask-image: linear-gradient(to right, transparent 0%, black 35%);
+}
+@utility fade-right {
+  mask-image: linear-gradient(to left, transparent 0%, black 35%);
+}
+@utility fade-left-lg {
+  mask-image: linear-gradient(to right, transparent 15%, black 100%);
+}
+@utility fade-right-lg {
+  mask-image: linear-gradient(to left, transparent 15%, black 100%);
+}
+
+@utility line-y {
+  @apply border-border dark:border-border/10;
+  border-width: 0 var(--line-width, 0);
+}
+
+@utility line-x {
+  @apply border-border dark:border-border/10;
+  border-width: var(--line-width, 0) 0;
+}
+
+@utility line-b {
+  @apply border-border dark:border-border/10;
+  border-width: 0 0 var(--line-width, 0);
+}
+
+@utility line-t {
+  @apply border-border dark:border-border/10;
+  border-width: var(--line-width, 0) 0;
+}
+
+@utility line-dashed {
+  @apply border-dashed;
+}

package/src/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-border dark:border-border/15 border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 text-md flex flex-1 items-center justify-between py-4 text-left font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/ui/badge.tsx

@@ -0,0 +1,55 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border border-border/100 dark:border-border/20 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 gap-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground dark:shadow-sm dark:border-transparent",
+        brand:
+          "border-transparent bg-brand text-primary-foreground dark:shadow-sm dark:border-transparent",
+        "brand-secondary":
+          "border-transparent bg-brand-foreground/20 text-brand dark:border-transparent",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground dark:shadow-sm dark:border-transparent",
+        destructive:
+          "border-transparent bg-destructive/30 text-destructive-foreground dark:shadow-sm dark:border-transparent",
+        outline: "text-foreground",
+      },
+      size: {
+        default: "px-2.5 py-1",
+        sm: "px-1",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };