Add qr code to footer

AccessiTech · Jan 23, 2025 · 0a0142a · 0a0142a
1 parent ccda67b
commit 0a0142a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/public/assets/qr.png b/public/assets/qr.png
diff --git a/src/App/App.jsx b/src/App/App.jsx
@@ -71,7 +71,7 @@ function App() {
                 <Col>
                   <h2>To the agent</h2>
                 </Col>
-                <Col style={{ width: '100%'}}>
+                <Col style={{ width: "100%" }}>
                   <Nav variant="pills" className="justify-content-end">
                     <Nav.Item>
                       <Nav.Link eventKey="translated">Translated</Nav.Link>
@@ -128,6 +128,29 @@ function App() {
             </Button>
           </Col>
         </Row>
+        <Row>
+          <Col
+            xs={{ span: 8, offset: 2 }}
+            sm={{ span: 6, offset: 3 }}
+            md={{ span: 4, offset: 4 }}
+            lg={{ span: 2, offset: 5 }}
+          >
+            <a
+              href="/"
+              target="_self"
+              rel="noopener noreferrer"
+              className="qr-link"
+              style={{ textAlign: "center" }}
+            >
+              <img
+                style={{ maxWidth: "100%", marginBottom: "0.5rem" }}
+                src="/assets/qr.png"
+                alt="QR code to this website"
+              />
+              <p>Scan to Share</p>
+            </a>
+          </Col>
+        </Row>
       </footer>
     </Container>
   );

diff --git a/src/App/App.scss b/src/App/App.scss
@@ -25,7 +25,7 @@ footer {
     display: flex;
     justify-content: center;
     gap: 1rem;
-    margin-bottom: 1rem;
+    margin-bottom: 2rem;
     font-weight: bold;
     border-radius: 1rem;
     color: $body-bg;