@shipsite.dev/components 0.1.0 → 0.2.0

package/src/marketing/BannerCTA.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Section } from '../ui/section';
+import { Button } from '../ui/button';
+import Glow from '../ui/glow';
+
+interface BannerCTAProps {
+  title: string;
+  buttonText: string;
+  buttonHref?: string;
+  subtext?: string;
+  children?: React.ReactNode;
+}
+
+export function BannerCTA({ title, buttonText, buttonHref, subtext, children }: BannerCTAProps) {
+  return (
+    <Section>
+      <div className="container-main">
+        <div className="relative overflow-hidden glass-4 rounded-3xl p-12 md:p-16 text-center">
+          <Glow variant="center" />
+          <div className="relative z-10">
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">{title}</h2>
+            {subtext && <p className="text-muted-foreground mb-8 max-w-xl mx-auto">{subtext}</p>}
+            {buttonHref && (
+              <Button asChild size="lg">
+                <a href={buttonHref}>{buttonText}</a>
+              </Button>
+            )}
+            {children}
+          </div>
+        </div>
+      </div>
+    </Section>
+  );
+}
+
+export function BannerFeature({ title, icon }: { title: string; icon?: string }) {
+  return (
+    <div className="flex items-center gap-2 text-muted-foreground text-sm">
+      {icon && <span>{icon}</span>}
+      <span>{title}</span>
+    </div>
+  );
+}

package/src/marketing/BentoGrid.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Section } from '../ui/section';
+import { cn } from '../lib/utils';
+
+interface BentoItemProps {
+  title: string;
+  description?: string;
+  image?: string;
+  span?: 1 | 2;
+  children?: React.ReactNode;
+}
+
+export function BentoItem({ title, description, image, span = 1, children }: BentoItemProps) {
+  return (
+    <div className={cn(
+      'glass-1 hover:glass-2 rounded-2xl p-6 md:p-8 transition-all overflow-hidden flex flex-col',
+      span === 2 && 'md:col-span-2',
+    )}>
+      <h3 className="text-lg font-semibold text-foreground mb-2">{title}</h3>
+      {description && <p className="text-sm text-muted-foreground mb-4 leading-relaxed">{description}</p>}
+      {image && (
+        <div className="mt-auto -mx-6 -mb-6 md:-mx-8 md:-mb-8">
+          <img src={image} alt={title} className="w-full" />
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
+
+interface BentoGridProps {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+}
+
+export function BentoGrid({ title, description, children }: BentoGridProps) {
+  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 md:grid-cols-3 gap-6 auto-rows-fr">{children}</div>
+      </div>
+    </Section>
+  );
+}

package/src/marketing/CalloutCard.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { cn } from '../lib/utils';
+
+interface CalloutCardProps {
+  title: string;
+  description: string;
+  variant?: 'info' | 'success' | 'warning';
+  children?: React.ReactNode;
+}
+
+export function CalloutCard({ title, description, variant = 'info', children }: CalloutCardProps) {
+  const variantStyles = {
+    info: 'bg-primary/5 border-primary/20',
+    success: 'bg-emerald-50 border-emerald-200',
+    warning: 'bg-amber-50 border-amber-200',
+  };
+
+  return (
+    <div className={cn('rounded-xl border p-6 my-8', variantStyles[variant])}>
+      <h3 className="font-semibold text-foreground mb-2">{title}</h3>
+      <p className="text-sm text-muted-foreground">{description}</p>
+      {children}
+    </div>
+  );
+}

package/src/marketing/CardGrid.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface CardGridItemProps {
+  title: string;
+  description: string;
+  icon?: React.ReactNode;
+  href?: string;
+}
+
+export function CardGridItem({ title, description, icon, href }: CardGridItemProps) {
+  const Wrapper = href ? 'a' : 'div';
+  return (
+    <Wrapper {...(href ? { href } : {})} className="block p-6 rounded-xl glass-1 hover:glass-2 transition-all">
+      {icon && <div className="mb-3 text-primary">{icon}</div>}
+      <h3 className="font-semibold text-foreground mb-2">{title}</h3>
+      <p className="text-sm text-muted-foreground">{description}</p>
+    </Wrapper>
+  );
+}
+
+interface CardGridProps {
+  columns?: 2 | 3 | 4;
+  children: React.ReactNode;
+}
+
+export function CardGrid({ columns = 3, children }: CardGridProps) {
+  const gridCols = { 2: 'md:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-2 lg:grid-cols-4' };
+  return <div className={`grid grid-cols-1 ${gridCols[columns]} gap-6 py-8`}>{children}</div>;
+}

package/src/marketing/Carousel.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import React, { useRef } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Section } from '../ui/section';
+import { cn } from '../lib/utils';
+
+interface CarouselItemProps {
+  title?: string;
+  description?: string;
+  image?: string;
+  children?: React.ReactNode;
+}
+
+export function CarouselItem({ title, description, image, children }: CarouselItemProps) {
+  return (
+    <div className="glass-1 rounded-2xl overflow-hidden flex-shrink-0 w-[85vw] max-w-[400px] snap-center">
+      {image && <img src={image} alt={title || ''} className="w-full aspect-video object-cover" />}
+      <div className="p-6">
+        {title && <h3 className="text-lg font-semibold text-foreground mb-2">{title}</h3>}
+        {description && <p className="text-sm text-muted-foreground leading-relaxed">{description}</p>}
+        {children}
+      </div>
+    </div>
+  );
+}
+
+interface CarouselProps {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+}
+
+export function Carousel({ title, description, children }: CarouselProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const scroll = (direction: 'left' | 'right') => {
+    if (!scrollRef.current) return;
+    const amount = scrollRef.current.offsetWidth * 0.8;
+    scrollRef.current.scrollBy({
+      left: direction === 'left' ? -amount : amount,
+      behavior: 'smooth',
+    });
+  };
+
+  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="relative group">
+          <div
+            ref={scrollRef}
+            className="flex gap-6 overflow-x-auto snap-x snap-mandatory scrollbar-none pb-4 -mx-4 px-4"
+            style={{ scrollbarWidth: 'none' }}
+          >
+            {children}
+          </div>
+          <button
+            onClick={() => scroll('left')}
+            className="absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full glass-2 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+            aria-label="Previous"
+          >
+            <ChevronLeft className="size-5 text-foreground" />
+          </button>
+          <button
+            onClick={() => scroll('right')}
+            className="absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full glass-2 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+            aria-label="Next"
+          >
+            <ChevronRight className="size-5 text-foreground" />
+          </button>
+        </div>
+      </div>
+    </Section>
+  );
+}

package/src/marketing/Companies.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Section } from '../ui/section';
+import { Badge } from '../ui/badge';
+import { cn } from '../lib/utils';
+
+interface LogoItem {
+  src: string;
+  alt: string;
+  width?: number;
+  name?: string;
+  version?: string;
+  badge?: string;
+}
+
+interface CompaniesProps {
+  title?: string;
+  logos: LogoItem[];
+  variant?: 'marquee' | 'inline';
+}
+
+export function Companies({ title, logos, variant = 'marquee' }: CompaniesProps) {
+  if (variant === 'inline') {
+    return (
+      <Section className="py-12">
+        <div className="container-main flex flex-col items-center gap-8 text-center">
+          {title && <h2 className="text-base font-semibold sm:text-2xl text-foreground">{title}</h2>}
+          <div className="flex flex-wrap items-center justify-center gap-8">
+            {logos.map((logo, i) => (
+              <div key={i} className="flex items-center gap-2 text-sm font-medium">
+                <img
+                  src={logo.src}
+                  alt={logo.alt}
+                  width={logo.width || 32}
+                  height={logo.width || 32}
+                  className="h-6 w-6 object-contain opacity-70 dark:invert"
+                />
+                {logo.name && <span className={cn(!logo.name && 'sr-only')}>{logo.name}</span>}
+                {logo.version && <span className="text-muted-foreground">{logo.version}</span>}
+                {logo.badge && (
+                  <Badge variant="brand" className="text-xs px-1.5 py-0.5">{logo.badge}</Badge>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </Section>
+    );
+  }
+
+  return (
+    <Section className="py-12">
+      <div className="container-main">
+        {title && <p className="text-center text-sm text-muted-foreground mb-8">{title}</p>}
+        <div className="relative fade-x overflow-hidden">
+          <div className="flex gap-12 items-center" style={{ '--marquee-gap': '3rem' } as React.CSSProperties}>
+            <div className="flex gap-12 items-center animate-marquee">
+              {logos.map((logo, i) => (
+                <img key={i} src={logo.src} alt={logo.alt} width={logo.width || 120} className="h-8 w-auto object-contain grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all" />
+              ))}
+            </div>
+            <div className="flex gap-12 items-center animate-marquee" aria-hidden>
+              {logos.map((logo, i) => (
+                <img key={i} src={logo.src} alt="" width={logo.width || 120} className="h-8 w-auto object-contain grayscale opacity-60" />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Section>
+  );
+}

package/src/marketing/FAQ.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import React from 'react';
+import { Section } from '../ui/section';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from '../ui/accordion';
+
+interface FAQItemProps {
+  question: string;
+  children: React.ReactNode;
+}
+
+export function FAQItem({ question, children }: FAQItemProps) {
+  return (
+    <AccordionItem value={question}>
+      <AccordionTrigger>{question}</AccordionTrigger>
+      <AccordionContent>
+        <div className="text-muted-foreground leading-relaxed">{children}</div>
+      </AccordionContent>
+    </AccordionItem>
+  );
+}
+
+interface FAQProps {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+}
+
+export function FAQ({ title, description, children }: FAQProps) {
+  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>
+        )}
+        <Accordion type="single" collapsible>
+          {children}
+        </Accordion>
+      </div>
+    </Section>
+  );
+}

package/src/marketing/Features.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Section } from '../ui/section';
+
+interface FeatureProps {
+  icon?: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+export function Feature({ icon, title, description }: FeatureProps) {
+  return (
+    <div className="flex flex-col items-start p-6 rounded-xl glass-1 hover:glass-2 transition-all">
+      {icon && (
+        <div className="w-10 h-10 flex items-center justify-center rounded-lg bg-primary/10 text-primary mb-4">
+          {icon}
+        </div>
+      )}
+      <h3 className="text-lg font-semibold text-foreground mb-2">{title}</h3>
+      <p className="text-sm text-muted-foreground leading-relaxed">{description}</p>
+    </div>
+  );
+}
+
+interface FeaturesProps {
+  title?: string;
+  description?: string;
+  columns?: 2 | 3 | 4;
+  children: React.ReactNode;
+}
+
+export function Features({ title, description, columns = 3, children }: FeaturesProps) {
+  const gridCols = { 2: 'md:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-2 lg:grid-cols-4' };
+
+  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[columns]} gap-6`}>{children}</div>
+      </div>
+    </Section>
+  );
+}

package/src/marketing/Gallery.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Section } from '../ui/section';
+import { cn } from '../lib/utils';
+
+interface GalleryItemProps {
+  src: string;
+  alt: string;
+  caption?: string;
+}
+
+export function GalleryItem({ src, alt, caption }: GalleryItemProps) {
+  return (
+    <figure className="group overflow-hidden rounded-xl glass-1">
+      <div className="overflow-hidden">
+        <img
+          src={src}
+          alt={alt}
+          className="w-full h-auto object-cover transition-transform duration-300 group-hover:scale-105"
+        />
+      </div>
+      {caption && (
+        <figcaption className="p-4 text-sm text-muted-foreground">{caption}</figcaption>
+      )}
+    </figure>
+  );
+}
+
+interface GalleryProps {
+  title?: string;
+  description?: string;
+  columns?: 2 | 3 | 4;
+  children: React.ReactNode;
+}
+
+export function Gallery({ title, description, columns = 3, children }: GalleryProps) {
+  const gridCols = {
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-2 lg:grid-cols-3',
+    4: 'md:grid-cols-2 lg:grid-cols-4',
+  };
+
+  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={cn('grid grid-cols-1 gap-6', gridCols[columns])}>{children}</div>
+      </div>
+    </Section>
+  );
+}

package/src/marketing/Hero.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { cn } from '../lib/utils';
+import { Section } from '../ui/section';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import { Mockup } from '../ui/mockup';
+import Glow from '../ui/glow';
+
+interface HeroProps {
+  title: string;
+  description: string;
+  primaryCta?: { label: string; href: string };
+  secondaryCta?: { label: string; href: string };
+  badge?: string;
+  image?: string;
+  children?: React.ReactNode;
+}
+
+export function Hero({ title, description, primaryCta, secondaryCta, badge, image, children }: HeroProps) {
+  return (
+    <Section className="relative overflow-hidden">
+      <Glow variant="top" />
+      <div className="container-main relative z-10">
+        <div className="max-w-3xl mx-auto text-center">
+          {badge && (
+            <Badge variant="outline" className="animate-appear mb-6">
+              {badge}
+            </Badge>
+          )}
+          <h1 className="text-4xl md:text-6xl font-bold tracking-tight text-foreground mb-6 animate-appear [animation-delay:100ms]">
+            {title}
+          </h1>
+          <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto animate-appear [animation-delay:200ms]">
+            {description}
+          </p>
+          <div className="flex items-center justify-center gap-4 animate-appear [animation-delay:300ms]">
+            {primaryCta && (
+              <Button asChild size="lg">
+                <a href={primaryCta.href}>{primaryCta.label}</a>
+              </Button>
+            )}
+            {secondaryCta && (
+              <Button asChild variant="glow" size="lg">
+                <a href={secondaryCta.href}>{secondaryCta.label}</a>
+              </Button>
+            )}
+          </div>
+          {children}
+        </div>
+        {image && (
+          <div className="mt-16 animate-appear-zoom [animation-delay:400ms]">
+            <Mockup type="responsive" className="shadow-mockup w-full">
+              <img src={image} alt="" className="w-full" />
+            </Mockup>
+          </div>
+        )}
+      </div>
+    </Section>
+  );
+}

package/src/marketing/PageHero.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Section } from '../ui/section';
+import { Badge } from '../ui/badge';
+
+interface PageHeroProps {
+  title: string;
+  description?: string;
+  badge?: string;
+  children?: React.ReactNode;
+}
+
+export function PageHero({ title, description, badge, children }: PageHeroProps) {
+  return (
+    <Section className="py-16 md:py-24">
+      <div className="container-main text-center">
+        {badge && (
+          <Badge variant="outline" className="mb-4">
+            {badge}
+          </Badge>
+        )}
+        <h1 className="text-3xl md:text-5xl font-bold tracking-tight text-foreground mb-4">{title}</h1>
+        {description && <p className="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>}
+        {children}
+      </div>
+    </Section>
+  );
+}