Remove obsolete release notes and update homepage features for MCP Database Server. Added support for multiple databases and improved UI elements. Updated styles and SVG assets for better presentation.

docs/src/pages/index.module.css

@@ -8,6 +8,7 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  background: linear-gradient(135deg, var(--ifm-color-primary-darkest) 0%, var(--ifm-color-primary) 100%);
 }
 
 @media screen and (max-width: 996px) {
@@ -20,4 +21,37 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-top: 2rem;
+}
+
+.button {
+  margin: 0 0.5rem;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+.heroTitle {
+  font-size: 3rem;
+  font-weight: 800;
+  margin-bottom: 1rem;
+}
+
+.heroSubtitle {
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+  opacity: 0.9;
+}
+
+.callToAction {
+  background-color: var(--ifm-color-emphasis-100);
+  padding: 5rem 0;
+  margin-top: 2rem;
+  background: linear-gradient(135deg, var(--ifm-color-emphasis-200) 0%, var(--ifm-color-emphasis-100) 100%);
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
 }

docs/src/pages/index.tsx

@@ -12,15 +12,20 @@ function HomepageHeader() {
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
-        <Heading as="h1" className="hero__title">
+        <Heading as="h1" className={styles.heroTitle}>
           {siteConfig.title}
         </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <p className={styles.heroSubtitle}>{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link
-            className="button button--secondary button--lg"
+            className={clsx('button button--secondary button--lg', styles.button)}
             to="/docs/intro">
-            Playwright MCP Server Tutorial - 5min ⏱️
+            Get Started with Database Server ⏱️
+          </Link>
+          <Link
+            className={clsx('button button--outline button--lg', styles.button)}
+            to="/docs/database-tools">
+            View Database Tools
           </Link>
         </div>
       </div>
@@ -28,15 +33,80 @@ function HomepageHeader() {
   );
 }
 
+function DatabaseSupport() {
+  return (
+    <section className="padding-vert--xl">
+      <div className="container">
+        <div className="row">
+          <div className="col col--8 col--offset-2 text--center">
+            <Heading as="h2">Supported Databases</Heading>
+            <p className="padding-vert--md">
+              The MCP Database Server provides seamless integration with multiple database systems,
+              allowing Claude to query and manipulate data with ease.
+            </p>
+          </div>
+        </div>
+        <div className="row padding-vert--lg">
+          <div className="col col--4 text--center">
+            <div className="padding--lg">
+              <h3>SQLite</h3>
+              <p>Perfect for local development and lightweight applications.</p>
+            </div>
+          </div>
+          <div className="col col--4 text--center">
+            <div className="padding--lg">
+              <h3>SQL Server</h3>
+              <p>Robust enterprise-grade database with powerful features.</p>
+            </div>
+          </div>
+          <div className="col col--4 text--center">
+            <div className="padding--lg">
+              <h3>PostgreSQL</h3>
+              <p>Advanced open-source database with extensive capabilities.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function CallToAction() {
+  return (
+    <section className={styles.callToAction}>
+      <div className="container">
+        <div className="row">
+          <div className="col col--10 col--offset-1 text--center">
+            <Heading as="h2">Ready to Connect Claude to Your Databases?</Heading>
+            <p className="padding-vert--md">
+              Start leveraging the power of AI with your structured data today.
+              Follow our simple setup guide to get up and running in minutes.
+            </p>
+            <div className="padding-vert--md">
+              <Link
+                className="button button--primary button--lg"
+                to="/docs/getting-started">
+                Get Started Now
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 export default function Home(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
       title={`${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      description="Connect Claude to your databases with MCP Database Server">
       <HomepageHeader />
       <main>
         <HomepageFeatures />
+        <DatabaseSupport />
+        <CallToAction />
       </main>
     </Layout>
   );