diff --git a/apps/website/mdx-components.tsx b/apps/website/mdx-components.tsx deleted file mode 100644 index 018e5fb79f0..00000000000 --- a/apps/website/mdx-components.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { useMDXComponents as getBlogMDXComponents } from "nextra-theme-blog"; -import { useMDXComponents as getDocsMDXComponents } from "nextra-theme-docs"; - -export function useMDXComponents(components = {}) { - // Merge both theme components to support both /docs and /blog routes - return { - ...getDocsMDXComponents(components), - ...getBlogMDXComponents(components), - }; -} diff --git a/apps/website/next.config.ts b/apps/website/next.config.ts index 3856fd85073..89bfe82d3aa 100644 --- a/apps/website/next.config.ts +++ b/apps/website/next.config.ts @@ -1,13 +1,8 @@ import type { NextConfig } from "next"; -import nextra from "nextra"; - -const withNextra = nextra({ - defaultShowCopyCode: true, -}); const nextConfig: NextConfig = { reactStrictMode: true, transpilePackages: ["@superset/ui"], }; -export default withNextra(nextConfig); +export default nextConfig; diff --git a/apps/website/package.json b/apps/website/package.json index 2d59502fe36..46835bf5b7d 100644 --- a/apps/website/package.json +++ b/apps/website/package.json @@ -21,9 +21,6 @@ "framer-motion": "^12.23.24", "geist": "^1.5.1", "next": "^15.1.6", - "nextra": "^4.6.0", - "nextra-theme-blog": "^4.6.0", - "nextra-theme-docs": "^4.6.0", "react": "^19.1.1", "react-dom": "^19.1.1", "react-fast-marquee": "^1.6.5", diff --git a/apps/website/public/hero/customize-themes.gif b/apps/website/public/hero/customize-themes.gif new file mode 100644 index 00000000000..01fa611f996 Binary files /dev/null and b/apps/website/public/hero/customize-themes.gif differ diff --git a/apps/website/src/app/BRAND_GUIDELINES.md b/apps/website/src/app/BRAND_GUIDELINES.md new file mode 100644 index 00000000000..2f1e5959466 --- /dev/null +++ b/apps/website/src/app/BRAND_GUIDELINES.md @@ -0,0 +1,241 @@ +# Brand Guidelines +--- + +## Fonts + +### Font Families + +| Name | Font Family | Usage | +| ----------- | --------------------------------------------------------------------- | ------------------- | +| Sans | `"Matter Regular", "Matter Regular Placeholder", sans-serif` | Body text, headings | +| Sans Medium | `"Matter Medium", "Matter Medium Placeholder", sans-serif` | Buttons, emphasis | +| Mono | `"Matter Mono Regular", "Matter Mono Regular Placeholder", monospace` | Code, commands | +| Mono Alt | `"Geist Mono", monospace` | Terminal UI | + +- `Inter` as sans-serif fallback +- `Geist Mono` for monospace + +--- + +## Color Palette + +### Background Colors + +| Name | Value | Tailwind Approx | Usage | +| ----------------- | -------------------------------- | --------------- | ------------------ | +| Page Background | `#1a1a1a` (warm dark) | `neutral-900` | Main background | +| Button Dark | `rgb(53, 53, 52)` / `#353534` | `neutral-700` | Terminal button bg | +| Card/Button Light | `rgb(249, 250, 245)` / `#f9f9f5` | `stone-50` | Primary CTA bg | +| Button Hover | `rgb(238, 237, 234)` / `#eeeded` | `stone-200` | Icon container | +| Pressed State | `rgb(64, 64, 63)` / `#40403f` | `neutral-700` | Button pressed | + +### Text Colors + +| Name | Value | Tailwind Approx | Usage | +| ------------------ | -------------------------------- | --------------- | ------------------------- | +| Primary White | `rgb(255, 255, 255)` | `white` | Headings | +| Subtitle | `rgba(250, 249, 246, 0.5)` | `white/50` | Subheadings, descriptions | +| Muted | `rgb(175, 174, 172)` / `#afaeac` | `stone-400` | Terminal text, icons | +| Light Text | `rgb(227, 226, 224)` / `#e3e2e0` | `stone-200` | Code text | +| Button Dark Text | `rgb(42, 43, 37)` / `#2a2b25` | `neutral-800` | Text on light buttons | +| Button Light Text | `rgba(0, 0, 0, 0.8)` | `black/80` | Active pill text | +| Inactive Pill Text | `rgba(255, 255, 255, 0.8)` | `white/80` | Inactive selector text | + +### Border Colors + +| Name | Value | Usage | +| --------------- | -------------------------- | ---------------------- | +| Active Border | `rgb(255, 255, 255)` | Active selector pill | +| Inactive Border | `rgba(255, 255, 255, 0.2)` | Inactive selector pill | +| Subtle Border | `rgba(255, 255, 255, 0.1)` | Cards, dividers | + +--- + +## Typography + +### Hero Heading (H1) + +```css +font-family: "Matter Regular", sans-serif; +font-size: 45px; +letter-spacing: -0.03em; +line-height: 1em; +color: rgb(255, 255, 255); +``` + +**Tailwind**: `text-[45px] font-normal tracking-[-0.03em] leading-none text-white` + +### Subtitle/Description + +```css +font-family: "Matter Regular", sans-serif; +font-size: 20px; +letter-spacing: -0.03em; +color: rgba(250, 249, 246, 0.5); +``` + +**Tailwind**: `text-xl tracking-[-0.03em] text-white/50` + +### Button Text + +```css +font-family: "Matter Medium", sans-serif; +font-size: 16px; +letter-spacing: 0px; +line-height: 16px; +color: rgb(42, 43, 37); +``` + +**Tailwind**: `text-base font-medium leading-4 text-neutral-800` + +### Code/Terminal Text + +```css +font-family: "Matter Mono Regular", monospace; +/* or */ font-family: "Geist Mono", monospace; +font-size: 16px; +letter-spacing: -0.2px; +line-height: 1em; +color: rgb(227, 226, 224); +``` + +**Tailwind**: `font-mono text-base tracking-tight leading-none text-stone-200` + +### Small Labels (Nav, Pills) + +```css +font-family: "Matter Medium", sans-serif; +font-size: 12px; +font-weight: 500; +color: rgb(255, 255, 255); +``` + +**Tailwind**: `text-xs font-medium text-white` + +### Selector Pill Text + +```css +font-family: "Matter Regular", sans-serif; +font-size: 14px; +line-height: 140%; +color: rgba(0, 0, 0, 0.8); /* active */ +color: rgba(255, 255, 255, 0.8); /* inactive */ +``` + +--- + +## Border Radius + +| Name | Value | Usage | +| --------- | ---------------- | --------------------------------- | +| Small | `2px` | Icon containers | +| Default | `4px` | Inner button elements | +| Medium | `5px` | Buttons | +| Large | `8px` | Cards, videos, images | +| Full/Pill | `40px` or `50px` | Pills, selectors, terminal button | + +--- + +## Buttons + +### Primary CTA Button ("Download for Mac") + +```css +background-color: rgb(249, 250, 245); /* warm off-white */ +border-radius: 5px; +padding: 4px 4px 4px 16px; /* asymmetric - more left padding */ +``` + +Inner structure: +- Text: `"Matter Medium"`, 16px, `rgb(42, 43, 37)` +- Icon container: `rgb(238, 237, 234)`, 2px radius +- Has pressed/hover states + +**Tailwind approximation**: +```tsx +className="bg-stone-50 text-neutral-800 rounded-[5px] pl-4 pr-1 py-1 font-medium hover:bg-stone-100" +``` + +### Terminal/Brew Button + +```css +background-color: rgb(53, 53, 52); +border-radius: 50px; +padding: 10px; +font-family: "Geist Mono", monospace; +color: rgb(175, 174, 172); +``` + +**Tailwind**: +```tsx +className="bg-neutral-700 text-stone-400 rounded-full px-3 py-2.5 font-mono" +``` + +### Selector Pills + +**Active state**: +```css +background-color: rgba(255, 255, 255, 0.8); +border: 1px solid rgb(255, 255, 255); +border-radius: 40px; +color: rgba(0, 0, 0, 0.8); +``` + +**Inactive state**: +```css +background-color: rgba(255, 255, 255, 0.01); +border: 1px solid rgba(255, 255, 255, 0.2); +border-radius: 40px; +color: rgba(255, 255, 255, 0.8); +``` + +--- + +## Layout + +### Container +- Max width: `1600px` +- Horizontal padding: `30px` (each side, 60px total) + +### Hero Section +- Two-column layout on desktop +- Left: ~42% (text content) +- Right: ~58% (product demo) + +### Spacing +- Section padding: Large, generous whitespace +- Element gaps: `10-16px` typical + +--- + +## Component Examples + + + +### Selector Pill (Active) + +```tsx + +``` + +### Selector Pill (Inactive) + +```tsx + +``` + +--- + +## Key Differences from Previous Guidelines + +1. **Warmer tones**: Background is warm dark (`neutral-900`), not cold `zinc-950` +2. **Off-white buttons**: Primary CTA is `stone-50` (#f9f9f5), not pure white +3. **Custom font**: "Matter" family (we use Inter as fallback) +4. **Tight letter-spacing**: `-0.03em` on headings +5. **Asymmetric button padding**: Download button has more left padding +6. **Warm grays**: Use `stone-*` and `neutral-*`, not `zinc-*` diff --git a/apps/website/src/app/blog/building-with-nextra.mdx b/apps/website/src/app/blog/building-with-nextra.mdx deleted file mode 100644 index d0056bd055f..00000000000 --- a/apps/website/src/app/blog/building-with-nextra.mdx +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Building Documentation and Blogs with Nextra -date: 2025-01-20 -description: How we integrated Nextra for our documentation and blog -author: Superset Team ---- - -# Building with Nextra - -Today we're excited to share how we integrated Nextra into our project for both documentation and blog content. - -## Why Nextra? - -Nextra is a powerful Next.js-based framework that makes it easy to create beautiful documentation and blog sites: - -- **MDX Support** - Write content in Markdown with React components -- **Built-in Themes** - Docs and blog themes ready to use -- **Search** - Full-text search out of the box -- **Fast** - Built on Next.js App Router for optimal performance - -## Our Setup - -We've created two separate routes: - -### Documentation (`/docs`) - -Our documentation uses the `nextra-theme-docs` theme with: - -```tsx -import { Layout, Navbar, Footer } from "nextra-theme-docs"; -``` - -This provides a clean, organized layout perfect for technical documentation. - -### Blog (`/blog`) - -Our blog uses the `nextra-theme-blog` theme: - -```tsx -import { Layout, Navbar, Footer, ThemeSwitch } from "nextra-theme-blog"; -``` - -This gives us a beautiful blog interface with features like: -- Post listings -- Dark mode support -- RSS feed support -- Tag/category organization - -## Benefits - -The best part about this setup is that we can: - -1. **Write in Markdown** - No complex CMS needed -2. **Version Control** - All content lives in Git -3. **Type Safety** - TypeScript support throughout -4. **Fast Builds** - Optimized by Turborepo - -## Try It Yourself - -Check out the [Nextra documentation](https://nextra.site) to learn more about building with this amazing framework. diff --git a/apps/website/src/app/blog/hello-world.mdx b/apps/website/src/app/blog/hello-world.mdx deleted file mode 100644 index c86e32afa63..00000000000 --- a/apps/website/src/app/blog/hello-world.mdx +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Hello World - Welcome to Superset Blog -date: 2025-01-15 -description: Our first blog post introducing Superset and what's to come -author: Superset Team ---- - -# Hello World - -Welcome to the Superset blog! We're excited to share our journey with you. - -## What is Superset? - -Superset is a modern web development platform built with the latest technologies: - -- **Next.js 15** - The React framework for production -- **TailwindCSS v4** - Utility-first CSS framework -- **Turborepo** - High-performance build system -- **TypeScript** - Type-safe development - -## What to Expect - -In this blog, we'll share: - -1. **Technical insights** - Deep dives into our architecture and design decisions -2. **Updates** - New features and improvements -3. **Tutorials** - How-to guides and best practices -4. **Community** - Highlighting contributions and use cases - -## Get Started - -Check out our [documentation](/docs) to learn more about using Superset in your projects. - -Stay tuned for more exciting content! diff --git a/apps/website/src/app/blog/layout.tsx b/apps/website/src/app/blog/layout.tsx deleted file mode 100644 index 74137f4cf0c..00000000000 --- a/apps/website/src/app/blog/layout.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Banner, Search } from "nextra/components"; -import { getPageMap } from "nextra/page-map"; -import { Footer, Layout, Navbar, ThemeSwitch } from "nextra-theme-blog"; -import type * as React from "react"; -import "nextra-theme-blog/style.css"; - -export const metadata = { - title: "Superset Blog", - description: "Latest news and updates from Superset", -}; - -const banner = ( - - Welcome to the Superset Blog - -); - -export default async function BlogLayout({ - children, -}: { - children: React.ReactNode; -}) { - return ( - - - - - - {children} - - - ); -} diff --git a/apps/website/src/app/blog/page.mdx b/apps/website/src/app/blog/page.mdx deleted file mode 100644 index 28256fcee40..00000000000 --- a/apps/website/src/app/blog/page.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -type: posts ---- - -# Superset Blog - -Welcome to the Superset blog! Here you'll find the latest news, updates, and insights about Superset. - -Stay tuned for exciting content about web development, best practices, and new features. diff --git a/apps/website/src/app/components/ClientLogosSection/ClientLogosSection.tsx b/apps/website/src/app/components/ClientLogosSection/ClientLogosSection.tsx deleted file mode 100644 index 00a08e2d2ee..00000000000 --- a/apps/website/src/app/components/ClientLogosSection/ClientLogosSection.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { motion } from "framer-motion"; -import Marquee from "react-fast-marquee"; -import { CLIENT_LOGOS } from "./constants"; - -export function ClientLogosSection() { - return ( -
-
- -

- Trusted by engineers from -

- - - - -
- {CLIENT_LOGOS.map((client) => ( -
- {client.logo} -
- ))} -
- - -
-
- ); -} diff --git a/apps/website/src/app/components/ClientLogosSection/constants.ts b/apps/website/src/app/components/ClientLogosSection/constants.ts deleted file mode 100644 index 2a593ebc2cf..00000000000 --- a/apps/website/src/app/components/ClientLogosSection/constants.ts +++ /dev/null @@ -1,11 +0,0 @@ -export const CLIENT_LOGOS = [ - { name: "onlook", logo: "Onlook" }, - { name: "amazon", logo: "Amazon" }, - { name: "google", logo: "Google" }, - { name: "servicenow", logo: "ServiceNow" }, - { name: "ycombinator", logo: "Y Combinator" }, - { name: "scribe", logo: "Scribe" }, - { name: "numbies", logo: "numbies.xyz" }, - { name: "adamcad", logo: "adam.new" }, - { name: "cadra", logo: "Cadra" }, -] as const; diff --git a/apps/website/src/app/components/ClientLogosSection/index.ts b/apps/website/src/app/components/ClientLogosSection/index.ts deleted file mode 100644 index d7a5703b292..00000000000 --- a/apps/website/src/app/components/ClientLogosSection/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { ClientLogosSection } from "./ClientLogosSection"; diff --git a/apps/website/src/app/components/FeaturesSection/FeaturesSection.tsx b/apps/website/src/app/components/FeaturesSection/FeaturesSection.tsx deleted file mode 100644 index b00f46f25d9..00000000000 --- a/apps/website/src/app/components/FeaturesSection/FeaturesSection.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { motion } from "framer-motion"; -import { JoinWaitlistButton } from "../JoinWaitlistButton"; - -interface FeaturesSectionProps { - onOpenWaitlist: () => void; -} - -// Using the same SCALE_FEATURES from ScaleFeaturesSection -const FEATURES = [ - { - title: "Work in parallel", - description: - "Run multiple agents in parallel. Build features as quickly as you can come up with them.", - }, - { - title: "Zero switching cost", - description: - "Be the human in the loop. We handle the context management so you're never overloaded.", - }, - { - title: "No downtime", - description: - "Code on the go. Always-on agents that work even when you're away from your laptop.", - }, - { - title: "Bring your own tools", - description: - "We're a superset of your existing tools, not a replacement. Use your own coding setup, tools, and agents. We bring the tooling and gluing.", - }, -] as const; - -export function FeaturesSection({ onOpenWaitlist }: FeaturesSectionProps) { - return ( -
-
- -

- Build like a VP of Engineering -

- - -
- {FEATURES.map((feature, idx) => ( - -

- {feature.title} -

-

- {feature.description} -

- - ))} -
- - - - -
-
- ); -} diff --git a/apps/website/src/app/components/FeaturesSection/index.ts b/apps/website/src/app/components/FeaturesSection/index.ts deleted file mode 100644 index 561353fb3de..00000000000 --- a/apps/website/src/app/components/FeaturesSection/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { FeaturesSection } from "./FeaturesSection"; diff --git a/apps/website/src/app/components/Footer/Footer.tsx b/apps/website/src/app/components/Footer/Footer.tsx deleted file mode 100644 index 368b1d276d6..00000000000 --- a/apps/website/src/app/components/Footer/Footer.tsx +++ /dev/null @@ -1,37 +0,0 @@ -"use client"; - -import { motion } from "framer-motion"; -import Image from "next/image"; -import { SocialLinks } from "../SocialLinks"; - -export function Footer() { - return ( - - ); -} diff --git a/apps/website/src/app/components/Footer/index.ts b/apps/website/src/app/components/Footer/index.ts deleted file mode 100644 index e5ea0e53f6a..00000000000 --- a/apps/website/src/app/components/Footer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Footer } from "./Footer"; diff --git a/apps/website/src/app/components/Header/Header.tsx b/apps/website/src/app/components/Header/Header.tsx index f61d4d90fba..335f2c2d8fc 100644 --- a/apps/website/src/app/components/Header/Header.tsx +++ b/apps/website/src/app/components/Header/Header.tsx @@ -13,32 +13,39 @@ export function Header() { return ( <> -
-