new ui hero updated

CRUSH.md

@@ -18,6 +18,10 @@
 // Chakra UI imports (named, grouped)
 import { Box, Flex, Image } from '@chakra-ui/react';
 
+// TanStack Router imports
+import { createRouter, createRootRoute, createRoute } from '@tanstack/react-router';
+import { Outlet, Link } from '@tanstack/react-router';
+
 // Local imports (default preferred)
 import Header from './components/header';
 ```
@@ -35,11 +39,25 @@ function ComponentName() {
 export default ComponentName;
 ```
 
+### Routing Pattern
+```typescript
+// Create routes in src/router.tsx
+const route = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/example',
+  component: ExampleComponent,
+});
+
+// Use <Outlet /> for nested routes
+// Use <Link to="/example"> for navigation
+```
+
 ### TypeScript & Configuration
 - Strict mode enabled with `noUnusedLocals`, `noUnusedParameters`
 - Path aliases available: `@/*` → `./src/*`
 - Use Chakra UI props for responsive design
 - Framer Motion for animations (`motion()` wrapper pattern)
+- TanStack Router for navigation and routing
 
 ### Styling Approach
 - Primary: Chakra UI props and components