{"slug": "i-rebuilt-an-ai-startup-s-landing-page-here-s-what-actually-went-into-it", "title": "I rebuilt an AI startup's landing page. here's what actually went into it.", "summary": "A developer rebuilt an AI startup's landing page in four weeks using Next.js, TypeScript, Tailwind, and GSAP. The new site features an animated hero, a tabbed department explorer for nine verticals, and a live agent console UI that lets visitors interact with the product before signing up. The project also includes a horizontal scroll section driven by GSAP's function-based values and responsive fallback handling.", "body_md": "The brief\n\nThe client runs an AI agent platform for D2C brands — 200+ agents across 9 departments. The product was solid. The website was one paragraph and a contact form.\n\nThey knew it needed work. They just hadn't gotten to it.\n\nWhat we built\n\nFull rebuild in Next.js + TypeScript + Tailwind + GSAP.\n\n— animated hero that actually shows what the product does instead of describing it\n\n— tabbed department explorer (9 verticals, all in one section without it feeling cluttered)\n\n— live agent console UI — gives visitors a sense of the product before they sign up\n\n— bento proof section for stats and client logos\n\nOne constraint I kept coming back to: the product is technical but the buyers aren't always developers. Every section had to be clear to a D2C brand owner who doesn't know what an AI agent is.\n\nOne thing worth mentioning about GSAP\n\nThe services section uses a horizontal scroll — the whole track slides left as you scroll down, pinned to the viewport. The tricky part is calculating how far it needs to travel: track.scrollWidth - window.innerWidth, and that number changes every time the viewport resizes. GSAP handles this cleanly with function-based values — instead of a fixed pixel distance, you pass a function to end and set invalidateOnRefresh: true, so ScrollTrigger re-runs the calculation on every resize automatically. The whole thing is also wrapped in gsap.matchMedia so it only activates on desktop — on mobile it falls back to a normal vertical stack.\n\nResult\n\nDelivered in under 4 weeks. Fixed scope, no surprises.\n\nLive at lancemart.org", "url": "https://wpnews.pro/news/i-rebuilt-an-ai-startup-s-landing-page-here-s-what-actually-went-into-it", "canonical_source": "https://dev.to/yasharya/i-rebuilt-an-ai-startups-landing-page-heres-what-actually-went-into-it-3346", "published_at": "2026-05-26 11:26:21+00:00", "updated_at": "2026-05-26 11:33:29.191465+00:00", "lang": "en", "topics": ["ai-startups", "ai-products", "ai-tools", "ai-agents"], "entities": ["Next.js", "TypeScript", "Tailwind", "GSAP", "ScrollTrigger"], "alternates": {"html": "https://wpnews.pro/news/i-rebuilt-an-ai-startup-s-landing-page-here-s-what-actually-went-into-it", "markdown": "https://wpnews.pro/news/i-rebuilt-an-ai-startup-s-landing-page-here-s-what-actually-went-into-it.md", "text": "https://wpnews.pro/news/i-rebuilt-an-ai-startup-s-landing-page-here-s-what-actually-went-into-it.txt", "jsonld": "https://wpnews.pro/news/i-rebuilt-an-ai-startup-s-landing-page-here-s-what-actually-went-into-it.jsonld"}}