@jxsuite/starters 3.3.2 → 3.5.0

package/sites/portfolio/components/pv-about-split.jxn

@@ -0,0 +1,53 @@
+/- kdl-version 2
+
+pv-about-split {
+    state {
+        image type=string format=image default=""
+        imageAlt ""
+        reverse #false
+    }
+    style display=block padding="clamp(4rem, 10vw, 8rem) clamp(1.5rem, 4vw, 4rem)"
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            display grid
+            gridTemplateColumns "6fr 5fr"
+            gap "clamp(2.5rem, 6vw, 6rem)"
+            alignItems center
+            @--md gridTemplateColumns="1fr" gap="2.5rem"
+        }
+        div {
+            style order="${state.reverse ? '2' : '1'}" position=relative
+            img src="${state.image}" alt="${state.imageAlt}" loading=lazy {
+                style {
+                    width "100%"
+                    aspectRatio "4 / 5"
+                    objectFit cover
+                    display block
+                    filter "grayscale(0.15)"
+                }
+            }
+            span {
+                style {
+                    position absolute
+                    top "1rem"
+                    left "1rem"
+                    right "1rem"
+                    bottom "1rem"
+                    border "1px solid rgba(200, 164, 92, 0.4)"
+                    pointerEvents none
+                }
+            }
+        }
+        div {
+            style {
+                order "${state.reverse ? '1' : '2'}"
+                fontSize "1.1rem"
+                lineHeight "1.85"
+                color "var(--color-text-muted)"
+            }
+            slot
+        }
+    }
+}

package/sites/portfolio/components/pv-category-pill.jxn

@@ -0,0 +1,19 @@
+/- kdl-version 2
+
+pv-category-pill {
+    state label=""
+    style {
+        display inline-block
+        padding "0.4rem 1rem"
+        border "1px solid var(--color-line)"
+        borderRadius "999px"
+        fontSize "0.68rem"
+        fontWeight "600"
+        letterSpacing "0.16em"
+        textTransform uppercase
+        color "var(--color-text-muted)"
+        transition "border-color 0.15s, color 0.15s"
+        :hover borderColor="var(--color-primary)" color="var(--color-primary)"
+    }
+    span "${state.label}"
+}

package/sites/portfolio/components/pv-contact-form.jxn

@@ -0,0 +1,72 @@
+/- kdl-version 2
+
+pv-contact-form {
+    state heading="Project inquiry"
+    style display=block {
+        "& input" {
+            width "100%"
+            padding "0.85rem 1rem"
+            border "1px solid var(--color-line)"
+            backgroundColor "var(--color-bg-elev)"
+            color "var(--color-text-primary)"
+            borderRadius "0"
+            fontSize "1rem"
+            fontFamily inherit
+            outline none
+        }
+        "& input:focus" borderColor="var(--color-primary)"
+        "& textarea:focus" borderColor="var(--color-primary)"
+    }
+    h3 "${state.heading}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "1.9rem"
+            fontWeight "500"
+            margin "0 0 1.5rem"
+            color "var(--color-text-primary)"
+        }
+    }
+    form action="#" method=post {
+        style display=grid gap="1rem" alignContent=start
+        input type=text name=name placeholder="Your name" required="true" aria-label="Your name"
+        input type=email name=email placeholder="Email address" required="true" aria-label="Email address"
+        div {
+            style display=grid gridTemplateColumns="1fr 1fr" gap="1rem"
+            input type=text name=type placeholder="Type of project" aria-label="Type of project"
+            input type=date name=date aria-label="Preferred date"
+        }
+        textarea name=notes rows="4" placeholder="Tell us about the shoot…" aria-label="Project details" {
+            style {
+                width "100%"
+                padding "0.85rem 1rem"
+                border "1px solid var(--color-line)"
+                backgroundColor "var(--color-bg-elev)"
+                color "var(--color-text-primary)"
+                borderRadius "0"
+                fontSize "1rem"
+                fontFamily inherit
+                outline none
+            }
+        }
+        button type=submit "Send Inquiry →" {
+            style {
+                backgroundColor "var(--color-primary)"
+                color "var(--color-bg)"
+                padding "0.9rem 1.75rem"
+                border none
+                borderRadius "0"
+                fontSize "0.8rem"
+                fontWeight "700"
+                letterSpacing "0.14em"
+                textTransform uppercase
+                cursor pointer
+                justifySelf start
+                transition "background-color 0.15s"
+                :hover backgroundColor="var(--color-primary-hover)"
+            }
+        }
+        p "Demo form — wire it to your booking provider or email in pages/contact.md." {
+            style fontSize="0.85rem" color="var(--color-text-muted)" margin="0"
+        }
+    }
+}

package/sites/portfolio/components/pv-cta.jxn

@@ -0,0 +1,62 @@
+/- kdl-version 2
+
+pv-cta {
+    state heading="" text="" cta="Start a Project" ctaHref="/contact/"
+    style {
+        display block
+        backgroundColor "var(--color-bg-elev)"
+        borderTop "1px solid var(--color-line)"
+        color "var(--color-text-white)"
+        padding "clamp(5rem, 12vw, 9rem) 1.5rem"
+        textAlign center
+    }
+    div {
+        style maxWidth="760px" margin="0 auto"
+        p "Commissions open" {
+            style {
+                textTransform uppercase
+                letterSpacing "0.28em"
+                fontSize "0.7rem"
+                fontWeight "500"
+                color "var(--color-primary)"
+                margin "0 0 1.5rem"
+            }
+        }
+        h2 "${state.heading}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "clamp(2.5rem, 6vw, 4.5rem)"
+                fontWeight "400"
+                lineHeight "1.04"
+                letterSpacing "-0.01em"
+                margin "0 0 1.5rem"
+            }
+        }
+        p "${state.text}" {
+            style {
+                fontSize "1.15rem"
+                lineHeight "1.75"
+                color "var(--color-text-muted)"
+                margin "0 auto 2.5rem"
+                maxWidth "48ch"
+            }
+        }
+        a href="${state.ctaHref}" "${state.cta} →" {
+            style {
+                display inline-flex
+                alignItems center
+                gap "0.7rem"
+                color "var(--color-text-white)"
+                fontSize "0.8rem"
+                fontWeight "600"
+                textTransform uppercase
+                letterSpacing "0.2em"
+                textDecoration none
+                borderBottom "1px solid var(--color-primary)"
+                paddingBottom "0.5rem"
+                transition "gap 0.2s, color 0.15s"
+                :hover gap="1.2rem" color="var(--color-primary)"
+            }
+        }
+    }
+}

package/sites/portfolio/components/pv-feature.jxn

@@ -0,0 +1,28 @@
+/- kdl-version 2
+
+pv-feature {
+    state number="" title="" text=""
+    style display=block paddingTop="1.75rem" borderTop="2px solid var(--color-ink)"
+    div "${state.number}" {
+        style {
+            display "${state.number ? 'block' : 'none'}"
+            fontFamily "var(--font-heading)"
+            fontSize "1.4rem"
+            fontWeight "600"
+            color "var(--color-primary)"
+            marginBottom "0.75rem"
+            lineHeight "1"
+        }
+    }
+    h3 "${state.title}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "1.4rem"
+            fontWeight "600"
+            margin "0 0 0.5rem"
+        }
+    }
+    p "${state.text}" {
+        style margin="0" color="var(--color-text-muted)" fontSize="1rem" lineHeight="1.7"
+    }
+}

package/sites/portfolio/components/pv-footer.jxn

@@ -0,0 +1,113 @@
+/- kdl-version 2
+
+pv-footer {
+    state {
+        brand "Aperture Studio"
+        tagline "Available light, unhurried days, prints worth keeping."
+        email hello@aperturestudio.example
+        phone "(555) 204-7788"
+    }
+    style {
+        display block
+        backgroundColor "var(--color-bg)"
+        borderTop "1px solid var(--color-line)"
+        padding "clamp(3.5rem, 8vw, 5.5rem) clamp(1.5rem, 4vw, 4rem) 2.5rem"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            display flex
+            alignItems flex-end
+            justifyContent space-between
+            gap "2.5rem"
+            flexWrap wrap
+        }
+        div {
+            div "${state.brand}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontWeight "400"
+                    fontSize "clamp(2.4rem, 6vw, 4rem)"
+                    lineHeight "1"
+                    letterSpacing "-0.01em"
+                    margin "0 0 0.75rem"
+                    color "var(--color-text-primary)"
+                }
+            }
+            p "${state.tagline}" {
+                style {
+                    margin "0"
+                    fontFamily "var(--font-heading)"
+                    fontStyle italic
+                    fontSize "1.15rem"
+                    color "var(--color-text-muted)"
+                }
+            }
+        }
+        div {
+            style display=flex flexDirection=column gap="0.6rem" textAlign=right {
+                @--sm textAlign=left
+            }
+            a href="mailto:${state.email}" "${state.email}" {
+                style {
+                    color "var(--color-text-primary)"
+                    textDecoration none
+                    fontSize "0.82rem"
+                    letterSpacing "0.04em"
+                    transition "color 0.15s"
+                    :hover color="var(--color-primary)"
+                }
+            }
+            span "${state.phone}" {
+                style color="var(--color-text-muted)" fontSize="0.82rem" letterSpacing="0.04em"
+            }
+            nav {
+                style {
+                    display flex
+                    gap "1.5rem"
+                    justifyContent flex-end
+                    marginTop "0.5rem"
+                    fontSize "0.68rem"
+                    fontWeight "600"
+                    textTransform uppercase
+                    letterSpacing "0.18em"
+                    @--sm justifyContent=flex-start
+                }
+                a href="/work/" Work {
+                    style color="var(--color-text-muted)" textDecoration=none {
+                        :hover color="var(--color-primary)"
+                    }
+                }
+                a href="/about/" About {
+                    style color="var(--color-text-muted)" textDecoration=none {
+                        :hover color="var(--color-primary)"
+                    }
+                }
+                a href="/contact/" Contact {
+                    style color="var(--color-text-muted)" textDecoration=none {
+                        :hover color="var(--color-primary)"
+                    }
+                }
+            }
+        }
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "clamp(3rem, 6vw, 4.5rem) auto 0"
+            paddingTop "1.5rem"
+            borderTop "1px solid var(--color-line)"
+            display flex
+            justifyContent space-between
+            gap "1rem"
+            flexWrap wrap
+            fontSize "0.72rem"
+            letterSpacing "0.1em"
+            textTransform uppercase
+            color "var(--color-text-muted)"
+        }
+        span "© Aperture Studio"
+        span "Built with Jx"
+    }
+}

package/sites/portfolio/components/pv-gallery.jxn

@@ -0,0 +1,40 @@
+/- kdl-version 2
+
+pv-gallery {
+    state {
+        img1 type=string format=image default=""
+        img2 type=string format=image default=""
+        img3 type=string format=image default=""
+        alt "Photograph from the studio"
+    }
+    style display=grid gridTemplateColumns="repeat(3, 1fr)" gap="1rem" {
+        @--sm gridTemplateColumns="1fr"
+    }
+    img src="${state.img1}" alt="${state.alt}" loading=lazy {
+        style {
+            width "100%"
+            aspectRatio "4 / 5"
+            objectFit cover
+            borderRadius "var(--radius)"
+            display block
+        }
+    }
+    img src="${state.img2}" alt="${state.alt}" loading=lazy {
+        style {
+            width "100%"
+            aspectRatio "4 / 5"
+            objectFit cover
+            borderRadius "var(--radius)"
+            display block
+        }
+    }
+    img src="${state.img3}" alt="${state.alt}" loading=lazy {
+        style {
+            width "100%"
+            aspectRatio "4 / 5"
+            objectFit cover
+            borderRadius "var(--radius)"
+            display block
+        }
+    }
+}

package/sites/portfolio/components/pv-hero.jxn

@@ -0,0 +1,109 @@
+/- kdl-version 2
+
+pv-hero {
+    state {
+        eyebrow ""
+        heading ""
+        subheading ""
+        cta "View the Work"
+        ctaHref "/work/"
+        cta2 ""
+        cta2Href "/contact/"
+        bg type=string format=image default=""
+    }
+    style {
+        display block
+        position relative
+        height "100vh"
+        minHeight "620px"
+        color "var(--color-text-white)"
+        backgroundColor "var(--color-bg)"
+        backgroundImage "url('${state.bg}')"
+        backgroundSize cover
+        backgroundPosition center
+    }
+    div {
+        style {
+            position absolute
+            inset "0"
+            background "linear-gradient(180deg, rgba(12,12,13,0.6) 0%, rgba(12,12,13,0.1) 26%, rgba(12,12,13,0.3) 62%, rgba(12,12,13,0.92) 100%)"
+        }
+    }
+    div {
+        style {
+            position relative
+            zIndex "10"
+            display flex
+            flexDirection column
+            justifyContent flex-end
+            height "100%"
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "0 clamp(1.5rem, 4vw, 4rem) clamp(3rem, 7vw, 5.5rem)"
+        }
+        div {
+            style display=flex alignItems=center gap="1rem" marginBottom="1.5rem"
+            span {
+                style width="3rem" height="1px" backgroundColor="var(--color-primary)"
+            }
+            p "${state.eyebrow}" {
+                style {
+                    margin "0"
+                    textTransform uppercase
+                    letterSpacing "0.28em"
+                    fontSize "0.72rem"
+                    fontWeight "500"
+                    color "var(--color-primary)"
+                }
+            }
+        }
+        h1 "${state.heading}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontWeight "400"
+                fontSize "clamp(3rem, 8.5vw, 7rem)"
+                lineHeight "0.98"
+                letterSpacing "-0.01em"
+                margin "0 0 1.5rem"
+                maxWidth "16ch"
+            }
+        }
+        div {
+            style {
+                display flex
+                alignItems flex-end
+                justifyContent space-between
+                gap "2rem"
+                flexWrap wrap
+            }
+            p "${state.subheading}" {
+                style {
+                    margin "0"
+                    fontSize "clamp(1rem, 1.6vw, 1.2rem)"
+                    lineHeight "1.6"
+                    color "var(--color-text-white)"
+                    opacity "0.82"
+                    maxWidth "44ch"
+                }
+            }
+            a href="${state.ctaHref}" "${state.cta} →" {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.6rem"
+                    whiteSpace nowrap
+                    fontSize "0.78rem"
+                    fontWeight "600"
+                    textTransform uppercase
+                    letterSpacing "0.18em"
+                    color "var(--color-text-white)"
+                    textDecoration none
+                    borderBottom "1px solid var(--color-primary)"
+                    paddingBottom "0.5rem"
+                    transition "gap 0.2s, color 0.15s"
+                    :hover gap="1.1rem" color="var(--color-primary)"
+                }
+            }
+        }
+    }
+}

package/sites/portfolio/components/pv-nav.jxn

@@ -0,0 +1,76 @@
+/- kdl-version 2
+
+pv-nav {
+    state brand=Aperture
+    style {
+        position fixed
+        top "0"
+        left "0"
+        right "0"
+        zIndex "50"
+        display block
+        backgroundColor "rgba(12, 12, 13, 0.55)"
+        backdropFilter "blur(14px)"
+        borderBottom "1px solid rgba(255, 255, 255, 0.08)"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "1.1rem 2rem"
+            display flex
+            alignItems center
+            justifyContent space-between
+            gap "1.5rem"
+            @--sm padding="0.9rem 1.25rem"
+        }
+        a href="/" "${state.brand}" {
+            style {
+                fontFamily "var(--font-label)"
+                fontWeight "400"
+                fontSize "0.95rem"
+                letterSpacing "0.42em"
+                textTransform uppercase
+                color "var(--color-text-primary)"
+                textDecoration none
+                paddingLeft "0.42em"
+            }
+        }
+        nav {
+            style {
+                display flex
+                alignItems center
+                gap "2.25rem"
+                fontSize "0.7rem"
+                fontWeight "500"
+                letterSpacing "0.2em"
+                textTransform uppercase
+                @--sm gap="1.25rem"
+            }
+            a href="/work/" Work {
+                style {
+                    color "var(--color-text-primary)"
+                    textDecoration none
+                    opacity "0.85"
+                    transition "opacity 0.15s, color 0.15s"
+                    :hover color="var(--color-primary)" opacity="1"
+                }
+            }
+            a href="/about/" About {
+                style {
+                    color "var(--color-text-primary)"
+                    textDecoration none
+                    opacity "0.85"
+                    transition "opacity 0.15s, color 0.15s"
+                    @--sm display=none
+                    :hover color="var(--color-primary)" opacity="1"
+                }
+            }
+            a href="/contact/" Inquire {
+                style color="var(--color-primary)" textDecoration=none transition="opacity 0.15s" {
+                    :hover opacity="0.7"
+                }
+            }
+        }
+    }
+}