Add docs folder from V1.5 branch docker-false no-release

docs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

docs/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

docs/components/CustomLogo.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+
+const CustomLogo = () => {
+  return (
+    <div className="flex items-center space-x-2">
+      <Image src="/logo.png" alt="CH-UI Logo" width={32} height={32} />
+      <span className="font-bold text-xl">CH-UI</span>
+    </div>
+  );
+};
+
+export default CustomLogo;

docs/components/Footer.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import CustomLogo from "./CustomLogo";
+import { Github, Slack, Rss } from "lucide-react";
+
+export default function Footer() {
+  return (
+    <footer className="bg-muted py-12 px-4 md:px-6 lg:px-8 w-full">
+      <div className="container mx-auto">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
+          <div className="flex flex-col items-start gap-4">
+            <Link href="/" className="flex items-center gap-2" prefetch={false}>
+              <CustomLogo />
+            </Link>
+            <p className="text-muted-foreground text-sm">
+              Data is better when we see it!
+            </p>
+            <div className="flex items-center gap-4 mt-4">
+              <Link
+                href="#"
+                className="text-muted-foreground hover:text-primary transition-colors"
+                prefetch={false}
+              >
+                <Slack className="w-5 h-5" />
+              </Link>
+              <Link
+                href="https://github.com/caioricciuti/ch-ui"
+                className="text-muted-foreground hover:text-primary transition-colors"
+                prefetch={false}
+              >
+                <Github className="w-5 h-5" />
+              </Link>
+            </div>
+          </div>
+          <div className="grid gap-4">
+            <h4 className="text-sm font-medium">Documentation</h4>
+            <Link
+              href="/docs/getting-started"
+              className="text-sm hover:underline"
+              prefetch={false}
+            >
+              Get Started
+            </Link>
+            <Link
+              href="/docs/core-concepts"
+              className="text-sm hover:underline"
+              prefetch={false}
+            >
+              Core Concepts
+            </Link>
+            <Link
+              href="/docs/license"
+              className="text-sm hover:underline"
+              prefetch={false}
+            >
+              License
+            </Link>
+          </div>
+          <div className="grid gap-4">
+            <h4 className="text-sm font-medium">News</h4>
+            <Link
+              href="/blog"
+              className="text-sm hover:underline"
+              prefetch={false}
+            >
+              Blog
+            </Link>
+
+          </div>
+          <div className="grid gap-4">
+            <h4 className="text-sm font-medium">Community</h4>
+            <Link href="#" className="text-sm hover:underline" prefetch={false}>
+              Slack Channel
+            </Link>
+            <Link
+              href="https://github.com/caioricciuti/ch-ui/discussions"
+              className="text-sm hover:underline"
+              prefetch={false}
+            >
+              GitHub Discussions
+            </Link>
+            <Link href="#" className="text-sm hover:underline" prefetch={false}>
+              Contributing
+            </Link>
+          </div>
+        </div>
+        <div className="border-t pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+          <p className="text-xs text-muted-foreground">
+            © {new Date().getFullYear()} CH-UI. All rights reserved.
+          </p>
+          <div className="flex gap-4 text-xs text-muted-foreground">
+            <Link
+              href="/legal/privacy-policy"
+              className="hover:underline"
+              prefetch={false}
+            >
+              Privacy Policy
+            </Link>
+            <Link
+              href="/legal/terms-of-service"
+              className="hover:underline"
+              prefetch={false}
+            >
+              Terms of Service
+            </Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

docs/components/SlackLogo.tsx

@@ -0,0 +1,13 @@
+"use client";
+import React from "react";
+import Image from "next/image";
+
+const CustomLogo = () => {
+  return (
+    <div className="flex items-center space-x-2">
+      <Image src="/slack.svg" alt="slack Logo" width={24} height={24} />
+    </div>
+  );
+};
+
+export default CustomLogo;

docs/components/blog/ColourBlogHeader.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React, { useMemo } from "react";
+
+interface ColourBlogHeaderProps {
+  title: string;
+  date: string;
+}
+
+const ColourBlogHeader: React.FC<ColourBlogHeaderProps> = ({ title, date }) => {
+  const generateRandomColor = () => `hsl(${Math.random() * 360}, 70%, 60%)`;
+
+  const gradientStyle = useMemo(() => {
+    const color1 = generateRandomColor();
+    const color2 = generateRandomColor();
+    const color3 = generateRandomColor();
+    return {
+      background: `
+        radial-gradient(circle at 10% 90%, ${color1}, transparent 50%),
+        radial-gradient(circle at 90% 10%, ${color2}, transparent 50%),
+        radial-gradient(circle at 50% 50%, ${color3}, transparent 70%)
+      `,
+      opacity: 0.9,
+    };
+  }, []);
+
+  return (
+    <div className="w-full rounded-t-md rounded-b-none overflow-hidden">
+      <div className="relative w-full h-26 flex items-end">
+        <div
+          className="absolute inset-0 rounded-t-lg rounded-b-none"
+          style={gradientStyle}
+        />
+        <div
+          className="absolute inset-0"
+          style={{
+            background:
+              "linear-gradient(45deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%)",
+          }}
+        />
+        <div className="relative z-10 p-6">
+          <h2 className="text-2xl font-bold mb-2 truncate">{title}</h2>
+          <div className="text-sm opacity-80">
+            <span>{date}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ColourBlogHeader;

docs/components/blog/PostCard.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import Link from "next/link";
+import ColourBlogHeader from "./ColourBlogHeader";
+
+interface Post {
+  frontMatter: {
+    image?: string;
+    title: string;
+    description: string;
+    author: {
+      name: string;
+      github: string;
+    };
+    date: string;
+  };
+  route: string;
+}
+
+export function PostCard({ post }: { post: Post }) {
+  return (
+    <div className="rounded-lg shadow-md h-64 overflow-hidden dark:border dark:border-gray-600">
+      <div className="w-full rounded no-underline hover:no-underline">
+        <Link href={post.route}>
+          <ColourBlogHeader
+            title={post.frontMatter.title}
+            date={new Date(post.frontMatter.date).toLocaleDateString("en-US", {
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            })}
+          />
+        </Link>
+      </div>
+      <div className="p-6">
+        <h3 className="text-lg font-semibold mb-2 line-clamp-2 overflow-hidden">
+          {post.frontMatter.description}
+        </h3>
+
+        {post.frontMatter.author.name && post.frontMatter.author.github && (
+          <div className="flex justify-between items-center">
+            <Link target="_blank" href={`${post.frontMatter.author.github}`}>
+              <span className="text-sm text-blue-500 hover:underline">
+                {post.frontMatter.author.name || "Unknown author"}
+              </span>
+            </Link>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

docs/components/index-page/HeroSection.tsx

@@ -0,0 +1,57 @@
+"use client"
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowBigDown } from "lucide-react";
+
+export const HeroSection = () => {
+  return (
+    <section className="relative w-full py-12 md:py-24 lg:pt-26 min-h-screen lg-h-scren flex flex-col justify-between">
+      <div className="container mx-auto grid items-center gap-6 px-4 md:px-6 lg:grid-cols-2 lg:gap-10">
+        <div className="space-y-6">
+          <h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl bg-clip-text text-transparent bg-gradient-to-r from-orange-600 to-pink-500">
+            Data is better when we see it!
+          </h1>
+          <p className="max-w-[600px] md:text-lg/relaxed lg:text-lg/relaxed xl:text-2xl/relaxed font-semibold">
+            CH-UI makes working with data easy. This UI connects you directly to
+            your ClickHouse instance, allowing you to view, filter, and export
+            your data with ease.
+          </p>
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+            <Link
+              href="/docs/"
+              className="inline-flex items-center justify-center no-underline px-8 py-3 text-xl font-bold text-white rounded-md bg-gradient-to-r from-orange-600 to-orange-300 hover:from-orange-500 hover:to-orange-200 transition-all duration-300 ease-in-out transform hover:scale-105"
+            >
+              Get Started 🚀
+            </Link>
+          </div>
+        </div>
+        <div className="flex justify-center items-center">
+          <div className="relative w-full max-w-[500px] aspect-square">
+            <Image
+              src="/logo.png"
+              alt="Hero"
+              fill
+              style={{ objectFit: "contain" }}
+              className="rounded-lg"
+            />
+          </div>
+          <div className="absolute bottom-20 left-1/2 transform -translate-x-1/2 mb-4">
+            <ArrowBigDown
+              size={58}
+              onClick={() => {
+                window.scrollTo({
+                  top: window.innerHeight + 30,
+                  behavior: "smooth",
+                });
+              }}
+              className="text-orange-500 cursor-pointer animate-bounce"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;