diff --git a/CLAUDE.md b/CLAUDE.md index a9caa8a..9196ad9 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -106,4 +106,5 @@ Import from `@rivet-gg/icons`. The full Font Awesome Pro library is available. C - Dark `ink` panels (`editorial/InkPanel`) are reserved for code, terminal, screenshot, and data moments. Code and data plates stay flat ink; the oil-texture backdrop (`textureSrc`) is for editorial moments only (CTA colophon, 404). - Orange is the spark: at most one `accent`/ember CTA per page. White text sits only on `accent-deep` (`#D63E00`) or `ink` fills, never on `accent`. Pine (`#2E4034`) is the structural color for links, eyebrows, diagrams, and selected states; sage (`#93A286`) replaces it inside ink panels. - No drop shadows on marketing cards or imagery; depth comes from `border-ink/10..25` hairlines, `bg-white/55` card fills, and `paper-mid`/`paper-deep` layering (inside ink panels: `border-cream/10..15`). Shadows stay acceptable on functional overlays (dropdowns, tooltips, modals) and the header's glass inset highlight. +- Buttons use the constants in `src/components/marketing/typography.tsx` — metric `rounded-md px-4 py-2 text-sm font-medium` for all. Primary accent = `PRODUCT_HERO_PRIMARY_BUTTON_CLASS` (`accent-deep`, the page's one ember); primary ink = `PRIMARY_INK_BUTTON_CLASS`; the only secondary = `PRODUCT_HERO_SECONDARY_BUTTON_CLASS` (`border-ink/15 bg-white/55`, filled — the borderless `border-ink/20` ghost is retired); light-on-ink primary = `bg-white text-ink hover:bg-white/90`. Do not hand-write button class strings. - `ink-faint` text is for captions and metadata at 12px+; body copy uses `ink-soft` or `ink`. diff --git a/STYLING_CONSISTENCY_TODO.md b/STYLING_CONSISTENCY_TODO.md deleted file mode 100644 index e966ff0..0000000 --- a/STYLING_CONSISTENCY_TODO.md +++ /dev/null @@ -1,98 +0,0 @@ -# Styling Consistency TODO - -Update all solution pages and static marketing pages to match the landing page styling. - -## High Priority Changes - -### 1. Feature Card Icon Treatment -**Landing Page (New):** Icon only with `text-zinc-500` or `text-zinc-600`, `mb-3` -**Solution Pages (Old):** Icon wrapped in box `flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-white/5` - -**Action:** Remove icon boxes, use plain icons with `text-zinc-500` color. - -### 2. Feature Card Title Styling -**Landing Page:** `text-sm font-normal text-white` or `text-base font-normal text-white` -**Solution Pages:** `text-sm font-medium uppercase tracking-wider text-white` - -**Action:** Remove `uppercase tracking-wider`, change `font-medium` to `font-normal`. - -### 3. Feature Card Title Margin -**Landing Page:** `mb-1` or `mb-2` -**Solution Pages:** `mb-4` - -**Action:** Standardize to `mb-1`. - -### 4. Description Text Color -**Landing Page:** `text-zinc-500` -**Solution Pages:** `text-zinc-400` - -**Action:** Standardize to `text-zinc-500`. - -### 5. Section Header Margin -**Landing Page:** `mb-2` on h2 -**Solution Pages:** `mb-3` on h2 - -**Action:** Standardize to `mb-2`. - ---- - -## Medium Priority Changes - -### 6. CodeBlock Standardization -- Window dots: `w-2.5 h-2.5` (not `w-3 h-3`) -- Border radius: `rounded-lg` (not `rounded-xl`) -- Header padding: `px-4 py-2` (not `px-4 py-3`) - -### 7. Badge Component -**Landing Page:** `px-2 py-0.5 text-xs` with motion wrapper -**Solution Pages:** `px-3 py-1 text-xs` no animation - -**Action:** Standardize to `px-3 py-1`. - -### 8. Border Variations -**Action:** Use `border-white/10` for section borders and cards, `border-white/5` for subtle internal elements only. - -### 9. Ecosystem/Integration Tags -**Landing Page:** `rounded-md border-white/5 px-2 py-1 text-xs` -**Solution Pages:** `rounded-full border-white/10 px-4 py-2 text-sm` - -**Action:** Standardize to `rounded-md border border-white/5 px-2 py-1 text-xs`. - -### 10. CTA Section Container -**Action:** Standardize to `max-w-3xl mx-auto px-6 text-center`. - ---- - -## Low Priority Changes - -### 11. Animation Stagger Delay -**Action:** Standardize to `idx * 0.1`. - -### 12. Grid Gap -**Action:** Standardize feature grids to `gap-8`. - -### 13. Text Selection (Global) -**Action:** Move `selection:bg-[#FF4500]/30 selection:text-orange-200` to `main.css`. - -### 14. Diagram/Visualization Containers -**Action:** Standardize to `rounded-lg border border-white/10 bg-black`. - -### 15. Status Badges -**Action:** Standardize to `rounded-full border border-[#FF4500]/20 bg-[#FF4500]/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-[#FF4500]`. - ---- - -## Files to Update - -- [ ] `AgentsPage.tsx` -- [ ] `WorkflowsPage.tsx` -- [ ] `GamesPage.tsx` -- [ ] `page.tsx` (solutions) -- [ ] `PricingPageClient.tsx` -- [ ] `GameServersPage.tsx` -- [ ] `GeoDistributedDBPage.tsx` -- [ ] `PerTenantDBPage.tsx` -- [ ] `CollaborativeStatePage.tsx` -- [ ] `AppGeneratorsPage.tsx` -- [ ] `UserSessionStorePage.tsx` -- [ ] `main.css` (global selection styles) diff --git a/src/components/ArticleHeader.tsx b/src/components/ArticleHeader.tsx deleted file mode 100644 index f2f9bbf..0000000 --- a/src/components/ArticleHeader.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import type { ArticleInfo } from "@/lib/articles/metadata"; -import { formatTimestamp } from "@/lib/formatDate"; - -export function ArticleHeader({ title, date, author, images }: ArticleInfo) { - return ( -
-
- {images.hero.alt} -
-
- - {/* Title */} -

- {title} -

- - {/* Date */} - -
- ); -} diff --git a/src/components/ArticleLayout.tsx b/src/components/ArticleLayout.tsx deleted file mode 100644 index bdffc72..0000000 --- a/src/components/ArticleLayout.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { ArticleHeader } from "@/components/ArticleHeader"; -import { OtherArticlesList } from "@/components/OtherArticlesList"; -import { Prose } from "@/components/Prose"; -import { TableOfContents } from "@/components/TableOfContents"; -import type { ArticleInfo } from "@/lib/articles/metadata"; -import type { ReactNode } from "react"; - -interface ArticleLayoutProps { - children: ReactNode; - info: ArticleInfo; -} - -export const ArticleLayout = ({ children, info }: ArticleLayoutProps) => { - return ( - <> - - - - {children} - - - - ); -}; diff --git a/src/components/BlogArticle.astro b/src/components/BlogArticle.astro index 9413359..9ac87ea 100644 --- a/src/components/BlogArticle.astro +++ b/src/components/BlogArticle.astro @@ -113,7 +113,7 @@ const otherArticles = allPosts )} - + @@ -154,7 +154,7 @@ const otherArticles = allPosts {otherArticles.length > 0 && (
-

Read next

+

Read next

{otherArticles.map((article) => ( @@ -170,7 +170,7 @@ const otherArticles = allPosts /> )}
- {article.category.name} + {article.category.name} diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 5b19c92..5bd3b3b 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -162,7 +162,7 @@ function SmallPrint() { {/* Product */}
-

Product

+

Product