docs: convert introduction to MDX and add React components for better UI

docs/overview/introduction.md → docs/overview/introduction.mdx

@@ -9,6 +9,11 @@ description:
 slug: "/"
 ---
 
+import FeatureList from "../../src/components/FeatureList"
+import InfoBox from "../../src/components/InfoBox"
+import PlatformGrid from "../../src/components/PlatformGrid"
+import PlatformCard from "../../src/components/PlatformCard"
+
 # Introduction
 
 This page provides a conceptual introduction to CodeRabbit. For a hands-on tutorial, see [Quickstart](/getting-started/quickstart/).
@@ -18,21 +23,32 @@ This page provides a conceptual introduction to CodeRabbit. For a hands-on tutor
 Developers can interact directly with the CodeRabbit bot within their existing Git platform's pull request interface to add context, ask questions, or even have the bot generate code. Over time, CodeRabbit learns from user input and improves its suggestions.
 
 <div class="video-container">
-  <iframe src="https://www.youtube.com/embed/3SyUOSebG7E?si=i0oT9RAnH0PW81lY" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
+	<iframe
+		src="https://www.youtube.com/embed/3SyUOSebG7E?si=i0oT9RAnH0PW81lY"
+		title="YouTube video player"
+		frameBorder="0"
+		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+		referrerPolicy="strict-origin-when-cross-origin"
+		allowFullScreen
+	></iframe>
 </div>
 
 ## Core features
 
 Core CodeRabbit features include the following:
 
-- Integrates rapidly with popular Git platforms and workflows.
-- Applies dozens of open-source, industry-standard code analyzers to every commit.
-- Implements code reviews as familiar pull-request comments.
-- Works with contributors through natural-language conversation in comments.
-- Learns and adapts to your team's code style and review preferences.
-- Provides an observability dashboard of code-contribution activity.
-- Practices strong privacy and security, with no retention of analyzed code.
-- Offers free use for public repositories, and flexible pricing for private codebases.
+<FeatureList
+	items={[
+		"Integrates rapidly with popular Git platforms and workflows.",
+		"Applies dozens of open-source, industry-standard code analyzers to every commit.",
+		"Implements code reviews as familiar pull-request comments.",
+		"Works with contributors through natural-language conversation in comments.",
+		"Learns and adapts to your team's code style and review preferences.",
+		"Provides an observability dashboard of code-contribution activity.",
+		"Practices strong privacy and security, with no retention of analyzed code.",
+		"Offers free use for public repositories, and flexible pricing for private codebases.",
+	]}
+/>
 
 ## Seamless workflow integration
 
@@ -58,52 +74,93 @@ No matter how you tune and customize CodeRabbit, its default settings make it us
 
 CodeRabbit integrates in just a few clicks with many popular Git platforms:
 
-- GitHub, GitHub Enterprise Cloud, GitHub Enterprise Server,
-- GitLab, GitLab Self-Managed
-- Azure DevOps
-- Bitbucket Cloud
-
-For more information, see [Supported Git Platforms](/platforms/).
+<PlatformGrid>
+	<PlatformCard
+		imageSrc="/img/overview/Github.png"
+		name="GitHub, including GitHub Enterprise Server"
+	/>
+	<PlatformCard
+		imageSrc="/img/overview/Gitlab.png"
+		name="GitLab, including self-managed GitLab"
+	/>
+	<PlatformCard imageSrc="/img/overview/Bitbucket.png" name="Bitbucket Cloud" />
+	<PlatformCard imageSrc="/img/overview/Azure.png" name="Azure DevOps" />
+</PlatformGrid>
+<InfoBox>
+	For more information, see <a href="/platforms/">Supported Git Platforms</a>.
+</InfoBox>
 
 ### Issue-management integration
 
 You can integrate CodeRabbit with issue-management platforms. This lets you ask CodeRabbit to create tickets during code reviews, or chat with CodeRabbit about your code from within issue comments. Compatible platforms include the following:
 
-- GitHub Issues
-- GitLab Issues
-- Jira
-- Linear
+<PlatformGrid>
+	<PlatformCard imageSrc="img/overview/Github.png" name="GitHub Issues" />
+	<PlatformCard imageSrc="img/overview/Gitlab.png" name="GitLab Issues" />
+	<PlatformCard imageSrc="img/overview/Jira.png" name="Jira" />
+	<PlatformCard imageSrc="img/overview/Linear.png" name="Linear" />
+</PlatformGrid>
 
-For more information, see [Issue Creation](/guides/issue-creation) and [Issue Chat](/guides/issue-chat).
+<InfoBox>
+	For more information, see <a href="/guides/issue-creation">Issue Creation</a>{" "}
+	and <a href="/guides/issue-chat">Issue Chat</a>.
+</InfoBox>
 
 ## Data privacy and security
 
 CodeRabbit collects only the minimum amount of information needed to provide you with our code review services. Our privacy and security posture centers around protecting your data through ephemerality:
 
-- All queries to large language models (LLMs) exist in-memory only, with zero retention after each query completes.
-- We don't use your code, code reviews, or other collected data to train LLMs.
-- CodeRabbit doesn't share any collected customer data with third parties.
-- We keep all customer data confidential, and isolated by organization.
-- Our data collection and storage practices comply with SOC 2 and GDPR standards.
-
-For more information about how we protect your data, see [the CodeRabbit Trust Center](https://trust.coderabbit.ai).
+<FeatureList
+	items={[
+		"All queries to large language models (LLMs) exist in-memory only, with zero retention after each query completes.",
+		"We don't use your code, code reviews, or other collected data to train LLMs.",
+		"CodeRabbit doesn't share any collected customer data with third parties.",
+		"Works with contributors through natural-language conversation in comments.",
+		"We keep all customer data confidential, and isolated by organization.",
+		"Our data collection and storage practices comply with SOC 2 and GDPR standards.",
+	]}
+/>
+
+<InfoBox>
+	For more information about how we protect your data, see{" "}
+	<a href="https://trust.coderabbit.ai">the CodeRabbit Trust Center</a>.
+</InfoBox>
 
 ## Flexible pricing, free for public repositories
 
 Public repositories can use the Pro tier of CodeRabbit at no charge, including all of the code-review features described on this page. Rate limits might apply.
 
-For private repositories, a number of pricing tiers are available. These range from a Free tier that offers unlimited code-change summaries, to an Enterprise tier with access to advanced features and SLA support. For more information, see [Pricing](https://www.coderabbit.ai/pricing).
+For private repositories, a number of pricing tiers are available. These range from a Free tier that offers unlimited code-change summaries, to an Enterprise tier with access to advanced features and SLA support.
+
+<InfoBox>
+	For more information, see{" "}
+	<a href="https://www.coderabbit.ai/pricing">Pricing</a>.
+</InfoBox>
 
 ## Review local changes from within VSCode
 
 As a separate, free product, CodeRabbit offers a VSCode extension that brings a subset of core CodeRabbit features to VSCode. This lets you use the power of CodeRabbit to tune and tidy your code changes locally before pushing your changes into a formal pull request for more thorough reviews.
 
-For more information, see [Review local changes](/code-editors).
+<InfoBox>
+	For more information, see <a href="/code-editors">Review local changes</a>.
+</InfoBox>
 
 ## What's next
 
-- [Quickstart](/getting-started/quickstart/) lets you experience your first CodeRabbit code review first-hand.
-
-- [Review local changes](/code-editors) guides you through installing and using a subset of CodeRabbit features directly from your code editor.
-
-- [Why CodeRabbit?](/overview/why-coderabbit) dives further into the philosophies and technologies that drive CodeRabbit.
+<FeatureList
+	items={[
+		<>
+			<a href="/getting-started/quickstart/">Quickstart</a> lets you experience
+			your first CodeRabbit code review first-hand.
+		</>,
+		<>
+			<a href="/code-editors">Review local changes</a> guides you through
+			installing and using a subset of CodeRabbit features directly from your
+			code editor.
+		</>,
+		<>
+			<a href="/overview/why-coderabbit">Why CodeRabbit?</a> dives further into
+			the philosophies and technologies that drive CodeRabbit.
+		</>,
+	]}
+/>

src/components/FeatureList/FeatureList.module.css

@@ -0,0 +1,43 @@
+.crFeatureCard {
+	background: var(--imf-list-card-background-color);
+	border-radius: 8px;
+	padding: 1.3rem;
+	margin: 0.8rem 0;
+	border: 2px solid var(--ifm-background-color-secondary);
+}
+
+.crFeatureList {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.crFeatureList li {
+	position: relative;
+	padding-left: 1.7em;
+	margin-bottom: 1em;
+	font-size: 1.08rem;
+	line-height: 1.6;
+}
+
+.crFeatureList li:before {
+	content: "";
+	position: absolute;
+	left: 0.3em;
+	top: 0.5em;
+	width: 0.6em;
+	height: 0.6em;
+	background: var(--imf-list-bullets-color);
+	border-radius: 50%;
+	display: inline-block;
+}
+
+.crFeatureList li a {
+	color: var(--ifm-color-primary, orange);
+	text-decoration: none;
+	font-weight: 500;
+}
+
+.crFeatureList li a:hover {
+	text-decoration: underline;
+}

src/components/FeatureList/FeatureList.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import styles from "./FeatureList.module.css"
+
+interface FeatureListProps {
+	items: React.ReactNode[]
+	className?: string
+}
+
+export const FeatureList: React.FC<FeatureListProps> = ({
+	items,
+	className,
+}) => {
+	return (
+		<div className={`${styles.crFeatureCard} ${className || ""}`}>
+			<ul className={styles.crFeatureList}>
+				{items.map((item, index) => (
+					<li key={index}>{item}</li>
+				))}
+			</ul>
+		</div>
+	)
+}
+
+export default FeatureList

src/components/FeatureList/index.ts

@@ -0,0 +1 @@
+export { FeatureList, default } from "./FeatureList"

src/components/InfoBox/InfoBox.module.css

@@ -0,0 +1,19 @@
+.infoBox {
+	border: 2px solid var(--imf-color-border-orange);
+	border-radius: 12px;
+	background: var(--imf-color-background-orange-light);
+	padding: 0.7em;
+}
+
+.infoBox p {
+	margin: 0rem;
+}
+
+.infoBox a {
+	color: var(--ifm-color-primary);
+	text-decoration: none;
+}
+
+.infoBox a:hover {
+	text-decoration: underline;
+}

src/components/InfoBox/InfoBox.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+import styles from "./InfoBox.module.css"
+
+interface InfoBoxProps {
+	children: React.ReactNode
+	className?: string
+}
+
+export const InfoBox: React.FC<InfoBoxProps> = ({ children, className }) => {
+	return (
+		<div className={`${styles.infoBox} ${className || ""}`}>{children}</div>
+	)
+}
+
+export default InfoBox

src/components/InfoBox/index.ts

@@ -0,0 +1 @@
+export { default, InfoBox } from "./InfoBox"

src/components/PlatformCard/PlatformCard.module.css

@@ -0,0 +1,18 @@
+.platformCard {
+	display: flex;
+	align-items: center;
+	background: var(--imf-list-card-background-color);
+	border-radius: 8px;
+	padding: 1.3rem;
+	border: 2px solid var(--ifm-background-color-secondary);
+}
+
+.platformIcon {
+	width: 32px;
+	height: 32px;
+	margin-right: 16px;
+}
+
+[data-theme="dark"] .platformIcon {
+	filter: invert(1);
+}

src/components/PlatformCard/PlatformCard.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import styles from "./PlatformCard.module.css"
+
+interface PlatformCardProps {
+	imageSrc: string
+	name: string
+	className?: string
+}
+
+export const PlatformCard: React.FC<PlatformCardProps> = ({
+	imageSrc,
+	name,
+	className,
+}) => {
+	return (
+		<div className={`${styles.platformCard} ${className || ""}`}>
+			<img className={styles.platformIcon} src={imageSrc} alt={name} />
+			<span>{name}</span>
+		</div>
+	)
+}
+
+export default PlatformCard

src/components/PlatformCard/index.ts

@@ -0,0 +1 @@
+export { PlatformCard, default } from "./PlatformCard"

src/components/PlatformGrid/PlatformGrid.module.css

@@ -0,0 +1,6 @@
+.platformGrid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 1rem;
+	margin: 1.5rem 0;
+}

src/components/PlatformGrid/PlatformGrid.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import styles from "./PlatformGrid.module.css"
+
+interface PlatformGridProps {
+	children: React.ReactNode
+	className?: string
+}
+
+export const PlatformGrid: React.FC<PlatformGridProps> = ({
+	children,
+	className,
+}) => {
+	return (
+		<div className={`${styles.platformGrid} ${className || ""}`}>
+			{children}
+		</div>
+	)
+}
+
+export default PlatformGrid

src/components/PlatformGrid/index.ts

@@ -0,0 +1 @@
+export { PlatformGrid, default } from "./PlatformGrid"

src/css/custom.css

@@ -39,6 +39,12 @@
 	--ifm-navbar-height: 5rem;
 	--ifm-font-family-base: "Poppins", "Work Sans", sans-serif;
 	--ifm-background-color-primary: #f6f6f1;
+	--ifm-background-color-secondary: #e8e8e8;
+	--ifm-breadcrumb-item-background-active: #ffe9e2;
+	--imf-list-card-background-color: #ffffff;
+	--imf-list-bullets-color: #25bab1;
+	--imf-color-background-orange-light: #fffcfb;
+	--imf-color-border-orange: #ffceb6;
 }
 
 [data-theme="dark"] {
@@ -51,6 +57,12 @@
 	--ifm-color-primary-lightest: #171717;
 	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 	--ifm-background-color-primary: #171717;
+	--ifm-background-color-secondary: #232323;
+	--ifm-breadcrumb-item-background-active: #3f322e;
+	--imf-list-card-background-color: #232323;
+	--imf-list-bullets-color: #208682;
+	--imf-color-background-orange-light: #232323;
+	--imf-color-border-orange: #232323;
 }
 
 #__docusaurus {