[{"data":1,"prerenderedAt":141},["ShallowReactive",2],{"use-cases-ecommerce-landing-page-fr":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_fr\u002Fuse_cases\u002Ffr\u002Fecommerce-landing-page.json","Lancez une Page de Destination E-commerce à Forte Conversion",{"title":7,"do":8,"avoid":15},"Meilleures Pratiques",{"title":9,"items":10},"FAIRE",[11,12,13,14],"Utilisez une photographie produit de haute qualité montrant l'article sous plusieurs angles","Incluez un minuteur inversé proéminent pour créer de l'urgence et de l'anticipation","Ajoutez des preuves sociales comme des compteurs de spectateurs en direct, des records de rupture ou des photos de clients","Offrez une option « M'informer » pour capturer les e-mails des visiteurs qui arrivent en avance ou en retard",{"title":16,"items":17},"ÉVITER",[18,19,20,21],"Évitez les images produits de mauvaise qualité ou génériques — les drops nécessitent des visuels premium","Ne créez pas de fausse rareté qui nuit à la confiance avec votre public","Évitez les processus de caisse compliqués — simplifiez le parcours d'achat","N'ignorez jamais les utilisateurs mobiles, d'où provient plus de 65 % du trafic des drops",{"title":23,"description":24,"items":25},"Démarreurs de Texte","Utilisez-les comme inspiration pour votre propre texte. Personnalisez-les pour qu'ils correspondent à la voix de votre marque et à votre offre spécifique.",[26,29,32,42],{"label":27,"content":28},"Titre (Headline)","Le Drop [Nom du Produit] — Limité à [Nombre] Unités",{"label":30,"content":31},"Sous-titre (Subheadline)","Ne manquez pas la sortie que tout le monde attend. Le drop [Date] à [Heure].",{"label":33,"content":34},"Puces de Valeur",[35,38,40],{"icon":36,"content":37},"check","Détails finis à la main avec des matériaux premium",{"icon":36,"content":39},"Limité à [Nombre] pièces dans le monde entier",{"icon":36,"content":41},"Livraison gratuite sur toutes les commandes pendant le drop",{"label":43,"content":44},"Appel à l'Action","Me Notifier Quand C'est Disponible","https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Fimage\u002Fsolutions\u002Fnew\u002Fecommerce-product-drop.webp","Créez de l'urgence et stimulez les ventes avec des minuteurs inversés, des signaux de rareté et une caisse transparente pour les lancements de produits en édition limitée.","json",{"title":49,"items":50},"Questions Fréquemment Posées",[51,54,57,60],{"label":52,"content":53},"Quand le drop sera-t-il en ligne ?","Un minuteur inversé en direct doit être affiché de manière proéminente dans la section héro. Pour la pré-lancement, utilisez une date et une heure claires avec le fuseau horaire pour éviter la confusion.",{"label":55,"content":56},"Combien d'unités sont disponibles ?","La transparence est essentielle. Utilisez un compteur de quantité en direct (par ex. « 50 unités restantes ») pour créer de l'urgence sans compromettre la confiance.",{"label":58,"content":59},"Quelle est la politique de retour ?","Lien vers une politique de retour\u002Féchange claire et concise, en particulier pour les articles en édition limitée qui peuvent avoir des règles différentes des produits standard.",{"label":61,"content":62},"Puis-je précommander ou réserver un article ?","Offrez une notification par e-mail ou une option « M'informer » pour capturer l'intérêt, mais gérez les attentes concernant l'achat garanti.",{"title":64,"goal":65,"section_count":66,"drafting_time":67},"Faits Clés","E-commerce","6 sections","2-4 min pour rédiger",{},7,{"title":71,"description":72,"items":73},"Problèmes Résolus","Une page de destination de produit crée de l'urgence et de l'exclusivité que les pages produits standard ne peuvent pas offrir, générant une action immédiate et des taux de conversion plus élevés.",[74,75,76,77,78,79],"Stimule les achats immédiats grâce aux minuteurs inversés et aux signaux de rareté","Crée de l'anticipation et de la fidélité à la marque grâce à des événements de lancement exclusifs","Capture les inscriptions par e-mail et l'intérêt de la liste d'attente avant et après les drops","Réduit l'abandon de panier grâce à un processus de caisse simplifié et optimisé pour mobile","Crée du contenu partageable qui alimente le marketing organique et le bouche-à-oreille","Fournit une destination unique pour la presse, les influenceurs et les clients","{\n \"title\": \"Lancez une Page de Destination E-commerce à Forte Conversion\",\n \"description\": \"Créez de l'urgence et stimulez les ventes avec des minuteurs inversés, des signaux de rareté et une caisse transparente pour les lancements de produits en édition limitée.\",\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 \"Ventes\"\n ],\n \"sections\": {\n \"title\": \"Plan de la Page (Blueprint)\",\n \"description\": \"Ce cas d'utilisation comprend 6 sections clés conçues pour guider les visiteurs de la prise de conscience à l'action.\",\n \"items\": [\n {\n \"title\": \"Section Héro\",\n \"description\": \"Présentez votre drop avec une photographie produit époustouflante, un titre percutant et un minuteur inversé bien visible au-dessus de la ligne de flottaison.\"\n },\n {\n \"title\": \"Histoire du Produit\",\n \"description\": \"Racontez l'histoire derrière le lancement — ce qui l'a inspiré, pourquoi il est exclusif et pourquoi c'est le moment d'acheter.\"\n },\n {\n \"title\": \"Preuve Sociale\",\n \"description\": \"Affichez des compteurs en direct, des records de rupture de stock précédents, des photos de clients et des mentions presse pour créer le FOMO et la crédibilité.\"\n },\n {\n \"title\": \"Caractéristiques & Détails\",\n \"description\": \"Mettez en évidence les matériaux uniques, l'artisanat et les spécifications qui justifient l'exclusivité et le prix.\"\n },\n {\n \"title\": \"Achat\u002FPrécommande\",\n \"description\": \"Offrez des CTA clairs adaptés au statut du drop : « M'informer » avant le lancement, « Acheter maintenant » pendant, et « Liste d'attente » après la rupture.\"\n },\n {\n \"title\": \"FAQ\",\n \"description\": \"Répondez aux questions sur la disponibilité, la politique de retour, les délais de livraison et comment réserver ou précommander.\"\n }\n ]\n },\n \"who_it_is_for\": {\n \"title\": \"À qui s'adresse-t-il\",\n \"items\": [\n \"Marques DTC lançant des produits en édition limitée\",\n \"Marques de streetwear et de sneakers créant de l'enthousiasme pour les sorties\",\n \"Vendeurs de produits de collection et de spécialité\",\n \"Équipes e-commerce organisant des ventes flash ou des campagnes saisonnières\",\n \"Entrepreneurs testant de nouveaux concepts de produits avec des précommandes\"\n ]\n },\n \"problems_this_solves\": {\n \"title\": \"Problèmes Résolus\",\n \"description\": \"Une page de destination de produit crée de l'urgence et de l'exclusivité que les pages produits standard ne peuvent pas offrir, générant une action immédiate et des taux de conversion plus élevés.\",\n \"items\": [\n \"Stimule les achats immédiats grâce aux minuteurs inversés et aux signaux de rareté\",\n \"Crée de l'anticipation et de la fidélité à la marque grâce à des événements de lancement exclusifs\",\n \"Capture les inscriptions par e-mail et l'intérêt de la liste d'attente avant et après les drops\",\n \"Réduit l'abandon de panier grâce à un processus de caisse simplifié et optimisé pour mobile\",\n \"Crée du contenu partageable qui alimente le marketing organique et le bouche-à-oreille\",\n \"Fournit une destination unique pour la presse, les influenceurs et les clients\"\n ]\n },\n \"copy_starters\": {\n \"title\": \"Démarreurs de Texte\",\n \"description\": \"Utilisez-les comme inspiration pour votre propre texte. Personnalisez-les pour qu'ils correspondent à la voix de votre marque et à votre offre spécifique.\",\n \"items\": [\n {\n \"label\": \"Titre (Headline)\",\n \"content\": \"Le Drop [Nom du Produit] — Limité à [Nombre] Unités\"\n },\n {\n \"label\": \"Sous-titre (Subheadline)\",\n \"content\": \"Ne manquez pas la sortie que tout le monde attend. Le drop [Date] à [Heure].\"\n },\n {\n \"label\": \"Puces de Valeur\",\n \"content\": [\n {\n \"icon\": \"check\",\n \"content\": \"Détails finis à la main avec des matériaux premium\"\n },\n {\n \"icon\": \"check\",\n \"content\": \"Limité à [Nombre] pièces dans le monde entier\"\n },\n {\n \"icon\": \"check\",\n \"content\": \"Livraison gratuite sur toutes les commandes pendant le drop\"\n }\n ]\n },\n {\n \"label\": \"Appel à l'Action\",\n \"content\": \"Me Notifier Quand C'est Disponible\"\n }\n ]\n },\n \"best_practices\": {\n \"title\": \"Meilleures Pratiques\",\n \"do\": {\n \"title\": \"FAIRE\",\n \"items\": [\n \"Utilisez une photographie produit de haute qualité montrant l'article sous plusieurs angles\",\n \"Incluez un minuteur inversé proéminent pour créer de l'urgence et de l'anticipation\",\n \"Ajoutez des preuves sociales comme des compteurs de spectateurs en direct, des records de rupture ou des photos de clients\",\n \"Offrez une option « M'informer » pour capturer les e-mails des visiteurs qui arrivent en avance ou en retard\"\n ]\n },\n \"avoid\": {\n \"title\": \"ÉVITER\",\n \"items\": [\n \"Évitez les images produits de mauvaise qualité ou génériques — les drops nécessitent des visuels premium\",\n \"Ne créez pas de fausse rareté qui nuit à la confiance avec votre public\",\n \"Évitez les processus de caisse compliqués — simplifiez le parcours d'achat\",\n \"N'ignorez jamais les utilisateurs mobiles, d'où provient plus de 65 % du trafic des drops\"\n ]\n }\n },\n \"seo_keywords\": {\n \"title\": \"Mots-clés SEO\",\n \"description\": \"Utilisez ces **mots-clés** pour optimiser votre page pour les moteurs de recherche et améliorer la découvrabilité.\",\n \"items\": [\n {\n \"list_name\": \"Mot-clé Principal\",\n \"keywords\": [\n \"page de destination produit drop\"\n ]\n },\n {\n \"list_name\": \"Mots-clés Secondaires\",\n \"keywords\": [\n \"page produit édition limitée\",\n \"modèle de page drop e-commerce\",\n \"page de destination minuteur\"\n ]\n },\n {\n \"list_name\": \"Mots-clés Longue Traîne (Long-Tail)\",\n \"keywords\": [\n \"comment créer de l'urgence pour un lancement de produit\",\n \"meilleure page de destination e-commerce pour sorties en édition limitée\",\n \"meilleures pratiques minuteur pour drop de produit\"\n ]\n }\n ]\n },\n \"key_facts\": {\n \"title\": \"Faits Clés\",\n \"goal\": \"E-commerce\",\n \"section_count\": \"6 sections\",\n \"drafting_time\": \"2-4 min pour rédiger\"\n },\n \"faq\": {\n \"title\": \"Questions Fréquemment Posées\",\n \"items\": [\n {\n \"label\": \"Quand le drop sera-t-il en ligne ?\",\n \"content\": \"Un minuteur inversé en direct doit être affiché de manière proéminente dans la section héro. Pour la pré-lancement, utilisez une date et une heure claires avec le fuseau horaire pour éviter la confusion.\"\n },\n {\n \"label\": \"Combien d'unités sont disponibles ?\",\n \"content\": \"La transparence est essentielle. Utilisez un compteur de quantité en direct (par ex. « 50 unités restantes ») pour créer de l'urgence sans compromettre la confiance.\"\n },\n {\n \"label\": \"Quelle est la politique de retour ?\",\n \"content\": \"Lien vers une politique de retour\u002Féchange claire et concise, en particulier pour les articles en édition limitée qui peuvent avoir des règles différentes des produits standard.\"\n },\n {\n \"label\": \"Puis-je précommander ou réserver un article ?\",\n \"content\": \"Offrez une notification par e-mail ou une option « M'informer » pour capturer l'intérêt, mais gérez les attentes concernant l'achat garanti.\"\n }\n ]\n },\n \"seo\": {\n \"title\": \"Créer une Page de Destination E-commerce Drop | Landing-Page\",\n \"description\": \"Créez une page de destination e-commerce drop avec l'IA en quelques minutes. Minuteurs inversés et signaux de rareté pour stimuler les ventes.\"\n },\n \"h1\": \"Lancez une Page de Destination E-commerce à Forte Conversion\"\n}",{"title":82,"description":83,"items":84},"Plan de la Page (Blueprint)","Ce cas d'utilisation comprend 6 sections clés conçues pour guider les visiteurs de la prise de conscience à l'action.",[85,88,91,94,97,100],{"title":86,"description":87},"Section Héro","Présentez votre drop avec une photographie produit époustouflante, un titre percutant et un minuteur inversé bien visible au-dessus de la ligne de flottaison.",{"title":89,"description":90},"Histoire du Produit","Racontez l'histoire derrière le lancement — ce qui l'a inspiré, pourquoi il est exclusif et pourquoi c'est le moment d'acheter.",{"title":92,"description":93},"Preuve Sociale","Affichez des compteurs en direct, des records de rupture de stock précédents, des photos de clients et des mentions presse pour créer le FOMO et la crédibilité.",{"title":95,"description":96},"Caractéristiques & Détails","Mettez en évidence les matériaux uniques, l'artisanat et les spécifications qui justifient l'exclusivité et le prix.",{"title":98,"description":99},"Achat\u002FPrécommande","Offrez des CTA clairs adaptés au statut du drop : « M'informer » avant le lancement, « Acheter maintenant » pendant, et « Liste d'attente » après la rupture.",{"title":101,"description":102},"FAQ","Répondez aux questions sur la disponibilité, la politique de retour, les délais de livraison et comment réserver ou précommander.",{"title":104,"description":105},"Créer une Page de Destination E-commerce Drop | Landing-Page","Créez une page de destination e-commerce drop avec l'IA en quelques minutes. Minuteurs inversés et signaux de rareté pour stimuler les ventes.",{"title":107,"description":108,"items":109},"Mots-clés SEO","Utilisez ces **mots-clés** pour optimiser votre page pour les moteurs de recherche et améliorer la découvrabilité.",[110,114,120],{"list_name":111,"keywords":112},"Mot-clé Principal",[113],"page de destination produit drop",{"list_name":115,"keywords":116},"Mots-clés Secondaires",[117,118,119],"page produit édition limitée","modèle de page drop e-commerce","page de destination minuteur",{"list_name":121,"keywords":122},"Mots-clés Longue Traîne (Long-Tail)",[123,124,125],"comment créer de l'urgence pour un lancement de produit","meilleure page de destination e-commerce pour sorties en édition limitée","meilleures pratiques minuteur pour drop de produit","use_cases\u002Ffr\u002Fecommerce-landing-page",[65,128],"Ventes",{"title":130,"items":131},"À qui s'adresse-t-il",[132,133,134,135,136],"Marques DTC lançant des produits en édition limitée","Marques de streetwear et de sneakers créant de l'enthousiasme pour les sorties","Vendeurs de produits de collection et de spécialité","Équipes e-commerce organisant des ventes flash ou des campagnes saisonnières","Entrepreneurs testant de nouveaux concepts de produits avec des précommandes","BRDDuXnBqwiTZye2SH3EWWIaLnjspoBybniy9uReCpY","\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",1777442241714]