✨ feat: added hero to startpage

Ayngie · Jan 21, 2024 · 097674e · 097674e
1 parent 4f2bc31
commit 097674e
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx
@@ -1,8 +1,9 @@
 import { useEffect } from "react";
 import { Link } from "react-router-dom";
 import { LinkToTop } from "../LinkToTop";
+import { StyledHero } from "../styles/StyledHero";
 import { StyledFullSection, ParagraphWrapper } from "../styles/StyledWrappers";
-import { StyledHeading, Paragraph, BoldText, StyledLinks, TextLink } from "../styles/StyledTexts";
+import { StyledHeading, Paragraph, BoldText, StyledLinks, TextLink, ItalicText } from "../styles/StyledTexts";
 
 export const Home = () => {
   useEffect(() => {
@@ -22,10 +23,13 @@ export const Home = () => {
 
   return (
     <StyledFullSection>
-      <StyledHeading>Välkommen!</StyledHeading>
-      <ParagraphWrapper>
+      <StyledHero>
+        <StyledHeading>Välkommen!</StyledHeading>
         <Paragraph>Graviditetsdiabetesappen - din naturliga guide för att hantera och förebygga <BoldText>graviditetsdiabetes (GDM)</BoldText>. &#129328;</Paragraph>
+        <Paragraph><ItalicText>Läs mer nedan!</ItalicText></Paragraph>
+      </StyledHero>
 
+      <ParagraphWrapper>
         <h3>Vad är GDM?</h3>
         <Paragraph>
           När kvinnan har en bebis (eller fler) i magen behöver kroppen <TextLink href="https://liu.se/nyhet/digital-plattform-hjalper-gravida-att-halla-blodsockret" target="_blank"> ca 40% mer</TextLink> av hormonet insulin för att  

diff --git a/src/components/styles/StyledHero.ts b/src/components/styles/StyledHero.ts
@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import flowers from "/flowers.jpg";
+
+
+export const StyledHero = styled.section `
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255, 255, 255, 0.8)), url(${flowers});
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 100%;
+    height: 80vh;
+    font-size: 1rem;
+
+    margin-bottom: 10%;
+
+    @media screen and (min-width: 380px) {
+        font-size: 1.3rem;
+    }
+    @media screen and (min-width: 1000px) {
+        height: 70vh;
+        font-size: 2rem;
+        margin-bottom: 3%;
+    }
+
+`;