Technigo · gittebe · Nov 5, 2024 · Nov 5, 2024 · Nov 5, 2024 · Nov 5, 2024
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,77 @@
+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;
+
+&: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
diff --git a/src/main.jsx b/src/main.jsx
@@ -1,7 +1,6 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { App } from "./App.jsx";
-import "./index.css";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>

diff --git a/src/sections/Achievements.jsx b/src/sections/Achievements.jsx
@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import { AchievementElement } from '../ui/AchievementElement';
+import { AchievementsTitle } from '../ui/Typography';
+
+const AchievementsSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  max-width: 700px;
+  margin: 0 auto;
+`;
+
+const AchievementsContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 1.5rem;
+  width: 100%;
+
+ @media (max-width: 400px){
+gap: 0.5rem;
+ }
+`;
+
+export const Achievements = () => {
+  return (
+    <AchievementsSection>
+      <AchievementsTitle>Vår spridning</AchievementsTitle>
+      <AchievementsContainer>
+        <AchievementElement number="53" label="Samtalsgrupper" color="#82E1DF" />
+        <AchievementElement number="25" label="Volontärer" color="#F0EC92" />
+        <AchievementElement number="88" label="Aktiviteter" color="#D3D3D3" />
+      </AchievementsContainer>
+    </AchievementsSection>
+  );
+};