created the absic routing and setup

app/(root)/layout.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import Header from "../../components/Header";
+
+const Layout = ({ children }: { children : React.ReactNode }) => {
+    return (
+        <main className="min-h-screen text-gray-400">
+            <Header/>
+
+            <div className="container py-10">
+                {children}
+            </div>
+        </main>
+    )
+}
+export default Layout

app/(root)/page.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import {Button} from "../../components/ui/button";
+
+const Home = () => {
+    return (
+        <div className="flex min-h-screen home-wrapper">
+            <div className="flex flex-col items-center justify-center w-full">
+                <h1 className="text-4xl font-bold mb-4">Welcome to OpenStock</h1>
+                <p className="text-lg mb-8 text-center max-w-2xl">
+                    OpenStock is an open-source alternative to expensive market platforms.
+                    Track real-time prices, set personalized alerts, and explore detailed company insights.
+                </p>
+                <Button>Get Started</Button>
+            </div>
+        </div>
+    )
+}
+export default Home

app/page.tsx

@@ -1,11 +0,0 @@
-import React from 'react'
-import {Button} from "@/components/ui/button";
-
-const Page = () => {
-    return (
-        <div className="flex justify-center items-center h-screen">
-            <Button>Click Me</Button>
-        </div>
-    )
-}
-export default Page

components/Header.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+
+const Header = () => {
+    return (
+        <div>Header</div>
+    )
+}
+export default Header