Transform Your Business with AI

A modern, responsive landing page for AI solutions across industries

liber8ai is a cutting-edge landing page showcasing AI solutions for various industries including healthcare, finance, retail, manufacturing, logistics, and education. Built with modern web technologies and design principles, it delivers a premium user experience with smooth animations and responsive design.

• Modern Dark Theme with gradient accents
• Responsive Design optimized for all devices
• Smooth Animations with CSS transforms and transitions
• Glassmorphism Effects with backdrop blur
• Professional Typography using Inter font family

• Semantic HTML5 structure
• Modular CSS Architecture (components, animations, utilities)
• Vanilla JavaScript for interactions
• CSS Grid & Flexbox for layouts
• Mobile-First Design approach
• Accessibility Compliant (WCAG guidelines)

• Healthcare AI - Diagnostics and patient care
• Financial Services - Risk assessment and fraud detection
• Retail & E-commerce - Personalized recommendations
• Manufacturing - Predictive maintenance
• Logistics - Route optimization
• Education - Personalized learning

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Styling: Custom CSS with CSS Variables
• Fonts: Google Fonts (Inter)
• Icons: Emoji-based icons
• Animations: CSS Transitions & Transforms

liber8ai/
├── index.html              # Main HTML file
├── styles.css              # Main stylesheet
├── script.js               # Main JavaScript file
├── css/
│   ├── animations.css      # Animation utilities
│   └── components.css      # Component styles
├── js/
│   └── animations.js       # Animation controllers
├── assets/
│   ├── logo.png           # Main logo
│   └── logotransparent.png # Transparent logo
├── README.md              # Project documentation
└── CNAME                  # Custom domain config

/* Dark Theme */
--bg-primary: #000000;       /* Pure black */
--bg-secondary: #0a0a0a;     /* Slightly lighter black */
--text-primary: #ffffff;     /* Pure white */
--text-secondary: #a3a3a3;   /* Gray text */

/* Gradients */
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

--font-size-xs: 0.75rem;     /* 12px */
--font-size-sm: 0.875rem;    /* 14px */
--font-size-base: 1rem;      /* 16px */
--font-size-xl: 1.25rem;     /* 20px */
--font-size-2xl: 1.5rem;     /* 24px */
--font-size-3xl: 1.875rem;   /* 30px */

--spacing-xs: 0.5rem;        /* 8px */
--spacing-sm: 1rem;          /* 16px */
--spacing-md: 1.5rem;        /* 24px */
--spacing-lg: 2rem;          /* 32px */
--spacing-xl: 2.5rem;        /* 40px */

• A modern web browser
• Basic knowledge of HTML, CSS, and JavaScript

1. Clone the repository

   git clone https://github.com/yourusername/liber8ai.git
   cd liber8ai

2. Open in browser

   # Simply open index.html in your browser
   open index.html

3. Or use a local server

   # Using Python
   python -m http.server 8000
   
   # Using Node.js
   npx serve .
   
   # Using VS Code Live Server extension

• Fixed header with blur effect
• Smooth scroll navigation
• Mobile hamburger menu
• Responsive logo scaling

• Gradient text effects
• Call-to-action buttons
• Responsive typography

• 6 industry solution cards
• Hover animations
• Icon-based design
• Responsive grid layout

• Animated counters
• Gradient backgrounds
• Flex-based layout

• Multi-column layout
• Company links
• Social media ready

• Fade In: Smooth element entrance
• Slide Up: Content reveal animation
• Hover Effects: Interactive feedback
• Parallax: Subtle depth effects

• Smooth Scrolling: Navigation links
• Counter Animation: Statistics
• Mobile Menu: Toggle functionality
• Scroll Effects: Dynamic styling

Edit the CSS variables in styles.css:

:root {
  --gradient-primary: your-gradient-here;
  --text-primary: your-color-here;
}

1. Add HTML structure in index.html
2. Create styles in css/components.css
3. Add animations in css/animations.css
4. Add interactions in js/animations.js

• Edit text content in index.html
• Update company information
• Change contact details
• Modify industry solutions

• ✅ Chrome 88+
• ✅ Firefox 85+
• ✅ Safari 14+
• ✅ Edge 88+
• ✅ Mobile browsers

• Lighthouse Score: 95+
• First Contentful Paint: < 1.5s
• Largest Contentful Paint: < 2.5s
• Cumulative Layout Shift: < 0.1

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• Design Inspiration: Modern AI company websites
• Icons: Emoji-based iconography
• Fonts: Google Fonts (Inter)
• Animation Ideas: CSS animation community

• Website: https://liber8ai.com
• Email: hello@liber8ai.com
• LinkedIn: Company Profile