Technigo · gittebe · Nov 5, 2024 · Nov 5, 2024 · Nov 5, 2024 · Nov 5, 2024
diff --git a/README.md b/README.md
@@ -1,37 +1,32 @@
-<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.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
-
-## Getting Started with the Project
-
-### Dependency Installation & Startup Development Server
-
-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>
+# Kindness & Compassion - A Social Support Platform
+This project is a collaboration between two developer students and one UX design student as part of Technigo Bootcamp. The website serves as a community hub where users can engage in meaningful conversations, find support groups, and stay updated on activities designed to foster kindness and compassion.
+
+# Features & Structure
+## Global Styles: 
+The project uses styled-components for a modular and responsive design, with a focus on accessibility and smooth user experience across devices.
+## Hero Section: 
+A visually engaging hero section promotes the platform’s mission, inviting users to learn more about spreading good deeds for a better world.
+## Support Groups: 
+The platform features a section for users to join or start support groups, both online and offline, for personal connection and growth.
+## Carousel Section: 
+A dynamic carousel displays testimonials and community stories, allowing users to swipe through inspiring content.
+## Calendar of Events: 
+The platform includes a calendar with upcoming activities, offering users easy access to relevant events.
+## Achievements Section: 
+A visually appealing section showcases key metrics, like the number of volunteer groups, events, and activities, illustrating the platform's impact.
+## Footer: 
+A footer with social media links, contact information, and a brief overview of the platform’s mission and vision, further encouraging community engagement.
+
+# Technologies Used
+React: For building the user interface and managing application state.
+
+Styled Components: For styling the app with scoped, reusable components.
+
+React Swipeable: To implement swipeable functionality for mobile devices.
+
+React Hooks: For managing state and lifecycle in a functional programming style.
+
+Responsive Design: The app is fully responsive, ensuring a seamless experience across mobile, tablet, and desktop devices.
+
+# View live:
+https://project-design-handoff.netlify.app/
diff --git a/babel.config.json b/babel.config.json
@@ -0,0 +1,5 @@
+{
+    "presets": [
+        "@babel/preset-env"
+    ]
+}
diff --git a/index.html b/index.html
@@ -1,13 +1,24 @@
 <!DOCTYPE html>
 <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>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<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>Kindness and Compassion</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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+    rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap"
+    rel="stylesheet">
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -10,13 +10,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-swipeable": "^7.0.2",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
+    "@babel/cli": "^7.25.9",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.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",

diff --git a/public/assets/HeaderSun.png b/public/assets/HeaderSun.png
diff --git a/public/assets/Menu.svg b/public/assets/Menu.svg
diff --git a/public/assets/Search.svg b/public/assets/Search.svg
diff --git a/public/supportgroup-cancer.png b/public/supportgroup-cancer.png
diff --git a/public/supportgroup-psych.png b/public/supportgroup-psych.png
diff --git a/public/supportgroup-stress.png b/public/supportgroup-stress.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,27 @@
-export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+import { Welcome } from './sections/Welcome';
+import { HeaderSection } from './sections/HeaderSection';
+import { GlobalStyles } from './styles/GlobalStyles';
+import { HeaderHeroSection } from './sections/HeaderHeroSection';
+import { FooterSection } from './sections/Footer';
+import { SupportgroupSection } from './sections/Supportgroup';
+import { CarouselSection } from './sections/Carousel';
+import { Calendar } from './sections/Calendar';
+import { Achievements } from './sections/Achievements';
+
+const App = () => {
+  return (
+    <>
+      <GlobalStyles />
+      <HeaderSection />
+      <HeaderHeroSection />
+      <Welcome />
+      <SupportgroupSection />
+      <CarouselSection />
+      <Calendar />
+      <Achievements />
+      <FooterSection />
+    </>
+  );
 };
+
+export default App;
diff --git a/src/assets/Facebook.png b/src/assets/Facebook.png
diff --git a/src/assets/Hero.png b/src/assets/Hero.png
diff --git a/src/assets/Instagram.png b/src/assets/Instagram.png
diff --git a/src/assets/calendarcard1.png b/src/assets/calendarcard1.png
diff --git a/src/assets/calendarcard2.png b/src/assets/calendarcard2.png
diff --git a/src/carousel.json b/src/carousel.json
@@ -0,0 +1,18 @@
+[
+    {
+        "text": "Det kändes så mycket bättre att inse att jag inte var ensam om de tankarna.",
+        "author": "Sandra, deltagare i bröstcancergruppen"
+    },
+    {
+        "text": "Det var som om jag fick en helt ny syn på livet efter det här.",
+        "author": "Johan, deltagare i bröstcancergruppen"
+    },
+    {
+        "text": "Jag känner mig stärkt och hoppfull.",
+        "author": "Anna, deltagare i bröstcancergruppen"
+    },
+    {
+        "text": "Det var en livsförändrande upplevelse.",
+        "author": "Erik, deltagare i bröstcancergruppen"
+    }
+]
diff --git a/src/components/CalendarCard.jsx b/src/components/CalendarCard.jsx
@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import { DateCard } from '../ui/DateCard';
+import calendarcard1 from '../assets/calendarcard1.png';
+import calendarcard2 from '../assets/calendarcard2.png';
+import { CalendarCardTitle, CalendarCardText } from '../ui/Typography';
+
+const CardContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 90%; 
+  max-width: 400px; 
+  margin: 1rem auto;
+  background-color: #f3c1e2;
+  padding: 0;
+`;
+
+const Image = styled.img`
+  width: 100%;
+  height: auto;
+  border-radius: 0;
+`;
+
+const CardContent = styled.div`
+  padding: 1rem;
+`;
+
+export const CalendarCard = ({ image, date, month, title, location, time }) => {
+  const selectedImage = image === 'calendarcard1' ? calendarcard1 : calendarcard2;
+
+  return (
+    <CardContainer>
+      <Image src={selectedImage} alt={title} />
+      <DateCard date={date} month={month} />
+      <CardContent>
+        <CalendarCardTitle>{title}</CalendarCardTitle>
+        <CalendarCardText>{location}</CalendarCardText>
+        <CalendarCardText>{time}</CalendarCardText>
+      </CardContent>
+    </CardContainer>
+  );
+};
diff --git a/src/components/CarouselCard.jsx b/src/components/CarouselCard.jsx
@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const CarouselCardStyles = styled.div`
+display: flex;
+width: 12.25rem;
+height: 22.6rem;
+flex-direction: column;
+justify-content: flex-start;
+background-color: #C1F0EF;
+padding: 1rem 1rem 2rem 1rem;
+`
+export const CarouselCard = ({ children }) => {
+    return (
+        <CarouselCardStyles>
+            {children}
+        </CarouselCardStyles>
+    )
+}
+
+CarouselCard.propTypes = {
+    children: PropTypes.node.isRequired,
+}
diff --git a/src/components/HeaderCard.jsx b/src/components/HeaderCard.jsx
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+export const HeaderCard = styled.div`
+  grid-column: span 4;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 1rem 0;
+
+  @media (min-width: 768px) {
+    grid-column: span 8;
+  }
+
+  @media (min-width: 1200px) {
+    grid-column: span 12;
+  }
+`;
diff --git a/src/components/StatisticContainer.jsx b/src/components/StatisticContainer.jsx
diff --git a/src/components/SupportgroupCard.jsx b/src/components/SupportgroupCard.jsx
@@ -0,0 +1,81 @@
+import { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { SupportgroupImage } from '../ui/SupportgroupImage';
+import { SupportgroupTextContainer } from '../ui/SupportgroupTextContainer';
+import { HeaderText } from '../ui/Typography';
+import supportgroupData from '../supportgroups.json';
+
+const SupportgroupCardStyle = styled.div`
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+width: 20rem;
+height: 16.875rem;
+border-radius: var(--Radius-200, 0.5rem);
+box-shadow: 1px 4px 4px 0px rgba(0, 0, 0, 0.25);
+overflow: hidden;
+margin-bottom: 2.5rem;
+
+@media(max-width: 360px){
+  width: 18rem;
+}
+
+&:hover {
+    background-color: rgba(255, 255, 255, 0.8);
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
+    border: var(--sds-size-stroke-border) solid #000;
+    cursor: pointer;
+    filter: brightness(0.7);
+  }`
+
+const SupportgroupCardContainerStyle = styled.div`
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+grid-column: span 4;
+max-width: 700px;
+
+@media (min-width: 768px){
+    grid-column: span 8;
+  }
+
+@media (min-width: 1200px){
+    grid-column: span 12;
+  }
+`
+
+export const SupportgroupCard = () => {
+  const [supportgroups, setSupportgroups] = useState([])
+  useEffect(() => {
+    setSupportgroups(supportgroupData)
+    console.log(supportgroupData)
+  }, []);
+
+  const handleCardClick = (supportgroup) => {
+    console.log(`Card clicked: ${supportgroup.title}`)
+  };
+
+  return (
+    <>
+      <SupportgroupCardContainerStyle>
+        {supportgroups.map((supportgroup, index) => (
+          < SupportgroupCardStyle
+            key={index}
+            onClick={() => handleCardClick(supportgroup)}
+          >
+            <SupportgroupImage
+              supportgroupImage={supportgroup.supportgroupImage}
+              alt={supportgroup.alt}
+            />
+            <SupportgroupTextContainer>
+              <HeaderText>{supportgroup.title}</HeaderText>
+            </SupportgroupTextContainer>
+          </SupportgroupCardStyle>
+        ))
+        }
+      </SupportgroupCardContainerStyle >
+    </>
+  )
+}
diff --git a/src/components/WelcomeCard.jsx b/src/components/WelcomeCard.jsx
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+export const WelcomeCard = styled.div`
+  grid-column: span 4;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  background-color: #fff;
+
+  @media (min-width: 768px) {
+    grid-column: span 8;
+  }
+
+  @media (min-width: 1200px) {
+    grid-column: span 12;
+  }
+`
diff --git a/src/index.css b/src/index.css