Grid layout, instructions (placeholder)

src/App.tsx

@@ -1,13 +1,17 @@
 import { useQuery } from "@tanstack/react-query";
 import * as d3 from "d3";
-import { useEffect, useState } from "react";
-import Legend from "./components/Legend";
-import QRCode from "./components/QRCode";
-import { QuestionGroupChart } from "./components/QuestionGroupChart";
+
 import { config } from "./config";
 import { getSampleData } from "./lib/data";
 import { fetchCategoryMetadata } from "./lib/metadata";
 
+import { Instructions } from "./components/Instructions";
+import Legend from "./components/Legend";
+import QRCode from "./components/QRCode";
+import { QuestionGroupChart } from "./components/QuestionGroupChart";
+
+import "./styles/App.scss";
+
 function App() {
   const metadataQuery = useQuery({
     queryKey: ["categoryMetadata"],
@@ -44,7 +48,7 @@ function App() {
     .domain(sortedResponses)
     .range([0, sortedResponses.length * config.groupSpacing]);
   return (
-    <>
+    <div className="layout">
       <div className="chart-container">
         <div className="charts">
           {questionGroups.map(([question, groupData]) => (
@@ -60,8 +64,13 @@ function App() {
         </div>
         <Legend />
       </div>
-      <QRCode />
-    </>
+      <div className="qr">
+        <QRCode />
+      </div>
+      <div className="instructions">
+        <Instructions />
+      </div>
+    </div>
   );
 }
 

src/components/Instructions.tsx

@@ -0,0 +1,7 @@
+export function Instructions() {
+  return (
+    <div className="instructions-container">
+      <img src="/placeholder-instructions.svg" alt="Instructions" />
+    </div>
+  );
+}

src/styles/App.scss

@@ -0,0 +1,70 @@
+@use "shared" as *;
+
+.layout {
+  display: grid;
+  grid-template-areas:
+    "main qr"
+    "main instructions";
+  grid-template-columns: auto 25%;
+  grid-template-rows: auto auto;
+  grid-gap: 25px;
+
+  margin: 25px;
+}
+
+.chart-container {
+  @include rounded;
+  @include shadow;
+
+  grid-area: main;
+  display: flex;
+  flex-direction: column;
+  padding: 50px;
+  gap: 50px;
+
+  background-color: $bg-grey;
+}
+
+.charts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 25px;
+}
+
+.question-group {
+  @include rounded;
+  @include shadow;
+
+  background-color: #ffffff;
+  border-radius: 4px;
+  padding: 16px;
+
+  flex: 1 1 300px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 8px;
+}
+
+.question-group svg {
+  align-self: center;
+  margin-bottom: 16px;
+}
+
+.question-group p {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.4;
+}
+
+.question-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+.question-title .material-icons {
+  vertical-align: top;
+  margin-right: 1ex;
+}

src/styles/_shared.scss

@@ -4,19 +4,21 @@ $aai-blue-light: hsl(196.8deg 63% 55.5%);
 $aai-green-dark: hsl(181deg 75% 37%);
 $aai-green-light: hsl(127.5deg 100% 87.5%);
 
-$aai-grey: hsl(202.5deg 20% 76.5%);
+$aai-grey: #b7c6cf;
 $aai-orange: hsl(18.6deg 100% 55.1%);
 
+$bg-grey: #f8f9fa;
+
 @mixin rounded {
   border-radius: 16px;
 }
 
 @mixin shadow {
-  filter: drop-shadow(0 16px 16px rgb($aai-grey, 80%));
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }
 
 @mixin no-shadow {
-  filter: none;
+  box-shadow: none;
 }
 
 $border-radius: 16px;

src/styles/index.scss

@@ -1,4 +1,7 @@
 @use "shared" as *;
+@import "normalize-scss";
+
+@include normalize();
 
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
@@ -15,12 +18,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-body {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 h1,
 h2,
 h3,
@@ -29,7 +26,6 @@ h5,
 h6 {
   font-family: "Work Sans", sans-serif;
   font-weight: 800;
-  margin: 0;
 }
 
 a {
@@ -48,66 +44,3 @@ body {
   min-width: 320px;
   min-height: 100vh;
 }
-
-#root {
-  display: flex;
-  gap: 16px;
-  margin: 16px;
-  flex-direction: row;
-  align-items: start;
-}
-
-.chart-container {
-  @include rounded;
-  @include shadow;
-
-  display: flex;
-  flex-direction: column;
-
-  background-color: #ffffff;
-}
-
-.charts {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  padding: 16px;
-}
-
-.question-group {
-  @include rounded;
-  @include shadow;
-
-  background-color: #ffffff;
-  padding: 16px;
-  border: 1px solid #ddd;
-
-  flex: 1 1 300px;
-
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  gap: 8px;
-}
-
-.question-group svg {
-  align-self: center;
-  margin-bottom: 16px;
-}
-
-.question-group p {
-  font-size: 14px;
-  color: #666;
-  line-height: 1.4;
-}
-
-.question-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #333;
-}
-
-.question-title .material-icons {
-  vertical-align: top;
-  margin-right: 1ex;
-}