WhiteGate homepage set up with solid grid, pixel typography and electric blue signals.
Not a landing page, but a sales system of the conversion service
With WhiteGate, we actively offer artificial intelligence transformation services to companies. Most of the time, this service is not with the sentence “Let's use AI”; It starts with offers left in different messages, manual reports, disjointed CRM and ERP records, repeated document checks, or operations whose owner is not visible. That's why I designed the site not as a generic AI agency showcase showcasing tech names, but as a selling surface for the way we translate a business problem into a working system.
I carried out the strategy, information architecture, visual system, texts, responsive behavior and frontend application of the Landing experience from start to finish. The main narrative is based on the line “problem → flow → system → live use”. The visitor first recognizes the mess in his own operation; Then, he sees how custom software, automation, AI agent, integration or dashboard options are selected according to the problem, tested with real users and put into daily use.
Product architecture that embodies the service
WhiteGate's offering is not tied to a single technology. When necessary, we develop a web or mobile operations application, customer portal, artificial intelligence agent, workflow automation, data and tool integration or management dashboard. The site does not present this flexibility as a random list of services; It positions solution selection as the result of a process of discovery and scoping. Thus, AI is not a magic layer added to every problem, but a system component used if the data, process and acceptance criteria are appropriate.
Besides the home page, I developed separate routes for services, working system, about us, publications, case studies, contact, privacy and terms of use. Case and publication surfaces prove the methodology, while service pages capture purchase intent. The communication flow directs us to discuss the problem, available tools and expected output in the first meeting. This structure moves the brand from a landing that only attracts attention to a platform that can initiate real project discussions with companies.
Disorganized pursuit, disjointed vehicles and seemingly late decisions; Three operational signals that name the problem before the solution.
Visual language: technical and editorial, away from enterprise AI clichés
I didn't use robots, magic glitter, purple gradients or generic dashboard aesthetics for WhiteGate. I built the visual system around a nearly black technical grid, large white content surfaces, monospaced/pixel text, thin construction lines, and electric blue status signals. Angular blocks, numbering, slash marks, direction arrows and terminal-like micro texts in the interface make the "system building" character of the brand visible.
The large typographic phrase “Custom Software” in Hero has a typewriter behavior that works between “AI Agent” and “Automation”. This animation is not just decoration; It shows in a single sentence how WhiteGate can choose different tools depending on the problem. While the logo strip includes tools such as n8n, Claude, GPT, Zapier, Make and Gemini, I did not make them the heroes of the service. Vehicles may vary; Lasting value is understanding the company's workflow and establishing the right system.
The simple visual hierarchy keeps the problem name and systematization result readable at a glance.
Interaction system: movement that carries meaning
The site's movement language consists of a combination of GSAP-based scroll and text behaviors, interaction anatomy carried over from Webflow, and project-specific runtime layers. Scramble transitions in titles, hero typewriter, hover texts, skill tabs, mobile method cards, FAQ expansions, page transitions and testimonial flow work in the same visual language. Small pixel embers in the hero grid light up as random, low-intensity signals; If the user prefers reduced movement, these behaviors are disabled.
The important engineering decision here was not to rewrite the working slider and responsive structure for every visual idea. For example, I applied the testimonial scroll movement as a layer independent of the existing slide transforms; This resulted in a more characterful horizontal movement on the desktop while preserving arrows, swipe behavior and mobile flow. I prevented page splashing at 320, 390, 479 and 1280 pixel widths by fixing the header height and bracket anatomy as words changed in the Typewriter area.
Next.js implementation and content management
I developed WhiteGate as a production application on Next.js and TypeScript. Home page, service routes, publication and case list/details, contact, legal pages, 404/401 surfaces, sitemap, robots and dynamic Open Graph visual are all in the same application. I connected the route, metadata and data layer to the modern Next.js structure while preserving the necessary parts of the old visual runtime. This approach transformed the site into a sustainable content and marketing product without losing the design's unique movement system.
I integrated Sanity Studio into the `/studio` route of the application. Main hero texts, alternating words and CTAs can be managed via CMS; Publications and case studies are organized with Portable Text content, cover images, tags and publication dates. If the CMS connection is temporarily unavailable, the home page continues to work with static content. After the contact form passes the input verification and bot trap, the application is saved in Sanity; The team can manage the application's new, contacted, or closed status from within Studio.
Responsive quality, accessibility and production discipline
I rearranged the large editorial composition on desktop rather than making it smaller on mobile. Navigation, hero title, CTA widths, method cards and long section headings behave according to the operating logic of the small screen. Tab structures take into account keyboard and touch usage, videos take into account `playsInline` and muted behavior, and gesture system takes into account `prefers-reduced-motion` preference. In text animations, I preserved meaningful labels for the screen reader and treated the layer reserved for visual characters as a presentation detail.
On the production side, I used TypeScript control, Next.js build, real HTTP response, desktop/mobile screen observation, and live behavior on the domain as separate verification layers. In addition to the project ID and dataset configuration for Sanity Studio to run in the production domain, I also completed the CORS origin registration with credentials. Verifying mobile typewriter correction with source, build and live responsive measurements; It also meant owning the actual behavior of the design detail after deployment.
The living surface of an active service brand
Today, WhiteGate is an active business where we offer artificial intelligence transformation, custom software, automation and integration services to companies. For this reason, the site is not a portfolio experiment that is completed and abandoned; a living sales system that evolves as we sharpen our offering, add new cases and publications, and customer questions change. The content architecture and CMS are designed for this continuity, and the visual language is designed to distinguish at first glance how we work among dozens of similar AI agencies.
The work I undertook in this project was broader than the sum of the individual screens: positioning the service, translating the real operational problems of the companies into an understandable narrative, establishing a unique brand system, turning it into responsive and accessible working code, making the content operation sustainable with CMS and keeping it alive in production. WhiteGate has become one of the most comprehensive brand and frontend projects where product design and commercial service design meet on the same digital surface.
