Sections

    site "Pricing toggle"
  colors ink #121212, paper #F7F7F4, blue #2B59FF
  fonts "Satoshi", "Cabinet Grotesk"
  style background paper, color ink

state yearly = false
let plans = [
  { name: "Solo", month: 12, text: "One person, every feature." },
  { name: "Team", month: 39, text: "Up to ten people.", featured: true },
  { name: "Scale", month: 99, text: "Unlimited, with a person to call." }
]

style switch
  background white, radius 999, padding 5, gap 4, shadow soft

style seg
  background transparent, color ink, radius 999, padding 10 20, shadow none, size 15
  selected background ink, color white

style plan
  background white, radius 24, padding 30, gap 12, shadow soft
  current background ink, color white, shadow strong
  hover lift 6

page "/"
  section prices, center
    title "Simple prices.", size 64, center, tracking -2
    row switch, attr "role" "tablist"
      button "Monthly", seg, selected (not yearly) -> yearly = false
      button "Yearly  −20%", seg, selected yearly -> yearly = true
    grid 3 columns, gap 18
      for p in plans
        column plan, current (p.featured == true)
          text p.name, weight 700
          row gap 6
            text "€{if yearly then round(p.month * 0.8) else p.month}", font "titles", size 56, weight 800, line-height 1
            text "/ month", opacity 0.6
          text p.text, opacity 0.7
          button "Choose {p.name}", background blue, color white
    ```

    site "Features dark"
  colors night #0B0B0D, lime #C6FF4D, ash #1A1A1F
  fonts "Satoshi", "Clash Display"
  style background night, color white

let features = [
  { n: "01", title: "Instant deploys", text: "Push, and it is live everywhere in four seconds." },
  { n: "02", title: "Edge cache", text: "Pages served from 300 cities, close to everyone." },
  { n: "03", title: "Preview links", text: "Every branch gets its own address to share." },
  { n: "04", title: "Rollbacks", text: "Go back to any version in one click." }
]

style feature
  background ash, radius 20, padding 28, gap 10, border 1 #FFFFFF12
  hover border 1 lime, lift 4
  text color #FFFFFF99

style emphasis
  color lime

page "/"
  section features
    row gap 24
      title "Ship *faster*.\nSleep better.", size 72, tracking -3, line-height 0.95
      text "Everything you need to go from a commit to the world, without a single config file.", size 19, color #FFFFFF99, max-width 380, margin 0 0 0 auto
    grid 2 columns, gap 16
      for f in features
        column feature
          text f.n, font "mono", color lime
          subtitle f.title, size 26
          text f.text
          enters from bottom
    ```

    site "Reviews wall"
  colors ink #1D1630, cream #FFF8F0, grape #6C3BFF, candy #FF4FA3, sun #FFC94D, mint #4DDFA8
  fonts "Satoshi", "Cabinet Grotesk"
  style background cream, color ink

let reviews = [
  { q: "I paid my rent, split dinner and saved for Japan before lunch.", n: "Ana, Lisbon", c: "#6C3BFF", t: "#FFFFFF" },
  { q: "Finally an app my parents understand.", n: "Tom, Bern", c: "#FFC94D", t: "#1D1630" },
  { q: "The design is so good I open it for fun.", n: "Lea, Paris", c: "#4DDFA8", t: "#1D1630" },
  { q: "No fees. Like, really none.", n: "Sam, Berlin", c: "#FF4FA3", t: "#FFFFFF" },
  { q: "Support answered in four minutes. On a Sunday.", n: "Noor, Milan", c: "#FFFFFF", t: "#1D1630" },
  { q: "My savings goal hit 100% and it threw confetti at me.", n: "Kai, Oslo", c: "#1D1630", t: "#FFF8F0" }
]

style review
  radius 24, padding 28, gap 16, shadow soft
  hover tilt -1.5, grow 1.02

style emphasis
  color grape

page "/"
  section reviews
    title "4.9 ★ from *80,000* people", size 56, center, tracking -2
    grid 3 columns, gap 16
      for r in reviews
        column review, background r.c, color r.t
          text "“{r.q}”", size 21, weight 600, line-height 1.3
          text r.n, opacity 0.7, size 14
          enters from bottom
    ```

    site "Questions"
  colors ink #141414, paper #FAFAF7, blue #2B59FF
  fonts "Satoshi", "Cabinet Grotesk"
  style background paper, color ink

let faq = [
  { q: "Is there a free plan?", a: "Yes. Free forever for one person, with every feature." },
  { q: "Can I cancel any time?", a: "In one click, from your settings. You keep your data." },
  { q: "Where is my data stored?", a: "In Switzerland, encrypted, never sold." },
  { q: "Do you offer discounts for schools?", a: "Schools and non-profits get 50% off. Write to us." }
]

page "/"
  section questions
    grid columns 1 1.4, gap 48
      tablet columns 1
      column gap 14
        title "Questions?", size 56, tracking -2
        text "Everything people ask before they start. Something missing?", opacity 0.7
        link "Ask us →" "#", color blue, weight 600
      column gap 0
        for f in faq
          details f.q
            text f.a, opacity 0.75
    ```

    site "Big CTA"
  colors ink #111111, orange #FF5B1F, paper #F4F1EA
  fonts "Satoshi", "Anton"
  style background paper, color ink

style cta
  background orange, color ink, radius 36, padding 64 48, gap 22, center, clip

style mega
  font "titles", size 120, uppercase, line-height 0.85, center

style call
  background ink, color orange, padding 20 40
  hover grow 1.05

page "/"
  section cta-section
    column cta
      text "★ Limited spots for 2027 ★", uppercase, tracking 3, weight 700, size 13
      title "Let us make\nsomething loud", mega
      button "Book a call ↗", large, call
    ```

    site "Contact split"
  colors ink #1A1714, paper #F3EEE6, clay #B04D2C
  fonts "Satoshi", "Gambetta"
  style background paper, color ink

style emphasis
  italic, color clay

style info
  gap 4
  text opacity 0.7

page "/"
  section contact
    grid columns 1 1, gap 64
      tablet columns 1
      column gap 28
        title "Say *hello*.", font "titles", weight 400, size 88, tracking -3
        column info
          text "Studio", uppercase, tracking 3, size 12
          text "Rue du Lac 12, 1800 Vevey"
        column info
          text "Write", uppercase, tracking 3, size 12
          text "hello@atelier.ch"
        column info
          text "Call", uppercase, tracking 3, size 12
          text "+41 21 000 00 00"
      column gap 14
        form -> sent = true
          field name "Your name", required, label "Name"
          field email "you@example.com", type email, required, label "Email"
          textarea message "Tell us about your project", required, label "Project"
          button "Send the message", large, background ink, color paper, radius 0
        if sent
          text "Thank you, we answer within a day.", color clay
    ```