Restructure VS Code integration guide with objective section titles and corrected ArkThemes information

apps/www/content/docs/guides/import-options.mdx

@@ -1,29 +1,20 @@
 ---
 title: Integrating with VS Code
 icon: New
-description: Get syntax highlighting and enhanced developer experience with the ArkType VS Code extension
+description: Syntax highlighting and enhanced developer experience with VS Code extensions
 ---
 
-## ArkType VS Code Extension
+## ArkType VS Code Extension: Syntax Highlighting and Error Lens
 
-The [ArkType VS Code extension](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark) provides syntax highlighting and inline error summaries for ArkType definitions, making your development experience with ArkEnv much more pleasant.
+The [ArkType extension](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark) provides syntax highlighting and inline error summaries for ArkEnv.
 
 <Card
   title="Install ArkType VS Code Extension"
   href="https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark"
   description="Get syntax highlighting and inline error summaries for ArkType functions"
 />
 
-### Installation
-
-1. Open VS Code
-2. Go to Extensions (Ctrl+Shift+X)
-3. Search for "ArkType"
-4. Install the extension by arktypeio
-
-## Getting Syntax Highlighting
-
-To get syntax highlighting for your ArkEnv schemas, use the **default import** and name it `arkenv`:
+To enable syntax highlighting, use the **default import** and name it `arkenv`:
 
 ```typescript
 import arkenv from 'arkenv';
@@ -34,58 +25,42 @@ const env = arkenv({
 });
 ```
 
-### Example with Syntax Highlighting
-
 ![ArkType syntax highlighting in VS Code](/dx.png)
 
-### Benefits
-
-When you use the default import (`import arkenv from 'arkenv'`) and have the ArkType extension installed, you get:
-
+This gives you:
 - **Syntax highlighting** for ArkType definitions in your schema
 - **Inline error summaries** via ErrorLens integration
-- **Better developer experience** with visual feedback
+- **Better DX**
 
-## Alternative Import Styles
+## ArkThemes: Special Highlighting
 
-You can also use named imports, though you won't get syntax highlighting:
+For an even better development experience, [ArkThemes](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkthemes) provides special highlighting for TypeScript generics in ArkType definitions.
 
+## Import Styles
+
+ArkEnv supports both default and named imports. The functionality is identical - only the syntax highlighting support differs:
+
+### Default Import (Recommended for Syntax Highlighting)
 ```typescript
-import { createEnv } from 'arkenv';
+import arkenv from 'arkenv';
 
-const env = createEnv({
+const env = arkenv({
   PORT: "number.port",
   NODE_ENV: "'development' | 'production' | 'test'",
 });
 ```
 
-## Migration Guide
-
-If you're currently using named imports and want to switch to default imports for better VS Code support:
-
-### Before
+### Named Import
 ```typescript
 import { createEnv } from 'arkenv';
 
 const env = createEnv({
   PORT: "number.port",
+  NODE_ENV: "'development' | 'production' | 'test'",
 });
 ```
 
-### After
-```typescript
-import arkenv from 'arkenv';
-
-const env = arkenv({
-  PORT: "number.port", 
-});
-```
-
-The functionality is identical - only the import style changes!
-
 ## Best Practices
 
-- **Use default import** if you're using VS Code and want enhanced syntax highlighting
-- **Use named import** if you prefer explicit imports or are using other editors
-- **Be consistent** within your project - choose one style and stick with it
-- **Install the ArkType extension** for the best development experience
+- **Use default import** (`import arkenv`) if you want syntax highlighting in VS Code, Cursor, or JetBrains IDEs
+- **Use named import** (`import { createEnv }`) if you prefer explicit imports or use other editors