Fransolution.net - IT Consulting & AI Automation Platform

Frontend Framework: Next.js 15.4.1 with React 19.1.0 for modern component-based architecture and optimal performance.

Styling: Tailwind CSS 4.1.11 for utility-first styling, custom gradients, and responsive design.

Icons & UI: Heroicons and React Icons for consistent iconography throughout the interface.

Build Tools: PostCSS, Autoprefixer, and ESLint for code quality and browser compatibility.

Deployment: Static site generation with Next.js export functionality, optimized for AWS S3 hosting.

Fransolution.net targets three key sectors in Mexico:

• Educational Institutions: Schools requiring IT infrastructure, Wi-Fi setup, and digital transformation
• Healthcare Clinics: Medical facilities needing ERP systems, automation workflows, and networking solutions
• Small Businesses: Companies seeking cost-effective IT consulting and AI automation solutions

The company positions itself as 40% more cost-efficient than larger firms while providing personalized, hands-on service with transparent pricing.

The website showcases comprehensive IT consulting services:

• IT Consulting & Strategy: Tailored IT roadmaps and strategic planning
• AI Workflow Automation: Custom automation solutions to reduce manual processes and errors
• Website Development: SEO-optimized, high-performing websites with marketing focus
• Networking & Wireless Setup: Secure network design and implementation
• ERP Systems (Odoo POS): Point-of-sale and ERP solutions for schools and clinics
• Digital Transformation: Comprehensive assessments, roadmaps, and change management

The website follows a modular component-based architecture:

• TopBar: Contact information and business hours header
• Navbar: Smooth scrolling navigation with responsive design
• Hero/Hero2: Dynamic hero sections with AI workflow animations
• Services: Interactive service grid with icon integration
• WhyUs: Value proposition section with visual elements and proof points
• Process: Step-by-step methodology visualization
• Testimonials: Client feedback and success stories
• FAQ: Frequently asked questions with accordion interface
• Blog: Recent articles and industry insights
• CTA & Footer: Conversion-focused calls-to-action and company information

The project utilizes Next.js static export capabilities for optimal performance and cost-effectiveness:

• Static Export Configuration: Next.js configured with output: 'export' for static site generation
• Image Optimization: Disabled Next.js image optimization for S3 compatibility
• AWS S3 Hosting: Cost-effective static website hosting with global CDN distribution
• Performance Benefits: Fast loading times, minimal server requirements, and excellent SEO performance

This deployment strategy eliminates server-side rendering overhead while maintaining all the benefits of React-based development.

The website features modern design principles focused on conversion and user engagement:

• Professional gradient designs and subtle animations
• Responsive layout optimized for all device sizes
• Clear information hierarchy and intuitive navigation
• Bilingual support for Spanish and English markets
• Strategic placement of call-to-action elements
• Client testimonials and case studies for credibility
• SEO-optimized content structure for better search visibility

A sophisticated AI-powered chatbot was developed to provide intelligent customer support trained on company-specific data from Google Drive:

• AI Models: Google Gemini for natural language processing and ChatGPT embedding models for semantic search
• Data Pipeline: Automated training on documents stored in Google Drive folders, allowing easy content updates by the client
• Vector Database: Supabase for efficient vector storage and similarity search capabilities
• Chat Interface: N8N workflow automation platform serving as the chat backend and orchestration layer
• Static Integration: Seamlessly integrated into the Next.js static site without requiring server-side infrastructure
• Smart Training: The chatbot automatically learns from new documents added to the Google Drive folder, ensuring up-to-date responses about services, pricing, and company information

This RAG (Retrieval-Augmented Generation) approach ensures accurate, context-aware responses while maintaining the benefits of static site deployment.

Code Quality: ESLint configuration ensures consistent code standards and best practices throughout the project.

Component Reusability: Modular design allows for easy maintenance and feature additions without affecting other parts of the application.

Data Management: Centralized data structure in lib/data.js for services, testimonials, case studies, and navigation links.

Performance Optimization: Static site generation eliminates runtime overhead and provides excellent Core Web Vitals scores.