Technigo · HeleneWestrin · Nov 5, 2024 · Nov 5, 2024 · Nov 5, 2024 · Nov 5, 2024
diff --git a/README.md b/README.md
@@ -1,41 +1,17 @@
-<h1 align="center">
-  <a href="">
-    <img src="/src/assets/design-handoff.svg" alt="Project Banner Image">
-  </a>
-</h1>
+# Random Acts of Kindness
 
-### Remove git
+Our mission was to create a landing page for the fictional app Random Acts of Kindness. This was a collaboration with the a UX designer from the UX Bootcamp. The goal was to use Styled Components and also to follow the given design as close as possible. It also meant to practice using Figma Dev Mode and to communicate and collaborate with our UX designer.
 
-rm -rf .git
+## The Project
 
-# Design Handoff Project
+We started out by setting up the project together using LiveShare. Beforehand we had decided on a folder and component structure, so it was easy to set it all up. After creating all the files we started by adding global CSS and a theme with all our colors, spacings and fonts. We also started to define the typography components.
 
-Replace this readme with your own information about your project.
+After our initial setup we created a to-do list in Slack where we assigned ourselves to different tasks. This ensured we knew who worked on what.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+We didn't really encounter any big hurdles. It was a quite straight forward project and fun design to implement.
 
-## Getting Started with the Project
+One thing I (Helene), struggled a little bit with in the beginning was the transient props when using Styled Components. I took a while to figure out what was causing the error messages.
 
-### Dependency Installation & Startup Development Server
+## View it live
 
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
-
-The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.
-
-```bash
-npm i && code . && npm run dev
-```
-
-### The Problem
-
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
-
-### View it live
-
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
-
-## Instructions
-
-<a href="instructions.md">
-   See instructions of this project
-  </a>
+[https://random-acts-of-kindness.netlify.app](https://random-acts-of-kindness.netlify.app/)
diff --git a/index.html b/index.html
@@ -2,12 +2,57 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Music Releases - Project - Week 5</title>
+    <link
+      rel="preconnect"
+      href="https://fonts.googleapis.com"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap"
+      rel="preload"
+      as="style"
+      crossorigin
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap"
+      rel="stylesheet"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="https://fonts.gstatic.com/s/bebasneue/v14/JTUSjIg69CK48gW7PXoo9WdhyyTh89ZNpQ.woff2"
+      crossorigin
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="https://fonts.gstatic.com/s/bebasneue/v14/JTUSjIg69CK48gW7PXoo9WlhyyTh89Y.woff2"
+      crossorigin
+      as="font"
+      type="font/woff2"
+    />
+    <link
+      rel="icon"
+      type="image/png+xml"
+      href="/favicon.png"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <title>Random Acts of Kindness</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script
+      type="module"
+      src="/src/main.jsx"
+    ></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -10,13 +10,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.13",
+    "vite-plugin-svgr": "^4.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
+    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",

diff --git a/public/assets/doodle-0.png b/public/assets/doodle-0.png
diff --git a/public/assets/doodle-1.png b/public/assets/doodle-1.png
diff --git a/public/assets/doodle-2.png b/public/assets/doodle-2.png
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/image-slider/image-1.jpg b/public/image-slider/image-1.jpg
diff --git a/public/image-slider/image-2.jpg b/public/image-slider/image-2.jpg
diff --git a/public/image-slider/image-3.jpg b/public/image-slider/image-3.jpg
diff --git a/public/image-slider/image-4.jpg b/public/image-slider/image-4.jpg
diff --git a/public/image-slider/image-5.jpg b/public/image-slider/image-5.jpg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,46 @@
+import styled from "styled-components";
+import { breakpoints } from "./utils/helpers";
+
+/* Components */
+import { Button } from "./components/Button";
+import { Header } from "./components/Header";
+import { Footer } from "./components/Footer";
+import { Steps } from "./components/Steps";
+import { Testimonials } from "./components/Testimonials";
+import { Heading2 } from "./components/Typography/Title";
+import { Section } from "./components/Section";
+
+const GroupedSections = styled.div`
+  display: grid;
+  grid-auto-columns: 1fr;
+  ${breakpoints("grid-auto-flow", "", [{ 0: "row" }, { 1024: "column" }])};
+`;
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return (
+    <>
+      <main>
+        <Header colorTheme="red" />
+        <GroupedSections>
+          <Section colorTheme="yellow" paddingTop="xlarge">
+            <Button url="https://google.com">Start today</Button>
+          </Section>
+          <Section colorTheme="red" paddingTop="xlarge">
+            <Heading2>It&apos;s easy, peasy</Heading2>
+          </Section>
+        </GroupedSections>
+        <Section colorTheme="white" paddingTop="xxxlarge">
+          <Steps />
+        </Section>
+        <Section colorTheme="red" paddingTop="xlarge">
+          <Heading2>Kind words</Heading2>
+        </Section>
+        <Section colorTheme="white" paddingTop="xxxlarge">
+          <Testimonials />
+        </Section>
+      </main>
+
+      <Footer colorTheme="yellow" />
+    </>
+  );
 };