Additional Setup

serrachow · serrachow · commit dd6ac6247607 · 2024-02-05T18:42:19.000-08:00
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "@types/node": "20.6.0",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
-    "next": "13.4.16",
+    "next": "^13.4.16",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "5.2.2"
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,5 +1,8 @@
+@import url("https://fonts.googleapis.com/css?family=DM+Sans:100,200,300,400,500,600,700,800,900");
+
 html,
 body {
+  font-family: "DM Sans", sans-serif;
   width: 100%;
   height: 100%;
   margin: 0;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,8 +1,10 @@
 import './globals.css';
 import type { Metadata } from 'next';
 import { DM_Sans } from 'next/font/google';
+import Footer from '../components/Footer';
 
-const dmSans = DM_Sans({ subsets: ['latin'] });
+
+const dmSans = DM_Sans({ subsets: ['latin'], weight: ['400', '500', '700'] });
 
 export const metadata: Metadata = {
   title: 'ACM Static Site Template',
@@ -12,7 +14,8 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className={dmSans.className}>{children}</body>
+      <body>{children}</body>
+      <Footer />
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,9 @@
+
 import styles from './page.module.scss';
 import Image from 'next/image';
 
+
+
 export default function Home() {
   return (
     <main className={styles.main}>
@@ -11,5 +14,6 @@ export default function Home() {
         <h1>Welcome to ACM's static site template!</h1>
       </div>
     </main>
+    
   );
 }
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -0,0 +1,26 @@
+import { useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import "./styles.scss";
+
+
+const Footer: React.FC = () => {
+  // const [email, setEmail] = useState("");
+  return (
+    <div className = "footer">
+        <div className="footerContainer">
+            <div className="footerContents">
+                
+                <div className="footerContents__wrapper">
+                  <h1>Find us here!</h1>
+                    <p>Interested in learning more?</p>
+                    <p>Reach out to get connected, or explore our socials to get a sense of who we are as a community!</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+  );
+};
+
+export default Footer;
diff --git a/src/components/Footer/styles.scss b/src/components/Footer/styles.scss
@@ -0,0 +1,24 @@
+@use "src/styles/colors.scss" as colors;
+
+.footer {
+  width: 100%;
+  height: 100%;
+  background-color: colors.$green;
+  color: colors.$white;
+  z-index: 0;
+  position: relative;
+}
+.footerContainer {
+  padding-bottom: 60px;
+  display: flex;
+  justify-content: center;
+}
+.footerContents {
+  h2 {
+    font-size: 42px;
+    font-weight: 700;
+    width: 100%;
+    text-align: center;
+    padding-top: 56px;
+  }
+}
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
@@ -0,0 +1,2 @@
+$green: #116532;
+$white: #FFFFFF;
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
@@ -0,0 +1,16 @@
+h2 {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.45rem;
+    color: inherit;
+    font-family: "DM Sans", sans-serif;
+    font-weight: bold;
+    text-rendering: optimizeLegibility;
+    font-size: 1.62671rem;
+    line-height: 1.1;
+  }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+$green: #116532;`
	`2`	`+$white: #FFFFFF;`