diff --git a/apps/docs/src/components/layout/ShowcaseLayout.astro b/apps/docs/src/components/layout/ShowcaseLayout.astro new file mode 100644 index 0000000..ebf9604 --- /dev/null +++ b/apps/docs/src/components/layout/ShowcaseLayout.astro @@ -0,0 +1,141 @@ +--- +import '../../styles/fonts.css'; +import '@shift-css/core'; +import ThemeToggle from '../ui/ThemeToggle.astro'; +import ThemeCustomizer from '../ui/ThemeCustomizer.astro'; + +interface Props { + title: string; + description?: string; +} + +const { title, description = 'Shift CSS Showcase' } = Astro.props; +const siteTitle = `${title} | Shift CSS Showcase`; +const base = import.meta.env.BASE_URL.replace(/\/$/, ''); +const canonicalURL = new URL(Astro.url.pathname, 'https://getshiftcss.com'); +--- + + + + + + + + + {siteTitle} + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + diff --git a/apps/docs/src/components/navigation/MobileMenu.astro b/apps/docs/src/components/navigation/MobileMenu.astro index 1843f7f..a946740 100644 --- a/apps/docs/src/components/navigation/MobileMenu.astro +++ b/apps/docs/src/components/navigation/MobileMenu.astro @@ -51,15 +51,24 @@ const navigation = getNavigation(base); const isActive = item.href === currentPath || item.href === currentPath.replace(/\/$/, ''); + const isShowcase = item.href.includes('/showcase/'); return ( {item.label} + {isShowcase && ( + <> + (opens in new tab) + + + )} ); })} @@ -93,6 +102,12 @@ const navigation = getNavigation(base); flex-direction: column; gap: var(--s-space-1); } + + .external-icon { + font-size: 0.75em; + opacity: 0.6; + margin-left: var(--s-space-1); + } diff --git a/apps/docs/src/pages/showcase/landing.astro b/apps/docs/src/pages/showcase/landing.astro new file mode 100644 index 0000000..834ebab --- /dev/null +++ b/apps/docs/src/pages/showcase/landing.astro @@ -0,0 +1,720 @@ +--- +import ShowcaseLayout from '../../components/layout/ShowcaseLayout.astro'; + +const currentYear = new Date().getFullYear(); +--- + + + + Skip to main content + + +
+ +
+ +
+ + + +
+ + +
+
+
+
+ Now in public beta +

+ Ship products faster with AI-powered workflows +

+

+ Velocity automates your development pipeline, from code review to deployment. Focus on building, we'll handle the rest. +

+
+ + +
+
+
+ + + + + +2.4k +
+

+ Trusted by 2,400+ teams +

+
+
+
+
+
+
+ + + +
+ velocity.app/dashboard +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+

Powering engineering teams at

+
+ Acme Corp + Globex + Initech + Hooli + Pied Piper +
+
+
+ + +
+
+ Features +

Everything you need to ship faster

+

+ From automated code reviews to one-click deployments, Velocity streamlines your entire development workflow. +

+
+ +
+
+
+
+ + + + +
+

AI Code Review

+

+ Get instant feedback on your pull requests with context-aware suggestions. +

+
+
+ +
+
+
+ + + +
+

Instant Previews

+

+ Every pull request gets its own preview environment to share with stakeholders. +

+
+
+ +
+
+
+ + + + +
+

Zero-Config CI/CD

+

+ Automatic builds, tests, and deployments. No YAML files to maintain. +

+
+
+ +
+
+
+ + + +
+

Security Scanning

+

+ Automated vulnerability detection and dependency auditing on every commit. +

+
+
+ +
+
+
+ + + + + + +
+

Team Collaboration

+

+ Real-time presence, threaded discussions, and seamless handoffs. +

+
+
+ +
+
+
+ + + + + +
+

Analytics Dashboard

+

+ Track deployment frequency, lead time, and DORA metrics. +

+
+
+
+
+ + +
+
+
+ Pricing +

Simple, transparent pricing

+

Start free, scale as you grow. No hidden fees.

+
+ +
+ +
+
+
+

Starter

+

Perfect for side projects

+
+
+ $0 + /month +
+
    +
  • + + Up to 3 team members +
  • +
  • + + 5 preview environments +
  • +
  • + + Basic analytics +
  • +
  • + + Community support +
  • +
+ +
+
+ + + + + +
+
+
+

Enterprise

+

For large organizations

+
+
+ Custom +
+
    +
  • + + Everything in Pro +
  • +
  • + + SSO & SAML +
  • +
  • + + Dedicated support +
  • +
  • + + Custom SLA +
  • +
+ +
+
+
+
+
+ + +
+
+ Testimonials +

Loved by developers worldwide

+
+ +
+
+
+

+ "Velocity cut our deployment time from hours to minutes. The AI code review catches issues before they reach production." +

+
+ +
+ Alex Chen +

Engineering Lead at Acme Corp

+
+
+
+
+ +
+
+

+ "Finally, a CI/CD tool that just works. We onboarded our entire team in a day without any configuration." +

+
+ +
+ Jordan Lee +

CTO at Globex

+
+
+
+
+ +
+
+

+ "The preview environments are a game-changer. Designers review changes without local setup." +

+
+ +
+ Taylor Morgan +

VP Engineering at Initech

+
+
+
+
+
+
+ + +
+
+

Ready to ship faster?

+

+ Join thousands of teams who've transformed their development workflow with Velocity. +

+
+ + +
+
+
+
+ + + +
+
+ + + + diff --git a/apps/docs/src/styles/theme.css b/apps/docs/src/styles/theme.css index fb8102e..cba8c68 100644 --- a/apps/docs/src/styles/theme.css +++ b/apps/docs/src/styles/theme.css @@ -136,8 +136,8 @@ select[s-input] { color: var(--void-900); } -[s-card] p, -[s-card-body] p, +[s-card] > p, +[s-card-body] > p, [s-card-subtitle] { color: var(--void-700); } @@ -162,10 +162,10 @@ select[s-input] { color: var(--void-900); } -[s-surface="flat"] p, -[s-surface="sunken"] p, -[s-surface="raised"] p, -[s-surface="floating"] p { +[s-surface="flat"] > p, +[s-surface="sunken"] > p, +[s-surface="raised"] > p, +[s-surface="floating"] > p { color: var(--void-500); } diff --git a/packages/core/src/tokens/tokens.css b/packages/core/src/tokens/tokens.css index 38b40d8..c455544 100644 --- a/packages/core/src/tokens/tokens.css +++ b/packages/core/src/tokens/tokens.css @@ -119,7 +119,7 @@ /* TEXT */ --s-text-primary: light-dark(var(--s-neutral-900), var(--s-neutral-50)); --s-text-secondary: light-dark(var(--s-neutral-700), var(--s-neutral-300)); - --s-text-tertiary: light-dark(var(--s-neutral-500), var(--s-neutral-500)); + --s-text-tertiary: light-dark(var(--s-neutral-500), var(--s-neutral-400)); --s-text-inverse: light-dark(var(--s-neutral-50), var(--s-neutral-900)); /* BORDER */ diff --git a/packages/core/tests/e2e/snapshots/components.visual.ts-snapshots/components-page-dark-visual-chrome-linux.png b/packages/core/tests/e2e/snapshots/components.visual.ts-snapshots/components-page-dark-visual-chrome-linux.png index 321b52a..ac00f71 100644 Binary files a/packages/core/tests/e2e/snapshots/components.visual.ts-snapshots/components-page-dark-visual-chrome-linux.png and b/packages/core/tests/e2e/snapshots/components.visual.ts-snapshots/components-page-dark-visual-chrome-linux.png differ diff --git a/packages/core/tests/e2e/snapshots/components.visual.ts-snapshots/contact-form-dark-visual-chrome-linux.png b/packages/core/tests/e2e/snapshots/components.visual.ts-snapshots/contact-form-dark-visual-chrome-linux.png index b9f030f..00e79cb 100644 Binary files a/packages/core/tests/e2e/snapshots/components.visual.ts-snapshots/contact-form-dark-visual-chrome-linux.png and b/packages/core/tests/e2e/snapshots/components.visual.ts-snapshots/contact-form-dark-visual-chrome-linux.png differ diff --git a/packages/core/tests/e2e/snapshots/components.visual.ts-snapshots/inputs-dark-visual-chrome-linux.png b/packages/core/tests/e2e/snapshots/components.visual.ts-snapshots/inputs-dark-visual-chrome-linux.png index b1edc7b..c7adf1b 100644 Binary files a/packages/core/tests/e2e/snapshots/components.visual.ts-snapshots/inputs-dark-visual-chrome-linux.png and b/packages/core/tests/e2e/snapshots/components.visual.ts-snapshots/inputs-dark-visual-chrome-linux.png differ diff --git a/packages/core/tokens/semantic.json b/packages/core/tokens/semantic.json index 1faa7b9..1c6c5c8 100644 --- a/packages/core/tokens/semantic.json +++ b/packages/core/tokens/semantic.json @@ -35,8 +35,8 @@ }, "tertiary": { "light": { "value": "{color.neutral.500}" }, - "dark": { "value": "{color.neutral.500}" }, - "description": "Tertiary/disabled text" + "dark": { "value": "{color.neutral.400}" }, + "description": "Tertiary/disabled text (AA compliant)" }, "inverse": { "light": { "value": "{color.neutral.50}" },