Docs Improvements

docs/app/docs/components/card/page.js

@@ -16,13 +16,13 @@ const CardDocs = () => {
         `}>
             <Documentation.ComponentHero codeUsage={codeUsage}>
                 <Card data-accent-color="green" className="bg-gray-50 text-gray-950 flex items-center space-x-2">
-                    <Avatar fallback="PK" />
+                    <Avatar fallback="PP" />
                     <div>
                         <div className="font-medium">
-                            Peter Kowalsky
+                            Peter Parker
                         </div>
                         <div className="text-xs text-gray-800">
-                            Content Engineer
+                            Biochemist
                         </div>
                     </div>
                 </Card>

docs/app/docs/components/heading/page.js

@@ -14,7 +14,7 @@ const AvatarDocs = () => {
             Headings are used to display titles and subtitles.
         `}>
             <Documentation.ComponentHero codeUsage={codeUsage}>
-                <div className='text-gray-50 p-5 space-y-1'>
+                <div className='text-gray-1000 p-5 space-y-1'>
                     <Heading>Heading 1</Heading>
                     <Heading as="h2">Heading 2</Heading>
                     <Heading as="h3">Heading 3</Heading>

docs/app/docs/components/separator/page.js

@@ -15,12 +15,12 @@ const AvatarDocs = () => {
               Separator is used to separate content.
         `}>
             <Documentation.ComponentHero codeUsage={codeUsage}>
-                <div className='text-gray-50 font-normal p-5 space-y-1'>
+                <div className='text-gray-1000 font-normal p-5 space-y-1'>
                     <div>
                         <Text>Welcome to Rad UI</Text>
                     </div>
                     <Separator />
-                    <div className='flex' style={{ height: "20px" }}>
+                    <div className='flex'>
                         <Text>Modern</Text>
                         <Separator orientation="vertical" />
                         <Text>Accessible</Text>

docs/app/docs/components/text/page.js

@@ -13,7 +13,7 @@ const TextDocs = () => {
             Text is used to display customizable text content.
         `}>
             <Documentation.ComponentHero codeUsage={codeUsage}>
-                <div className='text-gray-50 p-5 space-y-1'>
+                <div className='text-gray-1000 p-5 space-y-1'>
                     <Text>This is an example of the Text component</Text>
                 </div>
             </Documentation.ComponentHero>

docs/app/docs/components/tooltip/page.js

@@ -22,7 +22,7 @@ const AvatarDocs = () => {
             <Documentation.ComponentHero codeUsage={codeUsage}>
 
                     <Card className="bg-gray-50" style={{ display: "flex", gap: 20 }}>
-                        <Tooltip content="Tooltip content">
+                        <Tooltip label="Tooltip content">
                              <Text className="text-gray-950">Hello Tooltip. Hover Me!</Text>
                         </Tooltip>
                     </Card>

docs/app/docs/first-steps/installation/page.js

@@ -19,17 +19,27 @@ import Documentation from "@/components/layout/Documentation/Documentation"
 const Introduction = () => {
     return <Documentation currentPage={PAGE_NAME} title="Installation">
         <Documentation.Section title="First steps">
-            <Text className="mb-2 text-gray-1000 font-light">
+            <Text className="mb-4 text-gray-1000 font-light">
                 It's super easy to get started with Rad UI. You can install it using npm or yarn.
             </Text>
 
-            <Text className="mt-4 mb-1 font-medium">Using Yarn</Text>
-            <Code >
-                <Copy>yarn add @radui/ui</Copy>
+            <Text className="my-2 font-medium">Using Yarn</Text>
+            <Code>
+               <span  className="flex items-center">
+                <span className="mr-2">
+                yarn add @radui/ui
+                    </span>
+                    <Copy content="yarn add @radui/ui" />
+               </span>
             </Code>
             <Text className="mt-4 mb-1 font-medium">Using npm</Text>
             <Code>
-                <Copy>npm install @radui/ui --save</Copy>
+               <span  className="flex items-center">
+                <span className="mr-2">
+                        npm install @radui/ui --save
+                    </span>
+                    <Copy content="npm install @radui/ui --save" />
+               </span>
             </Code>
         </Documentation.Section>
     </Documentation>

docs/app/globals.scss

@@ -9,11 +9,10 @@
 code {
   padding: 16px;
   border-radius: 4px;
-  background-color: var(--rad-ui-color-plum-800);
-  color: var(--rad-ui-color-gray-1000);
   background-color: var(--rad-ui-color-accent-100);
+  color: var(--rad-ui-color-gray-1000);
   display: block;
-  border: 1px solid var(--rad-ui-color-indigo-500);
+  border: 1px solid var(--rad-ui-color-accent-500);
   font-size: 12px;
 }
 

docs/app/landingComponents/HeroSection.js

@@ -1,19 +1,13 @@
 
 "use client"
-
-
 import Button from "@radui/ui/Button"
 import Heading from "@radui/ui/Heading"
 
-
-
-
 const HeroSection = () => {
   return <div>
     <div className='py-20 mb-10 relative'>
-
       <div className='relative z-10'>
-        <Heading className="text-center text-transparent bg-clip-text bg-gradient-to-t from-gray-900 to-gray-1000">
+        <Heading className="text-center text-transparent bg-clip-text bg-gradient-to-r from-gray-900 to-gray-1000">
            Build <div className='inline-block text-transparent bg-clip-text bg-gradient-to-t from-green-800 to-green-950'>Effortless, </div> <br/>
           No <div className='inline-block text-transparent bg-clip-text bg-gradient-to-t from-crimson-700 to-crimson-950'> Compromise UI</div> Fast.
         </Heading>

docs/app/layout.js

@@ -16,9 +16,9 @@ export const metadata = {
   description: 'Rad UI is a modern React UI Library for accessible and fast web applications',
 }
 
-export default function RootLayout({ children, ...props }) {
+export default async function RootLayout({ children, ...props }) {
 
-  const cookieStore = cookies()
+  const cookieStore = await cookies()
   const darkModeSsrValue = cookieStore.get('darkMode')?.value || false
 
   return (

docs/components/Copy.js

@@ -1,11 +1,11 @@
 'use client';
 import { useState, useEffect } from 'react';
 
-function Copy({ children }) {
+function Copy({ content }) {
     const [isCopied, setIsCopied] = useState(false);
 
     const handleCopy = () => {
-        navigator.clipboard.writeText(children);
+        navigator.clipboard.writeText(content);
         setIsCopied(true);
     };
 
@@ -29,10 +29,9 @@ function Copy({ children }) {
 
     return (
         <span className = "flex items-center">
-            {children}
             <button
                 onClick={handleCopy}
-                className=" m-0.5 mr-0 ml-2 px-1.5 py-1.5 border border-blue-500 text-sm font-bold rounded text-blue ;">
+                className=" m-0.5 mr-0 ml-2 px-1.5 py-1.5 border border-blue-400 hover:border-blue-600 text-sm font-bold rounded text-blue-900 hover:text-blue-900 bg-blue-200 hover:bg-blue-300">
                 {isCopied ? <TickIcon /> : <CopyIcon />}
             </button>
         </span>