adjust documentation

Author: eugenebelov

README.md

@@ -14,16 +14,14 @@ A production-ready React UI component library for Casper blockchain applications
 
 Install from NPM to access ready-to-use components that bring the beloved Casper community UI to your dApp. Save time on design and implementation with clean, consistent look tailored for Web3.
 
-✅ **Battle-tested** components from production apps  
-✅ **Blockchain-focused** with CSPR-specific utilities  
-✅ **Consistent design** across the Casper ecosystem  
-✅ **TypeScript-first** with great developer experience  
-✅ **Zero configuration** - works out of the box
+✅ **Battle-tested** components from production apps \
+✅ **Blockchain-focused** with Casper-specific utilities \
+✅ **Consistent design** across the Casper ecosystem
 
 ## Installation
 
 ```bash
-npm install github:make-software/cspr-design
+npm install @make-software/cspr-design
 ```
 
 ## Quick Start
@@ -98,8 +96,8 @@ resolve: {
 
 ## Resources
 
-📖 **[Full Documentation](https://docs.make.software/cspr.design/)** - Complete guide  
-🎨 **[Storybook Demo](storybook-url)** - Interactive components  
+📖 **[Full Documentation](https://cspr.design/)** - Complete guide  
+🎨 **[Storybook](https://storybook.cspr.design/)** - Interactive components  
 🐛 **[Report Issues](https://github.com/make-software/cspr-design/issues)** - Bugs & features  
 💬 **[Community](telegram-url)** - Get help & discuss
 

src/01-Home.mdx

@@ -0,0 +1,49 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+import {MenuBlocks, StyledHeaderWrapper, StyledWrapper} from "./storybook-components.tsx";
+
+<Meta title="Home"/>
+
+<StyledWrapper>
+    <StyledHeaderWrapper>
+        # Welcome to CSPR.design
+    </StyledHeaderWrapper>
+</StyledWrapper>
+
+<br/>
+<br/>
+
+CSPR.design is a React-based UI component library powering the CSPR.suite application family, including [CSPR.live](https://cspr.live) and [Casper Wallet](https://www.casperwallet.io/).
+It provides a consistent design language, reusable components, and shared styling utilities to ensure a cohesive user experience across products. CSPR.design enables faster development, easier maintenance, and a unified brand presence throughout the Casper Ecosystem.
+
+✅ Battle-tested components from production apps \
+✅ Blockchain-focused with Casper-specific utilities \
+✅ Consistent design across the Casper ecosystem
+<br/>
+
+# Get started
+
+Install from [NPM](https://www.npmjs.com/package/@make-software/cspr-design) to access ready-to-use components that bring the beloved [Casper blockchain](https://casper.networ) community UI to your dApp:
+
+```
+npm install @make-software/cspr-design --save
+```
+
+Save time on design and implementation with a consistent Casper Network look:
+``` tsx
+import {
+  CSPR,
+  BodyText,
+  FlexColumn,
+} from '@make-software/cspr-design';
+
+const balance = () => (
+  <FlexColumn itemsSpacing={20}>
+    <BodyText size={2}>Account balance:</BodyText>
+    <CSPR
+      motes="50000000000000"
+      precisionCase={PrecisionCase.full}
+    />
+  </FlexColumn>
+);
+```
+

src/Icons.mdx src/02-Icons.mdxsrc/Icons.mdx renamed to src/02-Icons.mdx

@@ -2,7 +2,7 @@ import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs/blocks';
 import {themeConfig} from "./lib/index.js";
 import {StyledHeaderWrapper, StyledWrapper} from "./storybook-components.tsx";
 
-<Meta title="Palette of colors"/>
+<Meta title="Color palette"/>
 
 <StyledWrapper>
     <StyledHeaderWrapper>

src/Palette.mdx src/03-ColorPalette.mdxsrc/Palette.mdx renamed to src/03-ColorPalette.mdx

@@ -43,7 +43,7 @@ export const StyledHeaderWrapper = styled.span(({}) => ({
 export const StyledWrapper = styled.div(({}) => ({
   backgroundColor: '#181D40',
   width: '100%',
-  height: '300px',
+  height: '150px',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',