.vscode/settings.json

@@ -2,12 +2,13 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "eslint.format.enable": true,
   "eslint.codeActionsOnSave.mode": "all",
+  "css.lint.validProperties": ["composes"],
   "css.format.spaceAroundSelectorSeparator": true,
   "[css]": {
     "editor.suggest.insertMode": "replace",
     "gitlens.codeLens.scopes": ["document"],
     "editor.formatOnSave": true,
-    "editor.defaultFormatter": "vscode.css-language-features"
+    "editor.defaultFormatter": "vscode.css-language-features",
   },
   "[javascript]": {
     "editor.formatOnSave": false,

components/SideComponentWrapper.module.css

@@ -0,0 +1,32 @@
+.wrapperCommon {
+  background-color: var(--secondary-background);
+  display: flex;
+  width: 80%;
+  padding: calc(40rem / 16) calc(50rem / 16);
+  margin: calc(80rem / 16) 0;
+}
+
+.wrapperRight {
+  composes: wrapperCommon;
+  align-self: end;
+  margin-right: 0;
+  padding-right: 0;
+  border-radius: calc(200rem / 16) 0 0 calc(200rem / 16);
+}
+
+.wrapperLeft {
+  composes: wrapperCommon;
+  align-self: start;
+  margin-left: 0;
+  padding-left: 0;
+  border-radius: 0 12.5rem 12.5rem 0;
+}
+
+.graphWrapper {
+  margin: calc(20rem / 16);
+}
+
+
+.textWrapper {
+  margin: 0 calc(100rem / 16);
+}

components/SideComponentWrapper.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import styles from "./SideComponentWrapper.module.css";
+
+type ComponentWrapperProps = {
+  children: React.ReactNode;
+  heading: string;
+  body: string;
+  rightAligned?: boolean;
+};
+
+export default function SideComponentWrapper({
+  heading,
+  body,
+  children,
+  rightAligned = false,
+}: ComponentWrapperProps) {
+  return (
+    <div className={rightAligned ? styles.wrapperRight : styles.wrapperLeft}>
+      <div className={styles.graphWrapper}>{children}</div>
+      <div className={styles.textWrapper}>
+        <h3 className={styles.heading}>{heading}</h3>
+        <p className={styles.body}>{body}</p>
+      </div>
+    </div>
+  );
+}

pages/_app.css

@@ -73,7 +73,11 @@ h2 {
   color: var(--primary-heading);
 }
 
-h3,
+h3 {
+  color: var(--secondary-heading);
+  font-size: calc(45rem / 16);
+}
+
 h4,
 h5,
 h6 {
@@ -89,6 +93,10 @@ a:hover {
   color: var(--link-hover);
 }
 
+p {
+  font-size: calc(28rem / 16);
+}
+
 @media only screen and (prefers-color-scheme: dark) {
   body {
     --primary-background: var(--dark--primary-background);

pages/playground.tsx

@@ -2,6 +2,8 @@ import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
 import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
 import React from "react";
 
+import SideComponentWrapper from "@/components/SideComponentWrapper";
+
 import { ColorPalette } from "../components/ColorPalette";
 import { WordCloud } from "../components/WordCloud";
 
@@ -59,6 +61,36 @@ export default function Home() {
           value: word.value,
         }))}
       />
+
+      <SideComponentWrapper
+        heading="What program are you in?"
+        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
+      >
+        <BarGraphVertical
+          data={mockCategoricalData}
+          width={800}
+          height={500}
+          margin={{
+            top: 20,
+            bottom: 80,
+            left: 60,
+            right: 20,
+          }}
+        />
+      </SideComponentWrapper>
+
+      <SideComponentWrapper
+        heading="What program are you in?"
+        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
+        rightAligned
+      >
+        <WordCloud
+          data={moreMockCategoricalData.map((word) => ({
+            text: word.key,
+            value: word.value,
+          }))}
+        />
+      </SideComponentWrapper>
     </div>
   );
 }

pages/samplePage.module.css

@@ -0,0 +1,4 @@
+.page {
+  display: flex;
+  flex-direction: column;
+}

pages/samplePage.tsx

@@ -0,0 +1,45 @@
+import { BarGraphVertical } from "components/BarGraph";
+import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
+import React from "react";
+
+import SideComponentWrapper from "@/components/SideComponentWrapper";
+
+import { WordCloud } from "../components/WordCloud";
+
+import styles from "./samplePage.module.css";
+
+export default function SamplePage() {
+  return (
+    <div className={styles.page}>
+      <SideComponentWrapper
+        heading="What program are you in?"
+        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
+      >
+        <BarGraphVertical
+          data={mockCategoricalData}
+          width={800}
+          height={500}
+          margin={{
+            top: 20,
+            bottom: 80,
+            left: 60,
+            right: 20,
+          }}
+        />
+      </SideComponentWrapper>
+
+      <SideComponentWrapper
+        heading="What program are you in?"
+        body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
+        rightAligned
+      >
+        <WordCloud
+          data={moreMockCategoricalData.map((word) => ({
+            text: word.key,
+            value: word.value,
+          }))}
+        />
+      </SideComponentWrapper>
+    </div>
+  );
+}