container implementation and pages initial layout

components/Container/Container.module.css

@@ -5,4 +5,5 @@
     rgba(52, 20, 33, 0.9) 73.08%
   );
   border-radius: 16px;
+  padding: 16px;
 }

components/Layout/Layout.module.css

@@ -20,6 +20,6 @@
 }
 
 .container {
-  padding: 0 2rem;
+  padding: 2rem;
   flex: 1;
 }

pages/borrow.tsx

@@ -1,7 +1,13 @@
 import React from "react";
+import Container from "components/Container";
 
 const Borrow = () => {
-  return <div>Borrow Placeholder</div>;
+  return (
+    <div className="flex gap-4">
+      <Container className="flex-1">Borrow Module</Container>
+      <Container className="w-[450px]">Placeholder</Container>
+    </div>
+  );
 };
 
 export default Borrow;

pages/council.tsx

@@ -1,7 +1,12 @@
 import React from "react";
+import Container from "components/Container";
 
 const Council = () => {
-  return <div>Council Placeholder</div>;
+  return (
+    <div>
+      <Container>Council Placeholder</Container>
+    </div>
+  );
 };
 
 export default Council;

pages/portfolio.tsx

@@ -1,7 +1,18 @@
 import React from "react";
+import Container from "components/Container";
 
 const Portfolio = () => {
-  return <div>Portfolio Placeholder</div>;
+  return (
+    <div className="flex flex-col gap-4">
+      <Container className="flex-1">Portfolio Module</Container>
+      <div className="grid grid-cols-2 gap-4">
+        <Container>Subaccount 1</Container>
+        <Container>Subaccount 2</Container>
+        <Container>Subaccount 3</Container>
+        <Container>Subaccount 4</Container>
+      </div>
+    </div>
+  );
 };
 
 export default Portfolio;

pages/trade.tsx

@@ -1,7 +1,20 @@
 import React from "react";
+import Container from "components/Container";
 
 const Trade = () => {
-  return <div>Trade Placeholder</div>;
+  return (
+    <div>
+      <div className="flex gap-4 mb-4">
+        <Container className="flex-1">Graph/Tradingview Module</Container>
+        <div className="flex flex-col gap-4">
+          <Container>Buy/Sell module</Container>
+          <Container>Orderbook module (optional)</Container>
+        </div>
+        <Container>Credit Account essential module</Container>
+      </div>
+      <Container>Trader order overview</Container>
+    </div>
+  );
 };
 
 export default Trade;

pages/yield.tsx

@@ -1,7 +1,13 @@
 import React from "react";
+import Container from "components/Container";
 
 const Yield = () => {
-  return <div>Yield Placeholder</div>;
+  return (
+    <div className="flex gap-4">
+      <Container className="flex-1">Yield Module</Container>
+      <Container className="w-[450px]">Placeholder</Container>
+    </div>
+  );
 };
 
 export default Yield;