[pull] main from chakra-ui:main

website/src/components/marketing/community.tsx

@@ -10,14 +10,6 @@ const contributors = [
     name: 'Christian Schröter',
     src: 'https://avatars.githubusercontent.com/u/1846056?v=4',
   },
-  {
-    name: 'Tim Kolberger',
-    src: 'https://avatars.githubusercontent.com/u/16899513?v=4',
-  },
-  {
-    name: 'Tyler Pfledderer',
-    src: 'https://avatars.githubusercontent.com/u/65234762?v=4',
-  },
   {
     name: 'Segun Adebayo',
     src: 'https://avatars.githubusercontent.com/u/6916170?v=4',
@@ -26,14 +18,6 @@ const contributors = [
     name: 'Abraham',
     src: 'https://avatars.githubusercontent.com/u/30869823?v=4',
   },
-  {
-    name: 'Jonathan Bakebwa',
-    src: 'https://avatars.githubusercontent.com/u/21237954?v=4',
-  },
-  {
-    name: 'Zakaria Sahmane',
-    src: 'https://avatars.githubusercontent.com/u/10008963?v=4',
-  },
   {
     name: 'Esther Adebayo',
     src: 'https://avatars.githubusercontent.com/u/53586167?v=4',

website/src/components/marketing/hero.tsx

@@ -22,13 +22,13 @@ export const Hero = () => {
             <Stack gap={{ base: '3', md: '4' }}>
               <Announcement />
               <Heading as="h1" fontWeight="bold" textStyle={{ base: '4xl', md: '6xl' }}>
-                Fully <styled.span color="colorPalette.default">customizable</styled.span> and{' '}
-                <styled.span color="colorPalette.default">accessible</styled.span> UI components
+                <styled.span color="colorPalette.default">Unstyled</styled.span> UI components for your{' '}
+                <styled.span color="colorPalette.default">Design System</styled.span>
               </Heading>
             </Stack>
             <Text textStyle={{ base: 'lg', md: 'xl' }} color="fg.muted">
-              Ark UI is a headless UI library with over 45+ components designed to build reusable, scalable Design
-              Systems that works for a wide range of JS frameworks.
+              A headless library with 45+ accessible components. Bring your own styles and build a design system that
+              works across React, Solid, Vue, and Svelte.
             </Text>
           </Stack>
           <Stack direction={{ base: 'column', sm: 'row' }} gap="3">

website/src/components/marketing/highlights.tsx

@@ -7,23 +7,23 @@ import { CodeExamples } from './code-examples'
 const features = [
   {
     icon: Paintbrush,
-    title: 'Zero-Styling Freedom',
-    description: 'Your design system, your rules. Every component starts as a blank canvas ready for your creativity.',
+    title: 'Truly Headless',
+    description: 'No default styles to fight. Bring your own CSS — Panda, Tailwind, CSS-in-JS, or plain stylesheets.',
   },
   {
     icon: Braces,
-    title: 'Truly Composable',
-    description: 'Build complex UIs effortlessly with modular components that work seamlessly together.',
+    title: 'Framework Agnostic',
+    description: 'Write once, use everywhere. The same API works across React, Solid, Vue, and Svelte.',
   },
   {
     icon: Keyboard,
-    title: 'Accessibility-First',
-    description: 'Ship with confidence. Every component is WCAG compliant and thoroughly tested for accessibility.',
+    title: 'Accessible by Default',
+    description: 'WAI-ARIA patterns baked in. Keyboard navigation and screen reader support out of the box.',
   },
   {
     icon: Orbit,
     title: 'State Machine Powered',
-    description: 'Predictable behavior, fewer bugs. State machines ensure rock-solid component interactions.',
+    description: 'Predictable behavior you can rely on. Complex interactions handled with edge cases covered.',
   },
 ]