feat(website): add Docs page

Author: halvaradop

app/src/app/docs/page.tsx app/src/app/docs/page-old.tsxapp/src/app/docs/page.tsx renamed to app/src/app/docs/page-old.tsx

@@ -0,0 +1,58 @@
+# Documentation
+
+Welcome to the official documentation of @halvaradop/tailwindcss — your modern utility toolkit for Tailwind CSS v4.
+
+Unlock intuitive utilities, enhanced variants, and seamless extensions to elevate your workflow.
+
+## Getting Started
+
+Set up in seconds:
+
+- Installation — Add the package with your favorite manager.
+- Configuration — Extend Tailwind with the new plugin API, variants, and theme modifiers.
+- Usage — See real-world examples and best practices.
+
+## Packages
+
+Our toolkit includes:
+
+- Animations — Elegant, composable animation utilities.
+- Helpers & Modifiers — Extend Tailwind’s base with extra power.
+- Custom Styles — Prebuilt styles and variants, native to Tailwind’s syntax.
+
+[Browse Utilities →](/docs/utilities)
+
+[Browse Animations →](/docs/animations)
+
+## Guides & Best Practices
+
+Curated articles to help you:
+
+- Use modifiers effectively
+- Design scalable utilities
+- Combine with official Tailwind plugins
+
+## Quick Reference
+
+Use the sidebar or search to find:
+
+- Utility names & usage
+- Default configs
+- Customization tips
+
+## Powered by Tailwind CSS v4
+
+Built on the latest Tailwind plugin API, variant system, and class-based customization. 100% compatible with v4.
+
+## Need Help?
+
+Visit our [Community Page](/community) to ask questions, report issues, or contribute.
+
+## Explore
+
+Jump to a popular section:
+
+- [Animations](/docs/utilities)
+- [Modifiers](/docs/animations)
+
+> Built for performance, clarity, and developer happiness. Start building modern UIs — the Tailwind way.

app/src/app/docs/page.mdx

@@ -26,6 +26,11 @@ export const HeaderMenu = () => {
                             <TextScramble>HOME</TextScramble>
                         </Link>
                     </motion.li>
+                    <motion.li className="[--nav-li:100%] base:[--nav-li:0%]" variants={itemVariants}>
+                        <Link href="/docs">
+                            <TextScramble>DOCS</TextScramble>
+                        </Link>
+                    </motion.li>
                     <motion.li className="[--nav-li:100%] base:[--nav-li:0%]" variants={itemVariants}>
                         <Link href="/docs/utilities">
                             <TextScramble>UTILITIES</TextScramble>