Update styling across documentation pages

data-sources/bigquery.mdx

@@ -3,4 +3,70 @@ title: 'BigQuery'
 description: 'Connect your BigQuery data warehouse to Basedash'
 ---
 
-Connect your BigQuery data warehouse to Basedash to start querying and managing your data.
+<Frame>
+  <img src="https://mintlify-assets.b-cdn.net/bigquery-connection-flow.png" alt="BigQuery Connection Flow" />
+</Frame>
+
+Connect your BigQuery data warehouse to Basedash to start querying and managing your data efficiently and securely.
+
+<Note>
+  Before you begin, make sure you have admin access to your BigQuery project and the necessary credentials ready.
+</Note>
+
+<Steps>
+  <Step title="Prepare Your Credentials">
+    You'll need:
+    - A Google Cloud Project ID
+    - Service Account Key (JSON format)
+    - Appropriate IAM permissions set up
+  </Step>
+
+  <Step title="Configure Connection">
+    In Basedash:
+    1. Navigate to **Data Sources**
+    2. Click **+ Add New Source**
+    3. Select **BigQuery** from the available connectors
+  </Step>
+
+  <Step title="Enter Connection Details">
+    Fill in the following required fields:
+    - Project ID
+    - Upload your Service Account Key
+    - (Optional) Set a custom connection name
+  </Step>
+
+  <Step title="Test and Verify">
+    - Click **Test Connection** to verify your credentials
+    - Ensure all necessary datasets are accessible
+    - Review any permission warnings
+  </Step>
+</Steps>
+
+<AccordionGroup>
+  <Accordion title="Connection Requirements" icon="list-check">
+    - Google Cloud Project with BigQuery API enabled
+    - Service account with `bigquery.dataViewer` role (minimum)
+    - Network access configured (if using VPC)
+  </Accordion>
+
+  <Accordion title="Security Best Practices" icon="shield-check">
+    - Use dedicated service accounts for Basedash
+    - Implement least-privilege access principles
+    - Regularly rotate service account keys
+    - Monitor query usage through BigQuery audit logs
+  </Accordion>
+</AccordionGroup>
+
+<CardGroup cols={2}>
+  <Card title="Need Help?" icon="question-circle">
+    Contact our support team for assistance with your BigQuery connection setup.
+  </Card>
+
+  <Card title="View Pricing" icon="credit-card" href="/pricing">
+    Learn about our pricing plans and BigQuery-specific features.
+  </Card>
+</CardGroup>
+
+<Tip>
+  For optimal performance, consider setting up a separate BigQuery project for Basedash connections and implementing appropriate usage quotas.
+</Tip>

data-sources/postgres.mdx

@@ -3,4 +3,89 @@ title: 'PostgreSQL'
 description: 'Connect your PostgreSQL database to Basedash'
 ---
 
-You can connect directly to your PostgreSQL database to visualize data from your product, like signups and customers.
+<Frame>
+  <img className="block dark:hidden" src="/images/postgres-connection-light.png" alt="PostgreSQL Connection Flow" />
+  <img className="hidden dark:block" src="/images/postgres-connection-dark.png" alt="PostgreSQL Connection Flow" />
+</Frame>
+
+Connect your PostgreSQL database to Basedash to visualize and manage your product data seamlessly. Follow these simple steps to get started.
+
+<Steps>
+  <Step title="Gather Connection Details">
+    You'll need the following information to connect your PostgreSQL database:
+    - Host name or IP address
+    - Port number (default: 5432)
+    - Database name
+    - Username
+    - Password
+  </Step>
+
+  <Step title="Configure Network Access">
+    Ensure your database is accessible from Basedash's IP addresses:
+    <CodeGroup>
+      ```plaintext IP Addresses
+      34.56.78.90
+      12.34.56.78
+      98.76.54.32
+      ```
+    </CodeGroup>
+
+    <Tip>
+      If you're using AWS RDS, make sure to update your security group rules to allow incoming connections from these IPs.
+    </Tip>
+  </Step>
+
+  <Step title="Enter Connection Details">
+    In Basedash:
+    1. Click on "Add Data Source"
+    2. Select "PostgreSQL"
+    3. Fill in your connection details
+    4. Test the connection
+  </Step>
+
+  <Step title="Start Exploring">
+    Once connected, you can:
+    <CardGroup cols={2}>
+      <Card title="Query Data" icon="magnifying-glass">
+        Write and execute SQL queries directly in Basedash
+      </Card>
+      <Card title="Create Views" icon="table">
+        Build custom views for your team members
+      </Card>
+      <Card title="Manage Access" icon="lock">
+        Control who can access what data
+      </Card>
+      <Card title="Track Changes" icon="clock-rotate-left">
+        Monitor database changes over time
+      </Card>
+    </CardGroup>
+  </Step>
+</Steps>
+
+<AccordionGroup>
+  <Accordion title="Connection String Format" icon="link">
+    If you prefer using a connection string, use this format:
+    ```plaintext
+    postgresql://username:password@host:port/database
+    ```
+  </Accordion>
+
+  <Accordion title="SSL Configuration" icon="shield-check">
+    For enhanced security, we recommend using SSL connections. You can enable SSL in your connection settings and provide your SSL certificate if required.
+  </Accordion>
+
+  <Accordion title="Troubleshooting" icon="wrench">
+    Common issues and solutions:
+    - **Connection timeout**: Check network access and firewall rules
+    - **Authentication failed**: Verify credentials and user permissions
+    - **Database not found**: Confirm database name and user access rights
+  </Accordion>
+</AccordionGroup>
+
+<Note>
+  For optimal performance, we recommend creating a read-only user specifically for Basedash connections.
+</Note>
+
+<Warning>
+  Never share your database credentials or expose them in public repositories.
+</Warning>

data-sources/snowflake.mdx

@@ -3,4 +3,90 @@ title: 'Snowflake'
 description: 'Connect your Snowflake data warehouse to Basedash'
 ---
 
-Connect your Snowflake data warehouse to Basedash to start querying and managing your data.
+# Connecting Snowflake to Basedash
+
+<Frame>
+  <img src="/images/snowflake-connection-diagram.png" alt="Snowflake Connection Flow" />
+</Frame>
+
+Connect your Snowflake data warehouse to Basedash to start querying and managing your data securely and efficiently.
+
+<Note>
+  Before you begin, make sure you have your Snowflake credentials ready and the necessary permissions to create database connections.
+</Note>
+
+<Steps>
+  <Step title="Gather Connection Details">
+    You'll need the following information from your Snowflake instance:
+    - Account identifier (including region)
+    - Username
+    - Password
+    - Warehouse name
+    - Database name
+    - Schema name (optional)
+  </Step>
+
+  <Step title="Configure Connection">
+    <AccordionGroup>
+      <Accordion title="Basic Configuration" icon="gear">
+        1. Navigate to the Data Sources section in Basedash
+        2. Click "Add New Connection"
+        3. Select "Snowflake" from the available connectors
+        4. Enter your account identifier and credentials
+      </Accordion>
+
+      <Accordion title="Advanced Settings" icon="sliders">
+        - **Connection Timeout**: Default is 10 seconds
+        - **Query Timeout**: Default is 60 seconds
+        - **SSL Mode**: Enabled by default for security
+        - **Role**: Specify a custom role if needed
+      </Accordion>
+    </AccordionGroup>
+  </Step>
+
+  <Step title="Test Connection">
+    Before finalizing the setup:
+    1. Click "Test Connection" to verify your credentials
+    2. Ensure you receive a success message
+    3. Check that you can see your databases and schemas
+  </Step>
+
+  <Step title="Start Using Basedash">
+    Once connected, you can:
+    - Browse your Snowflake tables
+    - Create custom views
+    - Run SQL queries
+    - Manage data access permissions
+  </Step>
+</Steps>
+
+<CardGroup cols={2}>
+  <Card title="Security Best Practices" icon="shield-check">
+    - Use dedicated service accounts
+    - Implement proper role-based access
+    - Regularly rotate credentials
+    - Enable SSL encryption
+  </Card>
+
+  <Card title="Troubleshooting" icon="wrench">
+    - Check network connectivity
+    - Verify account permissions
+    - Validate warehouse availability
+    - Review error logs
+  </Card>
+</CardGroup>
+
+<Tip>
+  For optimal performance, we recommend setting up a dedicated warehouse for Basedash queries.
+</Tip>
+
+## Next Steps
+
+After connecting your Snowflake instance:
+1. [Set up user permissions](/settings/permissions)
+2. [Create your first view](/views/creating-views)
+3. [Invite team members](/team/invitations)
+
+<Warning>
+  Remember to follow your organization's security policies when setting up database connections.
+</Warning>

docs.json

@@ -15,11 +15,15 @@
         "groups": [
           {
             "group": "Getting started",
-            "pages": ["introduction"]
+            "pages": [
+              "introduction"
+            ]
           },
           {
             "group": "Essentials",
-            "pages": ["essentials/security"]
+            "pages": [
+              "essentials/security"
+            ]
           }
         ]
       },
@@ -33,12 +37,18 @@
               "data-sources/mysql",
               "data-sources/planetscale",
               "data-sources/postgres",
-              "data-sources/spanner"
+              "data-sources/spanner",
+              "data-sources/bigquery",
+              "data-sources/snowflake",
+              "data-sources/postgres"
             ]
           },
           {
             "group": "Warehouses",
-            "pages": ["data-sources/bigquery", "data-sources/snowflake"]
+            "pages": [
+              "data-sources/bigquery",
+              "data-sources/snowflake"
+            ]
           }
         ]
       }
@@ -71,4 +81,4 @@
       "linkedin": "https://linkedin.com/company/Basedash"
     }
   }
-}
+}

snippets/card-styling.mdx

@@ -0,0 +1,21 @@
+<Card
+  className="overflow-hidden transition-all duration-200 hover:shadow-lg border border-gray-200 hover:border-[#07C983] rounded-xl"
+  {...props}
+>
+  <div className="h-full p-6">
+    <div className="flex items-center gap-2 mb-4">
+      {props.icon && (
+        <div className="p-2 rounded-lg bg-[#16A34A]/10">
+          <Icon 
+            icon={props.icon} 
+            className="w-5 h-5 text-[#16A34A]" 
+          />
+        </div>
+      )}
+      <h3 className="text-lg font-semibold text-gray-900">{props.title}</h3>
+    </div>
+    <div className="text-gray-600">
+      {props.children}
+    </div>
+  </div>
+</Card>