new ui hero updated

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