From 6be46ca48ac5912f01f2634cade9416e841f485b Mon Sep 17 00:00:00 2001
From: boymeetsblockchain <ajeoluwasegun18@gmail.com>
Date: Wed, 28 May 2025 16:16:17 +0100
Subject: [PATCH] feat:added the base foundation for styling

---
 frontend/src/App.js                     | 25 ------------
 frontend/src/App.jsx                    | 13 ++++++
 frontend/src/components/home/header.jsx | 54 +++++++++++++++++++++++++
 frontend/src/components/home/soul.jsx   | 29 +++++++++++++
 4 files changed, 96 insertions(+), 25 deletions(-)
 delete mode 100644 frontend/src/App.js
 create mode 100644 frontend/src/App.jsx
 create mode 100644 frontend/src/components/home/header.jsx
 create mode 100644 frontend/src/components/home/soul.jsx

diff --git a/frontend/src/App.js b/frontend/src/App.js
deleted file mode 100644
index 3784575..0000000
--- a/frontend/src/App.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
new file mode 100644
index 0000000..5a8a2da
--- /dev/null
+++ b/frontend/src/App.jsx
@@ -0,0 +1,13 @@
+import { Header } from "./components/home/header";
+import { SoulTracker } from "./components/home/soul";
+
+function App() {
+  return (
+    <section className="max-w-screen-xl w-full mx-auto">
+      <Header />
+      <SoulTracker />
+    </section>
+  );
+}
+
+export default App;
diff --git a/frontend/src/components/home/header.jsx b/frontend/src/components/home/header.jsx
new file mode 100644
index 0000000..60a4e45
--- /dev/null
+++ b/frontend/src/components/home/header.jsx
@@ -0,0 +1,54 @@
+import React, { useState } from "react"; // Don't forget to import React and useState
+
+const tabArray = [
+  {
+    name: "Journal",
+    icon: "📝",
+    id: 1,
+  },
+  {
+    name: "Garden",
+    icon: "🌸", // Changed icon for variety
+    id: 2,
+  },
+  {
+    name: "Ritual",
+    icon: "✨", // Changed icon for variety
+    id: 3,
+  },
+];
+
+export const Header = () => {
+  const [activeTab, setActiveTab] = useState(tabArray[0].id); // Set initial active tab
+
+  return (
+    <header className="flex flex-col gap-y-3 mx-auto max-w-screen-sm my-4 text-center">
+      {/* logo */}
+      <div className="text-soul-green text-3xl font-extrabold tracking-wider drop-shadow-sm">
+        🍁 Ember
+      </div>
+      <h2 className="text-xl text-gray-700 font-sans">Your soul companion</h2>
+
+      {/* tab navigator */}
+      <div className="flex justify-center items-center gap-x-2 max-w-md border border-gray-200 rounded-full bg-white shadow-lg p-2 mx-auto">
+        {tabArray.map((tab) => (
+          <div
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)} // Set active tab on click
+            className={`
+              flex items-center gap-x-1.5 p-2 rounded-full cursor-pointer transition-all duration-600
+              ${
+                activeTab === tab.id
+                  ? "bg-ember-moss text-white shadow-md"
+                  : "hover:bg-gray-100 text-gray-700"
+              }
+            `}
+          >
+            <span className="text-lg">{tab.icon}</span>
+            <span className="text-sm font-medium">{tab.name}</span>
+          </div>
+        ))}
+      </div>
+    </header>
+  );
+};
diff --git a/frontend/src/components/home/soul.jsx b/frontend/src/components/home/soul.jsx
new file mode 100644
index 0000000..5ccd355
--- /dev/null
+++ b/frontend/src/components/home/soul.jsx
@@ -0,0 +1,29 @@
+import { useState } from "react";
+
+export const SoulTracker = () => {
+  const [percent, setPercent] = useState(65);
+
+  const progressBarColor =
+    percent > 75
+      ? "bg-emerald-500"
+      : percent > 40
+      ? "bg-yellow-500"
+      : "bg-red-500";
+
+  return (
+    <div className="bg-white shadow-xl rounded-2xl p-4 w-full max-w-screen-lg mx-auto">
+      <div className="flex items-center justify-between mb-3">
+        <h1 className="text-xl font-semibold text-serene-sage">
+          Soul Wellness
+        </h1>
+        <div className="text-2xl font-bold text-gray-800">{percent}%</div>
+      </div>
+      <div className="bg-gray-200 h-3 rounded-full overflow-hidden">
+        <div
+          className={`h-full rounded-full transition-all duration-500 ease-out ${progressBarColor}`}
+          style={{ width: `${percent}%` }}
+        ></div>
+      </div>
+    </div>
+  );
+};