@shipsite.dev/components 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipsite.dev/components",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -20,6 +20,7 @@
   },
   "files": [
     "dist/",
+    "src/",
     "components.json"
   ],
   "scripts": {

package/src/blog/BlogArticle.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface BlogArticleProps {
+  children: React.ReactNode;
+  contentFolder?: string;
+}
+
+export function BlogArticle({ children }: BlogArticleProps) {
+  return (
+    <article className="py-12 md:py-20">
+      <div className="container-main max-w-3xl">{children}</div>
+    </article>
+  );
+}

package/src/blog/BlogCTA.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Button } from '../ui/button';
+
+interface BlogCTAProps {
+  title: string;
+  buttonText: string;
+  buttonHref: string;
+}
+
+export function BlogCTA({ title, buttonText, buttonHref }: BlogCTAProps) {
+  return (
+    <div className="my-10 p-8 rounded-2xl glass-1 text-center">
+      <h3 className="text-xl font-bold text-foreground mb-4">{title}</h3>
+      <Button asChild>
+        <a href={buttonHref}>{buttonText}</a>
+      </Button>
+    </div>
+  );
+}

package/src/blog/BlogCTABanner.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Button } from '../ui/button';
+import Glow from '../ui/glow';
+
+interface BlogCTABannerProps {
+  title: string;
+  description: string;
+  buttonText: string;
+  buttonLink: string;
+}
+
+export function BlogCTABanner({ title, description, buttonText, buttonLink }: BlogCTABannerProps) {
+  return (
+    <div className="my-12 rounded-2xl glass-4 p-10 text-center relative overflow-hidden">
+      <Glow variant="center" />
+      <div className="relative z-10">
+        <h3 className="text-2xl font-bold text-foreground mb-3">{title}</h3>
+        <p className="text-muted-foreground mb-6 max-w-lg mx-auto">{description}</p>
+        <Button asChild>
+          <a href={buttonLink}>{buttonText}</a>
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/blog/BlogFAQ.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import React from 'react';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from '../ui/accordion';
+
+interface BlogFAQProps {
+  title: string;
+  items: Array<{ question: string; answer: string }>;
+}
+
+export function BlogFAQ({ title, items }: BlogFAQProps) {
+  return (
+    <div className="my-12">
+      <h2 className="text-2xl font-bold text-foreground mb-6">{title}</h2>
+      <Accordion type="single" collapsible>
+        {items.map((item, i) => (
+          <AccordionItem key={i} value={`faq-${i}`}>
+            <AccordionTrigger>{item.question}</AccordionTrigger>
+            <AccordionContent>
+              <div className="text-muted-foreground leading-relaxed">{item.answer}</div>
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+}

package/src/blog/BlogIndex.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Section } from '../ui/section';
+
+interface BlogIndexProps {
+  title?: string;
+  description?: string;
+  children?: React.ReactNode;
+}
+
+export function BlogIndex({ title, description, children }: BlogIndexProps) {
+  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">{description}</p>}
+          </div>
+        )}
+        {children}
+      </div>
+    </Section>
+  );
+}

package/src/blog/BlogIntro.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export function BlogIntro({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="text-lg text-muted-foreground leading-relaxed mb-8 [&>p]:mb-4">
+      {children}
+    </div>
+  );
+}

package/src/blog/BlogTable.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface BlogTableProps {
+  headers: string[];
+  rows: string[][];
+}
+
+export function BlogTable({ headers, rows }: BlogTableProps) {
+  return (
+    <div className="my-8 overflow-x-auto rounded-lg border border-border">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="bg-muted">
+            {headers.map((h, i) => <th key={i} className="text-left py-3 px-4 font-semibold text-foreground">{h}</th>)}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, i) => (
+            <tr key={i} className="border-t border-border">
+              {row.map((cell, j) => <td key={j} className="py-3 px-4 text-muted-foreground">{cell}</td>)}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/blog/BlogTip.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface BlogTipProps {
+  title?: string;
+  children: React.ReactNode;
+}
+
+export function BlogTip({ title = 'Tip', children }: BlogTipProps) {
+  return (
+    <div className="my-6 p-5 rounded-lg bg-emerald-50 border border-emerald-200">
+      <p className="font-semibold text-emerald-700 text-sm mb-1">{title}</p>
+      <div className="text-sm text-muted-foreground">{children}</div>
+    </div>
+  );
+}

package/src/blog/StartFreeNowCTA.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Check } from 'lucide-react';
+import { Button } from '../ui/button';
+
+interface StartFreeNowCTAProps {
+  title: string;
+  bullets: string[];
+  buttonText: string;
+  buttonHref: string;
+}
+
+export function StartFreeNowCTA({ title, bullets, buttonText, buttonHref }: StartFreeNowCTAProps) {
+  return (
+    <div className="my-12 p-8 rounded-2xl glass-3">
+      <h3 className="text-xl font-bold text-foreground mb-4">{title}</h3>
+      <ul className="space-y-2 mb-6">
+        {bullets.map((bullet, i) => (
+          <li key={i} className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Check className="w-4 h-4 text-primary shrink-0" />
+            {bullet}
+          </li>
+        ))}
+      </ul>
+      <Button asChild>
+        <a href={buttonHref}>{buttonText}</a>
+      </Button>
+    </div>
+  );
+}

package/src/context/ShipSiteProvider.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import React, { createContext, useContext } from 'react';
+
+export interface ShipSiteContextValue {
+  siteName: string;
+  siteUrl: string;
+  logo?: string | { light: string; dark: string };
+  ogImage?: string;
+  colors: {
+    primary: string;
+    accent: string;
+    background: string;
+    text: string;
+  };
+  navigation: {
+    items: Array<{ label: string; href: string }>;
+    cta?: { label: string; href: string };
+  };
+  footer: {
+    columns?: Array<{
+      title: string;
+      links: Array<{ label: string; href: string }>;
+    }>;
+    social?: Array<{ platform: string; href: string }>;
+    copyright?: string;
+  };
+  navLinks: Record<string, string>;
+  alternatePathMap: Record<string, Record<string, string>>;
+  locale: string;
+  locales: string[];
+  defaultLocale: string;
+}
+
+const ShipSiteContext = createContext<ShipSiteContextValue | null>(null);
+
+export function ShipSiteProvider({
+  children,
+  value,
+}: {
+  children: React.ReactNode;
+  value: ShipSiteContextValue;
+}) {
+  return (
+    <ShipSiteContext.Provider value={value}>{children}</ShipSiteContext.Provider>
+  );
+}
+
+export function useShipSite() {
+  const context = useContext(ShipSiteContext);
+  if (!context) {
+    throw new Error('useShipSite must be used within a ShipSiteProvider');
+  }
+  return context;
+}
+
+export function useNavLinks() {
+  return useShipSite().navLinks;
+}
+
+export function useResolveHref() {
+  const { navLinks } = useShipSite();
+  return (href: string): string => {
+    if (
+      href.startsWith('http') ||
+      href.startsWith('#') ||
+      href.startsWith('mailto:')
+    ) {
+      return href;
+    }
+    const slug = href.startsWith('/') ? href.slice(1) : href;
+    return navLinks[slug] ?? href;
+  };
+}
+
+export function useAlternateLinks() {
+  return useShipSite().alternatePathMap;
+}

package/src/context/ThemeProvider.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { ThemeProvider as NextThemeProvider } from 'next-themes';
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return <>{children}</>;
+  }
+
+  return (
+    <NextThemeProvider
+      attribute="class"
+      defaultTheme="dark"
+      enableSystem
+    >
+      {children}
+    </NextThemeProvider>
+  );
+}

package/src/index.ts

@@ -0,0 +1,63 @@
+// @shipsite.dev/components — MDX Component Registry
+
+// Context
+export {
+  ShipSiteProvider,
+  useShipSite,
+  useNavLinks,
+  useResolveHref,
+  useAlternateLinks,
+} from './context/ShipSiteProvider';
+export type { ShipSiteContextValue } from './context/ShipSiteProvider';
+
+// Theme
+export { ThemeProvider } from './context/ThemeProvider';
+export { ThemeToggle } from './ui/theme-toggle';
+
+// Layout
+export { Header } from './layout/Header';
+export { Footer } from './layout/Footer';
+
+// Marketing
+export { Hero } from './marketing/Hero';
+export { PageHero } from './marketing/PageHero';
+export { Features, Feature } from './marketing/Features';
+export {
+  AlternatingFeatures,
+  AlternatingFeatureRow,
+  AlternatingFeatureItem,
+} from './marketing/AlternatingFeatures';
+export {
+  PricingSection,
+  PricingPlan,
+  ComparisonRow,
+  ComparisonCategory,
+} from './marketing/PricingSection';
+export { Companies } from './marketing/Companies';
+export { Testimonial } from './marketing/Testimonial';
+export { BannerCTA, BannerFeature } from './marketing/BannerCTA';
+export { FAQ, FAQItem } from './marketing/FAQ';
+export { Steps, Step } from './marketing/Steps';
+export { CardGrid, CardGridItem } from './marketing/CardGrid';
+export { CalloutCard } from './marketing/CalloutCard';
+export { Stats, Stat } from './marketing/Stats';
+export { Testimonials, TestimonialCard } from './marketing/Testimonials';
+export { BentoGrid, BentoItem } from './marketing/BentoGrid';
+export { Gallery, GalleryItem } from './marketing/Gallery';
+export { SocialProof } from './marketing/SocialProof';
+export { Carousel, CarouselItem } from './marketing/Carousel';
+export { TabsSection, TabItem } from './marketing/TabsSection';
+
+// Blog
+export { BlogArticle } from './blog/BlogArticle';
+export { BlogIndex } from './blog/BlogIndex';
+export { BlogCTA } from './blog/BlogCTA';
+export { BlogCTABanner } from './blog/BlogCTABanner';
+export { BlogFAQ } from './blog/BlogFAQ';
+export { BlogIntro } from './blog/BlogIntro';
+export { BlogTable } from './blog/BlogTable';
+export { BlogTip } from './blog/BlogTip';
+export { StartFreeNowCTA } from './blog/StartFreeNowCTA';
+
+// Legal
+export { LegalPage, LegalSection } from './legal/LegalPage';

package/src/layout/Footer.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import React from 'react';
+import { useShipSite, useResolveHref } from '../context/ShipSiteProvider';
+import {
+  FooterRoot,
+  FooterContent,
+  FooterColumn,
+  FooterBottom,
+} from '../ui/footer';
+
+export function Footer() {
+  const { siteName, footer } = useShipSite();
+  const resolveHref = useResolveHref();
+
+  return (
+    <footer className="border-t border-border">
+      <FooterRoot>
+        <div className="container-main">
+          <FooterContent>
+            {footer.columns?.map((column) => (
+              <FooterColumn key={column.title}>
+                <h3 className="text-sm font-semibold text-foreground">
+                  {column.title}
+                </h3>
+                <ul className="flex flex-col gap-2">
+                  {column.links.map((link) => (
+                    <li key={link.href}>
+                      <a
+                        href={resolveHref(link.href)}
+                        className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                      >
+                        {link.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </FooterColumn>
+            ))}
+          </FooterContent>
+
+          <FooterBottom>
+            <p>
+              {footer.copyright ||
+                `\u00A9 ${new Date().getFullYear()} ${siteName}`}
+            </p>
+
+            {footer.social && footer.social.length > 0 && (
+              <div className="flex items-center gap-4">
+                {footer.social.map((social) => (
+                  <a
+                    key={social.href}
+                    href={social.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="hover:text-foreground transition-colors capitalize"
+                  >
+                    {social.platform}
+                  </a>
+                ))}
+              </div>
+            )}
+          </FooterBottom>
+        </div>
+      </FooterRoot>
+    </footer>
+  );
+}

package/src/layout/Header.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import React from 'react';
+import { Menu } from 'lucide-react';
+import { useShipSite, useResolveHref } from '../context/ShipSiteProvider';
+import { cn } from '../lib/utils';
+import { Button } from '../ui/button';
+import { Navbar, NavbarLeft, NavbarRight } from '../ui/navbar';
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetTitle,
+} from '../ui/sheet';
+import { ThemeToggle } from '../ui/theme-toggle';
+
+export function Header() {
+  const { siteName, logo, navigation, locale, defaultLocale } = useShipSite();
+  const resolveHref = useResolveHref();
+
+  const logoSrc = typeof logo === 'string' ? logo : logo?.light;
+
+  return (
+    <header className="sticky top-0 z-50 bg-background/80 backdrop-blur-lg border-b border-border">
+      <div className="container-main">
+        <Navbar>
+          <NavbarLeft>
+            <a
+              href={locale === defaultLocale ? '/' : `/${locale}`}
+              className="flex items-center gap-2"
+            >
+              {logoSrc && (
+                <img src={logoSrc} alt={siteName} className="h-8 w-auto" />
+              )}
+              <span className="font-semibold text-lg text-foreground">
+                {siteName}
+              </span>
+            </a>
+          </NavbarLeft>
+
+          <NavbarRight className="hidden md:flex">
+            {navigation.items.map((item) => (
+              <a
+                key={item.href}
+                href={resolveHref(item.href)}
+                className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+              >
+                {item.label}
+              </a>
+            ))}
+            <ThemeToggle />
+            {navigation.cta && (
+              <Button asChild size="sm">
+                <a href={navigation.cta.href}>
+                  {navigation.cta.label}
+                </a>
+              </Button>
+            )}
+          </NavbarRight>
+
+          <div className="md:hidden">
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button variant="ghost" size="icon" aria-label="Toggle menu">
+                  <Menu className="size-5" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="right">
+                <SheetTitle className="sr-only">Navigation</SheetTitle>
+                <nav className="flex flex-col gap-4 mt-8">
+                  {navigation.items.map((item) => (
+                    <a
+                      key={item.href}
+                      href={resolveHref(item.href)}
+                      className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      {item.label}
+                    </a>
+                  ))}
+                  {navigation.cta && (
+                    <Button asChild className="mt-2">
+                      <a href={navigation.cta.href}>
+                        {navigation.cta.label}
+                      </a>
+                    </Button>
+                  )}
+                </nav>
+              </SheetContent>
+            </Sheet>
+          </div>
+        </Navbar>
+      </div>
+    </header>
+  );
+}

package/src/legal/LegalPage.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface LegalSectionProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+export function LegalSection({ title, children }: LegalSectionProps) {
+  return (
+    <div className="mb-8">
+      <h2 className="text-xl font-bold text-foreground mb-4">{title}</h2>
+      <div className="text-muted-foreground text-sm leading-relaxed [&>p]:mb-3 [&>ul]:list-disc [&>ul]:pl-5 [&>ul]:mb-3">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+interface LegalPageProps {
+  title: string;
+  lastUpdated?: string;
+  children: React.ReactNode;
+}
+
+export function LegalPage({ title, lastUpdated, children }: LegalPageProps) {
+  return (
+    <section className="py-12 md:py-20">
+      <div className="container-main max-w-3xl">
+        <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-2">{title}</h1>
+        {lastUpdated && <p className="text-sm text-muted-foreground mb-8">Last updated: {lastUpdated}</p>}
+        {children}
+      </div>
+    </section>
+  );
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/marketing/AlternatingFeatures.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Section } from '../ui/section';
+import { Mockup } from '../ui/mockup';
+
+interface AlternatingFeatureItemProps {
+  icon?: string;
+  title: string;
+  description: string;
+}
+
+export function AlternatingFeatureItem({ icon, title, description }: AlternatingFeatureItemProps) {
+  return (
+    <div className="flex gap-3 items-start">
+      {icon && <span className="text-primary text-xl mt-0.5">{icon}</span>}
+      <div>
+        <h4 className="font-semibold text-foreground mb-1">{title}</h4>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </div>
+    </div>
+  );
+}
+
+interface AlternatingFeatureRowProps {
+  title: string;
+  description?: string;
+  image: string;
+  imageDark?: string;
+  imageAlt?: string;
+  children?: React.ReactNode;
+}
+
+export function AlternatingFeatureRow({ title, description, image, imageDark, imageAlt, children }: AlternatingFeatureRowProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center py-12 [&:nth-child(even)>div:first-child]:md:order-2">
+      <div>
+        <h3 className="text-2xl md:text-3xl font-bold text-foreground mb-4">{title}</h3>
+        {description && <p className="text-muted-foreground mb-6">{description}</p>}
+        {children && <div className="space-y-4">{children}</div>}
+      </div>
+      <Mockup type="responsive">
+        {imageDark ? (
+          <>
+            <img src={image} alt={imageAlt || title} className="w-full dark:hidden" />
+            <img src={imageDark} alt={imageAlt || title} className="w-full hidden dark:block" />
+          </>
+        ) : (
+          <img src={image} alt={imageAlt || title} className="w-full" />
+        )}
+      </Mockup>
+    </div>
+  );
+}
+
+interface AlternatingFeaturesProps {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+}
+
+export function AlternatingFeatures({ title, description, children }: AlternatingFeaturesProps) {
+  return (
+    <Section>
+      <div className="container-main">
+        {(title || description) && (
+          <div className="text-center mb-16">
+            {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="divide-y divide-border">{children}</div>
+      </div>
+    </Section>
+  );
+}