136 lines
3.6 KiB
Scala
136 lines
3.6 KiB
Scala
package pricegrid
|
|
|
|
import scalatags.Text.all._
|
|
import scalatags.Text.tags2
|
|
|
|
object Page {
|
|
|
|
/**
|
|
* Page content - grid layout of separate elements
|
|
* contains grid control styles
|
|
*/
|
|
lazy val bodyMarkup = body(
|
|
`class` := "bg-neutral-gray w-screen h-screen px-7 py-16 drop-shadow-2xl",
|
|
`class` := "md:grid md:place-content-center",
|
|
div(
|
|
`class` := "grid md:grid-cols-2 md:auto-rows-min",
|
|
`class` := "md:h-[475px] md:w-[640px]",
|
|
joinOurCommunity(
|
|
`class` := "md:col-span-2 rounded-t-md",
|
|
),
|
|
signup(
|
|
`class` := "md:rounded-bl-md",
|
|
),
|
|
whyUs(
|
|
`class` := "rounded-b-md md:rounded-bl-none",
|
|
)
|
|
),
|
|
footerMarkup
|
|
)
|
|
|
|
lazy val joinOurCommunity = div(
|
|
`class` := "bg-white flex flex-col gap-y-4 p-6 py-7 ",
|
|
`class` := "md:px-10 md:gap-y-0",
|
|
h1(
|
|
`class` := "text-xl text-primary-cyan font-bold",
|
|
`class` := "md:text-2xl md:my-3",
|
|
"Join our community"
|
|
),
|
|
h2(
|
|
`class` := "text-sm text-primary-yellow font-bold",
|
|
`class` := "md:text-lg md:my-2",
|
|
"30-day, hassle-free money back guarantee"
|
|
),
|
|
p(
|
|
`class` := "text-xs text-grayish-blue leading-loose ",
|
|
`class` := "md:text-base md:leading-relaxed md:mb-2",
|
|
"""
|
|
Gain access to our full library of tutorials along with expert code reviews.
|
|
Perfect for any developers who are serious about honing their skills.
|
|
"""
|
|
)
|
|
)
|
|
|
|
lazy val signup = div(
|
|
`class` := "bg-bg-subscription text-white p-6 ",
|
|
`class` := "md:p-10",
|
|
h2(
|
|
`class` := "text-md font-bold mb-4 md:text-lg",
|
|
"Monthly Subscription"
|
|
),
|
|
div(
|
|
`class` := "flex flex-row items-center mb-2",
|
|
p(`class` := "text-3xl font-bold md:text-3xl", "$29"),
|
|
p(`class` := "font-extralight text-sm ml-3 text-neutral-gray", "per month")
|
|
),
|
|
p(`class` := "text-sm", "Full access for less than $1 a day"),
|
|
button(
|
|
`class` := "w-full bg-primary-yellow rounded-lg h-12 mt-7 drop-shadow-xl font-bold",
|
|
`class` := "md:text-md",
|
|
"Sign Up"
|
|
)
|
|
)
|
|
|
|
lazy val whyUs = div(
|
|
`class` := "bg-bg-why-us text-white p-6 md:text-lg",
|
|
`class` := "md:p-10",
|
|
h2(
|
|
`class` := "font-bold mb-3",
|
|
"Why Us"),
|
|
ul(
|
|
List(
|
|
" Tutorials by industry experts ",
|
|
" Peer & expert code review ",
|
|
" Coding exercises ",
|
|
" Access to our GitHub repos ",
|
|
" Community forum ",
|
|
" Flashcard decks ",
|
|
" New videos every week "
|
|
).map(linkText =>
|
|
li(
|
|
`class` := "text-xs text-neutral-gray pt-1 md:font-light md:text-sm md:leading-tight",
|
|
linkText)
|
|
)
|
|
)
|
|
)
|
|
|
|
lazy val wholePageMarkup = doctype("html")(
|
|
html(
|
|
lang := "en",
|
|
head(
|
|
meta(charset := "UTF-8"),
|
|
meta(
|
|
name := "viewport",
|
|
content := "width=device-width, initial-scale=1.0"
|
|
),
|
|
tags2.title("Frontend Mentor | Single Price Grid Component"),
|
|
link(
|
|
href := "https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap",
|
|
rel := "stylesheet",
|
|
),
|
|
link(
|
|
rel := "icon",
|
|
`type` := "image/png",
|
|
href := "/public/images/favicon-32x32.png"
|
|
),
|
|
link(rel := "stylesheet", href := "/dist/output.css")
|
|
),
|
|
bodyMarkup
|
|
)
|
|
)
|
|
|
|
lazy val footerMarkup = footer(
|
|
p(
|
|
cls := "attribution fixed bottom-0 inset-x-0",
|
|
"Challenge by ",
|
|
a(
|
|
href := "https://www.frontendmentor.io?ref=challenge",
|
|
target := "_blank",
|
|
"Frontend Mentor. "
|
|
),
|
|
"Coded by ",
|
|
a(href := "#", "Your Name Here")
|
|
)
|
|
)
|
|
}
|