docs: add a Data Connect guide and link it from the README

Add docs/data-connect.md describing the Data Connect secondary entry
point, following the same shape as the other product guides: a short
intro, the dependency-injection setup (provideDataConnect/getDataConnect
with a connector config, then inject(DataConnect)), and the wrap-the-SDK
note.

Add the Data Connect entry to the README feature table in its
alphabetical slot after Cloud Storage, and re-flow the table into even
two-column rows, which also fixes the previously lopsided final row.

This supersedes #3673, which added the README entry but linked it to a
docs/data-connect.md that did not exist (a dead link) and placed the row
out of alphabetical order. Credit to @maneesht for adding the entry and
flagging the gap.

Firebase now brands this product "Firebase SQL Connect"; the guide keeps
"Data Connect" as the primary name to match the @angular/fire/data-connect
entry point and notes the new branding.

Author: armando-navarro

README.md

@@ -144,43 +144,49 @@ import { } from '@angular/fire/storage';
   <tr>
     <td>
 
+#### [Data Connect](docs/data-connect.md#data-connect)
+```ts
+import { } from '@angular/fire/data-connect';
+```
+</td>
+    <td>
+
 #### [Performance Monitoring](docs/performance.md#performance-monitoring)
 ```ts
 import { } from '@angular/fire/performance';
 ```
 </td>
+  </tr>
+  <tr>
     <td>
 
 #### [Realtime Database](docs/database.md#realtime-database)
 ```ts
 import { } from '@angular/fire/database';
 ```
 </td>
-  </tr>
-  <tr>
     <td>
 
 #### [Remote Config](docs/remote-config.md#remote-config)
 ```ts
 import { } from '@angular/fire/remote-config';
 ```
 </td>
+  </tr>
+  <tr>
     <td>
 
 #### [App Check](docs/app-check.md#app-check)
 ```ts
 import { } from '@angular/fire/app-check';
 ```
 </td>
-  </tr>
-  <tr>
     <td>
 
 #### [Vertex AI](docs/vertexai.md#vertex-ai)
 ```ts
 import { } from '@angular/fire/vertexai';
 ```
 </td>
-
   </tr>
 </table>

docs/data-connect.md

@@ -0,0 +1,59 @@
+<small>
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Data Connect
+</small>
+
+# Data Connect
+
+Firebase Data Connect (now known as "Firebase SQL Connect" in the Firebase documentation) is a backend service that pairs a Cloud SQL for PostgreSQL database with GraphQL, generating type-safe SDKs to query and mutate your data.
+
+[Learn more](https://firebase.google.com/docs/data-connect)
+
+## Dependency Injection
+
+As a prerequisite, ensure that `AngularFire` has been added to your project via
+```bash
+ng add @angular/fire
+```
+
+Provide a Data Connect instance in the application's `app.config.ts`. `getDataConnect` takes a connector config that identifies your service, connector, and location; this is generated for you when you set up Data Connect and is also exported from your generated SDK:
+
+```ts
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { provideDataConnect, getDataConnect } from '@angular/fire/data-connect';
+
+const connectorConfig = {
+  connector: 'my-connector',
+  service: 'my-service',
+  location: 'us-central1',
+};
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => initializeApp({ ... })),
+    provideDataConnect(() => getDataConnect(connectorConfig)),
+    ...
+  ],
+  ...,
+}
+```
+
+Next inject `DataConnect` into your component:
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { DataConnect } from '@angular/fire/data-connect';
+
+@Component({ ... })
+export class MyComponent {
+    private dataConnect = inject(DataConnect);
+    ...
+}
+```
+
+## Firebase API
+
+AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
+
+Update the imports from `import { ... } from 'firebase/data-connect'` to `import { ... } from '@angular/fire/data-connect'` and follow the official documentation.
+
+[Getting Started](https://firebase.google.com/docs/data-connect/quickstart)