ADD: CharkraProvider for the style and added some css style

app.py

@@ -0,0 +1,23 @@
+import time
+
+import redis
+from flask import Flask
+
+app = Flask(__name__)
+cache = redis.Redis(host='redis', port=6379)
+
+def get_hit_count():
+    retries = 5
+    while True:
+        try:
+            return cache.incr('hits')
+        except redis.exceptions.ConnectionError as exc:
+            if retries == 0:
+                raise exc
+            retries -= 1
+            time.sleep(0.5)
+
+@app.route('/')
+def hello():
+    count = get_hit_count()
+    return 'Hello World! I have been seen {} times.\n'.format(count)

compose.yaml

@@ -0,0 +1,7 @@
+services:
+  web:
+    build: .
+    ports:
+      - "0:5173"
+  redis:
+    image: "redis:gmoker"

package.json

@@ -5,12 +5,16 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "start": "vite",
+    "start": "bun run vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "framer-motion": "^11.3.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

requirements.txt

@@ -0,0 +1,2 @@
+flask
+redis

src/component/App.jsx

@@ -1,3 +1,7 @@
 export function App() {
-  return <h1 style={{ textAlign: "center" }}> Bienvenue sur Gmoker.com</h1>;
+  return (
+    <h1 style={{ textAlign: "center", fontSize: "50px", color: "white" }}>
+      Bienvenue sur Gmoker.com
+    </h1>
+  );
 }

src/component/Button.jsx

@@ -1,3 +0,0 @@
-export function Button(argv) {
-  return <button onClick={argv.clicked}>{argv.title}</button>;
-}

src/component/Card.jsx

@@ -1,20 +0,0 @@
-import { Button } from "./Button";
-
-export function Postcard(argv) {
-  return (
-    <h1
-      style={{
-        backgroundColor: argv.color,
-        imageRendering: 20,
-      }}
-    >
-      {argv.name} <img src={argv.img} />
-      <Button
-        title="likes"
-        clicked={() => {
-          window.alert("t pd");
-        }}
-      />
-    </h1>
-  );
-}

src/component/Head.jsx

@@ -1,39 +1,27 @@
 import chat from ".././assets/chat.jpg";
+import { Button, ButtonGroup } from "@chakra-ui/react";
+import { Flex, Spacer } from "@chakra-ui/react";
 
-function Button(argv, clicked) {
-  return (
-    <button
-      onClick={() => {
-        alert(argv);
-      }}
-      style={{ margin: "0 8px", alignItems: "left" }}
-    >
-      {argv}
-    </button>
-  );
-}
-
+const button_style = {
+  colorScheme: "cyan",
+  variant: "solid",
+};
 export function Header() {
   return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "space-between",
-      }}
-    >
-      <h2 style={{ textAlign: "left" }}>
-        {Button("Aceuil")}
-        {Button("About")}
-        {Button("Product")}
-        {Button("Blog")}
-        {Button("Serveurs")}
-        {Button("Dowloads")}
-        {Button("Help")}
-      </h2>
-      <h2 style={{ textAlign: "right" }}>
-        {Button("Acount")}
-        {Button("Get started")}
-      </h2>
-    </div>
+    <Flex justify={"space-between"}>
+      <Flex justifyContent={"left"} gap={1} marginTop={1} width={"500px"}>
+        <Button {...button_style}>Aceuil</Button>
+        <Button {...button_style}>About</Button>
+        <Button {...button_style}>Product</Button>
+        <Button {...button_style}>Blog</Button>
+        <Button {...button_style}>Serveurs</Button>
+        <Button {...button_style}>Dowloads</Button>
+        <Button {...button_style}>Help</Button>
+      </Flex>
+      <Flex justify={"right"} gap={1} marginTop={1} width={"500px"}>
+        <Button {...button_style}>Get started</Button>
+        <Button {...button_style}>Account</Button>
+      </Flex>
+    </Flex>
   );
 }

src/main.jsx

@@ -1,11 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { ChakraProvider } from "@chakra-ui/react";
 import { App } from "./component/App.jsx";
 import { Navbar } from "./component/Navbar.jsx";
 import { Body } from "./component/Body.jsx";
 import { Footer } from "./component/Footer.jsx";
-import { Postcard } from "./component/Card.jsx";
-import { Button } from "./component/Button.jsx";
 import { Header } from "./component/Head.jsx";
 import back_img from "./assets/img_site.jpg";
 import chat from "./assets/chat.jpg";
@@ -17,28 +16,21 @@ function buttoncaller(argv) {
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <>
-    <div
-      style={{
-        backgroundImage: `url(${back_img})`,
-        minHeight: "100vh",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-      }}
-    >
-      <Navbar />
-      <Header />
-      <App />
-      <Body />
-      <Button
-        title="click"
-        clicked={() => {
-          buttoncaller("coucou");
+    <ChakraProvider>
+      <div
+        style={{
+          backgroundImage: `url(${back_img})`,
+          minHeight: "100vh",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
         }}
-      />
-      <Footer />
-    </div>
+      >
+        <Navbar />
+        <Header />
+        <App />
+        <Body />
+        <Footer />
+      </div>
+    </ChakraProvider>
   </>
 );
-
-//<Postcard name="dorian" img={chat} color="red" />
-//<Postcard name="Jesussamere" img={chat} color="blue" />