[{"data":1,"prerenderedAt":141},["ShallowReactive",2],{"use-cases-ecommerce-landing-page-en":3,"iframe_data":139,"raw_iframe_data_https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fecommerce-landing-page\u002Fecommerce-landing-page.html":140},{"id":4,"title":5,"best_practices":6,"copy_starters":22,"cover":45,"description":46,"extension":47,"faq":48,"h1":5,"key_facts":63,"meta":68,"order":69,"problems_this_solves":70,"rawbody":80,"sections":81,"seo":103,"seo_keywords":106,"stem":126,"tags":127,"who_it_is_for":129,"__hash__":137,"rawPath":138},"use_cases_en\u002Fuse_cases\u002Fen\u002Fecommerce-landing-page.json","Launch a High-Converting E-commerce Drop Page",{"title":7,"do":8,"avoid":15},"Best Practices",{"title":9,"items":10},"DO",[11,12,13,14],"Use high-quality product photography that showcases the item from multiple angles","Include a prominent countdown timer to build urgency and anticipation","Add social proof like live viewer counts, previous sell-out records, or customer photos","Offer a 'Notify Me' option to capture emails from visitors who arrive early or late",{"title":16,"items":17},"AVOID",[18,19,20,21],"Avoid low-quality or generic product images—drops require premium visuals","Do not create fake scarcity that damages trust with your audience","Skip complicated checkout flows—streamline the path to purchase","Never ignore mobile users, where 65%+ of drop traffic originates",{"title":23,"description":24,"items":25},"Copy Starters","Use these as inspiration for your own copy. Customize them to match your brand voice and specific offering.",[26,29,32,42],{"label":27,"content":28},"Headline","The [Product Name] Drop—Limited to [Number] Units",{"label":30,"content":31},"Subheadline","Don't miss the release everyone's waiting for. Drops [Date] at [Time].",{"label":33,"content":34},"Value Bullets",[35,38,40],{"icon":36,"content":37},"check","Hand-finished details with premium materials",{"icon":36,"content":39},"Limited to [Number] pieces worldwide",{"icon":36,"content":41},"Free shipping on all orders during the drop",{"label":43,"content":44},"Call to Action","Notify Me When It Drops","https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Fimage\u002Fsolutions\u002Fnew\u002Fecommerce-product-drop.webp","Create urgency and drive sales with countdown timers, scarcity signals, and seamless checkout for limited-edition product drops.","json",{"title":49,"items":50},"Frequently Asked Questions",[51,54,57,60],{"label":52,"content":53},"When does the drop go live?","A live countdown timer should be prominently displayed in the hero section. For pre-launch, use a clear date and time with timezone to avoid confusion.",{"label":55,"content":56},"How many units are available?","Transparency is key. Use a live quantity counter (e.g., '50 units remaining') to drive urgency without compromising trust.",{"label":58,"content":59},"What's the return policy?","Link to a clear, concise return\u002Fexchange policy, especially for limited-edition items which may have different rules than standard products.",{"label":61,"content":62},"Can I pre-order or reserve an item?","Offer an email notification or 'Notify Me' option to capture interest, but manage expectations about guaranteed purchase.",{"title":64,"goal":65,"section_count":66,"drafting_time":67},"Key Facts","E-commerce","6 sections","2-4 min to draft",{},7,{"title":71,"description":72,"items":73},"Problems This Solves","A product drop landing page creates urgency and exclusivity that standard product pages cannot, driving immediate action and higher conversion rates.",[74,75,76,77,78,79],"Drives immediate purchases with countdown timers and scarcity signals","Builds anticipation and brand loyalty through exclusive release events","Captures email signups and waitlist interest before and after drops","Reduces cart abandonment with streamlined, mobile-optimized checkout","Creates shareable content that fuels organic marketing and word-of-mouth","Provides a single destination for press, influencers, and customers","{\n \"title\": \"Launch a High-Converting E-commerce Drop Page\",\n \"description\": \"Create urgency and drive sales with countdown timers, scarcity signals, and seamless checkout for limited-edition product drops.\",\n \"order\": 7,\n \"cover\": \"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Fimage\u002Fsolutions\u002Fnew\u002Fecommerce-product-drop.webp\",\n \"tags\": [\n \"E-commerce\",\n \"Sales\"\n ],\n \"sections\": {\n \"title\": \"Page Blueprint\",\n \"description\": \"This use case includes 6 key sections designed to guide visitors from awareness to action.\",\n \"items\": [\n {\n \"title\": \"Hero\",\n \"description\": \"Showcase your drop with stunning product photography, a bold headline, and a prominent countdown timer above the fold.\"\n },\n {\n \"title\": \"Product Story\",\n \"description\": \"Tell the story behind the drop—what inspired it, what makes it exclusive, and why now is the time to buy.\"\n },\n {\n \"title\": \"Social Proof\",\n \"description\": \"Display live counters, previous sell-out records, customer photos, and press mentions to build FOMO and credibility.\"\n },\n {\n \"title\": \"Features & Details\",\n \"description\": \"Highlight unique materials, craftsmanship, and specifications that justify the exclusivity and price point.\"\n },\n {\n \"title\": \"Purchase\u002FPreorder\",\n \"description\": \"Offer clear CTAs that adapt to drop status: 'Notify Me' before launch, 'Buy Now' during, and 'Join Waitlist' after sell-out.\"\n },\n {\n \"title\": \"FAQ\",\n \"description\": \"Address questions about availability, return policy, shipping timelines, and how to reserve or preorder.\"\n }\n ]\n },\n \"who_it_is_for\": {\n \"title\": \"Who It's For\",\n \"items\": [\n \"DTC brands launching limited-edition product drops\",\n \"Streetwear and sneaker brands building hype for releases\",\n \"Collectible and specialty product sellers\",\n \"E-commerce teams running flash sales or seasonal campaigns\",\n \"Entrepreneurs testing new product concepts with preorders\"\n ]\n },\n \"problems_this_solves\": {\n \"title\": \"Problems This Solves\",\n \"description\": \"A product drop landing page creates urgency and exclusivity that standard product pages cannot, driving immediate action and higher conversion rates.\",\n \"items\": [\n \"Drives immediate purchases with countdown timers and scarcity signals\",\n \"Builds anticipation and brand loyalty through exclusive release events\",\n \"Captures email signups and waitlist interest before and after drops\",\n \"Reduces cart abandonment with streamlined, mobile-optimized checkout\",\n \"Creates shareable content that fuels organic marketing and word-of-mouth\",\n \"Provides a single destination for press, influencers, and customers\"\n ]\n },\n \"copy_starters\": {\n \"title\": \"Copy Starters\",\n \"description\": \"Use these as inspiration for your own copy. Customize them to match your brand voice and specific offering.\",\n \"items\": [\n {\n \"label\": \"Headline\",\n \"content\": \"The [Product Name] Drop—Limited to [Number] Units\"\n },\n {\n \"label\": \"Subheadline\",\n \"content\": \"Don't miss the release everyone's waiting for. Drops [Date] at [Time].\"\n },\n {\n \"label\": \"Value Bullets\",\n \"content\": [\n {\n \"icon\": \"check\",\n \"content\": \"Hand-finished details with premium materials\"\n },\n {\n \"icon\": \"check\",\n \"content\": \"Limited to [Number] pieces worldwide\"\n },\n {\n \"icon\": \"check\",\n \"content\": \"Free shipping on all orders during the drop\"\n }\n ]\n },\n {\n \"label\": \"Call to Action\",\n \"content\": \"Notify Me When It Drops\"\n }\n ]\n },\n \"best_practices\": {\n \"title\": \"Best Practices\",\n \"do\": {\n \"title\": \"DO\",\n \"items\": [\n \"Use high-quality product photography that showcases the item from multiple angles\",\n \"Include a prominent countdown timer to build urgency and anticipation\",\n \"Add social proof like live viewer counts, previous sell-out records, or customer photos\",\n \"Offer a 'Notify Me' option to capture emails from visitors who arrive early or late\"\n ]\n },\n \"avoid\": {\n \"title\": \"AVOID\",\n \"items\": [\n \"Avoid low-quality or generic product images—drops require premium visuals\",\n \"Do not create fake scarcity that damages trust with your audience\",\n \"Skip complicated checkout flows—streamline the path to purchase\",\n \"Never ignore mobile users, where 65%+ of drop traffic originates\"\n ]\n }\n },\n \"seo_keywords\": {\n \"title\": \"SEO Keywords\",\n \"description\": \"Use these keywords to optimize your page for search engines and improve discoverability.\",\n \"items\": [\n {\n \"list_name\": \"Primary Keyword\",\n \"keywords\": [\n \"product drop landing page\"\n ]\n },\n {\n \"list_name\": \"Secondary Keywords\",\n \"keywords\": [\n \"limited edition product page\",\n \"ecommerce drop page template\",\n \"countdown landing page\"\n ]\n },\n {\n \"list_name\": \"Long-Tail Keywords\",\n \"keywords\": [\n \"how to create urgency for a product drop\",\n \"best ecommerce landing page for limited releases\",\n \"product drop countdown timer best practices\"\n ]\n }\n ]\n },\n \"key_facts\": {\n \"title\": \"Key Facts\",\n \"goal\": \"E-commerce\",\n \"section_count\": \"6 sections\",\n \"drafting_time\": \"2-4 min to draft\"\n },\n \"faq\": {\n \"title\": \"Frequently Asked Questions\",\n \"items\": [\n {\n \"label\": \"When does the drop go live?\",\n \"content\": \"A live countdown timer should be prominently displayed in the hero section. For pre-launch, use a clear date and time with timezone to avoid confusion.\"\n },\n {\n \"label\": \"How many units are available?\",\n \"content\": \"Transparency is key. Use a live quantity counter (e.g., '50 units remaining') to drive urgency without compromising trust.\"\n },\n {\n \"label\": \"What's the return policy?\",\n \"content\": \"Link to a clear, concise return\u002Fexchange policy, especially for limited-edition items which may have different rules than standard products.\"\n },\n {\n \"label\": \"Can I pre-order or reserve an item?\",\n \"content\": \"Offer an email notification or 'Notify Me' option to capture interest, but manage expectations about guaranteed purchase.\"\n }\n ]\n },\n \"seo\": {\n \"title\": \"E-commerce Drop Landing Page Builder - AI Landing Page Generator\",\n \"description\": \"Create a high-converting e-commerce drop landing page with AI—complete with countdown timers, scarcity signals, and checkout-ready CTAs to drive sales.\"\n },\n \"h1\": \"Launch a High-Converting E-commerce Drop Page\"\n}",{"title":82,"description":83,"items":84},"Page Blueprint","This use case includes 6 key sections designed to guide visitors from awareness to action.",[85,88,91,94,97,100],{"title":86,"description":87},"Hero","Showcase your drop with stunning product photography, a bold headline, and a prominent countdown timer above the fold.",{"title":89,"description":90},"Product Story","Tell the story behind the drop—what inspired it, what makes it exclusive, and why now is the time to buy.",{"title":92,"description":93},"Social Proof","Display live counters, previous sell-out records, customer photos, and press mentions to build FOMO and credibility.",{"title":95,"description":96},"Features & Details","Highlight unique materials, craftsmanship, and specifications that justify the exclusivity and price point.",{"title":98,"description":99},"Purchase\u002FPreorder","Offer clear CTAs that adapt to drop status: 'Notify Me' before launch, 'Buy Now' during, and 'Join Waitlist' after sell-out.",{"title":101,"description":102},"FAQ","Address questions about availability, return policy, shipping timelines, and how to reserve or preorder.",{"title":104,"description":105},"E-commerce Drop Landing Page Builder - AI Landing Page Generator","Create a high-converting e-commerce drop landing page with AI—complete with countdown timers, scarcity signals, and checkout-ready CTAs to drive sales.",{"title":107,"description":108,"items":109},"SEO Keywords","Use these keywords to optimize your page for search engines and improve discoverability.",[110,114,120],{"list_name":111,"keywords":112},"Primary Keyword",[113],"product drop landing page",{"list_name":115,"keywords":116},"Secondary Keywords",[117,118,119],"limited edition product page","ecommerce drop page template","countdown landing page",{"list_name":121,"keywords":122},"Long-Tail Keywords",[123,124,125],"how to create urgency for a product drop","best ecommerce landing page for limited releases","product drop countdown timer best practices","use_cases\u002Fen\u002Fecommerce-landing-page",[65,128],"Sales",{"title":130,"items":131},"Who It's For",[132,133,134,135,136],"DTC brands launching limited-edition product drops","Streetwear and sneaker brands building hype for releases","Collectible and specialty product sellers","E-commerce teams running flash sales or seasonal campaigns","Entrepreneurs testing new product concepts with preorders","tEiUV3cJj6t2F76nnUGQwD-yx99Vh6pIfDkBK-J9fUs","\u002Fecommerce-landing-page","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>Noah Chen — Product Designer & Frontend Engineer\u003C\u002Ftitle>\n \u003Cmeta name=\"description\" content=\"I combine product design, design systems, and frontend engineering to launch fast, accessible experiences that convert—without sacrificing craft.\">\n \n \u003C!-- Tailwind CSS CDN -->\n \u003Cscript src=\"https:\u002F\u002Fcdn.tailwindcss.com\">\u003C\u002Fscript>\n \n \u003C!-- Lucide Icons CDN -->\n \u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Flucide@latest\">\u003C\u002Fscript>\n \n \u003C!-- Custom Tailwind Configuration -->\n \u003Cscript>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n background: 'oklch(1 0 0)',\n foreground: 'oklch(0.145 0 0)',\n card: 'oklch(1 0 0)',\n 'card-foreground': 'oklch(0.145 0 0)',\n primary: 'oklch(0.205 0 0)',\n 'primary-foreground': 'oklch(0.985 0 0)',\n secondary: 'oklch(0.97 0 0)',\n 'secondary-foreground': 'oklch(0.205 0 0)',\n muted: 'oklch(0.97 0 0)',\n 'muted-foreground': 'oklch(0.556 0 0)',\n accent: 'oklch(0.97 0 0)',\n 'accent-foreground': 'oklch(0.205 0 0)',\n border: 'oklch(0.922 0 0)',\n ring: 'oklch(0.708 0 0)',\n },\n borderRadius: {\n lg: '0.625rem',\n }\n }\n }\n }\n \u003C\u002Fscript>\n \n \u003Cstyle>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n background-color: oklch(1 0 0);\n color: oklch(0.145 0 0);\n line-height: 1.6;\n }\n \n .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n font-weight: 500;\n transition: all 0.2s;\n cursor: pointer;\n text-decoration: none;\n }\n \n .btn-primary {\n background-color: oklch(0.205 0 0);\n color: oklch(0.985 0 0);\n padding: 0.75rem 1.5rem;\n border: none;\n }\n \n .btn-primary:hover {\n opacity: 0.9;\n }\n \n .btn-outline {\n background-color: transparent;\n color: oklch(0.145 0 0);\n padding: 0.75rem 1.5rem;\n border: 1px solid oklch(0.922 0 0);\n }\n \n .btn-outline:hover {\n background-color: oklch(0.97 0 0);\n }\n \n .card {\n background-color: oklch(1 0 0);\n border: 1px solid oklch(0.922 0 0);\n border-radius: 0.625rem;\n overflow: hidden;\n transition: all 0.3s;\n }\n \n .card:hover {\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n }\n \n .mobile-action-bar {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: oklch(1 0 0);\n border-top: 1px solid oklch(0.922 0 0);\n padding: 1rem;\n display: flex;\n gap: 0.5rem;\n z-index: 50;\n }\n \n @media (min-width: 768px) {\n .mobile-action-bar {\n display: none;\n }\n }\n \n .gradient-blue {\n background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.1), rgba(6, 182, 212, 0.1));\n }\n \n .gradient-orange {\n background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.1), rgba(251, 191, 36, 0.1));\n }\n \n .gradient-emerald {\n background: linear-gradient(to bottom right, rgba(16, 185, 129, 0.1), rgba(20, 184, 166, 0.1));\n }\n \n .gradient-purple {\n background: linear-gradient(to bottom right, rgba(168, 85, 247, 0.1), rgba(236, 72, 153, 0.1));\n }\n \n input, textarea {\n width: 100%;\n padding: 0.75rem;\n border: 1px solid oklch(0.922 0 0);\n border-radius: 0.5rem;\n font-size: 1rem;\n transition: border-color 0.2s;\n }\n \n input:focus, textarea:focus {\n outline: none;\n border-color: oklch(0.205 0 0);\n }\n \n .accordion-button {\n width: 100%;\n text-align: left;\n padding: 1rem;\n background: none;\n border: none;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-weight: 600;\n }\n \n .accordion-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n }\n \n .accordion-content.active {\n max-height: 500px;\n }\n \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003C!-- Hero Section -->\n \u003Csection class=\"relative overflow-hidden bg-background px-4 py-16 md:py-24 lg:py-32\">\n \u003Cdiv class=\"mx-auto max-w-7xl\">\n \u003Cdiv class=\"grid gap-12 lg:grid-cols-2 lg:gap-16 items-center\">\n \u003Cdiv class=\"space-y-8\">\n \u003Cdiv class=\"space-y-4\">\n \u003Ch1 class=\"text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl\">\n Design & Ship Products People Keep Using\n \u003C\u002Fh1>\n \u003Cp class=\"text-lg text-gray-600 md:text-xl lg:text-2xl leading-relaxed\">\n I combine product design, design systems, and frontend engineering to launch fast, accessible\n experiences that convert—without sacrificing craft.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"flex flex-col gap-4 sm:flex-row\">\n \u003Ca href=\"#book-call\" class=\"btn btn-primary text-base\">Book a Discovery Call\u003C\u002Fa>\n \u003Ca href=\"#case-studies\" class=\"btn btn-outline text-base\">See Case Studies\u003C\u002Fa>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"flex flex-wrap gap-4 text-sm text-gray-600\">\n \u003Cspan class=\"flex items-center gap-2\">\n \u003Cspan class=\"h-1.5 w-1.5 rounded-full bg-black\">\u003C\u002Fspan>\n Strategy first\n \u003C\u002Fspan>\n \u003Cspan class=\"flex items-center gap-2\">\n \u003Cspan class=\"h-1.5 w-1.5 rounded-full bg-black\">\u003C\u002Fspan>\n 4-week web sprints\n \u003C\u002Fspan>\n \u003Cspan class=\"flex items-center gap-2\">\n \u003Cspan class=\"h-1.5 w-1.5 rounded-full bg-black\">\u003C\u002Fspan>\n Clear metrics & ownership\n \u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"relative aspect-[4\u002F3] lg:aspect-square\">\n \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fhero-bg.jpg\" \n alt=\"Product design mockups showcasing modern UI interfaces\" \n class=\"w-full h-full object-contain\">\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"mt-16 border-t pt-8\">\n \u003Cp class=\"text-center text-sm text-gray-600\">\n Trusted by \u003Cspan class=\"font-medium text-black\">NovaCRM • BrightWear • KiteBank • OrbitOps • ClearStack\u003C\u002Fspan>\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Selected Work Section -->\n \u003Csection id=\"work\" class=\"bg-gray-50 px-4 py-16 md:py-24\">\n \u003Cdiv class=\"mx-auto max-w-7xl\">\n \u003Cdiv class=\"mb-12 space-y-4 text-center\">\n \u003Ch2 class=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">Selected Work\u003C\u002Fh2>\n \u003Cp class=\"mx-auto max-w-2xl text-lg text-gray-600 leading-relaxed\">\n Real projects, real outcomes. From SaaS to fintech, I help teams ship products that perform.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"mb-8 flex flex-wrap justify-center gap-2\">\n \u003Cbutton class=\"btn btn-primary text-sm\" onclick=\"filterWork('all')\">All\u003C\u002Fbutton>\n \u003Cbutton class=\"btn btn-outline text-sm\" onclick=\"filterWork('saas')\">SaaS\u003C\u002Fbutton>\n \u003Cbutton class=\"btn btn-outline text-sm\" onclick=\"filterWork('fintech')\">Fintech\u003C\u002Fbutton>\n \u003Cbutton class=\"btn btn-outline text-sm\" onclick=\"filterWork('ecommerce')\">E-commerce\u003C\u002Fbutton>\n \u003Cbutton class=\"btn btn-outline text-sm\" onclick=\"filterWork('devtools')\">DevTools\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\" id=\"work-grid\">\n \u003C!-- Work Item 1 -->\n \u003Cdiv class=\"card work-item\" data-category=\"saas\">\n \u003Cdiv class=\"relative aspect-[4\u002F3] overflow-hidden bg-gray-100\">\n \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fwork\u002Ffintech-dashboard.jpg\" \n alt=\"NovaCRM project preview\" \n class=\"w-full h-full object-cover transition-transform hover:scale-105\">\n \u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-2 flex items-center justify-between\">\n \u003Ch3 class=\"font-semibold text-lg\">NovaCRM\u003C\u002Fh3>\n \u003Cspan class=\"text-xs text-gray-600\">SaaS\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 line-clamp-2\">Stagnant MQL→SQL conversion\u003C\u002Fp>\n \u003Cp class=\"mt-3 text-sm font-medium text-black\">+38% SQLs, −21% CAC in 90 days\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Work Item 2 -->\n \u003Cdiv class=\"card work-item\" data-category=\"ecommerce\">\n \u003Cdiv class=\"relative aspect-[4\u002F3] overflow-hidden bg-gray-100\">\n \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fwork\u002Fecommerce-redesign.jpg\" \n alt=\"BrightWear project preview\" \n class=\"w-full h-full object-cover transition-transform hover:scale-105\">\n \u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-2 flex items-center justify-between\">\n \u003Ch3 class=\"font-semibold text-lg\">BrightWear\u003C\u002Fh3>\n \u003Cspan class=\"text-xs text-gray-600\">E-commerce\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 line-clamp-2\">Low ROAS and slow creative production\u003C\u002Fp>\n \u003Cp class=\"mt-3 text-sm font-medium text-black\">3.2× ROAS, +27% AOV\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Work Item 3 -->\n \u003Cdiv class=\"card work-item\" data-category=\"fintech\">\n \u003Cdiv class=\"relative aspect-[4\u002F3] overflow-hidden bg-gray-100\">\n \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fwork\u002Fmobile-banking.jpg\" \n alt=\"KiteBank project preview\" \n class=\"w-full h-full object-cover transition-transform hover:scale-105\">\n \u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-2 flex items-center justify-between\">\n \u003Ch3 class=\"font-semibold text-lg\">KiteBank\u003C\u002Fh3>\n \u003Cspan class=\"text-xs text-gray-600\">Fintech\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 line-clamp-2\">High CPA, low KYC completion\u003C\u002Fp>\n \u003Cp class=\"mt-3 text-sm font-medium text-black\">−42% CPA, +19% KYC pass rate\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Work Item 4 -->\n \u003Cdiv class=\"card work-item\" data-category=\"devtools\">\n \u003Cdiv class=\"relative aspect-[4\u002F3] overflow-hidden bg-gray-100\">\n \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fwork\u002Fsaas-onboarding.jpg\" \n alt=\"OrbitOps project preview\" \n class=\"w-full h-full object-cover transition-transform hover:scale-105\">\n \u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-2 flex items-center justify-between\">\n \u003Ch3 class=\"font-semibold text-lg\">OrbitOps\u003C\u002Fh3>\n \u003Cspan class=\"text-xs text-gray-600\">DevTools\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 line-clamp-2\">Complex product, unclear positioning\u003C\u002Fp>\n \u003Cp class=\"mt-3 text-sm font-medium text-black\">+52% trial signups\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Work Item 5 -->\n \u003Cdiv class=\"card work-item\" data-category=\"saas\">\n \u003Cdiv class=\"relative aspect-[4\u002F3] overflow-hidden bg-gray-100\">\n \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fwork\u002Fdesign-system.jpg\" \n alt=\"ClearStack project preview\" \n class=\"w-full h-full object-cover transition-transform hover:scale-105\">\n \u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-2 flex items-center justify-between\">\n \u003Ch3 class=\"font-semibold text-lg\">ClearStack\u003C\u002Fh3>\n \u003Cspan class=\"text-xs text-gray-600\">SaaS\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 line-clamp-2\">Low engagement, high churn\u003C\u002Fp>\n \u003Cp class=\"mt-3 text-sm font-medium text-black\">−31% churn in Q1\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Work Item 6 -->\n \u003Cdiv class=\"card work-item\" data-category=\"ecommerce\">\n \u003Cdiv class=\"relative aspect-[4\u002F3] overflow-hidden bg-gray-100\">\n \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fwork\u002Freal-estate.jpg\" \n alt=\"Luxe Home project preview\" \n class=\"w-full h-full object-cover transition-transform hover:scale-105\">\n \u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-2 flex items-center justify-between\">\n \u003Ch3 class=\"font-semibold text-lg\">Luxe Home\u003C\u002Fh3>\n \u003Cspan class=\"text-xs text-gray-600\">E-commerce\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 line-clamp-2\">Mobile conversion lag\u003C\u002Fp>\n \u003Cp class=\"mt-3 text-sm font-medium text-black\">+44% mobile conversions\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Work Item 7 -->\n \u003Cdiv class=\"card work-item\" data-category=\"fintech\">\n \u003Cdiv class=\"relative aspect-[4\u002F3] overflow-hidden bg-gray-100\">\n \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fwork\u002Fhealthcare-portal.jpg\" \n alt=\"PayFlow project preview\" \n class=\"w-full h-full object-cover transition-transform hover:scale-105\">\n \u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-2 flex items-center justify-between\">\n \u003Ch3 class=\"font-semibold text-lg\">PayFlow\u003C\u002Fh3>\n \u003Cspan class=\"text-xs text-gray-600\">Fintech\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 line-clamp-2\">Trust and compliance concerns\u003C\u002Fp>\n \u003Cp class=\"mt-3 text-sm font-medium text-black\">+29% enterprise signups\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Work Item 8 -->\n \u003Cdiv class=\"card work-item\" data-category=\"devtools\">\n \u003Cdiv class=\"relative aspect-[4\u002F3] overflow-hidden bg-gray-100\">\n \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fwork\u002Ffitness-app.jpg\" \n alt=\"CodeSync project preview\" \n class=\"w-full h-full object-cover transition-transform hover:scale-105\">\n \u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-2 flex items-center justify-between\">\n \u003Ch3 class=\"font-semibold text-lg\">CodeSync\u003C\u002Fh3>\n \u003Cspan class=\"text-xs text-gray-600\">DevTools\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 line-clamp-2\">Developer adoption\u003C\u002Fp>\n \u003Cp class=\"mt-3 text-sm font-medium text-black\">10K+ GitHub stars\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Work Item 9 -->\n \u003Cdiv class=\"card work-item\" data-category=\"saas\">\n \u003Cdiv class=\"relative aspect-[4\u002F3] overflow-hidden bg-gray-100\">\n \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fwork\u002Ftravel-booking.jpg\" \n alt=\"TeamHub project preview\" \n class=\"w-full h-full object-cover transition-transform hover:scale-105\">\n \u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-2 flex items-center justify-between\">\n \u003Ch3 class=\"font-semibold text-lg\">TeamHub\u003C\u002Fh3>\n \u003Cspan class=\"text-xs text-gray-600\">SaaS\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 line-clamp-2\">Feature bloat, poor UX\u003C\u002Fp>\n \u003Cp class=\"mt-3 text-sm font-medium text-black\">+36% daily active users\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Work Item 10 -->\n \u003Cdiv class=\"card work-item\" data-category=\"ecommerce\">\n \u003Cdiv class=\"relative aspect-[4\u002F3] overflow-hidden bg-gray-100\">\n \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fwork\u002Ffood-delivery.jpg\" \n alt=\"FreshBox project preview\" \n class=\"w-full h-full object-cover transition-transform hover:scale-105\">\n \u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-2 flex items-center justify-between\">\n \u003Ch3 class=\"font-semibold text-lg\">FreshBox\u003C\u002Fh3>\n \u003Cspan class=\"text-xs text-gray-600\">E-commerce\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 line-clamp-2\">Subscription retention\u003C\u002Fp>\n \u003Cp class=\"mt-3 text-sm font-medium text-black\">+41% LTV\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Work Item 11 -->\n \u003Cdiv class=\"card work-item\" data-category=\"fintech\">\n \u003Cdiv class=\"relative aspect-[4\u002F3] overflow-hidden bg-gray-100\">\n \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fwork\u002Fcrypto-wallet.jpg\" \n alt=\"WealthWise project preview\" \n class=\"w-full h-full object-cover transition-transform hover:scale-105\">\n \u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-2 flex items-center justify-between\">\n \u003Ch3 class=\"font-semibold text-lg\">WealthWise\u003C\u002Fh3>\n \u003Cspan class=\"text-xs text-gray-600\">Fintech\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 line-clamp-2\">Complex financial data visualization\u003C\u002Fp>\n \u003Cp class=\"mt-3 text-sm font-medium text-black\">+58% user engagement\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Work Item 12 -->\n \u003Cdiv class=\"card work-item\" data-category=\"devtools\">\n \u003Cdiv class=\"relative aspect-[4\u002F3] overflow-hidden bg-gray-100\">\n \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fwork\u002Feducation-platform.jpg\" \n alt=\"APIHub project preview\" \n class=\"w-full h-full object-cover transition-transform hover:scale-105\">\n \u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-2 flex items-center justify-between\">\n \u003Ch3 class=\"font-semibold text-lg\">APIHub\u003C\u002Fh3>\n \u003Cspan class=\"text-xs text-gray-600\">DevTools\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 line-clamp-2\">API documentation clarity\u003C\u002Fp>\n \u003Cp class=\"mt-3 text-sm font-medium text-black\">−67% support tickets\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Case Studies Section -->\n \u003Csection id=\"case-studies\" class=\"bg-background px-4 py-16 md:py-24\">\n \u003Cdiv class=\"mx-auto max-w-7xl\">\n \u003Cdiv class=\"mb-12 space-y-4 text-center\">\n \u003Ch2 class=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">Featured Case Studies\u003C\u002Fh2>\n \u003Cp class=\"mx-auto max-w-2xl text-lg text-gray-600 leading-relaxed\">\n Deep dives into projects that moved the needle on pipeline, revenue, and efficiency.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"grid gap-8 md:grid-cols-2 lg:grid-cols-3\">\n \u003C!-- Case Study 1 -->\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"h-2 gradient-blue\">\u003C\u002Fdiv>\n \u003Cdiv class=\"relative aspect-video overflow-hidden\">\n \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fcase-studies\u002Ffintech-hero.jpg\" \n alt=\"NovaCRM case study preview\" \n class=\"w-full h-full object-cover transition-transform hover:scale-105\">\n \u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Ch3 class=\"text-2xl font-bold mb-2\">NovaCRM\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 mb-4\">SaaS — Website + Positioning\u003C\u002Fp>\n \u003Cdiv class=\"space-y-3 mb-6\">\n \u003Cdiv>\n \u003Ch4 class=\"text-sm font-semibold mb-1\">Challenge\u003C\u002Fh4>\n \u003Cp class=\"text-sm text-gray-600\">Stagnant MQL→SQL conversion\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003Cdiv>\n \u003Ch4 class=\"text-sm font-semibold mb-1\">Outcome\u003C\u002Fh4>\n \u003Cp class=\"text-sm font-medium text-black\">+38% SQLs and −21% CAC in 90 days\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"flex flex-col gap-2\">\n \u003Ca href=\"https:\u002F\u002Fmedia.example.com\u002Fnoah\u002Fcase-novacrm.pdf\" target=\"_blank\" class=\"btn btn-primary text-sm\">\n Read PDF Case Study\n \u003C\u002Fa>\n \u003Ca href=\"https:\u002F\u002Fnovacrm.example\" target=\"_blank\" class=\"btn btn-outline text-sm\">\n View Live Site\n \u003C\u002Fa>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Case Study 2 -->\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"h-2 gradient-orange\">\u003C\u002Fdiv>\n \u003Cdiv class=\"relative aspect-video overflow-hidden\">\n \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fcase-studies\u002Fecommerce-hero.jpg\" \n alt=\"BrightWear case study preview\" \n class=\"w-full h-full object-cover transition-transform hover:scale-105\">\n \u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Ch3 class=\"text-2xl font-bold mb-2\">BrightWear\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 mb-4\">DTC — CRO + Creative System\u003C\u002Fp>\n \u003Cdiv class=\"space-y-3 mb-6\">\n \u003Cdiv>\n \u003Ch4 class=\"text-sm font-semibold mb-1\">Challenge\u003C\u002Fh4>\n \u003Cp class=\"text-sm text-gray-600\">Low ROAS and slow creative production\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003Cdiv>\n \u003Ch4 class=\"text-sm font-semibold mb-1\">Outcome\u003C\u002Fh4>\n \u003Cp class=\"text-sm font-medium text-black\">3.2× ROAS, +27% AOV, build time cut from 10 to 4 days\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"flex flex-col gap-2\">\n \u003Ca href=\"https:\u002F\u002Fmedia.example.com\u002Fnoah\u002Fcase-brightwear.pdf\" target=\"_blank\" class=\"btn btn-primary text-sm\">\n Read PDF Case Study\n \u003C\u002Fa>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Case Study 3 -->\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"h-2 gradient-emerald\">\u003C\u002Fdiv>\n \u003Cdiv class=\"relative aspect-video overflow-hidden\">\n \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fcase-studies\u002Fsaas-hero.jpg\" \n alt=\"KiteBank case study preview\" \n class=\"w-full h-full object-cover transition-transform hover:scale-105\">\n \u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Ch3 class=\"text-2xl font-bold mb-2\">KiteBank\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 mb-4\">Fintech — Onboarding UX + Email Lab\u003C\u002Fp>\n \u003Cdiv class=\"space-y-3 mb-6\">\n \u003Cdiv>\n \u003Ch4 class=\"text-sm font-semibold mb-1\">Challenge\u003C\u002Fh4>\n \u003Cp class=\"text-sm text-gray-600\">High CPA, low KYC completion\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003Cdiv>\n \u003Ch4 class=\"text-sm font-semibold mb-1\">Outcome\u003C\u002Fh4>\n \u003Cp class=\"text-sm font-medium text-black\">−42% CPA, +19% KYC pass rate\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"flex flex-col gap-2\">\n \u003Ca href=\"https:\u002F\u002Fmedia.example.com\u002Fnoah\u002Fcase-kitebank.pdf\" target=\"_blank\" class=\"btn btn-primary text-sm\">\n Read PDF Case Study\n \u003C\u002Fa>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"mt-12 text-center\">\n \u003Ca href=\"#book-call\" class=\"btn btn-primary text-lg px-8 py-4\">Book a Discovery Call\u003C\u002Fa>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Services Section -->\n \u003Csection id=\"services\" class=\"bg-gray-50 px-4 py-16 md:py-24\">\n \u003Cdiv class=\"mx-auto max-w-7xl\">\n \u003Cdiv class=\"mb-12 space-y-4 text-center\">\n \u003Ch2 class=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">Services & Capabilities\u003C\u002Fh2>\n \u003Cp class=\"mx-auto max-w-2xl text-lg text-gray-600 leading-relaxed\">\n Full-stack design and engineering, from strategy to deployment.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n \u003C!-- Service 1 -->\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-4 flex items-center gap-3\">\n \u003Cdiv class=\"rounded-lg bg-gray-100 p-2 text-blue-500\">\n \u003Ci data-lucide=\"palette\" class=\"w-6 h-6\">\u003C\u002Fi>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003Ch3 class=\"text-xl font-bold mb-3\">Product & UX\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n Research, flows, wireframes, prototyping, usability studies, KPI mapping.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Service 2 -->\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-4 flex items-center gap-3\">\n \u003Cdiv class=\"rounded-lg bg-gray-100 p-2 text-purple-500\">\n \u003Ci data-lucide=\"layers\" class=\"w-6 h-6\">\u003C\u002Fi>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003Ch3 class=\"text-xl font-bold mb-3\">Design Systems\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n Tokens, components, accessibility rules, documentation, Figma to code.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Service 3 -->\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-4 flex items-center gap-3\">\n \u003Cdiv class=\"rounded-lg bg-gray-100 p-2 text-emerald-500\">\n \u003Ci data-lucide=\"code\" class=\"w-6 h-6\">\u003C\u002Fi>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003Ch3 class=\"text-xl font-bold mb-3\">Web & Frontend\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n Next.js, React, TypeScript, Tailwind, performance & schema\u002FSEO, analytics.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Service 4 -->\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-4 flex items-center gap-3\">\n \u003Cdiv class=\"rounded-lg bg-gray-100 p-2 text-orange-500\">\n \u003Ci data-lucide=\"trending-up\" class=\"w-6 h-6\">\u003C\u002Fi>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003Ch3 class=\"text-xl font-bold mb-3\">CRO & Experimentation\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n Offers, IA, copy frameworks, A\u002FB testing, heatmaps, analytics loops.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Service 5 -->\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-4 flex items-center gap-3\">\n \u003Cdiv class=\"rounded-lg bg-gray-100 p-2 text-cyan-500\">\n \u003Ci data-lucide=\"file-text\" class=\"w-6 h-6\">\u003C\u002Fi>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003Ch3 class=\"text-xl font-bold mb-3\">Content & Docs\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n Information architecture, dev docs, API guides, launch playbooks.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Service 6 -->\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-4 flex items-center gap-3\">\n \u003Cdiv class=\"rounded-lg bg-gray-100 p-2 text-pink-500\">\n \u003Ci data-lucide=\"bar-chart-3\" class=\"w-6 h-6\">\u003C\u002Fi>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003Ch3 class=\"text-xl font-bold mb-3\">RevOps-Aware\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n GA4, server-side tagging, CRM alignment (HubSpot\u002FSalesforce), dashboards.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Why Work With Me Section -->\n \u003Csection class=\"bg-background px-4 py-16 md:py-24\">\n \u003Cdiv class=\"mx-auto max-w-7xl\">\n \u003Cdiv class=\"mb-12 space-y-4 text-center\">\n \u003Ch2 class=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">Why Work With Me\u003C\u002Fh2>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"grid gap-8 md:grid-cols-2 lg:grid-cols-3\">\n \u003Cdiv class=\"space-y-3\">\n \u003Cdiv class=\"flex items-center gap-3\">\n \u003Ci data-lucide=\"zap\" class=\"w-6 h-6 text-yellow-500\">\u003C\u002Fi>\n \u003Ch3 class=\"text-xl font-bold\">Fast Execution\u003C\u002Fh3>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n 4-week sprints from strategy to live site. No endless revisions.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"space-y-3\">\n \u003Cdiv class=\"flex items-center gap-3\">\n \u003Ci data-lucide=\"target\" class=\"w-6 h-6 text-red-500\">\u003C\u002Fi>\n \u003Ch3 class=\"text-xl font-bold\">Outcome-Focused\u003C\u002Fh3>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n Every decision tied to conversion, retention, or efficiency metrics.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"space-y-3\">\n \u003Cdiv class=\"flex items-center gap-3\">\n \u003Ci data-lucide=\"users\" class=\"w-6 h-6 text-blue-500\">\u003C\u002Fi>\n \u003Ch3 class=\"text-xl font-bold\">Full-Stack Mindset\u003C\u002Fh3>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n Design, code, and analytics—no handoff friction.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"space-y-3\">\n \u003Cdiv class=\"flex items-center gap-3\">\n \u003Ci data-lucide=\"shield-check\" class=\"w-6 h-6 text-green-500\">\u003C\u002Fi>\n \u003Ch3 class=\"text-xl font-bold\">Accessibility First\u003C\u002Fh3>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n WCAG 2.1 AA compliance built in, not bolted on.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"space-y-3\">\n \u003Cdiv class=\"flex items-center gap-3\">\n \u003Ci data-lucide=\"repeat\" class=\"w-6 h-6 text-purple-500\">\u003C\u002Fi>\n \u003Ch3 class=\"text-xl font-bold\">Iterative Process\u003C\u002Fh3>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n Weekly demos, continuous feedback, no big-bang reveals.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"space-y-3\">\n \u003Cdiv class=\"flex items-center gap-3\">\n \u003Ci data-lucide=\"book-open\" class=\"w-6 h-6 text-orange-500\">\u003C\u002Fi>\n \u003Ch3 class=\"text-xl font-bold\">Documentation Included\u003C\u002Fh3>\n \u003C\u002Fdiv>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n Handoff docs, component guides, and maintenance playbooks.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Process Section -->\n \u003Csection class=\"bg-gray-50 px-4 py-16 md:py-24\">\n \u003Cdiv class=\"mx-auto max-w-7xl\">\n \u003Cdiv class=\"mb-12 space-y-4 text-center\">\n \u003Ch2 class=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">Process\u003C\u002Fh2>\n \u003Cp class=\"mx-auto max-w-2xl text-lg text-gray-600 leading-relaxed\">\n Three clear phases from discovery to scale.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"grid gap-8 md:grid-cols-3\">\n \u003C!-- Step 1 -->\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-4 inline-block rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 px-4 py-2 text-2xl font-bold text-white\">\n 01\n \u003C\u002Fdiv>\n \u003Ch3 class=\"mb-3 text-2xl font-bold\">Discover\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n 60-min workshop, analytics & content audit, opportunity map.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Step 2 -->\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-4 inline-block rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 px-4 py-2 text-2xl font-bold text-white\">\n 02\n \u003C\u002Fdiv>\n \u003Ch3 class=\"mb-3 text-2xl font-bold\">Build\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n Design system & UX flows; ship in weekly increments; code hand-in-hand.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Step 3 -->\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"p-6\">\n \u003Cdiv class=\"mb-4 inline-block rounded-lg bg-gradient-to-br from-orange-500 to-amber-500 px-4 py-2 text-2xl font-bold text-white\">\n 03\n \u003C\u002Fdiv>\n \u003Ch3 class=\"mb-3 text-2xl font-bold\">Scale\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n Experiment roadmap, dashboards, enablement docs, handoff or retainer.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Tooling Stack Section -->\n \u003Csection class=\"bg-background px-4 py-16 md:py-24\">\n \u003Cdiv class=\"mx-auto max-w-7xl\">\n \u003Cdiv class=\"mb-12 space-y-4 text-center\">\n \u003Ch2 class=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">Tooling & Stack\u003C\u002Fh2>\n \u003Cp class=\"mx-auto max-w-2xl text-lg text-gray-600 leading-relaxed\">\n Modern, proven technologies for speed and reliability.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"grid gap-8 sm:grid-cols-2 lg:grid-cols-4\">\n \u003Cdiv class=\"space-y-4\">\n \u003Ch3 class=\"font-bold text-lg\">Design\u003C\u002Fh3>\n \u003Cul class=\"space-y-2 text-sm text-gray-600\">\n \u003Cli>• Figma\u003C\u002Fli>\n \u003Cli>• FigJam\u003C\u002Fli>\n \u003Cli>• Maze\u003C\u002Fli>\n \u003Cli>• Hotjar\u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"space-y-4\">\n \u003Ch3 class=\"font-bold text-lg\">Frontend\u003C\u002Fh3>\n \u003Cul class=\"space-y-2 text-sm text-gray-600\">\n \u003Cli>• Next.js\u003C\u002Fli>\n \u003Cli>• React\u003C\u002Fli>\n \u003Cli>• TypeScript\u003C\u002Fli>\n \u003Cli>• Tailwind CSS\u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"space-y-4\">\n \u003Ch3 class=\"font-bold text-lg\">CMS & Data\u003C\u002Fh3>\n \u003Cul class=\"space-y-2 text-sm text-gray-600\">\n \u003Cli>• Sanity\u003C\u002Fli>\n \u003Cli>• Contentful\u003C\u002Fli>\n \u003Cli>• Supabase\u003C\u002Fli>\n \u003Cli>• PostgreSQL\u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"space-y-4\">\n \u003Ch3 class=\"font-bold text-lg\">Analytics\u003C\u002Fh3>\n \u003Cul class=\"space-y-2 text-sm text-gray-600\">\n \u003Cli>• GA4\u003C\u002Fli>\n \u003Cli>• PostHog\u003C\u002Fli>\n \u003Cli>• Mixpanel\u003C\u002Fli>\n \u003Cli>• Looker Studio\u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Pricing Section -->\n \u003Csection id=\"pricing\" class=\"bg-gray-50 px-4 py-16 md:py-24\">\n \u003Cdiv class=\"mx-auto max-w-7xl\">\n \u003Cdiv class=\"mb-12 space-y-4 text-center\">\n \u003Ch2 class=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">\n Engagement Models & Starting Fees\n \u003C\u002Fh2>\n \u003Cp class=\"mx-auto max-w-2xl text-lg text-gray-600 leading-relaxed\">\n Transparent pricing for predictable outcomes.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"grid gap-8 md:grid-cols-3\">\n \u003C!-- Pricing 1 -->\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"h-2 gradient-blue\">\u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Ch3 class=\"text-2xl font-bold mb-2\">Launch Sprint\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 mb-4\">4 weeks\u003C\u002Fp>\n \u003Cdiv class=\"mb-6\">\n \u003Cspan class=\"text-4xl font-bold\">$16,000\u003C\u002Fspan>\n \u003Cspan class=\"text-gray-600\"> fixed\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cul class=\"space-y-3 mb-6\">\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">IA\u002FUX for 6 core pages\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">Design system seed\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">Next.js build\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">CMS (Sanity) setup\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">SEO tech setup\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">Analytics baseline\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Pricing 2 - Popular -->\n \u003Cdiv class=\"card border-2 border-black shadow-lg relative\">\n \u003Cdiv class=\"absolute right-4 top-4 rounded-full bg-black px-3 py-1 text-xs font-semibold text-white\">\n Popular\n \u003C\u002Fdiv>\n \u003Cdiv class=\"h-2 gradient-purple\">\u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Ch3 class=\"text-2xl font-bold mb-2\">Growth Retainer\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 mb-4\">monthly\u003C\u002Fp>\n \u003Cdiv class=\"mb-6\">\n \u003Cspan class=\"text-4xl font-bold\">$6,500\u003C\u002Fspan>\n \u003Cspan class=\"text-gray-600\"> \u002Fmo\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cul class=\"space-y-3 mb-6\">\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">2 experiments per month\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">2 content posts per month\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">CRO optimization\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">Dashboards & reporting\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">Backlog shaping\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">Cancel with 30-day notice\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Pricing 3 -->\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"h-2 gradient-orange\">\u003C\u002Fdiv>\n \u003Cdiv class=\"p-6\">\n \u003Ch3 class=\"text-2xl font-bold mb-2\">Design System Package\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 mb-4\">6–8 weeks\u003C\u002Fp>\n \u003Cdiv class=\"mb-6\">\n \u003Cspan class=\"text-4xl font-bold\">$22,000\u003C\u002Fspan>\n \u003Cspan class=\"text-gray-600\"> fixed\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cul class=\"space-y-3 mb-6\">\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">Design tokens\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">Component library\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">Usage documentation\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">Accessibility tests\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">Code library starter\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003Cli class=\"flex items-start gap-3\">\n \u003Ci data-lucide=\"check\" class=\"w-5 h-5 text-black mt-0.5\">\u003C\u002Fi>\n \u003Cspan class=\"text-sm\">Figma + code handoff\u003C\u002Fspan>\n \u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"mt-12 space-y-6 text-center\">\n \u003Cp class=\"text-sm text-gray-600\">\n \u003Cstrong>Billing:\u003C\u002Fstrong> 50% deposit to start, remainder on delivery; month-to-month after first cycle;\n cancel with 30-day notice.\n \u003C\u002Fp>\n \u003Cdiv class=\"flex flex-col gap-4 sm:flex-row sm:justify-center\">\n \u003Ca href=\"#book-call\" class=\"btn btn-primary text-lg px-8 py-4\">Book a Discovery Call\u003C\u002Fa>\n \u003Ca href=\"\u002Fnoah-chen-capabilities.pdf\" download class=\"btn btn-outline text-lg px-8 py-4\">\n Get Capabilities Deck (PDF)\n \u003C\u002Fa>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- About Section -->\n \u003Csection id=\"about\" class=\"bg-background px-4 py-16 md:py-24\">\n \u003Cdiv class=\"mx-auto max-w-7xl\">\n \u003Cdiv class=\"grid gap-12 lg:grid-cols-2 items-center\">\n \u003Cdiv class=\"relative aspect-square max-w-md mx-auto\">\n \u003Cimg src=\"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fnoah-headshot.jpg\" \n alt=\"Noah Chen headshot\" \n class=\"w-full h-full object-cover rounded-lg\">\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"space-y-6\">\n \u003Ch2 class=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">About Noah\u003C\u002Fh2>\n \u003Cdiv class=\"space-y-4 text-gray-600 leading-relaxed\">\n \u003Cp>\n I'm a product designer and frontend engineer based in Seattle. Over the past 8 years, I've helped\n SaaS, fintech, and e-commerce teams ship products that convert and scale.\n \u003C\u002Fp>\n \u003Cp>\n My background spans UX research, design systems, React\u002FNext.js development, and growth\n experimentation. I believe the best products come from tight collaboration between design,\n engineering, and data.\n \u003C\u002Fp>\n \u003Cp>\n When I'm not designing or coding, you'll find me hiking the Cascades, experimenting with new coffee\n brewing methods, or contributing to open-source design tools.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"flex flex-wrap gap-4\">\n \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fnoahchen\" target=\"_blank\" class=\"btn btn-outline\">\n \u003Ci data-lucide=\"linkedin\" class=\"w-4 h-4 mr-2\">\u003C\u002Fi>\n LinkedIn\n \u003C\u002Fa>\n \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fnoah_chen\" target=\"_blank\" class=\"btn btn-outline\">\n \u003Ci data-lucide=\"twitter\" class=\"w-4 h-4 mr-2\">\u003C\u002Fi>\n Twitter\n \u003C\u002Fa>\n \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnoahchen\" target=\"_blank\" class=\"btn btn-outline\">\n \u003Ci data-lucide=\"github\" class=\"w-4 h-4 mr-2\">\u003C\u002Fi>\n GitHub\n \u003C\u002Fa>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Testimonials Section -->\n \u003Csection class=\"bg-gray-50 px-4 py-16 md:py-24\">\n \u003Cdiv class=\"mx-auto max-w-7xl\">\n \u003Cdiv class=\"mb-12 space-y-4 text-center\">\n \u003Ch2 class=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">What Clients Say\u003C\u002Fh2>\n \u003Cdiv class=\"flex items-center justify-center gap-2\">\n \u003Cdiv class=\"flex\">\n \u003Ci data-lucide=\"star\" class=\"w-5 h-5 text-yellow-500 fill-yellow-500\">\u003C\u002Fi>\n \u003Ci data-lucide=\"star\" class=\"w-5 h-5 text-yellow-500 fill-yellow-500\">\u003C\u002Fi>\n \u003Ci data-lucide=\"star\" class=\"w-5 h-5 text-yellow-500 fill-yellow-500\">\u003C\u002Fi>\n \u003Ci data-lucide=\"star\" class=\"w-5 h-5 text-yellow-500 fill-yellow-500\">\u003C\u002Fi>\n \u003Ci data-lucide=\"star\" class=\"w-5 h-5 text-yellow-500 fill-yellow-500\">\u003C\u002Fi>\n \u003C\u002Fdiv>\n \u003Cspan class=\"text-sm text-gray-600\">4.9\u002F5 across 76 client reviews\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"relative mx-auto max-w-4xl\">\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"p-8 md:p-12\">\n \u003Cdiv id=\"testimonial-content\" class=\"space-y-6\">\n \u003C!-- Testimonial content will be dynamically updated -->\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"mt-6 flex justify-center gap-2\" id=\"testimonial-dots\">\n \u003C!-- Dots will be dynamically generated -->\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Book Call Section -->\n \u003Csection id=\"book-call\" class=\"bg-background px-4 py-16 md:py-24\">\n \u003Cdiv class=\"mx-auto max-w-3xl\">\n \u003Cdiv class=\"mb-12 space-y-4 text-center\">\n \u003Ch2 class=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">Book a Discovery Call\u003C\u002Fh2>\n \u003Cp class=\"mx-auto max-w-2xl text-lg text-gray-600 leading-relaxed\">\n Let's discuss your project goals and see if we're a good fit.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"p-8\">\n \u003Cform id=\"contact-form\" class=\"space-y-6\">\n \u003Cdiv class=\"grid gap-6 sm:grid-cols-2\">\n \u003Cdiv>\n \u003Clabel for=\"name\" class=\"block text-sm font-medium mb-2\">Name *\u003C\u002Flabel>\n \u003Cinput type=\"text\" id=\"name\" name=\"name\" required placeholder=\"Your name\">\n \u003C\u002Fdiv>\n \u003Cdiv>\n \u003Clabel for=\"email\" class=\"block text-sm font-medium mb-2\">Email *\u003C\u002Flabel>\n \u003Cinput type=\"email\" id=\"email\" name=\"email\" required placeholder=\"you@company.com\">\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cdiv>\n \u003Clabel for=\"company\" class=\"block text-sm font-medium mb-2\">Company\u003C\u002Flabel>\n \u003Cinput type=\"text\" id=\"company\" name=\"company\" placeholder=\"Your company\">\n \u003C\u002Fdiv>\n\n \u003Cdiv>\n \u003Clabel for=\"project\" class=\"block text-sm font-medium mb-2\">Project Type *\u003C\u002Flabel>\n \u003Cselect id=\"project\" name=\"project\" required class=\"w-full p-3 border border-gray-300 rounded-lg\">\n \u003Coption value=\"\">Select a project type\u003C\u002Foption>\n \u003Coption value=\"launch-sprint\">Launch Sprint\u003C\u002Foption>\n \u003Coption value=\"growth-retainer\">Growth Retainer\u003C\u002Foption>\n \u003Coption value=\"design-system\">Design System\u003C\u002Foption>\n \u003Coption value=\"other\">Other\u003C\u002Foption>\n \u003C\u002Fselect>\n \u003C\u002Fdiv>\n\n \u003Cdiv>\n \u003Clabel for=\"message\" class=\"block text-sm font-medium mb-2\">Tell me about your project *\u003C\u002Flabel>\n \u003Ctextarea id=\"message\" name=\"message\" required rows=\"5\" \n placeholder=\"What are your goals? What challenges are you facing?\">\u003C\u002Ftextarea>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"flex items-start gap-3\">\n \u003Cinput type=\"checkbox\" id=\"privacy\" name=\"privacy\" required class=\"mt-1\">\n \u003Clabel for=\"privacy\" class=\"text-sm text-gray-600\">\n I agree to the \u003Ca href=\"\u002Fprivacy\" class=\"underline\">privacy policy\u003C\u002Fa> and understand my data \n will be processed securely.\n \u003C\u002Flabel>\n \u003C\u002Fdiv>\n\n \u003Cbutton type=\"submit\" class=\"btn btn-primary w-full text-lg py-4\">\n Send Message\n \u003C\u002Fbutton>\n\n \u003Cp class=\"text-center text-sm text-gray-600\">\n \u003Ci data-lucide=\"shield-check\" class=\"w-4 h-4 inline mr-1\">\u003C\u002Fi>\n Your information is secure and will never be shared.\n \u003C\u002Fp>\n \u003C\u002Fform>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Blog Section -->\n \u003Csection id=\"blog\" class=\"bg-gray-50 px-4 py-16 md:py-24\">\n \u003Cdiv class=\"mx-auto max-w-7xl\">\n \u003Cdiv class=\"mb-12 space-y-4 text-center\">\n \u003Ch2 class=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">Latest Insights\u003C\u002Fh2>\n \u003Cp class=\"mx-auto max-w-2xl text-lg text-gray-600 leading-relaxed\">\n Thoughts on design, development, and growth.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"grid gap-8 md:grid-cols-3\">\n \u003C!-- Blog Post 1 -->\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"p-6\">\n \u003Cspan class=\"text-xs text-gray-600\">Jan 15, 2025\u003C\u002Fspan>\n \u003Ch3 class=\"text-xl font-bold mt-2 mb-3\">\n \u003Ca href=\"\u002Fblog\u002Fdesign-systems-roi\" class=\"hover:underline\">\n The ROI of Design Systems: Beyond Component Libraries\n \u003C\u002Fa>\n \u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed mb-4\">\n How to measure and communicate the business value of design systems to stakeholders.\n \u003C\u002Fp>\n \u003Ca href=\"\u002Fblog\u002Fdesign-systems-roi\" class=\"text-sm font-medium hover:underline\">\n Read more →\n \u003C\u002Fa>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Blog Post 2 -->\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"p-6\">\n \u003Cspan class=\"text-xs text-gray-600\">Jan 8, 2025\u003C\u002Fspan>\n \u003Ch3 class=\"text-xl font-bold mt-2 mb-3\">\n \u003Ca href=\"\u002Fblog\u002Fnext-js-performance\" class=\"hover:underline\">\n Next.js Performance Optimization: A Practical Guide\n \u003C\u002Fa>\n \u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed mb-4\">\n Techniques for achieving sub-second load times with Next.js App Router.\n \u003C\u002Fp>\n \u003Ca href=\"\u002Fblog\u002Fnext-js-performance\" class=\"text-sm font-medium hover:underline\">\n Read more →\n \u003C\u002Fa>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Blog Post 3 -->\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"p-6\">\n \u003Cspan class=\"text-xs text-gray-600\">Dec 28, 2024\u003C\u002Fspan>\n \u003Ch3 class=\"text-xl font-bold mt-2 mb-3\">\n \u003Ca href=\"\u002Fblog\u002Fcro-framework\" class=\"hover:underline\">\n A Framework for Conversion Rate Optimization\n \u003C\u002Fa>\n \u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed mb-4\">\n My systematic approach to identifying and testing conversion opportunities.\n \u003C\u002Fp>\n \u003Ca href=\"\u002Fblog\u002Fcro-framework\" class=\"text-sm font-medium hover:underline\">\n Read more →\n \u003C\u002Fa>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"mt-12 text-center\">\n \u003Ca href=\"\u002Fblog\" class=\"btn btn-outline\">View All Posts\u003C\u002Fa>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- FAQ Section -->\n \u003Csection id=\"faq\" class=\"bg-background px-4 py-16 md:py-24\">\n \u003Cdiv class=\"mx-auto max-w-3xl\">\n \u003Cdiv class=\"mb-12 space-y-4 text-center\">\n \u003Ch2 class=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">Frequently Asked Questions\u003C\u002Fh2>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"space-y-4\">\n \u003C!-- FAQ 1 -->\n \u003Cdiv class=\"card\">\n \u003Cbutton class=\"accordion-button\" onclick=\"toggleAccordion(0)\">\n \u003Cspan>What's included in a Launch Sprint?\u003C\u002Fspan>\n \u003Ci data-lucide=\"chevron-down\" class=\"w-5 h-5 accordion-icon\">\u003C\u002Fi>\n \u003C\u002Fbutton>\n \u003Cdiv class=\"accordion-content\" id=\"accordion-0\">\n \u003Cdiv class=\"p-6 pt-0 text-sm text-gray-600 leading-relaxed\">\n A Launch Sprint includes strategy workshop, IA\u002FUX for 6 core pages, design system seed, \n Next.js build, CMS setup, SEO foundation, and analytics baseline—all delivered in 4 weeks.\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- FAQ 2 -->\n \u003Cdiv class=\"card\">\n \u003Cbutton class=\"accordion-button\" onclick=\"toggleAccordion(1)\">\n \u003Cspan>Do you work with startups or only established companies?\u003C\u002Fspan>\n \u003Ci data-lucide=\"chevron-down\" class=\"w-5 h-5 accordion-icon\">\u003C\u002Fi>\n \u003C\u002Fbutton>\n \u003Cdiv class=\"accordion-content\" id=\"accordion-1\">\n \u003Cdiv class=\"p-6 pt-0 text-sm text-gray-600 leading-relaxed\">\n I work with both! Startups benefit from fast execution and lean processes, while established \n companies appreciate the strategic depth and systems thinking.\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- FAQ 3 -->\n \u003Cdiv class=\"card\">\n \u003Cbutton class=\"accordion-button\" onclick=\"toggleAccordion(2)\">\n \u003Cspan>Can I hire you for just design or just development?\u003C\u002Fspan>\n \u003Ci data-lucide=\"chevron-down\" class=\"w-5 h-5 accordion-icon\">\u003C\u002Fi>\n \u003C\u002Fbutton>\n \u003Cdiv class=\"accordion-content\" id=\"accordion-2\">\n \u003Cdiv class=\"p-6 pt-0 text-sm text-gray-600 leading-relaxed\">\n Yes, but I find the best results come from integrated design + development. That said, I can \n scope design-only or dev-only projects depending on your needs.\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- FAQ 4 -->\n \u003Cdiv class=\"card\">\n \u003Cbutton class=\"accordion-button\" onclick=\"toggleAccordion(3)\">\n \u003Cspan>What's your typical turnaround time?\u003C\u002Fspan>\n \u003Ci data-lucide=\"chevron-down\" class=\"w-5 h-5 accordion-icon\">\u003C\u002Fi>\n \u003C\u002Fbutton>\n \u003Cdiv class=\"accordion-content\" id=\"accordion-3\">\n \u003Cdiv class=\"p-6 pt-0 text-sm text-gray-600 leading-relaxed\">\n Launch Sprints are 4 weeks, Design Systems are 6-8 weeks, and Growth Retainers run month-to-month \n with 2 experiments per cycle.\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- FAQ 5 -->\n \u003Cdiv class=\"card\">\n \u003Cbutton class=\"accordion-button\" onclick=\"toggleAccordion(4)\">\n \u003Cspan>Do you offer ongoing support after launch?\u003C\u002Fspan>\n \u003Ci data-lucide=\"chevron-down\" class=\"w-5 h-5 accordion-icon\">\u003C\u002Fi>\n \u003C\u002Fbutton>\n \u003Cdiv class=\"accordion-content\" id=\"accordion-4\">\n \u003Cdiv class=\"p-6 pt-0 text-sm text-gray-600 leading-relaxed\">\n Yes! The Growth Retainer is designed for ongoing optimization, experimentation, and support. \n I also offer ad-hoc support packages.\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- FAQ 6 -->\n \u003Cdiv class=\"card\">\n \u003Cbutton class=\"accordion-button\" onclick=\"toggleAccordion(5)\">\n \u003Cspan>What if I need to cancel or pause?\u003C\u002Fspan>\n \u003Ci data-lucide=\"chevron-down\" class=\"w-5 h-5 accordion-icon\">\u003C\u002Fi>\n \u003C\u002Fbutton>\n \u003Cdiv class=\"accordion-content\" id=\"accordion-5\">\n \u003Cdiv class=\"p-6 pt-0 text-sm text-gray-600 leading-relaxed\">\n Growth Retainers can be canceled with 30-day notice. Fixed-price projects have milestone-based \n payments, so you're never locked in beyond the current phase.\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Final CTA Section -->\n \u003Csection class=\"bg-black text-white px-4 py-16 md:py-24\">\n \u003Cdiv class=\"mx-auto max-w-4xl text-center space-y-8\">\n \u003Ch2 class=\"text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">\n Ready to Ship Something Great?\n \u003C\u002Fh2>\n \u003Cp class=\"text-lg text-gray-300 leading-relaxed max-w-2xl mx-auto\">\n Let's turn your product vision into a conversion-optimized reality. Book a call or download my \n capabilities deck to learn more.\n \u003C\u002Fp>\n \u003Cdiv class=\"flex flex-col gap-4 sm:flex-row sm:justify-center\">\n \u003Ca href=\"#book-call\" class=\"btn btn-primary text-lg px-8 py-4\" style=\"background-color: white; color: black;\">\n Book a Discovery Call\n \u003C\u002Fa>\n \u003Ca href=\"\u002Fnoah-chen-capabilities.pdf\" download class=\"btn btn-outline text-lg px-8 py-4\" \n style=\"border-color: white; color: white;\">\n Get Capabilities Deck (PDF)\n \u003C\u002Fa>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Footer -->\n \u003Cfooter class=\"border-t bg-background px-4 py-12\">\n \u003Cdiv class=\"mx-auto max-w-7xl\">\n \u003Cdiv class=\"grid gap-8 md:grid-cols-2 lg:grid-cols-4\">\n \u003Cdiv class=\"space-y-4\">\n \u003Ch3 class=\"font-bold text-lg\">Noah Chen\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n Product Designer & Frontend Engineer helping teams ship products that perform.\n \u003C\u002Fp>\n \u003Cdiv class=\"flex gap-3\">\n \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fnoahchen\" target=\"_blank\" \n class=\"text-gray-600 hover:text-black transition-colors\">\n \u003Ci data-lucide=\"linkedin\" class=\"w-5 h-5\">\u003C\u002Fi>\n \u003C\u002Fa>\n \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fnoah_chen\" target=\"_blank\" \n class=\"text-gray-600 hover:text-black transition-colors\">\n \u003Ci data-lucide=\"twitter\" class=\"w-5 h-5\">\u003C\u002Fi>\n \u003C\u002Fa>\n \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnoahchen\" target=\"_blank\" \n class=\"text-gray-600 hover:text-black transition-colors\">\n \u003Ci data-lucide=\"github\" class=\"w-5 h-5\">\u003C\u002Fi>\n \u003C\u002Fa>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cdiv>\n \u003Ch4 class=\"mb-4 font-semibold\">Navigation\u003C\u002Fh4>\n \u003Cul class=\"space-y-2\">\n \u003Cli>\u003Ca href=\"#about\" class=\"text-sm text-gray-600 hover:text-black transition-colors\">About\u003C\u002Fa>\u003C\u002Fli>\n \u003Cli>\u003Ca href=\"#services\" class=\"text-sm text-gray-600 hover:text-black transition-colors\">Services\u003C\u002Fa>\u003C\u002Fli>\n \u003Cli>\u003Ca href=\"#case-studies\" class=\"text-sm text-gray-600 hover:text-black transition-colors\">Case Studies\u003C\u002Fa>\u003C\u002Fli>\n \u003Cli>\u003Ca href=\"\u002Fblog\" class=\"text-sm text-gray-600 hover:text-black transition-colors\">Blog\u003C\u002Fa>\u003C\u002Fli>\n \u003Cli>\u003Ca href=\"#pricing\" class=\"text-sm text-gray-600 hover:text-black transition-colors\">Pricing\u003C\u002Fa>\u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n\n \u003Cdiv>\n \u003Ch4 class=\"mb-4 font-semibold\">Legal\u003C\u002Fh4>\n \u003Cul class=\"space-y-2\">\n \u003Cli>\u003Ca href=\"\u002Fprivacy\" class=\"text-sm text-gray-600 hover:text-black transition-colors\">Privacy\u003C\u002Fa>\u003C\u002Fli>\n \u003Cli>\u003Ca href=\"\u002Fterms\" class=\"text-sm text-gray-600 hover:text-black transition-colors\">Terms\u003C\u002Fa>\u003C\u002Fli>\n \u003Cli>\u003Ca href=\"\u002Fsecurity\" class=\"text-sm text-gray-600 hover:text-black transition-colors\">Security\u003C\u002Fa>\u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n\n \u003Cdiv>\n \u003Ch4 class=\"mb-4 font-semibold\">Contact\u003C\u002Fh4>\n \u003Caddress class=\"space-y-2 text-sm text-gray-600 not-italic\">\n \u003Cp>Noah Chen Studio\u003C\u002Fp>\n \u003Cp>1620 7th Ave\u003C\u002Fp>\n \u003Cp>Seattle, WA 98101\u003C\u002Fp>\n \u003Cp class=\"mt-3\">\n \u003Ca href=\"tel:+12065550147\" class=\"hover:text-black\">+1 (206) 555-0147\u003C\u002Fa>\n \u003C\u002Fp>\n \u003Cp>\n \u003Ca href=\"mailto:hello@noahchen.example\" class=\"hover:text-black\">hello@noahchen.example\u003C\u002Fa>\n \u003C\u002Fp>\n \u003C\u002Faddress>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"mt-12 border-t pt-8 text-center text-sm text-gray-600\">\n \u003Cp>© 2025 Noah Chen. All rights reserved.\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Ffooter>\n\n \u003C!-- Mobile Action Bar -->\n \u003Cdiv class=\"mobile-action-bar\">\n \u003Ca href=\"#book-call\" class=\"btn btn-primary flex-1\">Book Call\u003C\u002Fa>\n \u003Ca href=\"\u002Fnoah-chen-capabilities.pdf\" download class=\"btn btn-outline flex-1\">Get Deck\u003C\u002Fa>\n \u003C\u002Fdiv>\n\n \u003C!-- JSON-LD Schema -->\n \u003Cscript type=\"application\u002Fld+json\">\n {\n \"@context\": \"https:\u002F\u002Fschema.org\",\n \"@graph\": [\n {\n \"@type\": \"Person\",\n \"name\": \"Noah Chen\",\n \"jobTitle\": \"Product Designer & Frontend Engineer\",\n \"url\": \"https:\u002F\u002Fnoahchen.example\",\n \"image\": \"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Fnoah-headshot.jpg\",\n \"worksFor\": {\n \"@type\": \"Organization\",\n \"name\": \"Noah Chen Studio\"\n },\n \"address\": {\n \"@type\": \"PostalAddress\",\n \"addressLocality\": \"Seattle\",\n \"addressRegion\": \"WA\",\n \"addressCountry\": \"US\"\n },\n \"sameAs\": [\n \"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fnoahchen\",\n \"https:\u002F\u002Ftwitter.com\u002Fnoah_chen\",\n \"https:\u002F\u002Fgithub.com\u002Fnoahchen\",\n \"https:\u002F\u002Fdribbble.com\u002Fnoahchen\"\n ]\n },\n {\n \"@type\": \"ProfessionalService\",\n \"name\": \"Design, Frontend, and Growth Services\",\n \"provider\": {\n \"@type\": \"Person\",\n \"name\": \"Noah Chen\"\n },\n \"areaServed\": [\"US\", \"CA\", \"EU\", \"APAC\"],\n \"serviceType\": [\n \"Product & UX\",\n \"Design Systems\",\n \"Web & Frontend\",\n \"CRO & Experimentation\",\n \"Content & Docs\",\n \"Analytics & RevOps\"\n ],\n \"url\": \"https:\u002F\u002Fnoahchen.example\u002Fservices\",\n \"hasOfferCatalog\": {\n \"@type\": \"OfferCatalog\",\n \"name\": \"Engagement Models\",\n \"itemListElement\": [\n {\n \"@type\": \"Offer\",\n \"name\": \"Launch Sprint\",\n \"price\": \"16000\",\n \"priceCurrency\": \"USD\",\n \"availability\": \"https:\u002F\u002Fschema.org\u002FInStock\"\n },\n {\n \"@type\": \"Offer\",\n \"name\": \"Growth Retainer\",\n \"price\": \"6500\",\n \"priceCurrency\": \"USD\",\n \"availability\": \"https:\u002F\u002Fschema.org\u002FInStock\"\n },\n {\n \"@type\": \"Offer\",\n \"name\": \"Design System Package\",\n \"price\": \"22000\",\n \"priceCurrency\": \"USD\",\n \"availability\": \"https:\u002F\u002Fschema.org\u002FInStock\"\n }\n ]\n }\n }\n ]\n }\n \u003C\u002Fscript>\n\n \u003C!-- JavaScript -->\n \u003Cscript>\n \u002F\u002F Initialize Lucide icons\n lucide.createIcons();\n\n \u002F\u002F Work filter functionality\n function filterWork(category) {\n const items = document.querySelectorAll('.work-item');\n const buttons = document.querySelectorAll('#work button');\n \n buttons.forEach(btn => {\n btn.classList.remove('btn-primary');\n btn.classList.add('btn-outline');\n });\n \n event.target.classList.remove('btn-outline');\n event.target.classList.add('btn-primary');\n \n items.forEach(item => {\n if (category === 'all' || item.dataset.category === category) {\n item.style.display = 'block';\n } else {\n item.style.display = 'none';\n }\n });\n }\n\n \u002F\u002F Testimonials carousel\n const testimonials = [\n {\n quote: \"We shipped a new POV and site in four weeks and pipeline jumped within a month.\",\n author: \"Maya T.\",\n role: \"CMO, NovaCRM\",\n rating: 5,\n avatar: \"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Ftestimonials\u002Fsarah-chen.jpg\"\n },\n {\n quote: \"Attribution finally made sense; we cut waste and scaled winners.\",\n author: \"Priya S.\",\n role: \"Growth Lead, KiteBank\",\n rating: 5,\n avatar: \"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Ftestimonials\u002Femily-watson.jpg\"\n },\n {\n quote: \"Noah's design system cut our build time by 60% and improved consistency across all touchpoints.\",\n author: \"James L.\",\n role: \"VP Product, ClearStack\",\n rating: 5,\n avatar: \"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Ftemplates\u002Fportfolio\u002Fimages\u002Ftestimonials\u002Fdavid-kim.jpg\"\n }\n ];\n\n let currentTestimonial = 0;\n\n function updateTestimonial() {\n const content = document.getElementById('testimonial-content');\n const t = testimonials[currentTestimonial];\n \n content.innerHTML = `\n \u003Cdiv class=\"flex\">\n ${Array(t.rating).fill('\u003Ci data-lucide=\"star\" class=\"w-5 h-5 text-yellow-500 fill-yellow-500\">\u003C\u002Fi>').join('')}\n \u003C\u002Fdiv>\n \u003Cblockquote class=\"text-xl font-medium leading-relaxed md:text-2xl\">\n \"${t.quote}\"\n \u003C\u002Fblockquote>\n \u003Cdiv class=\"flex items-center gap-4\">\n \u003Cdiv class=\"relative h-12 w-12 overflow-hidden rounded-full\">\n \u003Cimg src=\"${t.avatar}\" alt=\"${t.author}\" class=\"w-full h-full object-cover\">\n \u003C\u002Fdiv>\n \u003Cdiv>\n \u003Cp class=\"font-semibold\">${t.author}\u003C\u002Fp>\n \u003Cp class=\"text-sm text-gray-600\">${t.role}\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n `;\n \n lucide.createIcons();\n updateDots();\n }\n\n function updateDots() {\n const dotsContainer = document.getElementById('testimonial-dots');\n dotsContainer.innerHTML = testimonials.map((_, index) => `\n \u003Cbutton \n onclick=\"currentTestimonial = ${index}; updateTestimonial()\"\n class=\"h-2 w-2 rounded-full transition-all ${index === currentTestimonial ? 'w-8 bg-black' : 'bg-gray-300'}\"\n aria-label=\"View testimonial ${index + 1}\"\n >\u003C\u002Fbutton>\n `).join('');\n }\n\n \u002F\u002F Auto-rotate testimonials\n setInterval(() => {\n currentTestimonial = (currentTestimonial + 1) % testimonials.length;\n updateTestimonial();\n }, 5000);\n\n \u002F\u002F Initialize testimonials\n updateTestimonial();\n\n \u002F\u002F Accordion functionality\n function toggleAccordion(index) {\n const content = document.getElementById(`accordion-${index}`);\n const allContents = document.querySelectorAll('.accordion-content');\n \n allContents.forEach((item, i) => {\n if (i === index) {\n item.classList.toggle('active');\n } else {\n item.classList.remove('active');\n }\n });\n \n lucide.createIcons();\n }\n\n \u002F\u002F Form submission\n document.getElementById('contact-form').addEventListener('submit', function(e) {\n e.preventDefault();\n alert('Thank you for your message! I\\'ll get back to you within 24 hours.');\n this.reset();\n });\n\n \u002F\u002F Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n });\n });\n \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","\u003C?xml version=\"1.0\" encoding=\"UTF-8\"?>\n\u003CError>\n \u003CCode>NoSuchKey\u003C\u002FCode>\n \u003CMessage>The specified key does not exist.\u003C\u002FMessage>\n \u003CRequestId>69F19D9F7D4DF538374DBC42\u003C\u002FRequestId>\n \u003CHostId>cdn.landing-page.io\u003C\u002FHostId>\n \u003CKey>landingpage_io\u002Ftemplates\u002Fecommerce-landing-page\u002Fecommerce-landing-page.html\u003C\u002FKey>\n \u003CEC>0026-00000001\u003C\u002FEC>\n \u003CRecommendDoc>https:\u002F\u002Fapi.alibabacloud.com\u002Ftroubleshoot?q=0026-00000001\u003C\u002FRecommendDoc>\n\u003C\u002FError>\n",1777442206880]