19 redesign landing page

docs/faq.md

@@ -47,10 +47,6 @@ Kindly review the [Disclaimer](/docs/getting-started#disclaimer) carefully once
 
 It's [JetBrains Mono](https://www.jetbrains.com/lp/mono/), the opensource typeface by JetBrains.
 
-### Where did you dig up the landing page illustrations from?
-
-Illustrations are from [unDraw](https://undraw.co/).
-
 ### Can we meet Tyko, the mascot?
 
 Nope-that can't do, he's a very busy fella!

package.json

@@ -20,6 +20,8 @@
     "@docusaurus/preset-classic": "3.7.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "lucide": "^0.542.0",
+    "lucide-react": "^0.542.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

src/pages/index.tsx

@@ -1,70 +1,194 @@
-import type {ReactNode} from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-import Heading from '@theme/Heading';
-
-import styles from './index.module.css';
+import React from "react";
+import Layout from "@theme/Layout";
+import Link from "@docusaurus/Link";
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { BarChart3, Lock , HeartPulse, Rocket, CircleFadingArrowUp, Ship, Cable} from "lucide-react";
 
-// function HomepageHeader() {
-//   const {siteConfig} = useDocusaurusContext();
-//   return (
-//     <header className={clsx('hero hero--primary', styles.heroBanner)}>
-//       <div className="container">
-//         <Heading as="h1" className="hero__title">
-//           {siteConfig.title}
-//         </Heading>
-//         <p className="hero__subtitle">{siteConfig.tagline}</p>
-//         <div className={styles.buttons}>
-//           <Link
-//             className="button button--secondary button--lg"
-//             to="/docs/getting-started">
-//             Get Started ->
-//           </Link>
-//         </div>
-//       </div>
-//     </header>
-//   );
-// }
-function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
-  const imgUrl = useBaseUrl('img/hero-banner.png');  // put your image at static/img/hero.jpg
+export default function Home(): JSX.Element {
+  const { siteConfig } = useDocusaurusContext();
 
-  return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className={styles.heroImageWrapper}>
-        <img src={imgUrl} alt="Hero background" />
-      </div>
-      <div className="container">
-        <Heading as="h1" className={clsx('hero__title', styles.heroCustomTitle)}>
-          {siteConfig.title}
-        </Heading>
-        <p className={clsx('hero__subtitle',styles.heroCustomSubtitle)}>{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/getting-started">
-            Get Started ->
-          </Link>
-        </div>
-      </div>
-    </header>
-  );
-}
-
-export default function Home(): ReactNode {
-  const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
       title={`Typesense Kubernetes Operator Docs`}
       description="TyKO, your turnkey Typesense Kubernetes Operator">
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-      </main>
+      {/* HERO */}
+      <section
+        style={{
+          padding: "3rem 0 1rem",
+          background: "linear-gradient(180deg, var(--ifm-hero-background-color, #0f172a) 0%, var(--ifm-background-surface-color) 100%)",
+          color: "var(--ifm-hero-text-color, #fff)",
+        }}
+      >
+        <div className="container">
+          <div className="row" style={{ alignItems: "center" }}>
+            <div className="col col--7">
+              <h1 style={{ fontSize: "3rem", marginBottom: "0.5rem", lineHeight: 1.1 }}>
+                TyKO
+              </h1>
+              <p style={{ fontSize: "1.15rem", opacity: 0.9, marginBottom: "1.25rem" }}>
+                Your turnkey Typesense Kubernetes Operator<br/>
+                for highly available self-healing Typesense clusters
+              </p>
+              <div style={{ display: "flex", gap: "0.75rem", flexWrap: "wrap" }}>
+                <Link className="button button--primary button--lg" to="/docs/getting-started">
+                  Get Started ->
+                </Link>
+                <Link className="button button--secondary button--lg" to="https://github.com/akyriako/typesense-operator">
+                  GitHub
+                </Link>
+              </div>
+            </div>
+            <div className="col col--5" style={{ textAlign: "center" }}>
+              <img
+                src={useBaseUrl('/img/tyko-logo.png')}
+                alt="TyKO Hero"
+                style={{ maxWidth: "50%" }}
+                onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* FEATURES */}
+      <section className="container" style={{ padding: "3.5rem 0 2rem" }}>
+        <div className="row" style={{ rowGap: "1.5rem" }}>
+          {features.map((f) => (
+            <div key={f.title} className="col col--4">
+              <div
+                className="card"
+                style={{ height: "100%", borderRadius: "1rem", boxShadow: "var(--ifm-global-shadow-lw)" }}
+              >
+                <div className="card__body">
+                  <div style={{ fontSize: "2rem", lineHeight: 1, marginBottom: ".5rem" }}>{f.icon}</div>
+                  <h3 style={{ margin: 0 }}>{f.title}</h3>
+                  <p style={{ opacity: 0.85 }}>{f.desc}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* HOW IT WORKS */}
+      <section style={{ padding: "2rem 0 3.5rem", background: "var(--ifm-background-color)" }}>
+        <div className="container">
+          <div className="row" style={{ marginBottom: "1rem" }}>
+            <div className="col col--12" style={{ textAlign: "center" }}>
+              <h2 style={{ marginBottom: ".25rem" }}>How it works</h2>
+              <p style={{ opacity: 0.8 }}>Three simple steps to set up a highly available Typesense cluster</p>
+            </div>
+          </div>
+          <div className="row" style={{ rowGap: "1rem" }}>
+            {steps.map((s, i) => (
+              <div key={s.title} className="col col--4">
+                <div className="card" style={{ height: "100%", borderRadius: "1rem" }}>
+                  <div className="card__body">
+                    <div style={{ display: "flex", alignItems: "center", gap: ".6rem", marginBottom: ".25rem" }}>
+                      <div
+                        style={{
+                          width: 30,
+                          height: 30,
+                          borderRadius: 999,
+                          display: "grid",
+                          placeItems: "center",
+                          fontWeight: 700,
+                          background: "var(--ifm-color-primary)",
+                          color: "#fff",
+                        }}
+                        aria-hidden
+                      >
+                        {i + 1}
+                      </div>
+                      <h3 style={{ margin: 0, fontSize: "1.1rem" }}>{s.title}</h3>
+                    </div>
+                    <p style={{ opacity: 0.85, marginBottom: ".75rem" }}>{s.desc}</p>
+                    <Link className="button button--sm button--primary" to={s.href}>
+                      Learn more ->
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FOOTER-LIKE LAST SECTION (Lucide-style, fixed colors) */}
+      <section
+        aria-label="Footer"
+        style={{
+          padding: "3rem 0",
+          background: "var(--ifm-footer-background-color, #0b1220)",
+          color: "var(--ifm-footer-text-color, var(--ifm-color-emphasis-800))",
+          borderTop: "1px solid var(--ifm-toc-border-color)",
+        }}
+      >
+
+        <div className="container">
+          <div className="row" style={{ alignItems: "center" }}>
+            <div className="col col--6">
+              <small style={{ opacity: 0.8 }}>
+                © 2024-{new Date().getFullYear()} {siteConfig.title}, GPL-3.0 Licensed
+              </small>
+            </div>
+            <div className="col col--6" style={{ textAlign: "right" }}></div>
+          </div>
+        </div>
+      </section>
+
     </Layout>
   );
 }
+
+const features = [
+  {
+    title: "Self‑healing clusters",
+    desc: "Automated failover, quorum recovery, and raft re-evaluation keep your Typesense clusters healthy without any manual intervention.",
+    icon: <HeartPulse />,
+  },
+  {
+    title: "Zero‑downtime updates",
+    desc: "Rolling updates with safe orchestration ensure your clusters stay online while you upgrade or downgrade their Typesense version.",
+    icon: <CircleFadingArrowUp />,
+  },
+  {
+    title: "Kubernetes‑native",
+    desc: "Built with Go & Operator SDK, following Kubernetes best‑practices. Extend TyKO to your needs if you wish.",
+    icon: <Ship />,
+  },
+  {
+    title: "Batteries‑included",
+    desc: "Ingress, Services, StatefulSets, ConfigMaps, Secrets, PodMetrics and many more, all managed for you.",
+    icon: <Rocket />,
+  },
+  {
+    title: "Observability",
+    desc: "Expose Typesense nodes health status and metrics to Prometheus for monitoring and alerting purposes.",
+    icon: <BarChart3 />,
+  },
+  {
+    title: "Production-ready",
+    desc: "Opinionated defaults for secure production‑ready clusters and sane resource limits.",
+    icon: <Cable />,
+  },
+] as const;
+
+const steps = [
+  {
+    title: "Install the Operator",
+    desc: "Add the Helm repo and install to your cluster.",
+    href: "/docs/installation#deploy-using-helm",
+  },
+  {
+    title: "Declare your Cluster",
+    desc: "Apply a TypesenseCluster YAML with the size and storage you need.",
+    href: "/docs/crds/crds-examples",
+  },
+  {
+    title: "Let TyKO do the rest",
+    desc: "TyKO provisions, configures, monitors and heals the cluster automatically.",
+    href: "/docs/how-it-works/",
+  },
+] as const;