From f1d3ababd4eff463af3ed66880392aef8c96bc7b Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Sat, 10 Oct 2020 03:10:25 +0300 Subject: [PATCH] New Hero on ActualPage --- src/components/NewHero/Hero.tsx | 55 +++++ src/components/NewHero/HeroAsideItem.tsx | 56 +++++ src/components/NewHero/HeroPrimaryButtons.tsx | 38 ++++ src/components/NewHero/HeroPrimarySection.tsx | 37 ++++ .../HeroSecondarySection.tsx | 33 ++- src/components/NewHero/index.tsx | 6 + src/views/ActualPage/ActualPageHero.tsx | 74 ++++--- src/views/FrontPage/FrontPageHero.tsx | 203 +++--------------- 8 files changed, 279 insertions(+), 223 deletions(-) create mode 100644 src/components/NewHero/Hero.tsx create mode 100644 src/components/NewHero/HeroAsideItem.tsx create mode 100644 src/components/NewHero/HeroPrimaryButtons.tsx create mode 100644 src/components/NewHero/HeroPrimarySection.tsx rename src/components/{Hero => NewHero}/HeroSecondarySection.tsx (70%) create mode 100644 src/components/NewHero/index.tsx diff --git a/src/components/NewHero/Hero.tsx b/src/components/NewHero/Hero.tsx new file mode 100644 index 0000000..3005326 --- /dev/null +++ b/src/components/NewHero/Hero.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import styled from "styled-components"; +import { colors } from "@theme/colors"; + +const Container = styled.div` + display: flex; + flex-flow: row wrap; + justify-content: space-between; + position: relative; + padding: 0; + + min-height: 70vh; + + section { + padding: 2rem 1rem; + } + + aside { + padding: 0 2rem; + } + + & > div { + flex: 8; + } + + & > aside { + + flex: 4; + display: flex; + flex-direction: column; + justify-content: center; + } + + @media screen and (max-width: 800px) { + flex-direction: column; + + & > aside { + margin: 48px auto; + } + } + + color: ${colors.white}; + background-color: ${colors.darkBlue}; + a:hover { + color: ${colors.white}; + } +`; + +const Hero: React.FC = ({ children }) => ( + + {children} + +) + +export default Hero; \ No newline at end of file diff --git a/src/components/NewHero/HeroAsideItem.tsx b/src/components/NewHero/HeroAsideItem.tsx new file mode 100644 index 0000000..821265c --- /dev/null +++ b/src/components/NewHero/HeroAsideItem.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import styled from "styled-components"; +import { colors } from "@theme/colors"; +import Anchor from "@components/Anchor"; + +interface HeroAsideItemProps { + header: string; + text?: string; + link: string; + linkText: string; +} + +const Article = styled.article` + max-width: 300px; + line-height: 1rem; + margin-bottom: 1rem; + + h2 { + color: ${colors.lightBlue}; + text-transform: uppercase; + letter-spacing: 3px; + line-height: 20px; + } + + p, a { + color: ${colors.lightBlue}; + font-size: 14px; + font-weight: 300; + line-height: 20px; + } + + a { + color: ${colors.blue1}; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1rem; + + &:hover { + color: ${colors.white}; + } + } +`; + +const HeroAsideItem: React.FC = ({ header, text, link, linkText }) => ( +
+

{header}

+ {text && ( +

{text}

+ )} + + {linkText} + +
+) + +export default HeroAsideItem; diff --git a/src/components/NewHero/HeroPrimaryButtons.tsx b/src/components/NewHero/HeroPrimaryButtons.tsx new file mode 100644 index 0000000..627ee30 --- /dev/null +++ b/src/components/NewHero/HeroPrimaryButtons.tsx @@ -0,0 +1,38 @@ +import styled from "styled-components"; +import { colors } from "@theme/colors"; + +const Buttons = styled.div<{row?: boolean}>` + min-width: 20%; + max-width: fit-content; + margin: auto; + display: flex; + flex-direction: ${(p) => p.row ? "row" : "column"}; + + a { + display: contents; + } + + button { + color: ${colors.blue1}; + background-color: transparent; + padding: 0.8rem 2rem; + margin: 0.5rem; + font-size: 0.8rem; + font-weight: 800; + letter-spacing: .1em; + text-transform: uppercase; + border: 1px solid ${colors.lightTurquoise}; + + &:hover { + cursor: pointer; + color: ${colors.white}; + } + + &:active, + &:focus { + outline: none; + } + } +`; + +export default Buttons; \ No newline at end of file diff --git a/src/components/NewHero/HeroPrimarySection.tsx b/src/components/NewHero/HeroPrimarySection.tsx new file mode 100644 index 0000000..6cf2162 --- /dev/null +++ b/src/components/NewHero/HeroPrimarySection.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import styled from "styled-components"; + +interface HeroPrimarySectionProps { + header: string; + text: string; +} + +const Section = styled.section` + margin: 10vh auto 0; + max-width: 600px; + text-align: center; + line-height: 1.5rem; + + h1 { + line-height: 40px; + @media screen and (max-width: 500px) { + font-size: 2rem; + } + } + + p { + max-width: 400px; + margin: 1em auto; + font-weight: 100; + } +`; + +const HeroPrimarySection: React.FC = ({ header, text, children }) => ( +
+

{header}

+

{text}

+ {children} +
+) + +export default HeroPrimarySection; \ No newline at end of file diff --git a/src/components/Hero/HeroSecondarySection.tsx b/src/components/NewHero/HeroSecondarySection.tsx similarity index 70% rename from src/components/Hero/HeroSecondarySection.tsx rename to src/components/NewHero/HeroSecondarySection.tsx index ca170c4..16dfab9 100644 --- a/src/components/Hero/HeroSecondarySection.tsx +++ b/src/components/NewHero/HeroSecondarySection.tsx @@ -1,10 +1,6 @@ import React from "react"; import styled from "styled-components"; -import ColorDiv from "../ColorDiv/ColorDiv"; - -interface HeroSecondarySectionItemProps { - note?: string; -} +import { colors } from "@theme/colors"; const Note = styled.span` color: white; @@ -25,6 +21,10 @@ const Item = styled.div` margin: 1rem 2rem 1rem; `; +interface HeroSecondarySectionItemProps { + note?: string; +} + export const HeroSecondarySectionItem: React.FC = ({note, children}) => ( @@ -34,14 +34,13 @@ export const HeroSecondarySectionItem: React.FC = ) -const Container = styled(ColorDiv)` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; +const Section = styled.section` + background-color: ${colors.green1}; + color: ${colors.darkBlue}; h1 { - padding: 1em 0; + padding: 1rem 0; + text-align: center; } `; @@ -51,16 +50,16 @@ const Items = styled.div` `; interface HeroSecondarySectionProps { - title: string; + heading: string; } -const HeroSecondarySection: React.FC = ({title, children}) => ( - -

{title}

+const HeroSecondarySection: React.FC = ({ heading, children }) => ( +
+

{heading}

{children} - +
) -export default HeroSecondarySection; +export default HeroSecondarySection; \ No newline at end of file diff --git a/src/components/NewHero/index.tsx b/src/components/NewHero/index.tsx new file mode 100644 index 0000000..1856885 --- /dev/null +++ b/src/components/NewHero/index.tsx @@ -0,0 +1,6 @@ +export { default as Hero } from "./Hero"; +export { default as HeroPrimarySection } from "./HeroPrimarySection"; +export { default as HeroSecondarySection } from "./HeroSecondarySection"; +export { HeroSecondarySectionItem } from "./HeroSecondarySection"; +export { default as HeroAsideItem } from "./HeroAsideItem"; +export { default as HeroPrimaryButtons } from "./HeroPrimaryButtons"; \ No newline at end of file diff --git a/src/views/ActualPage/ActualPageHero.tsx b/src/views/ActualPage/ActualPageHero.tsx index f8048f0..9b64c8a 100644 --- a/src/views/ActualPage/ActualPageHero.tsx +++ b/src/views/ActualPage/ActualPageHero.tsx @@ -1,27 +1,31 @@ import React from "react"; -import HeroMainSection from "@components/Hero/HeroMainSection"; -import HeroAsideSection from "@components/Hero/HeroAsideSection"; -import HeroAsideItem from "@components/Hero/HeroAsideItem"; -import HeroSecondarySection, { HeroSecondarySectionItem } from "@components/Hero/HeroSecondarySection"; -import Button from "@components/Button"; -import PageSection from "@components/PageSection"; +import { Hero, HeroPrimarySection, HeroSecondarySection, HeroSecondarySectionItem, HeroAsideItem, HeroPrimaryButtons } from "@components/NewHero"; +import Anchor from "@components/Anchor"; const ActualPageHero: React.FC = () => ( - - -

Yritystapahtumia ja vastapainoa opiskelulle

-

- Teekkarielämä ei ole pelkkää saunomista, juhlimista ja muita huvituksia—tai no, on se sitäkin. -

-
- - -
- + +
+ + + + + + + + + + + + Killan hallitus päivystää kiltahuoneella maanantaisin klo 12.15–13.15. Tuolloin voit ostaa kiltatuotteita, kuten esim. haalarimerkkejä tai laulukirjoja. @@ -29,38 +33,38 @@ const ActualPageHero: React.FC = () => ( Kiltapäiväkerho Kiltis kokoontuu torstaisin klo XX.XX kiltahuoneella. Lorem ipsum dolor sit amet. Lämpimästi tervetuloa kaikki SIKkiläiset ja SIK-mieliset! - - +
+ + ) export default ActualPageHero; \ No newline at end of file diff --git a/src/views/FrontPage/FrontPageHero.tsx b/src/views/FrontPage/FrontPageHero.tsx index 09c303b..5669cbf 100644 --- a/src/views/FrontPage/FrontPageHero.tsx +++ b/src/views/FrontPage/FrontPageHero.tsx @@ -1,143 +1,15 @@ import React from "react"; -import styled from "styled-components"; -import { PageSection } from "@components/index"; -import { colors } from "@theme/colors"; import Anchor from "@components/Anchor"; - -const HeroSection = styled(PageSection)` - min-height: 70vh; - - section, aside { - padding: 0 1rem; - } - - @media screen and (max-width: 800px) { - flex-direction: column; - - aside { - margin: 48px auto; - } - } - - color: ${colors.white}; - background-color: ${colors.darkBlue}; - a:hover { - color: ${colors.white}; - } -`; - -const MainSections = styled.div` - flex: 8; -`; - -const PrimarySection = styled.section` - margin: 15vh auto 0; - max-width: 600px; - text-align: center; - line-height: 1.5rem; - - h1 { - line-height: 40px; - @media screen and (max-width: 500px) { - font-size: 2rem; - } - } - - p { - max-width: 400px; - margin: 1em auto; - font-weight: 100; - } -`; - -const SecondarySection = styled.section` - background-color: blue; - /* height: 100%; */ -`; - -const Buttons = styled.div` - min-width: 20%; - max-width: fit-content; - margin: auto; - display: flex; - flex-direction: column; - - a { - display: contents; - } - - button { - color: ${colors.blue1}; - background-color: transparent; - padding: 0.8rem 2rem; - margin: 0.5rem; - font-size: 0.8rem; - font-weight: 800; - letter-spacing: .1em; - text-transform: uppercase; - border: 1px solid ${colors.lightTurquoise}; - - &:hover { - cursor: pointer; - color: ${colors.white}; - } - - &:active, - &:focus { - outline: none; - } - } -`; - -const AsideSection = styled.aside` - flex: 4; - display: flex; - flex-direction: column; - justify-content: center; -`; - -const AsideItem = styled.article` - max-width: 300px; - line-height: 1rem; - margin-bottom: 1rem; - - h2 { - color: ${colors.lightBlue}; - text-transform: uppercase; - letter-spacing: 3px; - line-height: 20px; - } - - p, a { - color: ${colors.lightBlue}; - font-size: 14px; - font-weight: 300; - line-height: 20px; - } - - a { - color: ${colors.blue1}; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.1rem; - - &:hover { - color: ${colors.white}; - } - } -`; +import { Hero, HeroPrimarySection, HeroAsideItem, HeroPrimaryButtons } from "@components/NewHero"; const FrontPageHero: React.FC = () => ( - - - -

Aalto-yliopiston Sähköinsinöörikilta

-

- on elektroniikan ja sähkötekniikan opiskelijoiden järjestö. Kilta - kasaa yhteen yli 600 alansa huippua, jotka ovat avainasemassa - vauhdilla sähköistyvän maailmamme kehityksessä. -

- + +
+ + - - - - - + + +
- - -

Vasta-aloittanut opiskelija

-

- Fuksikasvatusta, ISO-toimintaa, lorem ipsum dolor sit ja amet. -

- - Fuksit  › - - - -

Harkitsetko uraa alalla?

-

- Oletko abi, vaihtamassa uraa tai valmistumassa? -

- - Opinnot ja ura  › - - - -

Yhteistyö yritysten kanssa

-

- Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja sponsseille. -

- - Yritysyhteistyö  › - - - - + + ); export default FrontPageHero; \ No newline at end of file