Sokrates Website Development and Roadmap
Summary
The implementation of the Sokrates public-facing website, covering the transition from a static landing page to a functional lead-generation platform. This process includes the development of core UI components, SEO optimization, and the integration of an internationalization (i18n) system for the Icelandic market.
Details
The development of the Sokrates website followed a prioritized roadmap divided into P0 (pre-launch) and P1 (post-launch) phases. The primary objective was to transform the initial landing page into a professional, high-converting site for Icelandic SMEs, hosted at sokrates-ai.vercel.app.
P0 Implementation (Launch Readiness)
The initial phase focused on core functionality and lead generation. Key tasks included:
- CTA Integration: Wiring all Call-to-Action (CTA) buttons in the Hero, Navbar, and Pricing sections to a shared
#contactanchor. - Navigation: Implementation of a mobile-responsive hamburger menu with a slide-out drawer and focus trap for accessibility.
- Contact Section: A dedicated section (ADD-001) containing email, phone, and a contact form, positioned before the footer.
- Anchor Links: Adding specific IDs like
our-approachto theIntegrationJourneycomponent to facilitate smooth scrolling from the navigation menu.
P1 and Feature Enhancements
Following the initial launch, several features were added to improve social proof and user experience:
- Pricing Logic: A toggle was implemented to switch between monthly and yearly billing states. Pricing is tiered by company size: ISK 400K–800K/month retainer (yearly at ~17% discount).
- Content Blocks: A Case Study section featuring four automation examples and an FAQ accordion containing seven common questions were integrated.
- SEO and Metadata: Implementation of Twitter cards, JSON-LD structured data,
robots.txt, andsitemap.xmlto ensure search engine visibility. - Legal Pages: Creation of dedicated Privacy Policy and Terms of Service pages.
Architectural Standards
The website architecture was reorganized to improve maintainability and performance. Components were moved into a structured directory system consisting of sections/, layout/, and ui/ subdirectories.
To improve the user experience, the AnimatedSection was removed from the Navbar to eliminate “load flash” issues during initial page loads. A shared scrollToContact() utility was created to handle smooth scrolling across all CTA components consistently. Accessibility was prioritized through the use of aria-labels, skip-to-content links, and contrast checks.
Internationalization (i18n)
The final major phase of the roadmap involves a cross-cutting i18n implementation. This system uses an IS/EN dictionary approach, swapping hardcoded strings for lookups and adding a language toggle to support both Icelandic and English users. Because i18n touches every component, it was sequenced to occur after the structural components were finalized to avoid merge conflicts during parallel development by multiple agents.
Related
- Sokrates
- i18n Dictionary System
- Vercel Deployment
- IntegrationJourney Component