chore: add docs/

martian0x80 · Nov 18, 2024 · d5e0945 · d5e0945
1 parent a8e73f8
commit d5e0945
Show file tree

Hide file tree

Showing 28 changed files with 6,506 additions and 0 deletions.
diff --git a/docs/app/favicon.ico b/docs/app/favicon.ico
diff --git a/docs/app/fonts/GeistMonoVF.woff b/docs/app/fonts/GeistMonoVF.woff
diff --git a/docs/app/fonts/GeistVF.woff b/docs/app/fonts/GeistVF.woff
diff --git a/docs/app/globals.css b/docs/app/globals.css
@@ -0,0 +1,87 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+	scroll-behavior: smooth;
+}
+
+body {
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+	.text-balance {
+		text-wrap: balance;
+	}
+}
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 240 10% 3.9%;
+		--card: 0 0% 100%;
+		--card-foreground: 240 10% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 240 10% 3.9%;
+		--primary: 240 5.9% 10%;
+		--primary-foreground: 0 0% 98%;
+		--secondary: 240 4.8% 95.9%;
+		--secondary-foreground: 240 5.9% 10%;
+		--muted: 240 4.8% 95.9%;
+		--muted-foreground: 240 3.8% 46.1%;
+		--accent: 240 4.8% 95.9%;
+		--accent-foreground: 240 5.9% 10%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 240 5.9% 90%;
+		--input: 240 5.9% 90%;
+		--ring: 240 10% 3.9%;
+		--chart-1: 12 76% 61%;
+		--chart-2: 173 58% 39%;
+		--chart-3: 197 37% 24%;
+		--chart-4: 43 74% 66%;
+		--chart-5: 27 87% 67%;
+		--radius: 0.5rem;
+	}
+	.dark {
+		--background: 240 10% 3.9%;
+		--foreground: 0 0% 98%;
+		--card: 240 10% 3.9%;
+		--card-foreground: 0 0% 98%;
+		--popover: 240 10% 3.9%;
+		--popover-foreground: 0 0% 98%;
+		--primary: 0 0% 98%;
+		--primary-foreground: 240 5.9% 10%;
+		--secondary: 240 3.7% 15.9%;
+		--secondary-foreground: 0 0% 98%;
+		--muted: 240 3.7% 15.9%;
+		--muted-foreground: 240 5% 64.9%;
+		--accent: 240 3.7% 15.9%;
+		--accent-foreground: 0 0% 98%;
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 240 3.7% 15.9%;
+		--input: 240 3.7% 15.9%;
+		--ring: 240 4.9% 83.9%;
+		--chart-1: 220 70% 50%;
+		--chart-2: 160 60% 45%;
+		--chart-3: 30 80% 55%;
+		--chart-4: 280 65% 60%;
+		--chart-5: 340 75% 55%;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+	html,
+	body {
+		background-color: black;
+		height: 100%;
+	}
+}
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/docs/app/page.tsx b/docs/app/page.tsx
@@ -0,0 +1,5 @@
+import { Home } from "@/components/home"
+
+export default function Page() {
+	return <Home />
+}
diff --git a/docs/assets/hime.png b/docs/assets/hime.png
diff --git a/docs/bun.lockb b/docs/bun.lockb
diff --git a/docs/components.json b/docs/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/docs/components/comentario.tsx b/docs/components/comentario.tsx
@@ -0,0 +1,8 @@
+// components/ComentarioComments.tsx
+import { useEffect, useRef } from "react"
+
+export function ComentarioComments() {
+	const elementRef = useRef<HTMLElement>(null)
+
+	return <comentario-comments ref={elementRef} />
+}
diff --git a/docs/components/comment.tsx b/docs/components/comment.tsx
@@ -0,0 +1,19 @@
+import Script from "next/script"
+import { useEffect, useState } from "react"
+
+export function Comments() {
+	const [isMounted, setIsMounted] = useState(false)
+
+	useEffect(() => {
+		setIsMounted(true)
+		console.log("mounted")
+	}, [])
+
+	return (
+		<>
+			{isMounted && (
+				<Script defer={true} src="https://chat.crunchycomments.com/comentario.js" strategy="lazyOnload" />
+			)}
+		</>
+	)
+}
diff --git a/docs/components/custom-bnav.tsx b/docs/components/custom-bnav.tsx
@@ -0,0 +1,58 @@
+import { motion } from "framer-motion"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+
+export default function BottomNav() {
+	const [activeTab, setActiveTab] = useState("features")
+
+	return (
+		<motion.nav
+			className="fixed bottom-4 w-full flex justify-center left-[20px] z-50"
+			initial={{ opacity: 0, y: 50 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{ duration: 0.5, delay: 0.2 }}
+		>
+			<div className="relative flex items-center gap-6 bg-white/10 backdrop-blur-md rounded-full px-6 py-3">
+				{/* Animated pill background */}
+				<motion.div
+					className="absolute h-8 rounded-full bg-white/20"
+					layoutId="pill"
+					transition={{ type: "spring", duration: 0.5 }}
+					style={{
+						width: activeTab === "features" ? "85px" : activeTab === "demo" ? "65px" : "0px",
+						left: activeTab === "features" ? "20px" : activeTab === "demo" ? "125px" : "0px",
+					}}
+				/>
+
+				<a
+					href="#features"
+					className={`relative text-sm transition-colors px-3 py-1 ${
+						activeTab === "features" ? "text-white" : "text-white/70 hover:text-white"
+					}`}
+					onClick={() => setActiveTab("features")}
+				>
+					Features
+				</a>
+
+				<a
+					href="#demo"
+					className={`relative text-sm transition-colors px-3 py-1 ${
+						activeTab === "demo" ? "text-white" : "text-white/70 hover:text-white"
+					}`}
+					onClick={() => setActiveTab("demo")}
+				>
+					Demo
+				</a>
+
+				<Button
+					className={`relative bg-gradient-to-r from-orange-500 to-pink-500 text-white rounded-full hover:opacity-90 transition-opacity ${
+						activeTab === "install" ? "text-white" : "text-white/70 hover:text-white"
+					}`}
+					onClick={() => setActiveTab("install")}
+				>
+					Install Now
+				</Button>
+			</div>
+		</motion.nav>
+	)
+}
diff --git a/docs/components/dock.tsx b/docs/components/dock.tsx
@@ -0,0 +1,55 @@
+import React from "react"
+import { FloatingDock } from "@/components/ui/floating-dock"
+import {
+	IconBrandGithub,
+	IconBrandDiscord,
+	IconCurrencyLira,
+	IconSparkles,
+	IconArrowUpDashed,
+	IconDropletDown,
+} from "@tabler/icons-react"
+import Image from "next/image"
+
+export function FloatingDockB() {
+	const links = [
+		{
+			title: "Top",
+			icon: <IconArrowUpDashed className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
+			href: "#top",
+		},
+		{
+			title: "Features",
+			icon: <IconSparkles className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
+			href: "#features",
+		},
+		{
+			title: "Install",
+			icon: <IconDropletDown className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
+			href: "#install",
+		},
+		{
+			title: "Try Now",
+			icon: <IconCurrencyLira className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
+			href: "#demo",
+		},
+		{
+			title: "Discord",
+			icon: <IconBrandDiscord className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
+			href: "https://discord.com/invite/MW3rgwTcF9",
+		},
+		{
+			title: "GitHub",
+			icon: <IconBrandGithub className="h-full w-full text-neutral-500 dark:text-neutral-300" />,
+			href: "https://github.com/martian0x80/CrunchyComments",
+		},
+	]
+	return (
+		<div className="flex items-center justify-center w-full fixed bottom-4 z-50">
+			<FloatingDock
+				mobileClassName="translate-y-20"
+				items={links}
+				desktopClassName="dark backdrop-blur-3xl bg-inherit border border-neutral-200 dark:border-neutral-700"
+			/>
+		</div>
+	)
+}