main.py

from fasthtml.common import *
from home_components import *
from content import *

_blank = dict(target="_blank", rel="noopener noreferrer")
description = 'Modern web applications in pure Python'

def benefit(title, content):
    return Div(
        H3(title, cls=f"text-black heading-3"),
        P(content, cls=f"l-body mt-6 lg:mt-6"),
        cls="w-full p-6 bg-soft-yellow rounded-2xl xl:p-12 lg:h-[22rem] lg:w-[26rem]")

def faq_item(question, answer, id):
    return accordion(
        id=id, question=question, answer=answer,
        question_cls="text-black s-body",
        answer_cls="s-body text-black/80 col-span-full",
        container_cls=f"{col} justify-between bg-soft-blue rounded-[1.25rem] {bnset}"
    )

def hero_section():
    return (
    Header(
        Nav(
            A(
                Img(src='/assets/logo.svg', alt='FastHTML', width='105', height='24'),
                href='#'),
            A('Read docs', href='/docs', **_blank,
              cls=f'bg-black text-white py-2 px-4 s-body rounded-[62.5rem] hover:bg-black/80 transition-colors duration-300 px-4 py-1 h-10 {center} justify-center'),
            cls=f'py-2 px-4 {between} items-center rounded-full w-full max-w-[400px] bg-white/50 backdrop-blur-lg border border-white/20'),
        cls=f'fixed top-0 w-full left-0 p-4 {center} justify-center z-50'),
    Section(
        Div(
            File('assets/hero-shapes.svg'),
            cls='absolute z-0 lg:-top-[15%] top-0 left-1/2 -translate-x-1/2 grid grid-cols-1 grid-rows-1 w-[120%] aspect-square max-w-[2048px] min-w-[900px]'),
        Div(
            Div(cls='lg:flex-1 max-lg:basis-[152px]'),
            Div(
                H1(description, cls='heading-1 max-w-3xl'),
                P('Built on solid web foundations, not the latest fads - with\nFastHTML you can get started on anything from simple dashboards to\nscalable web applications in minutes.',
                    cls='m-body max-w-[40rem] text-center'),
                cls=f'flex-1 {col} items-center justify-center gap-6 text-center w-full text-black'
            ),
            Div(
                A('Learn more', href='https://fastht.ml/about', **_blank,
                    cls=f'{bnset} m-body px-4 py-1 rounded-full bg-black hover:bg-black/80 transition-colors duration-300 text-white h-[76px] w-full max-w-[350px] flex items-center justify-center'),
                video_button('Watch intro', '/assets/thumb.png', '7min 30sec', "QqZUzkPcU7A?si=lTtHuMT5HPC66-49"),
                cls=f'flex-1 {center} justify-center content-center flex-wrap lg:gap-6 gap-4 m-body'),
                video_player('Try now'),
            cls=f'{col} flex-1 relative px-4 lg:px-16'),
        cls=f'{col} relative w-full h-screen max-h-[1024px] min-h-[720px] overflow-hidden bg-grey')
    )

def code_display(file_name, code_snippet, snippet_id):
    return Div(
        Div(
            Div(
                P(file_name, cls=f"xs-mono-body {center}"),
                Button(
                    Div(
                        Img(cls="button-content w-4 h-4", src="assets/icons/copy-icon.svg", alt="Copy"),
                        Span("Copied!", cls=f"absolute bg-inherit rounded-l-[0.5rem] {center} py-2 h-full right-0 copied-text overflow-hidden w-0 peer-clicked:w-fit s-body text-white/80 transition-transform transition-all duration-600 ease-out"),
                        cls=f"relative bg-black/20 rounded-[0.5rem] {center} p-2 h-8 w-fit"),
                    cls="copy-button"),
                cls=f"w-full {between}"),
            cls="bg-black/20 text-white/80 w-full max-w-2xl lg:max-w-xl p-4 rounded-2xl"),
        Pre(
            Code(code_snippet, cls="python w-full mono-body"),
            id=snippet_id,
            cls="code-snippet relative max-h-[25rem] overflow-hidden hide-scrollbar"),
        Div(cls="absolute code-fade-out bottom-0 left-0 right-0 h-16 bg-gradient-to-b from-transparent to-[#3a2234] pointer-events-none"),
        cls=f"relative {col} gap-6 lg:max-w-[45rem] w-full overflow-hidden"
    )

def code_demo(title, file_name, code_snippet, demo_content, is_active=False):
    snippet_id = f"{title.lower().replace(' ', '-')}-code-snippet"
    demo_cls = f"{center} my-11 p-4 flex-none whitespace-normal justify-center h-96 rounded-3xl bg-soft-purple lg:p-8 w-full max-w-2xl lg:max-w-md lg:mx-28 lg:my-8 overflow-y-auto {'lg:items-start hide-scrollbar' if snippet_id == 'reusable-code-snippet' else ''}"
    return Div(
        code_display(file_name, code_snippet, snippet_id),
        Div(demo_content, cls=demo_cls),
        aria_labelledby=f"tab-{title.lower().replace(' ', '-')}", role="tabpanel",
        cls=f"code-container pt-8 lg:pt-16 tab-panel relative hide-scrollbar toggle-element {col} lg:flex-row lg:justify-between overflow-hidden w-full lg:max-w-[1440px] xl:mx-auto {'hidden' if not is_active else ''}",
        id=f"{title.lower().replace(' ', '-')}-code-demo")

def tab_button(title, is_active=False):
    classes = f"z-10 button-container flex-none relative px-8 py-2 w-[10.59375rem] h-11 rounded-full {center}"
    active = f"{classes} current active transition-all duration-300 text-white"
    inactive = f"{classes} text-white/80 hover:text-white"
    return Li(
        Button(
            Div(title, cls="m-body w-max mx-auto"),
            id=f"tab-{title.lower().replace(' ', '-')}",
            cls="toggle-button w-full cursor-pointer",
            data_target=f"{title.lower().replace(' ', '-')}-code-demo",
            tabindex="-1" if not is_active else None,
            name=f"tab-{title.lower().replace(' ', '-')}"),
        role="tab", aria_selected="true" if is_active else "false",
        cls=active if is_active else inactive)

async def component_preview_section():
    cs = await components()
    return Section(
        Div(
        Div(
            H2("This home page is a FastHTML app.", cls="text-white heading-2 pt-8"),
            P("Click the buttons below to see four small, live components in action.", cls=f"text-white pt-8 l-body {maxrem(32)}"),
            cls=f"{maxrem(50)} mx-auto {col} {center} text-center gap-6"
        ),
        *[code_demo(title, file_name, code_snippet, demo_content, i == 0) for i, (title, file_name, code_snippet, demo_content) in enumerate(cs)],
        Ul(
            *[tab_button(title, i == 0) for i, (title, _, _, _) in enumerate(cs)],
            Div(id="highlighter", cls=f"{inset} z-0 highlighter w-[10.59375rem] absolute bg-white/20 h-[2.75rem] rounded-[62.5rem] transition-transform duration-300"),
            role="tablist", id="tab-list",
            cls=f"relative mt-12 text-white/80 flex-none rounded-[62.5rem] bg-black/20 p-2 max-w-full overflow-x-auto lg:mx-auto {center} hide-scrollbar lg:max-w-[43.375rem]"),
            cls=f"{col} {center}"),
        cls="relative bg-purple px-4 lg:px-16 pb-24 -mt-8 lg:-mt-10 flex-col xl:items-center items-start gap-6 lg:gap-16 rounded-t-3xl lg:rounded-t-[2.5rem] overflow-x-hidden")

def stacked_cards_section():
    return Section(
        Div(
            Div(
                Div(
                    P("TECH STACK", cls="mono-body text-opacity-60"),
                    H2("FastHTML scales up and scales down.", cls="text-black heading-2"),
                    P("Read more about our ", 
                        A("design philosophy here", href="https://fastht.ml/about/vision", **_blank,
                          cls="border-b-2 border-b-black/30 hover:border-b-black/80"),
                        ", or click a button below:",
                        cls=f"l-body {maxrem(32)}"),
                    cls=f"{maxrem(50)} mx-auto {col} {center} text-center gap-6"),
                cls="py-8 lg:pt-16 px-4 lg:px-16 rounded-t-3xl lg:rounded-t-[2.5rem] bg-green"),
            cls="bg-yellow sticky top-0 bottom-[calc(100%-300px)] w-full"),
        Div(
            Div(
                *[stacked_card(title, description, tech_stack, "bg-soft-green") for title, description, tech_stack in stacked],
                id="stacked-cards", cls=f"{maxrem(50)} mx-auto"),
            cls="px-4 lg:px-16 w-full bg-green pt-8"),
        id="stacked-cards-section", cls="relative")

def samples_section():
    text = "FastHTML can be used for everything from collaborative games to multi-modal UI. We've selected small self-contained examples for you to learn from."
    return section_wrapper(
            (section_header("SAMPLES", "See FastHTML in action", text, max_width=40),
            Div(
                *[Div(
                    A(
                        File(f"assets/{svg}"),
                        Div(
                            P(name, cls="border-b-2 border-b-black/30 hover:border-b-black/80 regular-body"),
                            Img(src=f"{icons}/arrow-up-right.svg", alt="Arrow right icon", cls="group-hover:translate-y-[-0.1rem] transition-all ease-in-out duration-300"),
                            cls=f"{gap2} transition-transform transform relative items-center mt-4 lg:mt-6"),
                        href=url, cls=f"{col} items-center"),
                    cls="group px-2"
                ) for name, svg, url in samples],
                cls="grid max-w-5xl lg:grid-cols-4 lg:max-w-7xl lg:gap-x-12 grid-cols-2 gap-x-4 gap-y-8 w-full mx-auto"),
            A("Discover all", href=eg_url,
                cls=f"{bnset} bg-black text-white py-2 px-4 s-body rounded-full hover:bg-black/70 transition-colors duration-300")),
        bg_color="grey")

def how_it_works_section():
    msg = "With FastHTML you create good-looking modern web applications in pure Python and deploy them in minutes."
    return section_wrapper(
        (Div(
            section_header( "GET STARTED IN MINUTES", "The fastest way to create a real web application.", msg),
            cls="max-w-3xl w-full mx-auto flex-col items-center text-center gap-6 mb-8 lg:mb-8"),
            Div(*[benefit(title, content) for title, content in benefits],
                cls=f"{col} w-full lg:flex-row gap-4 items-center lg:gap-8 max-w-7xl mx-auto justify-center"),),
        bg_color="yellow", flex=False)

def faq_section():
    return section_wrapper(
        Div(
            section_header( "FAQ", "Questions? Answers.", "Your top FastHTML questions clarified.",
                max_width=21, center=False),
            Div(
                *[faq_item(question, answer, i+3) for i, (question, answer) in enumerate(faqs)],
                cls=f"{col} gap-4 {maxrem(32)} transition ease-out delay-[300ms]"),
            cls=f"{section_base} w-full mx-auto lg:flex-row items-start max-w-7xl"),
        bg_color="blue")

def testimonials_section():
    testimonial_cards = [testimonial_card(i, *args) for i, args in enumerate(testimonials)]
    return section_wrapper(
        Div(
            section_header(
                "LOVE IS IN THE AIR", "What the experts say",
                "Top web programmers tell us that they love working with FastHTML.",
                max_width=21, center=False),
            carousel(testimonial_cards),
            cls=f"{section_base} {maxrem(90)} mx-auto lg:flex-row items-start"),
        bg_color="pink")

def footer_link(text, href, **kw):
    return Li(A(
        Span(text, cls="border-b border-b-transparent border-b-white/50"),
        Img(src=f"{icons}/arrow-up-right-white.svg", alt="Arrow right icon", width="16", height="16", cls="w-4 h-4"),
        href=href, cls=f"{gap2} items-center hover:text-white border-b border-b-transparent hover:border-b-white", **kw))

def footer():
    return Section(
        Div(
            Div(
                P("© 2024 onwards AnswerDotAI. All rights reserved.", cls="mr-auto"),
                Nav(
                    Ul(
                    footer_link("Github", "https://github.com/AnswerDotAI/fasthtml", **_blank),
                    footer_link("Join Discord", "https://discord.gg/qcXvcxMhdP", **_blank),
                    footer_link("Docs", "/docs", **_blank),
                    footer_link("Site design", "https://tinloof.com/", **_blank),
                    cls="flex max-lg:flex-col max-lg:items-start gap-4 lg:gap-6 flex-wrap")),
                cls="relative z-[1] mono-s flex max-lg:flex-col gap-6 text-white/80 px-4 lg:px-16 pb-16"),
            Div(
                Div(
                    File("assets/footer-shapes.svg"),
                    cls=f"absolute z-0 lg:-top-[15%] top-0 left-1/2 -translate-x-1/2 grid grid-cols-1 grid-rows-1 lg:w-[150%] w-[200%] aspect-square max-w-none min-w-max"),
                File("assets/footer-path.svg"),
                cls=f"relative z-0 w-full px-4 lg:px-16 pb-1 {col} flex-1 justify-end"),
            cls=f"relative w-full h-[420px] lg:h-[600px] {col} pt-8 lg:pt-12 rounded-t-3xl lg:rounded-t-[2.5rem] bg-black overflow-hidden -mt-8 lg:-mt-10"))

hdrs = [
    Meta(charset='UTF-8'),
    Meta(name='viewport', content='width=device-width, initial-scale=1.0, maximum-scale=1.0'),
    Meta(name='description', content=description),
    *Favicon('favicon.ico', 'favicon-dark.ico'),
    *Socials(title='FastHTML',
        description=description,
        site_name='fastht.ml',
        twitter_site='@answerdotai',
        image=f'/assets/og-sq.png',
        url=''),
    # surrsrc,
    Script(src='https://cdn.jsdelivr.net/gh/gnat/surreal@main/surreal.js'),
    scopesrc,
    Link(href='css/main.css', rel='stylesheet'),
    Link(href='css/tailwind.css', rel='stylesheet'),
    Link(href='css/stack.css', rel='stylesheet'),
    Link(href='css/preview-stack.css', rel='stylesheet'),
    Link(href='css/highlighter-theme.css', rel='stylesheet')]

from about.main import app as about_app
routes = [Mount(f"/about", about_app),
          Mount('/docs', StaticFiles(directory='docs', html=True)),
          ]

bodykw = {"class": "relative bg-black font-geist text-black/80 font-details-off"}
app,rt = fast_app(hdrs=hdrs, default_hdrs=False, bodykw=bodykw, on_startup=[startup], routes=routes)


scripts = (
    Script(src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'),
    Script(src='https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js'),
    # Script(src='js/videoPopup.js'),
    Script(src='js/pythonHighlighter.js'),
    Script(src='js/carouselScroll.js'),
    Script(src='js/stack.js'),
    Script(src='js/togglePreview.js'),
    Script(src='js/codeOverflow.js'),
    Script(src='js/copyCode.js'),
    )

from fastcore.xtras import timed_cache

@timed_cache(seconds=60)
async def home():
    return (Title(f"FastHTML - {description}"),
        Main(
            hero_section(),
            await component_preview_section(),
            how_it_works_section(),
            stacked_cards_section(),
            samples_section(),
            faq_section(),
            testimonials_section(),
            footer()),
        *scripts)

@rt("/")
async def get(): return await home()

serve()