[{"data":1,"prerenderedAt":141},["ShallowReactive",2],{"use-cases-ecommerce-landing-page-de":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_de\u002Fuse_cases\u002Fde\u002Fecommerce-landing-page.json","Starte eine E-Commerce-Drop-Seite mit hohem Conversion-Rate",{"title":7,"do":8,"avoid":15},"Best Practices",{"title":9,"items":10},"TUN",[11,12,13,14],"Verwende hochwertige Produktfotografie, die das Produkt aus mehreren Winkeln zeigt","Füge einen auffälligen Countdown-Timer ein, um Druck und Vorfreude aufzubauen","Füge sozialen Beweis hinzu wie Live-Zuschauerzahlen, bisherige Ausverkaufs-Rekorde oder Kundenfotos","Biete eine 'Benachrichtige mich'-Option, um E-Mails von Besuchern zu erfassen, die zu früh oder zu spät kommen",{"title":16,"items":17},"VERMEIDEN",[18,19,20,21],"Vermeide minderwertige oder generische Produktbilder — Drops erfordern Premium-Visuals","Erzeuge keine gefälschte Knappheit, die das Vertrauen deines Publikums schädigt","Verzichte auf komplizierte Checkout-Abläufe — vereinfache den Weg zum Kauf","Vernachlässige niemals mobile Nutzer, wo über 65% des Drop-Verkehrs herkommt",{"title":23,"description":24,"items":25},"Textvorlagen","Verwende diese als Inspiration für deinen eigenen Text. Passe sie an deine Markenstimme und dein spezifisches Angebot an.",[26,29,32,42],{"label":27,"content":28},"Überschrift","Der [Produktname]-Drop — Limitiert auf [Anzahl] Stück",{"label":30,"content":31},"Unterüberschrift","Verpasse nicht den Release, auf den alle warten. Drop am [Datum] um [Uhrzeit].",{"label":33,"content":34},"Nutzenpunkte",[35,38,40],{"icon":36,"content":37},"check","Handgefertigte Details mit Premium-Materialien",{"icon":36,"content":39},"Limitiert auf [Anzahl] Stück weltweit",{"icon":36,"content":41},"Kostenloser Versand während des gesamten Drops",{"label":43,"content":44},"Call to Action","Benachrichtige mich beim Drop","https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Fimage\u002Fsolutions\u002Fnew\u002Fecommerce-product-drop.webp","Erzeuge Druck und steigere Verkäufe mit Countdown-Timern, Knappheits-Signalen und nahtlosem Checkout für limitierte Produkt-Drops.","json",{"title":49,"items":50},"Häufig gestellte Fragen",[51,54,57,60],{"label":52,"content":53},"Wann geht der Drop live?","Ein Live-Countdown-Timer sollte prominent in der Hero-Sektion angezeigt werden. Verwende vor dem Launch ein klares Datum und eine Uhrzeit mit Zeitzonenangabe, um Verwirrung zu vermeiden.",{"label":55,"content":56},"Wie viele Stücke sind verfügbar?","Transparenz ist entscheidend. Verwende einen Live-Mengenzähler (z.B. '50 Stück verbleibend'), um Druck zu erzeugen, ohne das Vertrauen zu beeinträchtigen.",{"label":58,"content":59},"Wie lautet die Rückgaberichtlinie?","Verlinke auf eine klare, prägnante Umtausch-\u002FRückgaberichtlinie, insbesondere für limitierte Artikel, die möglicherweise andere Regeln als Standardprodukte haben.",{"label":61,"content":62},"Kann ich einen Artikel vorbestellen oder reservieren?","Biete eine E-Mail-Benachrichtigung oder eine 'Benachrichtige mich'-Option an, um Interesse zu erfassen, aber manage Erwartungen bezüglich garantiertem Kauf.",{"title":64,"goal":65,"section_count":66,"drafting_time":67},"Schlüsselfakten","E-Commerce","6 Abschnitte","2-4 Min. zum Entwurf",{},7,{"title":71,"description":72,"items":73},"Probleme, die es löst","Eine Produkt-Drop-Landing-Seite erzeugt Druck und Exklusivität, die Standard-Produktseiten nicht bieten können, und treibt sofortige Handlungen sowie höhere Conversion-Raten an.",[74,75,76,77,78,79],"Treibt sofortige Käufe mit Countdown-Timern und Knappheits-Signalen an","Baut Vorfreude und Markenloyalität durch exklusive Release-Events auf","Erfasst E-Mail-Anmeldungen und Wartelisten-Interesse vor und nach Drops","Reduziert Warenkorbabbrüche mit optimiertem, mobilfreundlichem Checkout","Erzeugt teilbare Inhalte, die organisches Marketing und Mundpropaganda befeuern","Bietet ein einzelnes Ziel für Presse, Influencer und Kunden","{\n \"title\": \"Starte eine E-Commerce-Drop-Seite mit hohem Conversion-Rate\",\n \"description\": \"Erzeuge Druck und steigere Verkäufe mit Countdown-Timern, Knappheits-Signalen und nahtlosem Checkout für limitierte Produkt-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 \"Verkäufe\"\n ],\n \"sections\": {\n \"title\": \"Seiten-Blueprint\",\n \"description\": \"Dieser Anwendungsfall umfasst 6 Schlüsselseiten, die Besucher vom Bewusstsein zur Handlung führen.\",\n \"items\": [\n {\n \"title\": \"Hero\",\n \"description\": \"Präsentiere deinen Drop mit erstklassiger Produktfotografie, einer markanten Überschrift und einem auffälligen Countdown-Timer above the fold.\"\n },\n {\n \"title\": \"Produktgeschichte\",\n \"description\": \"Erzähle die Geschichte hinter dem Drop — was ihn inspiriert hat, was ihn exklusiv macht und warum jetzt der richtige Zeitpunkt zum Kauf ist.\"\n },\n {\n \"title\": \"Sozialer Beweis\",\n \"description\": \"Zeige Live-Zähler, bisherige Ausverkaufs-Rekorde, Kundenfotos und Presseerwähnungen, um FOMO und Glaubwürdigkeit aufzubauen.\"\n },\n {\n \"title\": \"Funktionen & Details\",\n \"description\": \"Hebe einzigartige Materialien, Handwerkskunst und Spezifikationen hervor, die Exklusivität und Preisniveau rechtfertigen.\"\n },\n {\n \"title\": \"Kauf\u002FVorbestellung\",\n \"description\": \"Biete klare CTAs an, die sich dem Drop-Status anpassen: 'Benachrichtige mich' vor dem Launch, 'Jetzt kaufen' währenddessen und 'Warteliste beitreten' nach dem Ausverkauf.\"\n },\n {\n \"title\": \"FAQ\",\n \"description\": \"Beantworte Fragen zu Verfügbarkeit, Rückgaberichtlinie, Lieferzeiten und wie man reserviert oder vorbestellt.\"\n }\n ]\n },\n \"who_it_is_for\": {\n \"title\": \"Für wen ist es geeignet\",\n \"items\": [\n \"DTC-Marken, die limitierte Produkt-Drops starten\",\n \"Streetwear- und Sneaker-Marken, die Hype für Releases aufbauen\",\n \"Verkäufer von Sammlerprodukten und Spezialartikeln\",\n \"E-Commerce-Teams, die Flash-Sales oder saisonale Kampagnen durchführen\",\n \"Unternehmer, die neue Produktkonzepte mit Vorbestellungen testen\"\n ]\n },\n \"problems_this_solves\": {\n \"title\": \"Probleme, die es löst\",\n \"description\": \"Eine Produkt-Drop-Landing-Seite erzeugt Druck und Exklusivität, die Standard-Produktseiten nicht bieten können, und treibt sofortige Handlungen sowie höhere Conversion-Raten an.\",\n \"items\": [\n \"Treibt sofortige Käufe mit Countdown-Timern und Knappheits-Signalen an\",\n \"Baut Vorfreude und Markenloyalität durch exklusive Release-Events auf\",\n \"Erfasst E-Mail-Anmeldungen und Wartelisten-Interesse vor und nach Drops\",\n \"Reduziert Warenkorbabbrüche mit optimiertem, mobilfreundlichem Checkout\",\n \"Erzeugt teilbare Inhalte, die organisches Marketing und Mundpropaganda befeuern\",\n \"Bietet ein einzelnes Ziel für Presse, Influencer und Kunden\"\n ]\n },\n \"copy_starters\": {\n \"title\": \"Textvorlagen\",\n \"description\": \"Verwende diese als Inspiration für deinen eigenen Text. Passe sie an deine Markenstimme und dein spezifisches Angebot an.\",\n \"items\": [\n {\n \"label\": \"Überschrift\",\n \"content\": \"Der [Produktname]-Drop — Limitiert auf [Anzahl] Stück\"\n },\n {\n \"label\": \"Unterüberschrift\",\n \"content\": \"Verpasse nicht den Release, auf den alle warten. Drop am [Datum] um [Uhrzeit].\"\n },\n {\n \"label\": \"Nutzenpunkte\",\n \"content\": [\n {\n \"icon\": \"check\",\n \"content\": \"Handgefertigte Details mit Premium-Materialien\"\n },\n {\n \"icon\": \"check\",\n \"content\": \"Limitiert auf [Anzahl] Stück weltweit\"\n },\n {\n \"icon\": \"check\",\n \"content\": \"Kostenloser Versand während des gesamten Drops\"\n }\n ]\n },\n {\n \"label\": \"Call to Action\",\n \"content\": \"Benachrichtige mich beim Drop\"\n }\n ]\n },\n \"best_practices\": {\n \"title\": \"Best Practices\",\n \"do\": {\n \"title\": \"TUN\",\n \"items\": [\n \"Verwende hochwertige Produktfotografie, die das Produkt aus mehreren Winkeln zeigt\",\n \"Füge einen auffälligen Countdown-Timer ein, um Druck und Vorfreude aufzubauen\",\n \"Füge sozialen Beweis hinzu wie Live-Zuschauerzahlen, bisherige Ausverkaufs-Rekorde oder Kundenfotos\",\n \"Biete eine 'Benachrichtige mich'-Option, um E-Mails von Besuchern zu erfassen, die zu früh oder zu spät kommen\"\n ]\n },\n \"avoid\": {\n \"title\": \"VERMEIDEN\",\n \"items\": [\n \"Vermeide minderwertige oder generische Produktbilder — Drops erfordern Premium-Visuals\",\n \"Erzeuge keine gefälschte Knappheit, die das Vertrauen deines Publikums schädigt\",\n \"Verzichte auf komplizierte Checkout-Abläufe — vereinfache den Weg zum Kauf\",\n \"Vernachlässige niemals mobile Nutzer, wo über 65% des Drop-Verkehrs herkommt\"\n ]\n }\n },\n \"seo_keywords\": {\n \"title\": \"SEO-Keywords\",\n \"description\": \"Verwende diese Keywords, um deine Seite für Suchmaschinen zu optimieren und die Auffindbarkeit zu verbessern.\",\n \"items\": [\n {\n \"list_name\": \"Primäres Keyword\",\n \"keywords\": [\n \"Produkt-Drop-Landing-Seite\"\n ]\n },\n {\n \"list_name\": \"Sekundäre Keywords\",\n \"keywords\": [\n \"limitierte Produktseite\",\n \"E-Commerce-Drop-Seiten-Vorlage\",\n \"Countdown-Landing-Seite\"\n ]\n },\n {\n \"list_name\": \"Long-Tail-Keywords\",\n \"keywords\": [\n \"wie man Druck für einen Produkt-Drop erzeugt\",\n \"beste E-Commerce-Landing-Seite für limitierte Releases\",\n \"Produkt-Drop-Countdown-Timer Best Practices\"\n ]\n }\n ]\n },\n \"key_facts\": {\n \"title\": \"Schlüsselfakten\",\n \"goal\": \"E-Commerce\",\n \"section_count\": \"6 Abschnitte\",\n \"drafting_time\": \"2-4 Min. zum Entwurf\"\n },\n \"faq\": {\n \"title\": \"Häufig gestellte Fragen\",\n \"items\": [\n {\n \"label\": \"Wann geht der Drop live?\",\n \"content\": \"Ein Live-Countdown-Timer sollte prominent in der Hero-Sektion angezeigt werden. Verwende vor dem Launch ein klares Datum und eine Uhrzeit mit Zeitzonenangabe, um Verwirrung zu vermeiden.\"\n },\n {\n \"label\": \"Wie viele Stücke sind verfügbar?\",\n \"content\": \"Transparenz ist entscheidend. Verwende einen Live-Mengenzähler (z.B. '50 Stück verbleibend'), um Druck zu erzeugen, ohne das Vertrauen zu beeinträchtigen.\"\n },\n {\n \"label\": \"Wie lautet die Rückgaberichtlinie?\",\n \"content\": \"Verlinke auf eine klare, prägnante Umtausch-\u002FRückgaberichtlinie, insbesondere für limitierte Artikel, die möglicherweise andere Regeln als Standardprodukte haben.\"\n },\n {\n \"label\": \"Kann ich einen Artikel vorbestellen oder reservieren?\",\n \"content\": \"Biete eine E-Mail-Benachrichtigung oder eine 'Benachrichtige mich'-Option an, um Interesse zu erfassen, aber manage Erwartungen bezüglich garantiertem Kauf.\"\n }\n ]\n },\n \"seo\": {\n \"title\": \"E-commerce Drop Landing Page Erstellen | Landing-Page\",\n \"description\": \"Erstelle mit KI eine E-commerce-Drop-Landing-Seite in Minuten. Countdown-Timer und Knappheits-Signale zum Steigern von Verkäufen.\"\n },\n \"h1\": \"Starte eine E-Commerce-Drop-Seite mit hohem Conversion-Rate\"\n}",{"title":82,"description":83,"items":84},"Seiten-Blueprint","Dieser Anwendungsfall umfasst 6 Schlüsselseiten, die Besucher vom Bewusstsein zur Handlung führen.",[85,88,91,94,97,100],{"title":86,"description":87},"Hero","Präsentiere deinen Drop mit erstklassiger Produktfotografie, einer markanten Überschrift und einem auffälligen Countdown-Timer above the fold.",{"title":89,"description":90},"Produktgeschichte","Erzähle die Geschichte hinter dem Drop — was ihn inspiriert hat, was ihn exklusiv macht und warum jetzt der richtige Zeitpunkt zum Kauf ist.",{"title":92,"description":93},"Sozialer Beweis","Zeige Live-Zähler, bisherige Ausverkaufs-Rekorde, Kundenfotos und Presseerwähnungen, um FOMO und Glaubwürdigkeit aufzubauen.",{"title":95,"description":96},"Funktionen & Details","Hebe einzigartige Materialien, Handwerkskunst und Spezifikationen hervor, die Exklusivität und Preisniveau rechtfertigen.",{"title":98,"description":99},"Kauf\u002FVorbestellung","Biete klare CTAs an, die sich dem Drop-Status anpassen: 'Benachrichtige mich' vor dem Launch, 'Jetzt kaufen' währenddessen und 'Warteliste beitreten' nach dem Ausverkauf.",{"title":101,"description":102},"FAQ","Beantworte Fragen zu Verfügbarkeit, Rückgaberichtlinie, Lieferzeiten und wie man reserviert oder vorbestellt.",{"title":104,"description":105},"E-commerce Drop Landing Page Erstellen | Landing-Page","Erstelle mit KI eine E-commerce-Drop-Landing-Seite in Minuten. Countdown-Timer und Knappheits-Signale zum Steigern von Verkäufen.",{"title":107,"description":108,"items":109},"SEO-Keywords","Verwende diese Keywords, um deine Seite für Suchmaschinen zu optimieren und die Auffindbarkeit zu verbessern.",[110,114,120],{"list_name":111,"keywords":112},"Primäres Keyword",[113],"Produkt-Drop-Landing-Seite",{"list_name":115,"keywords":116},"Sekundäre Keywords",[117,118,119],"limitierte Produktseite","E-Commerce-Drop-Seiten-Vorlage","Countdown-Landing-Seite",{"list_name":121,"keywords":122},"Long-Tail-Keywords",[123,124,125],"wie man Druck für einen Produkt-Drop erzeugt","beste E-Commerce-Landing-Seite für limitierte Releases","Produkt-Drop-Countdown-Timer Best Practices","use_cases\u002Fde\u002Fecommerce-landing-page",[65,128],"Verkäufe",{"title":130,"items":131},"Für wen ist es geeignet",[132,133,134,135,136],"DTC-Marken, die limitierte Produkt-Drops starten","Streetwear- und Sneaker-Marken, die Hype für Releases aufbauen","Verkäufer von Sammlerprodukten und Spezialartikeln","E-Commerce-Teams, die Flash-Sales oder saisonale Kampagnen durchführen","Unternehmer, die neue Produktkonzepte mit Vorbestellungen testen","SSEsI4C4OqrTtbshW3siChzmgA37GpD8uEc5YS7j3I0","\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",1777442241757]