"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", div: "div", h2: "h2", h3: "h3", img: "img", li: "li", ol: "ol", p: "p", path: "path", pre: "pre", span: "span", strong: "strong", svg: "svg", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "In Flowershow you can blend markdown content with JSX blocks and style them with Tailwind classes. This allows you to start with simple, readable markdown draft and progressively enhance it with elegant components without losing the simplicity of your content workflow." }), "\n", _jsx(_components.p, { children: "In this tutorial, we'll walk through the complete process of transforming a simple markdown section with a list of product features into a grid of styled cards. As an example we'll use a draft of a landing page for a dummy tech product - 404Shield." }), "\n", _jsx(_components.p, { children: "We'll cover this transformation in five steps:" }), "\n", _jsxs(_components.ol, { start: "0", children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Start with markdown" }), " - Clean, simple content and page structure draft in markdown"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Create a basic card" }), " - Convert one feature to JSX block"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Add Tailwind styling" }), " - Make it look nice with Tailwind"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Create a grid of features" }), " - Scale to multiple features"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Add icons" }), " - Enhance visual appeal with Material Design icons"] }), "\n"] }), "\n", _jsx(_components.p, { children: "Let's dive in!" }), "\n", _jsxs(_components.h2, { id: "step-0-start-with-pure-markdown", children: [_jsx(_components.a, { className: "heading-link", href: "#step-0-start-with-pure-markdown", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Step 0: Start with Pure Markdown"] }), "\n", _jsx(_components.p, { children: "Here's our original markdown section:" }), "\n", _jsx(_components.pre, { className: "language-markdown", children: _jsxs(_components.code, { className: "language-markdown code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token title important", children: [_jsx(_components.span, { className: "token punctuation", children: "##" }), " Why 404Shield?"] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token title important", children: [_jsx(_components.span, { className: "token punctuation", children: "###" }), " Instant Error Eradication"] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "Our script intercepts 404 errors before they ever reach your visitors.\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token url", children: ["[", _jsx(_components.span, { className: "token content", children: "Learn more ➝" }), "](", _jsx(_components.span, { className: "token url", children: "https:://404shield.com/docs" }), ")"] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token title important", children: [_jsx(_components.span, { className: "token punctuation", children: "###" }), " Redirect to Random Meme"] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "Because if you can’t find the page, at least make them laugh.\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token url", children: ["[", _jsx(_components.span, { className: "token content", children: "Learn more ➝" }), "](", _jsx(_components.span, { className: "token url", children: "https:://404shield.com/docs" }), ")"] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token title important", children: [_jsx(_components.span, { className: "token punctuation", children: "###" }), " Smart Redirects"] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "Guess the intended page using our AI (Actually Imaginary) engine.\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token url", children: ["[", _jsx(_components.span, { className: "token content", children: "Learn more ➝" }), "](", _jsx(_components.span, { className: "token url", children: "https:://404shield.com/docs" }), ")"] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token title important", children: [_jsx(_components.span, { className: "token punctuation", children: "###" }), " Eternal Uptime"] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "If every page exists, then none are ever missing. Think about it.\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token url", children: ["[", _jsx(_components.span, { className: "token content", children: "Learn more ➝" }), "](", _jsx(_components.span, { className: "token url", children: "https:://404shield.com/docs" }), ")"] }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "And currently it renders like this in Flowershow:" }), "\n", _jsx(_components.img, { src: "https://flowershow.app/assets/Pasted%20image%2020250527145145.png", alt: "Pasted image 20250527145145", className: "internal" }), "\n", _jsx(_components.p, { children: "This is clean, readable, and perfectly functional. But we can make it much more engaging with some custom styling and layout." }), "\n", _jsxs(_components.h2, { id: "step-1-create-a-basic-card", children: [_jsx(_components.a, { className: "heading-link", href: "#step-1-create-a-basic-card", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Step 1: Create a Basic Card"] }), "\n", _jsx(_components.p, { children: "Let's start by converting just one feature into a basic JSX card with no styling. We'll take the first feature and wrap it in a simple card structure:" }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h3"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Instant Error Eradication" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "p"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Our script intercepts 404 errors before they ever reach your visitors." }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "a"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "href" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "https:://404shield.com/docs", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Learn more →" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "This gives us the foundation to work with. The content is the same, but now we have the flexibility to style it. If you now sync your site and preview it, you'll notice no (or almost no) changes, as we have perfectly mirrored how Flowershow renders this piece of markdown as HTML anyway." }), "\n", _jsxs(_components.h2, { id: "step-2-style-it-with-tailwind", children: [_jsx(_components.a, { className: "heading-link", href: "#step-2-style-it-with-tailwind", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Step 2: Style it with Tailwind"] }), "\n", _jsx(_components.p, { children: "Now let's make our card look nicer with some Tailwind CSS classes:" }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "not-prose flex cursor-default flex-col space-y-4 rounded-lg border border-gray-200 p-10 transition-all duration-150 hover:border-orange-400", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h3"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "font-semibold", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Instant Error Eradication" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "p"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "flex-grow", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Our script intercepts 404 errors before they ever reach your visitors." }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "a"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "href" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "https:://404shield.com/docs", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "font-semi-bold self-start text-sm text-orange-600", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Learn more →" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Here is the result:" }), "\n", _jsx(_components.img, { src: "https://flowershow.app/assets/Pasted%20image%2020250605144012.png", alt: "Pasted image 20250605144012", className: "internal" }), "\n", _jsx(_components.p, { children: "Here is a description of some of the classes used above:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "not-prose" }), " - Disables default Tailwind typography styling (more explanation in the callout below) _ ⚠️Important_"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "flex flex-col" }), " - Creates a vertical flex layout"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "cursor-default" }), " - Sets the cursor to default arrow (prevents text selection cursor)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "space-y-4" }), " - Adds vertical spacing between child elements"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "rounded-lg" }), " - Adds rounded corners to the card"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "border border-gray-200" }), " - Adds a light gray border around the card"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "transition-all duration-150" }), " - Enables smooth transitions for all properties over 150ms"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "hover:border-orange-400" }), " - Changes border color to orange on hover"] }), "\n"] }), "\n", _jsxs(_components.div, { "data-callout": true, "data-callout-type": "hint", children: ["\n", _jsx(_components.div, { "data-callout-title": true, children: "Supported classes" }), "\n", _jsxs(_components.div, { "data-callout-body": true, children: ["\n", _jsxs(_components.p, { children: ["Flowershow supports ", _jsx(_components.strong, { children: "Tailwind CSS 3" }), " so you can look up style classes in their ", _jsx(_components.a, { href: "https://v3.tailwindcss.com/docs", target: "_blank", rel: "noopener noreferrer", children: "documentation" }), "."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.div, { "data-callout": true, "data-callout-type": "tip", children: ["\n", _jsx(_components.div, { "data-callout-title": true, children: "Tailwind Playground" }), "\n", _jsxs(_components.div, { "data-callout-body": true, children: ["\n", _jsxs(_components.p, { children: ["To make component development easier, you can use ", _jsx(_components.a, { href: "https://play.tailwindcss.com/", target: "_blank", rel: "noopener noreferrer", children: "Tailwind Play" }), " - an online playground for quickly prototyping and testing your Tailwind-styled components. Note that the playground uses HTML syntax, so when copying your final version to Flowershow, you'll need to convert HTML ", _jsx(_components.code, { className: "language-auto", children: "class" }), " attributes to ", _jsx(_components.code, { className: "language-auto", children: "className" }), " for JSX compatibility."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Pro tip" }), ": When you're happy with your component in the playground, use ctrl+f to find all ", _jsx(_components.code, { className: "language-auto", children: "class" }), " attributes, then click the ", _jsx(_components.code, { className: "language-auto", children: ">" }), " button to open the replacement panel and quickly replace them with ", _jsx(_components.code, { className: "language-auto", children: "className" }), " before copying the code to your markdown file."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.div, { "data-callout": true, "data-callout-type": "info", children: ["\n", _jsxs(_components.div, { "data-callout-title": true, children: ["Why ", _jsx(_components.code, { className: "language-auto", children: "not-prose" }), " is needed"] }), "\n", _jsxs(_components.div, { "data-callout-body": true, children: ["\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { className: "language-auto", children: "not-prose" }), " class is crucial when creating custom JSX components in Flowershow. By default, Flowershow applies Tailwind's typography plugin styles (prose classes) to all markdown content, which includes automatic styling for headings, paragraphs, links, and other elements."] }), "\n", _jsxs(_components.p, { children: ["Without ", _jsx(_components.code, { className: "language-auto", children: "not-prose" }), ", your custom Tailwind classes might conflict with or be overridden by the default prose styling. For example, your custom ", _jsx(_components.code, { className: "language-auto", children: "text-orange-600" }), " link color might be ignored in favor of the default prose link styling."] }), "\n", _jsxs(_components.p, { children: ["Adding ", _jsx(_components.code, { className: "language-auto", children: "not-prose" }), " to your JSX components ensures that only your intentional styling is applied, giving you complete control over the appearance."] }), "\n", _jsxs(_components.p, { children: ["If you’re planning a ", _jsx(_components.strong, { children: "bespoke landing page" }), " (custom hero, layout, typography), consider writing most of the page as JSX blocks inside markdown—or switch the entire page to a ", _jsx(_components.code, { className: "language-auto", children: "plain" }), " layout (see below) and build the whole thing in JSX. This gives you pixel‑level control typical for landing pages."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "step-3-create-a-grid-of-features", children: [_jsx(_components.a, { className: "heading-link", href: "#step-3-create-a-grid-of-features", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Step 3: Create a Grid of Features"] }), "\n", _jsx(_components.p, { children: "Now that we have a perfect card, first let's create cards for the rest of the features and then organize them in a nice grid:" }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "grid lg:grid-cols-2 gap-4", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token plain-text", children: "\t...Put all features cards here...\n" }) }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Key layout classes:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "grid lg:grid-cols-2 gap-4" }), " - Creates a responsive 2-column grid"] }), "\n"] }), "\n", _jsx(_components.p, { children: "The result will look like this:" }), "\n", _jsx(_components.img, { src: "https://flowershow.app/assets/Pasted%20image%2020250605145521.png", alt: "Pasted image 20250605145521", className: "internal" }), "\n", _jsxs(_components.h2, { id: "bonus-step-4-adding-icons-for-visual-enhancement", children: [_jsx(_components.a, { className: "heading-link", href: "#bonus-step-4-adding-icons-for-visual-enhancement", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "(Bonus) Step 4: Adding Icons for Visual Enhancement"] }), "\n", _jsx(_components.p, { children: "Now let's enhance our cards with icons to make it more visually appealing. We'll use Material Design Icons through CSS classes:" }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsxs(_components.code, { className: "language-jsx code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "not-prose flex cursor-default flex-col space-y-4 rounded-lg border border-gray-200 p-10 transition-all duration-150 hover:border-orange-400", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h3"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "font-semibold flex items-center", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "i-mdi-lightning-bolt-outline text-2xl text-orange-600 mr-2", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "Instant Error Eradication" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "p"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "flex-grow", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Our script intercepts 404 errors before they ever reach your visitors." }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "a"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "href" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "https:://404shield.com/docs", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "font-semi-bold self-start text-sm text-orange-600", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Learn more →" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token plain-text" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Final result:" }), "\n", _jsx(_components.img, { src: "https://flowershow.app/assets/Pasted%20image%2020250605150620.png", alt: "Pasted image 20250605150620", className: "internal" }), "\n", _jsxs(_components.div, { "data-callout": true, "data-callout-type": "tip", children: ["\n", _jsx(_components.div, { "data-callout-title": true, children: "Icon Options" }), "\n", _jsxs(_components.div, { "data-callout-body": true, children: ["\n", _jsxs(_components.p, { children: ["Flowershow supports Material Design Icons through CSS classes. You can browse available icons at ", _jsx(_components.a, { href: "https://icon-sets.iconify.design/mdi/", target: "_blank", rel: "noopener noreferrer", children: "Iconify's Material Design Icons collection" }), ". Simply prefix any icon name with ", _jsx(_components.code, { className: "language-auto", children: "i-mdi-" }), " to use it as a CSS class."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "jsx-only-landing-pages", children: [_jsx(_components.a, { className: "heading-link", href: "#jsx-only-landing-pages", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "JSX-only landing pages"] }), "\n", _jsxs(_components.p, { children: ["For landing pages, you often want zero interference from default styles. Flowershow lets you opt out of ", _jsx(_components.code, { className: "language-auto", children: "prose" }), " typography styles entirely with a ", _jsx(_components.code, { className: "language-auto", children: "plain" }), " layout."] }), "\n", _jsxs(_components.h3, { id: "use-layout-plain-to-disable-pagelevel-styling", children: [_jsx(_components.a, { className: "heading-link", href: "#use-layout-plain-to-disable-pagelevel-styling", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Use ", _jsx(_components.code, { className: "language-auto", children: "layout: plain" }), " to disable page‑level styling"] }), "\n", _jsx(_components.p, { children: "Add this to your frontmatter to remove Flowershow’s typography for the entire page:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "language-auto code-highlight", children: [_jsx(_components.span, { className: "code-line", children: "---\n" }), _jsx(_components.span, { className: "code-line", children: "layout: plain\n" }), _jsx(_components.span, { className: "code-line", children: "---\n" })] }) }), "\n", _jsxs(_components.p, { children: ["With ", _jsx(_components.code, { className: "language-auto", children: "layout: plain" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["The default ", _jsx(_components.code, { className: "language-auto", children: "prose" }), " typography styles are not applied, so you don’t need ", _jsx(_components.code, { className: "language-auto", children: "not-prose" }), " on each component."] }), "\n", _jsx(_components.li, { children: "You’re free to build the entire page in JSX (hero, grids, pricing, testimonials) with your own Tailwind classes." }), "\n", _jsxs(_components.li, { children: ["Perfect for ", _jsx(_components.strong, { children: "bespoke landing pages" }), " that need full visual control."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["When to stick with ", _jsx(_components.code, { className: "language-auto", children: "not-prose" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "You’re building a regular content page (blog post, docs) but want one or two custom sections (e.g., a CTA card or feature grid) to ignore prose styles." }), "\n", _jsx(_components.li, { children: "You still like the default typography everywhere else." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "summary", children: [_jsx(_components.a, { className: "heading-link", href: "#summary", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Summary"] }), "\n", _jsx(_components.p, { children: "We took a simple markdown list and turned it into a landing‑page‑ready features grid. The progression shows how you can start with content‑first thinking and then layer in JSX + Tailwind for precise layout and styling." }), "\n", _jsx(_components.img, { src: "https://flowershow.app/assets/Pasted%20image%2020250605151131.png", alt: "Pasted image 20250605151131", className: "internal" }), "\n", _jsxs(_components.h2, { id: "tips-for-component-development", children: [_jsx(_components.a, { className: "heading-link", href: "#tips-for-component-development", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Tips for Component Development"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Start with content" }), ": Always begin with clean, well-structured markdown. This ensures your content is accessible and readable on Flowershow even without styling, so you can publish it quickly."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Enhance progressively" }), ": Build your components incrementally. Start simple and add complexity."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Semantic HTML" }), ": Even when using JSX, maintain semantic HTML structure for accessibility and SEO."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Use Tailwind Playground for development" }), ": Instead of styling directly in your markdown files (e.g., in GitHub's web editor), use ", _jsx(_components.a, { href: "https://play.tailwindcss.com/", target: "_blank", rel: "noopener noreferrer", children: "Tailwind Playground" }), " to prototype and test your components. This is much faster as you can preview your components live without waiting for your site to sync after each change. It also keeps your commit history clean by avoiding incomplete styling iterations."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Leverage free Tailwind component libraries" }), ": Don't reinvent the wheel."] }), "\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "Ask ChatGPT for some help with styling and quick prototyping 😉" }) }), "\n"] }), "\n", _jsxs(_components.h2, { id: "working-with-flowershow", children: [_jsx(_components.a, { className: "heading-link", href: "#working-with-flowershow", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Working with Flowershow"] }), "\n", _jsx(_components.p, { children: "When developing with Flowershow, you can see your changes in real-time:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Edit directly on GitHub" }), " - Use GitHub's web editor for quick changes"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Sync your site" }), " - Wait for the site to sync automatically (or sync it manually)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Preview" }), " - See your components live on your site"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Iterate" }), " - Make adjustments and see results"] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "conclusion", children: [_jsx(_components.a, { className: "heading-link", href: "#conclusion", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Conclusion"] }), "\n", _jsx(_components.p, { children: "The ability to seamlessly blend markdown with JSX components gives you the best of both worlds: the simplicity of markdown for content creation and the power of React components for styling." }), "\n", _jsx(_components.p, { children: "By following this step-by-step approach, you can transform any markdown content into beautiful, functional components that enhance your site's user experience while maintaining the content-first workflow that makes markdown so appealing." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };