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

package-lock.json

@@ -12,6 +12,7 @@
         "@chakra-ui/react": "^3.12.0",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
+        "@tanstack/react-router": "^1.133.27",
         "add": "^2.0.6",
         "color-mode": "^0.1.0",
         "framer-motion": "^12.5.0",
@@ -1716,6 +1717,94 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@tanstack/history": {
+      "version": "1.133.19",
+      "resolved": "https://registry.npmjs.org/@tanstack/history/-/history-1.133.19.tgz",
+      "integrity": "sha512-Y866qBVVprdQkmO0/W1AFBI8tiQy398vFeIwP+VrRWCOzs3VecxSVzAvaOM4iHfkJz81fFAZMhLLjDVoPikD+w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-router": {
+      "version": "1.133.27",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-router/-/react-router-1.133.27.tgz",
+      "integrity": "sha512-0q87mjJWhMsnP9SOD/v07lclCxrMuB20CdKi305cTZRIF858ETG0fThUF4LlstiKvxE49Wr+PBY0kwjfY4pUow==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/history": "1.133.19",
+        "@tanstack/react-store": "^0.7.0",
+        "@tanstack/router-core": "1.133.27",
+        "isbot": "^5.1.22",
+        "tiny-invariant": "^1.3.3",
+        "tiny-warning": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0 || >=19.0.0",
+        "react-dom": ">=18.0.0 || >=19.0.0"
+      }
+    },
+    "node_modules/@tanstack/react-store": {
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-store/-/react-store-0.7.7.tgz",
+      "integrity": "sha512-qqT0ufegFRDGSof9D/VqaZgjNgp4tRPHZIJq2+QIHkMUtHjaJ0lYrrXjeIUJvjnTbgPfSD1XgOMEt0lmANn6Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/store": "0.7.7",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/router-core": {
+      "version": "1.133.27",
+      "resolved": "https://registry.npmjs.org/@tanstack/router-core/-/router-core-1.133.27.tgz",
+      "integrity": "sha512-1nb2CirHC0hZmFr8wEk0gxuExpvuk0jlKOY1+SQ7jcJCxBKHLGvAfhL6ycets3XetrTLzgBEvfuixFj3qYiFwA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/history": "1.133.19",
+        "@tanstack/store": "^0.7.0",
+        "cookie-es": "^2.0.0",
+        "seroval": "^1.3.2",
+        "seroval-plugins": "^1.3.2",
+        "tiny-invariant": "^1.3.3",
+        "tiny-warning": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/store": {
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/store/-/store-0.7.7.tgz",
+      "integrity": "sha512-xa6pTan1bcaqYDS9BDpSiS63qa6EoDkPN9RsRaxHuDdVDNntzq3xNwR5YKTU/V3SkSyC9T4YVOPh2zRQN0nhIQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -3688,6 +3777,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie-es": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-2.0.0.tgz",
+      "integrity": "sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==",
+      "license": "MIT"
+    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -4716,6 +4811,15 @@
       "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
       "license": "MIT"
     },
+    "node_modules/isbot": {
+      "version": "5.1.31",
+      "resolved": "https://registry.npmjs.org/isbot/-/isbot-5.1.31.tgz",
+      "integrity": "sha512-DPgQshehErHAqSCKDb3rNW03pa2wS/v5evvUqtxt6TTnHRqAG8FdzcSSJs9656pK6Y+NT7K9R4acEYXLHYfpUQ==",
+      "license": "Unlicense",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -5807,6 +5911,27 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/seroval": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/seroval/-/seroval-1.3.2.tgz",
+      "integrity": "sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/seroval-plugins": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/seroval-plugins/-/seroval-plugins-1.3.3.tgz",
+      "integrity": "sha512-16OL3NnUBw8JG1jBLUoZJsLnQq0n5Ua6aHalhJK4fMQkz1lqR7Osz1sA30trBtd9VUDc2NgkuRCn8+/pBwqZ+w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "seroval": "^1.0"
+      }
+    },
     "node_modules/set-getter": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/set-getter/-/set-getter-0.1.1.tgz",
@@ -6179,6 +6304,18 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+      "license": "MIT"
+    },
     "node_modules/to-object-path": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
@@ -6385,6 +6522,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.1.tgz",

package.json

@@ -14,6 +14,7 @@
     "@chakra-ui/react": "^3.12.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@tanstack/react-router": "^1.133.27",
     "add": "^2.0.6",
     "color-mode": "^0.1.0",
     "framer-motion": "^12.5.0",

src/components/layout.tsx

@@ -0,0 +1,22 @@
+import { Outlet } from '@tanstack/react-router'
+import {
+  Box,
+  Container,
+} from '@chakra-ui/react'
+
+import Header from './header'
+import Footer from './footer'
+
+function Layout() {
+  return (
+    <Container maxW="100vw" p={0} m={0} mt={0}>
+      <Header />
+      <Box position="relative">
+        <Outlet />
+      </Box>
+      <Footer />
+    </Container>
+  )
+}
+
+export default Layout

src/main.tsx

@@ -1,7 +1,8 @@
 import { Provider } from "@/components/ui/provider"
 import React from "react"
 import ReactDOM from "react-dom/client"
-import App from "./App"
+import { RouterProvider } from '@tanstack/react-router'
+import router from './router'
 import "./index.css"
 import "./fonts.css"
 import "./colors.css"
@@ -9,7 +10,7 @@ import "./colors.css"
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <Provider>
-      <App />
+      <RouterProvider router={router} />
     </Provider>
   </React.StrictMode>
 )

src/pages/home.tsx

@@ -0,0 +1,34 @@
+import { Box } from '@chakra-ui/react'
+import Hero1 from '../components/hero1'
+import Hero2 from '../components/hero2'
+import Compare from '../components/compare'
+import Qa from '../components/qa'
+import Oil_info from '../components/oil_info'
+import Bestoil from '../components/bestoil'
+import Salespoint from '../components/salespoint'
+
+function HomePage() {
+  return (
+    <>
+      <Hero1 />
+      <Box mt={{ base: "-5vw", sm: "-5vw", md: "-5vw", lg: "-5vw", xl: "-5vw" }}>
+        <Hero2 />
+      </Box>
+      <Compare />
+      <Box mt={{ base: "-15vw", sm: "-15vw", md: "0vw", lg: "0vw", xl: "0vw" }}>
+        <Qa />
+      </Box>
+      <Box>
+        <Oil_info />
+      </Box>
+      <Box>
+        <Bestoil />
+      </Box>
+      <Box my={8}>
+        <Salespoint />
+      </Box>
+    </>
+  )
+}
+
+export default HomePage

src/pages/main.tsx

@@ -0,0 +1,54 @@
+import { Box, Image, Stack, } from '@chakra-ui/react'
+import { Link } from '@tanstack/react-router'
+
+function HeroSection() {
+  return (
+    <Box
+      position="relative"
+      w="100%"
+      alignItems={"center"}
+      justifyContent={"center"}
+      overflow="hidden"
+
+    >
+
+      <Stack gap={0} >
+        <Box
+          overflow="hidden"
+          position="relative"
+          w="100%"
+          bgImage={"url('/images/new/confuse.webp')"}
+          bgSize="cover"
+          backgroundPosition="center"
+          justifyItems={'center'}
+          bgRepeat="no-repeat"
+          minH={{ base: "100vh", sm: "100vh", md: "100vh", lg: "100vh", xl: "100vh" }}
+        >
+
+          <Image src="/images/new/hero_text1x.webp"
+            position={'absolute'}
+            bottom={'100px'}
+            w={{ base: "90%", sm: "80%", md: "60%", lg: "50%", xl: "40%" }}
+          />
+          <Image src="/images/new/arrow_pc_1.webp"
+            position={'absolute'}
+            maxW={{ base: "40px", sm: "50px", md: "60px", lg: "70px", xl: "80%" }}
+            bottom={'10px'} />
+        </Box>
+
+      </Stack>
+
+    </Box>
+  )
+}
+
+function MainPage() {
+  return (
+    <>
+      <HeroSection />
+
+    </>
+  )
+}
+
+export default MainPage

src/router.tsx

@@ -0,0 +1,30 @@
+import { createRouter, createRootRoute, createRoute } from '@tanstack/react-router'
+import Layout from './components/layout'
+import MainPage from './pages/main'
+import HomePage from './pages/home'
+
+// Create a root route with layout
+const rootRoute = createRootRoute({
+  component: Layout,
+})
+
+// Main page route (new landing page)
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: MainPage,
+})
+
+// Home page route (old content)
+const homeRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/home',
+  component: HomePage,
+})
+
+// Create the router
+const router = createRouter({
+  routeTree: rootRoute.addChildren([indexRoute, homeRoute]),
+})
+
+export default router