fixed layout for profile page

devlarabar · Nov 22, 2023 · 1627dc0 · 1627dc0
1 parent edce817
commit 1627dc0
Showing 1 changed file with 21 additions and 21 deletions.
diff --git a/client/app/profile/page.jsx b/client/app/profile/page.jsx
@@ -1,29 +1,29 @@
 import React from "react";
 export default function Profile() {
   const maxWidth = "1000px";
-  const maxHeight = "1100px"; // Present the container from being too stretchy
+  const maxHeight = "1200px"; // Present the container from being too stretchy
   return (
-    <main className={`grid h-[1000px] max-h-[${maxHeight}]  max-w-[${maxWidth}] grid-cols-12 gap-2 text-center font-bold text-primary`}>
-      <aside className="col-span-4 grid grid-cols-1 grid-rows-3 gap-2 ">
-        <div className="rounded-lg bg-[#D7E4EB]">
-          Response Analysis: Answered vs Unanswered Outreach
-        </div>
-        <div className="rounded-lg bg-[#D7E4EB]">
-          Outreach Outcomes: Yes vs No Responses
-        </div>
-        <div className="rounded-lg bg-[#D7E4EB]">Outreach Success Rate</div>
-      </aside>
-      <section className="col-span-8 grid grid-cols-8 grid-rows-5 gap-x-2 gap-y-2   ">
-        <div className=" col-span-8 row-start-1 row-end-4 rounded-lg bg-[#D7E4EB]">
-          Outreach Success Rate
-        </div>
+    <main
+      className={`grid h-[1100px] max-h-[${maxHeight}]  max-w-[${maxWidth}] grid-cols-12 grid-rows-6 gap-4  text-center font-bold text-secondary`}
+    >
+      <section className="rounded-box  col-span-4  col-start-1 row-span-2 row-start-1 bg-primary p-2">
+        <h3>Response Analysis: Answered vs Unanswered Outreach</h3>
+      </section>
+      <section className="rounded-box   col-span-4 col-start-1 row-span-2 row-start-3 bg-primary p-2">
+        <h3>Outreach Outcomes: Yes vs No Responses</h3>
+      </section>
+      <section className="rounded-box  col-span-4 col-start-1 row-span-2 row-start-5 bg-primary p-2">
+        <h3>Outreach Success Rate</h3>
+      </section>
+      <section className=" rounded-box   col-span-8 col-start-5 row-span-4 row-start-1 bg-primary p-2">
+        <h3>Business Card Engagement: Saved vs Contacted</h3>
+      </section>
 
-        <div className=" col-span-4 row-start-4 row-end-6 rounded-lg bg-[#D7E4EB]  ">
-          Proposal sent vs Contract signed overview
-        </div>
-        <div className="  col-span-4 col-start-5 row-start-4 row-end-6 rounded-lg bg-[#D7E4EB] ">
-          Sites completed
-        </div>
+      <section className=" rounded-box    col-span-4 col-start-5 row-span-2 bg-primary p-2">
+        <h3>Proposal sent vs Contract signed overview</h3>
+      </section>
+      <section className="  rounded-box  col-span-4 col-start-9 row-span-2 bg-primary p-2 ">
+        <h3>Sites completed</h3>
       </section>
     </main>
   );