chakura is broke

package-lock.json

@@ -8,9 +8,10 @@
       "name": "balistics-builder",
       "version": "0.1.0",
       "dependencies": {
+        "@chakra-ui/next-js": "^2.4.2",
         "@chakra-ui/react": "^3.1.2",
         "@emotion/react": "^11.13.5",
-        "@emotion/styled": "^11.13.0",
+        "@emotion/styled": "^11.13.5",
         "@headlessui/react": "^2.2.0",
         "@heroicons/react": "^2.2.0",
         "@mui/icons-material": "^6.1.7",
@@ -23,6 +24,7 @@
         "dotenv": "^16.4.5",
         "drizzle-orm": "^0.36.3",
         "fontsource-roboto": "^4.0.0",
+        "framer-motion": "^11.11.17",
         "next": "15.0.3",
         "next-themes": "^0.4.3",
         "pg": "^8.13.1",
@@ -251,6 +253,20 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@chakra-ui/next-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/next-js/-/next-js-2.4.2.tgz",
+      "integrity": "sha512-loo82RyPbMyvJwRhhZVZovut9v2hFBSkqd1vQoNXgMrCRApLwrrttu5Iuodns15gLE3mqI+it5oEhxTtO5DrxA==",
+      "dependencies": {
+        "@emotion/cache": "^11.11.0"
+      },
+      "peerDependencies": {
+        "@chakra-ui/react": ">=2.4.0",
+        "@emotion/react": ">=11",
+        "next": ">=13",
+        "react": ">=18"
+      }
+    },
     "node_modules/@chakra-ui/react": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@chakra-ui/react/-/react-3.1.2.tgz",
@@ -364,7 +380,6 @@
       "version": "11.13.5",
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.5.tgz",
       "integrity": "sha512-6zeCUxUH+EPF1s+YF/2hPVODeV/7V07YU5x+2tfuRL8MdW6rv5vb2+CBEGTGwBdux0OIERcOS+RzxeK80k2DsQ==",
-      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -421,16 +436,16 @@
       "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg=="
     },
     "node_modules/@emotion/styled": {
-      "version": "11.13.0",
+      "version": "11.13.5",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.5.tgz",
-      "integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==",
+      "integrity": "sha512-gnOQ+nGLPvDXgIx119JqGalys64lhMdnNQA9TMxhDA4K0Hq5+++OE20Zs5GxiCV9r814xQ2K5WmtofSpHVW6BQ==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/babel-plugin": "^11.13.5",
         "@emotion/is-prop-valid": "^1.3.0",
-        "@emotion/serialize": "^1.3.0",
+        "@emotion/serialize": "^1.3.3",
         "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
-        "@emotion/utils": "^1.4.0"
+        "@emotion/utils": "^1.4.2"
       },
       "peerDependencies": {
         "@emotion/react": "^11.0.0-rc.0",
@@ -442,6 +457,23 @@
         }
       }
     },
+    "node_modules/@emotion/styled/node_modules/@emotion/serialize": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.2",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/styled/node_modules/@emotion/utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA=="
+    },
     "node_modules/@emotion/unitless": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
@@ -6324,6 +6356,30 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.11.17",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.17.tgz",
+      "integrity": "sha512-O8QzvoKiuzI5HSAHbcYuL6xU+ZLXbrH7C8Akaato4JzQbX2ULNeniqC2Vo5eiCtFktX9XsJ+7nUhxcl2E2IjpA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",

package.json

@@ -9,9 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@chakra-ui/next-js": "^2.4.2",
     "@chakra-ui/react": "^3.1.2",
     "@emotion/react": "^11.13.5",
-    "@emotion/styled": "^11.13.0",
+    "@emotion/styled": "^11.13.5",
     "@headlessui/react": "^2.2.0",
     "@heroicons/react": "^2.2.0",
     "@mui/icons-material": "^6.1.7",
@@ -24,6 +25,7 @@
     "dotenv": "^16.4.5",
     "drizzle-orm": "^0.36.3",
     "fontsource-roboto": "^4.0.0",
+    "framer-motion": "^11.11.17",
     "next": "15.0.3",
     "next-themes": "^0.4.3",
     "pg": "^8.13.1",

src/app/components/Header.tsx

@@ -3,6 +3,7 @@ import NextLink from "next/link";
 
 const Header: React.FC = () => {
   return (
+    <>
     <Box as="header" bg="primary" color="white" px="6" py="4" shadow="md">
       <Flex justify="space-between" align="center" maxW="5xl" mx="auto">
         <Heading as="h1" size="lg">
@@ -31,6 +32,7 @@ const Header: React.FC = () => {
         </Flex>
       </Flex>
     </Box>
+    </>
   );
 };
 

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
+import { Providers } from './providers'
 import "./globals.css";
 
 const geistSans = localFont({
@@ -25,10 +26,8 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`} >
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      <Providers>{children}</Providers>
-      >
-        {children}
       </body>
     </html>
   );

src/app/page.tsx

@@ -5,16 +5,17 @@ import Header from "./components/Header";
 import Hero from "./components/Hero";
 import Contact from "./components/Contact";
 import Footer from "./components/Footer ";
+import { ChakraProvider } from "@chakra-ui/react";
 
 export default function Home() {
   return (
-    (<div className="bg-gray-100 min-h-screen flex flex-col">
+    <div className="bg-gray-100 min-h-screen flex flex-col">
       <Header />
       <Hero />
       <FeaturesSection />
       <About />
       <Contact />
       <Footer />
-    </div>)
+    </div>
   );
 }

src/app/providers.tsx

@@ -0,0 +1,12 @@
+// app/providers.tsx
+'use client';
+
+import { ChakraProvider } from '@chakra-ui/react';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+   
+      {children}
+   
+  );
+}