Technigo · Fannyhenriques · Nov 5, 2024 · Nov 6, 2024 · Nov 6, 2024 · Nov 6, 2024
diff --git a/README.md b/README.md
@@ -1,34 +1,43 @@
-<h1 align="center">
-  <a href="">
-    <img src="/src/assets/design-handoff.svg" alt="Project Banner Image">
-  </a>
-</h1>
-
 # Design Handoff Project
 
-Replace this readme with your own information about your project.
+This project aimed to replicate a Figma design for a web page titled Random Acts of Kindness (R.A.O.K) provided by a UX designer. The goal was to build a responsive and maintainable React application using reusable components and styled-components.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+🔍 Project Overview
+The page is built using React and leverages styled-components for styling. We focused on creating a modular structure with reusable components to ensure a scalable and easily maintainable codebase.
 
-## Getting Started with the Project
+### The Problem
 
-### Dependency Installation & Startup Development Server
+- Structuring the Layout
+  Problem: Structuring the layout and organizing it into components was the primary challenge.
+  Solution: We approached the project by first building the smallest reusable components (e.g., typography components) and then progressively creating larger section components. As the project evolved, we had to refactor and reorganize some components for better maintainability.
 
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
+- JSON Data Management
+  Problem: Handling the page content in a scalable way.
+  Solution: We stored the content in JSON files, allowing for easy updates and a more maintainable code structure. This approach also makes it simpler to modify content in the future.
 
-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.
+- Working with Branches
+  Problem: Managing code changes collaboratively.
+  Solution: We followed a branching strategy with frequent commits and pull requests to minimize merge conflicts. This practice helped us maintain a clean and stable codebase throughout development.
 
-```bash
-npm i && code . && npm run dev
-```
+- Handling Inconsistent Spacing
+  Problem: The design had inconsistent spacing values, making it challenging to implement a unified spacing system.
+  Solution: We defined a set of spacing values in themes.js but had to introduce custom margins and paddings in specific components where unique spacings were required. This helped maintain a balance between design fidelity and code maintainability.
 
-### The Problem
+- Slideshow Implementation
+  Problem: Creating a seamless image slideshow with smooth transitions.
+  Solution: Despite multiple attempts to refine the animation, the slideshow still has a minor "jump" when it reloads. This remains an area for future improvement.
+
+if we had more time:
 
-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?
+- Fix the slideshow issue to ensure a smooth, seamless transition between images.
+- Refactor component naming to make the names more logical and easier to understand for future developers.
+- Create reusable button components for the social links section to follow the DRY principle and ensure consistent styling across the application.
+- Enhance the responsive layout for tablet and desktop views, making it more aligned with the provided design specifications.
+- Add comments and documentation throughout the components to explain their purpose and functionality, improving code readability.
 
 ### 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.
+https://act-of-kindness.netlify.app
 
 ## Instructions
 

diff --git a/index.html b/index.html
@@ -1,10 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <link rel="icon" href="logo/heartslogo.svg" type="image/svg+xml">
     <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+    <title>Acts of Kindness</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -11,16 +11,20 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@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",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "vite-plugin-svgr": "^4.3.0"
   }
 }
diff --git a/public/doodles/Doodles_Step1.png b/public/doodles/Doodles_Step1.png
diff --git a/public/doodles/Doodles_Step2.png b/public/doodles/Doodles_Step2.png
diff --git a/public/doodles/Doodles_Step3.png b/public/doodles/Doodles_Step3.png
diff --git a/public/icons/arrow-icon.svg b/public/icons/arrow-icon.svg
diff --git a/public/icons/check-icon.svg b/public/icons/check-icon.svg
diff --git a/public/icons/instagram.svg b/public/icons/instagram.svg
diff --git a/public/icons/share.svg b/public/icons/share.svg
diff --git a/public/icons/star.svg b/public/icons/star.svg
diff --git a/public/icons/tiktok.svg b/public/icons/tiktok.svg
diff --git a/public/images/img1.png b/public/images/img1.png
diff --git a/public/images/img2.png b/public/images/img2.png
diff --git a/public/images/img3.png b/public/images/img3.png
diff --git a/public/images/img4.png b/public/images/img4.png
diff --git a/public/images/img5.png b/public/images/img5.png