From 7a12c26619c7739ca40436b0215fcfc86335863d Mon Sep 17 00:00:00 2001 From: ruru <142723369+ruru-m07@users.noreply.github.com> Date: Sat, 7 Sep 2024 20:58:53 +0530 Subject: [PATCH] feat(www): make leanding page bigger --- apps/www/app/(home)/page.tsx | 441 ++++++++++++++++++++++++++++++++++- 1 file changed, 440 insertions(+), 1 deletion(-) diff --git a/apps/www/app/(home)/page.tsx b/apps/www/app/(home)/page.tsx index 2a22f04..a8fc78e 100644 --- a/apps/www/app/(home)/page.tsx +++ b/apps/www/app/(home)/page.tsx @@ -1,10 +1,449 @@ import React from "react"; import Hero from "../../components/hero"; +import { + LibraryBig, + Palette, + Plus, + Server, + Settings2, + Sparkles, + TerminalIcon, +} from "lucide-react"; +import { cn } from "@/utils/cn"; +import { File, Folder, Files } from "fumadocs-ui/components/files"; +import { Spinner } from "ruru-ui/components/spinner"; +import dynamic from "next/dynamic"; +import { GitHubLogoIcon } from "@radix-ui/react-icons"; +import Link from "next/link"; +import { Button } from "ruru-ui/components/button"; + +const CodeBlockServer = dynamic( + () => import("@/components/ui/code-block-server"), + { + ssr: false, + loading: () => ( +
+ Loading... +
+ ), + }, +); export default function HomePage() { + const data = { + initTerminalText: `npx ruru-ui-cli@latest init + +┌ 🚀 Welcome to the installation wizard! +│ +◇ Would you like to use TypeScript (recommended)? +│ Yes +│ +◇ Where is your global CSS file? +│ ./app/globals.css +│ +◇ Where is your tailwind.config.js located? +│ ./tailwind.config.ts +│ +◆ Would you like to use CSS variables for colors? +└ ● Yes / ○ No`, + addComponentsTerminalText: `npx ruru-ui-cli@latest add + +◆ Which components would you like to add? +│ ◻ avatar +│ ◻ badge +│ ◼ button +│ ◻ checkbox +│ ◼ input +│ ◼ select +│ ◻ spinner +│ ◻ switch +│ ◼ tabs +│ ◼ textarea +│ ◻ tooltip +└ ◼ modal +⠙ Installing components... +✔ Done. +`, + dummyCode: [ + `import { Button } from "@/components/ui/button" + +export default function App() { + return ( +
+ +
+ ) +}`, + ], + }; + return (
- +
+ +
+
+
+ +
+
+ +
+

+ Craft components.
Customize endlessly, + Integrate effortlessly. +

+
+ +
+
+ +

Initialize.

+

+ Start by initializing components by running the following + command. +

+ +

+ This will start the installation wizard for Ruru UI. +

+
+
+ +

Add components.

+

+ Add components to your project by running the following command. +

+ +
+
+ +
+ +

Use components.

+

+ costomize and integrate components in your project. 🚀 +

+ +
+
+ + + + + + + + + + + + +
+
+ +
+
+
+
+ + + +
+
+ +
+
+ +
+

+ Loved by users. +
+ Built for developers. +

+
+ + + +
+
+
+ +

Customizable

+
+ + Customize components to fit your brand. + +
+ +
+
+ +

Animation

+
+ + Add animations to your components with ease. + +
+ +
+
+ +

CLI

+
+ + Integrate components with your existing project. + +
+ +
+
+ + + + + +

Hooks

+
+ + Use hooks to manage your components' state. + +
+ +
+
+ + + + + +

Blocks

+
+ + The Blocks To Build Your App Faster + +
+ +
+
+ +

Library support

+
+ + just install dependency and use it. + +
+ +
+
+ +

Theming

+
+ + Customize theme your components. + +
+ +
+
+ + + +

Tailwind

+
+ + Tailwind CSS support for components. + +
+ +
+
+ +

RSC

+
+ + Support for RSC (React Server Components). + +
+
+ + + +
+

+ Fully open-source, +
available on Github. +

+
+ + + +
+

+ Build Your Components. +

+
+ Available now + +
+
+ + Read Docs + + + Give a star + +
+
+
+
+
); } + +const ShapratorHorizontal = () => { + return
; +}; + +const StepCounter = ({ + count, + className, +}: { + count: number; + className?: string; +}) => { + return ( +
+ +
+ ); +}; + +const Terminal = ({ data }: { data: string }) => { + return ( +
+
+
+ +

+ Terminal +

+
+
+
+ 
+        {data}
+
+
+ ); +};