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/components/HomepageFeatures/index.tsx

@@ -14,25 +14,25 @@ const FeatureList: FeatureItem[] = [
     Svg: require('@site/static/img/easy-to-use.svg').default,
     description: (
       <>
-        Playwright MCP Server is easy to use, just change the Claude config file and you are done.
+        MCP Database Server is easy to configure. Just update your Claude Desktop config file, and you're ready to start querying your databases!
       </>
     ),
   },
   {
-    title: 'Test UI and APIs',
-    Svg: require('@site/static/img/playwright.svg').default,
+    title: 'Multiple Database Support',
+    Svg: require('@site/static/img/mcp-database.svg').default,
     description: (
       <>
-       Test both UI and API of your application with plain English text. No <code>code</code> required.
+        Seamlessly connect to <code>SQLite</code>, <code>SQL Server</code>, and <code>PostgreSQL</code> databases with a consistent interface for all your data needs.
       </>
     ),
   },
   {
-    title: 'Powered by NodeJS',
+    title: 'Powered by Node.js',
     Svg: require('@site/static/img/node.svg').default,
     description: (
       <>
-       Playwright MCP Server is built on top of NodeJS, making it fast and efficient.
+        Built with Node.js for high performance and reliability. Benefit from connection pooling, async operations, and efficient memory management.
       </>
     ),
   },
@@ -41,12 +41,14 @@ const FeatureList: FeatureItem[] = [
 function Feature({title, Svg, description}: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <Heading as="h3">{title}</Heading>
-        <p>{description}</p>
+      <div className={styles.featureItem}>
+        <div className="text--center">
+          <Svg className={styles.featureSvg} role="img" />
+        </div>
+        <div className="text--center">
+          <Heading as="h3" className={styles.featureTitle}>{title}</Heading>
+          <p className={styles.featureDescription}>{description}</p>
+        </div>
       </div>
     </div>
   );
@@ -56,6 +58,12 @@ export default function HomepageFeatures(): JSX.Element {
   return (
     <section className={styles.features}>
       <div className="container">
+        <div className="row">
+          <div className="col col--12 text--center">
+            <Heading as="h2">Key Features</Heading>
+            <p style={{marginBottom: '3rem'}}>Powerful capabilities to enhance your Claude interactions with databases</p>
+          </div>
+        </div>
         <div className="row">
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />

docs/src/components/HomepageFeatures/styles.module.css

@@ -3,9 +3,39 @@
   align-items: center;
   padding: 2rem 0;
   width: 100%;
+  background-color: var(--ifm-color-emphasis-100);
 }
 
 .featureSvg {
-  height: 200px;
-  width: 200px;
+  height: 140px;
+  width: 140px;
+  margin-bottom: 1.5rem;
+  transition: transform 0.3s ease;
+}
+
+.featureItem {
+  padding: 2rem;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  height: 100%;
+}
+
+.featureItem:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.featureItem:hover .featureSvg {
+  transform: scale(1.05);
+}
+
+.featureTitle {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.featureDescription {
+  font-size: 1rem;
+  line-height: 1.5;
 }

docs/src/css/custom.css

@@ -6,25 +6,25 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #3578e5;
+  --ifm-color-primary-dark: #2160c4;
+  --ifm-color-primary-darker: #1a56b9;
+  --ifm-color-primary-darkest: #144098;
+  --ifm-color-primary-light: #4889e8;
+  --ifm-color-primary-lighter: #5a96eb;
+  --ifm-color-primary-lightest: #80aff0;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #4e89e8;
+  --ifm-color-primary-dark: #3077e4;
+  --ifm-color-primary-darker: #226fe3;
+  --ifm-color-primary-darkest: #1957c0;
+  --ifm-color-primary-light: #6c9bec;
+  --ifm-color-primary-lighter: #7ca6ee;
+  --ifm-color-primary-lightest: #a8c4f4;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

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>
   );