Skip to content

Commit

Permalink
frontpage hero
Browse files Browse the repository at this point in the history
  • Loading branch information
@mipyykko
mipyykko committed Aug 29, 2023
1 parent 2250aaf commit ded7371
Show file tree
Hide file tree
Showing 14 changed files with 321 additions and 158 deletions.
4 changes: 2 additions & 2 deletions frontend/components/NewLayout/Common/CTAButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
import { styled } from "@mui/material/styles"

import ArrowRight from "../Icons/ArrowRight"
import { fontSize } from "/src/theme/util"

const ctaButtonVariants = [
"transparent-background",
Expand Down Expand Up @@ -44,8 +45,7 @@ const EnhancedMUIButton = styled(ButtonBase)(
padding: 13px 16px;
.text {
font-size: 16px;
line-height: 18px;
${fontSize(16, 18)}
letter-spacing: -0.3px;
}
Expand Down
4 changes: 2 additions & 2 deletions frontend/components/NewLayout/Common/CTALink.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ import { styled } from "@mui/material/styles"

import ArrowLeft from "../Icons/ArrowLeft"
import ArrowRight from "../Icons/ArrowRight"
import { fontSize } from "/src/theme/util"

const ctaLinkVariants = ["link-list", "default"] as const

export type CTALinkVariant = (typeof ctaLinkVariants)[number]

const Link = styled(MUILink)(
({ theme }) => `
font-size: 16px;
line-height: 24px;
${fontSize(16, 24)}
font-weight: 600;
align-items: center;
color: ${theme.palette.common.brand.main};
Expand Down
275 changes: 231 additions & 44 deletions frontend/components/NewLayout/Frontpage/Hero.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,256 @@
import Image from "next/image"

import { Typography } from "@mui/material"
import { styled } from "@mui/material/styles"

import CTAButton from "../Common/CTAButton"
import { BackgroundImage } from "/components/Images/CardBackgroundFullCover"
// import { BackgroundImage } from "/components/Images/CardBackgroundFullCover"
import { useTranslator } from "/hooks/useTranslator"
import { fontSize } from "/src/theme/util"
import HomeTranslations from "/translations/home"

const HeroContainer = styled("section")`
display: flex;
const HeroRoot = styled("section")(
({ theme }) => `
position: relative;
height: 80%;
align-items: center;
`
padding-bottom: 0;
${theme.breakpoints.up("md")} {
margin-top: 0;
margin-bottom: 32px;
padding-bottom: 48px;
padding-top: 40px;
}
${theme.breakpoints.up("lg")} {
margin-right: -32px;
margin-left: -32px;
max-width: none;
}
&::after {
width: 100%;
background-color: ${theme.palette.common.grayscale.mediumDark};
height: 1px;
content: "";
margin: 0 auto;
display: block;
const HeroContentContainer = styled("div")`
${theme.breakpoints.up("md")} {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
}
`,
)

const HeroContainer = styled("div")(
({ theme }) => `
position: relative;
${theme.breakpoints.up("md")} {
display: flex;
position: relative;
}
`,
)

const HeroImageContainer = styled("div")(
({ theme }) => `
background-position: 50% 50%;
background-size: cover;
background: transparent;
margin: 0;
padding: 0;
position: relative;
figure {
margin: 0;
}
${theme.breakpoints.up("md")} {
background-color: ${theme.palette.common.grayscale.white};
bottom: 0;
order: 2;
padding: 8px 0;
position: absolute;
right: 0;
top: 0;
}
`,
)

const HeroImage = styled(Image)`
display: block;
height: 100%;
min-height: 205px;
object-fit: contain;
width: 100%;
`

const HeroContentContainer = styled("div")(
({ theme }) => `
padding: 24px 1rem 40px;
margin: 0 auto;
width: 100%;
${theme.breakpoints.up("xs")} {
padding: 24px 2rem 40px;
}
${theme.breakpoints.up("md")} {
order: 2;
align-items: center;
display: flex;
min-height: 330px;
padding: 56px 2rem;
}
${theme.breakpoints.up(1060)} {
min-height: 373px;
}
${theme.breakpoints.up(1160)} {
min-height: 480px;
}
${theme.breakpoints.up("lg")} {
padding-left: 32px;
padding-right: 8px;
}
${theme.breakpoints.up(1260)} {
min-height: 443px;
}
${theme.breakpoints.up(1280)} {
max-width: 1216px;
padding-left: 0;
}
${theme.breakpoints.up(1360)} {
min-height: 478px;
}
${theme.breakpoints.up(1460)} {
min-height: 513px;
}
${theme.breakpoints.up(1560)} {
min-height: 548px;
}
${theme.breakpoints.up("xl")} {
padding-left: 0;
}
${theme.breakpoints.up(1660)} {
min-height: 583px;
}
${theme.breakpoints.up(1760)} {
min-height: 619px;
}
${theme.breakpoints.up(1860)} {
min-height: 654px;
}
${theme.breakpoints.up(1920)} {
min-height: 675px;
}
background-color: ${theme.palette.common.grayscale.white};
`,
)

const HeroContent = styled("div")(
({ theme }) => `
position: relative;
${theme.breakpoints.up("md")} {
padding-right: 24px;
max-width: 50%;
}
`,
)

const HeroSpacer = styled("div")(
({ theme }) => `
display: none;
${theme.breakpoints.up("md")} {
background-color: ${theme.palette.common.grayscale.white};
display: block;
order: 1;
position: absolute;
inset: 0;
width: 50%;
}
`,
)

const Title = styled(Typography)(
({ theme }) => `
hyphens: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
background-color: rgba(255, 255, 255, 0.6);
`
flex-grow: 1;
flex-shrink: 0;
max-width: 100%;
width: auto;
const Title = styled(Typography)`
padding: 2rem;
max-width: 80vw;
text-align: center;
`
const Paragraph = styled(Typography)`
max-width: 60vw;
text-align: center;
${fontSize(32, 38)}
font-weight: 700;
color: ${theme.palette.common.grayscale.black};
letter-spacing: -0.8px;
margin-bottom: 0;
text-transform: uppercase;
${theme.breakpoints.up("desktop")} {
${fontSize(46, 54)}
letter-spacing: -1.15px;
}
${theme.breakpoints.up("xl")} {
${fontSize(52, 60)}
letter-spacing: -1.5px;
}
`,
)

const Description = styled("p")(
({ theme }) => `
${fontSize(16, 24)}
margin: 16px 0 0 0;
padding: 0;
position: relative;
color: ${theme.palette.common.grayscale.black};
${theme.breakpoints.up("xl")} {
${fontSize(17, 26)}
}
`,
)

const ActionContainer = styled("div")`
margin-top: 24px;
`

const CourseButton = styled(CTAButton)`
margin-top: 2rem;
`

function HeroContent() {
const t = useTranslator(HomeTranslations)

return (
<HeroContentContainer>
<Title variant="h1">{t("tagLine")}</Title>
<Paragraph variant="subtitle1">{t("intro")}</Paragraph>
<CourseButton variant="hero-white" href="#courses">
{t("courseButton")}
</CourseButton>
</HeroContentContainer>
)
}

function Hero() {
const t = useTranslator(HomeTranslations)
return (
<HeroContainer>
<HeroContent />
<BackgroundImage
src="/images/new/hero.png"
fill
aria-hidden
alt="background image"
priority
/>
</HeroContainer>
<HeroRoot>
<HeroContainer>
<HeroImageContainer>
<HeroImage
src="/images/courseimages/doggos.png"
width={620}
height={465}
priority
alt="hero"
/>
</HeroImageContainer>
<HeroSpacer />
<HeroContentContainer>
<HeroContent>
<Title variant="h2">{t("tagLine")}</Title>
<Description>{t("intro")}</Description>
<ActionContainer>
<CourseButton variant="hero-white" href="#courses">
{t("courseButton")}
</CourseButton>
</ActionContainer>
</HeroContent>
</HeroContentContainer>
</HeroContainer>
</HeroRoot>
)
}

Expand Down
Loading

0 comments on commit ded7371

Please sign in to comment.