@stampui/blocks 1.0.0 → 1.1.0

package/src/components/blocks/site-footer.tsx

@@ -0,0 +1,196 @@
+"use client"
+
+import * as React from "react"
+import { Github, Twitter, MessageSquare, Linkedin } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export interface FooterLinkItem {
+  label: string
+  href: string
+}
+
+export interface FooterLinkGroup {
+  title: string
+  items: FooterLinkItem[]
+}
+
+export interface FooterLink {
+  label: string
+  href: string
+  groups?: FooterLinkGroup[]
+}
+
+export type SocialPlatform = "github" | "twitter" | "discord" | "linkedin"
+
+export interface FooterSocial {
+  icon: SocialPlatform
+  href: string
+}
+
+export interface SiteFooterProps {
+  brand?: { name: string; href?: string }
+  links?: FooterLink[]
+  socials?: FooterSocial[]
+  copyright?: string
+  className?: string
+}
+
+const SOCIAL_ICONS: Record<SocialPlatform, React.ReactNode> = {
+  github: <Github size={16} />,
+  twitter: <Twitter size={16} />,
+  discord: <MessageSquare size={16} />,
+  linkedin: <Linkedin size={16} />,
+}
+
+const DEFAULT_LINKS: FooterLink[] = [
+  {
+    label: "Product",
+    href: "#",
+    groups: [
+      {
+        title: "Product",
+        items: [
+          { label: "Blocks", href: "/blocks" },
+          { label: "Components", href: "/blocks/components" },
+          { label: "Changelog", href: "/changelog" },
+          { label: "Roadmap", href: "/roadmap" },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Developers",
+    href: "#",
+    groups: [
+      {
+        title: "Developers",
+        items: [
+          { label: "Documentation", href: "/docs" },
+          { label: "CLI Reference", href: "/docs/cli" },
+          { label: "GitHub", href: "https://github.com" },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Company",
+    href: "#",
+    groups: [
+      {
+        title: "Company",
+        items: [
+          { label: "About", href: "/about" },
+          { label: "Blog", href: "/blog" },
+          { label: "Privacy", href: "/privacy" },
+          { label: "Terms", href: "/terms" },
+        ],
+      },
+    ],
+  },
+]
+
+function resolveColumns(links: FooterLink[]): FooterLinkGroup[] {
+  const cols: FooterLinkGroup[] = []
+  for (const link of links) {
+    if (link.groups && link.groups.length > 0) {
+      cols.push(...link.groups)
+    } else {
+      cols.push({ title: link.label, items: [{ label: link.label, href: link.href }] })
+    }
+  }
+  return cols
+}
+
+export function SiteFooter({
+  brand = { name: "StampUI", href: "/" },
+  links = DEFAULT_LINKS,
+  socials = [
+    { icon: "github", href: "https://github.com" },
+    { icon: "twitter", href: "https://twitter.com" },
+    { icon: "discord", href: "https://discord.com" },
+  ],
+  copyright,
+  className,
+}: SiteFooterProps) {
+  const columns = resolveColumns(links)
+  const year = new Date().getFullYear()
+
+  return (
+    <footer
+      className={cx(
+        "w-full border-t border-[#23252A] bg-[#070708] px-6 pt-14 pb-10",
+        className
+      )}
+    >
+      <div className="max-w-5xl mx-auto">
+        <div className="grid grid-cols-2 sm:grid-cols-[auto_1fr] gap-10 md:gap-16">
+          <div className="col-span-2 sm:col-span-1 flex flex-col gap-4">
+            {brand.href ? (
+              <a
+                href={brand.href}
+                className="text-sm font-semibold text-[#FAFAFA] transition-colors duration-[170ms] ease-out hover:text-[#FAFAFA]/70"
+              >
+                {brand.name}
+              </a>
+            ) : (
+              <span className="text-sm font-semibold text-[#FAFAFA]">{brand.name}</span>
+            )}
+
+            {socials && socials.length > 0 && (
+              <div className="flex items-center gap-3">
+                {socials.map((s, i) => (
+                  <a
+                    key={i}
+                    href={s.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={cx(
+                      "flex items-center justify-center w-8 h-8 rounded-xl",
+                      "border border-[#23252A] bg-[#09090B] text-muted-foreground",
+                      "transition-colors duration-[170ms] ease-out",
+                      "hover:border-[#FAFAFA]/20 hover:text-[#FAFAFA]"
+                    )}
+                  >
+                    {SOCIAL_ICONS[s.icon]}
+                  </a>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="col-span-2 sm:col-span-1 grid grid-cols-2 sm:grid-cols-3 gap-8">
+            {columns.map((col, i) => (
+              <div key={i} className="flex flex-col gap-3">
+                <span className="text-xs font-semibold text-[#FAFAFA] uppercase tracking-wider">
+                  {col.title}
+                </span>
+                <ul className="flex flex-col gap-2">
+                  {col.items.map((item, j) => (
+                    <li key={j}>
+                      <a
+                        href={item.href}
+                        className={cx(
+                          "text-sm text-muted-foreground",
+                          "transition-colors duration-[170ms] ease-out",
+                          "hover:text-[#FAFAFA]"
+                        )}
+                      >
+                        {item.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="mt-12 pt-6 border-t border-[#23252A]">
+          <p className="text-xs text-muted-foreground">
+            {copyright ?? `© ${year} ${brand.name}. All rights reserved.`}
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/src/components/blocks/social-proof-bar.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+export interface LogoItem {
+  name: string
+  src?: string
+  href?: string
+}
+
+export interface SocialProofBarProps {
+  label?: string
+  logos?: LogoItem[]
+  className?: string
+}
+
+const defaultLogos: LogoItem[] = [
+  { name: "Vercel" },
+  { name: "Linear" },
+  { name: "Resend" },
+  { name: "PlanetScale" },
+  { name: "Railway" },
+  { name: "Liveblocks" },
+]
+
+function LogoEntry({ item }: { item: LogoItem }) {
+  const inner = item.src ? (
+    <img
+      src={item.src}
+      alt={item.name}
+      className="h-5 w-auto object-contain opacity-50 transition-opacity duration-150 ease-out group-hover:opacity-75"
+    />
+  ) : (
+    <span className="text-xs font-semibold tracking-wide text-muted-foreground opacity-60 transition-opacity duration-150 ease-out group-hover:opacity-90">
+      {item.name}
+    </span>
+  )
+
+  if (item.href) {
+    return (
+      <a
+        href={item.href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="group flex items-center"
+        aria-label={item.name}
+      >
+        {inner}
+      </a>
+    )
+  }
+
+  return <div className="group flex items-center">{inner}</div>
+}
+
+export function SocialProofBar({
+  label = "Trusted by teams at",
+  logos = defaultLogos,
+  className,
+}: SocialProofBarProps) {
+  return (
+    <div className={cx("w-full", className)}>
+      <div className="border-t border-[#23252A]" />
+      <div className="mx-auto flex max-w-5xl flex-col items-center gap-5 px-6 py-8 sm:flex-row sm:gap-8">
+        {label && (
+          <p className="shrink-0 text-xs text-muted-foreground opacity-60 sm:whitespace-nowrap">
+            {label}
+          </p>
+        )}
+        {label && (
+          <div className="hidden h-4 w-px bg-[#23252A] sm:block" aria-hidden />
+        )}
+        <div className="flex flex-wrap items-center justify-center gap-x-8 gap-y-4 sm:justify-start">
+          {logos.map((logo, i) => (
+            <LogoEntry key={i} item={logo} />
+          ))}
+        </div>
+      </div>
+      <div className="border-b border-[#23252A]" />
+    </div>
+  )
+}

package/src/components/blocks/team-grid.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import { Github, Twitter, Linkedin } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export interface TeamMember {
+  name: string
+  role: string
+  bio?: string
+  avatarUrl?: string
+  socials?: {
+    github?: string
+    twitter?: string
+    linkedin?: string
+  }
+}
+
+export interface TeamGridProps {
+  members: TeamMember[]
+  title?: string
+  columns?: 2 | 3 | 4
+  className?: string
+}
+
+const colClass: Record<2 | 3 | 4, string> = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4",
+}
+
+function getInitials(name: string): string {
+  return name
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2)
+}
+
+const defaultMembers: TeamMember[] = [
+  {
+    name: "Aria Voss",
+    role: "Engineering Lead",
+    bio: "Builds distributed systems and spends too much time in the terminal.",
+    socials: { github: "#", twitter: "#", linkedin: "#" },
+  },
+  {
+    name: "Tomás Reyes",
+    role: "Product Designer",
+    bio: "Turns complex workflows into calm, focused interfaces.",
+    socials: { github: "#", linkedin: "#" },
+  },
+  {
+    name: "Lena Krüger",
+    role: "Developer Advocate",
+    bio: "Writes docs, builds demos, and advocates for sensible APIs.",
+    socials: { github: "#", twitter: "#" },
+  },
+  {
+    name: "Jin Park",
+    role: "Infrastructure",
+    bio: "Keeps the lights on and the deploys green.",
+    socials: { github: "#", linkedin: "#" },
+  },
+  {
+    name: "Priya Nair",
+    role: "Frontend Engineer",
+    bio: "Crafts accessible, performant component systems.",
+    socials: { github: "#", twitter: "#", linkedin: "#" },
+  },
+  {
+    name: "Sam Okafor",
+    role: "Backend Engineer",
+    bio: "API design, data modeling, and strong opinions about naming.",
+    socials: { github: "#" },
+  },
+]
+
+export function TeamGrid({
+  members = defaultMembers,
+  title,
+  columns = 3,
+  className,
+}: TeamGridProps) {
+  return (
+    <section className={cx("w-full py-16 px-6 bg-[#070708]", className)}>
+      <div className="mx-auto max-w-5xl">
+        {title && (
+          <h2 className="text-2xl font-semibold text-[#FAFAFA] tracking-tight mb-10">
+            {title}
+          </h2>
+        )}
+        <div className={cx("grid grid-cols-1 gap-4", colClass[columns])}>
+          {members.map((member, i) => (
+            <div
+              key={i}
+              className="flex flex-col gap-4 rounded-xl border border-[#23252A] bg-[#09090B] p-5 transition-colors duration-[180ms] ease-out hover:border-[#2e3138] hover:bg-[#101114]"
+            >
+              <div className="flex items-center gap-3">
+                {member.avatarUrl ? (
+                  <img
+                    src={member.avatarUrl}
+                    alt={member.name}
+                    className="h-10 w-10 rounded-xl object-cover border border-[#23252A] shrink-0"
+                  />
+                ) : (
+                  <div className="h-10 w-10 rounded-xl border border-[#23252A] bg-[#101114] flex items-center justify-center shrink-0">
+                    <span className="text-xs font-semibold text-muted-foreground">
+                      {getInitials(member.name)}
+                    </span>
+                  </div>
+                )}
+                <div className="min-w-0">
+                  <p className="text-sm font-medium text-[#FAFAFA] truncate">{member.name}</p>
+                  <p className="text-xs text-muted-foreground truncate">{member.role}</p>
+                </div>
+              </div>
+
+              {member.bio && (
+                <p className="text-xs text-muted-foreground leading-relaxed">{member.bio}</p>
+              )}
+
+              {member.socials && (
+                <div className="flex items-center gap-2 mt-auto pt-1">
+                  {member.socials.github && (
+                    <a
+                      href={member.socials.github}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-muted-foreground transition-colors duration-[150ms] ease-out hover:text-[#FAFAFA]"
+                      aria-label={`${member.name} on GitHub`}
+                    >
+                      <Github size={14} />
+                    </a>
+                  )}
+                  {member.socials.twitter && (
+                    <a
+                      href={member.socials.twitter}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-muted-foreground transition-colors duration-[150ms] ease-out hover:text-[#FAFAFA]"
+                      aria-label={`${member.name} on Twitter`}
+                    >
+                      <Twitter size={14} />
+                    </a>
+                  )}
+                  {member.socials.linkedin && (
+                    <a
+                      href={member.socials.linkedin}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-muted-foreground transition-colors duration-[150ms] ease-out hover:text-[#FAFAFA]"
+                      aria-label={`${member.name} on LinkedIn`}
+                    >
+                      <Linkedin size={14} />
+                    </a>
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/components/blocks/testimonials-wall.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+export interface TestimonialAuthor {
+  name: string
+  role: string
+  avatarUrl?: string
+}
+
+export interface TestimonialItem {
+  quote: string
+  author: TestimonialAuthor
+}
+
+export interface TestimonialsWallProps {
+  items?: TestimonialItem[]
+  title?: string
+  className?: string
+}
+
+const defaultItems: TestimonialItem[] = [
+  {
+    quote: "StampUI cut our component scaffolding time in half. Every block lands exactly where we need it, with zero runtime overhead.",
+    author: { name: "Alex Rivera", role: "Staff Engineer, Vercel" },
+  },
+  {
+    quote: "Finally a component library that doesn't fight our design system. We own the code, we change what we want.",
+    author: { name: "Priya Nair", role: "Frontend Lead, Linear" },
+  },
+  {
+    quote: "The dark-mode polish is remarkable. We shipped our dashboard in two days instead of two weeks.",
+    author: { name: "Jordan Kim", role: "Product Engineer, Resend" },
+  },
+  {
+    quote: "I've tried every UI library. StampUI is the only one I've never had to fight against.",
+    author: { name: "Sam Okafor", role: "CTO, Liveblocks" },
+  },
+  {
+    quote: "Using the CLI from the terminal while on a call and shipping production UI. This is the workflow I wanted.",
+    author: { name: "Taylor Chen", role: "Senior Engineer, PlanetScale" },
+  },
+  {
+    quote: "Every team member can now stamp a block and own it immediately. Onboarding velocity is through the roof.",
+    author: { name: "Dana Walsh", role: "Engineering Manager, Railway" },
+  },
+]
+
+function Initials({ name }: { name: string }) {
+  const parts = name.trim().split(" ")
+  const initials =
+    parts.length >= 2
+      ? `${parts[0][0]}${parts[parts.length - 1][0]}`
+      : parts[0].slice(0, 2)
+  return (
+    <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#101114] border border-[#23252A] text-xs font-semibold text-[#FAFAFA] select-none">
+      {initials.toUpperCase()}
+    </span>
+  )
+}
+
+export function TestimonialsWall({
+  items = defaultItems,
+  title,
+  className,
+}: TestimonialsWallProps) {
+  return (
+    <section className={cx("w-full py-24 px-6", className)}>
+      <div className="mx-auto max-w-5xl">
+        {title && (
+          <h2 className="mb-12 text-center text-2xl font-semibold tracking-tight text-[#FAFAFA]">
+            {title}
+          </h2>
+        )}
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {items.map((item, i) => (
+            <div
+              key={i}
+              className="flex flex-col justify-between gap-5 rounded-xl border border-[#23252A] bg-[#09090B] p-5"
+            >
+              <p className="text-sm leading-relaxed text-muted-foreground">
+                &ldquo;{item.quote}&rdquo;
+              </p>
+              <div className="flex items-center gap-3">
+                {item.author.avatarUrl ? (
+                  <img
+                    src={item.author.avatarUrl}
+                    alt={item.author.name}
+                    className="h-8 w-8 shrink-0 rounded-full border border-[#23252A] object-cover"
+                  />
+                ) : (
+                  <Initials name={item.author.name} />
+                )}
+                <div className="min-w-0">
+                  <p className="truncate text-sm font-medium text-[#FAFAFA]">
+                    {item.author.name}
+                  </p>
+                  <p className="truncate text-xs text-muted-foreground">
+                    {item.author.role}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/components/blocks/waitlist-section.tsx

@@ -0,0 +1,102 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/core/button"
+import { cx } from "@/lib/cx"
+
+export interface WaitlistSectionProps {
+  headline?: string
+  subtext?: string
+  placeholder?: string
+  buttonLabel?: string
+  count?: number
+  className?: string
+}
+
+export function WaitlistSection({
+  headline = "Be first to get access.",
+  subtext = "We're rolling out access gradually. Drop your email to reserve your spot.",
+  placeholder = "you@company.com",
+  buttonLabel = "Join Waitlist",
+  count = 2847,
+  className,
+}: WaitlistSectionProps) {
+  const [email, setEmail] = React.useState("")
+  const [submitted, setSubmitted] = React.useState(false)
+  const [error, setError] = React.useState("")
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    const trimmed = email.trim()
+    if (!trimmed || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) {
+      setError("Enter a valid email address.")
+      return
+    }
+    setError("")
+    setSubmitted(true)
+  }
+
+  const formattedCount = count.toLocaleString()
+
+  return (
+    <section
+      className={cx(
+        "w-full py-20 px-6 flex flex-col items-center text-center",
+        className
+      )}
+    >
+      <h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-[#FAFAFA] max-w-xl leading-tight">
+        {headline}
+      </h2>
+
+      {subtext && (
+        <p className="mt-4 text-base text-muted-foreground max-w-md leading-relaxed">
+          {subtext}
+        </p>
+      )}
+
+      <div className="mt-3 flex items-center gap-1.5">
+        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
+        <span className="text-xs text-muted-foreground font-medium">
+          {formattedCount} developers waiting
+        </span>
+      </div>
+
+      {submitted ? (
+        <div className="mt-8 px-6 py-4 rounded-xl border border-[#23252A] bg-[#09090B] text-sm text-[#FAFAFA] font-medium">
+          You&apos;re on the list. We&apos;ll reach out soon.
+        </div>
+      ) : (
+        <form
+          onSubmit={handleSubmit}
+          className="mt-8 w-full max-w-md flex flex-col sm:flex-row gap-2"
+          noValidate
+        >
+          <div className="flex-1 flex flex-col">
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => {
+                setEmail(e.target.value)
+                if (error) setError("")
+              }}
+              placeholder={placeholder}
+              className={cx(
+                "h-10 w-full rounded-xl border bg-[#101114] px-4 text-sm text-[#FAFAFA] placeholder:text-muted-foreground outline-none",
+                "transition-colors duration-[170ms] ease-out",
+                "focus:border-[#FAFAFA]/20",
+                error ? "border-red-500/60" : "border-[#23252A]"
+              )}
+            />
+            {error && (
+              <span className="mt-1.5 text-xs text-red-400 text-left">{error}</span>
+            )}
+          </div>
+          <Button type="submit" className="h-10 shrink-0">
+            {buttonLabel}
+          </Button>
+        </form>
+      )}
+    </section>
+  )
+}