[{"data":1,"prerenderedAt":141},["ShallowReactive",2],{"use-cases-ecommerce-landing-page-ko":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_ko\u002Fuse_cases\u002Fko\u002Fecommerce-landing-page.json","고전환율 이커머스 드롭 랜딩 페이지 론칭",{"title":7,"do":8,"avoid":15},"모범 사례",{"title":9,"items":10},"해야 할 일",[11,12,13,14],"여러 각도에서 상품을 보여주는 고품질 상품 사진을 사용하세요","긴박감과 기대감을 높이기 위해 눈에 띄는 카운트다운 타이머를 포함하세요","실시간 시청자 수, 이전 매진 기록, 고객 사진과 같은 소셜 프루프를 추가하세요","일찍 또는 늦게 도착한 방문자의 이메일을 확보하기 위해 '알림 받기' 옵션을 제공하세요",{"title":16,"items":17},"피해야 할 일",[18,19,20,21],"저품질이나 일반적인 상품 이미지를 피하세요—드롭에는 프리미엄 비주얼이 필요합니다","오디언스의 신뢰를 훼손하는 가짜 희소성을 만들지 마세요","복잡한 결제 절차를 피하세요—구매 경로를 간소화하세요","드롭 트래픽의 65% 이상이 모바일에서 발생하므로 모바일 사용자를 절대 간과하지 마세요",{"title":23,"description":24,"items":25},"카피 시작 문구","이를 여러분의 카피에 대한 영감으로 사용하세요. 브랜드 보이스와 구체적인 제안에 맞게 사용자 정의하세요.",[26,29,32,42],{"label":27,"content":28},"헤드라인","[상품명] 드롭—[수량]개 한정",{"label":30,"content":31},"서브헤드라인","모두가 기다리는 출시를 놓치지 마세요. [날짜] [시간]에 드롭됩니다.",{"label":33,"content":34},"가치 요점",[35,38,40],{"icon":36,"content":37},"check","프리미엄 소재로 수작업 마감 처리",{"icon":36,"content":39},"전 세계 [수량]개 한정",{"icon":36,"content":41},"드롭 기간 중 모든 주문 무료 배송",{"label":43,"content":44},"콜투액션 (CTA)","드롭 시 알림 받기","https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Fimage\u002Fsolutions\u002Fnew\u002Fecommerce-product-drop.webp","카운트다운 타이머, 희소성 시그널, 원클릭 결제로 한정판 상품 드롭의 긴박감을 조성하고 판매를 촉진하세요.","json",{"title":49,"items":50},"자주 묻는 질문",[51,54,57,60],{"label":52,"content":53},"드롭은 언제 시작되나요?","히어로 섹션에 실시간 카운트다운 타이머를 눈에 띄게 표시해야 합니다. 사전 출시의 경우, 혼동을 방지하기 위해 명확한 날짜와 시간을 시간대와 함께 표시하세요.",{"label":55,"content":56},"몇 개의 상품이 있나요?","투명성이 핵심입니다. 실시간 수량 카운터(예: '50개 남음')를 사용하여 신뢰를 손상시키지 않으면서 긴박감을 조성하세요.",{"label":58,"content":59},"반품 정책은 어떻게 되나요?","명확하고 간결한 반품\u002F교환 정책을 링크하세요. 특히 한정판 상품은 일반 상품과 다른 규칙이 적용될 수 있습니다.",{"label":61,"content":62},"예약 주문이나 예약이 가능한가요?","이메일 알림 또는 '알림 받기' 옵션을 제공하여 관심을 확보하세요. 다만 보장 구매에 대한 기대를 관리해야 합니다.",{"title":64,"goal":65,"section_count":66,"drafting_time":67},"주요 사실","E-commerce","6개 섹션","초안 작성 2-4분",{},7,{"title":71,"description":72,"items":73},"해결하는 문제점","상품 드롭 랜딩 페이지는 일반 상품 페이지가 제공할 수 없는 긴박감과 독점감을 조성하여 즉각적인 행동과 높은 전환율을 이끌어냅니다.",[74,75,76,77,78,79],"카운트다운 타이머와 희소성 시그널로 즉각적인 구매를 유도합니다","독점 출시 이벤트를 통해 기대감과 브랜드 충성도를 구축합니다","드롭 전후에 이메일 가입과 대기자 관심을 확보합니다","간소화된 모바일 최적화 결제로 장바구니 이탈을 줄입니다","바이럴 마케팅과 입소문을 촉진하는 공유 가능한 콘텐츠를 만듭니다","언론, 인플루언서, 고객을 위한 단일 목적지를 제공합니다","{\n \"title\": \"고전환율 이커머스 드롭 랜딩 페이지 론칭\",\n \"description\": \"카운트다운 타이머, 희소성 시그널, 원클릭 결제로 한정판 상품 드롭의 긴박감을 조성하고 판매를 촉진하세요.\",\n \"order\": 7,\n \"cover\": \"https:\u002F\u002Fcdn.landing-page.io\u002Flandingpage_io\u002Fimage\u002Fsolutions\u002Fnew\u002Fecommerce-product-drop.webp\",\n \"tags\": [\n \"E-commerce\",\n \"Sales\"\n ],\n \"sections\": {\n \"title\": \"페이지 청사진\",\n \"description\": \"이 사용 사례에는 방문자를 인지에서 행동으로 안내하도록 설계된 6가지 주요 섹션이 포함되어 있습니다.\",\n \"items\": [\n {\n \"title\": \"히어로\",\n \"description\": \"눈에 띄는 상품 사진, 강렬한 헤드라인, 그리고 눈에 띄는 카운트다운 타이머로 드롭을 상단에 소개하세요.\"\n },\n {\n \"title\": \"상품 스토리\",\n \"description\": \"드롭의 배경 이야기를 전하세요—무엇이 영감을 주었는지, 왜 독점적인지, 지금이 구매 시기인 이유를 설명하세요.\"\n },\n {\n \"title\": \"소셜 프루프\",\n \"description\": \"실시간 카운터, 이전 매진 기록, 고객 사진, 언론 보도를 표시하여 FOMO와 신뢰도를 구축하세요.\"\n },\n {\n \"title\": \"기능 및 상세 정보\",\n \"description\": \"독점성과 가격대를 정당화하는 고유한 소재, 장인 정신, 사양을 강조하세요.\"\n },\n {\n \"title\": \"구매\u002F예약 주문\",\n \"description\": \"드롭 상태에 맞는 명확한 CTA를 제공하세요: 출시 전 '알림 받기', 진행 중 '지금 구매', 매진 후 '대기자 등록'.\"\n },\n {\n \"title\": \"FAQ\",\n \"description\": \"재고, 반품 정책, 배송 일정, 예약 또는 예약 주문 방법에 대한 질문을 해결하세요.\"\n }\n ]\n },\n \"who_it_is_for\": {\n \"title\": \"대상\",\n \"items\": [\n \"한정판 상품 드롭을 출시하는 DTC 브랜드\",\n \"출시를 앞두고 기대감을 조성하는 스트릿웨어 및 스니커즈 브랜드\",\n \"수집품 및 전문 상품 판매자\",\n \"플래시 세일이나 시즌 캠페인을 진행하는 이커머스 팀\",\n \"예약 주문으로 신규 상품 컨셉을 테스트하는 기업가\"\n ]\n },\n \"problems_this_solves\": {\n \"title\": \"해결하는 문제점\",\n \"description\": \"상품 드롭 랜딩 페이지는 일반 상품 페이지가 제공할 수 없는 긴박감과 독점감을 조성하여 즉각적인 행동과 높은 전환율을 이끌어냅니다.\",\n \"items\": [\n \"카운트다운 타이머와 희소성 시그널로 즉각적인 구매를 유도합니다\",\n \"독점 출시 이벤트를 통해 기대감과 브랜드 충성도를 구축합니다\",\n \"드롭 전후에 이메일 가입과 대기자 관심을 확보합니다\",\n \"간소화된 모바일 최적화 결제로 장바구니 이탈을 줄입니다\",\n \"바이럴 마케팅과 입소문을 촉진하는 공유 가능한 콘텐츠를 만듭니다\",\n \"언론, 인플루언서, 고객을 위한 단일 목적지를 제공합니다\"\n ]\n },\n \"copy_starters\": {\n \"title\": \"카피 시작 문구\",\n \"description\": \"이를 여러분의 카피에 대한 영감으로 사용하세요. 브랜드 보이스와 구체적인 제안에 맞게 사용자 정의하세요.\",\n \"items\": [\n {\n \"label\": \"헤드라인\",\n \"content\": \"[상품명] 드롭—[수량]개 한정\"\n },\n {\n \"label\": \"서브헤드라인\",\n \"content\": \"모두가 기다리는 출시를 놓치지 마세요. [날짜] [시간]에 드롭됩니다.\"\n },\n {\n \"label\": \"가치 요점\",\n \"content\": [\n {\n \"icon\": \"check\",\n \"content\": \"프리미엄 소재로 수작업 마감 처리\"\n },\n {\n \"icon\": \"check\",\n \"content\": \"전 세계 [수량]개 한정\"\n },\n {\n \"icon\": \"check\",\n \"content\": \"드롭 기간 중 모든 주문 무료 배송\"\n }\n ]\n },\n {\n \"label\": \"콜투액션 (CTA)\",\n \"content\": \"드롭 시 알림 받기\"\n }\n ]\n },\n \"best_practices\": {\n \"title\": \"모범 사례\",\n \"do\": {\n \"title\": \"해야 할 일\",\n \"items\": [\n \"여러 각도에서 상품을 보여주는 고품질 상품 사진을 사용하세요\",\n \"긴박감과 기대감을 높이기 위해 눈에 띄는 카운트다운 타이머를 포함하세요\",\n \"실시간 시청자 수, 이전 매진 기록, 고객 사진과 같은 소셜 프루프를 추가하세요\",\n \"일찍 또는 늦게 도착한 방문자의 이메일을 확보하기 위해 '알림 받기' 옵션을 제공하세요\"\n ]\n },\n \"avoid\": {\n \"title\": \"피해야 할 일\",\n \"items\": [\n \"저품질이나 일반적인 상품 이미지를 피하세요—드롭에는 프리미엄 비주얼이 필요합니다\",\n \"오디언스의 신뢰를 훼손하는 가짜 희소성을 만들지 마세요\",\n \"복잡한 결제 절차를 피하세요—구매 경로를 간소화하세요\",\n \"드롭 트래픽의 65% 이상이 모바일에서 발생하므로 모바일 사용자를 절대 간과하지 마세요\"\n ]\n }\n },\n \"seo_keywords\": {\n \"title\": \"SEO 키워드\",\n \"description\": \"이러한 키워드를 사용하여 검색 엔진에 맞게 페이지를 최적화하고 검색 용이성을 개선하세요.\",\n \"items\": [\n {\n \"list_name\": \"주요 키워드\",\n \"keywords\": [\n \"상품 드롭 랜딩 페이지\"\n ]\n },\n {\n \"list_name\": \"보조 키워드\",\n \"keywords\": [\n \"한정판 상품 페이지\",\n \"이커머스 드롭 페이지 템플릿\",\n \"카운트다운 랜딩 페이지\"\n ]\n },\n {\n \"list_name\": \"롱테일 키워드\",\n \"keywords\": [\n \"상품 드롭의 긴박감을 만드는 방법\",\n \"한정판 출시에 가장 좋은 이커머스 랜딩 페이지\",\n \"상품 드롭 카운트다운 타이머 모범 사례\"\n ]\n }\n ]\n },\n \"key_facts\": {\n \"title\": \"주요 사실\",\n \"goal\": \"E-commerce\",\n \"section_count\": \"6개 섹션\",\n \"drafting_time\": \"초안 작성 2-4분\"\n },\n \"faq\": {\n \"title\": \"자주 묻는 질문\",\n \"items\": [\n {\n \"label\": \"드롭은 언제 시작되나요?\",\n \"content\": \"히어로 섹션에 실시간 카운트다운 타이머를 눈에 띄게 표시해야 합니다. 사전 출시의 경우, 혼동을 방지하기 위해 명확한 날짜와 시간을 시간대와 함께 표시하세요.\"\n },\n {\n \"label\": \"몇 개의 상품이 있나요?\",\n \"content\": \"투명성이 핵심입니다. 실시간 수량 카운터(예: '50개 남음')를 사용하여 신뢰를 손상시키지 않으면서 긴박감을 조성하세요.\"\n },\n {\n \"label\": \"반품 정책은 어떻게 되나요?\",\n \"content\": \"명확하고 간결한 반품\u002F교환 정책을 링크하세요. 특히 한정판 상품은 일반 상품과 다른 규칙이 적용될 수 있습니다.\"\n },\n {\n \"label\": \"예약 주문이나 예약이 가능한가요?\",\n \"content\": \"이메일 알림 또는 '알림 받기' 옵션을 제공하여 관심을 확보하세요. 다만 보장 구매에 대한 기대를 관리해야 합니다.\"\n }\n ]\n },\n \"seo\": {\n \"title\": \"이커머스 상품 드롭 랜딩페이지 만들기 | Landing-Page\",\n \"description\": \"AI로 이커머스 상품 드롭 랜딩페이지를 몇 분 만에 만드세요. 카운트다운 타이머와 희소성 시그널로 판매를 촉진하세요.\"\n },\n \"h1\": \"고전환율 이커머스 드롭 랜딩 페이지 론칭\"\n}",{"title":82,"description":83,"items":84},"페이지 청사진","이 사용 사례에는 방문자를 인지에서 행동으로 안내하도록 설계된 6가지 주요 섹션이 포함되어 있습니다.",[85,88,91,94,97,100],{"title":86,"description":87},"히어로","눈에 띄는 상품 사진, 강렬한 헤드라인, 그리고 눈에 띄는 카운트다운 타이머로 드롭을 상단에 소개하세요.",{"title":89,"description":90},"상품 스토리","드롭의 배경 이야기를 전하세요—무엇이 영감을 주었는지, 왜 독점적인지, 지금이 구매 시기인 이유를 설명하세요.",{"title":92,"description":93},"소셜 프루프","실시간 카운터, 이전 매진 기록, 고객 사진, 언론 보도를 표시하여 FOMO와 신뢰도를 구축하세요.",{"title":95,"description":96},"기능 및 상세 정보","독점성과 가격대를 정당화하는 고유한 소재, 장인 정신, 사양을 강조하세요.",{"title":98,"description":99},"구매\u002F예약 주문","드롭 상태에 맞는 명확한 CTA를 제공하세요: 출시 전 '알림 받기', 진행 중 '지금 구매', 매진 후 '대기자 등록'.",{"title":101,"description":102},"FAQ","재고, 반품 정책, 배송 일정, 예약 또는 예약 주문 방법에 대한 질문을 해결하세요.",{"title":104,"description":105},"이커머스 상품 드롭 랜딩페이지 만들기 | Landing-Page","AI로 이커머스 상품 드롭 랜딩페이지를 몇 분 만에 만드세요. 카운트다운 타이머와 희소성 시그널로 판매를 촉진하세요.",{"title":107,"description":108,"items":109},"SEO 키워드","이러한 키워드를 사용하여 검색 엔진에 맞게 페이지를 최적화하고 검색 용이성을 개선하세요.",[110,114,120],{"list_name":111,"keywords":112},"주요 키워드",[113],"상품 드롭 랜딩 페이지",{"list_name":115,"keywords":116},"보조 키워드",[117,118,119],"한정판 상품 페이지","이커머스 드롭 페이지 템플릿","카운트다운 랜딩 페이지",{"list_name":121,"keywords":122},"롱테일 키워드",[123,124,125],"상품 드롭의 긴박감을 만드는 방법","한정판 출시에 가장 좋은 이커머스 랜딩 페이지","상품 드롭 카운트다운 타이머 모범 사례","use_cases\u002Fko\u002Fecommerce-landing-page",[65,128],"Sales",{"title":130,"items":131},"대상",[132,133,134,135,136],"한정판 상품 드롭을 출시하는 DTC 브랜드","출시를 앞두고 기대감을 조성하는 스트릿웨어 및 스니커즈 브랜드","수집품 및 전문 상품 판매자","플래시 세일이나 시즌 캠페인을 진행하는 이커머스 팀","예약 주문으로 신규 상품 컨셉을 테스트하는 기업가","kEG_aevN1PewpC9KN7GH9ofKufDSknmcSSJLNp3SSoA","\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",1777442241509]