feat: create /features/design-system page with design system tools content

apps/web/client/src/app/_components/hero/features-hero.tsx

@@ -19,32 +19,32 @@ export function FeaturesHero() {
         <div className="w-full h-full flex flex-col items-center justify-center gap-12 p-8 text-lg text-center relative">
             <UnicornBackground />
             <div className="flex flex-col gap-6 items-center relative z-20 pt-4 pb-2 max-w-3xl">
-                <motion.h3
+                <motion.h1
                     className="text-foreground-secondary text-sm font-medium uppercase tracking-wider mb-4"
                     initial={{ opacity: 0, filter: "blur(4px)" }}
                     animate={{ opacity: 1, filter: "blur(0px)" }}
                     transition={{ duration: 0.6, ease: "easeOut" }}
                     style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
                 >
-                    Visual Editor for React &amp; TailwindCSS Apps
-                </motion.h3>
-                <motion.h1
+                    Design System Tools for React
+                </motion.h1>
+                <motion.p
                     className="text-4xl md:text-6xl font-light leading-tight text-center !leading-[1] text-balance"
                     initial={{ opacity: 0, filter: "blur(4px)" }}
                     animate={{ opacity: 1, filter: "blur(0px)" }}
                     transition={{ duration: 0.6, delay: 0.1, ease: "easeOut" }}
                     style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
                 >
-                    The React Editor You've Been Waiting For
-                </motion.h1>
+                    Manage and Scale Your Design System
+                </motion.p>
                 <motion.p
                     className="text-lg text-foreground-secondary mx-auto max-w-xl text-center"
                     initial={{ opacity: 0, filter: "blur(4px)" }}
                     animate={{ opacity: 1, filter: "blur(0px)" }}
                     transition={{ duration: 0.6, delay: 0.15, ease: "easeOut" }}
                     style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
                 >
-                    Code as you design. Build React applications visually while Onlook writes reliable code you can trust, exactly where it needs to go.
+                    Onlook's design system tools let you create, edit, and maintain consistent branding across your React apps with visual editors for Tailwind, Shadcn, typography, colors, and template imports for seamless scaling.
                 </motion.p>
                 <motion.div
                     className="mt-8"
@@ -59,7 +59,7 @@ export function FeaturesHero() {
                         className="p-6 cursor-pointer hover:bg-foreground-primary hover:text-background-primary transition-all duration-300"
                         onClick={handleStartBuilding}
                     >
-                        START BUILDING
+                        Start Managing Your Design System
                     </Button>
                 </motion.div>
                 <motion.div

apps/web/client/src/app/_components/landing-page/benefits-section.tsx

@@ -13,10 +13,10 @@ export function BenefitsSection() {
             <div className="space-y-24">
                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                     <div className="flex flex-col order-2 lg:order-1">
-                        <h3 className="text-foreground-secondary text-sm font-medium uppercase tracking-wider mb-4">AI-Powered Visual Builder</h3>
-                        <h2 className="text-foreground-primary text-2xl md:text-4xl font-light mb-6">AI for UI design</h2>
+                        <h2 className="text-foreground-secondary text-sm font-medium uppercase tracking-wider mb-4">Tailwind CSS and Shadcn Visual Editor</h2>
+                        <p className="text-foreground-primary text-2xl md:text-4xl font-light mb-6">Style Tailwind and Shadcn Components Visually</p>
                         <p className="text-foreground-secondary text-regular mb-8 text-balance max-w-xl">
-                            Prompt Onlook's AI to build, design, and experiment with your ideas. Go beyond pretty pixels and make your frontend interactive. The AI understands your React components and Tailwind patterns, generating code that fits your project's architecture.
+                            Visually customize Tailwind classes and Shadcn UI components with auto-completion, real-time previews, and drag-and-drop editing, ensuring your design system stays consistent while accelerating UI development.
                         </p>
                         {/* Removed hidden CTA to avoid unused icon JSX in this client file */}
                     </div>
@@ -27,11 +27,10 @@ export function BenefitsSection() {
 
                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                     <div className="flex flex-col order-2 lg:order-1">
-                        <h3 className="text-foreground-secondary text-sm font-medium uppercase tracking-wider mb-4">React Visual Editor</h3>
-                        <h2 className="text-foreground-primary text-2xl md:text-4xl font-light mb-6">Build Your App Visually</h2>
+                        <h2 className="text-foreground-secondary text-sm font-medium uppercase tracking-wider mb-4">Centralized Globals for Color and Typography</h2>
+                        <p className="text-foreground-primary text-2xl md:text-4xl font-light mb-6">Manage Brand Styles from One Place</p>
                         <p className="text-foreground-secondary text-regular mb-8 text-balance max-w-xl">
-                            Edit React components directly in the browser. Drag, drop, and style elements visually while Onlook updates your actual code files in real-time.
-                            Your existing build process stays intact. Onlook works with your setup, not against it.
+                            Define and edit global colors, typography, and design tokens in a centralized panel—Onlook automatically applies changes across your entire React app, eliminating inconsistencies and saving hours of manual updates.
                         </p>
                         {/* Removed hidden CTA to avoid unused icon JSX in this client file */}
                     </div>
@@ -42,10 +41,10 @@ export function BenefitsSection() {
 
                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                     <div className="flex flex-col order-2 lg:order-1">
-                        <h3 className="text-foreground-secondary text-sm font-medium uppercase tracking-wider mb-4">Tailwind CSS Visual Editor</h3>
-                        <h2 className="text-foreground-primary text-2xl md:text-4xl font-light mb-6">Style Without Writing CSS</h2>
+                        <h2 className="text-foreground-secondary text-sm font-medium uppercase tracking-wider mb-4">Template Import and Customization</h2>
+                        <p className="text-foreground-primary text-2xl md:text-4xl font-light mb-6">Import and Adapt Any Next.js/Tailwind Project</p>
                         <p className="text-foreground-secondary text-regular mb-6 text-balance max-w-xl">
-                            Adjust layouts, change colors, modify text, and more. Onlook generates clean Tailwind classes that match your design decisions.
+                            Easily import your own or third-party Next.js/Tailwind templates, then customize them visually—Onlook preserves the original structure while allowing drag-and-drop modifications and AI-assisted refinements for rapid prototyping and scaling.
                         </p>
                         <div className="grid grid-cols-2 gap-8 mb-8 text-foreground-secondary text-regular">
                             <div className="flex flex-col gap-4">

apps/web/client/src/app/_components/landing-page/faq-section.tsx

@@ -67,4 +67,4 @@ export function FAQSection({
             </div>
         </div>
     );
-} 
+}       

apps/web/client/src/app/_components/landing-page/features-grid-section.tsx

@@ -5,50 +5,44 @@ export function FeaturesGridSection() {
         <div className="w-full max-w-6xl mx-auto py-32 px-8">
             <div className="grid grid-cols-1 md:grid-cols-3 gap-x-16 gap-y-20">
                 <div>
-                    <h3 className="text-foreground-secondary text-small uppercase tracking-wider mb-4">Component Library</h3>
-                    <h2 className="text-foreground-primary text-lg md:text-xl font-light mb-6 text-balance">Unified components for design and code</h2>
+                    <h3 className="text-foreground-primary text-lg md:text-xl font-light mb-6 text-balance">Asset Management</h3>
                     <p className="text-foreground-secondary text-regular text-balance leading-relaxed">
-                        Create reusable components that work across your project. Build once, use everywhere. Components maintain their style and behavior while giving you control of content.
+                        Upload, organize, and optimize images, icons, and media assets with built-in tools for cropping, formatting, and automatic application throughout your project
                     </p>
                 </div>
 
                 <div>
-                    <h3 className="text-foreground-secondary text-small uppercase tracking-wider mb-4">Theming &amp; Branding</h3>
-                    <h2 className="text-foreground-primary text-lg md:text-xl font-light mb-6 text-balance">Centralized Design &amp; Style Management</h2>
+                    <h3 className="text-foreground-primary text-lg md:text-xl font-light mb-6 text-balance">1-Click Publish</h3>
                     <p className="text-foreground-secondary text-regular text-balance leading-relaxed">
-                        Manage color palettes, typography scales, and design tokens through a centralized system. Define your design language once, apply it consistently across your project.
+                        Deploy your entire design system or individual changes instantly to GitHub, or live environments with automatic versioning and backups
                     </p>
                 </div>
 
                 <div>
-                    <h3 className="text-foreground-secondary text-small uppercase tracking-wider mb-4">Layer Management</h3>
-                    <h2 className="text-foreground-primary text-lg md:text-xl font-light mb-6 text-balance">Precise control over every element</h2>
+                    <h3 className="text-foreground-primary text-lg md:text-xl font-light mb-6 text-balance">Component Import</h3>
                     <p className="text-foreground-secondary text-regular text-balance leading-relaxed">
-                        Navigate your React component tree through a visual layer panel. Select, organize, and control components with precision. No more hunting through JSX to find the element you want to edit.
+                        Easily import existing React components or third-party libraries with automatic integration, visual previews, and seamless adaptation to your design system
                     </p>
                 </div>
 
                 <div>
-                    <h3 className="text-foreground-secondary text-small uppercase tracking-wider mb-4">Version History</h3>
-                    <h2 className="text-foreground-primary text-lg md:text-xl font-light mb-6 text-balance">Auto save, history and version control</h2>
+                    <h3 className="text-foreground-primary text-lg md:text-xl font-light mb-6 text-balance">Gradient Picker</h3>
                     <p className="text-foreground-secondary text-regular text-balance leading-relaxed">
-                        Roll-back anytime! Onlook automatically saves project snapshots so you can experiment with confidence.
+                        Create and apply complex gradients visually with intuitive controls, color stops, and real-time previews that integrate directly into your global styles
                     </p>
                 </div>
 
                 <div>
-                    <h3 className="text-foreground-secondary text-small uppercase tracking-wider mb-4">React Templates</h3>
-                    <h2 className="text-foreground-primary text-lg md:text-xl font-light mb-6 text-balance">Bring your own projects into Onlook or start fresh</h2>
+                    <h3 className="text-foreground-primary text-lg md:text-xl font-light mb-6 text-balance">AI Animations</h3>
                     <p className="text-foreground-secondary text-regular text-balance leading-relaxed">
-                        Onlook works with any React next.js website styled with Tailwind. Import your existing codebase and start editing visually, or begin with a new project.
+                        Generate intelligent animations and transitions using AI, with visual timeline editing, keyframe suggestions, and automatic optimization for performance
                     </p>
                 </div>
 
                 <div>
-                    <h3 className="text-foreground-secondary text-small uppercase tracking-wider mb-4">Open Source</h3>
-                    <h2 className="text-foreground-primary text-lg md:text-xl font-light mb-6 text-balance">Built with the Community</h2>
+                    <h3 className="text-foreground-primary text-lg md:text-xl font-light mb-6 text-balance">Layer Management</h3>
                     <p className="text-foreground-secondary text-regular text-balance leading-relaxed">
-                        <a href="https://github.com/Onlook/Onlook-dev" target="_blank" rel="noopener noreferrer" className="underline">Browse our GitHub repo</a> to understand how Onlook works, contribute improvements, or customize it for your team's needs.
+                        Navigate and organize your app's structure through an intuitive layers panel for precise element selection, grouping, and editing across complex designs
                     </p>
                 </div>
             </div>

apps/web/client/src/app/_components/landing-page/features-intro-section.tsx

@@ -4,14 +4,14 @@ export function FeaturesIntroSection() {
     return (
         <div className="w-full max-w-6xl mx-auto py-32 px-8 text-center">
             <div className="max-w-3xl mx-auto">
-                <h3 className="text-foreground-secondary text-sm font-medium uppercase tracking-wider mb-6">
-                    Complete React Visual Builder
-                </h3>
-                <h2 className="text-foreground-primary text-2xl md:text-5xl leading-[1.1] font-light mb-8 text-balance">
-                    All the Features you need to Build and Scale
+                <h2 className="text-foreground-secondary text-sm font-medium uppercase tracking-wider mb-6">
+                    Complete Design System Management
                 </h2>
+                <p className="text-foreground-primary text-2xl md:text-5xl leading-[1.1] font-light mb-8 text-balance">
+                    All the Tools to Create and Maintain Consistent Branding
+                </p>
                 <p className="text-foreground-secondary text-lg max-w-xl mx-auto text-balance">
-                    Get the best of visual design with developer-grade features. Build complex React applications visually while maintaining full control over your code, components, and architecture – No refactoring required.
+                    Build and scale professional design systems with visual tools for Tailwind, Shadcn, components, and templates. Brand consistency across your React applications while supporting both developers and designers.
                 </p>
             </div>
         </div>

apps/web/client/src/app/features/builder/page.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { CreateManagerProvider } from '@/components/store/create';
+import { SubscriptionModal } from '@/components/ui/pricing-modal';
+import { NonProjectSettingsModal } from '@/components/ui/settings-modal/non-project';
+import { FeaturesHero } from '../../_components/hero/features-hero';
+import { BenefitsSection } from '../../_components/landing-page/benefits-section';
+import { CTASection } from '../../_components/landing-page/cta-section';
+import { FAQSection } from '../../_components/landing-page/faq-section';
+import { FeaturesGridSection } from '../../_components/landing-page/features-grid-section';
+import { FeaturesIntroSection } from '../../_components/landing-page/features-intro-section';
+import { ResponsiveMockupSection } from '../../_components/landing-page/responsive-mockup-section';
+import { WebsiteLayout } from '../../_components/website-layout';
+
+const featuresFaqs = [
+    {
+        question: 'What is Onlook?',
+        answer: 'Onlook is an open-source, visual editor for websites. It allows anyone to create and style their own websites without any coding knowledge.',
+    },
+    {
+        question: 'What can I use Onlook to do?',
+        answer: 'Onlook is great for creating websites, prototypes, user interfaces, and designs. Whether you need a quick mockup or a full-fledged website, ask Onlook to craft it for you.',
+    },
+    {
+        question: 'How do I get started?',
+        answer: 'Getting started with Onlook is easy. Simply sign up for an account, create a new project, and follow our step-by-step guide to deploy your first application.',
+    },
+    {
+        question: 'Is Onlook free to use?',
+        answer: 'Onlook is free for your first prompt, but you are limited by the number of messages you can send. Please see our Pricing page for more details.',
+    },
+    {
+        question: 'What is the difference between Onlook and other design tools?',
+        answer: 'Onlook is a visual editor for code. It allows you to create and style your own creations with code as the source of truth. While it is best suited for creating websites, it can be used for anything visual – presentations, mockups, and more. Because Onlook uses code as the source of truth, the types of designs you can create are unconstrained by Onlook interface.',
+    },
+    {
+        question: 'Why is Onlook open-source?',
+        answer: 'Developers have historically been second-rate citizens in the design process. Onlook was founded to bridge the divide between design and development, and we wanted to make developers first-class citizens alongside designers. We chose to be open-source to give developers transparency into how we are building Onlook and how the work created through Onlook will complement the work of developers.',
+    },
+];
+
+export default function FeaturesPage() {
+    return (
+        <CreateManagerProvider>
+            <WebsiteLayout showFooter={true}>
+                <div className="w-screen h-screen flex items-center justify-center" id="hero">
+                    <FeaturesHero />
+                </div>
+                <ResponsiveMockupSection />
+                <BenefitsSection />
+                <FeaturesIntroSection />
+                <FeaturesGridSection />
+                <CTASection
+                    ctaText={`Start Building React Apps Visually Today`}
+                    buttonText="Get Started for Free"
+                />
+                <FAQSection faqs={featuresFaqs} />
+                <NonProjectSettingsModal />
+                <SubscriptionModal />
+            </WebsiteLayout>
+        </CreateManagerProvider>
+    );
+}